@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');
:root { --knh-blue: #0b5fa5; }
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.login-page { background: linear-gradient(135deg, #e7f2fc, #f7fbff); display: grid; min-height: 100vh; place-items: center; padding: 1rem; }
.login-card { max-width: 440px; width: 100%; }
.hospital-mark { align-items: center; background: var(--knh-blue); border-radius: 50%; color: #fff; display: inline-flex; font-weight: 700; height: 64px; justify-content: center; width: 64px; }

.dashboard-body { background: #f5f8fc; color: #172b4d; height: 100dvh; overflow: hidden; }
.dashboard-shell { display: flex; height: 100dvh; min-height: 0; overflow: hidden; }
.dashboard-sidebar { background: #08365e; color: #d3e4f4; display: flex; flex: 0 0 250px; flex-direction: column; height: 100dvh; min-height: 0; overflow: hidden; padding: 0 14px; }
.brand { align-items: center; border-bottom: 1px solid #24577e; color: #fff; display: flex; flex: 0 0 64px; font-size: 15px; font-weight: 700; gap: 10px; height: 64px; line-height: 1.1; margin: 0 -14px; padding: 0 24px; text-decoration: none; }.brand small { color: #9ebbd4; display: block; font-size: 11px; font-weight: 400; margin-top: 3px; }.brand-mark { align-items: center; background: #fff; border-radius: 9px; color: #0b5fa5; display: inline-flex; font-size: 12px; height: 36px; justify-content: center; width: 36px; }
.sidebar-nav { align-content: start; display: grid; flex: 1 1 auto; gap: 5px; margin-right: -14px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 14px 12px 0; scrollbar-width: none; }.sidebar-nav::-webkit-scrollbar { display: none; height: 0; width: 0; }.sidebar-nav-scrollbar { cursor: pointer; pointer-events: auto; position: fixed; touch-action: none; width: 5px; z-index: 1101; }.sidebar-nav-scrollbar[hidden] { display: none; }.sidebar-nav-scrollbar-thumb { background: rgba(191, 215, 234, .72); border-radius: 99px; display: block; min-height: 24px; width: 100%; }.sidebar-nav-scrollbar-thumb:hover, .sidebar-nav-scrollbar-thumb:active { background: rgba(226, 240, 250, .92); }.sidebar-group { display: grid; gap: 2px; }.sidebar-group-toggle { align-items: center; background: transparent; border: 0; color: #7ca9c9; display: flex; font-size: 10px; font-weight: 700; letter-spacing: .08em; margin: 14px 13px 2px; padding: 0; text-align: left; text-transform: uppercase; width: calc(100% - 26px); }.sidebar-group-toggle:hover { color: #c5daed; }.sidebar-group-toggle .bi { font-size: 11px; margin-left: auto; transition: transform .15s ease; }.sidebar-group-toggle[aria-expanded="false"] .bi { transform: rotate(-90deg); }.sidebar-group-items { display: grid; gap: 5px; }.sidebar-group-items[hidden] { display: none; }.sidebar-nav a { border-radius: 8px; color: #c5daed; font-size: 14px; padding: 11px 13px; text-decoration: none; }.sidebar-nav a span { display: inline-block; font-size: 17px; margin-right: 11px; text-align: center; width: 18px; }.sidebar-nav a.active, .sidebar-nav a:hover { background: #125380; color: #fff; }.sidebar-footer { border-top: 1px solid #24577e; color: #9fc0d9; flex: 0 0 auto; margin: 0 10px; padding: 16px 0 18px; text-align: center; }.sidebar-footer small { display: block; font-size: 10px; line-height: 1.55; }.sidebar-footer a { color: #c3dced; font-weight: 500; text-decoration: none; }.sidebar-footer a:hover, .sidebar-footer a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 2px; }.sidebar-footer span { color: #7ca9c9; }
.dashboard-main { flex: 1; height: 100dvh; max-width: calc(100vw - 250px); min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 96px 38px 45px; scrollbar-gutter: stable; }.global-topbar { align-items: center; background: rgba(248,250,253,.96); border-bottom: 1px solid #e6edf5; display: flex; height: 64px; justify-content: space-between; left: 250px; padding: 0 38px; position: fixed; right: 0; top: 0; width: auto; z-index: 1000; }.mobile-nav-toggle { background: transparent; border: 0; color: #173b68; display: none; font-size: 23px; line-height: 1; padding: 7px; }.mobile-nav-backdrop { background: rgba(8, 29, 50, .48); border: 0; inset: 0; position: fixed; z-index: 1090; }.global-topbar-context { align-items: center; color: #738399; display: flex; font-size: 12px; gap: 10px; }.global-topbar-label { color: #16355b; font-size: 12px; font-weight: 700; letter-spacing: .06em; }.global-topbar-divider { background: #d8e1eb; height: 18px; width: 1px; }.dashboard-header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 30px; }.dashboard-header .user-menu { display: none !important; }.eyebrow { color: #6f829b; font-size: 10px; font-weight: 700; letter-spacing: .11em; margin: 0 0 6px; }.dashboard-header h1 { font-size: 28px; font-weight: 700; margin: 0; }.header-copy { color: #738399; font-size: 14px; margin: 5px 0 0; }.user-menu { align-items: center; cursor: pointer; display: flex; gap: 9px; list-style: none; }.user-menu::-webkit-details-marker { display: none; }.user-avatar { align-items: center; background: #d8ebfc; border-radius: 50%; color: #0b5fa5; display: flex; font-weight: 700; height: 36px; justify-content: center; width: 36px; }.account-identity strong { display: block; font-size: 13px; }.account-identity small { color: #738399; display: block; font-size: 11px; }.account-menu { position: relative; }.account-menu-chevron { color: #738399; font-size: 11px; }.account-menu[open] .account-menu-chevron { transform: rotate(180deg); }.account-menu-panel { background: #fff; border: 1px solid #e1e8f0; border-radius: 8px; box-shadow: 0 8px 22px rgba(16, 44, 76, .16); min-width: 170px; padding: 6px; position: absolute; right: 0; top: calc(100% + 10px); }.account-menu-panel a, .account-menu-panel button { align-items: center; background: transparent; border: 0; border-radius: 5px; color: #173b68; display: flex; font-size: 13px; gap: 9px; padding: 9px 10px; text-align: left; text-decoration: none; width: 100%; }.account-menu-panel a:hover, .account-menu-panel button:hover { background: #eef5fb; }.account-menu-panel form { margin: 0; }.sign-out { background: transparent; border: 0; color: #6f829b; font-size: 20px; margin-left: 6px; padding: 4px; }.sign-out:hover { color: #0b5fa5; }
.metric-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 24px; }.metric-card, .panel { background: #fff; border: 1px solid #e6edf5; border-radius: 12px; box-shadow: 0 2px 7px rgba(25, 67, 105, .03); }.metric-card { align-items: center; display: flex; gap: 12px; min-height: 112px; padding: 17px; }.metric-card span { color: #6b7f98; display: block; font-size: 12px; }.metric-card strong { color: #16355b; display: block; font-size: 23px; letter-spacing: -.04em; margin: 3px 0; }.metric-card small { color: #9aa9b9; font-size: 11px; }.metric-card.sales strong { font-size: 19px; }.metric-icon { align-items: center; border-radius: 10px; display: flex; flex: 0 0 38px; font-size: 19px; font-weight: 700; height: 38px; justify-content: center; }.blue { background: #e4f1ff; color: #1475c8; }.violet { background: #eee9ff; color: #7153cf; }.teal { background: #ddf7f4; color: #1a9287; }.green { background: #e1f6e9; color: #24965a; }.orange { background: #fff0d7; color: #d9860b; }.attention { border-color: #f3dfb6; }
.content-grid { display: grid; gap: 20px; margin-bottom: 22px; }.primary-grid { grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr); }.secondary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.panel { overflow: hidden; }.panel-heading { align-items: center; display: flex; justify-content: space-between; padding: 20px 21px 15px; }.panel-heading h2 { font-size: 16px; font-weight: 700; margin: 0; }.panel-heading a { color: #1269b0; font-size: 12px; font-weight: 600; text-decoration: none; }
.activity-list { padding: 0 21px 8px; }.activity-item { align-items: center; border-top: 1px solid #edf1f5; display: flex; gap: 11px; padding: 13px 0; }.activity-dot { align-items: center; border-radius: 50%; display: flex; flex: 0 0 29px; font-size: 14px; font-weight: 700; height: 29px; justify-content: center; }.activity-dot.purchase { background: #e4f1ff; color: #1475c8; }.activity-dot.order { background: #e9f8ee; color: #24965a; }.activity-detail { min-width: 0; }.activity-detail strong, .activity-detail span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.activity-detail strong { font-size: 12px; }.activity-detail span { color: #8b9aab; font-size: 11px; margin-top: 3px; }.activity-amount { color: #34516f; font-size: 12px; margin-left: auto; white-space: nowrap; }
.quick-action-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); padding: 0 20px 20px; }.quick-action-grid a { background: #f6faff; border: 1px solid #e4eef7; border-radius: 8px; color: #245176; display: grid; font-size: 12px; gap: 5px; padding: 14px; text-decoration: none; transition: .15s ease; }.quick-action-grid a:hover { border-color: #9bc7ed; transform: translateY(-1px); }.quick-action-grid b { color: #0b6db6; font-size: 20px; line-height: 1; }
.table-panel .table { font-size: 12px; }.table-panel th { background: #f8fafc; border-bottom-color: #e8eef4; color: #778aa0; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 10px 15px; text-transform: uppercase; }.table-panel td { border-color: #eef2f6; color: #536d85; padding: 11px 15px; }.table-panel td strong { color: #244664; }.status { background: #e8f7ed; border-radius: 999px; color: #278451; font-size: 11px; padding: 4px 7px; white-space: nowrap; }
.low-stock-panel { margin-bottom: 12px; }.low-stock-list { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 20px 18px; }.low-stock-list > div { align-items: center; border-top: 1px solid #eef2f6; display: flex; justify-content: space-between; padding: 12px 8px 12px 0; margin-right: 15px; }.low-stock-list strong, .low-stock-list span { display: block; }.low-stock-list strong { font-size: 12px; }.low-stock-list div div span { color: #8b9aab; font-size: 11px; margin-top: 3px; }.stock-alert { color: #c62828; font-size: 11px; font-weight: 700; text-align: right; }.empty-state { color: #8292a5; font-size: 13px; padding: 25px 21px; }.empty-state.success { color: #278451; }
.category-panel { padding: 22px; }.category-toolbar { align-items: center; display: flex; gap: 14px; justify-content: space-between; margin-bottom: 14px; }.category-search { display: flex; gap: 8px; max-width: 540px; width: 100%; }.category-meta { border-bottom: 1px solid #edf2f6; color: #7d8da0; font-size: 12px; padding-bottom: 13px; }.category-table { font-size: 13px; }.category-table th { background: #f8fafc; color: #73869d; font-size: 10px; letter-spacing: .04em; padding: 12px 13px; text-transform: uppercase; }.category-table td { border-color: #edf2f6; color: #566f86; padding: 13px; }.category-table td strong { color: #264967; }.category-status { border-radius: 20px; font-size: 11px; font-weight: 600; padding: 4px 9px; }.category-status.active { background: #e7f7ed; color: #22804e; }.category-status.inactive { background: #eff2f5; color: #687789; }.category-pagination { align-items: center; color: #718298; display: flex; font-size: 12px; justify-content: space-between; padding-top: 18px; }.category-pagination > div { display: flex; gap: 4px; }.category-pagination .disabled { opacity: .45; pointer-events: none; }
.detail-table td small { color: #8494a5; display: block; font-size: 11px; margin-top: 3px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-name-cell { align-items: center; display: flex; gap: 9px; min-width: 180px; }.product-name-cell img, .product-placeholder { align-items: center; background: #edf4fb; border-radius: 7px; color: #3d78a7; display: flex; flex: 0 0 35px; height: 35px; justify-content: center; object-fit: cover; width: 35px; }.product-table td small { color: #8494a5; display: block; font-size: 11px; margin-top: 3px; }.product-table td strong { font-size: 12px; }.stock-low { color: #cb7909; font-weight: 700; }.product-form { padding: 0; }.form-section { border-bottom: 1px solid #edf2f6; padding: 24px; }.form-section:last-of-type { border-bottom: 0; }.form-section h2 { color: #294866; font-size: 16px; font-weight: 700; margin: 0 0 18px; }.form-actions { display: flex; gap: 10px; justify-content: flex-end; padding: 20px 24px; }.product-form-image { border: 1px solid #e1e9f1; border-radius: 8px; height: 72px; object-fit: cover; width: 72px; }
.purchase-form { padding: 0; }.purchase-items-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 18px; }.purchase-items-heading h2 { margin-bottom: 0; }.purchase-items-table { font-size: 12px; min-width: 820px; }.purchase-items-table th { background: #f8fafc; color: #73869d; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }.purchase-items-table td { vertical-align: top; }.purchase-items-table .form-control, .purchase-items-table .form-select { font-size: 12px; min-width: 95px; }.stock-hint { color: #8192a5; display: block; font-size: 10px; margin-top: 4px; }.purchase-summary { align-items: center; background: #f5faff; border-top: 1px solid #dbeaf8; color: #52708b; display: flex; font-size: 13px; justify-content: flex-end; gap: 18px; padding: 16px 24px; }.purchase-summary strong { color: #1269b0; font-size: 20px; }
.medicine-search-box { margin-bottom: 20px; max-width: 620px; position: relative; }.medicine-results { background: #fff; border: 1px solid #dce7f0; border-radius: 8px; box-shadow: 0 8px 18px rgba(19, 59, 94, .12); display: grid; left: 0; max-height: 220px; overflow-y: auto; position: absolute; right: 0; top: 70px; z-index: 4; }.medicine-results:empty { display: none; }.medicine-result { background: #fff; border: 0; border-bottom: 1px solid #edf2f6; color: #35536f; font-size: 12px; padding: 10px 12px; text-align: left; }.medicine-result:hover { background: #f4f9fe; }.order-summary { align-items: stretch; background: #f5faff; border-top: 1px solid #dbeaf8; display: flex; justify-content: flex-end; }.order-summary > div { border-left: 1px solid #dbeaf8; color: #607a94; display: grid; font-size: 12px; gap: 3px; padding: 14px 22px; }.order-summary strong { color: #2c5275; font-size: 16px; }.order-summary .grand { background: #e7f3ff; }.order-summary .grand strong { color: #0b66aa; font-size: 20px; }
.report-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }.report-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 20px; }.report-panel { min-width: 0; }.report-filter { align-items: center; display: flex; gap: 8px; padding: 0 21px 16px; }.report-filter input { border: 1px solid #d9e4ed; border-radius: 6px; font-size: 12px; padding: 6px 8px; }.range-filter span { color: #789; font-size: 12px; }.report-totals { border-bottom: 1px solid #e7eef4; border-top: 1px solid #e7eef4; display: grid; grid-template-columns: repeat(3, 1fr); }.report-totals.two { grid-template-columns: repeat(2, 1fr); }.report-totals div { border-right: 1px solid #e7eef4; display: grid; gap: 4px; padding: 12px 16px; }.report-totals div:last-child { border-right: 0; }.report-totals span { color: #7a8c9f; font-size: 10px; text-transform: uppercase; }.report-totals strong { color: #235078; font-size: 15px; }.report-table { font-size: 12px; }.report-table th { background: #f8fafc; color: #75889f; font-size: 10px; letter-spacing: .04em; padding: 10px 13px; text-transform: uppercase; }.report-table td { border-color: #edf2f6; color: #546d84; padding: 10px 13px; }.report-table td strong { color: #294c69; }.report-table td small { color: #8a9aaa; display: block; font-size: 10px; margin-top: 2px; }
.report-catalog { display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr)); }.report-catalog-card { background:#fff; border:1px solid #e1eaf1; border-radius:10px; color:#294c69; display:grid; gap:8px; min-height:150px; padding:22px; text-decoration:none; transition:.15s ease; }.report-catalog-card:hover { border-color:#8fb8d7; box-shadow:0 4px 14px rgba(30,70,100,.1); color:#235078; transform:translateY(-1px); }.report-catalog-card i { color:#2c7fb8; font-size:24px; }.report-catalog-card strong { font-size:16px; }.report-catalog-card span { color:#6d8294; font-size:13px; }
.settings-panel { margin-top: 18px; }.settings-panel .nav-tabs { border-bottom-color: #e1eaf2; }.settings-panel .nav-link { color: #60788f; font-size: 13px; font-weight: 600; }.settings-panel .nav-link.active { color: #0b5fa5; }.settings-body { padding: 25px; }.settings-body h2 { color: #294866; font-size: 17px; font-weight: 700; margin: 0 0 20px; }.settings-footer { border-top: 1px solid #e7eef4; padding: 16px 25px; text-align: right; }.settings-switches { display: grid; gap: 13px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 25px 0; }.settings-switches .form-switch { background: #f7fafc; border: 1px solid #e8eff5; border-radius: 7px; padding: 12px 12px 12px 42px; }.settings-logo-preview { border: 1px solid #e0e8ef; border-radius: 8px; max-height: 80px; max-width: 160px; object-fit: contain; padding: 4px; }
.invoice-page { background: #edf2f6; padding: 28px; }.invoice-actions { display: flex; gap: 10px; justify-content: flex-end; margin: 0 auto 16px; max-width: 210mm; }.thermal-help { color: #60758a; font-size: 12px; margin: 0 auto 16px; max-width: 210mm; text-align: right; }.invoice-alert { margin: 0 auto 16px; max-width: 210mm; }.invoice-sheet { background: #fff; box-shadow: 0 2px 18px rgba(23, 52, 79, .13); margin: auto; max-width: 210mm; min-height: 297mm; padding: 18mm; }.invoice-header { align-items: flex-start; border-bottom: 2px solid #0b5fa5; display: flex; justify-content: space-between; padding-bottom: 17px; }.invoice-brand { align-items: center; display: flex; gap: 12px; }.invoice-logo, .invoice-logo-image { align-items: center; background: #0b5fa5; border-radius: 9px; color: #fff; display: flex; font-size: 16px; font-weight: 700; height: 48px; justify-content: center; object-fit: contain; width: 48px; }.invoice-logo-image { background: #fff; border: 1px solid #dbe6ef; }.invoice-brand h1 { color: #153d62; font-size: 19px; margin: 0 0 3px; }.invoice-brand p, .invoice-title small { color: #73869d; font-size: 11px; margin: 0; }.invoice-title { display: grid; justify-items: end; }.invoice-title span { color: #0b5fa5; font-size: 11px; font-weight: 700; letter-spacing: .1em; }.invoice-title strong { color: #193c5e; font-size: 16px; margin: 4px 0; }.invoice-parties { display: flex; justify-content: space-between; padding: 21px 0; }.invoice-parties div { display: grid; gap: 4px; }.invoice-parties span { color: #8090a2; font-size: 10px; font-weight: 700; letter-spacing: .08em; }.invoice-parties strong { color: #294967; font-size: 13px; }.invoice-parties p { color: #718299; font-size: 11px; margin: 0; }.invoice-table { border-collapse: collapse; font-size: 11px; width: 100%; }.invoice-table th { background: #0b5fa5; color: #fff; font-size: 10px; letter-spacing: .04em; padding: 9px; text-transform: uppercase; }.invoice-table td { border-bottom: 1px solid #e4ebf1; color: #4d667d; padding: 10px 9px; }.invoice-table td small { color: #8797a7; display: block; font-size: 10px; margin-top: 2px; }.invoice-table td strong { color: #294967; }.invoice-bottom { display: flex; gap: 40px; justify-content: space-between; padding-top: 23px; }.invoice-notes { flex: 1; font-size: 11px; }.invoice-notes strong { color: #304f6d; }.invoice-notes p { color: #718299; line-height: 1.5; margin-top: 6px; }.invoice-terms { border-top: 1px dashed #c7d4df; margin-top: 12px; padding-top: 9px; }.invoice-terms p { margin-bottom: 0; }.invoice-totals { min-width: 245px; }.invoice-totals div { display: flex; font-size: 11px; justify-content: space-between; padding: 5px 0; }.invoice-totals dt { color: #718299; font-weight: 500; }.invoice-totals dd { color: #365570; font-weight: 600; margin: 0; }.invoice-totals .grand { border-bottom: 1px solid #dbe5ed; border-top: 1px solid #dbe5ed; margin: 3px 0; padding: 9px 0; }.invoice-totals .grand dt, .invoice-totals .grand dd { color: #0b5fa5; font-size: 13px; font-weight: 700; }.invoice-footer { border-top: 1px solid #e4ebf1; color: #8594a3; font-size: 10px; margin-top: 45px; padding-top: 12px; text-align: center; }
.invoice-thermal-items { display: none; }
@media (max-width: 620px) { .order-summary { flex-wrap: wrap; justify-content: stretch; }.order-summary > div { flex: 1 1 45%; }.invoice-page { padding: 0; }.invoice-sheet { padding: 22px; }.invoice-header, .invoice-bottom { gap: 18px; }.invoice-brand h1 { font-size: 15px; }.invoice-totals { min-width: 180px; } }
@media print { .no-print { display: none !important; }.invoice-page { background: #fff; padding: 0; }.invoice-sheet { box-shadow: none; margin: 0; max-width: none; min-height: 0; padding: 12mm; }.invoice-footer { margin-top: 25px; } }
@media print { body.thermal-print { background: #fff; font-family: Arial, sans-serif; width: 80mm; } body.thermal-print .invoice-sheet { box-shadow: none; font-size: 10px; margin: 0; min-height: 0; padding: 3mm; width: 80mm; } body.thermal-print .invoice-header { align-items: center; border-bottom: 1px dashed #000; display: block; padding-bottom: 8px; text-align: center; } body.thermal-print .invoice-brand { display: block; } body.thermal-print .invoice-logo, body.thermal-print .invoice-logo-image { height: 32px; margin: 0 auto 5px; width: 32px; } body.thermal-print .invoice-brand h1 { color: #000; font-size: 14px; } body.thermal-print .invoice-brand p, body.thermal-print .invoice-title small { color: #000; font-size: 9px; } body.thermal-print .invoice-title { justify-items: center; margin-top: 7px; } body.thermal-print .invoice-title span, body.thermal-print .invoice-title strong { color: #000; font-size: 10px; } body.thermal-print .invoice-parties { border-bottom: 1px dashed #000; display: block; padding: 9px 0; } body.thermal-print .invoice-parties div + div { margin-top: 7px; } body.thermal-print .invoice-parties span, body.thermal-print .invoice-parties strong, body.thermal-print .invoice-parties p { color: #000; font-size: 9px; } body.thermal-print .invoice-table { font-size: 9px; } body.thermal-print .invoice-table th { background: #fff; border-bottom: 1px dashed #000; color: #000; font-size: 8px; padding: 5px 2px; } body.thermal-print .invoice-table th:nth-child(4), body.thermal-print .invoice-table th:nth-child(5), body.thermal-print .invoice-table td:nth-child(4), body.thermal-print .invoice-table td:nth-child(5) { display: none; } body.thermal-print .invoice-table td { border-bottom: 0; color: #000; padding: 5px 2px; } body.thermal-print .invoice-table td strong, body.thermal-print .invoice-table td small { color: #000; font-size: 9px; } body.thermal-print .invoice-bottom { display: block; padding-top: 9px; } body.thermal-print .invoice-notes { border-top: 1px dashed #000; font-size: 9px; padding-top: 8px; } body.thermal-print .invoice-notes strong, body.thermal-print .invoice-notes p { color: #000; font-size: 9px; } body.thermal-print .invoice-totals { margin-left: auto; min-width: 0; width: 100%; } body.thermal-print .invoice-totals div { color: #000; font-size: 10px; padding: 3px 0; } body.thermal-print .invoice-totals dt, body.thermal-print .invoice-totals dd { color: #000; } body.thermal-print .invoice-totals .grand { border-bottom: 1px dashed #000; border-top: 1px dashed #000; } body.thermal-print .invoice-totals .grand dt, body.thermal-print .invoice-totals .grand dd { color: #000; font-size: 11px; } body.thermal-print .invoice-footer { border: 0; color: #000; font-size: 8px; margin-top: 15px; padding-top: 0; } }
@media (max-width: 1200px) { .metric-grid { grid-template-columns: repeat(2, 1fr); }.low-stock-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 980px) { .report-grid,.report-catalog { grid-template-columns: 1fr; } }
.settings-switches .form-switch .form-check-label { cursor: pointer; display: block; line-height: 1.25; }
.settings-option-title { color: #244665; display: block; font-size: 14px; font-weight: 600; }
.settings-option-description { color: #6c7f91; display: block; font-size: 12px; margin-top: 3px; }
@media (max-width: 620px) { .settings-switches { grid-template-columns: 1fr; }.settings-body { padding: 18px; }.settings-footer { padding: 15px 18px; } }
@media (max-width: 820px) { body.dashboard-body { height: auto; min-height: 100dvh; overflow: auto; }.dashboard-shell { height: auto; min-height: 100vh; overflow: visible; } body.mobile-navigation-open { overflow: hidden; }.dashboard-sidebar { box-shadow: 8px 0 26px rgba(4, 29, 53, .25); display: flex; height: 100dvh; left: 0; min-height: 0; overflow: hidden; position: fixed; top: 0; transform: translateX(-105%); transition: transform .2s ease; width: 280px; z-index: 1100; }.dashboard-sidebar.mobile-open { transform: translateX(0); }.mobile-nav-toggle { align-items: center; display: inline-flex; justify-content: center; margin-left: -7px; min-height: 44px; min-width: 44px; }.mobile-nav-backdrop { touch-action: none; }.global-topbar { left: 0; padding: 0 16px; }.global-topbar-context { display: none; }.dashboard-main { height: auto; max-width: 100%; min-height: 100vh; overflow: visible; padding: 86px 16px 22px; }.primary-grid, .secondary-grid { grid-template-columns: 1fr; }.dashboard-header { align-items: flex-start; gap: 14px; }.account-identity, .account-menu-chevron { display: none; } }
@media (max-width: 500px) { .metric-grid, .low-stock-list { grid-template-columns: 1fr; }.dashboard-header h1 { font-size: 23px; }.metric-card { min-height: 95px; }.quick-action-grid { grid-template-columns: 1fr; }.low-stock-list > div { margin-right: 0; } }
@media (max-width: 620px) { .category-panel { padding: 14px; }.category-toolbar, .category-pagination { align-items: stretch; flex-direction: column; }.category-search { flex-wrap: wrap; }.category-search .form-control { flex: 1 1 100%; }.category-pagination > div { flex-wrap: wrap; } }

/* One global top bar is rendered by the shared layout. Individual page headers
   must not show a second account menu beneath it. */
.global-topbar .user-menu strong { display: block; font-size: 13px; }
.global-topbar .user-menu small { color: #72849a; display: block; font-size: 11px; }
.dashboard-header .user-menu { display: none !important; }

/* Shared module-page title treatment.  Every authenticated module renders
   inside .dashboard-main, so this keeps headings visually aligned without
   duplicating page-header markup in each view. */
.dashboard-main h1 {
    color: #173b68;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.2;
    margin-bottom: 6px !important;
}
.dashboard-main h1 + p.text-secondary,
.dashboard-main h1 + .text-secondary {
    color: #6580aa !important;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 0;
}
@media (max-width: 500px) {
    .dashboard-main h1 { font-size: 24px; }
}

/* The dashboard already supplies its own contextual eyebrow and date. */
.dashboard-header h1::before { content: none; }

.sidebar-footer { align-items: center; display: flex; flex-direction: column; gap: 3px; text-align: center; }
.sidebar-footer small { color: #6f9fbe; font-size: 10px; line-height: 1.4; }
.sidebar-footer a { color: inherit; text-decoration: none; }
.sidebar-footer a:hover { color: #c5daed; text-decoration: underline; }
.category-parent-row > td { background: #f7fbff; border-top: 2px solid #dbe9f5; }
.category-child-marker { color: #6f9fbe; display: inline-block; font-weight: 700; margin-right: 8px; width: 18px; }
.dashboard-page-header { align-items: flex-start; display: flex; gap: 18px; justify-content: space-between; margin-bottom: 22px; }
.dashboard-page-header .page-primary-action { align-self: center; min-width: 132px; white-space: nowrap; }
@media (max-width: 620px) { .dashboard-page-header { align-items: stretch; flex-direction: column; }.dashboard-page-header .page-primary-action { align-self: flex-start; } }

/* Page actions must retain their normal button height when the neighbouring
   title contains an eyebrow and descriptive text. */
.dashboard-main > .container-fluid > .d-flex.justify-content-between { align-items: flex-start; }
.dashboard-main > .container-fluid > .d-flex.justify-content-between > .btn,
.dashboard-main > .container-fluid > .d-flex.justify-content-between > a.btn { align-self: flex-start; }

/* Shared subpage navigation. Existing Back links receive this class at load;
   pages without one receive the same route-aware control above their heading. */
.subpage-back-row { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.subpage-action-footer { justify-content: flex-end !important; }
/* Form-level actions (used by Dispense, returns, and adjustments) are always
   aligned with the application's right-side primary-action convention. */
.dashboard-main .container-fluid > form > .mt-3 { display: flex; gap: 8px; justify-content: flex-end; }
.page-back-button { align-items: center; border-color: #d7e2ee; color: #355a7d; display: inline-flex !important; font-size: 13px; gap: 7px; line-height: 1.2; padding: 8px 12px; white-space: nowrap; }
.page-back-button:hover { background: #f4f8fc; border-color: #b9cee2; color: #174f80; }
.page-back-button .bi { font-size: 14px; }
@media (max-width: 620px) { .subpage-back-row { justify-content: flex-start; margin-bottom: 12px; } }

/* Searchable select: the search field appears only inside the opened list. */
.searchable-select { position: relative; }
.searchable-select-trigger { align-items: center; display: flex; justify-content: space-between; text-align: left; width: 100%; }
.searchable-select-menu { background: #fff; border: 1px solid #cfddeb; border-radius: 8px; box-shadow: 0 8px 22px rgba(35, 66, 96, .18); left: 0; padding: 8px; position: absolute; right: 0; top: calc(100% + 4px); z-index: 1050; }
.searchable-select-search { margin-bottom: 7px; }
.inventory-filter-pickers { width: 100%; }.inventory-filter-pickers .searchable-select { flex: 1 1 0; min-width: 0; }@media (min-width:768px) { .dashboard-main form .row > .col-md-2:has(> .inventory-filter-pickers) { flex: 0 0 auto; width: 33.333333%; } }
@media (min-width:1200px) { .dashboard-main form.card:has(input[name="category"]) .row > .col-md-4 { flex:0 0 auto; width:25%; }.dashboard-main form.card:has(input[name="category"]) .row > .col-md-3:has(.searchable-select) { flex:0 0 auto; width:25%; }.dashboard-main form.card:has(input[name="category"]) .row > .col-md-2:has(select[name="status"]) { flex:0 0 auto; width:16.666667%; }.dashboard-main form.card:has(input[name="category"]) .row > .col-md-3:last-child { flex:0 0 auto; width:8.333333%; white-space:nowrap; } }
.searchable-select-options { max-height: 240px; overflow-y: auto; }
.searchable-select-group + .searchable-select-group { border-top: 1px solid #edf2f7; margin-top: 6px; padding-top: 6px; }
.searchable-select-group-label { color: #6981a0; font-size: 10px; font-weight: 700; letter-spacing: .08em; padding: 4px 8px; text-transform: uppercase; }
.searchable-select-option { background: transparent; border: 0; border-radius: 5px; color: #173b68; display: block; font-size: 14px; padding: 7px 8px; text-align: left; width: 100%; }
.searchable-select-option:hover, .searchable-select-option:focus { background: #edf6ff; outline: 0; }
.searchable-select-option[aria-selected="true"] { background: #e1f0ff; color: #075da4; font-weight: 600; }
.searchable-select-empty { color: #7d8fa4; font-size: 13px; padding: 12px 8px 5px; text-align: center; }

/* OPD receipt settings: the invoice tab controls what is rendered and these
   print rules apply the selected stock to the browser print job. */
@media print {
    .dashboard-sidebar,
    .global-topbar { display: none !important; }
    .dashboard-shell, .dashboard-main { height: auto; overflow: visible; }.dashboard-main { max-width: none; padding: 0; }
    /* Screen navigation/actions must never be included in document printouts. */
    .dashboard-main > .container-fluid > .d-flex.flex-wrap.justify-content-between.gap-2.mb-3 > :last-child { display: none !important; }
    .dashboard-main .btn-outline-secondary[onclick="window.print()"],
    .dashboard-main a.btn-light[href$="/customer-returns"] { display: none !important; }
    .invoice-paper-80mm .invoice-sheet,
    .invoice-paper-58mm .invoice-sheet { min-height: 0; }
    body.invoice-paper-A4 { width: 210mm; }
    body.invoice-paper-A4 .invoice-sheet { min-height: 297mm; padding: 12mm; width: 210mm; }
    .invoice-paper-80mm .invoice-header,
    .invoice-paper-58mm .invoice-header { align-items: center; border-bottom: 1px dashed #000; display: block; padding-bottom: 8px; text-align: center; }
    .invoice-paper-80mm .invoice-brand,
    .invoice-paper-58mm .invoice-brand { display: block; }
    .invoice-paper-80mm .invoice-logo,
    .invoice-paper-80mm .invoice-logo-image,
    .invoice-paper-58mm .invoice-logo,
    .invoice-paper-58mm .invoice-logo-image { height: 32px; margin: 0 auto 5px; width: 32px; }
    .invoice-paper-80mm .invoice-parties,
    .invoice-paper-58mm .invoice-parties { border-bottom: 1px dashed #000; display: block; padding: 9px 0; }
    .invoice-paper-80mm .invoice-parties div + div,
    .invoice-paper-58mm .invoice-parties div + div { margin-top: 7px; }
    .invoice-paper-80mm .invoice-table th,
    .invoice-paper-58mm .invoice-table th { background: #fff; border-bottom: 1px dashed #000; color: #000; padding: 5px 2px; }
    .invoice-paper-80mm .invoice-table td,
    .invoice-paper-58mm .invoice-table td { color: #000; padding: 5px 2px; }
    .invoice-paper-80mm .invoice-bottom,
    .invoice-paper-58mm .invoice-bottom { display: block; padding-top: 9px; }
    .invoice-paper-80mm .invoice-totals,
    .invoice-paper-58mm .invoice-totals { margin-left: auto; min-width: 0; width: 100%; }
    .invoice-paper-80mm .invoice-footer,
    .invoice-paper-58mm .invoice-footer { border: 0; color: #000; font-size: 8px; margin-top: 15px; padding-top: 0; }
}
.sort-indicator {
    display: inline-block;
    min-width: .8em;
    color: currentColor;
    font-size: .85em;
    font-weight: 700;
    text-decoration: none;
}

/* Compact customer receipt for 80/58 mm thermal rolls. Keep the full detail
   on A4; thermal copies are intentionally limited to information useful at
   the counter and avoid printing empty or repeated visual blocks. */
@media print {
    @page { margin: 0; }

    .invoice-paper-80mm .invoice-sheet { padding: .5mm 3mm 4mm; }
    .invoice-paper-58mm .invoice-sheet { padding: .5mm 3mm 3.5mm; }

    /* The logo is governed by the Show Logo setting; keep it compact on 80 mm. */
    .invoice-paper-80mm .invoice-logo { display: flex; height: 28px; margin: 0 auto 3px; width: 28px; }
    .invoice-paper-80mm .invoice-logo-image { display: block; height: 28px; margin: 0 auto 3px; width: 28px; }
    .invoice-paper-58mm .invoice-logo,
    .invoice-paper-58mm .invoice-logo-image { display: none; }

    .invoice-paper-80mm .invoice-header { padding-bottom: 5px; }
    .invoice-paper-58mm .invoice-header { padding-bottom: 4px; }

    .invoice-paper-80mm .invoice-brand h1 { font-size: 17px; line-height: 1.15; }
    .invoice-paper-58mm .invoice-brand h1 { font-size: 14px; line-height: 1.15; }

    .invoice-paper-80mm .invoice-brand p { display: block; font-size: 9px; line-height: 1.25; margin: 1px 0; }
    .invoice-paper-58mm .invoice-brand p { display: none; }

    .invoice-paper-80mm .invoice-title,
    .invoice-paper-58mm .invoice-title { display: flex; flex-wrap: wrap; gap: 0 5px; justify-content: center; margin-top: 3px; }

    .invoice-paper-80mm .invoice-title span,
    .invoice-paper-80mm .invoice-title strong,
    .invoice-paper-80mm .invoice-title small { font-size: 10px; margin: 0; }

    .invoice-paper-58mm .invoice-title span,
    .invoice-paper-58mm .invoice-title strong,
    .invoice-paper-58mm .invoice-title small { font-size: 8px; margin: 0; }

    .invoice-paper-80mm .invoice-parties,
    .invoice-paper-58mm .invoice-parties { display: grid; gap: 4px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 5px 0; text-align: left; }

    .invoice-paper-80mm .invoice-parties div + div,
    .invoice-paper-58mm .invoice-parties div + div { margin-top: 0; }

    .invoice-paper-80mm .invoice-parties span { font-size: 9px; line-height: 1.25; }
    .invoice-paper-80mm .invoice-parties strong,
    .invoice-paper-80mm .invoice-parties p { font-size: 10px; line-height: 1.25; }
    .invoice-paper-58mm .invoice-parties span,
    .invoice-paper-58mm .invoice-parties strong,
    .invoice-paper-58mm .invoice-parties p { font-size: 8px; line-height: 1.2; }

    .invoice-paper-80mm .invoice-table { font-size: 10px; }
    .invoice-paper-58mm .invoice-table { font-size: 8px; }

    .invoice-paper-80mm .invoice-table th { font-size: 8px; padding: 4px 2px; }
    .invoice-paper-58mm .invoice-table th { font-size: 7px; padding: 3px 1px; }

    .invoice-paper-80mm .invoice-table td { padding: 4px 2px; }
    .invoice-paper-58mm .invoice-table td { padding: 3px 1px; }

    .invoice-paper-80mm .invoice-table td:first-child small,
    .invoice-paper-58mm .invoice-table td:first-child small { display: none; }

    .invoice-paper-80mm .invoice-bottom { padding-top: 6px; }
    .invoice-paper-58mm .invoice-bottom { padding-top: 4px; }

    .invoice-paper-80mm .invoice-notes { font-size: 9px; padding-top: 5px; }
    .invoice-paper-58mm .invoice-notes { padding-top: 4px; }
    .invoice-paper-80mm .invoice-terms { margin-top: 7px; padding-top: 6px; }
    .invoice-paper-58mm .invoice-terms { margin-top: 5px; padding-top: 4px; }

    .invoice-paper-80mm .invoice-totals div { font-size: 10px; padding: 3px 0; }
    .invoice-paper-58mm .invoice-totals div { font-size: 9px; padding: 2px 0; }

    .invoice-paper-80mm .invoice-totals .grand { margin: 3px 0; padding: 5px 0; }
    .invoice-paper-58mm .invoice-totals .grand { margin: 2px 0; padding: 4px 0; }

    .invoice-paper-80mm .invoice-footer { font-size: 8px; margin-top: 8px; }
    .invoice-paper-58mm .invoice-footer { font-size: 7px; margin-top: 6px; }

    /* An 80 mm roll normally exposes about 72 mm to the print head. Keep the
       receipt itself 2.5 mm inside each printable edge (67 mm total), centred
       on the paper. This deliberately does not assume the paper edge prints. */
    body.invoice-paper-80mm,
    body.invoice-paper-58mm { background: #fff; margin: 0; padding: 0; }
    body.invoice-paper-80mm { width: 80mm; }
    body.invoice-paper-58mm { width: 58mm; }
    .invoice-paper-80mm *,
    .invoice-paper-80mm *::before,
    .invoice-paper-80mm *::after,
    .invoice-paper-58mm *,
    .invoice-paper-58mm *::before,
    .invoice-paper-58mm *::after { box-sizing: border-box; }
    .invoice-paper-80mm .invoice-page,
    .invoice-paper-58mm .invoice-page { margin: 0; max-width: 100%; padding: 0; width: 100%; }
    .invoice-paper-80mm .invoice-sheet,
    .invoice-paper-58mm .invoice-sheet { margin: 0 auto; max-width: 100%; padding: 0; }
    .invoice-paper-80mm .invoice-sheet { font-size: 10px; width: 67mm; }
    .invoice-paper-58mm .invoice-sheet { font-size: 8px; width: 43mm; }

    .invoice-paper-80mm .invoice-header,
    .invoice-paper-80mm .invoice-parties,
    .invoice-paper-80mm .invoice-thermal-items,
    .invoice-paper-80mm .invoice-bottom,
    .invoice-paper-80mm .invoice-footer,
    .invoice-paper-58mm .invoice-header,
    .invoice-paper-58mm .invoice-parties,
    .invoice-paper-58mm .invoice-thermal-items,
    .invoice-paper-58mm .invoice-bottom,
    .invoice-paper-58mm .invoice-footer { max-width: 100%; width: 100%; }

    .invoice-paper-80mm .invoice-brand h1,
    .invoice-paper-80mm .invoice-brand p,
    .invoice-paper-58mm .invoice-brand h1,
    .invoice-paper-58mm .invoice-brand p { overflow-wrap: anywhere; }
    .invoice-paper-80mm .invoice-parties > div,
    .invoice-paper-58mm .invoice-parties > div { min-width: 0; overflow-wrap: anywhere; }
    .invoice-paper-80mm .invoice-notes,
    .invoice-paper-80mm .invoice-footer,
    .invoice-paper-58mm .invoice-notes,
    .invoice-paper-58mm .invoice-footer { min-width: 0; overflow-wrap: anywhere; }

    /* A five-column receipt cannot fit three repeated "PKR" prefixes on an
       80 mm roll. The totals retain the currency label; line amounts inherit it. */
    .invoice-paper-80mm .invoice-line-currency,
    .invoice-paper-58mm .invoice-line-currency { display: none; }

    .invoice-paper-80mm .invoice-table,
    .invoice-paper-58mm .invoice-table { table-layout: fixed; width: 100%; }

    .invoice-paper-80mm .invoice-col-medicine { width: 27%; }
    .invoice-paper-80mm .invoice-col-quantity { width: 9%; }
    .invoice-paper-80mm .invoice-col-rate,
    .invoice-paper-80mm .invoice-col-discount { width: 21%; }
    .invoice-paper-80mm .invoice-col-total { width: 22%; }
    .invoice-paper-80mm .invoice-table-without-discount .invoice-col-medicine { width: 36%; }
    .invoice-paper-80mm .invoice-table-without-discount .invoice-col-quantity { width: 10%; }
    .invoice-paper-80mm .invoice-table-without-discount .invoice-col-rate { width: 26%; }
    .invoice-paper-80mm .invoice-table-without-discount .invoice-col-total { width: 28%; }

    .invoice-paper-58mm .invoice-col-medicine { width: 28%; }
    .invoice-paper-58mm .invoice-col-quantity { width: 8%; }
    .invoice-paper-58mm .invoice-col-rate,
    .invoice-paper-58mm .invoice-col-discount { width: 21%; }
    .invoice-paper-58mm .invoice-col-total { width: 22%; }
    .invoice-paper-58mm .invoice-table-without-discount .invoice-col-medicine { width: 36%; }
    .invoice-paper-58mm .invoice-table-without-discount .invoice-col-quantity { width: 9%; }
    .invoice-paper-58mm .invoice-table-without-discount .invoice-col-rate { width: 26%; }
    .invoice-paper-58mm .invoice-table-without-discount .invoice-col-total { width: 29%; }

    .invoice-paper-80mm .invoice-table th:not(:first-child),
    .invoice-paper-80mm .invoice-table td:not(:first-child),
    .invoice-paper-58mm .invoice-table th:not(:first-child),
    .invoice-paper-58mm .invoice-table td:not(:first-child) { font-variant-numeric: tabular-nums; white-space: nowrap; }

    .invoice-paper-80mm .invoice-table td:first-child,
    .invoice-paper-58mm .invoice-table td:first-child { overflow-wrap: anywhere; }

    /* Thermal paper uses two compact lines per medicine. This avoids squeezing
       rate, discount, and total into columns that are narrower than a price. */
    .invoice-paper-80mm .invoice-table,
    .invoice-paper-58mm .invoice-table { display: none; }
    .invoice-paper-80mm .invoice-thermal-items,
    .invoice-paper-58mm .invoice-thermal-items { border-bottom: 1px dashed #000; border-top: 1px dashed #000; display: block; }
    .invoice-paper-80mm .invoice-thermal-item,
    .invoice-paper-58mm .invoice-thermal-item { border-bottom: 1px dotted #aaa; color: #000; padding: 4px 0; }
    .invoice-paper-80mm .invoice-thermal-item:last-child,
    .invoice-paper-58mm .invoice-thermal-item:last-child { border-bottom: 0; }
    .invoice-paper-80mm .invoice-thermal-item-name,
    .invoice-paper-58mm .invoice-thermal-item-name { display: flex; gap: 8px; justify-content: space-between; min-width: 0; }
    .invoice-paper-80mm .invoice-thermal-item-name strong,
    .invoice-paper-80mm .invoice-thermal-item-name span,
    .invoice-paper-58mm .invoice-thermal-item-name strong,
    .invoice-paper-58mm .invoice-thermal-item-name span { color: #000; min-width: 0; overflow-wrap: anywhere; }
    .invoice-paper-80mm .invoice-thermal-item-name strong,
    .invoice-paper-58mm .invoice-thermal-item-name strong { flex: 1 1 auto; overflow-wrap: anywhere; }
    .invoice-paper-80mm .invoice-thermal-item-name span,
    .invoice-paper-58mm .invoice-thermal-item-name span { flex: 0 1 auto; text-align: right; }
    .invoice-paper-80mm .invoice-thermal-item-values { display: grid; font-size: 9px; gap: 2px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2px; }
    .invoice-paper-58mm .invoice-thermal-item-values { display: grid; font-size: 7px; gap: 2px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2px; }
    .invoice-paper-80mm .invoice-thermal-item-values > *,
    .invoice-paper-58mm .invoice-thermal-item-values > * { min-width: 0; overflow-wrap: anywhere; }
    .invoice-paper-80mm .invoice-thermal-item-values strong { text-align: right; }
    .invoice-paper-58mm .invoice-thermal-item-values strong { grid-column: 1 / -1; text-align: right; }
    .invoice-paper-80mm .invoice-totals div,
    .invoice-paper-58mm .invoice-totals div { gap: 4px; min-width: 0; }
    .invoice-paper-80mm .invoice-totals dt,
    .invoice-paper-58mm .invoice-totals dt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
    .invoice-paper-80mm .invoice-totals dd,
    .invoice-paper-58mm .invoice-totals dd { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; text-align: right; }
}

nav .pagination { margin-left: auto; width: fit-content; }