/*
 * myVAC in the VACARS5 look, light and dark: since 2026-10-06 the VAC 2026
 * style of the dispatcher dashboard (near-black, red haze, raised cards, the
 * roundel beside a text title). The roundel is res/vac-mark.png beside this
 * file; deploy-myvac.sh ships both.
 *
 * Loaded by v6_tpl.php after style_v6_03302019.css. The same file serves both
 * themes: the tokens below change, the rules do not. The token values are
 * VACARS5's own (frontend/src/index.css), so keep the two in step.
 *
 * EVERY rule is scoped to :root[data-theme]. That attribute is set by the
 * inline script v6_tpl.php puts in <head>, so:
 *   - without JavaScript nothing here applies and the portal looks as it did;
 *   - the scope adds (0,2,0) of specificity, which is what lets these rules
 *     beat the <style> block myvac_v2.txt prints INSIDE <body>. That block is
 *     later in the document than this file, so at equal specificity it wins.
 * !important is only used against inline style="" attributes, which nothing
 * else can beat. The PHP writes colours inline in many places.
 *
 * Outlines are box-shadows, never borders: most boxes have fixed pixel widths
 * that add up to the 860px column exactly, and a 1px border would push the
 * last floated panel onto the next line.
 */

:root[data-theme="light"] {
    --background: 240 11% 96%;
    --foreground: 240 10% 7%;
    --card: 0 0% 100%;
    --card-hi: 0 0% 100%;
    --secondary: 240 11% 93%;
    --muted-foreground: 240 6% 38%;
    --primary: 355 85% 45%;
    --primary-foreground: 0 0% 100%;
    --border: 240 10% 88%;
    --input: 240 8% 82%;
    --field: 0 0% 100%;
    --table-head: 240 11% 96%;
    --success: 151 65% 30%;
    --stripe: 240 11% 98%;
    --glow: #fbe1e4;
    --shadow: 0 6px 18px rgb(17 17 20 / 0.06);
    --highlight: inset 0 1px rgb(255 255 255 / 0.6);
    color-scheme: light;
}

:root[data-theme="dark"] {
    --background: 240 11% 4%;       /* #08080A */
    --foreground: 0 0% 100%;
    --card: 240 11% 7%;             /* #101014 */
    --card-hi: 240 9% 11%;          /* #19191E, the top of a raised card */
    --secondary: 240 9% 10%;        /* #18181D */
    --muted-foreground: 240 5% 67%; /* #A8A8B0 */
    --primary: 355 88% 51%;         /* VAC red #F01426 */
    --primary-foreground: 0 0% 100%;
    --border: 240 6% 20%;           /* #303036 */
    --input: 240 6% 23%;            /* #38383F */
    --field: 240 9% 8%;             /* #141418 */
    --table-head: 240 10% 10%;      /* #17171C */
    --success: 151 60% 45%;
    --stripe: 240 9% 10%;           /* a step up from the card, so it shows */
    --glow: #2b1116;
    --shadow: 0 8px 24px rgb(0 0 0 / 0.25);
    --highlight: inset 0 1px rgb(255 255 255 / 0.03);
    color-scheme: dark;
}

:root[data-theme] {
    --radius: 12px;
    --font: "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
    --mono: Consolas, "IBM Plex Mono", ui-monospace, monospace;
}

/* ---- Page ------------------------------------------------------------ */

/* Near-black with a red haze at the top right, as on the dispatcher
   dashboard; the wrappers inside are see-through so the haze shows. */
:root[data-theme],
:root[data-theme] body {
    background: radial-gradient(circle at 70% 0, var(--glow) 0, transparent 32rem) fixed,
                hsl(var(--background)) !important;
    box-shadow: none !important;
}
:root[data-theme] .content,
:root[data-theme] .main,
:root[data-theme] #content,
:root[data-theme] .wrappersub,
:root[data-theme] .boxedsub,
:root[data-theme] .container_12,
:root[data-theme] .body3 {
    background: transparent !important;
    box-shadow: none !important;
}

:root[data-theme] body,
:root[data-theme] body h1,
:root[data-theme] body h2,
:root[data-theme] body h3,
:root[data-theme] body h4,
:root[data-theme] body h5,
:root[data-theme] body h6,
:root[data-theme] body td,
:root[data-theme] body th,
:root[data-theme] body p,
:root[data-theme] body span,
:root[data-theme] body div,
:root[data-theme] body li,
:root[data-theme] body label,
:root[data-theme] body input,
:root[data-theme] body select,
:root[data-theme] body textarea,
:root[data-theme] body button {
    font-family: var(--font) !important;
}

:root[data-theme] body {
    color: hsl(var(--foreground));
    -webkit-font-smoothing: antialiased;
}

/* v6's stylesheets give cells, bold and italic runs, bare spans and the
   old in-table headings fixed near-black colours (#000, #222, #444), which
   vanish on the dark card. Tables and cells take the theme's text colour
   outright (inheriting is not enough: the table itself is often #444), and
   runs inside them inherit it. Spans WITH a class keep theirs; those are
   status chips and the like. Inline colours still win, being inline.
   :root:root doubles the scope on purpose: (0,3,1) beats v6 rules like
   .fleettbl tr td:first-child (0,2,2) without reaching for !important, which
   would also flatten the inline colours we want to keep. */
