/* PCCVDI Portal Theme — "Luminous Logic" design system (matches /hub admin).
   Apps stay independent — visa_renewal has its own copy of these tokens. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root {
  /* Luminous Logic palette (synced with business_hub/hub.css) */
  --brand:        #4648d4;     /* primary indigo */
  --brand-dark:   #2f2ebe;     /* on-primary-fixed-variant */
  --brand-light:  #6063ee;     /* primary-container */
  --brand-soft:   #e1e0ff;     /* primary-fixed */
  --brand-active: #6366f1;     /* nav active accent */
  --accent:       #b90538;     /* tertiary */
  --accent-dark:  #dc2c4f;     /* tertiary-container */
  --ok:           #047857;
  --warn:         #b45309;
  --danger:       #ba1a1a;
  --danger-soft:  #ffdad6;

  /* Text on light surfaces */
  --text:         #131b2e;     /* on-surface */
  --text-strong:  #131b2e;
  --text-muted:   #464554;     /* on-surface-variant */
  --text-faded:   #767586;     /* outline */

  /* Borders + neutral surfaces */
  --border:       #c7c4d7;     /* outline-variant */
  --border-light: #e2e7ff;     /* surface-container-high */
  --bg:           #faf8ff;     /* background */
  --card:         #ffffff;     /* surface-container-lowest */
  --surface-low:  #f2f3ff;     /* sidebar bg */
  --surface-high: #e2e7ff;     /* hover bg */

  --sidebar-w:    256px;
  --sidebar-w-mini: 64px;
  --radius:       8px;
  --radius-lg:    12px;
}

/* ── Body baseline — Inter font everywhere on portal pages ── */
body[data-path^="me"], body[data-path^="vendor"], body[data-path="vendor"] {
  background: var(--bg) !important;
  color: var(--text);
  font-family: 'Inter','Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}
body[data-path^="me"] .material-symbols-outlined,
body[data-path^="vendor"] .material-symbols-outlined,
body[data-path="vendor"] .material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  line-height: 1; display: inline-block;
}

/* ── Full-width portal pages (kill Frappe's container constraint) ── */
body[data-path^="me"]   main.container,
body[data-path^="me"]   main.container-fluid,
body[data-path="vendor"] main.container,
body[data-path="vendor"] main.container-fluid,
body[data-path^="vendor/"] main.container,
body[data-path^="vendor/"] main.container-fluid {
  max-width: 100% !important; width: 100% !important; padding: 0 !important;
}

/* ── Layout grids ── */
.me-layout, .vd-layout {
  grid-template-columns: var(--sidebar-w) 1fr !important;
  transition: grid-template-columns .22s ease;
}
body.sidebar-mini .me-layout, body.sidebar-mini .vd-layout {
  grid-template-columns: var(--sidebar-w-mini) 1fr !important;
}
@media (max-width: 880px) {
  .me-layout, .vd-layout { grid-template-columns: 1fr !important; }
}

/* ── Sidebar card — Luminous Logic style ── */
.me-side, .vd-side {
  background: var(--surface-low) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 0 !important;
  height: fit-content;
  position: sticky; top: 16px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(19, 27, 46, 0.05);
}
/* Real PCCVDI logo brand block (replaces the colored data-title band) */
.me-side::before, .vd-side::before { display: none; }
.me-brand, .vd-brand {
  display: flex; gap: 12px; align-items: center;
  padding: 16px 18px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}
.me-brand-logo, .vd-brand-logo {
  width: 44px; height: 44px; object-fit: contain;
  flex-shrink: 0;
  /* show the real PCCVDI logo in its natural colors */
}
.me-brand-text, .vd-brand-text {
  font-size: 16px; font-weight: 800; color: var(--text);
  letter-spacing: -0.01em; line-height: 1.1;
}
.me-brand-sub, .vd-brand-sub {
  font-size: 11px; font-weight: 600; color: var(--brand);
  margin-top: 2px; letter-spacing: .04em; text-transform: uppercase;
}
body.sidebar-mini .me-brand-text, body.sidebar-mini .me-brand-sub,
body.sidebar-mini .vd-brand-text, body.sidebar-mini .vd-brand-sub {
  display: none;
}
body.sidebar-mini .me-brand, body.sidebar-mini .vd-brand {
  justify-content: center; padding: 14px 0;
}
/* Hide the redundant "Vendor Portal" / "My Account" h3 now that brand subtitle shows it */
.me-side .me-brand + h3:first-of-type,
.vd-side .vd-brand + h3:first-of-type { display: none; }

