/* ==========================================================================
   EDV — Property Records Ledger
   Design tokens
   ========================================================================== */

:root{
  /* --- Palette ------------------------------------------------------- */
  --forest-950:#0A2118;
  --forest-900:#0E2C21;
  --forest-800:#153A2A;
  --forest-700:#1B4E38;
  --forest-600:#226346;
  --green-500:#3E9E6C;
  --green-400:#5CBE87;
  --gold-600:#B8903D;
  --gold-500:#C9A24B;
  --gold-300:#E4C878;
  --paper-50:#FBF9F3;
  --paper-100:#F4EFE1;
  --paper-200:#EAE2CC;
  --ink-900:#16241D;
  --ink-700:#33453B;
  --ink-500:#5B6E62;
  --ink-300:#93A497;
  --brick-600:#B4503F;
  --brick-100:#F4DFD9;
  --amber-600:#B07A22;
  --amber-100:#F3E4C4;
  --ok-600:#2E7D52;
  --ok-100:#DDEFE2;

  /* --- Type ------------------------------------------------------------ */
  --font-display:'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Layout ------------------------------------------------------------ */
  --sidebar-w:264px;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --shadow-card: 0 1px 2px rgba(15,35,25,.06), 0 8px 24px -12px rgba(15,35,25,.18);
  --shadow-pop: 0 20px 60px -20px rgba(10,25,18,.45);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
html{overflow-x:hidden;}
body{
  margin:0;
  overflow-x:hidden;
  font-family:var(--font-body);
  color:var(--ink-900);
  background-color:var(--paper-100);
  background-image:
    radial-gradient(1100px 500px at 100% -8%, rgba(62,158,108,.06), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.09 0 0 0 0 0.16 0 0 0 0 0.12 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; letter-spacing:-.01em;}
p{margin:0;}
a{color:inherit;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;}
input,select,textarea{font-family:inherit;}
img{max-width:100%; display:block;}
::selection{background:var(--green-400); color:var(--forest-950);}

.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-600);
}

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--green-500);
  outline-offset:2px;
  border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

/* ==========================================================================
   BUTTONS (shared by shell + views)
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; cursor:pointer; border-radius:var(--radius-sm);
  font-weight:600; font-size:13.5px; padding:11px 18px;
  transition:transform .1s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:linear-gradient(155deg, var(--green-500), var(--forest-700)); color:#fff; box-shadow:0 8px 20px -8px rgba(27,78,56,.55);}
.btn-primary:hover{box-shadow:0 10px 24px -8px rgba(27,78,56,.7);}
.btn-block{width:100%;}
.btn-ghost{background:transparent; color:var(--ink-700); border:1.5px solid var(--paper-200);}
.btn-ghost:hover{border-color:var(--ink-300); background:var(--paper-50);}
.btn-ghost-invert{background:rgba(251,249,243,.08); color:#fff; border:1.5px solid rgba(251,249,243,.28);}
.btn-ghost-invert:hover{background:rgba(251,249,243,.16); border-color:rgba(251,249,243,.45);}
.btn-gold{background:linear-gradient(155deg, var(--gold-300), var(--gold-600)); color:var(--forest-950); box-shadow:0 8px 18px -8px rgba(184,144,61,.55);}
.btn-danger-ghost{background:transparent; color:var(--brick-600); border:1.5px solid var(--brick-100);}
.btn-danger-ghost:hover{background:var(--brick-100);}
.btn-sm{padding:7px 12px; font-size:12.5px;}
.btn-icon{padding:8px; border-radius:8px; background:transparent; border:1px solid transparent; color:var(--ink-500); cursor:pointer; display:inline-flex;}
.btn-icon:hover{background:var(--paper-200); color:var(--ink-900);}

input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%;
  padding:11px 14px;
  border:1.5px solid var(--paper-200);
  background:var(--paper-50);
  border-radius:var(--radius-sm);
  font-size:14px;
  color:var(--ink-900);
  transition:border-color .15s ease, box-shadow .15s ease;
}
input::placeholder,textarea::placeholder{color:var(--ink-300);}
input:focus,select:focus,textarea:focus{
  border-color:var(--green-500);
  box-shadow:0 0 0 3px rgba(62,158,108,.15);
  outline:none;
}
textarea{resize:vertical; min-height:80px;}
.field{margin-bottom:18px;}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-700); margin-bottom:7px;}
.field .hint{font-weight:400; color:var(--ink-300); font-size:11px;}

/* ==========================================================================
   APP SHELL
   ========================================================================== */

