:root{
--sidebar-width:256px;
--topbar-height:72px;
--header-accent-width:4px}
body{
background:var(--bg);
color:var(--text);
font-family:Inter,"Google Sans","Segoe UI",Roboto,Arial,sans-serif}
a{
text-decoration:none}
.btn{
border-radius:6px;
font-weight:600;
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px}
.btn-primary{
background:var(--bs-btn-bg);
border-color:var(--bs-btn-border-color)}
.form-control,.form-select{
border-color:var(--line);
border-radius:6px}
.login-bg,.admin-body{
min-height:100vh;
background:var(--bg)}
.login-shell{
min-height:100vh;
display:grid;
place-items:center;
padding:24px}
.login-card{
width:min(440px,100%);
padding:36px;
background:var(--panel);
border:1px solid var(--line);
border-radius:8px;
box-shadow:0 2px 8px rgba(60,64,67,.12)}
.login-brand,.sidebar-brand{
display:flex;
align-items:center;
gap:12px}
.login-brand{
padding-bottom:28px;
margin-bottom:24px;
border-bottom:1px solid #e8eaed}
.login-brand-mark,.sidebar-logo{
display:grid;
flex:0 0 44px;
width:44px;
height:44px;
place-items:center;
overflow:hidden;
color:#fff;
background:var(--blue);
border-radius:6px;
font-size:1.2rem}
.brand-logo-image{
display:block;
width:100%;
height:100%;
object-fit:contain}
.login-brand-mark{background:transparent}
.login-brand-mark{
flex-basis:72px;
width:72px;
height:72px}
.login-brand>span:last-child,.sidebar-brand>span:last-child{
display:flex;
min-width:0;
flex-direction:column;
line-height:1.2}
.login-brand h1{
margin:0;
color:var(--brand-navy);
font-size:1.7rem;
font-weight:700;
line-height:1.12}
.login-brand small,.sidebar-brand small{
margin-top:2px;
color:var(--muted);
font-size:.8rem;
overflow:hidden;
text-overflow:ellipsis}
.login-brand small{
margin-top:7px;
font-size:.95rem}
.login-heading{
margin:28px 0 24px}
.login-heading h1{
margin:0 0 6px;
font-size:1.65rem;
font-weight:500}
.login-heading p{
margin:0;
color:var(--muted)}
.login-alert{
display:flex;
gap:9px;
font-size:.9rem}
.login-field{
margin-bottom:18px}
.form-label{
margin-bottom:7px;
color:#3c4043;
font-size:.82rem;
font-weight:600}
.login-field .input-group{
min-height:46px}
.login-field .input-group-text{
width:44px;
justify-content:center;
color:var(--muted);
background:#f8fafd;
border-color:var(--line)}
.form-control:focus,.form-select:focus{
border-color:var(--brand-blue);
box-shadow:0 0 0 3px rgba(21,90,156,.16)}
.login-submit{
width:100%;
min-height:46px;
margin-top:6px}
.admin-topbar{
position:fixed;
z-index:1020;
top:0;
right:0;
left:var(--sidebar-width);
height:var(--topbar-height);
display:flex;
align-items:center;
gap:14px;
padding:0 24px;
background:#fff;
border-bottom:var(--header-accent-width) solid var(--green)}
.topbar-context,.user-summary{
display:flex;
min-width:0;
flex-direction:column}
.topbar-context span,.user-summary small{
color:var(--muted);
font-size:.75rem}
.topbar-context strong,.user-summary strong{
font-size:.92rem;
font-weight:500}
.topbar-actions{
display:flex;
align-items:center;
gap:12px;
margin-left:auto}
.user-summary{
text-align:right}
.icon-button{
width:40px;
height:40px;
display:inline-grid;
flex:0 0 40px;
place-items:center;
padding:0;
color:var(--muted);
background:transparent;
border:1px solid var(--line);
border-radius:50%;
font-size:1.1rem}
.icon-button:hover{
color:var(--blue);
background:#f8fafd}
.sidebar{
position:fixed;
z-index:1030;
inset:0 auto 0 0;
width:var(--sidebar-width);
flex-direction:column;
background:#fff;
border-right:1px solid var(--line);
overflow-y:auto}
.sidebar-brand{
min-height:var(--topbar-height);
padding:10px 20px;
color:var(--text);
border-bottom:1px solid var(--line)}
.sidebar-brand:hover{
color:var(--text)}
.sidebar-logo{
width:40px;
height:40px;
flex-basis:40px;
font-size:1.05rem}
.sidebar-brand strong{
font-size:1.05rem;
font-weight:500;
overflow:hidden;
text-overflow:ellipsis}
.admin-nav{
padding:18px 12px}
.nav-section{
display:block;
padding:16px 14px 7px;
color:var(--muted);
font-size:.7rem;
font-weight:700;
text-transform:uppercase}
.nav-section:first-child{
padding-top:2px}
.admin-nav a{
display:flex;
align-items:center;
gap:14px;
min-height:44px;
padding:9px 14px;
margin:2px 0;
color:#3c4043;
border-radius:0 22px 22px 0;
font-size:.9rem;
font-weight:500}
.admin-nav a i{
width:20px;
color:var(--muted);
text-align:center}
.admin-nav a:hover{
color:var(--text);
background:#f1f3f4}
.admin-nav a.active{
color:#174ea6;
background:#e8f0fe}
.admin-nav a.active i{
color:var(--blue)}
.mobile-menu{
--bs-offcanvas-width:min(300px,88vw)}
.mobile-menu .offcanvas-header{
min-height:var(--topbar-height);
padding:0 16px 0 0;
border-bottom:1px solid var(--line)}
.mobile-menu .sidebar-brand{
border:0}
.mobile-menu .offcanvas-body{
padding:0}
.app-main{
max-width:1800px;
min-height:100vh;
margin-left:var(--sidebar-width);
padding:calc(var(--topbar-height) + 34px) 32px 40px}
.page-title,.section-heading{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px}
.page-title{
padding-bottom:22px;
margin-bottom:28px;
border-bottom:1px solid #e2e5e9}
.page-title h1{
margin:0;
font-size:1.7rem;
font-weight:400;
letter-spacing:0}
.page-title p,.section-heading p{
margin:5px 0 0;
color:var(--muted);
font-size:.9rem}
.settings-section{
background:var(--panel);
border:1px solid var(--line);
border-radius:8px;
overflow:hidden}
.section-heading{
min-height:68px;
padding:14px 20px;
border-bottom:1px solid var(--line)}
.section-heading h2{
margin:0;
font-size:1rem;
font-weight:500}
.contextual-help-link{
display:inline-grid;
width:34px;
height:34px;
flex:0 0 34px;
place-items:center;
color:var(--muted);
border:1px solid var(--line);
border-radius:50%;
font-size:1rem}
.contextual-help-link:hover{
color:var(--blue);
border-color:var(--blue);
background:rgba(var(--bs-primary-rgb),.08)}
.contextual-help-link:focus-visible{
outline:3px solid rgba(var(--bs-primary-rgb),.28);
outline-offset:2px}
.stat-card{
position:relative;
min-height:126px;
padding:18px;
background:#fff;
border:1px solid var(--line);
border-radius:8px}
.stat-card:before{
position:absolute;
content:"";
inset:0 0 auto;
height:3px;
background:var(--blue);
border-radius:8px 8px 0 0}
.stat-card.admin-stat:before{
background:var(--green)}
.stat-card.audit-stat:before{
background:var(--yellow)}
.stat-card span{
display:block;
margin-bottom:8px;
color:var(--muted);
font-size:.85rem}
.stat-card strong{
display:block;
margin-bottom:13px;
font-size:1.75rem;
font-weight:400}
.stat-card small{
color:var(--muted);
font-size:.74rem}
.table>:not(caption)>*>*{
padding:13px 16px;
border-color:var(--line)}
.table thead th{
color:var(--muted);
background:#f8fafd;
font-size:.7rem;
font-weight:700;
text-transform:uppercase;
white-space:nowrap}
.audit-table{
font-size:.82rem}
.audit-table strong,.audit-table small{
display:block}
.audit-table small{
margin-top:3px;
color:var(--muted)}
.audit-time{
min-width:150px;
color:var(--muted)}
.audit-action{
display:inline-block;
padding:4px 7px;
color:var(--blue);
background:rgba(var(--bs-primary-rgb),.1);
border-radius:4px;
font-family:monospace;
font-size:.74rem}
.empty-state{
padding:44px!important;
color:var(--muted)!important;
text-align:center}
.empty-state>i{display:block;margin-bottom:.65rem;color:var(--bs-secondary-color);font-size:1.65rem}
.empty-state>strong{display:block;margin-bottom:.3rem;color:var(--bs-body-color);font-size:.95rem}
.empty-state>span{display:block;max-width:560px;margin:0 auto;color:var(--bs-secondary-color);font-size:.84rem}
.empty-state>.btn{display:inline-flex;margin-top:1rem}
.audit-filters{
display:grid;
grid-template-columns:minmax(260px,1fr) 240px auto auto;
gap:10px;
margin-bottom:18px}
.audit-search{
position:relative}
.audit-search i{
position:absolute;
z-index:2;
top:50%;
left:13px;
color:var(--muted);
transform:translateY(-50%)}
.audit-search input{
padding-left:38px}
.settings-form{
display:grid;
grid-template-columns:1fr 1fr auto;
align-items:end;
gap:14px;
padding:20px}
.user-avatar{
width:36px;
height:36px;
display:grid;
flex:0 0 36px;
place-items:center;
color:var(--blue);
background:rgba(var(--bs-primary-rgb),.1);
border-radius:50%}
.error-page{
max-width:620px;
padding:48px 30px;
margin:8vh auto;
text-align:center}
.error-page-icon{display:grid;width:72px;height:72px;place-items:center;margin:0 auto;color:var(--bs-danger);background:rgba(var(--bs-danger-rgb),.1);border-radius:50%;font-size:2rem}
.error-page-code{margin:1rem 0 0!important;color:var(--bs-secondary-color);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.error-page h1{
margin:.5rem 0 10px;
font-size:1.6rem}
.error-page p{
margin-bottom:24px;
color:var(--muted)}
.error-page-actions{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap}
.error-reference{display:block;margin-top:1.5rem;color:var(--bs-secondary-color)}
@media(max-width:991.98px){
.admin-topbar{
left:0}
.app-main{
margin-left:0;
padding:calc(var(--topbar-height) + 24px) 20px 32px}
.audit-filters{
grid-template-columns:1fr 1fr}
.audit-search{
grid-column:1/-1}
}
@media(max-width:767.98px){
.page-title{
align-items:flex-start;
justify-content:flex-end;
padding-bottom:0;
margin-bottom:18px;
border-bottom:0}
.page-title h1,.page-title p{display:none}
.page-title>div:has(>h1):not(:has(.page-eyebrow)){display:none}
.page-title:has(.page-eyebrow){justify-content:flex-start}
.page-title:not(:has(.page-eyebrow)):not(:has(>:nth-child(2))){display:none}
}
@media(max-width:600px){
.login-shell{
align-items:start;
padding:16px}
.login-card{
margin-top:8vh;
padding:28px 22px}
.login-brand-mark{
flex-basis:60px;
width:60px;
height:60px}
.login-brand h1{font-size:1.45rem}
.settings-form,.audit-filters{
grid-template-columns:1fr}
.audit-search{
grid-column:auto}
.app-main{
padding-right:14px;
padding-left:14px}
.table>:not(caption)>*>*{
padding:11px 12px}
}

/* Texas Door Audit light component treatments */
[data-bs-theme="light"] .admin-topbar{background:var(--brand-navy)}
[data-bs-theme="light"] .topbar-context span,
[data-bs-theme="light"] .user-summary small{color:#c6d7e8}
[data-bs-theme="light"] .topbar-context strong,
[data-bs-theme="light"] .user-summary strong{color:#fff}
[data-bs-theme="light"] .admin-topbar .icon-button{color:#e9f1f8;border-color:rgba(255,255,255,.3)}
[data-bs-theme="light"] .admin-topbar .icon-button:hover{color:var(--brand-navy);background:var(--brand-pale-blue)}
[data-bs-theme="light"] .sidebar{background:var(--brand-navy);border-right-color:#061f43}
[data-bs-theme="light"] .mobile-menu{color:#fff;background:var(--brand-navy)}
[data-bs-theme="light"] .mobile-menu .offcanvas-header{border-bottom-color:rgba(255,255,255,.16)}
[data-bs-theme="light"] .mobile-menu .btn-close{filter:invert(1) grayscale(100%) brightness(200%)}
[data-bs-theme="light"] .sidebar-header,
[data-bs-theme="light"] .sidebar-brand,
[data-bs-theme="light"] .sidebar-brand,
[data-bs-theme="light"] .sidebar-brand:hover,
[data-bs-theme="light"] .sidebar-brand-text,
[data-bs-theme="light"] .sidebar-brand-text strong,
[data-bs-theme="light"] .sidebar-brand small,
[data-bs-theme="light"] .sidebar-brand-text small,
[data-bs-theme="light"] .sidebar-logo{color:#fff;background:transparent}
[data-bs-theme="light"] .nav-section{color:#9fb8d2}
[data-bs-theme="light"] .admin-nav a{color:#e8f0f7}
[data-bs-theme="light"] .admin-nav a i{color:#aac2da}
[data-bs-theme="light"] .admin-nav a:hover{color:#fff;background:rgba(255,255,255,.1)}
[data-bs-theme="light"] .admin-nav a.active{color:var(--brand-navy);background:var(--brand-pale-blue)}
[data-bs-theme="light"] .admin-nav a.active i{color:var(--brand-navy)}
[data-bs-theme="light"] .page-title{border-bottom-color:var(--line)}
[data-bs-theme="light"] .page-title h1{color:var(--brand-navy);font-weight:600}
[data-bs-theme="light"] .settings-section{box-shadow:0 1px 3px rgba(8,44,94,.05)}
[data-bs-theme="light"] .section-heading{background:#fbfcfe}
[data-bs-theme="light"] .section-heading h2{color:var(--brand-navy);font-weight:600}
[data-bs-theme="light"] .table thead th{color:var(--brand-navy);background:#eaf3f8;border-bottom-color:#aec9d9}
[data-bs-theme="light"] .table tbody tr:hover>*{--bs-table-bg-state:#f5f9fc}
.hub-section{margin-bottom:0}
.hub-section+.hub-section{margin-top:2rem}
.hub-section-heading{margin-bottom:1rem;padding-left:.85rem;border-left:4px solid var(--green)}
.hub-section-heading h2{margin:0;color:var(--blue);font-size:1.05rem;font-weight:700}
.hub-section-heading p{margin:.3rem 0 0;color:var(--muted);font-size:.86rem}
.hub-section-heading+.settings-section{margin-top:0}
.htmx-indicator{visibility:hidden!important;opacity:0!important}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{visibility:visible!important;opacity:1!important}
.search-update-indicator{align-self:center;color:var(--bs-secondary-color)}