:root{
  --brown:#6B3A2A;--brown-dark:#4A2519;--brown-light:#F5EDE8;
  --blue:#1E6FB5;--blue-dark:#154F82;--blue-light:#E5F0FA;
  --amber:#F5A623;--amber-dark:#8a5c0a;--amber-light:#FEF3DC;
  --teal:#1D9E75;--teal-light:#E1F5EE;
  --purple:#534AB7;--purple-light:#EEEDFE;
  --green-light:#EAF3DE;--dark:#1A1A2E;--mid:#5C4033;
  --sidebar-w:260px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'DM Sans',sans-serif;background:#ffffff;min-height:100vh;}
.screen{display:none;}.screen.active{display:block;}
#login-screen.active{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#4A2519 0%,#1E6FB5 60%,#6B3A2A 100%);}

/* LOGIN */
.login-box{background:white;border-radius:24px;padding:48px 40px;width:100%;max-width:420px;box-shadow:0 24px 60px rgba(0,0,0,.22);}
.login-logo{text-align:center;margin-bottom:28px;}
.login-logo img{width:210px;}
.login-logo p{font-size:12px;color:#999;letter-spacing:2px;text-transform:uppercase;margin-top:8px;}
.login-label{font-size:12px;font-weight:500;color:var(--mid);margin-bottom:6px;display:block;text-transform:uppercase;letter-spacing:1px;}
.login-input{width:100%;padding:12px 16px;border-radius:10px;border:1.5px solid #e0e0e0;font-size:15px;font-family:'DM Sans',sans-serif;margin-bottom:18px;outline:none;transition:border .2s;}
.login-input:focus{border-color:var(--blue);}
.login-btn{width:100%;padding:14px;background:var(--brown);color:white;border:none;border-radius:10px;font-size:15px;font-weight:500;font-family:'DM Sans',sans-serif;cursor:pointer;}
.login-btn:hover{background:var(--brown-dark);}
.login-error{color:#e24b4a;font-size:13px;margin-top:-10px;margin-bottom:14px;display:none;}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR LAYOUT
═══════════════════════════════════════════════════════════════ */

#portal-screen.active{display:flex;height:100vh;overflow:hidden;}

/* Sidebar */
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:#2d1a0e;
  display:flex;flex-direction:column;
  height:100vh;overflow-y:auto;overflow-x:hidden;
  position:relative;z-index:200;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.sidebar::-webkit-scrollbar{width:0;}

.sidebar-brand{
  display:flex;align-items:center;gap:0;
  padding:18px 14px 14px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
}
.sidebar-brand img{height:38px;border-radius:5px;}

/* Nav */
.sidebar-nav{flex:1;padding:8px 10px 4px;display:flex;flex-direction:column;gap:1px;overflow-y:auto;overflow-x:hidden;}
.sidebar-nav::-webkit-scrollbar{width:0;}

.nav-section-label{
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1.6px;
  color:var(--amber);padding:16px 8px 6px;
}
.nav-section-label:first-of-type{padding-top:6px;}

.nav-item{
  display:flex;align-items:center;gap:11px;
  padding:10px 14px;border-radius:9px;
  cursor:pointer;text-decoration:none;
  color:rgba(255,255,255,.58);font-size:13px;font-weight:400;
  transition:background .15s, color .15s;
  user-select:none;
}
.nav-item:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.88);}
.nav-item.active{
  background:rgba(255,255,255,.12);
  color:white;font-weight:500;
  border-left:3px solid var(--amber);
  padding-left:11px;
}
.nav-icon{font-size:15px;flex-shrink:0;width:20px;text-align:center;line-height:1;}
.nav-label{white-space:nowrap;}

/* Sidebar user footer */
.sidebar-user{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;margin:8px 10px;
  background:rgba(255,255,255,.08);
  border-radius:10px;
  cursor:pointer;
  flex-shrink:0;
}
.sidebar-user:hover{background:rgba(255,255,255,.13);}
.sidebar-user-avatar{
  width:36px;height:36px;border-radius:50%;
  background:var(--brown-light);color:var(--brown);
  font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;overflow:hidden;
}
.sidebar-user-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.sidebar-user-info{flex:1;min-width:0;}
.sidebar-user-name{font-size:13px;font-weight:600;color:white;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-user-id{font-size:11px;color:rgba(255,255,255,.4);white-space:nowrap;}
.sidebar-user-chevron{font-size:14px;color:rgba(255,255,255,.35);flex-shrink:0;}
.sidebar-logout-area{padding:0 10px 12px;flex-shrink:0;}
.sidebar-logout-btn{
  width:100%;padding:9px 14px;
  background:none;border:none;
  border-radius:9px;color:rgba(255,255,255,.55);font-size:13px;
  font-family:'DM Sans',sans-serif;cursor:pointer;text-align:left;
  display:flex;align-items:center;gap:8px;
  transition:color .15s;
}
.sidebar-logout-btn:hover{color:rgba(255,100,100,.85);}

/* Mobile overlay */
.sidebar-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:199;
  backdrop-filter:blur(2px);
}
.sidebar-overlay.open{display:block;}

/* Main area */
.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}

/* Top bar */
.topbar{
  background:white;height:64px;padding:0 28px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid #ece8e4;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
  flex-shrink:0;position:relative;z-index:100;
}
.topbar-left{display:flex;align-items:center;gap:14px;}
.topbar-title{font-family:'Playfair Display',serif;font-size:22px;color:var(--dark);font-weight:700;}
.hamburger{
  display:none;background:none;border:none;cursor:pointer;
  font-size:22px;color:var(--brown);padding:4px 6px;border-radius:7px;
  line-height:1;flex-shrink:0;
}
.hamburger:hover{background:var(--brown-light);}
.topbar-right{display:flex;align-items:center;gap:12px;}
.topbar-search{
  display:flex;align-items:center;gap:8px;
  background:#f5f2ef;border-radius:10px;padding:8px 14px;
  border:1.5px solid transparent;
  transition:border .2s;
}
.topbar-search:focus-within{border-color:var(--blue);background:white;}
.topbar-search-input{border:none;background:none;outline:none;font-size:13px;font-family:'DM Sans',sans-serif;width:180px;color:var(--dark);}
.topbar-notif-wrap{position:relative;}
.topbar-notif{
  background:none;border:none;cursor:pointer;
  font-size:18px;padding:7px;border-radius:9px;
  position:relative;line-height:1;
}
.topbar-notif:hover{background:#f5f2ef;}
.notif-badge{
  position:absolute;top:2px;right:2px;
  width:16px;height:16px;border-radius:50%;
  background:#e24b4a;color:white;
  font-size:9px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.topbar-avatar-wrap{
  width:38px;height:38px;border-radius:50%;
  overflow:hidden;border:2px solid var(--brown-light);
  cursor:pointer;flex-shrink:0;
  background:var(--brown-light);display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;color:var(--brown);
}
.topbar-avatar-wrap img{width:100%;height:100%;object-fit:cover;}

/* Content area */
.content-area{flex:1;overflow-y:auto;overflow-x:hidden;background:#f5f3f1;}

/* TABS */
.portal-tab{display:none;}.portal-tab.active{display:block;}
.portal-body{max-width:1140px;margin:0 auto;padding:32px 36px;}

/* ── Dashboard Welcome Card ────────────────────────────────── */
.dashboard-welcome{
  background:white;border-radius:16px;
  padding:44px 48px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  box-shadow:0 1px 8px rgba(0,0,0,.07);
  overflow:hidden;position:relative;
  min-height:220px;
  border:1px solid #f0ece8;
}
.dashboard-welcome-left{display:flex;align-items:center;gap:28px;flex:1;min-width:0;}
.dash-avatar-wrap{
  width:92px;height:92px;border-radius:50%;flex-shrink:0;
  background:var(--amber-light);color:var(--brown);
  font-size:32px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  border:3px solid #f5e8d6;overflow:hidden;
}
.dash-avatar-wrap img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.dashboard-welcome-text h2{
  font-family:'DM Sans',sans-serif;font-weight:400;
  font-size:34px;color:#1a1a1a;margin-bottom:8px;line-height:1.2;
}
.dashboard-welcome-text p{font-size:14px;color:#999;line-height:1.5;}
.dashboard-welcome-art{flex-shrink:0;width:240px;}
.dashboard-welcome-art svg{display:block;width:100%;}

/* Legacy compat — tab-btn kept in DOM by JS but hidden */
.tab-btn{display:none!important;}
.topbar-user{display:none!important;}
.logout-btn{display:none!important;}
.tab-bar{display:none!important;}

/* ── Dashboard Chart Card ──────────────────────────────────── */
.dash-chart-card{
  background:white;border-radius:16px;
  padding:24px 28px;
  box-shadow:0 1px 8px rgba(0,0,0,.07);
  border:1px solid #f0ece8;
}
.dash-chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:12px;}
.dash-chart-title{font-size:16px;font-weight:600;color:#1a1a1a;}
.dash-chart-tabs{display:flex;gap:6px;flex-wrap:wrap;}
.dct-btn{
  padding:6px 14px;border-radius:20px;
  border:1.5px solid #e0d8d0;background:none;
  font-size:12px;font-family:'DM Sans',sans-serif;
  cursor:pointer;color:#666;font-weight:500;
  transition:all .18s;
}
.dct-btn:hover{border-color:var(--brown);color:var(--brown);}
.dct-btn.active{background:var(--brown);border-color:var(--brown);color:white;}
.dash-chart-wrap{overflow-x:auto;margin:0 -4px;}

/* Line chart SVG elements - styled via JS but base overrides */
.lc-axis-label{font-family:'DM Sans',sans-serif;font-size:11px;fill:#aaa;}
.lc-grid-line{stroke:#f0ece8;stroke-width:1;}
.lc-y-label{font-family:'DM Sans',sans-serif;font-size:10px;fill:#bbb;text-anchor:end;}
.lc-dot{transition:r .15s;}

/* Month range selector */
.dash-month-bar{
  display:flex;flex-wrap:wrap;gap:5px;
  margin-top:14px;padding-top:14px;
  border-top:1px solid #f0ece8;
}
.dmt-btn{
  padding:4px 11px;border-radius:14px;
  border:1px solid #e0d8d0;background:none;
  font-size:11px;font-family:'DM Sans',sans-serif;
  cursor:pointer;color:#888;transition:all .15s;
}
.dmt-btn:hover{border-color:var(--brown);color:var(--brown);}
.dmt-btn.active{background:var(--brown-light);border-color:var(--brown);color:var(--brown);font-weight:600;}
.dmt-all{border-color:var(--brown);color:var(--brown);}
.dmt-all.active{background:var(--brown);color:white;}

.dchart-empty{text-align:center;padding:36px;color:#bbb;font-size:13px;}

/* ── Global search results ─────────────────────────────────── */
.search-section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:#aaa;margin:20px 0 10px;padding-bottom:6px;border-bottom:1px solid #f0ece8;}
.search-section-title:first-child{margin-top:0;}
.search-hit{background:white;border-radius:10px;padding:12px 16px;margin-bottom:8px;box-shadow:0 1px 4px rgba(0,0,0,.06);display:flex;align-items:center;gap:12px;cursor:pointer;border-left:3px solid transparent;transition:border-color .15s;}
.search-hit:hover{border-left-color:var(--brown);background:#faf8f6;}
.search-hit-icon{font-size:18px;flex-shrink:0;}
.search-hit-main{flex:1;min-width:0;}
.search-hit-name{font-size:13px;font-weight:600;color:#1a1a1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.search-hit-sub{font-size:11px;color:#888;margin-top:2px;}
.search-hit-badge{font-size:11px;padding:3px 9px;border-radius:10px;background:#f0ece8;color:#666;flex-shrink:0;}
.search-no-results{text-align:center;padding:48px 20px;color:#aaa;font-size:14px;}

/* FORM */
.form-panel{background:white;border-radius:20px;padding:28px;box-shadow:0 2px 16px rgba(0,0,0,.07);}
.form-panel h3{font-family:'Playfair Display',serif;font-size:20px;color:var(--brown);margin-bottom:22px;padding-bottom:14px;border-bottom:2px solid var(--brown-light);}
.section-label{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:1.5px;color:white;padding:6px 14px;border-radius:20px;display:inline-block;margin-bottom:14px;margin-top:20px;}
.section-label:first-of-type{margin-top:0;}
.sl-brown{background:var(--brown);}.sl-blue{background:var(--blue);}.sl-amber{background:var(--amber);color:var(--brown-dark)!important;}.sl-purple{background:var(--purple);}.sl-green{background:var(--teal);}.sl-dark{background:var(--dark);}.sl-red{background:#A32D2D;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.form-group{margin-bottom:14px;}
label{font-size:12px;font-weight:500;color:var(--mid);display:block;margin-bottom:5px;}
input[type=text],input[type=number],textarea,select{width:100%;padding:10px 13px;border:1.5px solid #e8e3de;border-radius:9px;font-size:13px;font-family:'DM Sans',sans-serif;outline:none;transition:border .2s;background:#faf8f6;color:var(--dark);}
input:focus,textarea:focus,select:focus{border-color:var(--blue);background:white;}
textarea{resize:vertical;min-height:68px;line-height:1.5;}
.with-suffix{display:flex;align-items:center;gap:0;}
.with-suffix input{border-radius:9px 0 0 9px;flex:1;}
.suffix-label{background:#f0ece8;border:1.5px solid #e8e3de;border-left:none;border-radius:0 9px 9px 0;padding:10px 10px;font-size:13px;color:var(--mid);white-space:nowrap;}
.route-row{display:flex;align-items:center;gap:8px;}
.route-row input{flex:1;}
.route-arrow{font-size:16px;color:var(--brown);font-weight:700;flex-shrink:0;}
.flight-entry{background:var(--blue-light);border-radius:12px;padding:14px;margin-bottom:10px;border-left:4px solid var(--blue);}
.hotel-entry{background:var(--brown-light);border-radius:14px;padding:16px;margin-bottom:12px;border-left:4px solid var(--brown);}
.hotel-entry-card{display:flex;flex-direction:column;gap:10px;}
.tour-entry{background:var(--purple-light);border-radius:12px;padding:14px;margin-bottom:10px;border-left:4px solid var(--purple);}
.transfer-entry{background:var(--amber-light);border-radius:12px;padding:14px;margin-bottom:10px;border-left:4px solid var(--amber);}
.custom-section-entry{background:#f0f4f8;border-radius:12px;padding:14px;margin-bottom:10px;border-left:4px solid var(--teal);}
.add-btn{background:none;border:1.5px dashed #ccc;border-radius:9px;width:100%;padding:9px;font-size:13px;color:#999;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s;margin-top:4px;}
.add-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light);}
.remove-btn{background:none;border:none;color:#ccc;font-size:18px;cursor:pointer;float:right;line-height:1;transition:color .2s;}
.remove-btn:hover{color:#e24b4a;}
.generate-btn{width:100%;margin-top:22px;padding:15px;background:linear-gradient(135deg,var(--brown) 0%,var(--blue-dark) 100%);color:white;border:none;border-radius:12px;font-size:15px;font-weight:500;font-family:'DM Sans',sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;}
.generate-btn:hover{opacity:.9;}
.generate-btn:disabled{opacity:.5;cursor:not-allowed;}

/* VIEW BUTTONS */
.view-select-wrap{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px;}
.view-btn{padding:6px 11px;border-radius:8px;border:1.5px solid #e0d8d0;background:#faf8f6;font-size:12px;font-family:'DM Sans',sans-serif;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .2s;color:var(--mid);font-weight:500;}
.view-btn:hover{border-color:var(--brown);color:var(--brown);}
.view-btn.active{background:var(--brown-light);border-color:var(--brown);color:var(--brown);}
.view-custom-wrap{margin-top:8px;display:none;}
.view-custom-wrap.show{display:block;}

/* AVATAR */
.avatar-wrap{position:relative;width:72px;height:72px;flex-shrink:0;margin-right:4px;}
.avatar-wrap img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid var(--brown-light);}
.avatar-initials{width:72px;height:72px;border-radius:50%;background:var(--brown-light);color:var(--brown);font-size:22px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--brown);}
.avatar-upload-btn{position:absolute;bottom:0;right:0;width:22px;height:22px;background:var(--blue);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;border:2px solid white;font-size:11px;color:white;font-weight:700;}
.avatar-upload-btn:hover{background:var(--blue-dark);}
#avatar-file-input{display:none;}
.made-by-row{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.made-by-fields{flex:1;}

/* PREVIEW */
.preview-panel{display:none;}
.preview-panel::-webkit-scrollbar{width:5px;}
.preview-panel::-webkit-scrollbar-thumb{background:#ddd;border-radius:3px;}
.preview-label{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:1.5px;color:var(--mid);margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.preview-label::after{content:'';flex:1;height:1px;background:#e0d8d0;}

/* LIBRARY */
.library-body{max-width:1160px;margin:0 auto;padding:28px 24px;}
.library-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.library-header h2{font-family:'Playfair Display',serif;font-size:22px;color:var(--brown);}
.lib-search{padding:10px 16px;border:1.5px solid #e0d8d0;border-radius:10px;font-size:14px;font-family:'DM Sans',sans-serif;outline:none;width:280px;}
.lib-search:focus{border-color:var(--blue);}
.lib-empty{text-align:center;padding:60px 20px;color:#aaa;font-size:14px;background:white;border-radius:16px;}
.quote-card{background:white;border-radius:14px;padding:18px 20px;margin-bottom:12px;box-shadow:0 1px 8px rgba(0,0,0,.06);display:flex;align-items:center;gap:16px;border-left:4px solid var(--brown);}
.quote-card.matured{border-left-color:var(--teal);}
.quote-card.invoiced{border-left-color:var(--amber);}
.qc-info{flex:1;}
.qc-client{font-family:'Playfair Display',serif;font-size:16px;font-weight:700;color:var(--dark);margin-bottom:3px;}
.qc-meta{font-size:12px;color:#888;line-height:1.6;}
.qc-price{font-size:18px;font-weight:700;color:var(--brown);margin-right:8px;white-space:nowrap;}
.qc-status{font-size:11px;font-weight:600;padding:4px 12px;border-radius:20px;text-transform:uppercase;letter-spacing:.8px;white-space:nowrap;}
.status-active{background:var(--blue-light);color:var(--blue-dark);}
.status-matured{background:var(--teal-light);color:#085041;}
.status-invoiced{background:var(--amber-light);color:var(--amber-dark);}
.qc-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.qc-btn{font-size:12px;padding:6px 12px;border-radius:8px;cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:500;border:1.5px solid;transition:all .2s;white-space:nowrap;}
.btn-mature{background:var(--teal-light);color:#085041;border-color:#9FE1CB;}
.btn-mature:hover{background:var(--teal);color:white;border-color:var(--teal);}
.btn-invoice{background:var(--amber-light);color:var(--amber-dark);border-color:#FAC775;}
.btn-invoice:hover{background:var(--amber);color:white;border-color:var(--amber);}
.btn-pdf{background:var(--blue-light);color:var(--blue-dark);border-color:#85B7EB;}
.btn-pdf:hover{background:var(--blue);color:white;border-color:var(--blue);}
.btn-delete{background:#FCEBEB;color:#A32D2D;border-color:#F09595;}
.btn-delete:hover{background:#e24b4a;color:white;border-color:#e24b4a;}
.btn-edit{background:#F0F4FF;color:#2D4EA3;border-color:#A0B4F0;}
.btn-edit:hover{background:#2D4EA3;color:white;border-color:#2D4EA3;}
.editing-banner{background:linear-gradient(90deg,#2D4EA3,#1E6FB5);color:white;text-align:center;padding:8px 16px;font-size:13px;font-weight:500;border-radius:10px;margin-bottom:16px;display:none;}
.editing-banner.show{display:block;}

/* PDF DOCUMENT */
.pdf-doc{font-family:'DM Sans',sans-serif;background:linear-gradient(160deg,#F5EDE8 0%,#E5F0FA 55%,#EEEDFE 100%);padding:26px 22px;min-height:100vh;}
.pdf-doc .hdr{background:linear-gradient(135deg,#6B3A2A 0%,#1E6FB5 100%);border-radius:18px;padding:24px 26px;color:white;margin-bottom:14px;position:relative;overflow:hidden;page-break-inside:avoid;break-inside:avoid;}
.pdf-doc .hdr::before{content:'';position:absolute;top:-40px;right:-40px;width:180px;height:180px;background:rgba(255,255,255,.08);border-radius:50%;}
.pdf-doc .hdr::after{content:'';position:absolute;bottom:-60px;left:-20px;width:220px;height:220px;background:rgba(255,255,255,.05);border-radius:50%;}
.pdf-doc .logo-wrap{position:relative;z-index:1;margin-bottom:16px;}
.pdf-doc .logo-wrap img{height:46px;display:block;border-radius:6px;}
.pdf-doc .meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:relative;z-index:1;}
.pdf-doc .meta-full{grid-column:1/-1;}
.pdf-doc .meta label{font-size:10px;opacity:.65;text-transform:uppercase;letter-spacing:1.3px;display:block;margin-bottom:3px;}
.pdf-doc .meta p{font-size:13px;font-weight:500;}
.pdf-doc .dest-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.35);border-radius:20px;padding:5px 14px;font-size:12px;margin-top:12px;position:relative;z-index:1;}
.pdf-doc .doc-badge{display:inline-block;background:#F5A623;color:#4A2519;font-size:11px;font-weight:700;padding:4px 14px;border-radius:20px;letter-spacing:1px;text-transform:uppercase;position:relative;z-index:1;margin-top:10px;margin-left:8px;}
.pdf-doc .card{background:white;border-radius:14px;margin-bottom:12px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.08);page-break-inside:avoid;break-inside:avoid;}
.pdf-doc .card-hdr{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid #f0ecea;}
.pdf-doc .sec-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.pdf-doc .ic-blue{background:#E5F0FA;}.pdf-doc .ic-brown{background:#F5EDE8;}.pdf-doc .ic-amber{background:#FEF3DC;}.pdf-doc .ic-purple{background:#EEEDFE;}.pdf-doc .ic-green{background:#EAF3DE;}.pdf-doc .ic-dark{background:#e8e8f0;}.pdf-doc .ic-teal{background:#E1F5EE;}.pdf-doc .ic-red{background:#FCEBEB;}
.pdf-doc .sec-title{font-family:'Poppins',sans-serif;font-size:14px;font-weight:700;color:#3a1f14;}
.pdf-doc .card-body{padding:12px 16px;}
.pdf-doc .flight-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #f5f0ec;}
.pdf-doc .flight-row:last-child{border-bottom:none;}
.pdf-doc .fdate{background:#1E6FB5;color:white;border-radius:7px;padding:5px 9px;font-size:11px;font-weight:500;text-align:center;min-width:54px;flex-shrink:0;}
.pdf-doc .froute{flex:1;font-size:12px;color:#333;display:flex;align-items:center;gap:6px;}
.pdf-doc .froute .farrow{color:var(--brown);font-weight:700;}
.pdf-doc .fbadges{display:flex;gap:5px;flex-wrap:wrap;flex-shrink:0;}
.pdf-doc .airline-badge{font-size:10px;font-weight:500;padding:3px 9px;border-radius:20px;white-space:nowrap;background:#FEF3DC;color:#8a5c0a;}
.pdf-doc .luggage-badge{font-size:10px;font-weight:500;padding:3px 9px;border-radius:20px;white-space:nowrap;background:#E5F0FA;color:#154F82;}
.pdf-doc .hotel-block{border-radius:10px;padding:12px;margin-bottom:10px;page-break-inside:avoid;break-inside:avoid;}
.pdf-doc .hotel-block:last-child{margin-bottom:0;}
.pdf-doc .h-dates{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:1px;color:#888;margin-bottom:4px;}
.pdf-doc .h-name{font-family:'Playfair Display',serif;font-size:14px;font-weight:700;color:#1a1a1a;margin-bottom:3px;}
.pdf-doc .h-room{font-size:11px;color:#555;margin-bottom:8px;}
.pdf-doc .tags{display:flex;gap:5px;flex-wrap:wrap;}
.pdf-doc .tag{font-size:10px;padding:3px 9px;border-radius:20px;font-weight:500;}
.pdf-doc .t-brown{background:#F5EDE8;color:#4A2519;}.pdf-doc .t-blue{background:#E5F0FA;color:#154F82;}.pdf-doc .t-purple{background:#EEEDFE;color:#3C3489;}.pdf-doc .t-amber{background:#FEF3DC;color:#8a5c0a;}.pdf-doc .t-green{background:#EAF3DE;color:#27500A;}
.pdf-doc .tr-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #f5f0ec;}
.pdf-doc .tr-row:last-child{border-bottom:none;}
.pdf-doc .trdate{background:#F5A623;color:#4A2519;border-radius:7px;padding:4px 9px;font-size:11px;font-weight:600;min-width:54px;text-align:center;flex-shrink:0;}
.pdf-doc .tr-icon{width:26px;height:26px;background:#FEF3DC;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
.pdf-doc .tr-route{font-size:12px;color:#333;flex:1;display:flex;align-items:center;gap:5px;}
.pdf-doc .tr-arrow{color:var(--amber-dark);font-weight:700;}
.pdf-doc .tour-block{border-radius:10px;padding:12px;margin-bottom:10px;border:1px solid #e8e4de;page-break-inside:avoid;break-inside:avoid;}
.pdf-doc .tour-block:last-child{margin-bottom:0;}
.pdf-doc .tb-1{background:#F5EDE8;}.pdf-doc .tb-2{background:#E5F0FA;}
.pdf-doc .tour-header{display:flex;align-items:center;gap:9px;margin-bottom:7px;}
.pdf-doc .tour-num{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;}
.pdf-doc .tn-1{background:#6B3A2A;color:white;}.pdf-doc .tn-2{background:#1E6FB5;color:white;}
.pdf-doc .tour-title{font-family:'Playfair Display',serif;font-size:13px;font-weight:700;color:#1a1a1a;flex:1;}
.pdf-doc .tour-badges{display:flex;gap:5px;}
.pdf-doc .tour-dur{font-size:10px;font-weight:500;padding:3px 9px;border-radius:20px;background:#FEF3DC;color:#8a5c0a;}
.pdf-doc .tour-type{font-size:10px;font-weight:500;padding:3px 9px;border-radius:20px;background:#EEEDFE;color:#3C3489;}
.pdf-doc .tour-highlights{font-size:11px;color:#555;line-height:1.7;}
.pdf-doc .incl-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.pdf-doc .incl-item{display:flex;align-items:flex-start;gap:8px;font-size:11px;color:#333;padding:8px 10px;background:#faf8f6;border-radius:7px;line-height:1.5;}
.pdf-doc .incl-dot{width:18px;height:18px;background:#6B3A2A;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;color:white;flex-shrink:0;margin-top:1px;}
.pdf-doc .excl-dot{width:18px;height:18px;background:#F5A623;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;color:white;flex-shrink:0;margin-top:1px;}
.pdf-doc .price-card{background:linear-gradient(135deg,#4A2519 0%,#1E6FB5 100%);border-radius:14px;padding:26px 20px;text-align:center;margin-bottom:12px;page-break-inside:avoid;break-inside:avoid;}
.pdf-doc .price-label{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:#F5C882;margin-bottom:8px;}
.pdf-doc .price-val{font-family:'Playfair Display',serif;font-size:44px;font-weight:700;color:white;margin-bottom:6px;}
.pdf-doc .price-sub{font-size:12px;color:#F5C882;}
.pdf-doc .note-card{background:white;border-radius:12px;padding:12px 16px;display:flex;align-items:flex-start;gap:10px;box-shadow:0 2px 8px rgba(0,0,0,.07);margin-bottom:12px;page-break-inside:avoid;break-inside:avoid;}
.pdf-doc .note-ic{font-size:14px;width:30px;height:30px;background:#FEF3DC;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pdf-doc .note-text{font-size:11px;color:#555;line-height:1.6;}
.pdf-doc .made-by-card{background:white;border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 2px 8px rgba(0,0,0,.07);margin-bottom:12px;border-left:4px solid #6B3A2A;page-break-inside:avoid;break-inside:avoid;}
.pdf-doc .mb-icon{width:44px;height:44px;border-radius:50%;background:#F5EDE8;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.pdf-doc .mb-label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#999;margin-bottom:2px;}
.pdf-doc .mb-name{font-size:13px;font-weight:600;color:#3a1f14;}
.pdf-doc .mb-desig{font-size:11px;color:#888;}
.pdf-doc .invoice-block{background:white;border-radius:14px;margin-bottom:12px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.08);page-break-inside:avoid;break-inside:avoid;}
.pdf-doc .invoice-table{width:100%;border-collapse:collapse;font-size:12px;}
.pdf-doc .invoice-table th{background:#F5EDE8;color:#4A2519;padding:9px 12px;text-align:left;font-weight:600;}
.pdf-doc .invoice-table td{padding:9px 12px;border-bottom:1px solid #f5f0ec;color:#333;}
.pdf-doc .invoice-table tr:last-child td{border-bottom:none;}
.pdf-doc .inv-total-row td{background:#6B3A2A;color:white;font-weight:700;font-size:13px;}
.pdf-doc .inv-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 16px;}
.pdf-doc .inv-info-box{background:#faf8f6;border-radius:8px;padding:10px 12px;}
.pdf-doc .inv-info-box label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#999;display:block;margin-bottom:3px;}
.pdf-doc .inv-info-box p{font-size:13px;font-weight:600;color:#3a1f14;}
.pdf-doc .footer-card{background:white;border-radius:12px;padding:13px 16px;border-top:3px solid #F5A623;box-shadow:0 2px 8px rgba(0,0,0,.07);margin-bottom:12px;page-break-inside:avoid;break-inside:avoid;}
.pdf-doc .footer-logo{margin-bottom:7px;}
.pdf-doc .footer-logo img{height:30px;border-radius:4px;}
.pdf-doc .footer-details{font-size:11px;color:#666;line-height:1.8;}
.pdf-doc .footer-details strong{color:#6B3A2A;font-size:12px;}
.pdf-doc .payment-bar{background:white;border-radius:12px;padding:10px 16px;box-shadow:0 2px 8px rgba(0,0,0,.07);page-break-inside:avoid;break-inside:avoid;}
.pdf-doc .payment-bar-label{font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:#aaa;margin-bottom:8px;text-align:center;}

.pdf-doc .pay-item{display:flex;align-items:center;gap:5px;font-size:11px;color:#666;font-weight:500;}
.pdf-doc .pay-icon{font-size:16px;}


.pdf-doc .custom-tr-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #f5f0ec;}
.pdf-doc .custom-tr-row:last-child{border-bottom:none;}
.pdf-doc .empty-state{text-align:center;padding:60px 20px;color:#aaa;font-size:14px;}






.pdf-doc .payment-logos{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;}
.pdf-doc .pay-pill{display:flex;align-items:center;justify-content:center;width:68px;height:26px;background:#fafafa;border-radius:6px;border:1px solid #ebebeb;flex-shrink:0;}
.pdf-doc .pay-pill-sq{flex-direction:column;gap:2px;width:54px;}
.pdf-doc .pay-logo-wide{max-width:56px;max-height:14px;width:auto;height:auto;object-fit:contain;display:block;}
.pdf-doc .pay-logo-sq{max-width:32px;max-height:20px;width:auto;height:auto;object-fit:contain;display:block;}
.pdf-doc .pay-pill-label{font-size:6px;color:#999;font-weight:600;letter-spacing:.3px;line-height:1;text-align:center;}

.admin-group{margin-bottom:24px;}
.admin-group-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:8px 14px;background:var(--brown-light);border-radius:10px;border-left:4px solid var(--brown);}
.admin-group-name{font-size:14px;font-weight:600;color:var(--brown);}
.admin-group-count{font-size:12px;color:#999;font-weight:500;}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE MEDIA QUERIES
   Breakpoints: 1024px (tablet landscape), 768px (tablet/mobile)
                480px (mobile large), 360px (mobile small)
═══════════════════════════════════════════════════════════════ */

html, body { overflow-x: hidden; max-width: 100vw; }

/* ── Tablet landscape (≤1024px) ─────────────────────────────── */
@media (max-width:1024px){
  .preview-label,.preview-panel{display:none;}
  #pdf-preview-box{display:none;}
  .portal-body{padding:20px 18px;}
  .library-body{padding:20px 16px;}
  .library-header{flex-wrap:wrap;gap:12px;}
  .library-header>div{flex-wrap:wrap;gap:8px;}
  .lib-search{width:100%;}
}

/* ── Mobile (≤768px) — sidebar becomes off-canvas drawer ─────── */
@media (max-width:768px){
  /* Smooth off-canvas sidebar */
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;
    transform:translateX(-100%);
    z-index:200;
    will-change:transform;
    transition:transform .25s cubic-bezier(.4,0,.2,1);
    /* Safe area for notched phones */
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .sidebar.open{transform:translateX(0);}

  /* Hamburger visible */
  .hamburger{display:flex;}

  /* Main area full width */
  .main-area{width:100%;}

  /* Topbar — app-style, taller touch target */
  .topbar{
    padding:0 14px;
    height:56px;
    position:sticky;top:0;z-index:100;
    /* iOS safe area */
    padding-top:env(safe-area-inset-top,0px);
  }
  .topbar-title{font-size:17px;}
  .topbar-search{padding:6px 10px;}
  .topbar-search-input{width:120px;}

  /* Content area — account for bottom safe area on iOS */
  .content-area{
    padding-bottom:env(safe-area-inset-bottom,16px);
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }

  /* Portal body */
  .portal-body{padding:14px 12px;}
  .library-body{padding:14px 12px;}

  /* Form panels */
  .form-panel{padding:20px 16px;border-radius:16px;}
  .form-panel h3{font-size:17px;margin-bottom:16px;}
  .form-row{grid-template-columns:1fr;}
  .form-row-3{grid-template-columns:1fr;}
  .section-label{font-size:10px;padding:5px 12px;}
  .flight-entry,.hotel-entry,.tour-entry,.transfer-entry,.custom-section-entry{padding:12px;}
  .view-select-wrap{gap:5px;}
  .view-btn{padding:5px 9px;font-size:11px;}

  /* Library */
  .library-header{flex-direction:column;align-items:flex-start;gap:10px;}
  .library-header h2{font-size:18px;}
  .library-header>div{width:100%;flex-direction:column;gap:8px;}
  .lib-search{width:100%;}

  /* Quote/invoice cards — better touch targets */
  .quote-card{flex-wrap:wrap;gap:10px;padding:16px 14px;}
  .qc-info{flex:1 1 100%;}
  .qc-price{font-size:16px;}
  .qc-actions{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:8px;}
  .qc-btn{font-size:12px;padding:8px 12px;min-height:36px;display:flex;align-items:center;}
  .admin-group-hdr{flex-wrap:wrap;gap:6px;}

  /* Dashboard welcome — horizontal avatar+text, art hidden on small screens */
  .dashboard-welcome{flex-direction:row;padding:20px 18px;gap:12px;min-height:auto;align-items:center;justify-content:flex-start;}
  .dashboard-welcome-left{flex-direction:row;align-items:center;gap:14px;flex:1;}
  .dashboard-welcome-art{display:none;}
  .dashboard-welcome-text h2{font-size:20px;}
  .dashboard-welcome-text p{font-size:12px;}
  .dash-avatar-wrap{width:60px;height:60px;font-size:20px;flex-shrink:0;}

  /* Chart — stack tabs, scrollable */
  .dash-chart-card{padding:16px 14px;}
  .dash-chart-header{flex-direction:column;align-items:flex-start;gap:10px;}
  .dash-chart-tabs{overflow-x:auto;width:100%;padding-bottom:2px;flex-wrap:nowrap;}
  .dash-chart-tabs::-webkit-scrollbar{display:none;}
  .dct-btn{white-space:nowrap;padding:6px 13px;font-size:12px;flex-shrink:0;}
  .dash-month-bar{overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;}
  .dash-month-bar::-webkit-scrollbar{display:none;}
  .dmt-btn{flex-shrink:0;}

  /* Forms — bigger touch targets */
  input[type=text],input[type=number],textarea,select{
    padding:12px 13px;
    font-size:16px; /* Prevents iOS zoom on focus */
    -webkit-appearance:none;
  }
  label{font-size:12px;}
  .add-btn{padding:12px;font-size:13px;min-height:44px;}
  .generate-btn,#save-btn,#gen-btn{
    padding:14px;font-size:15px;
    min-height:48px;
  }
  #form-action-btns,.form-action-row{flex-wrap:wrap;gap:8px;}
  .generate-btn,#save-btn,#gen-btn{width:100%;justify-content:center;}

  /* Modals — full bottom sheet style on mobile */
  .modal-overlay{align-items:flex-end;padding:0;}
  .modal-box{
    border-radius:20px 20px 0 0;
    max-width:100%;width:100%;
    max-height:92vh;
    padding-bottom:calc(28px + env(safe-area-inset-bottom,0px));
  }

  /* Nav items — bigger touch area */
  .nav-item{padding:12px 14px;font-size:14px;}
  .nav-icon{font-size:17px;}

  /* Vendor / pax entries */
  .vendor-entry{flex-direction:column;gap:6px;}
  .vendor-entry input,.vendor-entry select{width:100%;}
  .vgt-row{flex-direction:column;gap:6px;align-items:flex-start !important;}
  .vgt-row > div{width:100%;min-width:unset !important;}
  .totals-summary{font-size:12px;}
  .po-grid{grid-template-columns:1fr !important;}
  .sale-expanded{padding:10px !important;}
  #acc-from,#acc-to{width:100%;}

  /* Search results */
  .search-hit{padding:14px 16px;}

  /* Login */
  .login-box{padding:36px 24px;margin:16px;}
  .login-box img{width:180px;}
}

/* ── Mobile small (≤480px) ──────────────────────────────────── */
@media (max-width:480px){
  body{font-size:14px;}
  .topbar{padding:0 12px;height:54px;}
  .topbar-title{font-size:16px;}
  .topbar-search{display:none;}
  .portal-body{padding:12px 10px;}
  .library-body{padding:12px 10px;}
  .form-panel{padding:16px 12px;border-radius:12px;margin:0;}
  .form-panel h3{font-size:16px;}
  .section-label{font-size:10px;padding:5px 10px;margin-top:16px;}
  .add-btn{padding:10px;font-size:12px;}
  .generate-btn{padding:14px;font-size:14px;}
  .route-row{gap:5px;}
  .route-arrow{font-size:14px;}
  .made-by-row{flex-direction:column;align-items:flex-start;gap:10px;}
  .made-by-fields{width:100%;}
  .avatar-wrap{align-self:center;}
  .library-header h2{font-size:16px;}
  .quote-card{padding:14px 12px;border-radius:12px;}
  .qc-client{font-size:14px;}
  .qc-meta{font-size:11px;}
  .qc-price{font-size:15px;}
  .qc-btn{font-size:11px;padding:8px 10px;border-radius:8px;}
  .qc-status{font-size:10px;padding:3px 8px;}
  .dp-popup{width:calc(100vw - 24px);min-width:unset;padding:12px;left:12px !important;}
  .dp-day{font-size:13px;}
  .pax-entry{flex-direction:column !important;align-items:flex-start !important;}
  .pax-entry input,.pax-entry select{width:100% !important;min-width:unset !important;}
  .qc-actions{flex-direction:column;align-items:stretch;}
  .qc-btn{width:100%;text-align:center;justify-content:center;}
  .comm-sale-row > div:last-child{flex-direction:column !important;gap:6px !important;}
  .comm-pct,.comm-lump{width:100% !important;}
  .editing-banner{font-size:12px;padding:7px 12px;}
  .login-box{padding:28px 18px;border-radius:18px;margin:12px;}
  .login-box img{width:160px;}
  .login-input{padding:12px 14px;font-size:16px;}
  .login-btn{padding:14px;font-size:15px;min-height:48px;}
  /* Dashboard */
  .dashboard-welcome{padding:18px 14px;}
  .dashboard-welcome-text h2{font-size:18px;}
  .dash-avatar-wrap{width:52px;height:52px;font-size:17px;}
  /* Chart */
  .dash-chart-card{padding:14px 12px;}
  .dct-btn{padding:5px 10px;font-size:11px;}
  #dash-line-chart{min-height:160px;}
}

/* ── Very small (≤360px) ────────────────────────────────────── */
@media (max-width:360px){
  .form-panel{padding:12px 10px;}
  .login-box{padding:24px 14px;}
  .login-box img{width:140px;}
  .qc-btn{font-size:10px;padding:7px 8px;}
  .dashboard-welcome-text h2{font-size:16px;}
}

/* ── Login screen centering ─────────────────────────────────── */
#login-screen.active{padding:20px;align-items:flex-start;padding-top:40px;}
@media (min-height:600px){
  #login-screen.active{align-items:center;padding-top:20px;}
}

/* ── Quote card stack on narrow screens ─────────────────────── */
@media (max-width:600px){
  .quote-card{flex-direction:column;align-items:flex-start;}
  .qc-price{font-size:16px;font-weight:700;}
}

/* ── Date Picker ───────────────────────────────────────────── */
.dp-wrap{position:relative;display:inline-block;width:100%;}
.dp-input::placeholder{color:transparent !important;opacity:0 !important;}
.dp-input{cursor:pointer !important;background:#faf8f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C4033' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat right 10px center !important;padding-right:34px !important;user-select:none;}
.dp-wrap input{cursor:pointer;background:#faf8f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C4033' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat right 10px center;padding-right:34px;}
.dp-popup{display:none;position:fixed;z-index:99999;background:white;border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.25);padding:14px;min-width:280px;width:280px;font-family:'DM Sans',sans-serif;}
.dp-popup.open{display:block;}
.dp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.dp-nav{background:none;border:1.5px solid #e0d8d0;border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;color:var(--brown);}
.dp-nav:hover{background:var(--brown-light);}
.dp-month-year{font-size:14px;font-weight:600;color:var(--brown);}
.dp-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px;}
.dp-weekday{text-align:center;font-size:10px;font-weight:600;color:#aaa;padding:4px 0;text-transform:uppercase;}
.dp-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.dp-day{text-align:center;padding:7px 2px;border-radius:8px;cursor:pointer;font-size:13px;color:#333;border:none;background:none;}
.dp-day:hover{background:var(--brown-light);color:var(--brown);}
.dp-day.today{font-weight:700;color:var(--blue);}
.dp-day.selected{background:var(--brown);color:white!important;}
.dp-day.other-month{color:#ccc;}
.dp-day.other-month:hover{background:#f5f5f5;color:#999;}
.dp-day.dp-sel{background:var(--brown)!important;color:white!important;border-radius:50%!important;}
.dp-range{background:rgba(107,58,42,0.12)!important;border-radius:0!important;color:var(--brown)!important;}
/* ── NEW TABS: serial badges, sales, payouts, accounts ───── */
.serial-badge { font-family: monospace; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 12px; display: inline-block; }
.serial-q  { background: #E5F0FA; color: #154F82; }
.serial-iq { background: #EAF3DE; color: #27500A; }
.serial-id { background: #FEF3DC; color: #8a5c0a; }
.serial-v  { background: #EEEDFE; color: #3C3489; }
.serial-sl { background: #F5EDE8; color: #4A2519; }

.metrics-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.metric-card { background: #faf8f6; border-radius: 10px; padding: 12px 14px; flex: 1; min-width: 130px; border: 1px solid #f0ece8; }
.metric-card label { font-size: 11px; color: #aaa; text-transform: uppercase; letter-spacing: .5px; display: block; margin-bottom: 4px; }
.metric-val { font-size: 17px; font-weight: 600; }
.metric-val.green { color: #27500A; }
.metric-val.red   { color: #A32D2D; }
.metric-val.blue  { color: #154F82; }
.metric-val.amber { color: #8a5c0a; }

.sale-row { border: 1px solid #f0ece8; border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.sale-row-hdr { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; background: #fff; flex-wrap: wrap; }
.sale-row-hdr:hover { background: #faf8f6; }
.sale-client { font-weight: 600; font-size: 12px; flex: 1; min-width: 100px; }
.sale-dest   { font-size: 11px; color: #aaa; width: 160px; flex-shrink: 0; }
.sale-date   { font-size: 11px; color: #888; width: 80px; flex-shrink: 0; }
.sale-pax    { font-size: 11px; color: #888; width: 40px; flex-shrink: 0; }
.sale-rev    { font-size: 12px; font-weight: 600; width: 90px; flex-shrink: 0; text-align: right; }
.sale-net    { font-size: 11px; width: 90px; flex-shrink: 0; text-align: right; }
.chevron     { font-size: 10px; color: #aaa; margin-left: 4px; flex-shrink: 0; }

.sale-detail { padding: 12px 14px; border-top: 1px solid #f0ece8; background: #faf8f6; }
.sale-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.detail-section-ttl { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: #aaa; margin-bottom: 8px; }
.detail-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.detail-table th { text-align: left; padding: 4px 8px; font-size: 10px; color: #aaa; border-bottom: 1px solid #e8e0d8; background: #f5f0ec; }
.detail-table td { padding: 5px 8px; border-bottom: 1px solid #f5f0ec; }
.detail-table tr:last-child td { border-bottom: none; }
.balance-note { margin-top: 8px; padding: 6px 10px; background: #FEF3DC; border-radius: 7px; font-size: 11px; color: #8a5c0a; }
.balance-note.paid { background: #EAF3DE; color: #27500A; }

.cat-tag { background: #E5F0FA; color: #154F82; font-size: 10px; padding: 2px 7px; border-radius: 10px; font-weight: 500; }

.vendor-entry { display: flex; gap: 8px; align-items: flex-end; background: #faf8f6; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; flex-wrap: wrap; }
.vendor-entry input, .vendor-entry select { padding: 6px 10px; border-radius: 7px; border: 1px solid #ddd; font-size: 12px; }
.vendor-entry .v-name { flex: 2; min-width: 120px; }
.vendor-entry .v-cat  { flex: 1; min-width: 130px; }
.vendor-entry .v-amt  { width: 100px; }
.vendor-entry .v-notes { flex: 1; min-width: 100px; }

.pax-entry { display: flex; gap: 8px; align-items: center; background: #faf8f6; border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; flex-wrap: wrap; }
.pax-entry input, .pax-entry select { padding: 6px 10px; border-radius: 7px; border: 1px solid #ddd; font-size: 12px; flex: 1; min-width: 100px; }

.totals-summary { background: #faf8f6; border-radius: 10px; padding: 12px 16px; margin-top: 10px; }
.totals-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #f0ece8; font-size: 13px; }
.totals-row:last-child { border-bottom: none; }
.totals-row.total { font-weight: 600; font-size: 14px; padding-top: 8px; border-top: 1px solid #ddd; border-bottom: none; }
.totals-row .green { color: #27500A; font-weight: 600; }
.totals-row .red   { color: #A32D2D; }
.totals-row .blue  { color: #154F82; }
.totals-row .amber { color: #8a5c0a; }

.form-section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: #888; margin: 14px 0 8px; padding-bottom: 6px; border-bottom: 1px solid #f0ece8; }

.accounts-filter { background: #faf8f6; border-radius: 10px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.accounts-filter input[type=date] { padding: 6px 10px; border-radius: 7px; border: 1px solid #ddd; font-size: 12px; }
.acc-section { background: #fff; border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; border: 1px solid #f0ece8; }
.acc-section-ttl { font-size: 13px; font-weight: 600; color: #3a1f14; margin-bottom: 10px; }
.acc-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.acc-table th { text-align: left; padding: 6px 10px; font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid #e8e0d8; background: #faf8f6; }
.acc-table td { padding: 7px 10px; border-bottom: 1px solid #f5f0ec; }
.acc-table tr:last-child td { border-bottom: none; }

.danger-btn { color: #c0392b !important; border-color: #f5c0c0 !important; }
.danger-btn:hover { background: #fff0f0 !important; }

/* ── Company Accounts ─────────────────────────────────────── */
.ca-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:20px;}
.ca-metric{background:white;border-radius:12px;padding:14px 16px;box-shadow:0 1px 6px rgba(0,0,0,.07);border:1px solid #f0ece8;}
.ca-metric label{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:#aaa;font-weight:600;display:block;margin-bottom:6px;}
.ca-metric .ca-val{font-size:18px;font-weight:700;}
.ca-metric .ca-val.green{color:#27500A;}.ca-metric .ca-val.red{color:#c0392b;}.ca-metric .ca-val.amber{color:#8a5c0a;}.ca-metric .ca-val.blue{color:#1E6FB5;}
.ca-section{background:white;border-radius:12px;margin-bottom:16px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,.07);}
.ca-section-hdr{padding:12px 16px;border-bottom:1px solid #f0ece8;font-size:13px;font-weight:600;color:#1a1a1a;display:flex;align-items:center;gap:8px;}
.ca-section-body{padding:14px 16px;}
.ca-expense-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding:14px 16px;border-bottom:1px solid #f5f0ec;}
.ca-expense-form input,.ca-expense-form textarea{padding:7px 10px;border:1px solid #e0d8d0;border-radius:8px;font-size:12px;font-family:'DM Sans',sans-serif;background:#faf8f6;outline:none;}
.ca-expense-form input:focus,.ca-expense-form textarea:focus{border-color:var(--brown);background:white;}
.exp-row{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid #f5f0ec;font-size:12px;}
.exp-row:last-child{border-bottom:none;}
.exp-row-title{flex:1;font-weight:500;color:#1a1a1a;}
.exp-row-desc{font-size:11px;color:#aaa;margin-top:2px;}
.exp-row-amt{font-weight:600;color:#c0392b;white-space:nowrap;}
.exp-row-date{color:#aaa;font-size:11px;white-space:nowrap;}
.exp-badge{font-size:9px;padding:2px 7px;border-radius:8px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.exp-badge.payroll{background:#E5F0FA;color:#1E6FB5;}
.exp-badge.manual{background:#F5EDE8;color:#6B3A2A;}
.exp-expand{cursor:pointer;color:#1E6FB5;font-size:11px;margin-left:6px;}
.exp-breakdown{background:#f5f3f1;border-radius:8px;padding:8px 12px;margin:4px 16px 8px;font-size:11px;color:#555;line-height:1.7;display:none;}
.exp-breakdown.open{display:block;}
.out-row{display:flex;align-items:center;gap:10px;padding:9px 16px;border-bottom:1px solid #f5f0ec;font-size:12px;}
.out-row:last-child{border-bottom:none;}
.out-row-client{flex:1;font-weight:500;}
.out-row-serial{font-size:10px;color:#aaa;font-family:monospace;}
.out-row-amt{font-weight:600;color:#8a5c0a;white-space:nowrap;}
.out-row-emp{font-size:11px;color:#aaa;}

/* ── Revenue on Hold ─────────────────────────────────────────── */
.roh-toggle{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:9px;border:1.5px solid #e0b44a;background:#fffbf0;color:#8a5c0a;font-size:12px;font-weight:600;cursor:pointer;transition:all .18s;user-select:none;}
.roh-toggle.active{background:#F5A623;border-color:#e09010;color:white;}
.roh-toggle .roh-icon{font-size:14px;}
.roh-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;background:#FEF3DC;color:#8a5c0a;border:1px solid #f5d47a;padding:2px 8px;border-radius:8px;font-weight:600;white-space:nowrap;}
.roh-section{background:linear-gradient(135deg,#fffbf0,#fef9e7);border:1.5px solid #f5d47a;border-radius:12px;padding:12px 16px;margin-top:10px;}
.roh-section-ttl{font-size:12px;font-weight:600;color:#8a5c0a;margin-bottom:8px;}
.metric-card.roh{background:linear-gradient(135deg,#fffbf0,#fef9e7);border:1.5px solid #f5d47a;}
.metric-card.roh .metric-val{color:#8a5c0a;}

/* ── Dashboard chart data table ─────────────────────────────── */
.chart-data-table{width:100%;border-collapse:collapse;font-size:11px;margin-top:4px;}
.chart-data-table th{text-align:left;padding:6px 10px;background:#faf8f6;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:#aaa;border-bottom:1px solid #e8e0d8;font-weight:600;white-space:nowrap;}
.chart-data-table th:not(:first-child){text-align:right;}
.chart-data-table td{padding:6px 10px;border-bottom:1px solid #f5f0ec;color:#333;}
.chart-data-table td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums;}
.chart-data-table tr:last-child td{font-weight:600;background:#f5f0ec;}
.chart-data-table .emp-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;flex-shrink:0;}

/* ── Mobile: new tab elements (sales filter, ROH, accounts, company) ─ */
@media (max-width:768px) {
  /* Filter bars */
  .accounts-filter{flex-direction:column;align-items:stretch;gap:8px;}
  .accounts-filter span{display:none;}
  .accounts-filter input,.accounts-filter select,.accounts-filter button{width:100%;box-sizing:border-box;}

  /* Metric rows */
  .metrics-row{grid-template-columns:1fr 1fr;gap:8px;}
  .metric-card{padding:10px 12px;}
  .metric-val{font-size:18px;}

  /* ROH section */
  .roh-section{padding:10px 12px;}
  .roh-section > div[style*="display:flex"]{flex-direction:column !important;}
  .roh-section .metric-card,.roh-section .ca-metric{min-width:unset !important;width:100%;}

  /* Sales rows */
  .sale-row-hdr{flex-wrap:wrap;gap:6px;padding:12px 14px;}
  .sale-client{font-size:13px;font-weight:600;flex:1 1 60%;}
  .sale-dest{font-size:11px;color:#aaa;flex:1 1 100%;}
  .sale-date{font-size:11px;}
  .sale-pax{display:none;}
  .sale-rev{font-size:13px;}
  .sale-net{display:none;}

  /* Company accounts grid */
  .ca-summary-grid{grid-template-columns:1fr 1fr;gap:8px;}
  .ca-metric{padding:10px 12px;}
  .ca-val{font-size:18px;}

  /* Expense rows */
  .exp-row{flex-wrap:wrap;gap:6px;}
  .exp-row-date{font-size:11px;}
  .exp-row-amt{font-size:13px;}
  .exp-row-title{font-size:12px;}

  /* ROH badge */
  .roh-badge{font-size:9px;padding:2px 6px;}

  /* Outstanding rows */
  .out-row{flex-wrap:wrap;gap:4px;padding:10px 12px;}
  .out-row-client{flex:1 1 100%;font-size:13px;}
  .out-row-emp{flex:1 1 50%;font-size:11px;}
  .out-row-amt{flex:1 1 100%;font-size:13px;font-weight:600;}

  /* Dashboard data table */
  .chart-data-table{font-size:10px;}
  .chart-data-table th,.chart-data-table td{padding:4px 6px;}
  #dash-chart-table{overflow-x:auto;}

  /* ROH toggle button */
  .roh-toggle{font-size:11px;padding:6px 10px;}

  /* Sales filter bar PDF button */
  .accounts-filter .btn-primary{margin-top:4px;}

  /* Direct invoice rows */
  .di-row{flex-direction:column;gap:6px;}
  .di-row input{width:100% !important;}

  /* Acc section */
  .acc-section{margin-bottom:10px;}
  .acc-table{font-size:11px;}
  .acc-table th,.acc-table td{padding:6px 8px;}
}

@media (max-width:480px) {
  /* Single column metrics on small phones */
  .metrics-row{grid-template-columns:1fr;}
  .ca-summary-grid{grid-template-columns:1fr;}

  /* Full-width sale rows */
  .sale-row-hdr{padding:10px 12px;}
  .sale-rev,.sale-date{font-size:12px;}

  /* Hide chevron text — use icon only */
  .chevron{font-size:12px;}

  /* Commission table */
  .chart-data-table{font-size:9px;}
  .chart-data-table th,.chart-data-table td{padding:3px 4px;}
}

/* ── Bottom Navigation (mobile only) ────────────────────────── */
.bottom-nav {
  display: none; /* hidden on desktop */
}
.bottom-more-sheet,
.bottom-more-overlay {
  display: none; /* hidden on desktop — shown only inside media query */
}

@media (max-width: 768px) {
  /* Push content up so it isn't hidden behind the nav */
  .content-area {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: white;
    border-top: 1px solid #e8e0d8;
    box-shadow: 0 -2px 16px rgba(0,0,0,.08);
    z-index: 300;
    align-items: stretch;
  }

  .bn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 4px 4px;
    color: #aaa;
    transition: color .15s;
    -webkit-tap-highlight-color: transparent;
  }

  .bn-item.active {
    color: #6B3A2A;
  }

  .bn-icon {
    font-size: 20px;
    line-height: 1;
  }

  .bn-label {
    font-size: 10px;
    font-weight: 500;
    font-family: 'DM Sans', sans-serif;
    letter-spacing: .1px;
  }

  /* Active indicator dot */
  .bn-item.active .bn-label {
    font-weight: 700;
  }

  /* More sheet overlay */
  .bottom-more-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 350;
    opacity: 0;
    transition: opacity .2s;
  }
  .bottom-more-overlay.open {
    display: block;
    opacity: 1;
  }

  /* More sheet */
  .bottom-more-sheet {
    display: block;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: white;
    border-radius: 20px 20px 0 0;
    z-index: 360;
    padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 -4px 32px rgba(0,0,0,.15);
  }
  .bottom-more-sheet.open {
    transform: translateY(0);
  }

  .bottom-more-handle {
    width: 36px; height: 4px;
    background: #e0d8d0;
    border-radius: 2px;
    margin: 0 auto 16px;
  }

  .bottom-more-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  .bm-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    background: #faf8f6;
    border: 1px solid #e8e0d8;
    border-radius: 12px;
    cursor: pointer;
    color: #3a1f14;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s;
  }
  .bm-item:active { background: #f0ece8; }

  .bm-icon { font-size: 22px; line-height: 1; }
  .bm-label { font-size: 10px; font-weight: 500; font-family: 'DM Sans', sans-serif; text-align: center; }
}


/* ══════════════════════════════════════════════════════════
   MOBILE CARD ACTIONS — ⋮ menu replaces button rows
   Desktop completely unaffected (>768px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Hide the normal button row on mobile */
  .qc-actions {
    display: none !important;
  }

  /* ⋮ trigger button on each card */
  .qc-dot-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid #e8e0d8;
    background: #fff;
    font-size: 20px;
    color: #6B3A2A;
    cursor: pointer;
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    line-height: 1;
  }

  /* Card needs relative positioning for the ⋮ button */
  .quote-card {
    position: relative;
  }

  /* Bottom sheet overlay */
  .mob-sheet-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1100;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .mob-sheet-overlay.open {
    display: block;
  }

  /* Bottom sheet drawer */
  .mob-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 0 0 env(safe-area-inset-bottom, 16px);
    z-index: 1101;
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    max-height: 80vh;
    overflow-y: auto;
  }
  .mob-sheet.open {
    transform: translateY(0);
  }

  /* Sheet handle */
  .mob-sheet-handle {
    width: 40px;
    height: 4px;
    background: #e0d8d0;
    border-radius: 2px;
    margin: 12px auto 4px;
  }

  /* Sheet client label */
  .mob-sheet-label {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    padding: 8px 20px 14px;
    border-bottom: 1px solid #f0ece8;
  }

  /* Individual action rows in sheet */
  .mob-sheet-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 20px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
    text-align: left;
    cursor: pointer;
    border-bottom: 1px solid #f8f5f2;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-sheet-btn:last-child {
    border-bottom: none;
  }
  .mob-sheet-btn:active {
    background: #f8f5f2;
  }
  .mob-sheet-btn.danger {
    color: #c0392b;
  }
  .mob-sheet-btn .btn-icon {
    font-size: 20px;
    width: 28px;
    text-align: center;
  }
}

/* ⋮ button hidden on desktop */
@media (min-width: 769px) {
  .qc-dot-btn {
    display: none !important;
  }
}


/* ── Dashboard Chart Enhancements ─────────────────────────── */
.dct-type-group {
  display: flex;
  gap: 2px;
  background: #f5f3f1;
  border-radius: 8px;
  padding: 2px;
  border: 1px solid #e8e0d8;
}
.dct-type-btn {
  padding: 4px 10px;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  transition: all .15s;
}
.dct-type-btn.active {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.dct-export-btn {
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid #e8e0d8;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: #6B3A2A;
  white-space: nowrap;
  transition: all .15s;
}
.dct-export-btn:hover { background: #F5EDE8; }
.dct-all-btn {
  background: rgba(107,58,42,.08) !important;
  color: #6B3A2A !important;
  border-color: rgba(107,58,42,.25) !important;
  font-weight: 600;
}
.dct-all-btn.active {
  background: #6B3A2A !important;
  color: #fff !important;
}
/* Pie chart container */
#dash-pie-chart {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  padding: 8px 0;
  min-height: 180px;
}
.dash-pie-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.dash-pie-title {
  font-size: 11px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .8px;
}
.dash-pie-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.dash-pie-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #555;
}
/* Pan buttons */
#dash-pan-left, #dash-pan-right {
  flex-shrink: 0;
}

/* Sale detail grid: stack on mobile */
@media (max-width: 600px) {
  .sale-detail-grid { grid-template-columns: 1fr !important; }
  .detail-table { font-size: 12px; }
  .sale-expanded { padding: 10px !important; }
}

/* Dimmed month buttons (outside current 6-month window) */
.dmt-dim {
  opacity: 0.38;
  font-style: italic;
}

/* Sales filter: dynamic start of year instead of hardcoded */