/* ============================================================
   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 ──────────────────────────────────────────────── */
/* ─── 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; }

.dashboard-tasks-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* ─── AI Insight Card ──────────────────────────────────────── */
.ai-insight-card {
  background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
  border-radius: var(--radius-xl);
  padding: 20px 24px;
  color: white;
  box-shadow: 0 4px 6px -1px rgba(29, 78, 216, 0.1), 0 2px 4px -1px rgba(29, 78, 216, 0.06);
}

.ai-insight-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.ai-insight-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}

.ai-insight-title h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: white;
}

.ai-insight-title span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

.ai-insight-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-insight-item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ai-insight-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-md);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.ai-insight-badge-success {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.ai-insight-badge-warning {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.ai-insight-badge-info {
  background: rgba(147, 197, 253, 0.2);
  color: #dbeafe;
  border: 1px solid rgba(147, 197, 253, 0.3);
}

.ai-insight-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  flex: 1;
}

/* ─── Launchpad Grid ──────────────────────────────────────── */
.launchpad-card {
  background: var(--color-surface);
}

.launchpad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
  padding: 4px 0;
}

/* ─── Task Row Styling ────────────────────────────────────── */
.task-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background var(--transition-fast);
}

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

.task-row:hover {
  background: var(--color-surface-2);
  margin: 0 calc(var(--space-5) * -1);
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

.task-priority-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: var(--radius-md);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}

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

.task-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.task-title.task-overdue {
  color: var(--color-danger);
}

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

/* ─── Announcement Row Styling ─────────────────────────────── */
.announcement-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

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

.announcement-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.announcement-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-md);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.announcement-badge-pin {
  background: rgba(29, 78, 216, 0.1);
  color: var(--color-primary);
  border: 1px solid rgba(29, 78, 216, 0.2);
}

.announcement-badge-urgent {
  background: rgba(220, 38, 38, 0.1);
  color: var(--color-danger);
  border: 1px solid rgba(220, 38, 38, 0.2);
}

.announcement-badge-important {
  background: rgba(245, 158, 11, 0.1);
  color: var(--color-warning);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.announcement-badge-category {
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.announcement-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 4px;
  line-height: 1.4;
}

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

/* ═══════════════════════════════════════════════════════════════
   INTEGRATIONS PAGE
   ═══════════════════════════════════════════════════════════════ */

.integration-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.integration-stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
}

.integration-stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.integration-stat-value.integration-stat-success {
  color: var(--color-success);
}

.integration-stat-value.integration-stat-warning {
  color: var(--color-warning);
}

.integration-stat-value.integration-stat-danger {
  color: var(--color-danger);
}

.integration-stat-label {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.integration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}

.integration-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 20px;
  transition: all var(--transition-base);
}

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

.integration-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-subtle);
}

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

.integration-icon svg {
  width: 24px;
  height: 24px;
}

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

.integration-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 2px 0;
}

.integration-type {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
}

.integration-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-md);
  white-space: nowrap;
}

.integration-status svg {
  width: 14px;
  height: 14px;
}

.integration-status-success {
  background: rgba(16, 185, 129, 0.1);
  color: var(--color-success);
}

.integration-status-warning {
  background: rgba(245, 158, 11, 0.1);
  color: var(--color-warning);
}

.integration-status-danger {
  background: rgba(220, 38, 38, 0.1);
  color: var(--color-danger);
}

.integration-status-neutral {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
}

.integration-card-body {
  margin-bottom: 16px;
}

.integration-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.integration-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.integration-meta-label {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
}

.integration-meta-value {
  font-size: 14px;
  color: var(--color-text-primary);
  font-weight: 500;
}

.integration-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(245, 158, 11, 0.1);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--color-warning);
  margin-top: 12px;
}

.integration-alert svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.integration-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.integration-card-actions .btn {
  flex: 1;
  min-width: 80px;
  font-size: 12px;
}

/* Form Styles */
.form-container {
  max-width: 1200px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 20px;
  position: relative;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text-primary);
  transition: all var(--transition-fast);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
}

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

.form-help {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.form-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-text-primary);
}

.form-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.form-actions {
  display: flex;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  margin-top: 24px;
}

.btn-toggle-password {
  position: absolute;
  right: 10px;
  top: 34px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px;
}

.btn-toggle-password:hover {
  color: var(--color-primary);
}

/* App Preview */
.app-preview-container {
  display: flex;
  justify-content: center;
  padding: 20px;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
}

.app-preview-card {
  text-align: center;
  padding: 20px;
}

.app-icon-lg {
  width: 80px;
  height: 80px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.app-icon-lg svg {
  width: 40px;
  height: 40px;
}

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

.app-preview-category {
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Connected Systems Widget */
.connected-systems-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.connected-system-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.connected-system-item:hover {
  background: var(--color-surface-2);
}

.connected-system-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.connected-system-icon svg {
  width: 18px;
  height: 18px;
}

.connected-system-success {
  background: rgba(16, 185, 129, 0.1);
  color: var(--color-success);
}

.connected-system-warning {
  background: rgba(245, 158, 11, 0.1);
  color: var(--color-warning);
}

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

.connected-system-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.connected-system-status {
  font-size: 11px;
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   DATA HUB
   ═══════════════════════════════════════════════════════════════ */

.data-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.data-hub-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 20px;
}

.data-hub-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-subtle);
}

.data-hub-card-header h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.data-hub-datasets {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.data-hub-dataset {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.data-hub-dataset:hover {
  background: var(--color-surface-2);
  transform: translateX(4px);
}

.data-hub-dataset svg {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.data-hub-dataset span {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.data-hub-dataset small {
  font-size: 11px;
  color: var(--color-text-muted);
}

.data-hub-platforms {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.data-hub-platform-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.data-hub-platform-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.data-hub-platform-btn svg {
  width: 18px;
  height: 18px;
}

.data-hub-note {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-subtle);
}

/* Responsive - Integrations */
@media (max-width: 768px) {
  .integration-grid {
    grid-template-columns: 1fr;
  }
  
  .integration-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .integration-meta {
    grid-template-columns: 1fr;
  }
  
  .integration-card-actions {
    flex-direction: column;
  }
  
  .integration-card-actions .btn {
    width: 100%;
  }
}

/* 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-ios-steps { margin: 0; padding-left: 22px; list-style: decimal; display: flex; flex-direction: column; gap: 8px; font-size: var(--font-size-sm); color: var(--color-text-primary); line-height: 1.5; }
.settings-ios-share { display: inline-flex; vertical-align: -3px; width: 20px; height: 20px; padding: 1px; border-radius: 5px; background: var(--color-surface-2); color: var(--color-primary); }
.settings-ios-share svg { width: 18px; height: 18px; }
.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-4);
  color: white;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.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-content {
  flex: 1;
  position: relative;
  z-index: 1;
}

.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 .btn {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

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

.launchpad-hero-search {
  margin-bottom: var(--space-6);
  position: relative;
  max-width: 600px;
}

.launchpad-hero-search input {
  width: 100%;
  height: 48px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 0 var(--space-4) 0 48px;
  font-size: var(--font-size-lg);
  font-family: var(--font-family);
  color: var(--color-text-primary);
  transition: background var(--transition-base), border-color var(--transition-base);
}

.launchpad-hero-search input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
}

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

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

@media (max-width: 768px) {
  .launchpad-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-6);
  }
  
  .launchpad-hero .btn {
    width: 100%;
  }
  
  .launchpad-hero-search {
    max-width: 100%;
  }
}

/* ============================================================
   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);
  }
}

@media (max-width: 900px) {
  /* Stack Tasks & Deadlines on smaller tablets */
  .dashboard-tasks-row {
    grid-template-columns: 1fr;
  }
  .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; }


  /* Dashboard Tasks & Deadlines - stack on mobile */
  .dashboard-tasks-row {
    grid-template-columns: 1fr;
  }

  /* 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) ───────────────────── */

@media (max-width: 768px) {
}

/* ─── 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; }
  
  /* AI Insight responsive */
  .ai-insight-card {
    padding: 16px 18px;
  }
  
  .ai-insight-header {
    margin-bottom: 12px;
  }
  
  .ai-insight-icon {
    width: 36px;
    height: 36px;
  }
  
  .ai-insight-title h4 {
    font-size: 15px;
  }
  
  .ai-insight-title span {
    font-size: 12px;
  }
  
  .ai-insight-text {
    font-size: 13px;
  }
  
  /* Launchpad responsive */
  .launchpad-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
  }
}

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

/* ═══════════════════════════════════════════════════════════════
   ADMIN PAGES
   ═══════════════════════════════════════════════════════════════ */

/* ─── Admin Stats Grid ─────────────────────────────────────────── */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.admin-stat-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
}

.admin-stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.admin-stat-value.admin-stat-success { color: var(--color-success); }
.admin-stat-value.admin-stat-warning { color: var(--color-warning); }
.admin-stat-value.admin-stat-neutral { color: var(--color-text-tertiary); }

.admin-stat-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: 500;
}

/* ─── Admin Toolbar ─────────────────────────────────────────────── */
.admin-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.admin-toolbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.admin-search {
  position: relative;
  display: flex;
  align-items: center;
}

.admin-search svg {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 18px;
  color: var(--color-text-tertiary);
}

.admin-search input {
  padding: 8px 12px 8px 38px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  min-width: 240px;
  transition: all 0.2s;
}

.admin-search input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(29,78,216,0.08);
}

.admin-select {
  padding: 8px 32px 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23666'%3E%3Cpath d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
  appearance: none;
  cursor: pointer;
}

/* ─── Admin Table ───────────────────────────────────────────────── */
.admin-table-container {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table thead th {
  text-align: left;
  padding: 12px 16px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-secondary);
  border-bottom: 2px solid var(--color-border);
}

.admin-table tbody tr {
  border-bottom: 1px solid var(--color-border-light);
  transition: background 0.15s;
  cursor: pointer;
}

.admin-table tbody tr:hover {
  background: rgba(29,78,216,0.02);
}

.admin-table tbody td {
  padding: 14px 16px;
  font-size: var(--text-sm);
}

.user-cell-name {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1D4ED8, #3B82F6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

.user-name {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 2px;
}

.user-email {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.user-division {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.user-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: capitalize;
}

.user-status-success {
  background: rgba(34,197,94,0.1);
  color: #15803d;
}

.user-status-warning {
  background: rgba(249,115,22,0.1);
  color: #c2410c;
}

.user-status-neutral {
  background: rgba(107,114,128,0.1);
  color: #4b5563;
}

.user-meta {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.user-actions {
  display: flex;
  gap: var(--space-2);
}

.btn-icon {
  padding: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon svg {
  width: 16px;
  height: 16px;
  color: var(--color-text-secondary);
}

.btn-icon:hover {
  background: rgba(29,78,216,0.05);
  border-color: var(--color-primary);
}

.btn-icon:hover svg {
  color: var(--color-primary);
}

/* ─── User Detail Page ──────────────────────────────────────────── */
.admin-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.user-detail-profile {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border-light);
}

.user-detail-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1D4ED8, #3B82F6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 600;
  flex-shrink: 0;
}

.user-detail-name {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-2) 0;
}

.user-detail-email {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

.user-detail-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.user-detail-meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.user-detail-meta-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-tertiary);
}

.user-detail-meta-value {
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: 500;
}

.user-detail-section {
  margin-bottom: var(--space-5);
}

.user-detail-section h4 {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-3);
  color: var(--color-text);
}

.user-detail-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.btn-block {
  width: 100%;
  justify-content: center;
}

/* ─── Activity Timeline ──────────────────────────────────────────── */
.activity-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.activity-item {
  display: flex;
  gap: var(--space-3);
}

.activity-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(29,78,216,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.activity-icon svg {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
}

.activity-title {
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: 500;
  margin-bottom: 4px;
}

.activity-meta {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

/* ─── Permission Grid ───────────────────────────────────────────── */
.permission-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.permission-item {
  padding: var(--space-4);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
}

.permission-item-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.permission-item-header svg {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
}

.permission-item-access {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.permission-badge {
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  background: rgba(29,78,216,0.08);
  color: var(--color-primary);
}

/* ─── Roles Page ────────────────────────────────────────────────── */
.roles-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: var(--space-5);
}

.role-card {
  padding: var(--space-4);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  cursor: pointer;
  transition: all 0.2s;
}

.role-card:hover {
  border-color: var(--color-primary);
  background: rgba(29,78,216,0.02);
}

.role-card.selected {
  border-color: var(--color-primary);
  background: rgba(29,78,216,0.05);
  box-shadow: 0 0 0 3px rgba(29,78,216,0.08);
}

.role-card-header {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.role-card-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: rgba(29,78,216,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.role-card-icon svg {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}

.role-card-name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 4px 0;
}

.role-card-desc {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin: 0;
}

.role-card-meta {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
}

.role-card-actions {
  display: flex;
  gap: var(--space-2);
}

/* ─── Permissions Matrix ────────────────────────────────────────── */
.permissions-matrix {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Groups the permission matrix by area (Workspace, Cek Stok, Insight,
   Administration) so a role's grants stay scannable as modules are added. */
.permission-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.permission-group + .permission-group {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-light);
}

.permission-group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
}

.permission-module {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.permission-module-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
}

.permission-module-header svg {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}

.permission-module-header h4 {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.permission-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
}

.permission-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  transition: background 0.15s;
}

.permission-check:hover {
  background: rgba(29,78,216,0.03);
}

.permission-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.permission-check span {
  font-size: var(--text-sm);
  color: var(--color-text);
}

/* ─── Responsive Admin ──────────────────────────────────────────── */
@media (max-width: 1200px) {
  .roles-layout {
    grid-template-columns: 320px 1fr;
  }
  
  .permission-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .admin-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .roles-layout {
    grid-template-columns: 1fr;
  }
  
  .admin-detail-grid {
    grid-template-columns: 1fr;
  }
  
  .permission-checks {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .admin-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .admin-toolbar-left {
    flex-direction: column;
    align-items: stretch;
  }
  
  .admin-search input {
    min-width: 100%;
  }
  
  .user-detail-meta {
    grid-template-columns: 1fr;
  }
  
  .permission-checks {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .admin-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════
   AI PROVIDERS
   ═══════════════════════════════════════════════════════════════ */

/* ─── AI Stats Grid ──────────────────────────────────────────── */
.ai-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.ai-stat-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

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

.ai-stat-icon svg {
  width: 28px;
  height: 28px;
  color: var(--color-primary);
}

.ai-stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
  line-height: 1;
}

.ai-stat-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: 500;
}

/* ─── AI Provider Grid ───────────────────────────────────────── */
.ai-provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-4);
}

.ai-provider-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: all 0.2s;
}

.ai-provider-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.ai-provider-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.ai-provider-logo {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ai-provider-logo svg {
  width: 32px;
  height: 32px;
  color: #fff;
}

.ai-provider-info {
  flex: 1;
}

.ai-provider-name {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 6px 0;
}

.ai-provider-desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

.ai-provider-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.ai-provider-status-success {
  background: rgba(34,197,94,0.1);
  color: #15803d;
}

.ai-provider-status-warning {
  background: rgba(249,115,22,0.1);
  color: #c2410c;
}

.ai-provider-status-neutral {
  background: rgba(107,114,128,0.1);
  color: #4b5563;
}

.ai-provider-body {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.ai-provider-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.ai-provider-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-provider-meta-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-tertiary);
}

.ai-provider-meta-value {
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: 500;
}

