/* ============================================================
   NPMSS — Role-based workspace identity
   Header, sidebar and footer are intentionally excluded.
   ============================================================ */

body[data-role="admin"] {
    --role-main: #16834f;
    --role-dark: #0d6039;
    --role-soft: #eaf6ef;
    --role-tint: #f4faf6;
    --role-border: #cfe8d8;
    --role-shadow: rgba(22, 131, 79, .12);
    --role-ink: #174b32;
    --role-icon-bg: #e1f2e8;
}
body[data-role="data_entry"] {
    --role-main: #2478bd;
    --role-dark: #185487;
    --role-soft: #eaf4fc;
    --role-tint: #f4f9fe;
    --role-border: #cfe2f4;
    --role-shadow: rgba(36, 120, 189, .13);
    --role-ink: #194b73;
    --role-icon-bg: #e0effb;
}
body[data-role="manager"] {
    --role-main: #c74747;
    --role-dark: #963333;
    --role-soft: #fff0f0;
    --role-tint: #fff7f7;
    --role-border: #f0d1d1;
    --role-shadow: rgba(199, 71, 71, .12);
    --role-ink: #783232;
    --role-icon-bg: #fbe5e5;
}
body[data-role="validation_approval"] {
    --role-main: #bd8a12;
    --role-dark: #85600a;
    --role-soft: #fff7df;
    --role-tint: #fffcf2;
    --role-border: #efdfad;
    --role-shadow: rgba(189, 138, 18, .14);
    --role-ink: #624b13;
    --role-icon-bg: #fff0bf;
}

