/* ============================================================
   CSPNG Design System
   Restrained, modern, professional. White surfaces, hairline
   borders, soft shadows; deep green used as an accent only.
   ============================================================ */

:root {
    /* Brand — used sparingly (primary actions, active states) */
    --brand-900: #0A3D24;
    --brand-800: #1A5C3E;
    --brand-700: #2D7A52;
    --brand-600: #3A8F64;
    --brand-500: #4FA67B;
    --brand-100: #DCF0E5;
    --brand-50:  #EAF4EE;

    /* Neutrals */
    --ink-900: #131815;
    --ink-700: #2E3531;
    --ink-600: #454D48;
    --ink-500: #647069;
    --ink-400: #8A948E;
    --ink-300: #C3CAC5;
    --ink-200: #E3E7E4;
    --ink-100: #EFF1EF;
    --surface: #FFFFFF;
    --canvas:  #F7F8F7;

    /* Semantic */
    --success: #2D8657;
    --info:    #2563EB;
    --warning: #C99333;
    --danger:  #DC2626;

    /* Elevation — barely there */
    --shadow-xs: 0 1px 2px rgba(19, 24, 21, .05);
    --shadow-sm: 0 1px 3px rgba(19, 24, 21, .06), 0 1px 2px rgba(19, 24, 21, .04);
    --shadow-md: 0 4px 12px rgba(19, 24, 21, .08), 0 1px 3px rgba(19, 24, 21, .05);
    --shadow-lg: 0 16px 40px rgba(19, 24, 21, .12);

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;

    /* Layout */
    --sidebar-width: 256px;
    --topbar-height: 60px;

    /* Typography */
    --font-sans: 'Inter', -apple-system, 'Segoe UI', 'Roboto', sans-serif;

    /* MDB overrides */
    --mdb-primary: #0E7C4A;
    --mdb-secondary: #647069;
    --mdb-success: #0E7C4A;
    --mdb-info: #2563EB;
    --mdb-warning: #B45309;
    --mdb-danger: #DC2626;
    --mdb-body-bg: var(--canvas);
    --mdb-body-color: var(--ink-900);
    --mdb-font-sans-serif: var(--font-sans);
    --mdb-border-radius: var(--radius-sm);
    --mdb-box-shadow: var(--shadow-sm);
}

/* ---------- Base ---------- */

body {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.55;
    background-color: var(--canvas);
    color: var(--ink-900);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { background: var(--brand-100); }

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: 8px; border: 2px solid var(--canvas); }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }

h1, h2, h3, h4, h5, h6 {
    color: var(--ink-900);
    letter-spacing: -0.02em;
    font-weight: 700;
}

a { color: var(--brand-700); text-decoration: none; }
a:hover { color: var(--brand-800); }

.text-muted { color: var(--ink-500) !important; }

/* ---------- Sidebar (light, quiet) ---------- */

.sidebar {
    background: var(--surface);
    border-right: 1px solid var(--ink-200);
    min-height: 100vh;
    position: relative;
    z-index: 100;
    /* Width is controlled by the grid classes (col-md-3 col-lg-2);
       a fixed width here would exceed the row and wrap the content below. */
}

.sidebar .position-sticky { top: 0; }

.sidebar-logo { padding: .35rem .5rem 0; }

.sidebar-logo a {
    padding: .5rem .6rem;
    border-radius: var(--radius-md);
    transition: background .12s ease;
}

.sidebar-logo a:hover { background: var(--ink-100); }

.sidebar-logo .brand-name { color: var(--ink-900); }
.sidebar-logo .brand-sub { color: var(--ink-400); }

.sidebar .sidebar-heading span {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-400);
}

.sidebar .nav { padding: 0 .75rem 2rem; }

.sidebar .nav-link {
    color: var(--ink-600);
    border-radius: var(--radius-sm);
    padding: .45rem .65rem;
    margin-bottom: 1px;
    font-size: .875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    transition: background .12s ease, color .12s ease;
}

.sidebar .nav-link .material-icons {
    font-size: 19px;
    color: var(--ink-400);
    margin-right: .6rem;
    transition: color .12s ease;
}