:root:root[data-theme] table,
:root:root[data-theme] td,
:root:root[data-theme] th {
    color: hsl(var(--foreground));
}
:root:root[data-theme] b,
:root:root[data-theme] strong,
:root:root[data-theme] i,
:root:root[data-theme] em,
:root:root[data-theme] td > span:not([class]) {
    color: inherit;
}
/* Their black heading bars (HR "Services", admin "Hubs") lose the bar too. */
:root[data-theme] .fltops h1,
:root[data-theme] .fltops h2,
:root[data-theme] .fltops h3 {
    background: transparent !important;
    color: hsl(var(--foreground)) !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: 1px solid hsl(var(--border)) !important;
}

/* In-table section headings (Fleet Downloads, Operational Files). They were
   white on a black bar; with the bar gone they need the text colour. */
:root[data-theme] .mv2_h1 {
    background: transparent !important;
    color: hsl(var(--foreground)) !important;
    font-weight: 700 !important;
    border: none !important;
    border-bottom: 1px solid hsl(var(--border)) !important;
}

/* The PHP writes its greys inline. Map each onto the theme. These match by
   substring, so "#000" alone also caught #0000ff and #000080 (blue, navy)
   and turned them white (2026-10-15, a crew memo); #0000.. is excluded and
   plain black matched on its own. */
:root[data-theme] [style*="color:#111"],
:root[data-theme] [style*="color: #111"],
:root[data-theme] [style*="color:#222"],
:root[data-theme] [style*="color: #222"],
:root[data-theme] [style*="color:#444"],
:root[data-theme] [style*="color: #444"],
:root[data-theme] [style*="color:#333"],
:root[data-theme] [style*="color: #333"],
:root[data-theme] [style*="color:#000"]:not([style*="color:#0000"]),
:root[data-theme] [style*="color: #000"]:not([style*="color: #0000"]),
:root[data-theme] [style*="color:#000000"],
:root[data-theme] [style*="color: #000000"],
:root[data-theme] [style*="color:black"],
:root[data-theme] [style*="color: black"] {
    color: hsl(var(--foreground)) !important;
}
:root[data-theme] [style*="color:#555"],
:root[data-theme] [style*="color: #555"],
:root[data-theme] [style*="color:#666"],
:root[data-theme] [style*="color: #666"],
:root[data-theme] [style*="color:#777"],
:root[data-theme] [style*="color:#888"],
:root[data-theme] [style*="color:#999"],
:root[data-theme] [style*="color:grey"],
:root[data-theme] [style*="color:gray"] {
    color: hsl(var(--muted-foreground)) !important;
}

:root[data-theme] a {
    color: hsl(var(--primary));
}

/* v6 put a text-shadow on most headings and labels, to lift white type off
   its photo backgrounds. On a flat card it reads as a smudge or a glow. */
:root[data-theme] body *:not(.mv2_theme_toggle) {
    text-shadow: none !important;
}

:root[data-theme] hr {
    border-color: hsl(var(--border)) !important;
}

/* ---- Cards ----------------------------------------------------------- */

:root[data-theme] .imgwrap,
:root[data-theme] .imgwrap_profile,
:root[data-theme] .mv2_frame,
:root[data-theme] .mv2_logincont,
:root[data-theme] .mv2_login_cont,
:root[data-theme] .mv2_content_port .fltopsbids,
:root[data-theme] .mv2_hrtable .fltops,
:root[data-theme] .mv2_admintable .fltops,
:root[data-theme] .mv2_files_port {
    background: linear-gradient(145deg, hsl(var(--card-hi)), hsl(var(--card))) !important;
    box-shadow: 0 0 0 1px hsl(var(--border)), var(--highlight), var(--shadow) !important;
    border-color: transparent !important;
    border-radius: var(--radius);
    color: hsl(var(--foreground));
}

/* A card inside a card would draw a double outline. */
:root[data-theme] .imgwrap .imgwrap,
:root[data-theme] .imgwrap .mv2_frame {
    box-shadow: none !important;
}

/* ---- myVAC header and menu ------------------------------------------ */

/* The dispatcher's top bar: the VAC roundel beside a bold "myVAC", on the
   panel colour, in place of v6's cockpit photo and lettered logo image. */
:root[data-theme] .mv2_headerbox {
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: auto !important;
    min-height: 64px;
    padding: 0 18px;
    box-sizing: border-box;
    background: linear-gradient(145deg, hsl(var(--card-hi)), hsl(var(--card))) !important;
}
:root[data-theme] .mv2_headerbox > img {
    display: none;
}
:root[data-theme] .mv2_headerbox::before {
    content: "";
    width: 40px;
    height: 40px;
    flex: none;
    background: url("vac-mark.png") center / contain no-repeat;
    filter: drop-shadow(0 6px 14px rgb(240 20 38 / 0.25));
}
:root[data-theme] .mv2_headerbox::after {
    content: "myVAC";
    color: hsl(var(--foreground));
    font: 700 1.15rem/1 var(--font);
    letter-spacing: -0.02em;
}

:root[data-theme] .mv2_menucont {
    background: hsl(var(--card)) !important;
    padding: 6px;
    border-top: 1px solid hsl(var(--border));
}

:root[data-theme] .mv2_menu {
    background: transparent !important;
    color: hsl(var(--muted-foreground)) !important;
    border: none !important;
    border-radius: 6px;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: none !important;
    transition: background-color .15s, color .15s;
}
:root[data-theme] .mv2_menu:hover {
    background: hsl(var(--secondary)) !important;
    color: hsl(var(--foreground)) !important;
}
/* The page you are on: tinted red with a red underline, not a solid red pill. */
:root[data-theme] .mv2_menu.mv2_tabsel {
    background: hsl(var(--primary) / 0.12) !important;
    color: hsl(var(--foreground)) !important;
    box-shadow: inset 0 -2px hsl(var(--primary));
}