/* section headers */
.me-side h3, .vd-side h3 {
  font-size: 11px !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  letter-spacing: .08em !important;
  margin: 14px 16px 6px !important;
  font-weight: 600 !important;
}
body.sidebar-mini .me-side h3, body.sidebar-mini .vd-side h3 {
  visibility: hidden; height: 6px; margin-top: 8px !important;
  border-top: 1px solid var(--border);
}

/* sidebar links — Luminous Logic pill nav */
.me-side a, .vd-side a {
  display: flex !important;
  align-items: center !important;
  padding: 11px 14px !important;
  margin: 2px 10px;
  border-radius: var(--radius);
  color: var(--text-muted) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: all .15s ease;
  border-left: none;
}
.me-side a:hover, .vd-side a:hover {
  background: var(--surface-high) !important;
  color: var(--text) !important;
}
.me-side a.active, .vd-side a.active {
  background: var(--brand-active) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, .22);
}
.me-side a .ic, .vd-side a .ic {
  width: 20px !important; text-align: center;
  margin-right: 12px !important; font-size: 16px !important;
  opacity: 1; flex-shrink: 0;
  color: currentColor;
}
.me-side a.active .ic, .vd-side a.active .ic { color: #ffffff; }

/* mini mode */
body.sidebar-mini .me-side a, body.sidebar-mini .vd-side a {
  font-size: 0 !important; padding: 9px 0 !important;
  justify-content: center; margin: 1px 6px;
}
body.sidebar-mini .me-side a .ic, body.sidebar-mini .vd-side a .ic {
  margin: 0 !important; font-size: 18px !important;
}
body.sidebar-mini .me-side a, body.sidebar-mini .vd-side a { position: relative; }
body.sidebar-mini .me-side a:hover::after, body.sidebar-mini .vd-side a:hover::after {
  content: attr(data-label);
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: var(--brand-dark); color: #fff;
  padding: 6px 12px; border-radius: 4px;
  font-size: 12px !important; font-weight: 500;
  white-space: nowrap; z-index: 10000;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

/* sidebar toggle */
.sidebar-toggle {
  position: fixed; left: calc(var(--sidebar-w) + 8px); top: 78px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--border);
  color: var(--brand); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 100; transition: all .22s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
body.sidebar-mini .sidebar-toggle { left: calc(var(--sidebar-w-mini) + 8px); }
.sidebar-toggle:hover { background: var(--brand); color: #fff; }
@media (max-width: 880px) { .sidebar-toggle { display: none; } }

/* ── Stat cards ── */
.vd-stat, .me-stat, .vi-stat, .rp-stat {
  background: var(--card) !important;
  border: 1px solid var(--border-light) !important;
  border-left: 4px solid var(--brand) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  transition: transform .15s, box-shadow .15s;
}
.vd-stat:hover, .me-stat:hover, .vi-stat:hover, .rp-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(44, 82, 130, 0.10);
}
.vd-stat .v, .me-stat .v, .vi-stat .v, .rp-stat .v { color: var(--text-strong) !important; }
.vd-stat .l, .me-stat .l, .vi-stat .l, .rp-stat .l { color: var(--text-muted) !important; }

/* ── Card depth ── */
body[data-path^="me"] .card,
body[data-path^="vendor"] .card,
body[data-path^="vendor/"] .card,
body[data-path^="me"] .pf-card, body[data-path^="me"] .pp-card, body[data-path^="me"] .iv-card,
body[data-path^="vendor"] .vd-section,
body[data-path^="vendor/"] .vc-card, body[data-path^="vendor/"] .tm-card, body[data-path^="vendor/"] .ti-card,
body[data-path^="vendor/"] .vn-card, body[data-path^="vendor/"] .pf-card, body[data-path^="vendor/"] .vi-card,
body[data-path^="vendor/"] .rp-card, body[data-path^="vendor/"] .cn-card, body[data-path^="vendor/"] .in-card,
body[data-path^="vendor/"] .tk-card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  border-color: var(--border-light) !important;
  background: var(--card) !important;
}

/* ── Card headers - high contrast ── */
body[data-path^="me"] .card h2,
body[data-path^="vendor/"] .card h2,
body[data-path^="vendor/"] .rp-card h2,
body[data-path^="vendor"] .vd-section h2 {
  background: var(--brand-soft) !important;
  color: var(--brand-dark) !important;
  letter-spacing: .5px !important;
  font-weight: 800 !important;
  border-bottom: 2px solid var(--brand) !important;
}

/* ── Buttons ── */
button.btn-primary, button.primary, a.btn:not(.btn-create), .btn-primary,
.vd-actions a:first-child, .me-actions a:first-child,
.vc-head a.btn, .tm-head a.btn, .vi-head a.btn,
.pp-card button.primary, .vn-card button:not(.cancel),
.ti-card button:not(.cancel), .pf-card button:not(.cancel),
.cn-card button.primary {
  background: var(--brand) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700 !important;
  transition: background .15s !important;
}
button.btn-primary:hover, button.primary:hover,
a.btn:hover, .btn-primary:hover { background: var(--brand-light) !important; }
a.secondary, .vd-actions a.secondary, .me-actions a.secondary {
  background: var(--card) !important;
  color: var(--brand) !important;
  border: 1px solid var(--brand) !important;
  font-weight: 600 !important;
}

/* ── Table headers — high contrast ── */
.vd-section th, .vc-card th, .vi-card th, .tm-card th, .inv-card th, .mc-wrap th,
.rp-card th, .tk-tbl th, .sp-tbl th, .lines-tbl th, .iv-table th {
  background: var(--brand-dark) !important;
  color: #fff !important;
  border-bottom: 0 !important;
  font-weight: 700 !important;
  letter-spacing: .8px !important;
}
.vd-section tr:hover, .vc-card tr:hover, .vi-card tr:hover,
.rp-card tr:hover, .tk-tbl tr:hover, .sp-tbl tr:hover { background: #f7fafc !important; }

/* ── Status badges - WCAG-AA contrast ── */
.badge { font-weight: 700 !important; letter-spacing: .3px !important; }
.badge.green, .badge.ok      { background: #9ae6b4 !important; color: #1c4532 !important; }
.badge.blue, .badge.info     { background: #bee3f8 !important; color: #1a365d !important; }
.badge.orange, .badge.warn   { background: #fbd38d !important; color: #5f370e !important; }
.badge.red, .badge.danger    { background: #feb2b2 !important; color: #63171b !important; }
.badge.gray                  { background: #cbd5e0 !important; color: #2d3748 !important; }
.badge.amber                 { background: #fbd38d !important; color: #5f370e !important; }
.badge.open                  { background: #fbd38d !important; color: #5f370e !important; }
.badge.progress              { background: #bee3f8 !important; color: #1a365d !important; }
.badge.waiting               { background: #faf089 !important; color: #5f370e !important; }
.badge.resolved              { background: #9ae6b4 !important; color: #1c4532 !important; }
.badge.closed                { background: #cbd5e0 !important; color: #2d3748 !important; }

/* ── Headings ── */
.vd-wrap h1, .vc-wrap h1, .vi-wrap h1, .vn-wrap h1, .tm-wrap h1, .ti-wrap h1,
body[data-path^="me"] h1, body[data-path^="vendor"] h1, body[data-path^="vendor/"] h1 {
  color: var(--brand-dark) !important; font-weight: 800 !important;
}

/* ── Secondary text — readable but lower visual weight ── */
body[data-path^="me"] .hint, body[data-path^="vendor"] .hint,
body[data-path^="me"] .lede, body[data-path^="vendor"] .lede,
body[data-path^="me"] .meta, body[data-path^="vendor"] .meta,
body[data-path^="me"] .sub,  body[data-path^="vendor"] .sub,
body[data-path^="me"] .empty, body[data-path^="vendor"] .empty,
body[data-path^="me"] .vd-empty, body[data-path^="vendor"] .vd-empty {
  color: var(--text-muted) !important;
}

/* ── Forms — visible focus ── */
input:focus, select:focus, textarea:focus {
  border-color: var(--brand) !important;
  outline: 2px solid var(--brand-soft) !important;
  outline-offset: 0 !important;
}

/* ── "+" accent buttons ── */
.vd-actions a[href*="/new"], .vd-actions a[href*="/passport"],
.me-actions a[href="/me/passport"] {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700 !important;
}
.vd-actions a[href*="/new"]:hover { background: var(--accent-dark) !important; }

/* ── Cancel buttons ── */
.cn-card a.cancel, .pp-card a.cancel, .pf-card a.cancel,
.vn-card a.cancel, .ti-card a.cancel, .in-card a.cancel, a.cancel {
  display: inline-block !important;
  padding: 10px 22px !important;
  background: #fff !important;
  color: #2d3748 !important;
  border: 1px solid #cbd5e0 !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: all .15s !important;
  margin-left: 8px !important;
}
a.cancel:hover {
  background: #f7fafc !important;
  border-color: var(--brand) !important;
  color: var(--brand) !important;
}

/* ── Card body text ── */
body[data-path^="me"] .card .body,
body[data-path^="vendor"] .card .body,
body[data-path^="vendor/"] .card .body { color: var(--text) !important; }

body[data-path^="me"] .kv .k, body[data-path^="vendor"] .kv .k,
body[data-path^="vendor/"] .kv .k { color: var(--text-muted) !important; font-weight: 500; }