/* ============================================================
   NEXUS HUB — ENTERPRISE PORTAL DESIGN SYSTEM
   707 Retail Group
   ============================================================ */

/* ─── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ─── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Colors — Base */
  --color-bg:              #F1F5F9;
  --color-bg-2:            #E8EEF5;
  --color-surface:         #FFFFFF;
  --color-surface-2:       #F8FAFC;
  --color-surface-3:       #F1F5F9;
  --color-border:          #E2E8F0;
  --color-border-subtle:   #F1F5F9;

  /* Colors — Brand */
  --color-primary:         #1D4ED8;
  --color-primary-hover:   #1E40AF;
  --color-primary-dark:    #1E3A8A;
  --color-primary-light:   #DBEAFE;
  --color-primary-xlight:  #EFF6FF;

  /* Colors — Semantic */
  --color-success:         #059669;
  --color-success-hover:   #047857;
  --color-success-light:   #D1FAE5;
  --color-success-xlight:  #ECFDF5;

  --color-warning:         #D97706;
  --color-warning-hover:   #B45309;
  --color-warning-light:   #FEF3C7;
  --color-warning-xlight:  #FFFBEB;

  --color-danger:          #DC2626;
  --color-danger-hover:    #B91C1C;
  --color-danger-light:    #FEE2E2;
  --color-danger-xlight:   #FFF5F5;

  --color-info:            #0284C7;
  --color-info-light:      #E0F2FE;

  /* Colors — Text */
  --color-text-primary:    #0F172A;
  --color-text-secondary:  #475569;
  --color-text-muted:      #94A3B8;
  --color-text-disabled:   #CBD5E1;
  --color-text-inverse:    #FFFFFF;
  --color-text-link:       #1D4ED8;

  /* Colors — Sidebar */
  --sidebar-bg:            #0F172A;
  --sidebar-text:          #94A3B8;
  --sidebar-text-active:   #FFFFFF;
  --sidebar-item-hover:    rgba(255,255,255,0.06);
  --sidebar-item-active:   rgba(255,255,255,0.10);
  --sidebar-border:        rgba(255,255,255,0.07);

  /* Typography */
  --font-family:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs:          11px;
  --font-size-sm:          12px;
  --font-size-base:        13px;
  --font-size-md:          14px;
  --font-size-lg:          15px;
  --font-size-xl:          16px;
  --font-size-2xl:         18px;
  --font-size-3xl:         20px;
  --font-size-4xl:         24px;
  --font-size-5xl:         28px;
  --font-size-6xl:         32px;
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;
  --line-height-tight:     1.25;
  --line-height-snug:      1.375;
  --line-height-normal:    1.5;
  --line-height-relaxed:   1.625;
  --letter-spacing-tight:  -0.4px;
  --letter-spacing-snug:   -0.2px;
  --letter-spacing-normal: 0px;
  --letter-spacing-wide:   0.3px;
  --letter-spacing-wider:  0.5px;

  /* Spacing */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;

  /* Border Radius */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-base: 8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-3xl:  20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
  --shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.03);
  --shadow-xl:   0 20px 25px -5px rgba(0,0,0,0.08), 0 10px 10px -5px rgba(0,0,0,0.03);
  --shadow-2xl:  0 25px 50px -12px rgba(0,0,0,0.18);
  --shadow-inner:inset 0 2px 4px rgba(0,0,0,0.05);

  /* Transitions */
  --transition-fast:    0.1s ease;
  --transition-base:    0.15s ease;
  --transition-slow:    0.25s ease;
  --transition-slower:  0.35s cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --sidebar-width:          256px;
  --sidebar-collapsed-width:72px;
  --header-height:          60px;
  --mobile-tabs-height:     64px;
  --content-max-width:      1400px;
  --content-padding:        24px;

  /* Z-index stack */
  --z-base:     1;
  --z-sticky:   10;
  --z-dropdown: 100;
  --z-sidebar:  200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ─── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font-family: inherit; }
a { color: var(--color-text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); }

/* ─── Focus Styles ───────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ─── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: #CBD5E1; }

/* ============================================================
   LAYOUT SHELL
   ============================================================ */

.nh-app {
  display: flex;
  min-height: 100vh;
  background: var(--color-bg);
}

.nh-shell {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

/* ─── Sidebar ─────────────────────────────────────────────────── */
.nh-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  z-index: var(--z-sidebar);
  transition: width var(--transition-slower), transform var(--transition-slower);
  overflow: hidden;
}

.nh-sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

.nh-sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--sidebar-border);
  min-height: var(--header-height);
  overflow: hidden;
}

.nh-sidebar-logo {
  width: 34px;
  height: 34px;
  background: var(--color-primary);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nh-sidebar-logo svg {
  width: 18px;
  height: 18px;
  stroke: white;
}

.nh-sidebar-brand-text {
  overflow: hidden;
  transition: opacity var(--transition-slow), width var(--transition-slow);
}

.nh-sidebar-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverse);
  letter-spacing: var(--letter-spacing-tight);
  white-space: nowrap;
}

.nh-sidebar-name span {
  color: #60A5FA;
}

.nh-sidebar-sub {
  font-size: var(--font-size-xs);
  color: var(--sidebar-text);
  white-space: nowrap;
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  margin-top: 1px;
}

.nh-sidebar.collapsed .nh-sidebar-brand-text {
  opacity: 0;
  width: 0;
}

