/* ==========================================================================
   World Net Hotels Workspace
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --navy-950: #0a1f36;
  --navy-900: #0f2c4a;
  --navy-800: #163b5c;
  --brand: #1f4e79;
  --brand-600: #2a6399;
  --brand-50: #eef4fb;
  --brand-100: #dbe7f5;
  --red: #d42a35;

  --bg: #f4f6f9;
  --surface: #ffffff;
  --text: #0f1b2d;
  --text-2: #475467;
  --text-3: #6b7686;
  --border: #e4e9f0;
  --border-strong: #d2dae4;

  --success-bg: #ecfdf3; --success-fg: #067647; --success-bd: #abefc6;
  --error-bg: #fef3f2;   --error-fg: #b42318;   --error-bd: #fecdca;
  --info-bg: #eff6ff;    --info-fg: #1f4e79;    --info-bd: #c7dcf2;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 8px 20px -6px rgba(16, 24, 40, .12), 0 3px 6px -3px rgba(16, 24, 40, .06);
  --shadow-lg: 0 24px 48px -12px rgba(16, 24, 40, .22);
  --ring: 0 0 0 4px rgba(42, 99, 153, .18);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
}
a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--brand); text-decoration: underline; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: var(--brand-50); color: var(--brand); padding: 2px 6px; border-radius: 6px; }
strong { font-weight: 650; }

.icon { width: 20px; height: 20px; flex-shrink: 0; }
.icon-sm { width: 16px; height: 16px; }
.icon-xs { width: 13px; height: 13px; }

:focus-visible { outline: none; box-shadow: var(--ring); }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font: inherit; font-weight: 600; font-size: 14.5px;
  cursor: pointer; text-decoration: none; box-shadow: var(--shadow-xs);
  transition: background-color .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
.btn:hover { background: #f8fafc; text-decoration: none; color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(180deg, var(--brand-600), var(--brand)); border-color: var(--brand); color: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .1), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.btn-primary:hover { background: linear-gradient(180deg, var(--brand), var(--navy-800)); color: #fff; }
.btn-primary .icon { transition: transform .2s var(--ease); }
.btn-primary:hover .icon { transform: translateX(3px); }
.btn-ghost { background: transparent; box-shadow: none; }
.btn-block { width: 100%; }
.btn-lg { padding: 12px 20px; font-size: 15px; }

/* ---------------------------------------------------------------- alerts */
.alert {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin: 0 0 18px;
  border-radius: var(--radius-sm); border: 1px solid; font-size: 14px; line-height: 1.45;
}
.alert-icon { width: 18px; height: 18px; margin-top: 1px; }
.alert-success { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-bd); }
.alert-error { background: var(--error-bg); color: var(--error-fg); border-color: var(--error-bd); }
.alert-info { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-bd); }

