*{box-sizing:border-box;margin:0;padding:0}
:root{
  --blue:#1a73e8;--blue-dark:#1557b0;--blue-light:#EEF4FF;
  --green:#1D9E75;--green-dark:#0F6E56;--green-light:#E1F5EE;
  --amber:#475569;--amber-light:#f1f5f9;
  --red:#E24B4A;--red-light:#FCEBEB;
  --purple:#1e40af;--purple-light:#dbeafe;
  --sidebar:#0d1b3e;--sidebar-hover:rgba(255,255,255,0.08);--sidebar-active:rgba(26,115,232,0.3);
  --bg:#F0F4FA;--surface:#FFFFFF;--border:#DDE4EF;--border-hover:#a8c0e8;
  --text:#0d1b3e;--text-muted:#5a6a8a;--text-hint:#9aaac0;
  --radius:10px;--radius-lg:16px;
  --shadow:0 2px 12px rgba(13,27,62,0.08),0 1px 3px rgba(13,27,62,0.04);
  --shadow-md:0 6px 24px rgba(13,27,62,0.10),0 2px 6px rgba(13,27,62,0.05);
}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-size:14px}

/* ── Auth ── */
.auth-screen{position:fixed;inset:0;z-index:999;overflow:hidden;background:#080f1d}
.auth-aircraft-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.auth-aircraft-overlay{position:absolute;inset:0;background:linear-gradient(90deg,#080f1d 0%,rgba(8,15,29,0.82) 30%,rgba(8,15,29,0.2) 58%,rgba(8,15,29,0.05) 100%)}
.auth-dialog{position:absolute;top:50%;left:8%;transform:translateY(-50%);width:340px;background:#fff;border-radius:16px;padding:36px 32px;box-shadow:0 24px 80px rgba(0,0,0,0.35),0 0 0 1px rgba(255,255,255,0.08)}
.auth-error{background:#FCEBEB;border:1px solid #F7C1C1;border-radius:var(--radius);padding:9px 12px;font-size:12px;color:#A32D2D;margin-bottom:12px;display:none}
.auth-error.show{display:block}
.auth-msg{background:var(--blue-light);border:1px solid #a8c4f5;border-radius:var(--radius);padding:9px 12px;font-size:12px;color:var(--blue-dark);margin-bottom:12px;display:none}
.auth-msg.show{display:block}
.auth-field{margin-bottom:12px}
.auth-field label{display:block;font-size:11px;font-weight:600;color:var(--text-muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
.auth-field input{width:100%;padding:9px 12px;border-radius:var(--radius);font-size:13px;border:1px solid var(--border);background:#fff;color:var(--text);font-family:'Inter',sans-serif;outline:none;transition:border-color .15s}
.auth-field input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,115,232,.1)}
.auth-submit{width:100%;padding:10px;border-radius:var(--radius);font-size:13px;font-weight:600;cursor:pointer;border:none;background:var(--blue);color:#fff;font-family:'Inter',sans-serif;transition:background .15s;margin-top:4px}
.auth-submit:hover{background:var(--blue-dark)}.auth-submit:disabled{opacity:.6;cursor:not-allowed}
.auth-forgot{font-size:11px;color:var(--blue);cursor:pointer;text-align:right;margin-top:-6px;margin-bottom:12px;display:block}
.auth-forgot:hover{text-decoration:underline}

/* ── App shell ── */
.app-shell{display:none;min-height:100vh;flex-direction:row}
.app-shell.visible{display:flex}

/* ── Sidebar ── */
.sidebar{width:220px;flex-shrink:0;background:#fff;border-right:1px solid var(--border);display:flex;flex-direction:column;padding:0;position:fixed;top:0;left:0;bottom:0;z-index:10;transition:width .22s cubic-bezier(.4,0,.2,1);overflow:hidden}
.sidebar.collapsed{width:56px}
.sidebar-header{display:flex;align-items:center;gap:8px;padding:14px 10px 10px;min-height:56px;flex-shrink:0;border-bottom:1px solid var(--border)}
.sidebar-toggle{width:32px;height:32px;border-radius:6px;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#94A3B8;flex-shrink:0;transition:background .15s}
.sidebar-toggle:hover{background:var(--blue-light);color:var(--blue)}
.sidebar-logo{flex:1;overflow:hidden;transition:opacity .2s,width .22s}
.sidebar.collapsed .sidebar-logo{opacity:0;width:0;flex:0;overflow:hidden}
.sidebar-nav{flex:1;padding:8px 8px 0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.sidebar-nav::-webkit-scrollbar{display:none}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius);font-size:13px;font-weight:500;color:#475569;cursor:pointer;transition:all .15s;margin-bottom:2px;user-select:none;white-space:nowrap;position:relative}
.nav-sub{padding-left:28px;font-size:12px;color:#64748B}
.nav-group-header{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--radius);font-size:10px;font-weight:700;color:#94A3B8;cursor:pointer;text-transform:uppercase;letter-spacing:.8px;user-select:none;white-space:nowrap;transition:color .15s;margin:4px 0 1px}
.nav-group-header:hover{color:var(--blue)}
.sidebar.collapsed .nav-group-header{display:none}
.nav-item:hover{background:var(--blue-light);color:var(--blue)}
.nav-item.active{background:var(--blue-light);color:var(--blue);font-weight:600}
.nav-item svg{flex-shrink:0;opacity:.8;min-width:16px}
.nav-item.active svg{opacity:1;stroke:var(--blue)}
.nav-label{transition:opacity .15s,width .2s;overflow:hidden}
.sidebar.collapsed .nav-label{opacity:0;width:0;pointer-events:none}
.sidebar.collapsed .nav-reports-collapsed-icon{display:flex!important}
.sidebar.collapsed .nav-reports-expanded{display:none!important}
.sidebar:not(.collapsed) .nav-reports-collapsed-icon{display:none!important}
.sidebar.collapsed .nav-admin-collapsed-icon{display:flex!important}
.sidebar.collapsed .nav-admin-expanded{display:none!important}
.sidebar:not(.collapsed) .nav-admin-collapsed-icon{display:none!important}
.sidebar.collapsed .nav-operations-collapsed-icon{display:flex!important}
.sidebar.collapsed .nav-operations-expanded{display:none!important}
.sidebar:not(.collapsed) .nav-operations-collapsed-icon{display:none!important}
.sidebar.collapsed .nav-op-expenses-collapsed-icon{display:flex!important}
.sidebar.collapsed .nav-op-expenses-expanded{display:none!important}
.sidebar:not(.collapsed) .nav-op-expenses-collapsed-icon{display:none!important}
.sidebar.collapsed .nav-op-reports-collapsed-icon{display:flex!important}
.sidebar.collapsed .nav-op-reports-expanded{display:none!important}
.sidebar:not(.collapsed) .nav-op-reports-collapsed-icon{display:none!important}
.sidebar.collapsed .nav-system-collapsed-icon{display:flex!important}
.sidebar.collapsed .nav-system-expanded{display:none!important}
.sidebar:not(.collapsed) .nav-system-collapsed-icon{display:none!important}
.sidebar.collapsed #nav-operations-group,
.sidebar.collapsed #nav-reports-group,
.sidebar.collapsed #nav-admin-group,
.sidebar.collapsed #nav-op-expenses-group,
.sidebar.collapsed #nav-op-reports-group,
.sidebar.collapsed #nav-system-group{max-height:0!important;overflow:hidden}
.sidebar.collapsed .nav-sub{padding-left:10px}
.nav-item[title]:hover::after{content:attr(title);position:absolute;left:52px;top:50%;transform:translateY(-50%);background:#1E293B;color:#fff;font-size:11px;font-weight:500;padding:4px 10px;border-radius:6px;white-space:nowrap;pointer-events:none;z-index:100;box-shadow:0 4px 12px rgba(0,0,0,0.18)}
.sidebar:not(.collapsed) .nav-item[title]:hover::after{display:none}
.nav-divider{height:1px;background:var(--border);margin:6px 10px;transition:margin .2s}
.sidebar-bottom{padding:0 8px 8px;flex-shrink:0}
.sidebar-user{padding:10px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px;margin-top:4px;overflow:hidden}
.sidebar-avatar{width:28px;height:28px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.sidebar-user-info{flex:1;min-width:0;overflow:hidden;transition:opacity .15s,width .2s}
.sidebar.collapsed .sidebar-user-info{opacity:0;width:0}
.sidebar-email{font-size:11px;color:#94A3B8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.sidebar-logout{font-size:11px;color:#94A3B8;cursor:pointer;flex-shrink:0;padding:3px 6px;border-radius:4px;border:none;background:transparent;font-family:'Inter',sans-serif;transition:all .15s}
.sidebar-logout:hover{color:#E11D48;background:#FFF1F2}
.sidebar.collapsed .sidebar-logout{opacity:0;width:0;padding:0;overflow:hidden}

/* ── Main content ── */
.main-content{margin-left:220px;flex:1;padding:24px 28px;min-height:100vh;max-width:calc(100vw - 220px);transition:margin-left .22s cubic-bezier(.4,0,.2,1),max-width .22s cubic-bezier(.4,0,.2,1)}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.page-title{font-size:17px;font-weight:700;color:var(--text)}
.section{display:none}.section.active{display:block}#tab-dashboard.active{display:flex!important}

/* ── Icon buttons (Option C) ── */
.ico-btn{width:28px;height:28px;border-radius:7px;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:filter .15s;flex-shrink:0;vertical-align:middle}
.ico-btn:hover{filter:brightness(.82)}
.ico-btn.edit {background:#e8f0fe;color:#1a73e8}
.ico-btn.del  {background:#FCEBEB;color:#E24B4A}
.ico-btn.view {background:#E1F5EE;color:#1D9E75}
.ico-btn.pass {background:#FFFBEB;color:#D97706}
.ico-btn.docs {background:#F5F3FF;color:#7C3AED}
.ico-btn.hotel{background:#dcfce7;color:#15803D}
.ico-btn.copy {background:#F1F5F9;color:#475569}
.ico-btn.check{background:#E1F5EE;color:#1D9E75}

/* ── Buttons ── */
.btn{padding:7px 16px;border-radius:var(--radius);font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:#fff;color:var(--text);transition:all .15s;font-family:'Inter',sans-serif}
.btn:hover{background:var(--blue-light);border-color:var(--blue);color:var(--blue)}
.btn.primary{background:var(--blue);border-color:var(--blue-dark);color:#fff}.btn.primary:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
.btn.success{background:var(--green);border-color:var(--green-dark);color:#fff}.btn.success:hover{background:var(--green-dark)}
.btn.danger{color:var(--red);border-color:#F7C1C1;background:#fff}.btn.danger:hover{background:var(--red-light);border-color:var(--red)}
.btn.sm{padding:4px 10px;font-size:11px}
.btn.ghost{border:none;background:transparent;color:var(--text-muted)}.btn.ghost:hover{background:var(--blue-light);color:var(--blue)}

/* ── Stats ── */
.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:18px}
.stat{background:#fff;border-radius:var(--radius-lg);padding:12px 16px;border:1px solid var(--border);box-shadow:var(--shadow)}
.stat-clickable{cursor:pointer;transition:box-shadow .2s,transform .15s,border-color .15s}
.stat-clickable:hover{box-shadow:var(--shadow-md);border-color:var(--blue);transform:translateY(-2px)}
.stat-label{font-size:9px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:5px}
.stat-value{font-size:18px;font-weight:700;line-height:1}
.c-blue{color:var(--blue)}.c-green{color:var(--green)}.c-red{color:var(--red)}.c-text{color:var(--text)}

/* ── Toolbar ── */
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.toolbar input[type=text]{flex:1;min-width:160px;padding:7px 12px;border-radius:var(--radius);font-size:12px;border:1px solid var(--border);background:#fff;color:var(--text);font-family:'Inter',sans-serif;outline:none;transition:border-color .15s,box-shadow .15s}
.toolbar input[type=text]:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,115,232,.08)}
.toolbar select{padding:7px 12px;border-radius:var(--radius);font-size:12px;border:1px solid var(--border);background:#fff;color:var(--text);font-family:'Inter',sans-serif;outline:none}
.toolbar input[type=date]{padding:7px 10px;border-radius:var(--radius);font-size:12px;border:1px solid var(--border);background:#fff;color:var(--text);font-family:'Inter',sans-serif;outline:none}

/* ── Bulk bar ── */
.bulk-bar{display:none;align-items:center;justify-content:space-between;background:var(--blue);color:#fff;border-radius:var(--radius);padding:10px 16px;margin-bottom:10px;gap:10px;flex-wrap:wrap}
.bulk-bar.visible{display:flex}
.bulk-count{font-size:12px;font-weight:500;opacity:.85}
.bulk-supplier{font-size:11px;opacity:.7}
.bulk-total{font-size:16px;font-weight:700}
.bulk-bar-right{display:flex;gap:6px;align-items:center}
.btn.confirm-pay{background:#fff;color:var(--blue);border:none;font-weight:600;padding:6px 16px;border-radius:var(--radius);font-size:12px}
.btn.confirm-pay:hover{background:#e8f0fe}
.btn.cancel-sel{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;padding:6px 12px;border-radius:var(--radius);font-size:12px}
.btn.cancel-sel:hover{background:rgba(255,255,255,.1)}
.bulk-warning{font-size:10px;background:rgba(255,255,255,.18);border-radius:4px;padding:2px 8px;font-weight:500}

/* ── Payment list ── */
.payment-list{display:flex;flex-direction:column;gap:5px}

/* Single compact row */
.payment-row{background:#fff;border-radius:var(--radius);padding:7px 12px;display:grid;grid-template-columns:16px 8px 1fr auto;gap:10px;align-items:center;transition:box-shadow .15s,border-color .15s;border:1px solid var(--border);box-shadow:none}
.payment-row:hover{box-shadow:var(--shadow);border-color:var(--border-hover);background:#fafcff}
.payment-row.selected{background:#EEF4FF;border-color:var(--blue)}
.row-checkbox{width:14px;height:14px;accent-color:var(--blue);cursor:pointer;flex-shrink:0}
.row-checkbox:disabled{opacity:.2;cursor:not-allowed}
.status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.status-dot.pending{background:var(--amber)}.status-dot.paid{background:var(--blue)}.status-dot.overdue{background:var(--red)}.status-dot.partial{background:var(--purple)}.status-dot.to_recon{background:#7C3AED}

/* Row main info */
.prow-body{min-width:0;display:flex;flex-direction:column;gap:2px}
.prow-line1{display:flex;align-items:center;gap:6px;overflow:hidden;white-space:nowrap;min-width:0}
.prow-line2{display:flex;align-items:baseline;gap:5px;min-width:0;overflow:hidden}
.prow-supplier{font-size:12px;font-weight:700;white-space:nowrap;color:#1F2937;flex-shrink:0}
.prow-sep{color:var(--text-hint);font-size:11px;flex-shrink:0}
.prow-company{font-size:12px;color:#64748B;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.prow-inv{font-size:10px;color:var(--text-hint);font-family:monospace;white-space:nowrap;flex-shrink:0}
.prow-desc2{font-size:11px;color:var(--text-hint);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35;flex:1;min-width:0}
.prow-due{font-size:10px;color:var(--red);white-space:nowrap;font-weight:500;min-width:80px;text-align:right}
.prow-due.soon{color:var(--amber)}
.prow-due.ok{color:var(--text-hint)}
.prow-due-ph{min-width:80px;display:inline-block}

/* Row right side */
.row-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.prow-amount{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;min-width:72px;text-align:right;padding:0 8px}
.prow-amount.partial-out{color:var(--purple)}
.badge{font-size:11px;font-weight:700;white-space:nowrap}
.badge.pending{color:#64748B}.badge.paid{color:var(--blue)}.badge.overdue{color:var(--red)}.badge.partial{color:var(--blue-dark)}
.row-actions{display:flex;gap:3px;align-items:center}

/* Pay input row */
.pay-input-row{display:flex;align-items:center;gap:4px;margin-top:3px;padding-left:2px}
.pay-input-row input{width:82px;padding:2px 7px;border-radius:5px;border:1px solid #bfdbfe;font-size:11px;font-family:'Inter',sans-serif;outline:none;color:var(--text)}
.pay-input-row input:focus{border-color:var(--blue)}
.pay-input-row .pay-label{font-size:10px;color:var(--text-muted)}

/* Expand toggle */
.expand-toggle{display:flex;align-items:center;gap:3px;font-size:10px;color:var(--blue);cursor:pointer;margin-top:3px;user-select:none;width:fit-content}
.expand-toggle:hover{opacity:.75}
.expand-toggle svg{transition:transform .15s;flex-shrink:0}
.expand-toggle.open svg{transform:rotate(90deg)}
.partial-history-collapse{display:none;margin-top:3px;padding-top:3px;border-top:1px dashed var(--border)}
.partial-history-collapse.open{display:block}
.partial-item{font-size:10px;color:var(--text-muted);display:flex;gap:6px;align-items:center;padding:1px 0}
.partial-item .doc-num{font-family:monospace;background:var(--purple-light);color:var(--purple);padding:1px 5px;border-radius:3px;font-size:9px;font-weight:700}
.outstanding-bar{margin-top:3px;background:var(--bg);border-radius:3px;height:2px;overflow:hidden;width:100px}
.outstanding-fill{height:100%;background:var(--purple);border-radius:3px}
.outstanding-text{font-size:10px;color:var(--purple);margin-top:2px}

/* Empty */
.empty{text-align:center;padding:48px 20px;color:var(--text-muted);font-size:13px;background:#fff;border-radius:var(--radius-lg);border:1px solid var(--border)}
.empty svg{margin:0 auto 10px;display:block;opacity:.25}

/* Group headers */
.group-header{padding:4px 4px;background:transparent;margin-top:14px;margin-bottom:4px;display:flex;align-items:center;justify-content:space-between}
.group-header:first-child{margin-top:0}
.group-company{font-size:12px;font-weight:600;color:var(--text)}
.group-total{font-size:12px;font-weight:700;color:var(--blue)}
.company-total-row{padding:5px 12px;background:var(--blue-light);border-radius:var(--radius);display:flex;justify-content:space-between;font-size:11px;margin-top:2px;margin-bottom:8px;border:1px solid rgba(26,115,232,.12)}
.company-total-row .label{color:var(--blue-dark);font-weight:500}
.company-total-row .val{font-weight:700;color:var(--blue-dark)}
.supplier-total-row{padding:4px 12px 4px 24px;background:#f5f8ff;border-radius:var(--radius);display:flex;justify-content:space-between;font-size:10px;margin-top:2px;margin-bottom:3px}
.supplier-total-row .label{color:var(--text-muted)}
.supplier-total-row .val{font-weight:600;color:var(--text-muted)}

/* Dashboard detail banner */
#dashboard-detail-banner{display:none;align-items:center;justify-content:space-between;padding:9px 14px;background:var(--blue);color:#fff;border-radius:var(--radius);margin-bottom:10px;font-size:12px;font-weight:500}

/* ── Modal ── */
.modal-bg{position:fixed;inset:0;background:rgba(13,27,62,0.35);display:flex;align-items:center;justify-content:center;z-index:200;padding:16px;backdrop-filter:blur(4px)}
.modal{background:#FFFFFF;border-radius:var(--radius-lg);padding:22px;width:100%;max-width:560px;max-height:calc(100vh - 32px);overflow-y:auto;border:1px solid var(--border);box-shadow:0 20px 60px rgba(13,27,62,0.16),0 4px 16px rgba(13,27,62,0.08);scrollbar-width:none}
.modal::-webkit-scrollbar{display:none}
.modal h2{font-size:16px;font-weight:700;margin-bottom:14px;color:var(--text);padding-bottom:12px;border-bottom:2px solid var(--blue-light)}
.form-label{display:block;font-size:10px;font-weight:700;color:var(--text-muted);margin-bottom:3px;text-transform:uppercase;letter-spacing:.5px}
.form-input{width:100%;padding:7px 11px;border-radius:var(--radius);font-size:13px;border:1px solid var(--border);background:#fff;color:var(--text);font-family:'Inter',sans-serif;outline:none;transition:border-color .15s,box-shadow .15s;box-sizing:border-box}
.form-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,115,232,.08)}
.form-group{margin-bottom:10px}
.form-group label{display:block;font-size:10px;font-weight:700;color:var(--text-muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:7px 11px;border-radius:var(--radius);font-size:13px;border:1px solid var(--border);background:#fff;color:var(--text);font-family:'Inter',sans-serif;outline:none;transition:border-color .15s,box-shadow .15s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,115,232,.08)}
.form-group textarea{min-height:42px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.bank-section-label{margin:10px 0 6px;padding-top:10px;border-top:1px solid var(--border);font-size:10px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.5px}

/* Processing */
.processing{text-align:center;padding:24px}
.spinner{width:28px;height:28px;border:2px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 12px}
@keyframes spin{to{transform:rotate(360deg)}}
.processing p{font-size:13px;color:var(--text-muted)}

/* Extracted preview */
.extracted-preview{background:var(--blue-light);border:1px solid rgba(26,115,232,.2);border-radius:var(--radius);padding:8px 10px;margin-bottom:8px}
.ep-title{font-size:10px;font-weight:700;color:var(--blue-dark);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.ep-row{display:flex;justify-content:space-between;padding:2px 0;border-bottom:1px solid rgba(21,87,176,.1);font-size:12px}
.ep-row:last-child{border-bottom:none}
.ep-row span:first-child{color:var(--blue-dark);opacity:.8}
.ep-row span:last-child{font-weight:500}

/* Dropzone */
#m-file-drop{padding:8px 12px!important}
.dropzone{border:2px dashed var(--border-hover);border-radius:var(--radius-lg);padding:44px 28px;text-align:center;cursor:pointer;transition:all .2s;background:#fff}
.dropzone.drag{border-color:var(--blue);background:var(--blue-light)}
.dropzone-icon{width:44px;height:44px;margin:0 auto 14px;background:var(--bg);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-muted)}
.dropzone h3{font-size:15px;font-weight:600;margin-bottom:6px}
.dropzone p{font-size:12px;color:var(--text-muted);line-height:1.6}.dropzone input{display:none}

/* ── Entities (Operations & Definitions) ── */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--blue-light)}
.section-header h2{font-size:15px;font-weight:700;color:var(--text)}
.entity-list{display:flex;flex-direction:column;gap:6px}
.entity-row{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px 16px;display:flex;align-items:center;gap:12px;box-shadow:none;transition:box-shadow .15s,border-color .15s}
.entity-row:hover{box-shadow:var(--shadow-md);border-color:var(--border-hover)}
.avatar{display:none}
.entity-info{flex:1;min-width:0}
.entity-info .name{font-size:13px;font-weight:600;color:var(--text)}
.entity-info .detail{font-size:11px;color:var(--text-muted);margin-top:2px}
.bank-badge{font-size:11px;font-weight:700;margin-left:8px;display:inline-block}
.bank-badge.ok{color:var(--green-dark)}
.bank-badge.missing{color:#C0392B}
.card{background:#FFFFFF;border-radius:var(--radius-lg);padding:20px;border:1px solid var(--border);box-shadow:var(--shadow)}
.fp-row:hover{background:var(--blue-light)}.fp-row{transition:background .1s}
.dr-picker{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--border);border-radius:8px;padding:5px 10px;font-size:12px;color:#374151;cursor:pointer;user-select:none;box-shadow:none;transition:border-color .15s}
.dr-picker:hover{border-color:var(--blue)}
.dr-picker svg{color:#64748B;flex-shrink:0}
.dr-picker span{font-weight:500;white-space:nowrap}
.dr-dropdown{position:fixed;z-index:500;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px rgba(13,27,62,0.12);padding:6px;min-width:180px;display:none}
.dr-opt{padding:7px 12px;border-radius:6px;font-size:12px;color:#374151;cursor:pointer;font-weight:500}
.dr-opt:hover{background:var(--blue-light);color:var(--blue)}
.dr-opt.active{background:var(--blue-light);color:var(--blue);font-weight:600}
.dr-custom{padding:8px 12px;border-top:1px solid var(--border);margin-top:4px}
.dr-custom label{font-size:10px;font-weight:700;color:#94A3B8;text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:4px}
.dr-custom input{width:100%;padding:5px 8px;border:1px solid var(--border);border-radius:6px;font-size:12px;font-family:'Inter',sans-serif;outline:none;color:#374151}
.dr-custom input:focus{border-color:var(--blue)}

.ms-btn{width:100%;padding:7px 12px;border-radius:var(--radius);font-size:12px;border:1px solid var(--border);background:#fff;color:var(--text);font-family:'Inter',sans-serif;cursor:pointer;text-align:left;display:flex;justify-content:space-between;align-items:center;transition:border-color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-btn:hover{border-color:var(--blue)}
.ms-btn::after{content:'▾';font-size:10px;color:var(--text-hint);flex-shrink:0;margin-left:6px}
.ms-dropdown{position:fixed;min-width:220px;max-width:280px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 8px 24px rgba(13,27,62,0.15);z-index:500;max-height:260px;overflow-y:auto}
.ms-option{display:flex;align-items:center;gap:9px;padding:7px 12px;cursor:pointer;font-size:12px;color:var(--text);transition:background .1s;user-select:none}
.ms-option:hover{background:var(--blue-light)}
.ms-option input[type=checkbox]{accent-color:var(--blue);width:13px;height:13px;flex-shrink:0;cursor:pointer}
.ms-option.ms-all{border-bottom:1px solid var(--border);font-weight:600;color:var(--text-muted)}

/* Pay confirmation */
.pay-total-box{background:var(--blue-light);border:1px solid rgba(26,115,232,.2);border-radius:var(--radius);padding:16px;margin-bottom:16px;text-align:center}
.pay-total-label{font-size:12px;color:var(--text-muted);margin-bottom:4px}
.pay-total-amount{font-size:28px;font-weight:700;color:var(--blue)}
.pay-total-sub{font-size:11px;color:var(--text-muted);margin-top:4px}
.pay-breakdown{display:flex;flex-direction:column;gap:4px;max-height:180px;overflow-y:auto}
.pay-breakdown-row{display:flex;justify-content:space-between;font-size:12px;padding:5px 0;border-bottom:1px solid var(--border)}
.pay-breakdown-row:last-child{border-bottom:none}

/* Migration */
#similar-panel{background:var(--blue-light);border:1px solid rgba(26,115,232,.2);border-radius:var(--radius);padding:12px;margin-top:10px}

/* Calendar date cells — touch-action:manipulation removes iOS 300ms tap delay
   so double-tap fires dblclick reliably without triggering pinch-zoom */
[data-caldate]{touch-action:manipulation}

/* ── Ops Dashboard: summary stats card at top (all screen sizes) ──────────────
   Original layout: 4-col grid [Active | Upcoming | Past | Summary(220px)]
   New layout: Summary bar spanning full width, then 3 flight columns below.
   Mobile overrides in the @media block below compact this further.           */
#tab-op-dashboard>div>div:nth-child(2){
  grid-template-columns:1fr 1fr 1fr!important
}
#tab-op-dashboard>div>div:nth-child(2)>div:last-child{
  order:-1!important;
  grid-column:1 / -1!important
}
/* Summary card: horizontal stats bar on desktop */
#tab-op-dashboard>div>div:nth-child(2)>div:last-child>div{
  display:flex!important;flex-direction:row!important;
  align-items:center!important;padding:14px 20px!important;gap:0!important
}
/* Total flights — left section */
#tab-op-dashboard>div>div:nth-child(2)>div:last-child>div>div:nth-child(1){
  flex:0 0 auto!important;text-align:center!important;
  border-bottom:none!important;margin-bottom:0!important;padding-bottom:0!important;
  border-right:1px solid #F1F5F9!important;padding-right:20px!important
}
/* Active / Upcoming / Past counts */
#tab-op-dashboard>div>div:nth-child(2)>div:last-child>div>div:nth-child(2){
  flex:0 0 auto!important;margin-bottom:0!important;
  padding:0 20px!important;gap:28px!important;justify-content:center!important;
  border-right:1px solid #F1F5F9!important
}
/* Next departure */
#tab-op-dashboard>div>div:nth-child(2)>div:last-child>div>div:nth-child(3){
  flex:1!important;border-top:none!important;
  padding-top:0!important;padding-left:20px!important;
  border-right:1px solid #F1F5F9!important
}
/* Today */
#tab-op-dashboard>div>div:nth-child(2)>div:last-child>div>div:nth-child(4){
  flex:0 0 auto!important;border-top:none!important;
  padding-top:0!important;margin-top:0!important;padding-left:20px!important
}

/* ══════════════════════════════════════════════════════════════
   MOBILE — iOS  (base styles for mobile-only elements,
   always declared here so @media can activate them)
══════════════════════════════════════════════════════════════ */

/* Mobile header — hidden on desktop, sticky on mobile */
.mob-header{
  display:none;
  align-items:center;justify-content:space-between;
  padding:0 16px;height:52px;
  background:#fff;border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50;
  box-shadow:0 1px 4px rgba(13,27,62,.06);
  flex-shrink:0;
}
.mob-header-title{font-size:15px;font-weight:700;color:var(--text)}

/* Sub-nav chips — JS sets display:flex on the active group's nav */
.mob-only { display: none; }
.mob-subnav{
  display:none;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;gap:8px;padding:10px 16px;
  background:#F8FAFC;border-bottom:1px solid var(--border);
  flex-wrap:nowrap;position:sticky;top:52px;z-index:40;
  flex-shrink:0;
}
.mob-subnav::-webkit-scrollbar{display:none}
.mob-chip{
  padding:8px 16px;border-radius:999px;font-size:13px;font-weight:500;
  border:1.5px solid var(--border);background:#fff;color:var(--text-muted);
  white-space:nowrap;cursor:pointer;font-family:'Inter',sans-serif;
  flex-shrink:0;transition:all .15s;-webkit-tap-highlight-color:transparent;
  min-height:36px;
}
.mob-chip.active{background:var(--blue);color:#fff;border-color:var(--blue);font-weight:600}

/* Bottom nav — hidden on desktop */
.mob-bottom-nav{display:none}
.mbn-tab{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;border:none;background:transparent;
  font-size:10px;font-weight:500;color:#94A3B8;cursor:pointer;
  font-family:'Inter',sans-serif;padding:6px 4px;transition:color .15s;
  min-height:56px;-webkit-tap-highlight-color:transparent;
}
.mbn-tab svg{stroke:#94A3B8;transition:stroke .15s;flex-shrink:0}
.mbn-tab.active{color:var(--blue)}
.mbn-tab.active svg{stroke:var(--blue)}

/* Account bottom sheet */
.mob-account-sheet{
  display:none;position:fixed;inset:0;z-index:500;
  background:rgba(13,27,62,.4);align-items:flex-end;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.mob-account-sheet.open{display:flex}
.mob-sheet-card{
  background:#fff;border-radius:20px 20px 0 0;width:100%;
  overflow:hidden;padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -8px 32px rgba(13,27,62,.15);
}

/* ── @media: activate mobile layout at ≤ 500px (all iPhones incl. 17 Pro Max) ── */
@media (max-width:500px){

  /* Prevent iOS Safari auto-zoom on input focus (triggers when font-size < 16px) */
  input, select, textarea { font-size: 16px !important; }

  /* Layout foundation */
  .sidebar{display:none!important}
  .main-content{
    margin-left:0!important;
    max-width:100vw!important;
    padding:0!important;
    min-height:0!important;
    padding-bottom:calc(56px + env(safe-area-inset-bottom))!important;
  }
  body:has(#tab-flights.active) .main-content{
    padding-bottom:0!important;
    overflow:hidden!important;
  }

  /* Activate mobile chrome */
  .mob-header{display:flex}
  .mob-bottom-nav{
    display:flex;
    position:fixed;bottom:0;left:0;right:0;
    background:#fff;border-top:1px solid var(--border);
    z-index:100;padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -2px 16px rgba(13,27,62,.08);
  }

  /* Auth: center login dialog on narrow screens */
  .auth-dialog{
    left:50%!important;right:auto!important;
    transform:translate(-50%,-50%)!important;
    width:calc(100% - 32px)!important;max-width:340px;
    padding:28px 24px;
  }

  /* Touch targets */
  .btn{min-height:44px;font-size:13px}
  .btn.sm{min-height:36px;font-size:12px}
  .ico-btn{width:36px!important;height:36px!important;border-radius:9px!important}

  /* Sections */
  .section{overflow:visible}
  .page-header{padding:16px 16px 12px!important;margin-bottom:0!important;flex-wrap:wrap;gap:8px}
  .page-title{font-size:17px}
  .section-header{padding:16px 16px 12px!important;margin-bottom:0!important}
  .section-header h2{font-size:15px}

  /* Entity lists (Handlers, Services, Categories…) */
  .entity-list{padding:12px 16px!important;gap:10px}
  .entity-row{padding:14px 16px;border-radius:14px;box-shadow:0 1px 6px rgba(13,27,62,.07);align-items:flex-start}
  .entity-info .name{font-size:14px}
  .entity-info .detail{font-size:12px;margin-top:3px;line-height:1.5}

  /* ── Ops Dashboard: single column on mobile (summary already at top via global rule) ── */
  #tab-op-dashboard>div{padding:10px!important}
  #tab-op-dashboard>div>div:first-child{margin-bottom:8px!important}
  #tab-op-dashboard>div>div:nth-child(2){
    display:flex!important;flex-direction:column!important;gap:8px!important
  }
  /* Compact white summary card */
  #tab-op-dashboard>div>div:nth-child(2)>div:last-child>div{padding:10px 12px!important;box-shadow:none!important;border:1px solid var(--border)!important}
  #tab-op-dashboard>div>div:nth-child(2)>div:last-child>div>div:first-child{padding-bottom:8px!important;margin-bottom:8px!important}
  #tab-op-dashboard>div>div:nth-child(2)>div:last-child>div>div:nth-child(2){margin-bottom:0!important}
  /* Hide Next Departure + Today — not needed on quick mobile view */
  #tab-op-dashboard>div>div:nth-child(2)>div:last-child>div>div:nth-child(3),
  #tab-op-dashboard>div>div:nth-child(2)>div:last-child>div>div:nth-child(4){display:none!important}
  /* Smaller numbers inside summary */
  #tab-op-dashboard>div>div:nth-child(2)>div:last-child [style*="font-size:28px"]{font-size:20px!important}
  #tab-op-dashboard>div>div:nth-child(2)>div:last-child [style*="font-size:18px"]{font-size:14px!important}
  /* Compact Active / Upcoming / Past section header pills */
  #tab-op-dashboard>div>div:nth-child(2)>div:not(:last-child)>div:first-child{padding:5px 10px!important;margin-bottom:6px!important}

  /* ── Flights: fill viewport with flexbox — no hardcoded grid height needed ── */
  #tab-flights.active { display:flex !important; flex-direction:column; height:calc(100dvh - 48px); overflow:hidden; }
  #tab-flights > .page-header { flex-shrink:0; }
  #tab-flights > #flight-content { flex:1; overflow:hidden; min-height:0; }
  #tab-flights #flight-content { padding: 0 !important; }
  #tab-flights .page-header { padding: 5px 12px !important; gap: 4px !important; }
  #tab-flights .page-title  { font-size: 14px !important; white-space: nowrap; }

  /* ── Detail view: normal page scroll (calendar uses fixed-height approach above) ── */
  body.fl-detail-view:has(#tab-flights.active) .main-content {
    overflow-y: auto !important; overflow-x: hidden !important;
    padding-bottom: calc(56px + env(safe-area-inset-bottom)) !important;
  }
  body.fl-detail-view #tab-flights.active { height: auto !important; overflow: visible !important; }
  body.fl-detail-view #tab-flights > #flight-content { overflow: visible !important; flex: none !important; padding-bottom: 60px !important; }

  /* New event: icon-only + button — target by onclick for reliable matching */
  #flight-header-actions button[onclick*="openAddFlightModal"] {
    padding: 5px 10px !important; font-size: 0 !important; border-radius: 6px !important;
  }
  #flight-header-actions button[onclick*="openAddFlightModal"] svg { width:15px!important;height:15px!important; }
  /* Hide ▾ dropdown — targeted by onclick */
  #flight-header-actions button[onclick*="_calToggleNewMenu"] { display: none !important; }
  /* Hide view-button icons so Day/Week/Month labels fit on one row with nav */
  #flight-header-actions button[onclick*="_calSetView"] svg { display: none !important; }
  #flight-header-actions button[onclick*="_calSetView"] { gap: 0 !important; }
  /* Hide the date-jump input — swiping navigates months */
  #flight-header-actions input[type="date"] { display: none !important; }
  /* Remove auto-margin so view switcher stays on the same line as nav buttons */
  #flight-header-actions [style*="margin-left:auto"] { margin-left: 0 !important; }
  /* Compact row-1 toolbar buttons only — exclude mob-only row 2 */
  #flight-header-actions .desk-only button,
  #flight-header-actions button[onclick*="_calNavigate"],
  #flight-header-actions button[onclick*="_calSetView"],
  #flight-header-actions button[onclick*="_calJumpToDate"] { padding: 4px 8px !important; font-size: 10px !important; gap: 3px !important; }
  #flight-header-actions .desk-only button svg,
  #flight-header-actions button[onclick*="_calNavigate"] svg,
  #flight-header-actions button[onclick*="_calSetView"] svg { width: 11px !important; height: 11px !important; }
  /* Compact month/week label ("Jun 2026") */
  #flight-header-actions span[style*="font-size:14px"] { font-size: 12px !important; min-width: auto !important; }

  /* ── Month calendar: fit entire grid on one screen ── */
  /* Only target month view — its cal-grid has overflow:hidden inline style.
     Week view has overflow-x:auto, so this selector ignores it.          */
  #cal-grid[style*="overflow:hidden"] {
    height: 100% !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }
  #cal-grid[style*="overflow:hidden"]>table {
    height: auto;   /* natural height — no row stretching */
    table-layout: fixed;
    width: 100%;
  }

  /* Compact day-of-week header */
  #cal-grid thead th { font-size:9px !important; padding:4px 1px !important; height:auto !important; }

  /* Uniform row height — event rows same size whether empty or full.
     Date/spacer/gap rows override this with their own !important rules. */
  #cal-grid tbody tr { height:16px; }
  /* Date number cells — fixed compact height */
  [data-caldate] { height:26px !important; padding:2px !important; }
  [data-caldate]>div { font-size:10px !important; line-height:1.2 !important; }
  /* "Today" circle badge */
  [data-caldate] [style*="border-radius:50%"][style*="width:24px"] {
    width:18px !important; height:18px !important; font-size:10px !important;
  }

  /* Flight-span spacer rows (TR height:26px) */
  #cal-grid tr[style*="height:26px"] { height:8px !important; }
  #cal-grid tr[style*="height:26px"] td { height:8px !important; padding:0 !important; }

  /* Gap row cells (TD height:32px) */
  #cal-grid td[style*="height:32px"] { height:8px !important; }

  /* Event pills (leg / hotel banners) */
  #cal-grid [style*="border-radius:3px"][style*="font-size:10px"] {
    font-size:8px !important; padding:0 3px !important; line-height:1.3 !important;
    margin-bottom:1px !important;
  }
  /* "+N more" overflow links */
  #cal-grid [style*="color:#6366f1"][style*="font-size:10px"] { font-size:8px !important; }

  /* ── Flight leg cards: compact + fix date wrapping ── */
  /* Compact flight-detail summary card */
  #flight-content [style*="padding:20px 24px;"]{padding:12px 14px!important;margin-bottom:12px!important}
  /* Compact leg row card */
  #flight-content [style*="padding:16px 18px;"]{padding:10px 12px!important;gap:8px!important}
  /* Smaller icon buttons inside legs */
  #flight-content .ico-btn{width:30px!important;height:30px!important}
  /* 4-col time grid → 2×2 (fixes date wrapping) */
  #flight-content [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important;gap:8px 12px!important}
  /* Hide LT sub-times — secondary info not needed on mobile */
  #flight-content [style*="grid-template-columns:repeat(4,1fr)"] [style*="color:#94A3B8;margin-top:1px"]{display:none!important}
  /* Hide fuel data row on mobile */
  #flight-content [style*="padding-top:6px;margin-bottom:4px"]{display:none!important}
  /* Route ICAO airport text size */
  #flight-content [style*="font-size:15px;font-weight:700;color:#1F2937"]{font-size:14px!important}

  /* Operations sub-tabs */
  #flight-content,#aircraft-content{padding:12px 16px}
  #pilot-list,#pax-list{padding:12px 16px}
  #salary-content,#homeflights-list{padding:12px 16px}

  /* Op. Expenses */
  #tab-op-expenses-cc,#tab-op-expenses-cash{padding:16px}
  /* Tables: horizontal scroll (tables have min-width inline, let them scroll) */
  #cc-table-wrap,#cash-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Definitions sub-tabs */
  #tab-cash-categories>div{max-width:100%!important;padding:0 16px 16px}
  #tab-todo-templates>div{max-width:100%!important;padding:0 16px 16px}

  /* Stats grid: 2 cols on mobile */
  .stats-grid{grid-template-columns:repeat(2,1fr)!important;gap:8px}

  /* Toolbar: stack vertically */
  .toolbar{flex-direction:column;align-items:stretch;gap:8px}
  .toolbar input[type=text]{min-width:0;width:100%}
  .toolbar select{width:100%}

  /* Forms: 16px prevents iOS auto-zoom on input focus */
  .form-group input,.form-group select,.form-group textarea,
  .form-input,
  .auth-field input{font-size:16px!important}
  .form-row{grid-template-columns:1fr!important}

  /* ── Cash transaction type pills: keep Deposit / Withdrawal / Cash in Hand on one row ── */
  div:has(>#ct-pill-dep){flex-wrap:nowrap!important;gap:6px!important}
  #ct-pill-dep,#ct-pill-wdw,#ct-pill-bal{
    flex:1!important;min-width:0!important;
    padding:8px 6px!important;font-size:11px!important;
    justify-content:center!important;gap:4px!important;
  }
  #ct-pill-dep svg,#ct-pill-wdw svg,#ct-pill-bal svg{width:11px!important;height:11px!important}

  /* ── Camera / upload mobile rows ── */
  /* Hide drag-drop zones on mobile (no drag-and-drop on touchscreen) */
  #cc-drop-zone, #hotel-inv-drop, #cash-drop-zone { display: none !important; }
  /* Show the Take Photo / Upload buttons instead */
  .mob-upload-row { display: flex !important; gap: 8px; }

  /* Modal: bottom sheet */
  .modal-bg{
    padding:0!important;
    align-items:flex-end!important;
    padding-top:60px!important;
  }
  .modal{
    border-radius:20px 20px 0 0!important;
    max-height:calc(100vh - 60px)!important;
    padding:20px 16px 0!important;
    border:none!important;
    box-shadow:0 -8px 32px rgba(13,27,62,.15)!important;
    touch-action:pan-y!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    overflow-x:hidden!important;
  }
  /* Drag handle pill — visible cue to swipe down */
  .modal::before{
    content:'';display:block;
    width:36px;height:4px;border-radius:2px;
    background:#CBD5E1;
    margin:0 auto 16px;
    flex-shrink:0;
  }
  .modal h2{font-size:17px;margin-bottom:16px}
  .modal-footer{
    flex-direction:column-reverse;gap:8px;
    position:sticky;bottom:0;
    background:#fff;
    padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));
    margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px;
    border-top:1px solid var(--border);
  }
  .modal-footer .btn{width:100%;justify-content:center;text-align:center}

  /* ── Salary search: Option C layout (iOS only) ─────────────────────────────
     Row 1: Pilot | Flight | Period          (always — 3-col grid)
     Row 2: blue accordion panel             (only when period needs month/year)
     Row 3: Search | Reset                   (always — full-width)

     IMPORTANT: use the > div > child chain so the selector NEVER matches
     #sal-month-inputs or #sal-custom-dates (they also have flex-wrap:wrap in
     their inline styles). Without the chain those divs would get
     display:grid !important which overrides their display:none.
  ── */
  #salary-content > div > [style*="flex-wrap:wrap"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    align-items: start !important;
    gap: 8px !important;
  }
  #salary-content > div > [style*="flex-wrap:wrap"] > div { min-width: 0 !important; }
  /* Force selects/inputs to stay inside their 1fr grid cell */
  #salary-content > div > [style*="flex-wrap:wrap"] > div > select,
  #salary-content > div > [style*="flex-wrap:wrap"] > div > input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 11px !important;
  }

  /* Accordion panel: blue highlighted block, spans all 3 cols */
  #sal-month-inputs, #sal-custom-dates {
    grid-column: 1 / -1 !important;
    flex-wrap: wrap !important;
    background: #EFF6FF !important;
    border: 1.5px solid #BFDBFE !important;
    border-radius: 10px !important;
    padding: 12px !important;
    gap: 8px !important;
  }
  /* Field columns inside accordion */
  #sal-month-inputs > div, #sal-custom-dates > div { flex: 1 !important; min-width: 0 !important; }
  /* Compact labels & inputs inside accordion */
  #sal-month-inputs label, #sal-custom-dates label { font-size: 9px !important; }
  #sal-month-inputs select, #sal-month-inputs input,
  #sal-custom-dates input { font-size: 12px !important; padding: 8px 10px !important; }
  /* Done row — injected by mobile-nav.js, sits below the fields */
  .sal-done-row { width: 100%; text-align: right; }
  .sal-done-btn { background:none;border:none;color:#1a73e8;font-size:13px;font-weight:700;padding:4px 8px;cursor:pointer; }

  /* Buttons row: full width, 44 px touch targets */
  #salary-content > div > [style*="flex-wrap:wrap"] > div:last-child {
    grid-column: 1 / -1 !important;
    display: flex !important;
    gap: 8px !important;
    padding-bottom: 0 !important;
  }
  #salary-content > div > [style*="flex-wrap:wrap"] > div:last-child .btn {
    flex: 1 !important;
    justify-content: center !important;
    min-height: 44px !important;
  }

  /* ── Sub-nav chips: hidden on mobile (home-screen tiles replace them) ── */
  .mob-subnav { display: none !important; }

  /* ── Mobile group home screen overlay ── */
  #mob-home-overlay {
    position: fixed;
    top: 52px;   /* mob-header height */
    left: 0; right: 0;
    bottom: calc(64px + env(safe-area-inset-bottom));
    background: #f1f5f9;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 60;
    padding: 20px 16px 24px;
  }
  .mob-home-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .mob-home-tile {
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    height: 110px;
    display: flex;
    align-items: flex-end;
    box-shadow: 0 3px 14px rgba(0,0,0,.14);
    -webkit-tap-highlight-color: transparent;
  }
  .mob-home-tile.wide { grid-column: 1 / -1; height: 80px; align-items: center; }
  .mob-home-tile-inner {
    position: relative;
    z-index: 1;
    padding: 12px 14px;
    width: 100%;
  }
  .mob-home-tile.wide .mob-home-tile-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 20px;
  }
  .mob-home-ico {
    display: block;
    width: 28px; height: 28px;
    margin-bottom: 7px;
  }
  .mob-home-tile.wide .mob-home-ico { margin-bottom: 0; flex-shrink: 0; }
  .mob-home-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
  }
  .mob-home-tile.wide .mob-home-name { font-size: 16px; }

  /* ── Mobile-only / desktop-only visibility helpers ── */
  .mob-only { display: flex !important; }
  .desk-only { display: none !important; }

  /* ── Hotel form: iOS layout fixes (scoped via :has so web is untouched) ── */

  /* Date/time row: widen date columns, narrow time columns */
  #modal-container:has(#hm-ci-date) [style*="grid-template-columns:1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1.35fr 0.65fr 1.35fr 0.65fr !important;
    gap: 6px !important;
  }
  /* Rename "Check-in time" → "Chk-in time" (font-size:0 hides original text;
     ::before shows the short label — inherits uppercase/color from .hm-f label) */
  #modal-container .hm-f:has(#hm-ci-time)>label  { font-size:0 !important; }
  #modal-container .hm-f:has(#hm-ci-time)>label::before  { content:"Chk-in time";  font-size:9px !important; }
  #modal-container .hm-f:has(#hm-co-time)>label  { font-size:0 !important; }
  #modal-container .hm-f:has(#hm-co-time)>label::before  { content:"Chk-out time"; font-size:9px !important; }

  /* Price/confirmation row: shrink Currency + Rooms, give space to Confirmation # and Price */
  #modal-container:has(#hm-ci-date) [style*="grid-template-columns:1fr 1fr 1fr 80px 70px"] {
    grid-template-columns: 0.9fr 1.3fr 1.2fr 50px 42px !important;
    gap: 6px !important;
  }

}

/* ── Mail panel ─────────────────────────────────────────── */
body:has(#tab-mail.active) .main-content{padding:0!important;overflow:hidden!important}
#tab-mail.active{display:flex!important;flex-direction:column;height:100vh;overflow:hidden}
@media(max-width:767px){
  /* 52px = mob-header, 56px = bottom nav, env() = home indicator (34px Face ID / 0px SE) */
  #tab-mail.active{height:calc(100vh - 108px - env(safe-area-inset-bottom,0px));height:calc(100svh - 108px - env(safe-area-inset-bottom,0px))}
}