.nh-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-3) 0;
}

.nh-sidebar-nav::-webkit-scrollbar { width: 0; }

.nh-nav-section {
  margin-bottom: var(--space-2);
}

.nh-nav-section-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: rgba(148,163,184,0.55);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  padding: var(--space-4) var(--space-4) var(--space-2);
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--transition-slow);
}

.nh-sidebar.collapsed .nh-nav-section-label {
  opacity: 0;
}

.nh-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  color: var(--sidebar-text);
  cursor: pointer;
  text-decoration: none;
  border-radius: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
  min-height: 40px;
  overflow: hidden;
}

.nh-nav-item:hover {
  background: var(--sidebar-item-hover);
  color: #CBD5E1;
  text-decoration: none;
}

.nh-nav-item.active {
  background: var(--sidebar-item-active);
  color: var(--sidebar-text-active);
}

.nh-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.nh-nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nh-nav-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.nh-nav-label {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transition: opacity var(--transition-slow);
  flex: 1;
}

.nh-sidebar.collapsed .nh-nav-label {
  opacity: 0;
  width: 0;
}

.nh-nav-badge {
  background: var(--color-danger);
  color: white;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  min-width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  flex-shrink: 0;
  transition: opacity var(--transition-slow);
}

.nh-sidebar.collapsed .nh-nav-badge {
  opacity: 0;
}

/* Sidebar footer */
.nh-sidebar-footer {
  border-top: 1px solid var(--sidebar-border);
  padding: var(--space-4);
}

.nh-sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background var(--transition-fast);
  overflow: hidden;
}

.nh-sidebar-user:hover {
  background: var(--sidebar-item-hover);
}

.nh-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: white;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0;
}

.nh-user-info {
  overflow: hidden;
  transition: opacity var(--transition-slow);
  min-width: 0;
}

.nh-user-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-inverse);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nh-user-role {
  font-size: var(--font-size-xs);
  color: var(--sidebar-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nh-sidebar.collapsed .nh-user-info {
  opacity: 0;
  width: 0;
}

/* Sidebar collapse toggle */
.nh-sidebar-toggle {
  position: absolute;
  right: -14px;
  top: 72px;
  width: 28px;
  height: 28px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background var(--transition-fast), opacity var(--transition-base);
  box-shadow: var(--shadow-sm);
  opacity: 0;
}

.nh-sidebar:hover .nh-sidebar-toggle {
  opacity: 1;
}

.nh-sidebar-toggle svg {
  width: 14px;
  height: 14px;
  stroke: var(--color-text-secondary);
  transition: transform var(--transition-base);
}

.nh-sidebar.collapsed .nh-sidebar-toggle svg {
  transform: rotate(180deg);
}

/* ─── Main Content Wrapper ────────────────────────────────────── */
.nh-main {
  flex: 1;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left var(--transition-slower);
}

.nh-sidebar.collapsed ~ .nh-main,
.nh-main.sidebar-collapsed {
  margin-left: var(--sidebar-collapsed-width);
}

/* ─── Header ──────────────────────────────────────────────────── */
.nh-header {
  position: sticky;
  top: 0;
  height: var(--header-height);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 var(--content-padding);
  gap: var(--space-4);
  z-index: var(--z-sticky);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.nh-header-title {
  flex: 0 0 auto;
}

.nh-header-title h1 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-tight);
}

.nh-header-title .subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: 1px;
}

.nh-header-spacer { flex: 1; }

/* Global Search */
.nh-search {
  position: relative;
  flex: 0 0 auto;
  width: 280px;
}

.nh-search-input {
  width: 100%;
  height: 36px;
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0 var(--space-4) 0 36px;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.nh-search-input:focus {
  outline: none;
  background: var(--color-surface);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-xlight);
}

.nh-search-input::placeholder {
  color: var(--color-text-muted);
}

.nh-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  stroke: var(--color-text-muted);
  pointer-events: none;
}

/* Header Actions */
.nh-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nh-icon-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  color: var(--color-text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.nh-icon-btn:hover {
  background: var(--color-surface-3);
  color: var(--color-text-primary);
}

.nh-icon-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.nh-icon-btn-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  background: var(--color-danger);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-surface);
}

/* Install Button in Header */
.nh-install-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-3);
  background: var(--color-primary-xlight);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-light);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.nh-install-btn:hover {
  background: var(--color-primary-light);
}

.nh-install-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

/* Profile Menu */
.nh-profile-menu {
  position: relative;
}

.nh-profile-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-2) 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.nh-profile-trigger:hover {
  background: var(--color-surface-3);
  border-color: #CBD5E1;
}

.nh-profile-avatar {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: white;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nh-profile-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.nh-profile-chevron {
  width: 14px;
  height: 14px;
  stroke: var(--color-text-muted);
}

/* ─── Page Content ────────────────────────────────────────────── */
.nh-content {
  flex: 1;
  padding: var(--content-padding);
  overflow-x: hidden;
}

.nh-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  gap: var(--space-4);
}

.nh-page-header-left h2 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-tight);
}

.nh-page-header-left p {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

/* ─── Mobile Bottom Tabs ──────────────────────────────────────── */
.nh-mobile-tabs {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--mobile-tabs-height);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  z-index: var(--z-sidebar);
  padding: 0 var(--space-2);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.nh-mobile-tabs-inner {
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: space-around;
}

.nh-tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  color: var(--color-text-muted);
  border-radius: var(--radius-xl);
  transition: color var(--transition-fast), background var(--transition-fast);
  position: relative;
  min-width: 52px;
}

