*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --a:#c9a84c;
  --amber-text:#c9a84c; /* Gold accent */
  --al:#c9a84c;
  --ap:rgba(201, 168, 76, 0.15);
  --ad:#e5d4a1;
  --t:#f8fafc;
  --t2:#cbd5e1;
  --t3:#94a3b8;
  --bd:#334155; /* Meets 3:1 non-text contrast against #0a0e17 */
  --bd2:#64748b; /* Highly visible border for form controls */
  --bg:#0a0e17;
  --bg2:#131c2e;
  --bgd:#070a13;
  --w:#121826; /* Premium dark card background */
  --mono:'DM Mono',monospace;
  --sans:'DM Sans',sans-serif;
  --serif:'Cormorant Garamond',serif;
  --r:0.625rem;
  --rl:0.875rem;
  --green:#0d7c4a;
  --green-bg:#E1F5EE;
  --red:#c0392b;
  --red-bg:#FCEBEB;
  --blue:#0C447C;
  --blue-bg:#E6F1FB;
}

.light-theme {
  --t: #0f172a;
  --t2: #334155;
  --t3: #656158; /* APCA-compliant charcoal */
  --bd: #cbd5e1;
  --bd2: #94a3b8;
  --bg: #f8fafc;
  --bg2: #f1f5f9;
  --bgd: #ffffff;
  --w: #ffffff;
  --amber-text: #965300; /* APCA-compliant dark amber */
  --al: #965300;
  --a: #965300;
}

/* ── LIGHT THEME ACCESSIBILITY OVERRIDES ── */
.light-theme body {
  color: var(--t);
  background: var(--bg2);
}
.light-theme .sidebar {
  background: var(--w);
  border-right: 1px solid var(--bd);
}
.light-theme .sb-logo {
  border-bottom: 1px solid var(--bd);
  color: var(--al);
}
.light-theme .sb-section {
  color: var(--t3);
}
.light-theme .sidebar a, .light-theme .sb-item {
  color: var(--t2);
}
.light-theme .sidebar a:hover, .light-theme .sb-item:hover {
  background: rgba(15, 23, 42, 0.05);
  color: var(--t);
}
.light-theme .sb-user {
  border-top: 1px solid var(--bd);
}
.light-theme .sb-user a {
  color: var(--t3) !important;
}
.light-theme .sb-user a:hover {
  color: var(--t) !important;
}
.light-theme .sb-avatar {
  background: rgba(15, 23, 42, 0.05);
}
.light-theme .sb-user-info {
  color: var(--t3);
}
.light-theme .sb-user-info strong {
  color: var(--t);
}
.light-theme dialog::backdrop {
  background: rgba(15, 23, 42, 0.4);
}

/* ── SMOOTH THEME TRANSITION ── */
body, .sidebar, .sb-logo, .sidebar a, .sb-item, .sb-user, .sb-avatar, .sb-user-info, .main, .stat-card, .data-table tr, .feed-item, .content-card, .login-box, .login-input, dialog {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

/* ── PORTAL THEME TOGGLE ── */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}
.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
}
.light-theme .theme-toggle-btn {
  color: var(--t2);
}
.light-theme .theme-toggle-btn:hover {
  background: rgba(15, 23, 42, 0.04);
  color: var(--t);
}
.theme-toggle-btn svg {
  width: 0.9375rem;
  height: 0.9375rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  transition: transform 0.5s ease;
}
.theme-toggle-btn:hover svg {
  transform: rotate(30deg);
}

.theme-toggle-btn .sun-icon {
  display: block;
}
.theme-toggle-btn .moon-icon {
  display: none;
}
.light-theme .theme-toggle-btn .sun-icon {
  display: none;
}
.light-theme .theme-toggle-btn .moon-icon {
  display: block;
}
body{font-family:var(--sans);color:var(--t);background:var(--bg2);-webkit-font-smoothing:antialiased;line-height:1.6;text-align:start}
p{max-width:80ch} /* Limit reading line-length for readability */

