/* ===== Admin Layout Styles ===== */

:root {
    --admin-sidebar: #f8f9fa;
    --admin-sidebar-text: #333;
    --admin-sidebar-text-muted: rgba(0,0,0,.5);
    --admin-sidebar-hover: rgba(26,115,232,.1);
    --admin-sidebar-active-text: var(--sg-blue);
    --admin-sidebar-border: #e9ecef;
    --admin-sidebar-w: 260px;
    --admin-sidebar-collapsed-w: 68px;
    --sg-blue: #1a73e8;
    --sg-accent: #00c9a7;
    --sg-body-bg: #f4f6fa;
    --sg-body-color: #333;
    --sg-surface: #ffffff;
    --sg-border: #e9ecef;
    --sg-text-muted: #6c757d;
    --sg-card-bg: #ffffff;
}
[data-bs-theme="dark"] {
    --admin-sidebar: #0f1b2d;
    --admin-sidebar-text: rgba(255,255,255,.7);
    --admin-sidebar-text-muted: rgba(255,255,255,.4);
    --admin-sidebar-hover: rgba(26,115,232,.25);
    --admin-sidebar-active-text: #fff;
    --admin-sidebar-border: rgba(255,255,255,.1);
    --sg-body-bg: #1a1d21;
    --sg-body-color: #dee2e6;
    --sg-surface: #212529;
    --sg-border: #495057;
    --sg-text-muted: #adb5bd;
    --sg-card-bg: #212529;
}
body { background: var(--sg-body-bg); color: var(--sg-body-color); font-family: 'Segoe UI', system-ui, sans-serif; }

