/* ============================================================
   Elitma Framework — Global Structural Styles
   ZERO hardcoded colors here — always var() from vars.css.
   For color changes, edit vars.css only.
   ============================================================ */


/* ══════════════════════════════════════════════════════════
   RESET
══════════════════════════════════════════════════════════ */

*, *::before, *::after {
    box-sizing: border-box;
    margin:  0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
}

body {
    font-family:      var(--font-family);
    font-size:        var(--font-size-base);
    font-weight:      var(--font-weight-normal);
    line-height:      var(--line-height);
    color:            var(--color-text);
    background-color: var(--color-bg);
    min-height:       100vh;
    display:          flex;
    flex-direction:   column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, video, svg { display: block; max-width: 100%; }
a { color: var(--color-text-link); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-text-link-hover); }
ul, ol { list-style: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; }
button { cursor: pointer; }


/* ══════════════════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════════════════ */

.container {
    width:     100%;
    max-width: var(--container-max);
    margin:    0 auto;
    padding:   0 var(--container-pad);
}

main {
    flex:      1;
    padding:   var(--space-10) var(--container-pad);
    width:     100%;
    max-width: var(--container-max);
    margin:    0 auto;
}

hr {
    border:     none;
    border-top: 1px solid var(--color-border);
    margin:     var(--space-8) 0;
}

section {
    margin-bottom: var(--space-12);
}

/* Simple responsive grid */
.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Overflow guard: grid/flex children default to min-width:auto and refuse
   to shrink below their content, pushing the page past the viewport. */
.grid > *, .stat-grid > * { min-width: 0; }
.card, .card__body { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════
   TYPOGRAPHY
══════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
    font-weight:    var(--font-weight-bold);
    line-height:    1.25;
    color:          var(--color-text);
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom:  var(--space-4);
}
h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }

p { margin-bottom: var(--space-4); color: var(--color-text); }
p:last-child { margin-bottom: 0; }

small { font-size: var(--font-size-sm); color: var(--color-text-muted); }
strong { font-weight: var(--font-weight-semibold); }

code {
    font-family:      var(--font-family-mono);
    font-size:        0.875em;
    background-color: var(--color-primary-lighter);
    color:            var(--color-primary-dark);
    border-radius:    var(--radius-sm);
    padding:          0.1em 0.4em;
}

pre {
    font-family:      var(--font-family-mono);
    font-size:        var(--font-size-sm);
    background-color: var(--color-bg-card);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-md);
    padding:          var(--space-5);
    overflow-x:       auto;
    margin-bottom:    var(--space-4);
}


/* ══════════════════════════════════════════════════════════
   NAVBAR — shared base
══════════════════════════════════════════════════════════ */

.navbar {
    background-color: var(--color-navbar-bg);
    height:           var(--navbar-height);
    display:          flex;
    align-items:      center;
    padding:          0 var(--space-6);
    gap:              var(--space-4);
    box-shadow:       var(--shadow-sm);
    position:         sticky;
    top:              0;
    z-index:          var(--z-nav);
}

.navbar__brand {
    font-size:      var(--font-size-lg);
    font-weight:    var(--font-weight-bold);
    color:          var(--color-navbar-brand);
    white-space:    nowrap;
    flex-shrink:    0;
    letter-spacing: -0.02em;
    display:        flex;
    align-items:    center;
    gap:            var(--space-2);
}
.navbar__brand:hover { color: var(--color-navbar-brand); opacity: 0.9; }

.navbar__logo-img {
    height:     32px;
    width:      auto;
    display:    block;
}

.navbar__hamburger {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    background:       transparent;
    border:           none;
    color:            var(--color-navbar-text);
    cursor:           pointer;
    padding:          var(--space-2);
    border-radius:    var(--radius);
    flex-shrink:      0;
    transition:       background-color var(--transition);
    line-height:      1;
}
.navbar__hamburger:hover { background-color: rgba(255,255,255,0.12); }