#app{display:none; min-height:100vh;}
#app{display:grid; grid-template-columns:var(--sidebar-w) 1fr;}

.sidebar{
  background:linear-gradient(190deg, var(--forest-950), var(--forest-900) 65%);
  color:var(--paper-50);
  padding:22px 16px;
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar .brand-mark{display:flex; align-items:center; gap:12px; padding:6px 8px 22px;}
.brand-mark .glyph{
  width:38px;height:38px;border-radius:9px;
  background:linear-gradient(155deg, var(--gold-300), var(--gold-600));
  display:flex;align-items:center;justify-content:center;
  color:var(--forest-950); flex:none;
  box-shadow:0 6px 18px -6px rgba(201,162,75,.6);
}
.brand-word{font-family:var(--font-display); font-size:20px; letter-spacing:.02em; font-weight:700; color:var(--paper-50);}
.brand-word small{display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; color:var(--gold-300); font-weight:400; margin-top:2px;}

.nav-section-label{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(251,249,243,.38); padding:16px 12px 8px;
}
.nav-list{display:flex; flex-direction:column; gap:2px;}
.nav-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:9px;
  color:rgba(251,249,243,.72);
  cursor:pointer; font-size:13.5px; font-weight:500;
  border:none; background:transparent; width:100%; text-align:left;
  position:relative;
}
.nav-item svg{flex:none; opacity:.85;}
.nav-item:hover{background:rgba(251,249,243,.06); color:#fff;}
.nav-item.active{background:rgba(92,190,135,.14); color:#fff;}
.nav-item.active::before{
  content:""; position:absolute; left:-16px; top:50%; transform:translateY(-50%);
  width:3px; height:18px; border-radius:3px; background:var(--gold-300);
}

.sidebar-foot{margin-top:auto; padding-top:16px; border-top:1px solid rgba(251,249,243,.1);}
.user-chip{display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px;}
.avatar{
  width:34px;height:34px;border-radius:50%; flex:none;
  background:linear-gradient(155deg, var(--gold-300), var(--green-500));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; color:var(--forest-950); font-size:13px;
}
.user-chip .who{overflow:hidden;}
.user-chip .who b{display:block; font-size:13px; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.user-chip .who span{font-size:11px; color:rgba(251,249,243,.5);}
.proto-note{margin-top:10px; padding:9px 8px; font-size:11px; line-height:1.5; color:rgba(251,249,243,.42); font-family:var(--font-mono);}

.main{min-width:0; display:flex; flex-direction:column;}
.topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(251,249,243,.9); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--paper-200);
  padding:14px 28px; display:flex; align-items:center; gap:16px;
}
.menu-toggle{display:none;}
.search-wrap{position:relative; flex:1; max-width:420px;}
.search-wrap svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--ink-300);}
.search-wrap input{padding-left:36px; background:var(--paper-50);}
.topbar-actions{margin-left:auto; display:flex; align-items:center; gap:10px;}
.bell-btn{position:relative;}
.bell-dot{position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%; background:var(--brick-600); border:1.5px solid var(--paper-50);}

.view{padding:28px; display:none; flex:1; min-width:0;}
.view.active{display:block; animation:fadein .25s ease;}
@keyframes fadein{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}

.view-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:24px; flex-wrap:wrap;}
.view-head h1{font-size:26px; font-weight:600;}
.view-head .eyebrow{margin-bottom:8px; display:block;}
.view-head .desc{color:var(--ink-500); font-size:13.5px; margin-top:6px; display:block; max-width:520px;}
.view-head-actions{display:flex; gap:10px;}

.breadcrumb{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-500); margin-bottom:10px;}
.breadcrumb button{background:none; border:none; color:var(--ink-500); cursor:pointer; font-size:12.5px; padding:0; font-family:inherit;}
.breadcrumb button:hover{color:var(--forest-700); text-decoration:underline;}

