/* ===== AdmireDworld Travel — design tokens ===== */
:root{
  --navy: #0E2A3D;
  --navy-soft: #163C54;
  --paper: #EFF3F1;
  --surface: #FFFFFF;
  --line: #DCE3DF;
  --line-strong: #C4CEC8;
  --ink: #17221F;
  --muted: #5C6B67;
  --faint: #8B9793;
  --teal: #0F5C57;
  --teal-dark: #0B443F;
  --teal-tint: #E1EFEC;
  --gold: #C6963C;
  --gold-dark: #8F6B25;
  --gold-tint: #FBF1DD;
  --coral: #C85A42;
  --coral-tint: #FBEAE4;
  --green: #2F8F6B;
  --green-tint: #E4F3EC;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(14,42,61,0.06), 0 8px 24px rgba(14,42,61,0.06);
  --font-display: "Fraunces", serif;
  --font-body: "Inter", -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:600; margin:0; color:var(--navy);}
p{margin:0;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}

::selection{ background: var(--gold-tint); }

/* ===== layout ===== */
.app{ display:flex; min-height:100vh; }

.sidebar{
  width: 248px; flex-shrink:0; background: var(--navy);
  color: #DCE7EA; display:flex; flex-direction:column;
  position: sticky; top:0; height:100vh; overflow-y:auto;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.brand{ display:flex; align-items:center; gap:12px; padding:22px 20px 18px; }
.brand-mark{ color: var(--gold); flex-shrink:0; }
.brand-text{ display:flex; flex-direction:column; line-height:1.25;}
.brand-name{ font-family:var(--font-display); font-size:19px; font-weight:600; color:#fff; letter-spacing:0.2px;}
.brand-sub{ font-size:10.5px; color:#8FA3AC; text-transform:uppercase; letter-spacing:0.6px;}

.nav{ display:flex; flex-direction:column; gap:2px; padding: 10px 12px; flex:1; }
.nav-item{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:8px;
  background:transparent; border:none; color:#B7C6CB; font-size:14px; font-weight:500;
  text-align:left; transition: background .15s, color .15s;
}
.nav-item svg{ opacity:.85; }
.nav-item:hover{ background: rgba(255,255,255,0.06); color:#fff; }
.nav-item.active{ background: var(--gold); color: var(--navy); font-weight:600; }
.nav-item.active svg{ opacity:1; }

.sidebar-foot{ padding:14px 12px 20px; display:flex; flex-direction:column; gap:4px; border-top:1px dashed rgba(255,255,255,0.15); margin-top:6px;}
.ghost-btn{
  display:flex; align-items:center; gap:10px; background:transparent; border:none;
  color:#9FB2B8; font-size:12.5px; padding:8px 10px; border-radius:7px; width:100%; text-align:left;
}
.ghost-btn:hover{ background: rgba(255,255,255,0.06); color:#fff; }
.ghost-btn.danger-txt:hover{ color:#F0A392; }

.scrim{ display:none; }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
  display:flex; align-items:center; gap:16px; padding:14px 28px;
  background: var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5;
}
.search-wrap{ flex:1; max-width:420px; display:flex; align-items:center; gap:8px; background:var(--paper); border:1px solid var(--line); border-radius:9px; padding:8px 12px; color:var(--faint);}
.search-wrap svg{ flex-shrink:0; }
.search-wrap input{ border:none; background:transparent; outline:none; width:100%; font-size:13.5px; color:var(--ink); }
.topbar-right{ margin-left:auto; display:flex; align-items:center; gap:16px; }
.today{ font-size:12.5px; color:var(--muted); font-family:var(--font-mono); }

.icon-btn{ background:transparent; border:1px solid var(--line); border-radius:8px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; color:var(--muted); }
.icon-btn:hover{ background:var(--paper); }
.only-mobile{ display:none; }

.primary-btn{
  display:flex; align-items:center; gap:8px; background: var(--teal); color:#fff; border:none;
  padding:9px 16px; border-radius:8px; font-size:13.5px; font-weight:600;
}
.primary-btn:hover{ background: var(--teal-dark); }
.secondary-btn{
  display:flex; align-items:center; gap:8px; background: var(--surface); color:var(--teal); border:1px solid var(--line-strong);
  padding:8px 14px; border-radius:8px; font-size:13px; font-weight:600;
}
.secondary-btn:hover{ background:var(--teal-tint); }
.danger-btn{ background:var(--coral); color:#fff; border:none; padding:8px 14px; border-radius:8px; font-size:13px; font-weight:600;}

.content{ padding:26px 28px 60px; max-width:1320px; width:100%; margin:0 auto; }

/* ===== section header ===== */
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px;}
.sec-head h1{ font-size:26px; }
.sec-head .eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--gold-dark); margin-bottom:4px; display:block;}
.sec-actions{ display:flex; gap:10px; align-items:center; }

/* ===== ticket divider (signature element) ===== */
.stub-divider{
  display:flex; align-items:center; gap:10px; margin: 26px 0; color:var(--faint);
}
.stub-divider .dots{ flex:1; height:0; border-top:2px dashed var(--line-strong); }
.stub-divider .lbl{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:1px; text-transform:uppercase; }

/* ===== stat cards ===== */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:8px;}
.stat-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px 20px; position:relative; overflow:hidden;}
.stat-card .stat-icon{ position:absolute; top:14px; right:16px; color:var(--line-strong);}
.stat-card .label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); font-weight:600;}
.stat-card .value{ font-family:var(--font-display); font-size:30px; font-weight:600; color:var(--navy); margin-top:6px;}
.stat-card .delta{ font-size:12px; color:var(--teal); margin-top:4px; font-weight:600;}
.stat-card .delta.down{ color:var(--coral); }
.target-bar{ width:100%; height:8px; border-radius:6px; background:var(--line); overflow:hidden; margin-top:10px;}
.target-bar-fill{ height:100%; border-radius:6px; background:var(--teal); transition:width .3s ease;}
.target-bar-fill.warn{ background:var(--gold); }
.target-bar-fill.danger{ background:var(--coral); }