.nh-tab-item:hover { text-decoration: none; }

.nh-tab-item.active {
  color: var(--color-primary);
}

.nh-tab-item svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
}

.nh-tab-label {
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
}

.nh-tab-badge {
  position: absolute;
  top: 6px;
  right: 10px;
  min-width: 16px;
  height: 16px;
  background: var(--color-danger);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-surface);
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* ============================================================
   SHARED COMPONENTS
   ============================================================ */

/* ─── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-4);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

.btn:active { transform: scale(0.97); }

.btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  flex-shrink: 0;
}

.btn-primary {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}
.btn-secondary:hover { background: var(--color-surface-3); border-color: #CBD5E1; color: var(--color-text-primary); }

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--color-surface-3); color: var(--color-text-primary); }

.btn-danger {
  background: var(--color-danger);
  color: white;
  border-color: var(--color-danger);
}
.btn-danger:hover { background: var(--color-danger-hover); }

.btn-success {
  background: var(--color-success);
  color: white;
  border-color: var(--color-success);
}
.btn-success:hover { background: var(--color-success-hover); }

.btn-sm {
  height: 30px;
  padding: 0 var(--space-3);
  font-size: var(--font-size-xs);
  border-radius: var(--radius-md);
}

.btn-lg {
  height: 44px;
  padding: 0 var(--space-6);
  font-size: var(--font-size-lg);
  border-radius: var(--radius-xl);
}

.btn-icon {
  width: 36px;
  padding: 0;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── Cards ───────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-5) 0;
  margin-bottom: var(--space-4);
}

.card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-snug);
}

.card-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.card-body { padding: var(--space-5); }
.card-header + .card-body { padding-top: 0; }
.card-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
}

/* ─── KPI Cards ───────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

@media (min-width: 1280px) {
  .kpi-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
}

@media (min-width: 1600px) {
  .kpi-grid {
    gap: 20px;
  }
}

.kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  position: relative;
  overflow: hidden;
}

.kpi-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.kpi-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.kpi-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kpi-card-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

.kpi-card-icon.blue { background: var(--color-primary-light); color: var(--color-primary); }
.kpi-card-icon.green { background: var(--color-success-light); color: var(--color-success); }
.kpi-card-icon.amber { background: var(--color-warning-light); color: var(--color-warning); }
.kpi-card-icon.red { background: var(--color-danger-light); color: var(--color-danger); }

.kpi-trend {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: 3px 7px;
  border-radius: var(--radius-full);
}

.kpi-trend.up { background: var(--color-success-light); color: var(--color-success); }
.kpi-trend.down { background: var(--color-danger-light); color: var(--color-danger); }
.kpi-trend.neutral { background: var(--color-surface-3); color: var(--color-text-muted); }

.kpi-trend svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
}

.kpi-value {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.kpi-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.kpi-sublabel {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Progress bar on KPI */
.kpi-progress {
  margin-top: var(--space-4);
}

.kpi-progress-bar {
  height: 4px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: 4px;
}

.kpi-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.kpi-progress-fill.success { background: var(--color-success); }
.kpi-progress-fill.warning { background: var(--color-warning); }
.kpi-progress-fill.danger  { background: var(--color-danger); }

.kpi-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ─── App Cards ───────────────────────────────────────────────── */
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
}

.app-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  cursor: pointer;
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
  position: relative;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
}

.app-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: var(--color-primary-light);
  text-decoration: none;
}

.app-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.app-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.app-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
}

