/*
 * NYCTI admin visual theme.
 * Loaded after module styles so the compact layout and palette stay consistent.
 */

:root {
    --bg: #f3f4f8;
    --surface: #ffffff;
    --ink: #1f2937;
    --muted: #64748b;
    --line: #dfe3ef;
    --teal: #4f46e5;
    --teal-dark: #312e81;
    --blue: #6366f1;
    --red: #dc2626;
    --green: #059669;
    --amber: #14b8a6;
    --orange-dark: #0f766e;
    --sky: #eef2ff;
    --accent-soft: #ecfdf5;
    --primary-soft: #eef2ff;
    --admin-sidebar-width: 236px;
    --admin-sidebar-collapsed-width: 68px;
    --shadow: 0 18px 46px rgba(49, 46, 129, 0.1);
}

.admin-shell {
    grid-template-columns: var(--admin-sidebar-width) minmax(0, 1fr);
}

.admin-shell.menu-collapsed {
    grid-template-columns: var(--admin-sidebar-collapsed-width) minmax(0, 1fr);
}

.admin-sidebar {
    background:
        linear-gradient(180deg, rgba(17, 24, 39, 0.99), rgba(49, 46, 129, 0.98) 58%, rgba(79, 70, 229, 0.96)),
        var(--teal-dark);
    box-shadow: 14px 0 34px rgba(49, 46, 129, 0.2);
}

.nav-direct,
.nav-group-toggle {
    color: #e0e7ff;
}

.admin-menu-toggle:hover,
.admin-menu-toggle:focus,
.nav-direct:hover,
.nav-direct:focus,
.nav-direct.active,
.nav-group.active > .nav-group-toggle,
.nav-group.is-open > .nav-group-toggle,
.nav-group:focus-within > .nav-group-toggle,
.sidebar-logout-button:hover,
.sidebar-logout-button:focus {
    background: linear-gradient(135deg, var(--amber), var(--orange-dark));
    box-shadow: 0 10px 22px rgba(20, 184, 166, 0.24);
}

.nav-submenu {
    border-left-color: rgba(45, 212, 191, 0.72);
}

.nav-submenu a:hover,
.nav-submenu a:focus,
.nav-submenu a.active {
    background: rgba(20, 184, 166, 0.2);
}

.admin-sidebar-bottom {
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.08), rgba(17, 24, 39, 0.58));
}

.admin-account .account-action,
.forgot-button {
    border-color: rgba(20, 184, 166, 0.3);
    background: var(--accent-soft);
}

.portal-notification-trigger,
.topbar-logout-button,
.broadcast-mode-card,
.dashboard-context-card,
.stat-card,
.quick-action-card {
    border-color: rgba(79, 70, 229, 0.16);
}

.portal-notification-item.is-unread,
.portal-notification-row.is-unread,
.dashboard-context-card[href]:hover,
.dashboard-context-card[href]:focus,
.stat-card:hover,
.stat-card:focus,
.quick-action-card:hover,
.quick-action-card:focus,
.student-combobox-option:hover,
.student-combobox-option:focus {
    border-color: rgba(20, 184, 166, 0.38);
    background: var(--accent-soft);
}

.portal-notification-item:hover,
.portal-notification-item:focus,
.portal-notification-row:hover,
.portal-notification-row:focus,
.notice.info {
    background: var(--primary-soft);
}

.dashboard-context-card::after,
.stat-card::after {
    background: rgba(20, 184, 166, 0.14);
}

input:focus,
select:focus,
textarea:focus,
.otp-boxes input:focus,
.student-combobox-toggle[aria-expanded='true'] {
    border-color: var(--amber);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.16);
}

.tab.active,
.primary-button,
.portal-notification-badge.has-count,
.portal-notification-status.is-unread-status,
.portal-notification-row.is-unread .portal-notification-status,
.forgot-button:hover,
.forgot-button:focus,
.app-footer,
.auth-footer {
    border-color: var(--amber);
    background: linear-gradient(135deg, var(--amber), var(--orange-dark));
    color: #ffffff;
}

.app-footer,
.auth-footer {
    box-shadow: 0 10px 24px rgba(20, 184, 166, 0.18);
}

/* Library module harmonization. */
.library-tab {
    border-color: #dfe3ef;
    color: #312e81;
}

.library-tab.active,
.library-tab:hover {
    border-color: #14b8a6;
    background: #ecfdf5;
    color: #0f766e;
}

.library-stat strong,
.library-book-title,
.library-form-section h3 {
    color: #312e81;
}

