/*
 * UCC-ERS Dashboard UI v3.0
 * Visual direction: compact institutional dashboard, clean white surfaces,
 * dark UCC green navigation, restrained accents, and readable typography.
 */

:root {
    --ers-sidebar-width: 235px;
    --ers-v3-bg: #f4f7f5;
    --ers-v3-surface: #ffffff;
    --ers-v3-surface-soft: #f8faf9;
    --ers-v3-sidebar: #0b4934;
    --ers-v3-sidebar-deep: #083d2c;
    --ers-v3-green: #078447;
    --ers-v3-green-strong: #056b3a;
    --ers-v3-green-soft: #e7f7ee;
    --ers-v3-green-pale: #f1faf5;
    --ers-v3-text: #14231b;
    --ers-v3-text-2: #45564c;
    --ers-v3-muted: #75837b;
    --ers-v3-border: #dfe6e2;
    --ers-v3-border-strong: #d3ddd7;
    --ers-v3-shadow: 0 2px 9px rgba(20, 53, 36, .045);
    --ers-v3-shadow-hover: 0 9px 24px rgba(20, 66, 41, .085);
    --ers-v3-font: "Segoe UI Variable", "Segoe UI", Inter, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Application shell
   -------------------------------------------------------------------------- */

html body.ers-admin,
html body.ers-app.ers-user {
    background: var(--ers-v3-bg) !important;
    background-image: none !important;
    color: var(--ers-v3-text-2) !important;
    font-family: var(--ers-v3-font) !important;
    font-size: 13px !important;
    line-height: 1.48 !important;
}

body.ers-admin .admin-container,
body.ers-app.ers-user .user-container {
    background: var(--ers-v3-bg) !important;
}

body.ers-admin .main-content,
body.ers-app.ers-user .user-main {
    width: calc(100% - var(--ers-sidebar-width)) !important;
    margin-left: var(--ers-sidebar-width) !important;
    min-width: 0 !important;
    background: var(--ers-v3-bg) !important;
}

/* --------------------------------------------------------------------------
   Compact dark-green sidebar inspired by the supplied dashboard reference
   -------------------------------------------------------------------------- */

body.ers-admin .sidebar,
body.ers-app.ers-user .user-sidebar {
    width: var(--ers-sidebar-width) !important;
    background: var(--ers-v3-sidebar) !important;
    background-image: linear-gradient(180deg, #0b4b35 0%, #093f2e 100%) !important;
    color: rgba(255,255,255,.76) !important;
    box-shadow: 7px 0 22px rgba(10, 54, 37, .055) !important;
}

body.ers-admin .sidebar::before,
body.ers-admin .sidebar::after,
body.ers-app.ers-user .user-sidebar::before,
body.ers-app.ers-user .user-sidebar::after {
    display: none !important;
}

body.ers-admin .sidebar-header,
body.ers-app.ers-user .sidebar-header {
    padding: 14px 14px 12px !important;
    border: 0 !important;
}

body.ers-admin .sidebar-brand-lockup,
body.ers-app.ers-user .sidebar-brand-lockup {
    min-height: 58px !important;
    padding: 8px !important;
    gap: 10px !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,.045) !important;
    box-shadow: none !important;
}

body.ers-admin .sidebar-logo,
body.ers-app.ers-user .sidebar-logo {
    width: 42px !important;
    height: 42px !important;
    padding: 5px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.ers-admin .sidebar-title,
body.ers-app.ers-user .sidebar-title {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
}

body.ers-admin .sidebar-subtitle,
body.ers-app.ers-user .sidebar-subtitle {
    margin-top: 2px !important;
    color: rgba(255,255,255,.49) !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
}

body.ers-admin .nav-menu,
body.ers-app.ers-user .nav-menu {
    padding: 7px 11px 76px !important;
}

body.ers-admin .nav-section-label,
body.ers-app.ers-user .nav-section-label {
    margin: 18px 10px 6px !important;
    color: rgba(255,255,255,.36) !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: .14em !important;
}

body.ers-admin .nav-item,
body.ers-app.ers-user .nav-item {
    margin: 2px 0 !important;
}

body.ers-admin .nav-link,
body.ers-app.ers-user .nav-link {
    min-height: 40px !important;
    padding: 6px 9px !important;
    gap: 8px !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    color: rgba(255,255,255,.68) !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

body.ers-admin .nav-link:hover,
body.ers-app.ers-user .nav-link:hover {
    color: #fff !important;
    background: rgba(255,255,255,.065) !important;
    border-color: transparent !important;
    transform: none !important;
}

body.ers-admin .nav-link.active,
body.ers-app.ers-user .nav-link.active {
    color: #fff !important;
    background: rgba(255,255,255,.12) !important;
    background-image: none !important;
    border-color: rgba(255,255,255,.06) !important;
    box-shadow: inset 3px 0 0 #8fd2aa !important;
}

body.ers-admin .nav-icon,
body.ers-app.ers-user .nav-icon {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    border-radius: 7px !important;
    color: rgba(220, 246, 231, .68) !important;
    background: transparent !important;
}

body.ers-admin .nav-link.active .nav-icon,
body.ers-app.ers-user .nav-link.active .nav-icon {
    color: #c8f3d9 !important;
    background: rgba(255,255,255,.07) !important;
}

body.ers-admin .nav-icon .ers-icon,
body.ers-app.ers-user .nav-icon .ers-icon {
    width: 16px !important;
    height: 16px !important;
}

body.ers-admin .nav-text,
body.ers-app.ers-user .nav-text {
    color: inherit !important;
    font-size: 11px !important;
    font-weight: 650 !important;
}

body.ers-admin .sidebar-footer,
body.ers-app.ers-user .sidebar-footer {
    inset: auto 11px 11px !important;
    padding: 10px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 9px !important;
    background: rgba(3, 25, 17, .12) !important;
    color: rgba(255,255,255,.39) !important;
    font-size: 8px !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   White top bar
   -------------------------------------------------------------------------- */

body.ers-admin .topbar,
body.ers-app.ers-user .user-topbar {
    min-height: 69px !important;
    padding: 9px 24px !important;
    gap: 14px !important;
    background: #fff !important;
    background-image: none !important;
    border-bottom: 1px solid var(--ers-v3-border) !important;
    box-shadow: 0 1px 0 rgba(24, 58, 39, .015) !important;
    backdrop-filter: none !important;
}

body.ers-admin .page-eyebrow,
body.ers-app.ers-user .page-eyebrow {
    margin-bottom: 2px !important;
    color: #74827a !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: .16em !important;
}

body.ers-admin .page-title,
body.ers-app.ers-user .page-title {
    color: #122219 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -.025em !important;
}

body.ers-admin .user-menu,
body.ers-app.ers-user .user-menu {
    gap: 10px !important;
}

body.ers-admin .topbar-icon-button,
body.ers-admin .qr-code-btn,
body.ers-app.ers-user .system-clock,
body.ers-app.ers-user .user-profile-trigger {
    min-height: 40px !important;
    border: 1px solid var(--ers-v3-border) !important;
    border-radius: 9px !important;
    background: #fff !important;
    background-image: none !important;
    color: #125d3a !important;
    box-shadow: none !important;
}

body.ers-admin .topbar-icon-button:hover,
body.ers-admin .qr-code-btn:hover,
body.ers-app.ers-user .user-profile-trigger:hover {
    border-color: #c8dbcf !important;
    background: #f7faf8 !important;
    color: #075f38 !important;
    transform: none !important;
}

body.ers-admin .qr-code-btn {
    padding: 8px 12px !important;
    gap: 7px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

body.ers-admin .notification-bell {
    width: 40px !important;
    padding: 0 !important;
}

body.ers-admin .notification-badge {
    top: -6px !important;
    right: -6px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 999px !important;
    font-size: 8px !important;
    animation: none !important;
}

body.ers-admin .user-name,
body.ers-app.ers-user .user-name {
    color: #17271e !important;
    font-size: 11px !important;
    font-weight: 750 !important;
}

body.ers-admin .user-role,
body.ers-app.ers-user .user-email {
    color: #7b877f !important;
    font-size: 8px !important;
}

body.ers-admin .user-avatar,
body.ers-app.ers-user .user-avatar {
    width: 39px !important;
    height: 39px !important;
    flex: 0 0 39px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: linear-gradient(145deg, #0a8a4d, #056737) !important;
    color: #fff !important;
    font-size: 13px !important;
    box-shadow: none !important;
}

body.ers-app.ers-user .system-clock {
    min-width: 145px !important;
    padding: 7px 12px !important;
    background: var(--ers-v3-green-pale) !important;
    border-color: #d9eee2 !important;
}

body.ers-app.ers-user .clock-time {
    color: #075f38 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

body.ers-app.ers-user .clock-date {
    margin-top: 1px !important;
    color: #748078 !important;
    font-size: 7px !important;
}

/* --------------------------------------------------------------------------
   Main content rhythm
   -------------------------------------------------------------------------- */

body.ers-admin .content-area,
body.ers-app.ers-user .content-area {
    padding: 22px 24px !important;
}

body.ers-admin .content-area > :first-child,
body.ers-app.ers-user .content-area > :first-child {
    margin-top: 0 !important;
}

body.ers-admin h1,
body.ers-admin h2,
body.ers-admin h3,
body.ers-admin h4,
body.ers-app.ers-user h1,
body.ers-app.ers-user h2,
body.ers-app.ers-user h3,
body.ers-app.ers-user h4 {
    color: var(--ers-v3-text) !important;
    font-family: var(--ers-v3-font) !important;
}

/* --------------------------------------------------------------------------
   Panels, cards, and dashboard blocks
   -------------------------------------------------------------------------- */

body.ers-admin .welcome-banner,
body.ers-app.ers-user .welcome-banner {
    margin-bottom: 16px !important;
    padding: 13px 16px !important;
    border: 1px solid #d5eadf !important;
    border-left: 3px solid #20ad62 !important;
    border-radius: 10px !important;
    background: #eefaf4 !important;
    background-image: none !important;
    box-shadow: none !important;
}

body.ers-admin .welcome-title,
body.ers-app.ers-user .welcome-text,
body.ers-app.ers-user .welcome-text strong {
    color: #17432e !important;
}

body.ers-admin .welcome-title {
    font-size: 14px !important;
    font-weight: 750 !important;
}

body.ers-admin .welcome-subtitle {
    margin-top: 2px !important;
    color: #64736a !important;
    font-size: 10px !important;
}

body.ers-admin .section,
body.ers-admin .dashboard-card,
body.ers-admin .settings-card,
body.ers-admin .users-section,
body.ers-admin .form-card,
body.ers-admin .detail-card,
body.ers-admin .details-card,
body.ers-admin .calendar-wrapper,
body.ers-admin .calendar-panel,
body.ers-admin .availability-panel,
body.ers-admin .campuses-list,
body.ers-admin .establishments-list,
body.ers-admin .reservations-table,
body.ers-admin .vehicle-reservations-table,
body.ers-app.ers-user .section,
body.ers-app.ers-user .panel-card,
body.ers-app.ers-user .form-card,
body.ers-app.ers-user .settings-card,
body.ers-app.ers-user .detail-card,
body.ers-app.ers-user .details-card,
body.ers-app.ers-user .calendar-wrapper,
body.ers-app.ers-user .scheduled-events,
body.ers-app.ers-user .upcoming-events,
body.ers-app.ers-user .campuses-section,
body.ers-app.ers-user .establishments-section {
    border: 1px solid var(--ers-v3-border) !important;
    border-radius: 12px !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: var(--ers-v3-shadow) !important;
}

body.ers-admin .section:hover,
body.ers-admin .dashboard-card:hover,
body.ers-admin .stat-card:hover,
body.ers-app.ers-user .section:hover {
    transform: none !important;
}

body.ers-admin .section-header,
body.ers-admin .card-header,
body.ers-admin .panel-header,
body.ers-app.ers-user .section-header,
body.ers-app.ers-user .card-header,
body.ers-app.ers-user .panel-header,
body.ers-app.ers-user .calendar-header {
    border-bottom-color: #e5ebe7 !important;
}

body.ers-admin .section-title,
body.ers-admin .card-title,
body.ers-admin .panel-title,
body.ers-app.ers-user .section-title,
body.ers-app.ers-user .card-title,
body.ers-app.ers-user .panel-title,
body.ers-app.ers-user .month-title {
    color: #173226 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

body.ers-admin .card-subtitle,
body.ers-admin .section-count,
body.ers-app.ers-user .section-count {
    color: #78867e !important;
    font-size: 9px !important;
}

/* Stats: clean white boxes with colored icon tiles like the reference */
body.ers-admin .stats-grid {
    gap: 12px !important;
    margin-bottom: 16px !important;
}

body.ers-admin .stat-card,
body.ers-app.ers-user .stat-card {
    min-height: 112px !important;
    padding: 15px !important;
    border: 1px solid var(--ers-v3-border) !important;
    border-radius: 11px !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: var(--ers-v3-shadow) !important;
}

body.ers-admin .stat-card:nth-child(1),
body.ers-app.ers-user .stat-card:nth-child(1) { border-color: #d9e8f7 !important; }
body.ers-admin .stat-card:nth-child(2),
body.ers-app.ers-user .stat-card:nth-child(2) { border-color: #f1e3c9 !important; }
body.ers-admin .stat-card:nth-child(3),
body.ers-app.ers-user .stat-card:nth-child(3) { border-color: #d3eadf !important; }
body.ers-admin .stat-card:nth-child(4),
body.ers-app.ers-user .stat-card:nth-child(4) { border-color: #e4dff1 !important; }

body.ers-admin .stat-icon,
body.ers-app.ers-user .stat-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: #e9f6ef !important;
    background-image: none !important;
    color: #078447 !important;
    box-shadow: none !important;
    font-size: 16px !important;
}

body.ers-admin .stat-card:nth-child(1) .stat-icon { background: #eaf4ff !important; color: #176fc1 !important; }
body.ers-admin .stat-card:nth-child(2) .stat-icon { background: #fff4df !important; color: #d27a00 !important; }
body.ers-admin .stat-card:nth-child(3) .stat-icon { background: #e7f7ee !important; color: #087b46 !important; }
body.ers-admin .stat-card:nth-child(4) .stat-icon { background: #f2effb !important; color: #7155b6 !important; }

body.ers-admin .stat-value,
body.ers-app.ers-user .stat-value {
    color: #13251b !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: -.035em !important;
}

body.ers-admin .stat-label,
body.ers-app.ers-user .stat-label {
    color: #33483c !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

body.ers-admin .stat-trend,
body.ers-app.ers-user .stat-trend {
    color: #8a968f !important;
    font-size: 8px !important;
}

body.ers-admin .dashboard-two-col,
body.ers-app.ers-user .dashboard-layout {
    gap: 14px !important;
}

/* --------------------------------------------------------------------------
   Buttons and compact service/action cards
   -------------------------------------------------------------------------- */

body.ers-admin .btn-add,
body.ers-admin .btn-primary,
body.ers-admin .btn-submit,
body.ers-admin .btn-apply,
body.ers-admin .generate-report-btn,
body.ers-app.ers-user .btn-primary,
body.ers-app.ers-user .btn-submit,
body.ers-app.ers-user .btn-apply {
    min-height: 38px !important;
    padding: 8px 14px !important;
    border: 1px solid #159653 !important;
    border-radius: 8px !important;
    background: #1db45f !important;
    background-image: none !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    transform: none !important;
}

body.ers-admin .btn-add:hover,
body.ers-admin .btn-primary:hover,
body.ers-admin .btn-submit:hover,
body.ers-admin .btn-apply:hover,
body.ers-app.ers-user .btn-primary:hover,
body.ers-app.ers-user .btn-submit:hover,
body.ers-app.ers-user .btn-apply:hover {
    border-color: #087b45 !important;
    background: #0f9a50 !important;
    color: #fff !important;
    box-shadow: 0 5px 12px rgba(14, 141, 74, .13) !important;
    transform: translateY(-1px) !important;
}

body.ers-admin .btn-secondary,
body.ers-admin .btn-back,
body.ers-app.ers-user .btn-secondary,
body.ers-app.ers-user .btn-back,
body.ers-admin .nav-btn,
body.ers-app.ers-user .nav-btn {
    min-height: 36px !important;
    border: 1px solid var(--ers-v3-border) !important;
    border-radius: 8px !important;
    background: #fff !important;
    background-image: none !important;
    color: #17663f !important;
    box-shadow: none !important;
}

body.ers-admin .nav-btn.active,
body.ers-admin .nav-btn.today-btn,
body.ers-app.ers-user .nav-btn.active,
body.ers-app.ers-user .nav-btn.today-btn {
    border-color: #087b45 !important;
    background: #078447 !important;
    color: #fff !important;
}

body.ers-admin .action-btn,
body.ers-app.ers-user .action-btn,
body.ers-admin .btn-view,
body.ers-app.ers-user .btn-view {
    border-radius: 7px !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Forms, filters, and search bars
   -------------------------------------------------------------------------- */

body.ers-admin input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.ers-admin select,
body.ers-admin textarea,
body.ers-app.ers-user input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.ers-app.ers-user select,
body.ers-app.ers-user textarea {
    min-height: 40px !important;
    border: 1px solid #dce4df !important;
    border-radius: 8px !important;
    background: #fff !important;
    background-image: none !important;
    color: #22342a !important;
    font-size: 11px !important;
    box-shadow: none !important;
}

body.ers-admin input::placeholder,
body.ers-admin textarea::placeholder,
body.ers-app.ers-user input::placeholder,
body.ers-app.ers-user textarea::placeholder {
    color: #97a29b !important;
    opacity: 1 !important;
}

body.ers-admin input:focus,
body.ers-admin select:focus,
body.ers-admin textarea:focus,
body.ers-app.ers-user input:focus,
body.ers-app.ers-user select:focus,
body.ers-app.ers-user textarea:focus {
    border-color: #75c59a !important;
    outline: 3px solid rgba(22, 163, 93, .1) !important;
    box-shadow: none !important;
}

body.ers-admin .form-group label,
body.ers-app.ers-user .form-group label,
body.ers-admin .form-label,
body.ers-app.ers-user .form-label {
    color: #415349 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

body.ers-admin .filters-bar,
body.ers-admin .search-filter-bar,
body.ers-app.ers-user .filters-bar,
body.ers-app.ers-user .search-filter-card {
    border: 1px solid #e1e8e4 !important;
    border-radius: 10px !important;
    background: #fafcfb !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Tables: readable, dense, and consistent
   -------------------------------------------------------------------------- */

body.ers-admin .table-wrapper,
body.ers-app.ers-user .table-wrapper {
    border: 1px solid #e1e7e3 !important;
    border-radius: 9px !important;
    overflow: auto !important;
    background: #fff !important;
}

body.ers-admin table,
body.ers-app.ers-user table {
    color: #26382e !important;
    font-size: 11px !important;
}

body.ers-admin table thead,
body.ers-app.ers-user table thead {
    background: #f5f8f6 !important;
    background-image: none !important;
}

body.ers-admin table th,
body.ers-app.ers-user table th,
body.ers-admin .data-table th,
body.ers-admin .user-table th,
body.ers-admin .establishment-table th,
body.ers-admin .reservations-table th,
body.ers-admin .vehicle-reservations-table th,
body.ers-app.ers-user .data-table th {
    padding: 11px 12px !important;
    color: #52645a !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid #dfe6e2 !important;
}

body.ers-admin table td,
body.ers-app.ers-user table td,
body.ers-admin .data-table td,
body.ers-admin .user-table td,
body.ers-admin .establishment-table td,
body.ers-app.ers-user .data-table td {
    padding: 11px 12px !important;
    color: #26382e !important;
    font-size: 11px !important;
    border-bottom: 1px solid #e7ece9 !important;
    vertical-align: middle !important;
}

body.ers-admin table tbody tr:hover,
body.ers-app.ers-user table tbody tr:hover {
    background: #f8faf9 !important;
}

body.ers-admin table strong,
body.ers-app.ers-user table strong {
    color: #15281d !important;
    font-weight: 750 !important;
}

/* --------------------------------------------------------------------------
   Badges and small labels
   -------------------------------------------------------------------------- */

body.ers-admin .status-badge,
body.ers-app.ers-user .status-badge,
body.ers-admin .section-count,
body.ers-app.ers-user .section-count,
body.ers-app.ers-user .selected-date-badge,
body.ers-app.ers-user .campus-badge,
body.ers-app.ers-user .readonly-badge {
    border-radius: 999px !important;
    font-size: 9px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    text-shadow: none !important;
}

body.ers-app.ers-user .campus-badge {
    background: #e7f7ee !important;
    background-image: none !important;
    color: #09633c !important;
    border: 1px solid #cce9d9 !important;
}

body.ers-app.ers-user .readonly-badge {
    background: #fff7e6 !important;
    color: #8a5b00 !important;
    border: 1px solid #f2dfb7 !important;
}

body.ers-admin .status-active,
body.ers-admin .status-approved,
body.ers-admin .status-completed,
body.ers-app.ers-user .status-active,
body.ers-app.ers-user .status-approved,
body.ers-app.ers-user .status-completed {
    background: #dff6e9 !important;
    color: #087443 !important;
}

/* --------------------------------------------------------------------------
   Calendars and list items
   -------------------------------------------------------------------------- */

body.ers-admin .calendar-day,
body.ers-app.ers-user .calendar-day,
body.ers-admin .weekday,
body.ers-app.ers-user .weekday {
    border-radius: 8px !important;
}

body.ers-admin .weekday,
body.ers-app.ers-user .weekday {
    background: #f5f8f6 !important;
    color: #42604e !important;
    font-size: 10px !important;
}

body.ers-admin .calendar-day,
body.ers-app.ers-user .calendar-day {
    background: #fbfcfb !important;
    border: 1px solid #edf1ee !important;
    box-shadow: none !important;
}

body.ers-admin .calendar-day:hover,
body.ers-app.ers-user .calendar-day:hover {
    background: #f4faf6 !important;
    border-color: #cde5d7 !important;
    transform: none !important;
}

body.ers-app.ers-user .event-item,
body.ers-admin .activity-item,
body.ers-admin .campus-item {
    border-radius: 9px !important;
    background: #f8faf9 !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Modals, notifications, profile menus, and chat
   -------------------------------------------------------------------------- */

body.ers-admin .modal-content,
body.ers-admin .qr-modal,
body.ers-admin .notification-dropdown,
body.ers-app.ers-user .modal-content,
body.ers-app.ers-user .user-profile-menu,
body.ers-admin .chat-container,
body.ers-app.ers-user .chat-container {
    border: 1px solid var(--ers-v3-border) !important;
    border-radius: 12px !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: 0 18px 50px rgba(11, 49, 31, .16) !important;
}

body.ers-admin .modal-header,
body.ers-admin .qr-modal-header,
body.ers-admin .notification-header,
body.ers-app.ers-user .modal-header {
    background: #fff !important;
    background-image: none !important;
    color: #182a20 !important;
    border-bottom: 1px solid var(--ers-v3-border) !important;
}

body.ers-admin .modal-header *,
body.ers-admin .qr-modal-header *,
body.ers-admin .notification-header *,
body.ers-app.ers-user .modal-header * {
    color: #182a20 !important;
}

body.ers-admin .close-modal,
body.ers-admin .qr-modal-close,
body.ers-app.ers-user .close-modal {
    color: #617168 !important;
}

body.ers-admin .mark-all-read {
    border: 1px solid #d9e3dd !important;
    background: #f7faf8 !important;
    color: #17663f !important;
}

body.ers-admin .notification-item.unread {
    background: #f0faf5 !important;
}

body.ers-admin .notification-item.unread::before {
    background: #1eaa5c !important;
}

body.ers-admin .chat-messages,
body.ers-app.ers-user .chat-messages {
    background: #f6f8f7 !important;
    background-image: none !important;
}

/* --------------------------------------------------------------------------
   Pagination and scrollbars
   -------------------------------------------------------------------------- */

body.ers-admin .pagination a,
body.ers-admin .pagination span,
body.ers-app.ers-user .pagination a,
body.ers-app.ers-user .pagination span,
body.ers-app.ers-user .page-btn {
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 6px 9px !important;
    border: 1px solid #dfe6e2 !important;
    border-radius: 7px !important;
    background: #fff !important;
    color: #17663f !important;
    box-shadow: none !important;
}

body.ers-admin .pagination .active span,
body.ers-admin .pagination span.active,
body.ers-app.ers-user .pagination .active span,
body.ers-app.ers-user .page-btn.active {
    border-color: #078447 !important;
    background: #078447 !important;
    color: #fff !important;
}

body.ers-admin ::-webkit-scrollbar,
body.ers-app.ers-user ::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

body.ers-admin ::-webkit-scrollbar-thumb,
body.ers-app.ers-user ::-webkit-scrollbar-thumb {
    background: #b7c4bc !important;
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    background-clip: padding-box !important;
}

/* --------------------------------------------------------------------------
   Auth and public pages: keep only restrained gradients
   -------------------------------------------------------------------------- */

html body.ers-app.ers-auth,
html body.ers-app.ers-public {
    font-family: var(--ers-v3-font) !important;
}

body.ers-app.ers-auth .hero-overlay {
    background: linear-gradient(145deg, rgba(7, 62, 40, .86), rgba(10, 111, 65, .62)) !important;
}

body.ers-app.ers-auth .auth-card,
body.ers-app.ers-public .calendar-panel,
body.ers-app.ers-public .availability-panel {
    border-radius: 13px !important;
    box-shadow: var(--ers-v3-shadow) !important;
}

/* --------------------------------------------------------------------------
   Responsive behavior
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
    body.ers-admin .topbar,
    body.ers-app.ers-user .user-topbar {
        padding-inline: 18px !important;
    }

    body.ers-admin .content-area,
    body.ers-app.ers-user .content-area {
        padding: 18px !important;
    }
}

@media (max-width: 980px) {
    body.ers-admin .main-content,
    body.ers-app.ers-user .user-main {
        width: 100% !important;
        margin-left: 0 !important;
    }

    body.ers-admin .sidebar,
    body.ers-app.ers-user .user-sidebar {
        width: min(260px, calc(100vw - 46px)) !important;
    }
}

@media (max-width: 768px) {
    body.ers-admin .topbar,
    body.ers-app.ers-user .user-topbar {
        min-height: 62px !important;
        padding: 8px 12px !important;
    }

    body.ers-admin .page-title,
    body.ers-app.ers-user .page-title {
        max-width: 48vw !important;
        font-size: 15px !important;
    }

    body.ers-admin .content-area,
    body.ers-app.ers-user .content-area {
        padding: 12px !important;
    }

    body.ers-admin .welcome-banner,
    body.ers-app.ers-user .welcome-banner {
        margin-bottom: 12px !important;
    }

    body.ers-admin .section,
    body.ers-admin .dashboard-card,
    body.ers-app.ers-user .section,
    body.ers-app.ers-user .calendar-wrapper,
    body.ers-app.ers-user .scheduled-events,
    body.ers-app.ers-user .upcoming-events {
        border-radius: 10px !important;
    }

    body.ers-admin table th,
    body.ers-admin table td,
    body.ers-app.ers-user table th,
    body.ers-app.ers-user table td {
        white-space: nowrap;
    }
}

@media (max-width: 520px) {
    body.ers-admin .topbar,
    body.ers-app.ers-user .user-topbar {
        gap: 7px !important;
    }

    body.ers-admin .user-info,
    body.ers-app.ers-user .user-profile-trigger .user-info,
    body.ers-app.ers-user .system-clock {
        display: none !important;
    }

    body.ers-admin .qr-code-btn {
        width: 39px !important;
        padding: 0 !important;
    }

    body.ers-admin .qr-code-btn-label {
        display: none !important;
    }
}