/* ---- Ledger hero band (dashboard) ---- */
.ledger-hero{
  position:relative; overflow:hidden;
  border-radius:var(--radius-lg);
  background:linear-gradient(155deg, var(--forest-900), var(--forest-950) 75%);
  color:#fff; padding:32px 32px 30px; margin-bottom:22px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.ledger-hero::before{
  content:""; position:absolute; inset:0; opacity:.55;
  background-image:repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 32px);
}
.ledger-hero::after{
  content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(228,200,120,.16), transparent 70%);
}
.ledger-hero-text{position:relative; z-index:1; max-width:600px;}
.ledger-hero-text .eyebrow{color:var(--gold-300); margin-bottom:10px; display:inline-block;}
.ledger-hero-text h1{font-size:27px; line-height:1.22; color:#fff; font-weight:600;}
.ledger-hero-text .desc{display:block; margin-top:10px; color:rgba(251,249,243,.68); font-size:13.5px; line-height:1.6;}
.ledger-hero-actions{position:relative; z-index:1; display:flex; gap:10px; flex-wrap:wrap;}

/* ==========================================================================
   CARD PRIMITIVES
   ========================================================================== */

.card{
  background:var(--paper-50);
  border:1px solid var(--paper-200);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
}
.card-pad{padding:22px;}

.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px;}
.stat-card{padding:20px; display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden;}
.stat-card .stat-icon{
  width:36px;height:36px;border-radius:9px; display:flex;align-items:center;justify-content:center; flex:none;
}
.stat-card .stat-val{font-family:var(--font-display); font-size:30px; font-weight:600; line-height:1;}
.stat-card .stat-label{font-size:12.5px; color:var(--ink-500);}
.stat-card .stat-delta{font-size:11.5px; font-family:var(--font-mono); display:inline-flex; align-items:center; gap:4px; width:fit-content; padding:2px 8px; border-radius:20px;}
.delta-up{color:var(--ok-600); background:var(--ok-100);}
.delta-warn{color:var(--amber-600); background:var(--amber-100);}
.delta-flat{color:var(--ink-500); background:var(--paper-200);}

.tone-green .stat-icon{background:var(--ok-100); color:var(--forest-700);}
.tone-gold .stat-icon{background:var(--amber-100); color:var(--gold-600);}
.tone-forest .stat-icon{background:rgba(27,78,56,.1); color:var(--forest-700);}
.tone-brick .stat-icon{background:var(--brick-100); color:var(--brick-600);}

.dash-grid{display:grid; grid-template-columns:1.6fr 1fr; gap:20px; align-items:start;}
.section-title{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:12px; flex-wrap:wrap;}
.section-title h3{font-size:16px; display:flex; align-items:center; gap:8px;}
.section-title a, .section-title button.link{font-size:12.5px; color:var(--forest-700); font-weight:600; background:none; border:none; cursor:pointer; text-decoration:none; font-family:inherit;}
.section-title a:hover, .section-title button.link:hover{text-decoration:underline;}

.portfolio-total{font-family:var(--font-display); font-size:30px; font-weight:600; margin-bottom:4px; color:var(--forest-800);}
.alloc-track{height:6px; border-radius:6px; background:var(--paper-200); overflow:hidden;}
.alloc-fill{height:100%; background:linear-gradient(90deg,var(--green-500),var(--forest-700));}

