/* ==========================================================================
   Veridix — Java Swing "Metal" look and feel (Ocean theme, sky-blue)
   ==========================================================================

   One stylesheet shared by all four surfaces: the login picker, the predictor
   app, the operator dashboard and the public audit page.

   Metal is Swing's cross-platform L&F; Ocean is its blue variant and the Java 5+
   default. What makes it recognisable is a small set of very specific idioms,
   reproduced here rather than approximated:

     * a 3D bevel on every raised surface — white highlight on the top/left
       edges, grey shadow on the bottom/right (and reversed for sunken ones);
     * TitledBorder: an etched groove rectangle with the title sitting *on* the
       top border line. `<fieldset>` + `<legend>` gives exactly this for free;
     * vertical gradients on buttons, light at the top, and a dotted focus
       rectangle inset a few pixels from the edge;
     * gradient title bars carrying Metal's "bumps" — the little dotted grip
       texture, drawn here with two offset radial-gradients;
     * square-ish corners (2-3px at most), bold small sans-serif labels, and
       chunky 16px scrollbars with arrow buttons.

   Everything is driven by the --metal-* variables below. The legacy
   --bg/--panel/--accent/--pos/... names are re-pointed at the Metal palette on
   purpose: the pages' existing SVG charts and status colours read from them, so
   they follow the theme without every chart having to be rewritten.
   ========================================================================== */

:root {
  /* --- Ocean's own palette, shifted toward sky blue ---------------------- */
  --metal-primary1:  #38618f;   /* dark blue: active title bars, focus, links */
  --metal-primary2:  #7fa8d0;   /* mid sky:   inactive chrome, tab edges      */
  --metal-primary3:  #c2dcf2;   /* light sky: selection, active tab fill      */
  --metal-secondary1:#61748a;   /* dark grey: hard borders                    */
  --metal-secondary2:#9db2c6;   /* mid grey:  bevel shadow                    */
  --metal-secondary3:#e3ecf5;   /* light grey-blue: control face              */

  --metal-desktop:   #b9cee2;   /* the JDesktopPane backdrop behind it all    */
  --metal-control:   #e9f1f9;   /* JPanel / JButton face                      */
  --metal-white:     #ffffff;   /* bevel highlight, text-field background     */
  --metal-shadow:    #8ea6bd;   /* bevel shadow                               */
  --metal-ink:       #12222f;   /* control text                               */
  --metal-ink-soft:  #4a5f74;   /* disabled / secondary text                  */

  --metal-font: "Segoe UI", Tahoma, Verdana, Geneva, "DejaVu Sans", sans-serif;
  --metal-mono: "Lucida Console", Consolas, "DejaVu Sans Mono", monospace;

  /* --- Legacy names the existing pages and SVG charts already read ------- */
  --bg:     var(--metal-desktop);
  --panel:  var(--metal-control);
  --panel2: var(--metal-secondary3);
  --line:   var(--metal-secondary2);
  --text:   var(--metal-ink);
  --muted:  var(--metal-ink-soft);
  --accent: var(--metal-primary1);
  --pos:    #1c6b4a;            /* darkened for contrast on a light face */
  --neg:    #a92920;
  --warn:   #8a5a00;
  --yes:    #1c6b4a;
  --no:     #a92920;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--metal-desktop);
  color: var(--metal-ink);
  font: 13px/1.5 var(--metal-font);
}

/* Swing draws labels bold and body text plain; matching that is most of the
   "this is a desktop app" impression. */
h1, h2, h3, h4, legend, th, label, .m-label { font-weight: 700; }
h1 { font-size: 17px; margin: 0 0 6px; }
h2 { font-size: 14px; margin: 0 0 8px; }
h3 { font-size: 13px; margin: 0 0 6px; }

a { color: var(--metal-primary1); }
a:hover { color: #1d4373; }

code, .m-mono { font-family: var(--metal-mono); font-size: 12px; }

/* ==========================================================================
   Bevels — the foundation of every raised or sunken surface
   ========================================================================== */

.m-raised {
  border: 1px solid;
  border-color: var(--metal-white) var(--metal-shadow) var(--metal-shadow) var(--metal-white);
}
.m-sunken {
  border: 1px solid;
  border-color: var(--metal-shadow) var(--metal-white) var(--metal-white) var(--metal-shadow);
}
/* A "hard" 1px outline plus an inner highlight — Ocean's component border. */
.m-edge {
  border: 1px solid var(--metal-secondary1);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .75);
}