.ai-provider-setup-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: rgba(29,78,216,0.04);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.ai-provider-setup-note svg {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.ai-provider-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ─── AI Provider Config ─────────────────────────────────────── */
.ai-config-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.ai-config-logo {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ai-config-logo svg {
  width: 40px;
  height: 40px;
  color: #fff;
}

.ai-config-info h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 6px 0;
}

.ai-config-info p {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

/* ─── Responsive AI Providers ────────────────────────────────── */
@media (max-width: 1200px) {
  .ai-provider-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

@media (max-width: 900px) {
  .ai-stats-grid {
    grid-template-columns: 1fr;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .ai-provider-grid {
    grid-template-columns: 1fr;
  }
  
  .ai-config-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .ai-provider-meta {
    grid-template-columns: 1fr;
  }
}

/* ─── Narrow phones: keep every header control on screen ─────────
   At 375px the profile name pushed the New task (+) button half off the
   edge. The avatar alone identifies the menu; the name returns on wider
   screens. */
@media (max-width: 480px) {
  .nh-profile-name,
  .nh-profile-chevron { display: none; }
  .nh-profile-trigger { padding: 2px; }
}

/* ═══════════════════════════════════════════════════════════════
   SHELL FITS THE SCREEN
   ═══════════════════════════════════════════════════════════════
   Measured across every page at 820px and 375px: all but two pushed
   a horizontal scrollbar, by as much as 457px. Two causes, both here.

   1. Flex children default to min-width:auto, so a long title or a wide
      table refuses to shrink and pushes the whole shell sideways. Every
      link in the chain needs min-width:0.
   2. The sidebar was only hidden below 768px, so a 820px tablet kept a
      256px fixed sidebar AND a 280px search box, leaving the header
      about 560px to fit roughly 900px of content.

   Kept at the end of the file so these win over the earlier rules they
   correct, rather than being edited into a dozen separate places. */

.nh-shell,
.nh-main,
.nh-header,
.nh-content {
  min-width: 0;
}

.nh-content {
  max-width: 100%;
}

/* The title yields first; the buttons on the right are all essential. */
.nh-header-title {
  flex: 0 1 auto;
  min-width: 0;
}

.nh-header-title h1,
.nh-header-title .subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nh-header-spacer {
  flex: 1 1 0;
  min-width: 0;
}

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

/* Tablets get the mobile chrome. A 256px sidebar plus a 280px search box
   on a 820px screen leaves too little for the page itself, and the "More"
   sheet already reaches every destination the sidebar lists. */
@media (max-width: 1024px) {
  .nh-sidebar { display: none; }
  .nh-main { margin-left: 0; }
  .nh-mobile-tabs { display: flex; }
  .nh-search { display: none; }

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

/* Wide content — tables above all — scrolls inside its own box instead of
   dragging the page with it. */
.nh-content table {
  max-width: 100%;
}

.table-wrapper,
.admin-table-wrapper,
.nh-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════════════════════════════════════════
   REPORT KIT — stat tiles, bars, tooltip
   ═══════════════════════════════════════════════════════════════
   Used by the Sell-Through and Week-to-Date reports.

   Two categorical slots, validated rather than eyeballed: on the light
   surface the pair separates by ΔE 24.7 under protanopia and 33.6 for
   normal vision, both clear of the floors. Sequential magnitude is one
   hue stepped light→dark, never a rainbow.

   The app ships light only, so these are stated as single values; the
   tokens exist so a dark theme is one block, not a hunt through rules. */

:root {
  --rk-now:    #2a78d6;  /* this period */
  --rk-before: #eb6834;  /* same period last year */
  --rk-seq:    #2a78d6;  /* sequential ramp base */
  --rk-up:     #15803d;
  --rk-down:   #b91c1c;
}

/* ─── Filters ─────────────────────────────────────────────────── */
.rk-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  margin-bottom: var(--space-5);
}

.rk-filters .form-group { margin: 0; min-width: 0; }

.rk-filters label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.rk-filters select { min-width: 150px; }

/* ─── Stat tiles ──────────────────────────────────────────────── */
.rk-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.rk-stat {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  padding: var(--space-5);
  min-width: 0;
}

.rk-stat.is-hero { grid-column: span 2; }
@media (max-width: 560px) { .rk-stat.is-hero { grid-column: span 1; } }

.rk-stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
}

.rk-stat-value {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
  overflow-wrap: anywhere;
}

.rk-stat.is-hero .rk-stat-value { font-size: 44px; line-height: 1.05; }

.rk-stat-sub {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  margin-top: 4px;
  line-height: 1.5;
}

.rk-stat-delta {
  font-size: 13px;
  font-weight: 700;
  margin-top: 7px;
  font-variant-numeric: tabular-nums;
}
.rk-stat-delta span { font-weight: 500; color: var(--color-text-muted); margin-left: 6px; }
.rk-stat-delta.is-up   { color: var(--rk-up); }
.rk-stat-delta.is-down { color: var(--rk-down); }
.rk-stat-delta.is-flat { color: var(--color-text-muted); }

/* ─── Panels ──────────────────────────────────────────────────── */
.rk-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.rk-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  padding: var(--space-5);
  min-width: 0;
}

.rk-panel-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* ─── Bars ────────────────────────────────────────────────────── */
.rk-bars { display: flex; flex-direction: column; gap: 9px; }

.rk-bar-row {
  display: grid;
  grid-template-columns: minmax(64px, 132px) minmax(0, 1fr) minmax(56px, auto);
  gap: 10px;
  align-items: center;
}
@media (max-width: 480px) {
  .rk-bar-row { grid-template-columns: minmax(56px, 96px) minmax(0, 1fr) auto; gap: 7px; }
}

.rk-bar-label {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rk-bar-track { position: relative; height: 18px; min-width: 0; }

/* The visible fill is .rk-bar-grow; .rk-bar-fill carries the hover target and
   sits above it, so a thin bar is still easy to point at. */
.rk-bar-grow {
  position: absolute;
  inset: 0 auto 0 0;
  /* 4px rounded data-end, square against the baseline it grows from. */
  border-radius: 0 4px 4px 0;
  background: var(--rk-now);
  transition: width var(--transition-slower);
}

.rk-bar-row.is-seq .rk-bar-grow {
  background: color-mix(in oklab, var(--rk-seq) calc(100% - var(--rk-bar-mix, 0%)), #cbd5e1 var(--rk-bar-mix, 0%));
}

.rk-bar-fill {
  position: absolute;
  inset: -6px 0;
  z-index: 1;
  cursor: default;
}
.rk-bar-fill:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.rk-bar-value {
  font-size: 12.5px;
  font-weight: 600;
  text-align: right;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ─── This year vs last year ──────────────────────────────────── */
.rk-cmp { display: flex; flex-direction: column; gap: var(--space-4); }

.rk-cmp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}

.rk-cmp-label { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.rk-cmp-growth { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rk-cmp-growth.is-up   { color: var(--rk-up); }
.rk-cmp-growth.is-down { color: var(--rk-down); }
.rk-cmp-growth.is-flat { color: var(--color-text-muted); }

/* 2px of surface between the two fills, so they read as separate marks. */
.rk-cmp-bar { height: 12px; margin-bottom: 2px; position: relative; }

.rk-cmp-fill {
  height: 100%;
  border-radius: 0 4px 4px 0;
  min-width: 2px;
  transition: width var(--transition-slower);
}
.rk-cmp-fill.is-now    { background: var(--rk-now); }
.rk-cmp-fill.is-before { background: var(--rk-before); }

.rk-cmp-values {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}
.rk-muted { color: var(--color-text-muted); }

/* ─── Legend ──────────────────────────────────────────────────── */
.rk-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  font-size: 12.5px;
  color: var(--color-text-secondary);
}
.rk-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.rk-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.rk-swatch.is-now    { background: var(--rk-now); }
.rk-swatch.is-before { background: var(--rk-before); }

/* ─── Table ───────────────────────────────────────────────────── */
.rk-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}

.rk-table { width: 100%; border-collapse: collapse; font-size: 13px; }

.rk-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
  padding: 11px 14px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  background: var(--color-surface);
  position: sticky;
  top: 0;
}

.rk-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.rk-table tr:last-child td { border-bottom: 0; }
.rk-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.rk-table .name { white-space: normal; min-width: 180px; }
.rk-table .is-up   { color: var(--rk-up); font-weight: 600; }
.rk-table .is-down { color: var(--rk-down); font-weight: 600; }
.rk-table .is-flat { color: var(--color-text-muted); }

/* ─── Notes & tooltip ─────────────────────────────────────────── */
.rk-note {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: 11px 13px;
  margin: 0 0 var(--space-4);
}

.rk-tip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: #111827;
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  padding: 7px 10px;
  border-radius: 8px;
  max-width: 260px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}
.rk-tip strong { font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .rk-bar-grow, .rk-cmp-fill { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   TASK LIST — grouped, inline-editable list (Tasks page)
   Replaces the old read-only task table. Every cell that holds a
   value people change often (status, priority, assignee, dates) is
   a control, not text, so a change costs one click instead of a
   modal. Rows nest one line per level, up to three levels.
   ═══════════════════════════════════════════════════════════════ */

.tk-board {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* How far one level of nesting steps in. Nesting itself is unlimited, so the
     step shrinks on a narrow screen rather than the name column disappearing. */
  --tk-indent: 22px;
}

/* Column track shared by the header strip and every row below it, so the
   cells stay in line without a table. */
.tk-grid {
  display: grid;
  grid-template-columns:
    minmax(200px, 1fr)   /* name           */
    150px                /* assignee       */
    112px                /* start date     */
    112px                /* due date       */
    100px                /* finish date    */
    104px                /* priority       */
    124px                /* status         */
    112px                /* division       */
    minmax(150px, 220px) /* latest comment */
    34px;                /* row menu       */
  align-items: center;
  column-gap: var(--space-2);
  padding: 0 var(--space-3);
}

/* ─── Group ─────────────────────────────────────────────────── */
.tk-group {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.tk-group-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
}

.tk-group-toggle {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.tk-group-toggle:hover { background: var(--color-surface-3); color: var(--color-text-secondary); }
.tk-group-toggle svg { width: 16px; height: 16px; }

.tk-group-count {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

.tk-group-add {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 var(--space-2);
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.tk-group-add:hover { background: var(--color-primary-xlight); color: var(--color-primary); }
.tk-group-add svg { width: 14px; height: 14px; }

/* ─── Column header strip ───────────────────────────────────── */
.tk-cols {
  height: 30px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* ─── Row ───────────────────────────────────────────────────── */
.tk-row {
  min-height: 44px;
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background var(--transition-fast);
}
.tk-row:hover { background: var(--color-surface-2); }
.tk-row:focus-within { background: var(--color-surface-2); }
.tk-row.tk-sub { background: var(--color-surface-2); }
.tk-row.tk-sub:hover { background: var(--color-surface-3); }
.tk-row.tk-overdue { box-shadow: inset 3px 0 0 var(--color-danger); }
.tk-row.tk-done .tk-title { color: var(--color-text-muted); text-decoration: line-through; }

.tk-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: var(--space-2) 0;
  padding-left: calc(var(--tk-depth, 0) * var(--tk-indent));
  /* One hairline per level crossed, drawn across the indent. Past three or
     four levels the indent alone stops telling you what a row hangs from —
     and unlimited nesting means people will go past three or four. */
  background-image: repeating-linear-gradient(
    to right,
    var(--color-border) 0 1px,
    transparent 1px var(--tk-indent)
  );
  background-size: calc(var(--tk-depth, 0) * var(--tk-indent)) 100%;
  background-position: 9px 0;
  background-repeat: no-repeat;
}

.tk-caret {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}
.tk-caret:hover { background: var(--color-surface-3); color: var(--color-text-primary); }
.tk-caret svg { width: 14px; height: 14px; }
.tk-caret.tk-caret-empty { visibility: hidden; cursor: default; }

/* The round tick, like a checklist: one click closes a task. */
.tk-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-text-disabled);
  background: transparent;
  color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.tk-check svg { width: 11px; height: 11px; }
.tk-check:hover { border-color: var(--color-success); color: var(--color-success); }
.tk-check.is-done {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #FFFFFF;
}

.tk-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 3px 6px;
  margin-left: -6px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.tk-title:hover { background: var(--color-surface); border-color: var(--color-border); }

/* Same box in edit mode, so renaming does not make the row jump. */
input.tk-title { cursor: text; }
input.tk-title:focus {
  outline: none;
  background: var(--color-surface);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-xlight);
}

.tk-subcount {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--color-surface-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.tk-subcount svg { width: 11px; height: 11px; }

.tk-idbadge {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ─── Editable cells ────────────────────────────────────────── */
.tk-cell {
  display: flex;
  align-items: center;
  min-width: 0;
  width: 100%;
  height: 30px;
  gap: 6px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  font-family: inherit;
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.tk-cell:hover { background: var(--color-surface); border-color: var(--color-border); }
.tk-cell:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.tk-cell .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tk-cell-muted { color: var(--color-text-muted); }
.tk-cell-due-over { color: var(--color-danger); font-weight: var(--font-weight-semibold); }
.tk-cell svg { width: 13px; height: 13px; flex-shrink: 0; }
.tk-cell-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tk-avatar {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tk-avatar.tk-avatar-empty {
  background: transparent;
  border: 1px dashed var(--color-border);
  color: var(--color-text-muted);
}

.tk-rowmenu {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}
.tk-row:hover .tk-rowmenu,
.tk-row:focus-within .tk-rowmenu { opacity: 1; }
.tk-rowmenu:hover { background: var(--color-surface-3); color: var(--color-text-primary); }
/* A tablet has no hover state to reveal it with, and this button is the only
   way to rename, add a subtask or delete — so it is always there. */
@media (hover: none) { .tk-rowmenu { opacity: 1; } }
.tk-rowmenu:focus-visible { opacity: 1; outline: 2px solid var(--color-primary); outline-offset: 1px; }
.tk-rowmenu svg { width: 15px; height: 15px; }

/* ─── Quick add ─────────────────────────────────────────────── */
.tk-add {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 var(--space-3);
  padding-left: calc(var(--space-3) + var(--tk-depth, 0) * var(--tk-indent));
  border-bottom: 1px solid var(--color-border-subtle);
  /* The same guides, so an "Add subtask" line says which task it belongs to
     when several of them stack up at the end of a deep branch. */
  background-image: repeating-linear-gradient(
    to right,
    var(--color-border) 0 1px,
    transparent 1px var(--tk-indent)
  );
  background-size: calc(var(--tk-depth, 0) * var(--tk-indent)) 100%;
  background-position: 21px 0;
  background-repeat: no-repeat;
}
.tk-add:last-child { border-bottom: none; }
.tk-add-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}
.tk-add-icon svg { width: 14px; height: 14px; }
.tk-add input {
  flex: 1;
  min-width: 0;
  height: 32px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  font-family: inherit;
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  padding: 0 8px;
}
.tk-add input::placeholder { color: var(--color-text-muted); }
.tk-add input:hover { background: var(--color-surface-2); }
.tk-add input:focus {
  outline: none;
  background: var(--color-surface);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-xlight);
}
.tk-add-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.tk-add.tk-add-sub { background: var(--color-surface-2); }

/* ─── Popover picker (status, priority, assignee, row menu) ─── */
.tk-pop {
  position: fixed;
  z-index: 1200;
  min-width: 190px;
  max-height: 320px;
  overflow-y: auto;
  padding: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.tk-pop-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 7px var(--space-2);
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
}
.tk-pop-item:hover, .tk-pop-item:focus-visible { background: var(--color-surface-2); outline: none; }
.tk-pop-item.is-current { background: var(--color-primary-xlight); }
.tk-pop-item.is-danger { color: var(--color-danger); }
.tk-pop-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.tk-pop-sep { height: 1px; margin: var(--space-1) 0; background: var(--color-border-subtle); }
.tk-pop-search {
  width: 100%;
  height: 32px;
  margin-bottom: var(--space-1);
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--font-size-base);
}
.tk-pop-search:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-xlight); }

/* ─── Toolbar extras ────────────────────────────────────────── */
.tk-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.tk-chip:hover { border-color: var(--color-text-muted); }
.tk-chip.is-on { background: var(--color-primary); border-color: var(--color-primary); color: #FFFFFF; }
.tk-chip.is-on-danger { background: var(--color-danger-light); border-color: var(--color-danger-light); color: #991B1B; }
.tk-chip svg { width: 13px; height: 13px; }

/* ─── Narrow screens ────────────────────────────────────────── */
/* Below the point where eight columns stop fitting, a row becomes two
   lines: the name, then its values as chips. No horizontal scrolling,
   and every control stays exactly where it was on the desktop row. */
/* Nine columns need roughly 1180px of content width; with the sidebar that is
   a ~1500px window. Below it the start date and division step aside — the
   comment stays, because it is the one column that says what is happening. */
@media (max-width: 1500px) {
  .tk-grid {
    grid-template-columns: minmax(170px, 1fr) 140px 108px 100px 120px minmax(130px, 200px) 34px;
  }
  /* Below this width the task NAME is the scarce column, and a name nobody
     can read costs more than a date they can open the task to see. */
  .tk-col-start, .tk-cell-start, .tk-col-division, .tk-cell-division,
  .tk-col-finish, .tk-cell-finish { display: none; }
}

/* Narrower still: the comment becomes its own line under the row rather than a
   column, so the text has somewhere to go. */
@media (max-width: 1040px) {
  .tk-grid { grid-template-columns: minmax(150px, 1fr) 130px 104px 96px 116px 34px; }
  .tk-col-comment { display: none; }
  .tk-cell-comment {
    grid-column: 1 / -1;
    height: auto;
    min-height: 24px;
    margin: 0 0 6px;
  }
}

@media (max-width: 640px) {
  /* Deep nesting has to stay readable on a phone: a smaller step keeps the
     title legible where a desktop-sized indent would leave no room for it. */
  .tk-board { --tk-indent: 11px; }
}

/* ─── Latest comment cell ───────────────────────────────────── */
.tk-cell-comment .tk-cell-text { font-size: var(--font-size-sm); }
.tk-cell-comment b { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }

.tk-comment-count {
  flex-shrink: 0;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--color-surface-3);
  color: var(--color-text-secondary);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ─── Comment thread (task detail) ──────────────────────────── */
.tk-thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
}

.tk-comment { display: flex; gap: var(--space-2); align-items: flex-start; }
.tk-comment-body { flex: 1; min-width: 0; }
.tk-comment-head { display: flex; align-items: center; gap: var(--space-2); }
.tk-comment-who { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.tk-comment-when { font-size: var(--font-size-xs); color: var(--color-text-muted); }

.tk-comment-del {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 2px;
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}
.tk-comment:hover .tk-comment-del,
.tk-comment-del:focus-visible { opacity: 1; }
.tk-comment-del:hover { color: var(--color-danger); }
.tk-comment-del svg { width: 13px; height: 13px; display: block; }
@media (hover: none) { .tk-comment-del { opacity: 1; } }

.tk-comment-text {
  margin: 2px 0 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tk-composer { display: flex; gap: var(--space-2); align-items: flex-end; margin-top: var(--space-3); }
.tk-composer textarea {
  flex: 1;
  min-width: 0;
  resize: vertical;
  padding: 9px 11px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  font-family: inherit;
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
}
.tk-composer textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-xlight);
}
.tk-composer .btn { flex-shrink: 0; height: 38px; }

@media (max-width: 900px) {
  .tk-grid.tk-cols { display: none; }
  .tk-grid {
    display: flex;
    flex-wrap: wrap;
    row-gap: 4px;
    padding: var(--space-2) var(--space-3);
  }
  .tk-row { min-height: 0; }
  .tk-name { flex: 1 1 100%; padding-bottom: 0; }
  .tk-cell {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    height: 26px;
    font-size: var(--font-size-sm);
  }
  .tk-cell-start, .tk-cell-division, .tk-cell-finish { display: flex; }
  .tk-cell-comment { flex: 1 1 100%; margin: 0; order: 9; }
  .tk-rowmenu { opacity: 1; margin-left: auto; }
}

.tk-form-hint {
  margin: 6px 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-normal);
}

/* ═══════════════════════════════════════════════════════════════
   RETAIL DASHBOARD
   Built for issue-spotting: the eye should land on whatever is
   wrong before it reads a single label. Colour therefore carries
   meaning here and is used sparingly — a screen where everything
   is coloured says nothing.
   ═══════════════════════════════════════════════════════════════ */

.rd-asof {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-full);
  background: var(--color-surface-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}
.rd-asof svg { width: 13px; height: 13px; }
.rd-asof strong { color: var(--color-text-primary); }

.rd-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.rd-kpi {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 3px);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
/* The stripe is the whole point of the row: trouble is visible before reading. */
.rd-kpi::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--color-border);
}
.rd-kpi.is-good::before { background: var(--color-success); }
.rd-kpi.is-warn::before { background: var(--color-warning); }
.rd-kpi.is-bad::before  { background: var(--color-danger); }

.rd-kpi-label svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.rd-kpi-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.rd-kpi-value {
  margin-top: 6px;
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}
.rd-kpi-sub {
  margin-top: 4px;
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug);
}
.rd-kpi-foot {
  margin-top: 8px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.rd-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}
.rd-delta.up   { color: var(--color-success); }
.rd-delta.down { color: var(--color-danger); }
.rd-delta.flat { color: var(--color-text-muted); }
.rd-delta svg { width: 13px; height: 13px; }

/* Pace bar: achievement against where the month should be by now. */
.rd-pace { margin-top: 10px; }
.rd-pace-track {
  position: relative;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--color-surface-3);
  overflow: visible;
}
.rd-pace-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-success);
  transition: width var(--transition-slow);
}
.rd-pace-fill.is-warn { background: var(--color-warning); }
.rd-pace-fill.is-bad  { background: var(--color-danger); }
/* Where the month *should* be — the only honest way to read the bar. */
.rd-pace-mark {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 13px;
  background: var(--color-text-primary);
  border-radius: 1px;
}
.rd-pace-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.rd-note {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-info-light);
  color: #0C4A6E;
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-5);
}
.rd-note.is-warn { background: var(--color-warning-light); color: #92400E; }
.rd-note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }

.rd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

/* Panels carrying a five-column table need more room than the default track,
   or the two columns that matter most — sell-through and cover — fall off the
   right edge, which is exactly what happened the first time this was drawn. */
.rd-grid.rd-grid-wide { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }

.rd-table td:last-child, .rd-table th:last-child { padding-right: var(--space-4); }

.rd-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.rd-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}
.rd-panel-head h3 { margin: 0; font-size: var(--font-size-lg); }
.rd-panel-head span { font-size: var(--font-size-xs); color: var(--color-text-muted); }