/* ── ACCESSIBILITY UTILITIES (WCAG) ── */
.visually-hidden:where(:not(:focus-within, :active)) {
  position: absolute !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  white-space: nowrap !important;
}
.skip-link {
  position: absolute;
  top: -100px;
  left: 1.5rem;
  background: var(--a);
  color: #0a0e17 !important;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  z-index: 9999;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  transition: top 0.2s ease;
}
.skip-link:focus-visible {
  top: 0;
  outline: 3px solid var(--t) !important;
  outline-offset: 2px !important;
}

/* ── KEYBOARD FOCUS OUTLINES (WCAG 3.0) ── */
:focus-visible{outline:3px solid var(--a) !important;outline-offset:3px !important}
:focus:not(:focus-visible){outline:none !important}

/* View switcher */
.view-bar{background:var(--bgd);padding:0.75rem 1.5rem;display:flex;align-items:center;gap:0;position:sticky;top:0;z-index:100}
.view-logo{font-family:var(--serif);font-size:1.125rem;font-weight:700;color:var(--al);margin-right:1.5rem;font-style:italic}
.view-logo span{font-family:var(--mono);font-size:0.625rem;color:rgba(255,255,255,.4);vertical-align:super}
.view-tab{padding:0.5rem 1.125rem;font-size:0.75rem;font-family:var(--sans);color:rgba(255,255,255,.5);cursor:pointer;border-radius:0.375rem;transition:background .2s,color .2s;font-weight:500}
.view-tab:hover{color:#fff;background:rgba(255,255,255,.08)}
.view-tab.active{color:#fff;background:var(--amber-text)}
.view-label{font-size:0.625rem;font-family:var(--mono);color:rgba(255,255,255,.25);margin-left:auto;letter-spacing:0.0625rem}

.view{display:none}.view.active{display:block}

/* Browser chrome */
.browser{max-width:68.75rem;margin:1.5rem auto;border-radius:0.75rem;overflow:hidden;box-shadow:0 0.5rem 2.5rem rgba(0,0,0,.15);background:var(--bg)}
.browser-bar{background:#E8E6E0;padding:0.625rem 1rem;display:flex;align-items:center;gap:0.5rem}
.browser-dot{width:0.625rem;height:0.625rem;border-radius:50%;background:#ccc}
.browser-dot.r{background:#ff5f57}.browser-dot.y{background:#febc2e}.browser-dot.g{background:#28c840}
.browser-url{flex:1;margin-left:0.75rem;background:#fff;border-radius:0.375rem;padding:0.375rem 0.75rem;font-size:0.6875rem;font-family:var(--mono);color:var(--t3)}

/* Portal layout */
.portal{display:grid;grid-template-columns:13.75rem 1fr;min-height:40rem}
.sidebar{background:var(--bgd);padding:1.25rem 0;display:flex;flex-direction:column}
.sb-logo{padding:0 1.25rem 1.25rem;font-family:var(--serif);font-size:1rem;font-weight:700;color:var(--al);font-style:italic;border-bottom:.5px solid rgba(255,255,255,.08);margin-bottom:0.75rem}
.sb-logo span{font-family:var(--mono);font-size:0.5625rem;color:rgba(255,255,255,.3);vertical-align:super}
.sb-section{font-size:0.5625rem;font-family:var(--mono);color:rgba(255,255,255,.25);letter-spacing:0.125rem;text-transform:uppercase;padding:0.75rem 1.25rem 0.375rem}

/* Style both sidebar links and sb-item classes */
.sidebar a, .sb-item{display:flex;align-items:center;gap:0.625rem;padding:0.5rem 1.25rem;font-size:0.8125rem;color:rgba(255,255,255,.5);cursor:pointer;transition:background .2s,color .2s}
.sidebar a:hover, .sb-item:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.8)}
.sidebar a.active, .sb-item.active{background:rgba(184,112,15,.2);color:var(--al);border-right:0.125rem solid var(--al)}
.sidebar a svg, .sb-item svg{width:0.9375rem;height:0.9375rem;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

.sb-badge{margin-left:auto;font-size:0.625rem;font-family:var(--mono);background:var(--amber-text);color:#fff;padding:0.0625rem 0.375rem;border-radius:0.625rem}
.sb-user{position:relative;margin-top:auto;padding:0.875rem 1.25rem;border-top:.5px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:0.625rem}

/* Overrides for absolute positioned Sign Out link to meet APCA contrast and relative size */
.sb-user a{position:absolute;right:1.25rem;color:rgba(255,255,255,0.75) !important;text-decoration:none;font-size:0.75rem !important;transition:color .2s}
.sb-user a:hover{color:#fff !important}

.sb-avatar{width:2rem;height:2rem;border-radius:0.5rem;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:0.875rem;font-weight:700;color:var(--al);font-style:italic}
.sb-user-info{font-size:0.75rem;color:rgba(255,255,255,.6);padding-right:3.5rem}
.sb-user-info strong{display:block;color:#fff;font-size:0.8125rem}

/* Main content */
.main{padding:1.5rem;background:var(--bg);overflow-y:auto}

/* Rem overrides for inline-styled headers in main view */
.main h3{font-size:0.875rem !important;font-weight:600 !important;margin-bottom:0.75rem !important}
.main h3[style*="margin-top"]{margin-top:1.25rem !important}

.main-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.main-title{font-size:1.25rem;font-weight:600;color:var(--t)}
.main-actions{display:flex;gap:0.5rem}
.main-btn{padding:0.5rem 1rem;border-radius:0.4375rem;font-size:0.75rem;font-family:var(--sans);font-weight:500;cursor:pointer;border:none;transition:background .2s}
.main-btn.primary{background:var(--amber-text);color:#fff}.main-btn.primary:hover{background:var(--ad)}
.main-btn.ghost{background:transparent;border:.5px solid var(--bd2);color:var(--t2)}.main-btn.ghost:hover{border-color:var(--amber-text);color:var(--amber-text)}

/* Cards and stats */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0.75rem;margin-bottom:1.25rem}
.stat-card{background:var(--w);border:.5px solid var(--bd);border-radius:var(--r);padding:1rem}
.stat-card-num{font-family:var(--mono);font-size:1.5rem;font-weight:500;color:var(--amber-text);margin-bottom:0.25rem}
.stat-card-label{font-size:0.6875rem;color:var(--t3)}

/* Table */
.data-table{width:100%;border-collapse:collapse;margin-bottom:1.25rem}
.data-table th{text-align:left;font-size:0.625rem;font-family:var(--mono);color:var(--t3);letter-spacing:0.0625rem;text-transform:uppercase;padding:0.5rem 0.75rem;border-bottom:.5px solid var(--bd)}
.data-table td{padding:0.625rem 0.75rem;border-bottom:.5px solid var(--bd);font-size:0.8125rem;color:var(--t)}
.data-table tr:hover{background:var(--bg2)}
.status{font-size:0.625rem;font-family:var(--mono);padding:0.1875rem 0.5rem;border-radius:0.25rem;font-weight:500;display:inline-block}
.status.active{background:var(--green-bg);color:var(--green)}
.status.pending{background:var(--ap);color:var(--ad)}
.status.paid{background:var(--green-bg);color:var(--green)}
.status.overdue{background:var(--red-bg);color:var(--red)}
.status.draft{background:var(--bg2);color:var(--t3)}
.status.info{background:var(--blue-bg);color:var(--blue)}

/* Activity feed */
.feed{display:flex;flex-direction:column;gap:0.625rem}
.feed-item{display:flex;gap:0.75rem;padding:0.75rem;background:var(--w);border:.5px solid var(--bd);border-radius:var(--r)}
.feed-dot{width:0.5rem;height:0.5rem;border-radius:50%;background:var(--al);margin-top:0.3125rem;flex-shrink:0}
.feed-body{flex:1}
.feed-text{font-size:0.8125rem;color:var(--t);line-height:1.5}
.feed-time{font-size:0.625rem;color:var(--t3);font-family:var(--mono);margin-top:0.125rem}

/* Progress */
.progress-bar{width:100%;height:0.375rem;background:var(--bg2);border-radius:0.1875rem;overflow:hidden;margin:0.5rem 0}
/* Override inline-styled progress bars width from pixels to rem */
.progress-bar[style*="width:120px"]{width:7.5rem !important}
.progress-fill{height:100%;background:var(--amber-text);border-radius:0.1875rem;transition:width .3s}

/* Content grid */
.content-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.75rem}
.content-card{background:var(--w);border:.5px solid var(--bd);border-radius:var(--r);padding:1rem;display:flex;flex-direction:column;gap:0.5rem;transition:border-color .2s}
.content-card:hover{border-color:var(--al)}
.cc-icon{width:2.25rem;height:2.25rem;border-radius:0.5rem;background:var(--ap);display:flex;align-items:center;justify-content:center;color:var(--amber-text);font-size:1rem}
.cc-title{font-size:0.8125rem;font-weight:600;color:var(--t)}
.cc-desc{font-size:0.6875rem;color:var(--t3);line-height:1.5}
.cc-tag{font-size:0.5625rem;font-family:var(--mono);background:var(--bg2);color:var(--t3);padding:0.125rem 0.375rem;border-radius:0.1875rem;display:inline-block}

/* Login screen */
.login-screen{display:flex;align-items:center;justify-content:center;min-height:40rem;background:var(--bgd);padding:2.5rem}
.login-box{width:23.75rem;background:var(--w);border-radius:var(--rl);overflow:hidden}
.login-top{background:var(--bgd);padding:2rem;text-align:center;border-bottom:.5px solid rgba(255,255,255,.08)}
.login-logo{font-family:var(--serif);font-size:2rem;font-weight:700;color:var(--al);font-style:italic;margin-bottom:0.25rem}
.login-logo span{font-family:var(--mono);font-size:0.875rem;color:rgba(255,255,255,.4);vertical-align:super}
.login-sub{font-size:0.75rem;color:rgba(255,255,255,.4);font-family:var(--mono);letter-spacing:0.0625rem}
.login-form{padding:1.75rem}
.login-label{display:block;font-size:0.625rem;font-family:var(--mono);color:var(--t3);letter-spacing:0.09375rem;text-transform:uppercase;margin-bottom:0.375rem}
.login-input{width:100%;border:.5px solid var(--bd2);border-radius:0.5rem;padding:0.625rem 0.75rem;font-size:0.8125rem;font-family:var(--sans);color:var(--t);background:var(--bg);margin-bottom:1rem;outline:none;transition:border-color .2s}
.login-input:focus{border-color:var(--amber-text)}
.login-btn{width:100%;background:var(--amber-text);color:#fff;border:none;padding:0.75rem;border-radius:0.5rem;font-size:0.875rem;font-weight:500;cursor:pointer;font-family:var(--sans);margin-bottom:0.75rem;transition:background .2s}
.login-btn:hover{background:var(--ad)}
.login-forgot{text-align:center;font-size:0.6875rem;color:var(--t3);font-family:var(--mono)}
.login-note{padding:1rem 1.75rem;background:var(--bg2);font-size:0.6875rem;color:var(--t3);text-align:center;font-family:var(--mono);line-height:1.5}
.mockup-label{position:absolute;top:0.5rem;right:0.75rem;font-size:0.5625rem;font-family:var(--mono);color:var(--t3);letter-spacing:0.0625rem;text-transform:uppercase;background:var(--ap);padding:0.125rem 0.5rem;border-radius:0.1875rem;z-index:10}

/* ── DIALOG / MODAL STYLES ── */
dialog {
  background: var(--w);
  border: 1px solid var(--bd2);
  border-radius: var(--rl);
  padding: 1.5rem;
  max-width: 28rem;
  width: 90%;
  color: var(--t);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0; /* Override user agent default */
}
dialog::backdrop {
  background: rgba(7, 10, 19, 0.8);
  backdrop-filter: blur(4px);
}
dialog h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--al);
  font-style: italic;
  margin-bottom: 1rem !important;
}
.form-group {
  margin-bottom: 1rem;
}
.form-group label {
  display: block;
  font-size: 0.6875rem;
  font-family: var(--mono);
  color: var(--t3);
  letter-spacing: 0.0625rem;
  text-transform: uppercase;
  margin-bottom: 0.375rem;
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  border: 1px solid var(--bd2);
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-family: var(--sans);
  color: var(--t);
  background: var(--bg);
  outline: none;
  transition: border-color .2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--amber-text);
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.5rem;
}