/* ============================================================
   Maza Mahapaur — NMC Theme Extension
   Extends the existing "Know Our Works" design system
   (theme/assets/style.css). This file ONLY:
     1. Re-brands the existing CSS variables to NMC colours
     2. Adds Marathi (Devanagari) typography support
     3. Adds mobile phone-frame + mobile UI component styles
   All existing component classes (.card, .stat-card, .btn,
   .status-badge, .timeline, table, etc.) are reused as-is and
   automatically pick up the NMC palette below.
   ============================================================ */

:root {
  /* --- NMC brand palette (overrides theme defaults) --- */
  --primary:#0d5cab;          /* NMC Blue            */
  --primary-dark:#09457f;
  --primary-light:#e2edfa;
  --secondary:#f47216;        /* Saffron / Orange    */
  --secondary-light:#ffe9d4;
  --saffron:#f47216;
  --saffron-light:#ffe9d4;
  --success:#1f9d57;          /* Accent Green        */
  --success-light:#daf4e6;
  --green:#1f9d57;
  --warning:#e8870b;
  --warning-light:#fdeccf;
  --danger:#d92d20;           /* Emergency Red       */
  --danger-light:#fde4e2;
  --info:#0e7eb5;
  --info-light:#d6eefb;
  --radius:12px;

  /* fonts */
  --font-en:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mr:'Noto Sans Devanagari','Inter',sans-serif;
}

/* Marathi text helper — senior-citizen friendly, high contrast */
.mr{font-family:var(--font-mr);}
body{font-family:var(--font-en);}

