:root {
    --navy: #0f2a5f; --navy2: #17408f; --bg: #f1f5fb; --card: #fff; --ink: #1e293b; --muted: #64748b; --line: #e2e8f0;
    --good: #16a34a; --warn: #f59e0b; --bad: #ef4444;
}
* { box-sizing: border-box; }
body { font-family: "Noto Sans Devanagari", "Nirmala UI", Mangal, "Segoe UI", sans-serif; background: var(--bg); color: var(--ink); margin: 0; }

.app { display: flex; min-height: 100vh; }
.sidebar { width: 220px; background: linear-gradient(180deg, var(--navy), var(--navy2)); color: #fff; flex-shrink: 0; position: sticky; top: 0; height: 100vh; }
.sidebar .brand { padding: 20px 18px; font-weight: 700; display: flex; gap: 10px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.12); }
.sidebar .brand i { font-size: 1.6rem; }
.sidebar .nav-link { color: rgba(255,255,255,.8); padding: 12px 18px; display: flex; gap: 10px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.06); }
.sidebar .nav-link:hover, .sidebar .nav-link.active { background: rgba(255,255,255,.14); color: #fff; }

.content { flex: 1; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 16px; padding: 14px 24px; background: linear-gradient(90deg, #fff, #eaf1ff 60%, #e2f3e4); border-bottom: 1px solid var(--line); }
.topbar h1 { font-size: 1.55rem; font-weight: 800; color: var(--navy2); margin: 0; }
.topbar .sub { color: var(--navy); font-size: .9rem; }
.topbar .titles { flex: 1; }
.datecard { display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 10px; padding: 8px 14px; box-shadow: 0 2px 8px rgba(15,42,95,.1); }
.datecard i { font-size: 1.5rem; color: var(--navy2); }
.datecard .d1 { font-weight: 700; } .datecard .d2 { font-size: .75rem; color: var(--muted); }

.page { padding: 20px 24px; }
.cardx { background: var(--card); border-radius: 12px; padding: 16px 18px; box-shadow: 0 1px 6px rgba(15,42,95,.08); border: 1px solid var(--line); }
.card-h { font-size: 1.05rem; font-weight: 700; color: var(--navy2); margin-bottom: 12px; }
.card-h small { color: var(--muted); font-weight: 500; }

.svc-tabs .nav-link { border-radius: 20px; padding: 5px 14px; font-size: .9rem; color: var(--navy2); background: #eef3fd; margin: 0 6px 6px 0; }
.svc-tabs .nav-link.active { background: var(--navy2); color: #fff; }

/* KPI cards */
.kpi { border-radius: 12px; padding: 14px 16px; color: #fff; display: flex; gap: 12px; align-items: center; height: 100%; box-shadow: 0 3px 10px rgba(0,0,0,.12); }
.kpi > i { font-size: 2rem; opacity: .9; }
.kpi .lbl { font-size: .82rem; opacity: .95; } .kpi .val { font-size: 1.6rem; font-weight: 800; line-height: 1.15; }
.k-blue { background: linear-gradient(135deg, #2563eb, #1d4ed8); } .k-green { background: linear-gradient(135deg, #22a559, #15803d); }
.k-orange { background: linear-gradient(135deg, #fb923c, #ea580c); } .k-purple { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.k-teal { background: linear-gradient(135deg, #14b8a6, #0f766e); } .k-pink { background: linear-gradient(135deg, #f43f5e, #be123c); }

/* report table */
table.rep { font-size: .88rem; }
table.rep thead th { background: #dbe8f8; color: var(--navy); text-align: center; white-space: nowrap; font-weight: 700; }
table.rep td { text-align: center; }
table.rep tfoot td { background: #fde9dc; font-weight: 800; text-align: center; }
.pill { display: inline-block; min-width: 68px; padding: 2px 10px; border-radius: 6px; font-weight: 700; }
.p-good { background: #dcfce7; color: #166534; } .p-warn { background: #fef3c7; color: #92400e; } .p-bad { background: #fee2e2; color: #991b1b; }
.pill i { font-size: .7rem; }
.rank { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; background: var(--navy2); color: #fff; font-weight: 700; font-size: .8rem; }
tr:first-child .rank { background: #d4a017; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); }
.legend span { white-space: nowrap; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; }

/* charts */
.chart-box { position: relative; height: 260px; }
.chart-box.donut { height: 230px; }
.donut-center { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.donut-center b { font-size: 1.5rem; } .donut-center span { font-size: .8rem; color: var(--muted); }

/* status band */
.band { border-radius: 12px; padding: 14px 18px; color: #fff; display: flex; gap: 14px; align-items: center; }
.band i { font-size: 1.9rem; } .band small { display: block; opacity: .9; } .band b { font-size: 1.1rem; }
.b-green { background: #16a34a; } .b-orange { background: #f59e0b; } .b-red { background: #ef4444; }

@media (max-width: 991px) {
    .sidebar { position: fixed; z-index: 1000; left: -230px; transition: left .2s; }
    .sidebar.open { left: 0; }
    .topbar { flex-wrap: wrap; padding: 12px; } .topbar h1 { font-size: 1.15rem; }
    .page { padding: 12px; }
}
@media print {
    .sidebar, .filters .btn, .svc-tabs, .topbar button { display: none !important; }
    body { background: #fff; } .cardx { box-shadow: none; break-inside: avoid; }
}

/* calendar */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-h { text-align: center; font-weight: 700; color: var(--navy2); padding: 6px 0; font-size: .85rem; }
.cal-d { min-height: 96px; border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; background: #fafcff; color: var(--ink); text-decoration: none; }
.cal-d.empty { border: 0; background: transparent; }
.cal-d .num { font-weight: 700; color: var(--muted); }
.cal-d small { font-size: .72rem; line-height: 1.2; }
.cal-d.has { background: #fff; border-color: #b6ccf5; box-shadow: 0 1px 4px rgba(23,64,143,.12); transition: transform .1s; }
.cal-d.has:hover { transform: translateY(-2px); border-color: var(--navy2); }
.cal-d.has .num { color: var(--navy2); }
.cal-d.today { outline: 2px solid var(--navy2); }
.cal-d .pill { min-width: 0; align-self: flex-start; font-size: .8rem; }
@media (max-width: 767px) { .cal-d { min-height: 64px; padding: 4px; } .cal-d small { display: none; } .cal-d .pill { font-size: .65rem; padding: 1px 4px; } }

/* taluka view */
.gp-scroll { max-height: 520px; overflow: auto; }
.gp-scroll thead th { position: sticky; top: 0; z-index: 1; }
.taluka-menu { max-height: 320px; overflow-y: auto; }
.svc-tabs .dropdown-toggle::after { margin-left: .4em; }
.svc-tabs .dropdown-item.active { background: var(--navy2); }

/* sheet editor */
.editor-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.editor-bar .status { font-size: .85rem; color: var(--muted); }
.editor-bar .status.dirty { color: #b45309; font-weight: 600; }
.editor-bar .status.ok { color: var(--good); font-weight: 600; }
.editor-bar .status.err { color: var(--bad); font-weight: 600; }
#sheet { margin-top: 12px; }
#sheet .jss_content { font-family: "Segoe UI", "Nirmala UI", Mangal, sans-serif; }
.gp-meta { font-size: .95rem; padding: 6px 10px; background: #eef3fd; border-radius: 8px; display: inline-block; }

/* table header filters + sort arrows */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { background: #cfe0f6 !important; }
th.sorted-asc::after { content: " B2"; font-size: .65em; }
th.sorted-desc::after { content: " BC"; font-size: .65em; }
.tf-btn { border: 0; background: transparent; padding: 0 2px; margin-left: 4px; color: #94a3b8; font-size: .75rem; line-height: 1; vertical-align: middle; border-radius: 4px; }
.tf-btn:hover { color: var(--navy2); background: rgba(23,64,143,.1); }
.tf-btn.on { color: #fff; background: var(--navy2); }
.tf-menu { position: absolute; z-index: 2000; width: 230px; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; box-shadow: 0 8px 24px rgba(15,42,95,.25); padding: 8px; font-size: .85rem; text-align: left; font-weight: 400; }
.tf-menu .tf-find { width: 100%; margin-bottom: 6px; font-size: .8rem; padding: 3px 6px; border: 1px solid #cfd8e6; border-radius: 4px; }
.tf-menu label { display: flex; gap: 6px; align-items: center; padding: 1px 2px; margin: 0; cursor: pointer; }
.tf-menu .tf-all { border-bottom: 1px solid var(--line); padding-bottom: 4px; margin-bottom: 4px; font-weight: 600; }
.tf-menu .tf-list { max-height: 220px; overflow: auto; }
.tf-menu .tf-foot { margin-top: 6px; text-align: right; }
@media print { .tf-btn { display: none; } }

/* home page */
.home-img { display: block; width: 100%; max-height: calc(100vh - 230px); object-fit: contain; border-radius: 8px; margin: 0 auto; }
.home-empty { padding: 60px 10px; }

/* sidebar dropdown (RTS) */
.sidebar .rts-toggle .chev { transition: transform .2s; font-size: .8rem; }
.sidebar .rts-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.sidebar .rts-toggle.active { background: rgba(255,255,255,.08); color: #fff; }
.sidebar .sub-link { padding: 9px 18px 9px 44px; font-size: .92rem; background: rgba(0,0,0,.14); border-bottom: 1px solid rgba(255,255,255,.04); }
.sidebar .sub-link.active { background: rgba(255,255,255,.18); color: #fff; box-shadow: inset 3px 0 0 #fbbf24; }

/* sidebar contact details (Marathi: taller glyphs, so more line height and space between the lines) */
.sidebar .brand-details { padding: 12px 18px 14px; border-bottom: 1px solid rgba(255,255,255,.12); font-size: .88rem; line-height: 1.6; }
.sidebar .bd-name { font-weight: 700; color: #fff; font-size: .81rem; line-height: 1.55; text-wrap: balance; }
.sidebar .bd-role { color: rgba(255,255,255,.85); font-size: .83rem; margin-top: 2px; }
.sidebar .bd-phone { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: #fbbf24; text-decoration: none; font-weight: 600; letter-spacing: .3px; }
.sidebar .bd-phone:hover { color: #fde68a; }
.sidebar { overflow-y: auto; }
@media print { .sidebar { display: none; } }

/* sidebar title (Marathi) */
.sidebar .brand span { font-size: .98rem; line-height: 1.4; white-space: pre-line; }
.sidebar .brand i { flex-shrink: 0; }

/* No browser header/footer (page URL, date, title) on printouts: browsers draw them inside the page margin,
   so the margin is 0 and the spacing is done with padding instead. */
@page { margin: 0; }
@media print { body { padding: 10mm 12mm; } body.printing-report { padding: 0; } }

/* print just one report (see printreport.js) */
#printArea { display: none; }
@media print {
    body.printing-report > *:not(#printArea) { display: none !important; }
    body.printing-report { background: #fff !important; }
    body.printing-report #printArea { display: block !important; padding: 12mm 14mm; color: #000; font-family: "Noto Sans Devanagari", "Nirmala UI", Mangal, "Segoe UI", sans-serif; }
    #printArea, #printArea * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    #printArea .pa-head { text-align: center; border-bottom: 2px solid #17408f; padding-bottom: 6px; margin-bottom: 8px; }
    #printArea .pa-title { font-size: 20px; font-weight: 800; color: #17408f; }
    #printArea .pa-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; font-size: 12px; }
    #printArea .pa-name { font-size: 15px; font-weight: 700; }
    #printArea .pa-dates span { margin-left: 16px; }
    #printArea .pa-table { width: 100%; border-collapse: collapse; font-size: 11px; }
    #printArea .pa-table th, #printArea .pa-table td { border: 1px solid #444; padding: 3px 5px; text-align: center; }
    #printArea .pa-table th { background: #dbe8f8 !important; }
    #printArea .pa-table tfoot td { background: #fde9dc !important; font-weight: 800; }
    #printArea .pa-table td.text-start, #printArea .pa-table th.text-start { text-align: left; }
    #printArea .pa-table thead { display: table-header-group; }
    #printArea .pa-table tr { break-inside: avoid; }
    #printArea .rank { width: 20px; height: 20px; font-size: 10px; }
}

/* report picture for Share (drawn off-screen, then turned into a JPG by sharereport.js) */
.share-area { position: fixed; left: -12000px; top: 0; width: 1120px; padding: 22px 26px; background: #fff; color: #000; font-family: "Noto Sans Devanagari", "Nirmala UI", Mangal, "Segoe UI", sans-serif; }
.share-area .pa-head { text-align: center; border-bottom: 3px solid #17408f; padding-bottom: 8px; margin-bottom: 10px; }
.share-area .pa-title { font-size: 26px; font-weight: 800; color: #17408f; }
.share-area .pa-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; font-size: 15px; }
.share-area .pa-name { font-size: 19px; font-weight: 700; }
.share-area .pa-dates span { margin-left: 22px; }
.share-area .pa-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.share-area .pa-table th, .share-area .pa-table td { border: 1px solid #444; padding: 5px 7px; text-align: center; }
.share-area .pa-table th { background: #dbe8f8; }
.share-area .pa-table tfoot td { background: #fde9dc; font-weight: 800; }
.share-area .pa-table td.text-start, .share-area .pa-table th.text-start { text-align: left; }
.share-modal img.preview { max-width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; }

/* title block on top of the whole-page picture */
.share-pagehead { text-align: center; padding: 8px 0 14px; margin-bottom: 14px; border-bottom: 3px solid #17408f; }
.share-pagehead .t { font-size: 28px; font-weight: 800; color: #17408f; }
.share-pagehead .n { font-size: 18px; font-weight: 700; margin-top: 4px; }
.share-pagehead .d { font-size: 14px; color: #475569; margin-top: 3px; }

/* Columns show/hide menu */
.col-hidden { display: none !important; }
.colmenu { max-height: 340px; overflow-y: auto; min-width: 230px; font-size: .88rem; }
.colmenu label { padding: 2px 4px; cursor: pointer; margin: 0; }
.colmenu label:hover { background: #eef3fd; border-radius: 4px; }

/* 2026-27 Plan: headings on three lines */
table.plan-h3 thead th { white-space: normal; line-height: 1.25; min-width: 78px; vertical-align: middle; }
.kpi .grade { margin-left: auto; align-self: center; min-width: 44px; height: 44px; padding: 0 6px; border-radius: 50%; background: rgba(255,255,255,.22); border: 2px solid rgba(255,255,255,.55); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 800; }
a.kpi-link { display: block; text-decoration: none; color: inherit; border-radius: 12px; transition: transform .12s; }
a.kpi-link:hover { transform: translateY(-2px); }
a.kpi-link.is-on .kpi { outline: 3px solid #fbbf24; outline-offset: 2px; }

/* Patravyavhar */
.cal-d.patra-sel { outline: 3px solid #fbbf24; outline-offset: 1px; background: #fffbeb; }
a.cal-d { cursor: pointer; }
a.cal-d:not(.has):hover { border-color: var(--navy2); }
.patra-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.patra-respond { background: #f4f8ff; border-radius: 10px; padding: 8px 6px; margin: 0; }
a.cal-d.patra-future { opacity: .55; }
.patra-meta span { display: inline-block; margin-right: 14px; }

/* Patravyavhar: the files of a letter read like a chat */
.patra-chat { display: flex; flex-direction: column; gap: 10px; padding: 10px; background: #eef3fb; border-radius: 12px; }
.patra-msg { display: flex; }
.patra-msg.is-letter { justify-content: flex-start; }
.patra-msg.is-response { justify-content: flex-end; }
.patra-bubble { max-width: min(88%, 760px); padding: 10px 12px; border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
/* received letter = blue, sent letter / reply = green */
.patra-msg.is-letter .patra-bubble { background: #cfe4ff; border: 1px solid #8fbdf5; border-top-left-radius: 4px; }
.patra-msg.is-response .patra-bubble { background: #c9f0c4; border: 1px solid #86d17d; border-top-right-radius: 4px; }
.patra-key { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 4px; }
.patra-key.recv { background: #cfe4ff; border: 1px solid #8fbdf5; }
.patra-key.sent { background: #c9f0c4; border: 1px solid #86d17d; }
.patra-composer { display: flex; justify-content: flex-end; }
@media (max-width: 575px) { .patra-bubble { max-width: 100%; } }

/* Patravyavhar: a letter is a collapsible section */
.patra-chev { display: inline-block; font-size: .8em; transition: transform .15s; }
.patra-toggle[aria-expanded="true"] .patra-chev { transform: rotate(90deg); }
.patra-toggle:hover h5 { color: var(--navy2); }

/* ================= phone / tablet ================= */
.sidebar { height: 100vh; height: 100dvh; }
.sidebar-backdrop { display: none; }
.table-responsive { -webkit-overflow-scrolling: touch; }
@media (max-width: 991px) {
    .sidebar { width: 272px; left: -300px; top: 0; }
    .sidebar.open { left: 0; box-shadow: 0 0 30px rgba(0,0,0,.4); }
    .sidebar-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 999; }
    body.nav-open { overflow: hidden; }
    .topbar { position: sticky; top: 0; z-index: 900; }
    .topbar .titles { flex: 1 1 0; min-width: 0; }
    .topbar h1 { overflow-wrap: anywhere; }
    .legend span { white-space: normal; }
    .legend .ms-auto { margin-left: 0 !important; }
    .card-h { overflow-wrap: anywhere; }
    .filters + .row, .cardx + .kpis, .filters + .kpis { margin-top: 1rem; }
    .kpis { margin-top: 0; }
    .gp-scroll { max-height: 70vh; }
}
@media (max-width: 767px) {
    .datecard { padding: 6px 10px; }
    .datecard i { font-size: 1.2rem; }
    .kpi { padding: 10px 12px; gap: 8px; }
    .kpi > i { font-size: 1.5rem; }
    .kpi .val { font-size: 1.3rem; }
    .kpi .lbl { font-size: .75rem; }
    .cardx { padding: 12px; }
    table.rep { font-size: .82rem; }
    table.rep th, table.rep td { padding: .3rem .4rem; }
    .svc-tabs .nav-link { padding: 6px 12px; }
    .band { padding: 10px 12px; }
    .patra-bubble { padding: 8px 10px; }
    .patra-chat { padding: 8px; }
    .patra-thumb { width: 52px; height: 52px; }
    .chart-box { height: 230px; }
}
@media (max-width: 575px) {
    .topbar h1 { font-size: 1.05rem; }
    .topbar .sub { font-size: .78rem; }
    .page { padding: 10px; }
    .cal { gap: 3px; } .cal-h { font-size: .7rem; padding: 3px 0; }
    .cal-d { min-height: 52px; padding: 3px; border-radius: 6px; } .cal-d .num { font-size: .8rem; }
    .cal-d .pill { display: block; font-size: .6rem; padding: 0 3px; text-align: center; }
    .patra-composer .btn { width: 100%; }
    .filters .btn, .cardx .btn-sm { --bs-btn-font-size: .82rem; }
}
/* touch screens: bigger tap targets, 16px inputs (no zoom on focus) */
@media (pointer: coarse) {
    .btn-sm { min-height: 38px; padding: .35rem .8rem; }
    .form-control-sm, .form-select-sm, .form-control, .form-select { min-height: 40px; font-size: 16px; }
    .sidebar .nav-link { padding-top: 13px; padding-bottom: 13px; }
    .svc-tabs .nav-link { padding-top: 8px; padding-bottom: 8px; }
    .tf-btn { min-width: 28px; min-height: 28px; }
}@media (max-width: 767px) {
    .topbar { gap: 8px 10px; }
    .topbar .titles { flex: 1 1 calc(100% - 64px); }   /* menu button + title on the first line ... */
    .datecard { flex: 1 1 100%; }                      /* ... the date card under them */
}
.patra-anchor { display: block; scroll-margin-top: 150px; }
.patra-thread { scroll-margin-top: 150px; }