/* ---- Dossier / property card (signature element) ---- */
.dossier-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px;}
.dossier{
  position:relative;
  background:var(--paper-50);
  border:1px solid var(--paper-200);
  border-radius:2px var(--radius-md) var(--radius-md) var(--radius-md);
  box-shadow:var(--shadow-card);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  overflow:hidden;
}
.dossier:hover{transform:translateY(-3px); box-shadow:0 24px 40px -20px rgba(15,35,25,.28);}
.dossier::before{
  /* folder tab */
  content:attr(data-tab);
  position:absolute; top:0; left:20px;
  background:var(--forest-800); color:var(--gold-300);
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 12px 4px; border-radius:0 0 6px 6px;
  box-shadow:0 3px 8px -3px rgba(0,0,0,.3);
  z-index:2;
}
.dossier-media{
  height:118px; margin-top:22px;
  background-size:cover; background-position:center;
  position:relative; display:flex; align-items:flex-end; padding:14px 16px;
}
.dossier-media-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,33,24,.15), rgba(10,33,24,.68));
}
.dossier-media .type-pill{
  position:relative; z-index:1;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(251,249,243,.2); color:#fff; padding:4px 9px; border-radius:20px; backdrop-filter:blur(2px);
}
.dossier-body{padding:16px 18px 18px;}
.folio-tag{display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; color:var(--ink-300); margin-bottom:6px;}
.dossier-body h4{font-size:15.5px; margin-bottom:4px; line-height:1.3;}
.dossier-body .addr{font-size:12.5px; color:var(--ink-500); display:flex; gap:6px; align-items:flex-start; margin-bottom:14px;}
.dossier-body .addr svg{flex:none; margin-top:2px; color:var(--ink-300);}
.dossier-meta{display:flex; align-items:center; justify-content:space-between; padding-top:12px; border-top:1px dashed var(--paper-200);}
.dossier-meta .m{text-align:left;}
.dossier-meta .m b{display:block; font-family:var(--font-mono); font-size:13px; color:var(--ink-900);}
.dossier-meta .m span{font-size:10.5px; color:var(--ink-300); text-transform:uppercase; letter-spacing:.05em;}

/* ---- Stamp badge (signature element) ---- */
.stamp{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 9px 4px 7px; border-radius:20px; border:1.5px solid currentColor;
  transform:rotate(-2deg);
}
.stamp svg{width:11px; height:11px;}
.stamp-verified{color:var(--ok-600); background:var(--ok-100);}
.stamp-pending{color:var(--amber-600); background:var(--amber-100);}
.stamp-expiring{color:var(--brick-600); background:var(--brick-100);}
.stamp-flat{color:var(--ink-500); background:var(--paper-200);}

/* ==========================================================================
   TABLE / LEDGER
   ========================================================================== */

.filter-bar{display:flex; align-items:center; gap:10px; margin-bottom:18px; flex-wrap:wrap;}
.filter-bar .search-wrap{max-width:280px;}
.chip-select{
  padding:9px 30px 9px 12px; border:1.5px solid var(--paper-200); border-radius:20px; background:var(--paper-50) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="%235B6E62" stroke-width="2"><path d="M3 5l4 4 4-4"/></svg>') no-repeat right 10px center;
  font-size:12.5px; appearance:none; color:var(--ink-700); cursor:pointer;
}

.ledger{width:100%; border-collapse:collapse; font-size:13.5px;}
.ledger thead th{
  text-align:left; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-500); padding:0 16px 10px; border-bottom:2px solid var(--forest-800); font-weight:500;
}
.ledger tbody tr{border-bottom:1px solid var(--paper-200); transition:background .12s ease;}
.ledger tbody tr:hover{background:var(--paper-100);}
.ledger tbody td{padding:14px 16px; vertical-align:middle; color:var(--ink-700);}
.ledger tbody tr:last-child{border-bottom:none;}
.cell-strong{color:var(--ink-900); font-weight:600;}
.cell-mono{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-500);}
.cell-actions{display:flex; gap:4px; justify-content:flex-end;}
.name-cell{display:flex; align-items:center; gap:10px;}
.mini-avatar{width:32px;height:32px;border-radius:50%; flex:none; background:var(--paper-200); display:flex;align-items:center;justify-content:center; font-family:var(--font-display); font-weight:600; font-size:12px; color:var(--forest-700);}
.file-icon{width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex:none;}

.badge{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:20px;}
.badge-ok{background:var(--ok-100); color:var(--ok-600);}
.badge-warn{background:var(--amber-100); color:var(--amber-600);}
.badge-bad{background:var(--brick-100); color:var(--brick-600);}
.badge-flat{background:var(--paper-200); color:var(--ink-500);}
.badge svg{width:11px; height:11px;}

.table-card{padding:6px; overflow-x:auto; max-width:100%;}
.table-card .ledger{min-width:640px;}
.table-card thead th:first-child, .table-card tbody td:first-child{padding-left:22px;}
.table-card thead th:last-child, .table-card tbody td:last-child{padding-right:22px;}

/* ==========================================================================
   EMPTY STATES
   ========================================================================== */