.sidebar .nav-link:hover {
    background: var(--ink-100);
    color: var(--ink-900);
}

.sidebar .nav-link:hover .material-icons { color: var(--ink-600); }

.sidebar .nav-link.active {
    background: var(--brand-50);
    color: var(--brand-800);
    font-weight: 600;
}

.sidebar .nav-link.active .material-icons { color: var(--brand-700); }

/* Color-coded nav icons for quick visual reference.
   Workflow items match the stage colors used in stage buttons/sections. */
.sidebar .material-icons.ic-dashboard  { color: #2563EB !important; }
.sidebar .material-icons.ic-societies  { color: #0E7C4A !important; }
.sidebar .material-icons.ic-members    { color: #7C3AED !important; }
.sidebar .material-icons.ic-new        { color: #D97706 !important; }
.sidebar .material-icons.ic-ready      { color: #1D4ED8 !important; }
.sidebar .material-icons.ic-assessed   { color: #0D9488 !important; }
.sidebar .material-icons.ic-returned   { color: #C2410C !important; }
.sidebar .material-icons.ic-reverted   { color: #0369A1 !important; }
.sidebar .material-icons.ic-reviewed   { color: #6D28D9 !important; }
.sidebar .material-icons.ic-renewals   { color: #0891B2 !important; }
.sidebar .material-icons.ic-documents  { color: #B45309 !important; }
.sidebar .material-icons.ic-compliance { color: #B91C1C !important; }
.sidebar .material-icons.ic-financial  { color: #0F766E !important; }
.sidebar .material-icons.ic-users      { color: #475569 !important; }
.sidebar .material-icons.ic-settings   { color: #64748B !important; }
.sidebar .material-icons.ic-reports    { color: #DB2777 !important; }

/* ---------- Top navbar ---------- */

.app-topbar {
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--ink-200);
    min-height: var(--topbar-height);
    position: sticky;
    top: 0;
    z-index: 1020;
}

/* Brand block in the top bar */
.topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .35rem .6rem;
    margin-right: 1rem;
    border-radius: var(--radius-md);
    transition: background .12s ease;
}

.topbar-brand:hover { background: var(--ink-100); }

.topbar-brand-logo { height: 34px; }

.topbar-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.topbar-brand-mark .material-icons { font-size: 19px; color: var(--brand-700); }

.topbar-brand-text { display: flex; flex-direction: column; line-height: 1.15; }

.topbar-brand-name {
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink-900);
    letter-spacing: -0.01em;
}

.topbar-brand-sub {
    font-size: .68rem;
    color: var(--ink-400);
}

.app-topbar .nav-link {
    color: var(--ink-600);
    font-weight: 500;
    font-size: .875rem;
    border-radius: var(--radius-sm);
    padding: .4rem .65rem;
    transition: background .12s ease, color .12s ease;
}

.app-topbar .nav-link:hover,
.app-topbar .nav-link:focus {
    background: var(--ink-100);
    color: var(--ink-900);
}

.app-topbar .dropdown-menu {
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: .35rem;
}

.app-topbar .dropdown-item {
    border-radius: var(--radius-sm);
    padding: .45rem .65rem;
    font-size: .875rem;
    color: var(--ink-700);
}

.app-topbar .dropdown-item:hover { background: var(--ink-100); color: var(--ink-900); }
.app-topbar .dropdown-item .material-icons { font-size: 18px; color: var(--ink-400); }
.app-topbar .dropdown-item:hover .material-icons { color: var(--ink-600); }

.topbar-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--brand-700);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 600;
}

/* Role badge */
.role-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: .22rem .6rem;
    border-radius: 999px;
    background: var(--brand-50);
    color: var(--brand-800);
    border: 1px solid var(--brand-100);
}

/* ---------- Page header ---------- */

.page-header-bar {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--ink-200);
}

.page-header-bar h1 { font-weight: 700; font-size: 1.35rem; }

/* Per-page title strip (used across 100+ templates) — slim band,
   title and subtitle on one line */
.page-title-wrapper {
    background: var(--surface);
    border: 1px solid var(--ink-200);
    border-left: 3px solid var(--brand-600);
    border-radius: var(--radius-md);
    padding: 10px 16px;
    margin-bottom: 16px;
    box-shadow: none;
}

.page-title-icon {
    width: 36px;
    height: 36px;
    background: var(--brand-50) !important;
    color: var(--brand-700) !important;
    border: 1px solid var(--brand-100);
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.page-title-icon .material-icons {
    color: var(--brand-700) !important;
    font-size: 20px;
}

.page-title-content {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    flex-wrap: wrap;
    min-width: 0;
}

.page-title-content h1 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink-900);
    margin: 0;
    line-height: 1.3;
}

.page-title-content p {
    font-size: .8rem;
    color: var(--ink-500);
    margin: 0;
}

/* ---------- Cards ---------- */

.card,
.material-card,
.material-stats-card,
.stat-card {
    background: var(--surface);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.card:hover { box-shadow: var(--shadow-xs); transform: none; }

.material-stats-card, .stat-card { padding: 15px 18px; }

.material-card-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--ink-100);
    background: var(--canvas);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    font-weight: 600;
}

.material-card-body { padding: 20px; }

/* ---------- Dashboard widgets ---------- */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.stat-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

/* Flat soft-tint icon tiles — no gradients */
.stat-icon,
.material-stats-card .rounded-circle {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: var(--ink-100) !important;
    color: var(--ink-600) !important;
}

.stat-icon .material-icons { font-size: 22px; }

.stat-icon.primary, .stat-icon.success {
    background: var(--brand-50) !important;
    color: var(--brand-700) !important;
}

.stat-icon.primary .material-icons, .stat-icon.success .material-icons { color: var(--brand-700); }

.stat-icon.info {
    background: #EAF0FE !important;
    color: var(--info) !important;
}

.stat-icon.info .material-icons { color: var(--info); }

.stat-icon.warning {
    background: #FBF0E2 !important;
    color: var(--warning) !important;
}

.stat-icon.warning .material-icons { color: var(--warning); }

.stat-value {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--ink-900);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.stat-label {
    color: var(--ink-500);
    font-size: .82rem;
    font-weight: 500;
}

.stat-change {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .76rem;
    font-weight: 500;
    color: var(--ink-500);
}

.stat-change.positive { color: var(--success); }
.stat-change.negative { color: var(--danger); }

.content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}

.content-grid .card { padding: 20px; }

.card-title {
    font-size: .95rem;
    font-weight: 600;
    margin-bottom: 14px;
    color: var(--ink-900);
}

@media (max-width: 1024px) {
    .content-grid { grid-template-columns: 1fr; }
}

/* ---------- Buttons ---------- */

.btn {
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: .875rem;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.btn:active { transform: none; }

.btn-primary {
    background-color: var(--brand-600);
    border-color: var(--brand-600);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--brand-700);
    border-color: var(--brand-700);
    box-shadow: none;
}

.btn-outline-primary {
    color: var(--brand-700);
    border-color: var(--ink-300);
    background: var(--surface);
}

.btn-outline-primary:hover {
    background: var(--brand-50);
    color: var(--brand-800);
    border-color: var(--brand-100);
}

.btn-secondary {
    background: #5A655F;
    border-color: #5A655F;
    color: #fff;
}

.btn-secondary:hover {
    background: #454D48;
    border-color: #454D48;
    color: #fff;
}

.btn-outline-secondary {
    background: var(--surface);
    border-color: var(--ink-300);
    color: var(--ink-700);
}

.btn-outline-secondary:hover {
    background: var(--ink-100);
    color: var(--ink-900);
    border-color: var(--ink-300);
}

.btn-success { background-color: var(--success); border-color: var(--success); }
.btn-success:hover { background-color: var(--brand-700); border-color: var(--brand-700); }
.btn-warning { background-color: var(--warning); border-color: var(--warning); color: #fff; }
.btn-warning:hover { background-color: #A87822; border-color: #A87822; color: #fff; }
.btn-danger  { background-color: var(--danger);  border-color: var(--danger); }
.btn-danger:hover { background-color: #B91C1C; border-color: #B91C1C; }
.btn-info    { background-color: var(--info); border-color: var(--info); color: #fff; }
.btn-info:hover { background-color: #1D4ED8; border-color: #1D4ED8; color: #fff; }
.btn-light   { background: var(--ink-100); border-color: var(--ink-100); color: var(--ink-700); }

/* Semantic text colors (trend labels, status text, icons) */
.text-success { color: var(--success) !important; }
.text-warning { color: #B45309 !important; }
.text-danger  { color: var(--danger) !important; }
.text-info    { color: var(--info) !important; }
.text-primary { color: var(--brand-700) !important; }

/* ---------- Semantic color coding ----------
   Green  = approved / active / go
   Amber  = pending / waiting / in-progress
   Red    = rejected / declined / overdue
   Blue   = info / under review
   Gray   = draft / inactive / archived
   -------------------------------------------- */

.material-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 600;
    padding: .2rem .6rem;
    border-radius: 999px;
    letter-spacing: 0;
}

.material-chip.success { background: var(--brand-50); color: var(--brand-800); }
.material-chip.error, .material-chip.danger { background: #FEF0F0; color: #B91C1C; }
.material-chip.warning { background: #FEF3C7; color: #92400E; }
.material-chip.info    { background: #EAF0FE; color: var(--info); }

/* Status pills — restyle Bootstrap/MDB contextual backgrounds as
   soft-tint pills with strong, readable text colors */
.badge {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0;
    padding: .3em .7em;
}

.badge.bg-success, .badge.text-bg-success,
span.bg-success.badge {
    background-color: #DCF0E5 !important;
    color: #0B5E38 !important;
}

.badge.bg-warning, .badge.text-bg-warning,
span.bg-warning.badge {
    background-color: #FEF3C7 !important;
    color: #92400E !important;
}

.badge.bg-danger, .badge.text-bg-danger,
span.bg-danger.badge {
    background-color: #FEE2E2 !important;
    color: #991B1B !important;
}

.badge.bg-info, .badge.text-bg-info,
span.bg-info.badge {
    background-color: #DBEAFE !important;
    color: #1E40AF !important;
}

.badge.bg-primary, .badge.text-bg-primary,
span.bg-primary.badge {
    background-color: #DCF0E5 !important;
    color: #0B5E38 !important;
}

.badge.bg-secondary, .badge.text-bg-secondary,
span.bg-secondary.badge {
    background-color: #EEF0EE !important;
    color: #5A655F !important;
}

.badge.bg-dark, .badge.text-bg-dark {
    background-color: #2E3531 !important;
    color: #FFFFFF !important;
}

.badge.bg-light, .badge.text-bg-light {
    background-color: #F4F6F4 !important;
    color: #454D48 !important;
    border: 1px solid var(--ink-200);
}

/* ---------- Stat boxes (used across list pages) ---------- */

/* Soft semantic tints for stat cards */
.stat-tint-green { background: #F5FBF7 !important; border-color: #D4E9DC !important; }
.stat-tint-amber { background: #FDFBF6 !important; border-color: #E8DFC8 !important; }
.stat-tint-red   { background: #FBF7F7 !important; border-color: #E8D4D4 !important; }
.stat-tint-blue  { background: #F6F8FC !important; border-color: #D4DCEA !important; }

.stat-tint-green .stat-number { color: #2D8657 !important; }
.stat-tint-amber .stat-number { color: #B8860B !important; }
.stat-tint-red   .stat-number { color: #B84444 !important; }
.stat-tint-blue  .stat-number { color: #3B6AB8 !important; }

/* ---------- Workflow stage navigation ----------
   Each stage has its own color; inactive = tinted outline,
   active = solid fill. */
.stage-nav .btn-stage {
    background: var(--surface);
    border: 1px solid currentColor;
    font-weight: 500;
}

.stage-nav .btn-stage:hover { color: #fff !important; }
.stage-nav .btn-stage.active { color: #fff !important; border-color: transparent; }

/* Colors match the stage icon colors defined in workflow_views.STAGE_CONFIGS */
.stage-nav .btn-stage-new-submissions        { color: #B45309; }
.stage-nav .btn-stage-new-submissions:hover,
.stage-nav .btn-stage-new-submissions.active { background: #F59E0B; }

.stage-nav .btn-stage-ready-for-assessment        { color: #1D4ED8; }
.stage-nav .btn-stage-ready-for-assessment:hover,
.stage-nav .btn-stage-ready-for-assessment.active { background: #3B82F6; }

.stage-nav .btn-stage-assessed        { color: #065F46; }
.stage-nav .btn-stage-assessed:hover,
.stage-nav .btn-stage-assessed.active { background: #10B981; }

.stage-nav .btn-stage-returned-for-correction        { color: #C2410C; }
.stage-nav .btn-stage-returned-for-correction:hover,
.stage-nav .btn-stage-returned-for-correction.active { background: #F97316; }

.stage-nav .btn-stage-reverted        { color: #0369A1; }
.stage-nav .btn-stage-reverted:hover,
.stage-nav .btn-stage-reverted.active { background: #0EA5E9; }

.stage-nav .btn-stage-reviewed-for-approval        { color: #6D28D9; }
.stage-nav .btn-stage-reviewed-for-approval:hover,
.stage-nav .btn-stage-reviewed-for-approval.active { background: #8B5CF6; }

/* Staff workflow dashboard — stage sections get matching accents */
.stage-section { border: 1px solid var(--ink-200); border-left-width: 4px; }
#stage-new-submissions        { border-left-color: #F59E0B; }
#stage-new-submissions .stage-count        { background: #F59E0B !important; }
#stage-ready-for-assessment   { border-left-color: #3B82F6; }
#stage-ready-for-assessment .stage-count   { background: #3B82F6 !important; }
#stage-assessed               { border-left-color: #10B981; }
#stage-assessed .stage-count               { background: #10B981 !important; }
#stage-returned-for-correction { border-left-color: #F97316; }
#stage-returned-for-correction .stage-count { background: #F97316 !important; }
#stage-reverted               { border-left-color: #0EA5E9; }
#stage-reverted .stage-count               { background: #0EA5E9 !important; }
#stage-reviewed-for-approval  { border-left-color: #8B5CF6; }
#stage-reviewed-for-approval .stage-count  { background: #8B5CF6 !important; }

/* Approval / review queue items — clearly delineated */
.approval-queue-item {
    background: var(--surface) !important;
    border: 1px solid var(--ink-500) !important;
    border-left: 4px solid #D97706 !important;
    border-radius: var(--radius-sm) !important;
    padding: 14px 16px !important;
    margin-bottom: 10px;
    transition: border-color .12s ease, background .12s ease;
}

.approval-queue-item:hover {
    background: #FFFBEB !important;
    border-color: var(--ink-700) !important;
    border-left-color: #B45309 !important;
    box-shadow: none !important;
    transform: none !important;
}

.stats-row .stat-box,
.stat-box {
    background: var(--surface);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    text-align: left;
    box-shadow: var(--shadow-xs);
}

.stat-box .stat-number,
.stat-number {
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--brand-700);
    line-height: 1.2;
}

.stat-box .stat-label {
    color: var(--ink-500);
    font-size: .8rem;
    font-weight: 500;
}

/* ---------- Tables ---------- */

.table { color: var(--ink-900); font-size: .875rem; }

.table thead th {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-500);
    border-bottom: 1px solid var(--ink-200);
    background: var(--canvas);
    padding: .6rem .9rem;
    white-space: nowrap;
}

.table tbody td {
    padding: .7rem .9rem;
    border-color: var(--ink-100);
    vertical-align: middle;
}

.table-hover tbody tr:hover { background: var(--canvas); }

.table-responsive { border-radius: var(--radius-sm); }

/* DataTables — modern design-system integration */
.dataTables_wrapper {
    padding-top: 4px;
}

.dataTables_wrapper .dataTables_filter {
    margin-bottom: 8px;
    font-size: .85rem;
    color: var(--ink-600);
}

.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
    padding: .4rem .75rem;
    font-size: .85rem;
    outline: none;
    transition: border-color .12s ease, box-shadow .12s ease;
    min-width: 200px;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--brand-50);
}

.dataTables_wrapper .dataTables_info {
    font-size: .8rem;
    color: var(--ink-500);
    padding-top: 8px;
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 4px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--radius-sm) !important;
    border: 1px solid transparent !important;
    margin: 0 2px;
    font-size: .85rem;
    padding: .3rem .6rem !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--brand-600) !important;
    border-color: var(--brand-600) !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--ink-100) !important;
    border-color: transparent !important;
    color: var(--ink-900) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: transparent !important;
    color: var(--ink-300) !important;
}

/* Table header styling for DataTables */
table.dataTable thead th {
    border-bottom: 2px solid var(--ink-200) !important;
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ink-600);
    padding: 10px 12px !important;
}

table.dataTable tbody td {
    padding: 10px 12px !important;
    font-size: .875rem;
    color: var(--ink-800);
}

table.dataTable.stripe tbody tr.odd {
    background: var(--canvas) !important;
}

table.dataTable.hover tbody tr:hover {
    background: var(--brand-50) !important;
}

/* Sorting icon color */
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after {
    opacity: .4;
    font-size: .7rem;
}

table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:after {
    opacity: 1;
    color: var(--brand-600);
}

/* DataTables Buttons (export) */
.dataTables_wrapper .dt-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dataTables_wrapper .dt-buttons .btn {
    box-shadow: none;
    font-size: .8rem;
    padding: .35rem .7rem;
}

/* The Bootstrap 5 Buttons renderer emits .dt-buttons as a .btn-group, whose
   `flex: 1 1 auto` would stretch each export button across the full row.
   Keep them content-sized, individually rounded, and spaced by the gap above. */
.dataTables_wrapper .dt-buttons.btn-group {
    display: flex;
}

.dataTables_wrapper .dt-buttons.btn-group > .btn {
    flex: 0 0 auto;
    border-radius: var(--radius-sm);
}

.dataTables_wrapper .dt-buttons.btn-group > .btn:not(:first-child) {
    margin-left: 0;
}

/* Row-actions column: shrink to content and keep the buttons on one line.
   The class is applied by the global DataTables initialiser in base.html. */
th.actions-col,
td.actions-col {
    width: 1%;
    white-space: nowrap;
}

td.actions-col .btn + .btn {
    margin-left: 6px;
}

/* Length selector next to buttons */
.dataTables_wrapper .dataTables_length {
    margin: 0;
    font-size: .8rem;
    color: var(--ink-600);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
    padding: .3rem .5rem;
    font-size: .8rem;
    margin: 0;
    outline: none;
}

/* DataTables Bootstrap5 pagination alignment */
.dataTables_wrapper .dataTables_paginate .pagination {
    margin-bottom: 0;
}

/* ---------- Forms ---------- */

.form-label { font-weight: 500; color: var(--ink-700); font-size: .85rem; }

.form-control, .form-select {
    border-radius: var(--radius-sm);
    border-color: var(--ink-200);
    padding: .5rem .75rem;
    font-size: .875rem;
    box-shadow: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.form-control:focus, .form-select:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--brand-50);
}

.form-control-lg { font-size: .95rem; }

.form-outline .form-control:focus ~ .form-label { color: var(--brand-700); }
.form-outline .form-control:focus ~ .form-notch .form-notch-leading,
.form-outline .form-control:focus ~ .form-notch .form-notch-middle,
.form-outline .form-control:focus ~ .form-notch .form-notch-trailing {
    border-color: var(--brand-500);
}

.input-group-text {
    background: var(--canvas);
    border-color: var(--ink-200);
    color: var(--ink-500);
}

.form-check-input:checked {
    background-color: var(--brand-600);
    border-color: var(--brand-600);
}

/* ---------- Alerts ---------- */

.alert {
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    box-shadow: none;
    font-size: .875rem;
}

.alert-success { background: var(--brand-50); color: var(--brand-900); border-color: var(--brand-100); }
.alert-danger, .alert-error { background: #FEF2F2; color: #991B1B; border-color: #FECACA; }
.alert-warning { background: #FFFBEB; color: #92400E; border-color: #FDE68A; }
.alert-info    { background: #EFF6FF; color: #1E40AF; border-color: #BFDBFE; }

/* ---------- Breadcrumbs ---------- */

.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 0;
    font-size: .82rem;
}

.breadcrumb-item a {
    color: var(--ink-500);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.breadcrumb-item a:hover { color: var(--brand-700); }
.breadcrumb-item.active { color: var(--ink-700); font-weight: 500; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--ink-300); }

/* ---------- Onboarding ---------- */

.onboarding-card {
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.5rem;
}

.onboarding-card h5 { font-weight: 600; font-size: .95rem; margin-bottom: 1rem; color: var(--ink-900); }

.onboarding-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

.onboarding-btn {
    border-radius: var(--radius-sm);
    font-weight: 500;
    padding: .6rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    box-shadow: none;
}

@media (max-width: 576px) {
    .onboarding-actions { flex-direction: column; }
    .onboarding-btn { width: 100%; justify-content: center; }
}

/* ---------- Quick actions ---------- */

.quick-actions { display: grid; gap: 8px; }

.quick-action-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    text-align: left;
    cursor: pointer;
    font-weight: 500;
    font-size: .875rem;
    color: var(--ink-700);
    background: var(--surface);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
    transition: border-color .12s ease, background .12s ease;
}

.quick-action-btn .material-icons { color: var(--ink-400); font-size: 20px; transition: color .12s ease; }

.quick-action-btn:hover {
    background: var(--canvas);
    border-color: var(--brand-500);
    color: var(--ink-900);
    transform: none;
}

.quick-action-btn:hover .material-icons { color: var(--brand-700); }

/* ---------- Timeline ---------- */

.timeline-item { border-left: 2px solid var(--ink-100); }
.timeline-item .material-icons { color: var(--brand-600); }

/* ---------- Footer ---------- */

.footer {
    background: var(--surface);
    border-top: 1px solid var(--ink-200);
    color: var(--ink-500);
    font-size: .82rem;
}

.footer a { color: var(--brand-700); }

/* ---------- Auth (login / register) ---------- */

.auth-page {
    min-height: calc(100vh - var(--topbar-height));
    background: var(--canvas);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.auth-brand {
    padding: 2rem 2rem 1.25rem;
    text-align: center;
}

.auth-brand .brand-mark {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    color: var(--brand-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.auth-brand .brand-mark .material-icons { color: var(--brand-700); }

.auth-brand h1 {
    color: var(--ink-900);
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: .2rem;
}

.auth-brand p {
    margin: 0;
    font-size: .84rem;
    color: var(--ink-500);
}

/* Segmented tab control */
.auth-tabs {
    display: flex;
    gap: 4px;
    margin: 0 2rem;
    padding: 4px;
    background: var(--ink-100);
    border-radius: var(--radius-md);
}

.auth-tabs .tab-button {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--ink-500);
    font-weight: 500;
    font-size: .85rem;
    padding: .5rem 1rem;
    border-radius: var(--radius-sm);
    transition: background .12s ease, color .12s ease;
}

.auth-tabs .tab-button:hover { color: var(--ink-900); }

.auth-tabs .tab-button.active {
    background: var(--surface);
    color: var(--ink-900);
    box-shadow: var(--shadow-xs);
    font-weight: 600;
}

.auth-body { padding: 1.5rem 2rem 2rem; }

.auth-footer-note {
    text-align: center;
    margin-top: 1.5rem;
    font-size: .78rem;
    color: var(--ink-400);
}

.auth-footer-note a { color: var(--brand-700); }

/* ---------- Utilities ---------- */

.bg-brand { background: var(--brand-700) !important; }
.text-brand { color: var(--brand-700) !important; }

.shadow-soft { box-shadow: var(--shadow-md) !important; }

/* Main content spacing */
.app-main {
    padding-top: 1.25rem;
    padding-bottom: 5rem;
    min-height: calc(100vh - var(--topbar-height));
}

@media (max-width: 767.98px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: var(--sidebar-width);
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: var(--shadow-lg);
    }
    .sidebar.show { transform: translateX(0); }
    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(19, 24, 21, .4);
        z-index: 99;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }
    .sidebar-backdrop.show { opacity: 1; pointer-events: auto; }
}