.navbar__profile-link {
    display:          flex;
    align-items:      center;
    color:            var(--color-navbar-text);
    padding:          var(--space-2);
    border-radius:    var(--radius);
    transition:       background-color var(--transition);
    flex-shrink:      0;
}
.navbar__profile-link:hover { background-color: rgba(255,255,255,0.12); color: var(--color-navbar-text); }


/* ── Style 1: centered logo ─────────────────────────────── */

.navbar--style1 {
    display:               grid;
    grid-template-columns: 1fr auto 1fr;
}

.navbar--style1 .navbar__brand--center {
    justify-content: center;
    text-align:      center;
}

.navbar--style1 .navbar__profile {
    display:         flex;
    justify-content: flex-end;
    align-items:     center;
}


/* ── Style 2: logo left + links right ───────────────────── */

.navbar--style2 .navbar__hamburger--mobile {
    display: none;   /* hidden on desktop */
}

.navbar__links--desktop {
    display:     flex;
    align-items: center;
    gap:         var(--space-1);
    margin-left: auto;
    list-style:  none;
}

.navbar__links--desktop a {
    color:         var(--color-navbar-link);
    font-size:     var(--font-size-sm);
    font-weight:   var(--font-weight-medium);
    padding:       var(--space-2) var(--space-3);
    border-radius: var(--radius);
    transition:    background-color var(--transition), color var(--transition);
    white-space:   nowrap;
    display:       block;
}
.navbar__links--desktop a:hover {
    color:            var(--color-navbar-link-hover);
    background-color: rgba(255,255,255,0.1);
}


/* ══════════════════════════════════════════════════════════
   NAV DRAWER (shared by both styles)
══════════════════════════════════════════════════════════ */

.nav-drawer-overlay {
    position:         fixed;
    inset:            0;
    background-color: var(--color-bg-overlay);
    opacity:          0;
    pointer-events:   none;
    transition:       opacity var(--transition-medium);
    z-index:          calc(var(--z-modal) - 1);
}
.nav-drawer-overlay.open {
    opacity:        1;
    pointer-events: all;
}

.nav-drawer {
    position:         fixed;
    top:              0;
    left:             -100%;
    width:            min(400px, 90vw);
    height:           100vh;
    background-color: var(--color-sidebar-bg);
    display:          flex;
    flex-direction:   column;
    transition:       left var(--transition-medium);
    z-index:          var(--z-modal);
    overflow-y:       auto;
    box-shadow:       var(--shadow-xl);
}
.nav-drawer.open { left: 0; }

.nav-drawer__header {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    padding:          var(--space-4) var(--space-5);
    border-bottom:    1px solid var(--color-sidebar-border);
    flex-shrink:      0;
}

.nav-drawer__title {
    font-size:   var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color:       var(--color-sidebar-link-hover);
}

