* { margin: 0; padding: 0; box-sizing: border-box; }
    :root {
      --primary: #0284c7; --primary-light: #38bdf8; --accent: #06b6d4;
      --success: #10b981; --warning: #f59e0b; --danger: #ef4444;
      --dark: #0f172a; --dark-2: #1e293b; --dark-3: #334155;
      --light: #f1f5f9; --gray: #94a3b8;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: var(--dark); color: var(--light); min-height: 100vh;
    }
    #loginScreen {
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      z-index: 99999; padding: 2rem;
    }
    #loginScreen.hidden { display: none !important; }
    .login-box { text-align: center; max-width: 400px; width: 100%; }
    .login-logo { width: 100px; height: 100px; border-radius: 20px; margin-bottom: 1.5rem; }
    .login-title { color: #38bdf8; font-size: 1.75rem; margin-bottom: 0.25rem; }
    .login-subtitle { color: #94a3b8; font-size: 1rem; margin-bottom: 2rem; }
    .login-form {
      background: rgba(30,41,59,0.9); border: 1px solid rgba(2,132,199,0.2);
      border-radius: 16px; padding: 2rem;
    }
    .login-form label { display: block; color: #94a3b8; font-size: 0.85rem; margin-bottom: 0.5rem; text-align: left; }
    .login-form input {
      width: 100%; padding: 0.875rem 1rem; border-radius: 10px;
      border: 1px solid rgba(2,132,199,0.3); background: #334155; color: #f1f5f9;
      font-size: 1rem; margin-bottom: 1rem; outline: none;
    }
    .login-btn {
      width: 100%; padding: 1rem; border-radius: 10px; border: none;
      background: linear-gradient(135deg, #0284c7, #06b6d4); color: white;
      font-size: 1rem; font-weight: 700; cursor: pointer; margin-top: 0.5rem;
    }
    .login-error { color: #ef4444; font-size: 0.85rem; margin-top: 1rem; display: none; }
    #appContainer { display: none; min-height: 100vh; }
    #appContainer.active { display: flex !important; }
    .sidebar {
      width: 260px; background: var(--dark-2); border-right: 1px solid rgba(2,132,199,0.15);
      display: flex; flex-direction: column; position: fixed;
      top: 0; left: 0; bottom: 0; z-index: 100;
    }
    .sidebar-header { padding: 1.5rem; border-bottom: 1px solid rgba(2,132,199,0.15); display: flex; align-items: center; gap: 0.75rem; }
    .sidebar-header img { width: 40px; height: 40px; border-radius: 10px; }
    .sidebar-header h1 { font-size: 1.1rem; color: var(--primary-light); }
    .nav-menu { flex: 1; padding: 0.5rem 0.75rem; overflow-y: auto; }

    /* Security Bar */
    .security-bar { padding: 0.5rem 0.75rem; background: linear-gradient(135deg, rgba(6,182,212,0.08), rgba(2,132,199,0.08)); border-bottom: 1px solid rgba(2,132,199,0.12); display: flex; flex-direction: column; gap: 0.4rem; }
    .session-timer { font-size: 0.7rem; color: var(--info); font-weight: 600; text-align: center; padding: 0.2rem 0.5rem; background: rgba(6,182,212,0.1); border-radius: 6px; letter-spacing: 0.3px; }
    .session-timer.warning { color: #f59e0b; background: rgba(245,158,11,0.12); }
    .session-timer.danger { color: var(--danger); background: rgba(239,68,68,0.12); animation: pulse 1s infinite; }
    .privacy-toggle { font-size: 0.72rem; padding: 0.3rem 0.5rem; border: 1px solid rgba(2,132,199,0.25); background: rgba(2,132,199,0.08); color: var(--primary-light); border-radius: 6px; cursor: pointer; text-align: center; transition: all 0.2s; font-weight: 500; }
    .privacy-toggle:hover { background: rgba(2,132,199,0.15); }

    /* Privacy Mode: Mask sensitive data */
    body[data-privacy="on"] .privacy-phone,
    body[data-privacy="on"] .privacy-address,
    body[data-privacy="on"] .privacy-sensitive { filter: blur(4px); user-select: none; }
    body[data-privacy="on"] .privacy-sensitive { color: var(--gray); }

    @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
    .nav-item {
      display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem;
      border-radius: 10px; cursor: pointer; margin-bottom: 0.25rem;
      color: var(--gray); font-size: 0.9rem;
    }
    .nav-item:hover { background: rgba(2,132,199,0.1); color: var(--light); }
    .nav-item.active {
      background: linear-gradient(135deg, rgba(2,132,199,0.2), rgba(6,182,212,0.1));
      color: var(--primary-light); border-left: 3px solid var(--primary);
    }
    /* Sidebar record counters: keep badges visible and inside the row. */
    .nav-item > span:not(.nav-icon):not(.nav-badge) { min-width: 0; flex: 1 1 auto; line-height: 1.25; }
    .nav-item .nav-badge { display: inline-flex !important; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 24px; max-width: 52px; white-space: nowrap; overflow: hidden; }
    .nav-icon { font-size: 1.2rem; width: 28px; text-align: center; }
    .main-content { flex: 1; margin-left: 260px; display: flex; flex-direction: column; }
    .header {
      height: 64px; background: var(--dark-2); border-bottom: 1px solid rgba(2,132,199,0.15);
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 1.5rem; position: sticky; top: 0; z-index: 50;
    }
    .page-content { flex: 1; padding: 1.5rem; overflow-y: auto; }
    .stats-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1.25rem; margin-bottom: 1.5rem;
    }
    .stat-card {
      background: var(--dark-2); border: 1px solid rgba(2,132,199,0.15);
      border-radius: 12px; padding: 1.5rem;
    }
    .stat-value { font-size: 1.75rem; font-weight: 800; margin-bottom: 0.25rem; }
    .stat-label { font-size: 0.85rem; color: var(--gray); }
    .btn {
      padding: 0.625rem 1rem; border-radius: 8px; border: none;
      cursor: pointer; font-size: 0.85rem; font-weight: 600;
      display: inline-flex; align-items: center; gap: 0.5rem;
    }
    .btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8rem; }
    .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); color: white; }
    .btn-secondary { background: var(--dark-3); color: var(--light); border: 1px solid rgba(2,132,199,0.2); }
    .btn-success { background: var(--success); color: white; }
    .btn-info { background: #06b6d4; color: white; }
    .btn-info:hover { background: #0891b2; }
    .btn-danger { background: var(--danger); color: white; }
    .card {
      background: var(--dark-2); border: 1px solid rgba(2,132,199,0.15);
      border-radius: 12px; margin-bottom: 1.5rem;
    }
    .card-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(2,132,199,0.1); display: flex; align-items: center; justify-content: space-between; }
    .card-body { padding: 1.5rem; }
    table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
    th { text-align: left; padding: 0.875rem 1rem; color: var(--gray); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; border-bottom: 2px solid rgba(2,132,199,0.2); }
    td { padding: 0.875rem 1rem; border-bottom: 1px solid rgba(2,132,199,0.1); }
    .badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; }
    .badge-completed { background: rgba(16,185,129,0.2); color: #34d399; }
    .badge-pending { background: rgba(245,158,11,0.2); color: #fbbf24; }
    .badge-urgent { background: rgba(239,68,68,0.2); color: #f87171; }
    .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .form-group { display: flex; flex-direction: column; }
    .form-group.full-width { grid-column: 1 / -1; }
    .form-input, .form-select, .form-textarea {
      padding: 0.75rem 1rem; border-radius: 8px;
      border: 1px solid rgba(2,132,199,0.3); background: var(--dark-3);
      color: var(--light); font-size: 0.9rem; font-family: inherit;
    }
    .modal-overlay {
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
      display: none; align-items: center; justify-content: center;
      z-index: 1000; padding: 1rem;
    }
    .modal-overlay.active { display: flex; }
    .modal {
      background: var(--dark-2); border: 1px solid rgba(2,132,199,0.2);
      border-radius: 16px; width: 100%; max-width: 700px;
      max-height: 90vh; overflow: hidden;
      display: flex; flex-direction: column;
    }
    .modal-body { overflow-y: auto; max-height: calc(90vh - 140px); padding: 1.25rem 1.5rem; }
    .inventory-item-modal-body { overflow-x: hidden !important; }
    .inventory-item-modal-body .form-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      overflow: hidden !important;
    }
    .inventory-item-modal-body .form-group { min-width: 0; }
    .inventory-item-modal-body .form-input,
    .inventory-item-modal-body .form-select,
    .inventory-item-modal-body .form-textarea { width: 100%; min-width: 0; }
    .inventory-item-modal-body .form-group.full-width { grid-column: 1 / -1; }
    @media (max-width: 680px) {
      .inventory-item-modal-body .form-grid { grid-template-columns: minmax(0, 1fr) !important; }
      .inventory-item-modal-body .form-group.full-width { grid-column: auto; }
    }
    .modal-header, .modal-footer { padding: 1.25rem 1.5rem; }
    .modal-header { border-bottom: 1px solid rgba(2,132,199,0.15); display: flex; justify-content: space-between; align-items: center; }
    .modal-footer { border-top: 1px solid rgba(2,132,199,0.15); display: flex; justify-content: flex-end; gap: 0.75rem; }
    .quote-builder { display: flex; flex-direction: column; gap: 1rem; overflow-x: hidden; }
    .quote-section { background: rgba(15,23,42,0.28); border: 1px solid rgba(2,132,199,0.14); border-radius: 8px; padding: 1rem; }
    .quote-section-title { color: var(--primary-light); font-weight: 800; font-size: 0.85rem; text-transform: uppercase; margin-bottom: 0.85rem; }
    .quote-line-grid { display: grid; grid-template-columns: minmax(280px,1fr) 78px 110px 105px 145px 115px 108px; gap: 0.6rem; align-items: start; }
    .quote-line-head { color: var(--gray); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; padding-bottom: 0.5rem; border-bottom: 2px solid rgba(2,132,199,0.2); }
    .quote-item-row { padding: 0.75rem 0; border-bottom: 1px solid rgba(2,132,199,0.1); }
    .quote-item-row .form-input, .quote-item-row .form-textarea { width: 100%; min-width: 0; }
    .quote-item-product { margin-bottom: 0.45rem; }
    .quote-item-desc { min-height: 86px; resize: vertical; }
    .quote-total-cell { font-weight: 800; color: var(--success); padding: 0.75rem 0.25rem; line-height: 1.25; }
    .quote-row-actions { display: flex; gap: 0.3rem; align-items: center; flex-wrap: nowrap; }
    .quote-row-actions .btn { min-width: 30px; padding: 0.5rem 0.4rem; }
    .quote-row-actions .quote-move-btn:disabled { opacity: 0.3; cursor: not-allowed; }
    .quote-summary-panel { min-width: 320px; background: rgba(15,23,42,0.55); border: 1px solid rgba(2,132,199,0.12); border-radius: 8px; padding: 1rem; }
    .quote-summary-line { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
    @media (max-width: 980px) {
      .quote-line-head { display: none; }
      .quote-line-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .quote-line-grid > div:first-child { grid-column: 1 / -1; }
      .quote-summary-panel { min-width: 0; width: 100%; }
    }
    .toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 2000; display: flex; flex-direction: column; gap: 0.75rem; }
    .search-bar { display: flex; gap: 0.75rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
    .search-input-wrapper { flex: 1; min-width: 200px; position: relative; }
    .search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--gray); }
    .empty-state { text-align: center; padding: 3rem; color: var(--gray); }
    .tabs { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(2,132,199,0.15); }
    .tab-btn { padding: 0.875rem 1.25rem; background: none; border: none; color: var(--gray); font-size: 0.9rem; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; }
    .tab-btn.active { color: var(--primary-light); border-bottom-color: var(--primary); }
    .tab-panel { display: none; }
    .tab-panel.active { display: block; }
    .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
    .cal-day-header { text-align: center; padding: 12px 8px; font-size: 0.85rem; font-weight: 700; color: var(--gray); text-transform: uppercase; }
    .cal-cell { min-height: 80px; background: rgba(30,41,59,0.5); border: 1px solid rgba(2,132,199,0.15); border-radius: 10px; padding: 10px; }
    @media (max-width: 768px) {
      .sidebar { transform: translateX(-100%); width: 280px; }
      .sidebar.open { transform: translateX(0); }
      .main-content { margin-left: 0; }
      .header { padding-left: 3.5rem; }
    }
    #menuToggle {
      display: none;
      position: fixed;
      top: 1rem;
      left: 1rem;
      z-index: 200;
      background: var(--dark-3);
      border: 1px solid rgba(2,132,199,0.3);
      color: var(--primary-light);
      padding: 0.5rem 0.75rem;
      border-radius: 8px;
      font-size: 1.2rem;
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }
    @media (max-width: 768px) {
      #menuToggle { display: block; }
    }
    .sidebar-overlay {
      display: none;
      pointer-events: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.5);
      z-index: 99;
    }
    .sidebar-overlay.active { display: block; pointer-events: auto; }

    /* V286 reversible grouped portal shell. Business forms and actions are unchanged. */
    body.portal-design-v286 { background: #07111f; }
    body.portal-design-v286 .sidebar { width: 248px; background: #101d2e; border-right-color: rgba(56,189,248,.15); }
    body.portal-design-v286 .main-content { margin-left: 248px; background: #07111f; }
    body.portal-design-v286 .sidebar-header { min-height: 72px; padding: 1rem; }
    body.portal-design-v286 .sidebar-header h1::after { content: 'Work Portal'; display: block; margin-top: .18rem; color: var(--gray); font-size: .65rem; font-weight: 500; }
    body.portal-design-v286 .security-bar { padding: .55rem .75rem; }
    body.portal-design-v286 .nav-menu { padding: .55rem .65rem 5rem; }
    .portal-menu-tools { padding: .25rem 0 .65rem; }
    .portal-menu-search { width: 100%; min-height: 38px; padding: .55rem .7rem; color: var(--light); background: #07111f; border: 1px solid rgba(56,189,248,.18); border-radius: 10px; outline: none; }
    .portal-menu-search:focus { border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(56,189,248,.1); }
    .portal-menu-group { margin-bottom: .3rem; }
    .portal-menu-group-button { width: 100%; min-height: 34px; display: flex; align-items: center; gap: .5rem; padding: .45rem .55rem; color: var(--gray); background: transparent; border: 0; border-radius: 8px; cursor: pointer; font-size: .67rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: left; }
    .portal-menu-group-button:hover { color: var(--light); background: rgba(56,189,248,.06); }
    .portal-menu-group-button .portal-group-arrow { margin-left: auto; transition: transform .18s ease; }
    .portal-menu-group.collapsed .portal-group-arrow { transform: rotate(-90deg); }
    .portal-menu-group.collapsed .portal-menu-group-items { display: none; }
    .portal-menu-group-items .nav-item { min-height: 42px; margin-bottom: .12rem; padding: .62rem .7rem; border-radius: 9px; font-size: .82rem; }
    .portal-menu-group-items .nav-icon { width: 22px; font-size: 1rem; }
    .portal-menu-group-items .nav-item.active { border-left: 0; box-shadow: inset 3px 0 var(--primary); }
    .portal-menu-group[hidden], .portal-menu-group-items .nav-item.portal-menu-search-hidden { display: none !important; }
    .portal-logout-item { position: sticky; bottom: .4rem; z-index: 2; margin-top: .75rem !important; background: #101d2e; border: 1px solid rgba(239,68,68,.22); }
    body.portal-design-v286 .header { min-height: 64px; height: auto; background: #101d2e; padding: .65rem 1.1rem; }
    .portal-header-title { display: flex; flex-direction: column; gap: .12rem; }
    .portal-header-title strong { font-size: .95rem; }
    .portal-header-title small { color: var(--gray); font-size: .7rem; }
    .portal-live-chip { display: inline-flex; align-items: center; gap: .38rem; padding: .35rem .6rem; color: #34d399; background: rgba(16,185,129,.1); border-radius: 999px; font-size: .7rem; white-space: nowrap; }
    .portal-live-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #34d399; }
    body.portal-design-v286 .page-content { padding: 1.2rem; }
    body.portal-design-v286 .page-header { margin-bottom: 1rem; }
    body.portal-design-v286 .page-header h2 { font-size: 1.55rem; }
    body.portal-design-v286 .card, body.portal-design-v286 .stat-card { border-color: rgba(56,189,248,.12); box-shadow: 0 8px 26px rgba(0,0,0,.1); }
    body.portal-design-v286 .stat-card { padding: 1.15rem; }
    body.portal-design-v286 .search-bar { padding: .75rem; margin-bottom: 1rem; background: #101d2e; border: 1px solid rgba(56,189,248,.12); border-radius: 12px; }
    body.portal-design-v286 .table-container { border-radius: 10px; }
    body.portal-design-v286 tbody tr:hover { background: rgba(56,189,248,.045); }
    @media (max-width: 768px) {
      body.portal-design-v286 .sidebar { width: min(88vw, 320px); }
      body.portal-design-v286 .main-content { margin-left: 0; }
      body.portal-design-v286 .header { padding-left: 6.4rem; }
      body.portal-design-v286 .page-content { padding: .8rem .65rem 6rem; }
      .portal-menu-group-items .nav-item { min-height: 48px; font-size: .9rem; }
    }

    /* V288 full-page design system applied to every existing menu. */
    body.portal-design-v286 .page-content { background: radial-gradient(circle at top right, rgba(14,165,233,.055), transparent 28rem), #07111f; }
    body.portal-design-v286 .page-header { position: relative; padding: 1.05rem 1.15rem; background: linear-gradient(135deg, rgba(30,41,59,.96), rgba(15,35,54,.94)); border: 1px solid rgba(56,189,248,.13); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
    body.portal-design-v286 .page-header h2 { margin: .12rem 0 .28rem; font-size: 1.55rem; letter-spacing: -.02em; }
    body.portal-design-v286 .page-header p { color: #9fb1c5; font-size: .84rem; }
    .portal-page-eyebrow { color: var(--primary-light); font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .portal-dashboard-actions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .7rem; margin: 0 0 1rem; }
    .portal-quick-action { min-width: 0; display: grid; grid-template-columns: 34px 1fr; column-gap: .65rem; align-items: center; padding: .8rem .9rem; color: var(--light); background: #101d2e; border: 1px solid rgba(56,189,248,.13); border-radius: 12px; text-align: left; cursor: pointer; transition: transform .15s ease,border-color .15s ease,background .15s ease; }
    .portal-quick-action:hover { transform: translateY(-1px); border-color: rgba(56,189,248,.38); background: #14243a; }
    .portal-quick-action > span { grid-row: 1/3; width: 34px; height: 34px; display: grid; place-items: center; background: rgba(56,189,248,.1); border-radius: 9px; }
    .portal-quick-action strong { min-width: 0; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .portal-quick-action small { color: var(--gray); font-size: .67rem; }
    body.portal-design-v286 .stats-grid { grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: .7rem; margin-bottom: 1rem; }
    body.portal-design-v286 .stat-card { position: relative; min-height: 98px; padding: 1rem 1.05rem; overflow: hidden; background: linear-gradient(145deg,#111f31,#18283c); border: 1px solid rgba(56,189,248,.12); border-radius: 13px; }
    body.portal-design-v286 .stat-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--primary); }
    body.portal-design-v286 .stat-card.success::before { background: var(--success); }
    body.portal-design-v286 .stat-card.warning::before { background: var(--warning); }
    body.portal-design-v286 .stat-card.danger::before { background: var(--danger); }
    body.portal-design-v286 .stat-value, body.portal-design-v286 .stat-card > h3 { font-size: 1.55rem; line-height: 1.15; font-weight: 800; color: #f8fbff; }
    body.portal-design-v286 .stat-label, body.portal-design-v286 .stat-card > p { margin-top: .45rem; color: #9fb1c5; font-size: .75rem; }
    body.portal-design-v286 .card { background: #101d2e; border: 1px solid rgba(56,189,248,.12); border-radius: 14px; overflow: hidden; }
    body.portal-design-v286 .card-header { min-height: 55px; padding: .85rem 1rem; background: rgba(30,41,59,.48); border-bottom: 1px solid rgba(56,189,248,.1); }
    body.portal-design-v286 .card-header h3 { font-size: .98rem; letter-spacing: -.01em; }
    body.portal-design-v286 .card-body { padding: 1rem; }
    body.portal-design-v286 .search-bar { align-items: center; gap: .55rem; padding: .7rem; background: #101d2e; border-radius: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.1); }
    body.portal-design-v286 .form-input, body.portal-design-v286 .form-select, body.portal-design-v286 .form-textarea { min-height: 39px; background: #17283d; border-color: rgba(148,163,184,.2); border-radius: 9px; }
    body.portal-design-v286 .form-input:focus, body.portal-design-v286 .form-select:focus, body.portal-design-v286 .form-textarea:focus { outline: none; border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(56,189,248,.09); }
    body.portal-design-v286 .btn { min-height: 38px; border-radius: 9px; transition: transform .12s ease,filter .12s ease; }
    body.portal-design-v286 .btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
    body.portal-design-v286 .table-container { border: 1px solid rgba(56,189,248,.1); background: #0d1928; }
    body.portal-design-v286 table { font-size: .79rem; }
    body.portal-design-v286 th { padding: .72rem .8rem; background: #17263a; border-bottom: 1px solid rgba(56,189,248,.14); color: #9fb1c5; font-size: .66rem; letter-spacing: .035em; }
    body.portal-design-v286 td { padding: .72rem .8rem; border-bottom-color: rgba(148,163,184,.09); }
    body.portal-design-v286 tbody tr:nth-child(even) { background: rgba(148,163,184,.018); }
    body.portal-design-v286 .tabs { gap: .4rem; padding: .35rem; background: #101d2e; border: 1px solid rgba(56,189,248,.12); border-radius: 11px; }
    body.portal-design-v286 .tab-btn { padding: .65rem .9rem; border: 0; border-radius: 8px; }
    body.portal-design-v286 .tab-btn.active { color: #f8fbff; background: rgba(2,132,199,.28); }
    body.portal-design-v286 .auto-pagination-controls { padding: .75rem !important; background: rgba(15,23,42,.35); border-radius: 10px; }
    body.portal-design-v286 .modal { background: #101d2e; border-color: rgba(56,189,248,.2); box-shadow: 0 24px 70px rgba(0,0,0,.45); }
    body.portal-design-v286 .modal-header { background: #17263a; }
    @media (max-width: 900px) { .portal-dashboard-actions { grid-template-columns: repeat(2,minmax(0,1fr)); } }
    @media (max-width: 768px) {
      body.portal-design-v286 .page-header { padding: .9rem; }
      .portal-dashboard-actions { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; }
      .portal-quick-action { min-height: 58px; padding: .65rem; grid-template-columns: 29px 1fr; }
      .portal-quick-action > span { width: 29px; height: 29px; }
      body.portal-design-v286 .card-body { padding: .8rem; }
    }

    /* Aqua Best universal mobile-app layout */
    html, body { max-width: 100%; overflow-x: hidden; }
    .table-container { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    img, canvas, iframe { max-width: 100%; }
    @media (max-width: 768px) {
      body { font-size: 15px; -webkit-text-size-adjust: 100%; }
      #appContainer.active { width: 100%; min-width: 0; }
      .main-content { width: 100%; min-width: 0; }
      .sidebar { width: min(86vw, 330px); box-shadow: 12px 0 35px rgba(0,0,0,.55); padding-bottom: env(safe-area-inset-bottom, 0px); pointer-events:none; }
      .sidebar.open { z-index: 300; pointer-events:auto; }
      .sidebar-header { padding: 1rem; }
      .nav-menu { padding: .5rem .5rem calc(6rem + env(safe-area-inset-bottom, 0px)); }
      .nav-menu > .nav-item:last-child { position: sticky; bottom: calc(.6rem + env(safe-area-inset-bottom, 0px)); background: var(--dark-2); border: 1px solid rgba(239,68,68,.3); box-shadow: 0 -8px 18px rgba(15,23,42,.92); }
      .nav-item { min-height: 48px; padding: .75rem .85rem; font-size: .92rem; }
      #menuToggle { top: calc(1.15rem + env(safe-area-inset-top, 0px)); left: .65rem; width: 82px; max-width: 82px; padding: .55rem .45rem; min-height: 44px; font-size: .95rem; }
      .header { height: auto; min-height: 68px; margin-top: calc(.45rem + env(safe-area-inset-top, 0px)); padding: .55rem .65rem .55rem 6.55rem; gap: .45rem; align-items: center; border-radius: 0 0 10px 10px; }
      .sidebar { padding-top: env(safe-area-inset-top, 0px); }
      .header > div:first-child { min-width: 0; gap: .35rem !important; flex-direction: column; align-items: flex-start !important; line-height: 1.15; }
      .header > div:first-child > span:first-child { font-size: .82rem; white-space: normal; overflow-wrap: anywhere; }
      #syncIndicator { font-size: .65rem !important; }
      .header > div:last-child { gap: .35rem !important; flex-shrink: 0; }
      .header > div:last-child .btn { min-height: 40px; padding: .5rem .65rem; font-size: .74rem; }
      #topExportBtn, #topRefreshBtn { display: none !important; }
      .page-content { width: 100%; min-width: 0; padding: .85rem .7rem calc(6rem + env(safe-area-inset-bottom, 0px)); overflow-x: hidden; }
      .page-header { margin-bottom: .85rem; }
      .page-header h2 { font-size: 1.45rem; line-height: 1.2; }
      .page-header p { font-size: .88rem; line-height: 1.35; }
      .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .65rem; margin-bottom: 1rem; }
      .stat-card { padding: .9rem; min-width: 0; }
      .stat-value { font-size: 1.45rem; overflow-wrap: anywhere; }
      .stat-label { font-size: .74rem; line-height: 1.25; }
      .card { margin-bottom: .85rem; border-radius: 11px; min-width: 0; }
      .card-header { padding: .85rem; gap: .5rem; flex-wrap: wrap; }
      .card-header h3 { font-size: 1rem; line-height: 1.25; }
      .card-body { padding: .8rem; min-width: 0; overflow-wrap: anywhere; }
      .search-bar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; margin-bottom: .85rem; align-items: stretch; }
      .search-bar > input, .search-bar > select, .search-bar > label, .search-bar > .form-input, .search-bar > .form-select, .search-bar > .search-input-wrapper { grid-column: 1 / -1; width: 100% !important; min-width: 0 !important; max-width: 100%; }
      .search-bar > .btn { width: 100%; min-width: 0; min-height: 46px; justify-content: center; white-space: normal; text-align: center; line-height: 1.2; }
      .form-grid, .inventory-item-modal-body .form-grid { grid-template-columns: minmax(0,1fr) !important; gap: .75rem; }
      .form-group, .form-group.full-width { grid-column: auto !important; min-width: 0; }
      .form-input, .form-select, .form-textarea, input, select, textarea { max-width: 100%; min-width: 0; font-size: 16px; }
      .btn { min-height: 44px; justify-content: center; white-space: normal; text-align: center; touch-action: manipulation; }
      .tabs { overflow-x: auto; white-space: nowrap; padding-bottom: .15rem; -webkit-overflow-scrolling: touch; }
      .tab-btn { flex: 0 0 auto; min-height: 44px; padding: .7rem .85rem; }
      .modal-overlay {
        align-items: center;
        justify-content: center;
        padding:
          calc(.75rem + env(safe-area-inset-top, 0px))
          .7rem
          calc(.75rem + env(safe-area-inset-bottom, 0px));
        overflow: hidden;
      }
      .modal {
        width: min(100%, 680px) !important;
        max-width: 680px !important;
        max-height: calc(100dvh - 1.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        border-radius: 16px;
        margin: auto;
        box-shadow: 0 22px 70px rgba(0,0,0,.58);
      }
      .modal-header { padding: .9rem; }
      .modal-header h3 { font-size: 1.05rem; line-height: 1.25; }
      .modal-body {
        padding: .85rem;
        max-height: none;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
      }
      .modal-footer { padding: .7rem; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; }
      .modal-footer .btn { width: 100%; }
      .quote-section { padding: .7rem; }
      .quote-line-grid { grid-template-columns: minmax(0,1fr) !important; gap: .5rem; }
      .quote-line-grid > div, .quote-line-grid > div:first-child { grid-column: auto !important; }
      .quote-summary-panel { min-width: 0; width: 100%; }
      .cal-grid { gap: 3px; min-width: 620px; }
      .cal-cell { min-height: 68px; padding: 5px; }
      .toast-container { left: .6rem; right: .6rem; top: .6rem; }
      .toast { width: 100%; max-width: none; }

      /* Every data table becomes a readable mobile card list. */
      .table-container { overflow: visible; }
      :is(.table-container,.card) table.mobile-ready, :is(.table-container,.card) table.mobile-ready tbody, :is(.table-container,.card) table.mobile-ready tr, :is(.table-container,.card) table.mobile-ready td { display: block; width: 100%; }
      :is(.table-container,.card) table.mobile-ready thead { display: none; }
      :is(.table-container,.card) table.mobile-ready { border-collapse: separate; font-size: .86rem; }
      :is(.table-container,.card) table.mobile-ready tbody { display: grid; gap: .7rem; }
      :is(.table-container,.card) table.mobile-ready tr { background: rgba(15,23,42,.28); border: 1px solid rgba(56,189,248,.16); border-radius: 10px; padding: .35rem .7rem; overflow: hidden; }
      :is(.table-container,.card) table.mobile-ready td { min-height: 38px; padding: .55rem 0; border-bottom: 1px solid rgba(148,163,184,.13); text-align: right !important; overflow-wrap: anywhere; white-space: normal !important; }
      :is(.table-container,.card) table.mobile-ready td:last-child { border-bottom: 0; }
      :is(.table-container,.card) table.mobile-ready td::before { content: attr(data-label); float: left; max-width: 43%; padding-right: .65rem; color: var(--gray); font-size: .7rem; font-weight: 800; text-transform: uppercase; text-align: left; }
      :is(.table-container,.card) table.mobile-ready td[colspan] { text-align: center !important; }
      :is(.table-container,.card) table.mobile-ready td[colspan]::before { display: none; }
      :is(.table-container,.card) table.mobile-ready td .btn { display: inline-flex; width: auto; margin: .18rem .1rem; }
    }
    @media (max-width: 430px) {
      .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .search-bar { grid-template-columns: minmax(0,1fr); }
      .search-bar > * { grid-column: 1 !important; }
      .modal-footer { grid-template-columns: minmax(0,1fr); }
      .header > div:first-child > span:first-child { max-width: 112px; }
    }
/* v165: stable pagination controls for long portal lists */
.portal-compact-mode .portal-menu-group-items .nav-item { min-height: 34px; padding-top: .42rem; padding-bottom: .42rem; }
.portal-menu-group-items .nav-item { font-weight: 600; }
.portal-menu-group-button { font-weight: 750; }
.portal-logout-item { position: static; }
.portal-compact-mode .page-content { padding-top: .8rem; }
body.portal-light-mode { background: #f3f7fb; color: #172033; }
body.portal-light-mode .sidebar, body.portal-light-mode .header, body.portal-light-mode .card, body.portal-light-mode .stat-card, body.portal-light-mode .search-bar { background: #ffffff; color: #172033; }
body.portal-light-mode .main-content { background: #f3f7fb; }
body.portal-light-mode .nav-item, body.portal-light-mode .portal-menu-group-button { color: #475569; }
body.portal-light-mode .nav-item:hover, body.portal-light-mode .portal-menu-group-button:hover { background: #e8f3fb; color: #0f172a; }
body.portal-light-mode .portal-menu-search { background: #f8fafc; color: #172033; }
body.portal-light-mode .card-body, body.portal-light-mode table { color: #172033; }
body.portal-light-mode .page-content, body.portal-light-mode .page-content * { color: #172033; }
body.portal-light-mode .main-content, body.portal-light-mode .page-content { background: #f5f7fb; }
body.portal-light-mode .page-header, body.portal-light-mode .portal-dashboard-actions,
body.portal-light-mode .portal-quick-action, body.portal-light-mode .page-content > .card,
body.portal-light-mode .page-content > .stats-grid { background: #ffffff; color: #172033; }
body.portal-light-mode .portal-quick-action { border-color: #d7e1ec; box-shadow: 0 2px 8px rgba(15,23,42,.06); }
body.portal-light-mode .portal-quick-action:hover { background: #eef7fc; border-color: #7dd3fc; }
body.portal-light-mode .page-header { border-color: #d7e1ec; }
body.portal-light-mode .page-header h2, body.portal-light-mode .page-header p,
body.portal-light-mode .stat-value, body.portal-light-mode .stat-label,
body.portal-light-mode .card-header h3, body.portal-light-mode .card-body strong,
body.portal-light-mode .card-body p, body.portal-light-mode .card-body td,
body.portal-light-mode .card-body th { color: #172033; }
body.portal-light-mode .page-header p, body.portal-light-mode .stat-label,
body.portal-light-mode .card-body .text-muted, body.portal-light-mode .card-body small { color: #52647a; }
body.portal-light-mode .card-header { background: #e8eef5; border-bottom-color: #cbd5e1; }
body.portal-light-mode .stat-card { background: #ffffff; border-color: #cbd5e1; }
body.portal-light-mode .btn-secondary { background: #334155; color: #ffffff; border-color: #334155; }
body.portal-light-mode .table-container, body.portal-light-mode table { background: #ffffff; }
body.portal-light-mode .table-container th { background: #e8eef5; color: #172033; }
body.portal-light-mode .table-container td { border-color: #dbe4ee; }
body.portal-light-mode .portal-live-chip { color: #047857; background: #d1fae5; }
body.portal-light-mode .portal-live-chip::before { background: #10b981; }
@media (max-width: 768px) { .portal-theme-toggle, .portal-density-toggle { font-size: .68rem !important; padding: .45rem .5rem !important; } }
/* V293: complete clean light surface overrides */
body.portal-light-mode .page-content,
body.portal-light-mode .page-header,
body.portal-light-mode .portal-dashboard-actions,
body.portal-light-mode .portal-quick-action,
body.portal-light-mode .card,
body.portal-light-mode .stat-card,
body.portal-light-mode .card-header,
body.portal-light-mode .card-body { background-color: #ffffff !important; }
body.portal-light-mode .page-content { background: #f5f7fb !important; }
body.portal-light-mode .portal-quick-action { color: #172033 !important; }
body.portal-light-mode .portal-quick-action strong,
body.portal-light-mode .portal-quick-action small,
body.portal-light-mode .page-header h2,
body.portal-light-mode .page-header p { color: #172033 !important; }
body.portal-light-mode .card-header { background: #e8eef5 !important; color: #172033 !important; }
body.portal-light-mode input,
body.portal-light-mode select,
body.portal-light-mode textarea,
body.portal-light-mode .form-input,
body.portal-light-mode .form-select,
body.portal-light-mode .form-textarea { background: #ffffff !important; color: #172033 !important; border-color: #b9c7d6 !important; }
body.portal-light-mode select option { background: #ffffff !important; color: #172033 !important; }
body.portal-light-mode button,
body.portal-light-mode .btn,
body.portal-light-mode .tab-btn { color: #172033 !important; }
body.portal-light-mode button.btn-primary,
body.portal-light-mode button.btn-success,
body.portal-light-mode button.btn-danger,
body.portal-light-mode button.btn-secondary,
body.portal-light-mode .btn-primary,
body.portal-light-mode .btn-success,
body.portal-light-mode .btn-danger,
body.portal-light-mode .btn-secondary,
body.portal-light-mode .tab-btn.active,
body.portal-light-mode .tab-btn[aria-selected="true"] { color: #ffffff !important; }
body.portal-light-mode button:disabled,
body.portal-light-mode .btn:disabled { color: #64748b !important; background: #e5e7eb !important; border-color: #d1d5db !important; opacity: 1 !important; }
body.portal-light-mode button:not(:disabled),
body.portal-light-mode .btn:not(:disabled),
body.portal-light-mode .tab-btn:not(:disabled) { background: #334155 !important; color: #ffffff !important; border-color: #334155 !important; }
body.portal-light-mode button:not(:disabled):hover,
body.portal-light-mode .btn:not(:disabled):hover,
body.portal-light-mode .tab-btn:not(:disabled):hover { background: #1e293b !important; color: #ffffff !important; }
body.portal-light-mode .portal-quick-action { background: #334155 !important; color: #ffffff !important; }
body.portal-light-mode .portal-quick-action strong,
body.portal-light-mode .portal-quick-action small { color: #ffffff !important; }
body.portal-light-mode table td,
body.portal-light-mode table td strong,
body.portal-light-mode table td a,
body.portal-light-mode table td span,
body.portal-light-mode table td .badge,
body.portal-light-mode table td .status,
body.portal-light-mode .table-container td { font-weight: 600 !important; }
body.portal-light-mode table td strong,
body.portal-light-mode table td:first-child { font-weight: 750 !important; }
body.portal-light-mode .stat-card .stat-label,
body.portal-light-mode .stat-card small,
body.portal-light-mode .stat-card p,
body.portal-light-mode .stat-card .label,
body.portal-light-mode .stat-card [class*="label"] { color: #172033 !important; font-weight: 600 !important; }
/* V299: dark, readable light-mode content across every menu */
body.portal-light-mode #pageContent p,
body.portal-light-mode #pageContent span,
body.portal-light-mode #pageContent div,
body.portal-light-mode #pageContent li,
body.portal-light-mode #pageContent a,
body.portal-light-mode #pageContent td,
body.portal-light-mode #pageContent th,
body.portal-light-mode #pageContent label,
body.portal-light-mode #pageContent small,
body.portal-light-mode #pageContent strong { color: #172033 !important; font-weight: 550; }
body.portal-light-mode #pageContent button,
body.portal-light-mode #pageContent .btn { color: #ffffff !important; font-weight: 650 !important; }
body.portal-light-mode #pageContent .badge,
body.portal-light-mode #pageContent .status,
body.portal-light-mode #pageContent [class*="status"] { font-weight: 700 !important; }
/* V300: readable white popups in light mode */
body.portal-light-mode .modal,
body.portal-light-mode .modal-header,
body.portal-light-mode .modal-body,
body.portal-light-mode .modal-footer,
body.portal-light-mode .modal-content,
body.portal-light-mode .modal-card { background: #ffffff !important; color: #172033 !important; }
body.portal-light-mode .modal h1,
body.portal-light-mode .modal h2,
body.portal-light-mode .modal h3,
body.portal-light-mode .modal p,
body.portal-light-mode .modal span,
body.portal-light-mode .modal div,
body.portal-light-mode .modal label,
body.portal-light-mode .modal strong,
body.portal-light-mode .modal small,
body.portal-light-mode .modal td,
body.portal-light-mode .modal th { color: #172033 !important; }
body.portal-light-mode .modal-header { border-bottom-color: #d7e1ec !important; }
body.portal-light-mode .modal-footer { border-top-color: #d7e1ec !important; }
body.portal-light-mode .modal button { color: #ffffff !important; }
body.portal-light-mode .modal input,
body.portal-light-mode .modal select,
body.portal-light-mode .modal textarea { background: #ffffff !important; color: #172033 !important; border-color: #b9c7d6 !important; }
body.portal-light-mode .portal-dashboard-actions .portal-quick-action,
body.portal-light-mode .portal-dashboard-actions .portal-quick-action span,
body.portal-light-mode .portal-dashboard-actions .portal-quick-action strong,
body.portal-light-mode .portal-dashboard-actions .portal-quick-action small { color: #ffffff !important; font-weight: 700 !important; }
.portal-dashboard-actions .portal-quick-action,
.portal-dashboard-actions .portal-quick-action strong,
.portal-dashboard-actions .portal-quick-action small { background: #334155 !important; color: #ffffff !important; font-weight: 700 !important; }
#pageContent .portal-dashboard-actions .portal-quick-action,
#pageContent .portal-dashboard-actions .portal-quick-action span,
#pageContent .portal-dashboard-actions .portal-quick-action strong,
#pageContent .portal-dashboard-actions .portal-quick-action small { background: #334155 !important; color: #ffffff !important; font-weight: 700 !important; }
body.portal-light-mode input::placeholder,
body.portal-light-mode textarea::placeholder { color: #64748b !important; opacity: 1; }
body.portal-light-mode .btn:not(.btn-danger):not(.btn-success):not(.btn-primary) { color: #ffffff; }
.performance-pagination{display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap;padding:.9rem 0;color:var(--gray);font-size:.82rem}
.performance-pagination[hidden]{display:none!important}
.performance-pagination button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:600px){.performance-pagination{position:sticky;bottom:calc(env(safe-area-inset-bottom,0px) + .4rem);z-index:20;margin:.5rem;background:rgba(15,23,42,.96);border:1px solid var(--border);border-radius:12px;padding:.65rem}.performance-pagination .btn{min-height:42px}}
@media (max-width: 760px) {
  .quick-location-grid {
    grid-template-columns: 1fr !important;
  }

  #quickLocationCustomerResults {
    max-height: 32vh !important;
  }
}