@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

*{ box-sizing: border-box; }
:root{
  --navy: #14293f;
  --navy-2: #1c3a58;
  --blue: #2f77a3;
  --accent: #dd7f1e;      /* signature: safety-orange, used sparingly */
  --accent-dim: #f2c895;
  --line: #e2e7ec;
  --muted: #66727e;
  --green: #1f8a5c;
  --green-bg: #e2f4ea;
  --red: #c14343;
  --red-bg: #fbe7e7;
  --warn: #9a6a08;
  --warn-bg: #fdf1d9;
  --bg: #f4f6f8;
  --ink: #1c2733;
}

html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
  background: var(--bg); color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a{ color: var(--blue); text-decoration: none; }
a:hover{ text-decoration: underline; }
h1, h2{ font-family: 'IBM Plex Sans', sans-serif; letter-spacing: -0.01em; }

/* Numeric / data values get the mono face — spec-sheet feel */
.big, .num, .badge, .ts-summary strong, .card .big{
  font-family: 'IBM Plex Mono', 'IBM Plex Sans', monospace;
}

:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== Header ===== */
header.topbar{
  height: 68px; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color:#fff; display:flex; align-items:center; justify-content:space-between;
  padding: 0 28px; position: relative; z-index: 2;
  box-shadow: 0 2px 10px rgba(20,41,63,0.18);
}
/* Signature: a dashed lane-line under the header, like a road divider */
header.topbar::after{
  content:''; position:absolute; left:0; right:0; bottom:-3px; height:3px;
  background-image: repeating-linear-gradient(90deg, var(--accent) 0 22px, transparent 22px 40px);
  opacity: 0.85;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand .logo{
  width:38px; height:38px; border-radius:7px; background:#fff;
  display:grid; place-items:center; overflow:hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.brand .logo img{ width:100%; height:100%; object-fit:contain; padding:3px; }
.brand strong{ font-size:18px; display:block; letter-spacing:-0.01em; }
.brand small{ display:block; opacity:.72; font-size:11px; letter-spacing:.02em; }
.user-info{ font-size:13px; display:flex; gap:14px; align-items:center; }
.avatar{
  width:34px; height:34px; border-radius:50%;
  background: linear-gradient(135deg, var(--blue), #4a93bf);
  display:grid; place-items:center; font-size:12px; font-weight:700;
  font-family: 'IBM Plex Mono', monospace;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25);
}
.logout{ color:#ffd7c2 !important; font-weight:500; }

/* ===== Layout ===== */
.layout{ display:flex; min-height: calc(100vh - 68px); }
aside.sidenav{
  width:222px; background:#fff; border-right:1px solid var(--line); padding:20px 12px;
  flex-shrink:0;
}
aside.sidenav a{
  display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:7px;
  color:#4c5864; font-size:14px; margin-bottom:3px; font-weight:500;
  border-left: 3px solid transparent; transition: background .12s ease, border-color .12s ease, color .12s ease;
}
aside.sidenav a:hover{ background:#f2f6f9; color: var(--navy); text-decoration:none; }
aside.sidenav a.active{
  background: #eef5fa; color: var(--navy); font-weight:600; text-decoration:none;
  border-left-color: var(--accent);
}
main.content{ flex:1; padding:28px 30px; max-width:1450px; }

@media (max-width: 1000px){
  aside.sidenav{ display:none; }
}

/* ===== Page top ===== */
.top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; flex-wrap:wrap; gap:12px; }
.top h1{ margin:0; font-size:24px; font-weight:700; }
.top p{ margin:5px 0 0; color: var(--muted); font-size:13px; }

/* ===== Buttons ===== */
.btn, button, .primary-btn, .small-btn{
  border:0; border-radius:6px; padding:10px 16px; font-weight:600; cursor:pointer;
  font-family: inherit; font-size:14px; transition: transform .08s ease, box-shadow .12s ease, background .12s ease;
}
.btn.primary, .primary-btn, button[type="submit"]{ background: var(--navy); color:#fff; }
.btn.primary:hover, .primary-btn:hover, button[type="submit"]:hover{ background: var(--navy-2); box-shadow: 0 3px 10px rgba(20,41,63,0.25); }
.btn.primary:active, .primary-btn:active, button[type="submit"]:active{ transform: translateY(1px); }
.btn.light, .small-btn{ background:#eef1f4; color:#243447; padding:8px 12px; font-size:13px; }
.small-btn:hover{ background:#dfe5ea; }
.small-btn.danger{ background: var(--red-bg); color: var(--red); }
.small-btn.danger:hover{ background:#f5d2d2; }

/* ===== Stat cards ===== */
.cards{ display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin-bottom:22px; }
@media (max-width: 1000px){ .cards{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 650px){ .cards{ grid-template-columns: 1fr; } }
.card{
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:18px;
  box-shadow: 0 1px 2px rgba(20,41,63,0.04);
  border-top: 3px solid var(--accent-dim);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.card:hover{ box-shadow: 0 6px 18px rgba(20,41,63,0.08); border-top-color: var(--accent); }
.card .label{ font-size:12px; color: var(--muted); font-weight:500; text-transform:uppercase; letter-spacing:.03em; }
.card .big{ font-size:26px; font-weight:600; margin-top:8px; color: var(--navy); }
.card .sub{ font-size:11px; color: var(--muted); margin-top:5px; }
.card.cta{ display:flex; align-items:center; justify-content:center; border-top-color: var(--navy); }

/* ===== Panels (forms, tables, sections) ===== */
.panel{
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:22px;
  margin-bottom:22px; box-shadow: 0 1px 2px rgba(20,41,63,0.04);
}
.panel h2{ font-size:17px; margin:0 0 18px; font-weight:600; color: var(--navy); }
.panel > p.muted:first-of-type{ margin-top:-10px; }

/* ===== Forms ===== */
.form-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; }
@media (max-width: 1000px){ .form-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 650px){ .form-grid{ grid-template-columns: 1fr; } }
.field label, label{ display:block; font-size:12px; font-weight:600; color:#526170; margin-bottom:6px; }
input, select{
  width:100%; padding:10px; border:1px solid #ccd5dd; border-radius:6px;
  font-size:13px; background:#fff; font-family: inherit; color: var(--ink);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, select:focus{ outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47,119,163,0.15); }
.full{ grid-column: span 2; }
.form-actions{ margin-top:18px; display:flex; gap:9px; }

/* ===== Tables ===== */
.tbl-scroll{ overflow-x:auto; }
table.tbl{ width:100%; border-collapse: collapse; font-size:13px; }
.tbl th{
  background:#f7f9fa; color:#526170; font-weight:600; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.03em; position: sticky; top:0;
}
.tbl th, .tbl td{ padding:11px 10px; border-bottom:1px solid var(--line); text-align:left; }
.tbl tbody tr:hover{ background:#fafbfc; }
.tbl td.num, .tbl th.num{ text-align:right; font-family: 'IBM Plex Mono', monospace; }
.tbl input, .tbl select{ padding:6px 8px; font-size:12px; }

/* ===== Badges ===== */
.badge{ display:inline-block; padding:4px 10px; border-radius:12px; font-size:10.5px; font-weight:600; letter-spacing:.02em; }
.badge.posted{ background: var(--green-bg); color: var(--green); }
.badge.draft{ background:#eef1f4; color:#5a6672; }
.badge.locked{ background: var(--warn-bg); color: var(--warn); }

/* ===== Alerts ===== */
.alert{ background: var(--red-bg); border:1px solid var(--red); color:#8a2c2c; padding:11px 15px; border-radius:8px; margin-bottom:14px; font-size:13.5px; }
.success{ background: var(--green-bg); border:1px solid var(--green); color:#175f41; padding:11px 15px; border-radius:8px; margin-bottom:14px; font-size:13.5px; }
.muted{ color: var(--muted); font-size:13px; }

/* ===== Auth pages ===== */
.auth-wrap{
  min-height: calc(100vh - 68px); display:flex; align-items:center; justify-content:center; padding:20px;
  background:
    linear-gradient(var(--bg), var(--bg)),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(20,41,63,0.035) 38px 40px);
}
.auth-card{
  max-width:400px; width:100%; box-shadow: 0 8px 30px rgba(20,41,63,0.09);
  border-top: 3px solid var(--accent);
}
.auth-card h1{ margin-top:0; font-size:1.5rem; color: var(--navy); }

/* ===== Filter form ===== */
.filter-form{ display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; margin-bottom:20px; }
.filter-form label{ margin-bottom:0; }
.inline-form{ display:inline-block; margin:0 4px 0 0; }
.actions{ white-space:nowrap; }

/* ===== Crew entry specifics ===== */
.week-nav{ display:flex; gap:8px; flex-wrap:wrap; }
.deadline-note{
  background: var(--warn-bg); border:1px solid #e6c675; color: var(--warn);
  padding:10px 14px; border-radius:8px; font-size:13px; margin: 14px 0;
  border-left: 3px solid var(--accent);
}
.submit-box summary{ list-style:none; cursor:pointer; }
.submit-box summary::-webkit-details-marker{ display:none; }
.submit-panel{ margin-top:12px; padding:16px; background:#f7f9fa; border:1px solid var(--line); border-radius:10px; }
.submit-panel label{ margin-bottom:10px; }
.remove-crew-row{ padding:6px 10px; }

.footer-note{ font-size:11px; color: var(--muted); margin-top:10px; }
.empty{ text-align:center; color: var(--muted); padding:28px; }

/* ===== Crew chips (click-to-add) ===== */
.chip-row{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  border:1px solid var(--line); background:#f7f9fa; color: var(--ink);
  padding:7px 14px; border-radius:20px; font-size:13px; font-weight:600;
  cursor:pointer; font-family: inherit; transition: all .12s ease;
}
.chip:hover{ background:#eef5fa; border-color: var(--blue); color: var(--navy); transform: translateY(-1px); }
.chip.chip-new{ background:#fff; border-style:dashed; color: var(--muted); }
.chip.chip-new:hover{ border-color: var(--accent); color: var(--accent); }

/* ===== Weekly totals summary (before posting) ===== */
.ts-summary{ display:flex; gap:24px; flex-wrap:wrap; }
.ts-summary div{ background:#f7f9fa; border:1px solid var(--line); border-radius:8px; padding:10px 16px; min-width:120px; border-top: 2px solid var(--accent-dim); }
.ts-summary span{ display:block; font-size:11px; color: var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.ts-summary strong{ font-size:1.15rem; color: var(--navy); }

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior: auto !important; }
}