.app-icon.navy  { background: #1E3A8A; color: white; }
.app-icon.teal  { background: #0F766E; color: white; }
.app-icon.slate { background: #334155; color: white; }
.app-icon.indigo{ background: #3730A3; color: white; }
.app-icon.emerald{ background: #065F46; color: white; }
.app-icon.blue  { background: #1D4ED8; color: white; }
.app-icon.violet{ background: #5B21B6; color: white; }
.app-icon.rose  { background: #9F1239; color: white; }
.app-icon.orange{ background: #9A3412; color: white; }
.app-icon.cyan  { background: #0E7490; color: white; }

.app-fav-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.app-fav-btn:hover { color: var(--color-warning); background: var(--color-warning-xlight); }
.app-fav-btn.active { color: var(--color-warning); }

.app-fav-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
}

.app-card-body { flex: 1; }

.app-name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.app-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug);
}

.app-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* ─── Badges & Labels ─────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 7px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  white-space: nowrap;
  letter-spacing: var(--letter-spacing-wide);
}

.badge-primary { background: var(--color-primary-light); color: var(--color-primary-dark); }
.badge-success { background: var(--color-success-light); color: #065F46; }
.badge-warning { background: var(--color-warning-light); color: #92400E; }
.badge-danger  { background: var(--color-danger-light); color: #991B1B; }
.badge-neutral { background: var(--color-surface-3); color: var(--color-text-secondary); }
.badge-info    { background: var(--color-info-light); color: #0C4A6E; }

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
}

/* Priority labels */
.priority-high   { background: var(--color-danger-light); color: #991B1B; }
.priority-medium { background: var(--color-warning-light); color: #92400E; }
.priority-low    { background: var(--color-success-light); color: #065F46; }
.priority-urgent { background: #7F1D1D; color: white; }

/* ─── Tabs ────────────────────────────────────────────────────── */
.nh-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-5);
}

.nh-tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-4);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  margin-bottom: -1px;
  white-space: nowrap;
}

.nh-tab:hover { color: var(--color-text-primary); }

.nh-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.nh-tab-count {
  background: var(--color-surface-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  min-width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.nh-tab.active .nh-tab-count {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* ─── Search & Filter Toolbar ─────────────────────────────────── */
.nh-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.nh-toolbar-search {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 360px;
}

.nh-toolbar-search input {
  width: 100%;
  height: 38px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0 var(--space-4) 0 38px;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.nh-toolbar-search input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-xlight);
}

.nh-toolbar-search svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  stroke: var(--color-text-muted);
  pointer-events: none;
}

.nh-toolbar-filters {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ─── Dropdown ────────────────────────────────────────────────── */
.nh-dropdown {
  position: relative;
  display: inline-block;
}

.nh-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  min-width: 180px;
  z-index: var(--z-dropdown);
  overflow: hidden;
  animation: dropdownIn 0.12s ease forwards;
}

@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.nh-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
}

.nh-dropdown-item:hover {
  background: var(--color-surface-3);
  color: var(--color-text-primary);
  text-decoration: none;
}

.nh-dropdown-item svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  flex-shrink: 0;
}

.nh-dropdown-divider {
  height: 1px;
  background: var(--color-border-subtle);
  margin: var(--space-1) 0;
}

/* ─── Select ──────────────────────────────────────────────────── */
.nh-select {
  height: 36px;
  padding: 0 28px 0 var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color var(--transition-base);
  font-family: var(--font-family);
}

.nh-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-xlight);
}

/* ─── Form Elements ───────────────────────────────────────────── */
.form-group { margin-bottom: var(--space-4); }

.form-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.form-required {
  color: var(--color-danger);
  margin-left: 2px;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  line-height: var(--line-height-normal);
}

.form-input { height: 40px; }
.form-textarea { min-height: 96px; resize: vertical; padding: var(--space-3) var(--space-4); }

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-xlight);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-muted);
}

/* ─── Modals ──────────────────────────────────────────────────── */
.nh-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  backdrop-filter: blur(3px);
  animation: fadeIn 0.15s ease forwards;
}

.nh-modal-overlay.hidden { display: none; }

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.nh-modal {
  background: var(--color-surface);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalIn 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.nh-modal-lg { max-width: 720px; }
.nh-modal-xl { max-width: 900px; }
.nh-modal-sm { max-width: 380px; }

@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.nh-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.nh-modal-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-tight);
}

.nh-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.nh-modal-close:hover {
  background: var(--color-surface-3);
  color: var(--color-text-primary);
}

.nh-modal-close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.nh-modal-body { padding: var(--space-6); }
.nh-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
}

/* ─── Toasts ──────────────────────────────────────────────────── */
.nh-toast-container {
  position: fixed;
  top: var(--space-5);
  right: var(--space-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}

.nh-toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-text-primary);
  color: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  max-width: 360px;
  pointer-events: all;
  animation: toastIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.nh-toast.removing {
  animation: toastOut 0.2s ease forwards;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(40px); }
}

.nh-toast-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.nh-toast-icon svg { width: 100%; height: 100%; stroke: currentColor; }

.nh-toast.success { background: #064E3B; }
.nh-toast.warning { background: #78350F; }
.nh-toast.danger  { background: #7F1D1D; }
.nh-toast.info    { background: #0C4A6E; }

/* ─── Empty States ────────────────────────────────────────────── */
.nh-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-8);
  text-align: center;
}

.nh-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-2xl);
  background: var(--color-surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
}

.nh-empty-icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--color-text-muted);
}

.nh-empty h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.nh-empty p {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  max-width: 320px;
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-6);
}

/* ─── Skeleton Loaders ────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--color-surface-3) 25%, #E9EFF6 50%, var(--color-surface-3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text { height: 14px; border-radius: var(--radius-full); }
.skeleton-text.sm { height: 12px; }
.skeleton-text.lg { height: 18px; }
.skeleton-circle { border-radius: var(--radius-full); }
.skeleton-card { height: 120px; border-radius: var(--radius-xl); }
.skeleton-row { height: 52px; border-radius: var(--radius-base); }

/* ─── Divider ─────────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-5) 0;
}

.divider-v {
  width: 1px;
  background: var(--color-border);
  align-self: stretch;
}

/* ─── Report Cards ────────────────────────────────────────────── */
.report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

.report-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  cursor: pointer;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  box-shadow: var(--shadow-xs);
}

.report-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.report-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.report-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.report-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

.report-card-meta { flex: 1; }

.report-name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: 3px;
}

.report-source {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.report-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug);
}

.report-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

