/* ============================================================
   HelpDesk – Custom Stylesheet
   Base: Bootstrap 5.3 + Bootstrap Icons
   ============================================================ */

/* ── Root Variables ────────────────────────────────────────── */
:root {
    --hd-primary: #0d6efd;
    --hd-sidebar-bg: #1a1a2e;
    --hd-card-radius: .75rem;
    --hd-transition: .2s ease;
}

/* ── Global ─────────────────────────────────────────────────── */
body {
    font-size: .92rem;
    color: #333;
    background: #f5f7fa;
}

a { transition: color var(--hd-transition); }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
    border-radius: var(--hd-card-radius) !important;
    transition: box-shadow var(--hd-transition);
}
.card:hover {
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.08) !important;
}
.card-header {
    border-radius: var(--hd-card-radius) var(--hd-card-radius) 0 0 !important;
    font-size: .9rem;
}

/* ── Navbar ─────────────────────────────────────────────────── */
.navbar {
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.navbar-brand {
    letter-spacing: .02em;
}

/* ── Tables ─────────────────────────────────────────────────── */
.table > thead > tr > th {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #6c757d;
    border-bottom-width: 1px;
    white-space: nowrap;
}
.table-hover > tbody > tr:hover {
    background-color: rgba(13, 110, 253, .04);
}

/* ── Badges ─────────────────────────────────────────────────── */
.badge.rounded-pill {
    font-size: .78rem;
    padding: .35em .75em;
    font-weight: 500;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
    font-weight: 500;
    letter-spacing: .01em;
    border-radius: .5rem;
}
.btn-sm {
    border-radius: .375rem;
}

/* ── Forms ──────────────────────────────────────────────────── */
.form-control, .form-select {
    border-radius: .5rem;
    border-color: #ced4da;
    transition: border-color var(--hd-transition), box-shadow var(--hd-transition);
}
.form-control:focus, .form-select:focus {
    border-color: var(--hd-primary);
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .15);
}
.input-group-text {
    border-radius: .5rem 0 0 .5rem;
    background: #f8f9fa;
    color: #6c757d;
}

/* ── Alerts ─────────────────────────────────────────────────── */
.alert {
    border-radius: .6rem;
    border-left-width: 4px;
}

/* ── Sidebar (Admin) ────────────────────────────────────────── */
.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.2) transparent;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 4px; }

/* ── Message thread ─────────────────────────────────────────── */
.message-body {
    font-size: .92rem;
    line-height: 1.65;
    color: #333;
}
.message-body code {
    background: #f0f4ff;
    padding: .1em .35em;
    border-radius: .25em;
    font-size: .88em;
}

/* ── Status color dots ───────────────────────────────────────── */
.status-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 6px;
}

/* ── Priority row highlight ─────────────────────────────────── */
tr.overdue {
    background-color: rgba(220, 53, 69, .05) !important;
}

/* ── Login / minimal pages ───────────────────────────────────── */
.rounded-top-4 {
    border-radius: .75rem .75rem 0 0 !important;
}

/* ── Survey star rating ──────────────────────────────────────── */
.star-icon {
    transition: transform .15s, color .15s;
}
.star-icon:hover, .star-icon.active {
    transform: scale(1.15);
}

/* ── Scrollable conversation pane ───────────────────────────── */
#msgList {
    scroll-behavior: smooth;
}

/* ── Code / monospace ────────────────────────────────────────── */
code {
    color: var(--hd-primary);
    background: rgba(13,110,253,.08);
    padding: .1em .4em;
    border-radius: .3em;
    font-size: .88em;
}

/* ── Progress bars (Dashboard) ──────────────────────────────── */
.progress {
    border-radius: 1rem;
    background: #e9ecef;
}
.progress-bar {
    border-radius: 1rem;
    transition: width .6s ease;
}

/* ── Responsive tweaks ──────────────────────────────────────── */
@media (max-width: 768px) {
    .sidebar {
        position: relative;
        height: auto;
        width: 100% !important;
    }
    .main-content {
        min-height: unset;
    }
}

/* ── Print styles ────────────────────────────────────────────── */
@media print {
    .navbar, .sidebar, .btn, .pagination, .card-footer { display: none !important; }
    .card { box-shadow: none !important; border: 1px solid #dee2e6 !important; }
    body { background: #fff !important; }
}