:root{
    --bg:#f0f4f8;
    --card:#ffffff;
    --surface:#f8fafc;
    --surface-2:#f1f5f9;

    --text:#1e293b;
    --heading:#0f172a;
    --muted:#475569;
    --placeholder:#94a3b8;

    --line:#e2e8f0;
    --line-strong:#94a3b8;

    --blue:#1d4ed8;
    --secondary:#0f172a;
    --red:#dc2626;

    --okbg:#ecfdf5;
    --okline:#86efac;

    --input-bg:#ffffff;
    --input-text:#1e293b;
    --input-border:#cbd5e1;

    --button-secondary-bg:#ffffff;
    --button-secondary-text:#1e293b;
    --button-secondary-border:#cbd5e1;

    --button-danger-bg:#fff1f2;
    --button-danger-text:#dc2626;
    --button-danger-border:rgba(220,38,38,.4);

    --tab-bg:#ffffff;
    --tab-text:#334155;
    --tab-border:#cbd5e1;

    --table-head-bg:#f1f5f9;
    --table-row-bg:transparent;
    --table-row-alt:#f8fafc;

    --blue-bg:#eff6ff;

    --shadow-soft:0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(15,23,42,.08);
    --shadow-primary:0 8px 18px rgba(29,78,216,.22);

    --card-shadow:0 1px 3px rgba(0,0,0,.1), 0 2px 8px rgba(15,23,42,.06);
    --card-shadow-hover:0 4px 16px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.08);

    --card-border:#e2e8f0;
    --card-head-border:#f1f5f9;

    --red:#dc2626;
    --green:#22c55e;
    --purple:#7c3aed;
    --whatsapp:#25D366;

    --success-bg:#ecfdf5;
    --success-text:#065f46;
    --success-border:#a7f3d0;
    --danger-bg:#fef2f2;
    --danger-text:#991b1b;
    --danger-border:#fecaca;
    --warning-bg:#fffbeb;
    --warning-text:#92400e;
    --warning-border:#fde68a;
    --info-bg:#eff6ff;
    --info-text:#1e40af;
    --info-border:#bfdbfe;

    --status-active:#22c55e;
    --status-inactive:#ef4444;
    --status-pending:#f59e0b;
    --modal-backdrop:rgba(0,0,0,.5);
  }

  *{
    box-sizing:border-box;
  }

  ::-webkit-scrollbar{width:8px;height:8px;}
  ::-webkit-scrollbar-track{background:var(--bg);}
  ::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;}
  ::-webkit-scrollbar-thumb:hover{background:var(--muted);}

  html, body{
    min-height:100%;
  }

  body{
    margin:0;
    font-family:Arial, sans-serif;
    padding:24px clamp(16px, 2vw, 32px);
    background:var(--bg);
    color:var(--text);
    transition:background .25s ease, color .25s ease;
    overflow-wrap:break-word;
    word-break:break-word;
  }

  a{
    color:var(--blue);
    text-decoration:none;
  }

  a:hover{
    text-decoration:underline;
  }

  .wrap{
    width:min(1720px, 100%);
    margin:0 auto;
  }

  .brandbar{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:20px;
    padding:4px 0;
    flex-wrap:wrap;
  }

  .brandlogo-shell{
    width:68px;
    height:68px;
    border-radius:18px;
    overflow:hidden;
    background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
    border:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
  }

  .brandlogo{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  .brandlogo-fallback{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:22px;
    color:#fff;
    background:linear-gradient(135deg, var(--blue), var(--secondary));
  }

  .brandcopy{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
  }

  .brandeyebrow{
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--muted);
  }

  h1{
    margin:0;
    font-size:clamp(34px, 3vw, 54px);
    line-height:1.05;
    color:var(--heading);
    font-weight:800;
  }

  h2, h3, h4{
    color:var(--heading);
  }

  .brandsubtitle{
    font-size:14px;
    color:var(--muted);
  }

  .card{
    background:var(--card);
    border-radius:20px;
    box-shadow:var(--card-shadow, var(--shadow-soft));
    padding:24px 28px;
    margin:24px 0;
    border:1px solid var(--line);
    overflow:hidden;
    transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
  }

  .card:hover{
    box-shadow:var(--card-shadow-hover, var(--shadow-soft));
  }

  .row{
    display:flex;
    gap:16px;
    align-items:center;
    flex-wrap:wrap;
  }

  input, select, textarea{
    padding:10px 14px;
    height:42px;
    font-size:max(16px, 1rem); /* >= 16px prevents iOS Safari auto-zoom on focus */
    border:1px solid var(--line);
    border-style:solid;
    border-radius:10px;
    outline:none;
    min-width:0;
    max-width:100%;
    background-color:var(--input-bg);
    color:var(--input-text);
    transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
    box-sizing:border-box;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.05);
  }

  input[type="radio"],
  input[type="checkbox"]{
    height:auto;
    padding:0;
    box-shadow:none;
    border-radius:3px;
  }

  textarea{
    height:auto;
    min-height:80px;
  }

  input::placeholder,
  textarea::placeholder{
    color:var(--placeholder);
    opacity:1;
  }

  select{
    color:var(--input-text);
    -webkit-appearance:none;
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    padding-right:32px;
    cursor:pointer;
  }

  label{
    margin-bottom:6px;
    font-size:13px;
    font-weight:600;
    color:var(--muted);
  }

  .check-item label,
  .check-group label,
  .col-toggle label{
    margin-bottom:0;
  }

  input:focus, select:focus, textarea:focus{
    border-color:var(--blue);
    border-style:solid;
    outline:none;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent);
  }

  input[type="checkbox"]{
    min-width:auto;
    width:16px;
    height:16px;
    padding:0;
    margin:0;
    flex:0 0 auto;
    accent-color:var(--blue);
    box-shadow:none;
  }

  .check-group{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
  }

  .check-item{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 0;
    min-width:auto;
    cursor:pointer;
    user-select:none;
  }

  button{
    padding:10px 20px;
    border:1px solid var(--button-secondary-border);
    background:var(--button-secondary-bg);
    color:var(--button-secondary-text);
    border-radius:12px;
    cursor:pointer;
    transition:all .18s ease;
    font-weight:600;
  }

  button:hover{
    transform:translateY(-1px);
  }

  button:disabled{
    opacity:.55;
    cursor:not-allowed;
    transform:none;
    filter:none;
    box-shadow:none;
  }

  button.primary{
    padding:12px 24px;
    background:var(--blue);
    color:#ffffff;
    border-color:var(--blue);
    box-shadow:var(--shadow-primary);
  }

  button.primary:hover{
    filter:brightness(1.03);
  }

  button.danger{
    background:var(--button-danger-bg);
    color:var(--button-danger-text);
    border-color:var(--button-danger-border);
  }

  button.small{
    padding:7px 10px;
    border-radius:10px;
    font-size:12px;
  }

  .pill{
    display:inline-block;
    padding:6px 14px;
    border-radius:999px;
    background:rgba(148,163,184,.18);
    border:1px solid rgba(148,163,184,.18);
    font-size:12px;
    color:var(--text);
  }

  .tabs{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    margin-top:18px;
  }

  .tabs button{
    border-radius:999px;
    padding:10px 20px;
    background:var(--tab-bg);
    color:var(--tab-text);
    border:1px solid var(--tab-border);
    box-shadow:0 1px 2px rgba(0,0,0,.05);
    font-weight:500;
  }

  .tabs button:hover:not(.active){
    background:var(--surface-2, #e8edf3);
    border-color:var(--line-strong, #94a3b8);
  }

  .tabs button.active{
    background:var(--blue);
    color:#fff;
    border-color:var(--blue);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent);
    font-weight:600;
  }

  .muted{
    color:var(--muted);
  }

  .panel{
    min-height:clamp(460px, 58vh, 900px);
    margin-top:20px;
    border:1px solid var(--line);
    background:var(--surface);
    border-radius:18px;
    padding:24px;
    transition:background .25s ease, border-color .25s ease;
  }

  .hr{
    height:1px;
    background:var(--line);
    margin:18px 0 20px 0;
  }

  .msg{
    margin-top:16px;
    padding:16px 20px;
    border-radius:14px;
    border:1px solid var(--line);
    background:var(--card);
    color:var(--text);
  }

  .msg.ok{
    border-color:var(--okline);
    background:var(--okbg);
    color:var(--success-text, #166534);
    font-weight:600;
  }

  .msg.err{
    border-color:var(--danger-border, #fecaca);
    background:var(--danger-bg, #fef2f2);
    color:var(--danger-text, #991b1b);
    font-weight:600;
  }

  .license-warning-banner{
    background:#fffbeb;
    color:#92400e;
    border:1px solid #fde68a;
    border-radius:10px;
    padding:12px 20px;
    margin-bottom:12px;
    font-weight:600;
    font-size:.9em;
    text-align:center;
  }

  .empty-state{
    margin-top:16px;
    padding:32px 24px;
    border-radius:16px;
    border:1px dashed var(--line);
    background:var(--surface, rgba(255,255,255,.28));
    text-align:center;
    color:var(--muted);
  }

  .table-wrap{
    overflow-x:auto;
    border-radius:14px;
    margin-top:16px;
  }

  table{
    width:100%;
    min-width:720px;
    border-collapse:collapse;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
  }

  th, td{
    padding:12px 14px;
    border-bottom:1px solid var(--line);
    text-align:left;
    font-size:14px;
    color:var(--text);
  }
  th{
    white-space:nowrap;
  }
  td{
    overflow-wrap:break-word;
    word-break:break-word;
  }

  th{
    background:var(--table-head-bg);
    color:var(--heading);
  }

  tr:last-child td{
    border-bottom:none;
  }

  tbody tr{
    background:var(--table-row-bg);
  }

  .right{
    margin-left:auto;
  }

  .grid2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    width:100%;
    min-width:0;
  }

  .grid2 > *{
    min-width:0;
    max-width:100%;
  }

  .soft-block{
    border:1px solid var(--line);
    border-radius:16px;
    padding:24px;
    background:var(--surface);
  }

  .section-title{
    margin:0 0 12px 0;
    font-size:16px;
    font-weight:700;
    color:var(--heading);
  }

  .section-copy{
    margin:0 0 16px 0;
    color:var(--muted);
  }

  .check-row{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    margin-top:10px;
  }

  .check-item input[type="checkbox"]{
    margin:0;
    min-width:auto;
    width:auto;
    flex:0 0 auto;
  }

  #topCard{
    overflow:visible;
  }
  #topCard .right .muted{
    white-space:nowrap;
  }

  #topLogoutBtn{
    height:32px;
    padding:4px 12px;
    font-size:12px;
    border-radius:10px;
    line-height:1;
  }

  #licText{
    font-size:12px;
    line-height:1.2;
  }

  .report-filter-grid{
    display:grid;
    gap:18px 14px;
    align-items:start;
    width:100%;
    min-width:0;
  }

.report-filter-grid.stock-low{
  grid-template-columns:minmax(220px, 1fr) minmax(220px, 1fr) 220px;
}

.report-filter-grid.with-range{
  grid-template-columns:minmax(220px, 1fr) minmax(220px, 1fr) minmax(220px, 1fr) 220px;
}

  .report-field{
    min-width:0;
    max-width:100%;
  }

  .report-field label{
    display:block;
    margin-bottom:8px;
    font-size:13px;
    color:var(--muted);
  }

  .report-field input,
  .report-field select,
  .report-field textarea{
    width:100%;
    min-width:0;
  }

.report-field input[type="date"],
.report-field input[type="number"],
#reportsCenterModal input[type="date"]{
  width:100%;
  min-width:0;
  height:40px;
  min-height:40px;
  line-height:1.2;
  padding:12px 14px;
  appearance:none;
  -webkit-appearance:none;
  background:var(--input-bg);
  color:var(--input-text);
  border:1px solid var(--line);
  border-radius:12px;
  box-sizing:border-box;
}

.report-field input[type="date"]::-webkit-date-and-time-value,
#reportsCenterModal input[type="date"]::-webkit-date-and-time-value{
  text-align:left;
}

.report-field input[type="date"]::-webkit-calendar-picker-indicator,
#reportsCenterModal input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:1;
  cursor:pointer;
  filter:none;
}

.report-field input[type="date"]::-webkit-clear-button,
#reportsCenterModal input[type="date"]::-webkit-clear-button{
  display:none;
}

.report-field input[type="date"]::-webkit-inner-spin-button,
#reportsCenterModal input[type="date"]::-webkit-inner-spin-button{
  display:none;
}

  .report-field .field-hint{
    margin-top:10px;
    font-size:12px;
    line-height:1.45;
    color:var(--muted);
  }