.report-updated {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ─── Task Table ──────────────────────────────────────────────── */
.task-table-wrapper {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.task-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.task-table thead {
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
}

.task-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color var(--transition-fast);
}

.task-table th:hover { color: var(--color-text-secondary); }

.task-table tbody tr {
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background var(--transition-fast);
  cursor: pointer;
}

.task-table tbody tr:last-child { border-bottom: none; }
.task-table tbody tr:hover { background: var(--color-surface-2); }
.task-table tbody tr.overdue { background: #FFF7F7; }
.task-table tbody tr.overdue:hover { background: #FEE9E9; }

.task-table td {
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
  color: var(--color-text-secondary);
}

.task-name-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.task-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
}

.task-labels {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.task-assignee {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.task-assignee-avatar {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Task Mobile Cards */
.task-card-mobile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  cursor: pointer;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.task-card-mobile:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.task-card-mobile.overdue {
  border-color: var(--color-danger-light);
  background: #FFF7F7;
}

/* ─── Announcement Cards ──────────────────────────────────────── */
.announcement-list { display: flex; flex-direction: column; gap: var(--space-3); }

.announcement-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  transition: box-shadow var(--transition-base);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
}

.announcement-card:hover { box-shadow: var(--shadow-md); }
.announcement-card.pinned { border-color: var(--color-primary-light); background: var(--color-primary-xlight); }
.announcement-card.urgent { border-color: var(--color-danger-light); background: #FFF7F7; }
.announcement-card.unread { border-left: 3px solid var(--color-primary); }

.announcement-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  gap: var(--space-3);
}

.announcement-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-snug);
}

.announcement-body {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-4);
}

.announcement-footer {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.announcement-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.announcement-meta svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
}

/* ─── Check-in Cards ──────────────────────────────────────────── */
.checkin-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
}

.checkin-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.checkin-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ─── Section Headers ─────────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.section-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-tight);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.section-title svg {
  width: 18px;
  height: 18px;
  stroke: var(--color-text-muted);
}

/* ─── Alert Banner ────────────────────────────────────────────── */
.alert-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-xl);
  border: 1px solid;
}

.alert-banner.warning {
  background: var(--color-warning-xlight);
  border-color: var(--color-warning-light);
  color: var(--color-warning);
}

.alert-banner.danger {
  background: var(--color-danger-xlight);
  border-color: var(--color-danger-light);
  color: var(--color-danger);
}

.alert-banner.info {
  background: var(--color-primary-xlight);
  border-color: var(--color-primary-light);
  color: var(--color-primary);
}

.alert-banner.success {
  background: var(--color-success-xlight);
  border-color: var(--color-success-light);
  color: var(--color-success);
}

.alert-banner-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.alert-banner-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
}

.alert-banner-body { flex: 1; }

.alert-banner-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.alert-banner-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug);
}

/* ─── Dashboard Grid ──────────────────────────────────────────── */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-5);
}

.dashboard-grid-full { grid-column: 1 / -1; }

.dashboard-main { min-width: 0; }
.dashboard-side { min-width: 0; }

/* Store Performance List */
.store-list { display: flex; flex-direction: column; gap: 0; }

.store-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background var(--transition-fast);
}

.store-item:last-child { border-bottom: none; }
.store-item:hover { background: var(--color-surface-2); }

.store-rank {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  width: 24px;
  flex-shrink: 0;
}

.store-info { flex: 1; min-width: 0; }

.store-name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.store-sales {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.store-bar-wrap {
  width: 100px;
  flex-shrink: 0;
}

.store-bar {
  height: 6px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: 3px;
}

.store-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.store-bar-fill.good { background: var(--color-success); }
.store-bar-fill.warn { background: var(--color-warning); }
.store-bar-fill.bad  { background: var(--color-danger); }

.store-pct {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-align: right;
}

.store-pct.good { color: var(--color-success); }
.store-pct.warn { color: var(--color-warning); }
.store-pct.bad  { color: var(--color-danger); }

/* ─── Member Chip ─────────────────────────────────────────────── */
.member-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px var(--space-2) 3px 3px;
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.member-chip-avatar {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ─── Online Status ───────────────────────────────────────────── */
.status-indicator {
  position: relative;
  display: inline-block;
}

.status-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-surface);
}

.status-dot.online  { background: var(--color-success); }
.status-dot.away    { background: var(--color-warning); }
.status-dot.offline { background: var(--color-text-muted); }

/* ─── Progress Ring ───────────────────────────────────────────── */
.progress-ring-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.progress-ring {
  transform: rotate(-90deg);
}

.progress-ring-track { fill: none; stroke: var(--color-border); }
.progress-ring-fill {
  fill: none;
  stroke: var(--color-primary);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-ring-label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   CHAT MODULE
   ============================================================ */

.chat-shell {
  display: flex;
  height: calc(100vh - var(--header-height) - var(--content-padding) * 2);
  min-height: 500px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* ─── Chat Left Panel ─────────────────────────────────────────── */
.chat-list-panel {
  width: 280px;
  flex-shrink: 0;
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  background: var(--color-surface-2);
  overflow: hidden;
}

.chat-list-header {
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.chat-list-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--space-3);
}

.chat-search {
  position: relative;
}

.chat-search input {
  width: 100%;
  height: 34px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0 var(--space-3) 0 32px;
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  color: var(--color-text-primary);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.chat-search input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-xlight);
}

.chat-search svg {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  stroke: var(--color-text-muted);
  pointer-events: none;
}

.chat-list-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2) 0;
}