/* Re-skin the admin sidebar logo gradient to NMC blue→saffron */
.sidebar-header .logo-icon,
.logo-icon,
.user-avatar,
.stat-icon.purple{background:linear-gradient(135deg,var(--primary),var(--secondary));}
.stat-icon.purple{color:#fff;}

/* ============================================================
   PROTOTYPE HUB / SHOWCASE PAGE
   ============================================================ */
.showcase-body{background:#0f1b2d;color:#e5e7eb;font-family:var(--font-en);min-height:100vh;}
.showcase-hero{background:linear-gradient(135deg,#09457f 0%,#0d5cab 55%,#f47216 130%);
  padding:56px 24px 64px;text-align:center;color:#fff;position:relative;overflow:hidden;}
.showcase-hero .gov-strip{position:absolute;top:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg,#f47216 0 33%,#fff 33% 66%,#1f9d57 66% 100%);}
.showcase-hero .crest{width:84px;height:84px;border-radius:22px;margin:0 auto 18px;
  background:rgba(255,255,255,.15);backdrop-filter:blur(6px);display:flex;align-items:center;
  justify-content:center;font-size:38px;border:1px solid rgba(255,255,255,.3);}
.showcase-hero h1{font-size:34px;font-weight:800;letter-spacing:-.5px;}
.showcase-hero .sub-mr{font-size:20px;margin-top:4px;font-family:var(--font-mr);opacity:.95;}
.showcase-hero p{margin-top:14px;font-size:15px;opacity:.85;max-width:640px;margin-left:auto;margin-right:auto;}
.showcase-hero .pills{margin-top:22px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.showcase-hero .pill{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);
  padding:6px 14px;border-radius:30px;font-size:12.5px;font-weight:500;}
.showcase-wrap{max-width:1180px;margin:-32px auto 60px;padding:0 24px;}
.showcase-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;}
.nav-card{background:#16243a;border:1px solid #243650;border-radius:16px;padding:22px;
  text-decoration:none;color:#e5e7eb;transition:.2s;display:block;}
.nav-card:hover{border-color:var(--secondary);transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.35);}
.nav-card .ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-size:20px;color:#fff;margin-bottom:14px;}
.nav-card h3{font-size:16px;font-weight:700;color:#fff;}
.nav-card p{font-size:13px;color:#9fb0c7;margin-top:6px;line-height:1.5;}
.nav-card .tag{display:inline-block;margin-top:12px;font-size:11px;font-weight:600;
  color:var(--secondary);text-transform:uppercase;letter-spacing:.6px;}
.section-label{color:#7e93ad;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:1.5px;margin:34px 0 14px;}

/* ============================================================
   MOBILE — phone frame + screen gallery
   ============================================================ */
.gallery-page{background:#eef1f6;font-family:var(--font-en);min-height:100vh;}
.gallery-top{background:linear-gradient(135deg,#09457f,#0d5cab);color:#fff;padding:26px 28px;
  position:sticky;top:0;z-index:60;box-shadow:0 4px 14px rgba(0,0,0,.15);}
.gallery-top .gt-row{display:flex;align-items:center;gap:14px;max-width:1300px;margin:0 auto;}
.gallery-top .crest{width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;font-size:20px;}
.gallery-top h1{font-size:20px;font-weight:700;}
.gallery-top p{font-size:13px;opacity:.85;}
.gallery-top a.back{margin-left:auto;color:#fff;text-decoration:none;font-size:13px;
  background:rgba(255,255,255,.15);padding:8px 14px;border-radius:8px;}
.module-band{max-width:1300px;margin:0 auto;padding:34px 28px 8px;}
.module-band h2{font-size:19px;font-weight:700;color:var(--gray-900);display:flex;align-items:center;gap:10px;}
.module-band h2 .num{width:28px;height:28px;border-radius:8px;background:var(--primary);color:#fff;
  font-size:13px;display:flex;align-items:center;justify-content:center;font-weight:700;}
.module-band p{font-size:13.5px;color:var(--gray-500);margin:4px 0 0 38px;}
.screens-row{max-width:1300px;margin:0 auto;padding:16px 28px 8px;display:flex;gap:26px;
  flex-wrap:wrap;}
.screen-block{display:flex;flex-direction:column;align-items:center;}
.screen-block .cap{margin-top:12px;font-size:12.5px;font-weight:600;color:var(--gray-700);text-align:center;}
.screen-block .cap small{display:block;font-weight:400;color:var(--gray-400);font-size:11px;margin-top:1px;}

/* The phone */
.phone{width:300px;height:620px;background:#0b0f17;border-radius:42px;padding:11px;
  box-shadow:0 18px 40px rgba(15,27,45,.22),0 4px 10px rgba(0,0,0,.1);position:relative;flex-shrink:0;}
.phone::after{content:'';position:absolute;top:20px;left:50%;transform:translateX(-50%);
  width:96px;height:24px;background:#0b0f17;border-radius:0 0 16px 16px;z-index:5;}
.screen{width:100%;height:100%;background:#f4f6fa;border-radius:32px;overflow:hidden;
  position:relative;display:flex;flex-direction:column;}
.screen .scroll{flex:1;overflow-y:auto;overflow-x:hidden;}
.screen .scroll::-webkit-scrollbar{width:0;}

/* status bar */
.status-bar{height:34px;display:flex;align-items:center;justify-content:space-between;
  padding:0 20px 0 22px;font-size:12px;font-weight:600;flex-shrink:0;color:#1f2937;background:transparent;}
.status-bar.on-dark{color:#fff;}
.status-bar .sb-icons i{margin-left:5px;font-size:11px;}

/* app bar */
.app-bar{background:var(--primary);color:#fff;padding:8px 16px 12px;display:flex;align-items:center;gap:12px;flex-shrink:0;}
.app-bar.saffron{background:var(--secondary);}
.app-bar .ab-title{font-size:15.5px;font-weight:600;line-height:1.2;}
.app-bar .ab-title small{display:block;font-size:11px;font-weight:400;opacity:.85;}
.app-bar i.lead{font-size:17px;}
.app-bar .ab-actions{margin-left:auto;display:flex;gap:14px;font-size:16px;}

/* bottom nav */
.bottom-nav{height:60px;background:#fff;border-top:1px solid var(--gray-200);display:flex;
  flex-shrink:0;box-shadow:0 -2px 10px rgba(0,0,0,.04);}
.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;font-size:10px;color:var(--gray-400);text-decoration:none;}
.bottom-nav a i{font-size:17px;}
.bottom-nav a.active{color:var(--primary);}
.bottom-nav .fab-wrap{flex:1;position:relative;}
.bottom-nav .fab{position:absolute;top:-22px;left:50%;transform:translateX(-50%);width:52px;height:52px;
  border-radius:50%;background:var(--secondary);color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:22px;box-shadow:0 6px 16px rgba(244,114,22,.5);border:4px solid #fff;}

/* generic mobile content padding */
.m-body{padding:14px;}
.m-body.tight{padding:12px 14px;}

/* mobile section title */
.m-sec{display:flex;align-items:center;justify-content:space-between;margin:16px 0 10px;}
.m-sec:first-child{margin-top:4px;}
.m-sec h4{font-size:14px;font-weight:700;color:var(--gray-800);}
.m-sec a{font-size:12px;color:var(--primary);text-decoration:none;font-weight:600;}

/* mobile card */
.mc{background:#fff;border-radius:14px;border:1px solid var(--gray-200);overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.04);}
.mc + .mc{margin-top:12px;}
.mc-pad{padding:14px;}

/* mayor banner */
.mayor-banner{background:linear-gradient(120deg,#09457f,#0d5cab 70%,#1565c0);border-radius:16px;
  padding:16px;color:#fff;display:flex;gap:14px;align-items:center;position:relative;overflow:hidden;}
.mayor-banner .ph{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;border:2px solid rgba(255,255,255,.5);}
.mayor-banner .mb-txt .role{font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;opacity:.85;}
.mayor-banner .mb-txt .name{font-size:16px;font-weight:700;}
.mayor-banner .mb-txt .msg{font-size:11.5px;opacity:.9;margin-top:3px;line-height:1.45;}

/* emergency alert card */
.alert-card{background:var(--danger-light);border:1px solid #f6b4ae;border-left:4px solid var(--danger);
  border-radius:12px;padding:12px 14px;display:flex;gap:12px;align-items:flex-start;}
.alert-card .ai{width:34px;height:34px;border-radius:9px;background:var(--danger);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.alert-card .title{font-size:13px;font-weight:700;color:#a31910;}
.alert-card .sub{font-size:11.5px;color:#9a2820;margin-top:2px;line-height:1.4;}

/* quick action grid */
.qa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.qa{background:#fff;border:1px solid var(--gray-200);border-radius:14px;padding:12px 6px;text-align:center;
  text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:7px;}
.qa .qi{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:17px;}
.qa span{font-size:10.5px;color:var(--gray-700);font-weight:500;line-height:1.2;}
.bg-blue{background:var(--primary-light);color:var(--primary);}
.bg-saffron{background:var(--saffron-light);color:var(--secondary);}
.bg-green{background:var(--success-light);color:var(--success);}
.bg-red{background:var(--danger-light);color:var(--danger);}
.bg-cyan{background:var(--info-light);color:var(--info);}
.bg-purple{background:#ede9fe;color:#7c3aed;}

/* news carousel */
.news-card{min-width:220px;background:#fff;border:1px solid var(--gray-200);border-radius:14px;overflow:hidden;}
.news-thumb{height:108px;background:linear-gradient(135deg,var(--primary-light),#cfe0f6);
  display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:30px;}
.news-card .nc-body{padding:10px 12px;}
.news-card .tagm{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--secondary);}
.news-card h5{font-size:12.5px;font-weight:600;color:var(--gray-800);margin-top:3px;line-height:1.35;}
.news-card .when{font-size:10.5px;color:var(--gray-400);margin-top:6px;}
.h-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;}
.h-scroll::-webkit-scrollbar{height:0;}

/* list row (contacts, directory, settings) */
.row-item{display:flex;align-items:center;gap:12px;padding:13px 14px;border-bottom:1px solid var(--gray-100);}
.row-item:last-child{border-bottom:none;}
.row-item .ri-ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;font-size:16px;flex-shrink:0;}
.row-item .ri-main{flex:1;min-width:0;}
.row-item .ri-main .t{font-size:13.5px;font-weight:600;color:var(--gray-800);}
.row-item .ri-main .s{font-size:11.5px;color:var(--gray-500);margin-top:1px;}
.row-item .ri-act{display:flex;gap:8px;}
.call-btn{width:36px;height:36px;border-radius:50%;background:var(--success-light);color:var(--success);
  display:flex;align-items:center;justify-content:center;font-size:15px;text-decoration:none;}
.nav-btn{width:36px;height:36px;border-radius:50%;background:var(--primary-light);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:15px;text-decoration:none;}
.chev{color:var(--gray-300);font-size:13px;}

/* chips */
.chip-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;}
.chip-row::-webkit-scrollbar{height:0;}
.chip{padding:7px 13px;border-radius:30px;font-size:12px;font-weight:500;background:#fff;
  border:1px solid var(--gray-200);color:var(--gray-600);white-space:nowrap;}
.chip.active{background:var(--primary);color:#fff;border-color:var(--primary);}

/* mobile status badges reuse .status-badge from base theme */
.sb-resolved{background:var(--success-light);color:var(--success);}
.sb-progress{background:var(--primary-light);color:var(--primary);}
.sb-pending{background:var(--warning-light);color:var(--warning);}
.sb-esc{background:var(--danger-light);color:var(--danger);}

/* mobile mini progress */
.mini-prog{height:7px;background:var(--gray-100);border-radius:5px;overflow:hidden;}
.mini-prog > span{display:block;height:100%;border-radius:5px;background:var(--primary);}

/* mobile buttons (full width) */
.m-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;
  border-radius:12px;font-size:14.5px;font-weight:600;border:none;font-family:inherit;cursor:pointer;}
.m-btn-primary{background:var(--primary);color:#fff;}
.m-btn-saffron{background:var(--secondary);color:#fff;}
.m-btn-outline{background:#fff;border:1.5px solid var(--gray-200);color:var(--gray-700);}

/* form field mobile */
.m-field{margin-bottom:14px;}
.m-field label{display:block;font-size:12px;font-weight:600;color:var(--gray-600);margin-bottom:6px;}
.m-input{width:100%;padding:12px 14px;border:1.5px solid var(--gray-200);border-radius:11px;
  font-size:13.5px;font-family:inherit;color:var(--gray-800);background:#fff;}
.m-input:focus{outline:none;border-color:var(--primary);}

/* splash */
.splash{height:100%;background:linear-gradient(160deg,#09457f 0%,#0d5cab 55%,#1565c0 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;padding:30px;position:relative;}
.splash .gov-strip{position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,#f47216 0 33%,#fff 33% 66%,#1f9d57 66%);}
.splash .crest{width:96px;height:96px;border-radius:26px;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;font-size:46px;margin-bottom:22px;border:1px solid rgba(255,255,255,.35);}
.splash h1{font-size:26px;font-weight:800;font-family:var(--font-mr);}
.splash .en{font-size:15px;opacity:.92;margin-top:2px;}
.splash .org{font-size:11.5px;opacity:.8;margin-top:14px;text-align:center;line-height:1.5;}
.splash .lang{margin-top:auto;width:100%;display:flex;gap:10px;}
.splash .lang button{flex:1;padding:12px;border-radius:12px;border:1.5px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.12);color:#fff;font-size:14px;font-weight:600;font-family:inherit;}
.splash .lang button.sel{background:#fff;color:var(--primary);}

/* onboarding */
.onb{height:100%;display:flex;flex-direction:column;background:#fff;}
.onb .illus{flex:1;background:linear-gradient(160deg,var(--primary-light),#fff);display:flex;
  align-items:center;justify-content:center;}
.onb .illus .big{width:150px;height:150px;border-radius:40px;background:#fff;
  box-shadow:0 12px 30px rgba(13,92,171,.18);display:flex;align-items:center;justify-content:center;
  font-size:64px;color:var(--primary);}
.onb .onb-txt{padding:24px;text-align:center;}
.onb .onb-txt h2{font-size:20px;font-weight:700;color:var(--gray-900);}
.onb .onb-txt .h-mr{font-family:var(--font-mr);font-size:15px;color:var(--secondary);margin-top:4px;}
.onb .onb-txt p{font-size:13px;color:var(--gray-500);margin-top:10px;line-height:1.55;}
.onb .dots{display:flex;gap:7px;justify-content:center;margin:18px 0 6px;}
.onb .dots span{width:7px;height:7px;border-radius:50%;background:var(--gray-300);}
.onb .dots span.on{width:22px;border-radius:5px;background:var(--primary);}
.onb .onb-foot{padding:0 24px 26px;display:flex;align-items:center;justify-content:space-between;}
.onb .skip{font-size:13.5px;color:var(--gray-400);font-weight:600;}

/* OTP boxes */
.otp-row{display:flex;gap:9px;justify-content:center;margin:18px 0;}
.otp-box{width:42px;height:50px;border:1.5px solid var(--gray-200);border-radius:11px;display:flex;
  align-items:center;justify-content:center;font-size:20px;font-weight:700;color:var(--gray-800);background:#fff;}
.otp-box.fill{border-color:var(--primary);background:var(--primary-light);color:var(--primary);}

/* chatbot */
.chat-area{flex:1;overflow-y:auto;padding:14px;background:#eef2f7;display:flex;flex-direction:column;gap:10px;}
.bubble{max-width:78%;padding:10px 13px;border-radius:16px;font-size:12.5px;line-height:1.5;}
.bubble.bot{background:#fff;border:1px solid var(--gray-200);align-self:flex-start;border-bottom-left-radius:5px;color:var(--gray-700);}
.bubble.user{background:var(--primary);color:#fff;align-self:flex-end;border-bottom-right-radius:5px;}
.sugg{display:flex;flex-wrap:wrap;gap:7px;}
.sugg button{background:#fff;border:1.5px solid var(--primary-light);color:var(--primary);
  font-size:11.5px;padding:7px 12px;border-radius:18px;font-family:inherit;font-weight:500;}
.chat-input{display:flex;gap:8px;padding:10px 12px;background:#fff;border-top:1px solid var(--gray-200);flex-shrink:0;}
.chat-input input{flex:1;border:1.5px solid var(--gray-200);border-radius:22px;padding:10px 14px;font-size:13px;font-family:inherit;}
.chat-input .send{width:40px;height:40px;border-radius:50%;background:var(--primary);color:#fff;border:none;font-size:15px;}

/* map screen */
.map-screen{flex:1;position:relative;background:
   repeating-linear-gradient(0deg,#e4ebf3 0 1px,transparent 1px 44px),
   repeating-linear-gradient(90deg,#e4ebf3 0 1px,transparent 1px 44px),#eef3f8;}
.map-pin{position:absolute;width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;box-shadow:0 3px 8px rgba(0,0,0,.25);}
.map-pin i{transform:rotate(45deg);}
.map-sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:18px 18px 0 0;
  padding:14px;box-shadow:0 -6px 20px rgba(0,0,0,.12);}
.map-grab{width:40px;height:4px;background:var(--gray-200);border-radius:3px;margin:0 auto 12px;}

/* avatar circle helper */
.av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;flex-shrink:0;}

/* social feed item */
.social-item{display:flex;gap:11px;padding:13px 14px;border-bottom:1px solid var(--gray-100);}
.social-item .si-ic{width:38px;height:38px;border-radius:11px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.fb{background:#1877f2;}.ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#bc1888);}
.yt{background:#ff0000;}.tw{background:#000;}
.social-item .si-body .h{font-size:12.5px;font-weight:600;color:var(--gray-800);}
.social-item .si-body .p{font-size:11.5px;color:var(--gray-600);margin-top:3px;line-height:1.45;}
.social-item .si-body .m{font-size:10.5px;color:var(--gray-400);margin-top:5px;}

/* notification item */
.notif-item{display:flex;gap:11px;padding:13px 14px;border-bottom:1px solid var(--gray-100);position:relative;}
.notif-item.unread{background:var(--primary-light);}
.notif-item .ni-ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.notif-item .h{font-size:12.5px;font-weight:600;color:var(--gray-800);}
.notif-item .p{font-size:11.5px;color:var(--gray-600);margin-top:2px;line-height:1.4;}
.notif-item .m{font-size:10.5px;color:var(--gray-400);margin-top:4px;}

/* toggle */
.tgl{width:42px;height:24px;border-radius:14px;background:var(--gray-300);position:relative;flex-shrink:0;}
.tgl.on{background:var(--success);}
.tgl::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s;}
.tgl.on::after{left:20px;}

/* gallery photo tile */
.g-tile{height:96px;border-radius:12px;background:linear-gradient(135deg,#dbe7f6,#c4d6ee);
  display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:24px;}

@media(max-width:520px){
  .qa-grid{grid-template-columns:repeat(4,1fr);}
}