/* ==========================================================================
   TitledBorder — <fieldset class="m-panel"><legend>Title</legend>
   The legend sits on the top border line exactly as Swing draws it.
   ========================================================================== */

.m-panel {
  border: 2px groove var(--metal-primary3);
  background: var(--metal-control);
  margin: 0 0 14px;
  padding: 12px 14px 14px;
  min-width: 0;                       /* let it shrink inside a grid track */
}
.m-panel > legend {
  padding: 0 6px;
  margin-left: 4px;
  font-size: 12px;
  color: var(--metal-primary1);
  letter-spacing: .01em;
}
.m-panel.m-plain { border-style: solid; border-width: 1px; border-color: var(--metal-secondary2); }
.m-panel > :last-child { margin-bottom: 0; }

/* Sunken content well — JScrollPane's viewport border. */
.m-well {
  background: var(--metal-white);
  border: 1px solid;
  border-color: var(--metal-shadow) var(--metal-white) var(--metal-white) var(--metal-shadow);
  padding: 8px;
}

/* ==========================================================================
   Title bars (JInternalFrame) — gradient + Metal's "bumps" grip texture
   ========================================================================== */

.m-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  background: linear-gradient(180deg, #4a7ab0 0%, #35608f 45%, #2a4f78 55%, #1f3d5e 100%);
  border: 1px solid #1a3450;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
}
/* Anything inside a title bar sits on dark blue, so it must read white. */
.m-titlebar, .m-titlebar h1, .m-titlebar h2, .m-titlebar .brand { color: #fff; }
.m-titlebar a:not(.m-btn) { color: #d8ebfb; }
.m-titlebar .m-spacer { flex: 1; }

/* The dotted grip Swing stipples into title bars and toolbar handles: two
   offset dot grids, one highlight and one shadow, on a 4px lattice. */
.m-bumps {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .30) .6px, transparent .7px),
    radial-gradient(circle at 3px 3px, rgba(0, 0, 0, .22)   .6px, transparent .7px);
  background-size: 4px 4px;
}
/* The texture must not sit on top of the gradient it decorates, or labels lose
   contrast — list it after the fill so the fill paints last (underneath). */
.m-titlebar.m-bumps {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .16) .6px, transparent .7px),
    radial-gradient(circle at 3px 3px, rgba(0, 0, 0, .18) .6px, transparent .7px),
    linear-gradient(180deg, #4a7ab0 0%, #35608f 45%, #2a4f78 55%, #1f3d5e 100%);
  background-size: 4px 4px, 4px 4px, auto;
}

/* ==========================================================================
   Buttons (JButton, Ocean) — light-topped vertical gradient, dotted focus
   ========================================================================== */

