/* ================================================================
   GLOBAL RESET & BASE
   ================================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-family:'Inter',system-ui,-apple-system,sans-serif;font-feature-settings:'cv01','cv03','cv04','cv11';
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;line-height:1.5;scroll-behavior:smooth;
  overflow:clip;overscroll-behavior:none}
body{background:var(--sys-bg);color:var(--sys-text);font-size:var(--ref-font-base);
  font-weight:var(--sys-font-wt);overflow:clip;overscroll-behavior:none;
  min-height:100vh;min-height:100dvh;
  -webkit-tap-highlight-color:transparent;user-select:none;
  touch-action:pan-y pinch-zoom;
  max-width:100vw;max-width:100dvw;
  position:relative}
/* v2.15.0: visibility:hidden moved to inline skeleton CSS in header.php.
   Body is visible from the start; the skeleton overlay covers content
   until ts-ready fires. The old 3s CSS fallback is replaced by the
   skeleton's own failsafe animation. */
body.ts-ready{}
button{border:none;background:none;font:inherit;color:inherit;cursor:pointer;
  outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus-visible{box-shadow:var(--sys-focus);border-radius:var(--ref-radius-sm)}
input,textarea,select{font:inherit;color:inherit;border:none;outline:none;
  background:none;-webkit-tap-highlight-color:transparent}
input:focus-visible,textarea:focus-visible,select:focus-visible{box-shadow:var(--sys-focus)}
a{color:var(--sys-brand);text-decoration:none;touch-action:manipulation}
h1,h2,h3,h4,h5,h6{font-weight:var(--sys-font-wt-sb);line-height:1.25}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
/* v2.14.3: Utility classes consumed by app.js settings templates */
.mt-4{margin-top:var(--ref-space-4)!important}
.w-full{width:100%!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;
  animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---- CSS fallback if JS fails ---- */
/* v2.15.0: If JS never boots (no ts-ready), the skeleton auto-hides after 4s
   and content becomes visible via the inline <style> failsafe in header.php.
   The old visibility:hidden + 3s unhide animation is removed — the skeleton
   approach gives users immediate visual feedback instead of a blank screen. */

/* ================================================================
   LAYOUT — Views
   ================================================================ */
.view{display:none;width:100%;min-height:100vh;min-height:100dvh}
.view.active{display:flex;flex-direction:column;
  /* v2.10.0 fix: Explicit height creates a "definite main size" so flex:1
     children (sub-views) resolve their height correctly. Without this,
     iOS Safari treats the available space as infinite (WebKit Bug #137730)
     and overflow-y:auto on sub-views never triggers a scrollbar.
     min-height retained as fallback for edge cases. */
  height:100vh;height:100dvh}
#view-login.active{display:flex;align-items:center;justify-content:center}
#view-main{padding-bottom:calc(49px + env(safe-area-inset-bottom,0px));
  transition:transform .35s cubic-bezier(.32,.72,0,1),opacity .35s ease}
.sub-view{display:none;flex:1;overflow-y:auto;overflow-x:clip;-webkit-overflow-scrolling:touch;
  padding:var(--ref-space-4);padding-top:calc(env(safe-area-inset-top,0px) + var(--ref-space-3));
  max-width:100%;width:100%}
.sub-view.active{display:block}
/* v2.14.0: Enforce the visibility contract with !important so that plugin CSS
   using ID selectors (e.g. #sv-team { display:flex } in nav-inject.css) cannot
   accidentally override the base .sub-view { display:none }. Without this,
   ID-specificity (1,0,0) beats the class rule (0,1,0) and the non-active sub-view
   renders its content below the active view — visually leaking skeleton/loading
   states at the bottom of the page. When .active IS present, plugins' own display
   value (flex/grid/etc.) still wins normally since this :not(.active) guard won't
   match. */
.sub-view:not(.active){display:none !important}

/* v2.14.3.1: Pull-to-refresh indicator — inserted at the top of the active
   sub-view by initPullToRefresh() in app.js. Consistent with the TSA/TSIM
   plugin-level PTR pattern but at the theme shell level. */
.ts-pull-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0;
  overflow: hidden;
  font-size: var(--ref-font-sm, 15px);
  color: var(--sys-text-ter, #94A3B8);
  background: var(--sys-bg-alt, var(--sys-surface-raised, #F1F5F9));
  transition: opacity 0.15s ease;
  border-radius: var(--ref-radius-md, 8px);
  margin-bottom: var(--ref-space-1, 4px);
}

/* ================================================================
   LOGIN
   ================================================================ */
#view-login{background:linear-gradient(145deg,var(--ref-brand-600) 0%,var(--ref-brand-900) 50%,var(--ref-brand-950) 100%);
  padding:var(--ref-space-4)}
.login-card{background:var(--sys-surface);border-radius:var(--ref-radius-2xl);
  padding:var(--ref-space-8) var(--ref-space-6);width:100%;max-width:380px;
  box-shadow:var(--sys-shadow-xl)}
.login-logo{text-align:center;margin-bottom:var(--ref-space-6)}
.login-logo .logo-mark{width:56px;height:56px;background:var(--ref-brand-500);
  border-radius:var(--ref-radius-lg);display:inline-flex;align-items:center;
  justify-content:center;color:#fff;margin-bottom:var(--ref-space-3)}
.login-logo h1{font-size:var(--ref-font-xl);font-weight:var(--sys-font-wt-b);letter-spacing:-.02em}
.login-logo p{font-size:var(--ref-font-sm);color:var(--sys-text-sec);margin-top:var(--ref-space-1)}
.login-version{font-size:var(--ref-font-xs);color:var(--sys-text-ter);text-align:center;margin-top:var(--ref-space-4)}
.fg{margin-bottom:var(--ref-space-4)}
.fg label{display:block;font-size:var(--ref-font-sm);font-weight:var(--sys-font-wt-md);
  color:var(--sys-text-sec);margin-bottom:var(--ref-space-1)}
.fg input,.fg select{width:100%;padding:var(--ref-space-3) var(--ref-space-4);
  border:1.5px solid var(--sys-border);border-radius:var(--ref-radius-md);
  background:var(--sys-bg);font-size:var(--ref-font-base);min-height:52px;
  transition:border-color var(--ref-dur-fast) var(--ref-ease)}
.fg input:focus,.fg select:focus{border-color:var(--sys-brand)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ref-space-2);
  padding:var(--ref-space-3) var(--ref-space-5);border-radius:var(--ref-radius-md);
  font-size:var(--ref-font-base);font-weight:var(--sys-font-wt-md);min-height:52px;
  transition:all var(--ref-dur-fast) var(--ref-ease);cursor:pointer}
.btn-brand{background:var(--sys-brand);color:var(--sys-text-brand);width:100%}
.btn-brand:hover{background:var(--sys-brand-hover)}
.btn-brand:active{background:var(--sys-brand-dark);transform:scale(.98)}
.btn-outline{border:1.5px solid var(--sys-border);color:var(--sys-text);background:var(--sys-surface)}
.btn-outline:hover{border-color:var(--sys-brand);color:var(--sys-brand)}
.btn-sm{min-height:36px;padding:var(--ref-space-2) var(--ref-space-3);font-size:var(--ref-font-sm);
  border-radius:var(--ref-radius-sm)}
.btn-icon{width:48px;height:48px;min-height:48px;border-radius:var(--ref-radius-md);
  display:inline-flex;align-items:center;justify-content:center}
.btn-icon:hover{background:var(--sys-brand-light)}

/* ================================================================
   GREETING ROW
   ================================================================ */
.greeting-row{padding:var(--ref-space-2) 0 var(--ref-space-1);
  display:flex;align-items:center;justify-content:space-between}
.greeting-row h2{font-size:var(--ref-font-xl);font-weight:var(--sys-font-wt-b);
  letter-spacing:-.02em;color:var(--sys-text);margin:0;line-height:1.2}
/* v2.14.4 A1: Visible refresh button */
.ts-refresh-btn{width:40px;height:40px;min-height:40px;border-radius:var(--ref-radius-md,12px);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  color:var(--sys-text-sec);background:var(--sys-surface);
  border:1px solid var(--sys-border);
  transition:all var(--ref-dur-fast) var(--ref-ease);cursor:pointer}
.ts-refresh-btn:hover{color:var(--sys-brand);border-color:var(--sys-brand);
  background:var(--sys-brand-light)}
.ts-refresh-btn:active{transform:scale(.9)}
[data-theme="sunlight"] .ts-refresh-btn{border:2px solid #000;color:#000}

/* ================================================================
   DASHBOARD SEARCH TRIGGER
   ================================================================ */
.dash-search-trigger{display:flex;align-items:center;gap:var(--ref-space-2);
  width:100%;padding:var(--ref-space-3) var(--ref-space-4);
  background:var(--sys-surface);border:1.5px solid var(--sys-border);
  border-radius:var(--ref-radius-full);min-height:48px;
  color:var(--sys-text-ter);font-size:var(--ref-font-base);
  margin-bottom:var(--ref-space-3);
  transition:border-color var(--ref-dur-fast) var(--ref-ease),
  box-shadow var(--ref-dur-fast) var(--ref-ease)}
.dash-search-trigger:hover{border-color:var(--sys-brand);box-shadow:var(--sys-shadow-sm)}
.dash-search-trigger:active{transform:scale(.99)}
.dash-search-trigger svg{flex-shrink:0}
.dash-search-trigger span{flex:1;text-align:left}

/* ================================================================
   v2.14.4.3 A4: APP DOCK — 2-column big-touch grid
   Full-column rounded squares, large icons + labels, portrait-first.
   ================================================================ */
/* v2.14.5: bigger tiles — more padding, min-height, and label text for
   mobile readability. Icons unchanged per design spec. */
.app-dock{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--ref-space-4);
  padding:var(--ref-space-4) 0 var(--ref-space-5);
  max-width:100%;overflow:clip}
.dock-app{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--ref-space-3);
  padding:var(--ref-space-5) var(--ref-space-4);
  background:var(--sys-surface);
  border:1px solid var(--sys-border);
  border-radius:var(--ref-radius-xl);
  box-shadow:var(--sys-shadow-sm);
  cursor:pointer;
  min-height:130px;
  transition:all var(--ref-dur-fast) var(--ref-ease);
  -webkit-tap-highlight-color:transparent;
  /* Stagger entrance animation */
  opacity:0;animation:fadeSlideUp var(--ref-dur-norm) var(--ref-ease-out) forwards}
.dock-app:nth-child(1){animation-delay:30ms}
.dock-app:nth-child(2){animation-delay:70ms}
.dock-app:nth-child(3){animation-delay:110ms}
.dock-app:nth-child(4){animation-delay:150ms}
.dock-app:nth-child(5){animation-delay:190ms}
.dock-app:nth-child(6){animation-delay:230ms}
.dock-app:nth-child(7){animation-delay:270ms}
.dock-app:nth-child(8){animation-delay:310ms}
/* Desktop hover — subtle lift + glow */
@media(hover:hover){
  .dock-app:hover{box-shadow:var(--sys-shadow-md);
    border-color:var(--sys-brand);transform:translateY(-2px)}
}
/* Press / tap — darken + scale down, visible feedback */
.dock-app:active{
  transform:scale(.93);
  box-shadow:none;
  background:var(--sys-surface-subtle);
  border-color:var(--sys-brand);
  transition-duration:50ms}
.dock-icon{
  width:64px;height:64px;border-radius:var(--ref-radius-lg);
  display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.18)}