.nav-drawer__close {
    color:  var(--color-sidebar-text);
    border: none;
}
.nav-drawer__close:hover { background-color: rgba(255,255,255,0.08); color: #fff; }

.nav-drawer__links {
    display:        flex;
    flex-direction: column;
    padding:        var(--space-4) var(--space-3);
    gap:            var(--space-1);
}

.nav-drawer__link {
    display:       block;
    padding:       var(--space-3) var(--space-4);
    border-radius: var(--radius);
    color:         var(--color-sidebar-link);
    font-size:     var(--font-size-base);
    font-weight:   var(--font-weight-medium);
    transition:    background-color var(--transition), color var(--transition);
}
.nav-drawer__link:hover {
    background-color: rgba(255,255,255,0.08);
    color:            var(--color-sidebar-link-hover);
}

/* Lock body scroll when drawer is open */
body.nav-drawer--lock { overflow: hidden; }


/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */

.footerbar {
    background-color: var(--color-footer-bg);
    color:            var(--color-footer-text);
    padding:          var(--space-8) var(--space-6);
    text-align:       center;
    font-size:        var(--font-size-sm);
    margin-top:       auto;
    line-height:      1.8;
}
.footerbar a { color: var(--color-footer-link); }
.footerbar a:hover { opacity: 0.8; }
.footerbar p { color: var(--color-footer-text); margin-bottom: var(--space-1); }
.footerbar p:last-child { margin-bottom: 0; }


/* ══════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════ */

.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    padding:         0.5625rem var(--space-4);
    font-size:       var(--font-size-sm);
    font-weight:     var(--font-weight-medium);
    border-radius:   var(--radius);
    border:          1.5px solid transparent;
    cursor:          pointer;
    text-decoration: none;
    white-space:     nowrap;
    line-height:     1.4;
    letter-spacing:  0.01em;
    transition:      background-color var(--transition), border-color var(--transition),
                     color var(--transition), box-shadow var(--transition), transform var(--transition);
    user-select:     none;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

/* Variants */
.btn--primary {
    background-color: var(--color-btn-primary-bg);
    color:            var(--color-btn-primary-text);
    border-color:     var(--color-btn-primary-bg);
    box-shadow:       var(--shadow-xs);
}
.btn--primary:hover:not(:disabled) {
    background-color: var(--color-btn-primary-hover);
    border-color:     var(--color-btn-primary-hover);
    color:            var(--color-btn-primary-text);
    box-shadow:       var(--shadow-sm);
}

.btn--secondary {
    background-color: var(--color-btn-secondary-bg);
    color:            var(--color-btn-secondary-text);
    border-color:     var(--color-btn-secondary-bg);
    box-shadow:       var(--shadow-xs);
}
.btn--secondary:hover:not(:disabled) {
    background-color: var(--color-btn-secondary-hover);
    border-color:     var(--color-btn-secondary-hover);
    color:            var(--color-btn-secondary-text);
}

.btn--outline {
    background-color: transparent;
    color:            var(--color-btn-outline-text);
    border-color:     var(--color-btn-outline-border);
}
.btn--outline:hover:not(:disabled) {
    background-color: var(--color-btn-outline-hover-bg);
    color:            var(--color-btn-outline-hover-text);
    border-color:     var(--color-btn-outline-hover-bg);
    box-shadow:       var(--shadow-xs);
}

.btn--ghost {
    background-color: transparent;
    color:            var(--color-btn-ghost-text);
    border-color:     transparent;
}
.btn--ghost:hover:not(:disabled) {
    background-color: var(--color-btn-ghost-hover-bg);
    color:            var(--color-text);
}

.btn--danger {
    background-color: var(--color-btn-danger-bg);
    color:            var(--color-btn-danger-text);
    border-color:     var(--color-btn-danger-bg);
    box-shadow:       var(--shadow-xs);
}
.btn--danger:hover:not(:disabled) {
    background-color: var(--color-btn-danger-hover);
    border-color:     var(--color-btn-danger-hover);
    color:            var(--color-btn-danger-text);
}

.btn--success {
    background-color: var(--color-btn-success-bg);
    color:            var(--color-btn-success-text);
    border-color:     var(--color-btn-success-bg);
}
.btn--success:hover:not(:disabled) {
    background-color: var(--color-btn-success-hover);
    border-color:     var(--color-btn-success-hover);
}

/* Sizes */
.btn--xs  { padding: var(--space-1) var(--space-2); font-size: var(--font-size-xs); }
.btn--sm  { padding: var(--space-2) var(--space-3); font-size: var(--font-size-xs); }
.btn--lg  { padding: var(--space-4) var(--space-6); font-size: var(--font-size-base); }
.btn--xl  { padding: var(--space-5) var(--space-8); font-size: var(--font-size-lg); }
.btn--full { width: 100%; }
.btn--icon { padding: var(--space-2); width: 36px; height: 36px; }


/* ══════════════════════════════════════════════════════════
   FORMS
══════════════════════════════════════════════════════════ */

.form-group {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
    margin-bottom:  var(--space-5);
}
.form-group:last-of-type { margin-bottom: 0; }

/* Compensate the zeroed last margin when a button follows the fields */
.form-group + .btn,
.form-group + button,
.form-group + a.btn { margin-top: var(--space-4); }

label {
    font-size:   var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color:       var(--color-label);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
select,
textarea {
    width:            100%;
    padding:          var(--space-3) var(--space-4);
    font-size:        var(--font-size-sm);
    color:            var(--color-input-text);
    background-color: var(--color-input-bg);
    border:           1.5px solid var(--color-input-border);
    border-radius:    var(--radius);
    transition:       border-color var(--transition), box-shadow var(--transition);
    outline:          none;
    -webkit-appearance: none;
    appearance:       none;
}

input::placeholder, textarea::placeholder { color: var(--color-input-placeholder); }

input:focus, select:focus, textarea:focus {
    border-color: var(--color-input-focus-border);
    box-shadow:   0 0 0 3px var(--color-input-focus-shadow);
}

textarea { resize: vertical; min-height: 120px; line-height: var(--line-height); }

select {
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right var(--space-3) center;
    padding-right:       var(--space-10);
    cursor:              pointer;
}

.form-hint  { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: var(--space-1); }
.form-error { font-size: var(--font-size-xs); color: var(--color-error-text);  margin-top: var(--space-1); }

/* Checkbox / Radio */
input[type="checkbox"], input[type="radio"] {
    width:        16px;
    height:       16px;
    cursor:       pointer;
    accent-color: var(--color-primary);
}
.form-check {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    cursor:      pointer;
}
.form-check label { margin: 0; cursor: pointer; font-weight: var(--font-weight-normal); }


/* ══════════════════════════════════════════════════════════
   FLASH MESSAGES
══════════════════════════════════════════════════════════ */

.msg {
    display:       flex;
    align-items:   flex-start;
    gap:           var(--space-3);
    padding:       var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    border:        1.5px solid transparent;
    font-size:     var(--font-size-sm);
    margin-bottom: var(--space-5);
    line-height:   1.5;
}

.msg--success {
    background-color: var(--color-success-bg);
    border-color:     var(--color-success-border);
    color:            var(--color-success-text);
}
.msg--error {
    background-color: var(--color-error-bg);
    border-color:     var(--color-error-border);
    color:            var(--color-error-text);
}
.msg--warning {
    background-color: var(--color-warning-bg);
    border-color:     var(--color-warning-border);
    color:            var(--color-warning-text);
}
.msg--info {
    background-color: var(--color-info-bg);
    border-color:     var(--color-info-border);
    color:            var(--color-info-text);
}


/* ══════════════════════════════════════════════════════════
   CARD
══════════════════════════════════════════════════════════ */

.card {
    background-color: var(--color-bg-card);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-lg);
    box-shadow:       var(--shadow-sm);
    overflow:         hidden;
}

.card__header {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    padding:          var(--space-4) var(--space-6);
    border-bottom:    1px solid var(--color-border);
    background-color: var(--color-bg-muted);
}
.card__header h2, .card__header h3, .card__header h4 {
    font-size:    var(--font-size-base);
    font-weight:  var(--font-weight-semibold);
    margin:       0;
    color:        var(--color-text);
}

.card__body   { padding: var(--space-6); }
.card__footer {
    padding:          var(--space-4) var(--space-6);
    border-top:       1px solid var(--color-border);
    background-color: var(--color-bg-muted);
    display:          flex;
    align-items:      center;
    gap:              var(--space-3);
}

/* Stat card */
.stat-card {
    background-color: var(--color-bg-card);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-lg);
    padding:          var(--space-6);
    box-shadow:       var(--shadow-sm);
    display:          flex;
    flex-direction:   column;
    gap:              var(--space-2);
}
.stat-card__label {
    font-size:   var(--font-size-sm);
    color:       var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}
