/* =========================================================
   /public/lib/css/ui.css
   Global UI styles – Mkomigbo (Premium Base)
   ========================================================= */

/* ---------------------------------------------------------
   Design tokens
--------------------------------------------------------- */
:root {
  --bg: #f8f9fb;
  --fg: #1f2933;
  --muted: #6b7280;

  --card: #ffffff;
  --border: #e5e7eb;

  --brand: #0d6efd;
  --brand-600: #0b5ed7;

  --danger: #dc2626;

  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow: 0 8px 30px rgba(0,0,0,.10);

  --container: 1100px;
  --gutter: 16px;

  --ring: 0 0 0 4px rgba(13,110,253,.25);
}

/* ---------------------------------------------------------
   Reset + base
--------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.65;
}

img { max-width: 100%; height: auto; }

a { color: inherit; }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 10px;
}

/* ---------------------------------------------------------
   Layout
--------------------------------------------------------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: 24px 0; }

/* Main wrapper (some pages rely on this spacing) */
.site-main { padding: 16px 0 0; }

/* ---------------------------------------------------------
   Header / Navigation
--------------------------------------------------------- */
.site-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Public header uses `.site-header .container`.
   Staff header uses `.site-header__row.container`.
   Support both without changing markup. */
.site-header .container,
.site-header__row.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  gap: 14px;
}

/* Brand (public + staff-compatible) */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--fg);
  text-decoration: none;
}

.brand__text { display: grid; line-height: 1.1; }
.brand__title { font-weight: 900; }
.brand__sub { font-size: .82rem; color: var(--muted); }

/* Public nav (legacy) */
.nav { display: flex; gap: 10px; align-items: center; }

.nav a {
  padding: 8px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--muted);
  font-weight: 600;
}

.nav a:hover,
.nav a.active {
  color: var(--brand);
  background: rgba(13,110,253,.12);
}

/* Staff nav base support (staff.css does the heavy lifting, but ui.css
   provides safe defaults so unstyled pages still look OK). */
.site-nav {
  display: flex;
  gap: 10px;
  align-items: center;
}

.site-nav__link {
  padding: 8px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--muted);
  font-weight: 700;
  border: 1px solid transparent;
}

.site-nav__link:hover,
.site-nav__link.is-active {
  color: var(--brand);
  background: rgba(13,110,253,.12);
  border-color: rgba(13,110,253,.18);
}

.site-nav__spacer { flex: 1 1 auto; }

/* ---------------------------------------------------------
   Footer
--------------------------------------------------------- */
.site-footer {
  margin-top: 56px;
  padding: 28px 0;
  border-top: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
}

.footer-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------
   Typography
--------------------------------------------------------- */
h1,h2,h3 { line-height: 1.2; margin: 0 0 10px; }
p { margin: 0 0 12px; }

/* ---------------------------------------------------------
   Cards (base)
--------------------------------------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.card__content { padding: 18px; }

/* Backward-compatible */
.card.pad { padding: 18px; }

/* ---------------------------------------------------------
   MK “bridge” classes (THIS FIXES YOUR STAFF/TOOLS PAGES)
   Tools pages use mk-card/mk-hero/mk-muted/mk-grid
--------------------------------------------------------- */
.mk-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.mk-muted { color: var(--muted); }

.mk-grid { display: grid; gap: 14px; }

/* Hero used by tools + premium pages */
.mk-hero {
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}

.mk-hero__bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 6px;
  background: var(--brand);
  opacity: .22;
}

.mk-hero__inner { position: relative; }

.mk-hero__title {
  font-size: 1.35rem;
  margin: 0;
  letter-spacing: -0.015em;
}

.mk-hero__subtitle {
  margin: 6px 0 0;
  color: var(--muted);
  max-width: 78ch;
}