.m-btn {
  display: inline-block;
  font: 700 12px var(--metal-font);
  color: var(--metal-ink);
  background: linear-gradient(180deg, #ffffff 0%, #e2ecf7 48%, #d2e2f1 52%, #eaf2fa 100%);
  border: 1px solid #6f92b6;
  border-radius: 3px;
  padding: 5px 14px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  line-height: 1.35;
}
.m-btn:hover { background: linear-gradient(180deg, #ffffff 0%, #dbeaf8 48%, #c2dcf2 52%, #e4f0fb 100%);
  border-color: var(--metal-primary1); }
/* Pressed: the gradient flips and the label shifts a pixel, as Swing does. */
.m-btn:active {
  background: linear-gradient(180deg, #b9d3ea 0%, #cfe1f2 100%);
  border-color: #2d5480;
  padding: 6px 13px 4px 15px;
}
.m-btn:focus-visible { outline: 1px dotted var(--metal-primary1); outline-offset: -4px; }
.m-btn:disabled, .m-btn.m-disabled {
  color: #90a2b4; background: var(--metal-secondary3); border-color: var(--metal-secondary2);
  cursor: not-allowed; text-shadow: 0 1px 0 #fff;
}
/* The default button in a Swing dialog carries a heavier border. */
.m-btn.m-default { border: 2px solid var(--metal-primary1); padding: 4px 13px; }
.m-btn.m-small { font-size: 11px; padding: 3px 9px; }
.m-btn.m-wide { display: block; width: 100%; }

/* Toggle buttons: pressed-in state uses the selection colour. */
.m-btn.m-on {
  background: linear-gradient(180deg, #a9cbe9 0%, var(--metal-primary3) 100%);
  border-color: var(--metal-primary1);
  box-shadow: inset 1px 1px 2px rgba(45, 84, 128, .45);
}

/* ==========================================================================
   Text fields, selects (JTextField / JComboBox) — sunken, white, square
   ========================================================================== */

.m-input, input[type="text"], input[type="number"], input[type="date"], input[type="search"], select, textarea {
  font: 13px var(--metal-font);
  color: var(--metal-ink);
  background: var(--metal-white);
  border: 1px solid;
  border-color: var(--metal-shadow) #cfdcea #cfdcea var(--metal-shadow);
  border-radius: 0;
  padding: 4px 6px;
}
.m-input:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--metal-primary1);
  box-shadow: inset 0 0 0 1px rgba(56, 97, 143, .3);
}
select { padding-right: 4px; }
input:disabled, select:disabled { background: var(--metal-secondary3); color: #90a2b4; }

/* ==========================================================================
   Toolbars, status bars, separators
   ========================================================================== */

.m-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 10px;
  background: linear-gradient(180deg, #f4f9fd, var(--metal-secondary3));
  border: 1px solid;
  border-color: var(--metal-white) var(--metal-shadow) var(--metal-shadow) var(--metal-white);
}
.m-toolbar .m-spacer { flex: 1; }

.m-statusbar {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--metal-ink-soft);
  background: var(--metal-secondary3);
  border: 1px solid;
  border-color: var(--metal-shadow) var(--metal-white) var(--metal-white) var(--metal-shadow);
}

.m-sep { height: 2px; border: 0; border-top: 1px solid var(--metal-shadow);
  border-bottom: 1px solid var(--metal-white); margin: 10px 0; }
.m-sep-v { width: 2px; align-self: stretch; border-left: 1px solid var(--metal-shadow);
  border-right: 1px solid var(--metal-white); }

/* ==========================================================================
   Tabs (JTabbedPane, Ocean) — the selected tab fills sky blue and joins the
   content pane by covering the border beneath it.
   ========================================================================== */

.m-tabs { display: flex; gap: 2px; padding: 4px 8px 0; border-bottom: 1px solid var(--metal-secondary1); }
.m-tab {
  font: 700 12px var(--metal-font);
  color: var(--metal-ink-soft);
  background: linear-gradient(180deg, #f2f7fc, #d8e5f1);
  border: 1px solid var(--metal-secondary2);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  padding: 6px 15px;
  cursor: pointer;
  position: relative;
  bottom: -1px;
}
.m-tab:hover { background: linear-gradient(180deg, #ffffff, #dceaf7); color: var(--metal-ink); }
.m-tab.active {
  color: var(--metal-primary1);
  background: linear-gradient(180deg, #ffffff, var(--metal-primary3));
  border-color: var(--metal-secondary1);
  border-bottom: 1px solid var(--metal-primary3);
}
.m-tab:focus-visible { outline: 1px dotted var(--metal-primary1); outline-offset: -4px; }

/* ==========================================================================
   Tables (JTable) — raised header, hairline grid, sky-blue selection
   ========================================================================== */

.m-table { width: 100%; border-collapse: collapse; background: var(--metal-white); font-size: 12.5px; }
.m-table th {
  text-align: left;
  font-size: 11.5px;
  padding: 5px 9px;
  color: var(--metal-ink);
  background: linear-gradient(180deg, #f6fafd, #dbe7f3);
  border: 1px solid;
  border-color: var(--metal-white) var(--metal-shadow) var(--metal-secondary1) var(--metal-white);
  white-space: nowrap;
}
.m-table td { padding: 5px 9px; border-bottom: 1px solid #d3e0ec; border-right: 1px solid #e4ecf4;
  vertical-align: top; }
.m-table tbody tr:nth-child(even) { background: #f5f9fd; }
.m-table tbody tr:hover { background: var(--metal-primary3); }
.m-table .m-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Badges / status chips
   ========================================================================== */

.m-badge {
  display: inline-block; font: 700 10.5px var(--metal-font); text-transform: uppercase;
  letter-spacing: .04em; padding: 2px 7px; border-radius: 2px;
  background: var(--metal-secondary3); color: var(--metal-ink-soft);
  border: 1px solid var(--metal-secondary2);
}
.m-badge.ok   { background: #d7efe2; color: #14563a; border-color: #8fc7ac; }
.m-badge.bad  { background: #f7dedc; color: #8d211a; border-color: #d9a19c; }
.m-badge.warn { background: #fbeecd; color: #744b00; border-color: #dcc188; }
.m-badge.info { background: var(--metal-primary3); color: #1d4373; border-color: var(--metal-primary2); }

/* ==========================================================================
   Dialogs (JOptionPane / JInternalFrame) — modal with a drop shadow
   ========================================================================== */

.m-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(24, 46, 68, .45);
  display: grid; place-items: center;
  padding: 24px;
}
.m-overlay[hidden] { display: none; }
.m-dialog {
  width: min(680px, 100%);
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: var(--metal-control);
  border: 1px solid var(--metal-secondary1);
  box-shadow: 4px 4px 0 rgba(20, 40, 60, .35), 0 0 0 1px rgba(255, 255, 255, .6) inset;
}
.m-dialog .m-body { padding: 14px; overflow: auto; }
.m-dialog .m-buttons {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 10px 14px; background: var(--metal-secondary3);
  border-top: 1px solid var(--metal-shadow); box-shadow: inset 0 1px 0 #fff;
}
/* The title bar's close box, drawn as Swing's square button. */
.m-close {
  width: 18px; height: 16px; padding: 0; line-height: 1;
  font: 700 12px var(--metal-font);
  border: 1px solid var(--metal-secondary1);
  background: linear-gradient(180deg, #ffffff, #cddcec);
  cursor: pointer; color: var(--metal-ink);
}
.m-close:hover { background: linear-gradient(180deg, #ffe3e0, #f0b7b1); }

/* ==========================================================================
   Key/value detail grid — the block-explorer and settlement read-outs
   ========================================================================== */

.m-kv { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 0; }
.m-kv > dt {
  padding: 6px 10px; font-weight: 700; font-size: 12px; color: var(--metal-ink-soft);
  background: #eef4fa; border-bottom: 1px solid #dbe6f0;
}
.m-kv > dd {
  margin: 0; padding: 6px 10px; font-size: 12.5px; background: var(--metal-white);
  border-bottom: 1px solid #dbe6f0; word-break: break-word; min-width: 0;
}

/* ==========================================================================
   Scrollbars — Metal's chunky 16px bars with arrow buttons
   ========================================================================== */

* { scrollbar-color: var(--metal-primary2) var(--metal-secondary3); }

::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: var(--metal-secondary3); border: 1px solid #c3d3e2; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #ffffff 0%, #cddcec 55%, #b6cee4 100%);
  border: 1px solid #6f92b6;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #ffffff, var(--metal-primary3)); }
::-webkit-scrollbar-corner { background: var(--metal-secondary3); }
::-webkit-scrollbar-button:vertical:start:decrement {
  background: var(--metal-secondary3) center/7px no-repeat
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 1 8 7 0 7z' fill='%2338618f'/%3E%3C/svg%3E");
  border: 1px solid #6f92b6; height: 16px; display: block;
}
::-webkit-scrollbar-button:vertical:end:increment {
  background: var(--metal-secondary3) center/7px no-repeat
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 7 0 1 8 1z' fill='%2338618f'/%3E%3C/svg%3E");
  border: 1px solid #6f92b6; height: 16px; display: block;
}
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:horizontal:end:increment { display: none; }

/* ==========================================================================
   Utilities
   ========================================================================== */

.m-muted { color: var(--metal-ink-soft); }
.m-pos { color: var(--pos); } .m-neg { color: var(--neg); } .m-warn { color: var(--warn); }
.m-right { text-align: right; }
.m-num { font-variant-numeric: tabular-nums; }
.m-scroll-x { overflow-x: auto; }
.m-stack { display: flex; flex-direction: column; gap: 8px; }
.m-row { display: flex; align-items: center; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}