/* --- Sidebar --- */
.admin-sidebar {
    width: var(--admin-sidebar-w);
    min-height: 100vh;
    height: 100vh;
    background: var(--admin-sidebar);
    border-right: 1px solid var(--admin-sidebar-border);
    position: fixed;
    top: 0; left: 0;
    z-index: 1040;
    transition: width .25s ease, transform .25s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.admin-sidebar nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--admin-sidebar-text-muted) transparent;
}
.admin-sidebar nav::-webkit-scrollbar { width: 5px; }
.admin-sidebar nav::-webkit-scrollbar-thumb { background: var(--admin-sidebar-text-muted); border-radius: 3px; }
.admin-sidebar nav::-webkit-scrollbar-track { background: transparent; }
.admin-sidebar .nav-link {
    color: var(--admin-sidebar-text);
    padding: .75rem 1.25rem;
    border-radius: .4rem;
    margin: .15rem .75rem;
    transition: all .2s;
    white-space: nowrap;
    overflow: hidden;
}
.admin-sidebar .nav-link:hover, .admin-sidebar .nav-link.active {
    color: var(--admin-sidebar-active-text);
    background: var(--admin-sidebar-hover);
}
.admin-sidebar .nav-link i { width: 24px; min-width: 24px; text-align: center; margin-right: .5rem; font-size: 1.05rem; color: var(--sg-blue); }
.admin-sidebar .sidebar-brand { white-space: nowrap; overflow: hidden; }
.admin-sidebar .sidebar-brand a { color: var(--admin-sidebar-active-text, #333); text-decoration: none; }
.admin-sidebar .sidebar-brand small { color: var(--admin-sidebar-text-muted); }
.admin-sidebar .sidebar-section-label { white-space: nowrap; overflow: hidden; transition: opacity .2s; color: var(--admin-sidebar-text-muted); }

/* --- Collapsible sidebar groups --- */
.sidebar-group-toggle {
    display: flex; align-items: center; justify-content: space-between;
    padding: .5rem 1.25rem; margin: .15rem .75rem 0;
    background: none; border: none; border-radius: .4rem;
    color: var(--admin-sidebar-text-muted); cursor: pointer;
    font-size: .72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; white-space: nowrap; overflow: hidden; width: calc(100% - 1.5rem);
    transition: all .2s;
}
.sidebar-group-toggle:hover { color: var(--admin-sidebar-active-text); background: var(--admin-sidebar-hover); }
.sidebar-group-toggle .chevron { transition: transform .25s; font-size: .6rem; }
.sidebar-group-toggle[aria-expanded="true"] .chevron { transform: rotate(90deg); }
.sidebar-group-toggle[aria-expanded="false"] .chevron { transform: rotate(0deg); }
.sidebar-group-body { transition: none; }
.sidebar-group-body .nav-link { padding: .55rem 1.25rem .55rem 2.5rem; margin: .1rem .75rem; font-size: .92rem; }
.sidebar-group-body .nav-link i { font-size: .95rem; }
/* When sidebar is collapsed, hide group content and show only icons */
body.sidebar-collapsed .sidebar-group-toggle { display: none; }
body.sidebar-collapsed .sidebar-group-body { display: block !important; height: auto !important; }
body.sidebar-collapsed .sidebar-group-body .nav-link { padding: .75rem 0; margin: .15rem .5rem; text-align: center; }

/* Collapse toggle button in sidebar footer */
.sidebar-collapse-btn {
    background: none; border: none; color: var(--admin-sidebar-text-muted);
    padding: .75rem; width: 100%; text-align: center;
    border-top: 1px solid var(--admin-sidebar-border);
    cursor: pointer; transition: color .2s;
}
.sidebar-collapse-btn:hover { color: var(--admin-sidebar-active-text); background: var(--admin-sidebar-hover); }

.admin-content { margin-left: var(--admin-sidebar-w); padding: 1.5rem 2rem; transition: margin-left .25s ease; }
.admin-topbar {
    background: var(--sg-surface);
    border-bottom: 1px solid var(--sg-border);
    padding: .75rem 2rem;
    margin-left: var(--admin-sidebar-w);
    position: sticky;
    top: 0; z-index: 999;
    transition: margin-left .25s ease;
}

/* --- Collapsed state (desktop) --- */
body.sidebar-collapsed .admin-sidebar { width: var(--admin-sidebar-collapsed-w); }
body.sidebar-collapsed .admin-content,
body.sidebar-collapsed .admin-topbar { margin-left: var(--admin-sidebar-collapsed-w); }
body.sidebar-collapsed .admin-sidebar .nav-link { padding: .75rem 0; margin: .15rem .5rem; text-align: center; }
body.sidebar-collapsed .admin-sidebar .nav-link i { margin-right: 0; font-size: 1.2rem; }
body.sidebar-collapsed .admin-sidebar .nav-link span { display: none; }
body.sidebar-collapsed .admin-sidebar .sidebar-brand span,
body.sidebar-collapsed .admin-sidebar .sidebar-brand small { display: none; }
body.sidebar-collapsed .admin-sidebar .sidebar-brand i { font-size: 1.5rem; margin: 0; }
body.sidebar-collapsed .admin-sidebar .sidebar-section-label { opacity: 0; height: 0; overflow: hidden; margin: 0; padding: 0; }
body.sidebar-collapsed .admin-sidebar hr { margin: .25rem 0; }
body.sidebar-collapsed .sidebar-collapse-btn .collapse-icon { transform: rotate(180deg); }

/* Tooltip on collapsed icons */
body.sidebar-collapsed .admin-sidebar .nav-link { position: relative; }
body.sidebar-collapsed .admin-sidebar .nav-link::after {
    content: attr(data-title);
    position: absolute;
    left: calc(var(--admin-sidebar-collapsed-w) - 12px);
    top: 50%; transform: translateY(-50%);
    background: var(--sg-surface); color: var(--sg-body-color);
    padding: .3rem .7rem; border-radius: .3rem;
    font-size: .78rem; white-space: nowrap;
    pointer-events: none; opacity: 0;
    transition: opacity .15s; z-index: 1050;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    border: 1px solid var(--sg-border);
}
body.sidebar-collapsed .admin-sidebar .nav-link:hover::after { opacity: 1; }

/* --- Mobile (< 992px) --- */
@media (max-width: 991.98px) {
    .admin-sidebar { width: var(--admin-sidebar-w) !important; transform: translateX(-100%); }
    .admin-sidebar.show { transform: translateX(0); }
    .admin-content, .admin-topbar { margin-left: 0 !important; }
    .sidebar-collapse-btn { display: none; }
    .admin-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.5);
        z-index: 1035;
    }
    .admin-backdrop.show { display: block; }
    /* Collapsed body class must not affect mobile */
    body.sidebar-collapsed .admin-sidebar .nav-link span { display: inline; }
    body.sidebar-collapsed .admin-sidebar .sidebar-brand span,
    body.sidebar-collapsed .admin-sidebar .sidebar-brand small { display: block; }
    body.sidebar-collapsed .admin-sidebar .sidebar-section-label { opacity: 1; height: auto; overflow: visible; }
    body.sidebar-collapsed .admin-sidebar .nav-link::after { display: none; }
    body.sidebar-collapsed .admin-sidebar .nav-link { padding: .75rem 1.25rem; margin: .15rem .75rem; text-align: left; }
    body.sidebar-collapsed .admin-sidebar .nav-link i { margin-right: .5rem; font-size: 1.05rem; }
}
/* Admin responsive helpers */
.admin-content .d-flex.justify-content-between {
    flex-wrap: wrap;
    gap: .5rem;
}
.admin-content .nav-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
}
.admin-content .nav-tabs .nav-link {
    white-space: nowrap;
}
.admin-content td {
    word-break: break-word;
}
@media (max-width: 575.98px) {
    .admin-content { padding: 1rem; }
    .admin-topbar { padding: .75rem 1rem; }
}
.theme-toggle-btn { background: none; border: none; color: var(--sg-text-muted); font-size: 1.1rem; padding: .25rem .5rem; cursor: pointer; transition: color .2s; border-radius: .25rem; }
.theme-toggle-btn:hover { color: var(--sg-blue); background: var(--sg-surface-hover, rgba(0,0,0,.05)); }