/* ===== cards / panels ===== */
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px; }
.panel + .panel{ margin-top:16px; }
.two-col{ display:grid; grid-template-columns: 1.5fr 1fr; gap:16px; align-items:start;}
@media(max-width:980px){ .two-col{ grid-template-columns:1fr; } }

.panel h3{ font-size:15px; margin-bottom:14px; }
.list-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.list-row:last-child{ border-bottom:none; }
.list-row .dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--teal);}
.list-row .txt{ flex:1; min-width:0; }
.list-row .txt .t1{ font-size:13.5px; font-weight:600; color:var(--ink); }
.list-row .txt .t2{ font-size:12px; color:var(--muted); }
.list-row .meta{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted); white-space:nowrap;}

/* ===== toolbar / filters ===== */
.toolbar{ display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
.toolbar input[type=text], .toolbar select{
  border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:8px 12px; font-size:13px; color:var(--ink); outline:none;
}
.toolbar input[type=text]:focus, .toolbar select:focus{ border-color:var(--teal); }
.chip-filters{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{
  padding:6px 12px; border-radius:20px; font-size:12px; font-weight:600; border:1px solid var(--line-strong); background:var(--surface); color:var(--muted);
}
.chip.active{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* ===== table ===== */
.table-wrap{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow-x:auto; overflow-y:hidden; }
table{ width:100%; border-collapse:collapse; font-size:13px; }
thead th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:700; padding:12px 16px; background:var(--paper); border-bottom:1px solid var(--line); white-space:nowrap;}
tbody td{ padding:12px 16px; border-bottom:1px solid var(--line); color:var(--ink); vertical-align:middle;}
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background: #FAFBF9; }
.cell-mono{ font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.cell-strong{ font-weight:600; }
.row-actions{ display:flex; gap:6px; justify-content:flex-end; }
.row-actions button{ background:transparent; border:1px solid var(--line); border-radius:6px; width:28px; height:28px; display:flex; align-items:center; justify-content:center; color:var(--muted); }
.row-actions button:hover{ background:var(--paper); color:var(--ink); }

.link-btn{ background:transparent; border:none; padding:0; font-family:var(--font-mono); font-size:12px; color:var(--teal); display:inline-flex; align-items:center; gap:3px; cursor:pointer; }
.link-btn:hover{ text-decoration:underline; }
.cust-expand-row td{ padding:0 !important; border-top:none; }
.cust-bookings-panel{ background:var(--paper); border-radius:0 0 var(--radius) var(--radius); padding:10px 14px; display:flex; flex-direction:column; gap:8px; }
.cust-booking-item{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:10px 14px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.cbi-dest{ font-weight:600; font-size:13.5px; }
.cbi-meta{ display:flex; gap:12px; font-size:11.5px; color:var(--muted); margin-top:3px; flex-wrap:wrap; }
.cbi-side{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; white-space:nowrap;}
.badge.b-gray{ background:#EDEFEC; color:#5C6B67; }
.badge.b-teal{ background:var(--teal-tint); color:var(--teal-dark); }
.badge.b-gold{ background:var(--gold-tint); color:var(--gold-dark); }
.badge.b-coral{ background:var(--coral-tint); color:var(--coral); }

.return-alert{ margin-top:8px; background:var(--coral-tint); border:1px solid var(--coral); border-radius:8px; padding:8px 10px; }
.return-alert .ra-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.return-alert .ra-time{ font-size:11px; color:var(--muted); white-space:nowrap; }
.return-alert .ra-note{ margin-top:5px; font-size:12.5px; color:var(--ink); line-height:1.4; }

.ra-note-sm{ margin-top:4px; font-size:11.5px; color:var(--coral); max-width:220px; white-space:normal; line-height:1.35; }

.dash-alert-panel{ background:var(--coral-tint); border:1px solid var(--coral); border-radius:var(--radius-lg); padding:14px 18px; margin-bottom:18px; }
.dash-alert-title{ display:flex; align-items:center; gap:8px; font-weight:600; color:var(--coral); margin-bottom:10px; font-size:14px; }
.ret-card{ background:#fff; border:1px solid rgba(200,90,66,0.3); border-radius:8px; padding:10px 12px; }
.ret-card + .ret-card{ margin-top:10px; }
.ret-card-top{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:6px 14px; }
.ret-card-id{ font-weight:600; font-size:13.5px; color:var(--ink); flex:1 1 240px; min-width:0; overflow-wrap:break-word; }
.ret-card-meta{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.ret-card-meta .rtime{ font-size:11.5px; color:var(--muted); white-space:nowrap; }
.ret-card-meta .ghost-btn{ padding:5px 12px; font-size:12px; }
.ret-card-body{ margin-top:6px; padding-top:6px; border-top:1px solid rgba(200,90,66,0.2); }
.badge.b-green{ background:var(--green-tint); color:var(--green); }

.empty-state{ text-align:center; padding:60px 20px; color:var(--muted); }
.empty-state svg{ color:var(--line-strong); margin-bottom:12px; }
.empty-state h3{ color:var(--ink); font-size:16px; margin-bottom:6px; }
.empty-state p{ font-size:13px; max-width:340px; margin:0 auto 16px; }

/* ===== boarding-pass ticket card (signature) ===== */
.ticket-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.ticket{
  background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; position:relative; display:flex;
  box-shadow: var(--shadow);
}
.ticket-main{ flex:1; padding:16px 16px 14px; min-width:0; }
.ticket-route{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.ticket-route .city{ font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--navy); }
.ticket-route .plane{ color:var(--gold); flex-shrink:0; }
.ticket-route .line{ flex:1; height:1px; background:repeating-linear-gradient(90deg,var(--line-strong) 0 4px,transparent 4px 8px); }
.ticket-name{ font-size:13.5px; font-weight:600; margin-bottom:2px; }
.ticket-sub{ font-size:11.5px; color:var(--muted); margin-bottom:12px; }
.ticket-meta{ display:flex; gap:18px; margin-top:8px; }
.ticket-meta .m{ display:flex; flex-direction:column; gap:2px; }
.ticket-meta .m .k{ font-size:9.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--faint); font-weight:700;}
.ticket-meta .m .v{ font-family:var(--font-mono); font-size:12.5px; color:var(--ink); font-weight:500; }
.ticket-stub{
  width:88px; flex-shrink:0; background:var(--paper); border-left:2px dashed var(--line-strong);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:10px 6px; position:relative;
}
.ticket-stub::before, .ticket-stub::after{
  content:""; position:absolute; width:14px; height:14px; background:var(--paper); border-radius:50%; left:-8px;
}
.ticket-stub::before{ top:-7px; }
.ticket-stub::after{ bottom:-7px; }
.ticket-stub .status{ writing-mode:vertical-rl; font-family:var(--font-mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; font-weight:700; }
.ticket-foot{ display:flex; justify-content:space-between; align-items:center; padding:10px 16px; border-top:1px dashed var(--line-strong); }
.ticket-foot .amt{ font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--navy); }
.ticket-foot .bal{ font-size:11px; color:var(--coral); font-weight:600; }
.ticket-foot .bal.paid{ color:var(--green); }

/* ===== progress bar ===== */
.progress{ height:6px; background:var(--line); border-radius:4px; overflow:hidden; }
.progress > div{ height:100%; background:var(--teal); }

/* ===== forms ===== */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid.full > *{ grid-column:1 / -1; }
.field{ display:flex; flex-direction:column; gap:5px; }
.field.span2{ grid-column:1/-1; }
.field label{ font-size:12px; font-weight:600; color:var(--muted); }
.field input, .field select, .field textarea{
  border:1px solid var(--line-strong); border-radius:8px; padding:9px 11px; font-size:13.5px; outline:none; color:var(--ink); background:#fff;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--teal); }
.field.field-invalid input, .field.field-invalid select, .field.field-invalid textarea{ border-color:var(--coral); box-shadow:0 0 0 3px var(--coral-tint); }
.field.field-invalid label{ color:var(--coral); }
.field.field-invalid label::after{ content:" — required"; font-weight:500; }
.field textarea{ resize:vertical; min-height:64px; font-family:inherit; }

.notes-log{
  display:flex; flex-direction:column; gap:8px; max-height:180px; overflow-y:auto;
  border:1px solid var(--line-strong); border-radius:8px; padding:8px 10px; background:#fbfaf8;
}
.notes-log:empty{ display:none; }
.note-entry{ border-bottom:1px dashed var(--line); padding-bottom:7px; }
.note-entry:last-child{ border-bottom:none; padding-bottom:0; }
.note-entry-meta{ font-size:10.5px; font-weight:600; color:var(--muted); letter-spacing:.02em; margin-bottom:2px; }
.note-entry-text{ font-size:13px; color:var(--ink); white-space:pre-wrap; line-height:1.4; }
.note-entry-empty{ color:var(--muted); font-size:12.5px; font-style:italic; }

.ops-return-detail{ margin-top:4px; display:flex; flex-direction:column; gap:3px; }
.ops-return-detail .ord-row{ display:flex; flex-wrap:wrap; gap:4px 6px; font-size:12.5px; line-height:1.45; }
.ops-return-detail .ord-label{ flex:0 0 auto; min-width:52px; font-weight:700; color:var(--muted); }
.ops-return-detail .ord-val{ color:var(--ink); overflow-wrap:break-word; word-break:normal; flex:1 1 180px; min-width:120px; }
.ra-note-sm .ops-return-detail{ margin-top:4px; }
.ra-note-sm .ops-return-detail .ord-row{ font-size:11.5px; color:var(--coral); }
.ra-note-sm .ops-return-detail .ord-label{ min-width:44px; color:var(--coral); }
.field textarea#f_notes_new, .field textarea[id$="_new"]{ min-height:52px; }

/* ===== modal ===== */
.modal-backdrop{ position:fixed; inset:0; background:rgba(14,26,32,0.45); display:none; align-items:center; justify-content:center; z-index:100; padding:20px;}
.modal-backdrop.open{ display:flex; }
.modal{ background:#fff; border-radius:14px; width:100%; max-width:620px; max-height:88vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.25);}
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); }
.modal-body{ padding:20px 22px; overflow-y:auto; }

.qx-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:9px 0; border-bottom:1px dashed var(--line); }
.qx-row:first-child{ padding-top:2px; }
.qx-row .qx-inp{ flex:1 1 130px; min-width:110px; font-family:inherit; font-size:13px; padding:8px 10px; border:1px solid var(--line); border-radius:7px; background:var(--paper); color:inherit; }
.qx-row .qx-inp:focus{ border-color:var(--teal); outline:none; }
.qx-empty{ font-size:12px; color:var(--muted); margin:2px 0 8px; }
.qx-addbtn{ margin-top:6px; padding:7px 14px; font-size:12.5px; }
.qx-imgbtn{ padding:7px 12px; font-size:12px; flex:0 0 auto; white-space:nowrap; }
.qx-imgbtn input[type="file"]{ display:none; }
.qx-thumb-wrap{ position:relative; display:inline-flex; flex:0 0 auto; }
.qx-thumb{ height:34px; width:auto; border-radius:6px; border:1px solid var(--line); display:block; }
.qx-thumb-wrap .qx-delimg{ position:absolute; top:-7px; right:-7px; width:18px; height:18px; border-radius:50%; background:var(--coral); border:none; color:#fff; display:flex; align-items:center; justify-content:center; padding:0; }
.qx-row .qx-del{ flex:0 0 auto; margin-left:auto; }
.modal-foot{ display:flex; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:1px solid var(--line); }

/* ===== itinerary ===== */
.day-card{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.day-card:last-child{ border-bottom:none; }
.day-num{ width:46px; flex-shrink:0; text-align:center; }
.day-num .n{ font-family:var(--font-display); font-size:22px; font-weight:600; color:var(--gold-dark); }
.day-num .l{ font-size:9.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--faint); font-weight:700;}
.day-body{ flex:1; }
.day-body .dt{ font-size:14px; font-weight:600; margin-bottom:3px; }
.day-body .dl{ font-size:11.5px; color:var(--gold-dark); font-weight:600; margin-bottom:6px; font-family:var(--font-mono); text-transform:uppercase;}
.day-body .dd{ font-size:13px; color:var(--muted); line-height:1.55; }
.day-actions{ display:flex; gap:6px; flex-shrink:0; }

/* ===== reports ===== */
.bar-chart{ display:flex; align-items:flex-end; gap:14px; height:200px; padding-top:20px; }
.bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end;}
.bar-col .bar{ width:100%; max-width:46px; background:var(--teal); border-radius:6px 6px 0 0; position:relative; }
.bar-col .bar .val{ position:absolute; top:-20px; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:11px; color:var(--navy); font-weight:600; white-space:nowrap;}
.bar-col .lbl{ font-size:11px; color:var(--muted); font-weight:600; }

/* ===== toast ===== */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(100px); background:var(--navy); color:#fff;
  padding:12px 20px; border-radius:10px; font-size:13px; font-weight:500; box-shadow:0 10px 30px rgba(0,0,0,0.25); z-index:200;
  display:flex; align-items:center; gap:10px; transition: transform .25s ease;
}
.toast.show{ transform:translateX(-50%) translateY(0); }

/* ===== misc ===== */
.mb-0{margin-bottom:0;}
.text-muted{color:var(--muted);}
.mail-link{ color:var(--muted); text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
.mail-link .ic{ flex-shrink:0; opacity:.8; }
.mail-link:hover{ color:var(--teal); text-decoration:underline; }
.mail-link:hover .ic{ opacity:1; }
.flex-between{display:flex;align-items:center;justify-content:space-between;}
.hidden{ display:none !important; }
.avatar{ width:32px; height:32px; border-radius:50%; background:var(--teal-tint); color:var(--teal-dark); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0;}

/* ===== responsive ===== */
@media(max-width:900px){
  .sidebar{ position:fixed; z-index:50; left:0; top:0; transform:translateX(-100%); transition:transform .2s ease; box-shadow:0 0 0 100vmax rgba(0,0,0,0); }
  .sidebar.open{ transform:translateX(0); }
  .scrim.open{ display:block; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:40; }
  .only-mobile{ display:flex; }
  .content{ padding:18px 16px 50px; }
  .topbar{ padding:12px 16px; }
  .search-wrap{ max-width:none; }
  .today{ display:none; }
  .form-grid{ grid-template-columns:1fr; }
  .two-col{ grid-template-columns:1fr; }
}

/* ===== login screen ===== */
.login-screen{ position:fixed; inset:0; background:var(--navy); display:flex; align-items:center; justify-content:center; z-index:500; padding:20px; }
.login-screen.hidden{ display:none; }
.login-card{ background:var(--surface); border-radius:16px; padding:36px 32px; width:100%; max-width:360px; box-shadow:0 20px 60px rgba(0,0,0,0.35); text-align:center; }
.login-mark{ color:var(--gold); display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.login-logo-img{ max-width:220px; width:100%; height:auto; }
.login-card h2{ font-size:20px; margin-bottom:4px; }
.login-sub{ font-size:12.5px; color:var(--muted); margin-bottom:4px; }
.login-card .field{ text-align:left; }
.login-hint{ font-size:11.5px; color:var(--faint); margin-top:12px; line-height:1.5; }
.login-hint.err{ color:var(--coral); font-weight:600; }

/* ===== user badge ===== */
.user-badge{ display:flex; align-items:center; gap:8px; padding-left:14px; border-left:1px solid var(--line); }
.user-meta{ display:flex; flex-direction:column; line-height:1.2; }
.u-name{ font-size:12.5px; font-weight:600; color:var(--ink); }
.u-role{ font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
@media(max-width:640px){ .user-meta{ display:none; } .user-badge{ padding-left:8px; } }

/* ===== drag & drop itinerary ===== */
.day-card{ cursor:default; }
.day-card.dragging{ opacity:.4; }
.day-card.drag-over{ border-top:2px solid var(--gold); }
.drag-handle{ display:flex; align-items:center; cursor:grab; color:var(--faint); flex-shrink:0; touch-action:none; }
.drag-handle:active{ cursor:grabbing; }
.drag-handle:hover{ color:var(--muted); }

/* ===== cloud sync: boot loader + status badge ===== */
.cloud-boot-loader{ position:fixed; inset:0; z-index:9999; background:var(--paper); display:flex; align-items:center; justify-content:center; }
.cloud-boot-loader.hidden{ display:none; }
.cbl-inner{ text-align:center; color:var(--muted); font-size:13px; }
.cbl-spin{ width:34px; height:34px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--teal); margin:0 auto 14px; animation:cblspin .8s linear infinite; }
@keyframes cblspin{ to{ transform:rotate(360deg); } }

.sync-badge{ font-size:11px; font-weight:600; padding:4px 9px; border-radius:20px; border:1px solid var(--line-strong); color:var(--muted); background:var(--surface); white-space:nowrap; }
.sync-badge.live{ color:var(--teal-dark); background:var(--teal-tint); border-color:transparent; }
.sync-badge.offline{ color:var(--coral); background:var(--coral-tint); border-color:transparent; }
@media(max-width:640px){ .sync-badge{ display:none; } }