.library-portal-head {
    background: linear-gradient(135deg, #111827, #312e81 58%, #4f46e5);
}

.library-kicker {
    color: #2dd4bf;
}

.library-link {
    color: #4f46e5;
}

/* Dashboard card palette: compact blocks with distinct, readable module colors. */
.admin-page-dashboard .dashboard-context-card,
.admin-page-dashboard .stat-card,
.admin-page-dashboard .quick-action-card {
    --dashboard-card-accent: #2563eb;
    --dashboard-card-soft: #eff6ff;
    --dashboard-card-hover: #dbeafe;
    --dashboard-card-border: rgba(37, 99, 235, 0.28);
    --dashboard-card-orb: rgba(37, 99, 235, 0.15);
    --dashboard-card-shadow: rgba(37, 99, 235, 0.12);
    border-color: var(--dashboard-card-border);
    background: linear-gradient(135deg, var(--dashboard-card-soft) 0%, #ffffff 100%);
    box-shadow: 0 7px 18px var(--dashboard-card-shadow);
}

.admin-page-dashboard .dashboard-context-card {
    border-top-color: var(--dashboard-card-accent);
}

.admin-page-dashboard .stat-card,
.admin-page-dashboard .quick-action-card {
    border-left-color: var(--dashboard-card-accent);
}

.admin-page-dashboard .quick-action-card {
    position: relative;
    overflow: hidden;
    border-left-width: 4px;
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.admin-page-dashboard .dashboard-context-card::after,
.admin-page-dashboard .stat-card::after {
    background: var(--dashboard-card-orb);
}

.admin-page-dashboard .dashboard-context-card span,
.admin-page-dashboard .dashboard-context-card strong,
.admin-page-dashboard .stat-card strong,
.admin-page-dashboard .quick-action-card span {
    color: var(--dashboard-card-accent);
}

.admin-page-dashboard .stat-card span {
    color: #475569;
}

.admin-page-dashboard .dashboard-context-card small,
.admin-page-dashboard .quick-action-card strong {
    color: #273449;
}

.admin-page-dashboard .dashboard-context-card[href]:hover,
.admin-page-dashboard .dashboard-context-card[href]:focus,
.admin-page-dashboard .stat-card:hover,
.admin-page-dashboard .stat-card:focus,
.admin-page-dashboard .quick-action-card:hover,
.admin-page-dashboard .quick-action-card:focus {
    border-color: var(--dashboard-card-accent);
    background: linear-gradient(135deg, var(--dashboard-card-hover) 0%, #ffffff 100%);
    box-shadow: 0 11px 24px var(--dashboard-card-shadow);
    transform: translateY(-2px);
}

.admin-page-dashboard .dashboard-context-card:nth-child(2),
.admin-page-dashboard .stat-card:nth-child(6n + 2),
.admin-page-dashboard .quick-action-card:nth-child(6n + 2) {
    --dashboard-card-accent: #d97706;
    --dashboard-card-soft: #fffbeb;
    --dashboard-card-hover: #fef3c7;
    --dashboard-card-border: rgba(217, 119, 6, 0.3);
    --dashboard-card-orb: rgba(217, 119, 6, 0.16);
    --dashboard-card-shadow: rgba(217, 119, 6, 0.12);
}

.admin-page-dashboard .stat-card:nth-child(6n + 3),
.admin-page-dashboard .quick-action-card:nth-child(6n + 3) {
    --dashboard-card-accent: #059669;
    --dashboard-card-soft: #ecfdf5;
    --dashboard-card-hover: #d1fae5;
    --dashboard-card-border: rgba(5, 150, 105, 0.28);
    --dashboard-card-orb: rgba(5, 150, 105, 0.15);
    --dashboard-card-shadow: rgba(5, 150, 105, 0.12);
}

.admin-page-dashboard .stat-card:nth-child(6n + 4),
.admin-page-dashboard .quick-action-card:nth-child(6n + 4) {
    --dashboard-card-accent: #e11d48;
    --dashboard-card-soft: #fff1f2;
    --dashboard-card-hover: #ffe4e6;
    --dashboard-card-border: rgba(225, 29, 72, 0.27);
    --dashboard-card-orb: rgba(225, 29, 72, 0.14);
    --dashboard-card-shadow: rgba(225, 29, 72, 0.11);
}

.admin-page-dashboard .stat-card:nth-child(6n + 5),
.admin-page-dashboard .quick-action-card:nth-child(6n + 5) {
    --dashboard-card-accent: #7c3aed;
    --dashboard-card-soft: #f5f3ff;
    --dashboard-card-hover: #ede9fe;
    --dashboard-card-border: rgba(124, 58, 237, 0.28);
    --dashboard-card-orb: rgba(124, 58, 237, 0.14);
    --dashboard-card-shadow: rgba(124, 58, 237, 0.11);
}

.admin-page-dashboard .stat-card:nth-child(6n),
.admin-page-dashboard .quick-action-card:nth-child(6n) {
    --dashboard-card-accent: #0891b2;
    --dashboard-card-soft: #ecfeff;
    --dashboard-card-hover: #cffafe;
    --dashboard-card-border: rgba(8, 145, 178, 0.28);
    --dashboard-card-orb: rgba(8, 145, 178, 0.15);
    --dashboard-card-shadow: rgba(8, 145, 178, 0.11);
}

@media (max-width: 720px) {
    .admin-shell,
    .admin-shell.menu-collapsed {
        display: block;
    }
}