/* ==========================================================
   CivicLens Zambia - IWD Final Project
   External CSS file: css/style.css
   Purpose: Layout, colours, typography, responsiveness, and UI styling
   ========================================================== */

:root{
      --green:#047857; --green2:#065f46; --light:#ecfdf5; --slate:#0f172a;
      --muted:#64748b; --border:#dbe4ee; --card:#ffffff; --bg:#f8fafc;
      --red:#b91c1c; --amber:#b45309; --blue:#0369a1;
    }
    *{box-sizing:border-box}
    body{margin:0;font-family:Inter,Arial,sans-serif;background:radial-gradient(circle at top left,#d1fae5,transparent 32%),linear-gradient(135deg,#f8fafc,#fff7ed);color:var(--slate)}
    button,select,input,textarea{font:inherit}
    .hidden{display:none!important}
    .wrap{max-width:1180px;margin:0 auto;padding:24px}
    .login-screen{min-height:100vh;display:flex;align-items:center}
    .grid{display:grid;gap:22px}
    .grid2{grid-template-columns:1.05fr .95fr}
    .grid3{grid-template-columns:repeat(3,1fr)}
    .grid4{grid-template-columns:repeat(4,1fr)}
    .card{background:rgba(255,255,255,.88);border:1px solid var(--border);border-radius:28px;padding:24px;box-shadow:0 18px 45px rgba(15,23,42,.08);backdrop-filter:blur(8px)}
    .card.soft{background:#f8fafc}
    .hero-title{font-size:64px;line-height:.96;margin:14px 0 18px;font-weight:900;letter-spacing:-2px}
    .green{color:var(--green)}
    .muted{color:var(--muted)}
    .pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #bbf7d0;color:#065f46;border-radius:999px;padding:10px 14px;font-weight:800;font-size:13px}
    .btn{border:0;background:var(--green);color:white;border-radius:16px;padding:13px 18px;font-weight:900;cursor:pointer;box-shadow:0 10px 24px rgba(4,120,87,.2)}
    .btn:hover{background:var(--green2)}
    .btn.secondary{background:white;color:#334155;border:1px solid var(--border);box-shadow:none}
    .btn.red{background:#fee2e2;color:#991b1b;border:1px solid #fecaca;box-shadow:none}
    .btn.small{padding:9px 12px;border-radius:13px;font-size:13px}
    .option{border:1px solid var(--border);background:white;border-radius:22px;padding:16px;text-align:left;cursor:pointer}
    .option.active{background:#ecfdf5;border-color:#10b981;color:#064e3b}
    label{display:block;font-weight:900;font-size:13px;margin-bottom:8px}
    input,select,textarea{width:100%;border:1px solid var(--border);border-radius:16px;padding:12px 14px;background:white;outline:none}
    textarea{min-height:92px}
    .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
    .topbar{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.88);border-bottom:1px solid var(--border);backdrop-filter:blur(10px)}
    .topbar .inner{max-width:1180px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:14px}
    .brand{display:flex;align-items:center;gap:12px;font-weight:900}
    .logo{height:44px;width:44px;border-radius:16px;background:linear-gradient(135deg,#047857,#0f766e);color:white;display:grid;place-items:center;font-weight:900}
    nav{display:flex;gap:14px;flex-wrap:wrap}
    nav a{color:#475569;text-decoration:none;font-size:13px;font-weight:800}
    h1,h2,h3{margin-top:0}
    h2{font-size:36px;letter-spacing:-1px}
    section{padding:36px 0}
    .stat{background:#f1f5f9;border-radius:22px;padding:18px}
    .stat .num{font-size:30px;font-weight:900;color:var(--green)}
    .admin-only,.viewer-note{display:none}
    .access-admin .admin-only{display:block}
    .access-viewer .viewer-note{display:block}
    .access-viewer .edit-control{opacity:.55;pointer-events:none}
    .hero-card{background:linear-gradient(135deg,#065f46,#0f766e);color:white;position:relative;overflow:hidden}
    .hero-card:before{content:"";position:absolute;right:-80px;top:-80px;width:210px;height:210px;border-radius:50%;background:rgba(255,255,255,.12)}
    .hero-card>*{position:relative}
    .tag{display:inline-block;background:rgba(255,255,255,.13);padding:10px 12px;border-radius:14px;font-size:13px;font-weight:800;margin:4px}
    .sector{border:1px solid #e2e8f0;border-radius:22px;padding:16px;margin-bottom:12px;background:white}
    .sector-head{display:flex;justify-content:space-between;gap:12px;font-weight:900}
    input[type=range]{accent-color:var(--green);padding:0}
    .bar-chart{display:grid;gap:10px;margin-top:18px}
    .bar-row{display:grid;grid-template-columns:120px 1fr 52px;gap:12px;align-items:center;font-size:13px}
    .bar-bg{height:18px;background:#e2e8f0;border-radius:999px;overflow:hidden}
    .bar-fill{height:100%;background:var(--green);border-radius:999px}
    .two-fill{display:grid;gap:5px}
    .bar-before{height:8px;background:#94a3b8;border-radius:999px}
    .bar-after{height:8px;background:var(--green);border-radius:999px}
    .table{width:100%;border-collapse:collapse;margin-top:16px;overflow:hidden;border-radius:18px}
    .table th,.table td{border:1px solid #e2e8f0;padding:10px;text-align:left;font-size:13px}
    .table th{background:#ecfdf5;color:#064e3b}
    .notice{background:#eff6ff;color:#075985;border:1px solid #bae6fd;border-radius:22px;padding:16px}
    .ok{background:#ecfdf5;color:#065f46;border:1px solid #bbf7d0;border-radius:22px;padding:16px}
    .warn{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;border-radius:22px;padding:16px}
    .focus-box{background:#ecfdf5;border:1px solid #bbf7d0;border-radius:22px;padding:18px}
    .footer{text-align:center;color:#64748b;padding:34px}
    @media(max-width:900px){.grid2,.grid3,.grid4{grid-template-columns:1fr}.hero-title{font-size:42px}nav{display:none}.bar-row{grid-template-columns:90px 1fr 40px}.topbar .inner{align-items:flex-start}.wrap{padding:16px}}