/* ============================================================ Telangana GP Portal — Modern design system Calm, spacious government digital-service styling. ============================================================ */ /* ---- Typography: Noto Sans (DBIM / UX4G government standard), self-hosted woff2 (SIL OFL). Self-hosting keeps the strict CSP (font-src 'self') intact and makes screens AND the landscape PDF export render identically on every device. ---- */ @font-face{font-family:'Noto Sans';src:url('/fonts/NotoSans-Variable-10f8972e35790153b8d90eb14c1dcc91.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;} :root{ /* ---- Spring palette: fresh leaf-green primary with spring-season accents ---- */ --primary:#3f8f2e; /* spring leaf green */ --primary-dark:#2f6f22; --primary-soft:#e9f4e3; --primary-tint:#f3f9ef; --secondary:#d99a1e; /* daffodil / forsythia gold */ --background:#f5f8f4; --surface:#ffffff; --surface-2:#fafcf9; --text-primary:#1f2a24; --text-secondary:#647567; --text-muted:#94a89a; --border:#e5eae2; --border-strong:#d2dacc; /* Spring accents used across progress bars, workflow, charts & pills */ --spring-green:#57ad3a; /* fresh grass — progress fills */ --spring-mint:#7cc86a; /* light meadow */ --spring-sky:#4f9fc4; /* clear spring sky */ --spring-daffodil:#e0a92e; /* daffodil yellow */ --spring-blossom:#e07aa0; /* cherry blossom pink */ --spring-lilac:#9b7ed6; /* lilac */ --spring-coral:#df6d58; /* tulip coral */ --success:#3f8f2e; --success-soft:#e9f4e3; --warning:#c78a12; --warning-soft:#faf1dc; --danger:#d9534f; --danger-soft:#fbe9e8; --info:#2f8fc0; --info-soft:#e6f1f8; --neutral:#647567; --neutral-soft:#eef2ec; --radius:14px; --radius-sm:10px; --radius-pill:999px; --shadow-sm:0 1px 2px rgba(16,24,40,.04); --shadow:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04); --sidebar-w:250px; --header-h:58px; --font: "Noto Sans","Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,Arial,sans-serif; } *{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;} body{ background:var(--background); font-family:var(--font); color:var(--text-primary); font-size:15px; line-height:1.5; font-weight:400; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,h5,h6{font-weight:600;color:var(--text-primary);letter-spacing:-.01em;} a{color:var(--primary);text-decoration:none;} a:hover{color:var(--primary-dark);} .text-muted-2{color:var(--text-secondary)!important;} small,.small{font-size:.82rem;} /* ---------- Focus / accessibility ---------- */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible, textarea:focus-visible,.form-control:focus-visible,.form-select:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; } .form-control:focus,.form-select:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(15,118,110,.14); } .visually-hidden-focusable:focus{outline:2px solid var(--primary);} /* ============================================================ TOP HEADER ============================================================ */ /* wrapper must not form a containing block, so the sticky header's context is (full page height) rather than the short wrapper */ .topbar-wrap{display:contents;} .gp-topbar{ height:var(--header-h); background:var(--surface); border-bottom:1px solid var(--border); color:var(--text-primary); position:sticky;top:0;z-index:1030; box-shadow:var(--shadow-sm); } .gp-topbar .brand-title{font-weight:600;font-size:.95rem;line-height:1.15;color:var(--text-primary);} .gp-topbar .brand-sub{font-size:.74rem;color:var(--text-secondary);} .gp-emblem{ width:38px;height:38px;border-radius:10px; background:var(--primary-soft);color:var(--primary-dark); display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem; flex-shrink:0; } .gp-logo{height:40px;width:40px;object-fit:contain;flex-shrink:0;} .login-logo{height:72px;width:72px;object-fit:contain;} .nav-toggle{ border:1px solid var(--border);background:var(--surface);color:var(--text-primary); width:38px;height:38px;border-radius:9px;display:none;align-items:center;justify-content:center; } .topbar-user{line-height:1.15;} .topbar-user .u-name{font-weight:600;font-size:.85rem;} .topbar-user .u-sub{font-size:.72rem;color:var(--text-secondary);} /* ---- Admin header global search (typeahead) ---- */ .admin-search{position:relative;flex:1 1 auto;max-width:460px;margin:0 1rem;} .admin-search-icon{ position:absolute;left:12px;top:50%;transform:translateY(-50%); color:var(--text-muted);font-size:.95rem;pointer-events:none; } .admin-search-input{ width:100%;height:38px;padding:0 14px 0 34px; border:1px solid var(--border);border-radius:var(--radius-pill); background:var(--surface-2);color:var(--text-primary);font-size:.85rem; transition:border-color .15s ease, background .15s ease, box-shadow .15s ease; } .admin-search-input::placeholder{color:var(--text-muted);} .admin-search-input:focus{ outline:none;background:var(--surface);border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); } .admin-search-results{ position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:1040; background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm); box-shadow:var(--shadow-md,0 10px 30px rgba(0,0,0,.12)); max-height:min(60vh,420px);overflow-y:auto;padding:4px; } .admin-search-item{ display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer; } .admin-search-item.active,.admin-search-item:hover{background:var(--primary-tint);} .admin-search-item-icon{color:var(--primary-dark);font-size:1rem;flex-shrink:0;width:18px;text-align:center;} .admin-search-item-text{min-width:0;flex:1 1 auto;} .admin-search-item-label{font-weight:600;font-size:.85rem;color:var(--text-primary); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .admin-search-item-sub{font-size:.72rem;color:var(--text-secondary); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .admin-search-item-tag{ flex-shrink:0;font-size:.64rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase; color:var(--primary-dark);background:var(--primary-soft);border-radius:var(--radius-pill); padding:2px 8px; } .admin-search-empty{padding:12px 10px;font-size:.8rem;color:var(--text-muted);text-align:center;} @media (max-width:768px){ .admin-search{display:none;} } /* ============================================================ APP SHELL + SIDEBAR ============================================================ */ .gp-shell{display:flex;min-height:calc(100vh - var(--header-h));} .gp-sidebar{ width:var(--sidebar-w);flex-shrink:0; background:var(--surface); border-right:1px solid var(--border); padding:.5rem .5rem 2rem; overflow-y:auto; position:sticky;top:var(--header-h); height:calc(100vh - var(--header-h)); } .gp-sidebar .nav-head{ font-size:.64rem;text-transform:uppercase;letter-spacing:.09em; color:var(--text-muted);padding:.95rem .85rem .3rem;font-weight:600; } .gp-sidebar a,.gp-sidebar .grp-toggle{ display:flex;align-items:center;gap:.6rem;width:100%; color:var(--text-secondary);text-decoration:none; padding:.46rem .7rem;border-radius:8px;font-size:.845rem;font-weight:450; border:0;background:transparent;text-align:left;line-height:1.3; } .gp-sidebar a:hover,.gp-sidebar .grp-toggle:hover{background:var(--neutral-soft);color:var(--text-primary);} .gp-sidebar a.active{ background:var(--primary-tint);color:var(--primary-dark);font-weight:500; } .gp-sidebar a i,.gp-sidebar .grp-toggle i{font-size:.95rem;color:var(--text-muted);flex-shrink:0;} .gp-sidebar a.active i{color:var(--primary);} .gp-sidebar .grp-toggle{justify-content:space-between;color:var(--text-primary);font-weight:600;font-size:.78rem;} .gp-sidebar .grp-toggle .grp-label{display:flex;align-items:center;gap:.5rem;} .gp-sidebar .grp-toggle .chevron{transition:transform .2s;font-size:.85rem;color:var(--text-muted);} .gp-sidebar .grp-toggle[aria-expanded="true"] .chevron{transform:rotate(90deg);} .gp-sidebar .grp-items{padding-left:.2rem;} .gp-sidebar .grp-items a{font-size:.82rem;padding-left:1.55rem;color:var(--text-secondary);} .sidebar-sec-check{margin-left:auto;color:var(--success);font-size:.85rem;} .sidebar-sec-dot{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--border-strong);} .sidebar-sec-dot.p{background:var(--warning);} .gp-main{flex:1;min-width:0;padding:1.75rem;width:100%;} /* Global footer */ .gp-footer{ text-align:center;padding:1rem 1.25rem;font-size:.78rem; color:var(--text-secondary);background:var(--surface); border-top:1px solid var(--border); } /* mobile drawer */ .nav-backdrop{ position:fixed;inset:0;background:rgba(15,23,42,.4);z-index:1035; opacity:0;visibility:hidden;transition:opacity .2s; } body.nav-open .nav-backdrop{opacity:1;visibility:visible;} /* ============================================================ BUTTONS ============================================================ */ .btn{border-radius:10px;font-weight:500;font-size:.9rem;padding:.5rem .95rem;} .btn-lg{padding:.7rem 1.3rem;font-size:.98rem;} .btn-sm{padding:.34rem .7rem;font-size:.83rem;border-radius:8px;} .btn-primary,.btn-gp{background:var(--primary);border:1px solid var(--primary);color:#fff;} .btn-primary:hover,.btn-gp:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff;} .btn-outline-primary,.btn-outline-gp{border:1px solid var(--border-strong);background:var(--surface);color:var(--text-primary);} .btn-outline-primary:hover,.btn-outline-gp:hover{background:var(--neutral-soft);color:var(--text-primary);border-color:var(--border-strong);} .btn-gold{background:var(--surface);border:1px solid var(--primary);color:var(--primary-dark);} .btn-gold:hover{background:var(--primary-soft);color:var(--primary-dark);} .btn-ghost{background:transparent;border:1px solid transparent;color:var(--text-secondary);} .btn-ghost:hover{background:var(--neutral-soft);color:var(--text-primary);} .btn-outline-secondary{border:1px solid var(--border-strong);color:var(--text-secondary);background:var(--surface);} .btn-outline-secondary:hover{background:var(--neutral-soft);color:var(--text-primary);} .btn:disabled,.btn.disabled{opacity:.55;} /* ============================================================ CARDS / SURFACES ============================================================ */ .card,.surface{ background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);box-shadow:none; } .card{box-shadow:var(--shadow-sm);} .card-body{padding:1.25rem;} .page-title{font-size:1.7rem;font-weight:600;margin:0;} .page-sub{color:var(--text-secondary);font-size:.92rem;} .section-title{font-size:1.25rem;font-weight:600;} .eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--primary);font-weight:600;} /* ---------- Progress ---------- */ .progress{background:var(--neutral-soft);border-radius:var(--radius-pill);height:8px;overflow:hidden;} .progress-bar{background:var(--primary);border-radius:var(--radius-pill);} .progress.thin{height:6px;} .progress.tall{height:12px;} /* ============================================================ STATUS BADGES (dot + tinted text, never colour-only) ============================================================ */ .badge-status{ display:inline-flex;align-items:center;gap:.4rem; font-weight:600;font-size:.72rem;padding:.28rem .6rem;border-radius:var(--radius-pill); background:var(--neutral-soft);color:var(--neutral);letter-spacing:.01em; } .badge-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;} .st-NOT_STARTED{background:var(--neutral-soft);color:#5b6773;} .st-DRAFT{background:var(--warning-soft);color:var(--warning);} .st-IN_PROGRESS{background:var(--info-soft);color:var(--info);} .st-COMPLETED{background:var(--success-soft);color:var(--success);} .st-SUBMITTED{background:var(--info-soft);color:var(--info);} .st-READY_TO_SUBMIT{background:var(--success-soft);color:var(--success);} .st-UNDER_REVIEW{background:#f0eafa;color:var(--spring-lilac);} .st-APPROVED{background:var(--success-soft);color:var(--success);} .st-NEEDS_CORRECTION{background:var(--danger-soft);color:var(--danger);} /* ============================================================ DASHBOARD ============================================================ */ .welcome-head .gp-name{font-size:1.55rem;font-weight:600;line-height:1.2;} .meta-chip{ display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem;color:var(--text-secondary); background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-pill);padding:.25rem .7rem; } .progress-panel{background:linear-gradient(180deg,var(--primary-tint),var(--surface));border:1px solid var(--border);} .progress-panel .big-pct{font-size:2.4rem;font-weight:600;line-height:1;color:var(--primary-dark);} .stat-chip{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.9rem 1rem; } .stat-chip .n{font-size:1.4rem;font-weight:600;line-height:1;} .stat-chip .l{font-size:.78rem;color:var(--text-secondary);margin-top:.25rem;} .stat-chip .dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:.35rem;} .part-row{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:1.15rem 1.25rem;transition:border-color .15s; } .part-row:hover{border-color:var(--border-strong);} .part-row .part-eyebrow{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--primary);font-weight:600;} .part-row .part-title{font-size:1.02rem;font-weight:600;margin:.1rem 0;} .part-row .part-desc{font-size:.82rem;color:var(--text-secondary);} .activity-item{display:flex;gap:.75rem;padding:.65rem 0;border-bottom:1px solid var(--border);} .activity-item:last-child{border-bottom:0;} .activity-item .ai-icon{ width:30px;height:30px;border-radius:8px;background:var(--neutral-soft);color:var(--text-secondary); display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.85rem; } .next-item{ display:flex;align-items:center;justify-content:space-between;gap:.75rem; padding:.75rem .9rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2); } /* ============================================================ MOBILE REFINEMENTS ============================================================ */ /* Status pills must never break across lines. Without this, "NOT STARTED" and "IN PROGRESS" wrap to two lines on a phone and stretch the whole row. Applies to the dashboard, "Sections to complete" and "Continue where you left off" — they all share .badge-status. */ .badge-status{white-space:nowrap;} /* .next-item is a title on the left + pill/button on the right. On a phone there isn't room for both, so the right-hand group gets crushed. Below the sm breakpoint, let it drop onto its own full-width row under the title. */ @media (max-width: 575.98px){ .next-item{flex-wrap:wrap;align-items:flex-start;} .next-item > :last-child{width:100%;justify-content:space-between;} } /* Three-Year Budget Summary: the table sits in .table-responsive, but with no minimum column width it shrinks to fit and wraps instead of scrolling — "2026-27" broke into "2026-" / "27". Keeping the year headers and figures on one line forces the wrapper to scroll horizontally, which is what it is for. Department names may still wrap, but get a floor so they stay readable. */ #budgetModal table th, #budgetModal table td{white-space:nowrap;} #budgetModal table td.small{white-space:normal;min-width:10rem;} /* ============================================================ FORM PAGE ============================================================ */ .breadcrumb-nav{font-size:.82rem;color:var(--text-secondary);} .breadcrumb-nav a{color:var(--text-secondary);} .breadcrumb-nav a:hover{color:var(--primary);} .breadcrumb-nav .sep{color:var(--text-muted);margin:0 .35rem;} .form-head{margin-bottom:1.1rem;} .form-head .fh-title{font-size:1.45rem;font-weight:600;margin:.15rem 0 .1rem;} .form-head .fh-part{font-size:.85rem;color:var(--text-secondary);} .subsection{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:1.25rem 1.35rem;margin-bottom:1.1rem;scroll-margin-top:calc(var(--header-h) + 12px); } .subsection > .ss-head{display:flex;align-items:baseline;gap:.6rem;margin-bottom:1rem;} .subsection .ss-num{ font-size:.72rem;font-weight:700;color:var(--primary);background:var(--primary-soft); border-radius:7px;padding:.15rem .45rem;letter-spacing:.03em; } .subsection .ss-title{font-size:1.02rem;font-weight:600;margin:0;} .subsection .ss-desc{font-size:.8rem;color:var(--text-secondary);margin-top:.15rem;} /* fields */ .field-label{font-size:.82rem;font-weight:500;color:var(--text-primary);margin-bottom:.3rem;display:block;} .field-label .req{color:var(--danger);margin-left:.15rem;} .form-control,.form-select{ border:1px solid var(--border-strong);border-radius:10px; min-height:44px;font-size:.92rem;color:var(--text-primary);background:var(--surface); padding:.5rem .75rem; } .form-control::placeholder{color:var(--text-muted);} .form-control-sm,.form-select-sm{min-height:40px;font-size:.88rem;border-radius:9px;padding:.4rem .6rem;} textarea.form-control{min-height:auto;} .field-help{font-size:.76rem;color:var(--text-secondary);margin-top:.28rem;} .field-error{font-size:.78rem;color:var(--danger);margin-top:.28rem;display:flex;align-items:center;gap:.3rem;} .is-invalid,.form-control.is-invalid,.form-select.is-invalid{border-color:var(--danger);} /* ---------- Tables ---------- */ /* Long Part II/III grids scroll within a bounded region (both axes) instead of stretching the whole page; the header row stays pinned while scrolling. */ .data-table-wrap{border:1px solid var(--border);border-radius:12px;overflow:auto;max-height:72vh;} table.gp-table{width:100%;margin:0;border-collapse:separate;border-spacing:0;} table.gp-table th{ background:var(--surface-2);font-size:.74rem;font-weight:600;color:var(--text-secondary); text-transform:none;letter-spacing:.01em;padding:.6rem .65rem;border-bottom:1px solid var(--border); white-space:normal;vertical-align:bottom;text-align:left;min-width:70px; } table.gp-table thead th{position:sticky;top:0;z-index:3;} table.gp-table td{padding:.5rem .55rem;border-bottom:1px solid var(--border);vertical-align:middle;} table.gp-table tbody tr:last-child td{border-bottom:0;} table.gp-table .total-row{background:var(--primary-tint);font-weight:600;} table.gp-table .row-index{color:var(--text-muted);font-size:.8rem;width:34px;text-align:center;} table.gp-table .computed-cell{background:var(--primary-tint);font-weight:500;} /* group sub-heading row (e.g. SERP Farm/Non-Farm/Livestock Livelihoods) */ table.gp-table .group-row td.group-heading{ background:var(--surface-2);font-weight:700;color:var(--text-primary);font-size:.8rem;padding:.5rem .65rem; } /* static reference value (Type of activity / Unit / Unit Cost) — read-only, not an input */ table.gp-table .ref-cell{ display:inline-block;color:var(--text-secondary);font-size:.82rem;font-weight:500;white-space:nowrap; } /* scoped-out cell: future-year column, or financial cell on a % row — greyed, not editable */ table.gp-table .scoped-out{color:var(--text-secondary);opacity:.55;font-weight:400;} table.gp-table th.col-future, table.gp-table td.col-future{background:var(--surface-2);} .future-tag{display:inline-block;margin-left:.35rem;font-size:.62rem;font-weight:600;text-transform:uppercase; letter-spacing:.04em;color:var(--text-secondary);background:var(--surface);border:1px solid var(--border); border-radius:10px;padding:0 .4rem;vertical-align:middle;} .row-del{border:1px solid var(--border);background:var(--surface);color:var(--danger);border-radius:8px; width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;} .row-del:hover{background:var(--danger-soft);} .add-row-btn{border:1px dashed var(--border-strong);background:var(--surface-2);color:var(--primary-dark); border-radius:10px;padding:.5rem .9rem;font-weight:500;font-size:.86rem;} .add-row-btn:hover{background:var(--primary-soft);border-color:var(--primary);} /* ---------- Section navigator ---------- */ .section-nav{position:sticky;top:calc(var(--header-h) + 12px);} .section-nav .sn-title{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-weight:600;margin-bottom:.4rem;} .section-nav a{display:block;padding:.35rem .6rem;border-radius:8px;font-size:.82rem;color:var(--text-secondary);border-left:2px solid transparent;} .section-nav a:hover{background:var(--neutral-soft);color:var(--text-primary);} /* ---------- Sticky action bar ---------- */ .sticky-actions{ position:sticky;bottom:0;background:var(--surface);border:1px solid var(--border); border-radius:14px;padding:.7rem 1rem;margin-top:.5rem; box-shadow:0 -1px 12px rgba(16,24,40,.05); display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap; padding-bottom:calc(.7rem + env(safe-area-inset-bottom)); } .save-status{font-size:.8rem;color:var(--text-secondary);display:inline-flex;align-items:center;gap:.4rem;} .save-status .ok{color:var(--success);} /* ============================================================ TOASTS ============================================================ */ .toast-stack{position:fixed;right:16px;bottom:16px;z-index:1080;display:flex;flex-direction:column;gap:.5rem;max-width:340px;} .gp-toast{ background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--primary); border-radius:10px;box-shadow:var(--shadow);padding:.7rem .9rem;font-size:.86rem;color:var(--text-primary); display:flex;align-items:flex-start;gap:.55rem;animation:toastin .25s ease; } .gp-toast.ok{border-left-color:var(--success);} .gp-toast.err{border-left-color:var(--danger);} .gp-toast.warn{border-left-color:var(--warning);} .gp-toast i{font-size:1rem;margin-top:1px;} .gp-toast.ok i{color:var(--success);} .gp-toast.err i{color:var(--danger);} .gp-toast.warn i{color:var(--warning);} @keyframes toastin{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}} /* ============================================================ LOGIN ============================================================ */ .login-hero{min-height:100vh;display:flex;align-items:center;justify-content:center; background:var(--background);padding:1rem;} .login-card{max-width:440px;width:100%;border-radius:18px;border:1px solid var(--border);box-shadow:var(--shadow);} .login-card .nav-pills .nav-link{border-radius:9px;font-size:.88rem;font-weight:500;color:var(--text-secondary);} .login-card .nav-pills .nav-link.active{background:var(--primary-soft);color:var(--primary-dark);} /* ============================================================ ADMIN sidebar uses same shell; keep a slightly distinct tone ============================================================ */ .gp-sidebar.admin a.active{background:var(--primary-tint);color:var(--primary-dark);} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:991.98px){ .nav-toggle{display:inline-flex;} .gp-sidebar{ position:fixed;left:0;top:0;height:100vh;z-index:1040; transform:translateX(-100%);transition:transform .25s ease; box-shadow:0 10px 40px rgba(16,24,40,.18);padding-top:.75rem; } body.nav-open .gp-sidebar{transform:translateX(0);} .gp-main{padding:1.1rem;} .section-nav{display:none;} } /* table -> stacked cards on small screens */ @media (max-width:767.98px){ table.gp-table.responsive-cards thead{display:none;} table.gp-table.responsive-cards, table.gp-table.responsive-cards tbody, table.gp-table.responsive-cards tr, table.gp-table.responsive-cards td{display:block;width:100%;} table.gp-table.responsive-cards tr{ border:1px solid var(--border);border-radius:12px;margin-bottom:.75rem;padding:.4rem .6rem;background:var(--surface); } table.gp-table.responsive-cards td{border-bottom:1px solid var(--border);padding:.5rem .1rem;} table.gp-table.responsive-cards tr td:last-child{border-bottom:0;} table.gp-table.responsive-cards td::before{ content:attr(data-label);display:block;font-size:.72rem;color:var(--text-secondary); font-weight:500;margin-bottom:.25rem; } table.gp-table.responsive-cards td.row-index{display:none;} table.gp-table.responsive-cards td.row-index::before{content:none;} .page-title{font-size:1.4rem;} .sticky-actions{flex-direction:column;align-items:stretch;} .sticky-actions .sa-group{display:flex;gap:.5rem;} .sticky-actions .sa-group .btn{flex:1;} } @media print{ .gp-sidebar,.gp-topbar,.sticky-actions,.no-print,.nav-backdrop,.toast-stack,.section-nav{display:none!important;} .gp-main{padding:0;max-width:none;} body{background:#fff;} } /* ============================================================ Compatibility styles for admin/print/readonly templates (keep existing pages consistent with the new design system) ============================================================ */ .form-section-title{ font-size:1.15rem;font-weight:600;color:var(--text-primary); border-left:3px solid var(--primary);padding-left:.6rem; } .stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);} .stat-card .num,.num{font-size:1.4rem;font-weight:600;line-height:1;color:var(--text-primary);} /* overflow:hidden clips the accent bar to the card's rounded corners — a 3px-tall bar cannot render the 14px radius itself, so without clipping its square ends poke past the curve */ .section-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;} .accent-bar{height:3px;background:var(--primary);} /* Status-coloured top bar: grey = not started, blue = in progress, green = completed. Deliberately the LIGHT end of each hue (spring tints, not the saturated base) so a page of untouched sections reads as a calm work list rather than a wall of alarm. */ .section-card.status-NOT_STARTED .accent-bar{background:var(--border-strong);} .section-card.status-DRAFT .accent-bar{background:var(--spring-daffodil);} .section-card.status-IN_PROGRESS .accent-bar{background:var(--spring-sky);} .section-card.status-COMPLETED .accent-bar{background:var(--spring-mint);} .section-card.status-SUBMITTED .accent-bar{background:var(--spring-sky);} /* --- Field-level "still to fill" marker, inside the data-entry form ------------------------------ A soft red inset edge on each input that still needs a value, plus a per-card count. Deliberately an EDGE rather than a ring or a fill: a fresh section holds hundreds of empty inputs and glowing every one of them reads as breakage instead of as work. Auto-computed, read-only, hidden (showIf) and free-text remarks fields are never marked, so the marks match exactly the fields that count toward the section's completion %. */ .field-pending{box-shadow:inset 2px 0 0 rgba(217,83,79,.42);background:#fffbfb;} .field-pending:focus{background:#fff;} /* Amber = value restored from an auto-saved draft, i.e. on screen but NOT saved yet. Distinct from the red "still to fill" marker; the two can never collide because a restored cell always holds a value. Wins over .field-pending if both were ever applied. */ .field-draft,.field-draft.field-pending{box-shadow:inset 2px 0 0 var(--spring-daffodil);background:#fffdf4;} .field-draft:focus{background:#fff;} .card-pending{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;font-size:.7rem; padding:.2rem .5rem;border-radius:var(--radius-pill);background:var(--danger-soft);color:var(--danger);} .card-pending::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;} .card-pending.is-done{background:var(--success-soft);color:var(--success);} /* Notice bars (unsaved-draft, view-only API source): a white card with a coloured hairline and a soft glow in the same hue, instead of a solid tinted block. Matches the card language used everywhere else on the portal and keeps the text crisp on white. */ .notice-bar{background:var(--surface);border:1px solid;border-radius:var(--radius-sm);} .notice-amber{border-color:var(--spring-daffodil);color:var(--warning); box-shadow:0 0 0 3px rgba(224,169,46,.12), var(--shadow-sm);} .notice-blue{border-color:var(--spring-sky);color:var(--info); box-shadow:0 0 0 3px rgba(79,159,196,.12), var(--shadow-sm);} /* A repeatable list with no rows yet: same soft-red language as an empty field, applied to the whole block, since there is no input to mark. Clears the moment a row is added or the GP declares the list "Not present in this GP". */ .list-empty-pending{box-shadow:inset 2px 0 0 rgba(217,83,79,.42);background:#fffbfb; border-radius:var(--radius-sm);padding:.5rem .65rem;} /* An MLF (master-list) summary row whose hidden edit-panel still has an empty required cell. The soft-red edge + a right-aligned "Incomplete" tag tell the GP which record to open and finish, so a master-list reads as pending like every other section instead of looking done. */ .list-row-incomplete>td{background:#fffbfb;box-shadow:inset 2px 0 0 rgba(217,83,79,.42);} .list-row-incomplete .js-detail-edit::after{content:"Incomplete";margin-left:.4rem;font-size:.66rem; font-weight:600;color:var(--danger);} /* pending counter beside the "x of y completed" line */ .pending-chip{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.72rem; padding:.28rem .6rem;border-radius:var(--radius-pill);background:var(--neutral-soft);color:#5b6773;} .pending-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;} .fixed-table th,.repeatable-table th{background:var(--surface-2);font-size:.76rem;color:var(--text-secondary);font-weight:600;} .total-row{background:var(--primary-tint);font-weight:600;} /* Print/read-only plan tables: keep short numeric columns (Unit, Unit Cost, year Phy/Fin) on ONE line so figures like 0.20 / 10.00 / Nos. don't wrap to a double row. Long text columns (Activity, Scheme) still wrap and absorb the row width. */ td.ro-nw,th.ro-nw{white-space:nowrap;} /* ---------- Read-only / print field blocks as a bordered two-pair table ---------- Turns the flat key/value list (Infrastructure etc.) into a proper table: green banded block headings, lighter sub-group bands, striped rows, right-aligned bold values, and clearly lifted-out sub-total rows so "Total …" figures no longer read as just more data. */ table.ro-fieldtable{table-layout:fixed;} table.ro-fieldtable th,table.ro-fieldtable td{padding:.32rem .6rem;vertical-align:middle;font-size:.82rem;border-color:var(--border);} table.ro-fieldtable col,table.ro-fieldtable .ro-ft-label{width:30%;} table.ro-fieldtable .ro-ft-val{width:20%;} .ro-ft-label{font-weight:500;color:var(--text-secondary);background:var(--surface);text-align:left;} .ro-ft-val{font-weight:600;color:var(--text-primary);text-align:right;font-variant-numeric:tabular-nums;} .ro-ft-empty{background:repeating-linear-gradient(135deg,transparent,transparent 6px,rgba(0,0,0,.02) 6px,rgba(0,0,0,.02) 12px);} /* block heading: soft green band (Part I palette) with a green base rule — weight without a dark fill */ tr.ro-ft-block>td{background:var(--primary-soft,#e9f4e3);color:var(--primary-dark,#2f6f22);font-weight:700; font-size:.8rem;letter-spacing:.02em;text-transform:uppercase;padding:.4rem .6rem; border-bottom:1px solid var(--primary,#3f8f2e);} /* sub-group heading: paler tint, green text — one step lighter than the block band */ tr.ro-ft-sub>td{background:var(--primary-tint,#f3f9ef);color:var(--primary-dark,#2f6f22);font-weight:600; font-size:.78rem;padding:.3rem .6rem;} /* (sub-)total row: tint band with a green top rule so a "Total …" figure reads as a summary lifted out of the plain data rows, not just another cell. */ tr.ro-ft-totalrow>th,tr.ro-ft-totalrow>td{background:var(--primary-tint,#f3f9ef)!important;color:var(--primary-dark,#2f6f22)!important; font-weight:700!important;border-top:1.5px solid var(--primary,#3f8f2e);} /* total values stay right-aligned + tabular, same column position as every other value */ @media print{ table.ro-fieldtable th,table.ro-fieldtable td{border-color:#c9d6cc!important;} tr.ro-ft-block>td{background:#e9f4e3!important;color:#2f6f22!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;} tr.ro-ft-sub>td,tr.ro-ft-totalrow>th,tr.ro-ft-totalrow>td{background:#f3f9ef!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;} } .computed-cell{background:var(--primary-tint);} .text-purple{color:var(--spring-lilac)!important;} .table>thead{--bs-table-bg:var(--surface-2);} .nav-tabs .nav-link{color:var(--text-secondary);font-weight:500;} .nav-tabs .nav-link.active{color:var(--primary-dark);font-weight:600;} .gp-topbar .btn-gold{background:var(--surface);border:1px solid var(--border);color:var(--text-primary);} .gp-topbar .btn-gold:hover{background:var(--neutral-soft);} /* ---------- Dashboard drill cards + workflow bar ---------- */ .unit-card{transition:box-shadow .15s,transform .15s,border-color .15s;cursor:pointer;} .unit-card:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--primary);} .wf-bar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:#eef2ec;} .wf-bar>div{height:100%;} /* single completion bar: soft sage track, spring-green fill (progress = % done) */ .completion-bar{background:#eaf0e5;} .completion-bar .progress-bar{background:var(--spring-green);} /* spring completion fill also for the Data Recording Progress panel bars */ .progress.completion-bar .progress-bar{background:var(--spring-green);} /* light pill for the completion % / GP status on cards */ .status-pill{display:inline-block;padding:.15rem .55rem;border-radius:999px;font-size:.72rem;font-weight:600; background:#eef2ec;color:#4a5a4c;white-space:nowrap;} /* click-to-sort table headers (JS adds sorted-asc / sorted-desc to the active column) */ table.sortable thead th{user-select:none;} table.sortable thead th.sorted-asc::after{content:" \2191";color:var(--primary);font-weight:700;} table.sortable thead th.sorted-desc::after{content:" \2193";color:var(--primary);font-weight:700;} /* ============================================================ ANALYSIS NAVIGATION CARDS Department -> Sub-section -> Sub-heading pickers. Each card carries a soft identity accent (cycled) so a dense grid reads as varied but ordered; the count is the visual anchor, the accent rail confirms the hover target. ============================================================ */ .analysis-head{display:flex;align-items:center;gap:.9rem;margin-bottom:1.25rem;} .analysis-head .head-ic{ width:46px;height:46px;flex:none;border-radius:13px;display:inline-flex;align-items:center;justify-content:center; background:var(--primary-soft);color:var(--primary);font-size:1.4rem; } .analysis-head h4{margin:0;line-height:1.15;} .analysis-crumb{font-size:.82rem;color:var(--text-secondary);margin-bottom:.5rem;} .analysis-crumb a{color:var(--text-secondary);} .analysis-crumb a:hover{color:var(--primary);} .nav-card{ --accent:var(--primary);--accent-soft:var(--primary-soft); display:flex;flex-direction:column; position:relative;border:1px solid var(--border-strong);border-radius:var(--radius); background:var(--surface);box-shadow:var(--shadow);overflow:hidden; transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease; } .nav-card::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent); transform:scaleY(0);transform-origin:top;transition:transform .2s ease; } .nav-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--accent);} .nav-card:hover::before{transform:scaleY(1);} .nav-card .card-body{padding:1.15rem 1.2rem;display:flex;flex-direction:column;height:100%;} .nav-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem;} .nav-ic{ width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center; background:var(--accent-soft);color:var(--accent);font-size:1.2rem; } .nav-arrow{color:var(--text-muted);font-size:1.05rem;transition:transform .18s ease,color .18s ease;} .nav-card:hover .nav-arrow{color:var(--accent);transform:translateX(4px);} .nav-title{ font-weight:600;color:var(--text-primary);font-size:1.02rem;line-height:1.3; margin-bottom:.55rem;min-height:2.6em;text-wrap:balance; } .nav-metrics{margin-top:.1rem;} .nav-num{font-weight:700;font-size:1.55rem;line-height:1;color:var(--accent);letter-spacing:-.02em;font-variant-numeric:tabular-nums;} .nav-num-label{font-size:.78rem;color:var(--text-secondary);margin-left:.35rem;} .nav-sub{font-size:.8rem;color:var(--text-secondary);margin-top:.4rem;} .nav-sub .fw-semibold{color:var(--text-primary);font-variant-numeric:tabular-nums;} /* identity-accent cycle (decorative, not semantic) */ .nav-card.accent-0{--accent:var(--spring-green);--accent-soft:#e7f4e1;} .nav-card.accent-1{--accent:var(--spring-sky);--accent-soft:#e3f0f7;} .nav-card.accent-2{--accent:var(--spring-daffodil);--accent-soft:#faf0d7;} .nav-card.accent-3{--accent:var(--spring-lilac);--accent-soft:#efeafb;} .nav-card.accent-4{--accent:var(--spring-coral);--accent-soft:#fbe7e2;} .nav-card.accent-5{--accent:var(--spring-blossom);--accent-soft:#fbe6ee;} .nav-card.accent-6{--accent:#2f9e8f;--accent-soft:#e0f2ef;} @media (prefers-reduced-motion:reduce){ .nav-card,.nav-card::before,.nav-arrow{transition:none;} .nav-card:hover{transform:none;} } /* ---- KPI tiles (headline scope totals on the matrix page) ---- */ .kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:.7rem;} .kpi-tile{ --accent:var(--primary);--accent-soft:var(--primary-soft); position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm); padding:.8rem 1rem .85rem;overflow:hidden; } .kpi-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);} .kpi-label{font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary);font-weight:600; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .kpi-value{font-size:1.55rem;font-weight:700;line-height:1.15;color:var(--text-primary);letter-spacing:-.02em; font-variant-numeric:tabular-nums;margin-top:.15rem;} .kpi-unit{font-size:.73rem;color:var(--text-muted);margin-top:.05rem;} .kpi-tile.accent-0{--accent:var(--spring-green);} .kpi-tile.accent-1{--accent:var(--spring-sky);} .kpi-tile.accent-2{--accent:var(--spring-daffodil);} .kpi-tile.accent-3{--accent:var(--spring-lilac);} .kpi-tile.accent-4{--accent:var(--spring-coral);} .kpi-tile.accent-5{--accent:var(--spring-blossom);} .kpi-tile.accent-6{--accent:#2f9e8f;} /* ---- Ranked-comparison chart: cap width so a few bars don't stretch full-bleed ---- */ .analysis-chart{max-width:820px;} /* ---- Matrix table: crisp headers, highlighted totals band, quiet zebra hover ---- */ .gp-matrix{border-collapse:separate;border-spacing:0;} .gp-matrix thead th{ font-size:.71rem;letter-spacing:.03em;text-transform:uppercase;color:var(--text-secondary);font-weight:600; border-bottom:1px solid var(--border-strong)!important;padding:.55rem .8rem;vertical-align:bottom; } .gp-matrix thead th>.fw-semibold{font-size:.82rem;color:var(--text-primary);} .gp-matrix thead th .small{text-transform:none;letter-spacing:0;} .gp-matrix tbody td{padding:.55rem .8rem;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums;} .gp-matrix tbody tr[data-pinned] td{background:var(--primary-tint)!important;font-weight:700;color:var(--text-primary); border-bottom:1px solid var(--border-strong);} .gp-matrix tbody tr.data-row:hover{background:var(--surface-2);} .gp-matrix tbody tr.data-row:hover td:first-child{background:var(--surface-2)!important;} .gp-matrix tbody tr.data-row td a{color:var(--primary);font-weight:500;} .gp-matrix tbody tr.data-row td a:hover{color:var(--primary-dark);text-decoration:underline;} /* in-cell data bar: soft accent fill, grows from the right under the right-aligned number (width/colour set per cell in app.js -> initMatrixBars). Composites over row hover tint. */ .gp-matrix td.bar-cell{ background:linear-gradient(270deg, var(--cell-fill,transparent) 0 var(--bar,0%), transparent var(--bar,0%)) no-repeat; } /* ---- Drill "By District" table: match the matrix table's crisp header + spacing ---- */ #drillTable{border-collapse:separate;border-spacing:0;} #drillTable thead th{ font-size:.71rem;letter-spacing:.03em;text-transform:uppercase;color:var(--text-secondary);font-weight:600; border-bottom:1px solid var(--border-strong);padding:.55rem .8rem; } #drillTable tbody td{padding:.6rem .8rem;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums;} #drillTable tbody tr:last-child td{border-bottom:0;} #drillTable tbody tr:hover td{background:var(--surface-2);} /* ===== Encrypted auto-save draft ===== */ .gp-draft-chip { position: fixed; right: 16px; bottom: 16px; z-index: 1080; background: #1a7f37; color: #fff; font-size: .8rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.25); opacity: .96; pointer-events: none; } .gp-draft-chip[hidden] { display: none; } .gp-draft-badge { vertical-align: middle; }