.stat-card__value {
    font-size:      var(--font-size-3xl);
    font-weight:    var(--font-weight-bold);
    color:          var(--color-text);
    letter-spacing: var(--letter-spacing-tight);
    line-height:    1;
}
.stat-card__icon {
    font-size: 2rem;
    color:     var(--color-primary);
    line-height: 1;
}


/* ══════════════════════════════════════════════════════════
   TABLE
══════════════════════════════════════════════════════════ */

.table-wrap {
    width:         100%;
    overflow-x:    auto;
    border-radius: var(--radius-lg);
    border:        1px solid var(--color-table-border);
    box-shadow:    var(--shadow-sm);
    background:    var(--color-bg-card);
}

table {
    width:           100%;
    border-collapse: collapse;
    font-size:       var(--font-size-sm);
}

thead th {
    background-color: var(--color-table-header-bg);
    color:            var(--color-table-header-text);
    font-weight:      var(--font-weight-semibold);
    font-size:        var(--font-size-xs);
    text-transform:   uppercase;
    letter-spacing:   0.05em;
    padding:          var(--space-3) var(--space-4);
    text-align:       left;
    border-bottom:    2px solid var(--color-table-border);
    white-space:      nowrap;
}

tbody td {
    padding:       var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-table-border);
    color:         var(--color-text);
    vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td      { background-color: var(--color-table-row-hover); }


