/* ==========================================================================
   Self-hosted Inter (replaces Google Fonts CDN)
   Weights: 400 (regular), 500 (medium), 600 (semibold), 700 (bold)
   ========================================================================== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: #f8f8f8; color: #171717; }
    
    /* Theme */
    :root {
      --bg: #ffffff;
      --bg-alt: #f8f8f8;
      --bg-hover: #f3f3f3;
      --border: #e5e5e5;
      --border-dark: #d4d4d4;
      --text: #171717;
      --text-muted: #525252;
      --text-light: #737373;
      --accent: #000000;
      --accent-text: #ffffff;
      --success: #16a34a;
      --warning: #d97706;
      --danger: #dc2626;
    }

    /* Layout */
    .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 220px; background: var(--bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 100; }
    .sidebar-logo { padding: 16px 20px; border-bottom: 1px solid var(--border); }
    .sidebar-logo img { height: 32px; width: auto; }
    .sidebar-nav { flex: 1; padding-top: 8px; }
    .nav-item { display: flex; align-items: center; gap: 12px; padding: 14px 20px; cursor: pointer; color: var(--text-muted); border-left: 3px solid transparent; font-size: 14px; transition: all 0.15s; }
    .nav-item:hover { background: var(--bg-hover); }
    .nav-item.active { color: var(--text); background: var(--bg-hover); border-left-color: var(--accent); font-weight: 600; }
    .nav-badge { background: var(--warning); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
    .nav-badge-danger { background: var(--danger); }
    .sidebar-footer { padding: 16px; border-top: 1px solid var(--border); }
    .btn-primary { width: 100%; padding: 12px 20px; border-radius: 8px; border: none; background: var(--accent); color: var(--accent-text); font-size: 14px; font-weight: 500; cursor: pointer; }
    .btn-primary:hover { opacity: 0.9; }

    .main { margin-left: 220px; padding: 32px; min-height: 100vh; }
    .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
    .header h1 { font-size: 24px; font-weight: 700; }
    .header-actions { display: flex; align-items: center; gap: 16px; }
    .header-time { font-size: 12px; color: var(--text-light); }
    .btn-secondary { padding: 10px 20px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); font-size: 14px; cursor: pointer; }
    .rate-limit-locked { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

    .global-rate-limit-banner {
      position: fixed;
      top: 12px;
      left: 12px;
      right: 12px;
      z-index: 10050;
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 14px;
      border-radius: 8px;
      border: 1px solid #fbbf24;
      background: #fffbeb;
      color: #92400e;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
      font-size: 13px;
      font-weight: 600;
    }
    .global-rate-limit-banner.is-visible { display: flex; }
    .global-rate-limit-banner .rate-limit-sub {
      font-size: 12px;
      font-weight: 500;
      color: #b45309;
      white-space: nowrap;
    }

    .creation-failure-banner {
      position: fixed;
      top: 62px;
      left: 12px;
      right: 12px;
      z-index: 10040;
      display: none;
      flex-direction: column;
      gap: 10px;
      padding: 12px 14px;
      border-radius: 8px;
      border: 1px solid #fecaca;
      background: #fef2f2;
      color: #7f1d1d;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    }
    .creation-failure-banner.is-visible { display: flex; }
    .creation-failure-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .creation-failure-title { font-size: 13px; font-weight: 700; }
    .creation-failure-list { display: flex; flex-direction: column; gap: 8px; }
    .creation-failure-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: #fff; border: 1px solid #fecaca; border-radius: 6px; padding: 8px 10px; }
    .creation-failure-meta { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #991b1b; }
    .creation-failure-actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .creation-failure-btn { padding: 6px 10px; font-size: 12px; line-height: 1.2; width: auto; }
    .creation-failure-more { font-size: 12px; font-weight: 600; color: #991b1b; }
    .runtime-crash-banner {
      position: fixed;
      top: 112px;
      left: 12px;
      right: 12px;
      z-index: 10060;
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 8px;
      border: 1px solid #fca5a5;
      background: #fff1f2;
      color: #7f1d1d;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
    }
    .runtime-crash-banner.is-visible { display: flex; }
    .runtime-crash-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    .runtime-crash-title { font-size: 13px; line-height: 1.3; }
    .runtime-crash-detail {
      font-size: 12px;
      color: #991b1b;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: min(72vw, 920px);
    }
    .runtime-crash-actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .runtime-crash-btn { width: auto; padding: 6px 10px; font-size: 12px; line-height: 1.2; }
    .needs-attention-badge {
      display: none;
      border: 1px solid #fecaca;
      border-radius: 10px;
      background: #fef2f2;
      color: #991b1b;
      font-size: 10px;
      font-weight: 700;
      white-space: nowrap;
      cursor: pointer;
      padding: 3px 10px;
      line-height: 1.2;
    }
    .needs-attention-badge.is-visible { display: inline-block; }

    .needs-attention-panel {
      margin: 12px 0 16px;
      padding: 12px 14px;
      border-radius: 10px;
      border: 1px solid #fecaca;
      background: #fef2f2;
      color: #7f1d1d;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .needs-attention-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .needs-attention-title { font-size: 13px; font-weight: 700; }
    .needs-attention-list { display: flex; flex-direction: column; gap: 8px; }
    .needs-attention-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      border-radius: 8px;
      padding: 8px 10px;
      background: #fff;
      border: 1px solid #fecaca;
    }
    .needs-attention-item.status_reverted { border-left: 3px solid #f59e0b; }
    .needs-attention-meta { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #991b1b; max-width: 720px; }
    .needs-attention-meta strong { font-size: 13px; }
    .needs-attention-when { color: #b91c1c; font-size: 11px; }
    .needs-attention-actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .needs-attention-btn { padding: 6px 10px; font-size: 12px; line-height: 1.2; width: auto; }
    .needs-attention-more { font-size: 12px; font-weight: 600; color: #991b1b; }

    /* Cards */
    .card { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
    .card-clickable { cursor: pointer; transition: all 0.15s; }
    .card-clickable:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

    /* Grids */
    .grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 24px; }
    .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 24px; }

    /* Metrics */
    .metric-value { font-size: 28px; font-weight: 700; }
    .metric-label { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
    .metric-hint { font-size: 11px; color: var(--text-light); margin-top: 6px; }

    /* Pacing Banner */
    .pacing-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 20px 24px; margin-bottom: 20px; }
    .pacing-main span { font-size: 32px; font-weight: 700; }
    .pacing-main .sub { font-size: 16px; color: var(--text-light); font-weight: 400; }
    .pacing-stats { display: flex; gap: 24px; }
    .pacing-stat { text-align: center; }
    .pacing-stat-value { font-size: 24px; font-weight: 700; }
    .pacing-stat-label { font-size: 12px; color: var(--text-muted); }

    /* Badges */
    .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; }
    .badge-ahead { background: #dcfce7; color: #16a34a; }
    .badge-on-track { background: #dbeafe; color: #2563eb; }
    .badge-behind { background: #fee2e2; color: #dc2626; }
    .badge-source { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 6px; }
    .badge-waste { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
    .badge-waste.high { background: #fee2e2; color: #dc2626; }
    .badge-waste.medium { background: #fef3c7; color: #d97706; }
    .badge-waste.low { background: #dcfce7; color: #16a34a; }

    /* Sync outbox — pending indicator */
    .sync-pending { position: relative; }
    .sync-pending::after { content: '⟳ Sync pending'; position: absolute; top: 8px; right: 8px; background: #fef3c7; color: #92400e; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 4px; animation: syncPulse 2s ease-in-out infinite; }
    @keyframes syncPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
    .sync-badge { display: inline-flex; align-items: center; gap: 4px; background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 4px; margin-left: 8px; }
    .sync-badge.error { background: #fee2e2; color: #dc2626; }
    /* Order table row — left border accent + subtle background */
    .sync-pending-row { background: #fffbeb !important; border-left: 3px solid #f59e0b; }
    .sync-pending-row td:first-child::before { content: '⟳ '; color: #92400e; font-size: 11px; }
    /* Pipeline card — reuses .sync-pending::after for the badge */
    .pipeline-order.sync-pending { border-color: #f59e0b; background: #fffbeb; }
    .creation-failed { position: relative; }
    .creation-failed::after { content: '⚠ Sync failed'; position: absolute; top: 8px; right: 8px; background: #fee2e2; color: #991b1b; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
    .sync-pending.creation-failed::after { content: '⚠ Sync failed'; animation: none; }
    .creation-failed-row { background: #fef2f2 !important; border-left: 3px solid #dc2626; }
    .creation-failed-row td:first-child::before { content: '⚠ '; color: #dc2626; font-size: 11px; }
    .due-today-card.creation-failed { border-left: 4px solid #dc2626 !important; background: #fff7f7; }
    .pipeline-order.creation-failed { border-color: #dc2626; background: #fef2f2; }

    /* Alert Banner */
    .alert { border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; display: flex; align-items: center; gap: 14px; cursor: pointer; }
    .alert-danger { background: #fef2f2; border: 1px solid #fecaca; }
    .alert-warning { background: #fffbeb; border: 1px solid #fde68a; }
    .alert-icon { font-size: 24px; }
    .alert-content { flex: 1; }
    .alert-title { font-weight: 600; color: var(--danger); }
    .alert-warning .alert-title { color: var(--warning); }
    .alert-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
    .alert-arrow { color: var(--text-light); }

    /* Source/Status rows */
    .list-row { display: flex; align-items: center; padding: 12px 8px; margin: 0 -8px; border-radius: 8px; cursor: pointer; transition: background 0.15s; }
    .list-row:hover { background: var(--bg-hover); }
    .list-dot { width: 10px; height: 10px; border-radius: 50%; margin-right: 12px; }
    .list-label { flex: 1; font-size: 14px; }
    .list-value { font-weight: 600; font-size: 16px; margin-right: 12px; }
    .list-bar { width: 60px; height: 6px; background: var(--bg-hover); border-radius: 3px; overflow: hidden; }
    .list-bar-fill { height: 100%; border-radius: 3px; }

    /* Tabs */
    .tabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
    .tab { padding: 10px 20px; border-radius: 8px; border: none; background: transparent; color: var(--text-muted); font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 8px; }
    .tab:hover { background: var(--bg-hover); }
    .tab.active { background: var(--accent); color: var(--accent-text); }
    .tab-count { padding: 2px 8px; border-radius: 10px; font-size: 12px; }
    .tab.active .tab-count { background: rgba(255,255,255,0.2); }
    .tab:not(.active) .tab-count { background: var(--bg-hover); }

    /* Materials Cards */
    .material-card { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
    .material-card.low-stock { border-color: var(--warning); }
    .material-image { height: 120px; background-size: cover; background-position: center; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
    .material-image.placeholder { background: linear-gradient(135deg, var(--bg-alt) 0%, var(--bg-hover) 100%); }
    .material-placeholder { text-align: center; color: var(--text-light); }
    .material-placeholder-icon { font-size: 32px; margin-bottom: 4px; }
    .material-placeholder-text { font-size: 11px; }
    .material-details { padding: 16px; }
    .material-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
    .material-name { font-weight: 600; font-size: 15px; }
    .material-usage { font-size: 12px; color: var(--text-muted); }
    .material-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 13px; margin-bottom: 12px; }
    .material-stats label { color: var(--text-muted); }
    .material-stats strong { font-weight: 600; }
    .material-stats .low { color: var(--danger); }
    .material-stats .ok { color: var(--success); }
    .material-stats strong.low { color: var(--danger); }
    .material-stats strong.ok { color: var(--success); }
    .stock-bar { width: 100%; height: 6px; background: var(--bg-hover); border-radius: 3px; margin-bottom: 12px; overflow: hidden; }
    .stock-bar-fill { height: 100%; border-radius: 3px; }
    .stock-bar-fill.danger { background: var(--danger); }
    .stock-bar-fill.warning { background: var(--warning); }
    .stock-bar-fill.success { background: var(--success); }
    .material-dates { background: var(--bg-alt); border-radius: 8px; padding: 10px; font-size: 12px; }
    .material-date-row { display: flex; justify-content: space-between; margin-bottom: 4px; }
    .material-date-row:last-child { margin-bottom: 0; }
    .material-date-row label { color: var(--text-muted); }
    .material-date-row span.danger { color: var(--danger); }
    .material-date-row span.warning { color: var(--warning); }
    .material-alert { margin-top: 12px; padding: 8px 12px; background: #fef3c7; border-radius: 6px; font-size: 12px; color: #92400e; font-weight: 500; }

    /* Supply Cards */
    .supply-card { display: flex; overflow: hidden; }
    .supply-image { width: 100px; min-height: 140px; background-size: cover; background-position: center; border-right: 1px solid var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
    .supply-image.placeholder { background: linear-gradient(135deg, var(--bg-alt) 0%, var(--bg-hover) 100%); }
    .supply-image .icon { font-size: 28px; }
    .supply-details { padding: 14px; flex: 1; }
    .supply-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
    .supply-name { font-weight: 600; font-size: 14px; }
    .supply-category { font-size: 11px; color: var(--text-muted); }
    .supply-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 12px; margin-bottom: 10px; }
    .supply-dates { background: var(--bg-alt); border-radius: 6px; padding: 8px; font-size: 11px; }
    .supply-date-row { display: flex; justify-content: space-between; margin-bottom: 2px; }
    .supply-date-row:last-child { margin-bottom: 0; }
    .supply-alert { margin-top: 8px; padding: 4px 8px; background: #fef3c7; border-radius: 4px; font-size: 11px; color: #92400e; font-weight: 500; }

    /* History Table */
    .table-wrap { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
    table { width: 100%; border-collapse: collapse; font-size: 14px; }
    thead { background: var(--bg-alt); }
    th { text-align: left; padding: 12px 16px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
    td { padding: 14px 16px; border-bottom: 1px solid var(--border); }
    tbody tr:last-child td { border-bottom: none; }
    .status-badge { padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; }
    .status-delivered { background: #dcfce7; color: #16a34a; }
    .status-scheduled { background: #dbeafe; color: #2563eb; }

    /* Waste Analysis */
    .waste-summary { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
    .waste-summary h3 { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
    .waste-summary p { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
    .waste-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .waste-card { background: var(--bg-alt); border-radius: 8px; padding: 16px; text-align: center; }
    .waste-card-value { font-size: 24px; font-weight: 700; }
    .waste-card-value.warning { color: var(--warning); }
    .waste-card-value.success { color: var(--success); }
    .waste-card-value.danger { color: var(--danger); }
    .waste-card-label { font-size: 12px; color: var(--text-muted); }

    /* BOM Table */
    .bom-table-wrap { overflow-x: auto; }
    .bom-table { width: 100%; border-collapse: collapse; font-size: 14px; }
    .bom-table th { text-align: center; padding: 12px 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: var(--bg-alt); border-bottom: 2px solid var(--border); }
    .bom-table td { padding: 12px 8px; border-bottom: 1px solid var(--border); text-align: center; }
    .bom-table td:first-child { text-align: left; }
    .bom-input { width: 70px; padding: 8px; border: 1px solid var(--border); border-radius: 6px; text-align: center; font-size: 14px; background: var(--bg); }
    .bom-input:focus { outline: none; border-color: var(--accent); }
    .bom-input-highlight { background: #fef3c7; border-color: #fde68a; }
    .bom-unit { text-align: left !important; padding-left: 20px !important; font-size: 12px; color: var(--text-muted); }
    .bom-section-header td { padding: 0 !important; }

    /* Modal */
    .modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 1000; overflow-y: auto; padding: 40px 20px; }
    .modal-overlay.active { display: flex; justify-content: center; align-items: flex-start; }
    #statusUpdateModal { z-index: 1100; }
    #statusUpdateModal input, #statusUpdateModal textarea, #statusUpdateModal select { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; background: var(--bg); box-sizing: border-box; }
    #statusUpdateModal input:focus, #statusUpdateModal textarea:focus, #statusUpdateModal select:focus { outline: none; border-color: var(--accent); }
    .modal { background: var(--bg); border-radius: 16px; width: 100%; max-width: 800px; box-shadow: 0 25px 50px rgba(0,0,0,0.25); animation: modalIn 0.2s ease; }
    @keyframes modalIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
    .modal-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 24px 28px 16px; border-bottom: 1px solid var(--border); }
    .modal-title { font-size: 24px; font-weight: 700; margin: 0; }
    .modal-subtitle { font-size: 14px; color: var(--text-muted); margin-top: 4px; }
    .modal-close { background: none; border: none; font-size: 28px; cursor: pointer; color: var(--text-light); line-height: 1; padding: 0; }
    .modal-close:hover { color: var(--text); }
    .modal-body { padding: 24px 28px; max-height: calc(100vh - 200px); overflow-y: auto; }
    .modal-section { margin-bottom: 28px; }
    .modal-section:last-child { margin-bottom: 0; }
    .modal-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 12px; }
    .modal-section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    .event-timeline-meta { font-size: 11px; color: var(--text-muted); }
    .modal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .modal-field label { display: block; font-size: 11px; color: var(--text-light); margin-bottom: 4px; }
    .modal-field span { font-size: 14px; font-weight: 500; }
    .modal-footer { display: flex; gap: 12px; justify-content: flex-end; padding: 16px 28px; border-top: 1px solid var(--border); background: var(--bg-alt); border-radius: 0 0 16px 16px; }
    .btn-cancel-order { padding: 10px 20px; border-radius: 8px; border: 1px solid #EF4444; background: #FEF2F2; color: #DC2626; font-size: 14px; font-weight: 500; cursor: pointer; }
    .btn-cancel-order:hover { background: #EF4444; color: #fff; }
    .btn-cancel-order:disabled { opacity: 0.5; cursor: not-allowed; }
    .cancel-to { background: #FEE2E2 !important; color: #DC2626 !important; }
    .cancel-warning { background: #FEF2F2; border: 1px solid #FECACA; border-radius: 8px; padding: 12px 16px; color: #991B1B; font-size: 13px; line-height: 1.5; margin-bottom: 12px; }

    /* Failure-aware action status in order modal */
    .action-state-card { border: 1px solid var(--border); border-left: 4px solid var(--border); background: var(--bg-alt); border-radius: 10px; padding: 14px 16px; }
    .action-state-card.is-ok { border-left-color: #16a34a; }
    .action-state-card.is-pending { border-left-color: #2563eb; }
    .action-state-card.is-warning { border-left-color: #d97706; }
    .action-state-card.is-error { border-left-color: #dc2626; }
    .action-state-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
    .action-state-title { font-size: 14px; font-weight: 600; }
    .action-state-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2px; }
    .action-state-pill.ok { background: #dcfce7; color: #166534; }
    .action-state-pill.pending { background: #dbeafe; color: #1d4ed8; }
    .action-state-pill.warning { background: #fef3c7; color: #92400e; }
    .action-state-pill.error { background: #fee2e2; color: #991b1b; }
    .action-state-note { font-size: 13px; color: var(--text); margin-bottom: 6px; }
    .action-state-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
    .action-state-actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .action-state-btn { font-size: 12px; padding: 7px 10px; }

    /* Source Data Card */
    .source-data-card { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--bg-alt); border-radius: 10px; border: 1px solid var(--border); margin-bottom: 12px; }
    .source-data-icon { font-size: 32px; }
    .source-data-info { flex: 1; }
    .source-data-name { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
    .source-data-meta { font-size: 12px; color: var(--text-muted); }
    .source-data-link { font-size: 13px; color: var(--accent); text-decoration: none; font-weight: 500; white-space: nowrap; }
    .source-data-link:hover { text-decoration: underline; }
    
    /* Source Files List */
    .source-files-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
    .source-file-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-alt); border-radius: 8px; }
    .source-file-icon { font-size: 24px; }
    .source-file-info { flex: 1; min-width: 0; }
    .source-file-name { font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .source-file-meta { font-size: 12px; color: var(--text-muted); }
    .source-file-link { padding: 6px 12px; background: var(--accent); color: white; border-radius: 6px; font-size: 12px; font-weight: 500; text-decoration: none; white-space: nowrap; }
    .source-file-link:hover { opacity: 0.9; }
    .source-file-link.disabled { background: var(--border); color: var(--text-muted); cursor: not-allowed; }
    .source-data-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; font-size: 13px; padding: 12px 16px; background: var(--bg-alt); border-radius: 8px; }
    .source-data-details strong { color: var(--text-muted); font-weight: 500; }

    /* Audit Timeline */
    .audit-timeline { position: relative; padding-left: 28px; }
    .audit-timeline::before { content: ''; position: absolute; left: 8px; top: 12px; bottom: 12px; width: 2px; background: var(--border); }
    .audit-item { position: relative; padding-bottom: 24px; }
    .audit-item:last-child { padding-bottom: 0; }
    .audit-dot { position: absolute; left: -24px; top: 4px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border); background: var(--bg); }
    .audit-item.complete .audit-dot { background: var(--success); border-color: var(--success); }
    .audit-item.active .audit-dot { background: var(--accent); border-color: var(--accent); animation: pulse 2s infinite; }
    @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0.2); } 50% { box-shadow: 0 0 0 6px rgba(0,0,0,0); } }
    .audit-item.pending .audit-dot { background: var(--bg); border-color: var(--border); }
    .audit-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }
    .audit-stage { font-weight: 600; font-size: 14px; }
    .audit-time { font-size: 12px; color: var(--text-muted); }
    .audit-source { display: inline-block; font-size: 11px; color: var(--text-light); margin-bottom: 4px; }
    .audit-note { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
    .audit-user { font-size: 12px; color: var(--text-light); }
    .audit-duration { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 4px 10px; background: var(--bg-alt); border-radius: 6px; font-size: 12px; color: var(--text-muted); }
    .audit-duration.warning { background: #fef3c7; color: #92400e; }
    .audit-duration.danger { background: #fee2e2; color: #991b1b; }
    .audit-timeline.is-focused { box-shadow: inset 0 0 0 2px #93c5fd; border-radius: 8px; transition: box-shadow 0.2s ease; }

    /* Shipping Card */
    .shipping-card { background: var(--bg-alt); border-radius: 10px; padding: 20px; }
    .shipping-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
    .shipping-carrier { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
    .shipping-tracking { font-size: 13px; color: var(--text-muted); }
    .shipping-tracking a { color: var(--accent); text-decoration: none; font-family: monospace; }
    .shipping-tracking a:hover { text-decoration: underline; }
    .shipping-timeline { border-top: 1px solid var(--border); padding-top: 16px; margin-bottom: 16px; }
    .shipping-event { display: flex; gap: 16px; padding: 10px 0; font-size: 13px; }
    .shipping-event:not(:last-child) { border-bottom: 1px solid var(--border); }
    .shipping-event-time { width: 140px; color: var(--text-muted); flex-shrink: 0; }
    .shipping-event-status { flex: 1; font-weight: 500; }
    .shipping-event-location { color: var(--text-muted); text-align: right; }
    .shipping-estimate { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #dbeafe; border-radius: 8px; font-size: 13px; color: #1e40af; font-weight: 500; }

    /* Materials Used */
    .materials-used { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .material-used-item { background: var(--bg-alt); border-radius: 8px; padding: 16px; text-align: center; }
    .material-used-value { font-size: 24px; font-weight: 700; margin-bottom: 4px; }
    .material-used-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; }

    /* QA Notes */
    .qa-notes { max-height: 200px; overflow-y: auto; margin-bottom: 12px; }
    .qa-note { background: var(--bg-alt); border-radius: 8px; padding: 12px 16px; margin-bottom: 8px; }
    .qa-note:last-child { margin-bottom: 0; }
    .qa-note-header { display: flex; justify-content: space-between; margin-bottom: 6px; }
    .qa-note-author { font-weight: 600; font-size: 12px; }
    .qa-note-time { font-size: 11px; color: var(--text-muted); }
    .qa-note-text { font-size: 13px; color: var(--text-muted); }
    .qa-add-note { display: flex; gap: 8px; }
    .qa-input { flex: 1; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; }
    .qa-input:focus { outline: none; border-color: var(--accent); }

    /* Due Today View */
    .due-today-banner { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, #1e1e1e 0%, #2d2d2d 100%); color: white; padding: 24px 32px; border-radius: 12px; margin-bottom: 20px; }
    .due-today-summary { }
    .due-today-count { font-size: 48px; font-weight: 700; line-height: 1; }
    .due-today-label { font-size: 14px; opacity: 0.8; margin-top: 4px; }
    .due-today-stats { display: flex; gap: 32px; }
    .due-today-stat { text-align: center; }
    .due-stat-value { display: block; font-size: 28px; font-weight: 700; }
    .due-stat-value.danger { color: #f87171; }
    .due-stat-value.warning { color: #fbbf24; }
    .due-stat-value.success { color: #4ade80; }
    .due-stat-label { font-size: 12px; opacity: 0.7; }

    .station-filters { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
    .station-btn { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
    .station-btn:hover { border-color: var(--accent); background: var(--bg-hover); }
    .station-btn.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
    .station-count { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
    .station-btn:not(.active) .station-count { background: var(--bg-alt); }
    .station-btn.active .station-count { background: rgba(255,255,255,0.2); }

    .due-today-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; }
    .due-today-card { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.15s; position: relative; overflow: hidden; }
    .due-today-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
    .due-today-card.overdue { border-left: 4px solid var(--danger); }
    .due-today-card.at-risk { border-left: 4px solid var(--warning); }
    .due-today-card.on-track { border-left: 4px solid var(--success); }
    .due-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
    .due-card-id { font-size: 18px; font-weight: 700; }
    .due-card-urgency { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
    .due-card-urgency.overdue { background: #fee2e2; color: #dc2626; }
    .due-card-urgency.due-today { background: #fef3c7; color: #d97706; }
    .due-card-urgency.pulled { background: #dbeafe; color: #2563eb; }

    /* Pull More Work Panel */
    .pull-work-panel { margin-top: 24px; background: var(--card-bg); border-radius: 12px; border: 1px solid var(--border); overflow: hidden; }
    .pull-work-header { padding: 16px 20px; background: var(--bg-alt); border-bottom: 1px solid var(--border); }
    .pull-work-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
    .pull-work-subtitle { font-size: 12px; color: var(--text-muted); }
    .pull-work-list { padding: 12px; }
    .pull-work-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--bg-alt); border-radius: 8px; margin-bottom: 8px; }
    .pull-work-item:last-child { margin-bottom: 0; }
    .pull-work-item-info { flex: 1; }
    .pull-work-item-id { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
    .pull-work-item-detail { font-size: 12px; color: var(--text-muted); }
    .pull-work-item-due { font-size: 12px; color: var(--text-muted); margin-right: 16px; }
    .pull-work-btn { padding: 8px 16px; background: var(--accent); color: white; border: none; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; }
    .pull-work-btn:hover { opacity: 0.9; }
    .pull-work-empty { padding: 20px; text-align: center; color: var(--text-muted); font-size: 13px; }
    .due-card-urgency.at-risk { background: #fef3c7; color: #92400e; }
    .due-card-urgency.on-track { background: #dcfce7; color: #16a34a; }
    .due-card-customer { font-size: 14px; color: var(--text-muted); margin-bottom: 16px; }
    .due-card-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; font-size: 13px; }
    .due-card-details label { display: block; font-size: 10px; color: var(--text-light); text-transform: uppercase; margin-bottom: 2px; }
    .due-card-schedule { background: var(--bg-alt); border-radius: 8px; padding: 12px; }
    .due-card-schedule-title { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; }
    .due-card-schedule-title .estimate-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 3px; margin-left: 6px; vertical-align: middle; }
    .estimate-tag.low { background: #fef3c7; color: #92400e; }
    .estimate-tag.medium { background: #dbeafe; color: #2563eb; }
    .estimate-tag.high { background: #dcfce7; color: #16a34a; }
    .schedule-confidence { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; }
    .schedule-confidence.confidence-high { color: var(--success); }
    .schedule-confidence.confidence-medium { color: var(--warning); }
    .schedule-confidence.confidence-low { color: var(--text-light); }
    .confidence-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--border-dark); }
    .confidence-dot.filled { background: currentColor; }
    .schedule-status-estimate { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; color: var(--text-muted); }
    .schedule-status-estimate .estimate-tag { font-size: 10px; }
    .due-card-schedule-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--bg-hover); margin-bottom: 8px; }
    .schedule-segment { height: 100%; }
    .schedule-segment.complete { background: var(--success); }
    .schedule-segment.current { background: var(--accent); }
    .schedule-segment.remaining { background: var(--border); }
    .due-card-schedule-info { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); }
    .due-card-action { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
    .due-card-action-text { font-size: 13px; font-weight: 500; }
    .due-card-action-btn { padding: 6px 12px; background: var(--accent); color: var(--accent-text); border: none; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; }

    .due-today-empty { text-align: center; padding: 60px; background: var(--bg); border-radius: 12px; border: 1px solid var(--border); }

    /* SLA Settings */
    .sla-table { display: flex; flex-direction: column; gap: 1px; background: var(--border); border-radius: 8px; overflow: hidden; }
    .sla-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 1px; background: var(--bg); }
    .sla-row.sla-header { background: var(--bg-alt); font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); }
    .sla-cell { padding: 12px 16px; display: flex; align-items: center; gap: 8px; }
    .sla-input { width: 50px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; text-align: center; font-size: 14px; font-weight: 600; }
    .sla-input:focus { outline: none; border-color: var(--accent); }
    .sla-type { padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; }
    .sla-type.integration { background: #dbeafe; color: #2563eb; }
    .sla-type.online { background: #dcfce7; color: #16a34a; }
    .sla-type.manual { background: #f3f4f6; color: #6b7280; }
    .sla-total { font-weight: 600; color: var(--accent); }

    .capacity-card { background: var(--bg-alt); border-radius: 10px; padding: 20px; text-align: center; }
    .capacity-icon { font-size: 32px; margin-bottom: 12px; }
    .capacity-value { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px; }
    .capacity-input { width: 70px; padding: 8px; border: 1px solid var(--border); border-radius: 6px; text-align: center; font-size: 16px; font-weight: 600; }
    .capacity-input:focus { outline: none; border-color: var(--accent); }
    .capacity-value span { font-size: 13px; color: var(--text-muted); }
    .capacity-label { font-size: 13px; color: var(--text-muted); }

    /* Schedule Status in Modal */
    .schedule-status-card { background: var(--bg-alt); border-radius: 10px; padding: 20px; }
    .schedule-status-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
    .schedule-status-badge { padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; }
    .schedule-status-badge.on-track { background: #dcfce7; color: #16a34a; }
    .schedule-status-badge.ahead { background: #dbeafe; color: #2563eb; }
    .schedule-status-badge.at-risk { background: #fef3c7; color: #d97706; }
    .schedule-status-badge.behind { background: #fee2e2; color: #dc2626; }
    .schedule-status-sla { font-size: 13px; color: var(--text-muted); }
    .schedule-progress-section { margin-bottom: 16px; }
    .schedule-progress-bar { height: 8px; background: var(--border); border-radius: 4px; position: relative; margin-bottom: 8px; }
    .schedule-progress-fill { height: 100%; background: var(--success); border-radius: 4px; transition: width 0.3s; }
    .schedule-progress-marker { position: absolute; top: -4px; width: 16px; height: 16px; background: var(--accent); border-radius: 50%; border: 2px solid var(--bg); transform: translateX(-50%); }
    .schedule-progress-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-light); text-transform: uppercase; }
    .schedule-time-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
    .schedule-time-item { text-align: center; }
    .schedule-time-label { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
    .schedule-time-value { font-size: 18px; font-weight: 700; }

    /* Station Time Tracking */
    .time-summary-banner { background: var(--bg-alt); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
    .time-summary-banner h3 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
    .time-summary-banner p { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
    .time-summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
    .time-summary-card { background: var(--bg); border-radius: 8px; padding: 16px; text-align: center; border: 1px solid var(--border); }
    .time-summary-card-station { font-size: 24px; margin-bottom: 4px; }
    .time-summary-card-name { font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
    .time-summary-card-variance { font-size: 24px; font-weight: 700; }
    .time-summary-card-variance.positive { color: var(--danger); }
    .time-summary-card-variance.negative { color: var(--success); }
    .time-summary-card-variance.neutral { color: var(--text-muted); }
    .time-summary-card-detail { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
    
    .time-variance-badge { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; }
    .time-variance-badge.over { background: #fee2e2; color: #dc2626; }
    .time-variance-badge.under { background: #dcfce7; color: #16a34a; }
    .time-variance-badge.ok { background: #f3f4f6; color: #6b7280; }
    .iv-row-hover:hover { background: var(--bg-hover); }

    /* Time Tracking in Modal */
    .time-tracking-table { margin-bottom: 16px; }
    .time-tracking-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1.5fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
    .time-tracking-row:last-child { border-bottom: none; }
    .time-tracking-header { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); }
    .time-tracking-summary { display: flex; gap: 20px; padding: 16px; background: var(--bg-alt); border-radius: 8px; }
    .time-tracking-summary-item { text-align: center; flex: 1; }
    .time-tracking-summary-value { font-size: 20px; font-weight: 700; }
    .time-tracking-summary-label { font-size: 11px; color: var(--text-muted); }
    .time-tracking-empty { padding: 20px; text-align: center; color: var(--text-muted); font-size: 13px; background: var(--bg-alt); border-radius: 8px; }

    /* CSV Export Buttons */
    .csv-export-group { display: flex; align-items: center; gap: 8px; }
    .csv-export-label { font-size: 12px; color: var(--text-muted); }
    .btn-csv { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); font-size: 12px; cursor: pointer; transition: all 0.15s; }
    .btn-csv:hover { border-color: var(--accent); background: var(--bg-hover); }

    /* Create Order Form */
    .form-section { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
    .form-section:last-child { border-bottom: none; margin-bottom: 0; }
    .form-section-title { font-size: 14px; font-weight: 600; margin-bottom: 16px; color: var(--text); }
    .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
    .form-group { display: flex; flex-direction: column; gap: 6px; }
    .form-group label { font-size: 12px; font-weight: 500; color: var(--text-muted); }
    .form-group input, .form-group select, .form-group textarea { padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; background: var(--bg); }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--accent); }
    .form-group textarea { resize: vertical; min-height: 80px; }
    .form-error-summary { background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 12px; margin-bottom: 16px; }
    .form-error-summary-title { font-size: 13px; font-weight: 700; color: #991b1b; margin-bottom: 6px; }
    .form-error-summary-list { margin: 0; padding-left: 18px; color: #7f1d1d; font-size: 12px; }
    .form-error-summary-list li { margin: 3px 0; }
    .form-group.has-error label { color: #991b1b; }
    .form-group.has-error input, .form-group.has-error select, .form-group.has-error textarea { border-color: #dc2626; background: #fff7f7; }
    .form-section.has-error .form-section-title { color: #991b1b; }
    .form-field-error { font-size: 12px; color: #991b1b; margin-top: 4px; }

    /* Product Type Selection */
    .product-type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .product-type-grid.has-error .product-type-card { border-color: #fca5a5; }
    .product-type-card { display: flex; flex-direction: column; align-items: center; padding: 16px; border: 2px solid var(--border); border-radius: 10px; cursor: pointer; transition: all 0.15s; text-align: center; }
    .product-type-card:hover { border-color: var(--accent); background: var(--bg-hover); }
    .product-type-card:has(input:checked) { border-color: var(--accent); background: rgba(37, 99, 235, 0.05); }
    .product-type-card input { display: none; }
    .product-type-icon { font-size: 28px; margin-bottom: 8px; }
    .product-type-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
    .product-type-sla { font-size: 11px; color: var(--text-muted); }

    /* Envelope Grid */
    .envelope-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
    .envelope-grid.has-error .envelope-option { border-color: #fca5a5; }
    .envelope-option { display: flex; flex-direction: column; align-items: center; padding: 10px 8px; border: 2px solid var(--border); border-radius: 8px; cursor: pointer; transition: all 0.15s; }
    .envelope-option:hover { border-color: var(--accent); }
    .envelope-option.selected { border-color: var(--accent); background: rgba(37, 99, 235, 0.05); }
    .envelope-option-name { font-size: 11px; font-weight: 500; margin-top: 6px; }

    /* Upload Zone */
    .upload-zone { border: 2px dashed var(--border); border-radius: 10px; padding: 40px 20px; text-align: center; transition: all 0.15s; }
    .upload-zone.has-error { border-color: #dc2626; background: #fff7f7; }
    .upload-preview.has-error { border: 1px solid #dc2626; background: #fff7f7; }
    .upload-zone:hover, .upload-zone.dragover { border-color: var(--accent); background: var(--bg-hover); }
    .upload-icon { font-size: 36px; margin-bottom: 12px; }
    .upload-text { font-size: 14px; color: var(--text); margin-bottom: 8px; }
    .upload-text a { color: var(--accent); text-decoration: none; }
    .upload-hint { font-size: 12px; color: var(--text-muted); }
    .upload-preview { background: var(--bg-alt); border-radius: 8px; padding: 16px; }
    .upload-preview-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
    .upload-filename { font-weight: 600; }
    .upload-count { color: var(--text-muted); font-size: 13px; }
    .upload-preview-table { max-height: 200px; overflow: auto; font-size: 12px; }
    .upload-preview-table table { width: 100%; border-collapse: collapse; }
    .upload-preview-table th, .upload-preview-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border); }
    .upload-preview-table th { background: var(--bg); font-weight: 600; position: sticky; top: 0; }
    .btn-link { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 13px; }

    /* Import Modal */
    .import-format-info { background: var(--bg-alt); border-radius: 8px; padding: 16px; }
    .import-format-info h4 { font-size: 14px; margin-bottom: 8px; }
    .import-format-info p { font-size: 13px; color: var(--text-muted); margin: 0; }
    .format-badges { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
    .format-badge { padding: 4px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; font-size: 12px; }
    .import-summary { display: flex; gap: 20px; justify-content: center; margin-bottom: 16px; }
    .import-stat { text-align: center; }
    .import-stat-value { font-size: 28px; font-weight: 700; }
    .import-stat-value.success { color: var(--success); }
    .import-stat-value.danger { color: var(--danger); }
    .import-stat-label { font-size: 12px; color: var(--text-muted); }
    .import-errors { background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 12px; }
    .import-errors h4 { font-size: 13px; color: #dc2626; margin-bottom: 8px; }
    .import-error-list { font-size: 12px; color: #7f1d1d; max-height: 150px; overflow: auto; }
    .import-error-item { padding: 4px 0; border-bottom: 1px solid #fecaca; }

    /* Import results panel (post-submit) */
    .import-results h4 { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
    .import-result-section { margin-bottom: 10px; }
    .import-result-section summary { cursor: pointer; font-size: 13px; font-weight: 600; padding: 6px 0; }
    .import-result-list { max-height: 200px; overflow: auto; font-size: 12px; padding-left: 4px; }
    .import-result-item { padding: 3px 0; border-bottom: 1px solid var(--border); }
    .import-result-item.success { color: var(--success-dark, #166534); }
    .import-result-item.danger { color: #991b1b; }
    .import-result-item.warning { color: #92400e; }
    .import-result-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }

    /* Mail Tracking — per-job .txt upload + live tracking */
    .mt-upload-zone { border: 2px dashed var(--border-dark); border-radius: 8px; padding: 28px 20px; text-align: center; cursor: pointer; transition: all .15s; }
    .mt-upload-zone:hover, .mt-upload-zone.dragover { border-color: var(--accent); background: var(--bg-hover); }
    .mt-upload-zone .mt-uz-icon { font-size: 26px; margin-bottom: 6px; opacity: .6; }
    .mt-upload-zone .mt-uz-title { font-size: 14px; margin-bottom: 3px; }
    .mt-upload-zone .mt-uz-title a { color: var(--accent); text-decoration: none; }
    .mt-upload-zone .mt-uz-hint { font-size: 12px; color: var(--text-muted); }
    .mt-upload-zone input[type="file"] { display: none; }
    .mt-file-card { background: var(--bg-alt); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
    .mt-file-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
    .mt-file-info { display: flex; align-items: center; gap: 10px; }
    .mt-file-icon { font-size: 20px; }
    .mt-file-name { font-size: 13px; font-weight: 600; }
    .mt-file-meta { font-size: 12px; color: var(--text-muted); }
    .mt-file-rm { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 12px; padding: 3px 7px; border-radius: 4px; }
    .mt-file-rm:hover { background: #fee2e2; }
    .mt-prev-tbl { max-height: 110px; overflow: auto; border-radius: 6px; border: 1px solid var(--border); }
    .mt-prev-tbl table { width: 100%; border-collapse: collapse; font-size: 11px; }
    .mt-prev-tbl th { background: var(--bg-alt); font-weight: 600; position: sticky; top: 0; z-index: 1; }
    .mt-prev-tbl th, .mt-prev-tbl td { padding: 4px 8px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
    .mt-valid { margin-top: 8px; padding: 7px 10px; border-radius: 6px; font-size: 12px; display: flex; align-items: center; gap: 5px; }
    .mt-valid.ok { background: #dcfce7; color: #16a34a; }
    .mt-valid.warn { background: #fef3c7; color: #92400e; }
    .mt-valid.fail { background: #fee2e2; color: #dc2626; }
    .mt-acts { display: flex; gap: 8px; margin-top: 10px; }
    .mt-btn { padding: 7px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; border: none; font-family: inherit; transition: all .15s; }
    .mt-btn-pri { background: var(--accent); color: var(--accent-text); }
    .mt-btn-pri:hover { opacity: .9; }
    .mt-btn-pri:disabled { opacity: .3; cursor: not-allowed; }
    .mt-btn-sec { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
    .mt-btn-sec:hover { border-color: var(--border-dark); color: var(--text); }
    .mt-prog { margin-top: 10px; }
    .mt-prog-lbl { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
    .mt-prog-bar { height: 5px; background: var(--bg-alt); border-radius: 3px; overflow: hidden; }
    .mt-prog-fill { height: 100%; border-radius: 3px; transition: width .4s; }
    .mt-prog-fill.active { background: var(--accent); animation: mtPulse 1.5s ease-in-out infinite; }
    .mt-prog-fill.done { background: var(--success); }
    .mt-prog-fill.err { background: var(--danger); }
    @keyframes mtPulse { 0%,100%{opacity:1} 50%{opacity:.5} }
    .mt-job-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 10px; }
    .mt-jstat { background: var(--bg-alt); border-radius: 6px; padding: 8px 10px; }
    .mt-jstat-lbl { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
    .mt-jstat-val { font-size: 15px; font-weight: 700; }
    .mt-status-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--bg-alt); gap: 1px; margin-bottom: 10px; }
    .mt-seg { height: 100%; transition: width .4s; }
    .mt-seg-del { background: var(--success); }
    .mt-seg-ofd { background: var(--warning); }
    .mt-seg-trn { background: #3b82f6; }
    .mt-seg-rts { background: var(--danger); }
    .mt-legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--text-muted); margin-bottom: 10px; }
    .mt-legend span { display: flex; align-items: center; gap: 4px; }
    .iv-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 0; font-size: 13px; }
    .mt-legend .dot { width: 7px; height: 7px; border-radius: 50%; }
    .mt-tk-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; margin-bottom: 10px; }
    .mt-tk-card { background: var(--bg-alt); border-radius: 6px; padding: 8px; text-align: center; }
    .mt-tk-card .v { font-size: 18px; font-weight: 700; }
    .mt-tk-card .l { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; margin-top: 1px; }
    .mt-tk-card.del .v { color: var(--success); }
    .mt-tk-card.trn .v { color: #3b82f6; }
    .mt-tk-card.rts .v { color: var(--danger); }
    .mt-rates { font-size: 12px; color: var(--text-muted); display: flex; gap: 12px; flex-wrap: wrap; }
    .mt-rates strong { color: var(--text); font-weight: 500; }
    .mt-ts-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 8px; }
    .mt-ts { font-size: 11px; color: var(--text-muted); }
    .mt-ts strong { display: block; color: var(--text); font-weight: 500; margin-bottom: 1px; }
    .mt-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
    .mt-badge-wait { background: #fef3c7; color: #92400e; }
    .mt-badge-go { background: #dbeafe; color: #2563eb; }
    .mt-badge-ok { background: #dcfce7; color: #16a34a; }
    .mt-badge-err { background: #fee2e2; color: #dc2626; }
    .mt-hide { display: none !important; }

    /* Integrations View */
    .integration-list { display: flex; flex-direction: column; gap: 12px; }
    .integration-item { display: grid; grid-template-columns: 48px 1fr auto auto; gap: 16px; align-items: center; padding: 16px; background: var(--bg-alt); border-radius: 10px; border: 1px solid var(--border); }
    .integration-item.active { border-left: 3px solid var(--success); }
    .integration-icon { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 14px; }
    .integration-info { }
    .integration-name { font-weight: 600; font-size: 15px; margin-bottom: 2px; }
    .integration-detail { font-size: 12px; color: var(--text-muted); }
    .integration-status { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
    .integration-stats { font-size: 12px; color: var(--text-muted); text-align: right; }
    .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-light); display: inline-block; }
    .status-dot.success { background: var(--success); }
    .status-dot.warning { background: var(--warning); }
    .status-dot.danger { background: var(--danger); }

    /* Status Update Panel */
    .status-update-panel { background: var(--bg-alt); border-radius: 10px; padding: 16px; }
    .status-update-current { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
    .status-label { font-size: 13px; color: var(--text-muted); }
    .status-badge { padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 600; }
    .status-update-selector { display: flex; gap: 10px; align-items: center; }
    .status-select { flex: 1; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; background: var(--bg); }
    .status-update-hint { font-size: 11px; color: var(--text-muted); margin-top: 10px; }

    /* Status Update Modal */
    .status-update-info { text-align: center; padding: 20px; background: var(--bg-alt); border-radius: 10px; }
    .status-update-order { font-size: 24px; font-weight: 700; margin-bottom: 12px; }
    .status-update-change { display: flex; align-items: center; justify-content: center; gap: 16px; }
    .status-from { padding: 8px 16px; background: var(--bg); border-radius: 6px; font-weight: 600; }
    .status-arrow { font-size: 20px; color: var(--text-muted); }
    .status-to { padding: 8px 16px; background: var(--accent); color: white; border-radius: 6px; font-weight: 600; }
    .status-update-customer { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
    .form-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

    /* Status Update Grid in Modal */
    .status-update-grid { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--bg-alt); border-radius: 10px; }
    .current-status-display { display: flex; flex-direction: column; gap: 4px; }
    .current-status-display label { font-size: 11px; color: var(--text-muted); }
    .current-status-badge { padding: 8px 16px; border-radius: 6px; font-weight: 600; font-size: 14px; }
    .status-update-grid .status-arrow { font-size: 20px; color: var(--text-muted); }
    .next-status-select { display: flex; flex-direction: column; gap: 4px; flex: 1; }
    .next-status-select label { font-size: 11px; color: var(--text-muted); }

    /* Pipeline View */
    .pipeline-summary { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-bottom: 24px; }
    .pipeline-stat { background: var(--card-bg); border-radius: 12px; padding: 20px; text-align: center; border: 1px solid var(--border); }
    .pipeline-stat-icon { font-size: 28px; margin-bottom: 8px; }
    .pipeline-stat-count { font-size: 32px; font-weight: 700; margin-bottom: 4px; }
    .pipeline-stat-label { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
    .pipeline-stat-pieces { font-size: 11px; color: var(--text-muted); }
    .pipeline-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .pipeline-column { background: var(--card-bg); border-radius: 12px; border: 1px solid var(--border); overflow: hidden; }
    .pipeline-column-header { padding: 16px; background: var(--bg-alt); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
    .pipeline-column-title { font-weight: 600; display: flex; align-items: center; gap: 8px; }
    .pipeline-column-count { background: var(--bg); padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
    .pipeline-column-body { padding: 12px; max-height: 400px; overflow-y: auto; }
    .pipeline-order { padding: 12px; background: var(--bg-alt); border-radius: 8px; margin-bottom: 8px; cursor: pointer; transition: all 0.15s; border-left: 3px solid transparent; }
    .pipeline-order:hover { border-left-color: var(--accent); }
    .pipeline-order-id { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
    .pipeline-order-info { font-size: 12px; color: var(--text-muted); }
    .pipeline-order-urgent { border-left-color: var(--danger); background: #fef2f2; }

    /* Reports View */
    .report-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
    .report-tab { padding: 10px 20px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
    .report-tab:hover { border-color: var(--accent); }
    .report-tab.active { background: var(--accent); color: white; border-color: var(--accent); }
    .report-section { display: none; }
    .report-section.active { display: block; }
    .report-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
    .report-header h3 { font-size: 18px; font-weight: 600; }
    .report-date-range { display: flex; align-items: center; gap: 10px; }
    .report-date-range input { padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }
    .report-table { width: 100%; }
    .report-table th { background: var(--bg-alt); font-weight: 600; text-align: left; padding: 12px; font-size: 12px; }
    .report-table td { padding: 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
    .report-table tr:hover td { background: var(--bg-hover); }

    .capacity-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .capacity-card { background: var(--bg-alt); border-radius: 10px; padding: 16px; text-align: center; }
    .capacity-card-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
    .capacity-card-value { font-size: 24px; font-weight: 700; }
    .capacity-card-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

    .missed-summary { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
    .missed-stat { background: var(--bg-alt); border-radius: 8px; padding: 12px; text-align: center; }
    .missed-stat-value { font-size: 24px; font-weight: 700; }
    .missed-stat-value.danger { color: var(--danger); }
    .missed-stat-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

    .efficiency-badge { padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; }
    .efficiency-badge.good { background: #dcfce7; color: #166534; }
    .efficiency-badge.ok { background: #fef3c7; color: #92400e; }
    .efficiency-badge.poor { background: #fee2e2; color: #991b1b; }

    /* Toast Notifications */
    .toast-container {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 10000;
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-width: 400px;
    }
    .toast-message-card {
      --toast-color: #3B82F6;
      --toast-border: #3B82F640;
      padding: 12px 16px;
      border-radius: 8px;
      background: var(--card-bg, #fff);
      border: 1px solid var(--toast-border);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 8px;
      animation: slideIn 0.2s ease;
    }
    .toast-message-card.toast-success { --toast-color: #22C55E; --toast-border: #22C55E40; }
    .toast-message-card.toast-error   { --toast-color: #EF4444; --toast-border: #EF444440; }
    .toast-message-card.toast-warning { --toast-color: #F59E0B; --toast-border: #F59E0B40; }
    .toast-message-card.toast-info    { --toast-color: #3B82F6; --toast-border: #3B82F640; }
    .toast-message-icon {
      color: var(--toast-color);
      font-weight: 700;
      flex-shrink: 0;
    }
    .toast-message-text { color: var(--text); }
    .toast-message-card.is-leaving {
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .toast-notification { position: fixed; bottom: 20px; right: 20px; background: #1f2937; color: white; padding: 14px 24px; border-radius: 10px; font-size: 14px; font-weight: 500; z-index: 10000; animation: slideInRight 0.3s ease; box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
    @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
    @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

    @media (max-width: 1200px) {
      .pipeline-summary { grid-template-columns: repeat(3, 1fr); }
      .pipeline-grid { grid-template-columns: repeat(2, 1fr); }
      .capacity-summary { grid-template-columns: repeat(2, 1fr); }
      .missed-summary { grid-template-columns: repeat(3, 1fr); }
      .system-status-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 768px) {
      .pipeline-summary { grid-template-columns: repeat(2, 1fr); }
      .pipeline-grid { grid-template-columns: 1fr; }
      .status-update-grid { flex-direction: column; align-items: stretch; }
      .modal-section-title-row { flex-direction: column; align-items: flex-start; }
      .action-state-actions { flex-direction: column; align-items: stretch; }
      .system-status-grid { grid-template-columns: repeat(2, 1fr); }
      .system-status-actions { justify-content: flex-start; }
      .report-tabs { flex-wrap: wrap; }
    }

    .webhook-list { display: flex; flex-direction: column; gap: 12px; }
    .webhook-item { padding: 12px; background: var(--bg-alt); border-radius: 8px; }
    .webhook-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
    .webhook-method { padding: 2px 8px; background: #dbeafe; color: #2563eb; border-radius: 4px; font-size: 11px; font-weight: 600; font-family: monospace; }
    .webhook-method.out { background: #dcfce7; color: #16a34a; }
    .webhook-url { font-family: monospace; font-size: 13px; flex: 1; }
    .webhook-stats { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); }

    @media (max-width: 768px) {
      .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
      .product-type-grid { grid-template-columns: repeat(2, 1fr); }
      .envelope-grid { grid-template-columns: repeat(3, 1fr); }
      .integration-item { grid-template-columns: 48px 1fr; gap: 12px; }
      .integration-status, .integration-stats { grid-column: 2; }
    }
    .modal-field label { display: block; font-size: 11px; color: var(--text-light); text-transform: uppercase; margin-bottom: 4px; }
    .modal-field span { font-size: 14px; font-weight: 500; }

    /* Files List */
    .file-list { display: flex; flex-direction: column; gap: 8px; }
    .file-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-alt); border-radius: 8px; }
    .file-icon { font-size: 24px; }
    .file-info { flex: 1; }
    .file-name { font-weight: 600; font-size: 14px; }
    .file-meta { font-size: 12px; color: var(--text-muted); }
    .file-link { font-size: 13px; color: var(--accent); text-decoration: none; font-weight: 500; }
    .file-link:hover { text-decoration: underline; }

    /* Timeline */
    .timeline { position: relative; padding-left: 28px; }
    .timeline::before { content: ''; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; background: var(--border); }
    .timeline-item { position: relative; padding-bottom: 20px; }
    .timeline-item:last-child { padding-bottom: 0; }
    .timeline-dot { position: absolute; left: -24px; top: 4px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border); background: var(--bg); }
    .timeline-dot.complete { background: var(--success); border-color: var(--success); }
    .timeline-dot.active { background: var(--accent); border-color: var(--accent); animation: pulse 2s infinite; }
    .timeline-dot.pending { background: var(--bg); border-color: var(--border); }
    @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0.2); } 50% { box-shadow: 0 0 0 6px rgba(0,0,0,0); } }
    .timeline-content { background: var(--bg-alt); border-radius: 8px; padding: 12px 16px; }
    .timeline-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
    .timeline-title { font-weight: 600; font-size: 14px; }
    .timeline-time { font-size: 12px; color: var(--text-muted); }
    .timeline-desc { font-size: 13px; color: var(--text-muted); }
    .timeline-duration { display: inline-block; margin-top: 8px; padding: 4px 8px; background: var(--bg); border-radius: 4px; font-size: 12px; color: var(--text-muted); }
    .timeline-duration.warning { background: #fef3c7; color: #92400e; }

    /* Phase Bars */
    .phase-bars { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
    .phase-bar { display: flex; align-items: center; gap: 12px; }
    .phase-bar-label { width: 80px; font-size: 12px; font-weight: 500; }
    .phase-bar-track { flex: 1; height: 24px; background: var(--bg-alt); border-radius: 4px; overflow: hidden; position: relative; }
    .phase-bar-fill { height: 100%; border-radius: 4px; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; font-size: 11px; font-weight: 600; color: white; min-width: fit-content; }
    .phase-bar-target { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--danger); }
    .phase-bar-time { width: 60px; text-align: right; font-size: 12px; color: var(--text-muted); }

    /* Time Summary */
    .time-summary { display: flex; gap: 24px; padding: 16px; background: var(--bg-alt); border-radius: 8px; }
    .time-stat { text-align: center; flex: 1; }
    .time-stat-value { font-size: 24px; font-weight: 700; }
    .time-stat-label { font-size: 12px; color: var(--text-muted); }

    /* Tracking */
    .tracking-summary { background: var(--bg-alt); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
    .tracking-carrier { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
    .tracking-carrier-logo { font-size: 32px; }
    .tracking-carrier-name { font-weight: 600; }
    .tracking-number { font-size: 13px; color: var(--text-muted); font-family: monospace; }
    .tracking-link { margin-left: auto; font-size: 13px; color: var(--accent); text-decoration: none; font-weight: 500; }
    .tracking-status { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #dcfce7; border-radius: 6px; color: #16a34a; font-weight: 500; }
    .tracking-status.in-transit { background: #dbeafe; color: #2563eb; }
    .tracking-status-icon { font-size: 16px; }
    .tracking-timeline { font-size: 13px; }
    .tracking-event { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
    .tracking-event:last-child { border-bottom: none; }
    .tracking-event-time { width: 140px; color: var(--text-muted); }
    .tracking-event-desc { flex: 1; }
    .tracking-event-location { color: var(--text-muted); }

    /* Orders Table */
    .filters { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
    .filter-input { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 14px; width: 200px; outline: none; }
    .filter-select { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 14px; cursor: pointer; }
    .filter-range { display: flex; gap: 8px; align-items: center; }
    .filter-date { min-width: 160px; }
    .filter-clear { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 14px; cursor: pointer; color: var(--text-muted); }
    .btn-server-search { display: inline-flex; align-items: center; gap: 4px; background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 10px 14px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: opacity 0.15s; }
    .btn-server-search:hover { opacity: 0.85; }
    .btn-server-search:disabled { opacity: 0.5; cursor: wait; }
    .cap-warning-banner { background: #fef3cd; color: #856404; border: 1px solid #ffc107; border-radius: 8px; padding: 10px 16px; margin-bottom: 16px; font-size: 13px; line-height: 1.5; }
    .employee-window-banner { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; border-radius: 8px; padding: 10px 16px; margin-bottom: 16px; font-size: 13px; line-height: 1.5; }
    .search-scope-hint { margin: -8px 0 12px; font-size: 12px; color: var(--text-muted); }
    .recently-touched-panel { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 16px; overflow: hidden; }
    .recently-touched-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--bg-alt); }
    .recently-touched-title { font-weight: 700; font-size: 14px; }
    .recently-touched-actions { display: flex; gap: 8px; }
    .recently-touched-meta { padding: 0 14px 10px; color: var(--text-muted); font-size: 12px; }
    .recently-touched-table-wrap { max-height: 320px; overflow: auto; }
    .recently-touched-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .recently-touched-table th, .recently-touched-table td { padding: 10px 12px; border-top: 1px solid var(--border); text-align: left; vertical-align: top; }
    .recently-touched-table thead th { position: sticky; top: 0; background: var(--bg); z-index: 1; }
    .recently-touched-table tbody tr:hover { background: var(--bg-hover); }
    .recently-touched-action-cell { min-width: 240px; font-weight: 600; }
    .recently-touched-time-cell, .recently-touched-order-cell { white-space: nowrap; color: var(--text-muted); }
    .recently-touched-detail { color: var(--text-muted); font-weight: 400; }
    .recently-touched-result { display: inline-flex; align-items: center; justify-content: center; min-width: 72px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2px; }
    .recently-touched-result.success { background: #dcfce7; color: #166534; }
    .recently-touched-result.queued { background: #fef3c7; color: #92400e; }
    .recently-touched-result.failed { background: #fee2e2; color: #b91c1c; }
    .recently-touched-result.info { background: #dbeafe; color: #1d4ed8; }
    .filter-count { margin-left: auto; font-size: 13px; color: var(--text-muted); }
    tbody tr { cursor: pointer; transition: background 0.15s; }
    tbody tr:hover { background: var(--bg-hover); }

    /* Views */
    .view { display: none; }
    .view.active { display: block; }

    /* Mobile */
    .mobile-header, .mobile-nav { display: none; }

    @media (max-width: 768px) {
      .sidebar { display: none; }
      .main { margin-left: 0; padding: 16px; padding-bottom: 80px; }
      .mobile-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
      .mobile-header svg { height: 28px; }
      .mobile-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg); border-top: 1px solid var(--border); justify-content: space-around; padding: 10px 0; z-index: 100; }
      .mobile-nav-item { background: none; border: none; color: var(--text-muted); font-size: 11px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 16px; }
      .mobile-nav-item.active { color: var(--accent); font-weight: 600; }
      .grid-5, .grid-4 { grid-template-columns: repeat(2, 1fr); }
      .grid-3, .grid-2 { grid-template-columns: 1fr; }
      .pacing-banner { flex-direction: column; align-items: flex-start; }
      .header { flex-direction: column; align-items: flex-start; gap: 12px; }
      .waste-cards { grid-template-columns: 1fr; }
      .filter-input { width: 100%; }
      .filter-range { width: 100%; }
      .filter-range .filter-date { flex: 1; }
      .filter-date { width: 100%; min-width: 0; }
      .search-scope-hint { margin-top: -4px; }
      .recently-touched-header { flex-direction: column; align-items: flex-start; }
      .recently-touched-actions { width: 100%; justify-content: flex-end; }
      .recently-touched-table { font-size: 12px; }
      .recently-touched-action-cell { min-width: 180px; }
      .global-rate-limit-banner { top: 8px; left: 8px; right: 8px; flex-direction: column; align-items: flex-start; }
      .global-rate-limit-banner .rate-limit-sub { white-space: normal; }
      .creation-failure-banner { top: 96px; left: 8px; right: 8px; }
      .runtime-crash-banner { top: 160px; left: 8px; right: 8px; flex-direction: column; align-items: flex-start; }
      .runtime-crash-detail { max-width: none; white-space: normal; overflow: visible; text-overflow: initial; }
      .runtime-crash-actions { width: 100%; }
      .creation-failure-header { flex-direction: column; align-items: flex-start; }
      .needs-attention-item { flex-direction: column; align-items: flex-start; }
      .needs-attention-actions { width: 100%; }
      .tabs { flex-wrap: wrap; }
      .tab { font-size: 12px; padding: 8px 12px; }
      .bom-table { font-size: 12px; }
      .bom-input { width: 55px; padding: 6px; font-size: 12px; }
      .bom-unit { font-size: 10px; }
    }
    /* ========== LOGIN GATE ========== */
    .login-overlay { position: fixed; inset: 0; background: #f8f8f8; z-index: 9999; display: flex; align-items: center; justify-content: center; }
    .login-overlay.hidden { display: none; }
    .hidden { display: none !important; }
    .display-block { display: block !important; }
    .display-flex { display: flex !important; }
    .display-grid { display: grid !important; }
    .display-inline { display: inline !important; }
    .display-inline-flex { display: inline-flex !important; }
    body.scroll-locked { overflow: hidden; }
    .login-card { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 48px 40px; width: 400px; max-width: 90vw; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.08); }
    .login-card h2 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
    .login-card p { font-size: 14px; color: var(--text-muted); margin-bottom: 28px; }
    .login-input { width: 100%; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; font-size: 15px; font-family: inherit; outline: none; transition: border-color 0.15s; }
    .login-input:focus { border-color: var(--accent); }
    .login-btn { width: 100%; padding: 14px 20px; border-radius: 10px; border: none; background: var(--accent); color: var(--accent-text); font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 14px; transition: opacity 0.15s; }
    .login-btn:hover { opacity: 0.9; }
    .login-error { color: var(--danger); font-size: 13px; margin-top: 12px; display: none; }
    .login-role-tag { display: inline-block; padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; margin-top: 16px; }
    .login-role-tag.management { background: #dbeafe; color: #2563eb; }
    .login-role-tag.employee { background: #dcfce7; color: #16a34a; }

    /* User bar in sidebar */
    .user-bar { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
    .user-profile { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .user-status-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
    .user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
    .user-info { flex: 1; min-width: 0; }
    .user-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .user-role { font-size: 11px; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .user-logout { margin-left: auto; background: none; border: none; color: var(--text-light); cursor: pointer; font-size: 12px; padding: 4px 8px; border-radius: 4px; }
    .user-logout:hover { background: var(--bg-hover); color: var(--danger); }
    .nav-restricted { opacity: 0.35; pointer-events: none; }
    .employee-lock-notice { padding: 8px 20px; font-size: 11px; color: var(--text-light); border-top: 1px solid var(--border); }
    #apiStatus.api-status-loading { background: #f0f9ff; color: #0369a1; }
    #apiStatus.api-status-live { background: #dcfce7; color: #16a34a; }
    #apiStatus.api-status-stale { background: #ffedd5; color: #c2410c; }
    #apiStatus.api-status-demo { background: #fef9c3; color: #a16207; }
    #apiStatus.api-status-no-session,
    #apiStatus.api-status-auth-expired { background: #f3f4f6; color: #6b7280; }
    #apiStatus.api-status-offline,
    #apiStatus.api-status-error { background: #fee2e2; color: #dc2626; }

    /* ========== API HEALTH ========== */
    .health-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
    .health-card { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 20px; position: relative; overflow: hidden; }
    .health-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
    .health-card.ok::before { background: var(--success); }
    .health-card.degraded::before { background: var(--warning); }
    .health-card.error::before { background: var(--danger); }
    .health-card.unknown::before { background: var(--border-dark); }
    .health-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
    .health-status .dot { width: 8px; height: 8px; border-radius: 50%; }
    .health-status .dot.ok { background: var(--success); }
    .health-status .dot.degraded { background: var(--warning); animation: pulse-dot 2s ease-in-out infinite; }
    .health-status .dot.error { background: var(--danger); animation: pulse-dot 1s ease-in-out infinite; }
    .health-status .dot.unknown { background: var(--border-dark); }
    @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
    .system-status-panel { margin-bottom: 24px; }
    .system-status-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 10px; }
    .system-status-item { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
    .system-status-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
    .system-status-value { font-size: 16px; font-weight: 700; line-height: 1.2; }
    .system-status-value.ok { color: var(--success); }
    .system-status-value.warning { color: var(--warning); }
    .system-status-value.error { color: var(--danger); }
    .system-status-sub { font-size: 11px; color: var(--text-light); margin-top: 6px; }
    .system-status-actions { display: flex; justify-content: flex-end; margin-bottom: 10px; }
    .system-error-panel { display: none; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-alt); padding: 12px; }
    .system-error-panel.is-visible { display: block; }
    .system-error-summary { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
    .system-error-pre { margin: 0; max-height: 280px; overflow: auto; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px; font-size: 12px; line-height: 1.4; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
    .system-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
    .health-card .label { font-size: 13px; color: var(--text-muted); }
    .health-card .value { font-size: 24px; font-weight: 700; margin-top: 2px; }
    .health-card .sub { font-size: 12px; color: var(--text-light); margin-top: 4px; }
    .alert-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
    .alert-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); }
    .alert-item.critical { border-color: #fecaca; background: #fef2f2; }
    .alert-item.warning { border-color: #fde68a; background: #fffbeb; }
    .alert-item.info { border-color: #bfdbfe; background: #eff6ff; }
    .alert-severity { font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; }
    .alert-severity.critical { background: #dc2626; color: #fff; }
    .alert-severity.warning { background: #d97706; color: #fff; }
    .alert-severity.info { background: #2563eb; color: #fff; }
    .alert-msg { flex: 1; font-size: 13px; }
    .metrics-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
    .metric-block { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
    .metric-block h4 { font-size: 14px; font-weight: 600; margin-bottom: 16px; }
    .metric-line { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--bg-hover); }
    .metric-line:last-child { border-bottom: none; }
    .metric-line .k { font-size: 13px; color: var(--text-muted); }
    .metric-line .v { font-size: 14px; font-weight: 600; }
    .endpoint-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .endpoint-table th { text-align: left; font-weight: 600; padding: 10px 12px; border-bottom: 2px solid var(--border); color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
    .endpoint-table td { padding: 10px 12px; border-bottom: 1px solid var(--bg-hover); }
    .endpoint-table tr:hover td { background: var(--bg-hover); }
    .latency-bar { height: 6px; border-radius: 3px; background: var(--bg-hover); overflow: hidden; min-width: 60px; }
    .latency-bar-fill { height: 100%; border-radius: 3px; }
    .health-poll-status { font-size: 12px; color: var(--text-light); display: flex; align-items: center; gap: 8px; }
    .health-poll-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); animation: pulse-dot 3s ease-in-out infinite; }
    .uptime-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; }
    .uptime-badge.ok { background: #dcfce7; color: #16a34a; }
    .uptime-badge.degraded { background: #fef3c7; color: #d97706; }
    .uptime-badge.error { background: #fee2e2; color: #dc2626; }

    /* ========== BATCH / MERGE ========== */
    .merge-banner { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; display: flex; align-items: center; gap: 14px; }
    .merge-banner-icon { font-size: 24px; }
    .merge-banner-text { flex: 1; }
    .merge-banner-text strong { font-size: 14px; }
    .merge-banner-text p { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
    .merge-actions { display: flex; gap: 8px; }
    .btn-merge { padding: 8px 16px; border-radius: 8px; border: none; background: #2563eb; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
    .btn-merge:hover { background: #1d4ed8; }
    .btn-merge-cancel { padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); font-size: 13px; cursor: pointer; }
    .merge-checkbox { width: 18px; height: 18px; accent-color: #2563eb; cursor: pointer; }
    .merge-group { border: 2px dashed #93c5fd; border-radius: 12px; padding: 16px; margin-bottom: 16px; background: #f0f7ff; }
    .merge-group-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    .merge-group-label { font-size: 13px; font-weight: 600; color: #2563eb; display: flex; align-items: center; gap: 8px; }
    .merge-group-count { font-size: 12px; color: var(--text-muted); }
    .batch-card { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 12px; }
    .batch-card.active-batch { border-color: #93c5fd; border-width: 2px; }
    .batch-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    .batch-id { font-size: 15px; font-weight: 700; }
    .batch-meta { display: flex; gap: 16px; margin-bottom: 12px; }
    .batch-meta-item { font-size: 12px; color: var(--text-muted); }
    .batch-meta-item strong { color: var(--text); }
    .batch-orders { display: flex; flex-wrap: wrap; gap: 6px; }
    .batch-order-chip { padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; background: var(--bg-hover); border: 1px solid var(--border); }
    .batch-status-bar { display: flex; gap: 4px; margin-top: 12px; }
    .batch-step { flex: 1; height: 6px; border-radius: 3px; background: var(--bg-hover); }
    .batch-step.complete { background: var(--success); }
    .batch-step.active { background: #2563eb; }

    /* Modal overlay for merge */
    .merge-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; }
    .merge-modal-overlay.hidden { display: none; }
    .merge-modal { background: var(--bg); border-radius: 16px; padding: 32px; width: 600px; max-width: 90vw; max-height: 80vh; overflow-y: auto; }
    .merge-modal h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
    .merge-modal p { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }
    .merge-order-row { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; }
    .merge-order-row.selected { background: #eff6ff; border-color: #93c5fd; }
    .merge-order-details { flex: 1; }
    .merge-order-id { font-weight: 600; font-size: 14px; }
    .merge-order-sub { font-size: 12px; color: var(--text-muted); }

    @media (max-width: 768px) {
      .health-grid { grid-template-columns: repeat(2, 1fr); }
      .metrics-row { grid-template-columns: 1fr; }
      .merge-modal { width: 95vw; padding: 20px; }
    }

    /* ========== STAFF & SETTINGS ========== */
    .staff-tabs { display: flex; gap: 4px; margin-bottom: 20px; background: var(--bg-hover); padding: 4px; border-radius: 10px; }
    .staff-tab { padding: 10px 18px; border-radius: 8px; border: none; background: transparent; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--text-muted); font-family: inherit; }
    .staff-tab.active { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
    .staff-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .staff-table th { text-align: left; font-weight: 600; padding: 12px; border-bottom: 2px solid var(--border); color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
    .staff-table td { padding: 12px; border-bottom: 1px solid var(--bg-hover); vertical-align: middle; }
    .staff-table tr:hover td { background: var(--bg-hover); }
    .staff-name-cell { display: flex; align-items: center; gap: 10px; }
    .staff-avatar-sm { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #fff; flex-shrink: 0; }
    .staff-email { font-size: 12px; color: var(--text-light); }
    .module-chip { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; margin: 1px 2px; background: var(--bg-hover); }
    .module-chip.active { background: #dbeafe; color: #2563eb; }
    .status-pill { padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
    .status-pill.active { background: #dcfce7; color: #16a34a; }
    .status-pill.disabled { background: #fee2e2; color: #dc2626; }
    .robot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
    .robot-card { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px; text-align: center; }
    .robot-card.online,
    .robot-card.functional { border-color: #86efac; }
    .robot-card.offline { border-color: #fecaca; opacity: 0.6; }
    .robot-card.maintenance { border-color: #fde68a; }
    .robot-icon { font-size: 24px; margin-bottom: 4px; }
    .robot-name { font-size: 12px; font-weight: 600; }
    .robot-status { font-size: 11px; margin-top: 4px; }
    .robot-stat { font-size: 10px; color: var(--text-light); margin-top: 2px; }
    .target-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--bg-hover); }
    .target-row:last-child { border-bottom: none; }
    .target-label { width: 160px; font-weight: 600; font-size: 14px; }
    .target-input { width: 120px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; font-family: inherit; text-align: right; }
    .target-unit { font-size: 12px; color: var(--text-light); width: 100px; }
    .staff-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1001; display: flex; align-items: center; justify-content: center; }
    .staff-modal-overlay.hidden { display: none; }
    .staff-modal { background: var(--bg); border-radius: 16px; padding: 32px; width: 520px; max-width: 90vw; max-height: 85vh; overflow-y: auto; }
    .staff-modal h3 { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
    .form-group { margin-bottom: 16px; }
    .form-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-muted); }
    .form-input { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; }
    .form-input:focus { outline: none; border-color: var(--accent); }
    .form-select { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; background: var(--bg); }
    .form-check-group { display: flex; flex-wrap: wrap; gap: 8px; }
    .form-check { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 13px; }
    .form-check:has(input:checked) { background: #dbeafe; border-color: #93c5fd; color: #2563eb; }
    .form-check input { accent-color: #2563eb; }
    .otp-inputs { display: flex; gap: 8px; justify-content: center; margin: 20px 0; }
    .otp-digit { width: 48px; height: 56px; text-align: center; font-size: 24px; font-weight: 700; border: 2px solid var(--border); border-radius: 10px; font-family: inherit; outline: none; }
    .otp-digit:focus { border-color: var(--accent); }
    .login-step { display: none; }
    .login-step.active { display: block; }
    .login-resend { background: none; border: none; color: var(--text-light); font-size: 13px; cursor: pointer; text-decoration: underline; margin-top: 8px; }
    .totp-note { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; margin-bottom: 16px; font-size: 13px; }

/* SVG logo fills (moved from inline <defs><style>) */
.bp-2 { fill: #010101; }
.bp-3 { fill: #1e1b15; }
.bp-4 { fill: #fdfcfc; }
.bp-6 { fill: #393839; }
.bp-7 { fill: #999995; }

/* ==========================================================================
   Utility classes (extracted from inline style= attributes)
   ========================================================================== */
.u-00253 { margin-top:12px; }
.u-00f4c { background:#2563eb; }
.u-013d7 { background:#fee2e2;color:#dc2626;padding:3px 8px;border-radius:4px;font-size:11px;font-weight:600; }
.u-03071 { text-align:center;padding:24px;color:var(--text-light); }
.u-03bb4 { position:absolute;inset:0;border-radius:4px;animation:pulse-dot 2s ease-in-out infinite; }
.u-04bac { display:none;font-size:10px;padding:3px 10px;border-radius:10px;background:#fef3c7;color:#92400e;font-weight:600;white-space:nowrap;cursor:help;animation:syncPulse 2s ease-in-out infinite; }
.u-04bac.is-visible { display:inline-block; }
.u-0645b { font-size:12px;font-weight:600; }
.u-08db7 { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px; }
.u-0a805 { background:#3b82f6; }
.u-0aad7 { width:5%; }
.u-0ab73 { font-size:14px;color:var(--text-muted);margin-bottom:4px; }
.u-0c372 { padding:60px;text-align:center; }
.u-0cf08 { font-size:14px; }
.u-0cf9f { font-size:12px;color:var(--text-light); }
.u-0df4c { font-size:13px;color:var(--text-muted);margin-bottom:16px; }
.u-0e251 { font-size:10px;color:var(--text-light);margin-top:6px; }
.u-0f8ab { padding:24px; }
.u-10efe { max-width:900px; }
.u-1160c { font-size:12px;padding:6px 14px; }
.u-1216c { border-color:#dcfce7;background:#f0fdf4; }
.u-16ced { font-size:10px;background:var(--bg-hover);padding:2px 4px;border-radius:3px; }
.u-16d75 { font-size:13px;color:var(--text-muted); }
.u-179ea { font-size:13px;color:var(--text-muted);margin-bottom:4px; }
.u-180d2 { display:flex;flex-wrap:wrap;gap:8px; }
.u-18767 { background:var(--success); }
.u-1952d { display:flex;gap:8px;; }
.u-1aefa { flex:1;font-size:13px; }
.u-1be51 { margin-top:20px;display:flex;gap:12px;align-items:center; }
.u-1cc2c { background:#2563eb15;color:#2563eb; }
.u-1cf0d { background:var(--warning); }
.u-1e29e { font-weight:500; }
.u-1e850 { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px; }
.u-20dce { padding:0;overflow:hidden; }
.u-20e63 { font-size:11px;color:var(--text-light);margin-bottom:8px; }
.u-232b8 { display:flex;gap:32px;flex-wrap:wrap; }
.u-25fef { width:10%; }
.u-26586 { margin-top:16px;display:flex;gap:12px;flex-wrap:wrap; }
.u-26e40 { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px; }
.u-29a66 { background:var(--bg-alt);padding:16px;border-radius:8px; }
.u-2a978 { display:flex;align-items:center;gap:8px; }
.u-2b4bb { background:#16a34a;color:#fff; }
.u-2c0de { font-size:24px;font-weight:700;color:var(--success); }
.u-2e8bf { font-size:14px;color:var(--text-muted);margin-bottom:20px; }
.u-30196 { margin-bottom:20px; }
.u-3044b { font-size:13px; }
.u-30462 { background:none;border:1px solid var(--border);padding:10px 16px;border-radius:8px;font-size:13px;cursor:pointer;margin-right:6px;font-family:inherit; }
.u-30523 { font-size:24px;font-weight:700; }
.u-31589 { margin-left:auto;font-size:12px;color:var(--text-muted); }
.u-31b04 { padding:16px;text-align:center;color:var(--text-light);font-size:13px; }
.u-32305 { width:100%;border-collapse:collapse;font-size:12px; }
.u-324c8 { text-align:center;padding:20px;color:var(--text-muted); }
.u-3591b { font-size:14px;color:var(--text-muted);margin-bottom:16px; }
.u-37d30 { margin-bottom:24px; }
.u-381ad { font-size:11px;color:var(--text-light);margin-top:12px; }
.u-3831a { max-width:200px; }
.u-3ae1f { margin-top:20px; }
.u-3efc2 { display:flex;align-items:center;gap:10px;margin-bottom:8px; }
.u-40368 { max-width:700px; }
.u-40e78 { background:none;padding:5px 10px;border-radius:6px;font-size:12px;cursor:pointer; }
.u-42bfb { height:32px;width:auto;; }
.u-43a8a { background:#dc262615;color:#dc2626; }
.u-43f53 { font-size:13px;font-weight:600;margin-bottom:12px;color:var(--text-muted); }
.u-44b3b { display:flex;gap:2px;margin:12px 0 4px; }
.u-44f62 { font-size:10px;color:var(--text-light);flex:1;text-align:center; }
.u-46b91 { margin-top:20px;display:flex;gap:12px; }
.u-47be6 { font-size:12px;color:var(--text-light);margin-top:4px; }
.u-49a14 { font-size:16px;font-weight:600;margin-bottom:16px; }
.u-49fc7 { padding:16px;background:var(--bg-hover);border-radius:8px;margin-bottom:16px; }
.u-4a2c6 { display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--bg-hover); }
.u-4a752 { margin-top:12px;height:8px;background:var(--bg-hover);border-radius:4px;overflow:hidden; }
.u-4bbd0 { padding:0;overflow:hidden;margin-bottom:24px; }
.u-4ddbd { font-style:italic; }
.u-4f158 { width:auto; }
.u-50ead { background:var(--bg-alt);font-weight:600;padding:10px 12px; }
.u-51c2a { font-size:13px;width:auto;padding:10px 16px; }
.u-51d48 { width:40%; }
.u-52ff5 { font-size:16px;font-weight:600;margin-bottom:12px; }
.u-5371d { margin-top:10px; }
.u-5514d { margin-left:12px; }
.u-55d69 { font-size:16px;font-weight:600;margin-bottom:8px; }
.u-587dd { flex:1;min-width:200px;padding:8px 12px;border:1px solid var(--border);border-radius:6px;font-size:13px;font-family:inherit; }
.u-5aefc { padding:14px 20px;flex:1;min-width:150px; }
.u-5b795 { color:var(--text-muted); }
.u-5c452 { gap:20px; }
.u-5cb46 { padding:4px 8px;border:1px solid var(--border);border-radius:4px;background:var(--bg);cursor:pointer;font-size:12px; }
.u-5de84 { display:flex;justify-content:space-between;align-items:center;padding:12px 0; }
.u-5f7ab { text-transform:uppercase; }
.u-638ff { color:#3B82F6; }
.u-64a2b { text-align:center;color:var(--success);padding:40px; }
.u-65460 { margin-left:auto;display:flex;gap:8px; }
.u-65d17 { color:var(--warning); }
.u-6723e { font-size:12px;color:var(--text-muted); }
.u-67a0e { width:auto;align-self:flex-end; }
.u-6a8f1 { border-bottom:2px solid var(--border); }
.u-6b9c1 { font-size:12px; }
.u-6c89e { font-size:16px;font-weight:600;margin-bottom:20px; }
.u-6dfef { background:#6b728015;color:#6b7280; }
.u-6e179 { color:var(--success); }
.u-704fc { background:none;border:none;color:var(--text-light);cursor:pointer;margin-left:4px;font-size:12px; }
.u-7122d { border-bottom:1px solid var(--bg-hover);cursor:pointer; }
.u-712f3 { display:flex;gap:8px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--border); }
.u-75936 { font-size:10px;vertical-align:middle;margin-left:6px; }
.u-75d95 { font-size:12px;color:var(--text-light);font-weight:400; }
.u-7a5ba { font-size:16px;font-weight:600;margin:24px 0 16px; }
.u-7bd5b { background:#fef3c7;color:#92400e; }
.u-7c423 { overflow-x:auto;max-height:400px;overflow-y:auto;border:1px solid var(--border);border-radius:8px; }
.u-7e08a { gap:16px; }
.u-80dfc { display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--bg-hover); }
.u-88a62 { display:none;align-items:center;gap:8px;padding:10px 16px;background:#fef3c7;color:#92400e;font-size:12px;font-weight:500;border-bottom:1px solid #fde68a;animation:syncPulse 2s ease-in-out infinite; }
.u-88a62.is-visible { display:flex; }
.u-88a62.creation-failed { background:#fef2f2;color:#991b1b;border-bottom:1px solid #fecaca;animation:none;flex-wrap:wrap; }
.modal-sync-banner-text { flex:1;min-width:220px; }
.modal-sync-banner-actions { margin-left:auto;display:flex;gap:8px;flex-wrap:wrap; }
.modal-sync-banner-btn { padding:6px 10px;font-size:12px;line-height:1.2; }
.u-88d57 { font-size:12px;background:var(--bg-hover);padding:2px 6px;border-radius:4px; }
.u-8a7f5 { background:var(--danger); }
.u-8cdf6 { padding:24px;text-align:center;color:var(--text-light); }
.u-8e869 { margin-bottom:16px; }
.u-8eaea { font-size:12px;color:var(--text-light);margin-left:8px; }
.u-8ec8f { display:flex;gap:8px;justify-content:flex-end;margin-top:24px; }
.u-90983 { font-size:11px;color:var(--text-muted); }
.u-946f2 { padding:10px 8px;text-align:left;font-size:11px;text-transform:uppercase;color:var(--text-muted);letter-spacing:0.5px; }
.u-948d0 { height:40px;width:auto;margin-bottom:20px;; }
.u-94eb9 { background:#dbeafe;color:#2563eb;padding:3px 8px;border-radius:4px;font-size:11px;font-weight:600; }
.u-9c1ac { padding:8px;font-size:11px;color:var(--text-muted); }
.u-9c33e { width:0%; }
.u-9c686 { display:flex;gap:8px; }
.u-9e2ec { display:flex;align-items:center;justify-content:space-between;margin-bottom:8px; }
.u-a10ca { font-size:13px;font-weight:600;margin-bottom:12px; }
.u-a1545 { padding:16px;background:var(--bg-hover);border-radius:8px; }
.u-a282e { flex:1;height:8px;border-radius:4px;position:relative; }
.u-a497e { max-width:140px; }
.u-a4ce8 { text-align:left;padding-left:20px; }
.u-a7314 { text-align:left;min-width:140px; }
.u-a7485 { height:100%;border-radius:4px;background:var(--success);width:0;transition:width 0.5s ease; }
.u-a7ceb { color:var(--danger); }
.u-a9ae0 { font-size:10px;padding:3px 8px;border-radius:10px;background:var(--bg-hover);color:var(--text-muted);white-space:nowrap;cursor:help; }
.u-aa7ca { background:#dc2626; }
.u-aabc4 { display:flex;gap:16px;flex-wrap:wrap;margin-bottom:20px; }
.u-aac7a { height:28px; }
.u-ab93d { padding:20px;text-align:center;color:var(--text-muted);font-size:13px; }
.u-abc52 { color:var(--text-muted);font-size:13px;padding:20px;text-align:center; }
.u-adba1 { background:#6b7280; }
.u-ae18a { max-width:420px; }
.u-af486 { display:none;margin-top:20px; }
.u-afb18 { text-align:center;color:var(--text-muted);padding:20px; }
.u-b0043 { margin-top:16px; }
.u-b03b5 { font-size:14px;font-weight:500; }
.u-b202c { cursor:pointer; }
.u-b3bdd { background:#fef3c7;color:#d97706;padding:3px 8px;border-radius:4px;font-size:11px;font-weight:600; }
.u-b4299 { font-size:12px;color:var(--text-muted);margin-bottom:12px; }
.u-b4705 { padding:8px;font-weight:500; }
.u-b522a { padding:16px;display:flex;align-items:center;gap:10px; }
.u-b8077 { font-size:14px;font-weight:600;margin-bottom:20px; }
.u-b9149 { background:var(--bg-hover);color:var(--text-muted);padding:3px 8px;border-radius:4px;font-size:11px;font-weight:600; }
.u-ba2b3 { font-weight:600;margin-bottom:8px; }
.u-bb7c8 { font-size:10px;padding:3px 6px;border:1px solid #bbf7d0;border-radius:4px;background:none;cursor:pointer;color:#16a34a; }
.u-bbc01 { display:flex;flex-direction:column;gap:12px; }
.u-bbd02 { padding:8px;white-space:nowrap; }
.u-bcf88 { font-size:10px; }
.u-be279 { width:10px;height:10px;border-radius:50%;display:inline-block; }
.u-c2fec { padding:8px; }
.u-c3383 { background:none;border:1px solid var(--border);padding:10px 16px;border-radius:8px;font-size:13px;cursor:pointer;font-family:inherit; }
.u-c46a0 { font-size:11px;color:var(--text-light); }
.u-c9dba { font-size:13px;color:var(--text-muted);line-height:1.8; }
.u-cb458 { display:none; }
.u-ce5ec { display:flex;gap:12px;flex-wrap:wrap;margin-top:12px; }
.u-cf5a2 { left:40%; }
.u-d05b9 { font-size:11px;color:var(--text-light);margin-bottom:20px;padding:8px 12px;background:var(--bg-hover);border-radius:6px; }
.u-d2719 { display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:14px; }
.u-d49c2 { padding:8px 12px;border:1px solid var(--border);border-radius:6px;font-size:13px;font-family:inherit;background:var(--bg); }
.u-d6ea9 { margin-top:6px;display:flex;gap:4px;justify-content:center; }
.u-d781c { position:sticky;top:0;background:var(--bg);z-index:1; }
.u-d7fba { display:flex;justify-content:space-between;margin-bottom:12px; }
.u-d92da { background:#16a34a; }
.u-d93e8 { color:var(--success);font-size:18px; }
.u-d9b9b { padding:8px;text-align:center;color:var(--text-muted); }
.u-da2f3 { background:#f3f4f6;color:#6b7280; }
.u-da9a9 { color:var(--danger);font-weight:600; }
.u-e18c4 { font-size:18px;font-weight:600;margin-bottom:8px; }
.u-e3330 { font-size:13px;color:var(--text-muted);margin-bottom:20px; }
.u-e4bb1 { font-size:24px;font-weight:700;color:var(--warning); }
.u-e4df0 { margin-top: 40px; padding-top: 20px; border-top: 1px solid #ddd; font-size: 11px; color: #888;; }
.u-e5e6f { font-size:20px; }
.u-e634e { font-weight:600; }
.u-e858d { font-size:13px;color:var(--text-muted);margin-bottom:8px; }
.u-e8fe4 { background:#dcfce7;color:#16a34a;padding:3px 8px;border-radius:4px;font-size:11px;font-weight:600; }
.u-e91e2 { width:auto;padding:10px 16px;font-size:13px; }
.u-e987c { color:#2563eb; }
.u-e9eed { background:none;border:1px solid var(--border);padding:5px 10px;border-radius:6px;font-size:12px;cursor:pointer;margin-right:4px; }
.u-ebb22 { width:60px;height:40px;background:var(--bg-alt);border-radius:4px;display:flex;align-items:center;justify-content:center; }
.u-ec591 { padding:4px 0; }
.u-edb6d { font-size:10px;padding:3px 6px;border:1px solid var(--border);border-radius:4px;background:none;cursor:pointer; }
.u-ef14a { font-size:48px;margin-bottom:16px; }
.u-f0097 { display:flex;align-items:center;justify-content:space-between;margin-bottom:20px; }
.u-f56ef { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.u-f6cfa { margin-top:20px;padding-top:16px;border-top:1px solid var(--border); }
.u-f7287 { display:flex;gap:8px;justify-content:flex-end;margin-top:20px;; }
.u-f77fd { font-size:12px;color:var(--text-muted);padding-top:4px; }
.u-f803a { background:none;border:none;color:var(--text-light);cursor:pointer;font-size:16px; }
.u-f8abe { font-size:13px;font-weight:600;width:50px;text-align:right; }
.u-f8cc9 { font-size:13px;font-weight:600;margin-bottom:4px;color:var(--text-muted); }
.u-fb1b6 { background:#16a34a15;color:#16a34a; }
.u-fb4d8 { display:flex;align-items:center;justify-content:space-between; }
.u-fd12f { background:#f5f5f5; }
.u-feb8d { font-size:20px;font-weight:700; }