/* ===========================================================
   Lovins Work Portal CSS Master — Unified 2025
   Slate Blue • Professional • High Contrast
   Figtree everywhere (titles, UI, body)
   =========================================================== */

/* ---------- Fonts: local first (self-hosted), remote fallback ---------- */
@font-face{
  font-family:"Figtree";
  src:
    url("/fonts/Figtree/Figtree-VariableFont_wght.woff2") format("woff2-variations"),
    url("/fonts/Figtree/Figtree-VariableFont_wght.ttf") format("truetype");
  font-weight:300 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Figtree";
  src:
    url("/fonts/Figtree/Figtree-Italic-VariableFont_wght.woff2") format("woff2-variations"),
    url("/fonts/Figtree/Figtree-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight:300 900;
  font-style:italic;
  font-display:swap;
}
/* Static fallbacks if variable files are missing */
@font-face{font-family:"Figtree";src:url("/fonts/Figtree/static/Figtree-Regular.woff2") format("woff2"),url("/fonts/Figtree/static/Figtree-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Figtree";src:url("/fonts/Figtree/static/Figtree-Bold.woff2") format("woff2"),url("/fonts/Figtree/static/Figtree/static/Figtree-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap;}
/* Google fallback (used only if local paths fail) */
@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");

/* ===========================================================
   THEME TOKENS
   =========================================================== */
:root{
  /* Core palette */
  --primary-color:#3c5a8b;
  --primary-color-hover:#2f4a74;
  --secondary-color:#a7b8cf;

  --danger-color:#d64545;
  --success-color:#2ea44f;
  --info-color:#0ea5b5;

  --neutral-dark:#1f242b;
  --neutral:#2c323b;
  --neutral-mid:#3a404a;
  --neutral-light:#f1f3f5;

  --background-color:#ffffff;
  --card-bg:#ffffff;
  --panel-bg:#f7f9fc;

  --text-on-dark:#ffffff;
  --text-on-light:#111827;
  --text-color:var(--text-on-light);

  /* Navigation (HIGHER CONTRAST) */
  --nav-bg:#1f2f4a;                  /* darker bar */
  --nav-link-color:var(--nav-bg);    /* <-- text matches bar color when NOT hovered (fixes white-on-white) */
  --nav-link-hover:#1f2f4a;          /* dark text on light hover pill */
  --nav-ink:#2a4270;                 /* active pill */
  --nav-ink-line:#cfe1ff;            /* underline accent */
  --nav-dropdown-bg:#1a2a42;
  --nav-dropdown-hover:#273c60;

  /* Controls */
  --button-radius:8px;
  --button-padding:10px 14px;
  --button-font-size:.95rem;

  /* Forms */
  --input-bg:#ffffff;
  --input-text:#0f1720;
  --input-border:#c7ced8;
  --input-focus:var(--primary-color);
  --input-radius:6px;

  /* Typography: one font only */
  --font-body:"Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-title:var(--font-body);

  /* Chrome */
  --soft-shadow:0 8px 22px rgba(16,24,40,.08);
  --card-shadow:0 10px 30px rgba(16,24,40,.10);
  --border-soft:#e5eaf0;
}

/* ===========================================================
   BASE
   =========================================================== */
*{box-sizing:border-box;}
html,body{
  margin:0; padding:0;
  background:var(--background-color);
  color:var(--text-color);
  font-family:var(--font-body);
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
.container{max-width:1100px;margin:0 auto;padding:20px;}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-title);
  font-weight:800;
  letter-spacing:.2px;
  margin:0 0 .6rem 0;
  color:#0f1720;
}
h1{font-size:clamp(28px,4.5vw,40px);}
h2{font-size:clamp(22px,3.5vw,32px);}
h3{font-size:clamp(18px,3vw,24px);}
a{color:var(--primary-color);text-decoration:none;}
a:hover{text-decoration:underline;}
:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px;}

/* ===========================================================
   TOP NAV (contrast fix + clearer states)
   =========================================================== */
nav{
  background:var(--nav-bg);
  padding:12px 16px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  box-shadow:var(--soft-shadow);
  border-bottom:1px solid rgba(0,0,0,.18);
}
nav a{
  position:relative;
  color:var(--nav-link-color);       /* dark text to contrast white tab shapes */
  text-decoration:none;
  padding:10px 12px;
  margin:0 2px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:1rem;
  border-radius:10px;
  transition:background .15s ease, transform .06s ease, color .15s ease, box-shadow .15s ease;
}
/* Hover/focus: light pill + dark text (keeps contrast over white) */
nav a:hover,
nav a:focus-visible{
  color:var(--nav-link-hover);
  background:#e9effb;
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(60,90,139,.20);
}
/* Underline accent for hover/focus */
nav a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:6px;
  height:2px; background:transparent; transition:background .15s ease;
}
nav a:hover::after,
nav a:focus-visible::after{ background:var(--nav-ink-line); }
/* Active state: solid slate pill with white text */
nav a.active,
nav a[aria-current="page"]{
  background:var(--nav-ink);
  color:#ffffff;
  box-shadow:0 8px 16px rgba(32,48,80,.35);
}
nav a.active::after,
nav a[aria-current="page"]::after{ background:#e5efff; }

/* Dropdown menus */
.dropdown-menu{
  background:var(--nav-dropdown-bg);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:var(--card-shadow);
  border-radius:10px; overflow:hidden;
}
.dropdown-menu a{
  display:block; padding:10px 14px;
  color:#f4f8ff; font-weight:600; font-size:.95rem; border-radius:0;
}
.dropdown-menu a:hover{ background:var(--nav-dropdown-hover); color:#ffffff; }

/* ===========================================================
   SIDEBAR
   =========================================================== */
.sidebar{
  background:#eef2f7; color:#243142;
  min-width:240px; padding:16px;
  border:1px solid var(--border-soft);
  border-radius:12px;
}
.sidebar a{
  display:block; color:var(--primary-color);
  padding:8px 12px; border-radius:8px;
  text-decoration:none; margin-bottom:6px; font-weight:600;
}
.sidebar a:hover{ background:#e9f0ff; }

/* ===========================================================
   PANELS / CARDS
   =========================================================== */
.panel,.card{
  background:var(--card-bg);
  color:var(--text-color);
  padding:20px;
  border-radius:12px;
  border:1px solid var(--border-soft);
  box-shadow:var(--soft-shadow);
  margin-bottom:20px;
}
.card:hover{ box-shadow:var(--card-shadow); }
.panel h3,.card h3{ color:#111827; }

/* ===========================================================
   BUTTONS
   =========================================================== */
button,.btn,a.btn,.action-btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:none; border-radius:var(--button-radius);
  padding:var(--button-padding);
  font-size:var(--button-font-size);
  font-family:var(--font-body);
  font-weight:700;
  background:var(--primary-color); color:#fff; text-decoration:none;
  cursor:pointer; margin:6px 5px;
  transition:background .15s, transform .06s, box-shadow .15s;
  height:42px; min-width:120px;
}
button:hover,.btn:hover,a.btn:hover,.action-btn:hover{
  background:var(--primary-color-hover);
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(60,90,139,.25);
}
.btn-secondary{ background:#64748b; }
.btn-ghost{ background:transparent; color:var(--primary-color); border:1px solid var(--border-soft); }
.btn-ghost:hover{ background:#eef3ff; }

/* Toolbar buttons in editors */
.editor-toolbar button,
.editor-toolbar .btn{
  min-width:92px; height:38px; margin:4px;
  background:#f8fafc; color:#0f1720;
  border:1px solid var(--border-soft);
  border-radius:8px; font-weight:700;
}
.editor-toolbar button:hover,
.editor-toolbar .btn:hover{
  background:#eef3ff;
  box-shadow:0 6px 14px rgba(60,90,139,.18);
}
.editor-toolbar button.save{ border-color:#2ea44f; color:#167c36; }
.editor-toolbar button.run{ border-color:#0ea5b5; color:#0b7f8a; }
.editor-toolbar button.delete{ border-color:#d64545; color:#a12d2d; }

/* ===========================================================
   FORMS
   =========================================================== */
form{
  background:var(--panel-bg); color:#0f1720;
  padding:18px; border-radius:12px; border:1px solid var(--border-soft);
  margin-bottom:20px;
}
.form-group{ margin-bottom:12px; }
label{
  display:inline-flex; align-items:center; gap:6px;
  color:#334155; font-weight:600; margin-bottom:6px; cursor:pointer;
}
input,select,textarea{
  width:100%; padding:10px 12px;
  border:1px solid var(--input-border);
  border-radius:var(--input-radius);
  background:var(--input-bg);
  color:var(--input-text);
  font-family:var(--font-body);
  font-size:1rem;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--input-focus); outline:none;
  box-shadow:0 0 0 3px rgba(60,90,139,.18);
}
input[type="checkbox"]{ width:18px; height:18px; margin-right:8px; accent-color:var(--primary-color); }
.form-hint{ color:#6b7280; font-size:.92rem; }

/* ===========================================================
   TABLES
   =========================================================== */
table{
  width:100%; border-collapse:collapse;
  border-radius:10px; overflow:hidden;
  background:#ffffff; color:#111827;
  border:1px solid var(--border-soft);
  box-shadow:var(--soft-shadow);
}
th,td{ padding:10px 12px; border-bottom:1px solid var(--border-soft); }
th{
  background:var(--primary-color); color:#fff; text-align:left;
  font-family:var(--font-body); font-weight:700;
}
tr:nth-child(even) td{ background:#f8fafc; }
tr:last-child td{ border-bottom:none; }

/* ===========================================================
   ACCORDIONS / MODALS
   =========================================================== */
.accordion{
  background:#ffffff; color:#111827;
  padding:0; border-radius:12px;
  border:1px solid var(--border-soft);
  box-shadow:var(--soft-shadow);
  margin-bottom:20px;
}
.accordion-header{
  padding:14px 16px; font-weight:700; cursor:pointer;
  background:#f3f6fb; border-bottom:1px solid var(--border-soft);
  border-radius:12px 12px 0 0; color:#0f1720;
}
.accordion.open .accordion-header{ background:#eaf0fb; }
.accordion-content{ padding:16px; background:#ffffff; color:#111827; border-radius:0 0 12px 12px; }

.modal{
  background:#fff; border-radius:12px; box-shadow:var(--card-shadow);
  padding:20px; border:1px solid var(--border-soft);
}

/* ===========================================================
   UTILITIES
   =========================================================== */
.center{text-align:center;}
.mt-3{margin-top:18px;}
.action-group{display:flex;align-items:center;gap:8px;}
.pill{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:#eef3ff; color:#274c7a; font-weight:700; font-size:.9rem;
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:1100px){
  body{font-size:17px;}
  .container{padding:16px;}
  .panel,.card{padding:18px;}
}
@media (max-width:900px){
  body{font-size:16px;}
  nav{flex-direction:column;align-items:center;}
  nav a{margin:6px 0;}
  .sidebar{min-width:100%;padding:12px;}
  .panel,.card,form{width:96%;margin:10px auto;}
  button,.btn,a.btn{width:100%;min-width:auto;height:44px;font-size:1rem;}
  table,thead,tbody,th,td,tr{display:block;width:100%;}
  th{position:absolute;left:-9999px;}
  td{padding:10px;border:none;border-bottom:1px solid var(--border-soft);}
}
@media (max-width:480px){
  html,body{font-size:15px;}
  .panel,.card,form{padding:14px;}
  input,select,textarea{font-size:.95rem;padding:9px;}
  button,.btn,a.btn{padding:.8rem;font-size:.95rem;}
}