/* ---- Section titles -------------------------------------------------- */

/* The big black bars ("My Profile", "Pilot Logbook", "Flight Map"): a title
   on the page, with the red leaf kept as its icon. */
:root[data-theme] body h5,
:root[data-theme] .mv2_content_port:not(.mv2_files_port) > h1 {
    background: transparent !important;
    color: hsl(var(--foreground)) !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}
/* The red leaf tile becomes the 2026 roundel. */
:root[data-theme] .mv2_content_port:not(.mv2_files_port) > h1::before {
    background: url("vac-mark.png") center / 30px 30px no-repeat !important;
    border-radius: 0;
}
:root[data-theme] img[src$="vac_leaf_trans.png"] {
    content: url("vac-mark.png");
    background: transparent !important;
    padding: 0 !important;
    border-radius: 50%;
}

/* Panel titles ("General Information", "Quick Links"): VACARS5's overline,
   small red capitals over a hairline. */
:root[data-theme] .mv2_frame .mv2_frame_title,
:root[data-theme] .mv2_frame_title {
    background: transparent !important;
    color: hsl(var(--primary)) !important;
    border: none !important;
    border-bottom: 1px solid hsl(var(--border)) !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

/* Card headings inside a panel (Bids "Flight Search", Files, Dispatch):
   v6 drew a black bar with a 6px white underline. Now a card title over a
   hairline, as VACARS5's cards have. */
:root[data-theme] .mv2_logincont h2,
:root[data-theme] .imgwrap > h1,
:root[data-theme] .mv2_fullwide > h1,
:root[data-theme] .mv2_files_port h1,
:root[data-theme] .mv2_Dispatch_port h1 {
    background: transparent !important;
    color: hsl(var(--foreground)) !important;
    border: none !important;
    border-bottom: 1px solid hsl(var(--border)) !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}

/* The banner photo under the menu keeps its photo; only the title strip on
   top of it changes. */
:root[data-theme] .mv2_sectiontitle {
    color: #fff !important;
    font-weight: 700 !important;
    background: linear-gradient(90deg, rgb(8 8 10 / 0.92), rgb(8 8 10 / 0.55)) !important;
}

/* ---- Rows and tables ------------------------------------------------- */

/* Old tables paint their cells light (v6's .profile td, bgcolor="", …).
   Clear them so the card shows through; the rules below stripe them again. */
:root[data-theme] table,
:root[data-theme] tr,
:root[data-theme] td,
:root[data-theme] th {
    background-color: transparent;
    border-color: hsl(var(--border));
}
/* Header cells: small capitals on a slightly lighter band (the dispatcher's
   table heads). */
:root[data-theme] th {
    color: hsl(var(--muted-foreground));
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
/* Row and cell backgrounds, in every table on every page.
   v6 colours rows light with long selectors (.mv2_fullwide .fltopsbids
   .mv2_grey, .mv2_content_port .mv2_admintable .fltopsbids tr, …) that beat
   the plain reset above, so in dark mode Bids results, Flight Ops and Admin
   kept white rows under white text. :root:root + .boxedsub reaches (0,4,1),
   which outranks all of them; the rules after it put back what carried
   meaning, as tints that read on either theme. */
:root:root[data-theme] .boxedsub tr,
:root:root[data-theme] .boxedsub td,
:root:root[data-theme] .boxedsub th {
    background-color: transparent;
}
:root:root[data-theme] .boxedsub th,
:root:root[data-theme] .boxedsub tr#w > td,
:root:root[data-theme] .boxedsub tr.mv2_logbook_header > td {
    background-color: hsl(var(--table-head));
}
/* Zebra stripes: Bids results (mv2_grey), Flight Ops (gr), flight-plan
   lists (fplsfl), and Admin's rows, which were all #eee. */
:root[data-theme] .boxedsub tr.mv2_grey,
:root[data-theme] .boxedsub tr.mv2_grey > td,
:root[data-theme] .boxedsub tr.fplsfl,
:root[data-theme] .boxedsub tr.fplsfl > td,
:root[data-theme] .boxedsub .mv2_admintable .fltopsbids tr:not(#w) {
    background-color: hsl(var(--stripe)) !important;
}
/* Admin's long lists (table.listing, e.g. 1,778 rows of pilot history) had
   no stripes at all; across a 1,300px row the eye loses its place. */
:root[data-theme] .boxedsub table.listing tr:nth-child(even) > td {
    background-color: hsl(var(--stripe));
}

/* Meaning, kept: approved (green) and rejected / taken (red) rows, and the
   hovered or selected flight plan. Inline colours need attribute selectors. */
:root[data-theme] .boxedsub [style*="#bbffbe"],
:root[data-theme] .boxedsub [style*="#bbffbe"] > td {
    background-color: hsl(var(--success) / 0.16) !important;
}
:root[data-theme] .boxedsub [style*="#ffb9b9"],
:root[data-theme] .boxedsub [style*="#ffb9b9"] > td,
:root[data-theme] .boxedsub #taken,
:root[data-theme] .boxedsub #taken > td {
    background-color: hsl(var(--primary) / 0.14) !important;
}
:root[data-theme] .boxedsub [style*="#e6e6e6"],
:root[data-theme] .boxedsub [style*="#f5f5f7"] {
    background-color: hsl(var(--stripe)) !important;
}
:root[data-theme] .boxedsub tr.fplsfl:hover,
:root[data-theme] .boxedsub tr.fplsfl:hover > td,
:root[data-theme] .boxedsub tr.fplsflsel,
:root[data-theme] .boxedsub tr.fplsflsel > td {
    background-color: hsl(var(--success) / 0.18) !important;
}

/* Header rows of the bid and memo tables (tr#w): a black bar in v6, now
   VACARS5's muted capitals over a hairline. */
:root[data-theme] tr#w,
:root[data-theme] tr#w td {
    background: transparent !important;
    color: hsl(var(--muted-foreground)) !important;
    font-size: 10px !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 1px solid hsl(var(--border));
}
/* The labels inside those cells are <b>, and v6 colours them itself —
   `.mv2_fullwide .fltopsbids #w td b { color: white }`, for the black bar —
   so on the light theme the bid confirmation page's header was white on white
   (reported 2026-10-05). The cell rule above never reached them. Drop the
   bar's dark text-shadow with it. */