/* Soft identity wash in the workspace only */
body[data-role] .content:not(.content-guest) {
    background-color: var(--role-tint, #f2f5f4);
    background-image: radial-gradient(ellipse at 96% 0%, var(--role-soft, transparent) 0, transparent 34%);
    transition: background-color .25s ease;
}

/* Titles and section hierarchy */
body[data-role] .content .page-title,
body[data-role] .content .dashboard-heading,
body[data-role] .content .card h2,
body[data-role] .content .page-header h1,
body[data-role] .content .page-header h2 {
    color: var(--role-dark, #095c47);
}
body[data-role] .content .page-title::after,
body[data-role] .content .dashboard-heading::after {
    background: var(--role-main, #16834f);
}
body[data-role] .content .page-subtitle,
body[data-role] .content .dashboard-subtitle,
body[data-role] .content .page-intro {
    color: #64748b;
}

/* Cards, data widgets and interactive surfaces */
body[data-role] .content .card,
body[data-role] .content .stat-card,
body[data-role] .content .report-card,
body[data-role] .content .filter-card,
body[data-role] .content .dashboard-scope-card {
    border-color: var(--role-border, #dde6e3);
}
body[data-role] .content .card,
body[data-role] .content .stat-card,
body[data-role] .content .report-card {
    box-shadow: 0 4px 18px var(--role-shadow, rgba(20,50,40,.07));
}
body[data-role] .content .stat-card {
    border-top: 3px solid var(--role-main, #16834f);
}
body[data-role] .content .stat-card::before {
    background: var(--role-main, #16834f) !important;
}
body[data-role] .content .dashboard-role {
    color: var(--role-dark, #095c47);
    border-color: var(--role-border, #cfe8d8);
    background: var(--role-soft, #eaf6ef);
    box-shadow: 0 3px 12px var(--role-shadow, rgba(22,131,79,.06));
}
body[data-role] .content .dashboard-scope-card {
    border-color: var(--role-border, #cfe8d8);
    border-inline-start: 4px solid var(--role-main, #16834f);
    background: linear-gradient(110deg, #fff 0%, var(--role-tint, #f4faf6) 100%);
}
body[data-role] .content .dashboard-scope-card::after {
    background: var(--role-shadow, rgba(22,131,79,.08));
}
body[data-role] .content .stat-card .stat-num,
body[data-role] .content .report-stat,
body[data-role] .content .dashboard-scope-value {
    color: var(--role-dark, #095c47);
}
body[data-role] .content .stat-chip,
body[data-role] .content .dashboard-role,
body[data-role] .content .status-pill.role-accent {
    color: var(--role-dark, #095c47);
    background: var(--role-soft, #eaf6ef);
    border-color: var(--role-border, #cfe8d8);
}
body[data-role] .content .dashboard-scope-icon,
body[data-role] .content .dashboard-quick-action > i,
body[data-role] .content .report-card > .bi,
body[data-role] .content .page-heading-row > .bi {
    color: var(--role-main, #16834f);
    background: var(--role-icon-bg, #e1f2e8);
}
body[data-role] .content .dashboard-quick-action:hover,
body[data-role] .content .filter-card:focus-within {
    border-color: var(--role-main, #16834f);
    box-shadow: 0 7px 22px var(--role-shadow, rgba(20,50,40,.07));
}

/* Buttons, links and form focus states */
body[data-role] .content .btn-primary,
body[data-role] .content .filter-apply,
body[data-role] .content .dashboard-quick-action.primary {
    color: #fff;
    border-color: var(--role-main, #16834f);
    background: linear-gradient(135deg, var(--role-main, #16834f), var(--role-dark, #095c47));
}
body[data-role] .content .btn-primary:hover,
body[data-role] .content .filter-apply:hover {
    filter: brightness(.94);
}
body[data-role] .content a:not(.btn):not(.sidebar-link) {
    color: var(--role-dark, #095c47);
}
body[data-role] .content .btn-outline,
body[data-role] .content .filter-reset {
    color: var(--role-dark, #095c47);
    border-color: var(--role-border, #cfe8d8);
}
body[data-role] .content .form-control:focus,
body[data-role] .content input:focus,
body[data-role] .content select:focus,
body[data-role] .content textarea:focus,
body[data-role] .content .dashboard-filter:focus {
    border-color: var(--role-main, #16834f) !important;
    box-shadow: 0 0 0 3px var(--role-shadow, rgba(22,131,79,.12)) !important;
    outline: 0;
}

/* Table headers and contextual accents */
body[data-role] .content .data-table th,
body[data-role] .content table thead th {
    color: var(--role-dark, #095c47);
    background: var(--role-soft, #eaf6ef);
}
body[data-role] .content .data-table tr:hover td {
    background: var(--role-tint, #f4faf6);
}
body[data-role] .content .dashboard-filter-row,
body[data-role] .content .filter-note,
body[data-role] .content .dashboard-note {
    border-color: var(--role-border, #cfe8d8);
    background: var(--role-soft, #eaf6ef);
}

/* Form sections inherit the signed-in role without changing form behavior */
body[data-role] .content .form-page-hero {
    background: linear-gradient(115deg, var(--role-dark, #095c47), var(--role-main, #16834f)) !important;
    box-shadow: 0 12px 28px var(--role-shadow, rgba(22,131,79,.12));
}
body[data-role] .content #supervisionForm .section-head {
    background: linear-gradient(110deg, var(--role-dark, #095c47), var(--role-main, #16834f)) !important;
    border-bottom-color: var(--role-border, #cfe8d8) !important;
}
body[data-role] .content #supervisionForm .q-header-row {
    color: var(--role-dark, #095c47);
    border-right-color: var(--role-main, #16834f);
    background: var(--role-soft, #eaf6ef);
}
body[data-role] .content #supervisionForm .q-num {
    color: var(--role-dark, #095c47);
    background: var(--role-icon-bg, #e1f2e8);
}

/* Accessible keyboard focus; role identity remains visible on touch screens */
body[data-role] .content :focus-visible {
    outline: 2px solid var(--role-main, #16834f);
    outline-offset: 2px;
}

@media (max-width: 700px) {
    body[data-role] .content:not(.content-guest) {
        padding-inline: 12px;
        background-image: linear-gradient(180deg, var(--role-soft, transparent), transparent 190px);
    }
    body[data-role] .content .card,
    body[data-role] .content .stat-card,
    body[data-role] .content .report-card {
        box-shadow: 0 3px 12px var(--role-shadow, rgba(20,50,40,.06));
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-role] .content * { transition-duration: .01ms !important; }
}

/* ============================================================
   Cross-page role identity
   Applies to operational modules, not only dashboard widgets.
   Header, sidebar and footer remain untouched.
   ============================================================ */
body[data-role] .content .users-page,
body[data-role] .content .reports-page,
body[data-role] .content .centers-page,
body[data-role] .content .profile-page,
body[data-role] .content .chat-module,
body[data-role] .content .npm-mail,
body[data-role] .content .submissions-page {
    --module-role-main: var(--role-main, #16834f);
    --module-role-dark: var(--role-dark, #0d6039);
    --module-role-soft: var(--role-soft, #eaf6ef);
    --module-role-border: var(--role-border, #cfe8d8);
}

/* Common page headings and section titles */
body[data-role] .content .users-page .page-title,
body[data-role] .content .reports-page h1,
body[data-role] .content .centers-page .page-title,
body[data-role] .content .profile-page .page-title,
body[data-role] .content .chat-module .page-title,
body[data-role] .content > .page-heading-row .page-title {
    color: var(--role-dark, #0d6039) !important;
}
body[data-role] .content .users-page .page-title::after,
body[data-role] .content .centers-page .page-title::after,
body[data-role] .content .profile-page .page-title::after,
body[data-role] .content .chat-module .page-title::after {
    background: var(--role-main, #16834f) !important;
}

/* Reusable panels across all modules */
body[data-role] .content .section-block,
body[data-role] .content .users-page .card,
body[data-role] .content .centers-page .card,
body[data-role] .content .profile-page .card,
body[data-role] .content .chat-panel,
body[data-role] .content .chat-conversation-panel,
body[data-role] .content .mail-main,
body[data-role] .content .mail-sidebar,
body[data-role] .content .mail-address-card {
    border-color: var(--role-border, #cfe8d8) !important;
}
body[data-role] .content .section-block > .section-head,
body[data-role] .content .users-page .card > h2,
body[data-role] .content .centers-page .card > h2,
body[data-role] .content .profile-page .card > h2,
body[data-role] .content .chat-panel-title,
body[data-role] .content .mail-list-head {
    border-color: var(--role-border, #cfe8d8);
    background-color: var(--role-soft, #eaf6ef);
    color: var(--role-dark, #0d6039);
}

/* Page-specific statistic tiles */
body[data-role] .content .user-stat,
body[data-role] .content .center-stat-card,
body[data-role] .content .report-stat,
body[data-role] .content .mail-summary > *,
body[data-role] .content .profile-intro {
    border-color: var(--role-border, #cfe8d8) !important;
    box-shadow: 0 4px 16px var(--role-shadow, rgba(22,131,79,.09));
}
body[data-role] .content .user-stat-icon,
body[data-role] .content .center-stat-icon,
body[data-role] .content .profile-avatar,
body[data-role] .content .chat-heading-mark {
    color: var(--role-main, #16834f) !important;
    background: var(--role-icon-bg, #e1f2e8) !important;
}
body[data-role] .content .user-stat-value,
body[data-role] .content .center-stat-value,
body[data-role] .content .report-stat .number {
    color: var(--role-dark, #0d6039);
}

/* Forms, inputs and action buttons throughout the application */
body[data-role] .content .btn-primary,
body[data-role] .content button.btn-primary,
body[data-role] .content .filter-apply,
body[data-role] .content .mail-compose-btn,
body[data-role] .content .chat-send-btn,
body[data-role] .content .profile-actions .btn-primary {
    background: linear-gradient(135deg, var(--role-main, #16834f), var(--role-dark, #0d6039)) !important;
    border-color: var(--role-main, #16834f) !important;
    color: #fff !important;
}
body[data-role] .content .btn-outline-primary,
body[data-role] .content .btn-outline,
body[data-role] .content .filter-reset,
body[data-role] .content .chat-tab.active,
body[data-role] .content .mail-folder.active {
    color: var(--role-dark, #0d6039) !important;
    border-color: var(--role-border, #cfe8d8) !important;
    background: var(--role-soft, #eaf6ef) !important;
}
body[data-role] .content input:focus,
body[data-role] .content select:focus,
body[data-role] .content textarea:focus,
body[data-role] .content .form-control:focus {
    border-color: var(--role-main, #16834f) !important;
    box-shadow: 0 0 0 3px var(--role-shadow, rgba(22,131,79,.12)) !important;
}

/* Tables and list module accents */
body[data-role] .content table thead th,
body[data-role] .content .data-table thead th {
    color: var(--role-dark, #0d6039) !important;
    background: var(--role-soft, #eaf6ef) !important;
}
body[data-role] .content .data-table tbody tr:hover td {
    background: var(--role-tint, #f4faf6) !important;
}
body[data-role] .content .users-page a:not(.btn),
body[data-role] .content .centers-page a:not(.btn),
body[data-role] .content .profile-page a:not(.btn),
body[data-role] .content .reports-page a:not(.btn) {
    color: var(--role-dark, #0d6039);
}

/* Chat and internal mail: retain their layout while tinting active controls */
body[data-role] .content .chat-tabs button.active,
body[data-role] .content .chat-contact.active,
body[data-role] .content .mail-folder[aria-current="page"] {
    border-color: var(--role-main, #16834f) !important;
    background: var(--role-soft, #eaf6ef) !important;
    color: var(--role-dark, #0d6039) !important;
}
body[data-role] .content .chat-active-header,
body[data-role] .content .mail-compose-dialog > header {
    border-bottom-color: var(--role-border, #cfe8d8) !important;
}