.rd-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-base); }
.rd-table th {
  padding: 8px var(--space-4);
  text-align: right;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  white-space: nowrap;
}
.rd-table th:first-child, .rd-table td:first-child { text-align: left; }
.rd-table td {
  padding: 9px var(--space-4);
  text-align: right;
  border-top: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rd-table td:first-child {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  white-space: normal;
  /* break-word, not anywhere: "MULTI COLOR" may wrap between the words but
     "BLACK" must never come out as "BLAC K". */
  overflow-wrap: break-word;
  min-width: 96px;
}
.rd-table tbody tr:hover { background: var(--color-surface-2); }

.rd-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}
.rd-chip.ok   { background: var(--color-success-light); color: #065F46; }
.rd-chip.warn { background: var(--color-warning-light); color: #92400E; }
.rd-chip.bad  { background: var(--color-danger-light); color: #991B1B; }
.rd-chip.mute { background: var(--color-surface-3); color: var(--color-text-secondary); }

.rd-bar {
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  min-width: 2px;
  display: inline-block;
  vertical-align: middle;
}

@media (max-width: 640px) {
  .rd-kpis { grid-template-columns: 1fr; }
  .rd-kpi-value { font-size: var(--font-size-3xl); }
  .rd-table th:nth-child(3), .rd-table td:nth-child(3) { display: none; }
}

/* ─── Cek Stok: barcode, keranjang, rincian permintaan ─────────── */
.ck-scanrow { display: flex; gap: 8px; align-items: stretch; }
.ck-scanrow .ck-input { flex: 1; min-width: 0; }
.ck-scanbtn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.ck-scanbtn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ck-scanbtn svg { width: 15px; height: 15px; }

.ck-mono { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

.ck-add {
  width: 100%;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.ck-add:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-xlight); }
.ck-add svg { width: 16px; height: 16px; }

.ck-basket {
  margin-top: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ck-basket-head {
  padding: 8px var(--space-3);
  background: var(--color-surface-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}
.ck-basket-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}
.ck-basket-main { flex: 1; min-width: 0; }
.ck-basket-name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  overflow-wrap: break-word;
}
.ck-basket-meta { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: 2px; }
.ck-basket-qty { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.ck-basket-qty button {
  width: 32px; height: 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: 17px; line-height: 1;
  color: var(--color-text-primary);
  cursor: pointer;
}
.ck-basket-qty span { min-width: 28px; text-align: center; font-weight: var(--font-weight-bold); }
.ck-basket-del {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border: none; background: transparent;
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.ck-basket-del:hover { background: var(--color-danger-light); color: var(--color-danger); }
.ck-basket-del svg { width: 15px; height: 15px; }

/* Rincian permintaan: barcode, harga, diminta vs stok. */
.ck-req-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--space-4);
  margin: 8px 0 2px;
}
.ck-req-facts span { display: flex; flex-direction: column; gap: 1px; }
.ck-req-facts em {
  font-style: normal;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-muted);
}
.ck-req-facts b { font-size: var(--font-size-md); color: var(--color-text-primary); }
.ck-req-facts b.ck-short { color: var(--color-danger); }
.ck-req-warn {
  margin-top: 6px;
  padding: 7px 10px;
  border-radius: var(--radius-md);
  background: var(--color-warning-light);
  color: #92400E;
  font-size: var(--font-size-sm);
}

/* Jendela kamera untuk memindai barcode. */
.ck-cam {
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(15, 23, 42, 0.86);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
}
.ck-cam-box {
  width: min(460px, 100%);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  text-align: center;
}
.ck-cam-box video { width: 100%; border-radius: var(--radius-lg); background: #000; }
.ck-cam-box p { margin: var(--space-3) 0; font-size: var(--font-size-md); color: var(--color-text-secondary); }

/* ─── Gantt timeline (Tasks) ───────────────────────────────────── */
.gt {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.gt-left { flex: 0 0 300px; border-right: 1px solid var(--color-border); background: var(--color-surface); }
.gt-right { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; }
.gt-canvas { position: relative; }

.gt-head {
  height: 52px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-2);
}
.gt-head-left {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0 var(--space-3) 8px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.gt-qrow, .gt-mrow { display: flex; }
.gt-q, .gt-m {
  flex: none;
  padding: 4px 8px;
  border-right: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
}
.gt-q { font-weight: var(--font-weight-bold); color: var(--color-text-secondary); }

.gt-names { }
.gt-name {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  cursor: pointer;
}
.gt-name:hover { background: var(--color-surface-2); }
.gt-indent { flex: none; }

/* The twisty in the timeline is the same control as in the list, and needs
   the same touch target — 28px, not the 14px the glyph would give. */
.gt-twist {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 28px;
  margin: 0 -2px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.gt-twist svg { width: 14px; height: 14px; }
.gt-twist:hover { background: var(--color-surface-3, var(--color-surface-2)); color: var(--color-text-primary); }
.gt-twist:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.gt-twist-empty { pointer-events: none; }
.gt-name-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-name-due { flex: none; font-size: var(--font-size-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

.gt-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-text-disabled); }
.gt-dot.s-in-progress { background: var(--color-primary); }
.gt-dot.s-completed   { background: var(--color-success); }
.gt-dot.s-cancelled   { background: var(--color-text-disabled); }
.gt-dot.s-pending     { background: var(--color-warning); }

.gt-body { position: relative; }
.gt-row { position: relative; height: 34px; border-bottom: 1px solid var(--color-border-subtle); }

.gt-grid {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--color-border-subtle);
  pointer-events: none;
}
/* Today, in the same red the overdue rows use. */
.gt-today {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--color-danger);
  pointer-events: none;
  z-index: 2;
}

.gt-bar {
  position: absolute;
  top: 9px;
  height: 16px;
  border-radius: 5px;
  background: var(--color-text-disabled);
  cursor: pointer;
  transition: filter var(--transition-fast);
}
.gt-bar:hover { filter: brightness(0.92); }
.gt-bar.s-in-progress { background: var(--color-primary); }
.gt-bar.s-completed   { background: var(--color-success); }
.gt-bar.s-pending     { background: #94A3B8; }
.gt-bar.s-cancelled   { background: var(--color-border); }
.gt-bar.is-late       { background: var(--color-danger); }
/* A due date with no start is a deadline, not a span: drawn as a marker. */
.gt-bar.is-point { border-radius: 3px; transform: skewX(-12deg); }

.gt-barlabel {
  position: absolute;
  top: 9px;
  height: 16px;
  line-height: 16px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
  pointer-events: none;
}

.gt-empty {
  padding: var(--space-8) var(--space-5);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}

/* View switch (Daftar / Timeline) */
.tk-views { display: inline-flex; gap: 2px; padding: 3px; background: var(--color-surface-3); border-radius: var(--radius-full); }
.tk-views button {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 12px;
  border: none; border-radius: var(--radius-full);
  background: transparent;
  font-family: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary); cursor: pointer;
}
.tk-views button.is-on { background: var(--color-surface); color: var(--color-text-primary); box-shadow: var(--shadow-xs); }
.tk-views svg { width: 13px; height: 13px; }

@media (max-width: 900px) {
  .gt-left { flex-basis: 170px; }
  .gt-name-due { display: none; }
}

/* ─── Retail Dashboard: slicers, brand table, trend, outlets ───────────── */
.rd-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.rd-slicers {
  display: grid; gap: var(--space-3); flex: 1; min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.rd-slicer { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rd-slicer > span {
  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;
}
.rd-slicer .nh-select { width: 100%; min-width: 0; }
.rd-toolbar-actions { display: flex; gap: var(--space-2); flex: none; }

.rd-panel-full { grid-column: 1 / -1; margin-bottom: var(--space-5); }

.rd-link {
  border: 0; background: none; padding: 0 2px; cursor: pointer;
  font: inherit; color: var(--color-text-muted); text-decoration: underline;
}
.rd-link.is-on { color: var(--color-primary); font-weight: var(--font-weight-semibold); text-decoration: none; }

/* The trend plot. Bars are drawn with plain elements — two series and thirty
   points do not justify a charting dependency. */
.rd-trend { padding: var(--space-4) var(--space-5) var(--space-5); }
.rd-trend-legend {
  display: flex; gap: var(--space-4); margin-bottom: var(--space-4);
  font-size: var(--font-size-xs); color: var(--color-text-muted);
}
.rd-trend-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rd-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.rd-swatch.is-cur { background: var(--color-primary); }
.rd-swatch.is-ly  { background: var(--color-border); }

.rd-trend-plot { display: flex; align-items: flex-end; gap: 3px; height: 180px; overflow-x: auto; }
.rd-trend-col { flex: 1 1 0; min-width: 14px; display: flex; flex-direction: column; height: 100%; }
.rd-trend-bars { flex: 1; display: flex; align-items: flex-end; gap: 2px; min-height: 0; }
.rd-trend-bar { flex: 1; border-radius: 2px 2px 0 0; min-height: 1px; transition: opacity var(--transition-fast); }
.rd-trend-bar.is-ly  { background: var(--color-border); }
.rd-trend-bar.is-cur { background: var(--color-primary); }
.rd-trend-bar.is-cur.is-down { background: var(--color-danger, #DC2626); }
.rd-trend-col:hover .rd-trend-bar { opacity: 0.75; }
.rd-trend-label {
  flex: none; padding-top: 6px; text-align: center; white-space: nowrap;
  font-size: 10px; color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .rd-trend-plot { height: 150px; }
  .rd-trend-label { font-size: 9px; }
  .rd-toolbar-actions { width: 100%; }
  /* Stacked on a phone: the slicers take the full width, not the right edge. */
  .rd-toolbar { align-items: stretch; }
  .rd-slicers { width: 100%; grid-template-columns: 1fr 1fr; }
}

/* ─── Antrian Gudang: stok langsung di kartu ───────────────────────────── */
.sq-stock {
  margin: 8px 0 2px;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--color-surface-2);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}
.sq-stock-ok    { color: var(--color-success, #16A34A); font-weight: var(--font-weight-semibold); }
.sq-stock-none  { color: var(--color-danger, #DC2626); font-weight: var(--font-weight-semibold); }
.sq-stock-split { color: var(--color-text-muted); }
.sq-stock-others { margin-top: 4px; color: var(--color-text-secondary); }
.sq-stock-store {
  display: inline-block;
  margin: 2px 4px 0 0;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ─── Roles: data scope (SBU / PT) ─────────────────────────────────────── */
.scope-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.scope-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-4);
  background: var(--color-surface);
}
.scope-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: 8px; }
.scope-summary {
  font-size: var(--font-size-xs);
  padding: 2px 8px; border-radius: 999px;
  background: var(--color-surface-2); color: var(--color-text-secondary);
}
/* "Everything" is the unrestricted state and must not read as a warning. */
.scope-summary.is-all { background: var(--color-info-light, #EFF6FF); color: var(--color-primary); }
.scope-actions { margin-bottom: 8px; }
.scope-options { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.scope-option {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px; border-radius: 7px; cursor: pointer;
  font-size: var(--font-size-sm); min-height: 32px;
}
.scope-option:hover { background: var(--color-surface-2); }
.scope-option input { flex: none; }

/* Realisation against plan. One day either way is rounding, so only a real
   slip is coloured — colouring noise teaches people to ignore the colour. */
.tk-cell-finish.is-ontime .tk-cell-text { color: var(--color-success, #16A34A); }
.tk-cell-finish.is-slip   .tk-cell-text { color: var(--color-warning, #D97706); }
.tk-cell-finish.is-late   .tk-cell-text { color: var(--color-danger, #DC2626); font-weight: var(--font-weight-semibold); }

/* Timeline: the delivery, drawn against the plan rather than instead of it. */
.gt-actual {
  position: absolute; top: 7px; width: 3px; height: 20px;
  border-radius: 2px; background: var(--color-text-primary);
}
.gt-actual.is-ontime { background: var(--color-success, #16A34A); }
.gt-actual.is-slip   { background: var(--color-warning, #D97706); }
.gt-actual.is-late   { background: var(--color-danger, #DC2626); }
/* The gap between plan and delivery, so the slip itself is visible rather
   than something the reader has to measure between two marks by eye. */
.gt-gap {
  position: absolute; top: 15px; height: 4px; border-radius: 2px; opacity: 0.45;
  background: var(--color-text-disabled);
}
.gt-gap.is-slip { background: var(--color-warning, #D97706); }
.gt-gap.is-late { background: var(--color-danger, #DC2626); }
.gt-gap.is-ontime { background: var(--color-success, #16A34A); }
.scope-search { width: 100%; margin-top: 6px; font-size: var(--font-size-sm); }
.scope-actions { display: flex; flex-direction: column; align-items: flex-start; }


/* ─── 707 OS logo ────────────────────────────────────────────────────────────
   "707 OS" large; "OFFICE SYSTEM" small underneath, its letters spread to the
   exact width of the line above — like an underline written in type. Size it
   by setting font-size on .os-logo; everything else scales from that. */
/* --os-accent colours "OS": light blue on the dark sidebar/brand panels, the
   primary blue wherever the logo sits on a light page. */
.os-logo { display: inline-flex; flex-direction: column; line-height: 1; font-size: 22px; --os-accent: #93B4FF; }
/* Doubled class: pages style "their brand name's spans" blue (from the old
   two-tone name), and the logo itself is a span. */
.os-logo.os-logo { color: inherit; }
.os-logo .os-logo-main, .os-logo .os-logo-sub, .os-logo .os-logo-sub i { color: inherit; }
.os-logo .os-logo-main { font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.os-logo .os-logo-main b { font-weight: 800; color: var(--os-accent); }
.os-logo .os-logo-sub { display: flex; justify-content: space-between; font-size: .32em; font-weight: 700; margin-top: .42em; opacity: .75; }
.os-logo-sub i { font-style: normal; }


/* ─── Phone & tablet: the PC sidebar as a drawer ─────────────────────────────
   No bottom tab bar: the header's menu button slides the same sidebar in from
   the left, so the menu looks and works the same on every screen. */
.nh-menu-btn { display: none; flex: none; }
.nh-nav-backdrop { display: none; }
@media (max-width: 1024px) {
  :root { --mobile-tabs-height: 0px; }
  .nh-mobile-tabs { display: none !important; }
  .nh-menu-btn { display: inline-flex; margin-left: calc(var(--space-2) * -1); }
  .nh-sidebar,
  .nh-sidebar.collapsed {
    display: flex;
    width: min(var(--sidebar-width), 84vw);
    transform: translateX(-100%);
    z-index: var(--z-modal);
    box-shadow: none;
  }
  /* A collapsed PC sidebar must not open as an icon strip on a phone. */
  .nh-sidebar.collapsed .nh-sidebar-brand-text,
  .nh-sidebar.collapsed .nh-nav-label,
  .nh-sidebar.collapsed .nh-nav-section-label,
  .nh-sidebar.collapsed .nh-nav-badge,
  .nh-sidebar.collapsed .nh-user-info { opacity: 1; width: auto; }
  /* The collapse button becomes the drawer's close button, inside its edge. */
  .nh-sidebar .nh-sidebar-toggle,
  .nh-sidebar.collapsed .nh-sidebar-toggle {
    opacity: 1; right: 12px; top: calc(var(--header-height) / 2 - 14px);
  }
  .nh-sidebar.collapsed .nh-sidebar-toggle svg { transform: none; }
  body.nh-nav-open .nh-sidebar { transform: none; box-shadow: 0 0 40px rgba(15, 23, 42, .35); }
  .nh-nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: calc(var(--z-modal) - 1);
    background: rgba(15, 23, 42, .45); opacity: 0; pointer-events: none;
    transition: opacity var(--transition-slower);
  }
  body.nh-nav-open .nh-nav-backdrop { opacity: 1; pointer-events: auto; }
  body.nh-nav-open { overflow: hidden; }
  .nh-main, .nh-main.sidebar-collapsed { margin-left: 0; }
}

/* ─── Retail Insights: the "why" tabs on the Retail Dashboard ────────────────
   Same visual language as the rd-* panels above; ri-* only adds what those
   lacked — tabs, driver bars, the alert list and scrollable wide tables. */
.ri-tabs {
  display: flex; gap: 4px; overflow-x: auto; margin: 0 0 var(--space-4);
  border-bottom: 1px solid var(--color-border); scrollbar-width: none;
}
.ri-tabs::-webkit-scrollbar { display: none; }
.ri-tab {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary); border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap;
}
.ri-tab svg { width: 15px; height: 15px; }
.ri-tab:hover { color: var(--color-text-primary); }
.ri-tab.is-on { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: var(--font-weight-semibold); }
.ri-tab .ri-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--color-danger); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }

.ri-fresh { margin: 0 0 var(--space-4); font-size: var(--font-size-sm); }
.ri-fresh summary {
  cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 8px 12px; border-radius: var(--radius-lg); background: var(--color-surface-2);
  color: var(--color-text-secondary); list-style: none;
}
.ri-fresh summary::-webkit-details-marker { display: none; }
.ri-fresh summary svg { width: 14px; height: 14px; flex: none; }
.ri-fresh[open] summary { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.ri-fresh-body { border: 1px solid var(--color-border-subtle); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); overflow-x: auto; }
.ri-fresh-body p { margin: 10px 12px; color: var(--color-text-muted); font-size: var(--font-size-xs); line-height: 1.5; }

.ri-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ri-table td:first-child { min-width: 150px; }
.ri-table td.ri-wrap { white-space: normal; min-width: 260px; text-align: left; font-size: var(--font-size-sm); line-height: 1.45; }
.ri-table tr.ri-explain td { border-top: 0; padding-top: 0; padding-bottom: 12px; white-space: normal; text-align: left; font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); color: var(--color-text-muted); line-height: 1.5; }
.ri-table tr.ri-explain td:first-child { min-width: 0; }
.ri-sub { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: var(--font-weight-normal); margin-top: 2px; }

/* Driver bars: three effects that add up to the growth, left = negative. */
.ri-eff { display: grid; grid-template-columns: 1fr; gap: 6px; min-width: 190px; }
.ri-eff-row { display: grid; grid-template-columns: 76px 1fr 52px; align-items: center; gap: 8px; font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.ri-eff-row b { font-weight: var(--font-weight-semibold); text-align: right; font-variant-numeric: tabular-nums; }
.ri-eff-track { position: relative; height: 8px; background: var(--color-surface-3); border-radius: 4px; }
.ri-eff-track::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--color-border-strong, #94A3B8); }
.ri-eff-fill { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.ri-eff-fill.up { background: var(--color-success); }
.ri-eff-fill.down { background: var(--color-danger); }
.ri-eff-row.is-main { color: var(--color-text-primary); }
.ri-eff-row.is-main span:first-child { font-weight: var(--font-weight-semibold); }

.ri-decomp { padding: var(--space-4) var(--space-5) var(--space-5); }
.ri-decomp-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ri-decomp-head .rd-kpi-value { font-size: var(--font-size-3xl); }
.ri-sentence { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-lg); background: var(--color-surface-2); font-size: var(--font-size-sm); line-height: 1.55; color: var(--color-text-primary); }
.ri-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 14px; }
.ri-fact { padding: 8px 10px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md, 8px); }
.ri-fact-l { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); font-weight: var(--font-weight-semibold); }
.ri-fact-v { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); font-variant-numeric: tabular-nums; margin-top: 2px; }
.ri-fact-s { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 1px; }

/* Insight cards and the early-warning list. */
.ri-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.ri-card { position: relative; padding: 14px 16px 14px 18px; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-xs); overflow: hidden; }
.ri-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--color-border); }
.ri-card.is-good::before { background: var(--color-success); }
.ri-card.is-bad::before { background: var(--color-danger); }
.ri-card.is-warn::before { background: var(--color-warning); }
.ri-card-k { font-size: 11px; font-weight: var(--font-weight-bold); letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); }
.ri-card-t { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); margin-top: 4px; color: var(--color-text-primary); }
.ri-card-p { font-size: var(--font-size-sm); line-height: 1.5; margin: 6px 0 0; color: var(--color-text-secondary); }

.ri-alerts { list-style: none; margin: 0; padding: 0; }
.ri-alert { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 12px var(--space-4); border-top: 1px solid var(--color-border-subtle); }
.ri-alert:first-child { border-top: 0; }
.ri-alert svg { width: 18px; height: 18px; margin-top: 1px; }
.ri-alert.bad svg { color: var(--color-danger); }
.ri-alert.warn svg { color: var(--color-warning); }
.ri-alert.info svg { color: var(--color-text-muted); }
.ri-alert-t { font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); color: var(--color-text-primary); overflow-wrap: anywhere; }
.ri-alert-p { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: 2px; line-height: 1.5; overflow-wrap: anywhere; }
.ri-alert-m { margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; }
.ri-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px var(--space-4); border-bottom: 1px solid var(--color-border-subtle); }
.ri-filter { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: var(--font-size-xs); cursor: pointer; color: var(--color-text-secondary); }
.ri-filter.is-on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.ri-sizes { display: inline-flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
.ri-hbar { display: grid; grid-template-columns: 110px 1fr 70px; gap: 10px; align-items: center; padding: 8px var(--space-4); font-size: var(--font-size-sm); }
.ri-hbar-track { height: 10px; background: var(--color-surface-3); border-radius: 5px; overflow: hidden; }
.ri-hbar-track { display: block; }
.ri-hbar-fill { display: block; height: 100%; background: var(--color-primary); border-radius: 5px; }
.ri-hbar-fill.is-warn { background: var(--color-warning); }
.ri-hbar-fill.is-bad { background: var(--color-danger); }
.ri-hbar b { text-align: right; font-variant-numeric: tabular-nums; }

.ri-loading { padding: var(--space-8) var(--space-4); text-align: center; color: var(--color-text-muted); font-size: var(--font-size-sm); }

@media (max-width: 640px) {
  /* The rd-table rule above hides every third column on phones; these tables
     scroll sideways instead, so nothing is silently dropped. */
  .ri-table th:nth-child(3), .ri-table td:nth-child(3) { display: table-cell; }
  .ri-cards { grid-template-columns: 1fr; }
  .ri-hbar { grid-template-columns: 84px 1fr 56px; }
  .ri-eff-row { grid-template-columns: 64px 1fr 46px; }
}

/* ─── Retail Dashboard multi-select slicers ──────────────────────────────── */
.ms { position: relative; }
.ms-btn {
  width: 100%; min-width: 0; text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ms-btn.is-set { border-color: var(--color-primary); color: var(--color-primary); font-weight: var(--font-weight-semibold); }
.ms-pop {
  position: absolute; z-index: 50; top: calc(100% + 4px); left: 0;
  width: max(100%, 280px); max-width: min(360px, calc(100vw - 32px));
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg, 0 10px 30px rgba(15,23,42,.15));
  padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.ms-pop[hidden] { display: none; }
.ms-q { width: 100%; }
.ms-list { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; }
.ms-opt {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px;
  font-size: var(--font-size-sm); cursor: pointer; line-height: 1.3;
}
.ms-opt[hidden] { display: none; }
.ms-opt:hover { background: var(--color-surface-2); }
.ms-opt input { flex: none; }
.ms-empty { margin: 6px 8px; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.ms-foot { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--color-border-subtle); padding-top: 8px; }
@media (max-width: 640px) {
  .ms-pop { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; max-width: none; }
  .ms-list { max-height: 50vh; }
}

/* ─── Retail Dashboard: Reports tab ─────────────────────────────────────── */
.rr-catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.rr-group-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin-bottom: 6px; }
.rr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rr-chip { border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-primary); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: var(--font-size-sm); cursor: pointer; }
.rr-chip:hover { border-color: var(--color-primary); }
.rr-chip.is-on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.rr-head { padding: var(--space-4); margin-bottom: var(--space-4); overflow: visible; }
.rr-title { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.rr-title h3 { margin: 0 0 4px; font-size: var(--font-size-lg); }
.rr-title p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); max-width: 760px; }
.rr-params { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); align-items: flex-end; }
.rr-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--font-size-xs); color: var(--color-text-muted); min-width: 140px; flex: 0 1 180px; }
.rr-check { display: flex; gap: 6px; align-items: center; font-size: var(--font-size-sm); height: 38px; }
.rr-section { margin-bottom: var(--space-4); }
.rr-table th, .rr-table td { white-space: nowrap; text-align: left; }
.rr-table th.num, .rr-table td.num { text-align: right; }
.rr-table tr.rr-total td { font-weight: var(--font-weight-semibold); background: var(--color-primary-light, #EFF6FF); }
.rr-scroll { max-height: 70vh; overflow: auto; }
.rr-scroll thead th { position: sticky; top: 0; background: var(--color-surface); z-index: 1; }
.rr-dim { color: var(--color-text-muted); }
.rr-neg { color: var(--color-danger); }
.rr-more { padding: var(--space-2) var(--space-4) var(--space-3); }
@media (max-width: 640px) {
  .rr-field { flex: 1 1 100%; }
  .rr-title .btn { width: 100%; justify-content: center; }
}
.rr-picker { flex: 1 1 420px; min-width: 260px; }
.rr-pick-box { position: relative; }
.rr-pick-pop { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); max-height: 340px; overflow: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 6px; }
.rr-pick-opt { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: var(--radius-md); cursor: pointer; color: var(--color-text-primary); font-size: var(--font-size-sm); }
.rr-pick-opt:hover { background: var(--color-bg-subtle, #F8FAFC); }
.rr-pick-opt input { margin-top: 3px; }
.rr-pick-opt small { display: block; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.rr-core { font-style: normal; font-size: 10px; font-weight: 700; color: #065F46; background: #D1FAE5; border-radius: 4px; padding: 1px 5px; }
.rr-pick-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.rr-pick-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; background: var(--color-primary-light, #EFF6FF); color: var(--color-text-primary); border-radius: 999px; padding: 3px 4px 3px 10px; font-size: var(--font-size-xs); }
.rr-pick-chip small { color: var(--color-text-muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-pick-chip button { border: 0; background: transparent; cursor: pointer; font-size: 15px; line-height: 1; color: var(--color-text-muted); padding: 0 4px; }

/* OTB: orders already placed */
.rr-plan { margin-bottom: var(--space-4); padding: 0; }
.rr-plan > summary { display: flex; align-items: center; gap: 10px; padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none; }
.rr-plan > summary::-webkit-details-marker { display: none; }
.rr-plan > summary svg { width: 18px; height: 18px; color: var(--color-primary); flex-shrink: 0; }
.rr-plan > summary small { color: var(--color-text-muted); margin-left: 6px; }
.rr-plan > summary::after { content: '▸'; margin-left: auto; color: var(--color-text-muted); }
.rr-plan[open] > summary::after { content: '▾'; }
.rr-plan-note { margin: 0 var(--space-4) var(--space-3); font-size: var(--font-size-sm); color: var(--color-text-muted); max-width: 900px; }
.rr-plan-grid th, .rr-plan-grid td { padding: 4px 8px; vertical-align: middle; }
.rr-plan-in { min-width: 130px; height: 32px; padding: 4px 8px; }
.rr-plan-in.num { text-align: right; }
.rr-plan-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); font-size: var(--font-size-sm); }
@media (max-width: 640px) { .rr-plan-foot .btn { width: 100%; justify-content: center; } }

/* ─── Overview (home) ───────────────────────────────────────────────────── */
.hv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.hv-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xs); padding: var(--space-4); min-width: 0; }
.hv-wide { grid-column: 1 / -1; }
.hv-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-3); }
.hv-card-head h3 { margin: 0; font-size: var(--font-size-lg); flex: 1; }
.hv-ico { width: 32px; height: 32px; border-radius: 10px; background: var(--color-primary-light, #EFF6FF); color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hv-ico svg { width: 17px; height: 17px; }
.hv-open { font-size: var(--font-size-sm); color: var(--color-primary); display: inline-flex; align-items: center; gap: 2px; text-decoration: none; white-space: nowrap; }
.hv-open svg { width: 14px; height: 14px; }
.hv-count { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.hv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-2); }
.hv-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: inherit; text-decoration: none; position: relative; overflow: hidden; min-width: 0; }
a.hv-stat[href]:hover { border-color: var(--color-primary); }
.hv-stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.hv-stat.is-bad::before { background: var(--color-danger); }
.hv-stat.is-warn::before { background: var(--color-warning); }
.hv-stat.is-good::before { background: var(--color-success); }
.hv-stat-v { font-size: 22px; font-weight: 700; line-height: 1.2; display: inline-flex; align-items: center; }
.hv-stat-v svg { width: 22px; height: 22px; color: var(--color-success); }
.hv-stat-l { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.hv-stat-s { font-size: var(--font-size-xs); }
.hv-up { color: var(--color-success); font-weight: 600; }
.hv-down { color: var(--color-danger); font-weight: 600; }
.hv-flat { color: var(--color-text-secondary, #475569); font-weight: 600; }
.hv-muted { color: var(--color-text-muted); }
.hv-pad { padding: var(--space-2) 0; font-size: var(--font-size-sm); }
.hv-loading { color: var(--color-text-muted); font-size: var(--font-size-sm); display: flex; gap: 6px; align-items: center; padding: var(--space-3) 0; }
.hv-loading svg { width: 16px; height: 16px; }
.hv-sub-head { display: flex; justify-content: space-between; gap: 8px; margin: var(--space-3) 0 6px; font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
.hv-sub-head a { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--color-primary); text-decoration: none; }
.hv-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; }
.hv-list li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-top: 1px solid var(--color-border); min-width: 0; }
.hv-list li:first-child { border-top: 0; }
.hv-list li > a, .hv-list li > div { color: inherit; text-decoration: none; min-width: 0; flex: 1; }
.hv-list strong { display: block; font-size: var(--font-size-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-list small { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: 1.45; }
.hv-list li > a:hover strong { color: var(--color-primary); }
.hv-compact li { padding: 5px 0; }
.hv-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; background: var(--color-text-muted); }
.hv-dot.is-bad { background: var(--color-danger); }
.hv-dot.is-warn { background: var(--color-warning); }
.hv-dot.is-good { background: var(--color-success); }
.hv-dot.is-info { background: var(--color-primary); }
.hv-dot.is-mute { background: #CBD5E1; }
.hv-attention { border-color: #FDE68A; }
.hv-attn { list-style: none; margin: 0; padding: 0; }
.hv-attn li a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-lg); color: inherit; text-decoration: none; }
.hv-attn li a:hover { background: var(--color-bg-subtle, #F8FAFC); }
.hv-attn li.is-bad a { background: #FEF2F2; }
.hv-attn li + li { margin-top: 4px; }
.hv-attn .hv-dot { margin-top: 0; }
.hv-attn-mod { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted); min-width: 120px; }
.hv-attn-t { flex: 1; min-width: 0; }
.hv-attn-t strong { display: block; font-size: var(--font-size-sm); }
.hv-attn-t small { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-attn li a > svg { width: 16px; height: 16px; color: var(--color-text-muted); flex-shrink: 0; }
.hv-clear { display: flex; gap: 8px; align-items: center; color: var(--color-success); font-weight: 600; padding: var(--space-2) 0; }
.hv-clear svg { width: 18px; height: 18px; }
.hv-foot { margin: var(--space-4) 0 0; font-size: var(--font-size-xs); color: var(--color-text-muted); }
@media (max-width: 640px) {
  .hv-grid { grid-template-columns: 1fr; }
  .hv-attn-mod { display: none; }
  .hv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rr-pick-foot { position: sticky; bottom: -6px; display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--color-surface); border-top: 1px solid var(--color-border); margin: 4px -6px -6px; padding: 8px 10px; font-size: var(--font-size-xs); }

/* ─── Sales Performance: channel card ───────────────────────────────────── */
.ch-panel { margin-bottom: var(--space-4); }
.ch-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; margin: 0 var(--space-4) var(--space-3); background: var(--color-border); }
.ch-bar span { display: block; height: 100%; }
.ch-table td, .ch-table th { white-space: nowrap; }
.ch-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: middle; }
.ch-indent { display: inline-block; width: 14px; }
.ch-table tr.is-sub td { font-weight: 700; background: var(--color-bg-subtle, #F8FAFC); border-top: 1px solid var(--color-border); }
.ch-table tr.is-ws td:first-child { font-weight: 600; }
.ch-table tr.is-total td { font-weight: 800; background: var(--color-primary-light, #EFF6FF); border-top: 2px solid var(--color-text-primary); }
.ch-table tr.is-pick td { font-weight: 700; color: var(--color-primary); border-top: 1px dashed var(--color-border); }
.ch-table tr.is-dim td { opacity: .45; }
.ch-note { margin: var(--space-3) var(--space-4) var(--space-4); }
.ms-group { border-bottom: 1px solid var(--color-border); padding-bottom: 6px; margin-bottom: 4px; font-weight: 600; }
.ms-group small { display: block; font-weight: 400; color: var(--color-text-muted); font-size: 11px; }

/* ─── Inbox ─────────────────────────────────────────────────────────────── */
.ib-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-3); }
.ib-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border: 0; background: none; border-bottom: 2px solid transparent; color: var(--color-text-muted); font: inherit; font-size: var(--font-size-sm); cursor: pointer; white-space: nowrap; }
.ib-tab svg { width: 15px; height: 15px; }
.ib-tab.is-on { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }
.ib-wrap { display: grid; grid-template-columns: 340px minmax(0, 1fr) 280px; height: calc(100vh - 190px); min-height: 520px; border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; background: var(--color-surface); }
.ib-list { border-right: 1px solid var(--color-border); display: flex; flex-direction: column; min-height: 0; }
.ib-list-head { padding: 10px; border-bottom: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 8px; }
.ib-filters { display: flex; gap: 6px; }
.ib-filters select { flex: 1; min-width: 0; font-size: 12px; padding: 6px 8px; height: auto; }
/* Every scope must be reachable without horizontal scrolling. A single flex row
   squeezed five pills until their labels wrapped mid-word ("Belum / ditangani"),
   and on a phone the ones past the second were simply off-screen — Nur reported
   seeing only two. A wrapping grid keeps all of them visible on any width. */
.ib-scope { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 2px;
  background: var(--color-bg-subtle, #F1F5F9); border-radius: 8px; padding: 2px; }
.ib-scope-b { border: 0; background: none; font: inherit; font-size: 12px; padding: 6px 4px; border-radius: 6px;
  cursor: pointer; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-scope-b span { font-weight: 700; margin-left: 2px; }
.ib-scope-b.is-on { background: var(--color-surface); color: var(--color-text-primary); box-shadow: var(--shadow-xs); font-weight: 600; }
.ib-new { align-self: flex-start; }
.ib-items { overflow-y: auto; flex: 1; }
.ib-item { display: flex; gap: 10px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--color-border); background: none; padding: 10px 12px; cursor: pointer; font: inherit; color: inherit; align-items: flex-start; }
.ib-item:hover { background: var(--color-bg-subtle, #F8FAFC); }
.ib-item.is-on { background: var(--color-primary-light, #EFF6FF); }
.ib-item.is-unread strong { font-weight: 800; }
.ib-av { width: 36px; height: 36px; border-radius: 50%; background: #DBEAFE; color: #1E40AF; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.ib-av-lg { width: 56px; height: 56px; font-size: 18px; }
.ib-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ib-item-top { display: flex; justify-content: space-between; gap: 6px; }
.ib-item-top strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-item-top time { font-size: 11px; color: var(--color-text-muted); flex-shrink: 0; }
.ib-item-prev { font-size: 12.5px; color: var(--color-text-secondary, #475569); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-item-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 11px; color: var(--color-text-muted); }
.ib-item-meta em { font-style: normal; display: inline-flex; gap: 3px; align-items: center; }
.ib-item-meta svg { width: 11px; height: 11px; }
.ib-unassigned { color: #B45309; }
.ib-wait { color: var(--color-danger); font-weight: 600; }
.ib-badge { background: var(--color-primary); color: #fff; border-radius: 999px; font-size: 11px; min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.ib-lbl { display: inline-flex; align-items: center; gap: 2px; font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); font-weight: 600; }
.ib-x { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 2px; }
.ib-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--color-text-muted); padding: 40px 16px; text-align: center; font-size: var(--font-size-sm); }
.ib-empty svg { width: 28px; height: 28px; }
.ib-empty-big { height: 100%; justify-content: center; }
.ib-thread { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: #F8FAFC; }
.ib-thread-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--color-border); background: var(--color-surface); flex-wrap: wrap; }
.ib-back { display: none; }
.ib-th-who { flex: 1; min-width: 140px; display: flex; flex-direction: column; }
.ib-th-who small { color: var(--color-text-muted); font-size: 12px; }
.ib-th-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ib-th-actions select { width: auto; max-width: 200px; font-size: 12.5px; padding: 6px 8px; height: auto; }
.ib-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--color-bg-subtle, #F1F5F9); color: var(--color-text-secondary, #475569); }
.ib-chip svg { width: 12px; height: 12px; }
.ib-chip.is-ok { background: #D1FAE5; color: #065F46; }
.ib-chip.is-bad { background: #FEE2E2; color: #991B1B; }
.ib-msgs { flex: 1; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; }
.ib-day { align-self: center; font-size: 11px; color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: 2px 10px; margin: 8px 0; }
.ib-activity { align-self: center; font-size: 11.5px; color: var(--color-text-muted); }
.ib-msg { display: flex; }
.ib-msg.is-outgoing, .ib-msg.is-note { justify-content: flex-end; }
.ib-bubble { max-width: min(72%, 560px); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-xs); }
.ib-msg.is-outgoing .ib-bubble { background: #DBEAFE; border-color: #BFDBFE; }
.ib-msg.is-note .ib-bubble { background: #FEF3C7; border-color: #FDE68A; }
.ib-text { font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.ib-meta { font-size: 10.5px; color: var(--color-text-muted); align-self: flex-end; display: inline-flex; gap: 4px; align-items: center; }
.ib-note-tag { font-size: 11px; color: #92400E; font-weight: 600; display: inline-flex; gap: 4px; align-items: center; }
.ib-note-tag svg { width: 11px; height: 11px; }
.ib-tick svg { width: 12px; height: 12px; }
.ib-tick.is-read { color: #2563EB; }
.ib-tick.is-failed { color: var(--color-danger); }
.ib-err { color: var(--color-danger); font-size: 11.5px; }
.ib-img { max-width: 260px; max-height: 260px; border-radius: 8px; display: block; }
.ib-file { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.ib-file svg { width: 14px; height: 14px; }
.ib-composer { border-top: 1px solid var(--color-border); background: var(--color-surface); padding: 8px 12px 12px; position: relative; }
.ib-composer.is-note { background: #FFFBEB; }
.ib-modes { display: flex; gap: 4px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.ib-modes button { border: 0; background: none; font: inherit; font-size: 12.5px; padding: 4px 10px; border-radius: 6px; cursor: pointer; color: var(--color-text-muted); display: inline-flex; gap: 4px; align-items: center; }
.ib-modes button svg { width: 12px; height: 12px; }
.ib-modes button.is-on { background: var(--color-primary-light, #EFF6FF); color: var(--color-primary); font-weight: 600; }
.ib-composer.is-note .ib-modes button.is-on { background: #FDE68A; color: #92400E; }
.ib-hint { margin-left: auto; font-size: 11px; color: var(--color-text-muted); }
.ib-compose-row { display: flex; gap: 8px; align-items: flex-end; }
.ib-compose-row textarea { flex: 1; resize: vertical; min-height: 44px; max-height: 200px; }
.ib-attach svg, .ib-compose-row .btn svg { width: 16px; height: 16px; }
.ib-canned { position: absolute; left: 12px; right: 12px; bottom: calc(100% - 4px); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: var(--shadow-lg); max-height: 260px; overflow-y: auto; z-index: 5; }
.ib-canned button { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; border: 0; background: none; padding: 8px 12px; cursor: pointer; font: inherit; font-size: 12.5px; border-bottom: 1px solid var(--color-border); }
.ib-canned button:hover, .ib-canned button:first-child { background: var(--color-bg-subtle, #F8FAFC); }
.ib-canned span { color: var(--color-text-muted); }
.ib-file-pick { font-size: 12.5px; display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.ib-file-pick svg { width: 14px; height: 14px; }
.ib-side { border-left: 1px solid var(--color-border); overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ib-side-card { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.ib-side-card:first-child { align-items: center; text-align: center; }
.ib-side-card h4 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
.ib-side-row { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.ib-side-row svg { width: 14px; height: 14px; color: var(--color-text-muted); }
.ib-side-notes { font-size: 12.5px; white-space: pre-wrap; margin: 0; }
.ib-labels { display: flex; flex-wrap: wrap; gap: 6px; }
.ib-lbl-pick { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; padding: 3px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); color: var(--c); cursor: pointer; }
.ib-hist { display: flex; flex-direction: column; text-align: left; border: 1px solid var(--color-border); border-radius: 8px; background: none; padding: 6px 8px; font: inherit; font-size: 12px; cursor: pointer; }
.ib-hist small { color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-muted { color: var(--color-text-muted); font-size: 12.5px; }
.ib-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.ib-bar .form-input[type=search] { max-width: 320px; }
.ib-form { display: flex; flex-direction: column; gap: 12px; }
.ib-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--color-text-muted); }
.ib-form .ib-check, .ib-check { flex-direction: row; align-items: center; gap: 8px; color: var(--color-text-primary); }
.ib-chan { border: 1px solid var(--color-border); border-radius: 10px; padding: 12px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
.ib-chan-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ib-hook { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--color-text-muted); }
.ib-hook code { background: var(--color-bg-subtle, #F1F5F9); padding: 3px 8px; border-radius: 6px; font-size: 11.5px; overflow-wrap: anywhere; max-width: 100%; }
.ib-chan-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ib-test { font-size: 12.5px; }
.ib-members { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.ib-people { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; }
.ib-person { display: flex; gap: 8px; align-items: flex-start; padding: 6px 4px; border-bottom: 1px solid var(--color-border); cursor: pointer; }
.ib-person small { display: block; color: var(--color-text-muted); font-size: 11.5px; }
@media (max-width: 1200px) { .ib-wrap { grid-template-columns: 300px minmax(0, 1fr); } .ib-side { display: none; } }
@media (max-width: 760px) {
  .ib-wrap { grid-template-columns: 1fr; height: calc(100vh - 170px); }
  .ib-wrap .ib-thread { display: none; }
  .ib-wrap.show-thread .ib-list { display: none; }
  .ib-wrap.show-thread .ib-thread { display: flex; }
  .ib-back { display: inline-flex; }
  .ib-hint { display: none; }
  .ib-bubble { max-width: 88%; }
}
.ib-qr-body { display: flex; flex-direction: column; gap: 12px; }
.ib-steps { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.7; }
.ib-qr { display: flex; align-items: center; justify-content: center; min-height: 290px; background: #fff; border: 1px solid var(--color-border); border-radius: 12px; }
.ib-qr img { width: 280px; height: 280px; image-rendering: pixelated; }
.ib-loading-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--color-text-muted); font-size: 13px; text-align: center; padding: 12px; }
.ib-loading-qr svg { width: 22px; height: 22px; }
.ib-qr-ok { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--color-success); }
.ib-qr-ok svg { width: 48px; height: 48px; }
.ib-qr-ok span { color: var(--color-text-primary); font-size: 13px; }

/* ─── Cek Stok · Cari Produk ────────────────────────────────────────────── */
.sf-top { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; position: sticky; top: 0; z-index: 4; background: var(--color-bg, #F8FAFC); padding: 6px 0 8px; }
.sf-search { display: flex; align-items: center; gap: 8px; background: var(--color-surface); border: 2px solid var(--color-primary); border-radius: 14px; padding: 4px 6px 4px 14px; box-shadow: var(--shadow-sm); }
.sf-search > svg { width: 20px; height: 20px; color: var(--color-text-muted); flex-shrink: 0; }
.sf-search input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 16px; padding: 10px 0; background: transparent; min-width: 0; }
.sf-scan { border: 0; background: var(--color-primary); color: #fff; border-radius: 10px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.sf-scan svg { width: 20px; height: 20px; }
.sf-where { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sf-where select { width: auto; max-width: 280px; }
.sf-store-name { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; font-size: 14px; }
.sf-store-name svg { width: 16px; height: 16px; color: var(--color-primary); }
.sf-seg { display: inline-flex; background: var(--color-bg-subtle, #E2E8F0); border-radius: 10px; padding: 3px; }
.sf-seg button { border: 0; background: none; font: inherit; font-size: 13px; padding: 7px 14px; border-radius: 8px; cursor: pointer; color: var(--color-text-muted); }
.sf-seg button.is-on { background: var(--color-surface); color: var(--color-primary); font-weight: 700; box-shadow: var(--shadow-xs); }
.sf-understood { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; color: var(--color-text-muted); margin-bottom: 8px; }
.sf-understood svg { width: 14px; height: 14px; color: #D97706; }
.sf-u { background: #FEF3C7; color: #92400E; border-radius: 999px; padding: 2px 9px; font-weight: 600; }
.sf-u-text { background: var(--color-bg-subtle, #F1F5F9); color: var(--color-text-secondary, #475569); }
.sf-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; min-width: 0; }
.sf-row-t { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); flex-shrink: 0; width: 46px; }
.sf-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; min-width: 0; }
.sf-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.sf-chip small { color: var(--color-text-muted); font-size: 11px; }
.sf-chip.is-on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.sf-chip.is-on small { color: #DBEAFE; }
.sf-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex-shrink: 0; }
.sf-dot-lg { width: 40px; height: 40px; }
.sf-filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 4px 0 10px; }
.sf-dd { position: relative; }
.sf-dd summary { list-style: none; display: inline-flex; gap: 4px; align-items: center; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 10px; padding: 7px 10px; font-size: 13px; cursor: pointer; }
.sf-dd summary::-webkit-details-marker { display: none; }
.sf-dd summary svg { width: 14px; height: 14px; }
.sf-dd[data-on] summary { border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }
.sf-dd summary b { background: var(--color-primary); color: #fff; border-radius: 999px; font-size: 11px; padding: 0 6px; }
.sf-dd-pop { position: absolute; z-index: 10; top: calc(100% + 4px); left: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 8px; min-width: 220px; max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.sf-dd-pop label { display: flex; gap: 8px; align-items: center; font-size: 13px; padding: 5px 4px; cursor: pointer; }
.sf-dd-pop label small { margin-left: auto; color: var(--color-text-muted); }
.sf-price { flex-direction: row; align-items: center; gap: 6px; }
.sf-price input { width: 110px; }
.sf-toggle { display: inline-flex; gap: 5px; align-items: center; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.sf-toggle svg { width: 14px; height: 14px; }
.sf-toggle small { color: var(--color-text-muted); }
.sf-toggle.is-on { background: #FEE2E2; border-color: #FCA5A5; color: #B91C1C; font-weight: 600; }
.sf-sort { width: auto; margin-left: auto; font-size: 13px; }
.sf-count { font-size: 12.5px; color: var(--color-text-muted); margin-bottom: 8px; }
.sf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
#sf-body.is-busy .sf-grid { opacity: .5; transition: opacity .15s; }
.sf-card { display: flex; flex-direction: column; text-align: left; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 14px; overflow: hidden; padding: 0; cursor: pointer; font: inherit; color: inherit; min-width: 0; }
.sf-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.sf-img { aspect-ratio: 1 / 1; background: #F8FAFC; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sf-img img { width: 100%; height: 100%; object-fit: contain; }
.sf-img > svg { width: 36px; height: 36px; color: #CBD5E1; }
.sf-info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sf-brand { font-size: 11px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .03em; }
.sf-name { font-size: 14px; line-height: 1.3; }
.sf-colour { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--color-text-secondary, #475569); }
.sf-price-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 14px; }
.sf-price-line s { color: var(--color-text-muted); font-size: 12px; }
.sf-final { color: #DC2626; }
.sf-promo { background: #DC2626; color: #fff; border-radius: 6px; font-size: 11px; font-weight: 700; padding: 1px 6px; }
.sf-promo.is-member { background: #7C3AED; }
.sf-sizes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.sf-s { border: 1px solid #BFDBFE; background: #EFF6FF; color: #1E40AF; border-radius: 6px; font-size: 12px; font-weight: 600; padding: 2px 6px; }
.sf-s sub { font-size: 9.5px; font-weight: 500; margin-left: 2px; vertical-align: baseline; color: #3B82F6; }
.sf-s.is-out { border-color: var(--color-border); background: #F8FAFC; color: #CBD5E1; text-decoration: line-through; font-weight: 400; }
.sf-s.is-dim { opacity: .55; }
.sf-meta { font-size: 11.5px; color: var(--color-text-muted); }
.sf-pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 16px 0; font-size: 13px; }
.sf-loading { display: flex; gap: 8px; align-items: center; justify-content: center; color: var(--color-text-muted); padding: 40px; }
.sf-loading svg { width: 18px; height: 18px; }
.sf-muted { color: var(--color-text-muted); font-size: 12.5px; }
.sf-detail { max-width: 860px; padding: 0 20px 20px; }
.sf-d-head { position: sticky; top: 0; display: flex; justify-content: flex-end; background: var(--color-surface); padding-top: 8px; z-index: 2; }
.sf-d-top { display: grid; grid-template-columns: 260px 1fr; gap: 18px; }
.sf-d-img { aspect-ratio: 1/1; background: #F8FAFC; border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sf-d-img img { width: 100%; height: 100%; object-fit: contain; }
.sf-d-img > svg { width: 48px; height: 48px; color: #CBD5E1; }
.sf-d-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sf-d-info h3 { margin: 0; font-size: 20px; }
.sf-promo-list { margin: 0; padding-left: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.sf-promo-list em { color: #7C3AED; font-style: normal; }
.sf-h { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
.sf-size-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.sf-size { border: 1px solid #BFDBFE; background: #EFF6FF; border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.sf-size strong { font-size: 16px; }
.sf-size span { font-weight: 600; color: #1E40AF; font-size: 13px; }
.sf-size small { font-size: 11px; color: var(--color-text-muted); }
.sf-size .sf-bc { font-family: ui-monospace, monospace; font-size: 10px; }
.sf-size.is-out { background: #F8FAFC; border-color: var(--color-border); }
.sf-size.is-out span { color: var(--color-text-muted); font-weight: 400; }
.sf-sibs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.sf-sib { flex-shrink: 0; width: 110px; display: flex; flex-direction: column; gap: 3px; align-items: center; text-align: center; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); padding: 6px; cursor: pointer; font: inherit; font-size: 12px; }
.sf-sib img { width: 90px; height: 90px; object-fit: contain; }
.sf-sib small { color: var(--color-text-muted); font-size: 10.5px; }
.sf-others-q { max-width: 260px; margin-bottom: 8px; }
.sf-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: 10px; }
.sf-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sf-table th, .sf-table td { padding: 6px 8px; border-bottom: 1px solid var(--color-border); text-align: center; white-space: nowrap; }
.sf-table th:first-child, .sf-table td:first-child { text-align: left; position: sticky; left: 0; background: var(--color-surface); }
.sf-table td.has { color: #1E40AF; font-weight: 700; background: #EFF6FF; }
.sf-video { width: 100%; border-radius: 10px; background: #000; }
.sf-pad { padding: 20px; }
@media (max-width: 640px) {
  .sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sf-info { padding: 8px; }
  .sf-name { font-size: 13px; }
  .sf-d-top { grid-template-columns: 1fr; }
  .sf-d-img { max-height: 280px; }
  .sf-sort { margin-left: 0; width: 100%; }
  .sf-where select { max-width: 100%; flex: 1; }
  .sf-dd-pop { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; max-height: 60vh; }
  .sf-overlay { align-items: flex-end; padding: 0; }
  .sf-overlay .nh-modal { max-height: 92vh; border-radius: 18px 18px 0 0; }
}

/* Roles & Permissions: "Semua user" switch per action. */
.permission-checks { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.permission-check-row { display: flex; flex-direction: column; gap: 2px; border: 1px solid transparent; border-radius: var(--radius-md); }
.permission-check-row .permission-check { padding-bottom: 0; }
.perm-all { align-self: flex-start; margin-left: 30px; margin-bottom: 4px; display: inline-flex; align-items: center; gap: 4px; border: 1px dashed var(--color-border); background: transparent; color: var(--color-text-muted); border-radius: 999px; font: inherit; font-size: 11px; padding: 2px 8px; cursor: pointer; }
.perm-all svg { width: 11px; height: 11px; }
.perm-all:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.perm-all.is-on { border-style: solid; border-color: #16A34A; background: #DCFCE7; color: #166534; font-weight: 600; }
.perm-all:disabled { cursor: default; }
.perm-all-note { font-style: normal; color: #166534; font-size: 11.5px; }

/* ─── Catatan (notes) ───────────────────────────────────────────────────── */
.nt-body .nh-content { padding: var(--space-4); }
.nt-app [hidden] { display: none !important; }
.nt-app { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; height: calc(100dvh - var(--header-height) - 2 * var(--space-4)); min-height: 420px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xs); }
.nt-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--color-border); background: var(--color-bg-subtle, #F8FAFC); }
.nt-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 14px 8px; }
.nt-side-title { min-width: 0; }
.nt-side-title h2 { margin: 0; font-size: 20px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-side-title span { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.nt-icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 36px; height: 36px; padding: 0 6px; border: 0; border-radius: 8px;
  background: transparent; color: var(--color-text-secondary); cursor: pointer; font: inherit; }
.nt-icon-btn:hover { background: var(--color-bg-subtle, #F1F5F9); color: var(--color-text-primary); }
.nt-icon-btn svg { width: 19px; height: 19px; }
.nt-icon-btn.is-on { color: #B45309; }
#nt-new { color: #B45309; }
.nt-owner { margin: 0 14px 8px; width: calc(100% - 28px); }
.nt-search { display: flex; align-items: center; gap: 6px; margin: 0 14px 8px; padding: 0 10px; height: 34px; border-radius: 8px; background: var(--color-surface); border: 1px solid var(--color-border); }
.nt-search svg { width: 15px; height: 15px; color: var(--color-text-muted); flex-shrink: 0; }
.nt-search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; width: 100%; color: var(--color-text-primary); }
.nt-list { flex: 1; overflow-y: auto; padding: 0 8px 12px; }
.nt-group { font-size: 12px; font-weight: 700; color: var(--color-text-muted); padding: 10px 8px 4px; }
.nt-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 8px; padding: 9px 10px; cursor: pointer; font: inherit; color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border); }
.nt-item:hover { background: rgba(0, 0, 0, .03); }
.nt-item.is-on { background: #FDE68A; border-bottom-color: transparent; }
.nt-item strong { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-item span { display: block; font-size: 13px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.nt-item em { font-style: normal; color: var(--color-text-secondary); margin-right: 6px; }
.nt-pinned svg { width: 12px; height: 12px; color: #B45309; vertical-align: -1px; }
.nt-pinned { display: inline-flex; }
.nt-list-empty { text-align: center; color: var(--color-text-muted); font-size: 14px; padding: 32px 12px; line-height: 1.6; }
.nt-page { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.nt-bar { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--color-border); }
.nt-back { display: none; color: #B45309; font-size: 15px; }
.nt-status { flex: 1; text-align: right; font-size: 12px; color: var(--color-text-muted); padding-right: 6px; }
.nt-ro { display: flex; align-items: center; gap: 8px; margin: 10px 16px 0; padding: 8px 12px; border-radius: 8px; background: #FEF3C7; color: #92400E; font-size: 13px; }
.nt-ro svg { width: 16px; height: 16px; flex-shrink: 0; }
.nt-date { text-align: center; font-size: 12px; color: var(--color-text-muted); padding: 10px 16px 0; }
/* The page scrolls as one sheet — date, title and text together — so the
   title never sits over a half-scrolled first line (Nur, 2026-10-14). */
.nt-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.nt-sheet { max-width: 860px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px) 48px; min-height: 100%; display: flex; flex-direction: column; }
.nt-sheet .nt-date { padding: 14px 0 2px; }
.nt-sheet .nt-title { padding: 4px 0 10px; }
.nt-text { flex: 1; width: 100%; outline: 0; padding: 2px 0 24px; background: transparent; color: var(--color-text-primary); cursor: text;
  font: 16px/1.6 var(--font-family, system-ui, -apple-system, 'Segoe UI', sans-serif); tab-size: 4;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.nt-text.is-readonly { cursor: default; }
/* One block per line; a list line hangs its wrapped part under its first word (note-editor.js sets the width). */
.nt-text .ne-ln { min-height: 1.6em; }
.nt-text .ne-ln.ne-item + .ne-ln.ne-item { margin-top: 3px; }
.nt-text .ne-ln.ne-done { color: var(--color-text-muted); }
.nt-text { position: relative; }
.nt-text.is-empty::before { content: attr(data-placeholder); color: var(--color-text-muted); pointer-events: none; position: absolute; top: 2px; left: 0; }
.nt-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--color-text-muted); text-align: center; padding: 24px; }
.nt-empty p { margin: 0; }
@media (max-width: 768px) {
  .nt-body .nh-content { padding: 0; }
  .nt-app { grid-template-columns: 1fr; border: 0; border-radius: 0; box-shadow: none; height: calc(100dvh - var(--header-height)); }
  .nt-side { border-right: 0; background: var(--color-surface); }
  .nt-app .nt-page { display: none; }
  .nt-app.is-reading .nt-side { display: none; }
  .nt-app.is-reading .nt-page { display: flex; }
  .nt-back { display: inline-flex; }
  .nt-sheet { padding: 0 16px 40px; }
  .nt-text { font-size: 15.5px; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nt-item.is-on { background: #78350F; color: #FEF3C7; }
  :root:not([data-theme="light"]) .nt-ro { background: #451A03; color: #FDE68A; }
}
:root[data-theme="dark"] .nt-item.is-on { background: #78350F; color: #FEF3C7; }
:root[data-theme="dark"] .nt-ro { background: #451A03; color: #FDE68A; }

/* ─── Jadwal Shift ──────────────────────────────────────────────────────── */
.sc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.sc-team { width: auto; min-width: 160px; }
.sc-month { display: flex; align-items: center; gap: 4px; }
.sc-month strong { min-width: 130px; text-align: center; font-size: var(--font-size-lg); }
.sc-status { font-size: 12px; color: var(--color-text-muted); }
.sc-actions { margin-left: auto; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.sc-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-2); }
.sc-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 9px 3px 3px; border-radius: 999px; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-secondary); }
.sc-chip b { background: var(--c); color: #0F172A; border-radius: 999px; padding: 1px 8px; font-size: 12px; }
.sc-chip small { color: var(--color-text-muted); }
.sc-chip-auto { font-style: italic; padding-left: 9px; }
.sc-help { font-size: 12px; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.sc-help kbd { font: 11px/1 var(--font-family); border: 1px solid var(--color-border); border-bottom-width: 2px; border-radius: 4px; padding: 1px 4px; background: var(--color-surface); }
.sc-wrap { overflow: auto; max-height: calc(100dvh - 250px); min-height: 200px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); }
.sc-grid { border-collapse: separate; border-spacing: 0; font-size: 13px; user-select: none; outline: none; }
.sc-grid th, .sc-grid td { border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.sc-grid thead th { position: sticky; top: 0; z-index: 2; background: var(--color-surface); font-weight: 600; font-size: 12px; padding: 6px 2px; }
.sc-day { min-width: 38px; text-align: center; line-height: 1.2; }
.sc-day span { display: block; font-size: 10px; font-weight: 500; color: var(--color-text-muted); }
.sc-grid thead .sc-day.is-weekend { color: #B91C1C; }
.sc-grid thead .sc-day.is-today { background: var(--color-primary); color: #fff; }
.sc-grid thead .sc-day.is-today span { color: #DBEAFE; }
.sc-name { position: sticky; left: 0; z-index: 1; background: var(--color-surface); text-align: left; padding: 6px 10px; min-width: 150px; font-weight: 600; white-space: nowrap; }
.sc-grid thead .sc-name { z-index: 3; }
.sc-name span { margin-right: 6px; }
.sc-kind { font-style: normal; font-size: 10px; font-weight: 600; border-radius: 4px; padding: 1px 5px; background: #E0F2FE; color: #075985; }
.sc-kind.is-nonshift { background: #F1F5F9; color: #475569; }
.sc-kind.is-off { background: #FEE2E2; color: #991B1B; margin-left: 4px; }
.sc-cell { text-align: center; height: 34px; min-width: 38px; font-weight: 700; cursor: cell; background: var(--c, transparent); color: #0F172A; position: relative; }
.sc-cell.is-weekend:not([style]) { background: #F8FAFC; }
.sc-cell.is-auto { font-weight: 500; font-style: italic; color: #64748B; background: color-mix(in srgb, var(--c, transparent) 45%, transparent); }
.sc-cell.is-today { box-shadow: inset 2px 0 0 var(--color-primary), inset -2px 0 0 var(--color-primary); }
.sc-cell.is-sel { outline: 2px solid var(--color-primary); outline-offset: -2px; background-image: linear-gradient(rgba(37, 99, 235, .14), rgba(37, 99, 235, .14)); }
.sc-cell.is-anchor { outline-width: 3px; }
.sc-sum { padding: 4px 10px; font-size: 12px; white-space: nowrap; color: var(--color-text-secondary); }
.sc-sum span { margin-right: 8px; }
.sc-sum strong { color: var(--color-text-primary); }
.sc-grid thead .sc-sum { text-align: left; }
.sc-pick { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 400; width: min(620px, calc(100vw - 24px)); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 10px 12px; }
.sc-pick-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sc-pick-head span { color: var(--color-text-muted); font-size: 13px; flex: 1; }
.sc-pick-codes { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-code { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 6px 8px; border-radius: 10px; border: 1px solid rgba(15, 23, 42, .12); background: var(--c); color: #0F172A; cursor: pointer; font: inherit; }
.sc-code b { font-size: 16px; }
.sc-code small { font-size: 11px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-code:hover { filter: brightness(.95); }
.sc-pick-foot { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.sc-pattern { display: flex; gap: 6px; flex: 1; min-width: 220px; }
.sc-pattern .form-input { height: 32px; }
.sc-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3); }
.sc-form-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.sc-note { font-size: 13px; color: var(--color-text-muted); margin: 8px 0; }
.sc-tabs { display: flex; gap: 6px; margin-bottom: var(--space-3); }
.sc-set-table td, .sc-set-table th { padding: 6px; vertical-align: middle; }
.sc-set-table .form-input, .sc-set-table .form-select { height: 34px; min-width: 90px; }
.sc-code-in { width: 80px; min-width: 70px !important; text-transform: uppercase; }
.sc-color { width: 40px; height: 32px; border: 0; padding: 0; background: none; cursor: pointer; }
.sc-order { white-space: nowrap; }
.sc-order .nt-icon-btn { min-width: 26px; height: 26px; font-size: 11px; }
.sc-dows { display: flex; gap: 4px; flex-wrap: wrap; }
.sc-dows label { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; }
.sc-dows.is-dim { opacity: .45; }
.sc-add { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--space-3); }
.sc-add .form-input { flex: 1; min-width: 160px; }
.sc-add .form-select { width: auto; }
@media (max-width: 768px) {
  .sc-actions { margin-left: 0; width: 100%; }
  .sc-actions .btn { flex: 1; justify-content: center; }
  .sc-month { flex: 1; justify-content: space-between; }
  .sc-team { flex: 1 1 100%; }
  .sc-wrap { max-height: calc(100dvh - 300px); }
  .sc-name { min-width: 110px; }
  .sc-help { display: none; }
  .sc-pick { bottom: 0; border-radius: 16px 16px 0 0; width: 100vw; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* ─── Inbox: knowledge (AI summary, FAQ, suggested reply) ───────────────── */
.ib-modes #ib-suggest { color: #B45309; font-weight: 600; }
.ib-modes #ib-suggest:disabled { opacity: .5; cursor: wait; }
.ib-suggest { margin: 6px 0; padding: 10px 12px; border-radius: 10px; background: #FFFBEB; border: 1px solid #FDE68A; font-size: 13.5px; }
.ib-suggest-text { white-space: pre-wrap; color: var(--color-text-primary); margin-bottom: 8px; }
.ib-suggest-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ib-suggest-meta .ib-muted { flex: 1; min-width: 160px; font-size: 12px; }
.ib-sum h4 { margin: 14px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
.ib-sum p { margin: 0; line-height: 1.6; white-space: pre-wrap; }
.ib-sum-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ib-sum-faq { padding-left: 18px; margin: 4px 0 8px; }
.ib-sum-faq li { margin-bottom: 10px; }
.ib-sum-faq p { color: var(--color-text-secondary); margin: 2px 0 4px; }
.ib-faq { border: 1px solid var(--color-border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: var(--color-surface); }
.ib-faq.is-draft { border-style: dashed; background: #FFFDF5; }
.ib-faq-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ib-faq-head strong { flex: 1; min-width: 200px; }
.ib-faq p { margin: 6px 0; white-space: pre-wrap; line-height: 1.55; color: var(--color-text-secondary); }
.ib-faq-foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ib-faq-foot .ib-muted { flex: 1; font-size: 12px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ib-suggest { background: #422006; border-color: #78350F; }
  :root:not([data-theme="light"]) .ib-faq.is-draft { background: transparent; }
}
:root[data-theme="dark"] .ib-suggest { background: #422006; border-color: #78350F; }
:root[data-theme="dark"] .ib-faq.is-draft { background: transparent; }
.hv-shifts { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 8px; }
.hv-shifts.is-off { opacity: .6; }
.hv-shift { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 3px 10px 3px 3px; border-radius: 999px; border: 1px solid var(--color-border); }
.hv-shift b { background: var(--c); color: #0F172A; border-radius: 999px; padding: 1px 7px; font-size: 12px; }
/* A filtered-out picker row: [hidden] loses to .tk-pop-item's display:flex without this. */
.tk-pop-item[hidden] { display: none; }

/* ─── Finance Corner ────────────────────────────────────────────────────── */
.fc-pt { flex: 1 1 260px; }
.fc-scale { flex: 0 1 120px; min-width: 110px; }
.fc-acc { flex: 1 1 360px; }
.fc-export { margin-left: auto; height: 38px; }
.fc-title h2 { margin: 0; font-size: var(--font-size-xl, 20px); }
.fc-title p { margin: 2px 0 10px; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.fc-neg { color: var(--color-danger); }
.fc-table td:first-child { white-space: normal; min-width: 220px; }
.fc-table tr.fc-head td { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 12px; background: var(--color-bg-subtle, #F1F5F9); color: var(--color-text-secondary); }
.fc-table tr.fc-head2 td { font-weight: 700; }
.fc-table tr.fc-acct td:first-child { padding-left: 24px; }
.fc-table tr.fc-sub td { font-weight: 600; border-top: 1px solid var(--color-border); }
.fc-table tr.fc-total td { font-weight: 700; background: var(--color-primary-light, #EFF6FF); }
.fc-table tr.fc-grand td { font-weight: 800; background: var(--color-primary-light, #EFF6FF); border-top: 2px solid var(--color-primary); }
.fc-table tr.fc-pct td, .fc-table tr.fc-pct2 td { font-style: italic; color: var(--color-text-muted); }
.fc-table tr.fc-totalrow td { font-weight: 700; background: var(--color-primary-light, #EFF6FF); }
.fc-table tr.fc-click { cursor: pointer; }
.fc-table tr.fc-click:hover td { background: #FEF3C7; }
@media (max-width: 640px) { .fc-export { width: 100%; justify-content: center; } }
.fc-budget { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: var(--space-4); }
.fc-budget > strong { display: inline-flex; align-items: center; gap: 6px; }
.fc-budget > strong svg { width: 16px; height: 16px; }
.fc-budget .form-select { width: auto; }
.fc-budget .rr-dim { font-size: 12px; flex: 1 1 280px; }
.fc-catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-3) var(--space-4); }

/* ─── Integration Corner ────────────────────────────────────────────────── */
.ic-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3); }
.ic-q { flex: 1 1 420px; }
.ic-go { height: 38px; }
.ic-st { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.ic-st.is-ok { background: #D1FAE5; color: #065F46; }
.ic-st.is-bad { background: #FEE2E2; color: #991B1B; }
.ic-clean { display: flex; align-items: center; gap: 8px; padding: 16px; color: #047857; font-weight: 600; }
.ic-clean svg { width: 18px; height: 18px; }
.ic-clean.is-none { color: var(--color-text-muted); }
.ib-group { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 10.5px; font-weight: 700; color: #6D28D9; background: #EDE9FE; border-radius: 6px; padding: 1px 6px; margin-right: 6px; vertical-align: 1px; }
.ib-group svg { width: 11px; height: 11px; }
.ib-sender { display: block; font-size: 12px; font-weight: 700; color: #6D28D9; margin-bottom: 2px; }

/* ─── Asset Register ────────────────────────────────────────────────────── */
.ar-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: var(--space-3); }
.ar-kpi { text-align: left; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 12px; padding: 10px 14px; cursor: pointer; font: inherit; color: var(--color-text-primary); }
.ar-kpi b { display: block; font-size: 22px; }
.ar-kpi span { font-size: 12px; color: var(--color-text-muted); }
.ar-kpi.is-on { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-light, #DBEAFE); }
.ar-kpi.is-warn b { color: #B45309; }
.ar-kpi.is-bad b { color: #B91C1C; }
.ar-kpi.is-flat { cursor: default; background: var(--color-bg-subtle, #F8FAFC); }
.ar-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; margin-bottom: var(--space-3); }
.ar-bar .form-input { flex: 1 1 260px; }
.ar-bar .form-select { width: auto; }
.ar-table td { vertical-align: top; }
.ar-table td small { display: block; color: var(--color-text-muted); font-size: 12px; margin-top: 2px; }
.ar-arrow { color: var(--color-text-muted); font-size: 18px; }
.ar-act { white-space: nowrap; }
.ar-score { display: inline-block; min-width: 40px; text-align: center; border-radius: 6px; padding: 1px 6px; font-weight: 700; font-size: 12px; }
.ar-score.is-hi { background: #D1FAE5; color: #065F46; }
.ar-score.is-mid { background: #FEF3C7; color: #92400E; }
.ar-score.is-lo { background: #F1F5F9; color: #475569; }
.ar-dev { display: block; font-size: 12.5px; }
.ar-dev em { font-style: normal; color: #B45309; font-weight: 600; }
.ar-pill { font-size: 12px; color: var(--color-text-muted); }
.ar-cand { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; }
.ar-cand > span:nth-child(2) { flex: 1; }
.ar-cand small { display: block; color: var(--color-text-muted); font-size: 12px; }
.ar-table th, .ar-table td { text-align: left; } .ar-table th.num, .ar-table td.num { text-align: right; }

/* ─── BOD Dashboard (2026-10-09): read like a trading app ─────────────── */
.bd { --bd-up: var(--color-success); --bd-down: var(--color-danger); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bd-filters { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.bd-filters .rd-slicers { flex: 1 1 600px; }
.bd-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.bd-pt { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.bd-pt select { min-width: 220px; max-width: 100%; }
.bd-asof { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.bd-periods { flex-wrap: wrap; }
.bd-custom { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.bd-custom[hidden] { display: none; }
.bd-custom label { display: flex; flex-direction: column; gap: 4px; font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.bd-custom .bd-chk { flex-direction: row; align-items: center; gap: 6px; font-size: var(--font-size-sm); padding-bottom: 6px; }
.bd-r { text-align: right; }
.bd-muted { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.bd-pad { padding: 12px; }
.bd-skel { height: 60px; border-radius: 10px; background: linear-gradient(90deg, var(--color-surface-2), var(--color-surface-3), var(--color-surface-2)); background-size: 200% 100%; animation: bd-sh 1.2s infinite linear; }
.bd-skel.tall { height: 240px; }
@keyframes bd-sh { to { background-position: -200% 0; } }

.bd-ticker { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.bd-tick { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); color: var(--color-text-primary); text-decoration: none; min-width: 0; }
.bd-tick:hover { border-color: var(--color-primary); }
.bd-tick.is-bad .bd-tick-v { color: var(--bd-down); }
.bd-tick-l { font-size: var(--font-size-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-tick-v { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-tick-h { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.bd-chg { font-size: var(--font-size-sm); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text-muted); white-space: nowrap; }
.bd-chg.up { color: var(--bd-up); }
.bd-chg.down { color: var(--bd-down); }
.bd-chg.big { font-size: 1rem; padding: 2px 8px; border-radius: 6px; background: var(--color-surface-2); }
.bd-chg.big.up { background: color-mix(in srgb, var(--bd-up) 12%, transparent); }
.bd-chg.big.down { background: color-mix(in srgb, var(--bd-down) 12%, transparent); }

.bd-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); grid-template-areas: "chart watch" "movers watch" "port alerts"; gap: 14px; align-items: start; }
.bd-chart { grid-area: chart; } .bd-watch { grid-area: watch; } .bd-movers { grid-area: movers; } .bd-alerts { grid-area: alerts; } .bd-port { grid-area: port; }
.bd-card { border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); padding: 14px 16px; min-width: 0; }
.bd-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.bd-card-head h2 { font-size: var(--font-size-md); font-weight: 700; margin: 0; }
.bd-sub { font-size: var(--font-size-sm); font-weight: 700; margin: 0 0 6px; }
.bd-sub.up { color: var(--bd-up); } .bd-sub.down { color: var(--bd-down); }

.bd-chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.bd-instr { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .03em; }
.bd-quote { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; }
.bd-quote-v { font-size: 1.75rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.bd-ranges, .bd-seg, .bd-periods { display: inline-flex; background: var(--color-surface-2); border-radius: 8px; padding: 2px; }
.bd-ranges button, .bd-seg button, .bd-periods button { border: 0; background: none; font: inherit; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-secondary); padding: 5px 10px; border-radius: 6px; cursor: pointer; }
.bd-ranges button.is-on, .bd-seg button.is-on, .bd-periods button.is-on { background: var(--color-surface); color: var(--color-text-primary); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.bd-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--font-size-xs); color: var(--color-text-muted); margin: 8px 0 4px; }
.bd-lg-now, .bd-lg-ly { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--color-primary); margin-left: 4px; }
.bd-lg-ly { border-top: 2px dashed var(--color-text-muted); margin-left: 10px; }
.bd-link { border: 0; background: none; color: var(--color-text-link); font: inherit; cursor: pointer; margin-left: 10px; padding: 0; }
.bd-plot { position: relative; width: 100%; }
.bd-svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.bd-grid-l { stroke: var(--color-border-subtle); }
.bd-axis { fill: var(--color-text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.bd-now { fill: none; stroke-width: 2; stroke: var(--bd-up); }
.bd-svg.down .bd-now { stroke: var(--bd-down); }
.bd-fill-a { stop-color: var(--bd-up); stop-opacity: .22; } .bd-fill-b { stop-color: var(--bd-up); stop-opacity: 0; }
.bd-svg.down .bd-fill-a, .bd-svg.down .bd-fill-b { stop-color: var(--bd-down); }
.bd-ly { fill: none; stroke: var(--color-text-muted); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .8; }
.bd-hit { fill: transparent; cursor: crosshair; }
.bd-cross-l { stroke: var(--color-text-muted); stroke-dasharray: 2 3; }
.bd-dot { fill: var(--bd-up); stroke: var(--color-surface); stroke-width: 2; } .bd-svg.down .bd-dot { fill: var(--bd-down); }
.bd-dot-ly { fill: var(--color-text-muted); stroke: var(--color-surface); stroke-width: 2; }
.bd-tip { position: absolute; top: 0; pointer-events: none; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 4px 14px rgba(0,0,0,.12); font-size: var(--font-size-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }

.bd-watch-cols { display: grid; grid-template-columns: 1fr 72px 120px; gap: 8px; font-size: var(--font-size-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .03em; padding: 0 8px 6px; border-bottom: 1px solid var(--color-border-subtle); }
.bd-watch-cols button { border: 0; background: none; font: inherit; color: var(--color-text-link); text-align: right; cursor: pointer; padding: 0; }
.bd-watch-list { max-height: 640px; overflow-y: auto; }
.bd-row { display: grid; grid-template-columns: 1fr 72px 120px; gap: 8px; align-items: center; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--color-border-subtle); background: none; font: inherit; color: var(--color-text-primary); padding: 9px 8px; cursor: pointer; border-radius: 6px; }
.bd-row:hover { background: var(--color-surface-2); }
.bd-row.is-on { background: var(--color-primary-xlight); box-shadow: inset 3px 0 0 var(--color-primary); }
.bd-row-n { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; flex-direction: column; }
.bd-row-n small { font-weight: 400; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.bd-row-v { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.bd-spark { width: 72px; height: 22px; } .bd-spark polyline { fill: none; stroke-width: 1.5; stroke: var(--bd-up); } .bd-spark.down polyline { stroke: var(--bd-down); }

.bd-movers-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.bd-mover { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--color-border-subtle); background: none; font: inherit; color: var(--color-text-primary); padding: 7px 4px; cursor: pointer; }
.bd-mover:hover { background: var(--color-surface-2); }
.bd-mover > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-size-sm); }
.bd-foot { grid-column: 1 / -1; margin: 6px 0 0; font-size: var(--font-size-xs); }

.bd-alert { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; margin-bottom: 8px; text-decoration: none; color: var(--color-text-primary); border: 1px solid var(--color-border); border-left-width: 4px; }
.bd-alert span { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bd-alert small { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.bd-alert svg { flex: none; width: 18px; height: 18px; }
.bd-alert.bad { border-left-color: var(--color-danger); background: var(--color-danger-xlight); } .bd-alert.bad svg { color: var(--color-danger); }
.bd-alert.warn { border-left-color: var(--color-warning); background: var(--color-warning-xlight); } .bd-alert.warn svg { color: var(--color-warning); }
.bd-alert.info { border-left-color: var(--color-info); } .bd-alert.info svg { color: var(--color-info); }
.bd-alert .bd-go { flex: none; font-size: 1.3rem; color: var(--color-text-muted); }

.bd-port-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; }
.bd-pl-row { display: grid; grid-template-columns: 130px 1fr auto 52px; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--color-border-subtle); text-decoration: none; color: var(--color-text-primary); font-size: var(--font-size-sm); }
.bd-pl-row b { font-variant-numeric: tabular-nums; text-align: right; }
.bd-pl-row em { font-style: normal; color: var(--color-text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.bd-pl-bar { height: 8px; border-radius: 4px; background: var(--color-surface-2); overflow: hidden; }
.bd-bar-f { display: block; height: 100%; background: var(--color-primary); border-radius: 4px; }
.bd-pl-row.neg .bd-bar-f { background: var(--color-text-muted); }
.bd-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bd-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--color-surface-2); text-decoration: none; color: var(--color-text-primary); min-width: 0; }
.bd-stat-v { font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.bd-stat small { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.bd-stat.is-bad small { color: var(--color-danger); font-weight: 600; }

@media (max-width: 1100px) {
  .bd-ticker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Portfolio sits above the watchlist on a narrow screen, and "Needs a
     decision" moves to the end (Nur, 10 Okt). On the wide layout the alerts
     card shares a row with the portfolio and reads as a sidebar note; stacked
     into one column it landed between the chart and the watchlist, pushing the
     figures a BOD actually opens this for — P&L, cash, AR, AP, stock — to the
     very bottom of a long scroll. */
  .bd-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "chart" "port" "watch" "movers" "alerts"; }
  .bd-watch-list { max-height: 420px; }
}
@media (max-width: 640px) {
  .bd-ticker { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(140px, 46%); overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
  .bd-quote-v { font-size: 1.4rem; }
  .bd-movers-cols, .bd-port-grid { grid-template-columns: minmax(0, 1fr); }
  .bd-pl-row { grid-template-columns: 96px 1fr auto 44px; gap: 6px; }
  .bd-card { padding: 12px; }
  .bd-pt select { min-width: 0; flex: 1; }
  .bd-pt { width: 100%; }
  .bd-periods { width: 100%; }
  .bd-periods button { flex: 1 0 auto; padding: 6px 8px; }
  .bd-custom label:not(.bd-chk) { flex: 1 1 130px; }
}

/* ─── Inbox: lampiran gambar ala WhatsApp ─────────────────────────────────── */
/* Draft strip: what you are about to send, with a way to edit or drop it
   BEFORE it leaves — the old flow sent straight from a hidden file input, so a
   wrong screenshot could only be fixed by sending and deleting. */
.ib-draft { padding: 8px 10px 0; }
.ib-draft-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg); }
.ib-draft-item img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; flex: none; }
.ib-draft-ico { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--color-surface); flex: none; }
.ib-draft-meta { flex: 1; min-width: 0; }
.ib-draft-meta strong { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-draft-meta small { color: var(--color-text-muted); font-size: 11.5px; }

/* Something is being dragged over the reply box. */
.ib-composer.is-drop { outline: 2px dashed var(--color-primary); outline-offset: -4px; }

/* Editor: crop and scribble before sending. */
.ib-ed-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.ib-ed-tools .is-on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.ib-ed-tools input[type="color"] { width: 36px; height: 30px; padding: 0; border: 1px solid var(--color-border); border-radius: 6px; background: none; }
.ib-ed-stage { background: var(--color-bg-subtle, #0f172a0d); border-radius: 10px; padding: 8px; display: flex; justify-content: center; }
/* The canvas must never force the modal wider than the screen. */
.ib-ed-stage canvas { max-width: 100%; max-height: 54vh; touch-action: none; cursor: crosshair; border-radius: 6px; }
.ib-ed-hint { font-size: 12px; color: var(--color-text-muted); margin: 10px 0 0; line-height: 1.5; }

/* The camera button is pointless on a desktop without one, but harmless — it
   simply opens the file picker there. Kept visible so the layout does not
   shift between devices. */
.ib-cam { display: inline-flex; }

/* ═══════════════════════════════════════════════════════════════
   CATATAN — DAFTAR BERTINGKAT, TAMPILAN RAPI, BERBAGI
   ═══════════════════════════════════════════════════════════════
   Nur, 2026-10-13: numbering, bullet, sub-list tanpa batas tingkat,
   checkbox, dan berbagi catatan tertentu. Isinya tetap teks biasa —
   lihat komentar di pages/notes.html untuk alasannya. */

.nt-tools {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px clamp(16px, 4vw, 48px); border-bottom: 1px solid var(--color-border-light);
}
.nt-tools button {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 6px 10px; border-radius: 8px; min-height: 34px;
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary);
}
.nt-tools button:hover { border-color: var(--color-primary); color: var(--color-primary); }
.nt-tools-sep { width: 1px; height: 20px; background: var(--color-border); margin: 0 2px; }

/* Tampilan rapi: daftar bertingkat yang bisa dibaca tanpa menghitung spasi. */
.nt-tidy {
  flex: 1; padding: 6px 0 24px;
  font-size: 15px; line-height: 1.65; color: var(--color-text-primary); min-width: 0;
}
.nt-tidy p { margin: 0 0 10px; overflow-wrap: anywhere; }
.nt-tidy ul, .nt-tidy ol { margin: 0 0 10px; padding-left: 22px; }
/* Tingkat dalam tidak dibatasi, jadi jaraknya dibuat konsisten per tingkat
   alih-alih diatur satu per satu. */
.nt-tidy ul ul, .nt-tidy ul ol, .nt-tidy ol ul, .nt-tidy ol ol { margin: 4px 0 4px; }
.nt-tidy li { margin: 2px 0; overflow-wrap: anywhere; }
.nt-tidy li.nt-has-box { list-style: none; display: flex; gap: 8px; align-items: flex-start; margin-left: -18px; }
.nt-tidy li.nt-has-box input { margin-top: 4px; width: 17px; height: 17px; flex: none; }
.nt-tidy .nt-done { color: var(--color-text-muted); text-decoration: line-through; }
.nt-tidy-empty { color: var(--color-text-muted); }

/* Penanda di daftar catatan: dari siapa, atau dibagikan ke berapa orang. */
.nt-badge {
  display: inline-flex; align-items: center; gap: 5px; margin: 2px 0 1px;
  font-size: 11px; font-weight: 600; color: var(--color-primary);
}
.nt-badge svg { width: 12px; height: 12px; }

/* Dialog berbagi. */
.nt-share-list { display: flex; flex-direction: column; gap: 8px; }
.nt-share-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 10px;
}
.nt-share-row > span:first-child { flex: 1; min-width: 140px; display: flex; flex-direction: column; }
.nt-share-row em { font-style: normal; font-size: 11.5px; color: var(--color-text-muted); }
.nt-share-edit { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--color-text-secondary); }
.nt-share-found { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.nt-share-add {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; font: inherit; cursor: pointer; min-height: 44px;
  padding: 9px 12px; border-radius: 10px; border: 1px solid var(--color-border);
  background: var(--color-surface); color: inherit;
}
.nt-share-add:hover { border-color: var(--color-primary); }
.nt-share-add span:first-child { display: flex; flex-direction: column; min-width: 0; }
.nt-share-add em { font-style: normal; font-size: 11.5px; color: var(--color-text-muted); overflow-wrap: anywhere; }
.nt-share-plus { font-size: 12px; font-weight: 700; color: var(--color-primary); flex: none; }

/* Catatan: ringkasan "n dari m selesai" + sembunyikan yang sudah dikerjakan.
   Nur membandingkannya dengan Keep (2026-10-14): yang tercentang harus
   terpisah supaya yang tersisa terlihat. Dipisahkan secara TAMPILAN — isi
   catatannya tidak disusun ulang, karena catatan di sini mencampur daftar
   dengan paragraf biasa. */
.nt-done-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 11px; margin: 0 0 12px; border-radius: 9px;
  background: var(--color-bg); border: 1px solid var(--color-border-light);
  font-size: 12.5px; color: var(--color-text-secondary);
}
.nt-done-bar label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.nt-done-bar input { width: 15px; height: 15px; }
.nt-tidy.nt-hide-done li.nt-has-box:has(input:checked) { display: none; }

/* ═══════════════════════════════════════════════════════════════
   TATA LETAK DI HP — DIUKUR, BUKAN DIKIRA
   ═══════════════════════════════════════════════════════════════
   Nur melaporkan tampilan HP masih meluber dan tidak rapi, terutama
   Inbox (2026-10-14). Uji responsif yang ada hijau, dan itu justru
   masalahnya: ia hanya memeriksa apakah DOKUMEN menggulir ke samping.
   Elemen yang meluber di dalam panel tidak membuat dokumen menggulir —
   ia hanya TERPOTONG, dan bagi pemakai itu sama buruknya.

   `tests/ui-audit.mjs` mengukur yang sebenarnya dan menemukan 150
   persoalan di 31 halaman × 7 ukuran HP. Blok ini memperbaiki POLANYA;
   urutannya dari yang paling luas dampaknya. */

/* ── 1. Judul & subtitle bilah atas: berhenti memotong kalimat ──────
   Sebab terluas, muncul di hampir SETIAP halaman: `white-space: nowrap`
   + `text-overflow: ellipsis` memotong "WhatsApp & customer conversa…",
   "Catatan pribadi — hanya kamu yang bisa m…", dan di 320px bahkan judul
   halamannya sendiri. Di layar lebar pemotongan itu masuk akal; di HP ia
   membuang kalimat yang justru menjelaskan halamannya.

   Di bawah 1024px bilahnya boleh tumbuh: judul sampai dua baris,
   keterangan sampai dua baris. Tingginya jadi minimum, bukan tetap. */
@media (max-width: 1024px) {
  .nh-header {
    height: auto;
    min-height: var(--header-height);
    padding-top: 8px;
    padding-bottom: 8px;
    align-items: flex-start;
  }
  .nh-header-title h1,
  .nh-header-title .subtitle {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .nh-header-title h1 { line-height: 1.25; }
  .nh-header-title .subtitle { line-height: 1.35; }
  /* Tombol di kanan tetap sejajar baris pertama, bukan ikut turun. */
  .nh-header-actions { align-self: center; }
}

/* ── 2. Kata tanpa spasi: URL, nomor resi, id panjang ───────────────
   Pesan pelanggan memuat tautan `https://wa.me/…?text=…` sepanjang 120
   karakter. Peramban tidak boleh mematahkannya tanpa izin, jadi ia
   mendorong kartunya 387px melewati layar — diukur di Overview.
   Diberikan pada wadah yang memang menampilkan tulisan orang lain.
   Yang sudah memotong dengan ELIPSIS sengaja tidak disentuh: pratinjau
   satu baris memang dirancang begitu, dan membuatnya membungkus justru
   merusak daftar yang rapi. */
.hv-list, .hv-list li, .hv-card,
.ib-item, .ib-preview, .ib-bubble, .ib-msg, .ib-head,
.card p, .card li {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

/* ── 3. Baris tab: semua tab terlihat utuh, tidak ada yang terpenggal ─
   `.ib-scope` memakai kolom grid minimal 84px sementara "Belum ditangani
   3" butuh ±110px, lalu sisanya dipotong ellipsis. `.nh-tabs` punya
   penyakit yang sama — "Pinned 0" sampai terdorong 108px keluar layar.

   Nur sudah pernah meminta ini: "pastikan tab selalu terlihat, agar
   memudahkan navigasi user". Jadi tabnya dibungkus ke baris berikutnya
   dengan lebar mengikuti isinya, bukan dipaksa muat lalu dipenggal. */
.ib-scope {
  display: flex;
  flex-wrap: wrap;
}
.ib-scope-b {
  flex: 1 1 auto;
  min-width: max-content;
  overflow: visible;
  text-overflow: clip;
  min-height: 38px;
  padding: 8px 10px;
}
.nh-tabs {
  flex-wrap: wrap;
  overflow: visible;
}
.nh-tab {
  min-height: 38px;
  white-space: nowrap;
}

/* ── 4. Sasaran sentuh: jari, bukan kursor ─────────────────────────
   Diukur 70 kendali di bawah 32px — pemilih 31px, tombol ikon 28px.
   Panduan Apple dan Google sama-sama menyebut ±44px; 38px dipakai di
   sini sebagai perbaikan yang tidak mengubah rancangan layar, dan
   hanya di layar sentuh supaya tampilan desktop tidak ikut melar. */
@media (max-width: 1024px) {
  .form-select, .form-input, select.form-select, input.form-input {
    min-height: 38px;
  }
  .nh-icon-btn, .nh-sidebar-toggle, .nt-icon-btn, .btn-sm {
    min-height: 36px;
    min-width: 36px;
  }
  /* Tautan aksi di dalam kartu ("Open") tingginya hanya mengikuti
     tulisannya — 15–18px, terlalu kecil untuk ibu jari.
     
     Versi pertama aturan ini menyasar `.hv-card a:not(.btn)` dan memaksa
     `display: inline-flex` pada SEMUA tautan di dalam kartu. Akibatnya
     baris "Perlu perhatian" berhenti menyusut dan meluber 225px — lebih
     parah daripada sebelum diperbaiki. Jadi sekarang hanya tautan yang
     memang sudah inline yang disebut, dan `display` tidak dipaksakan ke
     tautan lain. */
  .hv-open {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
  }
}

/* ── 5. Catatan: dua panel tidak muat di layar HP ───────────────────
   `.nt-app` meluber 206px di SEMUA lebar HP: daftar catatan dan isinya
   berdiri berdampingan padahal layarnya hanya cukup untuk satu. Halaman
   ini sudah punya mode "is-reading" untuk berpindah; yang kurang hanya
   lebarnya dikunci ke layar. */
@media (max-width: 768px) {
  .nt-app { max-width: 100%; overflow-x: hidden; }
  .nt-side, .nt-page { min-width: 0; max-width: 100%; }
}

/* ── 6. Sisa temuan audit putaran kedua ─────────────────────────────
   Setelah lima perbaikan di atas, 150 temuan turun jadi 27 — Inbox
   bersih seluruhnya. Sisanya dikejar di sini, tetap sebagai pola. */

@media (max-width: 1024px) {
  /* Deret tombol penyaring di Tasks dan Work Order tingginya 28–30px.
     Itu cukup untuk kursor, tidak untuk ibu jari di tangan yang sedang
     memegang barang di lantai toko. */
  .tk-chip, .wo-tab, .perm-all, .btn-icon, .tk-group-toggle,
  .seg button, .segment button {
    min-height: 36px;
  }
  .tk-group-toggle, .btn-icon { min-width: 36px; }

  /* Kotak centang matriks izin hanya 18px. Diperbesar sekaligus diberi
     ruang tekan lewat labelnya, supaya meleset sedikit tetap mengenai. */
  .permission-check input[type="checkbox"] { width: 20px; height: 20px; }
  .permission-check { min-height: 36px; }
}

/* Kartu sambutan Launchpad meluber 29px di SEMUA lebar, termasuk iPad:
   padding `--space-8` di kiri dan kanan ditambah isi yang tidak boleh
   menyusut. Paddingnya mengecil di layar sempit, dan isinya diizinkan
   patah. */
@media (max-width: 1024px) {
  .launchpad-hero {
    padding: var(--space-5) var(--space-4);
    overflow-wrap: anywhere;
    /* Hiasan di dalamnya (lingkaran gradien) sengaja lebih besar dari
       kartunya; di layar lebar ia tidak terasa, di HP ia mendorong kartu
       keluar 29px. Dipangkas ke kotaknya sendiri. */
    overflow: hidden;
  }
}

/* "Perlu perhatian" di Overview: satu baris panjang ("1 customer chat
   waiting for a reply — oldest 5 jam") mendorong kartunya 147px keluar
   di 430px. Barisnya memang panjang; yang kurang hanya izin mematahkannya. */
.hv-attn li a { min-width: 0; }
.hv-attn li a > * { min-width: 0; overflow-wrap: anywhere; }

/* Sisa kecil di 320px — layar tersempit yang masih dipakai. */
@media (max-width: 360px) {
  .roles-layout, .sc-bar { flex-wrap: wrap; min-width: 0; }
  .progress-ring-wrap { max-width: 100%; overflow: hidden; }
}

/* Sisa deret tombol yang masih 26–28px: pengalih tampilan di Tasks
   ("Daftar"/"Timeline") dan Work Order ("Table"/"Kanban"), serta
   "Add task" per grup. Semuanya tombol yang ditekan berulang kali
   sambil berdiri, bukan sambil duduk di depan laptop. */
@media (max-width: 1024px) {
  /* `.tk-view` (tunggal) dipakai Tasks DAN Work Order; `.tk-views` yang
     saya tulis lebih dulu tidak pernah ada, jadi tombolnya tetap 28px. */
  .tk-view button, .tk-views button, .tk-group-add,
  .tk-toolbar button, .wo-toolbar button {
    min-height: 36px;
  }
  /* Tautan di dalam teks penjelas kartu Overview ("Connect it"). Tingginya
     mengikuti satu baris tulisan — 15px. Dibuat setinggi jari tanpa
     mengubah alirannya di dalam kalimat. */
  .hv-muted a, .hv-pad a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }
}

/* Judul catatan yang bisa ditulis sendiri (Nur, 2026-10-14). Terlihat
   seperti bagian dari halaman, bukan seperti kolom formulir — yang
   dibutuhkan hanya tempat mengetik, bukan kotak bergaris. */
.nt-title {
  display: block; width: 100%; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 19px; font-weight: 700; line-height: 1.3;
  color: var(--color-text-primary);
  padding: 2px clamp(16px, 4vw, 48px) 6px;
}
.nt-title::placeholder { color: var(--color-text-muted); font-weight: 600; }
.nt-title:read-only { color: var(--color-text-secondary); }
@media (max-width: 768px) { .nt-title { font-size: 17px; padding-left: 16px; padding-right: 16px; } }

/* ── 7. Empat luberan terakhir, masing-masing sebab sendiri ─────────
   Diperiksa satu per satu di peramban setelah dua kali menebak kelas
   yang ternyata tidak ada — menebak selektor itu membuang waktu dan
   sempat memperburuk keadaan. */

/* Launchpad: kartu sambutan adalah baris flex berisi teks + tombol
   "Access all", dan tombolnya `white-space: nowrap`. Di HP keduanya
   sama-sama meminta 326px pada kotak 358px. Ditumpuk, bukan dipaksa
   sebaris. */
@media (max-width: 1024px) {
  .launchpad-hero { flex-wrap: wrap; }
  .launchpad-hero > * { min-width: 0; }
}

/* Check-in: lingkaran kemajuan digambar SVG berlebar tetap 96px di dalam
   kotak 88px. Gambarnya diizinkan menyusut mengikuti kotaknya. */
.progress-ring-wrap svg { max-width: 100%; height: auto; }

/* Jadwal: bilah atas memuat pemilih tim (min-width 160px), pemilih bulan,
   dan sederet tombol — tiga-tiganya menuntut lebar penuh di 320px. */
@media (max-width: 480px) {
  .sc-bar { flex-wrap: wrap; }
  .sc-bar > * { min-width: 0; max-width: 100%; }
  .sc-month, .sc-actions { flex: 1 1 100%; }
}

/* Roles: dua kolom (daftar peran + matriks izin) di layar 320px.
   `1fr` saja tidak cukup — jalur grid punya minimum mengikuti isinya, jadi
   kolomnya tetap memaksa 302px di kotak 288px. `minmax(0, 1fr)` yang
   mengizinkannya menyusut. */
@media (max-width: 480px) {
  .roles-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Matriks izin: jalur grid `minmax(180px, 1fr)` menuntut 180px, dan di
   layar 320px (dikurangi padding kartu) ruangnya hanya 166px — jadi
   setiap baris izin meluber 14px. Ketahuan hanya setelah luberan
   induknya diperbaiki; sebelumnya ia tertutup oleh `.roles-layout`.
   Di layar sempit satu kolom saja, dan jalurnya boleh menyusut. */
@media (max-width: 480px) {
  .permission-checks { grid-template-columns: minmax(0, 1fr); }
  .perm-all { margin-left: 0; }
}

/* ─── Tasks: KPI strip and project cards (Nur, 2026-10-15) ───────────────── */
.tk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 var(--space-4); }
.tk-kpi { display: flex; flex-direction: column; gap: 2px; text-align: left; font: inherit; color: var(--color-text-primary); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 10px 14px; min-width: 0; }
button.tk-kpi:not([disabled]) { cursor: pointer; } button.tk-kpi:not([disabled]):hover { border-color: var(--color-primary); }
button.tk-kpi[disabled] { cursor: default; opacity: 1; }
.tk-kpi span { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); font-weight: 600; }
.tk-kpi b { font-size: 1.45rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tk-kpi small { font-size: 12px; color: var(--color-text-muted); }
.tk-kpi.is-bad b { color: var(--color-danger); } .tk-kpi.is-warn b { color: var(--color-warning); } .tk-kpi.is-good b { color: var(--color-success); }
.tk-kpi-main { grid-column: span 2; }
.tk-kpi-bar, .tk-proj-bar { height: 8px; border-radius: 999px; background: var(--color-surface-2); overflow: hidden; margin: 4px 0 2px; }
.tk-kpi-bar i, .tk-proj-bar i { display: block; height: 100%; background: var(--color-success); border-radius: 999px; }
.tk-proj { border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); margin-bottom: var(--space-4); overflow: hidden; }
.tk-proj > .tk-group { border-left: 0; border-right: 0; border-radius: 0; margin: 0; }
.tk-proj-head { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto 140px 44px; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; border: 0; background: var(--color-surface-2); font: inherit; color: var(--color-text-primary); cursor: pointer; text-align: left; }
.tk-proj-head svg { width: 18px; height: 18px; }
.tk-proj-name { font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-proj-meta { font-size: 13px; color: var(--color-text-muted); white-space: nowrap; }
.tk-proj-late { color: var(--color-danger); }
.tk-proj-bar { margin: 0; }
.tk-proj-pct { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.tk-proj-add { border-top: 1px solid var(--color-border-subtle); }
@media (max-width: 640px) {
  .tk-kpi-main { grid-column: span 2; }
  .tk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-proj-head { grid-template-columns: 20px minmax(0, 1fr) 44px; }
  .tk-proj-meta, .tk-proj-bar { display: none; }
}

/* ── ETP Data Check (2026-10-15) ─────────────────────────────────────── */
.ec-store { flex: 1 1 280px; }
.ec-store select { max-width: 100%; }
.ec-sev { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ec-sev.is-high { background: #FEE2E2; color: #991B1B; }
.ec-sev.is-mid { background: #FEF3C7; color: #92400E; }
.ec-why { margin: 0; padding: 0 16px 10px; font-size: 13px; color: var(--color-text-muted); }
.ec-kpis { margin-top: var(--space-3); }
.rd-table tr.ec-has-why td { border-bottom: 0; }
.rd-table tr.ec-why-row td { border-top: 0; padding-top: 0; padding-bottom: 12px; text-align: left; white-space: normal; }
.ec-why-row div { position: sticky; left: 16px; max-width: min(1060px, calc(100vw - 340px)); font-size: 12.5px; line-height: 1.5; color: var(--color-text-secondary); background: var(--color-surface-2); border-radius: 8px; padding: 8px 12px; }
.ec-why-row b { color: var(--color-text-primary); }
@media (max-width: 1024px) { .ec-why-row div { max-width: calc(100vw - 72px); } }
/* Report tables scroll sideways on phones; the generic "hide column 3" rule cut off Toko/PT there. */
@media (max-width: 640px) { .fc-table th:nth-child(3), .fc-table td:nth-child(3) { display: table-cell; } }

/* ── Freshness Data (2026-10-15) ─────────────────────────────────────── */
.df-grow { flex: 1 1 auto; }
.df-st { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.df-st.is-ok { background: #D1FAE5; color: #065F46; }
.df-st.is-warn { background: #FEF3C7; color: #92400E; }
.df-st.is-bad { background: #FEE2E2; color: #991B1B; }
.df-pct { font-weight: 700; }
.df-pct.is-ok { color: var(--color-success); }
.df-pct.is-warn { color: var(--color-warning); }
.df-pct.is-bad { color: var(--color-danger); }
.df-na { color: var(--color-text-muted); }
.df-spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 28px; vertical-align: middle; }
.df-spark i { display: block; width: 5px; background: var(--color-primary); opacity: .55; border-radius: 1px; }
.df-spark i.is-low { background: var(--color-danger); opacity: 1; }
.df-spark i.is-today { opacity: .25; }
.df-sub { display: block; font-size: 11.5px; color: var(--color-text-muted); font-weight: 400; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.df-hint { margin: 0; align-self: center; color: var(--color-text-muted); font-size: 13px; }

/* ── Rekonsiliasi Bank (2026-10-16) ──────────────────────────────────── */
.br-badge { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--color-danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; }
.br-up { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 16px; }
.br-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; border: 2px dashed var(--color-border); border-radius: 12px; cursor: pointer; text-align: center; color: var(--color-text-secondary); }
.br-drop svg { width: 26px; height: 26px; color: var(--color-primary); }
.br-drop span { font-size: 12.5px; color: var(--color-text-muted); }
.br-drop.is-over { border-color: var(--color-primary); background: var(--color-primary-light, #EFF6FF); }
.br-pw { max-width: 320px; }
.br-up .btn { align-self: flex-start; }
.br-store { min-width: 260px; max-width: 100%; }
.br-imp { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 16px; }
.br-imp .rr-field { max-width: 240px; }
.br-imp .btn { align-self: flex-start; }
.br-all { display: flex; align-items: center; gap: 8px; padding: 10px 16px 0; font-size: 13px; color: var(--color-text-secondary); cursor: pointer; }
.btn.is-disabled { opacity: .5; pointer-events: none; }
.br-jf { margin: 0; flex-wrap: wrap; }

/* ── WMS Corner (2026-10-21) ─────────────────────────────────────────── */
.wms-wh { min-width: 320px; flex: 1 1 320px; }
.wms-locs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 14px; }
.wms-loc { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: var(--color-bg-secondary, #F1F5F9); color: var(--color-text-secondary); }
.wms-loc b { font-weight: 600; color: var(--color-text-primary); margin-right: 4px; }
@media (max-width: 600px) { .wms-wh { min-width: 0; flex-basis: 100%; } }
.rr-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── HRMS (2026-10-22) ───────────────────────────────────────────────── */
.hr-scope { margin: 0; }
.hr-grow { flex: 1 1 220px; min-width: 0; }
.hr-click tbody tr { cursor: pointer; }
.hr-click tbody tr:hover td { background: var(--color-bg-secondary, #F8FAFC); }
.hr-turn { border-left: 3px solid var(--color-danger); }
.hr-formbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.hr-formbar > .rr-actions { margin-left: auto; }
.hr-stepper { display: flex; gap: 4px; flex-wrap: wrap; }
.hr-step { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--color-bg-secondary, #F1F5F9); color: var(--color-text-muted); }
.hr-step.is-past { color: var(--color-success, #059669); }
.hr-step.is-on { background: var(--color-primary); color: #fff; font-weight: 600; }
.hr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 20px; padding: 12px 16px; }
.hr-grid span, .hr-f span, .hr-dev label > span { display: block; font-size: 11.5px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 2px; }
.hr-hrbar { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; padding: 0 16px 12px; }
.hr-sigtable td, .hr-sigtable th { white-space: nowrap; }
.hr-sigtable tr.is-cur td { background: var(--color-primary-light, #EFF6FF); }
.hr-sig small { display: block; font-size: 11px; color: var(--color-text-muted); }
.hr-sig.is-done { color: var(--color-success, #059669); font-weight: 600; }
.hr-sig.is-done svg { width: 14px; height: 14px; vertical-align: -2px; }
.hr-sig.is-na { color: var(--color-text-muted); }
.hr-signbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 16px; }
.hr-kpis .form-input, .hr-kpis .form-select { min-width: 90px; font-size: 13px; padding: 6px 8px; }
.hr-kpis .hr-wide { min-width: 220px; }
.hr-kpis .hr-wide textarea { width: 100%; min-width: 220px; }
.hr-kpis .hr-num { width: 72px; min-width: 72px; text-align: right; }
.hr-kpis .hr-mid { width: 110px; }
.hr-kpis .hr-sub { margin-top: 4px; font-size: 12px; }
.hr-dev { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px 16px; padding: 12px 16px 16px; }
.hr-dev textarea { width: 100%; }
.hr-text { margin: 0; white-space: pre-wrap; }
.hr-fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; padding: 12px 16px 16px; }
.hr-f.hr-full, .hr-fgrid label:has(textarea) { grid-column: 1 / -1; }
.hr-f textarea { width: 100%; }
.hr-sup { width: 120px; font-size: 13px; padding: 4px 8px; }
@media (max-width: 600px) { .hr-formbar > .rr-actions { margin-left: 0; } .hr-dev { grid-template-columns: 1fr; } }
/* HRMS tables hold sentences, not figures: left-aligned, wrapping. */
.hr-kpis td, .hr-kpis th, .hr-sigtable td, .hr-sigtable th, .hr-comps td, .hr-comps th { text-align: left; }
.hr-kpis td.num, .hr-kpis th.num, .hr-comps td.num, .hr-comps th.num { text-align: right; }
.hr-kpis td, .hr-comps td { white-space: normal; vertical-align: top; }
.hr-comps td.hr-wide { min-width: 320px; }
.hr-nowrap { white-space: nowrap; }
.hr-kpis td:nth-child(6) { white-space: nowrap; }
.hr-qs { display: grid; gap: 12px; padding: 12px 16px; }
.hr-q { border: 1px solid var(--color-border); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; }
.hr-qhead { display: flex; gap: 8px; flex-wrap: wrap; }
.hr-qhead .form-input { flex: 1 1 320px; }
.hr-qhead .form-select { flex: 0 1 230px; }
.hr-opt { display: flex; gap: 8px; align-items: center; padding-left: 12px; }
.hr-opt .form-input:first-child { flex: 1 1 auto; }
.hr-opt .hr-num { width: 80px; flex: none; }
.hr-cands td { vertical-align: top; }
.hr-cands td .btn { margin: 2px 4px 0 0; }
.hr-cstat { min-width: 130px; font-size: 13px; }
.hr-ans { display: grid; gap: 4px; padding: 6px 0; font-size: 13px; }
.hr-ans span { color: var(--color-text-muted); margin-right: 6px; }
.hr-ans em { color: var(--color-text-muted); font-style: normal; margin-left: 4px; }
.hr-hist { margin-top: 6px; color: var(--color-text-secondary); }

/* ── Weekly Brand Performance (2026-10-21) ───────────────────────────────── */
:root {
  --wbp-c1: #2a78d6; /* sales / first series — same blue as --rk-now */
  --wbp-c2: #eb6834; /* last year / second series — same orange as --rk-before */
  --wbp-c3: #0f8f7e;
  --wbp-c4: #8b5cf6;
  --wbp-c5: #64748b;
  --wbp-c6: #c99a06;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --wbp-c1: #5b9cf0; --wbp-c2: #f2854f; --wbp-c3: #2bb8a4; --wbp-c4: #a78bfa; --wbp-c5: #94a3b8; --wbp-c6: #e0b42a; }
}
:root[data-theme="dark"] { --wbp-c1: #5b9cf0; --wbp-c2: #f2854f; --wbp-c3: #2bb8a4; --wbp-c4: #a78bfa; --wbp-c5: #94a3b8; --wbp-c6: #e0b42a; }

.wbp-tabs { flex-wrap: wrap; }
.wbp-pb { padding: var(--space-4); }
.wbp-pb > .rd-note:first-child { margin-top: 0; }
.wbp-pbox > :not(.rd-panel-head) { margin-left: var(--space-4); margin-right: var(--space-4); }
.wbp-pbox > :last-child { margin-bottom: var(--space-4); }
.wbp-pbox > textarea { width: calc(100% - 2 * var(--space-4)); margin-top: var(--space-4); }
.rd-panel-head h3 svg { width: 16px; height: 16px; vertical-align: -2px; }
.wbp-tabs .rr-chip { display: inline-flex; align-items: center; gap: 4px; }
.wbp-tabs .rr-chip svg { width: 14px; height: 14px; }
.wbp-brand { min-width: 180px; }
.wbp-kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.wbp-kpis .rd-kpi-sub { line-height: 1.55; }
.wbp-doors, .wbp-subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--space-4); }
.wbp-g { white-space: nowrap; font-size: 12px; color: var(--color-text-muted); }
.wbp-g.is-up, .wbp-up { color: var(--rk-up); font-weight: 600; }
.wbp-g.is-down, .wbp-down { color: var(--rk-down); font-weight: 600; }
.wbp-ach { display: inline-block; min-width: 54px; padding: 1px 6px; border-radius: 6px; font-weight: 600; font-size: 12px; text-align: right; }
.wbp-ach.is-good { background: color-mix(in oklab, var(--color-success) 14%, transparent); color: var(--color-success); }
.wbp-ach.is-warn { background: color-mix(in oklab, var(--color-warning) 18%, transparent); color: color-mix(in oklab, var(--color-warning) 70%, #000); }
.wbp-ach.is-bad  { background: color-mix(in oklab, var(--color-danger) 12%, transparent); color: var(--color-danger); }
.wbp-tag { display: inline-block; font-size: 10px; padding: 0 5px; border-radius: 4px; background: var(--color-surface-2, #eef2f7); color: var(--color-text-muted); vertical-align: 1px; }
.wbp-table td, .wbp-table th { white-space: nowrap; }
.wbp-table td:not(.num), .wbp-table th:not(.num) { text-align: left; }
.wbp-sbar { position: relative; display: inline-block; width: 140px; height: 10px; border-radius: 5px; background: var(--color-surface-3); vertical-align: middle; margin-right: 8px; }
.wbp-sbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--wbp-c1); }
.wbp-sbar b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--wbp-c2); }
.wbp-sbar-v { font-variant-numeric: tabular-nums; }
.wbp-table td.wbp-wrap { white-space: normal; min-width: 220px; max-width: 420px; }
.wbp-table .wbp-sep { border-left: 2px solid var(--color-border); }
.wbp-table tr.wbp-grand td { font-weight: 700; }
.wbp-table tr.wbp-row-bad td:first-child + td { box-shadow: inset 3px 0 0 var(--color-danger); }
.wbp-table input.form-input { min-width: 90px; padding: 4px 8px; height: 32px; text-align: right; }
.wbp-table td:not(.num) input.form-input { text-align: left; min-width: 140px; }
.wbp-targets input.form-input { min-width: 118px; }
.wbp-traffic { max-width: 110px; }
.wbp-addrow td { padding-top: 2px; padding-bottom: 6px; }
.wbp-muted, .wbp-foot { color: var(--color-text-muted); font-size: 12px; }
.wbp-empty { padding: var(--space-5); text-align: center; color: var(--color-text-muted); }
.wbp-pre { white-space: pre-wrap; margin: 0; line-height: 1.6; }
.wbp-note { width: 100%; resize: vertical; }
.wbp-danger { color: var(--color-danger); }

.wbp-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.wbp-chart .wbp-grid { stroke: var(--color-border); stroke-width: 1; }
.wbp-chart .wbp-grid.is-zero { stroke: var(--color-text-muted); }
.wbp-chart .wbp-axis { fill: var(--color-text-muted); font-size: 12px; }
.wbp-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: 12px; color: var(--color-text-secondary); }
.wbp-key i { display: inline-block; width: 12px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: 0; }
.wbp-key i.is-line { height: 3px; vertical-align: 3px; }

.wbp-hbars { display: grid; gap: 8px; }
.wbp-hbar { display: grid; grid-template-columns: minmax(90px, 32%) 1fr 58px; grid-template-rows: auto auto; column-gap: 10px; align-items: center; font-size: 13px; }
.wbp-hbar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbp-hbar-t { position: relative; height: 14px; background: var(--color-surface-2, #eef2f7); border-radius: 7px; }
.wbp-hbar-f { height: 100%; border-radius: 7px; background: var(--wbp-c1); }
.wbp-hbar-f.is-good { background: var(--color-success); }
.wbp-hbar-f.is-warn { background: var(--color-warning); }
.wbp-hbar-f.is-bad { background: var(--color-danger); }
.wbp-hbar-100, .wbp-hbar-pace { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--color-text); opacity: .55; }
.wbp-hbar-pace { background: var(--wbp-c4); opacity: .9; width: 2px; }
.wbp-hbar-v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.wbp-hbar-s { grid-column: 2 / 4; font-size: 11px; color: var(--color-text-muted); }

.wbp-mini { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-3); }
.wbp-mini-row { margin: 0 0 var(--space-4); }
.wbp-stat { display: grid; min-width: 120px; }
.wbp-stat b { font-size: 22px; font-variant-numeric: tabular-nums; }
.wbp-stat span { font-size: 12px; color: var(--color-text-muted); }
.wbp-stat.is-bad b { color: var(--color-danger); }
.wbp-stat.is-good b { color: var(--color-success); }

.wbp-split { display: grid; grid-template-columns: minmax(260px, 2fr) 3fr; gap: var(--space-4); align-items: start; }
@media (max-width: 1100px) { .wbp-split { grid-template-columns: 1fr; } }
.wbp-stbar { position: relative; width: 120px; height: 8px; border-radius: 4px; background: var(--color-surface-2, #eef2f7); }
.wbp-stbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.wbp-stbar i.is-good { background: var(--color-success); }
.wbp-stbar i.is-bad { background: var(--color-danger); }
.wbp-stbar b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--color-text); }

.wbp-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.wbp-form .wbp-full { grid-column: 1 / -1; }
.wbp-check { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.wbp-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 12px; }
.wbp-checks label { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.wbp-brands { max-height: 220px; overflow: auto; border: 1px solid var(--color-border); border-radius: 8px; padding: 8px; }
.wbp-search { max-width: 360px; margin-bottom: var(--space-3); }

.wbp-upload { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: var(--space-3); }
.wbp-upload .form-select { max-width: 240px; }
.wbp-upload .form-input { flex: 1 1 200px; }
.wbp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); }
.wbp-gallery figure { margin: 0; border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; background: var(--color-surface, #fff); }
.wbp-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.wbp-gallery figcaption { display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; padding: 8px; font-size: 12px; }
.wbp-gallery figcaption span { grid-column: 1; color: var(--color-text-muted); white-space: pre-wrap; }
.wbp-gallery figcaption button { grid-column: 2; grid-row: 1 / 3; }

.wbp-ai textarea { resize: vertical; }
.wbp-ideas { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--space-3) 0; }
.wbp-ideas .rr-chip { white-space: normal; text-align: left; }
.wbp-ai-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-3); }
.wbp-view { margin-top: var(--space-4); }
.wbp-saved { display: grid; gap: 8px; }
.wbp-saved-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.wbp-saved-row > div { flex: 1 1 260px; display: grid; gap: 2px; min-width: 0; }
.wbp-saved-row span { font-size: 13px; color: var(--color-text-secondary); }
.wbp-saved-row small { font-size: 11px; color: var(--color-text-muted); }

@media (max-width: 640px) {
  .wbp-hbar { grid-template-columns: minmax(80px, 38%) 1fr 52px; }
  .wbp-stat { min-width: 100px; }
}
.wbp-table td svg { width: 16px; height: 16px; vertical-align: -3px; }

/* ── HRMS: KPI dashboard & the workbook-identical form (2026-10-22) ─────── */
:root { --hr-xl-head: #1f4e79; --hr-xl-head-text: #fff; --hr-xl-sub: #dde7f3; --hr-xl-line: #b7c3d0; --hr-xl-obj: #f3f6fa; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hr-xl-head: #23476b; --hr-xl-sub: #22324a; --hr-xl-line: #3b4a5e; --hr-xl-obj: #1b2638; } }
:root[data-theme="dark"] { --hr-xl-head: #23476b; --hr-xl-sub: #22324a; --hr-xl-line: #3b4a5e; --hr-xl-obj: #1b2638; }

.hr-subtabs { margin: 0 0 var(--space-3); }
.hr-left td, .hr-left th { text-align: left; }
.hr-left td.num, .hr-left th.num { text-align: right; }
.hr-pad { padding: var(--space-4); }
.hr-empty { text-align: center; padding: var(--space-8, 40px) var(--space-5); }
.hr-empty > svg { width: 40px; height: 40px; color: var(--color-text-muted); }
.hr-empty h3 { margin: var(--space-3) 0 var(--space-2); }
.hr-empty p { max-width: 640px; margin: 0 auto var(--space-4); color: var(--color-text-secondary); line-height: 1.6; }
.hr-empty-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; align-items: center; }
.hr-dash-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: var(--space-4); }
.hr-bars { display: grid; gap: 8px; }
.hr-bar { display: grid; grid-template-columns: minmax(90px, 34%) 1fr 56px; column-gap: 10px; align-items: center; font-size: 13px; }
.hr-bar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-bar-t { height: 12px; background: var(--color-surface-3); border-radius: 6px; overflow: hidden; }
.hr-bar-t i { display: block; height: 100%; background: var(--rk-now); border-radius: 6px; }
.hr-bar-t i.is-good { background: var(--color-success); } .hr-bar-t i.is-warn { background: var(--color-warning); } .hr-bar-t i.is-bad { background: var(--color-danger); }
.hr-bar b { text-align: right; font-variant-numeric: tabular-nums; }
.hr-bar small { grid-column: 2 / 4; font-size: 11px; color: var(--color-text-muted); }
.hr-stack { display: flex; height: 28px; border-radius: 8px; overflow: hidden; background: var(--color-surface-3); }
.hr-stack i { display: flex; align-items: center; justify-content: center; color: #fff; font-style: normal; font-size: 12px; font-weight: 600; min-width: 22px; }
.hr-stack i.is-planning, .hr-legend i.is-planning { background: #94a3b8; }
.hr-stack i.is-midyear, .hr-legend i.is-midyear { background: #f59e0b; }
.hr-stack i.is-yearend, .hr-legend i.is-yearend { background: #2a78d6; }
.hr-stack i.is-done, .hr-legend i.is-done { background: #15803d; }
.hr-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: var(--color-text-secondary); }
.hr-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }

.hr-newform { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }
.hr-full { grid-column: 1 / -1; }
.hr-newemp { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); padding: var(--space-3); border: 1px dashed var(--color-border); border-radius: 10px; }
.hr-newemp[hidden] { display: none; }

.hr-stage { width: auto; max-width: 190px; height: 32px; padding-top: 0; padding-bottom: 0; font-size: 13px; }
.hr-formbar .rr-actions { flex-wrap: nowrap; align-items: center; }
@media (max-width: 760px) { .hr-formbar .rr-actions { flex-wrap: wrap; } }
.hr-sumbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; }
.hr-sumbar > div { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; min-width: 0; }
.hr-sumbar span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
.hr-sumbar b { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-sumbar small { font-size: 12px; color: var(--color-text-secondary); }
.hr-sumbar .is-ok b { color: var(--color-success); } .hr-sumbar .is-bad b { color: var(--color-danger); } .hr-sumbar .is-warn { border-color: var(--color-warning); }
.hr-sumbar .is-warn b { color: color-mix(in oklab, var(--color-warning) 75%, #000); }

/* Sheet tabs, as at the bottom of the Excel window. */
.hr-sheets { display: flex; gap: 2px; overflow-x: auto; border-bottom: 2px solid var(--hr-xl-head); scrollbar-width: thin; }
.hr-sheettab { flex: 0 0 auto; border: 1px solid var(--color-border); border-bottom: none; background: var(--color-surface-3); color: var(--color-text-secondary); padding: 8px 14px; border-radius: 8px 8px 0 0; font-size: 13px; cursor: pointer; }
.hr-sheettab.is-on { background: var(--hr-xl-head); color: var(--hr-xl-head-text); border-color: var(--hr-xl-head); font-weight: 600; }
.hr-paper { background: var(--color-surface); border: 1px solid var(--color-border); border-top: none; border-radius: 0 0 12px 12px; padding: var(--space-5); box-shadow: var(--shadow-xs); }
.hr-sheet-co { font-weight: 700; font-size: 13px; color: var(--color-text-secondary); }
.hr-sheet-title { text-align: center; font-size: 20px; font-weight: 800; letter-spacing: .06em; }
.hr-sheet-sub { text-align: center; font-weight: 600; color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.hr-sheet-h { font-weight: 800; letter-spacing: .03em; margin: var(--space-3) 0 var(--space-3); font-size: 15px; }
.hr-sheet-foot { font-size: 12px; color: var(--color-text-muted); margin: var(--space-3) 0 0; line-height: 1.6; }

/* The grid: Excel-like cells, header bands, merged KRA column. */
.hr-xl { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: var(--space-4); }
.hr-xl th, .hr-xl td { border: 1px solid var(--hr-xl-line); padding: 6px 8px; vertical-align: top; text-align: left; }
.hr-xl thead th { background: var(--hr-xl-head); color: var(--hr-xl-head-text); text-align: center; vertical-align: middle; font-weight: 700; font-size: 12px; }
.hr-xl thead tr + tr th { background: var(--hr-xl-sub); color: var(--color-text); }
.hr-xl td.num, .hr-xl th.num { text-align: right; white-space: nowrap; }
.hr-xl .w-kra { width: 16%; } .hr-xl .w-ap { width: 24%; } .hr-xl .w-n { width: 86px; }
.hr-xl .hr-kra { background: var(--hr-xl-obj); font-weight: 700; min-width: 170px; }
.hr-xl .hr-kra textarea { resize: none; }
.hr-kra-w { margin-top: 6px; font-size: 18px; color: var(--hr-xl-head); }
.hr-xl tr.hr-obj td { background: var(--hr-xl-obj); }
.hr-xl td.hr-kpi { min-width: 260px; }
.hr-xl tr.hr-total td { background: var(--hr-xl-sub); font-weight: 600; }
.hr-xl .hr-big { font-size: 18px; font-weight: 800; text-align: center; }
.hr-xl tr.is-cur > th, .hr-xl tr.is-cur > td { box-shadow: inset 0 0 0 9999px color-mix(in oklab, var(--rk-now) 7%, transparent); }
.hr-xl .hr-emptyrow { text-align: center; color: var(--color-text-muted); padding: var(--space-5); }
.hr-xl .hr-addrow td { border-style: dashed; background: transparent; }
.hr-pd th { background: var(--hr-xl-sub); width: 14%; font-weight: 600; white-space: nowrap; }
.hr-pd td { width: 19%; }
.hr-appr tbody th { background: var(--hr-xl-obj); width: 22%; vertical-align: middle; }
.hr-appr tbody th small { display: block; font-weight: 500; color: var(--rk-now); margin-top: 4px; }
.hr-sigbox { height: 64px; text-align: center !important; vertical-align: middle !important; }
.hr-sigbox svg { width: 16px; height: 16px; color: var(--color-success); vertical-align: -3px; margin-right: 4px; }
.hr-sigbox b { color: var(--color-success); } .hr-sigbox small { display: block; color: var(--color-text-muted); }
.hr-sigbox.is-na { color: var(--color-text-muted); font-size: 12px; }
.hr-appr .hr-lbl { font-size: 12px; color: var(--color-text-secondary); }
.hr-appr .hr-notes span { display: block; font-size: 12px; color: var(--color-text-secondary); margin-bottom: 4px; }
.hr-scorebox { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(300px, 1fr); gap: var(--space-4); align-items: start; }
.hr-legend-t td { text-align: center; }
.hr-comp .hr-val { background: var(--hr-xl-obj); white-space: nowrap; vertical-align: middle; }
.hr-dev tbody th { background: var(--hr-xl-obj); vertical-align: middle; white-space: nowrap; }
.hr-dev td { width: 28%; }
.hr-guide td:first-child { width: 28%; }
.hr-guide th { background: var(--hr-xl-head); color: var(--hr-xl-head-text); }
.hr-pre { white-space: pre-wrap; line-height: 1.6; min-height: 1.6em; }

/* In-cell editing: borderless like a spreadsheet cell, outlined on focus. */
.hr-x { width: 100%; border: 1px solid transparent; background: color-mix(in oklab, var(--rk-now) 4%, transparent); border-radius: 4px; padding: 4px 6px; font: inherit; color: inherit; resize: vertical; min-width: 0; }
.hr-x:hover { border-color: var(--hr-xl-line); }
.hr-x:focus { outline: none; border-color: var(--rk-now); background: var(--color-surface); box-shadow: 0 0 0 2px color-mix(in oklab, var(--rk-now) 20%, transparent); }
.hr-x.hr-b { font-weight: 700; }
.hr-x.hr-n { text-align: right; min-width: 64px; }
select.hr-x { padding: 3px 4px; }
.hr-dir { margin-top: 4px; font-size: 11px; width: auto; max-width: 100%; }
.hr-ib { border: none; background: none; color: var(--color-text-muted); cursor: pointer; padding: 4px; border-radius: 4px; }
.hr-ib:hover { color: var(--color-danger); background: var(--color-surface-3); }
.hr-ib svg { width: 15px; height: 15px; }
.hr-addp { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.hr-addp .form-select { max-width: 280px; }

@media (max-width: 760px) {
  .hr-paper { padding: var(--space-3); }
  .hr-scorebox { grid-template-columns: 1fr; }
  .hr-pd, .hr-pd tbody, .hr-pd tr { display: block; }
  .hr-pd tr { display: grid; grid-template-columns: 40% 60%; }
  .hr-pd th, .hr-pd td { width: auto; }
  .hr-appr th, .hr-appr td { padding: 4px; font-size: 12px; }
  .hr-dev tbody, .hr-dev tr { display: block; } .hr-dev td, .hr-dev tbody th { display: block; width: auto; }
  .hr-dev thead { display: none; }
}

/* WBP — target lines on every achievement (2026-10-22) and the Vertical view. */
.wbp-meter { margin: 8px 0 4px; }
.wbp-meter.is-none span { font-size: 11px; color: var(--color-text-muted); }
.wbp-meter-t { position: relative; height: 10px; border-radius: 5px; background: var(--color-surface-3); }
.wbp-meter-t i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--wbp-c1); }
.wbp-meter-t i.is-good { background: var(--color-success); } .wbp-meter-t i.is-warn { background: var(--color-warning); } .wbp-meter-t i.is-bad { background: var(--color-danger); }
.wbp-meter-t b { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--color-text); border-radius: 1px; }
.wbp-meter-t u { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--wbp-c4); }
.wbp-meter-l { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; font-size: 11px; color: var(--color-text-secondary); }
.wbp-meter-l span:last-child { font-weight: 600; white-space: nowrap; }
.wbp-kpi-pct { font-size: 14px; font-weight: 600; color: var(--color-text-secondary); margin-left: 4px; }
.wbp-achcell { display: inline-flex; align-items: center; gap: 6px; }
.wbp-mini-m { position: relative; display: inline-block; width: 54px; height: 6px; border-radius: 3px; background: var(--color-surface-3); }
.wbp-mini-m i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--wbp-c1); }
.wbp-mini-m i.is-good { background: var(--color-success); } .wbp-mini-m i.is-warn { background: var(--color-warning); } .wbp-mini-m i.is-bad { background: var(--color-danger); }
.wbp-mini-m b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--color-text); }
.wbp-hbar-axis { margin-bottom: -2px; }
.wbp-hbar-t.is-axis { background: none; height: 14px; }
.wbp-hbar-t.is-axis span { position: absolute; transform: translateX(-50%); font-size: 10px; color: var(--color-text-secondary); white-space: nowrap; font-weight: 600; }
.wbp-hbar-t.is-axis span.is-pace { color: var(--wbp-c4); transform: translateX(-100%); padding-right: 4px; }
.wbp-hbar-100 { opacity: .8 !important; width: 2px; }
.wbp-center { display: flex; justify-content: center; margin-top: var(--space-3); }
.wbp-vtable th.wbp-wk { text-align: center; border-left: 2px solid var(--color-border); }
.wbp-vtable thead tr + tr th:nth-child(4n+1) { border-left: 2px solid var(--color-border); }
.wbp-det { border-top: 1px solid var(--color-border); padding: 4px 0; }
.wbp-det summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 8px 0; }
.wbp-det summary span { font-size: 12px; color: var(--color-text-muted); }
.wbp-vin { min-width: 200px; height: 32px; }

/* Top & Bottom SKU — the team's slide, drawn: beige header band, grid lines, photo row + info row. */
:root { --sku-head: #ddd6c1; --sku-line: #9ca3af; }
.sku-grid { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 760px; background: var(--color-surface); }
.sku-grid th, .sku-grid td { border: 1px solid var(--sku-line); padding: 8px 10px; vertical-align: middle; }
.sku-grid thead th { background: var(--sku-head); color: #111827; font-size: 20px; font-weight: 800; text-align: center; padding: 14px 8px; }
.sku-grid thead th:first-child { text-align: left; width: 15%; }
.sku-grid tbody th { font-size: 18px; font-weight: 500; text-align: right; white-space: nowrap; }
.sku-row-img td { height: 120px; text-align: center; }
.sku-img { display: flex; align-items: center; justify-content: center; height: 104px; }
.sku-img img { max-width: 100%; max-height: 104px; object-fit: contain; }
.sku-noimg { color: #dc2626; font-size: 20px; font-weight: 800; letter-spacing: .02em; }
.sku-row-info td { vertical-align: top; }
.sku-info { font-size: 13px; line-height: 1.5; }
.sku-info span { color: var(--color-text-secondary); }
.sku-info small { display: block; color: var(--color-text-muted); font-size: 11px; margin-top: 4px; }
.sku-meter { position: relative; height: 6px; border-radius: 3px; background: var(--color-surface-3); margin-top: 4px; }
.sku-meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; }
.sku-meter i.is-good { background: var(--color-success); } .sku-meter i.is-bad { background: var(--color-danger); }
.sku-meter b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--color-text); }
.sku-note { padding: 0 var(--space-4) var(--space-4); }
.sku-thumb { width: 52px; height: 40px; object-fit: contain; }
.wbp-center { gap: var(--space-3); }

@media print {
  body.wbp-printing * { visibility: hidden; }
  body.wbp-printing #sku-print, body.wbp-printing #sku-print * { visibility: visible; }
  body.wbp-printing #sku-print { position: absolute; left: 0; top: 0; width: 100%; border: none; box-shadow: none; }
  body.wbp-printing #sku-print .ri-scroll { overflow: visible; }
  body.wbp-printing .sku-grid { min-width: 0; }
  @page { size: A4 landscape; margin: 10mm; }
}

/* ═══════════════════════════════════════════════════════════════
   SKALA UNTUK HP — BUKAN SEKADAR "TIDAK MELUBER"
   ═══════════════════════════════════════════════════════════════
   Nur, 2026-10-21: *"di laptop sudah sangat bagus"*, tapi di HP masih
   kurang. Audit tata letak melaporkan nol luberan — dan memang benar:
   yang salah bukan cacat, melainkan PROPORSI. Rancangannya laptop
   dulu, lalu dipakai apa adanya di layar kecil.

   Dilihat langsung di 390px (bukan diukur): judul "Good evening, Nur"
   setinggi 34px, tombol Refresh berdiri sendiri satu baris, padding
   kartu selebar laptop — hanya sekitar empat hal muat dalam satu layar
   penuh. Di laptop jarak selega itu terasa tenang; di HP ia berarti
   menggulir terus-menerus untuk informasi yang sedikit.

   Yang diubah hanya SKALA di layar sentuh. Tidak ada yang bergeser di
   laptop. */

@media (max-width: 768px) {
  /* Tipografi diturunkan satu tingkat. Judul halaman tetap paling
     menonjol, tapi tidak lagi memakan seperlima layar. */
  .nh-header-title h1 { font-size: 19px; }
  .nh-content h1, .hv-greeting, .page-title { font-size: 23px; line-height: 1.2; }
  .nh-content h2 { font-size: 17px; }
  .nh-content h3 { font-size: 15px; }

  /* Keterangan di bilah atas: SATU baris, dan hanya kalau muat.
     Dua baris plus elipsis adalah gabungan terburuk — memakan tinggi
     DAN tetap memotong kalimat. Judulnya sendiri sudah menyebutkan
     halaman apa ini. */
  .nh-header-title .subtitle {
    -webkit-line-clamp: 1;
    font-size: 11.5px;
  }
  .nh-header { padding-top: 6px; padding-bottom: 6px; }

  /* Kartu: jarak dirapatkan supaya lebih banyak yang terbaca sekali
     pandang, tanpa membuatnya sesak. */
  .card, .hv-card, .nh-card { padding: 14px; }
  .hv-grid, .nh-grid { gap: 10px; }
  .nh-content { padding-left: 14px; padding-right: 14px; }

  /* Ubin statistik: nilainya tidak selalu angka. "Nonaktif" dirender
     setinggi angka besar dan menyisakan ruang kosong selebar kartu —
     terlihat seperti rusak. Teks menyusut, angka tetap menonjol. */
  .hv-stat strong, .stat-value, .kpi-value { font-size: 21px; }
  .hv-stat, .stat-tile { padding: 10px 12px; }

  /* Tombol tunggal yang berdiri sendiri satu baris (Refresh, Ekspor)
     dirapatkan ke kontennya. */
  .nh-content > .btn:only-child { margin-bottom: 10px; }
}

@media (max-width: 480px) {
  /* Di layar tersempit, keterangan bilah atas memang lebih baik tidak
     ada: ia mengambil tinggi dari isi yang justru dicari orang. */
  .nh-header-title .subtitle { display: none; }
}

/* `.rr-chip` — deret tab di Rekonsiliasi Bank, PMS, dan modul lain yang
   dibangun belakangan. Tingginya 30px, di bawah ambang jari. Aturan
   sasaran-sentuh sebelumnya menyebut nama kelas satu per satu dan karena
   itu bocor begitu ada modul baru; kelas ini ikut disebut sekarang, dan
   daftar halaman di `tests/ui-audit.mjs` sudah dibaca dari folder supaya
   modul berikutnya tidak lagi lolos tanpa diuji. */
@media (max-width: 1024px) {
  .rr-chip { min-height: 36px; }
}


/* Merek untuk alamat yang tampil sebagai satu aplikasi (pms.707.co.id).
   Logo "707 OS" memakai huruf-per-huruf yang direnggangkan; nama aplikasi
   lain cukup satu baris biasa di bawahnya. */
.os-logo-sub--plain {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}