:root[data-theme] tr#w b,
:root[data-theme] tr#w td * {
    color: inherit !important;
    text-shadow: none !important;
}
:root[data-theme] tr#w {
    text-shadow: none !important;
}

/* Striped rows (Flight Ops bids and friends: tr.gr grey, tr.wh white). */
:root[data-theme] tr.gr,
:root[data-theme] tr.gr td {
    background: hsl(var(--stripe)) !important;
}
:root[data-theme] tr.wh,
:root[data-theme] tr.wh td {
    background: hsl(var(--card)) !important;
}
/* The award pills on the profile. */
:root[data-theme] table.profile td {
    background: hsl(var(--stripe)) !important;
}
/* Their descriptions: myvac_v2.txt sets these #444 with !important. */
:root[data-theme] .mv2_general .profile tr td i {
    color: hsl(var(--muted-foreground)) !important;
}

/* Pager under the logbook ("View: 20 - 40 …  Page: 1"). */
:root[data-theme] .pages,
:root[data-theme] .pages strong {
    color: hsl(var(--muted-foreground)) !important;
}

:root[data-theme] .mv2_rowwhite {
    background: hsl(var(--card)) !important;
    color: hsl(var(--foreground)) !important;
}
:root[data-theme] .mv2_rowgrey {
    background: hsl(var(--stripe)) !important;
    color: hsl(var(--foreground)) !important;
}
:root[data-theme] .mv2_rowwhite > span:first-child,
:root[data-theme] .mv2_rowgrey > span:first-child {
    color: hsl(var(--muted-foreground));
}

/* Latest Bulletins rows: [READ] title …  2026/07/16 16:50 UTC. v6 gives the
   title a fixed 420px and the date a fixed 127px, sized for its own font; in
   ours the date no longer fits, "UTC" wrapped onto a second line and every
   row doubled in height (reported 2026-10-06). One line instead: the title
   takes what is left and ends in an ellipsis, the date never wraps. */
