:root {
    color-scheme: light;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    color: #19233b;
    background: #f5f7fb;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    --ink: #19233b;
    --muted: #778198;
    --line: #e9ecf3;
    --indigo: #5146d8;
}

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: #f5f7fb; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 5; display: flex; width: 252px; flex-direction: column; padding: 26px 17px 15px; overflow-y: auto; overscroll-behavior: contain; background: #171c35; color: #fff; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 18%) transparent; }
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-thumb { border-radius: 5px; background: rgb(255 255 255 / 18%); }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 8px; color: #fff; font-size: 17px; font-weight: 800; letter-spacing: -.55px; }
.brand-mark { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid rgb(255 255 255 / 15%); border-radius: 12px; background: linear-gradient(145deg, #7467ff, #5146d8); box-shadow: 0 5px 16px rgb(79 68 212 / 35%); }
.brand-mark svg { width: 23px; height: 23px; }
.brand-light { color: #a9a4ff; }
.brand small { display: block; margin-top: 3px; color: #8289a7; font-size: 8px; font-weight: 700; letter-spacing: 1.65px; }
.sidebar-label { margin: 42px 10px 13px; color: #8289a7; font-size: 9px; font-weight: 800; letter-spacing: 1.5px; }
.sidebar-nav { display: grid; gap: 5px; }
.nav-item { position: relative; display: flex; min-height: 45px; align-items: center; gap: 12px; padding: 0 12px; border-radius: 9px; color: #aeb4ca; font-size: 12px; font-weight: 600; transition: background .15s, color .15s; }
.nav-item svg { width: 18px; height: 18px; color: #8991af; }
.nav-item:hover { background: rgb(255 255 255 / 6%); color: #fff; }
.nav-item.active { background: linear-gradient(100deg, rgb(112 101 255 / 25%), rgb(112 101 255 / 12%)); color: #fff; }
.nav-item.active::before { position: absolute; inset: 10px auto 10px 0; width: 3px; border-radius: 0 4px 4px 0; background: #8f86ff; content: ""; }
.nav-item.active svg { color: #a69fff; }
.sidebar-bottom { margin-top: auto; }
.help-card { display: grid; gap: 8px; margin: 0 2px 16px; padding: 14px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 11px; background: linear-gradient(145deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 2%)); }
.help-icon { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid rgb(168 160 255 / 35%); border-radius: 50%; color: #b5afff; font-size: 13px; font-weight: 800; }
.help-card strong { font-size: 11px; }
.help-card > span:last-child { color: #9da4bd; font-size: 10px; line-height: 1.6; }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 14px 4px 3px; border-top: 1px solid rgb(255 255 255 / 9%); }
.avatar { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid rgb(255 255 255 / 16%); border-radius: 11px; background: #343b63; color: #dcd9ff; font-size: 13px; font-weight: 800; }
.user-details { display: grid; min-width: 0; flex: 1; gap: 3px; }
.user-details strong { overflow: hidden; color: #f1f2f8; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.user-details small { color: #929ab3; font-size: 10px; }
.signout-button { display: grid; width: 31px; height: 31px; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #9da4bd; cursor: pointer; }
.signout-button:hover { background: rgb(255 255 255 / 8%); color: #fff; }
.signout-button svg { width: 17px; height: 17px; }

.main-shell { min-height: 100vh; margin-left: 252px; }
.topbar { position: sticky; top: 0; z-index: 4; display: flex; min-height: 62px; align-items: center; justify-content: space-between; padding: 0 36px; border-bottom: 1px solid #eaedf3; background: rgb(255 255 255 / 94%); backdrop-filter: blur(12px); }
.topbar-context, .topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-label { color: #9aa2b3; font-size: 9px; font-weight: 800; letter-spacing: 1.1px; }
.topbar-divider { color: #c5cad5; }
.topbar-context strong { color: #3a435b; font-size: 11px; font-weight: 700; }
.topbar-right { color: #68748b; font-size: 10px; }
.status-dot, .period-chip span { width: 7px; height: 7px; border-radius: 50%; background: #3dbb81; box-shadow: 0 0 0 3px #e6f7ef; }
.topbar-date { margin-left: 15px; padding-left: 15px; border-left: 1px solid #e8ebf1; color: #8c94a6; }
.container { width: min(1440px, 100%); margin: 0 auto; padding: 32px 36px 48px; }
.auth-container { display: grid; min-height: 100vh; align-content: center; justify-items: center; gap: 0; margin: 0 auto; padding: 36px 24px; }
.auth-feedback { width: min(1080px, 100%); }
.auth-feedback:empty { display: none; }

.page-heading, .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
h1 { margin: 3px 0 6px; font-size: clamp(27px, 4vw, 34px); letter-spacing: -1px; }
h2 { margin: 0; font-size: 18px; }
h3 { margin: 0 0 14px; font-size: 16px; }
p { margin: 0; }
.eyebrow { color: #5268a7; font-size: 10px; font-weight: 800; letter-spacing: 1.35px; }
.muted { color: var(--muted); }
.small { margin-top: 4px; font-size: 12px; }
.button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 8px; padding: 8px 13px; border: 1px solid #dfe3eb; border-radius: 8px; background: #fff; color: #414a60; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: transform .15s, box-shadow .15s, background .15s; }
.button:hover { transform: translateY(-1px); background: #fafaff; box-shadow: 0 4px 11px rgb(35 43 76 / 7%); }
.button-primary { border-color: #5146d8; background: #5146d8; color: #fff; box-shadow: 0 4px 12px rgb(81 70 216 / 19%); }
.button-primary:hover { border-color: #4338ca; background: #4338ca; }
.button-quiet { min-height: 32px; padding: 5px 9px; }
.button-small { min-height: 30px; padding: 5px 9px; font-size: 11px; }
.button-danger { border-color: #f0d3d0; color: #b42318; }
.button-wide { width: 100%; }

.welcome-banner { position: relative; display: flex; min-height: 218px; justify-content: space-between; overflow: hidden; padding: 30px 35px; border-radius: 16px; background: linear-gradient(112deg, #28275b 0%, #3a367d 57%, #544ac4 100%); color: #fff; box-shadow: 0 10px 28px rgb(56 51 124 / 15%); }
.welcome-banner::after { position: absolute; top: -145px; right: 225px; width: 340px; height: 340px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 50%; content: ""; }
.welcome-copy { position: relative; z-index: 1; align-self: center; }
.welcome-kicker { display: flex; align-items: center; gap: 8px; color: #c0bdff; font-size: 9px; font-weight: 800; letter-spacing: 1.4px; }
.welcome-kicker-dot { width: 6px; height: 6px; border-radius: 50%; background: #8fe1bd; box-shadow: 0 0 0 4px rgb(143 225 189 / 13%); }
.welcome-copy h1 { margin: 14px 0 7px; color: #fff; font-size: clamp(24px, 3vw, 31px); letter-spacing: -.9px; }
.wave { color: #ffc96b; font-size: 19px; }
.welcome-copy p { color: #d0d1ec; font-size: 12px; }
.welcome-button { display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; padding: 10px 13px; border: 1px solid rgb(255 255 255 / 18%); border-radius: 8px; background: rgb(255 255 255 / 11%); color: #fff; font-size: 11px; font-weight: 700; transition: background .15s; }
.welcome-button:hover { background: rgb(255 255 255 / 19%); }
.welcome-button svg { width: 15px; height: 15px; }
.welcome-button span { margin-left: 5px; color: #c7c2ff; }
.welcome-summary { position: relative; z-index: 1; display: flex; width: 275px; flex: 0 0 275px; flex-direction: column; align-items: flex-start; justify-content: center; overflow: hidden; padding: 22px 24px; border: 1px solid rgb(255 255 255 / 17%); border-radius: 13px; background: rgb(255 255 255 / 10%); backdrop-filter: blur(8px); }
.summary-orbit { position: absolute; right: -55px; bottom: -104px; width: 190px; height: 190px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 50%; }
.orbit-two { right: -29px; bottom: -78px; width: 140px; height: 140px; }
.summary-icon { display: grid; width: 29px; height: 29px; place-items: center; margin-bottom: 15px; border: 1px solid rgb(255 255 255 / 17%); border-radius: 8px; background: rgb(255 255 255 / 11%); color: #dddaff; }
.summary-icon svg { width: 17px; height: 17px; }
.summary-label { color: #d2cff9; font-size: 8px; font-weight: 800; letter-spacing: 1.2px; }
.welcome-summary > strong { margin: 6px 0 5px; font-size: 26px; letter-spacing: -.8px; }
.summary-foot { color: #d1d0e9; font-size: 10px; }

.section-heading { display: flex; align-items: center; justify-content: space-between; margin: 27px 0 14px; }
.section-heading h2 { color: #252e46; font-size: 15px; letter-spacing: -.2px; }
.section-heading p { margin-top: 4px; color: #81899a; font-size: 10px; }
.period-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid #e6eaf0; border-radius: 20px; background: #fff; color: #778198; font-size: 9px; font-weight: 700; }
.period-chip span { width: 6px; height: 6px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 23px; }
.stat-card, .panel, .login-card, .invoice-paper { border: 1px solid #eaedf3; border-radius: 12px; background: #fff; box-shadow: 0 3px 12px rgb(29 39 68 / 3%); }
.stat-card { position: relative; display: flex; min-width: 0; align-items: flex-start; gap: 12px; padding: 17px 15px; transition: transform .17s, border-color .17s, box-shadow .17s; }
.stat-card:hover { transform: translateY(-2px); border-color: #d9d8f8; box-shadow: 0 8px 20px rgb(41 48 89 / 7%); }
.stat-icon { display: grid; width: 35px; height: 35px; flex: 0 0 35px; place-items: center; border-radius: 10px; }
.stat-icon svg { width: 18px; height: 18px; }
.stat-indigo .stat-icon, .quick-indigo { background: #efedff; color: #665adf; }
.stat-amber .stat-icon, .quick-amber { background: #fff5e6; color: #d89025; }
.stat-emerald .stat-icon, .quick-emerald { background: #e8f8f0; color: #24946a; }
.stat-blue .stat-icon, .quick-blue { background: #eaf3ff; color: #3885d2; }
.stat-copy { display: grid; min-width: 0; gap: 5px; }
.stat-copy > span { overflow: hidden; color: #778198; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.stat-copy strong { color: #222b43; font-size: 23px; letter-spacing: -.6px; line-height: 1.15; }
.stat-copy small { overflow: hidden; color: #939bad; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.stat-copy small span { color: #665adf; }
.stat-arrow { position: absolute; top: 16px; right: 13px; color: #bbc1ce; font-size: 12px; opacity: 0; transition: opacity .15s, transform .15s; }
.stat-card:hover .stat-arrow { transform: translate(2px, -2px); opacity: 1; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(260px, .9fr); align-items: start; gap: 15px; }
.panel { overflow: hidden; }
.panel-heading { margin: 0; padding: 19px 20px 16px; }
.panel-eyebrow { color: #8985d7; font-size: 8px; font-weight: 800; letter-spacing: 1.25px; }
.panel-heading h2, .quick-heading h2 { margin-top: 5px; color: #252e46; font-size: 15px; letter-spacing: -.25px; }
.panel-heading .muted, .quick-heading .muted { margin-top: 4px; color: #8991a2; font-size: 10px; }
.button-light { min-height: 32px; padding: 6px 10px; font-size: 10px; }
.button-light span { color: #7268dc; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; }
th, td { padding: 13px 15px; border-bottom: 1px solid #edf0f5; vertical-align: middle; font-size: 10px; }
th { position: relative; background: linear-gradient(180deg, #f5f5ff 0%, #efeffb 100%); color: #65658b; font-size: 8px; font-weight: 800; letter-spacing: .75px; white-space: nowrap; }
thead th { border-top: 1px solid #e9e9f5; border-bottom: 1px solid #e3e3f1; }
thead th:first-child { padding-left: 19px; }
thead th:last-child { padding-right: 19px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .14s; }
tbody tr:nth-child(even) { background: #fbfcfe; }
tbody tr:hover { background: #f4f5ff; }
td { color: #747e92; }
td strong { color: #303a52; }
.serial-column { width: 72px; text-align: center; }
.serial-cell { width: 72px; color: #8d94a8; text-align: center; }
.serial-badge { display: inline-grid; min-width: 25px; height: 25px; place-items: center; padding: 0 6px; border: 1px solid #e8e9f4; border-radius: 8px; background: #f5f5fb; color: #737995; font-size: 9px; font-weight: 800; font-variant-numeric: tabular-nums; }
.serial-cell:first-child { padding-left: 19px; }
.catalogue-panel, .products-panel { border-color: #e4e8f1; box-shadow: 0 8px 24px rgb(29 39 68 / 5%); }
.catalogue-table-heading, .dashboard-table-heading, .invoice-items-heading { display: flex; min-height: 70px; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; border-bottom: 1px solid #edf0f5; }
.catalogue-table-heading > div, .dashboard-table-heading > div, .invoice-items-heading > div { display: grid; gap: 4px; }
.catalogue-table-heading strong, .dashboard-table-heading strong, .invoice-items-heading strong { color: #29334b; font-size: 13px; }
.catalogue-table-heading > div span, .dashboard-table-heading > div span, .invoice-items-heading > div span { color: #8790a3; font-size: 10px; }
.catalogue-count { padding: 6px 11px; border: 1px solid #e6e5fa; border-radius: 20px; background: #f7f6ff; color: #6259bd; font-size: 10px; font-weight: 700; white-space: nowrap; }
.admin-table { min-width: 700px; }
.admin-table th, .admin-table td, .products-table th, .products-table td { padding: 14px 17px; font-size: 11px; }
.admin-table th, .products-table th { background: #f8f8ff; color: #777b99; font-size: 9px; letter-spacing: .8px; }
.admin-table thead th, .products-table thead th { height: 44px; border-top: 0; border-bottom-color: #e8e9f4; }
.admin-table tbody tr, .products-table tbody tr { transition: background .16s, box-shadow .16s; }
.admin-table tbody tr:nth-child(even), .products-table tbody tr:nth-child(even) { background: #fcfcff; }
.admin-table tbody tr:hover, .products-table tbody tr:hover { background: #f5f6ff; }
.admin-table tbody td, .products-table tbody td { height: 62px; }
.admin-table .serial-cell, .products-table .serial-cell { padding-left: 22px; }
.products-table { min-width: 700px; }
.product-name-cell { display: inline-flex; align-items: center; gap: 11px; }
.product-name-cell strong { color: #303a52; font-size: 12px; font-weight: 700; }
.product-mark { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border: 1px solid #e8e6fb; border-radius: 10px; background: linear-gradient(145deg, #f4f2ff, #eeedff); color: #655bd1; font-size: 12px; font-weight: 800; }
.admin-table .category-pill, .products-table .category-pill { padding: 6px 10px; font-size: 10px; }
.table-name-cell { display: inline-flex; min-width: 0; align-items: center; gap: 10px; }
.table-name-cell > span:last-child { display: grid; min-width: 0; gap: 4px; }
.table-name-cell strong { overflow: hidden; color: #303a52; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.table-name-cell small { max-width: 240px; overflow: hidden; color: #8991a2; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.table-name-mark { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; border: 1px solid #e8e6fb; border-radius: 10px; font-size: 11px; font-weight: 800; }
.table-mark-blue { border-color: #e0eaf7; background: linear-gradient(145deg, #f0f6ff, #eaf2ff); color: #477db4; }
.table-mark-amber { border-color: #f4e8d4; background: linear-gradient(145deg, #fff8eb, #fff2dd); color: #b98335; }
.unit-pill { display: inline-flex; min-width: 34px; justify-content: center; padding: 5px 9px; border: 1px solid #e9edf3; border-radius: 7px; background: #f8fafc; color: #667085; font-size: 10px; font-weight: 600; }
.admin-table .rate-value, .products-table .rate-value { color: #29334b; font-size: 12px; }
.table-actions-heading, .product-actions-heading { text-align: right; }
.table-actions, .products-table .product-actions { gap: 7px; padding-right: 20px; }
.table-actions .button, .products-table .product-actions .button { min-width: 56px; border-color: #e4e6ee; background: #fff; }
.table-actions .button:hover, .products-table .product-actions .button:hover { border-color: #c9c5fb; background: #f7f6ff; color: #5146d8; }
.table-actions .button-danger, .products-table .product-actions .button-danger { border-color: #f0dfdd; color: #b42318; }
.table-actions .button-danger:hover, .products-table .product-actions .button-danger:hover { border-color: #e6bdb9; background: #fff5f4; color: #9f1d16; }
.product-actions .button { min-width: 56px; border-color: #e4e6ee; background: #fff; }
.product-actions .button:hover { border-color: #c9c5fb; background: #f7f6ff; color: #5146d8; }
.product-actions .button-danger { border-color: #f0dfdd; color: #b42318; }
.product-actions .button-danger:hover { border-color: #e6bdb9; background: #fff5f4; color: #9f1d16; }
.confirm-dialog { width: min(420px, calc(100% - 32px)); padding: 28px; border: 1px solid #e7e9f1; border-radius: 16px; background: #fff; color: #303a52; box-shadow: 0 24px 80px rgb(19 27 52 / 25%); }
.confirm-dialog::backdrop { background: rgb(19 27 52 / 48%); backdrop-filter: blur(2px); }
.confirm-dialog-icon { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 17px; border: 1px solid #f1d9d6; border-radius: 13px; background: #fff4f2; color: #b42318; font-size: 20px; font-weight: 800; }
.confirm-dialog h2 { margin: 0 0 8px; color: #252e46; font-size: 18px; }
.confirm-dialog p { color: #778198; font-size: 12px; line-height: 1.65; }
.confirm-dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 24px; }
.confirm-delete-button { border-color: #b42318; background: #b42318; color: #fff; }
.confirm-delete-button:hover { border-color: #941b13; background: #941b13; color: #fff; }
.invoices-table { min-width: 940px; }
.invoice-items-table { min-width: 1020px; }
.supply-bill { padding: 24px; color: #252525; font-family: Arial, Helvetica, sans-serif; font-size: 10px; }
.supply-bill p { margin: 4px 0; line-height: 1.4; }
.supply-bill table { width: 100%; border-collapse: collapse; }
.supply-bill-topline { margin-bottom: 3px; color: #555; font-size: 9px; font-weight: 400; text-align: center; }
.supply-bill-topline.bill-title { font-weight: 700; }
.supply-bill .composition-notice { margin-bottom: 4px; padding: 4px 6px; border: 1px solid #777; color: #555; font-size: 14px; text-align: center; }
.supply-bill .composition-notice .bill-title { margin-bottom: 3px; font-size: 16px; font-weight: 700; }
.supply-bill-header { border: 1px solid #777; }
.supply-bill-header td { padding: 8px; vertical-align: middle; }
.supply-bill-logo { width: 31%; border-right: 1px solid #aaa; text-align: center; }
.supply-bill-logo img { display: block; width: 120px; max-width: 100%; height: auto; margin: 0 auto; }
.supply-bill-store { text-align: right; }
.supply-bill-store h2 { margin: 0 0 5px; font-size: 23px; }
.supply-bill-store p { margin: 3px 0; font-size: 10px; }
.supply-bill-details { border: 1px solid #bbb; border-top: 0; font-size: 10px; }
.supply-bill-details > tbody > tr > td { width: 50%; min-height: 90px; padding: 0 12px 10px; vertical-align: top; }
.supply-bill-details > tbody > tr > td + td { border-left: 1px solid #ddd; }
.supply-bill-detail-title { margin: 0 -12px 6px; padding: 4px 12px; background: #a96f68; color: #fff; font-size: 13px; font-weight: 700; text-align: left; }
.supply-bill-detail-title.bill-to-title { font-size: 13px; }
.bill-to-school-name { font-size: 11px; }
.bill-to-address, .bill-to-phone { font-size: 10px; }
.supply-bill-invoice-meta { margin-top: 3px; font-size: 10px; line-height: 1.25; table-layout: fixed; }
.supply-bill-invoice-meta td { padding: 3px 0; line-height: 1.35; }
.supply-bill-invoice-meta td:first-child { width: 38%; }
.supply-bill-invoice-meta td:last-child { width: 62%; text-align: right; white-space: nowrap; }
.supply-bill-table-wrap { overflow-x: hidden; }
.supply-bill-items { width: 100%; min-width: 0; margin-top: 0; table-layout: fixed; font-size: 10px; }
.supply-bill-items th { padding: 7px 4px; border-right: 1px solid #d4b7b3; background: #a96f68; color: #fff; font-size: 9px; font-weight: 700; text-align: center; }
.supply-bill-items th:nth-child(2), .supply-bill-items td:nth-child(2) { text-align: left; }
.supply-bill-items th:nth-child(3), .supply-bill-items td:nth-child(3),
.supply-bill-items th:nth-child(7), .supply-bill-items td:nth-child(7),
.supply-bill-items th:nth-child(8), .supply-bill-items td:nth-child(8) { text-align: right; }
.supply-bill-items th:nth-child(9), .supply-bill-items td:nth-child(9) { text-align: right; }
.supply-bill-items td { padding: 5px; border-bottom: 1px solid #e2d9d7; color: #252525; vertical-align: middle; }
.supply-bill-items tbody tr:nth-child(even) { background: #fbf9f8; }
.supply-bill-items .center { text-align: center; }
.supply-bill-items .num { text-align: right; white-space: nowrap; }
.supply-bill-items tfoot td { padding: 6px 5px; background: #a96f68; color: #fff; font-weight: 700; }
.supply-bill-items .total-label { text-align: right; }
.supply-bill-bottom { margin-top: 7px; }
.supply-bill-bottom > tbody > tr > td { width: 50%; vertical-align: top; }
.supply-bill-bank { padding-right: 12px; }
.supply-bill-bank p { margin: 5px 0; }
.supply-bill-totals { font-size: 11px; }
.supply-bill-totals td { padding: 4px 5px; }
.supply-bill-totals td:last-child { text-align: right; white-space: nowrap; }
.supply-bill-totals .grand td { padding: 7px 6px; background: #a96f68; color: #fff; font-weight: 700; }
.supply-bill-declaration { margin-top: 13px; font-size: 10px; line-height: 1.4; }
.supply-bill-sign { margin-top: 12px; padding-right: 8px; font-size: 10px; text-align: right; }
.supply-bill-sign .signature { margin: 12px 0 1px; font-size: 15px; font-style: italic; }
.invoice-items-heading { min-height: 62px; padding: 12px 2px; border-bottom: 0; }
.invoice-items-heading strong { font-size: 14px; }
.invoice-items-table th, .invoice-items-table td { padding-top: 13px; padding-bottom: 13px; }
.invoice-items-table .serial-cell { padding-left: 12px; }
.invoice-items-table tbody td:nth-child(3) { color: #303a52; font-weight: 700; }
.invoice-items-table tfoot th { background: #f4f4fd; }
.table-open-button { border-color: #dfddf8; background: #f8f7ff; color: #5951bd; }
.dashboard-invoices-table { min-width: 640px; }
.dashboard-table-heading { min-height: 56px; padding: 10px 20px; }
.count-pill, .category-pill, .installment-pill { display: inline-flex; align-items: center; justify-content: center; padding: 5px 9px; border: 1px solid #e9eafa; border-radius: 20px; background: #f7f7ff; color: #64659a; font-size: 9px; font-weight: 700; white-space: nowrap; }
.category-pill { border-color: #e6f1ec; background: #f2faf6; color: #388063; }
.installment-pill { border-color: #eceafb; background: #f7f6ff; color: #666194; font-variant-numeric: tabular-nums; }
.installment-pill i { padding: 0 3px; color: #b1aecb; font-style: normal; }
.rate-value { color: #303a52; font-weight: 700; font-variant-numeric: tabular-nums; }
.invoice-number-link { white-space: nowrap; }
.invoice-filter-panel { margin-bottom: 14px; padding: 18px 20px; }
.filter-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.filter-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid #e8e7fb; border-radius: 10px; background: #f4f3ff; color: #6259cf; }
.filter-icon svg { width: 18px; height: 18px; }
.filter-heading h2 { color: #2e3850; font-size: 13px; }
.filter-heading p { margin-top: 3px; color: #858da0; font-size: 10px; }
.invoice-filter-form { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) auto; align-items: end; gap: 12px; }
.invoice-filter-form label { gap: 6px; color: #69738a; font-size: 9px; font-weight: 800; letter-spacing: .25px; }
.invoice-filter-form select { min-height: 38px; padding: 8px 11px; border-color: #e1e4ed; color: #404a61; font-size: 11px; font-weight: 500; }
.filter-actions { display: flex; align-items: center; gap: 8px; }
.filter-actions .button { min-height: 38px; font-size: 10px; }
.filter-actions .button svg { width: 15px; height: 15px; }
.button-filter-reset { color: #737d92; }
.report-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.report-stat { display: flex; min-width: 0; align-items: center; gap: 11px; padding: 13px 15px; border: 1px solid #eaedf3; border-radius: 11px; background: #fff; box-shadow: 0 3px 12px rgb(29 39 68 / 3%); }
.report-stat-icon { display: grid; width: 35px; height: 35px; flex: 0 0 35px; place-items: center; border-radius: 10px; }
.report-stat-icon svg { width: 18px; height: 18px; }
.report-icon-purple { background: #f0efff; color: #675bd8; }
.report-icon-green { background: #e9f8f0; color: #29885e; }
.report-icon-blue { background: #eaf3ff; color: #4381c7; }
.rupee-mark { font-size: 19px; font-weight: 700; }
.report-stat > span:last-child { display: grid; min-width: 0; gap: 4px; }
.report-stat small { overflow: hidden; color: #828b9e; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.report-stat strong { overflow: hidden; color: #29334b; font-size: 17px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.report-stat strong span { color: #788196; font-size: 10px; font-weight: 600; }
.invoice-list-heading { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid #edf0f5; }
.invoice-list-heading h2 { color: #303950; font-size: 13px; }
.invoice-list-heading p { margin-top: 4px; color: #858da0; font-size: 9px; }
.selected-filter { display: inline-flex; align-items: center; padding: 6px 10px; border: 1px solid #e8e7fb; border-radius: 20px; background: #f7f6ff; color: #5c56b1; font-size: 9px; font-weight: 700; }
.invoice-pagination { padding: 12px 17px; border-top: 1px solid #edf0f5; }
.invoice-pagination nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.invoice-pagination nav > div:first-child { color: #838b9c; font-size: 10px; }
.invoice-pagination nav > div:last-child > span { display: inline-flex; gap: 4px; }
.invoice-pagination a, .invoice-pagination span[aria-current="page"] span, .invoice-pagination span[aria-disabled="true"] span { display: inline-flex; min-width: 30px; min-height: 30px; align-items: center; justify-content: center; padding: 0 8px; border: 1px solid #e8eaf1; border-radius: 7px; background: #fff; color: #59637a; font-size: 10px; }
.invoice-pagination a:hover { border-color: #d7d4ff; background: #f7f6ff; color: #5146d8; }
.invoice-pagination span[aria-current="page"] span { border-color: #5146d8; background: #5146d8; color: #fff; }
.invoice-pagination span[aria-disabled="true"] span { color: #b7bdc9; }
.numeric { text-align: right; white-space: nowrap; }
.text-link { color: #5146d8; font-weight: 700; }
.text-link:hover { color: #3830b6; }
.invoice-cell { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.invoice-mini-icon { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 7px; background: #f1efff; color: #6960d9; }
.invoice-mini-icon svg { width: 14px; height: 14px; }
.school-cell { display: inline-block; max-width: 145px; overflow: hidden; color: #414b61; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.amount-cell { color: #303a52; font-weight: 700; }
.row-open { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid #eaedf3; border-radius: 7px; color: #8790a4; }
.row-open:hover { border-color: #d9d6ff; background: #f6f5ff; color: #5146d8; }
.quick-panel { padding: 19px 17px 14px; }
.quick-heading { padding: 0 3px 14px; }
.quick-links { display: grid; }
.quick-links > a { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 11px 2px; border-top: 1px solid #f0f1f5; }
.quick-links > a > span:nth-child(2) { display: grid; min-width: 0; flex: 1; gap: 3px; }
.quick-links > a > b { color: #b3b9c6; font-size: 13px; font-weight: 500; transition: color .15s, transform .15s; }
.quick-links > a:hover > b { transform: translateX(2px); color: #5146d8; }
.quick-icon { display: grid; width: 33px; height: 33px; flex: 0 0 33px; place-items: center; border-radius: 9px; }
.quick-icon svg { width: 17px; height: 17px; }
.quick-links strong { overflow: hidden; color: #39435a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.quick-links small { overflow: hidden; color: #9299a9; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.billing-link { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; padding: 11px 12px; border: 1px solid #eceaff; border-radius: 8px; background: #f8f7ff; color: #5951bd; font-size: 9px; font-weight: 700; }
.billing-link span { font-size: 12px; }
.empty-state { display: grid; min-height: 195px; align-content: center; justify-items: center; gap: 9px; padding: 25px; color: #8790a3; text-align: center; }
.empty-state > strong { color: #48536a; font-size: 11px; }
.empty-state > span:not(.empty-icon) { font-size: 9px; }
.empty-state .text-link { margin-top: 3px; font-size: 10px; }
.empty-icon { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 3px; border-radius: 13px; background: #f1efff; color: #7469dc; }
.empty-icon svg { width: 22px; height: 22px; }

.actions, .heading-actions, .form-actions { display: flex; align-items: center; gap: 10px; }
.actions { justify-content: flex-end; white-space: nowrap; }
.actions form { margin: 0; }
.empty-state:not(.recent-panel .empty-state) { padding: 34px 22px; font-size: 13px; }
.notice { margin: 18px 22px; padding: 13px 15px; border: 1px solid #e2e5fb; border-radius: 8px; background: #f6f5ff; color: #57549a; font-size: 12px; line-height: 1.6; }
.form-panel { padding: 24px; }
.installment-settings { display: grid; grid-template-columns: 1fr; align-items: start; gap: 18px; padding: 16px; border: 1px solid #e8ebf2; border-radius: 10px; background: #fcfcfe; }
.installment-count-field { width: min(320px, 100%); align-content: start; }
.installment-percentage-editor { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid #edf0f5; }
.installment-percentage-editor > strong { color: #414a60; font-size: 12px; }
.installment-percentage-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.installment-percentage-list label { gap: 6px; font-size: 10px; }
.installment-percentage-list input { min-height: 40px; margin-top: 6px; text-align: right; }
.installment-percentage-total { min-height: 18px; padding: 8px 10px; border-radius: 7px; background: #fff5f3; color: #a33b2f; font-size: 11px; }
.installment-percentage-total.is-valid { background: #effaf3; color: #247044; }
.manual-invoice-form { margin-bottom: 24px; }
.manual-items-heading { margin-top: 20px; }
.manual-item-list { display: grid; gap: 12px; }
.manual-item-row { display: grid; grid-template-columns: minmax(150px, 1.5fr) repeat(3, minmax(80px, .7fr)) repeat(3, minmax(92px, .8fr)) auto; align-items: end; gap: 10px; padding: 14px; border: 1px solid #e8ebf2; border-radius: 10px; background: #fcfcfe; }
.manual-item-row label { gap: 6px; font-size: 10px; }
.manual-item-row input { min-width: 0; min-height: 38px; padding: 8px; font-size: 12px; }
.manual-item-total { display: grid; min-width: 85px; gap: 5px; color: #788196; font-size: 10px; text-align: right; }
.manual-item-total strong { color: #28334b; font-size: 12px; white-space: nowrap; }
.manual-item-total button { justify-self: end; }
.manual-invoice-total { display: flex; justify-content: flex-end; gap: 24px; margin-top: 18px; padding: 14px 0; border-top: 1px solid #edf0f5; color: #414a60; font-size: 13px; }
.manual-invoice-total strong { color: #242d46; font-size: 18px; }
.invoice-type-label { display: block; margin-top: 3px; color: #818ba0; font-size: 9px; }
.profile-form label { align-content: start; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.gas-settings { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 320px); align-items: center; gap: 16px; padding: 12px 14px; border: 1px solid #dce1ea; border-radius: 10px; background: #fbfcfe; }
.gas-toggle { display: flex; align-items: center; gap: 10px; margin: 0; color: #414a60; cursor: pointer; }
.gas-toggle input[type="checkbox"] { width: 18px; min-height: 18px; height: 18px; margin: 0; flex: 0 0 18px; padding: 0; accent-color: #5146d8; }
.gas-toggle span { display: grid; gap: 2px; }
.gas-toggle strong { font-size: 12px; }
.gas-toggle small { color: #818ba0; font-size: 11px; font-weight: 500; }
.gas-amount-field { margin: 0; }
.gas-amount-field input { margin-top: 6px; }
.manual-product-option { display: flex; align-items: center; gap: 10px; margin-top: 2px; padding: 12px 14px; border: 1px solid #dce1ea; border-radius: 10px; background: #fbfcfe; color: #414a60; cursor: pointer; }
.manual-product-option > input[type="checkbox"] { width: 18px; min-height: 18px; height: 18px; margin: 0; flex: 0 0 18px; padding: 0; accent-color: #5146d8; }
.manual-product-option > span { display: grid; gap: 2px; }
.manual-product-option strong { font-size: 12px; }
.manual-product-option small { color: #818ba0; font-size: 11px; font-weight: 500; }
label { display: block; color: #414a60; font-size: 12px; font-weight: 700; }
label > input, label > select, label > textarea, label > small { display: block; margin-top: 8px; }
input, select, textarea { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid #dce1ea; border-radius: 8px; background: #fff; color: #273149; font-size: 13px; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgb(81 70 216 / 12%); border-color: #877ff0; }
.field-full { grid-column: 1 / -1; }
.required { color: #c23c32; }
.form-actions { justify-content: flex-end; margin-top: 24px; padding-top: 18px; border-top: 1px solid #edf0f5; }
.form-panel .notice { margin: 18px 0 0; }
.notice-warning { border-color: #f1dfb6; background: #fffaf0; color: #805b16; }
.alert { margin-bottom: 18px; padding: 13px 15px; border-radius: 9px; font-size: 12px; }
.alert ul { margin: 8px 0 0; padding-left: 20px; }
.alert-success { border: 1px solid #b7e4c7; background: #effaf2; color: #176b37; }
.alert-error { border: 1px solid #f1c6c3; background: #fff5f4; color: #9c2f28; }
.login-layout { position: relative; display: grid; width: min(1080px, 100%); min-height: 620px; grid-template-columns: 1fr 0.92fr; overflow: hidden; border: 1px solid #e5e9f2; border-radius: 22px; background: #fff; box-shadow: 0 28px 80px rgb(33 42 76 / 12%); }
.login-showcase { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 38px 42px 28px; background: linear-gradient(145deg, #20234f 0%, #312f70 55%, #5146bd 100%); color: #fff; }
.login-brand { position: relative; z-index: 1; display: inline-flex; width: fit-content; align-items: center; gap: 11px; color: #fff; font-size: 17px; font-weight: 800; letter-spacing: -.55px; }
.login-brand small { display: block; margin-top: 3px; color: #aeb1d2; font-size: 8px; font-weight: 700; letter-spacing: 1.65px; }
.login-showcase-copy { position: relative; z-index: 1; max-width: 430px; margin: 48px 0; }
.login-kicker { display: inline-flex; align-items: center; gap: 9px; color: #c9c6ff; font-size: 9px; font-weight: 800; letter-spacing: 1.4px; }
.login-kicker span, .login-footer-dot { width: 7px; height: 7px; border-radius: 50%; background: #83dfb4; box-shadow: 0 0 0 4px rgb(131 223 180 / 13%); }
.login-showcase-copy h1 { max-width: 420px; margin: 20px 0 13px; color: #fff; font-size: clamp(30px, 3.5vw, 43px); letter-spacing: -1.5px; line-height: 1.12; }
.login-showcase-copy > p { max-width: 390px; color: #d3d3ec; font-size: 13px; line-height: 1.8; }
.login-benefits { display: grid; gap: 18px; margin-top: 33px; }
.login-benefits > div { display: flex; align-items: center; gap: 13px; }
.login-benefit-icon { display: grid; width: 39px; height: 39px; flex: 0 0 39px; place-items: center; border: 1px solid rgb(255 255 255 / 14%); border-radius: 12px; background: rgb(255 255 255 / 9%); color: #d4d0ff; }
.login-benefit-icon svg { width: 19px; height: 19px; }
.login-benefits > div > span:last-child { display: grid; gap: 4px; }
.login-benefits strong { color: #fff; font-size: 11px; }
.login-benefits small { color: #bdbfdf; font-size: 10px; }
.login-showcase-footer { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; color: #c2c3de; font-size: 10px; }
.login-footer-dot { width: 6px; height: 6px; box-shadow: none; }
.login-showcase-orbit { position: absolute; border: 1px solid rgb(255 255 255 / 8%); border-radius: 50%; pointer-events: none; }
.login-orbit-one { top: -165px; right: -220px; width: 520px; height: 520px; }
.login-orbit-two { top: -105px; right: -160px; width: 400px; height: 400px; }
.login-form-panel { display: grid; align-items: center; padding: 55px clamp(34px, 5vw, 70px); }
.login-form-content { width: min(100%, 390px); margin: 0 auto; }
.login-form-icon { display: grid; width: 45px; height: 45px; place-items: center; margin-bottom: 27px; border: 1px solid #e9e7fb; border-radius: 14px; background: linear-gradient(145deg, #f3f1ff, #eeedff); color: #5b51ca; }
.login-form-icon svg { width: 22px; height: 22px; }
.login-form-content h2 { margin: 9px 0 7px; color: #202a43; font-size: 29px; letter-spacing: -1px; }
.login-form-subtitle { color: #80899c; font-size: 12px; }
.login-notice { display: flex; align-items: flex-start; gap: 11px; margin-top: 20px; padding: 13px 14px; border: 1px solid; border-radius: 10px; font-size: 11px; line-height: 1.5; }
.login-notice-error { border-color: #f0d1ce; background: linear-gradient(115deg, #fff8f7, #fff3f1); color: #9f3028; }
.login-notice-success { border-color: #cce9d7; background: linear-gradient(115deg, #f5fcf7, #eef9f2); color: #246b43; }
.login-notice-icon { display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; border: 1px solid currentColor; border-radius: 7px; font-size: 12px; font-weight: 800; }
.login-notice strong { display: block; margin: 1px 0 2px; font-size: 11px; }
.login-notice p { margin: 1px 0; }
.login-notice ul { display: grid; gap: 2px; margin: 2px 0 0; padding: 0; list-style: none; }
.stack-form { display: grid; gap: 18px; margin-top: 25px; }
.stack-form label { gap: 8px; color: #39445b; font-size: 11px; font-weight: 700; }
.stack-form input:not([type="checkbox"]) { min-height: 46px; border-color: #e0e4ed; border-radius: 9px; background: #fcfcfe; font-size: 12px; transition: border-color .15s, box-shadow .15s, background .15s; }
.stack-form input:not([type="checkbox"]):focus { border-color: #8077e9; background: #fff; box-shadow: 0 0 0 4px rgb(81 70 216 / 9%); outline: 0; }
.stack-form input::placeholder { color: #a7adba; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 68px; }
.password-toggle { position: absolute; top: 50%; right: 9px; min-width: 48px; padding: 5px; transform: translateY(-50%); border: 0; background: transparent; color: #5146d8; font-size: 11px; font-weight: 700; cursor: pointer; }
.password-toggle:focus-visible { outline: 2px solid #877ff0; outline-offset: 2px; border-radius: 4px; }
.stack-form .checkbox-label { display: flex; align-items: center; gap: 9px; color: #707b90; font-size: 11px; font-weight: 500; }
.checkbox-label input { width: 16px; min-height: 16px; margin: 0; }
.login-submit { min-height: 47px; justify-content: space-between; padding: 0 16px; border-radius: 9px; font-size: 12px; }
.login-submit span { font-size: 17px; font-weight: 400; transition: transform .15s; }
.login-submit:hover span { transform: translateX(3px); }
.login-security-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 25px; color: #9098a8; font-size: 9px; }
.login-security-note svg { width: 13px; height: 13px; color: #6c79a0; }
.invoice-paper { padding: 28px; }
.invoice-header { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.invoice-header h2 { margin: 7px 0; font-size: 23px; }
.invoice-header p { color: #778196; font-size: 13px; }
.invoice-meta { display: grid; gap: 5px; color: #667085; text-align: right; font-size: 13px; }
.invoice-meta strong { color: #172033; font-size: 15px; }
.invoice-paper tfoot th { background: #f2f3fb; color: #252e46; font-size: 12px; }
.installment-section { margin-top: 27px; padding: 18px 20px 20px; overflow: visible !important; }
.installment-section > h3 { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #edf0f5; }
.installment-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.installment { min-width: 0; display: grid; align-content: start; gap: 10px; padding: 16px; border: 1px solid #e4e9f2; border-radius: 10px; background: #fff; box-shadow: 0 2px 8px rgb(29 39 68 / 4%); }
.installment span { color: #6e788b; font-size: 12px; font-weight: 700; }
.installment strong { font-size: 20px; }
.installment-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.installment-actions .button { justify-content: center; }
.invoice-footnote { margin-top: 22px; color: #778196; font-size: 12px; }

@media (min-width: 1500px) {
    .container { padding-right: 46px; padding-left: 46px; }
    .welcome-banner { min-height: 230px; padding-right: 42px; padding-left: 42px; }
    .stat-card { padding: 20px 18px; }
}
@media (max-width: 1100px) {
    .sidebar { width: 220px; }
    .main-shell { margin-left: 220px; }
    .topbar { padding: 0 25px; }
    .container { padding-right: 25px; padding-left: 25px; }
    .dashboard-grid { grid-template-columns: minmax(0, 1.5fr) minmax(230px, .85fr); gap: 12px; }
    .stat-grid { gap: 10px; }
    .stat-card { gap: 9px; padding: 14px 11px; }
}
@media (max-width: 800px) {
    .login-layout { min-height: 560px; grid-template-columns: .9fr 1fr; }
    .login-showcase { padding: 30px 27px 24px; }
    .login-form-panel { padding: 40px 28px; }
    .sidebar { position: static; width: 100%; height: auto; padding: 12px 18px; }
    .brand { padding: 0; }
    .brand-mark { width: 34px; height: 34px; }
    .brand small, .sidebar-label { display: none; }
    .sidebar-bottom { display: block; margin-top: 10px; }
    .help-card { display: none; }
    .sidebar-nav { display: flex; overflow-x: auto; gap: 5px; margin-top: 12px; scrollbar-width: none; }
    .sidebar-nav::-webkit-scrollbar { display: none; }
    .nav-item { min-height: 36px; flex: 0 0 auto; gap: 7px; padding: 0 10px; font-size: 10px; }
    .nav-item svg { width: 15px; height: 15px; }
    .nav-item.active::before { inset: auto 10px 0; width: auto; height: 2px; border-radius: 2px 2px 0 0; }
    .main-shell { margin-left: 0; }
    .topbar { position: static; min-height: 48px; padding: 0 20px; }
    .container { padding: 23px 20px 38px; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .quick-links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 15px; }
    .quick-links > a:nth-child(2) { border-top: 0; }
    .quick-panel { padding: 17px; }
    .welcome-banner { min-height: 195px; padding: 24px; }
    .welcome-summary { width: 240px; flex-basis: 240px; padding: 17px; }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .invoice-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filter-actions { grid-column: 1 / -1; }
    .report-summary { gap: 8px; }
    .report-stat { gap: 8px; padding: 11px 9px; }
    .report-stat-icon { width: 30px; height: 30px; flex-basis: 30px; }
    .report-stat strong { font-size: 14px; }
    .installment-settings { gap: 14px; padding: 14px; }
}
@media (max-width: 540px) {
    .auth-container { align-content: start; padding: 18px 13px; }
    .login-layout { min-height: 0; grid-template-columns: 1fr; border-radius: 16px; }
    .login-showcase { min-height: 255px; padding: 22px; }
    .login-showcase-copy { margin: 28px 0 18px; }
    .login-showcase-copy h1 { margin: 13px 0 8px; font-size: 27px; }
    .login-showcase-copy > p { font-size: 11px; }
    .login-benefits { display: none; }
    .login-showcase-footer { font-size: 9px; }
    .login-form-panel { padding: 30px 22px; }
    .login-form-icon { margin-bottom: 19px; }
    .login-form-content h2 { font-size: 25px; }
    .topbar { padding: 0 14px; }
    .topbar-label, .topbar-divider, .topbar-date { display: none; }
    .topbar-context strong { font-size: 11px; }
    .container { padding: 18px 13px 30px; }
    .invoice-filter-panel { padding: 14px; }
    .invoice-filter-form { grid-template-columns: 1fr; }
    .filter-actions { grid-column: auto; }
    .filter-actions .button { flex: 1; }
    .report-summary { grid-template-columns: 1fr; }
    .report-stat { padding: 10px 12px; }
    .invoice-list-heading { align-items: flex-start; padding: 12px; }
    .invoice-pagination nav { flex-wrap: wrap; }
    .welcome-banner { min-height: 0; flex-direction: column; gap: 18px; padding: 22px 18px; }
    .welcome-copy h1 { font-size: 23px; }
    .welcome-summary { width: 100%; min-height: 120px; flex-basis: auto; padding: 14px; }
    .summary-icon { position: absolute; top: 13px; right: 14px; margin: 0; }
    .welcome-summary > strong { font-size: 23px; }
    .section-heading { align-items: flex-start; gap: 10px; }
    .period-chip { flex: 0 0 auto; }
    .stat-grid { gap: 9px; }
    .stat-card { gap: 8px; padding: 12px 9px; }
    .stat-icon { width: 30px; height: 30px; flex-basis: 30px; }
    .stat-icon svg { width: 16px; height: 16px; }
    .stat-copy > span { font-size: 8px; }
    .stat-copy strong { font-size: 20px; }
    .stat-copy small { font-size: 7px; }
    .panel-heading { align-items: flex-start; gap: 10px; padding: 16px 14px 13px; }
    .panel-heading .button { flex: 0 0 auto; }
    th, td { padding: 10px 9px; font-size: 9px; }
    th { font-size: 7px; }
    .quick-links { grid-template-columns: 1fr; }
    .quick-links > a:nth-child(2) { border-top: 1px solid #f0f1f5; }
    .page-heading { flex-direction: column; align-items: stretch; }
    .heading-actions { flex-wrap: wrap; }
    .form-grid, .installment-grid { grid-template-columns: 1fr; }
        .gas-settings { grid-template-columns: 1fr; }
    .installment-settings { grid-template-columns: 1fr; gap: 16px; }
    .installment-percentage-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .manual-item-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .manual-item-total { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
    .field-full { grid-column: auto; }
    .invoice-paper { padding: 14px; }
    .invoice-header { flex-direction: column; }
    .invoice-meta { text-align: left; }
}
@media print {
    body { background: #fff; }
    .sidebar, .topbar, .no-print, .alert { display: none !important; }
    .main-shell { margin: 0; }
    .container { width: 100%; margin: 0; padding: 0; }
    .invoice-paper { padding: 0; border: 0; box-shadow: none; }
    .table-wrap { overflow: visible; }
    .supply-bill { padding: 0; border: 0; border-radius: 0; box-shadow: none; }
    .supply-bill-table-wrap { overflow: visible; }
    .supply-bill-items { min-width: 0; font-size: 7px; }
    .supply-bill-items th, .supply-bill-items td { padding: 5px 3px; }
    th, td { padding: 8px; }
}