/*
|--------------------------------------------------------------------------
| SSBIEA SYSTEM TYPOGRAPHY
|--------------------------------------------------------------------------
| Shared readability tuning for the application UI.
| Kept separate from certificate and ID-card artwork sizing.
*/

body {
    font-size: 16px !important;
}

.system-logo-image {
    display: block;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

.report-logo {
    display: block;
    width: 260px;
    max-width: 100%;
    height: 134px;
    border-radius: 8px;
    object-fit: cover;
    object-position: center;
}

.report-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.report-brand .report-logo {
    flex: 0 0 auto;
}

.report-brand-text strong {
    display: block;
    color: var(--dark, #05364d);
    font-size: 18px;
    font-weight: 800;
}

.report-brand-text span {
    display: block;
    color: var(--muted, #628390);
    font-size: 13px;
    margin-top: 3px;
}

.page-content,
.main-content,
.login-wrapper {
    font-size: 16px !important;
}

.page-content h1,
.main-content h1 {
    font-size: 31px !important;
}

.page-content h2,
.page-content h3,
.main-content h2,
.main-content h3 {
    font-size: 18px !important;
}

.page-title p,
.header-subtitle,
.section-subtitle,
.welcome-label,
.welcome-banner p,
.welcome p,
.visual-content p {
    font-size: 15px !important;
}

.welcome-banner h2,
.welcome h2 {
    font-size: 32px !important;
}

.visual-content h1 {
    font-size: 45px !important;
}

.login-wrapper .brand h2,
.sidebar .brand-text strong {
    font-size: 18px !important;
}

.login-wrapper .brand span,
.sidebar .brand-text span {
    font-size: 12px !important;
}

.sidebar .nav-text,
.sidebar .nav-item,
.sidebar .nav-submenu a,
.sidebar .logout-link,
.sidebar-profile .profile-info strong {
    font-size: 15px !important;
}

.sidebar .nav-label,
.sidebar-profile .profile-info span,
.sidebar-footer,
.sidebar-footer span,
.sidebar-version {
    font-size: 12px !important;
}

.page-content label,
.main-content label,
.login-wrapper label,
.page-content .form-label,
.main-content .form-label,
.page-content .filter-title,
.main-content .filter-title,
.page-content .table-header h3,
.main-content .table-header h3,
.page-content .card-title,
.main-content .card-title,
.page-content .card-title h3,
.main-content .card-title h3,
.small-title,
.tag {
    font-size: 15px !important;
}

.page-content input,
.page-content select,
.page-content textarea,
.main-content input,
.main-content select,
.main-content textarea,
.login-wrapper input,
.page-content .form-control,
.main-content .form-control,
.page-content .filter-input,
.main-content .filter-input,
.page-content .filter-select,
.main-content .filter-select,
.page-content .search-form input,
.main-content .search-form input {
    font-size: 15px !important;
}

.page-content button,
.page-content .btn,
.page-content .action-btn,
.page-content .filter-btn,
.page-content .save-button,
.page-content .cancel-button,
.main-content button,
.main-content .btn,
.main-content .action-btn,
.main-content .filter-btn,
.main-content .save-button,
.main-content .cancel-button,
.login-wrapper button,
.login-button,
.toolbar .btn {
    font-size: 15px !important;
}

.page-content table th,
.main-content table th {
    font-size: 13px !important;
}

.page-content table td,
.main-content table td {
    font-size: 14px !important;
}

.page-content .meta,
.page-content .member-email,
.page-content .business-meta,
.page-content small,
.page-content .help-text,
.page-content .photo-help,
.page-content .selected-photo-name,
.page-content .empty,
.page-content .empty-state,
.page-content .alert,
.page-content .database-error,
.page-content .description,
.page-content .business-meta,
.page-content .report-meta,
.page-content .toggle-info span,
.page-content .menu-group-title,
.main-content .meta,
.main-content .member-email,
.main-content .business-meta,
.main-content small,
.main-content .help-text,
.main-content .photo-help,
.main-content .selected-photo-name,
.main-content .empty,
.main-content .empty-state,
.main-content .alert,
.main-content .database-error,
.main-content .description,
.main-content .business-meta,
.main-content .report-meta,
.main-content .toggle-info span,
.main-content .menu-group-title,
.page-content .card-title p,
.main-content .card-title p,
.login-footer,
.error-box {
    font-size: 14px !important;
}

.page-content .member-id,
.page-content .status,
.page-content .badge,
.page-content .member-badge,
.page-content .count-badge,
.page-content .member-count,
.page-content .results-count,
.page-content .guide-chip,
.main-content .member-id,
.main-content .status,
.main-content .badge,
.main-content .member-badge,
.main-content .count-badge,
.main-content .member-count,
.main-content .results-count,
.main-content .guide-chip,
.page-content .region-badge,
.main-content .region-badge,
.page-content .view-all,
.main-content .view-all {
    font-size: 13px !important;
}

.page-content .stat-card span,
.page-content .mini-stat span,
.page-content .detail span,
.main-content .stat-card span,
.main-content .mini-stat span,
.main-content .detail span,
.page-content .stat-title,
.main-content .stat-title,
.page-content .stat-description,
.main-content .stat-description,
.page-content .region-name,
.main-content .region-name,
.page-content .region-count,
.main-content .region-count,
.page-content .quick-action span,
.main-content .quick-action span,
.page-content .member-name strong,
.main-content .member-name strong,
.page-content .member-name span,
.main-content .member-name span,
.page-content .member-name,
.main-content .member-name,
.page-content .member-email,
.main-content .member-email,
.page-content .business-name,
.main-content .business-name,
.page-content .business-name strong,
.main-content .business-name strong,
.page-content .business-name span,
.main-content .business-name span,
.page-content .category-name,
.main-content .category-name,
.page-content .user-name,
.main-content .user-name,
.page-content .user-name strong,
.main-content .user-name strong,
.page-content .user-username,
.main-content .user-username,
.page-content .location-name,
.main-content .location-name,
.page-content .report-title,
.main-content .report-title,
.page-content .report-amount,
.main-content .report-amount,
.page-content .bar-label,
.main-content .bar-label,
.page-content .bar-value,
.main-content .bar-value,
.page-content .detail-label,
.main-content .detail-label,
.page-content .detail-value,
.main-content .detail-value,
.page-content .expiry-label,
.main-content .expiry-label,
.page-content .quick-title,
.main-content .quick-title {
    font-size: 13px !important;
}

.page-content .stat-card strong,
.main-content .stat-card strong,
.page-content .stat-value,
.main-content .stat-value {
    font-size: 26px !important;
}

.page-content .mini-stat strong,
.main-content .mini-stat strong {
    font-size: 19px !important;
}

.page-content .guide-card strong,
.main-content .guide-card strong {
    font-size: 18px !important;
}

.page-content .guide-card span,
.main-content .guide-card span {
    font-size: 15px !important;
}

.card .row span {
    font-size: 14px !important;
}

.card .row strong {
    font-size: 17px !important;
}

:is(.page-content, .main-content) [style*="font-size:7px"],
:is(.page-content, .main-content) [style*="font-size: 7px"],
:is(.page-content, .main-content) [style*="font-size:8px"],
:is(.page-content, .main-content) [style*="font-size: 8px"],
:is(.page-content, .main-content) [style*="font-size:9px"],
:is(.page-content, .main-content) [style*="font-size: 9px"],
:is(.page-content, .main-content) [style*="font-size:10px"],
:is(.page-content, .main-content) [style*="font-size: 10px"],
:is(.page-content, .main-content) [style*="font-size:11px"],
:is(.page-content, .main-content) [style*="font-size: 11px"],
:is(.page-content, .main-content) [style*="font-size:12px"],
:is(.page-content, .main-content) [style*="font-size: 12px"] {
    font-size: 13px !important;
}


/*
|--------------------------------------------------------------------------
| SYSTEM READABILITY SCALE
|--------------------------------------------------------------------------
| Dashboard-sized typography applied across the management screens.
*/

:is(.page-content, .main-content) .page-title h1,
:is(.page-content, .main-content) h1 {
    font-size: 31px !important;
    line-height: 1.2 !important;
}

:is(.page-content, .main-content) .page-title p,
:is(.page-content, .main-content) .header-subtitle,
:is(.page-content, .main-content) .section-subtitle {
    font-size: 16px !important;
    line-height: 1.45 !important;
}

:is(.page-content, .main-content) .welcome-label {
    font-size: 14px !important;
    letter-spacing: .7px !important;
}

:is(.page-content, .main-content) .welcome-banner h2 {
    font-size: 31px !important;
    line-height: 1.25 !important;
}

:is(.page-content, .main-content) .welcome-banner p {
    font-size: 15px !important;
    line-height: 1.7 !important;
}

:is(.page-content, .main-content) .card-title h3,
:is(.page-content, .main-content) .table-header h3,
:is(.page-content, .main-content) .filter-title,
:is(.page-content, .main-content) .guide-card strong,
:is(.page-content, .main-content) .report-cover h2,
:is(.page-content, .main-content) .modal-title {
    font-size: 18px !important;
    line-height: 1.25 !important;
}

:is(.page-content, .main-content) .card-title p,
:is(.page-content, .main-content) .view-all,
:is(.page-content, .main-content) .meta,
:is(.page-content, .main-content) .business-meta,
:is(.page-content, .main-content) .member-email,
:is(.page-content, .main-content) .report-meta,
:is(.page-content, .main-content) .description,
:is(.page-content, .main-content) .empty,
:is(.page-content, .main-content) .empty-state,
:is(.page-content, .main-content) .alert,
:is(.page-content, .main-content) .database-error,
:is(.page-content, .main-content) small,
:is(.page-content, .main-content) .help-text,
:is(.page-content, .main-content) .photo-help,
:is(.page-content, .main-content) .selected-photo-name,
:is(.page-content, .main-content) .guide-card span,
:is(.page-content, .main-content) .toggle-info span,
:is(.page-content, .main-content) .menu-group-title {
    font-size: 14px !important;
    line-height: 1.4 !important;
}

:is(.page-content, .main-content) label,
:is(.page-content, .main-content) .form-label,
:is(.page-content, .main-content) input,
:is(.page-content, .main-content) select,
:is(.page-content, .main-content) textarea,
:is(.page-content, .main-content) .form-control,
:is(.page-content, .main-content) .filter-input,
:is(.page-content, .main-content) .filter-select,
:is(.page-content, .main-content) .search-form input,
:is(.page-content, .main-content) button,
:is(.page-content, .main-content) .btn,
:is(.page-content, .main-content) .action-btn,
:is(.page-content, .main-content) .filter-btn,
:is(.page-content, .main-content) .save-button,
:is(.page-content, .main-content) .cancel-button {
    font-size: 15px !important;
}

:is(.page-content, .main-content) table th,
:is(.page-content, .main-content) .members-table th,
:is(.page-content, .main-content) .business-table th,
:is(.page-content, .main-content) .users-table th {
    font-size: 13px !important;
    line-height: 1.35 !important;
}

:is(.page-content, .main-content) table td,
:is(.page-content, .main-content) .members-table td,
:is(.page-content, .main-content) .business-table td,
:is(.page-content, .main-content) .users-table td {
    font-size: 14px !important;
    line-height: 1.45 !important;
}

:is(.page-content, .main-content) .stat-title,
:is(.page-content, .main-content) .stat-description,
:is(.page-content, .main-content) .stat-card span,
:is(.page-content, .main-content) .mini-stat span,
:is(.page-content, .main-content) .detail span {
    font-size: 14px !important;
    line-height: 1.45 !important;
}

:is(.page-content, .main-content) .stat-value,
:is(.page-content, .main-content) .stat-card strong {
    font-size: 34px !important;
    line-height: 1.1 !important;
}

:is(.page-content, .main-content) .stat-card {
    min-width: 0 !important;
}

:is(.page-content, .main-content) .stat-card > div:last-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

:is(.page-content, .main-content) .finance-stat-amount {
    display: block !important;
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    font-size: clamp(26px, 1.85vw, 32px) !important;
    line-height: 1.08 !important;
}

:is(.page-content, .main-content) .finance-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)) !important;
    align-items: stretch !important;
}