:root[data-theme] .mv2_rowwhite:has(> .mv2_bulletin_link),
:root[data-theme] .mv2_rowgrey:has(> .mv2_bulletin_link) {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 10px;
    line-height: 32px;
}
:root[data-theme] .mv2_bulletin_link {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    display: block !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
:root[data-theme] .mv2_bulletin_date {
    flex: none;
    width: auto !important;
    white-space: nowrap;
    font-family: var(--mono) !important;
    font-size: 12px !important;
    color: hsl(var(--muted-foreground)) !important;
}
/* READ / UNREAD as the dispatcher's status chips. */
:root[data-theme] .mv2_memoacked,
:root[data-theme] .mv2_memonotacked {
    display: inline-block !important;
    vertical-align: 1px;
    width: auto !important;
    height: auto !important;
    margin: 0 8px 0 0 !important;
    padding: 2px 8px !important;
    border-radius: 999px;
    font-size: 10px !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 16px !important;
}
:root[data-theme] .mv2_memoacked {
    color: #86efac !important;
    background: #10271a !important;
    box-shadow: inset 0 0 0 1px #24613c;
}
:root[data-theme] .mv2_memonotacked {
    color: #fff !important;
    background: hsl(var(--primary)) !important;
}
:root[data-theme="light"] .mv2_memoacked {
    color: #166534 !important;
    background: #dcfce7 !important;
    box-shadow: inset 0 0 0 1px #86efac;
}

:root[data-theme] .mv2_logbook_header,
:root[data-theme] .mv2_logbook_header td {
    background: transparent !important;
    color: hsl(var(--muted-foreground)) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 1px solid hsl(var(--border));
}
:root[data-theme] .thinlog td {
    color: hsl(var(--foreground));
    border-color: hsl(var(--border)) !important;
}
:root[data-theme] .thinlog tr:not(.mv2_logbook_header):nth-child(odd) td {
    background: hsl(var(--stripe));
}
/* 13px, the size of the text in the cards around it. At 11px the log read a
   size smaller than everything else on the profile (beta report, 2026-10-15). */
:root[data-theme] .thinlog tr:not(.mv2_logbook_header) td {
    font-family: var(--mono) !important;
    font-size: 13px;
}

/* ---- Small boxes on the profile ------------------------------------- */

/* Name, rank and base beside the insignia. White on the old dark panel. */
:root[data-theme] .mv2_profile_white {
    color: hsl(var(--foreground)) !important;
}
:root[data-theme] .mv2_profile_white + .mv2_profile_white {
    color: hsl(var(--muted-foreground)) !important;
}
:root[data-theme] .mv2_profile_image {
    box-shadow: 0 0 0 1px hsl(var(--border)) !important;
    border-radius: 6px;
    background: #fff;
}

:root[data-theme] .mv2_timebox {
    background: hsl(var(--card)) !important;
    color: hsl(var(--muted-foreground)) !important;
    font-family: var(--mono) !important;
}
:root[data-theme] .mv2_memobox {
    border-radius: 6px;
}
:root[data-theme] .mv2_memogreen {
    /* Fixed, not --success: dark's success green is too light under white. */
    background-color: hsl(148 65% 30%) !important;
    color: #fff !important;
}
/* Unread memos (2026-10-15): the red bar is a link, so it took the theme's
   link colour, VAC red, and read red on red. White on a fixed red, as the
   green bar is white on a fixed green: dark's brighter brand red gives white
   text only 4.3:1, this one about 5.9:1 in both themes. */
:root[data-theme] .mv2_memored,
:root[data-theme] .mv2_memored:link,
:root[data-theme] .mv2_memored:visited {
    background-color: hsl(355 85% 43%) !important;
    color: #fff !important;
}
:root[data-theme] .mv2_memored:hover,
:root[data-theme] .mv2_memored:focus-visible {
    background-color: hsl(355 85% 37%) !important;
    color: #fff !important;
}

/* ---- Crew memo page (memos.php) -------------------------------------- */
/* 2026-10-15: memos.php styles itself inline (a #eee author strip with black
   text, a #fff body), so in dark the theme's white text vanished on both.
   The strip follows the theme. The body stays a light page with dark text in
   both themes: a memo is a forum post written against white, often with its
   own colours, which a dark body would hide. Attribute selectors because the
   markup has no classes and memos.php is not one of the deployed patches. */
:root[data-theme] .imgwrap > table[style*="background-color:#eee"] {
    background-color: hsl(var(--card-hi)) !important;
    border: 1px solid hsl(var(--border));
    border-radius: 6px;
}
:root[data-theme] .imgwrap > table[style*="background-color:#eee"] td,
:root[data-theme] .imgwrap > table[style*="background-color:#eee"] span:not([style*="color:#"]),
:root[data-theme] .imgwrap > table[style*="background-color:#eee"] b {
    color: hsl(var(--foreground)) !important;
}
:root[data-theme] .imgwrap > table[style*="background-color:#eee"] span[style*="font-size:13px"] {
    color: hsl(var(--muted-foreground)) !important;
}
:root[data-theme] .imgwrap > table[style*="background-color:#eee"] span[style*="color:#dd0000"] {
    color: hsl(var(--primary)) !important;
}
:root[data-theme="dark"] .imgwrap > table[style*="background-color:#eee"] span[style*="color:#007a00"] {
    color: hsl(148 55% 55%) !important;
}
:root[data-theme] .imgwrap > span[style*="background-color: #fff"] {
    background-color: #fff !important;
    color: #16161a !important;
    border-radius: 6px;
}
:root[data-theme] .imgwrap > span[style*="background-color: #fff"] :where(p, div, span, td, li, b, strong, em, i, u, font:not([color]), center, h1, h2, h3, h4) {
    color: inherit;
}
:root[data-theme] .imgwrap > span[style*="background-color: #fff"] :is(
    [style*="color:#111"], [style*="color: #111"], [style*="color:#222"], [style*="color: #222"],
    [style*="color:#333"], [style*="color: #333"], [style*="color:#444"], [style*="color: #444"],
    [style*="color:#000"]:not([style*="color:#0000"]), [style*="color: #000"]:not([style*="color: #0000"]),
    [style*="color:#000000"], [style*="color: #000000"], [style*="color:black"], [style*="color: black"]) {
    color: #16161a !important;   /* the page is light here: dark stays dark */
}
:root[data-theme] .imgwrap > span[style*="background-color: #fff"] :is(
    [style*="color:#555"], [style*="color: #555"], [style*="color:#666"], [style*="color: #666"],
    [style*="color:#777"], [style*="color:#888"], [style*="color:#999"], [style*="color:grey"], [style*="color:gray"]) {
    color: #55555c !important;
}
:root[data-theme] .imgwrap > span[style*="background-color: #fff"] a {
    color: hsl(355 85% 40%) !important;
}

/* ---- Forms ----------------------------------------------------------- */

:root[data-theme] input[type="text"],
:root[data-theme] input[type="password"],
:root[data-theme] input[type="email"],
:root[data-theme] input[type="number"],
:root[data-theme] input[type="search"],
:root[data-theme] input:not([type]),
:root[data-theme] select,
:root[data-theme] textarea {
    background: hsl(var(--field)) !important;
    color: hsl(var(--foreground)) !important;
    border: 1px solid hsl(var(--input)) !important;
    border-radius: 7px;
    box-shadow: none !important;
}
:root[data-theme] input:focus,
:root[data-theme] select:focus,
:root[data-theme] textarea:focus {
    outline: none;
    border-color: hsl(var(--primary)) !important;
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.2) !important;
}

:root[data-theme] input[type="submit"],
:root[data-theme] input[type="button"],
:root[data-theme] input[type="reset"],
:root[data-theme] button {
    background: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 7px 14px;
    cursor: pointer;
}
:root[data-theme] input[type="reset"] {
    background: hsl(var(--secondary)) !important;
    color: hsl(var(--foreground)) !important;
}

/* ---- Flight map ------------------------------------------------------ */

:root[data-theme] .map_cont {
    background: transparent !important;
    box-shadow: none !important;
}

