/* PLACES+ Concept 24 — Enterprise Construction UI
   Visual shell only. Existing IDs, APIs, data and backend remain untouched. */
:root{
  --c24-navy:#0b1f33;--c24-navy2:#102a43;--c24-navy3:#173b5f;
  --c24-ink:#172331;--c24-steel:#647487;--c24-line:#dce3e9;
  --c24-bg:#f1f3f5;--c24-surface:#fff;--c24-soft:#f7f8fa;
  --c24-green:#18794e;--c24-red:#b42318;--c24-amber:#9a6700;
  --c24-shadow:0 8px 28px rgba(11,31,51,.065);--c24-radius:16px;
  --brand:var(--c24-navy);--brand-2:var(--c24-navy2);--bg:var(--c24-bg);
  --surface:var(--c24-surface);--surface-2:var(--c24-soft);--text:var(--c24-ink);
  --muted:var(--c24-steel);--line:var(--c24-line);--success:var(--c24-green);
  --warning:var(--c24-amber);--danger:var(--c24-red);--shadow:var(--c24-shadow);
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html{background:var(--c24-bg)}
body{margin:0;background:var(--c24-bg);color:var(--c24-ink);font-family:"Segoe UI",Tahoma,Arial,sans-serif}
button,input,select,textarea{font-family:inherit}
button{transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .12s ease}
button:active{transform:translateY(1px)}

/* desktop shell */
.c24-sidebar{display:none}
.c24-top-tools{display:none}
.topbar{background:#fff;border-bottom:1px solid var(--c24-line);box-shadow:none;backdrop-filter:none}
.user-chip strong{color:var(--c24-navy)}
.user-chip small{color:var(--c24-steel)}
.ghost-btn{background:#fff;color:var(--c24-navy);border:1px solid var(--c24-line);border-radius:10px;box-shadow:none}
.ghost-btn:hover{background:#f8fafb;border-color:#b8c4ce}

.app-shell{width:min(1420px,100%);margin:0 auto;padding:24px}
.view{animation:c24Enter .18s ease}
@keyframes c24Enter{from{opacity:.35;transform:translateY(3px)}to{opacity:1;transform:none}}

/* dashboard hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--c24-navy),var(--c24-navy2));border:0;border-radius:18px;padding:25px 28px;box-shadow:0 16px 36px rgba(11,31,51,.14)}
.hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 0 46%,rgba(255,255,255,.04) 46% 47%,transparent 47% 100%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:auto,28px 28px,28px 28px}
.hero>*{position:relative;z-index:1}
.hero h1{margin:4px 0 9px;font-size:clamp(27px,3vw,38px);letter-spacing:-.6px}
.hero .eyebrow{color:#cbd5df;font-weight:700}
.connection-badge{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.08)}
.connection-badge.live{background:rgba(24,121,78,.23);color:#dcf7e9;border-color:rgba(124,216,170,.18)}
.balance-card{min-width:210px;text-align:right;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.11);border-radius:14px;padding:16px 18px}
.balance-card span{color:#cbd5df}
.balance-card strong{font-size:27px;letter-spacing:.1px}

/* KPI row */
.stats-grid{gap:12px;margin-top:14px}
.stat-card,.admin-overview-stats article,.insights-kpis article{position:relative;background:#fff;border:1px solid var(--c24-line);border-radius:14px;box-shadow:0 4px 14px rgba(11,31,51,.04)}
.stat-card{padding:17px 18px 18px;min-height:92px}
.stat-card:before,.admin-overview-stats article:before,.insights-kpis article:before{content:"";position:absolute;top:-1px;right:16px;width:38px;height:3px;border-radius:0 0 4px 4px;background:var(--c24-navy3)}
.stat-card span{color:var(--c24-steel);font-size:11px;font-weight:700}
.stat-card strong{color:var(--c24-navy);font-size:20px}

/* enterprise cards */
.panel,.form-card,.enterprise-card,#enterpriseView .panel{background:#fff;border:1px solid var(--c24-line)!important;border-radius:16px!important;box-shadow:var(--c24-shadow)!important}
.section-head{border-bottom:1px solid #edf0f2;padding-bottom:12px;margin-bottom:14px}
.section-head h2,.page-head h1{color:var(--c24-navy);font-weight:800;letter-spacing:-.25px}
.muted{color:var(--c24-steel)}
.page-head{margin-bottom:16px}

.quick-grid{gap:10px}
.quick-card{min-height:82px;padding:15px;border:1px solid var(--c24-line);border-radius:13px;box-shadow:0 4px 14px rgba(11,31,51,.035);background:#fff}
.quick-card:hover{border-color:#b7c3cd;box-shadow:0 8px 20px rgba(11,31,51,.07)}
.quick-card.primary{background:#f3f6f8!important;border-color:#cbd5dd!important;color:var(--c24-ink)!important}
.quick-icon{width:40px;height:40px;border-radius:10px;background:var(--c24-navy)!important;color:#fff!important}

.safe-summary-grid{gap:10px}
.safe-card,.workbook-card{background:#fff;border:1px solid var(--c24-line)!important;border-radius:13px!important;box-shadow:none!important}
.safe-card:hover,.workbook-card:hover{border-color:#aebac5!important;box-shadow:0 5px 16px rgba(11,31,51,.055)!important}
.workbook-card.selected,.safe-card.selected{border-color:var(--c24-navy3)!important;box-shadow:0 0 0 2px rgba(23,59,95,.08)!important}

.transaction-card,.review-card,.user-row,.audit-row,.enterprise-row{border:1px solid var(--c24-line)!important;border-radius:12px!important;background:#fff!important;box-shadow:none!important}
.transaction-card:hover,.review-card:hover{border-color:#bac5cf!important}
.status{border-radius:7px!important;font-weight:800}
.status.approved{background:#eaf5ef!important;color:var(--c24-green)!important}
.status.rejected{background:#faecea!important;color:var(--c24-red)!important}
.enterprise-row.warning{border-inline-start:3px solid #b7791f!important}
.enterprise-row.danger{border-inline-start:3px solid var(--c24-red)!important}
.enterprise-row.ok{border-inline-start:3px solid var(--c24-green)!important}

.form-grid input,.form-grid textarea,.filters input,.filters select,.compact-form input,.compact-form select,.admin-workbook-picker input,.admin-workbook-picker select,.settings-panel input,input[type="month"],input[type="search"],select{border-color:var(--c24-line)!important;border-radius:10px!important;background:#fff;min-height:43px}
input:focus,select:focus,textarea:focus{border-color:#8194a6!important;box-shadow:0 0 0 3px rgba(23,59,95,.10)!important;outline:none}
.submit-btn{border-radius:10px!important;min-height:44px;font-weight:800;background:var(--c24-navy)!important;border-color:var(--c24-navy)!important;box-shadow:0 5px 12px rgba(11,31,51,.12)}
.submit-btn.secondary{background:#fff!important;color:var(--c24-navy)!important;border:1px solid #b9c4ce!important;box-shadow:none}
.system-alert,.engineer-returned-alert{border-radius:10px;box-shadow:none}

/* login */
.login-screen,.boot-screen{background:var(--c24-bg)}
.login-card,.boot-card{border-radius:17px;border:1px solid var(--c24-line);box-shadow:0 20px 50px rgba(11,31,51,.12)}
.login-card{border-top:4px solid var(--c24-navy)!important}

/* mobile navigation */
.bottom-nav{background:rgba(255,255,255,.98);border-top:1px solid var(--c24-line);box-shadow:0 -5px 20px rgba(11,31,51,.055)}
.nav-item{color:#71808f;border-radius:10px}
.nav-item.active{color:var(--c24-navy);background:#edf2f6}
.nav-badge{background:var(--c24-red);box-shadow:0 0 0 2px #fff}

/* DESKTOP — Concept 2 shell + Concept 4 dashboard */
@media(min-width:1024px){
  body{padding-bottom:0;background:linear-gradient(rgba(11,31,51,.016) 1px,transparent 1px),linear-gradient(90deg,rgba(11,31,51,.016) 1px,transparent 1px),var(--c24-bg);background-size:34px 34px}
  #appRoot{min-height:100vh}
  .c24-sidebar{display:flex;position:fixed;z-index:90;left:0;top:0;bottom:0;width:236px;padding:22px 15px 18px;flex-direction:column;background:linear-gradient(180deg,#0b1f33 0%,#081827 100%);border-right:1px solid rgba(255,255,255,.05);box-shadow:8px 0 30px rgba(11,31,51,.09);direction:rtl}
  .c24-brand{padding:4px 11px 22px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:17px}
  .c24-brand img{display:block;width:150px;max-height:42px;object-fit:contain;filter:brightness(0) invert(1)}
  .c24-brand small{display:block;margin-top:8px;color:#7f94a8;font-size:10px;font-weight:700;letter-spacing:.15px}
  .c24-nav-label{padding:0 12px 7px;color:#62788d;font-size:9px;font-weight:800;letter-spacing:1.35px;text-transform:uppercase}
  .c24-side-nav{display:flex;flex-direction:column;gap:5px}
  .c24-side-item.nav-item{position:relative;width:100%;min-height:45px;display:flex;align-items:center;justify-content:flex-start;gap:11px;padding:10px 12px;color:#adbdca;background:transparent;border:0;border-radius:10px;text-align:right;cursor:pointer}
  .c24-side-item.nav-item svg{width:18px;height:18px;flex:0 0 18px;stroke:currentColor;fill:none;stroke-width:1.8}
  .c24-side-item.nav-item small{display:block;margin:0;font-size:12px;font-weight:700;line-height:1}
  .c24-side-item.nav-item.active{background:rgba(255,255,255,.10);color:#fff}
  .c24-side-item.nav-item.active:after{content:"";position:absolute;right:0;top:11px;bottom:11px;width:3px;border-radius:3px;background:#fff}
  .c24-side-item.nav-item:hover{background:rgba(255,255,255,.065);color:#fff}
  .c24-sidebar-foot{margin-top:auto;padding:15px 11px 3px;border-top:1px solid rgba(255,255,255,.08);color:#61788d;font-size:9px;line-height:1.55}

  .topbar{position:sticky;z-index:70;top:0;margin-left:236px;min-height:72px;padding:11px 28px;background:rgba(255,255,255,.96);box-shadow:0 2px 12px rgba(11,31,51,.03)}
  .places-top-brand{display:none!important}
  .c24-top-tools{display:flex;align-items:center;gap:12px;flex:1;max-width:680px;direction:rtl}
  .c24-page-title{min-width:150px}
  .c24-page-title strong{display:block;color:var(--c24-navy);font-size:16px}
  .c24-page-title small{display:block;color:var(--c24-steel);font-size:10px;margin-top:2px}
  .c24-search-wrap{position:relative;flex:1;max-width:380px}
  .c24-search-wrap svg{position:absolute;right:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;stroke:#8493a1;fill:none;stroke-width:2}
  #c24Search{width:100%;height:40px!important;min-height:40px!important;padding:0 40px 0 13px;border:1px solid var(--c24-line)!important;border-radius:10px!important;background:#f7f9fa!important;color:var(--c24-ink)}
  #c24Search::placeholder{color:#9aa6b1}
  .user-area{margin-right:auto;gap:10px}
  .user-chip{text-align:right;padding:0 4px}

  .app-shell{width:auto;max-width:none;margin:0 0 0 236px;padding:28px 34px 42px}
  .hero{min-height:154px;align-items:center}
  .stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .admin-overview-stats{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .safe-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bottom-nav{display:none!important}
  #homeView>.panel,#homeView>#adminSafesPanel{margin-top:16px}
  #enterpriseView .enterprise-grid,#enterpriseView .enterprise-kpi-grid,#enterpriseView .enterprise-cards,#enterpriseView .enterprise-layout{gap:12px!important}
}

/* TABLET */
@media(min-width:768px) and (max-width:1023px){
  .app-shell{width:min(980px,100%);padding:20px}
  .stats-grid{grid-template-columns:repeat(3,1fr)}
  .safe-summary-grid{grid-template-columns:repeat(2,1fr)}
}

/* MOBILE — dedicated field UI, not a shrunk desktop */
@media(max-width:767px){
  body{padding-bottom:84px;background:#f2f4f6}
  .c24-sidebar,.c24-top-tools{display:none!important}
  .topbar{min-height:61px;padding:9px 12px;background:#fff}
  .places-top-brand img{width:118px;max-height:31px}
  .places-top-brand .subbrand{display:none}
  .user-chip{display:none!important}
  .user-area .ghost-btn{padding:7px 9px;font-size:11px}
  .app-shell{width:100%;margin:0;padding:12px 11px 18px}
  .hero{border-radius:15px;padding:18px 16px;min-height:145px;align-items:stretch;box-shadow:0 10px 24px rgba(11,31,51,.13)}
  .hero h1{font-size:23px}
  .balance-card{min-width:135px;padding:11px 12px;align-self:flex-end}
  .balance-card strong{font-size:19px}
  .stats-grid{grid-template-columns:1fr 1fr;gap:8px}
  .stat-card{padding:13px;min-height:80px}
  .stat-card:last-child{grid-column:1/-1}
  .stat-card strong{font-size:16px}
  .panel,.form-card{padding:14px;border-radius:13px!important}
  .section-head{align-items:flex-start}
  .section-head h2{font-size:16px}
  .quick-grid{grid-template-columns:1fr 1fr;gap:8px}
  .quick-card{padding:12px;min-height:73px}
  .quick-card small{display:none}
  .quick-icon{width:36px;height:36px;font-size:20px}
  .safe-summary-grid{grid-template-columns:1fr}
  .admin-overview-stats{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .admin-overview-stats article{min-height:78px;padding:12px!important}
  .insights-kpis{grid-template-columns:1fr 1fr!important}
  .form-grid{grid-template-columns:1fr!important}
  .bottom-nav{display:flex;justify-content:space-around;gap:0;padding:7px 4px max(7px,env(safe-area-inset-bottom));overflow-x:auto}
  .bottom-nav .nav-item{flex:1 0 56px;width:auto;max-width:82px;padding:7px 3px}
  .bottom-nav .nav-item span{font-size:19px}
  .bottom-nav .nav-item small{font-size:9px}
  .bottom-nav .nav-item[data-go="expenseView"]{margin-top:-20px;min-width:58px;max-width:58px;height:58px;flex-basis:58px;border-radius:50%;background:var(--c24-navy);color:#fff;box-shadow:0 8px 18px rgba(11,31,51,.24);border:4px solid #f2f4f6}
  .bottom-nav .nav-item[data-go="expenseView"] small{display:none}
  .bottom-nav .nav-item[data-go="expenseView"] span{font-size:25px}
  .toast{bottom:88px}
}
@media(max-width:390px){.hero{flex-direction:column}.balance-card{width:100%;min-width:0}.quick-grid{grid-template-columns:1fr}.stats-grid,.admin-overview-stats,.insights-kpis{grid-template-columns:1fr 1fr!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Professional V1 polish — CLEAN branch only */
@media(min-width:1024px){
  .app-shell{padding-top:24px}
  #homeView{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(310px,.75fr);gap:16px;align-items:start}
  #homeView>.hero,#homeView>.stats-grid,#homeView>#adminSafesPanel{grid-column:1/-1}
  #homeView>.quick-grid{grid-column:2;grid-row:auto}
  #homeView>#insightsPanel{grid-column:1}
  #homeView>section.panel:last-of-type{grid-column:1/-1}
  .hero{padding:28px 30px}
  .panel,.form-card{padding:20px}
  .transactions-list,.review-list,.users-list,.audit-list{display:grid;gap:9px}
  #expenseView .form-card{max-width:1050px;margin-inline:auto}
  #engineerDetailView,#enterpriseView{max-width:1280px;margin-inline:auto}
}
@media(max-width:1023px){
  #homeView{display:block}
}
.c24-side-item.nav-item:focus-visible,.ghost-btn:focus-visible,.submit-btn:focus-visible,.quick-card:focus-visible{outline:3px solid rgba(54,115,168,.25);outline-offset:2px}
.transaction-card,.review-card,.user-row,.audit-row{transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
@media(hover:hover){.transaction-card:hover,.review-card:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(11,31,51,.055)!important}}