.chat-section-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  padding: var(--space-3) var(--space-4) var(--space-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat-section-label button {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.chat-section-label button svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

.chat-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  border-radius: 0;
  transition: background var(--transition-fast);
  text-decoration: none;
  color: var(--color-text-secondary);
  position: relative;
}

.chat-list-item:hover {
  background: rgba(0,0,0,0.04);
  text-decoration: none;
}

.chat-list-item.active {
  background: var(--color-primary-xlight);
  color: var(--color-primary-dark);
}

.chat-list-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-base);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.chat-list-icon.channel {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.chat-list-icon.dm {
  border-radius: var(--radius-full);
  background: var(--color-success-light);
  color: var(--color-success);
  font-size: var(--font-size-xs);
}

.chat-list-item.active .chat-list-icon.channel {
  background: var(--color-primary);
  color: white;
}

.chat-list-info { flex: 1; min-width: 0; }

.chat-list-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-list-preview {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.chat-list-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.chat-list-time {
  font-size: 10px;
  color: var(--color-text-muted);
}

.chat-unread {
  min-width: 18px;
  height: 18px;
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* ─── Chat Center Panel ───────────────────────────────────────── */
.chat-convo-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.chat-convo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  background: var(--color-surface);
}

.chat-convo-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.chat-convo-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-base);
  background: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.chat-convo-icon.dm {
  border-radius: var(--radius-full);
  background: var(--color-success-light);
  color: var(--color-success);
}

.chat-convo-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.chat-convo-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.chat-convo-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Messages */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-date-sep {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-2);
}

.chat-date-sep-line {
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.chat-date-sep-text {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  background: var(--color-surface);
  padding: 2px var(--space-2);
  white-space: nowrap;
}

.msg-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-1);
}

.msg-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.msg-row.own {
  flex-direction: row-reverse;
}

.msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.msg-row.own .msg-avatar {
  background: var(--color-primary);
  color: white;
}

.msg-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 72%;
}

.msg-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.msg-sender {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.msg-time {
  font-size: 11px;
  color: var(--color-text-muted);
}

.msg-bubble {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-xl);
  border-bottom-left-radius: var(--radius-sm);
  background: var(--color-surface-3);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  max-width: 100%;
  word-break: break-word;
  position: relative;
  border: 1px solid var(--color-border);
}

.msg-row.own .msg-bubble {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-sm);
}

.msg-row.own .msg-body {
  align-items: flex-end;
}

.msg-mention { color: var(--color-primary); font-weight: var(--font-weight-semibold); }
.msg-row.own .msg-mention { color: #93C5FD; }

.msg-status {
  font-size: 10px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 3px;
}

.msg-status svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
}

.msg-status.seen { color: var(--color-success); }

/* Thread indicator */
.msg-thread {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 2px;
  padding: 3px var(--space-2) 3px var(--space-2);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.msg-thread:hover { background: var(--color-primary-xlight); }

/* Attachment preview */
.msg-attachment {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-top: var(--space-2);
  max-width: 280px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.msg-attachment:hover { background: var(--color-surface-2); }

.msg-attachment-icon {
  width: 32px;
  height: 32px;
  background: var(--color-primary-light);
  border-radius: var(--radius-base);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.msg-attachment-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-primary);
}

.msg-attachment-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.msg-attachment-size {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Typing indicator */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-5);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  min-height: 28px;
}

.typing-dots {
  display: flex;
  gap: 3px;
  align-items: center;
}

.typing-dot {
  width: 6px;
  height: 6px;
  background: var(--color-text-muted);
  border-radius: var(--radius-full);
  animation: typingDot 1.4s infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Message Composer */
.chat-composer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-5) var(--space-4);
  background: var(--color-surface);
  flex-shrink: 0;
}

.chat-composer-box {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2) var(--space-3);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.chat-composer-box:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-xlight);
  background: var(--color-surface);
}

.chat-composer-input {
  flex: 1;
  min-height: 36px;
  max-height: 120px;
  border: none;
  background: transparent;
  font-size: var(--font-size-md);
  font-family: var(--font-family);
  color: var(--color-text-primary);
  resize: none;
  padding: 8px 0;
  line-height: var(--line-height-normal);
  overflow-y: auto;
}

.chat-composer-input:focus { outline: none; }

.chat-composer-input::placeholder { color: var(--color-text-muted); }

.chat-composer-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.composer-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: var(--radius-base);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.composer-btn:hover {
  background: var(--color-border);
  color: var(--color-text-secondary);
}

.composer-btn svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
}

.composer-send {
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius-base);
}

.composer-send:hover {
  background: var(--color-primary-hover);
  color: white;
}

/* ─── Chat Right Panel ────────────────────────────────────────── */
.chat-detail-panel {
  width: 268px;
  flex-shrink: 0;
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  overflow-y: auto;
}

.chat-detail-header {
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat-detail-section {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.chat-detail-section-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.member-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.member-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.member-name {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.member-name.online { color: var(--color-text-primary); }

.pinned-msg-item {
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-3);
  border-radius: var(--radius-base);
  border-left: 3px solid var(--color-primary);
  margin-bottom: var(--space-2);
}

.pinned-msg-text {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug);
}

.pinned-msg-meta {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 3px;
}

.file-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.file-item:last-child { border-bottom: none; }

.file-item-icon {
  width: 28px;
  height: 28px;
  background: var(--color-primary-light);
  border-radius: var(--radius-base);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.file-item-icon svg {
  width: 14px;
  height: 14px;
  stroke: var(--color-primary);
}

.file-name {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.file-meta {
  font-size: 10px;
  color: var(--color-text-muted);
}

/* Chat Empty State */
.chat-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: var(--space-8);
  text-align: center;
}

.chat-empty-icon {
  width: 64px;
  height: 64px;
  background: var(--color-primary-xlight);
  border-radius: var(--radius-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
}

.chat-empty-icon svg {
  width: 30px;
  height: 30px;
  stroke: var(--color-primary);
}

/* ============================================================
   SETTINGS PAGE
   ============================================================ */

.settings-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-6);
  align-items: start;
}

.settings-nav {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2) 0;
  box-shadow: var(--shadow-xs);
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  border-radius: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
}