/* Dark mode overrides for admin */
[data-bs-theme="dark"] .card { background: var(--sg-card-bg); border: 1px solid var(--sg-border); }
[data-bs-theme="dark"] .card.shadow-sm { box-shadow: none !important; }
[data-bs-theme="dark"] .card-header { background: var(--sg-surface) !important; border-bottom-color: var(--sg-border); }
[data-bs-theme="dark"] .table { --bs-table-bg: var(--sg-card-bg); color: var(--sg-body-color); }
[data-bs-theme="dark"] .table-secondary { --bs-table-bg: rgba(255,255,255,.05); --bs-table-color: var(--sg-body-color); }
[data-bs-theme="dark"] .table-hover > tbody > tr:hover { --bs-table-hover-bg: rgba(255,255,255,.04); }
[data-bs-theme="dark"] .list-group-item { background: var(--sg-card-bg); border-color: var(--sg-border); color: var(--sg-body-color); }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background: var(--sg-surface); border-color: var(--sg-border); color: var(--sg-body-color); }
[data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background: var(--sg-surface); border-color: var(--sg-blue); color: var(--sg-body-color); }
[data-bs-theme="dark"] .btn-outline-primary { border-color: var(--sg-blue); color: var(--sg-blue); }
[data-bs-theme="dark"] .btn-outline-secondary { border-color: var(--sg-border); color: var(--sg-text-muted); }
[data-bs-theme="dark"] .btn-outline-warning { border-color: #ffc107; color: #ffc107; }
[data-bs-theme="dark"] .btn-outline-danger { border-color: #dc3545; color: #dc3545; }
[data-bs-theme="dark"] .btn-outline-success { border-color: #198754; color: #198754; }
[data-bs-theme="dark"] .alert { border-color: var(--sg-border); }
[data-bs-theme="dark"] .badge.bg-body-tertiary { background: rgba(255,255,255,.1) !important; }
[data-bs-theme="dark"] .progress { background: rgba(255,255,255,.1); }
[data-bs-theme="dark"] .border-bottom { border-color: var(--sg-border) !important; }

/* Viewer read-only mode — hide all write actions */
body.viewer-mode form[method="post"],
body.viewer-mode form[data-confirm],
body.viewer-mode .btn-danger,
body.viewer-mode .btn-outline-danger,
body.viewer-mode a[href*="create"],
body.viewer-mode a[href*="Create"],
body.viewer-mode a[href*="edit/"],
body.viewer-mode button[type="submit"] { display: none !important; }
body.viewer-mode .btn-group { pointer-events: none; opacity: .5; }
body.viewer-mode .btn-group a[href*="View"],
body.viewer-mode .btn-group a[target="_blank"] { pointer-events: auto; opacity: 1; display: inline-block !important; }