/* ══════════════════════════════════════════════════════════
   BADGES & STATUS
══════════════════════════════════════════════════════════ */

.badge {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-1);
    padding:       2px var(--space-2);
    border-radius: var(--radius-full);
    font-size:     var(--font-size-xs);
    font-weight:   var(--font-weight-medium);
    line-height:   1.6;
    background-color: var(--color-badge-default-bg);
    color:            var(--color-badge-default-text);
    white-space:      nowrap;
}

.badge--primary  { background-color: var(--color-primary-lighter); color: var(--color-primary-dark); }
.badge--success  { background-color: var(--color-success-bg);      color: var(--color-success-text); }
.badge--error    { background-color: var(--color-error-bg);        color: var(--color-error-text); }
.badge--warning  { background-color: var(--color-warning-bg);      color: var(--color-warning-text); }

.status { @extend .badge; }
.status--open        { background-color: var(--color-status-open-bg);          color: var(--color-status-open-text); }
.status--in_progress { background-color: var(--color-status-in_progress-bg);   color: var(--color-status-in_progress-text); }
.status--closed      { background-color: var(--color-status-closed-bg);        color: var(--color-status-closed-text); }


/* ══════════════════════════════════════════════════════════
   AUTH PAGES
══════════════════════════════════════════════════════════ */

.auth-wrap {
    display:         flex;
    justify-content: center;
    align-items:     flex-start;
    padding:         var(--space-16) var(--space-4);
    flex:            1;
}

.auth-box {
    width:            100%;
    max-width:        440px;
    background-color: var(--color-bg-card);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-xl);
    box-shadow:       var(--shadow-xl);
    padding:          var(--space-10) var(--space-10);
}

.auth-box h1 {
    font-size:     var(--font-size-2xl);
    margin-bottom: var(--space-6);
    text-align:    center;
}

.auth-footer {
    text-align:  center;
    margin-top:  var(--space-6);
    font-size:   var(--font-size-sm);
    color:       var(--color-text-muted);
    line-height: 2;
}