.settings-nav-item:hover {
  background: var(--color-surface-3);
  color: var(--color-text-primary);
  text-decoration: none;
}

.settings-nav-item.active {
  color: var(--color-primary);
  background: var(--color-primary-xlight);
  font-weight: var(--font-weight-medium);
}

.settings-nav-item svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  flex-shrink: 0;
}

.settings-content { display: flex; flex-direction: column; gap: var(--space-5); }

.settings-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.settings-section-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.settings-section-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-tight);
}

.settings-section-body { padding: var(--space-6); }

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  gap: var(--space-4);
}

.settings-row:last-child { border-bottom: none; }

.settings-row-label {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.settings-row-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Toggle */
.toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--color-text-muted);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background 0.2s ease;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: var(--radius-full);
  transition: transform 0.2s ease;
  box-shadow: var(--shadow-xs);
}

.toggle input:checked + .toggle-slider {
  background: var(--color-primary);
}

.toggle input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

/* ============================================================
   CHECK-INS PAGE
   ============================================================ */

.checkin-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.division-checkin-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  box-shadow: var(--shadow-xs);
}

.division-checkin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.division-name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.division-rate {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--space-2);
}

/* ============================================================
   LAUNCHPAD
   ============================================================ */

.launchpad-hero {
  background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 50%, #1D4ED8 100%);
  border-radius: var(--radius-2xl);
  padding: var(--space-8) var(--space-8);
  margin-bottom: var(--space-6);
  color: white;
  position: relative;
  overflow: hidden;
}

.launchpad-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(96,165,250,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.launchpad-hero h2 {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--space-2);
}

.launchpad-hero p {
  font-size: var(--font-size-lg);
  color: rgba(255,255,255,0.7);
}

.launchpad-hero-search {
  margin-top: var(--space-5);
  position: relative;
  max-width: 480px;
}

.launchpad-hero-search input {
  width: 100%;
  height: 48px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-xl);
  padding: 0 var(--space-4) 0 48px;
  font-size: var(--font-size-lg);
  font-family: var(--font-family);
  color: white;
  transition: background var(--transition-base), border-color var(--transition-base);
  backdrop-filter: blur(8px);
}

.launchpad-hero-search input:focus {
  outline: none;
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.4);
}

.launchpad-hero-search input::placeholder { color: rgba(255,255,255,0.5); }

.launchpad-hero-search svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  stroke: rgba(255,255,255,0.5);
  pointer-events: none;
}

/* ============================================================
   ALERTS PANEL
   ============================================================ */

.alerts-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.alert-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border-left: 3px solid;
}

.alert-item.critical { background: #FFF5F5; border-color: var(--color-danger); }
.alert-item.warning  { background: var(--color-warning-xlight); border-color: var(--color-warning); }
.alert-item.info     { background: var(--color-primary-xlight); border-color: var(--color-primary); }

.alert-item-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

.alert-item-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
}

.alert-item.critical .alert-item-icon { color: var(--color-danger); }
.alert-item.warning  .alert-item-icon { color: var(--color-warning); }
.alert-item.info     .alert-item-icon { color: var(--color-primary); }

.alert-item-body { flex: 1; }

.alert-item-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.alert-item-text {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug);
}

