/* ------------------------------------------------------------------
   MDN Project Manager – Brand Styles
   Path: server/static/css/brand.css
   Tweak the palette in :root to fine-tune the look.
------------------------------------------------------------------- */

:root{
  --bg: #0f1221;               /* page background */
  --panel: #171b31;            /* cards, nav background */
  --panel-2: #1e2444;
  --text: #e8ecf4;             /* primary text */
  --muted: #aab4c7;            /* secondary text */
  --primary: #3ea6ff;          /* brand blue (accents, links, buttons) */
  --primary-600:#1f93ff;
  --primary-700:#0f7fe2;

  --accent: #8b5cf6;           /* purple accent (chips, highlights) */
  --accent-700:#7c3aed;

  --warn: #ff6b6b;             /* destructive */
  --warn-700:#e85a5a;

  --ok: #34d399;               /* success/ok */
  --ok-700:#10b981;

  --border: #2a3158;           /* subtle borders/dividers */
  --shadow: 0 8px 24px rgba(0,0,0,.35);

  --radius: 14px;
  --radius-sm: 10px;

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

/* Reset-ish */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:linear-gradient(180deg, #0b0e1a 0%, var(--bg) 100%);
  color:var(--text);
  font:16px/1.55 var(--font);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Utilities */
.container{max-width:1100px;margin:0 auto;padding:24px}
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.row{display:flex;align-items:center}
.gap{gap:12px}
.muted{color:var(--muted)}
.small{font-size:.92rem}
.prose{line-height:1.7}

/* Header / Nav */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(15,18,33,.75); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.04);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:700}
.brand img{height:32px;width:auto;display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.main-nav{display:flex;align-items:center;gap:18px}
.main-nav a,
.main-nav .linklike{
  color:var(--text); text-decoration:none; opacity:.9; transition:opacity .15s ease,color .15s ease;
}
.main-nav a:hover,.main-nav .linklike:hover{opacity:1;color:var(--primary)}
.linklike{background:none;border:0;padding:0;cursor:pointer;font:inherit}

/* Cards / Panels */
.card{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}

/* Grid */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* Buttons */
.btn,
.btn-alt,
.btn-warn{
  --btn-bg: var(--primary);
  --btn-bg-hover: var(--primary-600);
  --btn-color: #081425;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  border-radius:var(--radius-sm);
  padding:10px 14px;
  font-weight:700;
  letter-spacing:.2px;
  text-decoration:none;
  color:var(--btn-color);
  background:linear-gradient(180deg,var(--btn-bg),var(--btn-bg-hover));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 4px 14px rgba(62,166,255,.25);
  transition:transform .05s ease, filter .15s ease, box-shadow .15s ease;
  cursor:pointer;
}
.btn:hover{filter:saturate(1.1); box-shadow:0 6px 18px rgba(62,166,255,.35)}
.btn:active{transform:translateY(1px)}
.btn-alt{
  --btn-bg: #30375f;
  --btn-bg-hover:#283058;
  --btn-color: #e8ecf4;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.btn-warn{
  --btn-bg: var(--warn);
  --btn-bg-hover: var(--warn-700);
  --btn-color: #fff;
  box-shadow:0 4px 14px rgba(255,107,107,.25);
}
.btn-sm{padding:7px 10px;font-size:.92rem}
.btn-xs{padding:5px 8px;font-size:.85rem}

/* Tables */
.table{
  width:100%; border-collapse:separate; border-spacing:0;
  overflow:hidden; border:1px solid var(--border); border-radius:var(--radius);
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  box-shadow:var(--shadow);
}
.table th,.table td{padding:12px 14px;border-bottom:1px solid var(--border)}
.table thead th{font-size:.9rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.table tbody tr:hover{background:rgba(255,255,255,.03)}
.table .num{text-align:right}

/* Lists */
.list{list-style:none;margin:0;padding:0}
.list > li{padding:12px 10px;border-bottom:1px solid var(--border)}
.list > li:last-child{border-bottom:0}

/* Chips / Badges */
.chip{
  display:inline-block; padding:4px 8px; border-radius:999px;
  background:rgba(142,161,255,.15);
  color:#c7d2fe; font-weight:600; font-size:.82rem; border:1px solid rgba(142,161,255,.25)
}
.chip-warn{background:rgba(255,107,107,.12); color:#ffd2d2; border-color:rgba(255,107,107,.2)}

/* Forms */
.form label{display:block; font-weight:700; margin:8px 0 8px}
.form input[type="text"],
.form input[type="email"],
.form input[type="password"],
.form input[type="date"],
.form input[type="time"],
.form input[type="number"],
.form textarea,
.form select{
  width:100%;
  background:#0e1330;
  color:var(--text);
  border:1px solid var(--border);
  outline:none;
  padding:10px 12px;
  border-radius:10px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form textarea{resize:vertical}
.form input:focus,
.form textarea:focus,
.form select:focus{
  border-color: rgba(62,166,255,.7);
  box-shadow:0 0 0 4px rgba(62,166,255,.15);
}

/* Flash messages */
.flash-stack{display:grid;gap:10px;margin:14px 0}
.flash{
  border:1px solid var(--border); border-left-width:4px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border-radius:10px; padding:12px 14px; box-shadow:var(--shadow)
}
.flash.success{border-left-color:var(--ok)}
.flash.error{border-left-color:var(--warn)}
.flash.info{border-left-color:var(--primary)}

/* Links */
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-700);text-decoration:underline}

/* Footer */
.site-footer{padding:24px;color:var(--muted);border-top:1px solid rgba(255,255,255,.05)}

/* Favicon fallbacks: nothing to style—handled by route */

/* Focus visibility for a11y */
:focus-visible{outline:3px solid rgba(62,166,255,.5); outline-offset:2px}

/* Print tweaks for SOW pages */
@media print{
  body{background:#fff;color:#000}
  .site-header,.site-footer,.flash-stack,.main-nav{display:none !important}
  .card,.table{box-shadow:none;border-color:#ccc}
  a{text-decoration:none;color:#000}
}