/*! RONVO Team Center 8.4.3 | Stable desktop shell with isolated mobile drawer */
.mobile-sidebar-close{display:none;}
@media (max-width: 900px) {
  :root { --mobile-gutter: 16px; --mobile-nav-height: 76px; --mobile-header-height: 70px; }
  html, body { min-height: 100%; overscroll-behavior-x: none; }
  body.app-shell { min-height: 100dvh; overflow-x: clip; }
  body.menu-open { overflow: hidden; touch-action: none; }

  .main { margin-left: 0 !important; width: 100%; min-width: 0; }
  .topbar {
    position: sticky; top: 0; z-index: 30;
    height: calc(var(--mobile-header-height) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) var(--mobile-gutter) 0;
    display: grid; grid-template-columns: 50px minmax(0,1fr) auto; gap: 12px;
    align-items: center; background: color-mix(in srgb,var(--rtc-bg) 92%,transparent);
    backdrop-filter: saturate(160%) blur(18px);
  }
  .menu-toggle {
    display: grid; place-items: center; position: fixed;
    left: var(--mobile-gutter); top: calc(env(safe-area-inset-top) + 10px);
    z-index: 1003; width: 50px; height: 50px; padding: 0;
    border: 1px solid rgba(255,255,255,.1); border-radius: 17px;
    background: #172033; color: #fff; box-shadow: 0 10px 24px rgba(23,32,51,.20);
    transition: opacity .18s ease, visibility .18s ease, transform .22s ease, box-shadow .22s ease;
    pointer-events:auto; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  }
  .menu-toggle svg { width: 24px; height: 24px; }
  .menu-toggle:active { transform: scale(.96); }
  .page-heading { grid-column: 2; min-width: 0; }
  .page-heading span { display: none; }
  .page-heading h1 { margin: 0; font-size: 20px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-actions { grid-column: 3; gap: 8px; margin-left: 0; }
  .topbar-search, .profile-chip { display: none !important; }
  .theme-toggle, .notification-link { width: 44px; height: 44px; border-radius: 15px; box-shadow: 0 5px 16px rgba(30,48,78,.07); }

  .sidebar {
    display: flex; position: fixed; inset: 0 auto 0 0; z-index: 1002;
    width: min(86vw, 350px); height: 100dvh;
    padding: calc(env(safe-area-inset-top) + 18px) 18px calc(env(safe-area-inset-bottom) + 18px);
    transform: translate3d(-104%,0,0); transition: transform .28s cubic-bezier(.22,.8,.22,1);
    background: var(--rtc-surface); color: var(--rtc-text); border-right: 1px solid var(--rtc-border);
    box-shadow: 28px 0 70px rgba(9,17,32,.28); overflow: hidden;
  }
  .menu-open .sidebar { transform: translate3d(0,0,0); }
  .sidebar .brand { min-height: 74px; padding: 4px 62px 16px 8px; color: var(--rtc-text); }
  .mobile-sidebar-close {
    display:grid; place-items:center; position:absolute;
    top:calc(env(safe-area-inset-top) + 18px); right:18px; z-index:2;
    width:44px; height:44px; padding:0; border:1px solid var(--rtc-border); border-radius:15px;
    background:var(--rtc-surface-soft); color:var(--rtc-text); font-size:30px; line-height:1;
    box-shadow:var(--rtc-shadow-sm);
  }
  .mobile-sidebar-close:active { transform:scale(.96); }
  .sidebar .brandcopy strong { color: var(--rtc-text); }
  .sidebar .brandcopy span { color: var(--rtc-muted); }
  .sidebar nav { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 3px; scrollbar-width: thin; }
  .sidebar nav a { color: #536078; }
  .sidebar nav a.active { color: var(--rtc-primary); }
  .sidebar-user { flex: 0 0 auto; }
  .sidebar-collapse { display: none !important; }

  .mobile-overlay {
    display: block; position: fixed; inset: 0; z-index: 1001;
    background: rgba(13,20,34,.56); backdrop-filter: blur(5px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .24s ease, visibility .24s ease;
  }
  .menu-open .mobile-overlay { opacity: 1; visibility: visible; pointer-events: auto; }
  .menu-open .menu-toggle {
    opacity:0; visibility:hidden; pointer-events:none; transform:translateX(-18px) scale(.9);
  }

  .content { padding: 16px var(--mobile-gutter) calc(var(--mobile-nav-height) + 38px + env(safe-area-inset-bottom)); }
  .mobile-bottom-nav {
    display: grid; position: fixed; z-index: 900;
    left: 10px; right: 10px; bottom: max(8px,env(safe-area-inset-bottom));
    height: var(--mobile-nav-height); padding: 7px; grid-template-columns: repeat(4,1fr);
    border: 1px solid rgba(255,255,255,.08); border-radius: 24px;
    background: rgba(23,32,51,.97); backdrop-filter: blur(18px);
    box-shadow: 0 14px 38px rgba(23,32,51,.24);
    transition: opacity .18s ease, transform .22s ease, visibility .18s ease;
  }
  .mobile-bottom-nav a { min-width:0; display:grid; place-items:center; align-content:center; gap:4px; border-radius:17px; color:#aeb8c8; font-size:10px; }
  .mobile-bottom-nav a svg { width:22px; height:22px; }
  .mobile-bottom-nav a.active { background:rgba(75,125,240,.18); color:#78a0ff; }

  .pwa-install {
    left: var(--mobile-gutter); right: var(--mobile-gutter); bottom: calc(var(--mobile-nav-height) + 20px + env(safe-area-inset-bottom));
    width:auto; max-width:none; z-index: 910; display:grid; grid-template-columns:minmax(0,1fr) auto 32px;
    gap:10px; padding:13px 12px 13px 15px; border-radius:19px;
    box-shadow:0 14px 38px rgba(23,32,51,.18);
    transition: opacity .18s ease, transform .22s ease, visibility .18s ease;
  }
  .pwa-install[hidden] { display:none !important; }
  .pwa-install strong { font-size:13px; }
  .pwa-install span { font-size:11px; line-height:1.35; }
  .pwa-install .btn { min-height:42px; padding:9px 12px; font-size:12px; }
  .pwa-close { position:static; align-self:center; }

  .menu-open .mobile-bottom-nav,
  .menu-open .pwa-install,
  .menu-open .update-toast,
  .menu-open .connection-status {
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(18px);
  }

  .command-palette { z-index: 1100; }
}

@media (max-width: 820px) {
  body.page-dashboard .content { display:grid; gap:14px; }
  body.page-dashboard .hero-dashboard { min-height:0; display:grid; gap:22px; padding:26px 22px 22px; border-radius:26px; box-shadow:0 18px 42px rgba(49,95,199,.19); }
  body.page-dashboard .hero-dashboard:after { width:230px; height:230px; right:-72px; top:-110px; }
  body.page-dashboard .eyebrow { font-size:11px; line-height:1.35; letter-spacing:.13em; }
  body.page-dashboard .hero-dashboard h2 { margin:10px 0 12px; max-width:13ch; font-size:clamp(31px,9vw,40px); line-height:.99; letter-spacing:-.055em; }
  body.page-dashboard .hero-dashboard p { font-size:15px; line-height:1.45; }
  body.page-dashboard .hero-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; }
  body.page-dashboard .hero-actions .btn { width:100%; min-height:48px; padding:10px 12px; border-radius:14px; font-size:14px; }
  body.page-dashboard .stats.modern { margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  body.page-dashboard .stats.modern .stat-card { min-height:94px; padding:14px; grid-template-columns:40px minmax(0,1fr); column-gap:11px; border-radius:20px; }
  body.page-dashboard .stats.modern .stat-card:before { display:none; }
  body.page-dashboard .stats.modern .stat-icon { width:40px; height:40px; border-radius:13px; }
  body.page-dashboard .stats.modern .stat-icon svg { width:21px; height:21px; }
  body.page-dashboard .stats.modern .stat-label { align-self:end; font-size:11px; line-height:1.2; }
  body.page-dashboard .stats.modern .stat-card strong { align-self:start; font-size:29px !important; line-height:1; }
  body.page-dashboard .quick-actions { margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  body.page-dashboard .quick-actions a { min-height:86px; display:grid; align-content:center; justify-items:start; gap:9px; padding:14px; border-radius:19px; font-size:14px; line-height:1.25; }
  body.page-dashboard .quick-actions b { width:38px; height:38px; border-radius:12px; }
  body.page-dashboard .dashboard-grid { display:grid; grid-template-columns:1fr; gap:14px; }
  body.page-dashboard .panel, body.page-dashboard .activity-panel { margin:0; padding:17px; border-radius:21px; }
  body.page-dashboard .panel-head { margin-bottom:10px; padding-bottom:11px; }
  body.page-dashboard .panel-head h3 { font-size:17px; }
  body.page-dashboard .panel-head a { font-size:11px; padding:6px 9px; }
  body.page-dashboard .empty { padding:22px 16px; border-radius:16px; }
  body.page-dashboard .empty-icon { width:42px; height:42px; margin-bottom:9px; }
  body.page-dashboard .empty strong { font-size:14px; }
  body.page-dashboard .empty p { font-size:12px; }
  body.page-dashboard .activity-feed > div { padding:11px 0; }
}

@media (max-width: 390px) {
  :root { --mobile-gutter: 12px; }
  .sidebar { width: min(91vw,350px); padding-left:14px; padding-right:14px; }
  .pwa-install { grid-template-columns:minmax(0,1fr) auto; }
  .pwa-close { position:absolute; right:5px; top:4px; }
  body.page-dashboard .hero-actions { grid-template-columns:1fr; }
  body.page-dashboard .quick-actions a { min-height:80px; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,.mobile-overlay,.mobile-bottom-nav,.pwa-install,.menu-toggle { transition:none !important; }
}

/* RC11: complete responsive settings and diagnostics layout */
@media (max-width:900px){
  body.page-settings .topbar{
    background:var(--rtc-bg,#f5f7fb);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border-bottom:1px solid var(--rtc-border,#dfe6ef);
    box-shadow:0 4px 18px rgba(23,32,51,.06);
  }
  body.page-settings .content{
    padding-top:16px;
    padding-bottom:calc(var(--mobile-nav-height,76px) + 56px + env(safe-area-inset-bottom));
  }
  body.page-settings .two-col{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
  body.page-settings .panel{min-width:0;overflow:hidden}
  body.page-settings .diagnostics-panel{overflow:visible;padding-bottom:22px}
  body.page-settings .diagnostics-head{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin-bottom:4px}
  body.page-settings .diagnostics-head h3{font-size:21px;line-height:1.15;margin:0}
  body.page-settings .diagnostics-summary{font-size:14px;line-height:1.35;text-align:left;color:var(--rtc-muted,#67738a);white-space:normal}
  body.page-settings .diagnostics-list{display:grid;gap:10px;margin-top:14px}
  body.page-settings .diagnostics-list .diagnostics-row{
    display:grid;grid-template-columns:minmax(0,1fr);gap:10px;
    padding:14px;border:1px solid var(--rtc-border,#dfe6ef);border-radius:15px;
    background:var(--rtc-surface-soft,#f8fafc);min-width:0;overflow:hidden;
  }
  body.page-settings .diagnostics-label-group{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
  body.page-settings .diagnostics-label{font-size:15px;font-weight:750;line-height:1.3;min-width:0}
  body.page-settings .diagnostics-state{flex:0 0 auto;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.02em}
  body.page-settings .diagnostics-state.ok{color:#176840;background:rgba(47,155,104,.12);border:1px solid rgba(47,155,104,.2)}
  body.page-settings .diagnostics-state.bad{color:#a5273b;background:rgba(217,74,92,.11);border:1px solid rgba(217,74,92,.2)}
  body.page-settings .diagnostics-value{
    display:block;min-width:0;width:100%;max-width:100%;padding:10px 12px;
    border-radius:11px;border:1px solid var(--rtc-border,#dfe6ef);background:var(--rtc-surface,#fff);
    color:var(--rtc-text,#162033)!important;text-align:left;font-size:14px;line-height:1.45;
    white-space:normal;overflow-wrap:anywhere;word-break:break-word;hyphens:auto;
  }
  body.page-settings .diagnostics-value.ok{border-left:4px solid #2f9b68}
  body.page-settings .diagnostics-value.bad{border-left:4px solid #d94a5c}
  body.page-settings .diagnostics-value code{display:block;max-width:100%;font:600 12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:normal;overflow-wrap:anywhere;word-break:break-all;color:inherit}
  body.page-settings .diagnostics-help{margin:16px 0 0;font-size:13px;line-height:1.5;color:var(--rtc-muted,#67738a)}
}
@media (max-width:520px){
  body.page-settings .topbar{grid-template-columns:50px minmax(0,1fr) auto;gap:8px}
  body.page-settings .page-heading h1{font-size:19px}
  body.page-settings .topbar-actions{gap:6px}
  body.page-settings .theme-toggle,body.page-settings .notification-link{width:42px;height:42px;border-radius:14px}
  body.page-settings .diagnostics-panel{padding:16px}
  body.page-settings .diagnostics-list .diagnostics-row{padding:13px}
}
@media (max-width:390px){
  body.page-settings .theme-toggle{display:none!important}
  body.page-settings .diagnostics-label-group{align-items:flex-start}
}