/* ---------------------------------------------------------
   Buttons
--------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  font-weight: 800;
  text-decoration: none;
}

.btn:hover { background: rgba(13,110,253,.08); }

.btn-primary { background: var(--brand); color: #fff; border-color: transparent; }
.btn-primary:hover { background: var(--brand-600); }

.btn-danger { background: var(--danger); color: #fff; border-color: transparent; }

/* ---------------------------------------------------------
   Forms
--------------------------------------------------------- */
.input,
textarea,
select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
}

.input:focus-visible,
textarea:focus-visible,
select:focus-visible { box-shadow: var(--ring); }

/* ---------------------------------------------------------
   Tables (GLOBAL baseline only)
--------------------------------------------------------- */
.table-wrap {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow-x: auto;
  background: var(--card);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

th {
  background: rgba(13,110,253,.08);
  font-weight: 900;
}

/* If a table explicitly opts in via class="table" */
table.table { table-layout: fixed; }
table.table th,
table.table td { white-space: nowrap; }

/* ---------------------------------------------------------
   Utilities
--------------------------------------------------------- */
.muted { color: var(--muted); }
.center { text-align: center; }
.hidden { display: none !important; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
}

/* =========================================================
   Layout Debug Mode
   Enable with ?layout_debug=1
   ========================================================= */
body.layout-debug .site-header { outline: 3px solid #ff3b3b !important; }
body.layout-debug .site-main   { outline: 3px solid #3b82f6 !important; }
body.layout-debug .site-footer { outline: 3px solid #22c55e !important; }

body.layout-debug .container { outline: 1px dashed rgba(0,0,0,.35) !important; }
body.layout-debug .card,
body.layout-debug .mk-card   { outline: 2px dashed rgba(0,0,0,.25) !important; }

body.layout-debug::before{
  content:"LAYOUT DEBUG ON";
  position:fixed;
  bottom:12px;
  left:12px;
  z-index:9999;
  padding:6px 10px;
  border-radius:10px;
  background:#111;
  color:#fff;
  font-size:12px;
  opacity:.85;
}

/* =========================================================
   MK COMPAT LAYER (DOM hook aliases)
   Keeps older ui.css tokens but supports newer markup classes
   Safe: additive only
========================================================= */

/* Main wrapper (staff_header opens <main class="site-main">) */
.site-main{
  padding: 18px 0;
}

/* Header row uses .site-header__row not .site-header .container */
.site-header__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  min-height:64px;
}

/* Brand component used in staff_header */
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.brand__text{ display:flex; flex-direction:column; line-height:1.1; }
.brand__title{ font-weight:900; font-size:1.05rem; color:var(--fg); }
.brand__sub{ font-size:.85rem; color:var(--muted); }

/* Staff nav uses .site-nav + .site-nav__link */
.site-nav{ display:flex; align-items:center; gap:10px; }
.site-nav__link{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:12px;
  text-decoration:none;
  color: var(--muted);
  font-weight:700;
}
.site-nav__link:hover{
  color: var(--brand);
  background: rgba(13,110,253,.12);
}
.site-nav__link.is-active{
  color: var(--brand);
  background: rgba(13,110,253,.16);
}
.site-nav__spacer{ flex:1 1 auto; }

/* Buttons: your pages use .btn not .btn-primary */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
}
.btn:hover{ background: rgba(13,110,253,.08); }
.btn:focus-visible{ outline:none; box-shadow: var(--ring); }

/* Cards: your pages use .mk-card but ui.css defines .card */
.mk-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* Muted helper class used widely */
.mk-muted{ color: var(--muted); }

/* Hero block (used in tools pages) */
.mk-hero{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow:hidden;
}
.mk-hero__bar{
  height: 6px;
  background: rgba(13,110,253,.55);
}
.mk-hero__inner{ padding: 16px; }
.mk-hero__title{ margin:0; font-size:1.35rem; font-weight:900; }
.mk-hero__subtitle{ margin:6px 0 0; color: var(--muted); }

/* Footer row helpers (used in your footer markup) */
.footer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

/* Small accessibility helper (used in staff_header) */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}