/* static/images/theme.css */
/* ─── Palette ─────────────────────────────────────────────────────────────── */
:root{
  /* Base */
  --bg:        #F5F8FC;   /* page background: light blue/grey */
  --surface:   #FFFFFF;   /* cards / tiles */
  --surface-2: #F2F6FB;   /* subtle alt surface */
  --text:      #1C2434;   /* dark slate for readable body text */
  --muted:     #6B7280;   /* softer text */
  --line:      rgba(15,23,42,.12); /* delicate lines */

  /* Brand */
  --navy:      #0E1B3A;   /* reserved for small elements (buttons/icons) */
  --navy-600:  #1A2750;

  /* Accent (green/teal) */
  --accent:    #2E7D6B;
  --accent-600:#286E5F;
  --accent-50: #EAF6F3;

  /* Keep existing variables used in templates */
  --white:     #FFFFFF;
}

/* ─── Base ───────────────────────────────────────────────────────────────── */
html, body{
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* Links */
a{ color: var(--navy-600); text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 2px; }

/* ─── Header: light shell; dark used only for small items ─────────────────── */
.li-header{
  background: var(--surface) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--line);
}
.li-link{
  color: var(--text) !important;
  opacity: .85;
}
.li-link:hover{ opacity: 1; }

/* Dropdown panel in header */
.group:hover .group-hover\:visible{ visibility: visible; }
.group:hover .group-hover\:opacity-100{ opacity: 1; }
.group:hover .group-hover\:translate-y-0{ transform: translateY(0); }

/* ─── Panels / Tiles ─────────────────────────────────────────────────────── */
.li-panel{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(2,6,23,.05);
}
.li-tile{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 6px 16px rgba(2,6,23,.04);
  min-height: 160px;
}

/* Divider at bottom – light, not a dark bar */
.li-divider{
  height: 36px;
  background:
    linear-gradient(to right, transparent, rgba(15,23,42,.10), transparent);
}

/* ─── Dashboard sidebar (light shell) ────────────────────────────────────── */
.li-client-aside,
.dashboard-sidebar,
.li-client .li-client-side{
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(2,6,23,.04);
}
.dashboard-sidebar a{ color: var(--text); opacity:.9; }
.dashboard-sidebar a:hover{ opacity:1; }
.dashboard-sidebar .active,
.dashboard-sidebar a[aria-current="page"]{
  font-weight:600; color: var(--navy-600);
}

/* ─── Forms ──────────────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select, textarea{
  width: 100%;
  background: var(--white);
  color: var(--text);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(46,125,107,.45);               /* accent */
  box-shadow: 0 0 0 4px rgba(46,125,107,.10);
}
input[disabled], select[disabled]{
  background: #EFF3F8;
  color: #7B8494;
  cursor: not-allowed;
}
label{ color: var(--muted); }

/* ─── Buttons (dark reserved for small elements) ─────────────────────────── */
:is(button, .btn){
  appearance: none;
  border: 0;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .05s ease, opacity .15s ease, box-shadow .15s ease;
  box-shadow: 0 6px 16px rgba(2,6,23,.06);
}
:is(button, .btn):active{ transform: translateY(1px); }

/* Primary: deep navy (small, focused elements) */
.btn-primary, :is(button, .btn).primary{
  background: var(--navy);
  color: var(--white);
}
.btn-primary:hover, :is(button, .btn).primary:hover{ opacity:.92; }

/* Accent: green/teal */
.btn-accent{
  background: var(--accent);
  color: var(--white);
}
.btn-accent:hover{ background: var(--accent-600); }

/* Soft/outline buttons */
.btn-soft{
  background: var(--accent-50);
  color: var(--accent-600);
  border: 1px solid rgba(46,125,107,.28);
  box-shadow: none;
}
.btn-outline{
  background: var(--surface);
  color: var(--navy-600);
  border: 1.5px solid var(--line);
  box-shadow: none;
}
.btn-danger{
  background: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FECACA;
}

/* ─── Tables ─────────────────────────────────────────────────────────────── */
table{ width:100%; border-collapse: collapse; }
th{
  text-align:left; font-weight:600;
  color: var(--muted);
  background: var(--surface-2);
  padding: 10px 12px; border-bottom: 1px solid var(--line);
}
td{ padding:10px 12px; border-bottom: 1px solid var(--line); }
tr:nth-child(odd){ background: rgba(2,6,23,.02); }

/* ─── Badges / chips ────────────────────────────────────────────────────── */
.badge{
  display:inline-block; padding:3px 8px; border-radius:999px; font-size:.85rem;
  background: rgba(2,6,23,.06); color: var(--navy-600);
  border: 1px solid var(--line);
}
.badge-success{
  background: rgba(34,197,94,.12);
  color: #166534; border: 1px solid rgba(34,197,94,.24);
}

/* ─── Headings & helpers ─────────────────────────────────────────────────── */
h1, h2, h3{ color: var(--text); }
.bg-\[var\(--white\)\]{ background: var(--white) !important; }
.text-\[var\(--navy\)\]{ color: var(--navy) !important; }

/* Page spacing nicety */
.page-client .li-client-main > * + *{ margin-top: 16px; }
.small, .help, .note { color: var(--muted); font-size:.9rem; }