/* =========================================================
   MUNICIPAL TAX COLLECTION PORTAL — "CIVIC LEDGER" DESIGN
   Palette: Ledger green #12513C, Ink navy #0E1C26, Seal gold #C9973D,
            Paper #F2F1EA, Rule grey #D8D6CC, Alert #B23A32
   Type: Sora (display) / Manrope (body) / JetBrains-style mono (codes)
   ========================================================= */

:root{
  --ink:#0E1C26;
  --ink-soft:#3B4A52;
  --green:#12513C;
  --green-dark:#0B3A2B;
  --green-light:#E4EEE8;
  --gold:#C9973D;
  --gold-light:#F4E6C8;
  --paper:#F2F1EA;
  --paper-raised:#FFFFFF;
  --rule:#D8D6CC;
  --alert:#B23A32;
  --alert-light:#FBEAE8;
  --radius:10px;
  --shadow:0 1px 2px rgba(14,28,38,.06), 0 8px 24px -12px rgba(14,28,38,.18);
  --mono:'JetBrains Mono','Courier New',monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Manrope',system-ui,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Sora',system-ui,sans-serif; color:var(--ink); margin:0 0 .5em; letter-spacing:-.01em;}
a{color:var(--green); text-decoration:none;}
.container{max-width:1180px; margin:0 auto; padding:0 24px;}
.mono{font-family:var(--mono); letter-spacing:.02em;}