.auth-divider {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    margin:      var(--space-6) 0;
    color:       var(--color-text-light);
    font-size:   var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.auth-divider::before, .auth-divider::after {
    content: '';
    flex:    1;
    height:  1px;
    background-color: var(--color-border);
}

.google-signin-wrap {
    display:         flex;
    justify-content: center;
}


/* ══════════════════════════════════════════════════════════
   PAGE HEADER
══════════════════════════════════════════════════════════ */

.page-header {
    margin-bottom: var(--space-8);
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    flex-wrap:     wrap;
    gap:           var(--space-4);
}

.page-header__text h1 { margin-bottom: var(--space-1); }
.page-header__text p  { color: var(--color-text-muted); font-size: var(--font-size-lg); margin: 0; }


/* ══════════════════════════════════════════════════════════
   ADMIN LAYOUT (sidebar + content)
══════════════════════════════════════════════════════════ */

/* body gets .admin-body — stays flex-direction:column (inherited from body).
   Sidebar is position:fixed so navbar/main/footer stack normally. */
.admin-body {
    flex-direction: column;
    align-items:    stretch;
}

/* width:auto + full margin reset together: the base `main` rule sets
   width:100% and margin:0 auto — width:100% + margin-left would overflow
   by exactly the sidebar width, and a leftover margin-right:auto would
   collapse the flex item to fit-content (auto cross-axis margin beats
   align-items:stretch). */
.admin-body main {
    flex:         1;
    min-width:    0;
    padding:      var(--space-8);
    max-width:    none;
    width:        auto;
    margin:       0 0 0 var(--sidebar-width);
}

.admin-body > .footerbar {
    margin-left: var(--sidebar-width);
}

/* Sidebar */
.admin-sidebar {
    width:            var(--sidebar-width);
    flex-shrink:      0;
    background-color: var(--color-sidebar-bg);
    display:          flex;
    flex-direction:   column;
    border-right:     1px solid var(--color-sidebar-border);
    position:         fixed;
    top:              var(--navbar-height);
    left:             0;
    height:           calc(100vh - var(--navbar-height));
    overflow-y:       auto;
    z-index:          var(--z-sidebar);
}

.admin-sidebar__header {
    padding:     var(--space-5) var(--space-5);
    border-bottom: 1px solid var(--color-sidebar-border);
}

.admin-sidebar__heading {
    font-size:      var(--font-size-xs);
    font-weight:    var(--font-weight-semibold);
    color:          var(--color-sidebar-heading);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.admin-sidebar__nav {
    padding: var(--space-3) var(--space-3);
    flex:    1;
}

.admin-sidebar__group {
    margin-bottom: var(--space-6);
}

.admin-sidebar__group-label {
    font-size:      var(--font-size-xs);
    color:          var(--color-sidebar-heading);
    font-weight:    var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding:        var(--space-2) var(--space-3);
    margin-bottom:  var(--space-1);
}

.admin-sidebar__link {
    display:       flex;
    align-items:   center;
    gap:           var(--space-3);
    padding:       var(--space-2) var(--space-3);
    border-radius: var(--radius);
    color:         var(--color-sidebar-link);
    font-size:     var(--font-size-sm);
    font-weight:   var(--font-weight-medium);
    text-decoration: none;
    transition:    background-color var(--transition), color var(--transition);
    margin-bottom: 2px;
}
.admin-sidebar__link:hover {
    background-color: rgba(255,255,255,0.06);
    color:            var(--color-sidebar-link-hover);
}
.admin-sidebar__link.active {
    background-color: var(--color-sidebar-active-bg);
    color:            var(--color-sidebar-link-active);
}
.admin-sidebar__link .material-symbols-outlined {
    font-size:  20px;
    color:      var(--color-sidebar-icon);
    flex-shrink: 0;
}
.admin-sidebar__link.active .material-symbols-outlined {
    color: var(--color-sidebar-icon-active);
}

.admin-sidebar__footer {
    padding:       var(--space-4) var(--space-3);
    border-top:    1px solid var(--color-sidebar-border);
}


/* ══════════════════════════════════════════════════════════
   TICKET LIST
══════════════════════════════════════════════════════════ */

.ticket-list {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
    margin-bottom:  var(--space-6);
}

.ticket-list li {
    background-color: var(--color-bg-card);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-md);
    padding:          var(--space-4) var(--space-5);
    display:          flex;
    align-items:      center;
    gap:              var(--space-3);
    flex-wrap:        wrap;
    font-size:        var(--font-size-sm);
    transition:       box-shadow var(--transition), border-color var(--transition);
}
.ticket-list li:hover {
    box-shadow:   var(--shadow-md);
    border-color: var(--color-border-strong);
}
.ticket-list small { margin-left: auto; }


/* ══════════════════════════════════════════════════════════
   MATERIAL SYMBOLS (icon helper)
   Usage: <span class="icon">home</span>
══════════════════════════════════════════════════════════ */

.icon {
    font-family:               'Material Symbols Outlined';
    font-weight:               normal;
    font-style:                normal;
    font-size:                 20px;
    line-height:               1;
    display:                   inline-block;
    white-space:               nowrap;
    letter-spacing:            normal;
    word-wrap:                 normal;
    direction:                 ltr;
    -webkit-font-smoothing:    antialiased;
    font-variation-settings:   'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
    vertical-align:            middle;
    user-select:               none;
}

.icon--filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
.icon--sm     { font-size: 16px; }
.icon--lg     { font-size: 24px; }
.icon--xl     { font-size: 32px; }


/* ══════════════════════════════════════════════════════════
   UTILITIES
══════════════════════════════════════════════════════════ */

/* Text */
.text-muted    { color: var(--color-text-muted); }
.text-light    { color: var(--color-text-light); }
.text-primary  { color: var(--color-primary); }
.text-success  { color: var(--color-success); }
.text-error    { color: var(--color-error); }
.text-warning  { color: var(--color-warning); }
.text-xs       { font-size: var(--font-size-xs); }
.text-sm       { font-size: var(--font-size-sm); }
.text-lg       { font-size: var(--font-size-lg); }
.text-xl       { font-size: var(--font-size-xl); }
.text-center   { text-align: center; }
.text-right    { text-align: right; }
.text-bold     { font-weight: var(--font-weight-bold); }
.text-semibold { font-weight: var(--font-weight-semibold); }
.text-medium   { font-weight: var(--font-weight-medium); }

/* Spacing */
.mt-2  { margin-top:    var(--space-2); }
.mt-4  { margin-top:    var(--space-4); }
.mt-6  { margin-top:    var(--space-6); }
.mt-8  { margin-top:    var(--space-8); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.p-4   { padding:       var(--space-4); }
.p-6   { padding:       var(--space-6); }

/* Flex */
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.flex-col     { flex-direction: column; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-end     { display: flex; align-items: center; justify-content: flex-end; }
.flex-wrap    { flex-wrap: wrap; }
.items-start  { align-items: flex-start; }
.items-center { align-items: center; }
.items-end    { align-items: flex-end; }
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-5  { gap: var(--space-5); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }

/* Misc */
.hidden     { display: none !important; }
.sr-only    { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.w-full     { width: 100%; }
.rounded    { border-radius: var(--radius); }
.rounded-lg { border-radius: var(--radius-lg); }
.shadow     { box-shadow: var(--shadow); }
.shadow-md  { box-shadow: var(--shadow-md); }
.truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.divide-y > * + * { border-top: 1px solid var(--color-border); }

/* Max-width */
.emw-200  { max-width: 200px; }
.emw-300  { max-width: 300px; }
.emw-400  { max-width: 400px; }
.emw-500  { max-width: 500px; }
.emw-600  { max-width: 600px; }
.emw-700  { max-width: 700px; }
.emw-800  { max-width: 800px; }
.emw-900  { max-width: 900px; }
.emw-1000 { max-width: 1000px; }
.emw-1100 { max-width: 1100px; }
.emw-1200 { max-width: 1200px; }
.emw-1400 { max-width: 1400px; }

/* Named content widths */
.content-narrow { max-width: 800px; margin-left: auto; margin-right: auto; }
.content-wide   { max-width: 1200px; margin-left: auto; margin-right: auto; }

/* Vertical spacers */
.space-2  { height: 2px; }
.space-4  { height: 4px; }
.space-8  { height: 8px; }
.space-12 { height: 12px; }
.space-16 { height: 16px; }
.space-20 { height: 20px; }
.space-24 { height: 24px; }
.space-32 { height: 32px; }
.space-40 { height: 40px; }
.space-48 { height: 48px; }
.space-64 { height: 64px; }
.space-80 { height: 80px; }


/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .admin-sidebar {
        width:    var(--sidebar-width-sm);
        overflow: hidden;
    }
    .admin-sidebar__link span:not(.material-symbols-outlined) { display: none; }
    .admin-sidebar__group-label, .admin-sidebar__heading { display: none; }
}

@media (max-width: 768px) {
    main { padding: var(--space-6) var(--space-4); }

    /* Navbar shared */
    .navbar { padding: 0 var(--space-4); gap: var(--space-3); }

    /* Style 2 mobile: show hamburger, flip brand to right, hide desktop links */
    .navbar--style2 .navbar__hamburger--mobile { display: flex; }
    .navbar--style2 .navbar__brand             { margin-left: auto; }
    .navbar--style2 .navbar__links--desktop    { display: none; }

    h1 { font-size: var(--font-size-3xl); }
    h2 { font-size: var(--font-size-2xl); }
    h3 { font-size: var(--font-size-xl); }

    .auth-box { padding: var(--space-6); }
    .auth-wrap { padding: var(--space-8) var(--space-4); }

    .admin-body { flex-direction: column; }
    .admin-body main { margin-left: 0; padding: var(--space-5) var(--space-4); }
    .admin-body > .footerbar { margin-left: 0; }
    .admin-sidebar {
        width:    100%;
        height:   auto;
        position: static;
        flex-direction: row;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid var(--color-sidebar-border);
    }
    .admin-sidebar__nav    { display: flex; padding: var(--space-2); }
    .admin-sidebar__group  { display: flex; margin-bottom: 0; }
    .admin-sidebar__header { display: none; }
    .admin-sidebar__footer { display: none; }
    .admin-sidebar__link span:not(.material-symbols-outlined) { display: none; }
    .admin-sidebar__group-label { display: none; }
}


/* ══════════════════════════════════════════════════════════
   STAT GRID — compact stat cards row (admin dashboards, hubs)
══════════════════════════════════════════════════════════ */

.stat-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap:                   var(--space-4);
}


/* ══════════════════════════════════════════════════════════
   TABS — generic tab component
   Works with the delegated listener in elitma.js: wrap nav
   and panels in a [data-tabs] container, zero per-page init.
══════════════════════════════════════════════════════════ */

.tabs__nav {
    display:       flex;
    flex-wrap:     wrap;
    gap:           var(--space-1);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-5);
}

.tabs__btn {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-2);
    padding:       var(--space-3) var(--space-4);
    background:    none;
    border:        none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size:     var(--font-size-sm);
    font-weight:   var(--font-weight-medium);
    color:         var(--color-text-muted);
    cursor:        pointer;
}

