/* Layout & spacing helpers for this app (grid, spacing, text, flex) and a few components HMS app.css does not define.
   Loaded AFTER app.css. Plain CSS, no framework. */
[class*="col-md-"],[class*="col-lg-"],[class*="col-sm-"]{flex:0 0 auto;width:100%;max-width:100%}
:root{--g:.5rem}
.row{display:flex;flex-wrap:wrap;gap:var(--g);margin:0}
.g-1{--g:.25rem}.g-2{--g:.5rem}.g-3{--g:1rem}
.col{flex:1 1 0;min-width:0}.col-auto,.col-md-auto{flex:0 0 auto;width:auto;max-width:100%}
.col-1{flex:0 0 auto;width:calc(8.3333% - var(--g) * 0.9167)}.col-2{flex:0 0 auto;width:calc(16.6667% - var(--g) * 0.8333)}.col-3{flex:0 0 auto;width:calc(25% - var(--g) * 0.75)}.col-4{flex:0 0 auto;width:calc(33.3333% - var(--g) * 0.6667)}.col-5{flex:0 0 auto;width:calc(41.6667% - var(--g) * 0.5833)}.col-6{flex:0 0 auto;width:calc(50% - var(--g) * 0.5)}.col-7{flex:0 0 auto;width:calc(58.3333% - var(--g) * 0.4167)}.col-8{flex:0 0 auto;width:calc(66.6667% - var(--g) * 0.3333)}.col-9{flex:0 0 auto;width:calc(75% - var(--g) * 0.25)}.col-10{flex:0 0 auto;width:calc(83.3333% - var(--g) * 0.1667)}.col-11{flex:0 0 auto;width:calc(91.6667% - var(--g) * 0.0833)}.col-12{flex:0 0 auto;width:calc(100% - var(--g) * 0)}
@media(min-width:576px){.col-sm-1{width:calc(8.3333% - var(--g) * 0.9167)}.col-sm-2{width:calc(16.6667% - var(--g) * 0.8333)}.col-sm-3{width:calc(25% - var(--g) * 0.75)}.col-sm-4{width:calc(33.3333% - var(--g) * 0.6667)}.col-sm-5{width:calc(41.6667% - var(--g) * 0.5833)}.col-sm-6{width:calc(50% - var(--g) * 0.5)}.col-sm-7{width:calc(58.3333% - var(--g) * 0.4167)}.col-sm-8{width:calc(66.6667% - var(--g) * 0.3333)}.col-sm-9{width:calc(75% - var(--g) * 0.25)}.col-sm-10{width:calc(83.3333% - var(--g) * 0.1667)}.col-sm-11{width:calc(91.6667% - var(--g) * 0.0833)}.col-sm-12{width:calc(100% - var(--g) * 0)}.col-sm-auto{width:auto}}
@media(min-width:768px){.col-md-1{width:calc(8.3333% - var(--g) * 0.9167)}.col-md-2{width:calc(16.6667% - var(--g) * 0.8333)}.col-md-3{width:calc(25% - var(--g) * 0.75)}.col-md-4{width:calc(33.3333% - var(--g) * 0.6667)}.col-md-5{width:calc(41.6667% - var(--g) * 0.5833)}.col-md-6{width:calc(50% - var(--g) * 0.5)}.col-md-7{width:calc(58.3333% - var(--g) * 0.4167)}.col-md-8{width:calc(66.6667% - var(--g) * 0.3333)}.col-md-9{width:calc(75% - var(--g) * 0.25)}.col-md-10{width:calc(83.3333% - var(--g) * 0.1667)}.col-md-11{width:calc(91.6667% - var(--g) * 0.0833)}.col-md-12{width:calc(100% - var(--g) * 0)}.col-md-auto{width:auto}}
@media(min-width:992px){.col-lg-1{width:calc(8.3333% - var(--g) * 0.9167)}.col-lg-2{width:calc(16.6667% - var(--g) * 0.8333)}.col-lg-3{width:calc(25% - var(--g) * 0.75)}.col-lg-4{width:calc(33.3333% - var(--g) * 0.6667)}.col-lg-5{width:calc(41.6667% - var(--g) * 0.5833)}.col-lg-6{width:calc(50% - var(--g) * 0.5)}.col-lg-7{width:calc(58.3333% - var(--g) * 0.4167)}.col-lg-8{width:calc(66.6667% - var(--g) * 0.3333)}.col-lg-9{width:calc(75% - var(--g) * 0.25)}.col-lg-10{width:calc(83.3333% - var(--g) * 0.1667)}.col-lg-11{width:calc(91.6667% - var(--g) * 0.0833)}.col-lg-12{width:calc(100% - var(--g) * 0)}.col-lg-auto{width:auto}}
@media(min-width:768px){.offset-md-6{margin-left:calc(50% + var(--g) / 2)}}
.m-0{margin:0}.mb-0{margin-bottom:0}.mt-0{margin-top:0}.me-0{margin-right:0}.ms-0{margin-left:0}.p-0{padding:0}.pt-0{padding-top:0}.pb-0{padding-bottom:0}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.gap-0{gap:0}
.m-1{margin:.25rem}.mb-1{margin-bottom:.25rem}.mt-1{margin-top:.25rem}.me-1{margin-right:.25rem}.ms-1{margin-left:.25rem}.p-1{padding:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.gap-1{gap:.25rem}
.m-2{margin:.5rem}.mb-2{margin-bottom:.5rem}.mt-2{margin-top:.5rem}.me-2{margin-right:.5rem}.ms-2{margin-left:.5rem}.p-2{padding:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.gap-2{gap:.5rem}
.m-3{margin:1rem}.mb-3{margin-bottom:1rem}.mt-3{margin-top:1rem}.me-3{margin-right:1rem}.ms-3{margin-left:1rem}.p-3{padding:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.px-3{padding-left:1rem;padding-right:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.gap-3{gap:1rem}
.m-4{margin:1.5rem}.mb-4{margin-bottom:1.5rem}.mt-4{margin-top:1.5rem}.me-4{margin-right:1.5rem}.ms-4{margin-left:1.5rem}.p-4{padding:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.px-4{padding-left:1.5rem;padding-right:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.gap-4{gap:1.5rem}
.m-5{margin:3rem}.mb-5{margin-bottom:3rem}.mt-5{margin-top:3rem}.me-5{margin-right:3rem}.ms-5{margin-left:3rem}.p-5{padding:3rem}.pt-5{padding-top:3rem}.pb-5{padding-bottom:3rem}.px-5{padding-left:3rem;padding-right:3rem}.py-5{padding-top:3rem;padding-bottom:3rem}.gap-5{gap:3rem}
.ms-auto{margin-left:auto}@media(min-width:768px){.p-md-4{padding:1.5rem}}
.d-flex{display:flex}.d-inline-flex{display:inline-flex}.d-inline{display:inline}.d-none{display:none}.d-block{display:block}
@media print{.d-print-block{display:block!important}}
.flex-wrap{flex-wrap:wrap}.flex-grow-1{flex-grow:1}.justify-content-between{justify-content:space-between}
.align-items-center{align-items:center}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-self-center{align-self:center}
.align-middle td,.align-middle th{vertical-align:middle}
.text-end{text-align:right}.text-center{text-align:center}.text-nowrap{white-space:nowrap}.small{font-size:11.5px}
.text-muted{color:var(--text-muted)}.text-danger{color:var(--danger)}.text-success{color:var(--success)}.text-body{color:var(--text-primary)}
.fw-bold{font-weight:700}.fs-1{font-size:2.2rem}.fs-5{font-size:1.15rem}.text-decoration-none{text-decoration:none}
.w-auto{width:auto!important}.w-100{width:100%}.h-100{height:100%}
.border{border:1px solid var(--border-color)}.border-top{border-top:1px solid var(--border-color)}.border-bottom{border-bottom:1px solid var(--border-color)}
.rounded{border-radius:6px}.rounded-pill{border-radius:20px}.shadow,.shadow-sm{box-shadow:0 2px 8px rgba(0,0,0,.08)}
.bg-body-secondary,.bg-light{background:var(--theme-table-header-bg)}.bg-body{background:var(--bg-card)}
.position-relative{position:relative}.container{max-width:720px;margin:0 auto;padding:0 12px}
.no-print{}
dt{font-weight:600}
.table-responsive{overflow-x:auto}

/* forms: HMS styles bare inputs; these classes only tweak size/spacing */
.form-label{margin-bottom:5px}
.form-control-sm,.form-select-sm{padding:4px 6px;font-size:12px}
.form-text{font-size:11px;color:var(--text-muted);font-weight:400}
.form-check{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.form-check-inline{display:inline-flex;margin-right:12px}
.form-check-label{flex-direction:row;font-weight:400}
.form-switch{margin-top:18px}
.input-group{display:flex;gap:0}.input-group>*{border-radius:0}.input-group>:first-child{border-radius:6px 0 0 6px}.input-group>:last-child{border-radius:0 6px 6px 0}
select[multiple]{height:auto}
.form-control-color{height:40px}

/* buttons: variants HMS lacks */
.btn-warning{background:#fdf1d6;color:var(--warning);border-color:#f0dca4}
.btn-link{background:none;border:0;color:var(--theme-accent);padding:2px 4px}
.btn-sm{line-height:1.4}
.btn-group{display:inline-flex;gap:0}.btn-group .btn{border-radius:0}.btn-group .btn:first-child{border-radius:6px 0 0 6px}.btn-group .btn:last-child{border-radius:0 6px 6px 0}
.btn-group .btn.active{background:var(--theme-accent);color:#fff;border-color:var(--theme-accent)}
.btn-secondary.active{background:var(--theme-accent);color:#fff;border-color:var(--theme-accent)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* cards: HMS .card pads itself; sections inside get flush headers */
.card{padding:0}
.card.card-body,.card>.card-body,.card-body{padding:18px}
.card-header{padding:12px 18px;border-bottom:1px solid var(--border-color);font-size:14px;font-weight:700}
.card-footer{padding:12px 18px;border-top:1px solid var(--border-color)}
.card-body.border-top{padding:14px 18px}
.card>table.data,.card>.table-responsive{margin:0}
.stat-card .value{font-size:22px;font-weight:800;color:var(--theme-accent)}
.stat-card.accent{border-left:4px solid var(--theme-button-bg)}.stat-card.warn{border-left:4px solid var(--danger)}.stat-card{border-left:4px solid var(--theme-accent)}
.stat-card .text-muted{font-size:11px}
.stat-card.warn .value{color:var(--danger)}

/* tables */
table.data tr.table-danger td{background:#fbe6e3}table.data tr.table-primary td{background:#e1eefc}table.data tr.table-light td{background:var(--theme-table-header-bg)}
table.data.table-hover tbody tr:hover td{background:var(--theme-table-header-bg)}
table.data.table-sm td,table.data.table-sm th{padding:7px 10px}
table.data.table-bordered td,table.data.table-bordered th{border:1px solid var(--border-color)}
table.data td.text-end,table.data th.text-end{text-align:right}
table.data tr:first-child>td{border-top:0}

/* lists, progress, tabs-as-links, alerts */
.list-group{border:1px solid var(--border-color);border-radius:var(--radius);overflow:hidden;background:var(--bg-card)}
.list-group-flush{border:0;border-radius:0}
.list-group-item{padding:10px 14px;border-top:1px solid var(--border-color);display:block;color:var(--text-primary)}
.list-group-item:first-child{border-top:0}
a.list-group-item-action:hover{background:var(--bg-page);text-decoration:none}
.list-group-item.active{background:var(--theme-accent);color:#fff}
.list-group-item-primary{background:#e1eefc;color:#1a5aa8}
.card>.list-group{border:0;border-radius:0}
.progress{height:8px;background:var(--theme-table-header-bg);border-radius:6px;overflow:hidden}
.progress-bar{height:100%;background:var(--theme-accent);color:#fff;font-size:9px;text-align:center}
.progress-bar.bg-success{background:var(--success)}.progress-bar.bg-warning{background:var(--warning)}.progress-bar.bg-danger{background:var(--danger)}
a.tab-btn{text-decoration:none;display:inline-block}
.flash{position:relative}.flash a{color:inherit;font-weight:600;text-decoration:underline}
.flash-close{position:absolute;right:10px;top:8px;background:none;border:0;cursor:pointer;font-size:16px;color:inherit;line-height:1}
.flash-secondary{background:#eceff3;color:#55606e}.flash-dark{background:#dde1e7;color:#2d3642}
.badge-primary{background:#dfe9f6;color:var(--theme-button-bg)}
.badge-dark{background:#dde1e7;color:#2d3642}
.tab-panel.active{display:block}
.perm-group h6{text-transform:capitalize;border-bottom:1px solid var(--border-color);padding-bottom:4px;margin:12px 0 6px;font-size:12px}
dl.row dt,dl.row dd{margin:0 0 4px}
.notif-badge{position:absolute;top:-4px;right:-6px;border-radius:10px;padding:1px 5px;font-size:10px}
.breadcrumb .crumb-sep{margin:0 4px}

/* topbar extras (HMS topbar markup) */
.topbar-actions a.icon-btn,.topbar-actions .icon-btn{position:relative;color:var(--theme-header-text);text-decoration:none}
.user-menu .nav-sep{opacity:.5}
.nav-icon.bi{width:18px;height:auto;font-size:15px;line-height:1}
.brand-logo-i{font-size:22px;line-height:1}
.sidebar .nav-link{text-decoration:none}

/* login */
.login-form label{margin:0}
.login-card .login-icon{font-size:2.2rem;color:var(--theme-accent)}

/* dark theme (HMS ships light only; variables flipped here) */
html[data-theme="dark"]{--bg-page:#0f1623;--bg-card:#17202f;--text-primary:#e6ecf5;--text-muted:#94a3b8;--border-color:#2a3648;--theme-table-header-bg:#1d2838}
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),html[data-theme="dark"] select,html[data-theme="dark"] textarea,
html[data-theme="dark"] .btn-secondary,html[data-theme="dark"] .login-card,html[data-theme="dark"] dialog.modal,html[data-theme="dark"] .dt-paging .dt-paging-button{background:var(--bg-card);color:var(--text-primary)}
html[data-theme="dark"] dialog.modal{color:var(--text-primary)}

@media(max-width:768px){.card-header,.card-body{padding:12px}}.modal-footer{padding:12px 18px;border-top:1px solid var(--border-color);display:flex;gap:8px;justify-content:flex-end}
dialog.modal form{margin:0}
.row>[class*="col"]>.card,.row>[class*="col"]>form.card{margin-bottom:0}
.row>[class*="col"]>.card.mb-3{margin-bottom:0}
.card.mb-3{margin-bottom:16px}.card.mb-2{margin-bottom:8px}
.card.h-100{height:100%}

/* user manual */
.manual h2{font-size:17px;margin:0 0 10px;padding-bottom:8px;border-bottom:2px solid var(--theme-accent)}
.manual h3{font-size:13.5px;margin:18px 0 6px;color:var(--theme-button-bg)}
.manual p{margin:0 0 10px;line-height:1.6}
.manual ol,.manual ul{margin:0 0 10px;padding-left:22px;line-height:1.6}
.manual li{margin-bottom:4px}
.manual code{background:var(--theme-table-header-bg);padding:1px 5px;border-radius:4px;font-size:12px}
.manual table.data td,.manual table.data th{vertical-align:top}
.manual .card{scroll-margin-top:76px}
.manual [id]{scroll-margin-top:76px}
@media print{.manual .card{break-inside:auto;border:0;padding:0}.manual h2{break-after:avoid}.col-lg-9{width:100%!important}}