.alert-item-time {
  font-size: 10px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

.flex  { display: flex; }
.flex-1 { flex: 1; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.w-full { width: 100%; }
.min-w-0 { min-width: 0; }
.overflow-hidden { overflow: hidden; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flex-wrap { flex-wrap: wrap; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.p-0  { padding: 0; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* Text utilities */
.text-xs   { font-size: var(--font-size-xs); }
.text-sm   { font-size: var(--font-size-sm); }
.text-md   { font-size: var(--font-size-md); }
.text-lg   { font-size: var(--font-size-lg); }
.text-xl   { font-size: var(--font-size-xl); }
.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted); }
.text-success   { color: var(--color-success); }
.text-warning   { color: var(--color-warning); }
.text-danger    { color: var(--color-danger); }
.text-brand     { color: var(--color-primary); }
.font-medium    { font-weight: var(--font-weight-medium); }
.font-semibold  { font-weight: var(--font-weight-semibold); }
.font-bold      { font-weight: var(--font-weight-bold); }

/* ============================================================
   RESPONSIVE OVERRIDES
   ============================================================ */

@media (max-width: 1200px) {
  .dashboard-grid {
    grid-template-columns: 1fr 300px;
  }
  .chat-detail-panel { width: 240px; }
}

@media (max-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-side { display: contents; }
  .chat-detail-panel { display: none; }
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .settings-nav {
    position: static;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: var(--space-2);
    gap: var(--space-1);
  }
  .settings-nav-item {
    white-space: nowrap;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
  }
}

@media (max-width: 768px) {
  :root {
    --content-padding: 16px;
  }

  .nh-sidebar { display: none; }
  .nh-main { margin-left: 0; }
  .nh-mobile-tabs { display: flex; }

  .nh-content {
    padding: var(--content-padding);
    padding-bottom: calc(var(--mobile-tabs-height) + var(--space-4));
  }

  .nh-search { display: none; }
  .nh-install-btn span { display: none; }
  .nh-install-btn { padding: 0 var(--space-2); }

  .kpi-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .kpi-value { font-size: var(--font-size-4xl); }

  .app-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }

  .report-grid { grid-template-columns: 1fr; }

  .task-table-wrapper { display: none; }
  .task-cards-mobile { display: block; }

  /* Chat mobile */
  .chat-shell {
    height: calc(100vh - var(--header-height) - var(--mobile-tabs-height) - var(--content-padding) * 2);
    border-radius: var(--radius-xl);
  }

  .chat-list-panel {
    width: 100%;
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: var(--radius-xl);
  }

  .chat-list-panel.mobile-hidden { display: none; }
  .chat-convo-panel.mobile-hidden { display: none; }

  .chat-convo-panel {
    width: 100%;
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: var(--radius-xl);
  }
}

@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .app-grid { grid-template-columns: 1fr; }
  .checkin-summary-grid { grid-template-columns: 1fr 1fr; }
  .nh-page-header { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .nh-toolbar { flex-direction: column; align-items: stretch; }
  .nh-toolbar-search { max-width: 100%; }
}

/* ─── Task cards mobile (hidden on desktop) ───────────────────── */
.task-cards-mobile { display: none; }

@media (max-width: 768px) {
  .task-cards-mobile { display: block; }
}

/* ─── Print ───────────────────────────────────────────────────── */
@media print {
  .nh-sidebar, .nh-mobile-tabs, .nh-header { display: none; }
  .nh-main { margin-left: 0; }
  .nh-content { padding: 0; }
}

/* ════════════════════════════════════════════════════════════════
   SALES ANALYTICS CHART — Premium enterprise candle chart
   ════════════════════════════════════════════════════════════════ */

/* ─── Chart card container ──────────────────────────────────── */
.chart-card {
  background: var(--color-surface);
  border:     1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.chart-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.chart-card-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chart-card-title h3 {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.chart-card-title p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 420px;
  line-height: 1.4;
}

/* ─── Timeframe selector ────────────────────────────────────── */
.chart-controls-wrapper {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.chart-control-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-control-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.chart-tf-group {
  display: flex;
  gap: 4px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 3px;
  flex-shrink: 0;
}

.chart-tf-btn,
.chart-range-btn,
.chart-interval-btn {
  padding: 5px 13px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.chart-tf-btn:hover {
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.chart-tf-btn.active,
.chart-range-btn.active,
.chart-interval-btn.active {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(29,78,216,0.3);
}

/* ─── Summary metrics strip ─────────────────────────────────── */
.chart-summary-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px 20px;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.chart-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chart-metric-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.chart-metric-value {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.chart-metric-value.positive { color: #059669; }
.chart-metric-value.negative { color: #DC2626; }
.chart-metric-value.skeleton-inline,
.skeleton-inline {
  display: inline-block;
  width: 80px;
  height: 14px;
  background: linear-gradient(90deg, #E2E8F0 25%, #F1F5F9 50%, #E2E8F0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
  border-radius: var(--radius-sm);
  vertical-align: middle;
}

/* ─── Canvas wrapper ─────────────────────────────────────────── */
.chart-canvas-wrap {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  cursor: crosshair;
}

.chart-canvas-wrap canvas {
  display: block;
}

/* ─── Tooltip ────────────────────────────────────────────────── */
.chart-tooltip {
  display: none;
  position: fixed;
  background: #0F172A;
  color: #F1F5F9;
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  pointer-events: none;
  min-width: 200px;
  font-size: 11px;
  line-height: 1.5;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
  z-index: 9999;
}

.ctt-date {
  font-size: 11px;
  font-weight: 700;
  color: #F8FAFC;
  margin-bottom: 7px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.ctt-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 3px;
}

.ctt-row span:first-child { flex-shrink: 0; }
.ctt-row span:nth-child(2) { flex: 1; color: #94A3B8; }
.ctt-row span:last-child { font-weight: 600; color: #F1F5F9; text-align: right; }

.ctt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ctt-sep {
  border-top: 1px solid rgba(255,255,255,0.10);
  margin: 5px 0;
}

.ctt-section {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94A3B8;
  margin: 5px 0 3px;
}

/* ─── Chart legend ───────────────────────────────────────────── */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  font-weight: 500;
}

.chart-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.chart-legend-line {
  width: 16px;
  height: 2px;
  border-radius: 1px;
  flex-shrink: 0;
}

/* ─── Chart note ─────────────────────────────────────────────── */
.chart-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgba(29,78,216,0.04);
  border-left: 3px solid rgba(29,78,216,0.25);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.chart-note svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-primary);
  opacity: 0.7;
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .chart-summary-strip {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .chart-card { padding: var(--space-4); }
  .chart-card-header { flex-direction: column; gap: var(--space-3); }
  .chart-controls-wrapper { 
    gap: 12px;
    flex-direction: column;
    align-items: flex-start;
  }
  .chart-tf-group { align-self: flex-start; }
  .chart-summary-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .chart-canvas-wrap {
    overflow-x: auto;
  }
  .chart-legend { gap: 4px 12px; }
}

@media (max-width: 480px) {
  .chart-summary-strip { grid-template-columns: repeat(2, 1fr); }
}