/*
 * Lumina Forms — Form Tools theme (structural layer)
 * Loaded AFTER themes/default/css/styles.css, so only overrides live here.
 * Palette: Obsidian #0B0F17 · Lumina Blue #2F6FED · Legacy Gold #C9973F
 */
:root {
  --lf-obsidian: #0B0F17;
  --lf-obsidian-2: #141B28;
  --lf-blue: #2F6FED;
  --lf-blue-deep: #1D4FC4;      /* 6.6:1 on white — links & focus */
  --lf-gold: #C9973F;
  --lf-gold-text: #7E5A1C;      /* gold that passes AA on white */
  --lf-ink: #1A2130;
  --lf-muted: #4F586A;          /* 7:1 on white */
  --lf-line: #DDE2EC;
  --lf-mist: #F4F6FA;
  --lf-radius: 10px;
  --lf-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --lf-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* ---------- Canvas ---------- */
html, body { background-color: var(--lf-mist); }
body {
  background-image: linear-gradient(180deg, var(--lf-obsidian) 0, var(--lf-obsidian-2) 96px, var(--lf-mist) 96px);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-family: var(--lf-font);
  color: var(--lf-ink);
}
body, td, th, input, select, textarea, button { font-family: var(--lf-font); }

/* ---------- Skip link (WCAG 2.4.1) ---------- */
.lf-skip {
  position: absolute; left: 12px; top: -60px; z-index: 1000;
  background: var(--lf-gold); color: var(--lf-obsidian) !important;
  padding: 10px 16px; border-radius: 6px; font-weight: 600; text-decoration: none;
}
.lf-skip:focus { top: 12px; }

/* ---------- Header ---------- */
#header {
  height: 96px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px;
  box-sizing: border-box;
  position: relative;
}
#header::after {                     /* thin gold horizon line */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--lf-gold) 20%, #E2B866 50%, var(--lf-gold) 80%, transparent);
  opacity: .8;
}
.lf-brand { display: inline-flex; align-items: center; border: 0; }
.lf-brand img { display: block; height: 64px; width: auto; }
.lf-brand:focus-visible { outline: 3px solid var(--lf-gold); outline-offset: 4px; border-radius: 8px; }

#account_section {
  font-family: var(--lf-mono);
  font-size: 12px; letter-spacing: .06em;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(201,151,63,.55);
  line-height: 1.4; height: auto;
}

/* ---------- Content shell ---------- */
#content {
  background: #fff;
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius);
  box-shadow: 0 8px 28px rgba(11,15,23,.08);
  margin-top: 18px;
  overflow: hidden;
}

/* ---------- Left navigation ---------- */
#left_nav { padding: 18px 10px 24px 16px; }
#left_nav .nav_heading {
  font-family: var(--lf-mono); text-transform: uppercase; letter-spacing: .12em;
  font-size: 11px; color: var(--lf-gold-text); margin: 6px 0 8px;
}
.nav_link a, .nav_link_submenu a {
  display: block; border-radius: 6px; text-decoration: none;
  padding: 6px 10px; margin: 1px 0;
}
.nav_link a { font-weight: 600; font-size: 13px; }
.nav_link_submenu a { font-size: 12px; padding-left: 18px; }
.nav_link a:focus-visible, .nav_link_submenu a:focus-visible { outline: 2px solid var(--lf-blue); outline-offset: 1px; }

/* ---------- Typography ---------- */
.title {
  font-family: var(--lf-font); font-weight: 700; letter-spacing: -.01em;
  font-size: 22px;
}
.subtitle { font-weight: 600; letter-spacing: .01em; }
.title img, .subtitle img { vertical-align: middle; }

/* ---------- Buttons ---------- */
input[type=button], input[type=submit], button:not(.ui-button):not(.ui-dialog-titlebar-close) {
  font-family: var(--lf-font); font-size: 13px; font-weight: 600;
  background: var(--lf-blue-deep); color: #fff;
  border: 1px solid var(--lf-blue-deep); border-radius: 6px;
  padding: 7px 14px; cursor: pointer; line-height: 1.2;
  transition: background-color .15s ease, box-shadow .15s ease;
}
input[type=button]:hover, input[type=submit]:hover, button:not(.ui-button):not(.ui-dialog-titlebar-close):hover {
  background: var(--lf-obsidian); border-color: var(--lf-obsidian);
}
input[type=button]:focus-visible, input[type=submit]:focus-visible, button:focus-visible {
  outline: 3px solid var(--lf-gold); outline-offset: 2px;
}
input.red, input[type=button].red, .red input { background: #B42318; border-color: #B42318; }
input.blue { background: var(--lf-blue-deep); }

/* ---------- Fields ---------- */
input[type=text], input[type=password], input[type=email], input[type=number], select, textarea {
  border: 1px solid #B8C0CE; border-radius: 6px; padding: 5px 8px;
  font-size: 13px; color: var(--lf-ink); background: #fff;
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=number]:focus, select:focus, textarea:focus {
  outline: 2px solid var(--lf-blue); outline-offset: 0; border-color: var(--lf-blue);
}

/* ---------- Tables ---------- */
.list_table { border-collapse: collapse; border-color: var(--lf-line); }
.list_table th {
  background: var(--lf-obsidian) !important; color: #fff;
  font-family: var(--lf-mono); font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em;
}
.list_table th a:link, .list_table th a:visited { color: #fff; }
.list_table td { border-color: var(--lf-line); }
.list_table tr:nth-child(even) td { background-color: #FAFBFD; }

/* ---------- Tabs ---------- */
.main_tabset li a { border-radius: 6px 6px 0 0; }

/* ---------- Footer ---------- */
.footer {
  font-family: var(--lf-mono); font-size: 11px; letter-spacing: .06em;
  color: var(--lf-muted); padding: 18px 0 28px;
}

/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}