/* =============================================
   Ground Optimizer — by lIqUiDuS
   Complete Stylesheet v12 — lIqUiDuS Brand
   ============================================= */

:root {
  /* ── Layout ── */
  --sidebar-w: 230px;
  --sidebar-collapsed: 60px;
  --topbar-h: 56px;

  /* ── Industrial / Command Center Palette ─────────────────── */
  --brand-dark:   #0A1628;   /* Deep Navy */
  --brand-navy:   #1E2D45;   /* Panels */
  --brand-blue:   #1E6FD9;   /* Electric Blue */
  --brand-light:  #4A90C4;   /* Hover / Active */
  --brand-slate:  #6B7B8D;   /* Muted elements */
  --brand-pale:   #E8F1F8;   /* Very light blue tint */
  --font-mono:    'JetBrains Mono', monospace;
  --font-sans:    'DM Sans', sans-serif;

  /* ── Semantic aliases (used throughout) ── */
  --bg:           #F0F4F8;
  --card-bg:      #FFFFFF;
  --text:         #0D1B2A;
  --text-muted:   #6B7B8D;
  --border:       #D4DCE6;
  --primary:      #1B3A5C;   /* was #1A237E */
  --primary-light:#2E6EA6;   /* was #283593 */
  --accent:       #2E6EA6;   /* was #0EA5E9 — now brand blue */
  --accent-hover: #4A90C4;
  --danger:       #DC2626;
  --warning:      #D97706;
  --success:      #059669;
  --shadow:       0 2px 10px rgba(13,27,42,.1);
  --shadow-lg:    0 8px 30px rgba(13,27,42,.16);
  --radius:       10px;
  --radius-sm:    6px;

  /* ── Dept colours ── */
  --ramp:         #1B5EA6;   /* RAMP blue */
  --foh:          #0F766E;   /* FOH teal */

  /* ── Z-index scale ────────────────────────────────────────────
     Single source of truth for every GLOBAL (position:fixed/sticky)
     layer. Values inside a component's own stacking context — Gantt
     blocks, sticky table cells — stay as small local integers and are
     deliberately NOT tokenised here.

     Never hardcode a z-index above 10. Pick the band that describes
     the role; if none fits, add a band here rather than out-bidding
     an existing one. JS inline styles must use the var() fallback
     form, e.g. z-index:var(--z-modal,400).
     ───────────────────────────────────────────────────────────── */
  --z-sticky:     100;   /* sidebar, sticky panel chrome            */
  --z-sticky-hi:  200;   /* sticky sub-header, above sticky chrome  */
  --z-dropdown:   300;   /* context menus — a modal must cover them */
  --z-modal:      400;   /* every modal / dialog backdrop           */
  --z-progress:   500;   /* import progress, shown over a modal     */
  --z-loading:    600;   /* loading overlays                        */
  --z-drag:       700;   /* drag ghost + snap indicator             */
  --z-tooltip:    800;   /* hover tooltips, float above modals      */
  --z-toast:      900;   /* toasts must never be covered            */
  --z-gate:       1000;  /* login screen                            */
  --z-banner:     1100;  /* offline banner — top of the world       */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-sans), sans-serif; background: var(--bg); color: var(--text); font-size: 14px; overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: 13px; }

/* ── LOGIN SCREEN ─────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   LOGIN SCREEN — Dark Command Centre Edition
═══════════════════════════════════════════════════════════ */

.login-screen {
  position: fixed; inset: 0; z-index: var(--z-gate);
  background: #020C18;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* Subtle mesh grid background */
.login-bg-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(59,130,246,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}
/* Radial glow behind logo */
.login-screen::before {
  content: '';
  position: absolute; top: -10%; left: 50%; transform: translateX(-50%);
  width: 600px; height: 500px;
  background: radial-gradient(ellipse, rgba(59,130,246,.12) 0%, transparent 70%);
  pointer-events: none;
}

/* Content column */
.login-wrap {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 420px;
  padding: 0 20px;
  gap: 0;
}

/* Hero logo */
.login-hero { margin-bottom: 4px; }
.login-hero-img {
  width: 220px; height: 220px;
  object-fit: contain;
  filter: drop-shadow(0 0 32px rgba(0,196,255,.25));
  animation: loginLogoFloat 4s ease-in-out infinite;
}
@keyframes loginLogoFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* Product identity */
.login-identity {
  text-align: center;
  margin-bottom: 28px;
}
.login-product {
  font-size: 2rem; font-weight: 800; color: #E2E8F0;
  letter-spacing: -.02em; line-height: 1; margin: 0 0 6px;
}
.login-product span { color: #3B82F6; }
.login-tagline {
  font-size: .78rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: #334155;
  margin: 0;
}

/* Auth card — dark glass */
.login-card {
  width: 100%;
  background: rgba(10, 22, 40, 0.85);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(59,130,246,.18);
  border-radius: 16px;
  padding: 32px 32px 28px;
  box-shadow:
    0 0 0 1px rgba(59,130,246,.08),
    0 24px 64px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.04);
  margin-bottom: 28px;
}

/* Fields */
.login-field { margin-bottom: 18px; }
.login-field label {
  display: block; font-size: .72rem; font-weight: 700;
  color: #475569; margin-bottom: 7px;
  letter-spacing: .08em; text-transform: uppercase;
}
.login-input-wrap {
  position: relative;
}
.login-input-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: #334155; font-size: .8rem; pointer-events: none;
}
.login-field input {
  width: 100%; box-sizing: border-box;
  background: #061020;
  border: 1px solid rgba(59,130,246,.15);
  border-radius: 10px;
  color: #E2E8F0;
  padding: 11px 14px 11px 40px;
  font-size: .9rem;
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.login-field input::placeholder { color: #1E3A5F; }
.login-field input:focus {
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}
/* Override browser autofill background — box-shadow inset trick */
.login-field input:-webkit-autofill,
.login-field input:-webkit-autofill:hover,
.login-field input:-webkit-autofill:focus,
.login-field input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #061020 inset !important;
  -webkit-text-fill-color: #E2E8F0 !important;
  caret-color: #E2E8F0;
  border-color: rgba(59,130,246,.15) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Error */
.login-error {
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.3);
  color: #FCA5A5;
  padding: 10px 14px; border-radius: 8px;
  font-size: .8rem; margin-bottom: 16px;
}

/* Submit button */
.login-btn {
  width: 100%; padding: 13px;
  background: #1D4ED8;
  color: #fff; border: none; border-radius: 10px;
  font-size: .9rem; font-weight: 700;
  cursor: pointer; letter-spacing: .02em;
  transition: background .2s, box-shadow .2s, transform .1s;
  position: relative; overflow: hidden;
}
.login-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, transparent 100%);
}
.login-btn:hover {
  background: #2563EB;
  box-shadow: 0 4px 20px rgba(37,99,235,.45);
}
.login-btn:active { transform: scale(.98); }
.login-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Footer — dev credit + copyright */
.login-footer {
  text-align: center;
  display: flex; flex-direction: column; gap: 6px;
}
.login-dev {
  font-size: .78rem; color: #475569; font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.login-liq {
  font-weight: 800; letter-spacing: .04em; color: #94A3B8;
}
.login-liq em, .liq-em {
  color: #00C4FF; font-style: normal; font-weight: 800;
}
.login-copy {
  font-size: .68rem; color: #475569; letter-spacing: .03em;
}

/* Hide spinner by default */
.login-btn-spinner { display: none; }

