/* ============================================================
   IT Helpdesk v4 — responsive.css
   Mobile-first responsive overrides
============================================================ */

/* ── BASE RESPONSIVE VARIABLES ─────────────────────────────── */
:root {
    --sidebar-w: 220px;
    --topbar-h:  62px;
}

/* ── TOPBAR MOBILE ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .topbar {
        padding: 0 14px;
        height: 54px;
        flex-wrap: nowrap;
    }
    .topbar-brand { font-size: 0.85rem; }
    .topbar-user  { display: none; }        /* hide name on mobile */
    .version-badge { display: none; }
    .topbar-right { gap: 8px; }
    .notif-btn    { padding: 5px 10px; font-size: 1rem; }
    .topbar .btn  { padding: 6px 10px; font-size: 0.78rem; }
}

/* ── SIDEBAR — becomes bottom nav on mobile ─────────────────── */
@media (max-width: 768px) {
    .layout {
        flex-direction: column-reverse; /* sidebar below main */
        min-height: calc(100vh - 54px);
    }
    .sidebar {
        width: 100%;
        border-right: none;
        border-top: 1px solid var(--border);
        padding: 6px 0 0;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--bg2);
        position: sticky;
        bottom: 0;
        z-index: 50;
    }
    .sidebar-section { display: none; }     /* hide section labels */
    .sidebar a {
        flex-shrink: 0;
        flex-direction: column;
        padding: 6px 12px 8px;
        font-size: 0.65rem;
        gap: 2px;
        border-left: none;
        border-top: 2px solid transparent;
        text-align: center;
        min-width: 64px;
    }
    .sidebar a.active {
        border-left: none;
        border-top: 2px solid var(--accent);
    }
    .sidebar .icon { font-size: 1.2rem; width: auto; }
    .main { padding: 14px; overflow-x: hidden; }
}

/* ── CARDS & GRIDS ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .card { padding: 14px; }
    .dash-grid-5 { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
    .dash-body   { grid-template-columns: 1fr !important; }
    .stats-row   { grid-template-columns: repeat(2, 1fr) !important; }
    .form-grid   { grid-template-columns: 1fr !important; }
    .form-group.span2 { grid-column: span 1 !important; }
    .asset-grid  { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 480px) {
    .dash-grid-5 { grid-template-columns: repeat(2, 1fr) !important; }
    .asset-grid  { grid-template-columns: 1fr !important; }
    .stats-row   { grid-template-columns: 1fr 1fr !important; }
    .ds-val      { font-size: 1.4rem !important; }
}

/* ── TABLES — horizontal scroll on mobile ───────────────────── */
@media (max-width: 768px) {
    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
    }
    table { min-width: 600px; }
    th, td { padding: 9px 10px; font-size: 0.78rem; }
    .ticket-num { font-size: 0.72rem; }
}

/* ── PAGE HEADER ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-title { font-size: 1.2rem; }
    .flex-between { flex-direction: column; align-items: flex-start; gap: 10px; }
    .flex-between .btn { width: 100%; justify-content: center; }
}

/* ── TICKET VIEW ────────────────────────────────────────────── */
@media (max-width: 900px) {
    .tv-grid { grid-template-columns: 1fr !important; }
    .tv-sidebar { order: -1; }          /* Update panel goes ABOVE details */
    .tv-sidebar .card { position: static !important; }
}

/* ── EMPLOYEE VIEW ──────────────────────────────────────────── */
@media (max-width: 768px) {
    [style*="grid-template-columns:260px"] ,
    [style*="grid-template-columns: 260px"],
    [style*="grid-template-columns:280px"],
    [style*="grid-template-columns:300px"] {
        display: block !important;
    }
    [style*="grid-template-columns:260px"] > *,
    [style*="grid-template-columns:280px"] > *,
    [style*="grid-template-columns:300px"] > * {
        margin-bottom: 14px;
    }
}

/* ── TABS ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tab-btn { white-space: nowrap; font-size: 0.8rem; padding: 8px 14px; }
}

/* ── MODALS ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .modal-box { width: 95vw !important; padding: 18px; }
    .modal-title { font-size: 0.95rem; }
}

/* ── NOTIFICATIONS DROPDOWN ─────────────────────────────────── */
@media (max-width: 480px) {
    .notif-dropdown { width: 92vw; right: -10px; }
}

/* ── PUBLIC FORMS (index, track) ────────────────────────────── */
@media (max-width: 768px) {
    .public-header { padding: 12px 16px; }
    .public-content { padding: 16px 12px; }
    .public-form-card { max-width: 100%; }
    .page-title { font-size: 1.15rem; }
}

/* ── BUTTONS ────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .btn { font-size: 0.82rem; padding: 8px 14px; }
    .btn-sm { font-size: 0.75rem; padding: 5px 10px; }
}

/* ── FLASH BAR ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .flash-bar { padding: 10px 14px; font-size: 0.82rem; top: 54px; }
}

/* ── REPORTS ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    [style*="grid-template-columns:1fr 1fr"] { display: block !important; }
    [style*="grid-template-columns:1fr 1fr"] > * { margin-bottom: 14px; }
    [style*="grid-template-columns:repeat(4"] { grid-template-columns: repeat(2,1fr) !important; }
}

/* ── STAFF PROFILE ──────────────────────────────────────────── */
@media (max-width: 768px) {
    [style*="grid-template-columns:260px 1fr"],
    [style*="grid-template-columns: 260px 1fr"] {
        display: block !important;
    }
    .perf-card { margin-bottom: 10px; }
}

/* ── DASHBOARD SIDEBAR ──────────────────────────────────────── */
@media (max-width: 768px) {
    .dash-body { grid-template-columns: 1fr !important; }
}

/* ── ASSET CARDS ────────────────────────────────────────────── */
@media (max-width: 480px) {
    .asset-img, .asset-img img { height: 100px !important; }
    .asset-body { padding: 10px; }
    .asset-name { font-size: 0.88rem; }
}

/* ── SUPER ADMIN ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .sa-tabs { flex-wrap: nowrap; overflow-x: auto; }
    .sa-tab  { white-space: nowrap; }
    .perm-table { font-size: 0.75rem; }
    .perm-check { width: 16px; height: 16px; }
    [style*="grid-template-columns:repeat(4"] { grid-template-columns: repeat(2,1fr) !important; }
}

/* ── WORK LOG ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
}

/* ── PRINT ──────────────────────────────────────────────────── */
@media print {
    .sidebar, .topbar, .flash-bar, .btn, .no-print { display: none !important; }
    .main { padding: 0; }
    .layout { display: block; }
    body { background: #fff; color: #111; }
}

/* ── UTILITY ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
    .show-mobile { display: none !important; }
}