/*
 * AUTORUN OJC / Finance KPI Portal
 * Trusted Accountants-inspired visual treatment, v2
 * Palette: graphite, soft stone, muted champagne/nude yellow.
 * Open Sans is applied across every control and heading.
 * Non-functional styling layer; existing JS/Supabase workflows remain intact.
 */
:root {
  --navy: #1d1d1d;
  --navy2: #2c2b29;
  --ink: #262626;
  --muted: #83817e;
  --line: #e9e6e0;
  --canvas: #f7f6f3;
  --white: #fff;
  --blue: #a37d39;
  --blue-lite: #f5eddb;
  --mint: #59775b;
  --mint-lite: #edf4e9;
  --amber: #956a2a;
  --amber-lite: #faf1dc;
  --red: #a94e4b;
  --red-lite: #fff0ec;
  --champagne: #e7d4a4;
  --gold: #d9b86c;
  --gold-deep: #a88041;
  --surface-warm: #fbfaf7;
  --shadow: 0 9px 32px rgba(31,27,22,.035);
}
html, body, button, input, textarea, select { font-family: 'Open Sans', Arial, sans-serif; }
html,body { color: var(--ink); background: var(--canvas); font-size: 14px; }
h1,h2,h3,h4,.brand strong,.brand small,.brand-mark,.hero-circle-inner strong,
.stat-card strong,.mini-figure,.mini-figure small,.login-brand strong {font-family:'Open Sans',Arial,sans-serif;}
h1 { font-size:31px; font-weight:760; letter-spacing:-1.25px; line-height:1.3; }
h2 { font-weight:750; letter-spacing:-.7px; }
h3 { font-weight:750; }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible { outline:3px solid #c6a45c; outline-offset:3px; }
::selection{background:#ead49c;color:#1a1a1a}

/* Sidebar: deep graphite, thin brass detailing */
.app-shell{grid-template-columns:263px minmax(0,1fr)}
.sidebar {background:#1c1c1c;color:#bbb9b6;padding:31px 18px 23px;border-right:1px solid #33302a;}
.brand {padding:0 9px 31px;gap:12px;border-bottom:1px solid rgba(255,255,255,.075);margin-bottom:12px;}
.brand-mark {width:45px;height:45px;border-radius:12px;background:linear-gradient(135deg,#eddfb9,#cfb06b);color:#21201d;box-shadow:0 0 0 1px rgba(255,255,255,.09),0 8px 25px rgba(0,0,0,.2);font-size:17px;font-weight:800;letter-spacing:-1px;}
.brand strong {font-size:16px;font-weight:800;letter-spacing:1.35px;color:#fff;font-family:'Open Sans',sans-serif;}
.brand small {color:#c7aa70;font-size:9px;letter-spacing:1.7px;font-weight:700;margin-top:4px;font-family:'Open Sans',sans-serif;}
.nav-label{color:#837e74;font-size:10px;letter-spacing:2.1px;padding:20px 17px 10px;}
.nav-btn{color:#aaa8a3;border-radius:10px;padding:13px 16px;gap:14px;font-weight:650;margin:4px 0;transition:background .15s ease,color .15s ease;}
.nav-btn:hover{background:#292824;color:#f7e9c2;}
.nav-btn.active{background:#e7d4a4;color:#23211d;box-shadow:none;}
.nav-btn.active .nav-icon{color:#23211d;}
.nav-icon {font-size:17px;opacity:.95;}
.side-help{background:linear-gradient(135deg,#2f2b23,#242321);border-color:#4d4434;border-radius:14px;padding:20px 17px;}
.side-help:before{content:'✦';display:inline-grid;place-items:center;width:29px;height:29px;border:1px solid #776545;border-radius:9px;color:#e1c58b;font-size:13px;margin-bottom:13px;}
.side-help strong{font-size:12px;font-weight:750;color:#eee5d3;}
.side-help p{color:#b3aaa0;font-size:11px;line-height:1.8;}
.side-person{border-top-color:#393733;padding:17px 5px 0;}
.side-person strong{color:#f3f0e9;font-weight:700;}
.side-person small{color:#a09b93;}
.avatar{background:#eee4ca;color:#765a2c;border-radius:11px;font-weight:800;}
.avatar.on-dark{background:#4f483a;color:#efd6a1;}

/* Spacious and editorial top navigation / page */
.content-area{background:radial-gradient(ellipse at 100% 0%,rgba(231,212,164,.15),transparent 30%),#f7f6f3;}
.topbar{height:82px;background:rgba(255,255,255,.92);border-bottom:1px solid #eae8e2;padding:0 40px;}
.topbar-left{color:#aaa59c;font-size:12px;gap:13px;}
.topbar-left b{color:#292825;font-weight:750;}
.topbar-right{gap:12px;}
.today{color:#837f78;font-size:11px;}
.demo-pill{background:#f7ecce;color:#8a641d;border:1px solid #ead9a8;border-radius:7px;font-size:9px;padding:8px 10px;}
.role-tag{background:#f1eee6;color:#766345;border:1px solid #e8dec7;border-radius:7px;font-weight:750;font-size:10px;padding:9px 12px;letter-spacing:.5px;}
.top-mini-btn{color:#49443c;background:#faf9f7;border-color:#e4ded1;}
.demo-switch select{color:#403d37;border:1px solid #e4ded3;background:#fff;border-radius:8px;min-height:34px;}
.main{padding:40px 41px 72px;max-width:1510px;}
.page-heading{margin-bottom:27px;align-items:center;}
.page-heading h1{color:#292826;margin-bottom:8px;}
.eyebrow{color:#977432;font-size:10px;letter-spacing:2px;font-weight:800;margin-bottom:10px;}
.subtext{color:#85817b;font-size:12px;line-height:1.8;}

/* CTA styling */
.btn{background:#242424;color:#f8f5eb;border-radius:9px;min-height:41px;padding:11px 18px;font-size:11px;font-weight:750;box-shadow:0 4px 11px rgba(0,0,0,.075);transition:transform .15s ease,background .15s ease;}
.btn:hover{background:#3a352c;filter:none;transform:translateY(-1px);}
.btn-outline{background:#fff;color:#302b21;border:1px solid #ded5c3;box-shadow:none;}
.btn-outline:hover{background:#faf6ec;}
.btn-muted{background:#eeece7;color:#393630;box-shadow:none;}
.btn-danger{background:#ad5c56;color:#fff;}
.btn-success{background:#556c52;color:#fff;}
.btn-plain,.more-link{color:#866328;font-size:11px;font-weight:800;}
.btn-plain:hover,.more-link:hover{text-decoration:underline;}

/* Quiet luxury hero - champagne backdrop + ink completion disc */
.hero{border:1px solid #dfc98e;background:linear-gradient(112deg,#f4ead2 0%,#ecd9a9 58%,#d6b56c 100%);color:#25211a;min-height:214px;border-radius:19px;box-shadow:0 10px 28px rgba(126,102,56,.065);grid-template-columns:minmax(0,1.35fr) minmax(195px,.65fr);}
.hero:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(125deg,transparent,transparent 33px,rgba(255,255,255,.085) 34px,transparent 35px);pointer-events:none;}
.hero:after{width:330px;height:330px;right:-128px;top:-131px;border:50px solid rgba(255,255,255,.17);}
.hero-copy{padding:34px 38px;}
.hero .hero-kicker{font-size:10px;letter-spacing:2px;color:#705a33;font-weight:800;}
.hero h2{font-size:26px;letter-spacing:-1px;font-weight:800;color:#24211b;margin:12px 0 10px;}
.hero p{color:#675a42;font-size:12px;line-height:1.8;max-width:530px;}
.hero-side{padding:25px 32px 25px 15px;}
.hero-circle{width:145px;height:145px;background:conic-gradient(#2e2c27 var(--ring),rgba(255,255,255,.48) 0);box-shadow:0 7px 27px rgba(121,99,58,.13);}
.hero-circle:after{inset:13px;background:#f5e7c3;}
.hero-circle-inner strong{color:#302820;font-size:33px;font-weight:800;}
.hero-circle-inner small{color:#7d6e52;font-size:10px;}

/* Cards and dashboard panels */
.stat-grid{gap:17px;margin-bottom:24px;}
.stat-card{background:#fff;border:1px solid #ebe7df;border-radius:14px;padding:23px 23px 21px;box-shadow:var(--shadow);position:relative;transition:border-color .16s,transform .16s;}
.stat-card:hover{transform:translateY(-2px);border-color:#dbc9a3;}
.stat-label{font-size:11px;font-weight:750;color:#77736d;}
.stat-card strong{font-size:26px;letter-spacing:-1px;color:#242424;font-weight:800;margin:16px 0 8px;}
.stat-icon{background:#f5f0e4;color:#957039;border-radius:9px;font-size:15px;height:34px;width:34px;}
.stat-foot{color:#96908a;font-size:10px;}
.stat-card:nth-child(3){background:#2a2926;border-color:#2a2926;color:#fff;}
.stat-card:nth-child(3) .stat-label{color:#c8c3b9;}
.stat-card:nth-child(3) .stat-icon{background:#444033;color:#e6cb95;}
.stat-card:nth-child(3) strong{color:#f0d6a0;}
.stat-card:nth-child(3) .stat-foot{color:#bcb5a7;}
.panel{background:#fff;border:1px solid #eae7e0;border-radius:15px;box-shadow:var(--shadow);}
.panel-head{padding:23px 24px 19px;}
.panel-head h2{font-size:16px;color:#282724;font-weight:750;}
.panel-head p{color:#a29e97;font-size:11px;}
.section-grid{gap:19px;grid-template-columns:1.5fr 1fr;}
.overview-row,.list-mini-row{border-color:#eeece6;}
.overview-row{padding:17px 0;}
.overview-row:hover{background:linear-gradient(90deg,transparent,#fcfaf5 55%,transparent);}
.item-title{color:#302e29;font-size:12px;font-weight:750;}
.item-sub,.mini-desc{color:#99948c;}
.overview-reward strong,.mini-figure{color:#454035;font-weight:800;}
.mini-title{font-weight:750;}
.callout{background:#faf6eb;border:1px solid #ecdfc6;color:#796b51;border-left:3px solid #c5a66b;border-radius:9px;line-height:1.8;}

/* KPI lists, progress bars and badges */
.filters{gap:10px;}
.filter-group{background:#f3f1ec;border-radius:9px;}
.filter-btn{color:#858078;font-weight:750;}
.filter-btn.active{background:#fff;color:#63502a;box-shadow:0 2px 8px rgba(74,57,26,.08);}
.search{border-color:#e4dfd7;border-radius:8px;background:#fff;}
.search span{color:#b8a47c;}
.search input{color:#37332e;}
.data-table th{background:#faf9f5;border-color:#edeae3;color:#969085;font-size:10px;}
.data-table td{border-bottom:1px solid #efede9;color:#706b64;}
.data-table tr:hover td{background:#fcfaf6;}
.person{color:#3d3932;}
.money{color:#3b3323;}
.status.assigned{background:#f2f0eb;color:#7d7770;}
.status.draft{background:#f2eee6;color:#866b44;}
.status.submitted{background:#fff0cf;color:#9a6c1d;}
.status.changes_requested{background:#fff0e4;color:#a66b30;}
.status.approved{background:#edf4e9;color:#517251;}
.status.rejected{background:#fdecea;color:#a94e4b;}
.progress-rail{background:#eeece5;}
.progress-fill{background:linear-gradient(90deg,#b28e4f,#e0c37f);}

/* Details, dialogs, audit trail */
.modal-backdrop{background:rgba(18,17,15,.62);}
.modal{border:1px solid #e3d9c6;border-radius:17px;box-shadow:0 26px 90px rgba(23,21,18,.23);}
.modal-top{border-color:#eeece7;}
.modal-top h2{color:#252522;}
.modal-top p{color:#9c968d;}
.close{background:#f1eee7;color:#736b5e;}
.modal-footer{border-color:#ece8e0;}
.field label{color:#554f46;font-weight:750;}
.field label small{color:#9d9485;}
.field input,.field select,.field textarea{color:#332f28;border:1px solid #e0dbd1;border-radius:9px;background:#fff;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#bb9959;box-shadow:0 0 0 3px #f4e8ce;}
.detail-tile{background:#fbfaf6;border-color:#ece6db;}
.detail-tile small{color:#989082;}
.detail-tile strong{color:#463d2d;}
.detail-section-title{color:#8b7047;}
.report-box{background:#fbfaf6;border-color:#e7e0d3;color:#554e44;}
.notice{background:#fff8e8;color:#896a3d;border-color:#efdfbb;}
.notice.success{background:#eef5ec;color:#4b744e;border-color:#dce8d6;}
.evidence-link{color:#916c33;}
.activity li{border-color:#e3dacc;color:#777066;}
.activity li:before{background:#c4a469;box-shadow:0 0 0 1px #e4d7bb;}
.activity li strong{color:#433d32;}
.toast{background:#282722;color:#fff8ed;border:1px solid #4f493f;box-shadow:0 12px 30px rgba(0,0,0,.15);}
.toast.error{background:#9d4a46;border-color:#9d4a46;}

/* Login experience */
.login-page{background:radial-gradient(circle at 83% 10%,rgba(213,175,94,.2),transparent 35%),linear-gradient(120deg,#181818,#2b2925);}
.login-page:before{content:'';width:450px;height:450px;border:76px solid rgba(235,206,145,.05);border-radius:50%;position:fixed;right:-200px;bottom:-200px;pointer-events:none;}
.login-card{border-radius:17px;border:1px solid #e4d9c4;box-shadow:0 28px 85px rgba(0,0,0,.25);}
.login-brand{padding-bottom:20px;border-bottom:1px solid #ece6da;margin-bottom:26px;}
.login-brand strong{color:#262420;font-weight:800;}
.login-brand small{color:#94763e;}
.login-card h1{color:#29251d;}
.login-hint{color:#8e8578;}
.small-footer{color:#aaa39a;letter-spacing:.1px;}

@media(max-width:1200px){.main{padding:32px 25px 60px}.topbar{padding:0 25px}.stat-card{padding:21px 17px}}
@media(max-width:940px){
  .app-shell{grid-template-columns:77px minmax(0,1fr)}
  .sidebar{padding:24px 10px;}
  .brand{padding:0 5px 22px;}
  .nav-btn{justify-content:center;padding:12px;}
  .side-person{justify-content:center;}
  .nav-btn.active{background:#e7d4a4;}
}
@media(max-width:600px){
  .app-shell{display:block;}
  .sidebar{height:auto;position:static;padding:10px 13px;gap:7px;border-right:none;border-bottom:1px solid #39352b;}
  .brand{padding:0;margin:0 auto 0 0;border:0;}
  .brand-mark{width:34px;height:34px;border-radius:9px;}
  .nav-btn{margin:0;padding:9px;}
  .topbar{height:auto;min-height:62px;padding:9px 16px;}
  .main{padding:24px 15px 50px;}
  h1{font-size:24px;}
  .page-heading{align-items:flex-start;gap:10px;}
  .page-heading .btn{padding:10px 12px;font-size:10px;}
  .hero{grid-template-columns:1fr;min-height:0;}
  .hero-copy{padding:25px;}
  .hero h2{font-size:22px;}
  .hero-side{display:none;}
  .stat-grid{gap:10px;}
  .stat-card{padding:16px 14px;}
  .stat-card strong{font-size:22px;}
  .panel-head,.filters{padding-left:16px;padding-right:16px;}
  .section-grid{grid-template-columns:1fr;}
  .overview-rows{padding:0 15px 15px;}
  .demo-switch select{max-width:205px;}
  .role-tag{display:none;}
  .topbar-right{gap:5px;}
}
@media(prefers-reduced-motion:reduce){.btn,.stat-card,.nav-btn{transition:none}.btn:hover,.stat-card:hover{transform:none}}

/* Keep the primary action legible on compact phone screens. */
@media(max-width:600px){
  .page-heading{flex-wrap:wrap;}
  .page-heading > div{flex:1 1 100%;}
  .page-heading .btn{min-width:125px;white-space:nowrap;flex:0 0 auto;}
}