/* ==========================================================================
   MRO Tracker UI standard (one look for every screen)
   --------------------------------------------------------------------------
   Loaded after styles.css. Defines the standard pieces (ui-*) and brings the
   older per-screen kits (st-, wso-, pws-, mfd-, fbo-, org-, si-, pr-kpi, ...)
   onto the same look, so a screen doesn't need rewriting to match.
   "html body" in front of a rule only lifts it above the styles screens add
   at run time; it changes nothing else.
     Tiles:   white, coloured left edge, big number, bold label, grey line
     Cards:   white, 1px line, 10px corners, title in navy
     Buttons: 8px corners; navy filled (main action) or navy outline
     Pills:   one size; green ok, amber due, red bad, blue info, grey muted
     Tables:  small grey capitals in the header, roomy rows, hover highlight
   ========================================================================== */
:root {
  --ui-ink: #1F2433; --ui-muted: #6B7080; --ui-line: var(--line, #DDDDD8);
  --ui-good: #1F7A3D; --ui-good-bg: #E9F7EF;
  --ui-warn: #8A5A00; --ui-warn-bar: #E0A100; --ui-warn-bg: #FFF4E0;
  --ui-bad: #B3261E; --ui-bad-bg: #FBEAE9;
  --ui-info: #3B5BDB; --ui-info-bg: #E6EBF7;
  --ui-radius: 10px; --ui-btn-radius: 8px;
}