.dock-icon svg{width:30px;height:30px;stroke-width:1.75}
.dock-label{
  font-size:var(--ref-font-base);font-weight:var(--sys-font-wt-sb);
  color:var(--sys-text);text-align:center;line-height:1.25;
  max-width:100%;word-wrap:break-word;white-space:normal}
/* Description hidden by default — too cluttered on phone */
.dock-desc{display:none}
/* Tablet+ (600px): bigger icons, more padding */
@media(min-width:600px){
  .dock-app{min-height:150px;padding:var(--ref-space-6) var(--ref-space-5)}
  .dock-icon{width:76px;height:76px;border-radius:var(--ref-radius-xl)}
  .dock-icon svg{width:36px;height:36px}
  .dock-label{font-size:var(--ref-font-lg)}
  /* Show description only on tablet where there's room */
  .dock-desc{display:-webkit-box;font-size:var(--ref-font-xs);color:var(--sys-text-sec);
    text-align:center;line-height:1.3;max-width:100%;
    -webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
}
/* Wide tablet / desktop: 3-col if many apps */
@media(min-width:900px){
  .app-dock.dock-many{grid-template-columns:repeat(3,1fr)}
}
[data-theme="sunlight"] .dock-app{border:2.5px solid #000;box-shadow:none}
[data-theme="sunlight"] .dock-icon{border:2px solid #000}

/* ================================================================
   v2.14.4 C2: NOTIFICATION BADGES (on nav items)
   Non-red, subtle brand-accent badge. Plugins inject badge elements;
   this provides the styling contract.
   ================================================================ */
.ni-badge{position:absolute;top:2px;right:50%;transform:translateX(calc(50% + 14px));
  min-width:18px;height:18px;border-radius:var(--ref-radius-full);
  background:var(--sys-brand);color:var(--sys-text-brand);
  font-size:11px;font-weight:var(--sys-font-wt-sb);
  display:flex;align-items:center;justify-content:center;
  padding:0 5px;line-height:1;pointer-events:none;
  box-shadow:0 1px 3px rgba(0,0,0,.2)}
.ni-badge:empty{width:10px;height:10px;min-width:10px;padding:0}
[data-theme="sunlight"] .ni-badge{background:#000;color:#fff;border:1.5px solid #fff}

/* ================================================================
   v2.14.4 D1: ADD-TO-HOMESCREEN INSTALL BANNER
   ================================================================ */
.ts-install-banner{position:fixed;bottom:calc(49px + env(safe-area-inset-bottom,0px) + 8px);
  left:16px;right:16px;z-index:140;
  background:var(--sys-surface);border:1px solid var(--sys-border);
  border-radius:var(--ref-radius-lg);box-shadow:var(--sys-shadow-lg);
  padding:var(--ref-space-3) var(--ref-space-4);
  display:flex;align-items:center;gap:var(--ref-space-3);
  animation:toastIn var(--ref-dur-norm) var(--ref-ease) forwards}
.ts-install-text{flex:1;font-size:var(--ref-font-sm);font-weight:var(--sys-font-wt-md);
  color:var(--sys-text);line-height:1.3}
.ts-install-how-btn{padding:var(--ref-space-2) var(--ref-space-4);
  background:var(--sys-brand);color:var(--sys-text-brand);
  border-radius:var(--ref-radius-full);font-size:var(--ref-font-sm);
  font-weight:var(--sys-font-wt-sb);white-space:nowrap;min-height:36px;
  transition:background var(--ref-dur-fast) var(--ref-ease)}
.ts-install-how-btn:hover{background:var(--sys-brand-hover)}
.ts-install-dismiss-btn{width:32px;height:32px;display:flex;align-items:center;
  justify-content:center;color:var(--sys-text-ter);border-radius:var(--ref-radius-sm);
  flex-shrink:0}
.ts-install-dismiss-btn:hover{background:var(--sys-bg-alt)}
@media(min-width:820px){
  .ts-install-banner{left:96px;max-width:480px}
}
[data-theme="sunlight"] .ts-install-banner{border:2px solid #000}
[data-theme="sunlight"] .ts-install-how-btn{background:#000}

/* ================================================================
   QUICK STATS ROW — v2.14.4.3: larger touch-friendly stat cards
   ================================================================ */
.quick-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--ref-space-3);padding:var(--ref-space-3) 0}
.stat-pill{display:flex;align-items:center;gap:var(--ref-space-3);
  padding:var(--ref-space-4);background:var(--sys-surface);
  border:1px solid var(--sys-border);border-radius:var(--ref-radius-lg);
  box-shadow:var(--sys-shadow-sm);min-height:64px;min-width:0;
  cursor:pointer;transition:all var(--ref-dur-fast) var(--ref-ease)}
@media(hover:hover){
  .stat-pill:hover{box-shadow:var(--sys-shadow-md);border-color:var(--sys-brand)}
}
.stat-pill:active{transform:scale(.95);box-shadow:none;
  background:var(--sys-surface-subtle);border-color:var(--sys-brand);
  transition-duration:50ms}
.stat-pill .stat-icon{width:36px;height:36px;border-radius:var(--ref-radius-md);display:flex;
  align-items:center;justify-content:center;flex-shrink:0}
.stat-pill .stat-icon svg{width:20px;height:20px}
.stat-pill .stat-val{font-size:var(--ref-font-md);font-weight:var(--sys-font-wt-sb)}
.stat-pill .stat-label{font-size:var(--ref-font-sm);color:var(--sys-text-sec)}
/* When 3 pills, let the third span full width */
.quick-stats .stat-pill:nth-child(3):last-child{grid-column:1 / -1}

/* ================================================================
   SEARCH BAR (inline — hidden by default, kept for compatibility)
   ================================================================ */
.search-wrap{position:relative;margin-bottom:var(--ref-space-3)}
.search-bar{display:flex;align-items:center;gap:var(--ref-space-2);
  background:var(--sys-surface);border:1.5px solid var(--sys-border);
  border-radius:var(--ref-radius-full);padding:0 var(--ref-space-4);
  min-height:52px;transition:border-color var(--ref-dur-fast) var(--ref-ease),
  box-shadow var(--ref-dur-fast) var(--ref-ease)}
.search-bar:focus-within{border-color:var(--sys-brand);box-shadow:var(--sys-shadow-md)}
.search-bar svg{color:var(--sys-text-ter);flex-shrink:0;width:18px;height:18px}
.search-bar input{flex:1;background:none;font-size:var(--ref-font-base);
  color:var(--sys-text);min-height:50px;user-select:text}
.search-bar input::placeholder{color:var(--sys-text-ter)}
.search-results{position:absolute;top:calc(100% + 4px);left:0;right:0;
  background:var(--sys-surface);border:1px solid var(--sys-border);
  border-radius:var(--ref-radius-lg);box-shadow:var(--sys-shadow-lg);
  max-height:320px;overflow-y:auto;z-index:90;display:none}
.search-results.show{display:block}
.search-item{display:flex;align-items:center;gap:var(--ref-space-3);
  padding:var(--ref-space-3) var(--ref-space-4);cursor:pointer;
  transition:background var(--ref-dur-fast) var(--ref-ease)}
.search-item:hover{background:var(--sys-bg-alt)}
.search-item .si-icon{width:36px;height:36px;border-radius:var(--ref-radius-sm);
  display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.search-item .si-text{flex:1;min-width:0}
.search-item .si-name{font-size:var(--ref-font-sm);font-weight:var(--sys-font-wt-md)}
.search-item .si-hint{font-size:var(--ref-font-xs);color:var(--sys-text-ter);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-item .si-slash{font-size:var(--ref-font-xs);color:var(--sys-text-ter);
  font-family:monospace;background:var(--sys-bg-alt);padding:2px 6px;
  border-radius:var(--ref-radius-xs);flex-shrink:0}

/* ================================================================
   RECENTLY USED
   ================================================================ */
.section-label{font-size:var(--ref-font-sm);font-weight:var(--sys-font-wt-sb);
  color:var(--sys-text-ter);text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:var(--ref-space-2);padding-left:var(--ref-space-1)}
.recent-row{display:flex;flex-wrap:wrap;gap:var(--ref-space-3);padding-bottom:var(--ref-space-3)}
.recent-chip{flex:0 0 auto;display:flex;align-items:center;gap:var(--ref-space-2);
  padding:var(--ref-space-2) var(--ref-space-4) var(--ref-space-2) var(--ref-space-2);
  background:var(--sys-surface);border:1px solid var(--sys-border);
  border-radius:var(--ref-radius-full);cursor:pointer;min-height:48px;
  transition:all var(--ref-dur-fast) var(--ref-ease)}
.recent-chip:hover{border-color:var(--sys-brand);background:var(--sys-brand-light)}
.recent-chip:active{transform:scale(.97)}
.recent-chip .rc-icon{width:32px;height:32px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.recent-chip .rc-icon svg{width:16px;height:16px}
.recent-chip .rc-name{font-size:var(--ref-font-sm);font-weight:var(--sys-font-wt-md);
  white-space:nowrap}

/* ================================================================
   APP GRID
   ================================================================ */
.cat-section{margin-bottom:var(--ref-space-5)}
.cat-label{font-size:var(--ref-font-sm);font-weight:var(--sys-font-wt-sb);
  color:var(--sys-text-ter);text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:var(--ref-space-3);padding-left:var(--ref-space-1);
  display:flex;align-items:center;gap:var(--ref-space-2)}
.cat-label .cat-dot{width:8px;height:8px;border-radius:50%}
.app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ref-space-4)}
@media(min-width:400px){.app-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:600px){.app-grid{grid-template-columns:repeat(5,1fr)}}
@media(min-width:900px){.app-grid{grid-template-columns:repeat(6,1fr)}}
.app-ic{display:flex;flex-direction:column;align-items:center;gap:var(--ref-space-2);
  padding:var(--ref-space-2);cursor:pointer;border-radius:var(--ref-radius-md);
  transition:all var(--ref-dur-fast) var(--ref-ease)}
@media(hover:hover){
  .app-ic:hover{transform:translateY(-2px)}
  .app-ic:hover .ic{box-shadow:var(--sys-shadow-md)}
}
.app-ic:active{transform:scale(.90);transition-duration:50ms}
.app-ic:active .ic{box-shadow:none;filter:brightness(.85)}
.app-ic .ic{width:72px;height:72px;border-radius:var(--ref-radius-lg);
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:var(--sys-shadow-sm);transition:box-shadow var(--ref-dur-fast) var(--ref-ease)}
.app-ic:hover .ic{box-shadow:var(--sys-shadow-md)}
.app-ic .ic svg{width:32px;height:32px;stroke-width:var(--sys-icon-wt)}
.app-ic .nm{font-size:var(--ref-font-sm);font-weight:var(--sys-font-wt-md);
  text-align:center;color:var(--sys-text-sec);line-height:1.2;
  max-width:90px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- Staggered App Grid Animations ---- */
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.app-ic{opacity:0;animation:fadeSlideUp var(--ref-dur-norm) var(--ref-ease-out) forwards}
.app-ic:nth-child(1){animation-delay:30ms}.app-ic:nth-child(2){animation-delay:60ms}
.app-ic:nth-child(3){animation-delay:90ms}.app-ic:nth-child(4){animation-delay:120ms}
.app-ic:nth-child(5){animation-delay:150ms}.app-ic:nth-child(6){animation-delay:180ms}
.app-ic:nth-child(7){animation-delay:210ms}.app-ic:nth-child(8){animation-delay:240ms}

/* ---- Large Action Cards (role-adaptive ≤4 apps) ---- */
.app-grid-hero{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--ref-space-4);
  margin-bottom:var(--ref-space-5)}
.action-card{display:flex;align-items:center;gap:var(--ref-space-4);
  padding:var(--ref-space-5);background:var(--sys-surface);
  border:1px solid var(--sys-border);border-radius:var(--ref-radius-xl);
  cursor:pointer;min-height:88px;
  box-shadow:var(--sys-shadow-sm);
  transition:all var(--ref-dur-fast) var(--ref-ease);
  opacity:0;animation:fadeSlideUp var(--ref-dur-norm) var(--ref-ease-out) forwards}
@media(hover:hover){
  .action-card:hover{box-shadow:var(--sys-shadow-md);transform:translateY(-2px);
    border-color:var(--sys-brand)}
}
.action-card:active{transform:scale(.95);box-shadow:none;
  background:var(--sys-surface-subtle);border-color:var(--sys-brand);
  transition-duration:50ms}
.action-card:nth-child(1){animation-delay:30ms}.action-card:nth-child(2){animation-delay:90ms}
.action-card:nth-child(3){animation-delay:150ms}.action-card:nth-child(4){animation-delay:210ms}
.action-card .ac-icon{width:60px;height:60px;border-radius:var(--ref-radius-lg);
  display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.action-card .ac-icon svg{width:30px;height:30px;stroke-width:var(--sys-icon-wt)}
.action-card .ac-text{flex:1;min-width:0}
.action-card .ac-name{font-size:var(--ref-font-md);font-weight:var(--sys-font-wt-sb)}
.action-card .ac-desc{font-size:var(--ref-font-sm);color:var(--sys-text-sec);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}

/* ---- View Fade Animation ---- */
@keyframes viewFadeIn{from{opacity:0}to{opacity:1}}
.sub-view.active{animation:viewFadeIn var(--ref-dur-norm) var(--ref-ease)}

/* ================================================================
   KPI METRIC GRID (v2.8.0 — Owner / Admin / Mfg views)
   ================================================================ */
.kpi-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--ref-space-3);padding:var(--ref-space-2) 0;margin-bottom:var(--ref-space-3)}
.kpi-card{
  background:var(--sys-surface);border:1px solid var(--sys-border);
  border-radius:var(--ref-radius-lg);padding:var(--ref-space-3) var(--ref-space-4);
  display:flex;flex-direction:column;gap:2px;min-height:72px;
  box-shadow:var(--sys-shadow-sm);transition:all var(--ref-dur-fast) var(--ref-ease)}
@media(hover:hover){.kpi-card:hover{box-shadow:var(--sys-shadow-md)}}
.kpi-card.kpi-primary{
  padding:var(--ref-space-4) var(--ref-space-5);min-height:96px}
.kpi-card.kpi-action{cursor:pointer}
@media(hover:hover){
  .kpi-card.kpi-action:hover{border-color:var(--sys-brand);background:var(--sys-brand-light)}
}
.kpi-card.kpi-action:active{transform:scale(.95);box-shadow:none;
  background:var(--sys-surface-subtle);border-color:var(--sys-brand);
  transition-duration:50ms}
.kpi-label{
  font-size:var(--ref-font-xs);font-weight:var(--sys-font-wt-md);
  color:var(--sys-text-sec);text-transform:uppercase;letter-spacing:.04em}
.kpi-value{
  font-size:var(--ref-font-xl);font-weight:var(--sys-font-wt-b);
  color:var(--sys-text);line-height:1.1}
.kpi-card.kpi-primary .kpi-value{font-size:var(--ref-font-2xl)}
.kpi-sub{font-size:var(--ref-font-xs);color:var(--sys-text-ter);margin-top:2px}
.kpi-icon{display:flex;align-items:center;margin-bottom:2px}
.kpi-icon svg{width:20px;height:20px;stroke-width:var(--sys-icon-wt)}
/* KPI loading shimmer & loaded flash */
.kpi-loading{
  background:linear-gradient(90deg,var(--sys-bg-alt) 25%,var(--sys-border) 50%,var(--sys-bg-alt) 75%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;
  border-radius:var(--ref-radius-xs);color:transparent!important;
  min-width:40px;min-height:1.1em}
@keyframes kpiFadeIn{from{opacity:.3}to{opacity:1}}
.kpi-loaded{animation:kpiFadeIn .3s ease forwards}
/* Responsive: 4-col on wider screens, primary cards span 2 */
@media(min-width:600px){
  .kpi-grid{grid-template-columns:repeat(4,1fr)}
  .kpi-card.kpi-primary{grid-column:span 2}}
@media(min-width:900px){
  .kpi-grid:not(.kpi-grid-compact){grid-template-columns:repeat(4,1fr)}}

/* ---- Sunlight overrides ---- */
[data-theme="sunlight"] .action-card{border:2.5px solid #000;box-shadow:none}
[data-theme="sunlight"] .app-ic .ic{border:2.5px solid #000;box-shadow:none}
[data-theme="sunlight"] .stat-pill{border:2px solid #000;box-shadow:none}
[data-theme="sunlight"] .kpi-card{border:2.5px solid #000;box-shadow:none}
[data-theme="sunlight"] .kpi-card.kpi-primary{border-width:3px}
[data-theme="sunlight"] .recent-chip{border:2px solid #000}
[data-theme="sunlight"] .search-bar{border:2px solid #000}
[data-theme="sunlight"] .dash-search-trigger{border:2px solid #000}
[data-theme="sunlight"] .bnav{border-top:2px solid #000}

/* v2.14.4 A6: Bigger bottom nav on tablet (before sidebar breakpoint) */
@media(min-width:600px) and (max-width:819px){
  .bnav{height:56px}
  .ni{min-height:52px}
  .ni svg{width:26px;height:26px}
  .ni .ni-label{font-size:15px}
}

/* ================================================================
   BOTTOM SHEET (App Interaction Panel — legacy, kept for plugins)
   ================================================================ */
.sheet-overlay{position:fixed;inset:0;background:var(--sys-overlay);z-index:200;
  opacity:0;pointer-events:none;transition:opacity var(--ref-dur-norm) var(--ref-ease)}
.sheet-overlay.show{opacity:1;pointer-events:auto}
.bottom-sheet{position:fixed;bottom:0;left:0;right:0;z-index:210;
  background:var(--sys-surface);border-radius:var(--ref-radius-2xl) var(--ref-radius-2xl) 0 0;
  box-shadow:var(--sys-shadow-xl);transform:translateY(100%);
  transition:transform var(--ref-dur-slow) var(--ref-ease-spring);
  max-height:92dvh;display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom,0)}
.bottom-sheet.show{transform:translateY(0)}
.sheet-handle{width:36px;height:4px;background:var(--sys-border-strong);
  border-radius:var(--ref-radius-full);margin:var(--ref-space-3) auto var(--ref-space-2);flex-shrink:0}
.sheet-header{display:flex;align-items:center;gap:var(--ref-space-3);
  padding:0 var(--ref-space-5) var(--ref-space-4);border-bottom:1px solid var(--sys-border)}
.sheet-header .sh-icon{width:44px;height:44px;border-radius:var(--ref-radius-md);
  display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.sheet-header .sh-icon svg{width:22px;height:22px;stroke-width:var(--sys-icon-wt)}
.sheet-header .sh-info{flex:1;min-width:0}
.sheet-header .sh-title{font-size:var(--ref-font-lg);font-weight:var(--sys-font-wt-sb)}
.sheet-header .sh-desc{font-size:var(--ref-font-sm);color:var(--sys-text-sec)}
.sheet-header .sh-close{color:var(--sys-text-ter)}
.sheet-body{flex:1;overflow-y:auto;padding:var(--ref-space-4) var(--ref-space-5);
  -webkit-overflow-scrolling:touch}
.sheet-body .fg{margin-bottom:var(--ref-space-4)}
.sheet-body .fg label{display:block;font-size:var(--ref-font-sm);font-weight:var(--sys-font-wt-md);
  color:var(--sys-text-sec);margin-bottom:var(--ref-space-1)}
.sheet-body .fg input,.sheet-body .fg select,.sheet-body .fg textarea{width:100%;
  padding:var(--ref-space-3) var(--ref-space-4);border:1.5px solid var(--sys-border);
  border-radius:var(--ref-radius-md);background:var(--sys-bg);font-size:var(--ref-font-base);
  min-height:52px;transition:border-color var(--ref-dur-fast) var(--ref-ease)}
.sheet-body .fg input:focus,.sheet-body .fg select:focus,.sheet-body .fg textarea:focus{
  border-color:var(--sys-brand)}
.sheet-body .fg textarea{min-height:80px;resize:vertical}
.sheet-footer{padding:var(--ref-space-4) var(--ref-space-5);border-top:1px solid var(--sys-border);
  display:flex;gap:var(--ref-space-3)}
.sheet-footer .btn{flex:1}

/* ---- Output area ---- */
.output-area{margin-top:var(--ref-space-4);padding:var(--ref-space-4);
  background:var(--sys-bg-alt);border-radius:var(--ref-radius-md);
  border-left:3px solid var(--sys-success);font-size:var(--ref-font-sm);
  font-family:'Inter',monospace;line-height:1.65;white-space:pre-wrap;
  word-break:break-word;display:none;color:var(--sys-text)}
.output-area.visible{display:block}
.output-area.loading{border-left-color:var(--sys-brand)}

/* Shimmer */
.shimmer{background:linear-gradient(90deg,var(--sys-bg-alt) 25%,var(--sys-border) 50%,var(--sys-bg-alt) 75%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--ref-radius-sm);
  height:14px;margin:var(--ref-space-2) 0}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ================================================================
   BOTTOM NAVIGATION (3-item: Dashboard | Logo | Chat)
   ================================================================ */
.bnav{position:fixed;bottom:0;left:0;right:0;z-index:150;
  background:var(--sys-surface-blur);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--sys-border);
  padding-bottom:env(safe-area-inset-bottom,0);
  display:flex;align-items:center;justify-content:center;min-height:49px;
  transition:transform .35s cubic-bezier(.32,.72,0,1)}

/* Left + Right nav items (Apps, Chat) */
.ni{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;flex:1;min-height:44px;color:var(--sys-text-ter);
  transition:color var(--ref-dur-fast) var(--ref-ease);position:relative;padding:4px 0}
.ni svg{width:22px;height:22px;stroke-width:var(--sys-icon-wt);
  transition:all var(--ref-dur-fast) var(--ref-ease)}
.ni .ni-label{font-size:var(--ref-font-xs);font-weight:var(--sys-font-wt-md)}
.ni.active{color:var(--sys-brand)}
.ni.active svg{stroke-width:calc(var(--sys-icon-wt) + .5)}
.ni.active::before{content:'';position:absolute;top:4px;width:36px;height:28px;
  background:var(--sys-brand-light);border-radius:var(--ref-radius-full);z-index:-1}

/* Center logo button */
.bnav-logo{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  padding:4px var(--ref-space-4);height:100%;cursor:pointer;
  transition:opacity var(--ref-dur-fast) var(--ref-ease)}
.bnav-logo:hover{opacity:.8}
.bnav-logo:active{transform:scale(.95)}
.bnav-logo img{max-width:100px;max-height:36px;width:auto;height:auto;object-fit:contain}
.bnav-logo-text{font-size:var(--ref-font-lg);font-weight:var(--sys-font-wt-b);
  color:var(--sys-brand);letter-spacing:-.02em}

/* Settings-active state: highlight logo when settings view is open */
.bnav-logo.settings-active{opacity:1;position:relative}
.bnav-logo.settings-active::after{content:'';position:absolute;bottom:2px;
  width:24px;height:3px;background:var(--sys-brand);border-radius:var(--ref-radius-full)}

/* FAB (Floating Action Button) — REMOVED v2.6.3 */

/* ================================================================
   SETTINGS
   ================================================================ */
.profile-card{background:var(--sys-surface);border:1px solid var(--sys-border);
  border-radius:var(--ref-radius-lg);padding:var(--ref-space-5);
  display:flex;align-items:center;gap:var(--ref-space-4);margin-bottom:var(--ref-space-5)}
.profile-avatar{width:54px;height:54px;border-radius:50%;background:var(--sys-brand);
  display:flex;align-items:center;justify-content:center;color:var(--sys-text-brand);
  font-size:var(--ref-font-xl);font-weight:var(--sys-font-wt-b);flex-shrink:0}
.profile-info h3{font-size:var(--ref-font-lg);font-weight:var(--sys-font-wt-sb)}
.profile-info p{font-size:var(--ref-font-sm);color:var(--sys-text-sec)}
.settings-section{margin-bottom:var(--ref-space-5)}
.settings-section h4{font-size:var(--ref-font-sm);font-weight:var(--sys-font-wt-sb);
  color:var(--sys-text-ter);text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:var(--ref-space-3)}
.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--ref-space-3)}
.theme-btn{padding:var(--ref-space-3);border:2px solid var(--sys-border);
  border-radius:var(--ref-radius-md);text-align:center;min-height:56px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  transition:all var(--ref-dur-fast) var(--ref-ease);font-size:var(--ref-font-xs);
  font-weight:var(--sys-font-wt-md)}
.theme-btn:hover{border-color:var(--sys-brand)}
.theme-btn.active{border-color:var(--sys-brand);background:var(--sys-brand-light);
  color:var(--sys-brand)}
.theme-btn .tb-preview{width:28px;height:28px;border-radius:50%;border:2px solid var(--sys-border)}
.settings-row{display:flex;align-items:center;justify-content:space-between;
  padding:var(--ref-space-4);background:var(--sys-surface);
  border:1px solid var(--sys-border);border-radius:var(--ref-radius-md);
  margin-bottom:var(--ref-space-2);min-height:56px}
.settings-row .sr-left{display:flex;align-items:center;gap:var(--ref-space-3)}
.settings-row .sr-left svg{color:var(--sys-text-sec);width:20px;height:20px}
.settings-row .sr-label{font-size:var(--ref-font-sm);font-weight:var(--sys-font-wt-md)}
.settings-row .sr-right{font-size:var(--ref-font-sm);color:var(--sys-text-sec)}
.status-badge{display:inline-flex;align-items:center;gap:var(--ref-space-1);
  padding:var(--ref-space-1) var(--ref-space-3);border-radius:var(--ref-radius-full);
  font-size:var(--ref-font-xs);font-weight:var(--sys-font-wt-md)}
.status-badge.online{background:rgba(16,185,129,.12);color:var(--ref-green-600)}
.status-badge.offline{background:rgba(239,68,68,.12);color:var(--ref-red-600)}
.status-dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* ================================================================
   TOAST
   ================================================================ */
.toast-container{position:fixed;top:calc(env(safe-area-inset-top,0) + 16px);
  left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;
  gap:var(--ref-space-2);pointer-events:none;width:calc(100% - 32px);max-width:400px}
.toast{background:var(--sys-surface-raised);color:var(--sys-text);
  padding:var(--ref-space-3) var(--ref-space-4);border-radius:var(--ref-radius-md);
  box-shadow:var(--sys-shadow-lg);border:1px solid var(--sys-border);
  font-size:var(--ref-font-sm);font-weight:var(--sys-font-wt-md);
  display:flex;align-items:center;gap:var(--ref-space-2);
  transform:translateY(-20px);opacity:0;pointer-events:auto;
  animation:toastIn var(--ref-dur-norm) var(--ref-ease) forwards}
@keyframes toastIn{to{transform:translateY(0);opacity:1}}
.toast.out{animation:toastOut var(--ref-dur-norm) var(--ref-ease) forwards}
@keyframes toastOut{to{transform:translateY(-20px);opacity:0}}

/* ================================================================
   COMMAND PALETTE (Spotlight)
   ================================================================ */
.cmd-overlay{position:fixed;inset:0;background:var(--sys-overlay);z-index:250;
  display:none;align-items:flex-start;justify-content:center;padding-top:80px}
.cmd-overlay.show{display:flex}
.cmd-box{background:var(--sys-surface);border-radius:var(--ref-radius-xl);
  box-shadow:var(--sys-shadow-xl);width:calc(100% - 32px);max-width:480px;
  overflow:hidden}
.cmd-input-wrap{display:flex;align-items:center;gap:var(--ref-space-3);
  padding:var(--ref-space-4);border-bottom:1px solid var(--sys-border)}
.cmd-input-wrap svg{color:var(--sys-text-ter);flex-shrink:0}
.cmd-input-wrap input{flex:1;font-size:var(--ref-font-lg);background:none;user-select:text}
.cmd-results{max-height:360px;overflow-y:auto}
.cmd-item{display:flex;align-items:center;gap:var(--ref-space-3);
  padding:var(--ref-space-3) var(--ref-space-4);cursor:pointer;
  transition:background var(--ref-dur-fast) var(--ref-ease)}
.cmd-item:hover,.cmd-item.focused{background:var(--sys-brand-light)}
.cmd-item .ci-icon{width:36px;height:36px;border-radius:var(--ref-radius-sm);
  display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.cmd-item .ci-icon svg{width:18px;height:18px}
.cmd-item .ci-text{flex:1}
.cmd-item .ci-name{font-size:var(--ref-font-sm);font-weight:var(--sys-font-wt-md)}
.cmd-item .ci-desc{font-size:var(--ref-font-xs);color:var(--sys-text-ter)}
.cmd-item .ci-shortcut{font-size:var(--ref-font-xs);color:var(--sys-text-ter);
  font-family:monospace;background:var(--sys-bg-alt);padding:2px 8px;
  border-radius:var(--ref-radius-xs);flex-shrink:0}
.cmd-item-analytics{border-top:1px solid var(--sys-border)}
.cmd-item-analytics .ci-desc{font-style:italic}
.cmd-empty{padding:var(--ref-space-8);text-align:center;color:var(--sys-text-ter);
  font-size:var(--ref-font-sm)}

/* ================================================================
   BUG REPORT — Moved to bug-reporter.css (v2.7.0)
   ================================================================ */

/* ================================================================
   SUNLIGHT MODE SPECIFIC
   ================================================================ */
[data-theme="sunlight"] .bottom-sheet{border:2px solid #000;border-bottom:none}
[data-theme="sunlight"] .profile-card{border:2px solid #000}
[data-theme="sunlight"] .settings-row{border:2px solid #000}
[data-theme="sunlight"] .theme-btn{border:2px solid #000}
[data-theme="sunlight"] .toast{border:2px solid #000}

/* ================================================================
   DARK MODE CONTRAST (v2.14.4 A7)
   Increased border visibility and card elevation for dark/system.
   ================================================================ */
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .dash-widget-container,
[data-theme="dark"] .stat-pill{
  border-color:var(--ref-gray-600);
  box-shadow:0 2px 8px rgba(0,0,0,.35)}
[data-theme="dark"] .dash-widget-header{
  background:rgba(255,255,255,.04);border-bottom-color:var(--ref-gray-600)}
[data-theme="dark"] .kpi-label{color:var(--ref-gray-300)}
@media(prefers-color-scheme:dark){
  [data-theme="system"] .kpi-card,
  [data-theme="system"] .dash-widget-container,
  [data-theme="system"] .stat-pill{
    border-color:var(--ref-gray-600);
    box-shadow:0 2px 8px rgba(0,0,0,.35)}
  [data-theme="system"] .dash-widget-header{
    background:rgba(255,255,255,.04);border-bottom-color:var(--ref-gray-600)}
  [data-theme="system"] .kpi-label{color:var(--ref-gray-300)}
}


/* ================================================================
   DASHBOARD WIDGETS (v2.0)
   ================================================================ */
.dash-widget-zone{
  display:flex;flex-direction:column;gap:var(--ref-space-4);
  margin-bottom:var(--ref-space-5);
}
.dash-widget-container{
  background:var(--sys-surface);border:1px solid var(--sys-border);
  border-radius:var(--ref-radius-xl);overflow:hidden;
  box-shadow:var(--sys-shadow-sm);
}
.dash-widget-header{
  display:flex;align-items:center;gap:var(--ref-space-3);
  padding:var(--ref-space-3) var(--ref-space-4);
  border-bottom:1px solid var(--sys-border);background:var(--sys-bg-alt);
}
.dash-widget-header .dw-icon{
  width:32px;height:32px;border-radius:var(--ref-radius-sm);
  display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;
}
.dash-widget-header .dw-icon svg{width:18px;height:18px}
.dash-widget-header .dw-title{
  font-size:var(--ref-font-md);font-weight:var(--sys-font-wt-sb);margin:0;
}
/* v2.14.3.1: Widget reorder controls — up/down arrows in the header */
.dw-reorder{
  margin-left:auto;display:flex;gap:2px;flex-shrink:0;
}
.dw-reorder-btn{
  width:32px;height:28px;border:1px solid var(--sys-border, #e2e8f0);border-radius:var(--ref-radius-sm, 6px);
  background:var(--sys-surface, #fff);color:var(--sys-text-sec, #64748b);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all 0.15s ease;
  padding:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.dw-reorder-btn:active:not(:disabled){background:var(--sys-brand, #2C5F8A);color:#fff;transform:scale(0.92);}
.dw-reorder-btn:disabled{opacity:0.25;cursor:not-allowed;}
.dw-reorder-btn svg{pointer-events:none;}
.dash-widget-body{padding:var(--ref-space-4)}

/* Sunlight overrides for widgets */
[data-theme="sunlight"] .dash-widget-container{
  border:2px solid #000;box-shadow:none;
}
[data-theme="sunlight"] .dash-widget-header{
  border-bottom:2px solid #000;background:#fff;
}

/* ================================================================
   FULL-SCREEN APP VIEWPORT
   ================================================================ */
.app-viewport{position:fixed;inset:0;z-index:200;background:var(--sys-bg);
  display:flex;flex-direction:column;
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.32,.72,0,1);
  will-change:transform;
  pointer-events:none}
.app-viewport.active{transform:translateY(0);pointer-events:auto}

/* ---- App Header (compact) ---- */
/* v2.14.5: position:relative + z-index creates a stacking context so scrolled
   content in .app-body never composites above the header. box-shadow masks
   any sub-pixel edge bleed at the header/body boundary. */
.app-header{display:flex;align-items:center;gap:var(--ref-space-2);
  padding:env(safe-area-inset-top,0) var(--ref-space-3) 0;
  min-height:56px;background:var(--sys-surface);
  border-bottom:1px solid var(--sys-border);flex-shrink:0;
  position:relative;z-index:10;
  box-shadow:0 2px 6px -2px rgba(0,0,0,.1)}
.app-back{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--ref-radius-md);color:var(--sys-brand)}
.app-back:hover{background:var(--sys-brand-light)}
.app-header-info{display:flex;align-items:center;gap:var(--ref-space-2);flex:1;min-width:0}
.app-header-icon{width:28px;height:28px;border-radius:var(--ref-radius-sm);
  display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.app-header-icon svg{width:16px;height:16px}
.app-header-title{font-size:var(--ref-font-md);font-weight:var(--sys-font-wt-sb);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-header-actions{display:flex;align-items:center;gap:var(--ref-space-1)}

/* ---- App Body ---- */
.app-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.app-body.has-iframe{overflow:hidden}
.app-body iframe{width:100%;height:100%;border:none;display:block}

/* ---- Loading & Error states ---- */
.app-loading{display:flex;align-items:center;justify-content:center;height:200px;
  color:var(--sys-text-sec)}
.app-loading-spinner{width:28px;height:28px;border:3px solid var(--sys-border);
  border-top-color:var(--sys-brand);border-radius:50%;animation:appSpin .7s linear infinite}
@keyframes appSpin{to{transform:rotate(360deg)}}
.app-error{padding:var(--ref-space-6);text-align:center;color:var(--sys-text-sec);
  font-size:var(--ref-font-sm)}

/* ---- Chrome transitions when app is active ---- */
body.app-active .bnav{transform:translateY(100%);pointer-events:none}
body.app-active #view-main{pointer-events:none}

/* ---- Sunlight overrides for viewport ---- */
[data-theme="sunlight"] .app-header{border-bottom:2px solid #000}
/* v2.14.5: stronger shadow in dark themes for header edge masking */
[data-theme="dark"] .app-header{box-shadow:0 2px 8px -2px rgba(0,0,0,.35)}
@media(prefers-color-scheme:dark){
  [data-theme="system"] .app-header{box-shadow:0 2px 8px -2px rgba(0,0,0,.35)}
}

/* ================================================================
   DESKTOP RESPONSIVE BREAKPOINTS
   ================================================================ */
@media(min-width: 820px) {
  /* Bottom nav becomes left sidebar */
  .bnav {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;            /* ← UNSET mobile right:0 */
    width: 88px;            /* v2.14.4 A6: wider sidebar for bigger touch targets */
    height: 100%;           /* ← Explicit full height (not auto) */
    height: 100dvh;         /* ← Modern override for dynamic viewport */
    flex-direction: column;
    justify-content: flex-start;
    padding-top: var(--ref-space-4);
    padding-bottom: var(--ref-space-2);
    border-top: none;
    border-right: 1px solid var(--sys-border);
    transition: transform .35s cubic-bezier(.32,.72,0,1);
    overflow-y: auto;       /* ← Scrollable if content overflows */
    overflow-x: hidden;
  }
  .ni {
    flex: none;
    width: 100%;
    min-height: 76px;       /* v2.14.4 A6: taller touch targets */
  }
  .ni svg {
    width: 26px;            /* v2.14.4 A6: bigger nav icons */
    height: 26px;
  }
  .ni .ni-label {
    font-size: 14px;        /* v2.14.4 A6: bigger label text */
  }
  /* Logo in sidebar: sits between Dashboard and Chat */
  .bnav-logo {
    width: 100%;
    padding: var(--ref-space-4) var(--ref-space-2);
    justify-content: center;
  }
  .bnav-logo img {
    max-width: 64px;
    max-height: 32px;
  }
  /* v2.14.4 A5: Vertical logo gets more height in the sidebar */
  .bnav-logo img.logo-vertical {
    max-width: 56px;
    max-height: 64px;
    object-fit: contain;
  }
  .bnav-logo.settings-active::after {
    bottom: auto;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
  }

  #view-main {
    padding-bottom: 0;
    padding-left: 88px;     /* v2.14.4 A6: match wider sidebar */
  }

  /* App viewport: scale-up animation on desktop (more native feel) */
  .app-viewport {
    transform: scale(0.96);
    opacity: 0;
    transition: transform .25s cubic-bezier(.32,.72,0,1), opacity .2s ease;
  }
  .app-viewport.active {
    transform: scale(1);
    opacity: 1;
  }

  /* Hide sidebar when app is active (slide left on desktop) */
  body.app-active .bnav {
    transform: translateX(-100%);
  }
}

@media(min-width: 1024px) {
  .app-grid {
    grid-template-columns: repeat(8, 1fr);
  }
  .cmd-overlay {
    padding-top: 120px;
  }
}

/* v2.13.0: App Authorizations + Nutshell modal (company-wide) */
.ts-app-auth-card { margin-bottom: var(--ref-space-4, 16px); }
.ts-app-auth-card .ts-auth-hint {
  font-size: var(--ref-font-xs, 13px);
  color: var(--sys-text-sec);
  margin: var(--ref-space-1, 4px) 0 var(--ref-space-3, 12px);
  line-height: 1.45;
}
.ts-app-auth-card .btn.is-loading { opacity: .7; cursor: wait; }
.ts-app-auth-card .ts-auth-divider {
  height: 1px;
  background: var(--sys-border);
  margin: var(--ref-space-4, 16px) 0;
}
.ts-app-auth-card .ts-auth-scope {
  font-size: var(--ref-font-xs, 12px);
  font-weight: 400;
  color: var(--sys-text-sec);
  margin-left: var(--ref-space-1, 4px);
}

/* Nutshell modal */
.ts-ns-overlay {
  position: fixed; inset: 0;
  background: var(--sys-overlay, rgba(0,0,0,.45));
  display: flex; align-items: center; justify-content: center;
  padding: var(--ref-space-4, 16px);
  z-index: 9998;
  opacity: 0;
  transition: opacity var(--ref-dur-norm, 250ms) var(--ref-ease, cubic-bezier(.4,0,.2,1));
}
.ts-ns-overlay.show { opacity: 1; }
.ts-ns-modal {
  background: var(--sys-surface);
  color: var(--sys-text);
  border: 1px solid var(--sys-border);
  border-radius: var(--ref-radius-lg, 16px);
  box-shadow: var(--sys-shadow-xl);
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
}
.ts-ns-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--ref-space-4, 16px);
  border-bottom: 1px solid var(--sys-border);
}
.ts-ns-header h3 {
  margin: 0;
  font-size: var(--ref-font-md, 19px);
  font-weight: var(--sys-font-wt-sb, 600);
  display: flex; align-items: center; gap: var(--ref-space-2, 8px);
}
.ts-ns-body {
  padding: var(--ref-space-4, 16px);
  display: flex; flex-direction: column; gap: var(--ref-space-3, 12px);
}
.ts-ns-label {
  display: flex; flex-direction: column; gap: var(--ref-space-1, 4px);
  font-size: var(--ref-font-sm, 15px);
  font-weight: var(--sys-font-wt-md, 500);
}
.ts-ns-label input {
  width: 100%;
  padding: var(--ref-space-2, 8px) var(--ref-space-3, 12px);
  border: 1px solid var(--sys-border-strong);
  border-radius: var(--ref-radius-sm, 8px);
  background: var(--sys-surface);
  color: var(--sys-text);
  font-size: var(--ref-font-base, 17px);
  box-sizing: border-box;
}
.ts-ns-label input:focus {
  outline: none;
  box-shadow: var(--sys-focus);
  border-color: var(--sys-brand);
}
.ts-ns-hint {
  font-size: var(--ref-font-xs, 13px);
  color: var(--sys-text-sec);
  margin: 0;
  line-height: 1.45;
}
.ts-ns-error {
  background: rgba(239,68,68,.1);
  color: var(--sys-error);
  border: 1px solid var(--sys-error);
  border-radius: var(--ref-radius-sm, 8px);
  padding: var(--ref-space-2, 8px) var(--ref-space-3, 12px);
  font-size: var(--ref-font-xs, 13px);
}
.ts-ns-footer {
  padding: var(--ref-space-4, 16px);
  border-top: 1px solid var(--sys-border);
  display: flex; justify-content: flex-end; gap: var(--ref-space-2, 8px);
}
.ts-ns-footer .btn.is-loading { opacity: .7; cursor: wait; }

/* === LAYOUT v2.12.5 — sidebar preserved on desktop, sticky headers === */

/* 1. SINGLE-COLUMN DASHBOARD — widget zone and grid container stack vertically.
      The .app-grid itself keeps its responsive grid columns (repeat(3-6,1fr))
      defined above. Only the outer containers stack. */
.dash-widget-zone,
#app-grid-container {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ref-space-4, 16px);
  width: 100%;
  max-width: 100%;
}
.dash-widget-container,
.dash-widget-zone > *,
.app-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-inline: 0 !important;
}

/* Wrap rows — no horizontal scrolling anywhere (v2.14.1) */
.recent-row,
.app-chips-row,
.greeting-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  overflow-x: visible !important;
  gap: var(--ref-space-2, 8px);
}
/* Quick stats: grid layout, prevent horizontal overflow */
.quick-stats {
  overflow-x: hidden !important;
  max-width: 100%;
}

/* 2. SCROLL OWNERSHIP — .sub-view owns vertical scroll */
.view.active {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: clip;
  max-width: 100vw;
  max-width: 100dvw;
}
.sub-view {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: clip;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
/* v2.14.4.3: Hard clip — prevent ANY horizontal shift */
#view-main, #sv-dash, .app-viewport {
  max-width: 100vw;
  max-width: 100dvw;
  overflow-x: clip;
  overscroll-behavior-x: none;
}
.app-body { min-height: 0; }

/* 3. STICKY WIDGET HEADERS — handled in the consolidated v2.14.1 block below.
      Container setup (overflow, isolation) remains here. */
@media (max-width: 1199.98px) {
  .dash-widget-container {
    position: relative;
    isolation: isolate;
    overflow: clip;
    overflow-clip-margin: 0;
  }
}

/* 4. BOTTOM NAV — ONLY phones + iPad mini (<820px).
      At ≥820px the theme's original left-sidebar rules take over untouched. */
@media (max-width: 819.98px) {
  .bnav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 49px;
    flex-direction: row !important;
    z-index: 200;
    padding-bottom: env(safe-area-inset-bottom, 0);
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter:         saturate(180%) blur(12px);
    background: color-mix(in srgb, var(--sys-surface) 92%, transparent);
    border-top: 1px solid var(--sys-border, rgba(0,0,0,.08));
    border-right: none !important;
    /* v2.14.4.3: Ensure bottom nav never clips off-screen */
    overflow: visible;
  }
  /* v2.14.4.3: Padding ONLY on .sub-view (not #view-main or .view.active)
     to avoid stacking padding that pushes content past viewport edge */
  #view-main,
  .view.active {
    margin-left: 0 !important;
    padding-left: 0;
    padding-right: 0;
  }
  .sub-view {
    margin-left: 0 !important;
    padding-left: var(--ref-space-4, 16px);
    padding-right: var(--ref-space-4, 16px);
  }
  /* Clear space below so content doesn't hide behind bnav */
  #view-main {
    padding-bottom: calc(
      56px +
      env(safe-area-inset-bottom, 0px) +
      12px
    );
  }
}

/* 5. TABLET-PORTRAIT-AND-UP SCROLL FIX (≥600px, doesn't touch nav) */
@media (min-width: 600px) {
  .view.active { overflow: clip; }
}

/* 6. Desktop reading-width cap (sidebar preserved by theme default) */
@media (min-width: 1280px) {
  .sub-view {
    max-width: 1200px;
    margin: 0 auto;
    padding-inline: var(--ref-space-6);
  }
}
@media (min-width: 1680px) {
  .sub-view { max-width: 1400px; }
}

/* 6b. Full-width opt-out (v2.14.0) — chat-style sub-views need to fill the
   viewport on desktop. iMessage/Slack on macOS are full-width by design;
   the messaging plugin's Team tab and any future chat-shaped plugin should
   match that expectation. Plugins opt in by adding `.ts-fullwidth` to
   their .sub-view element. The TS Internal Messaging plugin's #sv-team is
   wired in here directly so it works without any plugin-side change.
   Cap-overrides repeat at every cap breakpoint so a more-specific media
   rule above can't sneak the cap back in. The !important on the base rule
   matches what the messaging plugin previously shipped in nav-inject.css —
   migrating the responsibility to the theme keeps that contract.

   Note: this co-exists fine with the messaging plugin's own #sv-team rule
   in nav-inject.css (v1.0.13). When that plugin drops its workaround in a
   future release, this is the one source of truth. */
.sub-view.ts-fullwidth,
#sv-team {
  max-width: none !important;
  padding-inline: 0 !important;
}
@media (min-width: 1280px) {
  .sub-view.ts-fullwidth,
  #sv-team {
    max-width: none;
    padding-inline: 0;
  }
}
@media (min-width: 1680px) {
  .sub-view.ts-fullwidth,
  #sv-team { max-width: none; }
}

/* 7. App viewport cleanup */
.app-viewport:not(.active) { visibility: hidden; pointer-events: none; }
/* === END LAYOUT v2.12.5 === */
/* === STICKY HEADER AESTHETIC FIX v2.14.1 === */
/* Sticky widget headers need:
   1. Explicit opaque background (not inherit — that resolves to transparent
      when the parent chain has no solid bg, causing content peek-through)
   2. Rounded top corners matching the card container
   3. Soft bottom shadow instead of hard edge
   overflow:clip on containers clips at the border-radius without creating a
   scrolling context, so sticky children still work. */

@media (max-width: 1199.98px) {
  .widget-card {
    overflow: clip;
    overflow-clip-margin: 0;
  }

  .dash-widget-container > *:first-child,
  .dash-widget-container > div > *:first-child:not(div),
  .dash-widget-container .widget-header,
  .dash-widget-container .card-header,
  .dash-widget-container > header,
  .dash-widget-container > h2:first-child,
  .dash-widget-container > h3:first-child,
  .widget-card > .widget-header,
  .widget-card > header,
  .widget-card > h3:first-child,
  /* v2.14.5: cover plugin headers rendered inside app-body scroll context */
  .app-body .widget-header,
  .app-body .card-header,
  .app-body > div > header:first-child,
  .app-body [data-sticky-header] {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;

    /* Explicit opaque surface — NEVER inherit or transparent. This is the
       fix for the "content peeking under header" bug. */
    background: var(--sys-surface, #fff) !important;
    background-clip: padding-box !important;

    border-top-left-radius:  var(--ref-radius-lg, 16px) !important;
    border-top-right-radius: var(--ref-radius-lg, 16px) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;

    box-shadow: 0 6px 8px -6px rgba(0, 0, 0, 0.12) !important;

    padding-block: var(--ref-space-3, 12px);
    padding-inline: var(--ref-space-4, 16px);
  }
}
/* === END STICKY HEADER AESTHETIC FIX === */