:is(.page-content, .main-content) .finance-stats-grid .stat-card {
    min-height: 144px !important;
    align-items: center !important;
    padding: 22px !important;
}

:is(.page-content, .main-content) .finance-stats-grid .stat-card > div:last-child {
    overflow: visible !important;
}

:is(.page-content, .main-content) .finance-stats-grid .stat-icon {
    width: 50px !important;
    height: 50px !important;
    flex-basis: 50px !important;
}

:is(.page-content, .main-content) .mini-stat strong {
    font-size: 22px !important;
    line-height: 1.15 !important;
}

:is(.page-content, .main-content) .member-avatar,
:is(.page-content, .main-content) .stat-icon,
:is(.page-content, .main-content) .card-title-icon {
    font-size: 14px !important;
}

:is(.page-content, .main-content) .stat-icon,
:is(.page-content, .main-content) .quick-action i {
    font-size: 21px !important;
}

:is(.page-content, .main-content) .member-name,
:is(.page-content, .main-content) .member-name strong,
:is(.page-content, .main-content) .business-name,
:is(.page-content, .main-content) .business-name strong,
:is(.page-content, .main-content) .category-name,
:is(.page-content, .main-content) .region-name,
:is(.page-content, .main-content) .user-name,
:is(.page-content, .main-content) .user-name strong,
:is(.page-content, .main-content) .location-name,
:is(.page-content, .main-content) .report-title,
:is(.page-content, .main-content) .report-amount,
:is(.page-content, .main-content) .detail-value,
:is(.page-content, .main-content) .quick-title,
:is(.page-content, .main-content) .quick-action span {
    font-size: 14px !important;
    line-height: 1.35 !important;
}

