/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'DM Sans',sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}
:root{
  --bg:#f7f6f2;
  --bg-card:#ffffff;
  --bg-sidebar:#0f1117;
  --accent:#2d6a4f;
  --accent-light:#e8f5ee;
  --accent-hover:#245a41;
  --amber:#b45309;
  --amber-bg:#fef3c7;
  --red:#991b1b;
  --red-bg:#fee2e2;
  --green:#166534;
  --green-bg:#dcfce7;
  --text:#1a1a1a;
  --text-muted:#6b7280;
  --text-light:#9ca3af;
  --border:#e5e7eb;
  --border-strong:#d1d5db;
  --radius:10px;
  --radius-sm:6px;
  --shadow:0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:0 4px 12px rgba(0,0,0,0.1);
}

/* ── App Shell ── */
.app{height:100vh;overflow:hidden}

/* ── Login ── */
.login-screen{
  display:flex;align-items:center;justify-content:center;
  height:100vh;background:var(--bg);position:relative;overflow:hidden;
}
.login-bg{
  position:absolute;inset:0;
  background:linear-gradient(135deg,#0f1117 0%,#1a2a1f 50%,#0f1117 100%);
  clip-path:polygon(60% 0,100% 0,100% 100%,40% 100%);
}
.login-box{
  position:relative;z-index:2;background:white;border-radius:16px;
  padding:40px;width:400px;box-shadow:var(--shadow-md);
}
.login-logo{font-family:'DM Serif Display',serif;font-size:28px;color:#0f1117;margin-bottom:4px}
.login-logo span{color:var(--accent)}
.login-tagline{color:var(--text-muted);font-size:13px;margin-bottom:28px}
.login-form{display:flex;flex-direction:column;gap:14px}
.login-error{color:var(--red);font-size:12px;min-height:16px}
.login-hint{text-align:center;font-size:12px;color:var(--text-light);padding-top:4px}

/* ── Fields ── */
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:12px;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.4px}
.field input,.field select{
  padding:9px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  font-size:14px;font-family:inherit;color:var(--text);background:white;
  transition:border-color 0.15s;outline:none;
}
.field input:focus,.field select:focus{border-color:var(--accent)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field-hint{font-weight:400;color:var(--text-light);font-size:11px;text-transform:none;letter-spacing:0}

/* ── Buttons ── */
.btn-primary{
  padding:9px 18px;background:var(--accent);color:white;border:none;
  border-radius:var(--radius-sm);font-size:13px;font-weight:500;
  font-family:inherit;cursor:pointer;transition:background 0.15s;white-space:nowrap;
}
.btn-primary:hover{background:var(--accent-hover)}
.btn-primary.full{width:100%;padding:11px}
.btn-outline{
  padding:9px 18px;background:white;color:var(--text);
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;transition:all 0.15s;
}
.btn-outline:hover{background:var(--bg);border-color:var(--border-strong)}
.btn-outline.small{padding:5px 12px;font-size:12px}
.btn-danger{
  padding:5px 12px;background:var(--red-bg);color:var(--red);
  border:1px solid #fca5a5;border-radius:var(--radius-sm);
  font-size:12px;font-family:inherit;cursor:pointer;
}
.btn-icon{
  padding:5px 10px;background:transparent;color:var(--text-muted);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  font-size:12px;font-family:inherit;cursor:pointer;
}
.btn-icon:hover{background:var(--bg)}
.btn-logout{
  width:100%;padding:7px;background:transparent;color:#6b7280;
  border:1px solid #2d3748;border-radius:var(--radius-sm);
  font-size:12px;font-family:inherit;cursor:pointer;margin-top:10px;
  transition:all 0.15s;
}
.btn-logout:hover{background:#1a2030;color:white}

/* ── Main App Layout ── */
.main-app{display:flex;height:100vh;overflow:hidden}

/* ── Sidebar ── */
.sidebar{
  width:210px;min-width:210px;background:var(--bg-sidebar);
  display:flex;flex-direction:column;padding:0;overflow:hidden;
}
.sidebar-logo{
  font-family:'DM Serif Display',serif;font-size:22px;color:white;
  padding:22px 20px 18px;border-bottom:1px solid #1e2430;
}
.sidebar-logo span{color:#4ade80}
.sidebar-nav{display:flex;flex-direction:column;padding:12px 10px;gap:2px;flex:1}
.nav-link{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  color:#9ca3af;text-decoration:none;border-radius:var(--radius-sm);
  font-size:13px;font-weight:400;cursor:pointer;
  transition:all 0.15s;border:none;background:transparent;
}
.nav-link:hover{background:#1e2430;color:white}
.nav-link.active{background:#1a2e24;color:#4ade80;font-weight:500}
.nav-link svg{opacity:0.7;flex-shrink:0}
.nav-link.active svg{opacity:1}
.sidebar-footer{padding:16px;border-top:1px solid #1e2430;margin-top:auto}
.user-info{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.user-avatar{
  width:32px;height:32px;border-radius:50%;background:var(--accent);
  color:white;font-size:12px;font-weight:600;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.user-name{font-size:13px;font-weight:500;color:white}
.user-role{font-size:11px;color:#6b7280}

/* ── Content Area ── */
.content{flex:1;background:var(--bg);overflow-y:auto;padding:28px 32px}
.page{display:none}
.page.active{display:block}

/* ── Page Header ── */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;gap:16px}
.page-title{font-family:'DM Serif Display',serif;font-size:26px;color:var(--text);margin-bottom:2px}
.page-subtitle{font-size:13px;color:var(--text-muted)}
.header-date{font-size:12px;color:var(--text-muted);text-align:right;margin-top:4px;white-space:nowrap}

/* ── Metrics Grid ── */
.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.metrics-grid.three{grid-template-columns:repeat(3,1fr)}
.metric-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow);
}
.metric-label{font-size:11px;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px}
.metric-value{font-size:24px;font-weight:600;color:var(--text);line-height:1}
.metric-sub{font-size:11px;color:var(--text-light);margin-top:5px}
.metric-card.good .metric-value{color:var(--green)}
.metric-card.warn .metric-value{color:var(--amber)}
.metric-card.danger .metric-value{color:var(--red)}

/* ── Cards ── */
.card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:16px;
}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.card-header h3{font-size:14px;font-weight:600;color:var(--text)}
.card-badge{
  background:var(--amber-bg);color:var(--amber);
  font-size:11px;font-weight:500;padding:2px 8px;border-radius:20px;
}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ── Tables ── */
.table-wrap{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table th{
  padding:8px 12px;text-align:left;font-size:11px;font-weight:500;
  color:var(--text-muted);text-transform:uppercase;letter-spacing:0.4px;
  border-bottom:1px solid var(--border);white-space:nowrap;
}
.data-table td{padding:12px 12px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text)}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table tbody tr:hover{background:#fafaf9}
.td-primary{font-weight:500}
.td-muted{font-size:12px;color:var(--text-muted)}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500}
.badge.green{background:var(--green-bg);color:var(--green)}
.badge.amber{background:var(--amber-bg);color:var(--amber)}
.badge.red{background:var(--red-bg);color:var(--red)}
.badge.grey{background:#f3f4f6;color:#6b7280}

/* ── Progress Bar ── */
.days-bar{height:5px;background:#f3f4f6;border-radius:3px;margin-top:4px;overflow:hidden;width:100px}
.days-fill{height:100%;border-radius:3px;transition:width 0.3s}
.days-fill.green{background:#22c55e}
.days-fill.amber{background:#f59e0b}
.days-fill.red{background:#ef4444}

/* ── Alert List ── */
.alert-row{
  display:flex;align-items:center;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--border);font-size:13px;
}
.alert-row:last-child{border-bottom:none}
.alert-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dot-red{background:#ef4444}
.dot-amber{background:#f59e0b}
.dot-green{background:#22c55e}
.alert-text{flex:1}
.alert-title{font-weight:500;color:var(--text)}
.alert-sub{font-size:11px;color:var(--text-muted);margin-top:1px}
.alert-action{
  padding:4px 10px;font-size:11px;background:var(--bg);
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  cursor:pointer;font-family:inherit;color:var(--text);white-space:nowrap;
}
.alert-action:hover{background:var(--border)}

/* ── Snapshot List ── */
.snapshot-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px}
.snapshot-row:last-child{border-bottom:none}
.snapshot-key{color:var(--text-muted)}
.snapshot-val{font-weight:500;color:var(--text)}

/* ── Property Cards ── */
.prop-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);margin-bottom:14px;
}
.prop-card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.prop-card-address{font-size:15px;font-weight:600;color:var(--text)}
.prop-card-type{font-size:12px;color:var(--text-muted);margin-top:2px}
.prop-card-actions{display:flex;gap:6px}
.prop-card-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.prop-metric{background:var(--bg);border-radius:var(--radius-sm);padding:10px 12px}
.prop-metric-label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.4px;margin-bottom:4px}
.prop-metric-value{font-size:16px;font-weight:600;color:var(--text)}
.prop-metric-value.green{color:var(--green)}
.prop-tenant-bar{
  margin-top:12px;padding-top:12px;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted);
}

/* ── Upload Zone ── */
.upload-zone{
  border:2px dashed var(--border-strong);border-radius:var(--radius);
  padding:32px;text-align:center;cursor:pointer;margin-bottom:16px;
  transition:all 0.2s;
}
.upload-zone:hover{border-color:var(--accent);background:var(--accent-light)}
.upload-icon{color:var(--text-muted);margin-bottom:10px;display:flex;justify-content:center}
.upload-zone:hover .upload-icon{color:var(--accent)}
.upload-text{font-weight:500;color:var(--text);margin-bottom:4px;font-size:14px}
.upload-sub{font-size:12px;color:var(--text-muted)}

/* ── Doc filter ── */
.doc-filter-row{display:flex;gap:10px;margin-bottom:14px}
.filter-select{padding:7px 10px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);font-size:13px;font-family:inherit;color:var(--text);background:white;cursor:pointer}

/* ── Doc Grid ── */
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.doc-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px;cursor:pointer;transition:all 0.15s;
}
.doc-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md)}
.doc-icon{font-size:26px;margin-bottom:8px}
.doc-name{font-size:13px;font-weight:500;color:var(--text);margin-bottom:4px;line-height:1.3}
.doc-prop{font-size:11px;color:var(--text-muted)}
.doc-date{font-size:11px;color:var(--text-light)}
.doc-type-tag{display:inline-block;margin-top:6px;padding:2px 7px;background:var(--bg);border-radius:20px;font-size:10px;color:var(--text-muted)}

/* ── Calculator ── */
.calc-form{display:flex;flex-direction:column;gap:14px}
.calc-results{height:fit-content}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.result-item{background:var(--bg);border-radius:var(--radius-sm);padding:12px 14px}
.result-item.good .result-value{color:var(--green)}
.result-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.4px;margin-bottom:6px}
.result-value{font-size:20px;font-weight:600;color:var(--text)}
.verdict-box{padding:4px 0;font-size:13px;line-height:1.7;color:var(--text-muted)}
.verdict-box strong{color:var(--text)}

/* ── Modals ── */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,0.45);
  display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;
}
.modal{
  background:white;border-radius:12px;width:100%;max-width:480px;
  box-shadow:0 20px 60px rgba(0,0,0,0.2);
}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid var(--border);
}
.modal-header h3{font-size:15px;font-weight:600}
.modal-close{background:none;border:none;font-size:18px;cursor:pointer;color:var(--text-muted);padding:2px 6px;border-radius:4px}
.modal-close:hover{background:var(--bg);color:var(--text)}
.modal-body{padding:20px;display:flex;flex-direction:column;gap:14px}
.modal-footer{padding:16px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}

