/* ============================================================
   Vector Defense Group — brand theme for the webui "mirror".
   Loaded AFTER style.css only when webui/branding.py resolves the
   request to the VDG brand (bids.vectordefensegroup.com, vdg.localhost,
   or DIBBS_BRAND=vdg). Colour tokens + font + shell chrome ONLY —
   layout, spacing and every page's structure are untouched.

   Palette source: D:\VSG\css\styles.css (navy #0B1F33 / #10283F /
   #16334F, ink #142233, mist #9DB4CF, line #E1E7EF, paper-2 #F4F7FB,
   brass CTA #D4A84B on near-black #1B1607; air #2E8FD9, land #C2953A,
   marine #1E9F97). Semantic status colours (success / warning / danger)
   are deliberately NOT changed — green is still green, red still red.
   ============================================================ */

:root {
  /* Navy scale -> VDG navy */
  --navy-50:  #F4F7FB;
  --navy-100: #E8EEF5;
  --navy-200: #C9D6E5;
  --navy-300: #9DB4CF;
  --navy-400: #6E8BAB;
  --navy-500: #3B5675;
  --navy-600: #16334F;   /* primary */
  --navy-700: #10283F;
  --navy-800: #0B1F33;
  --navy-900: #081627;

  /* Accent pink-red -> VDG brass */
  --accent-50:  #FBF5E6;
  --accent-100: #F3E3B8;
  --accent-200: #EBD08C;
  --accent-300: #E2BE63;
  --accent-400: #DBB157;
  --accent-500: #D4A84B;   /* primary accent (CTA brass) */
  --accent-600: #B98C2A;
  --accent-700: #8F6A1B;

  --info: #16334F;

  /* Neutrals nudged to the VDG cool greys */
  --gray-50:  #F4F7FB;
  --gray-100: #EDF1F6;
  --gray-200: #E1E7EF;

  --shadow-sm: 0 1px 2px 0 rgba(11, 31, 51, 0.06);
  --shadow:    0 1px 3px 0 rgba(11, 31, 51, 0.10), 0 1px 2px -1px rgba(11, 31, 51, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(11, 31, 51, 0.10), 0 2px 4px -2px rgba(11, 31, 51, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(11, 31, 51, 0.10), 0 4px 6px -4px rgba(11, 31, 51, 0.06);

  --font-sans: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, system-ui, sans-serif;

  /* VDG-only tokens */
  --vdg-cta-ink: #1B1607;
  --vdg-mist: #9DB4CF;
  --vdg-air: #2E8FD9;
  --vdg-land: #C2953A;
  --vdg-marine: #1E9F97;
}

/* ---------- Top nav: navy bar like the VDG site header ---------- */
.topnav {
  background: var(--navy-800);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.topnav__brand { color: #fff; }
.topnav__brand-mark { width: 44px; height: 44px; }
.vdg-wordmark { display: flex; flex-direction: column; line-height: 1.05; }
.vdg-wordmark__name { font-weight: 800; letter-spacing: 0.04em; font-size: 1.05rem; color: #fff; }
.vdg-wordmark__sub  { font-size: 0.62rem; letter-spacing: 0.28em; color: var(--vdg-mist); font-weight: 600; }
.topnav__brand > span[style] { border-left-color: rgba(255, 255, 255, 0.25) !important; }

.topnav__tab { color: rgba(255, 255, 255, 0.78); }
.topnav__tab:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.topnav__tab--active { color: #fff; }
.topnav__tab--active::after { background: var(--accent-500); }

.topnav__icon-btn { color: rgba(255, 255, 255, 0.78); }
.topnav__icon-btn:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
.topnav__right a[href="/account"] { color: var(--vdg-mist) !important; }
.topnav .btn--secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.topnav .btn--secondary:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.6); }

/* ---------- Brass accents need dark ink for contrast ---------- */
.btn--accent { color: var(--vdg-cta-ink); }
.btn--accent:hover { background: var(--accent-400); color: var(--vdg-cta-ink); }
.solicitation-card__deadline { color: var(--vdg-cta-ink); }
.solicitation-card__deadline--soon { color: #fff; }
.solicitation-card__deadline--later { color: #fff; }
.solicitation-card__badge-unread { color: var(--vdg-cta-ink); }

/* Focus ring tint (style.css hard-codes the BoldTek navy rgba) */
.search-box input:focus { box-shadow: 0 0 0 3px rgba(22, 51, 79, 0.12); }

/* ---------- Login screen ONLY (login.html adds .login-page next to the
   brand class; base.html pages must keep the light app background) ---------- */
body.brand-vdg.login-page {
  background: radial-gradient(1200px 600px at 80% -10%, #1D4468 0%, transparent 60%),
              linear-gradient(160deg, #10283F 0%, #0B1F33 70%);
  font-family: var(--font-sans);
}
body.brand-vdg.login-page .login-card { border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
body.brand-vdg.login-page .login-card img { height: 72px; }
body.brand-vdg.login-page .login-card h1 { color: #0B1F33; font-weight: 800; letter-spacing: -0.01em; }
body.brand-vdg.login-page .login-card button {
  background: var(--accent-500);
  color: var(--vdg-cta-ink);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(212, 168, 75, 0.35);
}
body.brand-vdg.login-page .login-card button:hover { background: #E2B85C; }
body.brand-vdg.login-page .login-card input:focus { outline: none; border-color: #16334F; box-shadow: 0 0 0 3px rgba(22, 51, 79, 0.12); }

/* ============================================================
   Phone layout (2026-09-08, operator request — VDG host only).
   Every rule sits under body.brand-vdg, so the USAirdrop host is
   untouched. Companion script: /static/mobile-vdg.js (nav toggle,
   table scroll-wrap, list<->detail switch on two-pane screens).
   Breakpoint 768px = phones + small tablets in portrait.
   ============================================================ */
.vdg-nav-toggle { display: none; }
.vdg-backbar { display: none; }
.vdg-tscroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }

@media (max-width: 768px) {
  /* ---- top nav: brand + logout on one row, tabs drop down under ☰ ---- */
  body.brand-vdg .topnav {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--topnav-h);
    padding: 6px 12px;
    gap: 6px;
  }
  body.brand-vdg .topnav__brand { margin-right: auto; }
  body.brand-vdg .vdg-wordmark__sub { display: none; }            /* "DEFENSE GROUP" line: no room at 375px */
  body.brand-vdg .topnav__right { order: 2; gap: 4px; }
  body.brand-vdg .topnav__right a[href="/account"] { display: none !important; }  /* username: reach /account via ⚙ page instead */
  body.brand-vdg .topnav__right .btn { padding: 6px 10px; }
  body.brand-vdg .vdg-nav-toggle {
    display: grid; place-items: center; order: 3;
    width: 44px; height: 44px; border-radius: 8px;
    color: #fff; font-size: 22px; line-height: 1;
    border: 1px solid rgba(255, 255, 255, 0.25); background: transparent;
  }
  body.brand-vdg .topnav__tabs {
    display: none; order: 4; flex: 1 1 100%;
    flex-direction: column; gap: 2px; padding: 4px 0 8px;
  }
  body.brand-vdg .topnav.vdg-nav-open .topnav__tabs { display: flex; }
  body.brand-vdg .topnav__tab { padding: 12px 12px; font-size: 15px; border-left: 3px solid transparent; border-radius: 6px; }
  body.brand-vdg .topnav__tab--active { background: rgba(255, 255, 255, 0.10); border-left-color: var(--accent-500); }
  body.brand-vdg .topnav__tab--active::after { display: none; }

  /* ---- sub-nav pills: one row that scrolls sideways ---- */
  body.brand-vdg .topnav + div {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    padding: 8px 12px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.brand-vdg .topnav + div::-webkit-scrollbar { display: none; }
  body.brand-vdg .topnav + div .btn { white-space: nowrap; flex: 0 0 auto; min-height: 36px; }

  /* ---- two-pane screens stack; JS switches list <-> detail ---- */
  body.brand-vdg .split { display: block; min-height: 0; }
  body.brand-vdg .list-pane,
  body.brand-vdg .detail-pane {
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
    border-right: 0;
  }
  body.brand-vdg .list-header { position: static; }
  body.brand-vdg .solicitation-list { overflow: visible; }
  body.brand-vdg .split .detail-pane { display: none; }
  body.brand-vdg .split.vdg-detail-open .detail-pane { display: block; }
  body.brand-vdg .split.vdg-detail-open .list-pane { display: none; }
  body.brand-vdg .vdg-backbar {
    display: block; position: sticky; top: 0; z-index: 5;
    padding: 8px 12px; background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
  }
  body.brand-vdg .vdg-backbar .btn { min-height: 40px; font-size: 14px; }
  body.brand-vdg .vdg-backbar { top: var(--topnav-h); }   /* sits under the sticky top nav, not behind it */

  /* The desktop "frozen" detail header (tab bar + sol header, .detail-frozen)
     is ~700px tall once the meta grid goes 2-col — pinned, it hid everything
     (operator report 2026-09-08). On phones it scrolls with the page, and
     the tab bar becomes one sideways-scrolling row instead of wrapping. */
  body.brand-vdg .detail-frozen { position: static; box-shadow: none; }
  body.brand-vdg .tab-group {
    flex-wrap: nowrap; overflow-x: auto; max-width: 100%;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  body.brand-vdg .tab-group::-webkit-scrollbar { display: none; }
  body.brand-vdg .tab-group__tab { white-space: nowrap; flex: 0 0 auto; }

  /* Vendor (quote) cards: the 4-column field grid and the inline
     price / qty / manufacturer edit forms overflowed a 375px card. */
  body.brand-vdg .vendor-card__body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.brand-vdg .vendor-card__body > * { min-width: 0; overflow-wrap: anywhere; }
  body.brand-vdg .vendor-card__header,
  body.brand-vdg .vendor-card__actions,
  body.brand-vdg .vendor-card__bid-form,
  body.brand-vdg .vendor-card__upload-form,
  body.brand-vdg [class$="-edit-form"],
  body.brand-vdg [class$="-edit-label"] { flex-wrap: wrap; max-width: 100%; }
  body.brand-vdg [class$="-edit-form"] input,
  body.brand-vdg [class$="-edit-form"] select { max-width: 100%; }

  /* Attachment cards: header row (type select + filename + badge + delete) */
  body.brand-vdg .attachment-card__header,
  body.brand-vdg .attachment-card__type { flex-wrap: wrap; max-width: 100%; row-gap: 6px; }
  body.brand-vdg .attachment-card__filename { max-width: 100%; overflow-wrap: anywhere; }
  body.brand-vdg .attachment-card__type-select { max-width: 100%; }

  /* ---- content density ---- */
  body.brand-vdg .detail-content { padding: 12px; }
  body.brand-vdg .detail-pane[style] { padding: 12px !important; }   /* Dashboard / Financials inline padding */
  body.brand-vdg .sol-meta-grid { grid-template-columns: repeat(2, 1fr); }
  body.brand-vdg .dash-tile-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.brand-vdg .dash-tile { padding: 12px 14px; }
  body.brand-vdg .app-shell [style*="display:flex"],
  body.brand-vdg .app-shell [style*="display: flex"] { flex-wrap: wrap; }
  body.brand-vdg .app-shell img { max-width: 100%; height: auto; }
  body.brand-vdg .data-table th, body.brand-vdg .data-table td { padding: 8px 10px; }
  body.brand-vdg .page-header h1 { font-size: 1.3rem; }

  /* ---- tap targets + no iOS zoom on focus ---- */
  body.brand-vdg .btn { min-height: 36px; }
  body.brand-vdg input:not([type="checkbox"]):not([type="radio"]),
  body.brand-vdg select,
  body.brand-vdg textarea { font-size: 16px; }

  /* ---- modals go full-screen ---- */
  body.brand-vdg .modal-overlay { padding-top: 0; align-items: stretch; }
  body.brand-vdg .modal-content,
  body.brand-vdg .modal-content--wide {
    max-width: none; width: 100%; max-height: none; min-height: 100vh; border-radius: 0;
  }
}