/* Eurabelt Fuels Ltd — Agreements Portal UI  ·  DESKTOP INTERFACE
   ================================================================
   Fixed-width, designed for a wide screen, and deliberately NOT
   responsive. There are no phone breakpoints in this file: handsets
   are served assets/mobile.css by lib/Device.php, which is a separate
   interface rather than a reflow of this one.

   Pages emit <meta name="viewport" content="width=1040">, so a phone
   showing the desktop view zooms out to the real layout instead of
   rearranging it — which is what someone choosing "desktop version"
   is actually asking for.

   Framework-free. No external fonts, no CDN dependency. */

:root {
  --brand:#0b3d5c; --brand-dk:#072b41; --accent:#a8842c;
  --ink:#101820; --muted:#5f6c78; --line:#d5dee5; --panel:#f4f7f9;
  --ok:#1d6b45; --warn:#8a6d1f; --err:#a32020; --bg:#eef2f5;
  --radius:4px;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  background:var(--bg); color:var(--ink);
  font:400 15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--brand); }

.masthead { background:var(--brand); color:#fff; padding:20px 0; border-bottom:3px solid var(--accent); }
.masthead .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.masthead .eyebrow { font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:#d8b96a; font-weight:700; }
.masthead h1 { font:700 22px/1.2 Georgia,"Times New Roman",serif; margin:2px 0 0; }
.masthead .sub { font-size:12.5px; color:#b9cbd8; margin-top:3px; }
.masthead a { color:#cfe0eb; font-size:13px; text-decoration:none; }
.masthead a:hover { text-decoration:underline; }
.masthead .nav { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.masthead .nav a.on { color:#fff; font-weight:700; border-bottom:2px solid var(--accent); padding-bottom:2px; }
.masthead .nav .navcount { display:inline-block; min-width:18px; margin-left:6px; padding:1px 6px;
  border-radius:9px; background:var(--accent); color:#20170a; font:700 11px/1.5 Arial,sans-serif;
  text-align:center; vertical-align:top; }

.tbl-list { width:100%; border-collapse:collapse; font-size:13.5px; }
.tbl-list th, .tbl-list td { border-bottom:1px solid var(--line); padding:10px 12px;
                             text-align:left; vertical-align:top; }
.tbl-list th { background:var(--panel); font-size:11px; text-transform:uppercase;
               letter-spacing:.06em; color:var(--brand); font-weight:700; border-bottom:1px solid var(--line); }
.tbl-list tr:hover td { background:#fafcfd; }
.tbl-list td.num { text-align:right; white-space:nowrap; color:var(--muted); }
.tbl-list .muted { color:var(--muted); font-size:12.5px; }
.tbl-list .actions { white-space:nowrap; text-align:right; }
.tbl-list .actions a, .tbl-list .actions button {
  font-size:12.5px; margin-left:10px; background:none; border:0; padding:0;
  color:var(--brand); cursor:pointer; text-decoration:underline; font-family:inherit; }
.tbl-list .actions button.danger { color:var(--err); }

.code-chip { display:inline-block; font:700 11px/1 "SFMono-Regular",Consolas,monospace;
             letter-spacing:.06em; background:var(--brand); color:#fff; padding:4px 8px;
             border-radius:2px; }
.code-chip.off { background:#93a3ae; }

.prodgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; }
.prodpick { border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px;
            background:#fff; display:flex; gap:10px; align-items:flex-start; cursor:pointer; }
.prodpick:hover { border-color:var(--brand); }
.prodpick input { margin-top:3px; width:16px; height:16px; flex:0 0 auto; }
.prodpick .t { font-weight:700; font-size:13.5px; }
.prodpick .s { font-size:12px; color:var(--muted); }

.toolbar { display:flex; justify-content:space-between; align-items:center; gap:14px;
           flex-wrap:wrap; margin-bottom:14px; }
.dropzone { border:2px dashed var(--line); border-radius:var(--radius); padding:18px;
            background:var(--panel); text-align:center; }
.dropzone input[type=file] { font-size:13px; }
.inline-form { display:inline; }

.wrap { max-width:960px; margin:0 auto; padding:0 20px; }
main.wrap { padding-top:26px; padding-bottom:60px; }

.card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; margin-bottom:20px; }
.card > h2 { font:700 13px/1.4 inherit; text-transform:uppercase; letter-spacing:.08em;
             color:var(--brand); margin:0 0 4px; }
.card > .hint { color:var(--muted); font-size:13.5px; margin:0 0 20px; }

fieldset { border:0; border-top:1px solid var(--line); margin:0 0 22px; padding:18px 0 0; }
fieldset:first-of-type { border-top:0; padding-top:0; }
legend { font:700 11px/1 inherit; text-transform:uppercase; letter-spacing:.1em;
         color:var(--accent); padding:0 8px 0 0; }

.grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; }
.grid .full { grid-column:1 / -1; }
label { display:block; font-size:12.5px; font-weight:600; color:var(--muted);
        text-transform:uppercase; letter-spacing:.04em; margin-bottom:5px; }
label .req { color:var(--err); }
input[type=text], input[type=email], input[type=password], select, textarea {
  width:100%; padding:10px 12px; font:400 15px/1.4 inherit; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
}
textarea { min-height:96px; resize:vertical; }
input:focus, select:focus, textarea:focus {
  outline:0; border-color:var(--brand); box-shadow:0 0 0 3px rgba(11,61,92,.12);
}
.field-note { font-size:12px; color:var(--muted); margin-top:5px; }

.mailslot { background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--brand);
            border-radius:var(--radius); padding:16px 18px; margin-bottom:14px; }
.mailslot h3 { font:700 12px/1.3 inherit; text-transform:uppercase; letter-spacing:.08em;
               color:var(--brand); margin:0 0 2px; }
.mailslot p.role { font-size:12.5px; color:var(--muted); margin:0 0 12px; }

.check { display:flex; gap:10px; align-items:flex-start; font-size:13.5px;
         color:var(--ink); margin-bottom:10px; font-weight:400; text-transform:none;
         letter-spacing:0; line-height:1.5; }
.check input { margin-top:3px; flex:0 0 auto; width:16px; height:16px; }

.btn { display:inline-block; background:var(--brand); color:#fff; border:0; border-radius:var(--radius);
       font:700 15px/1 inherit; padding:14px 26px; cursor:pointer; text-decoration:none; }
.btn:hover { background:var(--brand-dk); }
.btn[disabled] { background:#93a3ae; cursor:not-allowed; }
.btn.ghost { background:#fff; color:var(--brand); border:1px solid var(--brand); }

.alert { border-radius:var(--radius); padding:14px 16px; margin-bottom:18px; font-size:14px;
         border:1px solid; }
.alert.ok  { background:#eef7f2; border-color:#bcdccb; color:var(--ok); }
.alert.err { background:#fdf0f0; border-color:#e8c4c4; color:var(--err); }
.alert.warn{ background:#fdf8ec; border-color:#e6d7ac; color:var(--warn); }
.alert ul { margin:8px 0 0 18px; padding:0; }

.kv { width:100%; border-collapse:collapse; font-size:14px; }
.kv th, .kv td { border:1px solid var(--line); padding:9px 12px; text-align:left; vertical-align:top; }
.kv th { background:var(--panel); color:var(--muted); font-size:12px; text-transform:uppercase;
         letter-spacing:.05em; width:34%; font-weight:700; }
.mono { font-family:"SFMono-Regular",Consolas,"Courier New",monospace; word-break:break-all; }

.badge { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em;
         text-transform:uppercase; padding:3px 10px; border-radius:2px; color:#fff; background:var(--brand); }
.badge.ok { background:var(--ok); } .badge.warn { background:var(--warn); } .badge.err { background:var(--err); }

/* ============================================================
   .report — the diagnostic table used by admin-database.php
   ============================================================
   A report read by an auditor is not a form and not a list of
   records. Three things matter and none of them are decorative:

     1. The identifier must not wrap. A table or trigger name
        broken across two lines reads as two different names and
        cannot be copied cleanly into a query.
     2. The verdict column must sit in one fixed place down the
        right-hand edge, so a page of forty rows can be scanned
        for red without reading any of the words.
     3. Column widths must be declared, not negotiated by the
        browser from cell content — otherwise the layout shifts
        every time the data changes, and two runs of the same
        report look like two different documents.

   table-layout:fixed with explicit <col> widths delivers all
   three. Every column here is sized by the widest legitimate
   value it can hold, not by what happens to be in it today.
   ============================================================ */
.report { width:100%; border-collapse:collapse; table-layout:fixed; font-size:13.5px; }
.report th, .report td { border-bottom:1px solid var(--line); padding:11px 14px;
                         text-align:left; vertical-align:top; }
.report thead th { background:var(--panel); color:var(--brand); font-size:11px; font-weight:700;
                   text-transform:uppercase; letter-spacing:.07em; white-space:nowrap;
                   border-bottom:2px solid var(--line); padding-top:9px; padding-bottom:9px; }
.report tbody tr:last-child td { border-bottom:0; }
.report tbody tr:hover td { background:#fafcfd; }

/* A row that opens a group — used where several rows belong to one
   identifier and the identifier is printed only once. The rule sits
   above the group, so the grouping is visible without repeating the
   name on every line. */
.report tbody tr.group td { border-top:1px solid var(--line); }
.report tbody tr.group:first-child td { border-top:0; }

/* Identifiers: monospace, never broken mid-name. Overrides the
   word-break:break-all on the shared .mono rule, which is right
   for a long hash in a narrow box and wrong for a table name. */
.report .id { font-family:"SFMono-Regular",Consolas,"Courier New",monospace;
              font-size:13px; color:var(--ink); white-space:nowrap;
              overflow:hidden; text-overflow:ellipsis; word-break:normal; }
.report td.sub { color:var(--muted); font-size:12.5px; }
.report td.num { font-family:"SFMono-Regular",Consolas,"Courier New",monospace;
                 text-align:right; white-space:nowrap; }
.report td.state { text-align:right; white-space:nowrap; }
.report td.state .why { display:block; margin-top:5px; color:var(--err);
                        font-size:11.5px; white-space:normal; text-align:right; }
.report .dash { color:#9fb0bc; }

/* Column widths are declared per table in a <colgroup>, because a
   trigger report and a count report hold different things and a
   single shared set of widths would be wrong for both. */

.doc-frame { border:1px solid var(--line); border-radius:var(--radius); background:#fff;
             max-height:520px; overflow-y:auto; padding:8px 20px; margin-bottom:18px; }

.footer { border-top:1px solid var(--line); margin-top:30px; padding:18px 0 40px;
          font-size:12px; color:var(--muted); }

/* ============================================================
   Branded chrome — masthead mark, legal footer, cookie notice
   ============================================================ */
.masthead .brandline { display:flex; align-items:center; gap:16px; }
.masthead .brandmark { width:58px; height:58px; flex:0 0 auto; display:block;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.35)); }
.sitefoot { background:var(--brand-dk); color:#c8d6e0; margin-top:48px;
  border-top:3px solid var(--accent); font-size:13.5px; line-height:1.65; }
.sitefoot .wrap { padding-top:30px; padding-bottom:26px; }
.sitefoot a { color:#e3edf4; text-decoration:none; }
.sitefoot a:hover { text-decoration:underline; }
.sitefoot h4 { font:700 11px/1.4 inherit; text-transform:uppercase; letter-spacing:.1em;
  color:var(--accent); margin:0 0 10px; }
.sitefoot ul { list-style:none; margin:0; padding:0; }
.sitefoot li { margin-bottom:6px; }
.sitefoot .fmuted { color:#93a9b8; font-size:12.5px; }

.sitefoot-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:28px;
  padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.14); }
.sitefoot-brand { display:flex; gap:14px; align-items:flex-start; }
.sitefoot-brand strong { color:#fff; font-size:15px; }
.footmark { width:56px; height:56px; flex:0 0 auto; opacity:.95; }

.sitefoot-warn { margin:22px 0 0; padding:14px 16px; border-radius:3px;
  background:rgba(163,32,32,.22); border:1px solid rgba(232,150,150,.45); color:#ffdede;
  font-size:13px; }
.sitefoot-warn strong { color:#fff; }

.sitefoot-legal { margin-top:20px; padding-top:16px; border-top:1px solid rgba(255,255,255,.14);
  color:#93a9b8; font-size:12px; line-height:1.7; }
.sitefoot-legal p { margin:0 0 8px; }
.sitefoot-legal strong { color:#c8d6e0; }

.cookiebar { position:fixed; left:0; right:0; bottom:0; z-index:9999; background:#fff;
  border-top:3px solid var(--brand); box-shadow:0 -4px 22px rgba(16,24,32,.18); }
.cookiebar-inner { max-width:960px; margin:0 auto; padding:18px 20px; display:flex; gap:22px;
  align-items:center; justify-content:space-between; flex-wrap:wrap; }
.cookiebar strong { color:var(--brand); font-size:14.5px; }
.cookiebar p { margin:5px 0 0; font-size:13px; color:var(--muted); max-width:640px; line-height:1.6; }
.cookiebar-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.cookiebar-actions .btn { padding:11px 20px; font-size:14px; }

/* Legal document pages */
.legaldoc { font-size:15px; line-height:1.75; }
.legaldoc h2 { font:700 13px/1.4 inherit; text-transform:uppercase; letter-spacing:.08em;
  color:var(--brand); margin:30px 0 10px; padding-bottom:5px; border-bottom:1px solid var(--line); }
.legaldoc h3 { font:700 15px/1.4 inherit; color:var(--ink); margin:20px 0 6px; }
.legaldoc p, .legaldoc li { margin:0 0 10px; }
.legaldoc ol, .legaldoc ul { margin:0 0 12px; padding-left:22px; }
.legaldoc li { margin-bottom:7px; }
.legaldoc .clause { color:var(--muted); font-weight:700; }
.legaldoc table { width:100%; border-collapse:collapse; font-size:14px; margin:12px 0 18px; }
.legaldoc th, .legaldoc td { border:1px solid var(--line); padding:9px 11px; text-align:left;
  vertical-align:top; }
.legaldoc th { background:var(--panel); font-size:12px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--brand); }
.legaldoc .lead { font-size:16px; color:var(--muted); }
.toc { background:var(--panel); border-left:3px solid var(--brand); padding:16px 20px;
  border-radius:var(--radius); margin-bottom:24px; }
.toc ol { margin:0; padding-left:20px; columns:2; column-gap:30px; }
.toc li { margin-bottom:5px; font-size:14px; }
.docmeta { display:flex; gap:24px; flex-wrap:wrap; font-size:13px; color:var(--muted);
  padding-bottom:16px; margin-bottom:8px; border-bottom:1px solid var(--line); }