/* ZivoFin Report Desk — Master Design System
   Shared by login, dashboard, customer, bureau and report pages.
   Font: Plus Jakarta Sans | Brand: ZivoFin teal + navy
*/
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light;
  --zv-teal: #159D9B;
  --zv-teal-bright: #2ACFC7;
  --zv-navy: #142D3E;
  --zv-deep: #0D202E;
  --zv-support: #17445A;
  --zv-gold: #D9A928;
  --zv-mint: #F0FAFA;
  --zv-page: #F4F8FA;
  --zv-surface: rgba(255,255,255,.82);
  --zv-surface-solid: #FFFFFF;
  --zv-surface-muted: #F5F9FA;
  --zv-text: #172F3D;
  --zv-text-muted: #6C7F8A;
  --zv-border: rgba(20,45,62,.10);
  --zv-shadow: 0 18px 48px rgba(20,45,62,.09);
  --zv-shadow-soft: 0 8px 24px rgba(20,45,62,.07);
  --zv-radius: 22px;
  --zv-radius-sm: 14px;
  --zv-sidebar-width: 258px;
  --zv-focus: 0 0 0 4px rgba(21,157,155,.18);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --zv-page: #0A1721;
  --zv-surface: rgba(17,35,48,.82);
  --zv-surface-solid: #112330;
  --zv-surface-muted: #162C3A;
  --zv-text: #ECF7FA;
  --zv-text-muted: #9CB2BE;
  --zv-border: rgba(202,230,239,.12);
  --zv-shadow: 0 18px 48px rgba(0,0,0,.25);
  --zv-shadow-soft: 0 8px 24px rgba(0,0,0,.18);
  --zv-mint: #102B32;
}
* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh;
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--zv-text); background:
    radial-gradient(ellipse at 8% 0%, rgba(42,207,199,.10), transparent 34%),
    radial-gradient(ellipse at 100% 15%, rgba(21,157,155,.07), transparent 30%),
    var(--zv-page);
  font-size: 14px; line-height: 1.6; transition: background .25s ease, color .25s ease;
}
a { color: var(--zv-teal); text-decoration: none; }
a:hover { color: var(--zv-teal-bright); }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
button, .btn { cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--zv-focus); }
::selection { background: rgba(42,207,199,.28); }
.zv-hidden { display: none !important; }
.zv-muted, .text-muted { color: var(--zv-text-muted) !important; }
.zv-eyebrow { display:inline-flex; align-items:center; gap:9px; padding:7px 13px; border:1px solid rgba(42,207,199,.28); border-radius:999px; background:linear-gradient(115deg,rgba(21,157,155,.13),rgba(42,207,199,.05)); color:var(--zv-teal); font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.zv-eyebrow:before { content:""; width:7px; height:7px; border-radius:50%; background:var(--zv-teal-bright); box-shadow:0 0 0 4px rgba(42,207,199,.12); }
.zv-sketch-underline { text-decoration: underline; text-decoration-color:var(--zv-teal-bright); text-decoration-thickness:3px; text-underline-offset:5px; text-decoration-style:wavy; }
.zv-glass, .glass-card, .card {
  background: var(--zv-surface); border:1px solid var(--zv-border);
  border-radius:var(--zv-radius); box-shadow:var(--zv-shadow-soft);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.zv-card { padding:24px; }
.zv-card-title { margin:0 0 6px; font-size:17px; font-weight:800; letter-spacing:-.025em; }
.zv-card-subtitle { margin:0; color:var(--zv-text-muted); font-size:12px; }
.zv-signature-cta, .btn-primary, button.btn-primary {
  position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; gap:11px;
  min-height:48px; padding:13px 22px; border:1px solid rgba(255,255,255,.42); border-radius:999px;
  color:#fff !important; font-weight:800; letter-spacing:-.01em;
  background:linear-gradient(115deg,#128F90 0%,#159D9B 45%,#2ACFC7 100%);
  box-shadow:0 10px 24px rgba(21,157,155,.27), inset 0 1px 0 rgba(255,255,255,.36);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease; overflow:hidden;
}
.zv-signature-cta:before, .btn-primary:before {
  content:""; position:absolute; z-index:-1; inset:1px; border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 55%);
}
.zv-signature-cta:after, .btn-primary:after {
  content:""; position:absolute; top:-70%; left:-35%; width:28%; height:240%; transform:rotate(25deg);
  background:rgba(255,255,255,.25); filter:blur(7px); transition:left .45s ease;
}
.zv-signature-cta:hover, .btn-primary:hover { transform:translateY(-2px); box-shadow:0 15px 32px rgba(21,157,155,.34), inset 0 1px 0 rgba(255,255,255,.4); filter:saturate(1.08); }
.zv-signature-cta:hover:after, .btn-primary:hover:after { left:120%; }
.zv-cta-arrow { display:inline-grid; place-items:center; width:25px; height:25px; border-radius:50%; color:var(--zv-teal); background:#fff; font-size:16px; line-height:1; }
.btn-secondary, .zv-btn-secondary { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:10px 16px; border:1px solid var(--zv-border); border-radius:999px; color:var(--zv-text); background:var(--zv-surface); font-weight:700; }
.zv-icon-btn, .theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid var(--zv-border); border-radius:50%; background:var(--zv-surface); color:var(--zv-text); cursor:pointer; }
input, select, textarea, .form-control {
  width:100%; min-height:46px; padding:12px 14px; border:1px solid var(--zv-border); border-radius:13px;
  background:var(--zv-surface-solid); color:var(--zv-text); outline:none; transition:border-color .18s, box-shadow .18s;
}
textarea { min-height:110px; resize:vertical; }
input::placeholder, textarea::placeholder { color:var(--zv-text-muted); opacity:.8; }
input:focus, select:focus, textarea:focus, .form-control:focus { border-color:var(--zv-teal); box-shadow:var(--zv-focus); }
label, .form-label { display:block; margin:0 0 7px; color:var(--zv-text); font-size:12px; font-weight:800; }
.form-group, .zv-field { margin-bottom:17px; }
.zv-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
.zv-app { min-height:100vh; }
.zv-sidebar { position:fixed; inset:0 auto 0 0; z-index:30; display:flex; flex-direction:column; width:var(--zv-sidebar-width); padding:24px 16px; background:var(--zv-surface); border-right:1px solid var(--zv-border); backdrop-filter:blur(20px); }
.zv-brand { display:flex; align-items:center; min-height:56px; padding:4px 10px 22px; }
.zv-brand img { display:block; width:154px; max-height:48px; object-fit:contain; object-position:left center; }
.zv-nav-label { padding:18px 12px 8px; color:var(--zv-text-muted); font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.zv-nav { display:grid; gap:5px; }
.zv-nav a { display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid transparent; border-radius:13px; color:var(--zv-text-muted); font-size:12px; font-weight:700; transition:background .18s,color .18s; }
.zv-nav a:hover, .zv-nav a.active { color:var(--zv-teal); background:rgba(21,157,155,.10); border-color:rgba(21,157,155,.13); }
.zv-main { min-height:100vh; margin-left:var(--zv-sidebar-width); padding:28px clamp(18px,3vw,42px) 42px; }
.zv-topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:28px; }
.zv-topbar-actions { display:flex; align-items:center; gap:10px; }
.zv-page-title { margin:0; font-size:clamp(23px,2.5vw,32px); line-height:1.2; font-weight:800; letter-spacing:-.045em; }
.zv-page-description { margin:8px 0 0; color:var(--zv-text-muted); font-size:13px; }
.zv-stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.zv-stat { padding:21px; }
.zv-stat-label { color:var(--zv-text-muted); font-size:12px; font-weight:700; }
.zv-stat-value { margin:8px 0 3px; font-size:clamp(23px,2vw,31px); line-height:1.2; font-weight:800; letter-spacing:-.04em; }
.zv-stat-foot { color:var(--zv-text-muted); font-size:11px; }
.zv-content-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr); gap:18px; margin-top:18px; }
.zv-table-wrap { width:100%; overflow-x:auto; border:1px solid var(--zv-border); border-radius:16px; }
table { width:100%; border-collapse:collapse; text-align:left; font-size:12px; }
th { padding:13px 15px; background:var(--zv-surface-muted); color:var(--zv-text-muted); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; white-space:nowrap; }
td { padding:14px 15px; border-top:1px solid var(--zv-border); vertical-align:middle; }
tbody tr:hover { background:rgba(21,157,155,.035); }
.zv-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:999px; background:rgba(21,157,155,.11); color:var(--zv-teal); font-size:10px; font-weight:800; }
.zv-badge.warning { background:rgba(217,169,40,.14); color:#A77A0B; }
.zv-badge.danger { background:rgba(220,70,80,.12); color:#D34C57; }
.zv-badge.neutral { background:var(--zv-surface-muted); color:var(--zv-text-muted); }
.zv-alert { padding:13px 15px; border:1px solid var(--zv-border); border-radius:13px; background:var(--zv-surface-muted); color:var(--zv-text); }
.zv-alert.error { border-color:rgba(220,70,80,.25); background:rgba(220,70,80,.07); }
.zv-alert.success { border-color:rgba(21,157,155,.25); background:rgba(21,157,155,.08); }
.zv-login-shell { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.85fr); min-height:100vh; padding:clamp(18px,4vw,52px); gap:clamp(24px,5vw,72px); align-items:center; }
.zv-login-brand-panel { padding:clamp(12px,3vw,42px); }
.zv-login-brand-panel h1 { max-width:640px; margin:22px 0 16px; font-size:clamp(34px,4.8vw,58px); line-height:1.08; font-weight:800; letter-spacing:-.06em; }
.zv-login-brand-panel p { max-width:500px; color:var(--zv-text-muted); font-size:15px; }
.zv-login-logo { width:190px; max-height:70px; object-fit:contain; object-position:left center; }
.zv-login-card { width:100%; max-width:470px; justify-self:center; padding:clamp(24px,4vw,40px); }
.zv-login-card h2 { margin:0 0 8px; font-size:26px; font-weight:800; letter-spacing:-.04em; }
.zv-login-card .zv-signature-cta { width:100%; margin-top:8px; }
.zv-footer { padding:24px 0 0; color:var(--zv-text-muted); font-size:11px; }
@media (max-width:1100px) {
  .zv-stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .zv-content-grid { grid-template-columns:1fr; }
}
@media (max-width:800px) {
  :root { --zv-sidebar-width:0px; }
  .zv-sidebar { position:static; width:auto; min-height:auto; padding:12px 16px; border-right:0; border-bottom:1px solid var(--zv-border); }
  .zv-brand { padding:4px 4px 12px; }
  .zv-nav-label { display:none; }
  .zv-nav { display:flex; overflow-x:auto; padding-bottom:3px; }
  .zv-nav a { flex:0 0 auto; }
  .zv-main { margin-left:0; padding:22px 16px 32px; }
  .zv-login-shell { grid-template-columns:1fr; padding:20px; gap:20px; }
  .zv-login-brand-panel { padding:8px 4px; }
  .zv-login-brand-panel h1 { font-size:36px; }
  .zv-login-card { max-width:560px; }
}
@media (max-width:520px) {
  .zv-stats-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .zv-stat { padding:15px; }
  .zv-stat-value { font-size:23px; }
  .zv-form-grid { grid-template-columns:1fr; }
  .zv-topbar { align-items:flex-start; }
  .zv-page-title { font-size:24px; }
  .zv-card { padding:18px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *:before, *:after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}