.empty{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  padding:56px 24px; color:var(--ink-500);
}
.empty .glyph-wrap{width:52px;height:52px;border-radius:50%; background:var(--paper-200); display:flex;align-items:center;justify-content:center; color:var(--ink-300); margin-bottom:6px;}
.empty h4{color:var(--ink-700); font-size:15px;}
.empty p{font-size:13px; max-width:320px;}

/* ==========================================================================
   PROPERTY DETAILS
   ========================================================================== */

.detail-hero{
  border-radius:var(--radius-lg); overflow:hidden; position:relative;
  background:linear-gradient(160deg, var(--forest-800), var(--forest-950));
  color:#fff; padding:30px 30px 24px; margin-bottom:22px;
}
.detail-hero::before{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, transparent 1px 30px);
}
.detail-hero-top{position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap;}
.detail-hero h1{font-size:26px; color:#fff; margin-bottom:8px;}
.detail-hero .addr-line{display:flex; align-items:center; gap:8px; color:rgba(251,249,243,.7); font-size:13.5px;}
.detail-kpis{position:relative; z-index:1; display:flex; gap:28px; margin-top:22px; flex-wrap:wrap;}
.detail-kpis div span{display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(251,249,243,.5); margin-bottom:4px;}
.detail-kpis div b{font-family:var(--font-display); font-size:19px; color:#fff; font-weight:600;}

/* ---- Photo gallery / carousel ---- */
.gallery-card{margin-bottom:22px;}
.gallery-stage{
  position:relative; border-radius:var(--radius-md); overflow:hidden;
  background:var(--forest-950); aspect-ratio:16/8; max-height:420px;
}
.gallery-img{width:100%; height:100%; object-fit:cover; display:block;}
.gallery-badge{
  position:absolute; left:14px; bottom:14px;
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(10,25,18,.62); backdrop-filter:blur(3px); color:#fff;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
  padding:6px 11px; border-radius:20px;
}
.gallery-ref-note{
  position:absolute; right:14px; top:14px;
  background:rgba(10,25,18,.5); color:rgba(251,249,243,.85);
  font-size:10.5px; font-family:var(--font-mono); letter-spacing:.03em;
  padding:5px 10px; border-radius:20px;
}
.gallery-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(251,249,243,.9); color:var(--forest-900);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.4);
  transition:background .12s ease, transform .12s ease;
}
.gallery-nav:hover{background:#fff; transform:translateY(-50%) scale(1.06);}
.gallery-nav.prev{left:14px;}
.gallery-nav.next{right:14px;}
.gallery-thumbs{display:flex; gap:10px; margin-top:12px; overflow-x:auto; padding-bottom:2px;}
.gallery-thumb{
  flex:none; width:104px; border-radius:8px; overflow:hidden; border:2px solid transparent;
  background:none; cursor:pointer; padding:0; position:relative;
}
.gallery-thumb img{width:100%; height:64px; object-fit:cover; display:block;}
.gallery-thumb span{
  position:absolute; bottom:0; left:0; right:0; padding:3px 6px;
  font-size:9.5px; font-family:var(--font-mono); letter-spacing:.03em;
  background:linear-gradient(0deg, rgba(10,25,18,.75), transparent); color:#fff; text-align:left;
}
.gallery-thumb.active{border-color:var(--gold-500);}
.gallery-thumb:hover{border-color:var(--green-500);}

.tabs{display:flex; gap:4px; border-bottom:1px solid var(--paper-200); margin-bottom:20px; overflow-x:auto;}
.tab-btn{
  padding:11px 16px; background:none; border:none; cursor:pointer; font-size:13.5px; font-weight:600;
  color:var(--ink-500); border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap;
}
.tab-btn:hover{color:var(--ink-900);}
.tab-btn.active{color:var(--forest-700); border-bottom-color:var(--green-500);}
.tab-panel{display:none;}
.tab-panel.active{display:block; animation:fadein .2s ease;}

.info-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:22px;}
.info-item{padding:16px 18px;}
.info-item span{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-300); font-family:var(--font-mono); margin-bottom:6px;}
.info-item b{font-size:14px; color:var(--ink-900); font-weight:600;}
.info-item p{font-size:13px; color:var(--ink-700); line-height:1.55;}