/* ---------------- Topbar ---------------- */
.topbar{
  background:var(--ink);
  border-bottom:3px solid var(--gold);
}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 24px;}
.brand{display:flex; align-items:center; gap:10px; color:#fff; font-family:'Sora',sans-serif; font-weight:700; font-size:1.05rem;}
.brand-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--gold); color:var(--ink); font-weight:800; font-size:1.1rem;
  border:2px solid #fff2;
}
.mainnav{display:flex; align-items:center; gap:22px;}
.mainnav a{color:#DCE4E0; font-weight:600; font-size:.92rem;}
.mainnav a:hover{color:#fff;}
.btn-ghost{border:1px solid #ffffff44; padding:8px 14px; border-radius:8px; color:#fff !important;}
.btn-solid{background:var(--gold); color:var(--ink) !important; padding:8px 16px; border-radius:8px; font-weight:700 !important;}

/* ---------------- Hero ---------------- */
.hero{
  background:
    radial-gradient(1200px 400px at 85% -10%, #17604733, transparent),
    linear-gradient(180deg, var(--ink) 0%, #132A38 100%);
  color:#fff;
  padding:76px 0 90px;
  position:relative;
  overflow:hidden;
}
.hero:before{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(0deg, transparent, transparent 27px, #ffffff08 28px);
  pointer-events:none;
}
.hero-inner{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; position:relative;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-light); background:#ffffff10; border:1px solid #ffffff22;
  padding:6px 12px; border-radius:100px; margin-bottom:18px;
}
.hero h1{color:#fff; font-size:2.7rem; line-height:1.12; max-width:620px;}
.hero p.lead{color:#C9D3CF; font-size:1.08rem; max-width:520px; margin-top:14px;}
.hero-cta{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:13px 22px; border-radius:8px; font-weight:700; font-size:.95rem;
  border:1px solid transparent; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--gold); color:var(--ink);}
.btn-primary:hover{box-shadow:0 8px 20px -8px #C9973D77;}
.btn-outline{background:transparent; color:#fff; border-color:#ffffff55;}
.btn-outline:hover{background:#ffffff12;}
.btn-block{width:100%;}
.btn-sm{padding:8px 14px; font-size:.85rem; border-radius:6px;}

/* Seal / signature element */
.seal{
  width:230px; height:230px; border-radius:50%;
  border:3px solid var(--gold);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  margin:0 auto; position:relative; color:#fff;
  background:conic-gradient(from 90deg, #ffffff08, transparent 30%);
}
.seal:before{
  content:""; position:absolute; inset:10px; border:1px dashed #ffffff55; border-radius:50%;
}
.seal .rate{font-family:'Sora',sans-serif; font-weight:800; font-size:2.6rem; color:var(--gold);}
.seal .rate-label{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#DCE4E0;}
.seal .seal-sub{font-size:.72rem; color:#9FB0AA; margin-top:6px; text-align:center; padding:0 24px;}

/* ---------------- Sections ---------------- */
.section{padding:64px 0;}
.section-head{max-width:640px; margin-bottom:36px;}
.section-head .kicker{font-family:var(--mono); text-transform:uppercase; letter-spacing:.12em; font-size:.76rem; color:var(--green); font-weight:700;}
.section-alt{background:var(--paper-raised); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);}

.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.card{
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:var(--radius);
  padding:26px; box-shadow:var(--shadow);
}
.card .num{font-family:var(--mono); font-size:.78rem; color:var(--gold); font-weight:700; letter-spacing:.1em;}
.card h3{font-size:1.12rem; margin:8px 0 8px;}
.card p{color:var(--ink-soft); font-size:.94rem; margin:0;}

.ledger-line{border:none; border-top:1px dashed var(--rule); margin:36px 0;}

/* ---------------- Forms ---------------- */
.form-wrap{
  max-width:720px; margin:0 auto; background:var(--paper-raised);
  border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:36px;
}
.form-wrap.narrow{max-width:440px;}
.form-title{margin-bottom:6px;}
.form-sub{color:var(--ink-soft); margin-bottom:26px; font-size:.94rem;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.field{margin-bottom:18px;}
.field.full{grid-column:1 / -1;}
label{display:block; font-weight:700; font-size:.85rem; margin-bottom:6px; color:var(--ink);}
label .opt{font-weight:500; color:var(--ink-soft); font-size:.78rem;}
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], input[type=date], select, textarea{
  width:100%; padding:11px 13px; border:1.5px solid var(--rule); border-radius:8px;
  font-family:'Manrope',sans-serif; font-size:.95rem; background:#fff; color:var(--ink);
  transition:border-color .12s ease;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--green); box-shadow:0 0 0 3px #12513c1a;
}
textarea{resize:vertical; min-height:90px;}
.help{font-size:.8rem; color:var(--ink-soft); margin-top:5px;}
fieldset{border:1px solid var(--rule); border-radius:8px; padding:16px; margin:0 0 18px;}
legend{font-family:var(--mono); font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; padding:0 8px; color:var(--green); font-weight:700;}

/* ---------------- Tables ---------------- */
.table-wrap{overflow-x:auto; background:var(--paper-raised); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow);}
table{width:100%; border-collapse:collapse; font-size:.92rem;}
thead th{
  text-align:left; padding:13px 16px; background:var(--green-light); color:var(--green-dark);
  font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.08em;
  border-bottom:1px solid var(--rule);
}
tbody td{padding:13px 16px; border-bottom:1px solid var(--rule); color:var(--ink);}
tbody tr:hover{background:#FAFAF6;}
tbody tr:last-child td{border-bottom:none;}
.badge{
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:100px;
  font-size:.74rem; font-weight:700; font-family:var(--mono); text-transform:uppercase; letter-spacing:.04em;
}
.badge-pending{background:#FCF3DE; color:#8A6A16;}
.badge-paid{background:var(--green-light); color:var(--green-dark);}
.badge-overdue{background:var(--alert-light); color:var(--alert);}
.badge-confirmed{background:var(--green-light); color:var(--green-dark);}

/* ---------------- Dashboard shell ---------------- */
.shell{display:grid; grid-template-columns:250px 1fr; min-height:calc(100vh - 68px);}
.sidebar{background:var(--ink); color:#DCE4E0; padding:26px 0;}
.sidebar .side-title{font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:#8CA39A; padding:0 24px; margin-bottom:10px;}
.sidebar a{display:flex; align-items:center; gap:10px; color:#DCE4E0; padding:11px 24px; font-weight:600; font-size:.92rem; border-left:3px solid transparent;}
.sidebar a:hover{background:#ffffff0c;}
.sidebar a.active{background:#ffffff10; border-left-color:var(--gold); color:#fff;}
.sidebar .sidebar-divider{height:1px; background:#ffffff14; margin:16px 24px;}
.content{padding:32px; background:var(--paper);}
.content-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:26px; flex-wrap:wrap; gap:14px;}
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:28px;}
.stat{background:var(--paper-raised); border:1px solid var(--rule); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow);}
.stat .stat-label{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft);}
.stat .stat-value{font-family:'Sora',sans-serif; font-size:1.7rem; font-weight:800; margin-top:6px; color:var(--ink);}
.stat .stat-value.gold{color:var(--gold);}
.stat .stat-value.green{color:var(--green);}

/* ---------------- Alerts / flash ---------------- */
.alert{padding:13px 16px; border-radius:8px; font-size:.9rem; margin-bottom:20px; border:1px solid transparent;}
.alert-success{background:var(--green-light); color:var(--green-dark); border-color:#12513c33;}
.alert-error{background:var(--alert-light); color:var(--alert); border-color:#b23a3233;}
.alert-info{background:var(--gold-light); color:#7A5A1E; border-color:#c9973d44;}

/* ---------------- Demand notice / receipt ---------------- */
.notice{
  max-width:760px; margin:0 auto; background:#fff; border:1px solid var(--rule); border-radius:12px;
  box-shadow:var(--shadow); overflow:hidden;
}
.notice-head{
  background:var(--ink); color:#fff; padding:26px 32px; display:flex; justify-content:space-between; align-items:center;
  border-bottom:3px solid var(--gold);
}
.notice-head .code{font-family:var(--mono); font-size:.85rem; color:var(--gold-light);}
.notice-body{padding:32px;}
.notice-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:28px;}
.notice dl{margin:0;}
.notice dl div{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px dashed var(--rule); font-size:.92rem;}
.notice dl dt{color:var(--ink-soft); font-weight:600;}
.notice dl dd{margin:0; font-weight:700;}
.notice .amount-box{
  text-align:center; background:var(--green-light); border:1px dashed var(--green); border-radius:10px; padding:18px; margin-top:16px;
}
.notice .amount-box .label{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--green-dark);}
.notice .amount-box .amount{font-family:'Sora',sans-serif; font-size:2rem; font-weight:800; color:var(--green-dark);}
.qr-box{text-align:center; border:1px solid var(--rule); border-radius:10px; padding:18px; background:var(--paper);}
.qr-box .qr-cap{font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); margin-top:10px;}
.notice-foot{padding:20px 32px; background:var(--paper); border-top:1px solid var(--rule); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;}

/* ---------------- Misc ---------------- */
.footer{background:var(--ink); color:#8CA39A; padding:26px 0; margin-top:60px;}
.footer-inner{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:.85rem;}
.footer-sub{font-family:var(--mono); font-size:.78rem;}
.text-center{text-align:center;}
.mt-24{margin-top:24px;}
.flex-between{display:flex; justify-content:space-between; align-items:center;}
.small{font-size:.85rem; color:var(--ink-soft);}

@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr;}
  .grid3, .grid4{grid-template-columns:1fr 1fr;}
  .shell{grid-template-columns:1fr;}
  .sidebar{display:flex; overflow-x:auto; padding:10px 0;}
  .sidebar a{white-space:nowrap; border-left:none; border-bottom:3px solid transparent;}
  .sidebar a.active{border-bottom-color:var(--gold);}
  .notice-grid{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .mainnav{display:none;}
}
@media (max-width: 600px){
  .grid3, .grid4, .stat-row{grid-template-columns:1fr;}
  .hero h1{font-size:2rem;}
}

@media print{
  .topbar, .footer, .no-print{display:none !important;}
  body{background:#fff;}
  .notice{box-shadow:none; border:1px solid #999;}
}