/* v6's public stylesheet sizes #map_canvas for its own 940px column
   (style_08312014.css: 940x800). myVAC's column is 860px, so the map ran
   94px past everything above it. Fill the column instead. */
:root[data-theme] .map_cont,
:root[data-theme] .map_cont #map_canvas {
    width: 100% !important;
    box-sizing: border-box;
}
:root[data-theme] #map_canvas {
    border: none !important;
    box-shadow: 0 0 0 1px hsl(var(--border)) !important;
    border-radius: var(--radius);
    background: hsl(var(--background));
}

/* ---- Theme switch ---------------------------------------------------- */

/* button.class, so these outrank the general button rule above. */

:root[data-theme] button.mv2_theme_toggle {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0 !important;
    border-radius: 50% !important;
    background: hsl(var(--field)) !important;
    color: hsl(var(--foreground)) !important;
    border: 1px solid hsl(var(--input)) !important;
    cursor: pointer;
}
:root[data-theme] button.mv2_theme_toggle:hover {
    background: hsl(var(--primary)) !important;
}
:root[data-theme] button.mv2_theme_toggle svg {
    width: 16px;
    height: 16px;
}
/* Pages with no myVAC header (login, register, password reset). */
:root[data-theme] button.mv2_theme_toggle.mv2_theme_floating {
    position: fixed;
    top: auto;
    transform: none;
    bottom: 16px;
    right: 16px;
}

/* ---- Page-specific ---------------------------------------------------- */

/* Flight plan (fpls.php): the two title bars and the button row above the
   OFP. v6 drew both on dark images (topbar_v23.png, fpls_grad_button*.gif)
   with white text. The colour rules elsewhere turned the text dark but left
   the images, so in light mode it was black on black (beta report
   2026-10-16). `background` (not -color) drops the image too. */
:root[data-theme] .mv2_fpls .leftbar,
:root[data-theme] .mv2_fpls .rightbar {
    background: transparent !important;
    color: hsl(var(--foreground)) !important;
    text-shadow: none !important;
    font-weight: 700 !important;
    border-bottom: 1px solid hsl(var(--border)) !important;
}
:root[data-theme] .fplstable tr.header,
:root[data-theme] .fplstable tr.header > td {
    background: transparent !important;
    text-shadow: none !important;
}
:root[data-theme] .fplstable tr.header > td.advopt {
    background: hsl(var(--secondary)) !important;
    color: hsl(var(--foreground)) !important;
    border: 1px solid hsl(var(--border)) !important;
    font-weight: 600 !important;
}
:root[data-theme] .fplstable tr.header > td.advopt:hover {
    background: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
}
/* The main action (Generate OFP, Edit OFP) in the accent colour. */
:root[data-theme] .fplstable tr.header > td.advopt.bred {
    background: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
}
:root[data-theme] .fplstable tr.header > td.advopt.bred:hover { filter: brightness(1.1); }
:root[data-theme] .fplstable tr.header > td.advopt.unavail,
:root[data-theme] .fplstable tr.header > td.advopt.unavail:hover {
    background: hsl(var(--secondary)) !important;
    color: hsl(var(--muted-foreground)) !important;
    opacity: 0.55;
    cursor: default !important;
}
/* The empty cell that fills out the row is not a button. */
:root[data-theme] .fplstable tr.header > td.advopt:not(:has(span)) {
    background: transparent !important;
    border-color: transparent !important;
    cursor: default !important;
}
/* The icons are white, for the old green buttons: dark on light buttons. */
:root[data-theme="light"] .fplstable tr.header > td.advopt:not(.bred):not(:hover) img {
    filter: invert(1) brightness(0.2);
}

/* Flight plan status (fpls.php): ready / not ready / other. */
:root[data-theme] .fpstat_r { color: hsl(var(--success)) !important; }
:root[data-theme] .fpstat_n { color: hsl(var(--primary)) !important; }
:root[data-theme="dark"] .fpstat_e { color: hsl(206 90% 65%) !important; }

/* HR contact form sat on its own light-grey panel. */
:root[data-theme] .contact_form {
    background: transparent !important;
    box-shadow: none !important;
    border-color: hsl(var(--border)) !important;
}

/* ---- Layout: use the width ------------------------------------------- */

/* v6 boxed the portal into 860px inside a 960px .container_12, and laid
   the panels out as fixed-width inline-blocks, some pulled together with
   negative margins (margin-left:-10px). With outlines drawn, those margins
   show as overlaps. Instead: up to 1360px wide, and the content container
   (.boxedsub > div, the same on every page) becomes a two-column grid.

   Column 1 is 512px because the page banner photos are 500x225 (+ 6px card
   padding each side); stretching them would blur them. Everything that is
   not one of the named tiles below spans both columns. */