/* ==========================================================================
   MODALS
   ========================================================================== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(10,25,18,.55); backdrop-filter:blur(2px);
  display:none; align-items:center; justify-content:center; z-index:100; padding:24px;
}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--paper-50); border-radius:var(--radius-lg); box-shadow:var(--shadow-pop);
  width:100%; max-width:560px; max-height:90vh; overflow-y:auto; animation:modalIn .18s ease;
}
.modal.modal-lg{max-width:760px;}
@keyframes modalIn{from{opacity:0; transform:translateY(10px) scale(.98);} to{opacity:1; transform:none;}}
.modal-head{display:flex; align-items:flex-start; justify-content:space-between; padding:22px 24px 0; gap:12px;}
.modal-head h3{font-size:19px;}
.modal-head p{color:var(--ink-500); font-size:12.5px; margin-top:5px;}
.modal-body{padding:20px 24px;}
.modal-foot{display:flex; justify-content:flex-end; gap:10px; padding:16px 24px 24px; flex-wrap:wrap;}
.close-x{background:none; border:none; cursor:pointer; color:var(--ink-300); padding:4px; border-radius:6px; flex:none;}
.close-x:hover{color:var(--ink-900); background:var(--paper-200);}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 14px;}
.form-grid .field.full{grid-column:1/-1;}

.upload-drop{
  border:1.5px dashed var(--paper-200); border-radius:var(--radius-md); padding:22px;
  text-align:center; color:var(--ink-500); font-size:12.5px; background:var(--paper-100);
}
.upload-drop svg{color:var(--ink-300); margin-bottom:8px;}
.upload-drop b{color:var(--forest-700);}

/* toast — clamped so it can never sit past the visual viewport edge */
.toast-wrap{
  position:fixed; z-index:200;
  bottom:max(18px, env(safe-area-inset-bottom));
  right:18px; left:auto;
  width:min(320px, calc(100vw - 36px));
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.toast{
  background:var(--forest-950); color:#fff; padding:13px 16px; border-radius:10px; font-size:13px;
  display:flex; align-items:center; gap:10px; box-shadow:var(--shadow-pop);
  width:100%; box-sizing:border-box;
  animation:toastIn .2s ease;
}
.toast svg{color:var(--green-400); flex:none;}
.toast.warn svg{color:var(--gold-300);}
@keyframes toastIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

/* ==========================================================================
   REMINDER TIMELINE
   ========================================================================== */
.reminder-list{display:flex; flex-direction:column;}
.reminder-row{display:flex; gap:14px; padding:16px 4px; border-bottom:1px solid var(--paper-200);}
.reminder-row:last-child{border-bottom:none;}
.reminder-dot{width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none;}
.reminder-content{flex:1; min-width:0;}
.reminder-content .top-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:3px;}
.reminder-content h4{font-size:13.5px; font-weight:600;}
.reminder-content .meta{font-size:12px; color:var(--ink-500);}
.reminder-content .date{font-family:var(--font-mono); font-size:11px; color:var(--ink-300); white-space:nowrap;}

/* misc small */
.pill-row{display:flex; gap:8px; flex-wrap:wrap;}
.divider{height:1px; background:var(--paper-200); margin:20px 0;}
.muted{color:var(--ink-500);}
.text-right{text-align:right;}
.flex-between{display:flex; align-items:center; justify-content:space-between;}
.gap-8{gap:8px;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .dash-grid{grid-template-columns:1fr;}
  .info-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:860px){
  #app{grid-template-columns:1fr;}
  .sidebar{
    position:fixed; left:0; top:0; z-index:90; width:250px; height:100vh;
    transform:translateX(-100%); transition:transform .2s ease; box-shadow:var(--shadow-pop);
  }
  .sidebar.open{transform:translateX(0);}
  .menu-toggle{display:inline-flex;}
  .form-grid{grid-template-columns:1fr;}
  .gallery-stage{aspect-ratio:4/3; max-height:320px;}
}
@media (max-width:640px){
  .stat-grid{grid-template-columns:1fr 1fr;}
  .view{padding:18px;}
  .topbar{padding:12px 16px;}
  .search-wrap{display:none;}
  .info-grid{grid-template-columns:1fr;}
  .detail-kpis{gap:18px;}
  .ledger-hero{padding:24px 20px;}
  .toast-wrap{right:12px; left:12px; width:auto; align-items:stretch;}
  .gallery-nav{width:32px; height:32px;}
}