.report-field.report-action{
  width:100%;
  min-width:0;
  max-width:220px;
  padding-top:29px;
  align-self:start;
}

  .report-field.report-action label{
    display:none;
  }

  .report-field.report-action button{
    width:100%;
    height:40px;
    min-height:40px;
  }

  .product-list-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:18px;
  }

  .product-list-toolbar .toolbar-left,
  .product-list-toolbar .toolbar-right{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }

  .product-list-toolbar .toolbar-right select{
    width:auto;
    min-width:88px;
  }

  @media (max-width: 980px){
    .grid2{
      grid-template-columns:1fr;
    }

    .brandbar{
      align-items:flex-start;
    }

    input, select, textarea{
      min-width:0;
      width:100%;
      flex:1 1 180px;
    }

    .row > button{
      flex:0 0 auto;
    }

    .report-filter-grid,
    .report-filter-grid.stock-low,
    .report-filter-grid.with-range{
      grid-template-columns:1fr !important;
      gap:24px !important;
    }

    .report-field{
      width:100%;
      min-width:0;
    }

    .report-field label{
      margin-bottom:8px;
    }

.report-field input[type="date"],
#reportsCenterModal input[type="date"],
#r_threshold{
  width:100%;
  min-width:0 !important;
  display:block;
  text-align:left;
  height:42px !important;
  min-height:42px !important;
  padding:6px 10px !important;
}

    .report-field .field-hint{
      margin-top:10px;
      line-height:1.55;
    }

    .report-field.report-action{
      width:100%;
      justify-self:stretch;
      align-self:stretch;
    }

    .report-field.report-action button{
      width:100%;
      min-height:40px;
    }
  }

  @media (max-width: 640px){
    body{
      padding:12px;
    }

    .card{
      padding:20px;
      border-radius:16px;
    }

    .panel{
      padding:16px;
      border-radius:16px;
      min-height:auto;
    }

    .brandbar{
      gap:12px;
      align-items:flex-start;
    }

    .brandlogo-shell{
      width:54px;
      height:54px;
      border-radius:14px;
    }

    h1{
      font-size:28px;
      line-height:1.08;
    }

    .tabs{
      display:flex !important;
      flex-wrap:nowrap !important;
      overflow-x:auto !important;
      -webkit-overflow-scrolling:touch;
      gap:6px !important;
      padding:8px 4px !important;
      scrollbar-width:none;
    }
    .tabs::-webkit-scrollbar{display:none}
    .tabs button{
      flex:0 0 auto !important;
      white-space:nowrap !important;
      font-size:12px !important;
      padding:8px 14px !important;
      border-radius:20px !important;
    }

    .row{
      align-items:stretch;
    }

    .row > input,
    .row > select,
    .row > textarea,
    .row > button{
      width:100%;
      min-width:0 !important;
      flex:1 1 100% !important;
    }

    #panel .row{
      flex-direction:column;
      align-items:stretch;
    }

    #panel .row > input,
    #panel .row > select,
    #panel .row > textarea,
    #panel .row > button{
      width:100%;
      min-width:0 !important;
      flex:1 1 100% !important;
    }

    #sm_product,
    #sm_type,
    #sm_reason,
    #sm_qty,
    #sm_note,
    #m_limit{
      width:100%;
      min-width:0 !important;
      flex:1 1 100% !important;
    }

    #sm_note{
      min-width:0 !important;
    }

    #productGalleryModal .row > button,
    #myPreferencesModal .row > button{
      width:auto;
    }

    #topCard > .row{
      width:100%;
      display:grid;
      grid-template-columns:1fr;
      gap:12px;
      align-items:start;
    }

    #topCard > .row > .row:first-child{
      width:100%;
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:8px;
    }

    #topCard > .row > .row:first-child .pill{
      max-width:100%;
      white-space:normal;
      word-break:break-word;
      line-height:1.35;
      padding:8px 12px;
    }

    #topRoleText{
      display:block;
      margin-left:0 !important;
    }

    #topCard .right{
      margin-left:0;
      width:100%;
      display:flex !important;
      flex-direction:column;
      align-items:stretch !important;
      gap:10px;
    }

    #licText{
      white-space:normal;
      word-break:break-word;
      line-height:1.45;
    }

    #topCard .right .row{
      width:100%;
      display:grid;
      grid-template-columns:auto 1fr auto;
      gap:10px;
      align-items:center;
      justify-content:initial !important;
    }

    #topEmailText{
      min-width:0;
      display:block;
      white-space:normal;
      word-break:break-word;
      line-height:1.35;
    }

    #topLogoutBtn{
      width:100%;
      max-width:120px;
      min-width:96px;
      justify-self:end;
    }

    #appCard,
    #panel,
    #p_catalogs,
    #p_create_wrap,
    #p_edit,
    #s_view,
    #m_view,
    #r_low,
    #r_mov,
    #rs_view,
    #u_list,
    #brand_list,
    #category_list,
    #p_list{
      width:100%;
      max-width:100%;
      min-width:0;
    }

    #panel > *{
      min-width:0;
      max-width:100%;
    }

    #panel .card,
    #panel .soft-block,
    #panel .grid2{
      width:100%;
      max-width:100%;
      min-width:0;
    }

    #panel h2,
    #panel h3,
    #panel h4,
    #panel p{
      max-width:100%;
      word-break:break-word;
    }

    #panel .grid2{
      grid-template-columns:1fr !important;
    }

    #panel .grid2 > div{
      width:100%;
      max-width:100%;
      min-width:0;
    }

    #sm_msg,
    #s_view,
    #m_view{
      width:100%;
      max-width:100%;
      min-width:0;
    }

    .table-wrap{
      width:100%;
      max-width:100%;
      overflow-x:auto;
      overflow-y:hidden;
      -webkit-overflow-scrolling:touch;
    }

    table{
      min-width:640px;
    }

    #s_view,
    #m_view,
    #r_low,
    #r_mov,
    #rs_view,
    #u_list,
    #brand_list,
    #category_list,
    #p_list{
      width:100%;
      max-width:100%;
      min-width:0;
      overflow:hidden;
    }

    #myPreferencesModal,
    #productGalleryModal{
      padding:12px !important;
    }

    #productGalleryModal .pg-layout{
      display:block !important;
    }

    #productGalleryModal .pg-main{
      margin-bottom:14px;
    }

    #productGalleryModal .pg-preview-wrap{
      min-height:auto !important;
      padding:12px !important;
    }

    #productGalleryModal .pg-preview-box{
      width:min(100%, 320px) !important;
      margin:0 auto;
    }

    #productGalleryModal .pg-thumbs{
      display:flex;
      gap:8px;
      flex-wrap:nowrap;
      overflow-x:auto;
      padding-bottom:4px;
      -webkit-overflow-scrolling:touch;
    }

    #productGalleryModal .pg-info{
      gap:10px !important;
    }

    #productGalleryModal .pg-header{
      gap:10px;
    }

    #productGalleryModal .pg-header .right{
      margin-left:0;
      width:100%;
    }

    #productGalleryModal .pg-header .right.row{
      justify-content:flex-start !important;
    }

    #productGalleryModal .pg-nav-btn{
      width:40px !important;
      min-width:40px;
      height:40px;
      padding:0;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:12px;
    }
  }

  /* ===== RESPONSIVE / MOBILE (iPhone Safari) ENHANCEMENTS ===== */

  /* Prevent horizontal overflow globally */
  html{
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
  }

  body{
    overflow-x:hidden;
    -webkit-tap-highlight-color:transparent;
    padding-bottom:env(safe-area-inset-bottom);
  }

  /* iOS zoom prevention: inputs must be >= 16px */
  @media (max-width: 768px){
    input, select, textarea{
      font-size:16px !important;
      -webkit-appearance:none;
      appearance:none;
      touch-action:manipulation;
      padding:8px 12px !important;
      height:42px !important;
      max-height:42px !important;
      min-height:0 !important;
      line-height:1.3;
      box-sizing:border-box !important;
      min-width:0 !important;
      width:100%;
      max-width:100%;
    }
    select{
      height:42px !important;
      max-height:42px !important;
      padding-right:28px !important;
    }
    textarea{
      height:auto !important;
      max-height:none !important;
      min-height:60px !important;
    }

    /* iOS date/time inputs tend to render tall — constrain them */
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"]{
      padding:5px 8px !important;
      min-height:32px;
      -webkit-appearance:none;
      appearance:none;
    }

    /* iOS select native rendering — tighter */
    select{
      -webkit-appearance:none;
      appearance:none;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667085' d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
      background-repeat:no-repeat;
      background-position:right 8px center;
      padding-right:26px !important;
    }

    /* Touch-friendly targets */
    button{
      min-height:34px;
      min-width:36px;
      max-width:100%;
    }

    button.small{
      min-height:30px;
      min-width:30px;
    }

    input[type="checkbox"]{
      -webkit-appearance:checkbox !important;
      appearance:checkbox !important;
      height:18px !important;
      max-height:18px !important;
      min-height:auto !important;
      min-width:auto !important;
      max-width:18px !important;
      width:18px !important;
      padding:0 !important;
      flex:0 0 auto !important;
    }

    /* Report column toggles — horizontal wrap on mobile */
    .report-columns-toggle{
      gap:8px !important;
      padding:10px 12px !important;
    }
    .col-toggle{
      font-size:13px !important;
      gap:6px !important;
      padding:4px 0 !important;
    }
    .col-toggle input[type="checkbox"]{
      -webkit-appearance:checkbox !important;
      appearance:checkbox !important;
      width:18px !important;
      height:18px !important;
      min-width:18px !important;
      accent-color:var(--blue);
    }

    /* Sub-tab bar: horizontal scroll on mobile */
    .sub-tab-bar{
      display:flex !important;
      flex-wrap:nowrap !important;
      overflow-x:auto !important;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      width:100% !important;
    }
    .sub-tab-bar::-webkit-scrollbar{display:none}
    .sub-tab-bar button{
      flex:0 0 auto !important;
      white-space:nowrap !important;
      font-size:12px !important;
      padding:8px 14px !important;
    }

    /* Presale sub-tabs: horizontal scroll on mobile */
    .presale-sub-tabs{width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;flex-wrap:nowrap!important;scrollbar-width:none;}
    .presale-sub-tabs::-webkit-scrollbar{display:none;}

    /* Table responsive wrappers */
    .table-wrap,
    .stock-table-wrap,
    .premium-table{
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      max-width:100%;
    }

    /* Modal fixes for mobile */
    #myPreferencesModal > div,
    #importProductsModal > div,
    #productGalleryModal > div,
    #reportsCenterModal > div,
    #warehousesAdminModal > div,
    #tenantSettingsModal > div{
      width:95vw !important;
      max-width:none !important;
      max-height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px) !important;
      overflow-y:auto !important;
      overflow-x:hidden !important;
      border-radius:14px !important;
      padding:14px !important;
    }

    /* Modal inner content must not overflow */
    #myPreferencesModal > div *,
    #importProductsModal > div *,
    #reportsCenterModal > div *,
    #tenantSettingsModal > div *{
      max-width:100%;
      box-sizing:border-box;
    }

    /* Prevent body scroll when modal is open — no position:fixed to avoid iOS keyboard bugs */
    body.modal-open{
      overflow:hidden !important;
    }

    /* Overscroll prevention on modal backdrops */
    #myPreferencesModal,
    #importProductsModal,
    #productGalleryModal,
    #reportsCenterModal,
    #warehousesAdminModal,
    #tenantSettingsModal{
      overscroll-behavior:contain;
      -webkit-overflow-scrolling:touch;
    }

    /* Cards/containers padding adjustments */
    .card{
      padding:20px;
    }

    .soft-block{
      padding:18px;
    }

    /* Text overflow prevention */
    h1, h2, h3, h4, p, span, div{
      max-width:100%;
      overflow-wrap:break-word;
      word-wrap:break-word;
    }

    /* Images max-width */
    img{
      max-width:100%;
      height:auto;
    }

    /* Tabs scrollable on mobile */
    .tabs{
      display:flex !important;
      flex-wrap:nowrap !important;
      overflow-x:auto !important;
      -webkit-overflow-scrolling:touch;
      gap:6px !important;
      padding:8px 4px !important;
      scrollbar-width:none;
    }
    .tabs::-webkit-scrollbar{display:none}
    .tabs button{
      flex:0 0 auto !important;
      white-space:nowrap !important;
      font-size:12px !important;
      padding:8px 14px !important;
      border-radius:20px !important;
      min-height:42px;
    }

    /* Row layout: always stack vertically on mobile */
    .row{
      flex-direction:column;
      align-items:stretch;
      gap:8px;
    }

    .row > input,
    .row > select,
    .row > textarea,
    .row > button{
      width:100% !important;
      min-width:0 !important;
      flex:none !important;
    }

    /* Grid layouts collapse to single column */
    .grid2, .grid3{
      grid-template-columns:1fr !important;
      gap:10px;
    }

    /* Check-group keeps horizontal on mobile */
    .check-group{
      gap:10px;
    }

    .check-group label{
      font-size:14px;
    }

    /* Login form stacking */
    #loginForm{
      flex-direction:column;
      align-items:stretch;
    }

    #loginForm input,
    #loginForm button{
      width:100% !important;
      min-width:0 !important;
    }

    /* Product list toolbar */
    .product-list-toolbar{
      flex-direction:column;
      align-items:stretch;
    }

    .product-list-toolbar .toolbar-left,
    .product-list-toolbar .toolbar-right{
      width:100%;
    }

    .product-list-toolbar .toolbar-right select{
      width:100%;
      min-width:0 !important;
    }

    /* Select elements: prevent overflow */
    select{
      text-overflow:ellipsis;
      overflow:hidden;
      -webkit-appearance:none;
      appearance:none;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667085' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
      background-repeat:no-repeat;
      background-position:right 12px center;
      background-size:12px;
      padding-right:32px;
    }
  }

  /* Sale form mobile: stack totals grid */
  @media (max-width: 640px){
    #panel [style*="grid-template-columns:1fr 1fr"]{
      grid-template-columns:1fr !important;
    }
    #newCustSaleOverlay > div{
      max-width:100% !important;
      margin:8px !important;
      padding:18px !important;
    }
    #newCustSaleOverlay [style*="grid-template-columns:1fr 1fr"]{
      grid-template-columns:1fr !important;
    }
    /* Cash session status bar */
    #panel [style*="justify-content:space-between"][style*="flex-wrap:wrap"]{
      flex-direction:column !important;
      align-items:flex-start !important;
    }
    /* Stock-shell sale form containers */
    .stock-shell{
      max-width:100% !important;
      padding:0 !important;
    }
    .stock-hero{
      flex-direction:column !important;
      align-items:flex-start !important;
      gap:8px !important;
    }
    .stock-field input,
    .stock-field select{
      width:100% !important;
      max-width:100% !important;
      box-sizing:border-box !important;
    }
    /* Sale items table scroll */
    .tbl{
      min-width:580px;
    }
  }

  /* Extra small devices (iPhone SE, small phones) */
  @media (max-width: 430px){
    body{
      padding:8px;
      padding-bottom:env(safe-area-inset-bottom);
    }

    .card{
      padding:16px;
      border-radius:14px;
    }

    .panel{
      padding:14px;
      border-radius:14px;
    }

    h1{
      font-size:22px;
    }

    h2{
      font-size:18px;
    }

    h3{
      font-size:16px;
    }

    .brandlogo-shell{
      width:42px;
      height:42px;
      border-radius:12px;
    }

    .brandbar{
      gap:8px;
    }

    /* Inputs/selects tighter on small phones */
    input, select, textarea{
      padding:6px 10px !important;
      font-size:16px !important;
      border-radius:8px;
      height:40px !important;
      max-height:40px !important;
      min-height:0 !important;
      line-height:1.3;
      box-sizing:border-box !important;
    }
    textarea{ height:auto !important; max-height:none !important; min-height:50px !important; }
    select{ height:40px !important; max-height:40px !important; }
    input[type="checkbox"]{
      -webkit-appearance:checkbox !important;
      appearance:checkbox !important;
      height:18px !important;max-height:18px !important;min-height:auto !important;
      width:18px !important;max-width:18px !important;min-width:auto !important;
      padding:0 !important;
      flex:0 0 auto !important;
    }

    input[type="date"],
    input[type="time"],
    input[type="datetime-local"]{
      padding:3px 6px !important;
      min-height:28px;
    }

    /* Buttons tighter */
    button{
      padding:5px 8px;
      font-size:14px;
      min-height:30px;
    }

    /* Modal content even tighter */
    #myPreferencesModal > div,
    #importProductsModal > div,
    #productGalleryModal > div,
    #reportsCenterModal > div,
    #warehousesAdminModal > div,
    #tenantSettingsModal > div{
      padding:12px !important;
    }

    /* Table min-width smaller for tiny screens */
    table{
      min-width:540px;
    }
  }

  /* Safe area padding for notched iPhones */
  @supports (padding: env(safe-area-inset-bottom)){
    body{
      padding-left:env(safe-area-inset-left);
      padding-right:env(safe-area-inset-right);
    }

    .brandbar{
      padding-top:env(safe-area-inset-top);
    }

    .wrap{
      padding-left:env(safe-area-inset-left);
      padding-right:env(safe-area-inset-right);
    }

    #myPreferencesModal,
    #importProductsModal,
    #productGalleryModal,
    #reportsCenterModal,
    #warehousesAdminModal,
    #tenantSettingsModal{
      padding-top:env(safe-area-inset-top) !important;
      padding-bottom:env(safe-area-inset-bottom) !important;
    }
  }

  /* Help tooltips for first-time users */
  .help-tip{
    display:inline-flex;align-items:center;justify-content:center;
    width:20px;height:20px;border-radius:50%;
    background:var(--blue,#1D4ED8);color:#fff;
    font-size:11px;font-weight:700;cursor:help;
    margin-left:6px;position:relative;flex-shrink:0;
    vertical-align:middle;transition:transform .15s,box-shadow .15s;
  }
  .help-tip:hover{
    transform:scale(1.15);box-shadow:0 2px 8px rgba(0,0,0,.2);
  }
  /* Tooltip rendered by JS — see _helpTipEl in app.js */
  .help-tip:hover::after,
  .help-tip:hover::before{display:none;}

  #_htip{
    position:fixed;z-index:9999;pointer-events:none;
    background:var(--card,#1e293b);color:var(--text,#f1f5f9);
    padding:10px 14px;border-radius:10px;font-size:12.5px;font-weight:400;
    white-space:normal;max-width:min(320px,calc(100vw - 32px));width:max-content;
    box-shadow:0 8px 24px rgba(0,0,0,.35);line-height:1.5;
    border:1px solid var(--line,#334155);display:none;
  }

  /* ===== STATUS COLORS (light/dark compatible via CSS vars) ===== */
  :root{
    --modal-radius:18px;
  }

  /* ===== BUTTON CLASSES ===== */

  /* Hero action button — large accent button used for primary page actions */
  .btn-hero{
    background:#fff;
    color:var(--blue);
    font-weight:700;
    border:none;
    padding:10px 22px;
    border-radius:10px;
    cursor:pointer;
    font-size:.95em;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
    transition:all .18s ease;
  }
  .btn-hero:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 16px rgba(0,0,0,.2);
  }

  /* Standard button variants */
  .btn-primary{
    background:var(--blue, #1d4ed8);
    color:#ffffff;
    border:1px solid var(--blue, #1d4ed8);
    box-shadow:var(--shadow-primary, 0 8px 18px rgba(29,78,216,.22));
  }
  .btn-primary:hover{
    filter:brightness(1.06);
  }

  .btn-success{
    background:var(--status-active, #16a34a);
    color:#ffffff;
    border:1px solid var(--status-active, #16a34a);
    box-shadow:0 4px 12px rgba(22,163,74,.22);
  }
  .btn-success:hover{
    filter:brightness(1.06);
  }

  .btn-danger{
    background:var(--status-inactive, #dc2626);
    color:#ffffff;
    border:1px solid var(--status-inactive, #dc2626);
    box-shadow:0 4px 12px rgba(220,38,38,.22);
  }
  .btn-danger:hover{
    filter:brightness(1.06);
  }

  .btn-secondary{
    background:var(--button-secondary-bg, #ffffff);
    color:var(--button-secondary-text, #111827);
    border:1px solid var(--button-secondary-border, #cfd8e3);
  }
  .btn-secondary:hover{
    filter:brightness(.97);
  }

  .btn-warning{
    background:var(--status-pending, #d97706);
    color:#ffffff;
    border:1px solid var(--status-pending, #d97706);
    box-shadow:0 4px 12px rgba(217,119,6,.22);
  }
  .btn-warning:hover{
    filter:brightness(1.06);
  }

  /* ===== MODAL OVERLAY (consistent backdrop) ===== */
  .modal-overlay{
    position:fixed;
    inset:0;
    background:var(--modal-backdrop);
    z-index:9000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
    overflow-y:auto;
  }

  /* Generic .modal safety net */
  .modal{
    background:var(--card, #ffffff);
    border-radius:var(--modal-radius, 18px);
    box-shadow:0 20px 60px rgba(0,0,0,.25);
    padding:24px;
    width:95%;
    max-height:90vh;
    overflow-y:auto;
  }

  /* Modal dialog box — consistent border-radius */
  .modal-dialog{
    background:var(--card, #ffffff);
    border-radius:var(--modal-radius, 18px);
    box-shadow:0 20px 60px rgba(0,0,0,.25);
    max-width:90vw;
    max-height:calc(100vh - 48px);
    overflow-y:auto;
    padding:24px 28px;
    position:relative;
  }

  /* Apply consistent border-radius to existing modals */
  #myPreferencesModal > div,
  #importProductsModal > div,
  #productGalleryModal > div,
  #reportsCenterModal > div,
  #warehousesAdminModal > div,
  #tenantSettingsModal > div{
    border-radius:var(--modal-radius, 18px);
  }

  /* Apply consistent backdrop to existing modal overlays */
  #myPreferencesModal,
  #importProductsModal,
  #productGalleryModal,
  #reportsCenterModal,
  #warehousesAdminModal,
  #tenantSettingsModal{
    background:var(--modal-backdrop) !important;
  }

  /* Input dark mode compatibility */
  input,select,textarea{
    background:var(--input-bg, #f8fafc);
    color:var(--input-text, #1e293b);
    border-color:var(--input-border, #cbd5e1);
    border-style:solid;
    outline:none;
  }
  input::placeholder,textarea::placeholder{
    color:var(--input-placeholder, #94a3b8);
  }

  /* Section card left-border accent */
  .soft-block{
    border-left:3px solid var(--blue, #1D4ED8);
  }

  /* Smooth transitions */
  .card,.soft-block,button,.tabs button,input,select,textarea{
    transition:all .2s ease;
  }
  button:active{transform:scale(.97)}

  /* Table alternating rows and hover */
  table tbody tr:nth-child(even){background:var(--table-row-alt, var(--surface, #f8fafc))}
  table tbody tr:hover{background:var(--blue-bg, #eff6ff)}

  /* Role badge styles */
  .role-badge{
    display:inline-block;
    padding:2px 10px;
    border-radius:12px;
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.5px;
  }
  .role-badge.admin{background:var(--info-bg, #dbeafe);color:var(--info-text, #1d4ed8)}
  .role-badge.supervisor{background:var(--warn-bg, #fef3c7);color:var(--warn-text, #92400e)}
  .role-badge.cajero{background:var(--success-bg, #d1fae5);color:var(--success-text, #065f46)}
  .role-badge.super-admin{background:linear-gradient(135deg, #f59e0b, #d97706);color:#fff;font-weight:700;letter-spacing:.6px;padding:3px 12px;box-shadow:0 2px 8px rgba(245,158,11,.35)}

  /* Tab group container for sub-sections */
  .tab-group { border-bottom: 1px solid var(--line); margin-bottom: 16px; padding-bottom: 8px; }
  .tab-group-title { font-size: .8em; text-transform: uppercase; color: var(--muted); letter-spacing: .5px; margin-bottom: 6px; font-weight: 600; }

  /* Dashboard KPI cards */
  .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 28px; }
  .kpi-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; text-align: center; }
  .kpi-value { font-size: 2em; font-weight: 700; color: var(--heading); }
  .kpi-label { font-size: .85em; color: var(--muted); margin-top: 4px; }
  .kpi-icon { font-size: 2em; margin-bottom: 8px; }

  /* Expense and Supplier cards */
  .data-list-item { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; }
  .data-list-item:hover { border-color: var(--blue); }

  /* Keyboard shortcut hints */
  .kbd { display: inline-block; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; font-size: .75em; font-family: monospace; color: var(--muted); }

  /* Configuration section grouping */
  .config-section { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px 28px; margin-bottom: 24px; }
  .config-section h3 { margin: 0 0 16px 0; font-size: 1em; color: var(--heading); }

  @media (max-width: 640px) {
    .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .kpi-card { padding: 14px; }
    .kpi-value { font-size: 1.5em; }
  }

  /* Login form mobile improvements */
  @media (max-width: 640px){
    #loginBox{
      width:100%;
      max-width:100%;
    }
    #loginBox .brandlogo-shell{
      max-width:100%;
    }
    #loginForm{
      width:100%;
    }
    #loginForm input,
    #loginForm button{
      width:100% !important;
      min-width:0 !important;
      box-sizing:border-box;
    }
    #loginForm button{
      margin-top:4px;
    }
  }

  /* ===== Pre-Sale Cards ===== */
  .presale-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    padding:20px 24px;
    border-left:5px solid var(--blue);
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .presale-card:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-soft);
  }
  .presale-card.status-open{ border-left-color:#eab308; }
  .presale-card.status-pending{ border-left-color:#3b82f6; }
  .presale-card.status-completed{ border-left-color:#16a34a; }
  .presale-card.status-cancelled{ border-left-color:#dc2626; }
  .presale-card.status-expired{ border-left-color:#6b7280; }

  /* ===== Pre-Sale Timer ===== */
  .presale-timer{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 12px;
    border-radius:8px;
    font-size:.82em;
    font-weight:600;
    font-variant-numeric:tabular-nums;
    background:rgba(234,179,8,.12);
    color:#a16207;
    border:1px solid rgba(234,179,8,.3);
  }
  .presale-timer.urgent{
    background:rgba(220,38,38,.12);
    color:#dc2626;
    border-color:rgba(220,38,38,.3);
    animation:timerPulse 1s ease-in-out infinite;
  }
  @keyframes timerPulse{
    0%,100%{ opacity:1; }
    50%{ opacity:.6; }
  }

  @keyframes slideIn{
    from{ opacity:0; transform:translateY(-10px); }
    to{ opacity:1; transform:translateY(0); }
  }

  @keyframes bellShake{
    0%{ transform:rotate(0); }
    15%{ transform:rotate(14deg); }
    30%{ transform:rotate(-14deg); }
    45%{ transform:rotate(10deg); }
    60%{ transform:rotate(-6deg); }
    75%{ transform:rotate(2deg); }
    100%{ transform:rotate(0); }
  }

  .bell-has-unread svg{ color:#dc2626; animation:bellShake .6s ease-in-out; }

  /* ===== Pre-Sale Status Badges ===== */
  .presale-status-badge{
    display:inline-block;
    padding:3px 10px;
    border-radius:999px;
    font-size:.75em;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
  }
  .presale-status-badge.open{ background:rgba(234,179,8,.15); color:#a16207; border:1px solid rgba(234,179,8,.3); }
  .presale-status-badge.pending{ background:rgba(59,130,246,.15); color:#1d4ed8; border:1px solid rgba(59,130,246,.3); }
  .presale-status-badge.completed{ background:rgba(22,163,74,.15); color:#166534; border:1px solid rgba(22,163,74,.3); }
  .presale-status-badge.cancelled{ background:rgba(220,38,38,.15); color:#991b1b; border:1px solid rgba(220,38,38,.3); }
  .presale-status-badge.expired{ background:rgba(107,114,128,.15); color:#4b5563; border:1px solid rgba(107,114,128,.3); }

  /* ===== Reservation Indicator ===== */
  .reservation-indicator.reservation-ok{
    color:#16a34a;
    background:rgba(22,163,74,.1);
  }
  .reservation-indicator.reservation-ok::before{
    background:#16a34a;
  }
  .reservation-indicator.reservation-danger{
    color:#dc2626;
    background:rgba(220,38,38,.1);
  }
  .reservation-indicator.reservation-danger::before{
    background:#dc2626;
  }
  .reservation-indicator{
    display:inline-flex;
    align-items:center;
    gap:4px;
    font-size:.75em;
    font-weight:600;
    color:#dc2626;
    padding:2px 8px;
    border-radius:6px;
    background:rgba(220,38,38,.1);
  }
  .reservation-indicator::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:#dc2626;
  }

  /* ===== Product Type Filter ===== */
  .product-type-filter{
    display:inline-flex;
    gap:0;
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
  }
  .product-type-filter button{
    padding:7px 14px;
    border:none;
    border-radius:8px;
    background:var(--tab-bg);
    color:var(--tab-text);
    font-size:.82em;
    font-weight:600;
    cursor:pointer;
    transition:all .15s;
    box-shadow:none;
    margin:0;
  }
  .product-type-filter button + button{
    border-left:1px solid var(--line);
  }
  .product-type-filter button.active{
    background:var(--blue);
    color:#fff;
  }

  /* ===== Service Badge (large) ===== */
  .service-badge-lg{
    display:inline-block;
    background:#7c3aed;
    color:#fff;
    font-size:.72em;
    font-weight:700;
    padding:3px 10px;
    border-radius:6px;
    vertical-align:middle;
    letter-spacing:.03em;
  }

  /* ===== Service Banner ===== */
  .service-banner{
    background:linear-gradient(135deg, rgba(124,58,237,.1), rgba(59,130,246,.08));
    border:1px solid rgba(124,58,237,.3);
    border-radius:12px;
    padding:12px 18px;
    margin-bottom:14px;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:.9em;
    font-weight:600;
    color:#7c3aed;
  }

  /* ===== Presale queue grid ===== */
  .presale-queue-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    gap:18px;
  }

  /* ===== Sub-tab switcher for presale ===== */
  .presale-sub-tabs{
    display:flex;
    gap:0;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
    width:fit-content;
    margin-bottom:20px;
  }
  .presale-sub-tabs button{
    background:transparent;
    color:var(--text);
    border:none;
    border-bottom:2px solid transparent;
    border-radius:0;
    padding:10px 22px;
    font-weight:600;
    font-size:.92em;
    cursor:pointer;
    min-height:44px;
    transition:all .15s;
    box-shadow:none;
    margin:0;
  }
  .presale-sub-tabs button.active{
    color:var(--blue);
    border-bottom:2px solid var(--blue);
    font-weight:700;
    background:transparent;
    box-shadow:none;
  }

  /* ===== Presale notification badge ===== */
  .presale-notif-badge{
    display:none;
    position:absolute;
    top:-4px;
    right:-4px;
    min-width:18px;
    height:18px;
    line-height:18px;
    text-align:center;
    border-radius:999px;
    background:#dc2626;
    color:#fff;
    font-size:.65em;
    font-weight:700;
    padding:0 4px;
  }

  /* ===== Contact email display ===== */
  .contact-email-display{
    font-size:.85em;
    color:var(--muted, #667085);
    display:inline-flex;
    align-items:center;
    gap:4px;
  }

  /* ===== Forgot password link ===== */
  .forgot-password-link{
    font-size:.88em;
    color:var(--blue, #1d4ed8);
    text-decoration:none;
    cursor:pointer;
    transition:opacity .15s;
  }
  .forgot-password-link:hover{
    opacity:.75;
    text-decoration:underline;
  }

  /* ===== Reset password form ===== */
  .reset-password-form{
    max-width:380px;
    margin:0 auto;
    padding:20px 0;
  }
  .reset-password-form input{
    height:44px;
    padding:0 14px;
    border-radius:10px;
    border:1px solid var(--line, #dbe3ee);
    font-size:.95em;
    background:var(--input-bg, #fff);
    color:var(--input-text, #111827);
  }

  /* ===== Profile section ===== */
  .profile-section{
    background:var(--surface, #f8fafc);
    border:1px solid var(--line, #dbe3ee);
    border-radius:14px;
    padding:24px 28px;
    margin-top:20px;
  }

  /* ===== Helper text below inputs ===== */
  .helper-text{
    font-size:.78em;
    color:var(--muted, #667085);
    margin-top:4px;
    line-height:1.4;
  }

  /* =============================================== */
  /* ===== LIGHT MODE ENHANCEMENTS                   */
  /* ===== High-contrast, professional light theme   */
  /* =============================================== */

  /* --- Header / Brand bar: ensure dark text in light mode --- */
  h1,
  .brandcopy h1,
  #brandName{
    color:#0f172a !important;
  }
  .brandsubtitle,
  #brandSubtitle{
    color:#475569 !important;
  }
  .brandeyebrow,
  #brandEyebrow{
    color:#667085 !important;
  }
  .brandlogo-shell{
    background:#f8fafc;
    border-color:#e2e8f0;
  }

  /* --- Cards: visible borders, stronger shadows --- */
  .card{
    border-color:var(--card-border, #e2e8f0);
    box-shadow:var(--card-shadow);
  }
  .card:hover{
    box-shadow:var(--card-shadow-hover);
  }

  /* --- KPI cards: subtle tinted background, crisp borders --- */
  .kpi-card{
    background:#ffffff;
    border:1px solid #e2e8f0;
    box-shadow:0 1px 3px rgba(0,0,0,.06);
  }
  .kpi-value{
    color:#0f172a !important;
    font-weight:800 !important;
  }
  .kpi-label{
    color:#475569 !important;
    font-weight:500;
  }

  /* --- Admin KPI cards (injected by app.js) --- */
  .admin-kpi{
    background:#ffffff !important;
    border-color:#e2e8f0 !important;
    box-shadow:0 1px 3px rgba(0,0,0,.06);
  }
  .admin-kpi-value{
    color:#0f172a !important;
    font-weight:800 !important;
  }
  .admin-kpi-label{
    color:#475569 !important;
    font-weight:500;
  }

  /* --- Admin cards: solid background, visible dividers --- */
  .admin-card{
    background:#ffffff !important;
    border-color:#e2e8f0 !important;
    box-shadow:var(--card-shadow) !important;
  }
  .admin-card-head{
    border-bottom:1px solid #f1f5f9 !important;
  }
  .admin-card-title{
    color:#0f172a !important;
  }
  .admin-card-subtitle{
    color:#475569 !important;
  }

  /* --- Tables: stronger header, alternating rows, visible borders --- */
  th{
    background:#f1f5f9 !important;
    color:#0f172a !important;
    font-weight:700;
  }
  td{
    color:#1e293b;
    border-bottom-color:#e2e8f0 !important;
  }
  table{
    border-color:#e2e8f0 !important;
  }
  table tbody tr:nth-child(even){
    background:#f8fafc !important;
  }
  table tbody tr:hover{
    background:#eff6ff !important;
  }

  /* --- Premium table (app.js injected) --- */
  .premium-table{
    background:#ffffff !important;
    border-color:#e2e8f0 !important;
  }
  .premium-table thead th{
    background:#f1f5f9 !important;
    color:#0f172a !important;
    backdrop-filter:none;
  }
  .premium-table tbody td{
    color:#1e293b !important;
    border-top-color:#f1f5f9 !important;
  }

  /* --- Inputs: visible borders --- */
  input, select, textarea{
    border-color:#cbd5e1 !important;
    background:#ffffff;
    color:#1e293b;
  }
  input:focus, select:focus, textarea:focus{
    border-color:var(--blue) !important;
    box-shadow:0 0 0 3px rgba(29,78,216,.12) !important;
  }

  /* --- Tabs: crisp inactive + filled active --- */
  .tabs button{
    background:#ffffff;
    color:#334155;
    border:1px solid #cbd5e1;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
    font-weight:600;
  }
  .tabs button:hover:not(.active){
    background:#f1f5f9;
    border-color:#94a3b8;
  }
  .tabs button.active{
    background:var(--blue);
    color:#ffffff;
    border-color:var(--blue);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent);
  }

  /* --- Sub-tab bars (app.js) --- */
  .sub-tab-bar button{
    color:#334155 !important;
    font-weight:600;
  }
  .sub-tab-bar button.active{
    background:var(--blue) !important;
    color:#ffffff !important;
    border-color:var(--blue) !important;
  }

  /* --- Product type filter --- */
  .product-type-filter button{
    background:#ffffff;
    color:#334155;
  }
  .product-type-filter button.active{
    background:var(--blue);
    color:#fff;
  }

  /* --- Buttons: secondary with stronger borders --- */
  button{
    border-color:#cbd5e1;
    background:#ffffff;
    color:#1e293b;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
  }
  button:hover{
    background:#f8fafc;
    border-color:#94a3b8;
  }
  button.primary{
    background:var(--blue);
    color:#ffffff;
    border-color:var(--blue);
    box-shadow:var(--shadow-primary);
  }
  button.primary:hover{
    filter:brightness(1.05);
  }
  button.danger{
    background:#fff1f2;
    color:#dc2626;
    border-color:rgba(220,38,38,.35);
  }

  /* --- Hero sections: keep gradient, ensure white text --- */
  .admin-hero{
    border-color:transparent !important;
  }
  .admin-hero h2,
  .admin-hero p{
    color:#ffffff !important;
  }
  /* stock-hero uses var(--card) bg, NOT gradient — text must follow theme */
  .stock-hero h2{
    color:var(--heading) !important;
  }
  .stock-hero p{
    color:var(--muted) !important;
  }

  /* --- Panels: clear background --- */
  .panel{
    background:#f8fafc;
    border-color:#e2e8f0;
  }

  /* --- Soft blocks: tinted bg --- */
  .soft-block{
    background:#f8fafc;
    border-color:#e2e8f0;
  }

  /* --- Data list items --- */
  .data-list-item{
    background:#ffffff;
    border-color:#e2e8f0;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
  }
  .data-list-item:hover{
    border-color:var(--blue);
    box-shadow:0 2px 8px rgba(29,78,216,.1);
  }

  /* --- Config sections --- */
  .config-section{
    background:#ffffff;
    border-color:#e2e8f0;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
  }
  .config-section h3{
    color:#0f172a;
  }

  /* --- Empty states --- */
  .empty-state{
    background:#f8fafc;
    border-color:#e2e8f0;
    color:#475569;
  }

  /* --- Premium empty (app.js) --- */
  .premium-empty{
    background:#f8fafc !important;
    border-color:#e2e8f0 !important;
    color:#475569 !important;
  }

  /* --- Premium badges --- */
  .premium-badge{
    background:#f8fafc;
    border-color:#e2e8f0;
    color:#1e293b;
  }

  /* --- Admin toolbar --- */
  .admin-toolbar{
    background:#ffffff !important;
    border-color:#e2e8f0 !important;
    box-shadow:var(--card-shadow) !important;
  }

  /* --- Admin list stat pills --- */
  .admin-list-stat{
    background:#f8fafc !important;
    border-color:#e2e8f0 !important;
    color:#475569 !important;
  }

  /* --- Pill badges --- */
  .pill{
    background:#f1f5f9;
    border-color:#e2e8f0;
    color:#1e293b;
  }

  /* --- Message boxes --- */
  .msg{
    background:#ffffff;
    border-color:#e2e8f0;
    color:#1e293b;
  }
  .msg.ok{
    background:#ecfdf5;
    border-color:#86efac;
    color:#166534;
  }
  .msg.err{
    background:#fef2f2;
    border-color:#fecaca;
    color:#991b1b;
  }

  /* --- Role badges: ensure readability --- */
  .role-badge.admin{background:#dbeafe;color:#1e40af}
  .role-badge.supervisor{background:#fef3c7;color:#92400e}
  .role-badge.cajero{background:#d1fae5;color:#065f46}

  /* --- Admin field labels and inputs (app.js) --- */
  .admin-field label{
    color:#334155 !important;
  }
  .admin-field input,
  .admin-field select,
  .admin-field textarea{
    background:#ffffff !important;
    color:#1e293b !important;
    border-color:#cbd5e1 !important;
    border-style:solid !important;
    outline:none;
  }

  /* --- Kbd shortcut hints --- */
  .kbd{
    background:#f1f5f9;
    border-color:#e2e8f0;
    color:#475569;
  }

  /* --- Profile section --- */
  .profile-section{
    background:#f8fafc;
    border-color:#e2e8f0;
  }

  /* --- Brand bar logo shell --- */
  .brandlogo-shell{
    background:#f8fafc;
    border-color:#e2e8f0;
  }

  /* --- Presale cards --- */
  .presale-card{
    background:#ffffff;
    border-color:#e2e8f0;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
  }
  .presale-card:hover{
    box-shadow:var(--card-shadow-hover);
  }

  /* --- Report fields --- */
  .report-field label{
    color:#334155;
    font-weight:500;
  }

  /* --- JS-driven light mode: enforce light styles even on OS dark --- */
  body.light-mode{color:#1e293b;}
  body.light-mode h1,
  body.light-mode .brandcopy h1,
  body.light-mode #brandName{color:#0f172a !important;}
  body.light-mode .brandsubtitle,
  body.light-mode #brandSubtitle{color:#475569 !important;}
  body.light-mode .brandeyebrow,
  body.light-mode #brandEyebrow{color:#667085 !important;}
  body.light-mode h2,
  body.light-mode h3,
  body.light-mode h4{color:#0f172a !important;}
  body.light-mode .admin-hero h2,
  body.light-mode .admin-hero p{color:#ffffff !important;}
  body.light-mode strong,
  body.light-mode b{color:#0f172a;}
  body.light-mode label{color:#334155;}
  body.light-mode .brandlogo-shell{background:#f8fafc;border-color:#e2e8f0;}
  body.light-mode .card{background:#ffffff;border-color:#e2e8f0;box-shadow:0 1px 3px rgba(0,0,0,.1), 0 2px 8px rgba(15,23,42,.06);}
  body.light-mode .panel{background:#f8fafc;border-color:#e2e8f0;}
  body.light-mode th{background:#f1f5f9 !important;color:#0f172a !important;}
  body.light-mode td{color:#1e293b;border-bottom-color:#e2e8f0 !important;}
  body.light-mode table{border-color:#e2e8f0 !important;}
  body.light-mode table tbody tr:nth-child(even){background:#f8fafc !important;}
  body.light-mode table tbody tr:hover{background:#eff6ff !important;}
  body.light-mode input,
  body.light-mode select,
  body.light-mode textarea{border-color:#cbd5e1 !important;border-style:solid !important;outline:none;background-color:#ffffff !important;color:#1e293b !important;}
  body.light-mode input:focus,
  body.light-mode select:focus,
  body.light-mode textarea:focus{border-color:var(--blue) !important;border-style:solid !important;outline:none;box-shadow:0 0 0 3px rgba(29,78,216,.12) !important;}
  body.light-mode .tabs button{background:#ffffff;color:#334155;border:1px solid #cbd5e1;}
  body.light-mode .tabs button:hover{background:#f1f5f9;color:#1e293b;}
  body.light-mode .tabs button.active{background:var(--blue);color:#ffffff;border-color:var(--blue);}
  body.light-mode .tabs button.active:hover{background:var(--blue);color:#ffffff;filter:brightness(1.08);}
  body.light-mode button{border-color:#cbd5e1;background:#ffffff;color:#1e293b;}
  body.light-mode button.primary{background:var(--blue);color:#ffffff;border-color:var(--blue);}
  body.light-mode button.danger{background:#fff1f2;color:#dc2626;border-color:rgba(220,38,38,.35);}
  body.light-mode .soft-block{background:#f8fafc;border-color:#e2e8f0;}
  body.light-mode .pill{background:#f1f5f9;border-color:#e2e8f0;color:#1e293b;}
  body.light-mode .msg{background:#ffffff;border-color:#e2e8f0;color:#1e293b;}
  body.light-mode .msg.ok{background:#ecfdf5;border-color:#86efac;color:#166534;}
  body.light-mode .msg.err{background:#fef2f2;border-color:#fecaca;color:#991b1b;}
  body.light-mode .empty-state{background:#f8fafc;border-color:#e2e8f0;color:#475569;}
  body.light-mode .kpi-card{background:#ffffff;border:1px solid #e2e8f0;box-shadow:0 1px 3px rgba(0,0,0,.06);}
  body.light-mode .kpi-value{color:#0f172a !important;}
  body.light-mode .kpi-label{color:#475569 !important;}
  body.light-mode .data-list-item{background:#ffffff;border-color:#e2e8f0;box-shadow:0 1px 2px rgba(0,0,0,.04);}
  body.light-mode .config-section{background:#ffffff;border-color:#e2e8f0;}
  body.light-mode .config-section h3{color:#0f172a;}
  body.light-mode .kbd{background:#f1f5f9;border-color:#e2e8f0;color:#475569;}
  body.light-mode .presale-card{background:#ffffff;border-color:#e2e8f0;box-shadow:0 1px 2px rgba(0,0,0,.04);}
  body.light-mode .admin-field label{color:#334155 !important;}
  body.light-mode .admin-field input,
  body.light-mode .admin-field select,
  body.light-mode .admin-field textarea{background-color:#ffffff !important;color:#1e293b !important;border-color:#cbd5e1 !important;border-style:solid !important;outline:none;}
  body.light-mode .admin-field select{-webkit-appearance:none !important;appearance:none !important;}
  body.light-mode .sub-tab-bar button{color:#334155 !important;}
  body.light-mode .sub-tab-bar button:hover{background:#f1f5f9 !important;color:#1e293b !important;}
  body.light-mode .sub-tab-bar button.active{background:var(--blue) !important;color:#ffffff !important;}
  body.light-mode .sub-tab-bar button.active:hover{background:var(--blue) !important;color:#ffffff !important;filter:brightness(1.08);}
  body.light-mode .product-type-filter button{background:#ffffff;color:#334155;}
  body.light-mode .product-type-filter button:hover{background:#f1f5f9;color:#1e293b;}
  body.light-mode .product-type-filter button.active{background:var(--blue);color:#fff;}
  body.light-mode .report-field label{color:#334155;font-weight:500;}
  body.light-mode .premium-table{background:#ffffff !important;border-color:#e2e8f0 !important;}
  body.light-mode .premium-table thead th{background:#f1f5f9 !important;color:#0f172a !important;}
  body.light-mode .premium-table tbody td{color:#1e293b !important;border-top-color:#f1f5f9 !important;}
  body.light-mode .admin-kpi{background:#ffffff !important;border-color:#e2e8f0 !important;}
  body.light-mode .admin-kpi-value{color:#0f172a !important;}
  body.light-mode .admin-kpi-label{color:#475569 !important;}
  body.light-mode .admin-card{background:#ffffff !important;border-color:#e2e8f0 !important;box-shadow:0 1px 3px rgba(0,0,0,.1), 0 2px 8px rgba(15,23,42,.06) !important;}
  body.light-mode .admin-card-title{color:#0f172a !important;}
  body.light-mode .admin-card-subtitle{color:#475569 !important;}
  body.light-mode .admin-toolbar{background:#ffffff !important;border-color:#e2e8f0 !important;}
  body.light-mode .admin-list-stat{background:#f8fafc !important;border-color:#e2e8f0 !important;color:#475569 !important;}
  body.light-mode .premium-badge{background:#f8fafc;border-color:#e2e8f0;color:#1e293b;}
  body.light-mode .premium-empty{background:#f8fafc !important;border-color:#e2e8f0 !important;color:#475569 !important;}
  body.light-mode .profile-section{background:#f8fafc;border-color:#e2e8f0;}
  body.light-mode .brandlogo-fallback{color:#fff;}
  body.light-mode .muted{color:#475569;}
  body.light-mode #tenantLabel{color:#0f172a;}
  body.light-mode #topRoleText{color:#475569;}
  body.light-mode .modal-dialog{background:#ffffff;color:#1e293b;}
  body.light-mode #myPreferencesModal > div,
  body.light-mode #importProductsModal > div,
  body.light-mode #productGalleryModal > div,
  body.light-mode #reportsCenterModal > div,
  body.light-mode #warehousesAdminModal > div,
  body.light-mode #tenantSettingsModal > div{background:#ffffff;color:#1e293b;}
  body.light-mode .presale-sub-tabs{background:#f8fafc;border-color:#e2e8f0;}
  body.light-mode .presale-sub-tabs button{color:#334155;background:transparent;border-bottom:2px solid transparent;}
  body.light-mode .presale-sub-tabs button:hover{background:transparent;color:#1e293b;}
  body.light-mode .presale-sub-tabs button.active{background:transparent;color:var(--blue);border-bottom:2px solid var(--blue);}
  body.light-mode .presale-card{background:#ffffff;border-color:#e2e8f0;color:#1e293b !important;}
  body.light-mode .presale-card strong{color:#0f172a !important;}
  body.light-mode .presale-card div{color:#1e293b;}
  body.light-mode .presale-card td{color:#1e293b !important;}
  body.light-mode .presale-card th{color:#0f172a !important;background:#f1f5f9 !important;}
  body.light-mode .modal-dialog{background:#ffffff;color:#1e293b;}
  body.light-mode .modal-dialog h3{color:#0f172a !important;}
  body.light-mode #newCustSaleOverlay h3{color:#0f172a !important;}
  body.light-mode #newCustSaleOverlay div{color:#1e293b;}
  body.light-mode #newCustSaleOverlay p{color:#475569;}
  body.light-mode #preSalePaymentModal h3{color:#0f172a !important;}
  body.light-mode #preSalePaymentModal div{color:#1e293b;}
  body.light-mode #preSalePaymentModal td{color:#1e293b !important;}
  body.light-mode #_htip{background:#1e293b;color:#f1f5f9;border-color:#334155;}
  body.light-mode .role-badge.admin{background:#dbeafe;color:#1e40af;}
  body.light-mode .role-badge.supervisor{background:#fef3c7;color:#92400e;}
  body.light-mode .role-badge.cajero{background:#d1fae5;color:#065f46;}
  body.light-mode .service-banner{color:#7c3aed;background:linear-gradient(135deg, rgba(124,58,237,.1), rgba(59,130,246,.08));border-color:rgba(124,58,237,.3);}
  body.light-mode .service-badge-lg{background:#7c3aed;color:#fff;}

  /* --- Presale timer: ensure dark text in light mode --- */
  body.light-mode .presale-timer{color:#a16207;background:rgba(234,179,8,.12);border-color:rgba(234,179,8,.3);}
  body.light-mode .presale-timer.urgent{color:#dc2626;background:rgba(220,38,38,.12);border-color:rgba(220,38,38,.3);}

  /* --- Presale status badges: keep readable in light mode --- */
  body.light-mode .presale-status-badge.open{background:rgba(234,179,8,.15);color:#a16207;border:1px solid rgba(234,179,8,.3);}
  body.light-mode .presale-status-badge.pending{background:rgba(59,130,246,.15);color:#1d4ed8;border:1px solid rgba(59,130,246,.3);}
  body.light-mode .presale-status-badge.in-progress{background:rgba(59,130,246,.15);color:#1d4ed8;border:1px solid rgba(59,130,246,.3);}
  body.light-mode .presale-status-badge.completed{background:rgba(22,163,74,.15);color:#166534;border:1px solid rgba(22,163,74,.3);}
  body.light-mode .presale-status-badge.cancelled{background:rgba(220,38,38,.15);color:#991b1b;border:1px solid rgba(220,38,38,.3);}
  body.light-mode .presale-status-badge.expired{background:rgba(107,114,128,.15);color:#4b5563;border:1px solid rgba(107,114,128,.3);}

  /* --- Reservation indicator: dark text in light mode --- */
  body.light-mode .reservation-indicator{color:#dc2626;background:rgba(220,38,38,.1);}
  body.light-mode .reservation-indicator::before{background:#dc2626;}
  body.light-mode .reservation-indicator.reservation-ok{color:#16a34a;background:rgba(22,163,74,.1);}
  body.light-mode .reservation-indicator.reservation-ok::before{background:#16a34a;}

  /* --- Role badge super-admin: keep readable in light mode --- */
  body.light-mode .role-badge.super-admin{background:linear-gradient(135deg, #f59e0b, #d97706);color:#fff;box-shadow:0 2px 8px rgba(245,158,11,.35);}

  /* --- Help-tip: visible in light mode --- */
  body.light-mode .help-tip{background:var(--blue,#1D4ED8);color:#fff;}
  body.light-mode .help-tip:hover::before{display:none;}

  /* --- Catalog pagination active button --- */
  body.light-mode .cat-pagination button.active{color:#fff;}

  /* --- Select arrow SVG: ensure dark arrow in light mode --- */
  body.light-mode select{-webkit-appearance:none !important;appearance:none !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667085' d='M3 5l3 3 3-3'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 12px center !important;padding-right:32px !important;background-color:#ffffff !important;}

  /* --- Code blocks inside email module: readable in light mode --- */
  body.light-mode .em-collapsible-body code{background:#eef2ff;color:#4338ca;border-color:#c7d2fe;}

  /* --- Section title (generic) --- */
  body.light-mode .section-title{color:#0f172a;}
  body.light-mode .section-copy{color:#475569;}

  /* --- Stock field labels --- */
  body.light-mode .stock-field label{color:#334155;}

  /* --- License warning banner --- */
  body.light-mode .license-warning-banner{background:#fffbeb;color:#92400e;border-color:#fde68a;}

  /* --- Tab group title --- */
  body.light-mode .tab-group-title{color:#475569;}

  /* --- Paragraph text --- */
  body.light-mode p{color:#1e293b;}

  /* --- Date inputs: ensure readability in light mode --- */
  body.light-mode input[type="date"],
  body.light-mode input[type="time"],
  body.light-mode input[type="datetime-local"]{
    background:#ffffff;
    color:#1e293b;
    border-color:#cbd5e1 !important;
  }
  body.light-mode input[type="date"]::-webkit-calendar-picker-indicator{
    filter:none;
  }

  /* --- Dark mode: undo all light overrides --- */
  /* Applies via OS preference OR JS-driven body.dark-mode class */
  @media (prefers-color-scheme: dark){
    h1,.brandcopy h1,#brandName{color:var(--heading) !important;}
    .brandsubtitle,#brandSubtitle{color:var(--muted) !important;}
    .brandeyebrow,#brandEyebrow{color:var(--muted) !important;}
    .kpi-card{background:var(--card);border-color:var(--line);box-shadow:none;}
    .kpi-value{color:var(--heading) !important;}
    .kpi-label{color:var(--muted) !important;}
    .admin-kpi{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)) !important;border-color:var(--line) !important;box-shadow:none;}
    .admin-kpi-value{color:var(--text) !important;}
    .admin-kpi-label{color:var(--muted) !important;}
    .admin-card{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01)),var(--card) !important;border-color:var(--line) !important;box-shadow:var(--shadow-soft) !important;}
    .admin-card-head{border-bottom:1px solid rgba(255,255,255,.05) !important;}
    .admin-card-title{color:var(--text) !important;}
    .admin-card-subtitle{color:var(--muted) !important;}
    th{background:var(--table-head-bg) !important;color:var(--heading) !important;}
    td{color:var(--text);border-bottom-color:rgba(255,255,255,.05) !important;}
    table{border-color:var(--line) !important;}
    table tbody tr:nth-child(even){background:rgba(255,255,255,.02) !important;}
    table tbody tr:hover{background:rgba(29,78,216,.08) !important;}
    .premium-table{background:rgba(255,255,255,.01) !important;border-color:var(--line) !important;}
    .premium-table thead th{background:var(--table-head-bg) !important;color:var(--text) !important;backdrop-filter:blur(8px);}
    .premium-table tbody td{color:var(--text) !important;border-top-color:rgba(255,255,255,.05) !important;}
    input,select,textarea{border-color:var(--line) !important;border-style:solid !important;outline:none;background:var(--input-bg);color:var(--input-text);}
    input:focus,select:focus,textarea:focus{border-color:var(--blue) !important;border-style:solid !important;outline:none;box-shadow:0 0 0 3px rgba(59,130,246,.15) !important;}
    .tabs button{background:var(--tab-bg);color:var(--tab-text);border-color:var(--tab-border);box-shadow:0 1px 2px rgba(0,0,0,.05);}
    .tabs button.active{background:var(--blue);color:#fff;border-color:var(--blue);}
    .sub-tab-bar button{color:var(--text) !important;}
    .sub-tab-bar button.active{background:var(--blue) !important;color:#fff !important;}
    button{border-color:var(--button-secondary-border);background:var(--button-secondary-bg);color:var(--button-secondary-text);box-shadow:none;}
    button.primary{background:var(--blue);color:#fff;border-color:var(--blue);}
    button.danger{background:var(--button-danger-bg);color:var(--button-danger-text);border-color:var(--button-danger-border);}
    .panel{background:var(--surface);border-color:var(--line);}
    .soft-block{background:var(--surface);border-color:var(--line);}
    .data-list-item{background:var(--card);border-color:var(--line);box-shadow:none;}
    .config-section{background:var(--card);border-color:var(--line);box-shadow:none;}
    .empty-state{background:var(--surface);border-color:var(--line);color:var(--muted);}
    .premium-empty{background:rgba(255,255,255,.015) !important;border-color:var(--line) !important;color:var(--muted) !important;}
    .premium-badge{background:var(--surface);border-color:var(--line);color:var(--text);}
    .admin-toolbar{background:var(--card) !important;border-color:var(--line) !important;box-shadow:var(--shadow-soft) !important;}
    .admin-list-stat{background:var(--surface) !important;border-color:var(--line) !important;color:var(--muted) !important;}
    .pill{background:rgba(148,163,184,.18);border-color:rgba(148,163,184,.18);color:var(--text);}
    .msg{background:var(--card);border-color:var(--line);color:var(--text);}
    .card{border-color:var(--line);box-shadow:var(--shadow-soft);}
    .brandlogo-shell{background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border-color:var(--line);}
    .presale-card{background:var(--card);border-color:var(--line);box-shadow:none;}
    .admin-field label{color:var(--muted) !important;}
    .admin-field input,.admin-field select,.admin-field textarea{background:var(--input-bg) !important;color:var(--input-text) !important;border-color:var(--line) !important;border-style:solid !important;outline:none;}
    .product-type-filter button{background:var(--tab-bg);color:var(--tab-text);}
    .product-type-filter button.active{background:var(--blue);color:#fff;}
    .report-field label{color:var(--muted);font-weight:400;}
    .kbd{background:var(--surface);border-color:var(--line);color:var(--muted);}

    /* btn-hero */
    .btn-hero{background:var(--card);color:var(--text);border-color:var(--line);}

    /* Presale cards */
    .presale-card.status-pending{border-left-color:#eab308;}
    .presale-card.status-in-progress{border-left-color:#3b82f6;}
    .presale-card.status-completed{border-left-color:#22c55e;}
    .presale-card.status-cancelled{border-left-color:#ef4444;}
    .presale-card.status-expired{border-left-color:#6b7280;}

    /* Presale timer */
    .presale-timer{color:#fbbf24;background:rgba(234,179,8,.08);border-color:rgba(234,179,8,.2);}
    .presale-timer.urgent{color:#f87171;background:rgba(220,38,38,.08);border-color:rgba(220,38,38,.2);}

    /* Presale status badges */
    .presale-status-badge.open{background:rgba(234,179,8,.15);color:#fbbf24;}
    .presale-status-badge.pending{background:rgba(234,179,8,.15);color:#fbbf24;}
    .presale-status-badge.in-progress{background:rgba(59,130,246,.15);color:#93c5fd;}
    .presale-status-badge.completed{background:rgba(34,197,94,.15);color:#86efac;}
    .presale-status-badge.cancelled{background:rgba(239,68,68,.15);color:#fca5a5;}
    .presale-status-badge.expired{background:rgba(107,114,128,.15);color:#d1d5db;}

    /* Presale status card */
    .presale-status-card.status-open{border-left-color:#eab308;}

    /* Presale sub-tabs */
    .presale-sub-tabs{background:var(--surface);border-color:var(--line);}
    .presale-sub-tabs button{color:var(--text);background:transparent;border-bottom:2px solid transparent;}
    .presale-sub-tabs button.active{background:transparent;color:var(--blue);border-bottom:2px solid var(--blue);}

    /* Service badge */
    .service-badge-lg{background:rgba(124,58,237,.2);color:#c4b5fd;}
    .service-banner{background:linear-gradient(135deg,rgba(124,58,237,.3),rgba(109,40,217,.3));color:#c4b5fd;}

    /* Role badge super-admin */
    .role-badge.super-admin{box-shadow:0 2px 8px rgba(245,158,11,.2);}

    /* Help-tip tooltip */
    #_htip{background:#334155;border-color:#475569;}
    .help-tip:hover::before{display:none;}

    /* Date picker calendar icon */
    input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);}

    /* Reservation indicator */
    .reservation-indicator{color:#fca5a5;}
    .reservation-indicator::before{background:#ef4444;}

    /* Catalog pagination */
    .cat-pagination button.active{color:#fff;}

    /* SVG select arrow for dark mode */
    select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M3 5l3 3 3-3'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 12px center !important;padding-right:32px !important;}
  }

  /* --- JS-driven dark mode: same overrides for body.dark-mode --- */
  body.dark-mode h1,
  body.dark-mode .brandcopy h1,
  body.dark-mode #brandName{color:var(--heading) !important;}
  body.dark-mode .brandsubtitle,
  body.dark-mode #brandSubtitle{color:var(--muted) !important;}
  body.dark-mode .brandeyebrow,
  body.dark-mode #brandEyebrow{color:var(--muted) !important;}
  body.dark-mode .kpi-card{background:var(--card);border-color:var(--line);box-shadow:none;}
  body.dark-mode .kpi-value{color:var(--heading) !important;}
  body.dark-mode .kpi-label{color:var(--muted) !important;}
  body.dark-mode .admin-kpi{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)) !important;border-color:var(--line) !important;box-shadow:none;}
  body.dark-mode .admin-kpi-value{color:var(--text) !important;}
  body.dark-mode .admin-kpi-label{color:var(--muted) !important;}
  body.dark-mode .admin-card{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01)),var(--card) !important;border-color:var(--line) !important;box-shadow:var(--shadow-soft) !important;}
  body.dark-mode .admin-card-head{border-bottom:1px solid rgba(255,255,255,.05) !important;}
  body.dark-mode .admin-card-title{color:var(--text) !important;}
  body.dark-mode .admin-card-subtitle{color:var(--muted) !important;}
  body.dark-mode th{background:var(--table-head-bg) !important;color:var(--heading) !important;}
  body.dark-mode td{color:var(--text);border-bottom-color:rgba(255,255,255,.05) !important;}
  body.dark-mode table{border-color:var(--line) !important;}
  body.dark-mode table tbody tr:nth-child(even){background:rgba(255,255,255,.02) !important;}
  body.dark-mode table tbody tr:hover{background:rgba(29,78,216,.08) !important;}
  body.dark-mode .premium-table{background:rgba(255,255,255,.01) !important;border-color:var(--line) !important;}
  body.dark-mode .premium-table thead th{background:var(--table-head-bg) !important;color:var(--text) !important;backdrop-filter:blur(8px);}
  body.dark-mode .premium-table tbody td{color:var(--text) !important;border-top-color:rgba(255,255,255,.05) !important;}
  body.dark-mode input,body.dark-mode select,body.dark-mode textarea{border-color:var(--line) !important;border-style:solid !important;outline:none;background-color:var(--input-bg);color:var(--input-text);}
  body.dark-mode input:focus,body.dark-mode select:focus,body.dark-mode textarea:focus{border-color:var(--blue) !important;border-style:solid !important;outline:none;box-shadow:0 0 0 3px rgba(59,130,246,.15) !important;}
  body.dark-mode .tabs button{background:var(--tab-bg);color:var(--tab-text);border-color:var(--tab-border);box-shadow:0 1px 2px rgba(0,0,0,.05);}
  body.dark-mode .tabs button.active{background:var(--blue);color:#fff;border-color:var(--blue);}
  body.dark-mode .sub-tab-bar button{color:var(--text) !important;}
  body.dark-mode .sub-tab-bar button.active{background:var(--blue) !important;color:#fff !important;}
  body.dark-mode button{border-color:var(--button-secondary-border);background:var(--button-secondary-bg);color:var(--button-secondary-text);box-shadow:none;}
  body.dark-mode button.primary{background:var(--blue);color:#fff;border-color:var(--blue);}
  body.dark-mode button.danger{background:var(--button-danger-bg);color:var(--button-danger-text);border-color:var(--button-danger-border);}
  body.dark-mode .panel{background:var(--surface);border-color:var(--line);}
  body.dark-mode .soft-block{background:var(--surface);border-color:var(--line);}
  body.dark-mode .data-list-item{background:var(--card);border-color:var(--line);box-shadow:none;}
  body.dark-mode .config-section{background:var(--card);border-color:var(--line);box-shadow:none;}
  body.dark-mode .empty-state{background:var(--surface);border-color:var(--line);color:var(--muted);}
  body.dark-mode .premium-empty{background:rgba(255,255,255,.015) !important;border-color:var(--line) !important;color:var(--muted) !important;}
  body.dark-mode .premium-badge{background:var(--surface);border-color:var(--line);color:var(--text);}
  body.dark-mode .admin-toolbar{background:var(--card) !important;border-color:var(--line) !important;box-shadow:var(--shadow-soft) !important;}
  body.dark-mode .admin-list-stat{background:var(--surface) !important;border-color:var(--line) !important;color:var(--muted) !important;}
  body.dark-mode .pill{background:rgba(148,163,184,.18);border-color:rgba(148,163,184,.18);color:var(--text);}
  body.dark-mode .msg{background:var(--card);border-color:var(--line);color:var(--text);}
  body.dark-mode .card{border-color:var(--line);box-shadow:var(--shadow-soft);}
  body.dark-mode .brandlogo-shell{background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border-color:var(--line);}
  body.dark-mode .presale-card{background:var(--card);border-color:var(--line);box-shadow:none;}
  body.dark-mode .admin-field label{color:var(--muted) !important;}
  body.dark-mode .admin-field input,body.dark-mode .admin-field select,body.dark-mode .admin-field textarea{background-color:var(--input-bg) !important;color:var(--input-text) !important;border-color:var(--line) !important;border-style:solid !important;outline:none;}
  body.dark-mode .product-type-filter button{background:var(--tab-bg);color:var(--tab-text);}
  body.dark-mode .product-type-filter button.active{background:var(--blue);color:#fff;}
  body.dark-mode .report-field label{color:var(--muted);font-weight:400;}
  body.dark-mode .kbd{background:var(--surface);border-color:var(--line);color:var(--muted);}

  /* btn-hero */
  body.dark-mode .btn-hero{background:var(--card);color:var(--text);border-color:var(--line);}

  /* Presale cards */
  body.dark-mode .presale-card.status-pending{border-left-color:#eab308;}
  body.dark-mode .presale-card.status-in-progress{border-left-color:#3b82f6;}
  body.dark-mode .presale-card.status-completed{border-left-color:#22c55e;}
  body.dark-mode .presale-card.status-cancelled{border-left-color:#ef4444;}
  body.dark-mode .presale-card.status-expired{border-left-color:#6b7280;}

  /* Presale timer */
  body.dark-mode .presale-timer{color:#fbbf24;background:rgba(234,179,8,.08);border-color:rgba(234,179,8,.2);}
  body.dark-mode .presale-timer.urgent{color:#f87171;background:rgba(220,38,38,.08);border-color:rgba(220,38,38,.2);}

  /* Presale status badges */
  body.dark-mode .presale-status-badge.open{background:rgba(234,179,8,.15);color:#fbbf24;}
  body.dark-mode .presale-status-badge.pending{background:rgba(234,179,8,.15);color:#fbbf24;}
  body.dark-mode .presale-status-badge.in-progress{background:rgba(59,130,246,.15);color:#93c5fd;}
  body.dark-mode .presale-status-badge.completed{background:rgba(34,197,94,.15);color:#86efac;}
  body.dark-mode .presale-status-badge.cancelled{background:rgba(239,68,68,.15);color:#fca5a5;}
  body.dark-mode .presale-status-badge.expired{background:rgba(107,114,128,.15);color:#d1d5db;}

  /* Presale status card */
  body.dark-mode .presale-status-card.status-open{border-left-color:#eab308;}

  /* Service badge */
  body.dark-mode .service-badge-lg{background:rgba(124,58,237,.2);color:#c4b5fd;}
  body.dark-mode .service-banner{background:linear-gradient(135deg,rgba(124,58,237,.3),rgba(109,40,217,.3));color:#c4b5fd;}

  /* Role badge super-admin */
  body.dark-mode .role-badge.super-admin{box-shadow:0 2px 8px rgba(245,158,11,.2);}

  /* Help-tip tooltip — real DOM element #_htip */
  body.dark-mode #_htip{background:#334155;color:#e2e8f0;border-color:#475569;}

  /* Date picker calendar icon */
  body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);}

  /* Reservation indicator */
  body.dark-mode .reservation-indicator{color:#fca5a5;}
  body.dark-mode .reservation-indicator::before{background:#ef4444;}

  /* Catalog pagination */
  body.dark-mode .cat-pagination button.active{color:#fff;}

  /* SVG select arrow for dark mode */
  body.dark-mode select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M3 5l3 3 3-3'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 12px center !important;padding-right:32px !important;}

  /* Safety net: force custom arrow and solid border on ALL selects regardless of specificity */
  select{
    -webkit-appearance:none !important;
    -moz-appearance:none !important;
    appearance:none !important;
    border-style:solid !important;
    outline:none !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M3 5l3 3 3-3'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:right 12px center !important;
    padding-right:32px !important;
  }
  select:focus{
    border-style:solid !important;
    outline:none !important;
  }

  /* ══════════════════════════════════════════════════════════ */
  /* ── Mobile & Tablet Enhancements (2026-03-18) ──────────── */
  /* ══════════════════════════════════════════════════════════ */

  /* Sticky table headers for horizontal scroll */
  .tbl thead th{
    position:sticky;
    top:0;
    z-index:2;
    background:var(--table-head-bg, var(--surface));
  }

  /* Better table sizing on very small phones */
  @media(max-width:480px){
    .tbl{ min-width:480px; }
    .admin-card-body{ padding:10px !important; }
    .stock-hero{ padding:16px !important; flex-direction:column !important; gap:10px !important; }
    .stock-hero h2{ font-size:1.2em !important; }
  }

  /* Landscape mode optimization */
  @media(orientation:landscape) and (max-height:500px){
    .brandbar{ padding:6px 12px !important; }
    .brandcopy h1{ font-size:1.1em !important; }
    .card{ padding:14px !important; margin:10px 0 !important; }
    .modal-overlay{ padding:8px !important; }
    .tabs button{ padding:6px 12px !important; font-size:11px !important; }
  }

  /* Modal safe-area for notch (horizontal) */
  @supports(padding:env(safe-area-inset-left)){
    .modal-overlay > div,
    [id$="Modal"] > div{
      padding-left:max(24px, env(safe-area-inset-left)) !important;
      padding-right:max(24px, env(safe-area-inset-right)) !important;
    }
  }

  /* Reduced motion for accessibility */
  @media(prefers-reduced-motion:reduce){
    *{ animation:none !important; transition-duration:0.01ms !important; }
  }

  /* Checkbox and toggle touch targets */
  @media(max-width:768px){
    input[type="checkbox"]{ min-width:20px; min-height:20px; }
    .em-toggle, .ema-toggle{ min-height:28px; }
    label{ cursor:pointer; }
  }

  /* Credit note modal responsive */
  @media(max-width:640px){
    #cnModal > div{ padding:16px !important; max-width:100% !important; border-radius:12px !important; }
    #cnModal .stock-field label{ font-size:.85em !important; }
  }

  /* Notification dropdown mobile */
  @media(max-width:480px){
    #notifDropdown{ width:calc(100vw - 16px) !important; right:8px !important; left:8px !important; }
  }

  /* ══════════════════════════════════════════════════════════ */
  /* ── Comprehensive Mobile/Responsive Audit (2026-03-20) ── */
  /* ══════════════════════════════════════════════════════════ */

  /* --- 1. premium-table must always scroll horizontally --- */
  .premium-table{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    max-width:100%;
  }
  .premium-table table{
    min-width:540px;
  }

  /* --- 2. Accounting tables (direct <table class="premium-table">) overflow wrapper --- */
  table.premium-table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    max-width:100%;
    min-width:0;
  }

  /* --- 3. Button touch targets (Apple HIG: 44px) --- */
  @media(max-width:768px){
    button{
      min-height:44px;
      min-width:44px;
    }
    button.small{
      min-height:36px;
      min-width:36px;
    }
    /* Action buttons inside tables can be smaller */
    td button,
    td button.small{
      min-height:34px;
      min-width:34px;
    }
  }

  /* --- 4. Inline grid collapse on mobile (covers all JS-generated inline grids) --- */
  @media(max-width:640px){
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns: repeat(4"]{
      grid-template-columns:1fr 1fr !important;
    }
    [style*="grid-template-columns:1fr 1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"]{
      grid-template-columns:1fr !important;
    }
    [style*="grid-template-columns:2fr 1fr"],
    [style*="grid-template-columns: 2fr 1fr"]{
      grid-template-columns:1fr !important;
    }
    /* Accounting entry row grid - stack on mobile */
    [style*="grid-template-columns:1fr 100px 100px 30px"]{
      grid-template-columns:1fr 1fr !important;
      gap:6px !important;
    }
    /* admin-field-grid for customer/user/product forms */
    .admin-field-grid,
    .admin-field-grid-1,
    .admin-field-grid-2{
      grid-template-columns:1fr !important;
    }
    /* admin-kpis in config-modules */
    .admin-kpis{
      grid-template-columns:1fr !important;
    }
  }

  /* --- 4b. Chart canvas height constraint on mobile --- */
  @media(max-width:640px){
    #dashSalesChart{ max-height:220px !important; }
    #dashPaymentChart{ max-height:220px !important; }
    canvas{ max-height:280px; }
  }

  /* --- 5. Modal mobile fullscreen for JS-created overlays --- */
  @media(max-width:640px){
    /* Named modal overlays and generic .modal-overlay children */
    .modal-overlay > div,
    #deliveryNoteModal > div,
    #supplierModal > div,
    #expenseModal > div,
    #closeCashOverlay > div,
    #openCashOverlay > div,
    #cashMovOverlay > div,
    #cnModal > div,
    #newCustSaleOverlay > div,
    [id$="Modal"] > div,
    [id$="Overlay"] > div{
      max-width:calc(100vw - 16px) !important;
      max-height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 16px) !important;
      width:calc(100vw - 16px) !important;
      border-radius:14px !important;
      padding:16px !important;
      overflow-y:auto !important;
      overflow-x:hidden !important;
      box-sizing:border-box !important;
    }
    .modal-overlay,
    [id$="Modal"][style*="position:fixed"],
    [id$="Overlay"][style*="position:fixed"]{
      padding:8px !important;
    }
    /* Modal inner grids also collapse */
    .modal-overlay [style*="grid-template-columns"],
    [id$="Modal"] [style*="grid-template-columns"],
    [id$="Overlay"] [style*="grid-template-columns"]{
      grid-template-columns:1fr !important;
    }
    /* Modal tables scroll */
    .modal-overlay .premium-table,
    .modal-overlay .table-wrap,
    .modal-overlay [style*="overflow-x:auto"],
    [id$="Modal"] .premium-table,
    [id$="Modal"] .table-wrap,
    [id$="Overlay"] .premium-table,
    [id$="Overlay"] .table-wrap{
      overflow-x:auto !important;
      -webkit-overflow-scrolling:touch !important;
      max-width:100% !important;
    }
  }

  /* --- 6. data-list-item stacking on small screens --- */
  @media(max-width:640px){
    .data-list-item{
      flex-direction:column;
      align-items:flex-start !important;
      gap:10px;
      padding:16px !important;
    }
    .data-list-item button{
      width:100%;
    }
  }

  /* --- 7. Config section inputs full-width on mobile --- */
  @media(max-width:640px){
    .config-section input,
    .config-section select,
    .config-section textarea{
      width:100% !important;
      min-width:0 !important;
      box-sizing:border-box !important;
    }
    .config-section .row{
      flex-direction:column !important;
      align-items:stretch !important;
    }
  }

  /* --- 8. Presale queue grid collapse on mobile --- */
  @media(max-width:640px){
    .presale-queue-grid{
      grid-template-columns:1fr !important;
    }
    .presale-card{
      padding:16px 18px !important;
    }
  }

  /* --- 9. Product type filter wrap on mobile --- */
  @media(max-width:430px){
    .product-type-filter{
      flex-wrap:wrap;
      width:100%;
    }
    .product-type-filter button{
      flex:1 1 auto;
      text-align:center;
      padding:8px 10px !important;
      font-size:.78em !important;
    }
  }

  /* --- 10. Email notification module grids mobile --- */
  @media(max-width:640px){
    .em-form-grid{
      grid-template-columns:1fr !important;
    }
    .em-cards-grid{
      grid-template-columns:1fr !important;
    }
    .em-preset-cards{
      grid-template-columns:1fr !important;
    }
  }

  /* --- 11. Report chart containers responsive --- */
  /* Chart.js manages canvas sizing via JS; only constrain width, not height */
  canvas{
    max-width:100%;
  }

  /* --- 12. Ensure all inline overflow-x:auto divs work on touch --- */
  [style*="overflow-x:auto"]{
    -webkit-overflow-scrolling:touch;
    max-width:100%;
  }

  /* --- 13. Fix budget table inside modal (no overflow wrapper) --- */
  @media(max-width:768px){
    .admin-card-body .premium-table{
      overflow-x:auto !important;
      -webkit-overflow-scrolling:touch !important;
    }
    .admin-card-body .premium-table table{
      min-width:480px !important;
    }
  }

  /* --- 14. Sticky -webkit- prefix for older iOS Safari --- */
  .tbl thead th,
  table thead th{
    position:-webkit-sticky;
    position:sticky;
    top:0;
    z-index:2;
  }

  /* --- 15. Prevent iOS double-tap zoom on interactive elements --- */
  button,
  a,
  input,
  select,
  textarea,
  label{
    touch-action:manipulation;
  }

  /* --- 16. Delivery-PO and suppliers-expenses modal inner grid stacking --- */
  @media(max-width:640px){
    /* Stock movement form fields */
    .stock-field{
      width:100% !important;
      min-width:0 !important;
    }
    .stock-field input,
    .stock-field select,
    .stock-field textarea{
      width:100% !important;
      box-sizing:border-box !important;
    }
  }

  /* --- 17. Fix help-tip tooltip overflow on mobile --- */
  @media(max-width:640px){
    #_htip{max-width:calc(100vw - 24px) !important;}
  }

  /* --- 18. KPI grid extra-small screens --- */
  @media(max-width:430px){
    .kpi-grid{
      grid-template-columns:1fr !important;
      gap:8px !important;
    }
    .kpi-card{
      padding:12px !important;
    }
    .kpi-value{
      font-size:1.3em !important;
    }
  }

  /* ══════════════════════════════════════════════════════════ */
  /* ── Dark/Light Parity & Mobile Audit Fixes (2026-03-21) ── */
  /* ══════════════════════════════════════════════════════════ */

  /* --- 1. Missing body.dark-mode rules that exist in body.light-mode --- */

  /* Headings */
  body.dark-mode h2,
  body.dark-mode h3,
  body.dark-mode h4{color:var(--heading) !important;}

  /* Paragraph text */
  body.dark-mode p{color:var(--text);}

  /* Strong / bold */
  body.dark-mode strong,
  body.dark-mode b{color:var(--heading);}

  /* Labels */
  body.dark-mode label{color:var(--muted);}

  /* Muted text */
  body.dark-mode .muted{color:var(--muted);}

  /* Tenant label */
  body.dark-mode #tenantLabel{color:var(--heading);}

  /* Top role text */
  body.dark-mode #topRoleText{color:var(--muted);}

  /* Modal dialog */
  body.dark-mode .modal-dialog{background:var(--card);color:var(--text);}
  body.dark-mode .modal-dialog h3{color:var(--heading) !important;}

  /* Named modal inner divs */
  body.dark-mode #myPreferencesModal > div,
  body.dark-mode #importProductsModal > div,
  body.dark-mode #productGalleryModal > div,
  body.dark-mode #reportsCenterModal > div,
  body.dark-mode #warehousesAdminModal > div,
  body.dark-mode #tenantSettingsModal > div{background:var(--card);color:var(--text);}

  /* Presale sub-tabs */
  body.dark-mode .presale-sub-tabs{background:var(--surface);border-color:var(--line);}
  body.dark-mode .presale-sub-tabs button{color:var(--text);background:transparent;border-bottom:2px solid transparent;}
  body.dark-mode .presale-sub-tabs button.active{background:transparent;color:var(--blue);border-bottom:2px solid var(--blue);}

  /* Presale card inner text */
  body.dark-mode .presale-card{color:var(--text) !important;}
  body.dark-mode .presale-card strong{color:var(--heading) !important;}
  body.dark-mode .presale-card div{color:var(--text);}
  body.dark-mode .presale-card td{color:var(--text) !important;}
  body.dark-mode .presale-card th{color:var(--heading) !important;background:var(--surface) !important;}

  /* New customer sale overlay */
  body.dark-mode #newCustSaleOverlay h3{color:var(--heading) !important;}
  body.dark-mode #newCustSaleOverlay div{color:var(--text);}
  body.dark-mode #newCustSaleOverlay p{color:var(--muted);}

  /* Pre-sale payment modal */
  body.dark-mode #preSalePaymentModal h3{color:var(--heading) !important;}
  body.dark-mode #preSalePaymentModal div{color:var(--text);}
  body.dark-mode #preSalePaymentModal td{color:var(--text) !important;}

  /* Help-tip: tooltip bg inverts for dark mode */
  body.dark-mode .help-tip{background:var(--blue,#1D4ED8);color:#fff;}
  body.dark-mode #_htip{background:#334155;color:#e2e8f0;border-color:#475569;}
  body.dark-mode .help-tip:hover::before{display:none;}

  /* Role badges */
  body.dark-mode .role-badge.admin{background:rgba(59,130,246,.2);color:#93c5fd;}
  body.dark-mode .role-badge.supervisor{background:rgba(234,179,8,.15);color:#fcd34d;}
  body.dark-mode .role-badge.cajero{background:rgba(34,197,94,.15);color:#86efac;}

  /* Service banner / badge */
  body.dark-mode .service-banner{color:#c4b5fd;background:linear-gradient(135deg,rgba(124,58,237,.3),rgba(109,40,217,.3));border-color:rgba(124,58,237,.3);}
  body.dark-mode .service-badge-lg{background:rgba(124,58,237,.2);color:#c4b5fd;}

  /* Section title / copy */
  body.dark-mode .section-title{color:var(--heading);}
  body.dark-mode .section-copy{color:var(--muted);}

  /* Stock field labels */
  body.dark-mode .stock-field label{color:var(--muted);}

  /* License warning banner: dark-mode readable */
  body.dark-mode .license-warning-banner{background:rgba(234,179,8,.12);color:#fcd34d;border-color:rgba(234,179,8,.3);}

  /* Tab group title */
  body.dark-mode .tab-group-title{color:var(--muted);}

  /* Brand logo fallback */
  body.dark-mode .brandlogo-fallback{color:#fff;}

  /* Catalog pagination */
  body.dark-mode .cat-pagination button.active{color:#fff;}

  /* Date inputs: dark calendar icon */
  body.dark-mode input[type="date"],
  body.dark-mode input[type="time"],
  body.dark-mode input[type="datetime-local"]{
    background:var(--input-bg);
    color:var(--input-text);
    border-color:var(--line) !important;
  }
  body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator{
    filter:invert(1);
  }

  /* Email module collapsible code blocks */
  body.dark-mode .em-collapsible-body code{background:rgba(99,102,241,.15);color:#a5b4fc;border-color:rgba(99,102,241,.3);}

  /* msg.ok and msg.err in dark mode */
  body.dark-mode .msg.ok{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text);}
  body.dark-mode .msg.err{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger-text);}

  /* Profile section */
  body.dark-mode .profile-section{background:var(--surface);border-color:var(--line);}

  /* Report field labels */
  body.dark-mode .report-field label{color:var(--muted);font-weight:400;}

  /* Select: ensure background-color explicitly set in dark mode */
  body.dark-mode select{
    -webkit-appearance:none !important;
    appearance:none !important;
    background-color:var(--input-bg) !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M3 5l3 3 3-3'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:right 12px center !important;
    padding-right:32px !important;
    border-style:solid !important;
  }

  /* Select: ensure background-color explicitly set in light mode */
  body.light-mode select{
    background-color:#ffffff !important;
    border-style:solid !important;
  }

  /* --- 2. Missing body.light-mode msg.ok/err (already exist but ensure specificity) --- */
  body.light-mode .msg.ok{background:#ecfdf5;border-color:#86efac;color:#166534;}
  body.light-mode .msg.err{background:#fef2f2;border-color:#fecaca;color:#991b1b;}

  /* --- 3. Ensure all new components styled for both themes --- */

  /* Bank reconciliation modal */
  body.light-mode .modal-box{background:#ffffff;color:#1e293b;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.15);}
  body.dark-mode .modal-box{background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.4);}

  /* Receipt modals (credit payment receipt) */
  body.light-mode #creditReceiptContent{background:#ffffff;color:#1e293b;}
  body.dark-mode #creditReceiptContent{background:var(--card);color:var(--text);}

  /* Credit note modal */
  body.dark-mode #cnModal > div{background:var(--card);color:var(--text);}
  body.light-mode #cnModal > div{background:#ffffff;color:#1e293b;}

  /* --- 4. Mobile: ensure touch targets >= 42px for tab buttons in all contexts --- */
  @media(max-width:768px){
    .tabs button,
    .sub-tab-bar button,
    .presale-sub-tabs button{
      min-height:42px;
    }
    /* Ensure buttons in data-list-items are full-width touch targets */
    .data-list-item button{
      min-height:42px;
    }
  }

  /* --- 5. Mobile: supplier search input responsive --- */
  @media(max-width:640px){
    #supplierSearchInput{
      width:100% !important;
      max-width:100% !important;
      box-sizing:border-box !important;
    }
  }

  /* --- 6. Mobile: PO modal inner table scroll wrapper --- */
  @media(max-width:768px){
    #poItemsTable{
      display:block;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
    }
  }

  /* --- 7. Mobile: budget table inputs constrain width --- */
  @media(max-width:640px){
    .budget-item-input{
      width:100% !important;
      max-width:100% !important;
      box-sizing:border-box !important;
    }
  }

  /* --- 8. Mobile: accounting modal-box inputs full-width --- */
  @media(max-width:640px){
    .modal-box input,
    .modal-box select,
    .modal-box textarea{
      width:100% !important;
      min-width:0 !important;
      box-sizing:border-box !important;
    }
  }

  /* --- 9. Mobile: sale form inline input widths constrained --- */
  @media(max-width:640px){
    .cn-item-qty,
    #cnSaleSearch,
    #cnSearchBy{
      width:100% !important;
      min-width:0 !important;
      box-sizing:border-box !important;
    }
    /* Sale item qty/price/discount inputs */
    #panel td input[type="number"],
    #panel td input[type="text"]{
      max-width:100% !important;
      box-sizing:border-box !important;
    }
  }

  /* --- 10. Mobile: payment line inputs responsive --- */
  @media(max-width:640px){
    [id^="salePayMethod_"],
    [id^="salePayRef_"],
    [id^="salePayAmt_"]{
      width:100% !important;
      min-width:0 !important;
      box-sizing:border-box !important;
    }
  }

  /* --- 11. Mobile: purchase order modal pay-term input --- */
  @media(max-width:640px){
    #po_paymentTermDays{
      width:100% !important;
      box-sizing:border-box !important;
    }
  }

  /* --- 12. Ensure table-row-alt variable used in dark mode --- */
  body.dark-mode table tbody tr:nth-child(even){background:rgba(255,255,255,.02) !important;}

  /* --- 13. Dark mode: warning-border variable (used by some badges) --- */
  body.dark-mode .license-warning-banner{
    background:rgba(234,179,8,.12);
    color:#fcd34d;
    border-color:rgba(234,179,8,.3);
  }

  /* --- 14. Mobile: delivery-po min-width stock-fields --- */
  @media(max-width:640px){
    .stock-field[style*="min-width:140px"],
    .stock-field[style*="min-width:130px"],
    .stock-field[style*="min-width:160px"]{
      min-width:0 !important;
      width:100% !important;
    }
  }

  /* --- 15. Mobile: presale queue search input --- */
  @media(max-width:640px){
    #psQueueSearch{
      width:100% !important;
      max-width:100% !important;
      box-sizing:border-box !important;
    }
  }

  /* --- 16. Products module: embedded style overrides for mobile already exist in products.js --- */
  /* --- Ensure inline tables within products get overflow wrappers via CSS --- */
  @media(max-width:768px){
    .premium-table{
      display:block;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      max-width:100%;
    }
  }

/* ═══════════════════════════════════════════════════════════════════════ */
/* 17. APPOINTMENTS / SCHEDULING MODULE                                  */
/* ═══════════════════════════════════════════════════════════════════════ */

/* Calendar grid base */
#apptCalGrid table{border-collapse:collapse;width:100%;}
#apptCalGrid th,#apptCalGrid td{border:1px solid var(--line);vertical-align:top;}
#apptCalGrid th{padding:8px 6px;font-size:.82em;font-weight:700;text-align:center;background:var(--card);color:var(--heading);white-space:nowrap;}
#apptCalGrid td{padding:2px 4px;min-height:40px;}

/* Light mode calendar */
body.light-mode #apptCalGrid th{background:#f1f5f9;color:#0f172a;border-color:#e2e8f0;}
body.light-mode #apptCalGrid td{background:#ffffff;border-color:#e2e8f0;}

/* Dark mode calendar */
body.dark-mode #apptCalGrid th{background:var(--table-head-bg,#1e293b);color:var(--text);border-color:var(--line);}
body.dark-mode #apptCalGrid td{background:var(--card);border-color:var(--line);}

/* Appointment status badges */
.appt-badge{display:inline-block;padding:3px 10px;border-radius:8px;font-size:.82em;font-weight:600;white-space:nowrap;}
.appt-badge-pending{background:var(--warn-bg,#ffedd5);color:var(--warn-text,#9a3412);}
.appt-badge-confirmed{background:var(--info-bg,#dbeafe);color:var(--info-text,#1d4ed8);}
.appt-badge-in-progress{background:var(--success-bg,#d1fae5);color:var(--success-text,#065f46);}
.appt-badge-completed{background:var(--success-bg,#d1fae5);color:var(--success-text,#065f46);}
.appt-badge-cancelled{background:var(--danger-bg,#fee2e2);color:var(--danger-text,#991b1b);}
.appt-badge-no-show{background:var(--surface-2,#e5e7eb);color:var(--muted,#6b7280);}

/* Calendar mobile responsive */
@media(max-width:768px){
  #apptCalGrid{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -12px;padding:0 12px;}
  #apptCalGrid table{min-width:600px;}
  #apptCalGrid th{font-size:.72em;padding:6px 3px;}
  #apptCalGrid td{padding:1px 2px;}
}
@media(max-width:480px){
  #apptCalGrid table{min-width:400px;}
}

/* ── Purchase Orders (OC) mobile responsive ── */
@media(max-width:768px){
  /* PO create/edit modal: collapse 3-col grid to 1-col */
  #purchaseOrderModal > div > div[style*="grid-template-columns:1fr 1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
  /* PO modal max-width override */
  #purchaseOrderModal > div{max-width:100% !important;padding:16px !important;border-radius:12px !important;}
  /* PO detail modal */
  #poDetailModal > div{max-width:100% !important;padding:16px !important;border-radius:12px !important;}
  #poDetailModal div[style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
  /* Receive goods modal */
  #receiveGoodsModal > div{max-width:100% !important;padding:16px !important;border-radius:12px !important;}
  /* Low stock suggestion modal */
  #poLowStockOverlay > div{max-width:100% !important;padding:16px !important;border-radius:12px !important;}
  #poLowStockOverlay div[style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
  /* Select approved PO modal */
  #selectApprovedPOModal > div{max-width:100% !important;padding:16px !important;border-radius:12px !important;}
  /* Quick supplier/product modals */
  #quickSupplierModal > div{max-width:100% !important;padding:16px !important;border-radius:12px !important;}
  #quickProductModal > div{max-width:100% !important;padding:16px !important;border-radius:12px !important;}
  #quickProductModal div[style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
  /* PO list hero buttons wrap */
  .stock-shell .admin-hero{padding:20px 16px !important;}
  /* PO list filter row */
  .stock-shell div[style*="display:flex;gap:12px"]{gap:8px !important;}
  .stock-shell div[style*="min-width:140px"]{min-width:100% !important;}
  .stock-shell div[style*="min-width:130px"]{min-width:calc(50% - 4px) !important;}
}
@media(max-width:480px){
  /* PO items table: ensure scrollable */
  #purchaseOrderModal table.tbl{min-width:600px;}
  #poDetailModal table.tbl{min-width:500px;}
  #receiveGoodsModal table.tbl{min-width:600px;}
  #poLowStockOverlay table.tbl{min-width:700px;}
  #selectApprovedPOModal table.tbl{min-width:550px;}
  /* Action buttons wrap on small screens */
  #poDetailModal div[style*="display:flex;gap:10px;justify-content:flex-end"]{
    flex-direction:column !important;
  }
  #poDetailModal div[style*="display:flex;gap:10px;justify-content:flex-end"] button{
    width:100% !important;
    text-align:center !important;
  }
}

/* ── Report sub-tabs ── */
.report-subtabs-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.report-subtab-btn{background:transparent;color:var(--text);border:none;border-bottom:2px solid transparent;border-radius:0;padding:10px 18px;font-weight:600;cursor:pointer;min-height:44px;font-size:.92em;transition:all .2s ease;}
.report-subtab-btn:hover{color:var(--blue);border-bottom-color:var(--blue);}
.report-subtab-btn.active{background:transparent;color:var(--blue);border:none;border-bottom:2px solid var(--blue);border-radius:0;font-weight:700;}
body.light-mode .report-subtab-btn{background:transparent;color:#334155;border:none;border-bottom:2px solid transparent;}
body.light-mode .report-subtab-btn:hover{color:var(--blue);border-bottom-color:var(--blue);}
body.light-mode .report-subtab-btn.active{background:transparent;color:var(--blue);border:none;border-bottom:2px solid var(--blue);}
body.dark-mode .report-subtab-btn{background:transparent;color:var(--text);border:none;border-bottom:2px solid transparent;}
body.dark-mode .report-subtab-btn.active{background:transparent;color:var(--blue);border:none;border-bottom:2px solid var(--blue);}

/* ===== SUPPORT WIDGET ===== */
#supportWidgetBtn {
  position:fixed; bottom:24px; right:24px; z-index:8900;
  width:56px; height:56px; border-radius:50%;
  background:var(--blue,#2563eb); color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.3);
  transition:transform .2s, box-shadow .2s;
  user-select:none;
}
#supportWidgetBtn:hover { transform:scale(1.1); box-shadow:0 6px 24px rgba(0,0,0,.4); }

.support-badge {
  position:absolute; top:-2px; right:-2px;
  background:var(--danger-text,#dc2626); color:#fff;
  font-size:10px; font-weight:700; border-radius:50%;
  min-width:18px; height:18px; line-height:18px;
  text-align:center; padding:0 3px;
}

#supportPanel {
  position:fixed; bottom:90px; right:24px; z-index:8950;
  width:500px; height:min(680px, calc(100vh - 110px));
  background:var(--card); border:1px solid var(--line);
  border-radius:16px; box-shadow:0 -8px 32px rgba(0,0,0,.25);
  display:none; flex-direction:column; overflow:hidden;
}

.support-header {
  padding:14px 16px; border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  flex-shrink:0;
}

.support-close-btn {
  background:none; border:none; font-size:1.4em; cursor:pointer;
  color:var(--muted); padding:0 4px; line-height:1;
}
.support-close-btn:hover { color:var(--text); }

.support-back-btn {
  background:none; border:none; font-size:1.1em; cursor:pointer;
  color:var(--muted); padding:2px 6px; line-height:1;
}
.support-back-btn:hover { color:var(--text); }

.support-action-btn {
  background:none; border:none; cursor:pointer;
  color:var(--muted); padding:2px 6px; line-height:1;
}
.support-action-btn:hover { color:var(--text); }

.support-ticket-list {
  flex:1; overflow-y:auto; padding:0;
}

.support-ticket-item {
  padding:12px 16px; border-bottom:1px solid var(--line);
  cursor:pointer; transition:background .15s;
}
.support-ticket-item:hover { background:var(--surface,rgba(0,0,0,.03)); }

.support-status-badge {
  font-size:.72em; font-weight:600; padding:2px 8px;
  border-radius:10px; white-space:nowrap; flex-shrink:0;
}
.support-status-open { background:var(--blue-bg,rgba(37,99,235,.12)); color:var(--blue,#2563eb); }
.support-status-in-progress { background:var(--warning-bg,rgba(245,158,11,.12)); color:var(--status-pending,#d97706); }
.support-status-resolved { background:var(--green-bg,rgba(22,163,74,.12)); color:var(--status-active,#16a34a); }
.support-status-closed { background:var(--muted-bg,rgba(100,116,139,.12)); color:var(--muted,#64748b); }

.support-empty {
  text-align:center; padding:40px 24px;
}

.support-btn-primary {
  width:100%; padding:10px 16px; border:none;
  background:var(--blue,#2563eb); color:#fff;
  border-radius:10px; font-size:.92em; font-weight:600;
  cursor:pointer; transition:background .15s;
}
.support-btn-primary:hover { opacity:.9; }
.support-btn-primary:disabled { opacity:.5; cursor:not-allowed; }

.support-btn-secondary {
  padding:8px 16px; border:1px solid var(--line);
  background:var(--surface); color:var(--text);
  border-radius:8px; font-size:.85em; cursor:pointer;
}

.support-form-body {
  flex:1; overflow-y:auto; padding:16px;
}

.support-field {
  margin-bottom:14px;
}
.support-field label {
  display:block; font-size:.85em; font-weight:600;
  color:var(--text); margin-bottom:5px;
}
.support-field input,
.support-field select,
.support-field textarea {
  width:100%; padding:10px 12px;
  border:1px solid var(--line); border-radius:8px;
  background:var(--input-bg,var(--surface)); color:var(--input-text,var(--text));
  font-size:.92em; font-family:inherit;
}
.support-field textarea {
  resize:vertical; min-height:80px;
}

.support-messages {
  flex:1; overflow-y:auto; padding:16px;
  display:flex; flex-direction:column; gap:8px;
}

.support-msg-tenant {
  align-self:flex-end; background:var(--blue,#2563eb); color:#fff;
  padding:10px 14px; border-radius:14px 14px 4px 14px;
  max-width:80%; font-size:.9em; line-height:1.4;
  word-break:break-word;
}

.support-msg-admin {
  align-self:flex-start; background:var(--surface,#f1f5f9); color:var(--text);
  padding:10px 14px; border-radius:14px 14px 14px 4px;
  max-width:80%; font-size:.9em; line-height:1.4;
  word-break:break-word;
}

.support-msg-system {
  align-self:center; color:var(--muted); font-size:.82em;
  font-style:italic; padding:4px 12px;
}

.support-input-area {
  padding:10px 14px; border-top:1px solid var(--line);
  display:flex; gap:6px; align-items:flex-end;
  flex-shrink:0;
}

.support-input-area textarea {
  flex:1; resize:none; padding:10px 12px;
  border:1px solid var(--line); border-radius:10px;
  background:var(--input-bg,var(--surface)); color:var(--input-text,var(--text));
  font-size:15px; line-height:1.4; max-height:100px;
  min-height:40px; font-family:inherit;
}

.support-icon-btn {
  width:38px; height:38px; border:none; border-radius:50%;
  background:var(--surface); color:var(--text);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:1.05em; flex-shrink:0;
  transition:background .15s;
}
.support-icon-btn:hover { background:var(--line); }
.support-icon-btn.active { background:var(--green,#16a34a); color:#fff; }

.support-screen-share-btn {
  display:none;
}

/* Mobile responsive */
@media(max-width:640px){
  #supportPanel {
    width:100vw; right:0; bottom:0;
    border-radius:16px 16px 0 0;
    height:85vh;
  }
  #supportWidgetBtn {
    bottom:16px; right:16px;
    width:50px; height:50px;
  }
  .support-screen-share-btn { display:none !important; }
}

/* Desktop: show screen share button */
@media(min-width:641px){
  .support-screen-share-btn { display:flex; }
}

/* ══════════════════════════════════════════════════════════════
   RECEPTION MODULE — Vehicle Intake for Workshops
   ══════════════════════════════════════════════════════════════ */

/* Wizard progress bar */
.rec-wizard-progress {
  display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:24px; flex-wrap:nowrap; overflow-x:auto;
}
.rec-wizard-step {
  display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:20px;
  font-size:.85em; font-weight:600; white-space:nowrap;
  background:var(--surface,#1e293b); color:var(--muted,#64748b); border:1px solid var(--line,#334155);
  transition: all .2s ease;
}
.rec-wizard-step.active {
  background:var(--blue,#2563eb); color:#fff; border-color:var(--blue,#2563eb);
}
.rec-wizard-step.completed {
  background:var(--status-active,#16a34a); color:#fff; border-color:var(--status-active,#16a34a);
}
.rec-wizard-connector {
  width:24px; height:2px; background:var(--line,#334155); flex-shrink:0;
}
.rec-wizard-connector.completed { background:var(--status-active,#16a34a); }

/* Fuel gauge */
.rec-fuel-gauge { display:flex; gap:4px; align-items:center; }
.rec-fuel-btn {
  padding:8px 14px; border-radius:8px; cursor:pointer; font-weight:600; font-size:.9em;
  background:var(--surface,#1e293b); color:var(--muted,#64748b); border:1px solid var(--line,#334155);
  transition: all .15s ease;
}
.rec-fuel-btn:hover { border-color:var(--blue,#2563eb); color:var(--text,#e2e8f0); }
.rec-fuel-btn.selected { background:var(--blue,#2563eb); color:#fff; border-color:var(--blue,#2563eb); }

/* Checklist toggles */
.rec-checklist { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.rec-check-item {
  display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:10px;
  background:var(--surface,#1e293b); border:1px solid var(--line,#334155); cursor:pointer;
  transition: all .15s ease; font-size:.9em;
}
.rec-check-item:hover { border-color:var(--blue,#2563eb); }
.rec-check-item.checked { border-color:var(--status-active,#16a34a); background:rgba(22,163,74,.08); }
.rec-check-item .rec-check-icon { font-size:1.3em; }

/* Photo grid */
.rec-photo-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px;
}
.rec-photo-thumb {
  position:relative; border-radius:10px; overflow:hidden; aspect-ratio:1;
  border:1px solid var(--line,#334155); cursor:pointer; background:var(--surface,#1e293b);
}
.rec-photo-thumb img { width:100%; height:100%; object-fit:cover; }
.rec-photo-thumb .rec-photo-phase {
  position:absolute; top:4px; left:4px; padding:2px 8px; border-radius:6px;
  font-size:.7em; font-weight:700; background:rgba(0,0,0,.6); color:#fff;
}
.rec-photo-thumb .rec-photo-del {
  position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%;
  background:var(--danger,#dc2626); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:.8em; font-weight:700;
}

/* Photo lightbox overlay */
.rec-lightbox {
  position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.85);
  display:flex; align-items:center; justify-content:center;
}
.rec-lightbox img { max-width:95vw; max-height:90vh; border-radius:8px; }
.rec-lightbox-close {
  position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.15); color:#fff; border:none; cursor:pointer;
  font-size:1.3em; font-weight:700; display:flex; align-items:center; justify-content:center;
}

/* Timeline */
.rec-timeline { position:relative; padding-left:28px; }
.rec-timeline::before {
  content:""; position:absolute; left:10px; top:0; bottom:0; width:2px;
  background:var(--line,#334155);
}
.rec-timeline-item {
  position:relative; margin-bottom:20px; padding:14px 18px;
  background:var(--card,#0f172a); border:1px solid var(--line,#334155); border-radius:12px;
}
.rec-timeline-item::before {
  content:""; position:absolute; left:-22px; top:18px; width:10px; height:10px;
  border-radius:50%; background:var(--blue,#2563eb); border:2px solid var(--card,#0f172a);
}
.rec-timeline-item.delivered::before { background:var(--status-active,#16a34a); }
.rec-timeline-item.cancelled::before { background:var(--danger,#dc2626); }

/* Sub-tab buttons */
.rec-subtabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.rec-subtab {
  padding:8px 16px; border-radius:10px; cursor:pointer; font-weight:600; font-size:.88em;
  background:var(--surface,#1e293b); color:var(--muted,#64748b); border:1px solid var(--line,#334155);
  transition: all .15s ease;
}
.rec-subtab:hover { border-color:var(--blue,#2563eb); color:var(--text,#e2e8f0); }
.rec-subtab.active { background:var(--blue,#2563eb); color:#fff; border-color:var(--blue,#2563eb); }

/* Status badges */
.rec-status-badge {
  display:inline-block; padding:2px 10px; border-radius:10px; font-size:.78em; font-weight:600;
}

/* Cards */
.rec-card {
  padding:16px 20px; background:var(--card,#0f172a); border:1px solid var(--line,#334155);
  border-radius:12px; margin-bottom:12px;
}
.rec-card-title {
  font-size:.82em; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--heading,#f1f5f9); margin-bottom:10px;
}
.rec-card-grid {
  display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:.88em;
}
.rec-card-label { color:var(--muted,#64748b); font-weight:600; }
.rec-card-value { color:var(--text,#e2e8f0); }

/* Customer/Vehicle select cards */
.rec-select-card {
  padding:12px 16px; border-radius:10px; cursor:pointer;
  background:var(--surface,#1e293b); border:1px solid var(--line,#334155);
  transition: all .15s ease;
}
.rec-select-card:hover { border-color:var(--blue,#2563eb); }
.rec-select-card.selected { border-color:var(--blue,#2563eb); background:rgba(37,99,235,.08); }

/* Light mode overrides */
body.light-mode .rec-wizard-step { background:var(--surface,#f8fafc); color:var(--muted,#64748b); border-color:var(--line,#e2e8f0); }
body.light-mode .rec-wizard-step.active { background:var(--blue,#2563eb); color:#fff; }
body.light-mode .rec-wizard-step.completed { background:var(--status-active,#16a34a); color:#fff; }
body.light-mode .rec-fuel-btn { background:var(--surface,#f8fafc); color:var(--muted,#64748b); border-color:var(--line,#e2e8f0); }
body.light-mode .rec-fuel-btn.selected { background:var(--blue,#2563eb); color:#fff; }
body.light-mode .rec-check-item { background:var(--surface,#f8fafc); border-color:var(--line,#e2e8f0); }
body.light-mode .rec-check-item.checked { border-color:var(--status-active,#16a34a); background:rgba(22,163,74,.06); }
body.light-mode .rec-photo-thumb { background:var(--surface,#f8fafc); border-color:var(--line,#e2e8f0); }
body.light-mode .rec-timeline::before { background:var(--line,#e2e8f0); }
body.light-mode .rec-timeline-item { background:var(--card,#fff); border-color:var(--line,#e2e8f0); }
body.light-mode .rec-subtab { background:var(--surface,#f8fafc); color:var(--muted,#64748b); border-color:var(--line,#e2e8f0); }
body.light-mode .rec-card { background:var(--card,#fff); border-color:var(--line,#e2e8f0); }
body.light-mode .rec-select-card { background:var(--surface,#f8fafc); border-color:var(--line,#e2e8f0); }

/* Diagnostic item rows responsive */
.rec-diag-item-row {
  display:grid; grid-template-columns:1fr 70px 110px 70px 30px; gap:6px; align-items:end; margin-bottom:6px;
}

/* Mobile responsive */
@media(max-width:768px){
  .rec-wizard-progress { gap:0; overflow-x:auto; padding-bottom:4px; }
  .rec-wizard-step { padding:6px 10px; font-size:.78em; }
  .rec-wizard-connector { width:12px; }
  .rec-checklist { grid-template-columns:1fr 1fr; }
  .rec-photo-grid { grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:6px; }
  .rec-card-grid { grid-template-columns:1fr; gap:2px 0; }
  .rec-card-label { margin-top:6px; }
  .rec-subtabs { gap:4px; }
  .rec-subtab { padding:6px 12px; font-size:.82em; }
  .rec-fuel-gauge { flex-wrap:wrap; }
  .rec-diag-item-row { grid-template-columns:1fr 60px 90px 60px 30px; gap:4px; }
}

@media(max-width:430px){
  .rec-wizard-step { padding:5px 8px; font-size:.72em; }
  .rec-wizard-connector { width:8px; }
  .rec-checklist { grid-template-columns:1fr; }
  .rec-photo-grid { grid-template-columns:repeat(3,1fr); }
  .rec-fuel-btn { padding:6px 10px; font-size:.82em; }
  .rec-diag-item-row { grid-template-columns:1fr; gap:4px; }
}