:is(.page-content, .main-content) .member-name span,
:is(.page-content, .main-content) .business-name span,
:is(.page-content, .main-content) .user-username,
:is(.page-content, .main-content) .region-count,
:is(.page-content, .main-content) .region-description,
:is(.page-content, .main-content) .detail-label,
:is(.page-content, .main-content) .expiry-label,
:is(.page-content, .main-content) .bar-label,
:is(.page-content, .main-content) .bar-value {
    font-size: 13px !important;
    line-height: 1.35 !important;
}

:is(.page-content, .main-content) .member-id,
:is(.page-content, .main-content) .status,
:is(.page-content, .main-content) .badge,
:is(.page-content, .main-content) .member-badge,
:is(.page-content, .main-content) .count-badge,
:is(.page-content, .main-content) .member-count,
:is(.page-content, .main-content) .results-count,
:is(.page-content, .main-content) .guide-chip,
:is(.page-content, .main-content) .region-badge,
:is(.page-content, .main-content) .status-filter {
    font-size: 13px !important;
    line-height: 1.25 !important;
}

:is(.page-content, .main-content) [style*="font-size:7px"],
:is(.page-content, .main-content) [style*="font-size: 7px"],
:is(.page-content, .main-content) [style*="font-size:8px"],
:is(.page-content, .main-content) [style*="font-size: 8px"],
:is(.page-content, .main-content) [style*="font-size:9px"],
:is(.page-content, .main-content) [style*="font-size: 9px"],
:is(.page-content, .main-content) [style*="font-size:10px"],
:is(.page-content, .main-content) [style*="font-size: 10px"],
:is(.page-content, .main-content) [style*="font-size:11px"],
:is(.page-content, .main-content) [style*="font-size: 11px"],
:is(.page-content, .main-content) [style*="font-size:12px"],
:is(.page-content, .main-content) [style*="font-size: 12px"] {
    font-size: 14px !important;
}