.tabs__btn:hover { color: var(--color-text); }

.tabs__btn--active {
    color:               var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.tabs__panel          { display: none; }
.tabs__panel--active  { display: block; }


/* ══════════════════════════════════════════════════════════
   PAGINATION — styles the markup emitted by ElitmaPaginator::links()
══════════════════════════════════════════════════════════ */

.pagination { margin-top: var(--space-6); }

.pagination__list {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--space-2);
}

.pagination__link {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       36px;
    height:          36px;
    padding:         0 var(--space-3);
    border:          1px solid var(--color-border);
    border-radius:   var(--radius-md);
    background:      var(--color-bg-card);
    color:           var(--color-text);
    font-size:       var(--font-size-sm);
    text-decoration: none;
}

a.pagination__link:hover {
    border-color: var(--color-border-strong);
    background:   var(--color-bg-muted);
}

.pagination__link--active {
    background:   var(--color-primary);
    border-color: var(--color-primary);
    color:        var(--color-text-on-primary);
}

.pagination__link--disabled {
    opacity: 0.45;
    cursor:  default;
}


/* ══════════════════════════════════════════════════════════
   ADMIN HUB CARD — clickable navigation card for hub pages
   (large admin sections land on a hub of these instead of a grid)
══════════════════════════════════════════════════════════ */

.hub-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap:                   var(--space-5);
}

.hub-card {
    display:          block;
    position:         relative;
    padding:          var(--space-6);
    background-color: var(--color-bg-card);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-lg);
    text-decoration:  none;
    color:            var(--color-text);
}

.hub-card:hover {
    border-color: var(--color-primary);
    box-shadow:   var(--shadow-md);
}

.hub-card__title {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    font-size:   var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.hub-card__stats {
    margin-top: var(--space-3);
    font-size:  var(--font-size-sm);
    color:      var(--color-text-muted);
}

.hub-card__action {
    position:      absolute;
    top:           var(--space-4);
    right:         var(--space-4);
    padding:       2px var(--space-2);
    border-radius: var(--radius-full);
    background:    var(--color-error, var(--color-primary));
    color:         var(--color-text-on-primary);
    font-size:     var(--font-size-xs);
    font-weight:   var(--font-weight-semibold);
}