/* ----------------------------------------------------------------- forms */
.form { display: flex; flex-direction: column; gap: 18px; }
.field label, .label-row label { display: block; font-size: 13.5px; font-weight: 600; color: #344054; }
.field > label { margin-bottom: 6px; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.link-sm { font-size: 13px; font-weight: 600; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-icon { position: absolute; left: 13px; width: 18px; height: 18px; color: #98a2b3; pointer-events: none; transition: color .15s; }
.input-wrap input {
  width: 100%; height: 46px; padding: 0 14px 0 42px; font: inherit; font-size: 15px; color: var(--text);
  background: #fff; border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow-xs);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input-wrap input::placeholder { color: #a0a9b6; }
.input-wrap input:hover { border-color: #b8c3d1; }
.input-wrap input:focus { outline: none; border-color: var(--brand-600); box-shadow: var(--ring); }
.input-wrap:focus-within .input-icon { color: var(--brand-600); }
.input-wrap input:has(+ .input-action) { padding-right: 48px; }
.input-action {
  position: absolute; right: 6px; width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; background: transparent; color: #8a94a3; border-radius: 8px; cursor: pointer;
}
.input-action:hover { background: var(--brand-50); color: var(--brand); }
.input-action .icon { width: 18px; height: 18px; }
.input-action .icon-hide, .input-action[aria-pressed="true"] .icon-show { display: none; }
.input-action[aria-pressed="true"] .icon-hide { display: block; }

/* =========================================================== guest pages */
body.guest { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, 46%) 1fr; background: var(--surface); }

.brand-panel {
  position: relative; overflow: hidden; color: #fff; padding: 48px 56px;
  display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(900px 500px at 110% -10%, rgba(66, 133, 196, .45), transparent 60%),
    radial-gradient(700px 500px at -20% 110%, rgba(212, 42, 53, .18), transparent 60%),
    linear-gradient(160deg, var(--navy-800) 0%, var(--navy-900) 45%, var(--navy-950) 100%);
}
/* 2026-10-16: a turning globe with the logo's red strike drawing itself across it */
.brand-globe { position: absolute; width: min(640px, 92%); aspect-ratio: 1; top: 50%; left: 50%; transform: translate(-46%, -54%); pointer-events: none; }
.brand-meridian { transform-box: fill-box; transform-origin: center; animation: meridian 12s ease-in-out infinite; }
.brand-meridian.m2 { animation-delay: -4s; }
.brand-meridian.m3 { animation-delay: -8s; }
@keyframes meridian { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.02); } }
.brand-ring { animation: ring-breathe 9s ease-in-out infinite; } /* no transform-origin here: it would move the SVG rotate() off the globe's centre */
@keyframes ring-breathe { 50% { stroke-opacity: .26; } }
.brand-strike { filter: drop-shadow(0 6px 18px rgba(227, 52, 63, .45)); }
.brand-strike-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: strike-draw 1.6s cubic-bezier(.65, 0, .25, 1) .35s forwards; }
@keyframes strike-draw { to { stroke-dashoffset: 0; } }
.brand-glint { offset-path: path('M100 462Q330 590 528 96'); offset-distance: 0%; opacity: 0; filter: drop-shadow(0 0 8px #ff8a92); animation: glint 6s ease-in-out 2.2s infinite; }
@keyframes glint { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 32% { offset-distance: 100%; opacity: 0; } 100% { offset-distance: 100%; opacity: 0; } }
.brand-wordmark { position: relative; font-weight: 700; font-size: 15px; letter-spacing: .02em; color: #dbe7f5; display: flex; align-items: center; gap: 10px; }
.brand-wordmark span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; }
.brand-content { position: relative; }
.brand-headline { margin: 0; font-size: 46px; line-height: 1.04; font-weight: 750; letter-spacing: -.03em; }
.brand-clock { margin: 16px 0 0; font-size: 14px; color: #a9c0d8; font-variant-numeric: tabular-nums; }
.brand-clock span { color: #fff; font-weight: 650; }
@media (prefers-reduced-motion: reduce) {
  .brand-meridian, .brand-ring, .brand-glint { animation: none; }
  .brand-strike-draw { animation: none; stroke-dashoffset: 0; }
}

.form-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px 24px; background: #fff; }
.form-card { width: 100%; max-width: 400px; margin: auto 0; animation: rise .5s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.form-logo { display: block; width: 180px; height: auto; margin: 0 0 32px; }
.form-eyebrow { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.form-title { margin: 0 0 6px; font-size: 28px; font-weight: 750; letter-spacing: -.02em; color: var(--text); }
.form-title.is-solo { margin-bottom: 26px; } /* no subtitle under it (login) */
.form-subtitle { margin: 0 0 26px; color: var(--text-2); font-size: 15px; }
.form-note { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; color: var(--text-3); font-size: 13px; }
.form-note .icon { color: #12b76a; }
.form-back { margin: 22px 0 0; text-align: center; font-size: 14px; }
.form-back a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.form-foot { margin-top: 32px; font-size: 12.5px; color: #98a2b3; }

/* ============================================================ app shell */
body.app { min-height: 100vh; display: flex; flex-direction: column; }
.appbar { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--border); }
.appbar-inner { max-width: 1440px; margin: 0 auto; padding: 10px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.appbar-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.appbar-brand:hover { text-decoration: none; }
.appbar-brand img { height: 40px; width: auto; display: block; }
.appbar-product { padding-left: 14px; border-left: 1px solid var(--border-strong); font-weight: 700; font-size: 15px; color: var(--brand); letter-spacing: -.01em; }

.user-menu { position: relative; }
.user-menu summary { list-style: none; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 5px; border-radius: 999px; cursor: pointer; border: 1px solid transparent; transition: background-color .15s, border-color .15s; }
.user-chip:hover, .user-menu[open] .user-chip { background: #f5f7fa; border-color: var(--border); }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13.5px; color: #fff; background: linear-gradient(135deg, var(--brand-600), var(--navy-900)); letter-spacing: .02em; flex-shrink: 0; }
.avatar-lg { width: 44px; height: 44px; font-size: 15px; }
.user-meta { display: flex; flex-direction: column; line-height: 1.2; }
.user-name { font-weight: 650; font-size: 14px; }
.user-role { font-size: 12px; color: var(--text-3); }
.user-chevron { color: var(--text-3); transition: transform .2s var(--ease); }
.user-menu[open] .user-chevron { transform: rotate(180deg); }
.menu { position: absolute; right: 0; top: calc(100% + 8px); width: 270px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; animation: pop .14s var(--ease) both; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.menu-head { display: flex; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.menu-name { display: block; font-weight: 650; }
.menu-sub { display: block; font-size: 12.5px; color: var(--text-3); }
.menu form { margin: 0; }
.menu-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; background: transparent; border-radius: var(--radius-sm); font: inherit; font-size: 14px; font-weight: 550; color: var(--text); cursor: pointer; text-align: left; }
.menu-item:hover { background: #f5f7fa; }
.menu-item-danger { color: var(--error-fg); }
.menu-item-danger:hover { background: var(--error-bg); }

.page { flex: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 32px 48px; }
.page-alerts { padding-top: 20px; }
.app-footer { text-align: center; padding: 18px; font-size: 12.5px; color: #98a2b3; }

/* ------------------------------------------------------------ dashboard */
/* Modules page: one lane per section, original order. A module you can open is a
   large solid tile in its own colour (Visa purple, Operation blue, ...) with its
   icon as a faint watermark; modules still to come are quiet white tiles. */
.page-heading { margin: 22px 0 14px; font-size: 22px; font-weight: 750; letter-spacing: -.015em; color: var(--navy-800); }
body.mod-home { background: #edf1f6; }

.dashboard { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: start; }
.lane { min-width: 0; }
.lane-head {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 0 2px 7px; border-bottom: 2px solid #d3dce7;
  font-size: 12px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--navy-800);
}
.lane-count { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: #dfe6ee; font-size: 11.5px; letter-spacing: 0; text-align: center; color: var(--text-2); }
.lane-list { display: flex; flex-direction: column; gap: 10px; }

/* one row per module: icon, name, status */
.module-card {
  --accent: var(--brand); --accent-soft: var(--brand-50);
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px;
  min-height: 66px; padding: 11px 14px; border-radius: 14px;
  background: #fff; border: 1px solid #e0e7ef; color: var(--text-2); text-decoration: none;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.module-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; }
.module-icon img { width: 30px; height: 30px; display: block; }
.module-title { flex: 1; min-width: 0; font-weight: 700; font-size: 15.5px; letter-spacing: -.01em; line-height: 1.25; overflow-wrap: anywhere; }
.pill { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 650; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.pill-soon { background: #f1f4f8; color: var(--text-3); }
.pill-locked { background: var(--error-bg); color: var(--error-fg); }

/* open: solid module colour, white icon (see Module icons below), the icon again as a watermark */
.module-card.is-open { min-height: 78px; background: var(--accent); border-color: transparent; color: #fff; box-shadow: 0 12px 22px -16px rgba(16, 24, 40, .7); }
.module-card.is-open .module-title { font-size: 17px; position: relative; }
.module-mark { position: absolute; right: -16px; bottom: -36px; width: 92px; height: 92px; opacity: .12; filter: brightness(0) invert(1); pointer-events: none; transition: transform .3s var(--ease); }
.module-card.is-open .pill-open { position: relative; background: rgba(255, 255, 255, .16); color: #fff; }
a.module-card.is-open:hover { transform: translateY(-2px); box-shadow: 0 18px 28px -16px rgba(16, 24, 40, .75); color: #fff; text-decoration: none; }
a.module-card.is-open:hover .module-mark { transform: scale(1.08) rotate(-6deg); }
a.module-card.is-open:hover .pill-open { background: #fff; color: var(--accent); }
a.module-card.is-open:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }


.accent-blue      { --accent: #1d5fd6; --accent-soft: #eaf1ff; }
.accent-purple    { --accent: #522081; --accent-soft: #f3ecfb; }
.accent-operation { --accent: #0a3a57; --accent-soft: #e6eef4; }
.accent-accounting { --accent: #0d5a3b; --accent-soft: #e8f5ee; }
.accent-nova { --accent: #1f4e79; --accent-soft: #e8f0f7; }
.accent-scrub { --accent: #6b4a36; --accent-soft: #f7f1ec; }
.accent-report { --accent: #1e3a8a; --accent-soft: #eef2fb; }
.accent-statistics { --accent: #0f6b66; --accent-soft: #eaf6f4; }
.accent-associates { --accent: #8a6d00; --accent-soft: #fcf6e0; }
.accent-configuration { --accent: #4b7658; --accent-soft: #edf5ef; }
.accent-teal      { --accent: #0e8577; --accent-soft: #e6f6f3; }
.accent-violet    { --accent: #6d3fd1; --accent-soft: #f1ebff; }
.accent-cyan      { --accent: #0b7da3; --accent-soft: #e5f5fb; }
.accent-users     { --accent: #3d4a5c; --accent-soft: #eef1f5; } /* User & Groups slate (2026-10-14) */
.accent-pink      { --accent: #c4246f; --accent-soft: #fdebf3; }
.accent-orange    { --accent: #c2550f; --accent-soft: #fff1e7; }
.accent-green     { --accent: #13804a; --accent-soft: #e8f7ee; }
.accent-indigo    { --accent: #4338ca; --accent-soft: #eceafe; }
.accent-amber     { --accent: #a26207; --accent-soft: #fdf4e3; }
.accent-slate     { --accent: #475569; --accent-soft: #eef1f5; }

/* ---------------------------------------------------- inactivity dialog */
.overlay[hidden] { display: none; }
.overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 31, 54, .5); backdrop-filter: blur(3px); }
.overlay-box { width: 100%; max-width: 380px; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 28px; text-align: center; animation: pop .18s var(--ease) both; }
.overlay-icon { width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: #fff4ed; color: #c4320a; }
.overlay-box h2 { margin: 0 0 6px; font-size: 19px; font-weight: 700; }
.overlay-box p { margin: 0; color: var(--text-2); font-size: 14px; }
.overlay-box .countdown { margin: 10px 0 20px; font-size: 34px; font-weight: 750; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.overlay-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1100px) { .dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  body.guest { grid-template-columns: 1fr; }
  .brand-panel { padding: 28px 24px; min-height: 0; }
  .brand-panel { min-height: 220px; }
  .brand-globe { width: 380px; left: auto; right: -120px; transform: translateY(-50%); }
  .brand-headline { font-size: 28px; }
  .brand-clock { display: none; }
}
@media (max-width: 760px) {
  .appbar-inner, .page { padding-left: 16px; padding-right: 16px; }
  .appbar-product, .user-meta { display: none; }
}
@media (max-width: 460px) {
  .dashboard { grid-template-columns: 1fr; }
  .module-mark { display: none; }
  .form-title { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================
   Module pages (tables, forms, details) — kept plain and dense on purpose
   ===================================================================== */
.muted { color: var(--text-3); }
.count { font-size: 14px; font-weight: 600; color: var(--text-3); margin-left: 6px; }
.tag { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: var(--brand-50); color: var(--brand); border: 1px solid var(--brand-100); vertical-align: 1px; }

.module-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 22px 0 18px; border-bottom: 1px solid var(--border); }
.module-name { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--text-3); }
.tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.tabs a { padding: 9px 14px; font-size: 14px; font-weight: 600; color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.is-active { color: var(--brand); border-bottom-color: var(--brand); }

.breadcrumb { margin: 0 0 4px; font-size: 13px; color: var(--text-3); }
.page-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.page-title { margin: 0; font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-intro { margin: -4px 0 18px; color: var(--text-2); font-size: 14px; max-width: 820px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; margin-bottom: 20px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.card-title { margin: 0 0 12px; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.card-head .card-title { margin: 0; }
.card-note { margin: 12px 0 0; font-size: 13px; color: var(--text-3); }
.split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.split > .card { margin-bottom: 0; }
.split + .card { margin-top: 20px; }

.details { display: grid; grid-template-columns: 160px 1fr; gap: 9px 16px; margin: 0; font-size: 14px; }
.details dt { color: var(--text-3); }
.details dd { margin: 0; }
.group-name { display: inline-flex; align-items: center; gap: 6px; margin: 0 12px 2px 0; color: inherit; }
a.group-name:hover { color: var(--brand); }
.swatch { width: 10px; height: 10px; flex-shrink: 0; vertical-align: 0; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-active { color: #067647; }
.status-inactive { color: #b42318; }
.status-pending { color: #b54708; }
.page-title .status { font-size: 13px; }

.action-block + .action-block { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 14px; }
.action-block h3 { margin: 0 0 4px; font-size: 14px; }
.action-block p { margin: 0 0 10px; font-size: 13.5px; }

/* tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.card .table-wrap { border-radius: 6px; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--text-3); background: #f8fafc; padding: 9px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 9px 12px; border-bottom: 1px solid #eef1f5; vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: #fafbfc; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.col-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.col-actions { text-align: right; white-space: nowrap; }
.cell-device { color: var(--text-3); font-size: 13px; max-width: 360px; }
.row-link { font-weight: 600; color: var(--text); }
.table-grid th, .table-grid td { text-align: center; padding: 7px 6px; }
.table-grid th:first-child, .table-grid td:first-child { text-align: left; padding-left: 12px; white-space: nowrap; }
.table-grid th { font-size: 11.5px; line-height: 1.3; }
.grid-cell { color: #067647; font-weight: 700; }
.grid-cell.is-on { background: #ecfdf3; }
.is-weekend { background: #f8fafc; }
.table-grid th.is-today { color: var(--brand); }

.pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 12px 0 0; }
.pager-info { margin-right: auto; font-size: 13px; color: var(--text-3); }

/* filters and generic inputs */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.filter-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.input { height: 38px; padding: 0 11px; font: inherit; font-size: 14px; color: var(--text); background: #fff; border: 1px solid var(--border-strong); border-radius: 7px; min-width: 0; }
select.input { padding-right: 28px; }
.input:focus { outline: none; border-color: var(--brand-600); box-shadow: var(--ring); }
.input:disabled { background: #f5f7fa; color: var(--text-3); }
.input[aria-invalid="true"] { border-color: #f04438; }
.input-sm { height: 32px; font-size: 13px; }
.input-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }
.input-color { width: 64px; padding: 3px; }
.filters input[type="search"] { width: 280px; }
.filters-wide input[type="search"] { flex: 1 1 280px; width: auto; } /* search bar as wide as the table (Visa rejections) */
.link-reset { font-size: 13px; }
.link-btn { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--brand-600); cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.link-danger { color: var(--error-fg); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-danger-outline { color: var(--error-fg); border-color: var(--error-bd); }
.btn-danger-outline:hover { background: var(--error-bg); color: var(--error-fg); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.inline-form { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.add-member { margin: 14px 0 0; }

/* forms */
.form-card-wide { max-width: 920px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; margin-bottom: 22px; }
.form-grid .field-wide { grid-column: 1 / -1; }
.card .field { display: flex; flex-direction: column; gap: 5px; }
.card .field > label, .card .field legend { font-size: 13px; font-weight: 600; color: #344054; margin: 0; }
.card .field .input { width: 100%; }
.card .field label.check { display: inline-flex; font-weight: 400; color: var(--text); font-size: 14px; }
fieldset.field { border: 0; padding: 0; margin: 0 0 22px; }
.field-hint { margin: 2px 0 0; font-size: 12.5px; color: var(--text-3); }
.field-error { margin: 2px 0 0; font-size: 12.5px; color: var(--error-fg); }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
.check input:disabled + * , .check:has(input:disabled) { color: var(--text-3); cursor: default; }
.check-list { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 6px; }
.form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 16px; }
.card .card-title + .form-grid { margin-top: 2px; }
.card .form-grid + .card-title { border-top: 1px solid var(--border); padding-top: 16px; }

/* permission editor */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 18px; }
.perm-module { border: 1px solid var(--border); border-radius: 8px; padding: 0 14px 12px; margin: 0; background: var(--surface); min-width: 0; }
.perm-module-head { width: 100%; padding: 11px 0 9px; margin: 0 0 6px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 14px; float: left; }
.perm-module-head + * { clear: both; }
.perm-master { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.perm-master input { width: 17px; height: 17px; margin: 0; accent-color: var(--brand); }
.perm-tools { font-size: 13px; color: var(--text-3); margin: 6px 0 4px; }
.perm-items { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.perm-items li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.perm-via, .perm-via-inline { font-size: 12px; color: var(--text-3); }
.perm-via { margin: 6px 0 2px; }
.perm-module[data-off] .perm-items { opacity: .5; }
.form-actions-sticky { position: sticky; bottom: 0; background: var(--bg); padding: 12px 0; margin-top: 4px; }

/* organisation */
.org-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.org-group { margin: 0; }
.org-members { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .details { grid-template-columns: 120px 1fr; }
  .filters input[type="search"] { width: 100%; }
}
a.menu-item, a.menu-item:hover { text-decoration: none; color: var(--text); }

/* ==========================================================================
   Shared module components (Visa, Operation, Accounting)
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-compact { padding: 14px 18px; }
.card-compact .card-title { margin-bottom: 8px; }
.table-caption { margin: 0 0 8px; font-size: 13px; color: var(--text-3); }
.tag-warn { background: #fffaeb; color: #b54708; border-color: #fedf89; }
.locked { color: var(--text-3); display: inline-flex; }
.form-status { font-size: 13.5px; color: var(--text-2); }
.check-columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 20px; }

/* stat figures */
.stat-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; min-width: 200px; display: flex; flex-direction: column; }
.stat-value { font-size: 26px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat-label { font-size: 13px; color: var(--text-3); }

/* bar chart (SVG bars, see visa/_bars.php) */
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bars li { display: grid; grid-template-columns: minmax(120px, 34%) 1fr 48px; align-items: center; gap: 12px; font-size: 13.5px; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.bar { width: 100%; height: 14px; }
.bar rect { fill: var(--brand-600); }
.bar-value { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* searchable dropdown (app.js) */
.combo { position: relative; width: 100%; }
.filters .combo { width: 240px; }
.combo-native { display: none !important; }
.combo-input { width: 100%; cursor: text; }
.combo-list { position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; right: 0; max-height: 300px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow-md); }
.combo-list li { padding: 7px 10px; border-radius: 5px; font-size: 14px; cursor: pointer; }
.combo-list li.is-active { background: var(--brand-50); color: var(--brand); }
.combo-list li[aria-selected="true"] { font-weight: 600; }
.combo-list .combo-empty { color: var(--text-3); cursor: default; }

/* overlays used as dialogs */
.overlay-box-wide { max-width: 1040px; text-align: left; }
.overlay-box-wide h2, .overlay-box-wide > p { text-align: left; }
.overlay-box-wide .overlay-actions { justify-content: flex-end; margin-top: 16px; }
.dup-table-wrap { margin-top: 12px; max-height: 50vh; }
.overlay-icon-success { background: var(--success-bg); color: var(--success-fg); }

/* file groups in entry lists */
.group-row td { padding: 6px 12px; background: #f8fafc; border-left: 4px solid var(--grp, var(--border-strong)); font-size: 13px; }
.group-ref { font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
tr.in-group td:first-child { border-left: 4px solid var(--grp, var(--border-strong)); }
.grp-c0 { --grp: #2a6399; } .grp-c1 { --grp: #0e9384; } .grp-c2 { --grp: #7a5af8; } .grp-c3 { --grp: #dd2590; }
.grp-c4 { --grp: #e04f16; } .grp-c5 { --grp: #4ca30d; } .grp-c6 { --grp: #c4320a; } .grp-c7 { --grp: #0086c9; }
tr.is-duplicate td { background: #fffcf5; }
.file-cell { display: flex; flex-direction: column; font-size: 13px; }
.file-cell .muted { font-size: 12.5px; }
.entries-table td.input-mono, .table td.input-mono { font-size: 13px; }
.dup-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13.5px; }

/* new visa entry */
.entry-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.entry-side { position: sticky; top: 16px; }
.recent-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.chip { border: 1px solid var(--border-strong); background: #fff; border-radius: 999px; padding: 3px 11px; font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; }
.chip:hover { border-color: var(--brand-600); color: var(--brand); }
.member .form-grid { margin-bottom: 14px; }
.price-summary { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 12px; padding: 10px 14px; background: #f8fafc; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; }
.price-summary dt { font-size: 12.5px; color: var(--text-3); }
.price-summary dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.price-summary .is-negative { color: var(--error-fg); }
.guard { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--error-bd); background: var(--error-bg); border-radius: 8px; }
.guard-text { margin: 0 0 10px; color: var(--error-fg); font-size: 13.5px; }
.guard-form { display: flex; gap: 8px; flex-wrap: wrap; }
.guard-form .input { width: 260px; }
.guard-msg { margin: 8px 0 0; font-size: 13px; color: var(--text-2); }
.guard-msg:empty { display: none; }
.overrides summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--brand-600); margin-bottom: 10px; }
.overrides .form-grid { margin-bottom: 0; }
.fav-list { display: grid; gap: 4px; margin-bottom: 14px; }
.fav-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fav-pick { border: 0; background: none; padding: 5px 0; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; text-align: left; }
.fav-pick:hover { color: var(--brand); text-decoration: underline; }
.fav-add { margin-top: 4px; }

@media (max-width: 1100px) {
  .entry-layout { grid-template-columns: 1fr; }
  .entry-side { position: static; }
  .form-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .form-grid-3, .form-grid-4, .split-even { grid-template-columns: 1fr; }
  .filters .combo { width: 100%; }
}

/* ==========================================================================
   Module themes: each module keeps its own colour (old system's identity).
   Setting the brand tokens here re-colours buttons, tabs, links, focus
   rings, dropdowns and charts inside that module only.
   ========================================================================== */
.mod-visa {
  --mod: #522081; --mod-dark: #3f1767; --mod-600: #6a2fa3; --mod-50: #f7f3fc; --mod-100: #efe7fb; --mod-200: #ddd0f2; --mod-ink: #2e1150;
  --brand: #522081; --brand-600: #6a2fa3; --brand-50: #f7f3fc; --brand-100: #efe7fb; --navy-800: #3f1767;
  --ring: 0 0 0 4px rgba(82, 32, 129, .18);
}

/* module navigation inside the top bar (layout + module_bar()) */
.appbar-inner { max-width: 1600px; justify-content: flex-start; }
.appbar-inner > .user-menu { margin-left: auto; }
body[class*="mod-"] .appbar { border-bottom: 3px solid var(--mod, var(--brand)); }
.appbar-module { display: flex; align-items: center; gap: 6px; min-width: 0; padding-left: 16px; border-left: 1px solid var(--border-strong); }
.appbar-module-name { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; margin-right: 4px; border-radius: 9px; font-weight: 750; font-size: 15.5px; color: var(--mod, var(--brand)); text-decoration: none; white-space: nowrap; }
.appbar-module-name:hover { background: var(--mod-50, var(--brand-50)); text-decoration: none; color: var(--mod, var(--brand)); }
.appbar-module-name img { display: block; }
.appbar-tabs { display: flex; align-items: center; gap: 2px; min-width: 0; }
.appbar-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border-radius: 8px; color: var(--text-2); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s; }
.appbar-tabs a .icon { width: 16px; height: 16px; }
.appbar-tabs a:hover { background: var(--mod-50, var(--brand-50)); color: var(--mod, var(--brand)); text-decoration: none; }
.appbar-tabs a.is-active { background: var(--mod-100, var(--brand-100)); color: var(--mod, var(--brand)); }
@media (max-width: 1440px) { body[class*="mod-"] .user-meta { display: none; } body[class*="mod-"] .appbar-inner { padding-left: 20px; padding-right: 20px; } }
@media (max-width: 1260px) { .appbar-tabs a { padding: 8px 8px; font-size: 13px; } .appbar-product { display: none; } }
@media (max-width: 1140px) { .appbar-tabs a:not(.is-active) span { display: none; } }
@media (max-width: 960px) { .appbar-module-name span, .appbar-tabs a span { display: none; } .appbar-module { padding-left: 8px; } .appbar-inner { gap: 8px; } }

/* themed building blocks */
.mod-visa .page-title .icon-badge, .icon-badge { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--mod-100, var(--brand-100)); color: var(--mod, var(--brand)); flex-shrink: 0; }
.icon-badge .icon { width: 19px; height: 19px; }
.card-title .icon { width: 18px; height: 18px; color: var(--mod, var(--brand)); }
.mod-visa .card { border-color: #e9e3f3; }
.mod-visa .table th { background: var(--mod-50); color: var(--mod); border-bottom-color: var(--mod-100); font-weight: 700; }
.mod-visa .table tbody tr:hover td { background: #fcfaff; }
.mod-visa .count { background: var(--mod-100); color: var(--mod); }

/* stat cards with icons */
.stat { flex-direction: row; align-items: center; gap: 14px; min-width: 230px; padding: 16px 18px; box-shadow: var(--shadow-xs); }
.stat-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--mod-100, var(--brand-100)); color: var(--mod, var(--brand)); flex-shrink: 0; }
.stat-icon .icon { width: 22px; height: 22px; }
.stat-body { display: flex; flex-direction: column; }
.stat-green .stat-icon { background: #dcfae6; color: #067647; }
.stat-amber .stat-icon { background: #fef0c7; color: #b54708; }
.stat-red .stat-icon { background: #fee4e2; color: #b42318; }

/* quick action tiles */
.quick-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 20px; }
.quick-action { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; color: var(--text); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.quick-action:hover { border-color: var(--mod-200, var(--brand-100)); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--text); }
.quick-action strong { display: block; font-size: 14.5px; }
.quick-action span.muted { font-size: 12.5px; }

/* bar chart: track + coloured bar */
.bar .track { fill: var(--mod-50, var(--brand-50)); }
.bar .fill { fill: var(--mod, var(--brand-600)); }
.bars li:first-child .bar .fill { fill: var(--mod-dark, var(--brand)); }
.bar-rank { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 6px; background: var(--mod-100, var(--brand-100)); color: var(--mod, var(--brand)); font-size: 11.5px; font-weight: 700; }

/* badges and pills */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.badge .icon { width: 13px; height: 13px; }
.badge-green { background: #ecfdf3; color: #067647; border-color: #abefc6; }
.badge-red { background: #fef3f2; color: #b42318; border-color: #fecdca; }
.badge-amber { background: #fffaeb; color: #b54708; border-color: #fedf89; }
.badge-mod { background: var(--mod-100, var(--brand-100)); color: var(--mod, var(--brand)); border-color: var(--mod-200, var(--brand-100)); }
.badge-grey { background: #f2f4f7; color: #475467; border-color: #e4e7ec; }
.cur { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 5px; font-size: 11px; font-weight: 700; letter-spacing: .02em; background: #eef2f6; color: #475467; vertical-align: 1px; }
.cur-USD { background: #e6f4ea; color: #1b7a3d; }
.cur-AED { background: #fdf0dc; color: #a15c07; }
.group-pill { display: inline-flex; align-items: center; gap: 7px; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: color-mix(in srgb, var(--grp) 12%, #fff); color: color-mix(in srgb, var(--grp) 75%, #000); border: 1px solid color-mix(in srgb, var(--grp) 30%, #fff); }
.group-pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--grp); }
.group-row td { background: color-mix(in srgb, var(--grp, #98a2b3) 6%, #fff) !important; }

/* icon buttons in tables */
.icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border-strong); background: #fff; color: var(--mod, var(--brand)); cursor: pointer; text-decoration: none; transition: background-color .15s, border-color .15s; vertical-align: middle; }
.icon-btn .icon { width: 16px; height: 16px; }
.icon-btn:hover { background: var(--mod-50, var(--brand-50)); border-color: var(--mod-200, var(--brand-100)); color: var(--mod, var(--brand)); text-decoration: none; }
.icon-btn-danger { color: #d92d20; }
.icon-btn-danger:hover { background: #fef3f2; border-color: #fecdca; color: #b42318; }
.icon-btn-locked { color: #98a2b3; background: #f9fafb; cursor: default; }
.icon-btn-locked:hover { background: #f9fafb; border-color: var(--border-strong); color: #98a2b3; }
.row-actions { display: inline-flex; gap: 6px; align-items: center; }
.row-actions form { margin: 0; }

/* empty state */
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 16px; text-align: center; color: var(--text-3); }
.empty-icon { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--mod-50, var(--brand-50)); color: var(--mod, var(--brand)); }
.empty-icon .icon { width: 24px; height: 24px; }
.empty strong { color: var(--text); font-size: 15px; }

/* warning panel (duplicates) */
.card-warn { border-color: #fedf89 !important; background: #fffcf0; }
.card-warn .card-title { color: #93370d; }
.card-warn .card-title .icon { color: #dc6803; }
.card-ok .card-title .icon { color: #12b76a; }

/* toasts */
.toast-stack { position: fixed; right: 20px; bottom: 20px; z-index: 1100; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.toast { display: flex; align-items: center; gap: 10px; max-width: 420px; padding: 11px 16px; border-radius: 10px; background: var(--navy-900); color: #fff; font-size: 14px; box-shadow: var(--shadow-lg); animation: pop .18s var(--ease) both; }
.toast .icon { width: 18px; height: 18px; flex-shrink: 0; }
.toast-success { background: #067647; }
.toast-error { background: #b42318; }
.toast-warn { background: #b54708; }
.toast-info { background: var(--mod, var(--brand)); }

/* new entry form, themed */
.section-label { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.section-label h2 { margin: 0; font-size: 15.5px; font-weight: 700; }
.section-label p { margin: 0; font-size: 13px; color: var(--text-3); }
.member { border-top: 3px solid var(--mod, var(--brand)); }
.member-num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mod, var(--brand)); color: #fff; font-size: 13px; font-weight: 700; }
.member .card-title { gap: 10px; }
.member-head { background: var(--mod-100, var(--brand-100)); color: var(--mod, var(--brand)); border-color: var(--mod-200, var(--brand-100)); }
.price-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0; background: none; border: 0; }
.price-summary > div { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fcfcfd; }
.price-summary .ps-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--mod-50, var(--brand-50)); color: var(--mod, var(--brand)); flex-shrink: 0; }
.price-summary .ps-icon .icon { width: 17px; height: 17px; }
.price-summary .ps-margin .ps-icon { background: #ecfdf3; color: #067647; }
.price-summary .ps-margin.is-negative { border-color: #fecdca; background: #fef3f2; }
.price-summary .ps-margin.is-negative .ps-icon { background: #fee4e2; color: #b42318; }
.price-summary .ps-margin.is-negative dd { color: #b42318; }
.price-summary .ps-margin.is-positive dd { color: #067647; }
.chip { background: var(--mod-50, #fff); border-color: var(--mod-200, var(--border-strong)); color: var(--mod, var(--text-2)); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.chip .icon { width: 13px; height: 13px; }
.chip:hover { background: var(--mod-100, var(--brand-50)); }
.fav-item { padding: 6px 8px; border-radius: 8px; }
.fav-item:hover { background: var(--mod-50, var(--brand-50)); }
.fav-pick { display: inline-flex; align-items: center; gap: 8px; }
.fav-star { width: 16px; height: 16px; color: #f5b800; fill: #f5b800; }
.creator-check { padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; }
.creator-check:has(input:checked) { border-color: var(--mod-200, var(--brand-100)); background: var(--mod-50, var(--brand-50)); }
.creator-check .avatar { width: 28px; height: 28px; font-size: 11px; }
.form-actions-sticky { border-top: 1px solid var(--border); }
.btn .icon { width: 17px; height: 17px; }

@media (max-width: 760px) {
  .price-summary { grid-template-columns: 1fr; }
}
.mod-visa .count, .count-pill { padding: 1px 10px; border-radius: 999px; font-size: 13px; }
.stat-value-sm { font-size: 17px; line-height: 1.35; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guard-text { display: flex; gap: 8px; align-items: flex-start; }
.guard-text .icon { flex-shrink: 0; margin-top: 2px; }
.dup-title-icon { width: 20px; height: 20px; color: #dc6803; vertical-align: -3px; }
.member-remove .icon { width: 15px; height: 15px; }
.overrides summary .icon { vertical-align: -2px; }
.icon-xs { width: 13px; height: 13px; vertical-align: -2px; }
.traveller { font-weight: 600; }
.rej-by { font-size: 12.5px; margin-top: 3px; }

/* filter bar on list pages: one tidy row */
.mod-visa .filters { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.mod-visa .filters input[type="search"] { width: 250px; }
.mod-visa .filters .combo { width: 200px; }

/* ---- one-screen forms (Visa new entry): dense rows, no scrolling ---- */
.page-title-compact { margin: 18px 0 12px; }
.card-tight { padding: 14px 16px; margin-bottom: 12px; }
.card-tight .card-head { margin-bottom: 8px; }
.card-tight .card-title { margin-bottom: 8px; }
.card-tight .card-head .card-title { margin: 0; }
.entry-layout { grid-template-columns: minmax(0, 1fr) 270px; gap: 14px; }
.entry-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
.entry-top .field label .icon { color: var(--mod, var(--brand)); }
.card-tight .recent-chips { margin: 8px 0 0; }
.recent-chips:empty { display: none; }
.trav-grid { display: grid; grid-template-columns: 38px minmax(150px, 1.35fr) minmax(110px, .9fr) minmax(150px, 1.4fr) 120px 120px 100px 76px; gap: 10px; align-items: center; }
.trav-labels { padding: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--text-3); border-bottom: 1px solid var(--border); }
.trav-labels .num { text-align: right; }
.member { border-top: 0; }
.trav-row { padding: 8px 0; }
.member + .member .trav-row { border-top: 1px dashed var(--border); }
.trav-row .input { width: 100%; height: 36px; }
.member-num-cell { display: inline-flex; align-items: center; gap: 3px; }
.member-num { width: 26px; height: 26px; font-size: 12.5px; }
.member-head { display: inline-flex; color: #f5b800; }
.member-head .icon { fill: #f5b800; }
.price-cell { text-align: right; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.25; }
.ps-margin.is-positive { color: #067647; }
.ps-margin.is-negative { color: #b42318; }
.trav-row .row-actions { justify-content: flex-end; }
.icon-btn.is-on { background: var(--mod-100, var(--brand-100)); border-color: var(--mod-200, var(--brand-100)); }
.trav-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px 48px; padding: 8px 10px; border-radius: 8px; background: var(--mod-50, var(--brand-50)); }
.trav-extra .input { width: 150px; }
.trav-extra-label { font-size: 12.5px; font-weight: 600; color: var(--mod, var(--brand)); display: inline-flex; align-items: center; gap: 4px; }
.trav-extra.guard { background: var(--error-bg); border: 1px solid var(--error-bd); display: block; }
.trav-extra.guard[hidden] { display: none; }
.trav-extra.guard .guard-text { margin: 0 0 6px; font-size: 13px; }
.trav-extra.guard .guard-form { align-items: center; }
.trav-extra.guard .input { width: 230px; }
.guard-msg { margin: 0; }
.creator-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.creator-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; margin-right: 6px; }
.creator-label .icon { color: var(--mod, var(--brand)); }
.creator-check { padding: 4px 10px 4px 6px; border-radius: 999px; font-size: 13.5px; gap: 6px; }
.creator-check .avatar { width: 24px; height: 24px; font-size: 10px; }
.fav-list { margin-bottom: 8px; gap: 0; }
.fav-item { padding: 3px 6px; }
.fav-pick { padding: 3px 0; font-size: 13.5px; }
.fav-add { margin: 0; }
@media (max-width: 1240px) {
  .trav-grid { grid-template-columns: 34px minmax(110px, 1fr) minmax(100px, 1fr) minmax(120px, 1.3fr) 104px 104px 88px 72px; gap: 8px; }
}
@media (max-width: 1100px) {
  .trav-labels { display: none; }
  .trav-grid { grid-template-columns: 34px 1fr 1fr; }
  .trav-row .price-cell { text-align: left; }
  .trav-extra { margin-left: 0; }
}
@media (max-width: 760px) { .entry-top { grid-template-columns: 1fr; } }
.dense-grid { gap: 12px 16px; margin-bottom: 14px; }
.form-grid .span-2 { grid-column: span 2; }
.card-tight .form-actions { padding-top: 12px; }
.field label .icon { color: var(--mod, var(--brand)); }
@media (max-width: 900px) { .form-grid .span-2 { grid-column: auto; } }

.label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; min-height: 22px; }
.card .field .label-row > label { margin: 0; }
.label-row .recent-chips { margin: 0; flex-wrap: nowrap; overflow: hidden; }
.label-row .chip { padding: 1px 9px; font-size: 12px; white-space: nowrap; }
.trav-extra.guard { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 6px 10px; }
.trav-extra.guard .guard-text { margin: 0; flex: 1 1 360px; }
.trav-extra.guard .guard-form { flex: 0 0 auto; }
.trav-extra.guard .input { width: 210px; }
.breadcrumb { margin-top: 16px; }
body[class*="mod-"] .page { padding-top: 18px; }
body[class*="mod-"] .page-alerts { padding-top: 0; margin-bottom: 4px; }
.page-title-compact { margin: 0 0 12px; }
body[class*="mod-"] .breadcrumb { margin-top: 0; }
.mod-visa .filters input[type="search"] { width: 220px; }
.mod-visa .filters .combo { width: 180px; }
.mod-visa .filters select.input { max-width: 170px; }

/* ==========================================================================
   Visa look, revised 2026-10-09: depth and structure instead of flat white.
   Tinted page, panels with coloured header strips, a real table header for
   the traveller rows, tinted inputs, coloured price chips. No decorative
   icon squares.
   ========================================================================== */
body.mod-visa { background: #f1eef7; }
.mod-title { margin: 0 0 14px; font-size: 25px; font-weight: 750; color: var(--mod, var(--brand)); letter-spacing: -.01em; }
.page-title.mod-title { margin: 0; }
.title-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.title-bar .mod-title { margin: 0; }

/* panels with a header strip */
.panel-box { background: #fff; border: 1px solid #dfd5ee; border-radius: 10px; margin-bottom: 14px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(46, 17, 80, .06), 0 6px 16px -10px rgba(46, 17, 80, .22); }
.panel-box-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 16px;
  background: linear-gradient(180deg, #f7f2fd, #efe6fa); border-bottom: 1px solid #dfd5ee; }
.panel-box-head h2 { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--mod-ink, var(--text)); }
.panel-box-meta { font-size: 13px; font-weight: 600; color: var(--mod, var(--text-3)); }
.panel-box-body { padding: 14px 16px; }
.split > .panel-box { margin-bottom: 0; }

/* dashboard */
.today-card { display: inline-flex; align-items: baseline; gap: 12px; margin-bottom: 16px; padding: 16px 24px; background: #fff; border: 1px solid #dfd5ee; border-left: 5px solid var(--mod, var(--brand)); border-radius: 10px; box-shadow: 0 6px 16px -10px rgba(46, 17, 80, .22); }
.today-num { font-size: 34px; font-weight: 800; color: var(--mod, var(--brand)); line-height: 1; font-variant-numeric: tabular-nums; }
.today-label { font-size: 15px; color: var(--text-2); }

/* inputs and buttons inside the module */
.mod-visa .input { background: #fcfbfe; border-color: #d6cbe6; }
.mod-visa .input:hover { border-color: #bfaedb; }
.mod-visa .input:focus { background: #fff; border-color: var(--mod); }
.mod-visa .input:disabled { background: #f3f0f8; }
.mod-visa .field > label, .mod-visa .card .field > label { color: var(--mod-ink); }
.mod-visa .btn-primary { background: var(--mod); border-color: var(--mod-dark); color: #fff; box-shadow: 0 2px 6px -2px rgba(82, 32, 129, .55); }
.mod-visa .btn-primary:hover { background: var(--mod-dark); color: #fff; }
.btn-save { padding: 11px 22px; font-size: 15px; }
.btn-mod-outline { color: var(--mod, var(--brand)); border-color: var(--mod-200, var(--border-strong)); background: #fff; }
.btn-mod-outline:hover { background: var(--mod-50, var(--brand-50)); color: var(--mod, var(--brand)); }
.mod-visa .card { border-color: #dfd5ee; box-shadow: 0 6px 16px -12px rgba(46, 17, 80, .25); }
.mod-visa .table-wrap { border-color: #dfd5ee; box-shadow: 0 6px 16px -12px rgba(46, 17, 80, .25); }
.mod-visa .filters { border-color: #dfd5ee; }

/* entry: top row + recent suppliers in the header strip */
.panel-box-body.entry-top { display: grid; }
.recent-wrap { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.recent-wrap:has(.recent-chips[hidden]), .recent-wrap:has(.recent-chips:empty) { display: none; }
.recent-label { font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.recent-wrap .recent-chips { margin: 0; flex-wrap: nowrap; overflow: hidden; }
.recent-wrap .chip { background: #fff; padding: 2px 10px; font-size: 12.5px; white-space: nowrap; }

/* traveller table */
.trav-table .trav-grid { padding-left: 16px; padding-right: 16px; }
.trav-table .trav-labels { padding-top: 9px; padding-bottom: 9px; background: var(--mod, var(--brand)); color: #fff; border-bottom: 0; font-size: 12.5px; font-weight: 600; }
.trav-table .member:nth-child(even) { background: #faf7fd; }
.trav-table .member + .member .trav-row { border-top: 1px solid #ece6f4; }
.trav-table .trav-row { padding-top: 9px; padding-bottom: 9px; }
.trav-table .trav-extra { margin: 0 16px 10px 64px; }
.member-num { background: var(--mod-dark, var(--brand)); }
.pchip { display: inline-block; min-width: 92px; padding: 5px 9px; border-radius: 7px; text-align: right; font-size: 13px; font-weight: 700; background: #f2f4f7; color: #344054; border: 1px solid #e4e7ec; }
.pchip-ag { background: var(--mod-50, #f5f3ff); color: var(--mod, var(--brand)); border-color: var(--mod-200, #ddd); }
.pchip.ps-margin { background: #f9fafb; color: var(--text-3); }
.pchip.ps-margin.is-positive { background: #ecfdf3; color: #067647; border-color: #abefc6; }
.pchip.ps-margin.is-negative { background: #fef3f2; color: #b42318; border-color: #fecdca; }
.trav-extra { background: #f6f1fc; border: 1px solid #e6dcf3; }
.trav-extra-label { color: var(--mod-ink, var(--brand)); }

/* creators + favourites */
.panel-box-body.creator-row { padding: 12px 16px; }
.creator-check { background: #fff; border-color: #ddd3ea; }
.entry-side .panel-box-body { padding: 10px 12px 12px; }
.entry-side .fav-list { margin-bottom: 10px; }
.mod-visa .form-status { font-weight: 600; color: #b42318; }
.panel-box-head { background: #f4eefb; }
.trav-extra select.input { width: 130px; }
.panel-box { margin-bottom: 12px; }
.mod-visa .title-bar { margin-bottom: 12px; }
.mod-visa .table th { background: var(--mod); color: #fff; border-bottom-color: var(--mod-dark); }
.mod-visa .table-wrap .table thead th:first-child { border-top-left-radius: 7px; }
.mod-visa .table-wrap .table thead th:last-child { border-top-right-radius: 7px; }
.mod-visa .overlay-box .table th { background: var(--mod-50); color: var(--mod); border-bottom-color: var(--mod-100); }

/* ---- revision: dropdowns must never be clipped by panels; traveller rows + price tiles ---- */
.panel-box { overflow: visible; }
.panel-box-head { border-radius: 9px 9px 0 0; }
.panel-box > :last-child { border-radius: 0 0 9px 9px; }
.trav-table .trav-labels { border-radius: 0; }
.trav-table .trav-grid { grid-template-columns: 38px minmax(150px, 1.15fr) minmax(130px, 1fr) minmax(180px, 1.6fr) 76px; }
.trav-table .trav-row { padding-bottom: 6px; }
.trav-prices { margin: 0 16px 10px 64px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.trav-prices > div { padding: 7px 12px; background: #fff; border-color: #e6dcf3; }
.trav-prices dt { font-size: 12px; color: var(--text-3); }
.trav-prices dd { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.trav-prices .ps-icon { width: 32px; height: 32px; }
.trav-table .member:nth-child(even) .trav-prices > div { background: #fff; }
@media (max-width: 1100px) { .trav-table .trav-grid { grid-template-columns: 34px 1fr 1fr; } .trav-prices { margin-left: 16px; grid-template-columns: 1fr; } }
.trav-prices { gap: 8px; margin-bottom: 8px; }
.trav-prices > div { padding: 4px 10px; gap: 9px; }
.trav-prices .ps-icon { width: 28px; height: 28px; border-radius: 8px; }
.trav-prices .ps-icon .icon { width: 15px; height: 15px; }
.trav-prices dt { font-size: 11.5px; line-height: 1.3; }
.trav-prices dd { font-size: 14px; line-height: 1.3; }
.trav-table .trav-row { padding-top: 8px; padding-bottom: 5px; }

/* ---- New Visa Entry, layout v4: form left, sticky summary column right ---- */
.mod-visa .mod-title { margin-bottom: 16px; }
.entry-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.entry-side { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 14px; }
.entry-side .panel-box { margin-bottom: 0; }
.entry-main .panel-box { margin-bottom: 16px; }
.panel-box-body.entry-top { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.6fr) minmax(150px, .8fr); gap: 16px; padding: 16px 18px 18px; }

/* travellers */
.trav-table .trav-grid { grid-template-columns: 38px minmax(150px, 1.1fr) minmax(130px, 1fr) minmax(180px, 1.5fr); gap: 12px; padding-left: 18px; padding-right: 18px; }
.trav-table .trav-row { padding-top: 12px; padding-bottom: 8px; }
.trav-sub { display: flex; align-items: center; gap: 12px; margin: 0 18px 12px 68px; }
.trav-sub .trav-prices { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; flex: 1 1 auto; }
.trav-sub .trav-prices > div { flex: 0 1 190px; min-width: 160px; padding: 5px 12px 5px 6px; border-radius: 9px; }
.trav-sub .row-actions { margin-left: auto; }
.trav-table .trav-extra { margin: 0 18px 12px 68px; }
.trav-table .member + .member .trav-row { border-top: 1px solid #e6dcf3; }

/* summary */
.summary-box .panel-box-body { padding: 6px 16px 16px; }
.sum-list { margin: 0 0 14px; }
.sum-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed #e2d9ee; }
.sum-list dt { font-size: 13.5px; color: var(--text-2); }
.sum-list dd { margin: 0; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.sum-list .sum-margin { border-bottom: 0; padding-top: 11px; }
.sum-list .sum-margin dt { font-weight: 700; color: var(--text); }
.sum-list .sum-margin dd { font-size: 19px; }
.sum-list .sum-margin.is-positive dd { color: #067647; }
.sum-list .sum-margin.is-negative dd { color: #b42318; }
.summary-box .btn-save { width: 100%; }
.summary-box .form-status { margin: 10px 0 0; font-size: 13px; text-align: center; }
.summary-box .form-status:empty { display: none; }

/* file creators: vertical list */
.panel-box-body.creator-list { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; }
.creator-list .creator-check { width: 100%; border-radius: 9px; padding: 6px 10px; }
@media (max-width: 1240px) { .entry-layout { grid-template-columns: minmax(0, 1fr) 280px; } }
@media (max-width: 1100px) { .entry-layout { grid-template-columns: 1fr; } .entry-side { position: static; } .trav-sub, .trav-table .trav-extra { margin-left: 18px; } }

/* favourites menu next to the Agency label */
.entry-top .label-row { margin-bottom: 6px; min-height: 24px; }
.fav-menu { position: relative; }
.fav-menu summary { list-style: none; }
.fav-menu summary::-webkit-details-marker { display: none; }
.fav-toggle { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border: 1px solid var(--mod-200, var(--border-strong)); border-radius: 999px; background: #fff; color: var(--mod, var(--brand)); font-size: 12.5px; font-weight: 600; cursor: pointer; user-select: none; }
.fav-toggle:hover, .fav-menu[open] .fav-toggle { background: var(--mod-50, var(--brand-50)); }
.fav-toggle .fav-star { width: 13px; height: 13px; }
.fav-count { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--mod-100, var(--brand-100)); font-size: 11.5px; text-align: center; }
.fav-count:empty { display: none; }
.fav-pop { position: absolute; z-index: 60; right: 0; top: calc(100% + 6px); width: 300px; max-height: 360px; overflow-y: auto; padding: 8px; background: #fff; border: 1px solid #dfd5ee; border-radius: 10px; box-shadow: var(--shadow-lg); }
.fav-pop .fav-list { margin: 0 0 8px; display: flex; flex-direction: column; gap: 2px; }
.fav-pop .fav-item { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 4px 2px 8px; border-radius: 7px; }
.fav-pop .fav-item:hover { background: var(--mod-50, var(--brand-50)); }
.fav-pop .fav-pick { flex: 1; display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13.5px; text-align: left; }
.fav-del { border: 0; background: none; width: 26px; height: 26px; border-radius: 6px; color: #98a2b3; font-size: 18px; line-height: 1; cursor: pointer; }
.fav-del:hover { background: #fef3f2; color: #b42318; }
.fav-empty { margin: 4px 4px 10px; font-size: 13px; }
.panel-box .field { display: flex; flex-direction: column; }
.panel-box .field .input, .panel-box .field .combo { width: 100%; }
.entry-top .field > label, .entry-top .label-row { display: flex; align-items: center; min-height: 26px; margin: 0 0 6px; }
.entry-top .label-row { justify-content: space-between; }
.entry-top .label-row > label { margin: 0; }


/* other Visa pages: purple only where the old pages used it */
.mod-title { font-weight: 600; }
.mod-visa .table th { background: #f2f0fa; color: var(--mod); border-bottom-color: #e3dcef; font-weight: 600; }
.panel-box-head { background: #fff; border-bottom: 1px solid #ece7f3; }
.panel-box-head h2 { font-size: 16px; font-weight: 600; color: var(--mod); }
.panel-box-meta { color: var(--text-3); font-weight: 500; }
.today-card { border-left-width: 1px; }
.today-num { font-weight: 700; }

/* ==========================================================================
   New Visa Entry (v8, 2026-10-09): the OLD form, lightly polished.
   Same blocks, order and labels as modules/visa/entry/index.php. No icons
   in the form, no decorative coloured edges. Purple only where the old page
   had it: page title, card titles, price bar text. Compact enough to fit
   one screen.
   ========================================================================== */
.visa-entry .ve-title { margin: 0 0 14px; font-size: 26px; font-weight: 600; color: var(--mod); }
.ve-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 24px; align-items: start; }
.ve-card { background: #fff; border: 1px solid #e4e0ea; border-radius: 12px; padding: 18px 20px; box-shadow: 0 4px 14px rgba(40, 24, 64, .06); }
.ve-subcard { background: #fff; border: 1px solid #e7e3ed; border-radius: 10px; padding: 14px 16px; margin-top: 14px; }
.ve-subtitle { margin: 0 0 10px; font-size: 16px; font-weight: 600; color: var(--mod); }
.ve-row { display: grid; gap: 10px 14px; }
.ve-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.visa-entry .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.visa-entry .field > label { font-size: 13.5px; font-weight: 500; color: #3d3d4e; margin: 0; }
.visa-entry .input { width: 100%; height: 38px; background: #fff; border: 1px solid #cfd2da; border-radius: 7px; font-size: 14px; }
.visa-entry .input:hover { border-color: #b4b8c3; }
.visa-entry .input:focus { border-color: var(--mod); box-shadow: 0 0 0 3px rgba(82, 32, 129, .13); }
.visa-entry .combo { width: 100%; }

/* recent suppliers (like the old page) */
.ve-recent { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 24px; margin: -2px 0 10px; font-size: 12.5px; color: #8a8a99; }
.ve-recent .recent-chips { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ve-recent-label { display: none; }
.ve-recent-none { display: none; }
.ve-recent:has(.recent-chips[hidden]) .ve-recent-none { display: inline; }
.visa-entry .chip { display: inline-block; padding: 3px 11px; border-radius: 999px; border: 1px solid #ddd5ea; background: #f6f2fb; color: #4b3a66; font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.visa-entry .chip:hover { background: #ece4f8; border-color: #cbbbe3; }

/* member cards */
.ve-member-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ve-member-head .ve-subtitle { margin: 0; display: flex; align-items: center; gap: 8px; }
.ve-head-badge { padding: 1px 8px; border-radius: 6px; background: #efefef; color: #555; font-size: 12px; font-weight: 500; }
.ve-member-tools { display: inline-flex; align-items: center; gap: 14px; }
.ve-member-tools .link-btn { font-size: 13px; }
.ve-pricebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 10px 14px; border-radius: 8px; background: #f3f0f8; border: 1px solid #e3dcee; font-size: 14px; color: var(--mod); }
.ve-pricebar strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.ve-pricebar .ve-margin { color: #6b6b7b; }
.ve-pricebar .ve-margin strong { color: #6b6b7b; }
.ve-pricebar.is-positive .ve-margin strong { color: #067647; }
.ve-pricebar.is-negative .ve-margin strong { color: #b42318; }
.ve-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: #faf8fc; border: 1px solid #e7e3ed; }
.ve-strip[hidden] { display: none; }
.ve-strip-label { font-size: 13.5px; font-weight: 600; color: var(--mod); margin-right: 4px; }
.ve-strip .input { flex: 1 1 120px; width: auto; height: 34px; }
.ve-strip select.input { flex: 0 1 130px; }
.ve-guard { background: #fef3f2; border-color: #fecdca; }
.ve-guard .guard-text { flex: 1 1 320px; margin: 0; color: #b42318; font-size: 13px; }
.ve-guard .guard-text .icon { display: none; }
.ve-guard .guard-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ve-guard .input { flex: 0 0 200px; -webkit-text-security: disc; }
.ve-guard .guard-msg { font-size: 13px; color: #555; }

/* file creator: two per row, like the old table */
.ve-creators { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid #e7e3ed; border-radius: 8px; overflow: hidden; }
.ve-creator { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 14px; cursor: pointer; border-bottom: 1px solid #efedf3; }
.ve-creator:nth-child(odd) { border-right: 1px solid #efedf3; }
.ve-creator:hover { background: #faf8fc; }
.ve-creator input { width: 16px; height: 16px; margin: 0; accent-color: var(--mod); }
.ve-creator:has(input:checked) { background: #f6f2fb; }

.ve-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.ve-actions .btn { box-shadow: none; }
.ve-actions .btn-primary { background: var(--mod); border-color: var(--mod); color: #fff; padding: 9px 26px; }
.ve-actions .btn-primary:hover { background: var(--mod-dark); }
.ve-actions .form-status { color: #b42318; font-size: 13.5px; }

/* top agencies */
.ve-side .ve-subtitle { margin-bottom: 10px; }
.ve-favs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.ve-fav { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px 7px 12px; border: 1px solid #ece8f2; border-radius: 8px; background: #fcfbfd; }
.ve-fav:hover { background: #f6f2fb; }
.ve-fav-pick { flex: 1; border: 0; background: none; padding: 0; font: inherit; font-size: 14px; color: #222; text-align: left; cursor: pointer; }
.ve-fav-pick:hover { color: var(--mod); }
.ve-fav-star { border: 0; background: none; padding: 2px; cursor: pointer; display: inline-flex; }
.ve-fav-star .fav-star { width: 18px; height: 18px; color: #f5c518; fill: #f5c518; }
.ve-fav-star:hover .fav-star { color: #d0d5dd; fill: #d0d5dd; }
.ve-empty { margin: 0 0 4px; font-size: 13px; color: #8a8a99; }
.ve-fav-search { margin-bottom: 6px; }
.ve-fav-picker { max-height: 260px; overflow-y: auto; border: 1px solid #ece8f2; border-radius: 8px; background: #fff; padding: 4px; }
.ve-fav-opt { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 6px; font-size: 13.5px; cursor: pointer; }
.ve-fav-opt:hover { background: #faf8fc; }
.ve-fav-opt:has(input:checked) { background: #f6f2fb; color: var(--mod); font-weight: 600; }
.ve-fav-opt input { width: 16px; height: 16px; margin: 0; flex-shrink: 0; accent-color: var(--mod); }
.ve-fav-picker .ve-fav-none { padding: 6px 8px; margin: 0; }

/* saved dialog: one row per traveller with its entry ID */
.ve-saved { max-width: 460px; padding: 30px 28px 24px; }
.ve-saved-icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: #ecfdf3; box-shadow: 0 0 0 8px #f6fef9; }
.ve-saved-icon svg { width: 28px; height: 28px; fill: none; stroke: #079455; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ve-saved .ve-saved-sub { margin-bottom: 18px; }
.ve-saved-list { list-style: none; margin: 0 0 22px; padding: 0; max-height: 300px; overflow-y: auto; text-align: left; border: 1px solid #ece8f2; border-radius: 10px; }
.ve-saved-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.ve-saved-row + .ve-saved-row { border-top: 1px solid #f0edf4; }
.ve-saved-id { flex-shrink: 0; min-width: 76px; padding: 5px 10px; border-radius: 7px; background: var(--mod-50, #f7f3fc); color: var(--mod, #522081); font-size: 16px; font-weight: 750; text-align: center; font-variant-numeric: tabular-nums; user-select: all; }
.ve-saved-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ve-saved-who strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-saved-who small { font-size: 12.5px; color: #6b6b7b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-saved .overlay-actions .btn { min-width: 120px; }

@media (max-width: 1100px) { .ve-layout { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .ve-row-3, .ve-creators { grid-template-columns: 1fr; } .ve-creator:nth-child(odd) { border-right: 0; } }
.ve-dialog-title { color: var(--mod); }
.ve-saved-title { color: #067647; }
.visa-entry ~ .overlay .btn-primary, .mod-visa .overlay .btn-primary { background: var(--mod); border-color: var(--mod); color: #fff; box-shadow: none; }
.visa-entry .ve-pricebar.ps-margin, .visa-entry .ve-pricebar.ps-margin.is-positive, .visa-entry .ve-pricebar.ps-margin.is-negative { color: var(--mod); }
.visa-entry .ve-strip select.input { flex: 0 1 150px; min-width: 120px; }
/* file creator: three per row, initials circle next to each name */
.ve-creators { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border: 0; border-radius: 0; overflow: visible; }
.ve-creator { border: 1px solid #e7e3ed; border-radius: 9px; padding: 7px 12px; background: #fff; }
.ve-creator:nth-child(odd) { border-right: 1px solid #e7e3ed; }
.ve-creator:has(input:checked) { background: #f6f2fb; border-color: #d9cbec; }
.ve-initials { display: inline-grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--mod); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
@media (max-width: 900px) { .ve-creators { grid-template-columns: 1fr; } }

/* ==========================================================================
   Top bar + footer in a strong colour that follows the module, like the
   old system: navy outside modules, the module's colour inside it.
   ========================================================================== */
body.app { --bar: #163b5c; --bar-dark: #0f2c4a; }
body.mod-visa { --bar: #522081; --bar-dark: #3a155d; }

.appbar { background: var(--bar); border-bottom: 0; backdrop-filter: none; box-shadow: 0 2px 12px rgba(10, 10, 30, .18); }
body[class*="mod-"] .appbar { border-bottom: 0; }
.appbar-brand img { background: #fff; padding: 4px 8px; border-radius: 9px; height: 42px; }
.appbar-product { color: #fff; border-left-color: rgba(255, 255, 255, .28); }
.appbar-module { border-left-color: rgba(255, 255, 255, .28); }
.appbar-module-name { color: #fff; }
.appbar-module-name img { background: #fff; border-radius: 7px; padding: 2px; width: 30px; height: 30px; }
.appbar-module-name:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.appbar-tabs a { color: rgba(255, 255, 255, .86); }
.appbar-tabs a:hover { background: rgba(255, 255, 255, .13); color: #fff; }
.appbar-tabs a.is-active { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: inset 0 -2px 0 #fff; }
.user-chip:hover, .user-menu[open] .user-chip { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); }
.appbar .user-name { color: #fff; }
.appbar .user-role { color: rgba(255, 255, 255, .72); }
.appbar .user-chevron { color: rgba(255, 255, 255, .8); }
.appbar .avatar { background: #fff; color: var(--bar); }

/* proper footer */
.app-footer { margin-top: 28px; padding: 0; background: var(--bar-dark); color: rgba(255, 255, 255, .75); font-size: 13px; text-align: left; }
.app-footer-inner { max-width: 1600px; margin: 0 auto; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; }
@media (max-width: 760px) { .app-footer-inner { padding: 14px 16px; justify-content: center; text-align: center; } }
.appbar .menu .avatar { background: var(--bar); color: #fff; }
/* top bar tabs: titles only; active = soft highlight, no underline */
.appbar-tabs a { padding: 8px 13px; font-size: 14px; }
.appbar-tabs a.is-active { background: rgba(255, 255, 255, .2); box-shadow: none; }
.appbar-tabs a:hover { background: rgba(255, 255, 255, .14); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
@media (max-width: 1140px) { .appbar-tabs { overflow-x: auto; scrollbar-width: none; } .appbar-tabs a { padding: 8px 9px; font-size: 13px; } }

/* short footer: logo + name, copyright, "Developed by" centred below */
.app-footer { margin-top: 32px; background: var(--bar-dark); color: rgba(255, 255, 255, .75); font-size: 13.5px; text-align: left; padding: 0; }
.footer-row { max-width: 1440px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; }
.footer-brand { display: inline-flex; align-items: center; gap: 12px; }
.footer-brand img { display: block; height: 36px; width: auto; background: #fff; padding: 4px 8px; border-radius: 8px; }
.footer-name { color: #fff; font-weight: 600; font-size: 14.5px; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding: 9px 16px; text-align: center; font-size: 12.5px; color: rgba(255, 255, 255, .65); }
@media (max-width: 600px) { .footer-row { justify-content: center; text-align: center; padding: 14px 16px; } }

/* ---- date picker for input[data-date] (app.js) ---- */
.datepick { position: fixed; z-index: 60; width: 262px; padding: 10px; background: #fff; border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 12px 28px -10px rgba(15, 23, 42, .35); font-size: 13px; }
.datepick[hidden] { display: none; }
.datepick-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-weight: 700; color: var(--text); }
.datepick-head button { width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; font-size: 20px; line-height: 1; color: var(--mod, var(--brand)); cursor: pointer; }
.datepick-head button:hover { background: var(--mod-50, var(--brand-50)); }
.datepick-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.datepick-w { padding: 4px 0; font-size: 11px; font-weight: 700; color: var(--text-3, #64748b); }
.datepick-d { height: 32px; border: 0; border-radius: 8px; background: none; font: inherit; color: var(--text); cursor: pointer; }
.datepick-d:hover { background: var(--mod-50, var(--brand-50)); }
.datepick-d.is-today { font-weight: 800; color: var(--mod, var(--brand)); }
.datepick-d.is-picked { background: var(--mod, var(--brand)); color: #fff; }
.datepick-d:disabled { color: #cbd5e1; background: none; cursor: default; }
/* Module icons (2026-10-16): white glyphs straight on the coloured tile, no white square */
.module-icon img { width: 36px; height: 36px; }
/* restricted / coming soon (user picked 2026-10-16): the module's own tile, faded, with a lock - same shape as an open tile */
.module-card.is-locked, .module-card.is-soon { min-height: 78px; background: var(--accent); border-color: transparent; color: #fff; opacity: .42; filter: saturate(.55); box-shadow: none; cursor: not-allowed; }
.module-card.is-locked .module-title, .module-card.is-soon .module-title { color: #fff; font-size: 17px; }
.module-card.is-locked .module-icon img, .module-card.is-soon .module-icon img { filter: none; opacity: 1; }
.module-card.is-locked .pill-locked, .module-card.is-soon .pill-soon { background: rgba(255, 255, 255, .18); color: #fff; }
.module-card.is-open .module-icon, .module-card.is-locked .module-icon, .module-card.is-soon .module-icon { background: none; box-shadow: none; }

/* Two-step sign-in code page (2026-10-16) */
.otp-setup { display: flex; align-items: center; gap: 18px; margin: 0 0 22px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: #f8fafc; }
.otp-qr { flex-shrink: 0; width: 150px; height: 150px; border-radius: 10px; background: #fff; }
.otp-key { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-2); }
.otp-key code { font-size: 14.5px; font-weight: 650; letter-spacing: .06em; color: var(--text); word-break: break-word; }
.otp-input { width: 100%; height: 56px; border: 1px solid var(--border-strong); border-radius: 12px; text-align: center; font: inherit; font-size: 26px; font-weight: 700; letter-spacing: .4em; font-variant-numeric: tabular-nums; }
.otp-input:focus { outline: none; border-color: var(--brand-600); box-shadow: var(--ring); }
.otp-input::placeholder { color: #d0d5dd; }
.otp-note { margin: 14px 0 0; font-size: 13px; color: var(--text-3); text-align: center; }
.otp-resend { margin: 6px 0 0; text-align: center; }
.otp-resend button { border: 0; background: none; cursor: pointer; font: inherit; }
.otp-resend button:disabled { color: var(--text-3); cursor: not-allowed; }
@media (max-width: 460px) { .otp-setup { flex-direction: column; text-align: center; } }