/* Language selector */
.login-lang-bar {
  position: absolute; top: 20px; right: 24px;
  display: flex; gap: 6px;
}
.lang-btn {
  padding: 4px 10px; border-radius: 20px; font-size: .72rem; font-weight: 700;
  color: rgba(255,255,255,.6); background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2); cursor: pointer; transition: all .15s;
  letter-spacing: .04em;
}
.lang-btn:hover { color: #fff; background: rgba(255,255,255,.2); }
.lang-btn.active { color: #fff; background: var(--accent); border-color: var(--accent); }

/* Sidebar language selector */
.sidebar-lang {
  display: flex; gap: 4px; padding: 8px 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.sidebar-lang .lang-btn {
  flex: 1; text-align: center; font-size: .68rem;
  color: rgba(255,255,255,.5); background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12); padding: 4px 6px;
}
.sidebar-lang .lang-btn.active {
  color: #fff; background: var(--accent); border-color: var(--accent);
}
.sidebar.collapsed .sidebar-lang { display: none; }

/* ── UTC / LOCAL TIMEZONE TOGGLE ────────────────────────────── */
/* Sidebar TZ block */
.sidebar-tz {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px 8px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.sidebar-tz-label {
  font-size: .68rem; color: rgba(255,255,255,.4); white-space: nowrap;
  letter-spacing: .03em; flex-shrink: 0;
}
.sidebar.collapsed .sidebar-tz { display: none; }

/* The toggle button — used in both sidebar and topbar */
.tz-toggle-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 20px; font-size: .72rem; font-weight: 700;
  color: rgba(255,255,255,.65); background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2); cursor: pointer;
  transition: all .18s; white-space: nowrap; letter-spacing: .03em;
  font-family: inherit;
}
.tz-toggle-btn:hover {
  color: #fff; background: rgba(255,255,255,.2);
}
.tz-toggle-btn.active {
  color: #fff; background: var(--brand-blue); border-color: var(--brand-light);
  box-shadow: 0 0 0 2px rgba(46,110,166,.3);
}
.tz-toggle-btn i { font-size: .7rem; }

/* Topbar version — inherit topbar colours */
.topbar .tz-toggle-btn {
  color: rgba(255,255,255,.7); background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2); font-size: .7rem;
  padding: 4px 9px;
}
.topbar .tz-toggle-btn:hover  { color: #fff; background: rgba(255,255,255,.2); }
.topbar .tz-toggle-btn.active { color: #fff; background: var(--brand-blue); border-color: var(--brand-light); }

/* TZ indicator badge (used in table headers, export, etc.) */
.tz-indicator {
  display: inline-block; font-size: .62rem; font-weight: 700;
  padding: 1px 6px; border-radius: 10px; vertical-align: middle;
  letter-spacing: .04em;
}
.tz-indicator.tz-utc {
  background: #E2E8F0; color: #475569;
}
.tz-indicator.tz-local {
  background: var(--brand-pale); color: var(--brand-blue);
}

/* Sidebar brand */
.sidebar-brand { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.sidebar-brand-main {
  font-size: .82rem; font-weight: 700; color: #fff; white-space: nowrap;
  line-height: 1.2;
}
.sidebar-brand-main strong { color: #7EC8F0; }
.sidebar-brand-sub {
  font-size: .65rem; color: rgba(255,255,255,.5); white-space: nowrap;
  letter-spacing: .02em;
}
.sidebar-brand-sub em { color: var(--accent); font-style: normal; font-weight: 700; }
.sidebar.collapsed .sidebar-brand { display: none; }

.liquidus-logo-text {
  font-size: .9rem; font-weight: 800; color: #fff;
  white-space: nowrap; letter-spacing:.04em;
}
.liquidus-logo-text em { color: #00C4FF; font-style: normal; }
.login-logo h1 { font-size: 1.6rem; font-weight: 800; color: var(--text); margin-top: 8px; }
.login-logo h1 span { color: var(--primary); }
.login-logo p { color: var(--text-muted); font-size: .85rem; margin-top: 4px; }

/* ── lIqUiDuS sidebar logo ──────────────────────── */
.sidebar-logo-img { width:30px; height:30px; border-radius:6px; object-fit:cover; flex-shrink:0; }
.login-field { position: relative; margin-bottom: 16px; }
.login-field label { display: block; font-size: .8rem; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.login-eye { position: absolute; right: 10px; top: 32px; color: var(--text-muted); padding: 4px; }
.login-hint { text-align: center; margin-top: 16px; color: var(--text-muted); font-size: .78rem; }
.login-hint code { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; }

/* ── APP SHELL ────────────────────────────────── */
.app-shell { display: flex; height: 100vh; overflow: hidden; }

/* ── SIDEBAR ─────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w); min-width: var(--sidebar-w);
  background: linear-gradient(180deg, var(--brand-dark) 0%, var(--brand-navy) 60%, #1a3d6e 100%);
  display: flex; flex-direction: column; transition: width .25s ease;
  overflow: hidden; z-index: var(--z-sticky); flex-shrink: 0;
}
.sidebar.collapsed { width: var(--sidebar-collapsed); min-width: var(--sidebar-collapsed); }
.sidebar.collapsed .nav-label,
.sidebar.collapsed .sidebar-logo .logo-text,
.sidebar.collapsed .airport-label .nav-label,
.sidebar.collapsed .airport-select,
.sidebar.collapsed .nav-section-title { display: none; }
.sidebar.collapsed .sidebar-logo-img { width:28px; height:28px; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 10px; }
.sidebar.collapsed .nav-item i { margin: 0; font-size: 1.1rem; }
.sidebar.collapsed .sidebar-footer { flex-direction: column; gap: 4px; }
.sidebar.collapsed .logout-btn span { display: none; }

.sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 12px; border-bottom: 1px solid rgba(255,255,255,.1); flex-shrink: 0;
}
.sidebar-logo { display: flex; align-items: center; gap: 10px; }
.sidebar-logo i { font-size: 1.3rem; color: #93C5FD; }
.sidebar-logo .logo-text { font-size: .95rem; font-weight: 600; color: #fff; white-space: nowrap; }
.sidebar-logo .logo-text strong { color: #93C5FD; }
.sidebar-toggle { color: rgba(255,255,255,.6); padding: 4px 6px; border-radius: 4px; font-size: .85rem; }
.sidebar-toggle:hover { background: rgba(255,255,255,.1); color: #fff; }

.sidebar-airport { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.1); flex-shrink: 0; }
.airport-label { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.7); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.airport-select {
  width: 100%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
  color: #fff; padding: 7px 10px; border-radius: var(--radius-sm); font-size: .82rem; outline: none; cursor: pointer;
}
.airport-select option { background: var(--brand-navy); color: #fff; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 0; }
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 2px; }

.nav-section-title {
  padding: 8px 14px 4px; font-size: .65rem; font-weight: 700;
  color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .08em;
  white-space: nowrap;
}
.nav-ramp { color: #93C5FD !important; }
.nav-foh  { color: #6EE7B7 !important; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; cursor: pointer; transition: background .15s;
  color: rgba(255,255,255,.75); font-size: .83rem; white-space: nowrap;
}
.nav-item:hover  { background: rgba(255,255,255,.1); color: #fff; }
.nav-item.active { background: rgba(255,255,255,.18); color: #fff; font-weight: 600; }
.nav-item i      { width: 18px; text-align: center; flex-shrink: 0; font-size: .9rem; }

.sidebar-footer {
  padding: 12px; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-shrink: 0;
}
.sidebar-user { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.8); font-size: .78rem; overflow: hidden; }
.sidebar-user i { font-size: 1.1rem; flex-shrink: 0; }
.logout-btn { color: rgba(255,255,255,.7); padding: 6px 8px; border-radius: 6px; font-size: .78rem; display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.logout-btn:hover { background: rgba(239,68,68,.3); color: #fff; }

/* ── MAIN WRAP ─────────────────────────────────── */
.main-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

/* ── TOPBAR ──────────────────────────────────── */
.topbar {
  height: var(--topbar-h); background: #fff; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; padding: 0 20px; flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.menu-btn { color: var(--text-muted); padding: 8px; border-radius: 6px; font-size: 1rem; }
.menu-btn:hover { background: var(--bg); }
.topbar-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.page-title { font-size: 1rem; font-weight: 700; white-space: nowrap; }
.topbar-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.airport-badge-top {
  display: flex; align-items: center; gap: 4px; padding: 4px 10px;
  border-radius: 20px; color: #fff; font-size: .78rem; cursor: pointer;
  background: var(--primary); transition: opacity .2s;
}
.airport-badge-top:hover { opacity: .85; }
.ap-iata { font-weight: 800; }
.ap-name { font-weight: 400; opacity: .85; }
.dept-badge { padding: 3px 9px; border-radius: 20px; font-size: .72rem; font-weight: 700; }
.dept-ramp { background: #DBEAFE; color: var(--ramp); }
.dept-foh  { background: #D1FAE5; color: var(--foh); }
.date-badge { background: var(--bg); border: 1px solid var(--border); padding: 3px 10px; border-radius: 20px; font-size: .78rem; color: var(--text-muted); white-space: nowrap; }
.topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.btn-icon {
  display: flex; align-items: center; gap: 6px; padding: 7px 14px;
  background: var(--primary); color: #fff; border-radius: 20px; font-size: .8rem; font-weight: 600;
}
.btn-icon:hover { opacity: .85; }
.user-pill { display: flex; align-items: center; gap: 8px; padding: 5px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 20px; font-size: .8rem; }
.user-pill i { color: var(--primary); font-size: 1.1rem; }
.user-role-badge { background: #E0E7FF; color: #3730A3; padding: 2px 8px; border-radius: 10px; font-size: .7rem; font-weight: 700; }

/* ── CONTENT AREA ─────────────────────────────── */
.content-area { flex: 1; overflow-y: auto; padding: 20px; }
.tab-content { display: none; animation: fadeIn .2s ease; }
.tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ── MODULE HEADER ──────────────────────────────── */
.module-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; gap: 12px; flex-wrap: wrap;
}
.module-title { display: flex; align-items: center; gap: 10px; }
.module-title h2 { font-size: 1.1rem; font-weight: 700; }
.module-badge {
  width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; font-size: .72rem; font-weight: 800; flex-shrink: 0;
}
.m1 { background: #DBEAFE; color: #1E40AF; }
.m2 { background: #DBEAFE; color: var(--ramp); }
.m3 { background: #D1FAE5; color: var(--foh); }
.m4 { background: #F3E8FF; color: #7C3AED; }
.module-airport {
  padding: 3px 10px; border-radius: 20px; font-size: .78rem; font-weight: 700;
  background: var(--bg); border: 1px solid var(--border);
}
.module-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── BUTTONS ─────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; background: var(--primary); color: #fff;
  border-radius: var(--radius-sm); font-size: .82rem; font-weight: 600; transition: opacity .15s;
}
.btn-primary:hover { opacity: .88; }
.btn-primary.btn-foh { background: var(--foh); }
.btn-success {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; background: #059669; color: #fff;
  border-radius: var(--radius-sm); font-size: .82rem; font-weight: 600; transition: opacity .15s;
}
.btn-success:hover { opacity: .88; }
.btn-confirm {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; background: #7C3AED; color: #fff;
  border-radius: var(--radius-sm); font-size: .82rem; font-weight: 600; transition: opacity .15s;
  border: none;
}
.btn-confirm:hover { opacity: .88; }
.btn-confirm:disabled { opacity: .5; cursor: not-allowed; }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: .82rem; font-weight: 500; transition: background .15s;
}
.btn-secondary:hover { background: var(--bg); }
.btn-secondary.btn-foh { color: var(--foh); border-color: var(--foh); }
.btn-sm { padding: 5px 10px; font-size: .75rem; }
.btn-xs { padding: 3px 7px; font-size: .72rem; border: 1px solid var(--border); border-radius: 4px; background: #fff; }
.btn-xs.danger { color: var(--danger); border-color: #fee2e2; }
.btn-xs.danger:hover { background: #fee2e2; }
.btn-danger-sm { padding: 6px 12px; background: #FEE2E2; color: var(--danger); border-radius: var(--radius-sm); font-size: .78rem; display: inline-flex; align-items: center; gap: 5px; }
.btn-danger-sm:hover { background: #FCA5A5; }
.btn-nav { padding: 6px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .82rem; }
.btn-nav:hover { background: #e2e8f0; }
.btn-sort { padding: 5px 12px; border: 1px solid var(--border); border-radius: 20px; font-size: .72rem; font-weight: 600; background: #fff; color: var(--text-muted); }
.btn-sort.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ── DASHBOARD ───────────────────────────────── */
.dashboard-welcome {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border-radius: var(--radius); padding: 24px 28px; color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.welcome-text h2 { font-size: 1.3rem; font-weight: 700; }
.welcome-text p  { opacity: .8; font-size: .85rem; margin-top: 4px; }
.welcome-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.welcome-actions .btn-primary { background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.4); }
.welcome-actions .btn-primary:hover { background: rgba(255,255,255,.3); }
.welcome-actions .btn-secondary { background: #fff; color: var(--primary); border: none; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.kpi-card {
  background: #fff; border-radius: var(--radius); padding: 18px;
  display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow);
}
.kpi-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0;
}
.kpi-icon.flights  { background: #DBEAFE; color: var(--ramp); }
.kpi-icon.staff    { background: #F3E8FF; color: #7C3AED; }
.kpi-icon.ramp     { background: #DBEAFE; color: var(--ramp); }
.kpi-icon.foh      { background: #D1FAE5; color: var(--foh); }
.kpi-value { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.kpi-label { font-size: .75rem; color: var(--text-muted); margin-top: 2px; }
.kpi-sub   { font-size: .7rem; color: var(--text-muted); margin-top: 3px; }

/* ── WORKFLOW ROW ────────────────────────────── */
.dash-workflow-row {
  display: flex; align-items: center; gap: 0; margin-bottom: 20px;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 12px 16px; overflow-x: auto;
}
.dash-workflow-card {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-radius: var(--radius-sm); cursor: pointer; transition: background .15s;
  flex-shrink: 0; min-width: 120px;
}
.dash-workflow-card:hover { background: var(--bg); }
.wf-icon {
  width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; font-size: 1rem; flex-shrink: 0;
  background: #DBEAFE; color: var(--ramp);
}
.wf-icon.ramp  { background: #DBEAFE; color: var(--ramp); }
.wf-icon.foh   { background: #D1FAE5; color: var(--foh); }
.wf-icon.roster{ background: #EDE9FE; color: #7C3AED; }
.wf-body { flex: 1; min-width: 0; }
.wf-title  { font-size: .72rem; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .04em; }
.wf-status { font-size: .7rem; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-status.ok   { color: #059669; }
.wf-status.warn { color: #D97706; }
.wf-arrow { color: var(--text-muted); font-size: .7rem; }
.wf-connector { color: #CBD5E1; padding: 0 4px; flex-shrink: 0; }

.dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.dash-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.card-header { padding: 14px 18px; border-bottom: 1px solid var(--border); }
.card-header h3 { font-size: .85rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.card-body { padding: 14px 18px; }
.activity-row { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: .78rem; }
.activity-ts { color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }

/* ── FILTER BAR ──────────────────────────────── */
.filter-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff; padding: 12px 16px; border-radius: var(--radius);
  border: 1px solid var(--border); margin-bottom: 12px; box-shadow: var(--shadow);
}
.filter-group { display: flex; align-items: center; gap: 6px; font-size: .8rem; }
.filter-group label { color: var(--text-muted); white-space: nowrap; }
.filter-group input, .filter-group select {
  padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: .8rem; outline: none;
}
.filter-group input:focus, .filter-group select:focus { border-color: var(--primary); }
.search-input { padding: 7px 12px; border: 1px solid var(--border); border-radius: 20px; font-size: .8rem; outline: none; min-width: 180px; }
.search-input:focus { border-color: var(--primary); }
.search-input-sm { padding: 5px 10px; border: 1px solid var(--border); border-radius: 20px; font-size: .78rem; outline: none; width: 140px; }

/* ── SUMMARY BADGES ─────────────────────────── */
.summary-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.sbadge { padding: 4px 12px; border-radius: 20px; font-size: .78rem; font-weight: 600; }
.sbadge.total   { background: #F1F5F9; color: var(--text); }
.sbadge.married { background: #FFF3CD; color: #856404; }
.sbadge.arr     { background: #DBEAFE; color: var(--ramp); }
.sbadge.dep     { background: #D1FAE5; color: var(--foh); }
.sbadge.days    { background: #EDE9FE; color: #7C3AED; }

/* ── DAY TABS ─────────────────────────────────── */
.day-tabs-bar {
  display: flex; align-items: center; gap: 0; overflow-x: auto;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0;
  padding: 0 12px; flex-wrap: nowrap; flex-shrink: 0;
}
.day-tab {
  padding: 10px 14px; white-space: nowrap; font-size: .78rem; font-weight: 500;
  color: var(--text-muted); cursor: pointer; border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
}
.day-tab:hover { color: var(--primary); }
.day-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 700; }
.day-tabs-airport-badge { padding: 2px 8px; border-radius: 10px; font-size: .7rem; font-weight: 700; color: #fff; margin-right: 6px; }

/* ── DATA PANEL ──────────────────────────────── */
.data-panel {
  background: #fff; border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow);
}
.panel-subheader {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; border-bottom: 1px solid var(--border); gap: 10px; flex-wrap: wrap;
}
.subtabs { display: flex; gap: 0; }
.subtab {
  display: flex; align-items: center; gap: 6px; padding: 8px 14px;
  font-size: .78rem; font-weight: 500; color: var(--text-muted);
  border-bottom: 3px solid transparent; cursor: pointer; transition: color .15s, border-color .15s;
  background: none;
}
.subtab:hover { color: var(--primary); }
.subtab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 700; }
.fdata-subtab-count {
  background: var(--primary); color: #fff; border-radius: 10px;
  padding: 1px 7px; font-size: .68rem; font-weight: 700;
}
.panel-tools { display: flex; align-items: center; gap: 8px; }
.fpanel { display: none; }
.fpanel.active { display: block; }

/* ── TABLE ───────────────────────────────────── */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.data-table th {
  padding: 9px 10px; text-align: left; background: #F8FAFC;
  border-bottom: 2px solid var(--border); font-weight: 600; font-size: .72rem;
  color: var(--text-muted); white-space: nowrap;
}
.data-table td { padding: 8px 10px; border-bottom: 1px solid #F1F5F9; vertical-align: middle; }
.data-table tr:hover td { background: #F8FAFC; }
.data-table .empty-row td { text-align: center; color: var(--text-muted); padding: 24px; }
.tc { text-align: center !important; }

/* ── STATION REPORT ROWS ─────────────────────── */
.sr-row { transition: background .1s; }
.sr-married  { background: #FFFBEB; }
.sr-arr-only { background: #EFF6FF; }
.sr-dep-only { background: #F0FDF4; }
.sr-row:hover td { filter: brightness(.97); }
.sr-gap { background: #6B7280; color: #fff; border-radius: 10px; padding: 1px 7px; font-size: .7rem; font-weight: 700; }
.sr-date { font-size: .72rem; line-height: 1.4; }
.sr-none { color: #d1d5db; }
.sr-sta { color: var(--ramp); }
.sr-std { color: var(--foh); }
.sr-type-tag { padding: 2px 8px; border-radius: 10px; font-size: .7rem; font-weight: 700; }
.arr-tag { background: #DBEAFE; color: var(--ramp); }
.dep-tag { background: #D1FAE5; color: var(--foh); }
.flt-role { padding: 1px 5px; border-radius: 4px; font-size: .65rem; font-weight: 700; }
.flt-role.arr { background: #DBEAFE; color: var(--ramp); }
.flt-role.dep { background: #D1FAE5; color: var(--foh); }
.airport-badge { padding: 2px 7px; border-radius: 10px; font-size: .72rem; font-weight: 700; }
.airport-badge.orig { background: #DBEAFE; color: var(--ramp); }
.airport-badge.dest { background: #D1FAE5; color: var(--foh); }
.airport-badge.home { background: var(--primary); color: #fff; }
.cat-badge { padding: 2px 8px; border-radius: 10px; font-size: .7rem; font-weight: 700; }
.route-arrow { color: var(--text-muted); }
.ap-mini-badge { padding: 1px 5px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); font-size: .65rem; }

/* ── DB FLIGHT PANEL ─────────────────────────── */
.db-panel { margin-top: 20px; }
.db-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.db-panel-header h3 { font-size: .9rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.db-stats { font-size: .78rem; color: var(--text-muted); }
.month-calendar-grid { display: flex; flex-direction: column; gap: 16px; }
.cal-month { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.cal-month-title { font-size: .82rem; font-weight: 700; margin-bottom: 10px; text-transform: capitalize; }
.cal-days { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-day {
  width: 44px; text-align: center; padding: 6px 4px; border-radius: 6px;
  cursor: pointer; transition: transform .1s; border: 1px solid var(--border);
}
.cal-day:hover { transform: scale(1.05); }
.cal-day.low  { background: #ECFDF5; border-color: #6EE7B7; }
.cal-day.med  { background: #D1FAE5; border-color: #34D399; }
.cal-day.high { background: #059669; color: #fff; border-color: #047857; }
.cal-day-num   { display: block; font-size: .7rem; font-weight: 700; }
.cal-day-count { display: block; font-size: .65rem; margin-top: 1px; }

/* ── PLANNER TOOLBAR ─────────────────────────── */
.planner-toolbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.planner-date-nav { display: flex; align-items: center; gap: 6px; }
.planner-date-input { padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .82rem; outline: none; }
.planner-date-input:focus { border-color: var(--primary); }
.planner-opts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .82rem; }
.planner-opts label { color: var(--text-muted); }
.opt-select { padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .8rem; outline: none; }

/* ── PLAN KPIS ──────────────────────────────── */
.plan-kpis {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.plan-kpi {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 16px; text-align: center; min-width: 70px;
}
.plan-kpi span { display: block; font-size: 1.3rem; font-weight: 800; color: var(--primary); }
.plan-kpi label { font-size: .68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }

/* ── SCHEDULE OUTPUT ─────────────────────────── */
.schedule-output { min-height: 200px; }
.shift-group { margin-bottom: 16px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--border); }
.shift-group-header {
  padding: 10px 16px; display: flex; align-items: center; gap: 10px;
  font-size: .82rem; font-weight: 700;
}
.sg-count { margin-left: auto; background: rgba(255,255,255,.2); padding: 2px 10px; border-radius: 10px; font-size: .72rem; }
.shift-teams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 12px; }
.team-mini-card {
  background: #F8FAFC; border: 1px solid var(--border); border-radius: 8px;
  padding: 10px; cursor: pointer; transition: box-shadow .15s;
}
.team-mini-card:hover { box-shadow: var(--shadow); }
.team-mini-card.tmc-warn { border-color: #FCD34D; background: #FFFBEB; }
.tmc-header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.tmc-id { font-weight: 800; font-size: .7rem; color: var(--text-muted); }
.tmc-ops { display: flex; gap: 3px; flex-wrap: wrap; }
.op-mini-badge { padding: 1px 6px; border-radius: 8px; font-size: .65rem; font-weight: 700; }
.tmc-util { font-size: .7rem; font-weight: 700; margin-left: auto; }
.tmc-util.high { color: var(--success); }
.tmc-util.med  { color: var(--warning); }
.tmc-util.low  { color: var(--text-muted); }
.staff-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; font-size: .7rem; background: #E0E7FF; color: #3730A3; cursor: pointer; }
.staff-pill.assigned { background: #D1FAE5; color: var(--foh); }
.staff-pill:hover { opacity: .85; }

/* ── SCHEDULE DETAIL ─────────────────────────── */
.schedule-detail { background: #fff; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; }
.detail-summary { padding: 12px 16px; background: #F8FAFC; border-bottom: 1px solid var(--border); font-size: .82rem; }
.shift-badge { padding: 2px 8px; border-radius: 10px; font-size: .7rem; font-weight: 600; }
.shift-mini { padding: 2px 7px; border-radius: 8px; font-size: .72rem; font-weight: 700; }
.task-type-badge { padding: 2px 7px; border-radius: 8px; font-weight: 700; }
.staff-assigned   { color: var(--foh); font-weight: 600; font-size: .78rem; cursor: pointer; }
.staff-unassigned { color: var(--primary); font-size: .78rem; cursor: pointer; }
.staff-unassigned:hover { text-decoration: underline; }

/* ── FOH CARDS ───────────────────────────────── */
.foh-type-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; box-shadow: var(--shadow); }
.foh-type-header { display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: .82rem; font-weight: 700; }
.foh-count { margin-left: auto; font-size: .72rem; opacity: .7; }
.foh-alloc-list { padding: 4px 0; }
.foh-alloc-row { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid #f1f5f9; font-size: .78rem; flex-wrap: wrap; }
.foh-alloc-row:last-child { border-bottom: none; }
.foh-time { min-width: 100px; font-weight: 600; }
.foh-label { flex: 1; }
.foh-shift { min-width: 80px; }
.foh-staff { }
.flt-mini { color: var(--text-muted); font-size: .7rem; }

/* ── STAFF GRID ──────────────────────────────── */
.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.staff-card { background: #fff; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; transition: box-shadow .15s; }
.staff-card:hover { box-shadow: var(--shadow-lg); }
.staff-card-header { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--border); }
.staff-avatar {
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; color: #fff; font-weight: 700; font-size: .85rem; flex-shrink: 0;
}
.staff-info { flex: 1; min-width: 0; }
.staff-info h4 { font-size: .82rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.staff-code { font-size: .7rem; color: var(--text-muted); }
.staff-actions { display: flex; gap: 4px; }
.staff-card-body { padding: 10px 12px; }
.staff-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.dept-badge-sm { padding: 2px 8px; border-radius: 10px; font-size: .68rem; font-weight: 700; color: #fff; }
.dept-badge-xs { padding: 1px 6px; border-radius: 8px; font-size: .65rem; font-weight: 700; color: #fff; }
.staff-role { font-size: .75rem; color: var(--text-muted); }
.staff-details { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; font-size: .72rem; color: var(--text-muted); }
.staff-details i { width: 12px; color: var(--primary); }
.staff-skills { display: flex; flex-wrap: wrap; gap: 4px; }
.skill-tag { background: #EDE9FE; color: #7C3AED; padding: 2px 7px; border-radius: 8px; font-size: .65rem; font-weight: 600; }

/* ── GANTT OVERTIME ──────────────────────────── */
.gantt-overtime-zone {
  position: absolute; top: 0; height: 100%;
  background: repeating-linear-gradient(
    135deg, rgba(239,68,68,.15) 0px, rgba(239,68,68,.15) 4px,
    rgba(239,68,68,.05) 4px, rgba(239,68,68,.05) 8px
  );
  border-left: 2px solid #EF4444;
  z-index: 3; pointer-events: none;
}
.overtime-task { outline: 2px solid #EF4444 !important; outline-offset: -2px; }
.overtime-badge { font-size: .6rem; margin-right: 2px; vertical-align: middle; }

/* ── STAFF VIEW TOGGLE ───────────────────────── */
.staff-view-toggle { display: flex; gap: 2px; background: var(--bg-alt, #f1f5f9); border-radius: 6px; padding: 2px; border: 1px solid var(--border); }
.view-toggle-btn { background: none; border: none; width: 30px; height: 28px; border-radius: 4px; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: .8rem; transition: all .15s; }
.view-toggle-btn:hover { color: var(--primary); }
.view-toggle-btn.active { background: #fff; color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* ── STAFF LIST VIEW ─────────────────────────── */
.staff-list { display: flex; flex-direction: column; gap: 5px; }
.staff-list-row {
  display: grid;
  grid-template-columns: 34px 1.6fr 1.4fr 1fr auto 80px;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 14px;
  box-shadow: var(--shadow);
  transition: box-shadow .15s;
}
.staff-list-row:hover { box-shadow: var(--shadow-lg); background: #fafbff; }
.slr-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .72rem; flex-shrink: 0; overflow: hidden; }
.slr-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.slr-name strong { font-size: .84rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slr-role { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.slr-contract { display: flex; flex-direction: column; gap: 2px; font-size: .71rem; color: var(--text-muted); }
.slr-contract i { width: 11px; }
.slr-skills { display: flex; gap: 3px; flex-wrap: wrap; align-items: center; }
.slr-actions { display: flex; gap: 4px; justify-content: flex-end; }

/* ── ABSENCE ────────────────────────────────── */
.absence-staff-block { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.absence-staff-name { padding: 10px 14px; background: #F8FAFC; border-bottom: 1px solid var(--border); font-size: .82rem; font-weight: 600; }
.absence-row { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid #f1f5f9; font-size: .78rem; }
.abs-dates { flex: 1; }
.abs-type  { font-weight: 600; }
.abs-status { font-size: .85rem; }
.abs-holiday { background: #EFF6FF; }
.abs-sick    { background: #FFF7ED; }
.abs-training{ background: #F0FDF4; }
.abs-unpaid  { background: #FEF2F2; }

/* ── MONTHLY ROSTER ──────────────────────────── */
.roster-wrap { background: #fff; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; }
.roster-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.roster-legend { display: flex; gap: 12px; align-items: center; padding: 8px 16px; font-size: .72rem; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.roster-table-wrap { overflow: auto; max-height: 65vh; }
.roster-table { border-collapse: collapse; font-size: .72rem; min-width: 100%; }
.roster-table th { padding: 7px 4px; text-align: center; background: #F8FAFC; border-bottom: 2px solid var(--border); border-right: 1px solid var(--border); font-size: .65rem; color: var(--text-muted); position: sticky; top: 0; z-index: 1; white-space: nowrap; min-width: 32px; }
.roster-name-th { text-align: left; min-width: 160px; padding-left: 12px; }
.roster-day-th.weekend { background: #FFF7ED; }

/* "This day has a saved plan" (F-2b / owner request 2026-07-30).
   A cell reading 04:00–12:00 means either the planned window or the rotation
   default, and they look identical — this is what tells them apart, so a planner
   can see which days still need work. */
.roster-day-th.is-planned { box-shadow: inset 0 -2px 0 #10B981; }
.roster-day-planned {
  display: block; line-height: 1; font-size: .5rem; color: #10B981; margin-top: 1px;
}
.roster-day-planned.bad { color: #F59E0B; }   /* saved but unreadable — worse than absent */
.roster-table td { padding: 5px 4px; border-bottom: 1px solid #f1f5f9; border-right: 1px solid #f1f5f9; text-align: center; }
.roster-name-cell { text-align: left; padding: 6px 12px; min-width: 160px; position: sticky; left: 0; background: #fff; z-index: 1; border-right: 2px solid var(--border); }
.roster-staff-name { font-weight: 600; font-size: .78rem; }
.roster-staff-meta { font-size: .65rem; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.roster-summary { font-size: .72rem; color: var(--text-muted); padding: 0 8px; }
.roster-summary.abs { color: var(--danger); }
.roster-cell { cursor: pointer; }
.roster-cell:hover { background: #F0F9FF; }
.roster-cell.abs { background: #FFF7ED; cursor: default; }
.roster-cell.off { background: #F9FAFB; cursor: default; }
.rc { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 18px; border-radius: 4px; font-size: .65rem; font-weight: 700; }
.rc.h    { background: #DBEAFE; color: var(--ramp); }
.rc.s    { background: #FEE2E2; color: var(--danger); }
.rc.t    { background: #D1FAE5; color: var(--foh); }
.rc.u    { background: #FEF3C7; color: #92400E; }
.rc.o    { background: #F3F4F6; color: var(--text-muted); }
/* New absence types */
.rc.lp { background: #6D28D9; color: #fff; }
.rc.at { background: #DC2626; color: #fff; }
.rc.fc { background: #0891B2; color: #fff; }
.rc.sd { background: #374151; color: #fff; }
.rc.sc { background: #7C3AED; color: #fff; }
/* Rest violation cell */
.roster-cell.rest-violation { background: #FEF2F2; }
.rc.rv {
  background: #DC2626; color: #fff; font-size: .58rem;
  font-weight: 800; letter-spacing: .03em; padding: 1px 3px;
  border-radius: 3px; cursor: help;
}
.rc.rv.cons { background: #D97706; }
.rc.rv.week { background: #7C3AED; }

/* ── Roster violation banner ────────────────────── */
.violation-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; margin: 4px 0;
  background: #FEF2F2; border: 1px solid #FECACA; border-radius: 6px;
  font-size: .72rem; font-weight: 600; color: #991B1B;
}
.violation-banner.ok {
  background: #F0FDF4; border-color: #BBF7D0; color: #166534;
}
.viol-count { font-weight: 700; }
.viol-count.rest { color: #DC2626; }
.viol-count.cons { color: #D97706; }
.viol-count.week { color: #7C3AED; }

/* ── FC devida (Folga Compensatória) — soft suggestion banner ─────── */
.fc-due-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 6px 12px; margin: 4px 0;
  background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 6px;
  font-size: .72rem; font-weight: 600; color: #1E40AF;
}
.fc-due-item { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.fc-due-item.overdue { color: #B91C1C; font-weight: 700; }

/* ── Generator violation detail panel ─────────────── */
.gen-viol-panel {
  margin: 6px 0 4px;
  background: #FFFBEB; border: 1px solid #FCD34D; border-radius: 6px;
  font-size: .72rem;
}
.gen-viol-panel summary {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 12px; cursor: pointer; user-select: none;
  color: #92400E; font-weight: 600; list-style: none;
}
.gen-viol-panel summary::-webkit-details-marker { display: none; }
.gen-viol-panel summary i { color: #D97706; }
.gen-viol-panel[open] .gvp-hint::before { content: 'clique para fechar'; }
.gen-viol-panel:not([open]) .gvp-hint::before { content: 'clique para ver'; }
.gvp-hint { font-size: .65rem; font-weight: 400; color: #B45309; margin-left: auto; }
.gvp-badge {
  display: inline-block; padding: 1px 6px; border-radius: 10px;
  font-size: .65rem; font-weight: 700;
}
.gvp-badge.rest   { background: #FEE2E2; color: #991B1B; }
.gvp-badge.forced { background: #FEF3C7; color: #92400E; }
.gvp-badge.adj    { background: #DBEAFE; color: #1E40AF; }
.gvp-badge.warn   { background: #F3F4F6; color: #374151; }
.gvp-table-wrap { padding: 0 12px 10px; }
.gvp-table { width: 100%; border-collapse: collapse; font-size: .70rem; }
.gvp-table th { padding: 4px 6px; border-bottom: 1px solid #FCD34D; text-align: left; font-weight: 700; color: #78350F; }
.gvp-table td { padding: 3px 6px; border-bottom: 1px solid #FEF3C7; vertical-align: top; }
.gvp-table tr.gvp-rest td:last-child   { color: #991B1B; }
.gvp-table tr.gvp-forced td:last-child { color: #92400E; }
.gvp-table tr.gvp-adj td:last-child    { color: #1E40AF; }
.gvp-table tr.gvp-warn td:last-child   { color: #374151; }
.gvp-table tr:last-child td { border-bottom: none; }

/* ── Edit-roster-cell modal (rce) ───────────────── */
.rce-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: var(--z-modal); display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.rce-modal {
  background: #fff; border-radius: 14px; padding: 20px 22px;
  width: 100%; max-width: 420px;
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
  max-height: 90vh; overflow-y: auto;
}
.rce-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 14px;
}
.rce-title  { font-weight: 700; font-size: .95rem; color: #111827; }
.rce-subtitle { font-size: .75rem; color: #6B7280; margin-top: 2px; }
.rce-close-btn {
  background: none; border: none; color: #9CA3AF; cursor: pointer;
  font-size: 1rem; padding: 2px 4px; border-radius: 4px;
  line-height: 1;
}
.rce-close-btn:hover { color: #374151; background: #F3F4F6; }
.rce-section-label {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #6B7280; margin: 10px 0 6px;
}
.rce-shift-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  margin-bottom: 4px;
}
.rce-shift-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 10px 6px; border-radius: 10px; border: 2px solid transparent;
  cursor: pointer; transition: transform .1s, box-shadow .1s; font-size: .78rem;
}
.rce-shift-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.rce-shift-btn strong { font-size: .82rem; }
.rce-shift-btn .rce-time { font-size: .62rem; opacity: .7; }
.rce-shift-btn.morning { background: #FEF3C7; border-color: #FCD34D; color: #92400E; }
.rce-shift-btn.late    { background: #FCE7F3; border-color: #F9A8D4; color: #9D174D; }
.rce-shift-btn.off     { background: #F9FAFB; border-color: #E5E7EB; color: #6B7280; }
.rce-abs-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 4px;
}
.rce-abs-btn {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  border-radius: 7px; border: 1.5px solid #E5E7EB; background: #F9FAFB;
  cursor: pointer; font-size: .72rem; color: #374151; text-align: left;
  transition: border-color .15s, background .15s;
}
.rce-abs-btn:hover  { border-color: #6B7280; background: #F3F4F6; }
.rce-abs-btn.selected { border-color: #059669; background: #F0FDF4; }
.rce-abs-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rce-abs-confirm {
  background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 8px;
  padding: 12px; margin-top: 8px;
}
.rce-date-row {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.rce-date-row label { font-size: .72rem; color: #374151; display: flex; align-items: center; gap: 4px; }
.rce-date-row input { border: 1px solid #D1FAE5; border-radius: 4px; padding: 3px 6px; font-size: .75rem; }
.rce-existing-abs {
  display: flex; align-items: center; gap: 8px;
  background: #FEF9C3; border: 1px solid #FDE68A; border-radius: 8px;
  padding: 8px 10px; margin-bottom: 10px;
}
.rce-clickable { cursor: pointer; }
.rce-clickable:hover { filter: brightness(.92); }

/* ── Swap banner ─────────────────────────────────── */
.swap-banner {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 14px; margin-bottom: 6px;
  background: #EFF6FF; border: 1.5px solid #93C5FD; border-radius: 8px;
  font-size: .78rem; color: #1E40AF; font-weight: 600;
}
.swap-hint { font-weight: 400; color: #3B82F6; }
.swap-cancel-btn {
  margin-left: auto; border: 1px solid #93C5FD; background: rgba(255,255,255,.6);
  border-radius: 4px; padding: 2px 10px; cursor: pointer;
  font-size: .72rem; color: #1E40AF;
}
.swap-cancel-btn:hover { background: #DBEAFE; }
.rce-swap-start-btn {
  width: 100%; padding: 8px 12px; border-radius: 8px;
  border: 1.5px dashed #93C5FD; background: #EFF6FF; color: #1D4ED8;
  cursor: pointer; font-size: .78rem; font-weight: 600; text-align: center;
}
.rce-swap-start-btn:hover { background: #DBEAFE; border-style: solid; }
.rc.off  { background: #F9FAFB; color: #d1d5db; }
.rc.shift { background: #EDE9FE; color: #7C3AED; }
.rc.shift.morning { background: #FEF3C7; color: #92400E; }
.rc.shift.late    { background: #FCE7F3; color: #9D174D; }
.rc.add  { background: #F0FDF4; color: var(--foh); }

/* ── Roster time pills (hh:mm-hh:mm ROLE) ───────── */
.rc-roster {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .56rem; font-weight: 700; border-radius: 4px;
  padding: 1px 4px; white-space: nowrap; line-height: 1.2;
  letter-spacing: -.01em; max-width: 80px; overflow: hidden; text-overflow: ellipsis;
}
.rc-roster.morning { background: #FEF3C7; color: #78350F; border: 1px solid #FDE68A; }
.rc-roster.late    { background: #FCE7F3; color: #831843; border: 1px solid #F9A8D4; }
.rc-roster.fixed   { background: #CCFBF1; color: #115E59; border: 1px solid #5EEAD4; }
.rc-roster         { background: #EDE9FE; color: #5B21B6; border: 1px solid #C4B5FD; }

/* ── Band / Roster coverage rows ─────────────────────────────── */
.roster-band-summary-row td  { background: #F8FAFC; border-top: 1px solid #E5E7EB; }
.roster-band-cycle-row td    { background: #F5F3FF; border-top: 1px dotted #C4B5FD; }
.roster-coverage-row td      { background: #FFFBEB; border-top: 1px dashed #FCD34D; }
.roster-cell-cov             { text-align: center; padding: 2px 4px; }
.roster-cell-cov.ok          { background: #F0FDF4; }
.roster-cell-cov.alert       { background: #FEF3C7; cursor: help; }
.cov-alert-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: #F59E0B; color: #fff; border-radius: 10px;
  font-size: .58rem; font-weight: 800; padding: 0 5px; min-width: 18px; height: 16px;
}
.cov-alert-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D;
  border-radius: 20px; padding: 3px 10px; font-size: .75rem; font-weight: 600;
}
.cov-ok-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: #D1FAE5; color: #065F46; border: 1px solid #A7F3D0;
  border-radius: 20px; padding: 3px 10px; font-size: .75rem; font-weight: 600;
}

/* ── Roster config panel ──────────────────────────────────────── */
.rs-band-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1px 8px; border-radius: 4px; font-size: .72rem; font-weight: 700;
  margin-right: 4px;
}
.rs-band-badge.morning { background: #FEF3C7; color: #92400E; }
.rs-band-badge.late    { background: #FCE7F3; color: #9D174D; }
.rs-band-badge.off     { background: #F3F4F6; color: #9CA3AF; }
.cfg-hint { font-size: .75rem; color: #6B7280; margin-top: 4px; line-height: 1.4; }

/* ── CONFIG ──────────────────────────────────── */
.config-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 16px; }
.cfg-tab { padding: 9px 18px; font-size: .82rem; font-weight: 600; color: var(--text-muted); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.cfg-tab:hover { color: var(--primary); }
.cfg-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.cfg-panel { display: none; }
.cfg-panel.active { display: block; }
.config-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.config-section { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.config-section h3 { font-size: .85rem; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.section-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cfg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cfg-field { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; }
.cfg-field.cfg-check { flex-direction: row; align-items: center; gap: 8px; }
.cfg-field label { color: var(--text-muted); font-size: .72rem; font-weight: 500; }
.cfg-field input[type="number"],
.cfg-field input[type="text"],
.cfg-field input[type="time"],
.cfg-field select {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: .8rem; outline: none; width: 100%; box-sizing: border-box;
}
.cfg-field input:focus,
.cfg-field select:focus { border-color: var(--primary); outline: 2px solid rgba(46,110,166,.18); }
.shifts-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.shift-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.shift-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.shift-card-header h4 { font-size: .82rem; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.shift-color-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.shift-del-btn { color: var(--danger); font-size: .75rem; }
.shift-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shift-field { display: flex; flex-direction: column; gap: 3px; font-size: .75rem; }
.shift-field label { color: var(--text-muted); font-size: .7rem; }
.shift-field input { padding: 5px 8px; border: 1px solid var(--border); border-radius: 4px; outline: none; font-size: .8rem; }
.ap-config-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.airport-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.role-badge { padding: 2px 8px; border-radius: 10px; font-size: .7rem; font-weight: 700; }
.role-admin   { background: #FEE2E2; color: var(--danger); }
.role-manager { background: #FEF3C7; color: #92400E; }
.role-planner { background: #D1FAE5; color: var(--foh); }
.role-viewer  { background: #F3F4F6; color: var(--text-muted); }

/* ── EXPORT GRID ─────────────────────────────── */
.export-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.export-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.export-icon { font-size: 2rem; color: var(--primary); margin-bottom: 10px; }
.export-icon.foh     { color: var(--foh); }
.export-icon.monthly { color: #7C3AED; }
.export-icon.flights { color: var(--ramp); }
.export-icon.print   { color: var(--text-muted); }
.export-card h3 { font-size: .88rem; font-weight: 700; margin-bottom: 6px; }
.export-card p  { font-size: .78rem; color: var(--text-muted); margin-bottom: 12px; line-height: 1.5; }

/* ── IMPORT MODAL ────────────────────────────── */
.imp-panel { display: none; }
.imp-panel.active { display: block; }
.import-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 16px; }
.imp-tab { padding: 8px 18px; font-size: .82rem; font-weight: 600; color: var(--text-muted); border-bottom: 3px solid transparent; margin-bottom: -2px; display: flex; align-items: center; gap: 6px; }
.imp-tab:hover { color: var(--primary); }
.imp-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.drop-zone {
  border: 2px dashed var(--border); border-radius: var(--radius); padding: 32px;
  text-align: center; color: var(--text-muted); transition: border-color .2s, background .2s;
  margin-bottom: 12px;
}
.drop-zone.drag-over { border-color: var(--primary); background: #EFF6FF; }
.drop-zone i { font-size: 2rem; color: var(--primary); margin-bottom: 8px; }
.drop-zone p { font-size: .85rem; margin-bottom: 10px; }
.drop-hint { font-size: .72rem; margin-top: 10px; opacity: .7; }
.import-options { display: flex; flex-direction: column; gap: 8px; }
.check-label { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--text-muted); cursor: pointer; }
.check-group { display: flex; gap: 16px; flex-wrap: wrap; }
.check-group label { display: flex; align-items: center; gap: 6px; font-size: .82rem; cursor: pointer; }
.manual-controls { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.sample-card {
  background: #F8FAFC; border: 2px solid var(--border); border-radius: var(--radius);
  padding: 16px; cursor: pointer; transition: border-color .15s, background .15s; text-align: center; min-width: 160px;
}
.sample-card:hover { border-color: var(--primary); background: #EFF6FF; }
.sample-card h4 { font-size: .85rem; font-weight: 700; margin: 8px 0 4px; }
.sample-card p  { font-size: .78rem; color: var(--text-muted); }
.sample-card small { font-size: .7rem; color: var(--text-muted); }

/* ── IMPORT PROGRESS ─────────────────────────── */
.import-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.7);
  display: flex; align-items: center; justify-content: center; z-index: var(--z-progress);
  pointer-events: all; cursor: wait;
}
.import-box {
  background: #fff; border-radius: var(--radius); padding: 28px 32px;
  min-width: 340px; max-width: 440px; box-shadow: var(--shadow-lg);
}
.import-header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.import-icon-pulse { font-size: 1.8rem; color: var(--primary); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.import-steps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.import-step { display: flex; align-items: center; gap: 10px; font-size: .82rem; }
.import-step-icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; flex-shrink: 0; }
.step-wait   .import-step-icon { background: #F1F5F9; color: #94A3B8; }
.step-active .import-step-icon { background: #DBEAFE; color: var(--ramp); animation: pulse 1s ease-in-out infinite; }
.step-done   .import-step-icon { background: #D1FAE5; color: var(--foh); }
.step-error  .import-step-icon { background: #FEE2E2; color: var(--danger); }
.import-progress-bar { height: 4px; background: var(--border); border-radius: 2px; margin-bottom: 10px; }
.import-progress-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .4s ease; }
.import-status-msg { font-size: .78rem; color: var(--text-muted); text-align: center; }

/* ── MODALS ──────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.6);
  display: flex; align-items: center; justify-content: center; z-index: var(--z-modal);
}
.modal-box {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 500px; max-height: 90vh; display: flex; flex-direction: column; margin: 20px;
}
.modal-box.large { max-width: 700px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-header h3 { font-size: .95rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.modal-close { color: var(--text-muted); padding: 4px 8px; border-radius: 6px; font-size: 1rem; }
.modal-close:hover { background: var(--bg); }
.modal-body { flex: 1; overflow-y: auto; padding: 20px; }
.modal-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: .78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: .82rem; outline: none; resize: vertical;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary); }
.form-group.form-check label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.staff-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── LOADING OVERLAY ─────────────────────────── */
.loading-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.5);
  display: flex; align-items: center; justify-content: center; z-index: var(--z-loading);
}
.loading-box { background: #fff; border-radius: var(--radius); padding: 28px 36px; text-align: center; box-shadow: var(--shadow-lg); }
.spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 12px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-box p { font-size: .85rem; color: var(--text-muted); }
.loading-inline { display: flex; align-items: center; gap: 10px; padding: 20px; color: var(--text-muted); font-size: .82rem; }

/* ── IMPORT PROGRESS OVERLAY ─────────────────── */
.import-progress-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.65);
  display: flex; align-items: center; justify-content: center; z-index: var(--z-progress);
  pointer-events: auto;
}
.import-progress-box {
  background: #fff; border-radius: var(--radius); padding: 28px 32px;
  width: 420px; max-width: 95vw; box-shadow: var(--shadow-lg);
}
.ip-header { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .92rem; margin-bottom: 18px; color: var(--primary); }
.ip-filename { font-size: .8rem; color: var(--text-muted); margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }
.ip-steps { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.ip-step { display: flex; align-items: center; gap: 10px; font-size: .8rem; padding: 4px 0; }
.ip-step .ip-icon { width: 20px; flex-shrink: 0; text-align: center; }
.ip-step .ip-label { flex: 1; color: var(--text); }
.ip-step .ip-status { font-size: .72rem; color: var(--text-muted); }
.ip-step.done   .ip-icon { color: var(--success); }
.ip-step.active .ip-icon { color: var(--ramp); }
.ip-step.error  .ip-icon { color: var(--danger); }
.ip-bar-wrap { height: 6px; background: var(--border); border-radius: 3px; margin-bottom: 10px; overflow: hidden; }
.ip-bar { height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 3px; transition: width .4s ease; }
.ip-msg { font-size: .78rem; color: var(--text-muted); text-align: center; min-height: 18px; }

/* ── IMPORT VALIDATION PANEL ────────────────── */
.import-vp {
  margin: 6px 0 4px;
  background: #FFFBEB; border: 1px solid #FCD34D; border-radius: 6px;
  font-size: .72rem;
}
.import-vp summary {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 12px; cursor: pointer; user-select: none;
  color: #92400E; font-weight: 600; list-style: none;
}
.import-vp summary::-webkit-details-marker { display: none; }
.import-vp summary i { color: #D97706; }
.ivp-hint { font-size: .65rem; font-weight: 400; color: #B45309; margin-left: auto; }
.import-vp[open]     .ivp-hint::before { content: 'clique para fechar'; }
.import-vp:not([open]) .ivp-hint::before { content: 'clique para ver'; }
.ivp-badge {
  display: inline-block; padding: 1px 7px; border-radius: 10px;
  background: #FEF3C7; color: #92400E; font-size: .65rem; font-weight: 700;
}
.ivp-table-wrap { padding: 0 12px 10px; max-height: 260px; overflow-y: auto; }
.ivp-table { width: 100%; border-collapse: collapse; font-size: .70rem; }
.ivp-table th { padding: 4px 6px; border-bottom: 1px solid #FCD34D; text-align: left; font-weight: 700; color: #78350F; position: sticky; top: 0; background: #FFFBEB; }
.ivp-table td { padding: 3px 6px; border-bottom: 1px solid #FEF3C7; vertical-align: top; }
.ivp-table tr:last-child td { border-bottom: none; }
.ivp-table td:first-child { color: var(--text-muted); text-align: right; width: 50px; }
.ivp-table td:nth-child(3) { color: #DC2626; font-weight: 600; }

/* ── DUPLICATE MODAL ─────────────────────────── */
.dupModal-open, #dupModal.open { display: flex !important; }
.dup-summary { display: flex; align-items: flex-start; gap: 12px; padding: 14px; background: #FFF7ED; border-radius: 8px; margin-bottom: 14px; font-size: .82rem; }
.dup-summary i { color: var(--warning); font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.dup-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .72rem; font-weight: 600; margin: 2px 4px; }
.dup-badge.internal { background: #FEF3C7; color: #92400E; }
.dup-badge.existing { background: #FCE7F3; color: #9D174D; }
.dup-table-wrap { max-height: 300px; overflow-y: auto; margin-bottom: 12px; }
.dup-table { width: 100%; border-collapse: collapse; font-size: .75rem; }
.dup-table th { background: #F8FAFC; padding: 6px 8px; text-align: left; font-weight: 600; border-bottom: 1px solid var(--border); }
.dup-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.dup-row:hover { background: #F8FAFC; }
.dup-cell-exist { color: var(--text-muted); }
.dup-cell-new   { color: var(--ramp); }
.dup-question   { font-size: .82rem; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.dup-btn { padding: 8px 16px; border-radius: var(--radius-sm); font-size: .8rem; font-weight: 600; cursor: pointer; transition: opacity .2s; }
.dup-btn:hover { opacity: .85; }
.dup-btn.cancel      { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
.dup-btn.keep        { background: #DBEAFE; color: #1D4ED8; }
.dup-btn.replace     { background: #D1FAE5; color: #065F46; }
.dup-btn.replace-all { background: #FEE2E2; color: #991B1B; }

/* ── STAFF IMPORT MODAL ──────────────────────── */
.import-hint-box { background: #F8FAFC; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 4px; font-size: .82rem; }
.import-hint-box p { margin-bottom: 8px; color: var(--text); }
.col-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.col-chip { padding: 3px 10px; border-radius: 12px; font-size: .72rem; font-weight: 600; background: #E2E8F0; color: #475569; }
.col-chip.req { background: #DBEAFE; color: #1D4ED8; }
.alert-warn  { background: #FFF7ED; border-left: 3px solid var(--warning); padding: 10px 14px; border-radius: 6px; font-size: .82rem; color: #92400E; }
.alert-error { background: #FEF2F2; border-left: 3px solid var(--danger);  padding: 10px 14px; border-radius: 6px; font-size: .82rem; color: #991B1B; }

/* ── TOASTS ──────────────────────────────────── */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  border-radius: var(--radius-sm); font-size: .82rem; font-weight: 500;
  box-shadow: var(--shadow-lg); opacity: 0; transform: translateX(20px);
  transition: opacity .3s, transform .3s; min-width: 260px; max-width: 380px;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast-success { background: #ECFDF5; color: #065F46; border-left: 3px solid var(--success); }
.toast-error   { background: #FEF2F2; color: #991B1B; border-left: 3px solid var(--danger); }
.toast-warn    { background: #FFFBEB; color: #92400E; border-left: 3px solid var(--warning); }
.toast-info    { background: #EFF6FF; color: #1E40AF; border-left: 3px solid var(--accent); }

/* ── GANTT Industrial Overhaul ────────────────────────────────── */
.gantt-wrapper {
  background: var(--brand-navy);
  border: 1px solid #2A3B55;
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  color: #E2E8F0;
  /* Both axes scroll so the horizontal bar is always anchored at the bottom of the box,
     never off-screen below a long row list. max-height keeps the box in the viewport. */
  overflow-x: scroll;
  overflow-y: auto;
  /* Fill the remaining viewport below the topbar (56px) + content-area padding +
     module header + legend so the planner gets the maximum vertical working area.
     Tuned so the box bottom lands just inside the viewport (no page-level scroll). */
  max-height: calc(100vh - 185px);
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #3B82F6 #0D1B2A;
}
.gantt-wrapper::-webkit-scrollbar        { height: 8px; width: 6px; }
.gantt-wrapper::-webkit-scrollbar-track  { background: #0D1B2A; }
.gantt-wrapper::-webkit-scrollbar-thumb  { background: #3B82F6; border-radius: 4px; }
.gantt-wrapper::-webkit-scrollbar-thumb:hover { background: #60A5FA; }
.gantt-inner {
  background: var(--brand-navy);
  min-width: 100%; /* fills the wrapper; expands further when trackWidth overflows */
}
.gantt-header {
  display: flex;          /* puts label-col and time-header side by side */
  align-items: stretch;
  background: #162439;
  border-bottom: 1px solid #2D3E5A;
  color: #94A3B8;
  position: sticky;
  top: 0;
  z-index: 10;
}
.gantt-time-cell {
  border-right: none;   /* no border on every 15-min cell */
  color: #64748B;
}
.gantt-time-cell.gantt-hour-mark {
  border-right: 1px solid rgba(255,255,255,0.12);  /* only on full hours */
  color: #94A3B8;
}
.gantt-row {
  display: flex;          /* puts row-label and row-track side by side */
  align-items: stretch;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  height: 40px;
}

/* ── Crew member rows (ROADMAP F-1, TC-3) ────────────────────────────────────
   Slimmer than a crew row and indented, so the eye reads them as belonging to
   the turnaround above rather than as turnarounds of their own. */
.gantt-row.gantt-crew-band { height: 22px; background: rgba(148,163,184,.035); }
.gantt-row.gantt-crew-band .gcb-label {
  display: flex; align-items: center; gap: 6px;
  padding-left: 16px; font-size: .64rem; overflow: hidden; white-space: nowrap;
}
.gantt-row.gantt-crew-band .gcb-role {
  font-weight: 700; color: #94A3B8; min-width: 30px; letter-spacing: .03em;
}
.gantt-row.gantt-crew-band .gcb-name { color: #4ADE80; overflow: hidden; text-overflow: ellipsis; }
.gantt-row.gantt-crew-band .gcb-name i,
.gantt-row.gantt-crew-band .gcb-empty i { opacity: .55; margin-right: 3px; }
/* An empty seat is work with no worker — it must read as a gap, not as a row
   that merely happens to be blank. */
.gantt-row.gantt-crew-band-empty { background: rgba(239,68,68,.06); }
.gantt-row.gantt-crew-band .gcb-empty { color: #F87171; font-style: italic; }
.gantt-row.gantt-crew-band .gantt-band-window { background: rgba(148,163,184,.10); }

/* Crew staffing count on the turnaround row itself. */
.gantt-crew-count {
  font-size: .6rem; font-weight: 700; padding: 0 4px; border-radius: 3px;
  background: rgba(74,222,128,.16); color: #4ADE80;
}
.gantt-crew-count.gantt-crew-short { background: rgba(239,68,68,.18); color: #F87171; }

/* Expand/collapse the people under a crew. Crews start collapsed, so this caret
   is the affordance that says there is something underneath — it only renders
   when the crew actually has bands. Kept deliberately small: it sits inside a
   label that is itself clickable (opens the team editor), so it needs its own
   hit area without stealing the row. */
.gantt-crew-caret {
  flex-shrink: 0; width: 13px; text-align: center; cursor: pointer;
  color: #64748B; font-size: .6rem; border-radius: 3px; line-height: 1.4;
}
.gantt-crew-caret:hover  { color: #E2E8F0; background: rgba(255,255,255,.09); }
.gantt-crew-caret:focus-visible {
  outline: 2px solid #38BDF8; outline-offset: 1px; color: #E2E8F0;
}
.gantt-row:hover {
  background: rgba(255,255,255,0.025);
}
.gantt-label {
  color: #94A3B8;
  font-family: var(--font-sans);
  border-right: 1px solid #2D3E5A;
  background: rgba(0,0,0,0.1);
}
.gantt-block {
  border-radius: 12px;
  font-family: var(--font-mono);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.2), 0 2px 4px rgba(0,0,0,0.2);
  background: linear-gradient(180deg, var(--brand-blue) 0%, #155ABF 100%);
  border: 1px solid rgba(0,0,0,0.1);
  color: #fff;
}
.gantt-block:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 12px var(--brand-blue);
}
.gantt-shift-window {
  background: rgba(255,255,255,0.035) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 4px;
}
.gantt-idle {
  background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255,255,255,0.025) 4px, rgba(255,255,255,0.025) 8px) !important;
}
.foh-gantt-wrapper {
  background: var(--brand-navy);
}
.foh-section-row {
  background: rgba(0,0,0,0.15);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.foh-section-label {
  color: #94A3B8;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.foh-alloc-gantt-row {
  background: transparent;
}
.foh-slot-row { border-bottom: 1px solid rgba(255,255,255,0.04); }
.foh-slot-label { color: #CBD5E1; background: rgba(0,0,0,0.12); }
.foh-slot-label-top { color: #E2E8F0; font-weight: 700; }
.foh-slot-label-btm { color: #94A3B8; }
.foh-task-block {
  background: linear-gradient(180deg, var(--brand-blue) 0%, #155ABF 100%);
  border: 1px solid rgba(0,0,0,0.1);
  color: #fff;
}
/* Grid lines */
.gantt-bar-area::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: var(--gantt-hour-px, 160px) 100%, var(--gantt-half-px, 80px) 100%;
}
/* ── INFO / EMPTY STATES ─────────────────────── */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; color: var(--text-muted); gap: 10px; text-align: center; }
.empty-state i  { font-size: 2rem; opacity: .4; }
.empty-state p  { font-size: .85rem; }
.info-notice    { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; border-radius: var(--radius-sm); padding: 10px 14px; font-size: .8rem; display: flex; align-items: center; gap: 8px; margin: 12px; }

/* ── DAY LABEL / SUMMARY ─────────────────────── */
.day-summary-badge { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600; flex-wrap: wrap; }
.day-summary-badge i { color: var(--primary); }

/* ── MOBILE ──────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar { position: fixed; left: -100%; transition: left .25s ease; width: var(--sidebar-w); }
  .sidebar.mobile-open { left: 0; box-shadow: var(--shadow-lg); }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
  .staff-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .content-area { padding: 12px; }
  .shifts-container { grid-template-columns: 1fr; }
  .cfg-grid { grid-template-columns: 1fr; }
  .staff-form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .module-header { flex-direction: column; align-items: flex-start; }
  .topbar-badges { display: none; }
}

/* ── GANTT SHARED (RAMP + FOH) ───────────────── */
.gantt-row-label {
  width: 210px; min-width: 210px; font-size: .72rem; flex-shrink: 0;
  padding: 0 10px; display: flex; align-items: center; gap: 5px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  border-right: 1px solid rgba(255,255,255,0.06);
  position: sticky; left: 0; z-index: 3;
  background: var(--brand-navy); /* keep opaque when pinned over scrolled content */
}
/* FOH slot label — 2-line layout, auto height */
.foh-slot-row .gantt-row-label {
  white-space: normal; overflow: visible;
  align-items: flex-start; height: auto;
  min-height: 52px; padding: 6px 10px;
  flex-direction: column; gap: 3px;
}
.gantt-row-track {
  position: relative; height: 100%; flex-shrink: 0; overflow: visible;
}
.gantt-label-col {
  width: 210px; min-width: 210px; font-size: .72rem; font-weight: 700;
  color: #64748B; flex-shrink: 0; padding: 0 10px;
  border-right: 1px solid rgba(255,255,255,0.06);
  position: sticky; left: 0; z-index: 5;
  background: #162439; /* header background, stays opaque when pinned */
}
.gantt-time-header { display: flex; overflow: visible; }
.gantt-time-cell {
  flex-shrink: 0; font-size: .64rem; color: #4A5568;
  text-align: center; padding: 5px 0;
  white-space: nowrap; overflow: hidden;
}
.shift-pip {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block;
}

/* ── Gantt section separator rows (shift / FOH type header) ── */
.gantt-section-row {
  min-height: 26px !important; height: 26px !important;
  background: rgba(10,18,32,0.6) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  border-top: 1px solid rgba(255,255,255,0.04) !important;
}
.gantt-section-row .gantt-row-label {
  background: #0c1523; /* darker shade matching section row, stays opaque when sticky-pinned */
}

.gantt-shift-window {
  position: absolute; top: 3px; bottom: 3px; border-radius: 5px;
  background: rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.06);
}
.gantt-idle {
  position: absolute; top: 9px; bottom: 9px; border-radius: 2px;
  background: repeating-linear-gradient(45deg,transparent,transparent 3px,rgba(0,0,0,.04) 3px,rgba(0,0,0,.04) 6px);
}
.gantt-break-block {
  position: absolute; top: 5px; bottom: 5px; border-radius: 4px;
  background: #475569; opacity: .65; z-index: 3;
}
.gantt-break-forced {
  background: repeating-linear-gradient(45deg,#7f1d1d,#7f1d1d 4px,#fca5a5 4px,#fca5a5 8px);
  opacity: .8;
}
.gantt-block.meal-conflict {
  box-shadow: 0 0 0 2px #EF4444, 0 0 6px #EF4444;
  animation: mealConflictPulse 1.5s ease-in-out infinite;
}
.meal-conflict-badge {
  font-size: .7rem; margin-right: 2px; flex-shrink: 0;
}

/* ── A2 pt.2 — actual-vs-planned drift ──────────────────────────────────────
   Annotation only. Nothing here may change the block's geometry: drag
   drop-targeting, overlap detection and meal placement all read that
   rectangle. The tail is a separate absolutely-positioned element for exactly
   that reason, and is aria-hidden because the badge already carries the text. */
.drift-badge {
  font-size: .62rem; font-weight: 700; margin-right: 3px; flex-shrink: 0;
  padding: 0 3px; border-radius: 3px; line-height: 1.4;
  background: rgba(0, 0, 0, .28); color: #fff;
  font-variant-numeric: tabular-nums;
}
/* An estimate is not an observation — say so rather than implying certainty.
   The badge also carries a leading "~"; styling alone was not legible at real
   block widths. The tail goes dashed for the same reason. */
.drift-badge.drift-est { font-style: italic; opacity: .9; }

.gantt-drift-tail {
  position: absolute; top: 50%; height: 3px; margin-top: -1.5px;
  border-radius: 2px; pointer-events: none; opacity: .75;
  z-index: 1;   /* under .gantt-block; local stacking, never a --z-* token */
}
.gantt-drift-tail.drift-minor { background: #64748B; }
.gantt-drift-tail.drift-warn  { background: #F59E0B; }
.gantt-drift-tail.drift-late  { background: #EF4444; }
/* Estimated, not observed — dashed so the difference survives a glance. */
.gantt-drift-tail.drift-est {
  background-image: repeating-linear-gradient(
    90deg, rgba(255,255,255,.85) 0 3px, transparent 3px 6px);
  background-blend-mode: destination-out;
}

.gantt-block.drift-warn { box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .9); }
.gantt-block.drift-late { box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .95); }
@keyframes mealConflictPulse {
  0%,100% { box-shadow: 0 0 0 2px #EF4444, 0 0 6px #EF4444; }
  50%      { box-shadow: 0 0 0 3px #EF4444, 0 0 12px #EF4444; }
}
/* BUS task dragged onto a driver who already has an overlapping task */
.gantt-block.bus-overlap-conflict {
  box-shadow: 0 0 0 2px #F59E0B, 0 0 6px #F59E0B;
  animation: busOverlapPulse 1.5s ease-in-out infinite;
}
@keyframes busOverlapPulse {
  0%,100% { box-shadow: 0 0 0 2px #F59E0B, 0 0 6px #F59E0B; }
  50%      { box-shadow: 0 0 0 3px #F59E0B, 0 0 12px #F59E0B; }
}
.gantt-block {
  position: absolute; top: 6px; bottom: 6px; border-radius: 8px;
  font-size: .66rem; font-weight: 700; z-index: 4;
  display: flex; align-items: center; padding: 0 6px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  cursor: pointer; transition: filter .15s, transform .1s;
  box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.18);
}
.gantt-block:hover { filter: brightness(1.12); transform: scaleY(1.05); z-index: 5; }

/* FOH slot rows are sized in the comprehensive block below (~line 1298) */

/* ── GANTT LEGEND (RAMP + FOH shared base) ───────────────────── */
.gantt-legend {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px; padding: 8px 4px 10px;
}
.gleg {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  border: 1px solid rgba(0,0,0,.18);
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  white-space: nowrap; cursor: default;
}
.gleg i { font-size: .7rem; opacity: .9; }

/* ── FOH GANTT SPECIFIC ──────────────────────── */
.foh-gantt-legend {
  flex-wrap: wrap; gap: 6px; padding: 8px 0 10px;
}
.foh-gantt-legend .gleg {
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.foh-gantt-filter-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0 10px; flex-wrap: wrap;
}
.foh-gantt-filter-label { font-size: .78rem; font-weight: 600; color: #94A3B8; }
/* FOH carries an extra group-by/filter row above the wrapper, so it needs a slightly
   larger offset than RAMP to keep the box bottom inside the viewport. */
.foh-gantt-wrapper { max-height: calc(100vh - 205px); overflow-y: auto; }
.foh-section-row { min-height: 26px; height: 26px; }
.foh-section-label {
  font-size: .75rem; font-weight: 700; gap: 6px;
}
.foh-section-track { border-bottom: 1px dashed rgba(255,255,255,0.05); }
.foh-alloc-gantt-row { height: 36px; }
.foh-alloc-label {
  flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 1px; padding: 2px 8px;
}
.foh-alloc-label-main {
  font-size: .72rem; font-weight: 600; line-height: 1.2;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%;
}
.foh-alloc-label-sub {
  display: flex; align-items: center; gap: 4px;
}
.foh-gantt-flt-badge {
  display: inline-block; font-size: .62rem; font-weight: 700;
  background: rgba(30,111,217,0.2); color: var(--brand-blue); border-radius: 4px; padding: 0 4px;
}
.foh-gantt-route { font-size: .62rem; color: #64748B; }
.foh-gantt-ndm {
  display: inline-block; font-size: .58rem; font-weight: 800;
  background: rgba(30,111,217,0.1); color: var(--brand-blue); border-radius: 4px; padding: 0 4px;
}
.foh-type-pip {
  display: inline-block; font-size: .6rem; font-weight: 700; border-radius: 6px;
  padding: 1px 6px; white-space: nowrap;
}
.foh-gantt-shift-pill {
  font-size: .6rem; font-weight: 700; border-radius: 6px; padding: 1px 5px; white-space: nowrap;
}
.foh-gantt-staff-pill {
  font-size: .62rem; color: #10B981; font-weight: 600;
  background: rgba(16,185,129,0.1); padding: 1px 5px; border-radius: 6px;
}
.foh-gantt-staff-unset {
  font-size: .62rem; color: #64748B; cursor: pointer;
  background: rgba(255,255,255,0.05); padding: 1px 5px; border-radius: 6px;
  transition: background .15s;
}
.foh-gantt-staff-unset:hover { background: rgba(30,111,217,0.1); color: var(--brand-blue); }
.foh-task-block {
  cursor: pointer; border-radius: 5px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.foh-shift-window {
  background: rgba(255,255,255,0.02) !important;
}
.foh-break-block { z-index: 5; }

/* FOH time markers */
/* ── Current-time marker (shared RAMP + FOH, ROADMAP A2) ──────────────────────
   z-index here is deliberately a small LOCAL integer, not a --z-* token: this
   lives inside .gantt-inner's own stacking context, which the token scale
   explicitly carves out. The value matters — 2 puts the line BELOW the sticky
   label column (z 3) and below .gantt-block (z 4), so it reads as a background
   rule and is correctly occluded by the pinned staff names when the Gantt is
   scrolled horizontally. FOH's original marker sat at 4 and painted straight
   across those names. */
.gantt-now-overlay {
  position: absolute; top: 0; right: 0; bottom: 0;
  pointer-events: none; overflow: hidden; z-index: 2;
}
.gantt-now, .foh-gantt-now {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: #EF4444; pointer-events: none;
  box-shadow: 0 0 4px #EF4444;
}
.gantt-now::before, .foh-gantt-now::before {
  content: 'NOW'; position: absolute; top: 2px; left: 3px;
  font-size: .55rem; font-weight: 800; color: #EF4444; white-space: nowrap;
}
/* Always-visible companion in the sticky header, so the current time stays
   readable when the line itself is hidden behind dense blocks or scrolled off.
   4 sits below .gantt-label-col (5) so it clips at the label boundary. */
.gantt-now-flag {
  position: absolute; top: 1px; transform: translateX(-50%);
  font-size: .55rem; font-weight: 800; color: #fff; background: #EF4444;
  border-radius: 3px; padding: 0 3px; white-space: nowrap;
  pointer-events: none; z-index: 4;
}
.foh-gantt-sta {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: #6366F1; z-index: 8; pointer-events: none; opacity: .25;
  border-left: 1px dashed #6366F1;
}
.foh-gantt-std {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: #10B981; z-index: 8; pointer-events: none; opacity: .25;
  border-left: 1px dashed #10B981;
}

/* FOH flight legend chips */
.foh-gantt-flight-legend {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 0;
  margin-top: 4px; border-top: 1px solid var(--border);
}
.foh-gantt-flt-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: #F8FAFC; border: 1px solid var(--border);
  border-radius: 8px; padding: 4px 10px; font-size: .72rem;
}
.foh-gantt-flt-nr   { font-weight: 700; color: var(--primary); }
.foh-gantt-flt-route{ color: var(--text-muted); }
.foh-gantt-flt-times{ color: #0369A1; font-size: .68rem; }

/* Gantt wrapper inner */
.gantt-wrapper-inner { min-width: 1200px; padding: 12px; }

/* ── FOH Slot Row ─────────────────────────────────────────── */
.foh-slot-row { min-height: 52px; height: auto; }
.foh-slot-label {
  flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 3px; padding: 6px 10px; min-height: 52px;
}
.foh-slot-label-top {
  display: flex; align-items: center; gap: 5px;
  font-size: .69rem; line-height: 1.2; width: 100%; overflow: hidden;
}
.foh-slot-label-btm {
  display: flex; align-items: center; gap: 4px;
  font-size: .63rem; width: 100%; overflow: hidden;
}
.foh-slot-type-chip {
  display: inline-block; font-size: .58rem; font-weight: 700;
  border-radius: 4px; padding: 1px 5px; white-space: nowrap; flex-shrink: 0;
  line-height: 1.5; vertical-align: middle;
}
.foh-slot-time { font-size: .62rem; color: #64748B; white-space: nowrap; }
.foh-slot-staff {
  font-size: .63rem; color: #34D399; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.foh-slot-staff.unset {
  color: #64748B; cursor: pointer; padding: 1px 5px;
  background: rgba(255,255,255,.06); border-radius: 4px;
  transition: background .12s; border: 1px dashed rgba(255,255,255,.15);
}
.foh-slot-staff.unset:hover { background: rgba(30,111,217,.15); color: #93C5FD; }

/* gantt-row-track and block sizing */
.foh-slot-row .gantt-row-track { min-height: 52px; position: relative; overflow: visible; }
.foh-slot-row .gantt-block     { top: 10px; bottom: 10px; height: auto; border-radius: 7px; font-size: .67rem; }

/* FOH slot label: 2-line layout */
.foh-slot-row .gantt-row-label {
  white-space: normal; overflow: visible;
  align-items: flex-start; height: auto; min-height: 52px;
}

/* ═══════════════════════════════════════════════════════════════
   DRAG & DROP — Gantt Interactive (gantt-drag.js)
   ═══════════════════════════════════════════════════════════════ */

/* Draggable blocks get grab cursor */
.gantt-block[data-op-id],
.gantt-block[data-slot-id] {
  cursor: grab;
  user-select: none;
}
.gantt-block[data-op-id]:active,
.gantt-block[data-slot-id]:active { cursor: grabbing; }

/* While dragging: source block faded */
.gantt-block.dragging-source { opacity: .25 !important; }

/* Drop zone highlight when something is being dragged */
.gantt-row-track.gantt-drop-zone {
  outline: 2px dashed #CBD5E1;
  outline-offset: -2px;
  background: rgba(46,110,166,.04) !important;
}
.gantt-row-track.gantt-drop-active {
  outline: 2px solid var(--brand-blue) !important;
  background: rgba(46,110,166,.10) !important;
}

/* BUS drop zone highlight */
.bus-drop-zone { transition: background .15s; }
.bus-drop-zone.bus-dz-active { background: rgba(8,145,178,.18) !important; outline: 2px dashed #0891B2; outline-offset: -2px; }

/* Ghost element */
.gantt-drag-ghost {
  cursor: grabbing !important;
  border-radius: 5px;
  outline: 2px solid rgba(14,165,233,.7);
  transition: none !important;
}

/* Floating snap-time tooltip */
.gantt-snap-indicator {
  position: fixed;
  background: #0F172A;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  pointer-events: none;
  z-index: var(--z-tooltip);
  display: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* ── Context menu ─────────────────────────────────── */
.gantt-ctx-menu {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.14);
  padding: 4px 0;
  min-width: 180px;
  font-size: .82rem;
}
.ctx-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; width: 100%; text-align: left;
  cursor: pointer; transition: background .12s;
  color: #374151; font-family: inherit; font-size: .82rem;
  background: none; border: none;
}
.ctx-item:hover  { background: #F1F5F9; }
.ctx-item.ctx-danger  { color: var(--danger); }
.ctx-item.ctx-danger:hover { background: #FEF2F2; }
.ctx-item i { width: 14px; text-align: center; opacity: .7; }
.ctx-sep { height: 1px; background: #E2E8F0; margin: 3px 0; }

/* ── Gantt toolbar buttons (Undo / Save) ──────────── */
.gantt-toolbar-extra {
  display: flex; align-items: center; gap: 6px;
}
.gantt-undo-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 8px; font-size: .74rem; font-weight: 600;
  color: #475569; background: #F1F5F9; border: 1px solid #CBD5E1;
  cursor: pointer; transition: all .15s; font-family: inherit;
}
.gantt-undo-btn:hover:not(:disabled) { background: #E2E8F0; color: #1E293B; }
.gantt-undo-btn:disabled { opacity: .35; cursor: not-allowed; }
.gantt-save-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 8px; font-size: .74rem; font-weight: 600;
  color: #fff; background: var(--success); border: 1px solid #059669;
  cursor: pointer; transition: all .15s; font-family: inherit;
}
.gantt-save-btn:hover { background: #059669; }
.gantt-save-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #CBD5E1; transition: background .4s; margin-left: 3px;
}

/* ── Task / Team editor form ──────────────────────── */
.edit-form { display: flex; flex-direction: column; gap: 10px; }
.edit-row {
  display: flex; align-items: center; gap: 10px;
  font-size: .84rem;
}
.edit-row label {
  min-width: 120px; flex-shrink: 0; font-weight: 600; color: var(--text-muted);
  font-size: .78rem;
}
.edit-row .edit-val { flex: 1; color: #1E293B; }
.edit-row .edit-val.strong { font-weight: 700; }
.edit-row .time-input {
  flex: 1; padding: 5px 8px; border: 1px solid #CBD5E1; border-radius: 6px;
  font-size: .84rem; background: #fff; max-width: 120px;
}
.edit-row .time-input:focus { border-color: var(--accent); outline: none; }
.cat-badge-sm {
  display: inline-block; font-size: .7rem; font-weight: 700;
  border-radius: 6px; padding: 2px 7px;
}

/* ── FOH CONFIG UI extras ─────────────────────────────────────── */
.cfg-info-badge {
  display: inline-block; font-size: .68rem; font-weight: 600;
  background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D;
  border-radius: 20px; padding: 2px 10px; margin-left: 8px; vertical-align: middle;
}
.cfg-note {
  font-size: .75rem; color: #6B7280; background: #F8FAFC;
  border-left: 3px solid #CBD5E1; padding: 6px 10px;
  border-radius: 0 6px 6px 0; margin: 8px 0 0; line-height: 1.4;
}
.cfg-note-inline {
  font-size: .68rem; color: var(--text-muted); font-weight: 400;
}

/* ── Config toggle checkboxes ────────────────────────────────── */
.cfg-toggle-label {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: #F8FAFC; transition: background .15s, border-color .15s;
}
.cfg-toggle-label:hover { background: #EFF6FF; border-color: #93C5FD; }
.cfg-toggle-label input[type=checkbox] {
  width: 16px; height: 16px; margin-top: 2px; cursor: pointer; accent-color: var(--primary);
  flex-shrink: 0;
}
.cfg-toggle-text {
  font-size: .82rem; font-weight: 600; color: #374151; line-height: 1.4;
}
.cfg-toggle-text i { margin-right: 5px; color: var(--accent); }
.cfg-field-full { grid-column: 1 / -1; }

/* ── Export cards ─────────────────────────────────────────────── */
.btn-foh {
  background: linear-gradient(135deg, var(--foh), #047857) !important;
  color: #fff !important;
}

/* ── FOH config-dirty indicator ─────────────────────────────────────── */
.foh-cfg-dirty-banner {
  display: flex; align-items: center; gap: 10px;
  background: #FEF3C7; border: 1px solid #FCD34D; border-radius: 8px;
  color: #92400E; font-size: .8rem; font-weight: 600;
  padding: 8px 16px; margin: 6px 0 2px;
  animation: fohDirtySlideIn .25s ease;
}
.foh-cfg-dirty-banner i { color: #F59E0B; font-size: .9rem; flex-shrink: 0; }
@keyframes fohDirtySlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.btn-foh.cfg-dirty-pulse {
  animation: cfgDirtyPulse 1.6s ease-in-out infinite !important;
  box-shadow: 0 0 0 0 rgba(245,158,11,.7) !important;
}
@keyframes cfgDirtyPulse {
  0%   { box-shadow: 0 0 0 0   rgba(245,158,11,.7); }
  60%  { box-shadow: 0 0 0 8px rgba(245,158,11,0);  }
  100% { box-shadow: 0 0 0 0   rgba(245,158,11,0);  }
}

.foh-hist-chip {
  display: flex; align-items: center; gap: 8px;
  background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 8px;
  padding: 8px 14px; margin-bottom: 12px; font-size: .8rem; color: #1E40AF;
}
.foh-hist-chip strong { font-weight: 800; }
.foh-break-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .62rem; color: #92400E; background: #FEF3C760;
  border-radius: 4px; padding: 0 5px; margin-left: 4px;
}

/* ══ CONSTRAINT CONFIG SECTION ══════════════════════════════════════ */
.constraint-config-section {
  border-left: 3px solid #F59E0B !important;
  background: linear-gradient(90deg, rgba(245,158,11,.04) 0%, transparent 70%) !important;
}
.constraint-config-section h3 { color: #92400E !important; }
.constraint-config-section h3 i { color: #F59E0B !important; }

/* Dept isolation badges (RAMP / FOH pills on section headers) */
.cfg-dept-badge {
  display: inline-flex; align-items: center;
  padding: 1px 9px; border-radius: 999px;
  font-size: .6rem; font-weight: 700; letter-spacing: .06em;
  margin-left: 8px; border: 1px solid; vertical-align: middle;
}
.ramp-dept-badge { background: rgba(27,94,166,.12); color: #1B5EA6; border-color: rgba(27,94,166,.3); }
.foh-dept-badge  { background: rgba(15,118,110,.12); color: #0F766E; border-color: rgba(15,118,110,.3); }

/* FOH shift cards — teal accent to differentiate from RAMP orange */
.foh-shift-card { border-left: 3px solid #0F766E !important; }
.foh-shift-card .shift-card-header h4 { color: #0F766E; }

/* ══ GANTT: CONSTRAINT ZONE OVERLAY (amber striped, first N min) ════ */
.gantt-constraint-zone {
  position: absolute; top: 0; bottom: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 3px,
    rgba(245,158,11,.13) 3px, rgba(245,158,11,.13) 6px
  );
  border-right: 2px dashed rgba(245,158,11,.5);
}

/* Violation: task block falls inside the constraint zone */
.gantt-block.constraint-violation {
  outline: 2px solid #EF4444 !important;
  outline-offset: -1px;
  box-shadow: 0 0 0 3px rgba(239,68,68,.2) !important;
}

/* Violation chip shown in the row label area */
.gantt-constraint-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .58rem; font-weight: 700;
  background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA;
  border-radius: 4px; padding: 0 4px; margin-left: 4px;
  vertical-align: middle;
}

/* ── Shift restrictions / preferences in staff modal ─────────── */
.shift-restriction-checks {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px;
}
.sr-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; cursor: pointer; padding: 4px 10px;
  border: 1px solid var(--border); border-radius: 20px;
  background: #F8FAFC; transition: background .15s, border-color .15s;
}
.sr-check:hover { background: #EFF6FF; border-color: #93C5FD; }
.sr-check input[type=checkbox] { margin: 0; cursor: pointer; }
.sr-check input:checked ~ .sr-pill, .sr-check input:checked ~ span:last-child { font-weight: 800; }
.sr-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-size: .68rem; font-weight: 800;
}
.sr-pill.morning      { background: #FEF3C7; color: #92400E; }
.sr-pill.intermediate { background: #E0F2FE; color: #0369A1; }
.sr-pill.late         { background: #FCE7F3; color: #9D174D; }
.sr-pill.night        { background: #1E293B; color: #CBD5E1; }

/* ── Roster legend for shift types ───────────────────────────── */
.rc.morning      { background: #FEF3C7; color: #92400E; }
.rc.intermediate { background: #E0F2FE; color: #0369A1; }
.rc.late         { background: #FCE7F3; color: #9D174D; }
.rc.night        { background: #1E293B; color: #CBD5E1; }
.rc.restricted   { background: #FEE2E2; color: #991B1B; cursor: not-allowed; }

/* ── Roster cell with allocated staff name ────────────────────── */
.roster-cell.allocated .rc.shift { font-size: .6rem; max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-alloc-badge { font-size: .58rem; color: #059669; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Staff card: restriction & preference flags ───────────────── */
.staff-shift-flags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.staff-restrictions, .staff-prefs {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .65rem;
}


/* ── Merge distribution panel ─────────────────────────────────── */
.merge-panel {
  background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 10px;
  padding: 14px 18px; margin-top: 14px;
}
.merge-panel h4 { font-size: .85rem; color: #065F46; margin: 0 0 10px; }
.merge-stats { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.merge-stat { text-align: center; }
.merge-stat-val { font-size: 1.4rem; font-weight: 800; color: #059669; display: block; }
.merge-stat-lbl { font-size: .68rem; color: #6B7280; }
.merge-warnings { font-size: .75rem; color: #B45309; background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 6px; padding: 6px 10px; margin-top: 8px; }
.merge-warnings li { margin: 2px 0; }
.unmet-slot { background: #FEE2E2; border-radius: 4px; padding: 2px 6px; font-size: .72rem; color: #991B1B; margin: 2px; display: inline-block; }

/* ── FOH Coverage Banner ─────────────────────────────────────── */
.foh-coverage-banner {
  background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 10px;
  padding: 12px 16px; margin-bottom: 14px;
}
.foh-cov-title { font-size: .78rem; font-weight: 700; color: #065F46; margin-bottom: 8px; }
.foh-cov-tags  { display: flex; flex-wrap: wrap; gap: 8px; }
.foh-cov-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; padding: 3px 9px; border-radius: 20px; font-weight: 600;
}
.foh-cov-tag.kiosk  { background: #EDE9FE; color: #5B21B6; }
.foh-cov-tag.tkt    { background: #F3F4F6; color: #374151; border: 1px solid #D1D5DB; }
.foh-cov-tag.sup    { background: #FEE2E2; color: #991B1B; }
.foh-cov-tag.ops    { background: #FEF3C7; color: #92400E; }

/* ── FOH Type note (presets info row) ────────────────────────── */
.foh-type-note {
  font-size: .72rem; color: #6B7280; padding: 5px 12px 0;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.foh-sup-cap {
  background: #FEE2E2; color: #991B1B; border-radius: 10px;
  padding: 1px 7px; font-size: .68rem; font-weight: 700; margin-left: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   UNSAVED CHANGES BANNER (RAMP + FOH)
   ═══════════════════════════════════════════════════════════════ */
.unsaved-banner {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 8px;
  margin: 8px 0;
  font-size: .82rem;
  font-weight: 500;
  animation: slideDown .2s ease;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-hi);
  flex-wrap: wrap;
}
.unsaved-banner-ramp {
  background: #FFFBEB;
  border: 1px solid #FCD34D;
  color: #92400E;
}
.unsaved-banner-foh {
  background: #EFF6FF;
  border: 1px solid #93C5FD;
  color: #1E40AF;
}
.unsaved-banner i.fa-exclamation-triangle {
  font-size: 1rem;
  flex-shrink: 0;
}
.unsaved-banner span { flex: 1; min-width: 160px; }
.btn-unsaved-discard {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: 6px; font-size: .76rem; font-weight: 600;
  cursor: pointer; border: none; transition: background .15s;
  font-family: inherit;
}
.unsaved-banner-ramp .btn-unsaved-discard {
  background: #FDE68A; color: #78350F;
}
.unsaved-banner-ramp .btn-unsaved-discard:hover {
  background: #FCD34D;
}
.unsaved-banner-foh .btn-unsaved-discard {
  background: #BFDBFE; color: #1E40AF;
}
.unsaved-banner-foh .btn-unsaved-discard:hover {
  background: #93C5FD;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Draft badge (shown on month view days not yet saved) ─────── */
.draft-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .62rem; font-weight: 700; padding: 1px 6px;
  border-radius: 10px; background: #FEF3C7; color: #92400E;
  border: 1px solid #FCD34D; white-space: nowrap;
}
.draft-badge-foh {
  background: #EFF6FF; color: #1E40AF; border-color: #BFDBFE;
}

/* ── Generate Month button ────────────────────────────────────── */
.btn-generate-month {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 18px; border-radius: 8px; font-size: .84rem;
  font-weight: 600; cursor: pointer; border: none;
  background: var(--primary); color: #fff;
  transition: background .15s, box-shadow .15s;
  font-family: inherit;
}
.btn-generate-month:hover { background: var(--primary-light); }
.btn-generate-month:disabled { opacity: .4; cursor: not-allowed; }

/* ── Save Changes button ──────────────────────────────────────── */
.btn-save-changes {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 18px; border-radius: 8px; font-size: .84rem;
  font-weight: 600; cursor: pointer; border: none;
  background: var(--success); color: #fff;
  transition: background .15s; font-family: inherit;
}
.btn-save-changes:hover:not(:disabled) { background: #047857; }
.btn-save-changes:disabled { opacity: .4; cursor: not-allowed; }

/* ── Unallocated tasks panel ─────────────────────────────────── */
.unallocated-panel {
  background: #FFF7ED; border: 1px solid #FED7AA;
  border-radius: 10px; padding: 14px 16px; margin-top: 12px;
}
.unallocated-panel h4 {
  font-size: .82rem; font-weight: 700; color: #9A3412; margin: 0 0 10px;
  display: flex; align-items: center; gap: 8px;
}
.unallocated-task-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px solid #FED7AA; font-size: .78rem;
}
.unallocated-task-row:last-child { border-bottom: none; }
.unallocated-candidate {
  font-size: .72rem; color: #6B7280; flex: 1; min-width: 120px;
}
.btn-accept-candidate {
  padding: 3px 10px; border-radius: 6px; font-size: .72rem;
  font-weight: 600; cursor: pointer; border: 1px solid #D97706;
  background: #FEF3C7; color: #92400E; transition: background .12s;
  font-family: inherit;
}
.btn-accept-candidate:hover { background: #FDE68A; }
.btn-reject-candidate {
  padding: 3px 10px; border-radius: 6px; font-size: .72rem;
  font-weight: 600; cursor: pointer; border: 1px solid #D1D5DB;
  background: #F3F4F6; color: #6B7280; transition: background .12s;
  font-family: inherit;
}
.btn-reject-candidate:hover { background: #E5E7EB; }

/* ── Constraint violation tooltip ───────────────────────────── */
.constraint-violation {
  background: #FEE2E2; border: 1px solid #FCA5A5;
  border-radius: 6px; padding: 5px 10px; font-size: .74rem;
  color: #991B1B; margin-top: 4px;
}
.constraint-soft {
  background: #FFFBEB; border: 1px solid #FCD34D;
  color: #92400E;
}

/* ── Month planning grid ─────────────────────────────────────── */
.month-gen-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid var(--border); margin-top: 8px;
}
.month-gen-label {
  font-size: .75rem; color: var(--text-muted); font-weight: 600;
}
.month-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px; margin-top: 14px;
}
.month-plan-day {
  background: #fff; border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
}
.month-plan-day:hover { box-shadow: 0 3px 10px rgba(0,0,0,.09); border-color: var(--accent); }
.month-plan-day.has-draft { border-color: #FCD34D; background: #FFFEF0; }
.month-plan-day.has-saved { border-color: #BBF7D0; background: #F0FDF4; }
.month-plan-day.no-flights { background: #F9FAFB; opacity: .6; cursor: default; }
.mpd-date { font-size: .7rem; color: var(--text-muted); font-weight: 600; }
.mpd-flights { font-size: 1.2rem; font-weight: 800; color: var(--primary); }
.mpd-staff { font-size: .68rem; color: var(--text-muted); }


/* ── FOH Preset badge (on alloc rows) ────────────────────────── */
.foh-preset-badge {
  display: inline-block; font-size: .65rem; background: #F3F4F6;
  border: 1px solid #D1D5DB; color: #374151; border-radius: 4px;
  padding: 0 5px; margin-left: 5px; font-family: monospace;
}

/* ── Unallocated task acceptance panel ───────────────────────── */
.unallocated-panel {
  margin-top: 16px; border: 1.5px solid #FCA5A5; border-radius: 10px;
  background: #FFF5F5; overflow: hidden;
}
.unalloc-header {
  display: flex; align-items: center; gap: 8px;
  background: #FEE2E2; padding: 8px 14px;
  font-size: .8rem; font-weight: 700; color: #991B1B;
}
.unalloc-task-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 14px; border-bottom: 1px solid #FECACA; font-size: .78rem;
}
.unalloc-task-row:last-child { border-bottom: none; }
.unalloc-flt  { font-weight: 700; color: #1E3A5F; min-width: 70px; }
.unalloc-time { color: #475569; font-family: monospace; }
.unalloc-suggest { color: #64748B; font-style: italic; flex: 1; min-width: 120px; }
.btn-accept-unalloc {
  padding: 4px 12px; border-radius: 6px; border: none; cursor: pointer;
  background: #10B981; color: #fff; font-size: .72rem; font-weight: 700;
  white-space: nowrap;
}
.btn-accept-unalloc:hover { background: #059669; }

/* ── Validation panel (errors / warnings) ────────────────────── */
.validation-panel { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.validation-block { border-radius: 10px; overflow: hidden; border: 1.5px solid; }
.validation-block.vp-error { border-color: #FCA5A5; background: #FFF5F5; }
.validation-block.vp-warn  { border-color: #FCD34D; background: #FFFBEB; }
.validation-block .vp-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; font-size: .8rem; font-weight: 700;
}
.validation-block.vp-error .vp-header { background: #FEE2E2; color: #991B1B; }
.validation-block.vp-warn  .vp-header { background: #FEF3C7; color: #92400E; }
.validation-block .vp-list { margin: 0; padding: 6px 14px 10px 30px; list-style: disc; }
.validation-block .vp-list li { font-size: .76rem; line-height: 1.5; }
.validation-block.vp-error .vp-list li { color: #B91C1C; }
.validation-block.vp-warn  .vp-list li { color: #78350F; }
.validation-block .vp-list li.vp-more { list-style: none; font-style: italic; opacity: .8; }

/* ── Per-day BUS toggle + add-task modal ─────────────────────── */
.bus-day-toggle {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: .78rem; font-weight: 700; color: #0891B2;
  padding: 3px 8px; border: 1px solid #0891B2; border-radius: 6px; user-select: none;
}
.bus-day-toggle input { accent-color: #0891B2; cursor: pointer; }
.bus-pick-list { display: flex; flex-direction: column; gap: 6px; }
.bus-pick-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 8px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px;
}
.bus-pick-flt { font-weight: 800; min-width: 64px; color: #1E3A5F; font-size: .8rem; }
.bus-pick-btn {
  padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: .72rem; font-weight: 700;
  border: 1px solid #0891B2; background: #ECFEFF; color: #0E7490; white-space: nowrap;
}
.bus-pick-btn.dep { background: #EEF2FF; color: #4338CA; border-color: #6366F1; }
.bus-pick-btn:hover { filter: brightness(.96); }

/* ── BH Baggage Hall histogram track ────────────────────────── */
.bh-histogram-row { align-items: stretch; }
.bh-histogram-row .gantt-row-label {
  font-size: .6rem; opacity: .6; flex-direction: column;
  align-items: flex-end; justify-content: space-between;
  padding-right: 6px; padding-top: 2px; padding-bottom: 2px;
}
.bh-track {
  height: 52px !important; position: relative;
  background: #F5F3FF; border-top: 1px solid #7C3AED22;
  overflow: hidden;
}
.bh-bar {
  position: absolute; bottom: 0; border-radius: 2px 2px 0 0;
  opacity: .85; transition: opacity .15s;
}
.bh-bar:hover { opacity: 1; }

/* ── Shift history panel ─────────────────────────────────────── */
.shift-hist-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.shift-hist-row:last-child { border-bottom: none; }
.shift-hist-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: 1; }
.shift-hist-ver  { font-weight: 800; color: #3B82F6; font-size: .78rem; min-width: 28px; }
.shift-hist-ts   { font-size: .75rem; color: #374151; }
.shift-hist-meta { font-size: .72rem; color: #64748B; }
.shift-hist-by   { font-size: .7rem; }

/* ── Coverage notification badge ─────────────────────────────── */
.coverage-badge {
  display: none; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 6px;
  font-size: .72rem; font-weight: 700;
  background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D;
}
.coverage-badge.ok {
  background: #DCFCE7; color: #166534; border-color: #86EFAC;
}

/* ── Config textarea for presets ─────────────────────────────── */
.cfg-textarea {
  width: 100%; max-width: 340px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 7px 10px; font-size: .78rem;
  font-family: 'Courier New', monospace; line-height: 1.6;
  background: #FAFAFA; resize: vertical; min-height: 80px;
}
.cfg-textarea:focus { outline: none; border-color: var(--primary); }

/* ═══════════════════════════════════════════════════════════════
   MULTI-AIRPORT COMMAND CENTER DASHBOARD
═══════════════════════════════════════════════════════════════ */

/* ── Live clock & header ─────────────────────────────────────── */
.hq-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(59,130,246,.12);
  margin-bottom: 24px;
}
.hq-brand { display: flex; align-items: center; gap: 10px; }
.hq-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #10B981; box-shadow: 0 0 8px #10B981;
  animation: hqLivePulse 2.4s ease-in-out infinite; flex-shrink: 0;
}
@keyframes hqLivePulse {
  0%,100% { opacity: 1; box-shadow: 0 0 8px #10B981; }
  50%      { opacity: .5; box-shadow: 0 0 18px #10B981; }
}
.hq-label { font-size: 1.05rem; font-weight: 800; color: var(--text); letter-spacing: .02em; }
.hq-sep   { color: rgba(13,27,42,.22); }
.hq-sub   { font-size: .75rem; color: var(--text-muted); font-weight: 500; }
.hq-right { display: flex; align-items: center; gap: 18px; }
.hq-date  { font-size: .72rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
.hq-clock {
  font-family: 'JetBrains Mono', monospace; font-size: 1.45rem; font-weight: 700;
  color: var(--primary); letter-spacing: .08em; min-width: 80px; text-align: right;
}

/* ── Airport fleet grid ──────────────────────────────────────── */
.fleet-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 14px; margin-bottom: 24px;
}
.fleet-card {
  position: relative; background: #0C1E35;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px; padding: 20px 18px 16px;
  cursor: pointer; overflow: hidden;
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
/* Top accent bar */
.fleet-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--ap-color, #3B82F6); border-radius: 14px 14px 0 0;
}
/* Subtle top glow */
.fleet-card::after {
  content: ''; position: absolute; top: -30%; left: 50%; transform: translateX(-50%);
  width: 70%; height: 80px;
  background: radial-gradient(ellipse, var(--ap-color,#3B82F6) 0%, transparent 70%);
  opacity: .07; pointer-events: none; transition: opacity .25s;
}
.fleet-card:hover { transform: translateY(-4px); border-color: var(--ap-color,#3B82F6); }
.fleet-card:hover::after { opacity: .16; }
.fleet-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 0 1px var(--ap-color,#3B82F6); }
.fleet-card.is-active {
  border-color: var(--ap-color,#3B82F6);
  box-shadow: 0 0 0 1px var(--ap-color,#3B82F6), 0 8px 32px rgba(0,0,0,.3);
}

.fc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.fc-iata {
  font-family: 'JetBrains Mono', monospace; font-size: 1.55rem; font-weight: 800;
  color: var(--ap-color,#3B82F6); letter-spacing: .06em; line-height: 1;
}
.fc-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #1E3A5F; flex-shrink: 0;
  transition: background .3s, box-shadow .3s;
}
.fc-dot.ok   { background: #10B981; box-shadow: 0 0 8px #10B98160; }
.fc-dot.warn { background: #F59E0B; box-shadow: 0 0 8px #F59E0B60; animation: warnBlink 1.8s ease-in-out infinite; }
@keyframes warnBlink { 0%,100%{opacity:1} 50%{opacity:.35} }

.fc-city { font-size: .7rem; color: #94A3B8; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 14px; }

.fc-flights { display: flex; align-items: baseline; gap: 6px; margin-bottom: 14px; }
.fc-num {
  font-family: 'JetBrains Mono', monospace; font-size: 2.6rem; font-weight: 800;
  color: #E2E8F0; line-height: 1; transition: color .3s;
}
.fc-num.loaded { color: #F1F5F9; }
.fc-unit { font-size: .7rem; color: #94A3B8; font-weight: 500; padding-bottom: 3px; }

.fc-pills { display: flex; gap: 7px; }
.fc-pill {
  flex: 1; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; padding: 7px 10px; min-width: 0;
}
.fc-pill-dept { font-size: .62rem; font-weight: 800; color: #7DD3FC; letter-spacing: .07em; text-transform: uppercase; }
.fc-pill-val  { font-size: .82rem; font-weight: 700; font-family: 'JetBrains Mono',monospace; color: #CBD5E1; margin-top: 2px; }
.fc-pill-val.ok   { color: #10B981; }
.fc-pill-val.warn { color: #F59E0B; }
.fc-pill-val.none { color: #475569; }

.fc-active-tag {
  position: absolute; top: 10px; right: 10px;
  font-size: .56rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ap-color,#3B82F6); background: rgba(59,130,246,.1);
  border: 1px solid var(--ap-color,#3B82F6); border-radius: 4px; padding: 1px 7px;
}

/* ── Global KPI strip ────────────────────────────────────────── */
.global-strip {
  display: flex; align-items: center;
  background: #0C1E35; border: 1px solid rgba(59,130,246,.15);
  border-radius: 12px; padding: 18px 28px; margin-bottom: 22px;
}
.gs-item { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.gs-val {
  font-family: 'JetBrains Mono',monospace; font-size: 2rem; font-weight: 800;
  color: #F1F5F9; line-height: 1;
}
.gs-label { font-size: .68rem; color: #94A3B8; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-top: 3px; }
.gs-sub   { font-size: .64rem; color: #64748B; font-family: 'JetBrains Mono',monospace; }
.gs-sep   { width: 1px; height: 44px; background: rgba(255,255,255,.1); flex-shrink: 0; margin: 0 8px; }

/* ── Lower 2-col grid ────────────────────────────────────────── */
.dash-lower { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-bottom: 20px; }
.dash-panel {
  background: #0C1E35; border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px; overflow: hidden;
}
.dash-panel-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 12px; border-bottom: 1px solid rgba(255,255,255,.07);
}
.dash-panel-hdr h3 { font-size: .72rem; font-weight: 800; color: #94A3B8; text-transform: uppercase; letter-spacing: .07em; margin: 0; }
.chart-legend-row { display: flex; gap: 12px; }
.cleg { display: flex; align-items: center; gap: 5px; font-size: .66rem; color: #94A3B8; font-weight: 600; }
.cleg-dot { width: 10px; height: 3px; border-radius: 2px; flex-shrink: 0; }

/* Activity feed */
.act-feed { overflow-y: auto; max-height: 290px; }
.act-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 18px; border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .12s;
}
.act-item:hover { background: rgba(255,255,255,.025); }
.act-item:last-child { border-bottom: none; }
.act-dot { width: 6px; height: 6px; border-radius: 50%; background: #334155; margin-top: 5px; flex-shrink: 0; }
.act-dot.ramp  { background: #3B82F6; }
.act-dot.foh   { background: #10B981; }
.act-dot.save  { background: #F59E0B; }
.act-dot.info  { background: #64748B; }
.act-msg  { font-size: .73rem; color: #7DD3FC; line-height: 1.5; flex: 1; }
.act-ts   { font-size: .63rem; color: #64748B; font-family: 'JetBrains Mono',monospace; flex-shrink: 0; padding-top: 2px; }

/* month badge */
.mo-badge {
  font-family: 'JetBrains Mono',monospace; font-size: .62rem; font-weight: 700;
  background: rgba(59,130,246,.1); color: #7DD3FC;
  border: 1px solid rgba(59,130,246,.2); border-radius: 4px; padding: 2px 8px;
}

/* ── Pipeline ────────────────────────────────────────────────── */
.dash-pipeline {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  background: #0C1E35; border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px; padding: 14px 20px;
}
.pipe-step {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; border-radius: 9px; cursor: pointer;
  transition: background .15s;
}
.pipe-step:hover { background: rgba(255,255,255,.04); }
.pipe-icon {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: .85rem;
}
.pipe-step.s-ok   .pipe-icon { background: rgba(16,185,129,.12); color: #10B981; }
.pipe-step.s-warn .pipe-icon { background: rgba(245,158,11,.12);  color: #F59E0B; }
.pipe-step.s-none .pipe-icon { background: rgba(30,58,92,.4);     color: #334155; }
.pipe-body { min-width: 0; }
.pipe-title  { font-size: .74rem; font-weight: 700; color: #CBD5E1; }
.pipe-status { font-size: .68rem; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; margin-top: 2px; }
.pipe-status.ok   { color: #10B981; }
.pipe-status.warn { color: #F59E0B; }
.pipe-arrow { color: rgba(100,116,139,.45); padding: 0 4px; font-size: .75rem; }

/* Responsive */
@media (max-width: 1100px) {
  .fleet-grid { grid-template-columns: repeat(2,1fr); }
  .dash-lower  { grid-template-columns: 1fr; }
  .dash-pipeline { grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .pipe-arrow { display: none; }
}
@media (max-width: 600px) {
  .fleet-grid  { grid-template-columns: 1fr 1fr; }
  .global-strip { flex-wrap: wrap; gap: 12px; }
  .gs-sep { display: none; }
}

/* ── Integration Admin Panel ─────────────────────────────────────────────── */
.int-tabs { display:flex; gap:4px; border-bottom:2px solid var(--border); margin-bottom:20px; flex-wrap:wrap; }
.int-tab  { background:transparent; border:none; border-bottom:2px solid transparent; margin-bottom:-2px;
            padding:8px 16px; color:var(--text-muted); cursor:pointer; font-size:.82rem; font-weight:600;
            display:flex; align-items:center; gap:6px; transition:color .15s,border-color .15s; }
.int-tab:hover  { color:var(--text); }
.int-tab.active { color:#38BDF8; border-bottom-color:#38BDF8; }

.int-panel        { display:none; }
.int-panel.active { display:block; }
.int-panel-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.int-panel-header h3 { margin:0; font-size:.95rem; color:var(--text); display:flex; align-items:center; gap:8px; }
.int-desc  { color:var(--text-muted); font-size:.78rem; margin:0 0 14px; }
.int-loading { color:var(--text-muted); font-size:.82rem; padding:20px 0; }
.int-empty   { color:var(--text-muted); font-size:.82rem; padding:20px 0; font-style:italic; }
.int-error   { color:#F87171; font-size:.82rem; padding:12px 0; }

.int-table  { width:100%; border-collapse:collapse; font-size:.78rem; }
.int-table th { text-align:left; padding:6px 10px; color:var(--text-muted); font-weight:600; border-bottom:1px solid var(--border); white-space:nowrap; }
.int-table td { padding:7px 10px; border-bottom:1px solid var(--border); color:var(--text); vertical-align:middle; }
.int-table tr:hover td { background:rgba(56,189,248,.04); }
.int-row-inactive td { opacity:.45; }
.int-url    { max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.72rem; color:var(--text-muted); }
.int-mono   { font-family:monospace; font-size:.75rem; }
.int-muted  { color:var(--text-muted); font-size:.75rem; }
.int-actions { display:flex; gap:4px; white-space:nowrap; }

.int-status        { font-size:.72rem; font-weight:700; padding:2px 7px; border-radius:99px; }
.int-status.active { background:rgba(16,185,129,.15); color:#10B981; }
.int-status.inactive { background:rgba(100,116,139,.15); color:var(--text-muted); }

.int-badge           { font-size:.68rem; font-weight:600; padding:2px 6px; border-radius:4px; background:rgba(56,189,248,.12); color:#38BDF8; display:inline-block; }
.int-badge-event     { background:rgba(139,92,246,.12); color:#A78BFA; }
.int-badge-req       { background:rgba(245,158,11,.12); color:#F59E0B; }
.int-badge-create    { background:rgba(16,185,129,.12); color:#10B981; }
.int-badge-update    { background:rgba(56,189,248,.12); color:#38BDF8; }
.int-badge-delete    { background:rgba(248,113,113,.12); color:#F87171; }
.int-badge-sync      { background:rgba(139,92,246,.12); color:#A78BFA; }
.int-badge-login     { background:rgba(100,116,139,.12); color:var(--text-muted); }

.int-log-filters { display:flex; gap:10px; margin-bottom:12px; }
.int-log-filters select { background:#fff; border:1px solid var(--border); color:var(--text); padding:5px 10px; border-radius:5px; font-size:.78rem; }
.int-log-table th, .int-log-table td { font-size:.73rem; }

.int-skill-group { margin-bottom:16px; }
.int-skill-dept  { font-size:.72rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; padding-bottom:4px; border-bottom:1px solid var(--border); }
.int-skill-row   { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.int-skill-code  { font-family:monospace; font-size:.78rem; font-weight:700; color:#38BDF8; min-width:110px; }
.int-skill-label { color:var(--text); font-size:.82rem; flex:1; }

/* Integration modals */
.int-warn  { background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.3); color:#FCD34D; padding:10px 14px; border-radius:6px; font-size:.8rem; margin-bottom:12px; }
.key-display { display:flex; align-items:center; gap:8px; background:#0a1628; border:1px solid var(--border); border-radius:6px; padding:10px 14px; }
.key-display code { flex:1; font-size:.8rem; word-break:break-all; color:#10B981; }
.btn-copy { background:transparent; border:1px solid var(--border); color:var(--text-muted); border-radius:4px; padding:4px 8px; cursor:pointer; transition:color .15s; }
.btn-copy:hover { color:#38BDF8; }
.check-group { display:flex; flex-direction:column; gap:6px; }
.check-group label { display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--text-muted); cursor:pointer; }
.req { color:#F87171; }

/* SSO / OIDC login buttons */
.login-sso-divider { display:flex; align-items:center; gap:12px; margin:22px 0 14px; color:var(--text-muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; }
.login-sso-divider::before,
.login-sso-divider::after  { content:''; flex:1; height:1px; background:var(--border); }
.login-sso-buttons { display:flex; flex-direction:column; gap:8px; }
.login-sso-btn {
  width:100%; background:rgba(56,189,248,.06); border:1px solid rgba(56,189,248,.25);
  color:#38BDF8; border-radius:8px; padding:11px 16px; font-size:.85rem; font-family:inherit;
  cursor:pointer; transition:background .15s,border-color .15s;
  display:flex; align-items:center; justify-content:center; gap:9px;
}
.login-sso-btn:hover   { background:rgba(56,189,248,.13); border-color:rgba(56,189,248,.55); }
.login-sso-btn:active  { background:rgba(56,189,248,.2); }
.login-sso-btn:disabled { opacity:.5; cursor:not-allowed; }

/* GDPR panel */
.int-gdpr-search { display:flex; align-items:center; gap:10px; margin:10px 0 16px; }
.int-input { background:#fff; border:1px solid var(--border); color:var(--text); padding:6px 10px; border-radius:5px; font-size:.82rem; }

/* OIDC panel */
.int-url { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.72rem; }

/* ══════════════════════════════════════════════════════════════════
   PRINT — Monthly Roster  (A3 landscape, triggered by Imprimir btn)
   ══════════════════════════════════════════════════════════════════ */
@page { size: A3 landscape; margin: 8mm; }

@media print {

  /* Hide all app chrome */
  #sidebar, .topbar, .module-header, .module-actions,
  .no-print, .swap-banner, #rosterSwapBanner, .rce-overlay { display: none !important; }

  /* Hide all tab panels except the roster */
  .tab-content { display: none !important; }
  #tab-monthly-roster { display: block !important; padding: 0 !important; }

  /* Remove main-wrap layout constraints */
  .main-wrap { margin: 0 !important; padding: 0 !important; }

  /* Expand the table container — remove scroll clipping */
  .roster-table-wrap { overflow: visible !important; max-height: none !important; height: auto !important; }
  #monthlyRosterWrap  { overflow: visible !important; }

  /* Toolbar: keep title text, strip interactive chrome */
  .roster-toolbar {
    background: none !important; box-shadow: none !important;
    border: none !important; border-bottom: 1pt solid #ccc !important;
    padding: 0 0 3mm 0 !important; margin-bottom: 2mm !important;
    font-size: 8pt !important; gap: 8px !important;
  }
  .cov-alert-pill, .cov-ok-pill { font-size: 7pt !important; }

  /* Legend */
  .roster-legend {
    font-size: 6.5pt !important; padding: 1.5mm 0 !important;
    border: none !important; gap: 6px !important; flex-wrap: wrap;
  }

  /* Violation banner */
  .violation-banner { font-size: 7pt !important; padding: 2mm !important; margin-bottom: 2mm !important; }

  /* Table: full-width, fixed layout, tiny font */
  .roster-table {
    font-size: 6pt !important; width: 100% !important;
    border-collapse: collapse !important; table-layout: fixed !important;
  }

  /* Repeat header on every printed page */
  .roster-table thead { display: table-header-group; }
  .roster-table tbody tr { page-break-inside: avoid; }

  .roster-table th {
    font-size: 5.5pt !important; padding: 0.8mm 0.3mm !important;
    position: static !important;        /* remove sticky — causes blank rows in Chrome print */
    border: 0.3pt solid #aaa !important;
    white-space: normal !important; word-break: break-all !important;
    background: #f8fafc !important;
  }
  .roster-table td {
    padding: 0.8mm 0.3mm !important;
    border: 0.3pt solid #ddd !important;
  }

  /* Name column fixed width; remove sticky positioning */
  .roster-name-th, .roster-name-cell {
    min-width: 28mm !important; max-width: 36mm !important;
    position: static !important; font-size: 5.5pt !important;
    text-align: left !important; word-break: break-word !important;
  }

  /* Weekend day header highlight */
  .roster-day-th.weekend { background: #FFF7ED !important; }

  /* Preserve all background colours exactly */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* Compact badges */
  .rc {
    width: 15px !important; height: 12px !important;
    font-size: 5pt !important; border-radius: 2px !important;
  }

  /* Summary / coverage / band rows */
  .roster-summary-row td,
  .roster-coverage-row td,
  .roster-band-cycle-row td { font-size: 5.5pt !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   Free-staff panel — "Quem está livre" (ROADMAP Phase 9 § A6)
   Sits above the RAMP Gantt inside .gantt-wrapper. Sticky so it stays
   readable while the planner scrolls a 30-hour axis looking for the
   band it just told them about — the panel is only useful next to the
   thing it describes. --z-sticky, not a higher tier: it must still sit
   under dropdowns, modals and the drag layer.
   ═══════════════════════════════════════════════════════════════════ */
.free-staff-panel {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: #0F172A; border: 1px solid #1E293B; border-radius: 10px;
  padding: 8px 10px; margin-bottom: 8px; font-size: .78rem; color: #E2E8F0;
  max-height: 38vh; overflow-y: auto;
}
.free-staff-panel .fs-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 7px; margin-bottom: 6px; border-bottom: 1px solid #1E293B;
}
.free-staff-panel .fs-head strong { color: #22D3EE; font-size: .82rem; }
.free-staff-panel .fs-at { display: flex; align-items: center; gap: 5px; color: #94A3B8; }
.free-staff-panel .fs-at input[type="time"] {
  background: #1E293B; border: 1px solid #334155; border-radius: 6px;
  color: #E2E8F0; padding: 2px 6px; font-size: .78rem;
}
.free-staff-panel .fs-only { display: flex; align-items: center; gap: 5px; color: #94A3B8; cursor: pointer; }
.free-staff-panel .fs-mini {
  background: #1E293B; border: 1px solid #334155; border-radius: 6px;
  color: #CBD5E1; padding: 2px 9px; font-size: .72rem; cursor: pointer;
}
.free-staff-panel .fs-mini:hover { background: #334155; color: #fff; }
.free-staff-panel .fs-close { margin-left: auto; }
.free-staff-panel .fs-target {
  background: #164E63; color: #A5F3FC; border-radius: 6px;
  padding: 2px 8px; display: flex; align-items: center; gap: 6px;
}

.free-staff-panel .fs-list { list-style: none; margin: 0; padding: 0; }
.free-staff-panel .fs-row {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 4px 6px; border-radius: 6px; border-left: 3px solid transparent;
}
.free-staff-panel .fs-row + .fs-row { margin-top: 2px; }
.free-staff-panel .fs-row:hover { background: #1E293B; }
.free-staff-panel .fs-idle  { border-left-color: #10B981; }
.free-staff-panel .fs-break { border-left-color: #F59E0B; }
.free-staff-panel .fs-busy  { border-left-color: #EF4444; }
.free-staff-panel .fs-off   { border-left-color: #334155; opacity: .55; }
/* Candidate mode re-bases what "dimmed" means — see renderFreeStaffPanel. */
.free-staff-panel.fs-mode-candidates .fs-off   { opacity: 1; }
.free-staff-panel.fs-mode-candidates .fs-nofit { opacity: .5; }
.free-staff-panel .fs-unassigned .fs-who { font-style: italic; }

.free-staff-panel .fs-who    { min-width: 150px; font-weight: 600; }
.free-staff-panel .fs-detail { flex: 1; min-width: 170px; }
.free-staff-panel .fs-note   { min-width: 200px; }
.free-staff-panel .fs-band   { margin-left: auto; white-space: nowrap; }
.free-staff-panel .fs-pill {
  border-radius: 5px; padding: 1px 7px; font-size: .66rem;
  font-weight: 700; letter-spacing: .03em; white-space: nowrap;
}
.free-staff-panel .fs-dim  { color: #64748B; font-weight: 400; }
.free-staff-panel .fs-warn { color: #FBBF24; }
.free-staff-panel .fs-ok   { color: #34D399; }
/* A5 — the explanation line. Amber = costs something, not a blocker. */
.free-staff-panel .fs-cost { color: #FBBF24; }
.free-staff-panel .fs-why  { font-size: .72rem; line-height: 1.45; }
.free-staff-panel .fs-empty { color: #64748B; margin: 6px 2px; }

/* TC-3 — staff holding no band at all. Visually separated from the band rows
   above because it answers the opposite question: those are work with no
   worker, these are a worker with no work. */
.free-staff-panel .fs-noband { margin-top: 10px; border-top: 1px solid rgba(148,163,184,.28); padding-top: 8px; }
.free-staff-panel .fs-noband-head {
  font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #94A3B8; margin: 0 2px 5px;
}
/* Same layout as .fs-row, deliberately a different class: .fs-row means
   "candidate band row" and carries an explanation line, which these never do. */
.free-staff-panel .fs-nbrow {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 4px 6px; border-radius: 6px; border-left: 3px solid transparent;
  opacity: .92;
}
.free-staff-panel .fs-nbrow + .fs-nbrow { margin-top: 2px; }
.free-staff-panel .fs-nbrow:hover { background: #1E293B; }
.free-staff-panel .fs-pill-noband { background: rgba(148,163,184,.18); color: #CBD5E1; }

@media (max-width: 900px) {
  .free-staff-panel { max-height: 50vh; }
  .free-staff-panel .fs-band { margin-left: 0; }
}