:root {
    --hd-primary: #0d6efd;
    --hd-primary-dark: #0a4fb8;
    --hd-bg: #f4f7fb;
    --hd-sidebar: #0b2a5b;
    --hd-sidebar-link: #c7d6f2;
}
body { background: var(--hd-bg); color: #1e293b; }

/* Auth pages */
.auth-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #e8f0fe 0%, #ffffff 60%); }
.auth-wrap { width: 100%; max-width: 440px; padding: 1.25rem; }
.auth-card { border: 0; border-radius: 14px; }
.brand-mark { width: 56px; height: 56px; margin: 0 auto .6rem; border-radius: 14px; background: var(--hd-primary); color: #fff; display: grid; place-items: center; font-size: 1.7rem; }

/* App shell */
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 250px; background: var(--hd-sidebar); color: #fff; flex-shrink: 0; padding: 1rem .75rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar-brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; padding: .4rem .75rem 1.1rem; font-size: 1.05rem; }
.sidebar-brand i { font-size: 1.4rem; color: #7db1ff; }
.sidebar .nav-link { color: var(--hd-sidebar-link); border-radius: 8px; padding: .55rem .75rem; display: flex; gap: .6rem; align-items: center; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar .nav-link.active { background: var(--hd-primary); color: #fff; }
.nav-heading { text-transform: uppercase; font-size: .68rem; letter-spacing: .08em; color: #7f96c0; padding: 1rem .75rem .3rem; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { background: #fff; border-bottom: 1px solid #e2e8f0; padding: .6rem 1.25rem; display: flex; align-items: center; gap: .75rem; position: sticky; top: 0; z-index: 10; }
.content { padding: 1.5rem; max-width: 1400px; width: 100%; }
.notif-badge { position: absolute; top: -4px; right: -4px; font-size: .65rem; }

/* Cards / stats */
.stat-card { border: 0; border-radius: 12px; box-shadow: 0 1px 3px rgba(15,23,42,.08); }
.stat-card .stat-icon { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-size: 1.3rem; }
.stat-card .stat-value { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.card { border-radius: 12px; border-color: #e2e8f0; }
.table > :not(caption) > * > * { vertical-align: middle; }
.ticket-message { border-left: 3px solid var(--hd-primary); }
.ticket-message.note { border-left-color: #f59e0b; background: #fffbeb; }
.ticket-message.mine { background: #f0f6ff; }

/* Mobile */
@media (max-width: 991.98px) {
    .sidebar { position: fixed; left: -260px; z-index: 1040; transition: left .2s; }
    .sidebar.open { left: 0; }
    .content { padding: 1rem; }
}

/* Screenshot thumbnails on the ticket page */
.att-thumb { max-width: 240px; max-height: 170px; width: auto; height: auto; object-fit: contain; border: 1px solid #dee2e6; border-radius: .375rem; background: #fff; padding: 2px; }
.att-thumb:hover { border-color: #0d6efd; }