/* ── Toast ── */
.toast{
  position:fixed;bottom:24px;right:24px;background:#1a1a1a;color:white;
  padding:10px 18px;border-radius:var(--radius-sm);font-size:13px;
  opacity:0;transform:translateY(8px);transition:all 0.25s;pointer-events:none;z-index:2000;
}
.toast.show{opacity:1;transform:translateY(0)}

/* ── Empty states ── */
.empty-state{text-align:center;padding:32px 20px;color:var(--text-muted);font-size:13px}
.empty-state-icon{font-size:32px;margin-bottom:10px}

/* ── Responsive ── */
@media(max-width:900px){
  .metrics-grid{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr}
  .prop-card-metrics{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .sidebar{width:180px;min-width:180px}
  .content{padding:16px}
  .metrics-grid{grid-template-columns:1fr 1fr}
}

/* ── Charts ── */
.chart-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.chart-bar-label{font-size:12px;color:var(--text-muted);width:120px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chart-bar-track{flex:1;background:#f3f4f6;border-radius:4px;height:28px;overflow:hidden}
.chart-bar-fill{height:100%;border-radius:4px;display:flex;align-items:center;transition:width 0.6s ease;min-width:80px}
.chart-bar-value{font-size:11px;font-weight:500;color:white;padding:0 8px;white-space:nowrap}
.chart-yield-badge{font-size:11px;font-weight:600;padding:3px 8px;border-radius:12px;white-space:nowrap;flex-shrink:0}
#value-donut{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.donut-legend{display:flex;flex-direction:column;gap:6px}
.donut-legend-item{display:flex;align-items:center;gap:6px}
.donut-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.donut-legend-text{font-size:11px;color:var(--text-muted)}
.traffic-item{display:flex;flex-direction:column;align-items:center;gap:8px}
.traffic-light{width:70px;height:70px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.traffic-label{font-size:12px;font-weight:500;text-align:center}
.traffic-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.prop-compliance-bar{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* ════════════════════════════════
   MOBILE — Samsung Note optimised
   ════════════════════════════════ */
@media(max-width:768px){

  /* Hide sidebar, use bottom nav instead */
  .sidebar{display:none}
  .content{padding:12px;padding-bottom:80px}
  .main-app{flex-direction:column}

  /* Bottom navigation bar */
  .mobile-nav{
    display:flex;position:fixed;bottom:0;left:0;right:0;
    background:var(--bg-sidebar);z-index:500;
    border-top:1px solid #1e2430;padding:4px 0 8px;
  }
  .mobile-nav-item{
    flex:1;display:flex;flex-direction:column;align-items:center;
    gap:3px;padding:6px 4px;cursor:pointer;color:#9ca3af;
    font-size:9px;font-weight:500;border:none;background:none;
    font-family:var(--font-sans);
  }
  .mobile-nav-item.active{color:#4ade80}
  .mobile-nav-item svg{width:20px;height:20px}

  /* Page header */
  .page-header{flex-direction:column;gap:8px;margin-bottom:16px}
  .page-title{font-size:20px}
  .header-date{font-size:11px;color:var(--text-muted)}

  /* Metrics — 2 column on mobile */
  .metrics-grid{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
  .metrics-grid.three{grid-template-columns:1fr 1fr 1fr}
  .metric-value{font-size:18px}
  .metric-card{padding:12px}

  /* Two col becomes one col */
  .two-col{grid-template-columns:1fr}

  /* Cards */
  .card{padding:14px;margin-bottom:12px}
  .card-header h3{font-size:13px}

  /* Tables — scrollable on mobile */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .data-table{min-width:480px;font-size:12px}
  .data-table th{font-size:10px;padding:6px 8px}
  .data-table td{padding:10px 8px}

  /* Property cards */
  .prop-card-metrics{grid-template-columns:1fr 1fr;gap:8px}
  .prop-card-address{font-size:14px}
  .prop-metric-value{font-size:15px}
  .prop-card-actions{gap:4px}
  .btn-icon{padding:4px 8px;font-size:11px}
  .btn-danger{padding:4px 8px;font-size:11px}

  /* Charts */
  .chart-bar-label{width:90px;font-size:11px}
  .chart-bar-fill{min-width:60px}
  .chart-bar-value{font-size:10px}
  #value-donut{flex-direction:column;align-items:flex-start}

  /* Traffic lights — bigger on mobile for easy reading */
  .traffic-light{width:80px;height:80px}
  #traffic-lights{gap:12px;padding:8px 0}

  /* Doc grid — 2 col on mobile */
  .doc-grid{grid-template-columns:1fr 1fr}
  .doc-name{font-size:11px}

  /* Alert rows */
  .alert-row{gap:8px;padding:8px 0}
  .alert-title{font-size:13px}
  .alert-sub{font-size:11px}

  /* Modals — full screen on mobile */
  .modal-backdrop{padding:0;align-items:flex-end}
  .modal{border-radius:16px 16px 0 0;max-width:100%;max-height:90vh;overflow-y:auto}

  /* Buttons */
  .btn-primary{padding:10px 16px;font-size:13px}
  .btn-outline{padding:10px 16px;font-size:13px}

  /* Upload zone */
  .upload-zone{padding:20px}

  /* Calculator */
  .result-grid{grid-template-columns:1fr 1fr}
  .result-value{font-size:17px}

  /* Login */
  .login-bg{clip-path:polygon(0 70%,100% 50%,100% 100%,0 100%)}
  .login-box{width:calc(100% - 32px);max-width:380px;padding:28px}

  /* Filter row */
  .doc-filter-row{flex-wrap:wrap}
  .filter-select{flex:1;min-width:140px}

  /* Compliance table on mobile — stack key info */
  .comp-row{grid-template-columns:1fr 80px}
}

/* Show mobile nav only on small screens */
.mobile-nav{display:none}
@media(max-width:768px){
  .mobile-nav{display:flex}
}

/* Touch-friendly tap targets */
@media(max-width:768px){
  .nav-link,.btn-primary,.btn-outline,.btn-icon,.btn-danger,.mobile-nav-item{
    min-height:40px;
  }
  input,select{min-height:44px;font-size:16px!important} /* prevents iOS zoom */
}