/*
|--------------------------------------------------------------------------
| SYSTEM THEME AND LIVE CONTROLS
|--------------------------------------------------------------------------
| Shared theme surface for every screen that loads sidebar.php.
*/

body.light-theme,
body.ssbiea-light-theme {
    --bg: #f2fbff;
    --card: #ffffff;
    --dark: #05364d;
    --text: #173f51;
    --muted: #628390;
    --border: #d3edf7;
    background: linear-gradient(135deg, #f2fbff, #f7fff0) !important;
    color: var(--text) !important;
}

body.dark-theme,
body.ssbiea-dark-theme {
    --bg: #001d2b;
    --card: #072f43;
    --dark: #f4fbff;
    --text: #d9f4ff;
    --muted: #9cc5d4;
    --border: rgba(255,255,255,.10);
    background: #001d2b !important;
    color: var(--text) !important;
}

body.light-theme :is(.page-content, .main-content),
body.ssbiea-light-theme :is(.page-content, .main-content) {
    background: linear-gradient(135deg, #f2fbff, #f7fff0) !important;
    color: var(--text) !important;
}

body.dark-theme :is(.page-content, .main-content),
body.ssbiea-dark-theme :is(.page-content, .main-content) {
    background: #001d2b !important;
    color: var(--text) !important;
}

body.light-theme :is(
    .dashboard-card,
    .stat-card,
    .table-card,
    .filter-card,
    .guide-card,
    .card,
    .member-card,
    .business-card,
    .region-card,
    .modal-card,
    .modal-content,
    .quick-action,
    .summary-mini,
    .report-cover,
    .detail-card
),
body.ssbiea-light-theme :is(
    .dashboard-card,
    .stat-card,
    .table-card,
    .filter-card,
    .guide-card,
    .card,
    .member-card,
    .business-card,
    .region-card,
    .modal-card,
    .modal-content,
    .quick-action,
    .summary-mini,
    .report-cover,
    .detail-card
) {
    background: #ffffff !important;
    border-color: #d3edf7 !important;
    color: var(--text) !important;
}

body.dark-theme :is(
    .dashboard-card,
    .stat-card,
    .table-card,
    .filter-card,
    .guide-card,
    .card,
    .member-card,
    .business-card,
    .region-card,
    .modal-card,
    .modal-content,
    .quick-action,
    .summary-mini,
    .report-cover,
    .detail-card
),
body.ssbiea-dark-theme :is(
    .dashboard-card,
    .stat-card,
    .table-card,
    .filter-card,
    .guide-card,
    .card,
    .member-card,
    .business-card,
    .region-card,
    .modal-card,
    .modal-content,
    .quick-action,
    .summary-mini,
    .report-cover,
    .detail-card
) {
    background: #072f43 !important;
    border-color: rgba(255,255,255,.10) !important;
    color: var(--text) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.18) !important;
}

body.light-theme :is(table th, .members-table th, .business-table th, .users-table th),
body.ssbiea-light-theme :is(table th, .members-table th, .business-table th, .users-table th) {
    background: #edf9ff !important;
    color: #005d86 !important;
    border-color: #d3edf7 !important;
}

body.dark-theme :is(table th, .members-table th, .business-table th, .users-table th),
body.ssbiea-dark-theme :is(table th, .members-table th, .business-table th, .users-table th) {
    background: #07364c !important;
    color: #b9d0c7 !important;
    border-color: rgba(255,255,255,.08) !important;
}

body.dark-theme :is(table td, .members-table td, .business-table td, .users-table td),
body.ssbiea-dark-theme :is(table td, .members-table td, .business-table td, .users-table td) {
    color: #d9f4ff !important;
    border-color: rgba(255,255,255,.06) !important;
}

body.dark-theme :is(input, select, textarea, .form-control, .filter-input, .filter-select),
body.ssbiea-dark-theme :is(input, select, textarea, .form-control, .filter-input, .filter-select) {
    background: #05364d !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #f4fbff !important;
}

body.light-theme :is(input, select, textarea, .form-control, .filter-input, .filter-select),
body.ssbiea-light-theme :is(input, select, textarea, .form-control, .filter-input, .filter-select) {
    background: #ffffff !important;
    border-color: #d3edf7 !important;
    color: #05364d !important;
}

body.dark-theme :is(.page-title h1, h1, h2, h3, strong, label, .card-title h3),
body.ssbiea-dark-theme :is(.page-title h1, h1, h2, h3, strong, label, .card-title h3) {
    color: #f4fbff !important;
}

body.dark-theme :is(.page-title p, .card-title p, .meta, .member-email, small, .description),
body.ssbiea-dark-theme :is(.page-title p, .card-title p, .meta, .member-email, small, .description) {
    color: #9cc5d4 !important;
}

body.compact-theme :is(.page-content, .main-content) {
    padding-top: 18px !important;
}

@media (min-width: 901px) {
    :is(.page-content, .main-content) > :is(.page-header, .topbar) {
        padding-right: 132px !important;
    }
}

.ssbiea-system-toolbar {
    position: fixed;
    top: 18px;
    right: 32px;
    z-index: 9996;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ssbiea-system-control {
    position: relative;
}

.ssbiea-system-action {
    position: relative;
    width: 52px;
    height: 52px;
    border: 1px solid var(--border, #d3edf7);
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--card, #ffffff);
    color: #005d86;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(20,70,55,.07);
    transition: .2s ease;
}

.ssbiea-system-action:hover,
.ssbiea-system-action.is-open {
    border-color: #05364d;
    color: #005d86;
    transform: translateY(-1px);
}

body.dark-theme .ssbiea-system-action,
body.ssbiea-dark-theme .ssbiea-system-action {
    background: #072f43;
    border-color: rgba(255,255,255,.12);
    color: #98d72a;
}

body.dark-theme .ssbiea-system-action:hover,
body.dark-theme .ssbiea-system-action.is-open,
body.ssbiea-dark-theme .ssbiea-system-action:hover,
body.ssbiea-dark-theme .ssbiea-system-action.is-open {
    border-color: #98d72a;
}

.ssbiea-system-menu,
.ssbiea-notification-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    display: none;
    background: var(--card, #ffffff);
    border: 1px solid var(--border, #d3edf7);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(20,70,55,.16);
    overflow: hidden;
}

.ssbiea-system-menu.show,
.ssbiea-notification-panel.show {
    display: block;
}

.ssbiea-system-menu {
    width: 210px;
    padding: 8px;
}

.ssbiea-system-menu button {
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    background: transparent;
    color: var(--text, #173f51);
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.ssbiea-system-menu button:hover,
.ssbiea-system-menu button.active {
    background: #e8f8ff;
    color: #005d86;
}

body.dark-theme .ssbiea-system-menu,
body.dark-theme .ssbiea-notification-panel,
body.ssbiea-dark-theme .ssbiea-system-menu,
body.ssbiea-dark-theme .ssbiea-notification-panel {
    background: #072f43;
    border-color: rgba(255,255,255,.12);
    box-shadow: 0 22px 55px rgba(0,0,0,.35);
}

body.dark-theme .ssbiea-system-menu button,
body.ssbiea-dark-theme .ssbiea-system-menu button {
    color: #d9f4ff;
}

body.dark-theme .ssbiea-system-menu button:hover,
body.dark-theme .ssbiea-system-menu button.active,
body.ssbiea-dark-theme .ssbiea-system-menu button:hover,
body.ssbiea-dark-theme .ssbiea-system-menu button.active {
    background: #07364c;
    color: #98d72a;
}

.ssbiea-notification-dot {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e85c4a;
    border: 2px solid var(--card, #ffffff);
}

.ssbiea-notification-count {
    position: absolute;
    right: -5px;
    top: -5px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e85c4a;
    color: #ffffff;
    font-size: 11px !important;
    font-weight: 800;
    line-height: 1;
}

.ssbiea-notification-panel {
    width: min(390px, calc(100vw - 28px));
}

.ssbiea-notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border, #d3edf7);
}

.ssbiea-notification-header strong {
    display: block;
    color: var(--dark, #05364d);
    font-size: 18px !important;
}

.ssbiea-notification-header span {
    display: block;
    margin-top: 2px;
    color: var(--muted, #628390);
    font-size: 13px !important;
}

.ssbiea-notification-header button {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border, #d3edf7);
    border-radius: 10px;
    background: transparent;
    color: #005d86;
    cursor: pointer;
}

.ssbiea-notification-list {
    max-height: min(440px, calc(100vh - 150px));
    overflow-y: auto;
}

.ssbiea-notification-item {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    padding: 14px 16px;
    color: var(--text, #173f51);
    text-decoration: none;
    border-bottom: 1px solid rgba(223,234,229,.72);
}

.ssbiea-notification-item:hover {
    background: rgba(0,174,239,.06);
}

.ssbiea-notification-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e8f8ff;
    color: #005d86;
}

.ssbiea-notification-item.is-urgent .ssbiea-notification-icon {
    background: #fff1f1;
    color: #d64545;
}

.ssbiea-notification-item strong {
    display: block;
    color: var(--dark, #05364d);
    font-size: 14px !important;
    line-height: 1.3;
}

.ssbiea-notification-item p {
    margin-top: 3px;
    color: var(--text, #173f51);
    font-size: 13px !important;
    line-height: 1.35;
}

.ssbiea-notification-time {
    display: block;
    margin-top: 5px;
    color: var(--muted, #628390);
    font-size: 12px !important;
}

.ssbiea-notification-empty {
    padding: 28px 18px;
    color: var(--muted, #628390);
    text-align: center;
    font-size: 14px !important;
}

body.dark-theme .ssbiea-notification-item,
body.ssbiea-dark-theme .ssbiea-notification-item {
    border-color: rgba(255,255,255,.07);
}

body.dark-theme .ssbiea-notification-item:hover,
body.ssbiea-dark-theme .ssbiea-notification-item:hover {
    background: rgba(152,215,42,.08);
}

@media (max-width: 900px) {
    .ssbiea-system-toolbar {
        top: 14px;
        right: 14px;
        z-index: 9997;
    }

    .ssbiea-system-action {
        width: 44px;
        height: 44px;
        border-radius: 13px;
    }
}

/*
|--------------------------------------------------------------------------
| SYSTEM RESPONSIVENESS
|--------------------------------------------------------------------------
| Shared layout adjustments for laptops, tablets, phones and small screens.
*/

img,
video,
canvas {
    max-width: 100%;
}

.page-content,
.main-content {
    max-width: 100%;
}

.table-container,
.table-wrap,
.table-wrapper {
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

.table-container table,
.table-wrap table,
.table-wrapper table {
    width: 100%;
}

@media (max-width: 1280px) {

    .page-content,
    .main-content {
        padding: 24px !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .layout,
    .section-grid,
    .dashboard-grid,
    .content-grid,
    .report-grid {
        grid-template-columns: 1fr !important;
    }

    .filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .filter-grid .search-box,
    .filter-grid .filter-input:first-child {
        grid-column: 1 / -1;
    }

}

@media (max-width: 900px) {

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .page-content,
    .main-content {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 72px 18px 22px !important;
    }

    .app {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .page-header,
    .topbar,
    .filter-top,
    .table-header,
    .guide-card {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    .page-title,
    .topbar-left,
    .topbar-right,
    .header-actions,
    .search-form,
    .filters,
    .bulk-bar,
    .form-actions,
    .footer-buttons,
    .modal-actions {
        width: 100% !important;
        flex-wrap: wrap !important;
    }

    .header-actions,
    .search-form,
    .filters,
    .bulk-bar,
    .form-actions,
    .footer-buttons,
    .modal-actions {
        display: flex !important;
        align-items: stretch !important;
    }

    .stats-grid,
    .filter-grid,
    .form-grid,
    .details-grid,
    .layout,
    .section-grid,
    .grid,
    .regions-grid,
    .business-grid,
    .cards-grid {
        grid-template-columns: 1fr !important;
    }

    .filter-grid .search-box,
    .filter-grid .filter-input:first-child,
    .form-group.full,
    .wide {
        grid-column: auto !important;
    }

    .page-content input,
    .page-content select,
    .page-content textarea,
    .page-content .form-control,
    .page-content .filter-input,
    .page-content .filter-select,
    .page-content .search-form input,
    .page-content .filters .form-control {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
    }

    .page-header .btn,
    .page-header .action-btn,
    .search-form .btn,
    .filter-btn,
    .bulk-btn,
    .save-button,
    .cancel-button,
    .generate-btn {
        width: 100% !important;
        justify-content: center !important;
        min-height: 44px !important;
    }

    .table-container table,
    .table-wrap table,
    .table-wrapper table {
        min-width: 720px !important;
    }

    .member-card,
    .business-card,
    .region-card,
    .stat-card,
    .card,
    .table-card,
    .filter-card {
        max-width: 100% !important;
    }

    .modal-card,
    .modal-content {
        width: calc(100vw - 28px) !important;
        max-width: calc(100vw - 28px) !important;
        max-height: calc(100vh - 28px) !important;
        overflow-y: auto !important;
    }

    body:not(.exporting) > .toolbar {
        position: fixed !important;
        top: 10px !important;
        left: 10px !important;
        right: 10px !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        z-index: 9997 !important;
    }

    body:not(.exporting) > .toolbar .btn {
        min-height: 40px !important;
        flex: 1 1 130px;
        justify-content: center !important;
    }

    body:not(.exporting) .sheet {
        width: 100% !important;
        gap: 14px !important;
        padding-top: 48px;
    }

    body:not(.exporting) .certificate {
        width: 100% !important;
        max-width: 100% !important;
    }

    .login-wrapper .visual-content h1 {
        font-size: 36px !important;
    }

}

@media (max-width: 650px) {

    body {
        font-size: 15px !important;
    }

    .page-content,
    .main-content {
        padding: 68px 12px 18px !important;
    }

    .page-content h1,
    .main-content h1 {
        font-size: 26px !important;
        line-height: 1.18 !important;
    }

    .page-content h2,
    .page-content h3,
    .main-content h2,
    .main-content h3 {
        font-size: 17px !important;
    }

    .login-wrapper .visual-content h1 {
        font-size: 31px !important;
    }

    .login-wrapper .welcome h2 {
        font-size: 27px !important;
    }

    .page-content .welcome-banner h2,
    .main-content .welcome-banner h2 {
        font-size: 27px !important;
    }

    .page-content .stat-value,
    .main-content .stat-value,
    .page-content .stat-card strong,
    .main-content .stat-card strong {
        font-size: 29px !important;
    }

    .page-title {
        align-items: flex-start !important;
    }

    .page-title-icon {
        width: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
        flex: 0 0 46px !important;
    }

    .stats-grid {
        gap: 10px !important;
    }

    .stat-card,
    .filter-card,
    .table-card,
    .card,
    .guide-card {
        border-radius: 12px !important;
    }

    .stat-card,
    .card-body,
    .filter-card,
    .guide-card {
        padding: 14px !important;
    }

    .table-container table,
    .table-wrap table,
    .table-wrapper table {
        min-width: 640px !important;
    }

    .page-content table th,
    .page-content table td,
    .main-content table th,
    .main-content table td {
        padding: 10px 11px !important;
    }

    .id-card {
        width: min(86mm, calc(100vw - 24px)) !important;
    }

    body:not(.exporting) .certificate {
        border-width: 6px !important;
        padding: 10px !important;
    }

    body:not(.exporting) .certificate .inner {
        padding: 22px 18px !important;
    }

    body:not(.exporting) .certificate .title {
        font-size: 30px !important;
    }

    body:not(.exporting) .certificate .member-name {
        font-size: 28px !important;
    }

    body:not(.exporting) .certificate .body-text {
        font-size: 12px !important;
        line-height: 1.6 !important;
    }

    body:not(.exporting) .certificate .details {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin-top: 20px !important;
    }

}

@media (max-width: 420px) {

    .page-content,
    .main-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .page-content h1,
    .main-content h1 {
        font-size: 24px !important;
    }

    .login-wrapper .visual-content h1 {
        font-size: 27px !important;
    }

    .login-wrapper .welcome h2 {
        font-size: 25px !important;
    }

    .page-content .welcome-banner h2,
    .main-content .welcome-banner h2 {
        font-size: 24px !important;
    }

    .page-content .welcome-banner p,
    .main-content .welcome-banner p,
    .page-content .stat-title,
    .main-content .stat-title,
    .page-content .stat-description,
    .main-content .stat-description {
        font-size: 13px !important;
    }

    .page-title {
        gap: 10px !important;
    }

    .table-container table,
    .table-wrap table,
    .table-wrapper table {
        min-width: 580px !important;
    }

    .stat-card {
        gap: 10px !important;
    }

    .page-content .stat-card strong,
    .main-content .stat-card strong,
    .page-content .stat-value,
    .main-content .stat-value {
        font-size: 22px !important;
    }

    .guide-copy {
        align-items: flex-start !important;
    }

    body:not(.exporting) > .toolbar .btn {
        flex-basis: 100%;
    }

}

@media (min-width: 1600px) {

    .page-content,
    .main-content {
        padding-left: 38px !important;
        padding-right: 38px !important;
    }

}


/*
|--------------------------------------------------------------------------
| LOGO PALETTE
|--------------------------------------------------------------------------
| System-wide color palette pulled from the SSBIEA logo.
*/

:root,
body,
body.light-theme,
body.ssbiea-light-theme {
    --logo-cyan: #00aeef !important;
    --logo-blue: #005d86 !important;
    --logo-navy: #003a55 !important;
    --logo-lime: #98d72a !important;
    --primary: #00aeef !important;
    --primary-dark: #005d86 !important;
    --secondary: #98d72a !important;
    --gold: #98d72a !important;
    --dark: #05364d !important;
    --text: #173f51 !important;
    --muted: #628390 !important;
    --border: #d3edf7 !important;
    --light: #effbff !important;
    --bg: #f2fbff !important;
    --card: #ffffff !important;
}

body.dark-theme,
body.ssbiea-dark-theme {
    --bg: #001d2b !important;
    --card: #072f43 !important;
    --dark: #f4fbff !important;
    --text: #d9f4ff !important;
    --muted: #9cc5d4 !important;
    --border: rgba(0,174,239,.20) !important;
}

body.light-theme,
body.ssbiea-light-theme,
body.light-theme :is(.page-content, .main-content),
body.ssbiea-light-theme :is(.page-content, .main-content),
body:not(.dark-theme):not(.ssbiea-dark-theme) {
    background:
        linear-gradient(
            135deg,
            #f2fbff 0%,
            #f7fff0 100%
        ) !important;
}

body.dark-theme,
body.ssbiea-dark-theme,
body.dark-theme :is(.page-content, .main-content),
body.ssbiea-dark-theme :is(.page-content, .main-content) {
    background: #001d2b !important;
}

:is(.page-content, .main-content) :is(
    .page-title-icon,
    .form-card-header-icon,
    .card-title-icon,
    .report-title-icon,
    .guide-icon,
    .section-icon,
    .modal-icon,
    .brand-mark
),
:is(.page-content, .main-content) .stat-icon.green,
:is(.page-content, .main-content) .green:not(.badge):not(.status) {
    background:
        linear-gradient(
            135deg,
            #00aeef,
            #005d86
        ) !important;
    color: #ffffff !important;
}

:is(.page-content, .main-content) :is(
    .btn-primary,
    .save-button,
    .filter-btn:not(.muted),
    .login-button,
    .generate-btn,
    .upload-button,
    .browse-photo-btn,
    .quick-btn:hover
),
:is(.page-content, .main-content) button[type="submit"]:not(.icon-btn),
.login-wrapper .login-button {
    background:
        linear-gradient(
            135deg,
            #00aeef,
            #005d86
        ) !important;
    color: #ffffff !important;
    border-color: #00aeef !important;
    box-shadow: 0 12px 26px rgba(0,93,134,.20) !important;
}

:is(.page-content, .main-content) :is(
    .action-btn,
    .btn-report,
    .download,
    .btn.download
) {
    background: #003a55 !important;
    color: #ffffff !important;
    border-color: #003a55 !important;
}

:is(.page-content, .main-content) :is(
    .action-btn i,
    .btn-report i,
    .download i,
    .btn.download i
) {
    color: #98d72a !important;
}

:is(.page-content, .main-content) :is(
    a,
    .view-all,
    .member-id,
    .region-badge,
    .badge,
    .status,
    .count-badge,
    .guide-chip,
    .report-title-icon i,
    .filter-title i,
    .table-header i
) {
    color: #005d86 !important;
}

:is(.page-content, .main-content) :is(
    .member-id,
    .region-badge,
    .badge,
    .status,
    .count-badge,
    .guide-chip,
    .quick-action,
    .summary-mini,
    .detail-card
) {
    background: #e8f8ff !important;
    border-color: #bfe8f7 !important;
}

:is(.page-content, .main-content) :is(
    .badge-active,
    .status-active,
    .active,
    .member-status.active
) {
    background: #eefbdc !important;
    color: #4d8f00 !important;
}

:is(.page-content, .main-content) :is(
    .badge-inactive,
    .status-inactive,
    .inactive,
    .alert-error,
    .alert-danger,
    .database-error
) {
    background: #fff1f1 !important;
    color: #d64545 !important;
    border-color: #ffd0d0 !important;
}

:is(.page-content, .main-content) :is(
    .badge-admin,
    .badge-accountant,
    .badge-officer,
    .badge-member,
    .badge-welfare,
    .badge-annual
) {
    background: #e8f8ff !important;
    color: #005d86 !important;
}

:is(.page-content, .main-content) :is(
    input:focus,
    select:focus,
    textarea:focus,
    .form-control:focus,
    .filter-input:focus,
    .filter-select:focus
) {
    border-color: #00aeef !important;
    box-shadow: 0 0 0 4px rgba(0,174,239,.12) !important;
}

:is(.page-content, .main-content) :is(
    .welcome-banner,
    .welcome,
    .hero-card,
    .report-cover
) {
    border-color: #bfe8f7 !important;
}

:is(.page-content, .main-content) .welcome-banner {
    background:
        linear-gradient(
            135deg,
            #005d86 0%,
            #00aeef 100%
        ) !important;
}

:is(.page-content, .main-content) .welcome-label,
:is(.page-content, .main-content) .report-cover strong {
    color: #98d72a !important;
}

:is(.page-content, .main-content) table th {
    background: #edf9ff !important;
    color: #005d86 !important;
    border-color: #d3edf7 !important;
}

:is(.page-content, .main-content) table td {
    border-color: #e2f2f7 !important;
}

.ssbiea-system-action {
    color: #005d86 !important;
    border-color: #c7e8f4 !important;
}

.ssbiea-system-action:hover,
.ssbiea-system-action.is-open {
    border-color: #00aeef !important;
    color: #00aeef !important;
}

.ssbiea-system-menu button:hover,
.ssbiea-system-menu button.active {
    background: #e8f8ff !important;
    color: #005d86 !important;
}

.ssbiea-notification-header button,
.ssbiea-notification-icon {
    color: #005d86 !important;
}

.ssbiea-notification-icon {
    background: #e8f8ff !important;
}

.ssbiea-notification-item:hover {
    background: rgba(0,174,239,.07) !important;
}

body.dark-theme .ssbiea-system-action,
body.ssbiea-dark-theme .ssbiea-system-action,
body.dark-theme .ssbiea-system-menu,
body.dark-theme .ssbiea-notification-panel,
body.ssbiea-dark-theme .ssbiea-system-menu,
body.ssbiea-dark-theme .ssbiea-notification-panel {
    background: #072f43 !important;
    border-color: rgba(0,174,239,.22) !important;
}

body.dark-theme :is(.ssbiea-system-action, .ssbiea-system-menu button:hover, .ssbiea-system-menu button.active),
body.ssbiea-dark-theme :is(.ssbiea-system-action, .ssbiea-system-menu button:hover, .ssbiea-system-menu button.active) {
    color: #98d72a !important;
}