:root[data-theme] .container_12 {
    width: auto !important;
    max-width: 1360px;
    margin: 0 auto !important;
    padding: 0 24px;
    box-sizing: border-box;
}
:root[data-theme] .container_12 .main,
:root[data-theme] .container_12 #content,
:root[data-theme] .container_12 .wrappersub,
:root[data-theme] .container_12 .boxedsub {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
}
:root[data-theme] .container_12 .wrappersub {
    display: block !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

:root[data-theme] .boxedsub > div {
    display: grid;
    grid-template-columns: 512px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
:root[data-theme] .boxedsub > div > * {
    grid-column: 1 / -1;
    width: auto !important;
    max-width: 100%;
    margin: 0 !important;
    box-sizing: border-box;
}
:root[data-theme] .boxedsub > div > br {
    display: none;
}

/* Row: page banner | pilot card. */
:root[data-theme] .boxedsub > div > .imgwrap:has(> .mv2_sectionlabel) {
    grid-column: 1;
}
:root[data-theme] .boxedsub > div > .imgwrap_profile {
    grid-column: 2;
    align-self: stretch;
}
:root[data-theme] .imgwrap_profile > .mv2_frame {
    width: 100% !important;
    height: 100% !important;
    min-height: 220px;
    box-sizing: border-box;
}
:root[data-theme] .imgwrap_profile .mv2_frame_cont {
    width: auto !important;
}
/* The pilot card's insides. v6 placed them by hand for a 326x220 box: an
   empty 87px title strip as a spacer (whose hairline then ran behind the
   insignia), the insignia and name floated into an absolutely positioned box
   with no gap between them, and the memo bar pinned at top:160px. Here they
   are a column: insignia + name side by side, then date and memo bar, which
   sit at the bottom with the divider above them. */
:root[data-theme] .imgwrap_profile > .mv2_frame {
    display: flex !important;
    flex-direction: column;
}
:root[data-theme] .imgwrap_profile .mv2_main_profile_title {
    display: none !important;
}
:root[data-theme] .imgwrap_profile .mv2_main_profile_cont {
    position: static !important;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
}
:root[data-theme] .imgwrap_profile .mv2_main_profile_cont > * {
    float: none !important;
    margin: 0 !important;
}
:root[data-theme] .imgwrap_profile .mv2_main_profile_cont > div:not(.mv2_profile_image) {
    width: auto !important;
    flex: 1;
    min-width: 0;
}
:root[data-theme] .imgwrap_profile .mv2_profile_image {
    flex: none;
    padding: 6px 4px 2px;
    border-bottom: none !important;
}
:root[data-theme] .imgwrap_profile .mv2_main_profile_cont + .mv2_frame_cont {
    margin-top: auto;
    border-top: 1px solid hsl(var(--border));
}
:root[data-theme] .imgwrap_profile .mv2_timebox {
    margin: 10px 0 !important;
}
:root[data-theme] .imgwrap_profile .mv2_memo_backing {
    position: static !important;
}

/* The date line and the memo bar were sized to the old 326px card. */
:root[data-theme] .imgwrap_profile .mv2_timebox,
:root[data-theme] .imgwrap_profile .mv2_memo_backing,
:root[data-theme] .imgwrap_profile .mv2_memobox {
    width: 100% !important;
    box-sizing: border-box;
}

/* Row: Quick Links | Latest Bulletins (profile, myCareer). */
:root[data-theme] .boxedsub > div > .mv2_2ndrow { grid-column: 1; }
:root[data-theme] .boxedsub > div > .mv2_2ndrow + .mv2_2ndrow { grid-column: 2; }
:root[data-theme] .mv2_2ndrow,
:root[data-theme] .mv2_2ndrow > .mv2_frame {
    height: 100%;
}

/* Every panel fills its cell; v6 gave each a pixel width inline. */
:root[data-theme] .boxedsub .mv2_frame {
    width: 100% !important;
    box-sizing: border-box;
}

/* "My Profile": its three info columns, then the awards across the bottom. */
:root[data-theme] .mv2_general {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
:root[data-theme] .mv2_general > * {
    grid-column: auto;
    width: auto !important;
    margin: 0 !important;
}
:root[data-theme] .mv2_general > h5,
:root[data-theme] .mv2_general > .imgwrap:has(table.profile) {
    grid-column: 1 / -1;
}

/* Section titles: v6 spaced them with margin-top:50px / margin-bottom:-22px
   inline, which with the grid gap left them floating. */
:root[data-theme] .boxedsub h5 {
    margin: 16px 0 0 !important;
}
:root[data-theme] .mv2_logbook > hr,
:root[data-theme] .mv2_general > hr {
    display: none;
}
:root[data-theme] .mv2_logbook {
    display: grid;
    gap: 12px;
}
/* Its table card had margin:auto inline, which in a grid shrinks it to its
   content and centres it. */
:root[data-theme] .mv2_logbook > * {
    width: auto !important;
    margin: 0 !important;
}

/* Tables v6 sized to the old column (848px) fill the card instead. */
:root[data-theme] .boxedsub table.profile,
:root[data-theme] .boxedsub table.profilelog,
:root[data-theme] .boxedsub table.thinlog,
:root[data-theme] .boxedsub .mv2_content_port,
:root[data-theme] .boxedsub .mv2_content_port > table,
:root[data-theme] .boxedsub .mv2_content_port > .imgwrap,
:root[data-theme] .boxedsub .mv2_content_port > div > table,
:root[data-theme] .boxedsub table.mv2_fpls {
    width: 100% !important;
    box-sizing: border-box;
}

/* Tables that are also cards (table.imgwrap: Fleet, Dispatch). The imgwrap
   class makes them display:block, so the table grew but its rows did not. */
:root[data-theme] .boxedsub table.imgwrap {
    display: table !important;
    width: 100% !important;
}

/* Flight map: the column is wider now, so a little shorter than v6's 800. */
:root[data-theme] .boxedsub #map_canvas {
    height: min(70vh, 640px) !important;
}

/* Narrow windows: one column, banner on top. */
@media (max-width: 1000px) {
    :root[data-theme] .boxedsub > div {
        grid-template-columns: minmax(0, 1fr);
    }
    /* !important: the placement rules above are more specific (the banner's
       :has() counts its argument), and a tile left in column 2 makes the
       grid invent that column again. */
    :root[data-theme] .boxedsub > div > * {
        grid-column: 1 / -1 !important;
    }
    :root[data-theme] .mv2_general {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --------------------------------------------- Files (VACARS5) and Dispatch */
/* 2026-10-07. files.php is VACARS5 plus the operations library that used to be
   Dispatch.php; dispatcher.php frames the dispatcher client. */
:root[data-theme] .vac5-files { display: grid; gap: 16px; }
/* The port is itself a card; holding cards, it steps back. */
:root[data-theme] .mv2_files_port:has(.vac5-files, .vac5-dispatcher) {
    background: none !important; box-shadow: none !important; padding: 0 !important;
}
:root[data-theme] .vac5-card {
    background: linear-gradient(180deg, hsl(var(--card-hi)), hsl(var(--card)));
    border: 1px solid hsl(var(--border)); border-radius: 12px;
    padding: 22px 24px; box-shadow: var(--shadow), var(--highlight);
    color: hsl(var(--foreground)); text-align: left;
}
:root[data-theme] .vac5-card p { color: hsl(var(--muted-foreground)); line-height: 1.6; margin: 6px 0 0; }
:root[data-theme] .vac5-kicker {
    font: 600 11px/1 "JetBrains Mono", Consolas, monospace; letter-spacing: .18em;
    text-transform: uppercase; color: hsl(var(--primary)); margin-bottom: 8px;
}
:root[data-theme] .vac5-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: start; }
:root[data-theme] .vac5-hero h2 { font-size: 30px; font-weight: 800; margin: 0; color: hsl(var(--foreground)); }
:root[data-theme] .vac5-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 10px; }
:root[data-theme] .vac5-btn {
    display: inline-block; padding: 11px 18px; border-radius: 8px; font-weight: 700;
    background: hsl(var(--primary)); color: hsl(var(--primary-foreground)) !important;
    text-decoration: none !important; border: 1px solid hsl(var(--primary));
}
:root[data-theme] .vac5-btn:hover { filter: brightness(1.08); }
:root[data-theme] .vac5-btn-ghost { background: transparent; color: hsl(var(--foreground)) !important; border-color: hsl(var(--border)); }
:root[data-theme] .vac5-small { font-size: 12px; }
:root[data-theme] .vac5-reqs { width: 100%; border-collapse: collapse; font-size: 13px; }
:root[data-theme] .vac5-reqs th {
    text-align: left; font: 600 10px/1 "JetBrains Mono", Consolas, monospace; letter-spacing: .14em;
    text-transform: uppercase; color: hsl(var(--primary)); padding: 8px 10px;
    border-bottom: 1px solid hsl(var(--border)); background: transparent;
}
:root[data-theme] .vac5-reqs td { padding: 9px 10px; border-bottom: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); vertical-align: top; }
:root[data-theme] .vac5-reqs td:first-child { font-weight: 700; white-space: nowrap; }
:root[data-theme] .vac5-steps { margin: 4px 0 0 18px; padding: 0; color: hsl(var(--muted-foreground)); line-height: 1.6; }
:root[data-theme] .vac5-steps li { margin: 6px 0; list-style: decimal; padding-left: 4px; }
:root[data-theme] .vac5-steps li::marker { color: hsl(var(--primary)); font-weight: 700; }
:root[data-theme] .vac5-steps b { color: hsl(var(--foreground)); }
:root[data-theme] .vac5-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 16px; }
:root[data-theme] .vac5-libgroup { border: 1px solid hsl(var(--border)); border-radius: 10px; padding: 12px 14px; background: hsl(var(--secondary)); }
:root[data-theme] .vac5-libgroup h3 { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: hsl(var(--foreground)); }
:root[data-theme] .vac5-doc {
    display: block; padding: 6px 0 6px 18px; position: relative; font-size: 13px;
    color: hsl(var(--foreground)) !important; text-decoration: none !important;
    border-top: 1px solid hsl(var(--border));
}
:root[data-theme] .vac5-doc:first-of-type { border-top: 0; }
:root[data-theme] .vac5-doc::before { content: ""; position: absolute; left: 2px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-radius: 2px; background: hsl(var(--primary)); }
:root[data-theme] .vac5-doc:hover { color: hsl(var(--primary)) !important; }
:root[data-theme] .vac5-dispatcher { border: 1px solid hsl(var(--border)); border-radius: 12px; overflow: hidden; background: hsl(var(--card)); }
:root[data-theme] .vac5-dispatcher-bar {
    display: flex; justify-content: space-between; align-items: center; padding: 10px 14px;
    font: 600 11px/1 "JetBrains Mono", Consolas, monospace; letter-spacing: .14em; text-transform: uppercase;
    color: hsl(var(--muted-foreground)); border-bottom: 1px solid hsl(var(--border));
}
:root[data-theme] .vac5-dispatcher-bar a { color: hsl(var(--primary)) !important; text-decoration: none; }
/* A fixed height, about 2.5x what it was. It was calc(100vh - 200px), at least
   640px, but on www.flyvac.org myVAC is itself in a frame, so 100vh is that
   frame and the dashboard sat at the 640 minimum (2026-10-16). Not vh at all:
   the outer frame is sized to this page's content, so a vh height would
   feed back into itself and keep growing. */
:root[data-theme] .vac5-dispatcher iframe { display: block; width: 100%; height: 1600px; border: 0; background: #08080a; }
@media (max-width: 760px) {
    :root[data-theme] .vac5-hero { grid-template-columns: minmax(0, 1fr); }
    :root[data-theme] .vac5-card { padding: 18px 16px; }
}