/* ---------- Standard pieces for new work ---------- */
.ui-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 0 0 16px; }
.ui-card { background: #fff; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); margin: 0 0 14px; min-width: 0; }
.ui-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #EFEFEC; }
.ui-card-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 8px; }
.ui-card-body { padding: 14px 16px; }
.ui-count { background: #EEF1FA; color: var(--navy); font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.ui-empty { padding: 24px; text-align: center; color: var(--ui-muted); font-size: 13.5px; }
.ui-empty b { display: block; color: var(--ui-ink); font-size: 14.5px; margin-bottom: 4px; }
.ui-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.ui-h2 { display: flex; align-items: center; gap: 10px; font-family: Georgia, serif; font-size: 19px; color: var(--navy); margin: 0; }
.ui-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.ui-field { display: flex; flex-direction: column; gap: 3px; min-width: 160px; flex: 1; }
.ui-field label { font-size: 11.5px; font-weight: 600; color: var(--ui-muted); }
.ui-in, .ui-field input, .ui-field select { border: 1px solid var(--ui-line); border-radius: var(--ui-btn-radius); padding: 8px 10px; font-size: 13.5px; background: #fff; box-sizing: border-box; min-height: 36px; }
.ui-btn { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--ui-btn-radius); padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--navy); background: #fff; color: var(--navy); white-space: nowrap; }
.ui-btn.primary { background: var(--navy); color: #fff; }
.ui-btn.quiet { border-color: var(--ui-line); color: var(--ui-ink); }
.ui-btn.warn { border-color: #C98A12; color: var(--ui-warn); }
.ui-btn.danger { border-color: var(--ui-bad); color: var(--ui-bad); }
table.ui-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ui-pill { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; background: #EEF1FA; color: var(--navy); }
.ui-pill.ok { background: var(--ui-good-bg); color: var(--ui-good); } .ui-pill.warn { background: var(--ui-warn-bg); color: var(--ui-warn); }
.ui-pill.bad { background: var(--ui-bad-bg); color: var(--ui-bad); } .ui-pill.info { background: var(--ui-info-bg); color: var(--ui-info); }
.ui-pill.muted { background: #F0F0EE; color: #666; }
/* A page with a left menu (same as Flight Ops, Hangar, Training, Quality, Billing). */
.ui-frame { display: flex; background: #fff; min-height: calc(100vh - 260px); }
.ui-frame > .mg-side { background: #fff; position: sticky; top: 12px; align-self: flex-start; max-height: calc(100vh - 24px); overflow-y: auto; }
.ui-frame-main { flex: 1; min-width: 0; padding: 18px 22px 24px; }
@media (max-width: 760px) { .ui-frame { flex-direction: column; } .ui-frame > .mg-side { position: static; max-height: none; } .ui-frame-main { padding: 12px 4px; } }

/* ---------- Tiles: every kit gets the same tile ---------- */
html body .ui-stat, html body .st-tile, html body .pr-kpi, html body .pws-tile, html body .org-tile, html body .fbo-tile,
html body .si-tile, html body .mfd-tile, html body .ua-tile, html body .fa-stat, html body .wso-tile, html body .plr-tile {
  --t: var(--navy);
  background: #fff !important; border: 1px solid var(--ui-line); border-left: 4px solid var(--t); border-radius: var(--ui-radius);
  padding: 12px 14px; text-align: left; font: inherit; font-size: 13px; font-weight: 600; color: var(--ui-ink); min-width: 0; box-sizing: border-box;
}
html body .ui-stat > b, html body .st-tile > b, html body .pr-kpi > b, html body .pws-tile > b, html body .org-tile > b, html body .fbo-tile > b,
html body .si-tile > b, html body .mfd-tile > b, html body .ua-tile > b, html body .fa-stat > b, html body .wso-tile .v, html body .plr-tile > b {
  display: block; font-size: 26px; line-height: 1.15; font-weight: 700; color: var(--t) !important; margin-bottom: 2px;
}
html body .ui-stat > span, html body .pr-kpi > span, html body .pws-tile > span, html body .fbo-tile > span, html body .si-tile > span,
html body .mfd-tile > span, html body .ua-tile > span, html body .fa-stat > span, html body .wso-tile .l, html body .plr-tile > span {
  display: block; font-size: 13px; font-weight: 600; color: var(--ui-ink);
}
html body .ui-stat small, html body .wso-tile .s, html body .mfd-tile small, html body .pws-tile small, html body .mfd-tile > span + span, html body .pws-tile > span + span {
  display: block; font-size: 12px; font-weight: 400; color: var(--ui-muted); margin-top: 2px;
}
html body .ui-stat[data-go], html body .st-tile, html body .wso-tile, html body .org-tile, html body .fbo-tile, html body .si-tile, html body .pr-kpi, html body .plr-tile, html body button.ui-stat { cursor: pointer; }
html body .ui-stat:hover, html body .st-tile:hover, html body .wso-tile:hover, html body .fbo-tile:hover, html body .si-tile:hover, html body .org-tile:hover, html body .plr-tile:hover { box-shadow: 0 3px 10px rgba(35,60,134,.10); }
html body :is(.ui-stat, .st-tile, .pr-kpi, .pws-tile, .org-tile, .fbo-tile, .si-tile, .mfd-tile, .ua-tile, .wso-tile, .plr-tile):is(.ok, .good, .green) { --t: var(--ui-good); }
html body :is(.ui-stat, .st-tile, .pr-kpi, .pws-tile, .org-tile, .fbo-tile, .si-tile, .mfd-tile, .ua-tile, .wso-tile, .plr-tile):is(.warn, .amber, .due) { --t: var(--ui-warn-bar); }
html body :is(.ui-stat, .st-tile, .pr-kpi, .pws-tile, .org-tile, .fbo-tile, .si-tile, .mfd-tile, .ua-tile, .wso-tile, .plr-tile):is(.warn, .amber, .due) > b,
html body .wso-tile.warn .v { color: var(--ui-warn) !important; }
html body :is(.ui-stat, .st-tile, .pr-kpi, .pws-tile, .org-tile, .fbo-tile, .si-tile, .mfd-tile, .ua-tile, .wso-tile, .plr-tile):is(.bad, .red, .over) { --t: var(--ui-bad); }
html body :is(.ui-stat, .st-tile, .pr-kpi, .pws-tile, .org-tile, .fbo-tile, .si-tile, .mfd-tile, .ua-tile, .wso-tile, .plr-tile):is(.info, .blue) { --t: var(--ui-info); }
html body :is(.ui-stat, .st-tile, .si-tile, .org-tile, .fbo-tile, .wso-tile, .plr-tile):is(.on, .active) { box-shadow: 0 0 0 2px rgba(35,60,134,.25); }
html body :is(.st-tiles, .pr-kpis, .pws-tiles, .fbo-tiles, .mfd-tiles, .plr-tiles) { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }

/* ---------- Section titles inside a screen: navy, normal case ---------- */
html body .wso-sec p { text-transform: none; letter-spacing: 0; font-size: 15px; }
html body .st-h, html body .pws-h { color: var(--navy); }

/* ---------- Cards and blocks ---------- */
html body .st-block, html body .wso-box, html body .pws-card, html body .wso-card { border-radius: var(--ui-radius); }

/* ---------- Buttons: same shape everywhere (colours stay: navy filled or navy outline) ---------- */
html body :is(.ui-btn, .st-btn, .st-btn2, .int-btn, .onb-btn, .fr-btn, .ed-btn, .pws-btn, .elu-btn, .si-btn, .fpf-btn, .hg-btn, .rb-btn, .acct-btn, .ff-btn, .wt-btn, .wso-actions button) {
  border-radius: var(--ui-btn-radius); padding: 7px 14px; font-size: 13px; font-weight: 600; line-height: 1.2;
}
/* Buttons styled inline with the old 4px corners get the standard corners too. */
html body #adminReportsWrapper button[style*="border-radius:4px"], html body #adminReportsWrapper button[style*="border-radius: 4px"],
html body #adminReportsWrapper button[style*="border-radius:6px"] { border-radius: var(--ui-btn-radius) !important; }
html body #adminReportsWrapper :is(input, select)[style*="border-radius:4px"] { border-radius: var(--ui-btn-radius) !important; }

/* ---------- Pills ---------- */
html body .st-pill, html body .wso-pill { font-size: 11.5px; font-weight: 700; padding: 2px 9px; text-transform: none; letter-spacing: 0; }

/* ---------- Tables ---------- */
html body :is(.ui-table, .st-table) th { text-align: left; font-size: 11.5px; font-weight: 700; color: var(--ui-muted); text-transform: uppercase; letter-spacing: .04em; padding: 9px 12px; border-bottom: 1px solid var(--ui-line); background: #FAFAF8; white-space: nowrap; }
html body :is(.ui-table, .st-table) td { padding: 10px 12px; border-bottom: 1px solid #F0F0EE; vertical-align: top; }
html body :is(.ui-table tr, .st-table tr.st-click):hover td { background: #F7F8FC; }
html body .ui-table tr[data-id], html body .ui-table tr.click { cursor: pointer; }

/* ---------- Inputs ---------- */
html body .st-in { border-radius: var(--ui-btn-radius); }
html body :is(.ui-stat, .wso-tile, .st-tile):is(.muted) { --t: #B8BCC8; }
html body .wso-tile.muted .v { color: var(--ui-muted) !important; }

/* ==========================================================================
   Screens whose styling is written into the screen itself
   (inline styles): bring the common pieces onto the standard.
   ========================================================================== */
html body .ui-stat { flex: 1 1 160px; }
/* Lists of records (report-list / today-list): a card with roomy rows and a hover highlight. */
html body :is(.report-list, .today-list) { border-radius: var(--ui-radius); border-color: var(--ui-line); }
html body :is(.report-list, .today-list) li { padding: 11px 14px; font-size: 13.5px; border-bottom-color: #F0F0EE; }
html body :is(.report-list, .today-list) li:nth-child(even) { background: #fff; }
html body :is(.report-list, .today-list) li[data-id], html body :is(.report-list, .today-list) li[style*="cursor:pointer"],
html body :is(.report-list, .today-list) li[onclick] { cursor: pointer; }
html body :is(.report-list, .today-list) li:hover { background: #F7F8FC; }
html body .empty { font-style: normal; color: var(--ui-muted); text-align: center; padding: 22px 12px; }
/* Section titles: same size everywhere. */
html body .section-label { font-size: 15px; }
html body .report-heading { color: var(--navy); }

/* Inside the screen area */
/* Inside the screen area: status pills written inline (rounded spans) get one size, normal case. */
html body :is(#adminReportsWrapper, [id$="Panel"]) span[style*="border-radius:999px"], html body :is(#adminReportsWrapper, [id$="Panel"]) span[style*="border-radius: 999px"], html body :is(#adminReportsWrapper, [id$="Panel"]) span[style*="border-radius:20px"] {
  font-size: 11.5px !important; font-weight: 700 !important; padding: 2px 9px !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.5 !important;
}
/* Fields: same corners, text size and height. */
html body :is(#adminReportsWrapper, [id$="Panel"]) input[style]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]), html body :is(#adminReportsWrapper, [id$="Panel"]) select[style] {
  border-radius: var(--ui-btn-radius) !important; font-size: 13.5px !important; min-height: 36px;
}
html body :is(#adminReportsWrapper, [id$="Panel"]) textarea[style] { border-radius: var(--ui-btn-radius) !important; font-size: 13.5px !important; }
/* Buttons written inline (navy filled / navy, red or green outline) get the standard shape; small icon buttons are left alone. */
html body :is(#adminReportsWrapper, [id$="Panel"]) button:is([style*="background:var(--navy)"], [style*="background: var(--navy)"], [style*="border:1px solid var(--navy)"], [style*="background:#233C86"], [style*="border:1px solid #233C86"], [style*="border:1px solid #B3261E"], [style*="background:#1F7A3D"]):not([style*="padding:0"]):not([style*="padding:1px"]):not([style*="padding:2px"]):not([style*="padding:3px"]):not([style*="padding:4px"]) {
  border-radius: var(--ui-btn-radius) !important; padding: 7px 14px !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.2 !important;
}
/* Tables written inline: header and rows like the standard table. */
html body :is(#adminReportsWrapper, [id$="Panel"]) table[style*="border-collapse"] > thead > tr > th {
  font-size: 11.5px !important; font-weight: 700 !important; color: var(--ui-muted) !important; text-transform: uppercase; letter-spacing: .04em; background: #FAFAF8; padding: 9px 12px !important; text-align: left;
}
html body :is(#adminReportsWrapper, [id$="Panel"]) table[style*="border-collapse"] > tbody > tr > td { padding: 9px 12px !important; border-bottom: 1px solid #F0F0EE; }
html body :is(#adminReportsWrapper, [id$="Panel"]) table[style*="border-collapse"] > tbody > tr:hover > td { background: #F7F8FC; }
html body :is(#adminReportsWrapper, [id$="Panel"]) span[style*="border-radius:999px"]::first-letter, html body .st-pill::first-letter, html body .wso-pill::first-letter { text-transform: uppercase; }
html body :is(#adminReportsWrapper, [id$="Panel"]) span[style*="border-radius:999px"] { display: inline-block; }
/* Flight Ops / Billing / FBO pills (.fo-pill) and status badges: standard pill. */
html body .fo-pill { font-size: 11.5px !important; font-weight: 700 !important; padding: 2px 9px !important; text-transform: none !important; letter-spacing: 0 !important; }
html body .fo-pill::first-letter { text-transform: uppercase; }
/* Row actions in a table: a tidy block, right-aligned, two per line at most. */
html body .ui-table td:last-child > .fbo-btns, html body .fbo-tbl td:last-child > .fbo-btns { display: grid; grid-template-columns: repeat(2, auto); gap: 6px; justify-content: end; }
html body .ui-table td:last-child > .fbo-btns > button:only-child { grid-column: 1 / -1; }
/* Sorted-table headers (list-enhance.js) on a standard table: no dark header. */
html body .ui-table thead th { background: #FAFAF8 !important; color: var(--ui-muted) !important; }
html body :is(#adminReportsWrapper, [id$="Panel"]) table[style*="border-collapse"] > thead > tr > th { background: #FAFAF8 !important; }