/* ============================================
   KMCC GLOBAL THEME - Emerald Sapphire
   (Brand chrome (topnav, sidebar, auth pages, icon badges, page-title
   accents) went green -> navy/blue -> Forest & Gold -> Classic Emerald ->
   here: a jewel-tone diagonal that opens on deep emerald, passes through
   teal, and lands on a rich sapphire blue - keeping a foot in the
   original green while moving toward blue. Financial semantics - green
   for positive/paid/active, red for negative/inactive - stayed untouched
   through every pass, since they're data meaning, not brand color.)
   ============================================ */

/* Root Colors
   (original names kept exactly as-is - every rule below already
   references them - new tokens are added alongside for the refreshed
   look rather than replacing anything.) */
:root {
    --green-50:  #f0fdf4;
    --green-100: #d1fadf;
    --green-200: #a7f3d0;
    --green-600: #16a34a;
    --green-700: #198754;
    --green-800: #0f5132;
    --green-900: #064e3b;

    --green-light: #d1fadf;
    --green-border: #a7f3d0;
    --green-dark: #064e3b;
    --green-hover: #f0fdf4;

    --gray-50:  #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e5e7eb;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-800: #1f2937;

    --gray-border: #e5e7eb;
    --gray-light: #f8fafc;
    --gray-dark: #1f2937;

    --blue-primary: #2563eb;
    --amber: #f59e0b;
    --red: #dc2626;

    /* Navy tokens kept - not the brand color anymore, but .mp-stat-card-navy
       and .mp-card-icon-navy are a deliberate "navy" option alongside green/
       red/amber ones elsewhere, unrelated to whichever color the brand
       chrome itself is currently wearing. */
    --navy-900: #0a1e3f;
    --navy-800: #12294f;
    --navy-700: #1e3a5f;
    --navy-600: #2c5282;
    --blue-100: #dbeafe;

    /* Emerald Sapphire brand palette - a three-hue jewel-tone gradient
       (emerald -> teal -> sapphire) used across topnav/sidebar/auth-page
       backgrounds and the icon badges. --teal doubles as the readable
       "on white" accent (links, focus rings, table accents); --sapphire
       is the boldest of the three, used for primary buttons; --emerald
       is the deep anchor color used for dark text on light surfaces.
       --deep-navy is only the sidebar's own darker gradient endpoint. */
    --emerald: #065f46;
    --teal: #0e7490;
    --sapphire: #1d4ed8;
    --deep-navy: #0b2540;
    --emerald-wash: #ecfeff;

    /* Light text/icon color for anything sitting on the brand surfaces
       above - centralized here so every one of those spots stays in sync
       when the brand color changes again. */
    --on-brand: #eafff7;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow-md: 0 6px 16px rgba(15, 23, 42, .08);
    --shadow-lg: 0 16px 40px rgba(15, 23, 42, .14);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;

    --transition-fast: .15s ease;
    --transition-base: .2s ease;

    --font-sans: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

/* A calmer text-selection color than the browser default blue, matching
   the brand - a small, standard polish touch. */
::selection {
    background: var(--emerald-wash);
    color: var(--gray-800);
}

/* Consistent keyboard-focus ring site-wide (previously only .auth-card
   had one) - important for accessibility and for looking "finished". */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.icon-btn:focus-visible {
    outline: 2px solid var(--blue-primary);
    outline-offset: 2px;
}

/* Mandatory-field marker, used app-wide on form labels next to any
   required input - "Field Name *" - so the asterisk reads as a
   distinct required-field cue instead of blending into the label text. */
.required-star {
    color: var(--red);
    font-weight: 600;
}

/* ============================================
   PAGE LAYOUT
   ============================================ */

body {
    background: var(--gray-50);
    font-family: var(--font-sans);
    color: var(--gray-800);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

/* Page Title
   (kept as a flex row so an existing icon element right before the text -
   e.g. <i class="bi bi-speedometer2"></i> - automatically becomes a
   rounded icon badge instead of a plain glyph, no markup changes needed.
   Swapped the old solid banner-with-left-bar for a cleaner icon + title +
   underline treatment, matching the same badge language as .dash-card-header.) */
.page-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 0 10px;
    font-size: 25.5px;
    font-weight: 700;
    color: var(--gray-800);
    background: none;
    border-left: none;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 0;
    margin-bottom: 14px;
}

.page-title i,
.page-title .bi {
    font-size: 20px;
    color: #fff;
    background: linear-gradient(135deg, var(--teal), var(--emerald));
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ============================================
   CARDS
   ============================================ */

.card {
    background: #fff;
    border: 1px solid var(--gray-border);
    border-radius: var(--radius-lg);
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
}

/* ============================================
   GRIDVIEW (CURVED GREEN)
   ============================================ */

.gv-curved {
    width: 100%;
    border: 1px solid var(--green-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border-collapse: collapse;
    box-shadow: var(--shadow-sm);
}

    .gv-curved thead th {
        background: var(--green-light) !important;
        color: var(--green-dark) !important;
        font-weight: 700;
        font-size: 16px;
        text-transform: uppercase;
        letter-spacing: .03em;
        padding: 11px 10px !important;
        white-space: nowrap;
        border: none !important;
        border-bottom: 1px solid var(--green-border) !important;
    }

    .gv-curved td {
        padding: 10px !important;
        border-bottom: 1px solid var(--gray-100);
    }

    .gv-curved tbody tr:nth-child(even) {
        background: var(--gray-50);
    }

    .gv-curved tbody tr:hover {
        background: var(--green-hover);
    }

/* Sticky Header */
.gv-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    box-shadow: 0 1px 0 var(--green-border);
}

/* ============================================
   COMPACT GRIDVIEW
   ============================================ */

.gv-compact {
    border: 1px solid var(--green-border);
    border-radius: var(--radius-md);
    font-size: 15.5px;
    overflow: hidden;
}

    .gv-compact th {
        background: var(--green-light) !important;
        color: var(--green-dark) !important;
        font-weight: 700;
        padding: 6px 8px !important;
        border-bottom: 1px solid var(--green-border) !important;
    }

    .gv-compact td {
        padding: 5px 8px !important;
    }

    .gv-compact tbody tr:nth-child(even) {
        background: var(--gray-50);
    }

    .gv-compact tbody tr:hover {
        background: var(--green-hover);
    }

/* ============================================
   FILTER BAR
   (neutral toolbar surface rather than the old
   light-blue tint, so it reads as one disciplined
   palette with the rest of the site instead of a
   different accent color per section.)
   ============================================ */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    padding: 10px 12px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
}

.filter-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .filter-item label {
        font-size: 15.5px;
        font-weight: 600;
        color: var(--gray-dark);
    }

.filter-input {
    height: 32px;
    padding: 4px 10px;
    font-size: 16.5px;
    min-width: 160px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    background: #fff;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.filter-input:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(14, 116, 144, .15);
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
    padding: 7px 16px;
    font-size: 16.5px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.btn-success {
    background: var(--green-600);
    color: #fff;
}

    .btn-success:hover {
        background: #128a3e;
    }

.btn-primary {
    background: var(--blue-primary);
    color: #fff;
}

    .btn-primary:hover {
        background: #1d4ed8;
    }

.btn-secondary {
    background: #e5e7eb;
    color: #111;
    box-shadow: none;
}

    .btn-secondary:hover {
        background: #d7dbe0;
    }

.btn:hover {
    box-shadow: var(--shadow-md);
}

.btn:active {
    transform: translateY(1px);
    box-shadow: none;
}

.btn:disabled,
.btn[disabled] {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* ============================================
   ICON BUTTONS
   ============================================ */

.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    font-size: 20px;
    border-radius: 999px;
    line-height: 1;
    transition: background-color var(--transition-fast);
}

.icon-edit {
    color: #2563eb;
}

.icon-delete {
    color: #dc2626;
}

.icon-btn:hover {
    background: var(--gray-100);
    opacity: 1;
}

/* ============================================
   FORMS
   ============================================ */

.form-row {
    display: grid;
    grid-template-columns: 140px auto;
    gap: 8px;
    margin-bottom: 8px;
}

    .form-row label {
        font-size: 16.5px;
        font-weight: 600;
    }

.form-control,
.form-select,
.input,
select,
textarea {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--gray-border);
    border-radius: var(--radius-sm);
    font-size: 17px;
    font-family: var(--font-sans);
    color: var(--gray-dark);
    background: #fff;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus,
.form-select:focus,
.input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(14, 116, 144, .15);
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
    text-align: center;
    padding: 12px;
    font-size: 15.5px;
    color: var(--gray-600);
    background: var(--gray-100);
    border-top: 1px solid #e2e8f0;
}

/* ============================================
   DASHBOARD CARDS & STAT TILES
   (reusable on any page with KPI summaries -
   see app/Default.aspx for the reference usage)
   ============================================ */

.dash-card {
    background: #fff;
    border: 1px solid var(--gray-border);
    border-radius: var(--radius-lg);
    padding: 18px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.dash-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.dash-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.dash-card-header .bi {
    font-size: 22px;
    color: #fff;
    background: linear-gradient(135deg, var(--teal), var(--emerald));
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dash-card-header h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: var(--gray-dark);
}

.stat-tile {
    background: var(--gray-light);
    border: 1px solid var(--gray-border);
    border-left: 4px solid var(--blue-primary);
    border-radius: 8px;
    padding: 10px 12px;
    text-align: center;
    flex: 1;
    min-width: 92px;
}

.stat-tile-value {
    font-size: 25.5px;
    font-weight: 700;
    color: var(--gray-dark);
    line-height: 1.2;
}

.stat-tile-label {
    font-size: 14.5px;
    font-weight: 600;
    color: #64748b;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.stat-accent-green { border-left-color: #16a34a; }
.stat-accent-blue  { border-left-color: #2563eb; }
.stat-accent-amber { border-left-color: #f59e0b; }
.stat-accent-red   { border-left-color: #dc2626; }

/* ============================================
   AUTH PAGES
   (Login.aspx, NewRegistration.aspx - these are
   standalone pages with no MasterPageFile, since a
   visitor isn't authenticated yet, so they carry
   their own <html>/<body>. Shared here so both use
   the same look instead of two unrelated designs.)
   ============================================ */

.auth-shell {
    min-height: 100vh;
    background: linear-gradient(120deg, var(--emerald), var(--teal), var(--sapphire));
    background-size: 200% 200%;
    animation: authBgMove 12s ease infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    font-family: 'Segoe UI', sans-serif;
}

@keyframes authBgMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.auth-card {
    width: 100%;
    border: none;
    border-radius: 18px;
    overflow: hidden;
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);
}

.auth-card-header {
    background: rgba(0, 0, 0, 0.25);
    color: var(--on-brand);
    padding: 20px 20px 16px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.auth-card-header .brand-logo {
    width: 84px;
    height: auto;
    border-radius: 8px;
    object-fit: contain;
    border: 1px solid rgba(255, 255, 255, 0.4);
    margin-bottom: 8px;
}

.auth-card-header h1 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .3px;
    margin: 0;
}

.auth-card-header .subtitle {
    margin: 4px 0 0;
    font-size: 16.5px;
    color: rgba(232, 238, 247, 0.85);
}

.auth-card-body {
    background: rgba(255, 255, 255, 0.96);
    padding: 24px 26px;
}

.auth-card .form-control,
.auth-card .form-select {
    border-radius: 10px;
    border: 1px solid var(--gray-border);
    padding: 10px 12px;
}

.auth-card .form-control:focus,
.auth-card .form-select:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 0.2rem rgba(14, 116, 144, 0.2);
}

.auth-card .btn-brand {
    background: var(--sapphire);
    border: none;
    color: #fff;
    border-radius: 10px;
    padding: 12px;
    font-weight: 600;
    font-size: 20px;
}

.auth-card .btn-brand:hover {
    background: #1e40af;
    color: #fff;
}

.auth-link {
    color: var(--teal);
    text-decoration: none;
    font-size: 17.5px;
}

.auth-link:hover {
    text-decoration: underline;
}

/* ============================================
   LOGIN / REGISTRATION - solid white card on the KMCC green theme
   (Login.aspx and NewRegistration.aspx both layer
   .login-card/.login-card-header/.login-card-body on
   top of the shared .auth-shell/.auth-card classes
   above, so both pages get the same solid-white-card,
   green-accented look instead of the older glass card.
   .login-shell is only used by Login.aspx - its
   background reuses the same KMCC green gradient/
   animation as .auth-shell, rather than introducing a
   second background of its own, so NewRegistration.aspx
   - which already sits on plain .auth-shell - matches
   without needing the class.)
   ============================================ */

.login-shell {
    background: linear-gradient(120deg, var(--emerald), var(--teal), var(--sapphire));
    background-size: 200% 200%;
    animation: authBgMove 12s ease infinite;
}

.login-card {
    background: #fff;
    backdrop-filter: none;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    border-radius: 20px;
}

.login-card-header {
    background: transparent;
    color: var(--gray-dark, #1f2937);
    border-bottom: none;
    padding: 18px 28px 2px;
}

.login-card-header .brand-logo {
    width: 72px;
    border: none;
    background: transparent;
    margin-bottom: 6px;
}

.login-card-header h1 {
    font-size: 22px;
    font-weight: 800;
    color: #14213d;
}

.login-card-header .subtitle {
    color: #6b7280;
    font-size: 14.5px;
    margin-top: 2px;
}

.login-card-body {
    background: #fff;
    padding: 2px 26px 18px;
}

.login-card-body .mb-3 {
    margin-bottom: 10px !important;
}

.login-card-body .mt-3 {
    margin-top: 10px !important;
}

.login-card-body .form-label {
    font-weight: 500;
    font-size: 17.5px;
    color: #1f2937;
    margin-bottom: 3px;
}

.login-card-body .form-control,
.login-card-body .form-select {
    border-radius: 8px;
    border: 1px solid #dcdfe4;
    padding: 8px 12px;
    font-size: 15.5px;
}

.login-card-body .form-control:focus,
.login-card-body .form-select:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 0.2rem rgba(14, 116, 144, 0.15);
}

.login-card-body .btn-brand {
    background: var(--sapphire);
    color: #fff;
    border-radius: 8px;
    padding: 10px;
    font-size: 16.5px;
}

.login-card-body .btn-brand:hover {
    background: #1e40af;
}

.login-card-body .auth-link {
    color: var(--teal);
}

/* A wide, generously-labeled form row: label above/left, input taking the
   rest. Used by NewRegistration.aspx's longer field labels; reusable
   anywhere a form has label text too long for kmcc_theme.css's compact
   140px .form-row. */
.form-row-wide {
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.form-row-wide label {
    font-weight: 600;
    font-size: 17.5px;
}

@media (max-width: 480px) {
    .form-row-wide {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* ============================================
   REGISTRATION FORM - SECTIONED, 2-COLUMN LAYOUT
   (NewRegistration.aspx. Builds on .auth-card's
   green/white palette, but groups the form's many
   fields into labeled sections with a responsive
   2-column grid so a long form reads as a form,
   not one long stack of inputs.)
   ============================================ */

.form-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--teal);
    margin: 26px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gray-border);
}

.form-section-title:first-of-type {
    margin-top: 2px;
}

.form-section-title i {
    font-size: 18.5px;
}

.form-section-hint {
    font-size: 15.5px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #94a3b8;
    margin-left: auto;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

@media (max-width: 700px) {
    .form-grid-2 {
        grid-template-columns: 1fr;
    }
}

.form-field {
    margin-bottom: 16px;
}

.form-field label {
    display: block;
    font-weight: 600;
    font-size: 17px;
    margin-bottom: 6px;
    color: var(--gray-dark);
}

.form-field .field-hint-text {
    display: block;
    font-size: 15.5px;
    color: #94a3b8;
    margin-top: 4px;
}

/* ============================================
   AUTH PAGES - SPLIT LAYOUT
   (Login.aspx's brand + form treatment. Shares
   the same green/white palette as .auth-shell /
   .auth-card above, which NewRegistration.aspx
   still uses for its longer single-column form -
   both read as the same family, just two layouts.)
   ============================================ */

.auth-page {
    margin: 0;
}

.auth-split {
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
}

.auth-brand-panel {
    position: relative;
    overflow: hidden;
    flex: 1 1 40%;
    min-width: 320px;
    background: linear-gradient(120deg, var(--emerald), var(--teal), var(--sapphire));
    background-size: 200% 200%;
    animation: authBgMove 14s ease infinite;
    color: var(--on-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
}

.auth-brand-content {
    position: relative;
    z-index: 2;
    max-width: 360px;
}

.auth-brand-logo {
    width: 76px;
    height: auto;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
    padding: 4px;
    margin-bottom: 20px;
}

.auth-brand-content h1 {
    font-size: 33px;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.25;
}

.auth-brand-tagline {
    font-size: 18.5px;
    color: rgba(232, 238, 247, 0.85);
    margin-bottom: 28px;
}

.auth-brand-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.auth-brand-points li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17.5px;
    color: var(--on-brand);
}

.auth-brand-points i {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.auth-brand-blob {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.auth-brand-blob.blob-1 {
    width: 260px;
    height: 260px;
    top: -80px;
    right: -80px;
}

.auth-brand-blob.blob-2 {
    width: 180px;
    height: 180px;
    bottom: -60px;
    left: -40px;
    background: rgba(255, 255, 255, 0.06);
}

.auth-form-panel {
    flex: 1 1 60%;
    min-width: 320px;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

.auth-form-inner {
    width: 100%;
    max-width: 380px;
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid var(--gray-border);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    padding: 36px 32px;
    animation: authFadeUp .5s ease;
}

@keyframes authFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.auth-form-inner h2 {
    font-size: 28.5px;
    font-weight: 700;
    color: var(--gray-dark);
    margin: 0 0 4px;
}

.auth-form-subtitle {
    font-size: 17.5px;
    color: #64748b;
    margin-bottom: 24px;
}

.auth-input-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-input-icon > i.auth-input-leading {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 18.5px;
    pointer-events: none;
}

.auth-input-icon .form-control,
.auth-input-icon .form-select {
    padding-left: 40px;
    /* keep >=16px so iOS Safari doesn't auto-zoom the page on focus */
    font-size: 20px;
}

.auth-input-icon .btn-eye {
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    border: none;
    background: none;
    color: #94a3b8;
    padding: 8px 10px;
    cursor: pointer;
    touch-action: manipulation;
}

.auth-input-icon .btn-eye:hover {
    color: var(--teal);
}

.auth-form-footer {
    text-align: center;
    font-size: 15.5px;
    color: #94a3b8;
    margin-top: 24px;
}

/* ---- Mobile: brand panel becomes a compact header, form is reachable
   without scrolling on most phones (tuned so the two stacked panels'
   combined height stays close to one viewport). ---- */
@media (max-width: 860px) {
    .auth-split {
        min-height: 100vh;
    }

    .auth-brand-panel {
        flex: 1 1 100%;
        min-height: auto;
        padding: 28px 20px 22px;
        text-align: center;
        justify-content: center;
        animation: none; /* one less thing repainting on mobile */
    }

    .auth-brand-content {
        max-width: 100%;
    }

    .auth-brand-logo {
        width: 56px;
        margin-bottom: 12px;
    }

    .auth-brand-content h1 {
        font-size: 24px;
        margin-bottom: 4px;
    }

    .auth-brand-tagline {
        font-size: 16.5px;
        margin-bottom: 0;
    }

    .auth-brand-points {
        display: none; /* keep the mobile hero compact - form is right below it */
    }

    .auth-brand-blob {
        display: none; /* decorative only; not worth the paint cost in a short mobile header */
    }

    .auth-form-panel {
        flex: 1 1 100%;
        padding: 24px 16px 32px;
    }

    .auth-form-inner {
        max-width: 100%;
        padding: 26px 20px;
        border-radius: 14px;
    }

    .auth-form-inner h2 {
        font-size: 25.5px;
    }
}

@media (max-width: 380px) {
    .auth-brand-panel {
        padding: 22px 16px 18px;
    }

    .auth-form-panel {
        padding: 20px 12px 28px;
    }

    .auth-form-inner {
        padding: 22px 16px;
    }
}

/* Respect users who've asked for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .auth-brand-panel,
    .auth-form-inner {
        animation: none !important;
    }
}

/* ============================================
   APP SHELL - TOP NAVBAR + OFFCANVAS SIDEBAR
   (single source of truth - shared by Site.Master
   and members.Master. Both still use the exact
   same Menu1 / XmlDataSource1 / lblWelcome server
   controls as before - only the surrounding layout
   changed, so no .vb code-behind needed to change.
   Layout carried over from this project:
   an always-visible top bar (brand, date, welcome
   text, logout) plus Bootstrap's own `.offcanvas-lg`
   component for the sidebar - a normal, always-open
   column at >=992px, and a slide-in drawer (with
   backdrop, ESC-to-close and focus trap, all built
   in) below that. No hand-rolled toggle JS needed;
   bootstrap.bundle.min.js drives it via the
   data-bs-toggle="offcanvas" attribute in the markup.) */

.kmcc-topnav {
    background: linear-gradient(120deg, var(--emerald), var(--teal), var(--sapphire));
    box-shadow: var(--shadow-md);
    padding-top: 10px;
    padding-bottom: 10px;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.kmcc-topnav-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--on-brand) !important;
    font-weight: 700;
    font-size: 20px;
    text-decoration: none;
}

.kmcc-topnav-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    padding: 3px;
}

.kmcc-topnav-meta {
    font-size: 15.5px;
    color: var(--on-brand);
}

.kmcc-topnav-meta .btn-outline-light {
    border-color: rgba(255, 255, 255, .5);
}

/* ===== Emergency Request notification bell (admin topnav + Member Portal
   topbar) - a small badge count on the bell icon plus a dropdown listing
   the most recent unread items, shared between both master pages since
   the markup and behavior are the same on each side. ===== */
.kmcc-bell-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--emerald);
}

.kmcc-bell-menu {
    width: 320px;
    max-width: 90vw;
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.kmcc-bell-menu-header {
    padding: 0.7rem 1rem;
    font-weight: 700;
    font-size: 0.87rem;
    color: #fff;
    background: linear-gradient(90deg, var(--emerald), var(--teal), var(--sapphire));
}

.kmcc-bell-menu-header .bi {
    margin-right: 0.35rem;
}

.kmcc-bell-item {
    display: block;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--gray-100);
    white-space: normal;
}

.kmcc-bell-item:last-of-type {
    border-bottom: none;
}

.kmcc-bell-item-title {
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--gray-800);
}

.kmcc-bell-item-meta {
    font-size: 0.76rem;
    color: var(--gray-500);
    margin-top: 0.1rem;
}

.kmcc-bell-empty {
    padding: 1rem;
    font-size: 0.85rem;
    text-align: center;
}

.kmcc-bell-viewall {
    display: block;
    padding: 0.6rem 1rem;
    text-align: center;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--teal);
    background: var(--gray-50);
    border-top: 1px solid var(--gray-border);
}

/* Unread indicator - admin RequestList.aspx grid rows and the Member
   Portal's own "My Requests" list share this class. */
tr.row-unread,
tr.row-unread > td {
    background: var(--emerald-wash) !important;
    font-weight: 700;
}

a.row-unread.mp-list-item {
    background: var(--emerald-wash);
    border-left: 3px solid var(--red);
}

/* The sidebar itself - Bootstrap's .offcanvas-lg class (already applied
   in the markup) handles the responsive show/hide + slide-in mechanics;
   this just supplies the KMCC look (green gradient, width, text color). */
.kmcc-sidebar {
    --bs-offcanvas-width: 250px;
    background: linear-gradient(180deg, var(--emerald), var(--deep-navy));
    color: var(--on-brand);
}

@media (min-width: 992px) {
    .kmcc-sidebar {
        /* At the offcanvas-lg breakpoint Bootstrap turns this into a
           normal static column - pin it under the sticky top bar so it
           scrolls its own overflow instead of the whole page. */
        position: sticky;
        top: 56px;
        height: calc(100vh - 56px);
        overflow-y: auto;
        overflow-x: hidden;
        /* Without this, the sidebar is just a flex item next to
           .kmcc-content (flex: 1 1 auto) inside the outer .d-flex. Once
           the dashboard's filter row / KPI cards need more room than the
           viewport has, the browser starts stealing width from whichever
           flex item still has room to give - and since the sidebar never
           said otherwise, that's it: it gets squeezed down to a sliver
           and every menu label clips ("Dashboard" -> "Dashbo"). Pinning
           flex-shrink to 0 keeps the sidebar at its intended
           --bs-offcanvas-width no matter how tight the content area gets;
           .kmcc-content already has min-width: 0, so it's the one that's
           supposed to absorb the squeeze (via its own internal scrolling)
           instead of the sidebar. */
        flex-shrink: 0;
    }

    /* Desktop-only "hide menu" toggle (#btnToggleSidebar in Site.Master) -
       simply removes the sidebar from the flex row so .kmcc-content (flex: 1)
       expands to the full width, for a wider view on report/table pages.
       Scoped to this same >=992px breakpoint only; the mobile offcanvas
       drawer is untouched. */
    body.sidebar-collapsed .kmcc-sidebar {
        display: none;
    }
}

.kmcc-sidebar-offcanvas-header {
    color: var(--on-brand);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    padding: 14px 16px;
}

.kmcc-sidebar-nav {
    padding: 10px 10px 24px;
}

.kmcc-content {
    min-width: 0;
}

.kmcc-footer {
    padding: 14px 0;
}

/* MENU ITEMS (asp:Menu output - top level) */
.pkdkmcc-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1px;
}

.pkdkmcc-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pkdkmcc-menu-item {
    position: relative;
    color: var(--on-brand) !important;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 17px;
    letter-spacing: .1px;
    text-decoration: none;
    transition: background-color var(--transition-fast), padding-left var(--transition-fast);
    margin: 1px 0;
}

/* A small chevron on any item that has a submenu, so the tree reads at a
   glance instead of every row looking like a plain link. Falls back to no
   chevron (harmless) on the rare browser without :has() support. */
.pkdkmcc-menu li:has(> ul) > a.pkdkmcc-menu-item::after {
    content: "\203A";
    margin-left: auto;
    padding-left: 8px;
    font-size: 16.5px;
    opacity: .55;
}

.pkdkmcc-menu-item:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff !important;
    padding-left: 15px;
}

.pkdkmcc-menu-selected {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    border-radius: var(--radius-sm);
    font-weight: 700;
}

/* Sub-menu items (2nd level, DataMember="SubMenu"). Menu1 now sets
   StaticDisplayLevels="2" so these always render expanded in place
   instead of a hover-triggered flyout - flyouts need a mouse, and a
   sidebar you're meant to use on a phone can't rely on hover.
   Shrunk down from the top-level rows (smaller type, tighter padding)
   and given a thin connecting guide line + a small dot marker per item,
   so the tree reads as "children of X" rather than more full-size rows. */
.pkdkmcc-menu ul ul {
    position: relative;
    padding-left: 22px;
    margin: 1px 0 4px;
    background: none;
    box-shadow: none;
    animation: none;
    min-width: 0;
}

.pkdkmcc-menu ul ul::before {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 8px;
    left: 10px;
    width: 1px;
    background: rgba(255, 255, 255, 0.16);
}

.pkdkmcc-submenu-item {
    position: relative;
    color: rgba(232, 238, 247, 0.72) !important;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 8px;
    font-size: 15.5px;
    line-height: 1.3;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    margin: 0;
}

.pkdkmcc-submenu-item::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: .6;
    flex-shrink: 0;
}

.pkdkmcc-submenu-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff !important;
}

.pkdkmcc-submenu-item:hover::before {
    opacity: 1;
}

/* A selected item can land at either level - keep it compact when it's
   a submenu row instead of jumping up to top-level sizing. */
.pkdkmcc-menu ul ul .pkdkmcc-menu-selected {
    padding: 5px 10px 5px 8px;
    font-size: 15.5px;
}

/* GROUPED / COLLAPSIBLE SIDEBAR SECTIONS
   Site.Master now nests related items under a handful of expandable group
   headings (Members, Community Board, Committees, Programs & Meetings,
   Finance & Schemes, Settings) instead of one long flat list of 20 links -
   collapsed by default, toggled open by Bootstrap's own .collapse component
   (data-bs-toggle="collapse" on the heading, id-matched on the submenu
   <ul>), and auto-expanded server-side (Site.Master.vb) for whichever
   group contains the page you're actually on. The submenu <ul> sits right
   under the group's own <li> here (not a level deeper), so it needs its
   own direct-child rule rather than the ".pkdkmcc-menu ul ul" rule above -
   .pkdkmcc-submenu-item itself is a plain class and already applies fine. */
.pkdkmcc-menu > li > ul {
    position: relative;
    padding-left: 22px;
    margin: 1px 0 4px;
    list-style: none;
}

.pkdkmcc-menu > li > ul::before {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 8px;
    left: 10px;
    width: 1px;
    background: rgba(255, 255, 255, 0.16);
}

.pkdkmcc-menu > li > ul .pkdkmcc-menu-selected {
    padding: 5px 10px 5px 8px;
    font-size: 15.5px;
}

/* The chevron from ".pkdkmcc-menu li:has(> ul) > a.pkdkmcc-menu-item::after"
   above already appears on every group heading (it has a direct-child ul) -
   this just rotates it to show open/closed state instead of always
   pointing the same way. */
.pkdkmcc-menu li:has(> ul) > a.pkdkmcc-menu-item::after {
    display: inline-block;
    transition: transform var(--transition-fast);
}

.pkdkmcc-menu li:has(> ul) > a.pkdkmcc-menu-item[aria-expanded="true"]::after {
    transform: rotate(90deg);
}

/* WELCOME TEXT */
.navbar-text {
    color: var(--on-brand) !important;
    font-size: 16.5px;
    font-weight: 500;
}

/* REMOVE ASP.NET SKIP LINKS */
.skiplink, #Menu1_SkipLink { display: none !important; }

/* Below 992px, the sidebar becomes a fixed off-canvas drawer that
   slides in from the left over the page, dismissed by the backdrop,
   the close button, or picking a menu link (see the toggle script in
   Site.Master / members.Master). */
/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 768px) {

    .page-title {
        font-size: 20px;
        padding: 8px 12px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-input {
        width: 100%;
    }

    .gv-curved td,
    .gv-curved th {
        padding: 8px !important;
        font-size: 15.5px;
    }
}

/* ============================================
   MEMBER PORTAL - mobile-first shell for regular
   members (MemberPortal.Master + app/MemberPortal/*)
   ============================================ */

.mp-body {
    background: var(--gray-50);
    padding-bottom: 78px; /* clears the fixed bottom tab bar */
}

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

.mp-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: linear-gradient(120deg, var(--emerald), var(--teal), var(--sapphire));
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.mp-topbar-bell-wrap {
    margin-left: auto;
}

.mp-topbar-bell {
    background: none;
    border: none;
    color: var(--on-brand);
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    padding: 4px;
    line-height: 1;
}

.mp-topbar-bell:hover {
    opacity: .85;
}

.mp-topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--on-brand) !important;
    font-weight: 700;
    font-size: 17.5px;
    text-decoration: none;
}

.mp-topbar-logo {
    width: 30px;
    height: 30px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    padding: 3px;
}

.mp-topbar-logout {
    color: var(--on-brand) !important;
    font-size: 22px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding: 4px;
}

.mp-topbar-logout:hover {
    opacity: .85;
}

/* ---- content area ---- */

.mp-content {
    max-width: 560px;
    margin: 0 auto;
    padding: 16px 14px 8px;
}

/* ---- hero (Home page) ---- */

.mp-hero {
    text-align: center;
    padding: 18px 10px 8px;
}

.mp-hero-avatar-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.mp-hero-avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--green-600);
    background: var(--gray-100);
}

.mp-hero-greeting {
    font-size: 14.5px;
    color: var(--gray-600);
    font-weight: 600;
}

.mp-hero-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--green-900);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.mp-hero-date {
    font-size: 13px;
    color: var(--gray-600, #6c757d);
    margin-top: 2px;
}

/* ---- notifications marquee (Home page) ---- */

.mp-marquee {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--green-50);
    border: 1px solid var(--green-200);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    margin-top: 14px;
    overflow: hidden;
}

.mp-marquee-icon {
    color: var(--green-700);
    flex-shrink: 0;
}

.mp-marquee-track {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    flex: 1;
    min-width: 0;
}

.mp-marquee-content {
    display: inline-block;
    font-size: 14.5px;
    color: var(--green-900);
    padding-left: 100%;
    animation: mp-marquee-scroll 38s linear infinite;
}

/* Pause on hover/focus so the message can actually be read. */
.mp-marquee-track:hover .mp-marquee-content,
.mp-marquee-track:focus-within .mp-marquee-content {
    animation-play-state: paused;
}

@keyframes mp-marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Respect users who've asked for less motion - show the message statically instead. */
@media (prefers-reduced-motion: reduce) {
    .mp-marquee-content {
        animation: none;
        padding-left: 0;
    }
}

/* ---- home dashboard cards ---- */

.mp-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.mp-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.mp-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    color: inherit;
}

.mp-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    flex-shrink: 0;
}

.mp-card-icon-navy { background: #1e3a5f; }
.mp-card-icon-gold { background: var(--amber); }
.mp-card-icon-red { background: var(--red); }
.mp-card-icon-green { background: var(--green-600); }

.mp-card-body {
    flex: 1;
    min-width: 0;
}

.mp-card-title {
    font-weight: 600;
    font-size: 15.5px;
    color: var(--gray-800);
}

.mp-card-subtitle {
    font-size: 13px;
    color: var(--gray-500);
}

.mp-card-chevron {
    color: var(--gray-400);
    font-size: 17.5px;
}

/* ---- recent photos strip (Home page) ---- */

.mp-section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 18px 0 8px;
}

.mp-section-title-row .mp-section-title {
    margin: 0;
}

.mp-section-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--green-700);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    white-space: nowrap;
}

.mp-section-link:hover {
    color: var(--green-900);
}

.mp-photo-strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 2px 2px 12px;
    margin: 0 -2px 4px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.mp-photo-strip::-webkit-scrollbar {
    height: 5px;
}

.mp-photo-strip::-webkit-scrollbar-thumb {
    background: var(--gray-300, #dee2e6);
    border-radius: 3px;
}

.mp-photo-card {
    position: relative;
    flex: 0 0 auto;
    width: 132px;
    height: 152px;
    border-radius: 14px;
    overflow: hidden;
    scroll-snap-align: start;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    display: block;
    background: var(--gray-100);
}

.mp-photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-fast);
}

.mp-photo-card:hover img,
.mp-photo-card:active img {
    transform: scale(1.06);
}

.mp-photo-card-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 10px 8px;
    background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- generic page title / list items (Meetings, Notifications, Payments, Programs) ---- */

.mp-page-title {
    font-size: 18.5px;
    font-weight: 700;
    color: var(--green-900);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.mp-section-title {
    font-size: 14.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--gray-500);
    margin: 18px 0 8px;
}

.mp-list-item {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 8px;
    box-shadow: var(--shadow-sm);
}

.mp-list-item-title {
    font-weight: 600;
    font-size: 15.5px;
    color: var(--gray-800);
}

.mp-list-item-meta {
    font-size: 13px;
    color: var(--gray-500);
    margin-top: 2px;
}

.mp-list-item-body {
    font-size: 14.5px;
    color: var(--gray-600);
    margin-top: 4px;
}

.mp-list-item-stats {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

/* ---- stat cards / pills (Payments page) ---- */

.mp-stat-card {
    border-radius: var(--radius-md);
    padding: 12px 14px;
    color: #fff;
}

.mp-stat-card-green { background: linear-gradient(135deg, var(--green-700), var(--green-600)); }
.mp-stat-card-navy { background: linear-gradient(135deg, #1e3a5f, #2c5282); }

.mp-stat-card-label {
    font-size: 12px;
    opacity: .85;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.mp-stat-card-value {
    font-size: 22px;
    font-weight: 700;
    margin-top: 2px;
}

.mp-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
}

.mp-stat-green { background: var(--green-100); color: var(--green-900); }
.mp-stat-gold { background: #fef3c7; color: #92400e; }
.mp-stat-gray { background: var(--gray-100); color: var(--gray-600); }
.mp-stat-red { background: #fee2e2; color: #991b1b; }

/* ---- segmented control (unused now that Programs has no Relief tab, kept in case a
        similar toggle is needed later) ---- */

.mp-segmented {
    display: flex;
    border: 1px solid var(--green-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 14px;
}

.mp-segmented a {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--green-800);
    text-decoration: none;
    background: #fff;
}

.mp-segmented a.active {
    background: var(--green-600);
    color: #fff;
}

/* ---- bottom tab bar ---- */

.mp-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background: #fff;
    border-top: 1px solid var(--gray-200);
    box-shadow: 0 -2px 10px rgba(15, 23, 42, .06);
    z-index: 1030;
}

.mp-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 2px 6px;
    text-decoration: none;
    color: var(--gray-500);
    font-size: 11px;
    font-weight: 600;
}

.mp-tab i {
    font-size: 21px;
}

.mp-tab.active {
    color: var(--green-700);
}

@media (max-width: 400px) {
    .mp-tab span {
        display: none;
    }

    .mp-tab i {
        font-size: 23px;
    }
}

/* =====================================================================
   COMPATIBILITY LAYER
   Classes used by the existing list/edit/report/profile pages that
   kmcc_theme.css above doesn't define. Recolored to the same green /
   amber / blue palette so every page (not just the ones rebuilt to use
   .page-title / .dash-card / .gv-curved directly) reads as one theme.
   ===================================================================== */

/* ===== Standard page header (icon + title + subtitle) used by every
   List/Edit/Report page's <h4 class="mb-0"><i class="bi ..."></i>Title</h4>
   pattern inside the app shell's content area. ===== */
.kmcc-content > .d-flex.justify-content-between.align-items-center.mb-3,
.kmcc-content .d-flex.justify-content-between.align-items-center.mb-3 {
    flex-wrap: wrap;
    row-gap: 0.4rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.6rem !important;
    border-bottom: 1px solid var(--gray-200);
}

.kmcc-content h4.mb-0 .bi,
.kmcc-content h5.mb-0 .bi {
    color: var(--green-700);
    margin-right: 0.35rem;
}

/* ===== Standard sub-section headers inside form/detail cards ===== */
.card-body h6.text-uppercase {
    font-size: 0.79rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--green-700) !important;
    padding-bottom: 0.3rem;
    margin-top: 0.2rem;
    margin-bottom: 0.6rem;
    border-bottom: 2px solid var(--green-light);
}

.card-body h5.mb-0 {
    color: var(--green-700);
    font-size: 1.16rem;
}

/* ===== Card header bar (bootstrap .card-header used across list pages) ===== */
.card-header {
    font-weight: 700;
    font-size: 0.96rem;
    color: var(--gray-800);
    background-color: #fff;
    border-bottom: 1px solid var(--gray-border);
    padding: 0.6rem 1rem;
}

.card-header .bi {
    color: var(--green-700);
    margin-right: 0.3rem;
}

/* ===== Dashboard chart/list panels (Default.aspx) - a thin brand-gradient
   bar across the top edge and a slightly bolder icon+title header, so
   these read as distinct "panels" the way the KPI strip above them does,
   instead of plain generic .card boxes. Scoped to .dash-panel only, so it
   doesn't change the look of .card/.card-header anywhere else in the app. */
.dash-panel {
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
}

.dash-panel .card-body {
    padding: 0.7rem 0.9rem;
}

.dash-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--emerald), var(--teal), var(--sapphire));
}

.dash-panel .card-header {
    font-size: 0.99rem;
    font-weight: 700;
    color: var(--gray-800);
    padding: 0.55rem 0.9rem 0.5rem;
}

.dash-panel .card-header .bi {
    color: var(--teal);
    margin-right: 0.4rem;
}

/* ===== Dashboard / report KPI tiles (Default.aspx + several report pages)
   Compact, centered layout - icon badge, big number, label, all stacked
   and centered, rather than the old icon-beside-label row - so the whole
   grid reads as one tight, elegant strip instead of a stack of half-empty
   cards. Each metric type gets its own gradient icon color (blue/gold/
   teal/purple/rose/green/red) instead of everything defaulting to blue,
   so the row has some visual variety at a glance; the card itself stays
   plain white/shadow, no colored top border anymore. ===== */
.card-kpi {
    border: 1px solid var(--gray-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card-kpi:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.card-kpi .card-body {
    padding: 0.6rem 0.5rem 0.55rem;
    text-align: center;
}

.card-kpi .kpi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    margin: 0 auto 0.3rem;
    border-radius: 0.65rem;
    font-size: 1.1rem;
    color: #fff;
    background: linear-gradient(135deg, #60a5fa, var(--blue-primary));
    box-shadow: var(--shadow-sm);
}

.card-kpi .kpi-label {
    font-size: 0.77rem;
    font-weight: 600;
    color: var(--gray-500);
    line-height: 1.15;
}

.card-kpi .kpi-value {
    font-size: 1.43rem;
    font-weight: 800;
    color: var(--gray-800);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: 0.05rem;
}

.card-kpi .kpi-value.text-success { color: var(--green-700) !important; }
.card-kpi .kpi-value.text-danger { color: var(--red) !important; }

.card-kpi.kpi-gold .kpi-icon { background: linear-gradient(135deg, #fbbf24, #d97706); }
.card-kpi.kpi-green .kpi-icon { background: linear-gradient(135deg, #4ade80, var(--green-600)); }
.card-kpi.kpi-red .kpi-icon { background: linear-gradient(135deg, #f87171, var(--red)); }
.card-kpi.kpi-teal .kpi-icon { background: linear-gradient(135deg, #2dd4bf, #0d9488); }
.card-kpi.kpi-purple .kpi-icon { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.card-kpi.kpi-rose .kpi-icon { background: linear-gradient(135deg, #fb7185, #e11d48); }

/* ===== Relief Activities list (ReliefList.aspx) - a more "financial ledger" polish
   for this one list page: the filter card and the results card both get the same
   top-gradient dash-panel treatment as the dashboard panels, the table gets tidy
   zebra striping and a softer hover tint. Scoped entirely to .relief-list-page so
   no other list page's .card/.table is touched - none of them currently use
   dash-panel either. Column alignment (right-aligned money, centered dates/
   actions) is set per-column in the markup via HorizontalAlign, not here, since
   that's a rendered attribute rather than a CSS hook. Spacing is kept deliberately
   tight (compact card padding, small table cell padding, trimmed title margin) to
   match the same dense rhythm used on ReliefEdit.aspx, rather than the airier
   pass this page started with. ===== */
.relief-list-page .card.dash-panel .card-body {
    padding: 0.55rem 0.75rem;
}

.relief-list-page .table-responsive {
    border-radius: var(--radius-md);
    overflow: hidden;
}

.relief-list-page .table {
    margin-bottom: 0;
    font-size: 0.9rem;
}

.relief-list-page .table tbody td {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    vertical-align: middle;
}

.relief-list-page .page-title {
    margin-bottom: 8px;
    padding-bottom: 6px;
}

.relief-list-page .form-label {
    margin-bottom: 0.25rem;
}

/* The site-wide .form-control/.form-select/.btn rules (Site.css, further down)
   set a fairly large 16.5-17px font and roomy padding on every input and button
   in the app, including ones already carrying Bootstrap's own .form-select-sm/
   .btn-sm classes - those site-wide rules and Bootstrap's -sm ones have equal
   selector specificity, so the site-wide rule (loaded after bootstrap.min.css)
   wins and the -sm classes end up doing nothing for size. That's why this
   filter row's dropdown and buttons were rendering as tall as the page's main
   "New Relief Activity" button. Pinned here by ID - which beats both - to a
   single standard size matching the table body text below it. */
.relief-list-page #ddlCommittee,
.relief-list-page #btnFilter,
.relief-list-page #btnReset {
    font-size: 0.9rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.relief-list-page .table tbody tr {
    transition: background-color var(--transition-fast);
}

.relief-list-page .table tbody tr:nth-child(even) {
    background-color: var(--gray-50);
}

.relief-list-page .table-hover tbody tr:hover {
    background-color: var(--emerald-wash);
}

/* ===== Relief Program edit page (ReliefEdit.aspx) - same "financial ledger" polish
   as the list page: every card (Basic Information, each roster/filter/schedule
   card, and the "Add a ..." cards) gets the dash-panel top-gradient treatment,
   every grid gets the same zebra striping/row hover tint, and the tab
   strip - this is the only page in the app using Bootstrap nav-tabs, so this is
   safe to style directly rather than needing a bespoke class - becomes a
   segmented pill control instead of the plain underlined Bootstrap default, to
   match the rest of the page's more finished look. Scoped to .relief-edit-page.
   Spacing is deliberately tight throughout (compact card padding, small table
   cell padding, trimmed label/heading margins) rather than the more spacious
   pass this page started with - six tabs of forms and grids read better dense
   than airy, and every margin/padding here is pulled from the same small set
   of values (0.25rem / 0.4rem / 0.5rem-ish) instead of ad hoc numbers, so the
   rhythm stays consistent tab to tab. ===== */
.relief-edit-page .card.dash-panel .card-body {
    padding: 0.45rem 0.65rem;
}

.relief-edit-page .dash-panel .card-header {
    padding: 0.35rem 0.65rem;
}

/* The Total Due/Collected/Outstanding and Total Due/Paid Out/Outstanding stat
   cards (Collections and Payments tabs) use plain Bootstrap <small>/<h6> rather
   than the dashboard's own .kpi-label/.kpi-value classes, so they don't pick up
   that component's already-compact type scale and were rendering noticeably
   taller than every other card on this page - this trims them to match. */
.relief-edit-page .card-kpi .card-body {
    padding: 0.35rem 0.5rem;
}

.relief-edit-page .card-kpi .card-body small {
    font-size: 0.72rem;
}

.relief-edit-page .card-kpi .card-body h6 {
    font-size: 1.05rem;
    margin-top: 0.1rem;
    margin-bottom: 0;
}

.relief-edit-page .table-responsive {
    border-radius: var(--radius-md);
    overflow: hidden;
}

.relief-edit-page .table {
    margin-bottom: 0;
}

.relief-edit-page .table tbody td {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    vertical-align: middle;
}

.relief-edit-page .page-title {
    margin-bottom: 8px;
    padding-bottom: 6px;
}

.relief-edit-page .form-label {
    margin-bottom: 0.25rem;
}

.relief-edit-page .alert {
    margin-bottom: 0.5rem;
}

.relief-edit-page .table tbody tr {
    transition: background-color var(--transition-fast);
}

.relief-edit-page .table tbody tr:nth-child(even) {
    background-color: var(--gray-50);
}

.relief-edit-page .table-hover tbody tr:hover {
    background-color: var(--emerald-wash);
}

/* Inline "Label: [dropdown]" filter pairs - Constituency/Panchayath on the Funding
   Sources and Beneficiaries tabs, Schedule (Month)/Status on the Collections and
   Payments tabs - so each pair sits on one line instead of the label stacked above
   the dropdown. flex-wrap lets pairs drop to their own line on narrow screens
   instead of squeezing. */
.relief-edit-page .filter-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.relief-edit-page .filter-inline .form-label {
    margin-bottom: 0;
    white-space: nowrap;
}

.relief-edit-page .filter-inline .form-select {
    width: auto;
    min-width: 170px;
}

.relief-edit-page #reliefTabs {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    background: var(--gray-100);
    border: 1px solid var(--gray-border);
    border-radius: var(--radius-lg);
    padding: 4px;
}

.relief-edit-page #reliefTabs .nav-item {
    margin-bottom: 0;
}

.relief-edit-page #reliefTabs .nav-link {
    border: none;
    border-radius: var(--radius-md);
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-600);
    background: transparent;
    transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.relief-edit-page #reliefTabs .nav-link .bi {
    margin-right: 0.3rem;
    color: inherit;
}

.relief-edit-page #reliefTabs .nav-link:hover {
    background: #fff;
    color: var(--emerald);
}

/* Active tab gets the same emerald -> teal -> sapphire brand gradient used for the
   dash-panel top accent bar elsewhere on this page, instead of plain white, so it
   reads clearly as "selected" rather than just "not hovered" - white text/icon for
   contrast, a soft brand-colored shadow instead of the generic gray one. */
.relief-edit-page #reliefTabs .nav-link.active {
    background: linear-gradient(135deg, var(--emerald), var(--teal));
    color: #fff;
    box-shadow: 0 2px 8px rgba(14, 116, 144, .35);
}

.relief-edit-page #reliefTabs .nav-link.active:hover {
    color: #fff;
}

.relief-edit-page #reliefTabs .nav-link.active .bi {
    color: var(--on-brand);
}

.relief-edit-page #reliefTabs .nav-link.disabled {
    color: var(--gray-400);
    pointer-events: none;
}

/* ===== Relief Program - Collection & Payment Schedule grid (ReliefEdit.aspx Basic
   Information, under Save - BindProgramSchedule in the code-behind). A compact grid
   of numbered chips instead of a plain bullet list: one chip per calendar month for
   a 'Monthly' program, or a small fixed set of chips for 'One Time'/'More than Once'. ===== */
.schedule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.schedule-grid.schedule-grid-wide {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.schedule-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid var(--gray-border);
    border-left: 3px solid var(--green-600);
    border-radius: var(--radius-md);
    background: var(--green-50);
    padding: 0.5rem 0.7rem;
}

.schedule-item .schedule-num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--green-600);
    color: #fff;
    font-size: 0.79rem;
    font-weight: 700;
}

.schedule-item .schedule-label {
    font-size: 0.91rem;
    font-weight: 600;
    color: var(--gray-800);
    line-height: 1.25;
}

/* ===== Chart containers (Default.aspx Chart.js canvases) ===== */
.chart-wrap {
    position: relative;
    width: 100%;
    height: 210px;
}

.chart-wrap-pie {
    height: 190px;
    max-width: 260px;
    margin: 0 auto;
}

.map-wrap {
    position: relative;
    width: 100%;
    height: 280px;
    border-radius: 8px;
    overflow: hidden;
}

.map-wrap #constituencyMap {
    width: 100%;
    height: 100%;
}

.map-wrap .leaflet-container {
    font-family: 'Inter', sans-serif;
    border-radius: 8px;
}

.kmcc-map-label {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(15, 81, 50, 0.25);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: 600;
    color: #0f5132;
    box-shadow: none;
}

.kmcc-map-label::before {
    display: none;
}

@media (max-width: 575.98px) {
    .chart-wrap {
        height: 190px;
    }

    .chart-wrap-pie {
        height: 170px;
        max-width: 220px;
    }

    .map-wrap {
        height: 220px;
    }
}

/* ===== Dashboard compact mode (Default.aspx only - everything on that page is
   wrapped in .dash-compact). Tightens the header, KPI tiles, panel headers and
   chart/map heights so the whole dashboard fits in less vertical space, without
   changing .page-title / .card-kpi / .dash-panel / .chart-wrap / .map-wrap on any
   other page that reuses those same classes (report pages, ReliefEdit, etc). ===== */
.dash-compact .page-title {
    padding: 0 0 6px;
    margin-bottom: 10px;
    font-size: 21px;
}

.dash-compact .page-title i,
.dash-compact .page-title .bi {
    width: 28px;
    height: 28px;
    font-size: 16px;
}

.dash-compact .row.mb-2 {
    margin-bottom: 0.45rem !important;
}

.dash-compact .card-kpi .card-body {
    padding: 0.45rem 0.4rem 0.4rem;
}

.dash-compact .card-kpi .kpi-icon {
    width: 1.8rem;
    height: 1.8rem;
    margin: 0 auto 0.2rem;
    font-size: 0.95rem;
}

.dash-compact .card-kpi .kpi-value {
    font-size: 1.2rem;
    margin-bottom: 0;
}

.dash-compact .card-kpi .kpi-label {
    font-size: 0.7rem;
}

.dash-compact .dash-panel .card-header {
    padding: 0.4rem 0.75rem 0.38rem;
    font-size: 0.9rem;
}

.dash-compact .dash-panel .card-body {
    padding: 0.5rem 0.7rem;
}

.dash-compact .chart-wrap {
    height: 175px;
}

.dash-compact .map-wrap {
    height: 220px;
}

@media (max-width: 575.98px) {
    .dash-compact .chart-wrap {
        height: 160px;
    }

    .dash-compact .map-wrap {
        height: 190px;
    }
}

/* ===== Tables ===== */
.table-actions {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 0.35rem;
}

.table-actions a {
    margin-right: 0;
}

.table {
    font-size: 0.96rem;
}

/* Live screenshot proved ".table thead th" never matched anything at all here - not
   just the background, but also font-size/uppercase/letter-spacing (properties Bootstrap
   never touches) weren't rendering either, so this wasn't a specificity fight, it was the
   wrong selector: this app's GridView header row apparently isn't wrapped in a <thead> with
   <th> cells the way that selector assumed. Every GridView's HeaderStyle CssClass is
   literally "table-light" (verified in the .aspx markup), so this now targets that class
   directly on whatever row/cell elements it actually lands on, with !important to also
   beat Bootstrap's own same-named variant rule. */
tr.table-light > th,
tr.table-light > td,
.table-light {
    font-size: 0.79rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--emerald) !important;
    border-bottom: 2px solid var(--teal) !important;
    background: linear-gradient(135deg, var(--emerald-wash), #f9f8f2) !important;
    white-space: nowrap !important;
}

.table-responsive {
    border-radius: 0.4rem;
}

/* ===== Badges ===== */
.badge-active { background-color: var(--green-600); }
.badge-inactive { background-color: var(--red); }

/* ===== My Profile page — hero, stat strip and info rows ===== */
.profile-page {
    max-width: 760px;
    margin: 0 auto;
}

.profile-hero {
    background: linear-gradient(135deg, var(--teal), var(--emerald));
    border-radius: var(--radius-lg);
    padding: 1.75rem 1rem 1.25rem;
    text-align: center;
    color: #fff;
    box-shadow: var(--shadow-md);
}

.profile-avatar-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.profile-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.85);
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
    background-color: #fff;
}

.profile-name {
    color: #fff;
    margin-bottom: 0.5rem;
    font-size: 1.32rem;
}

.profile-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.profile-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background-color: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-size: 0.86rem;
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin: -1.1rem 0.5rem 1.25rem;
    position: relative;
    z-index: 2;
}

.profile-stat {
    background-color: #fff;
    border: 1px solid var(--gray-border);
    border-radius: var(--radius-lg);
    padding: 0.6rem 0.5rem;
    text-align: center;
    box-shadow: var(--shadow-md);
}

.profile-stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-500);
    margin-bottom: 0.2rem;
}

.profile-stat-value {
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--emerald);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-section-card .card-header {
    background-color: #fff;
}

.info-list .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.1rem;
    border-bottom: 1px solid var(--gray-border);
}

.info-list .info-row:last-child {
    border-bottom: none;
}

.info-list .info-row-block {
    flex-direction: column;
    align-items: stretch;
}

.info-label {
    font-size: 0.86rem;
    color: var(--gray-500);
    flex-shrink: 0;
}

.info-value {
    font-size: 0.96rem;
    font-weight: 600;
    color: var(--gray-800);
    text-align: right;
}

.info-row-block .info-value {
    text-align: left;
    font-weight: 500;
}

.info-edit {
    max-width: 60%;
}

.info-row-block .info-edit {
    max-width: 100%;
}

@media (max-width: 575.98px) {
    .profile-stats {
        grid-template-columns: repeat(3, 1fr);
        margin-left: 0.25rem;
        margin-right: 0.25rem;
    }

    .info-edit {
        max-width: 100%;
        margin-top: 0.35rem;
    }

    .info-list .info-row {
        flex-wrap: wrap;
    }
}

/* ===== Top nav brand text label (next to the logo, hidden on very small
   screens so the bar never overflows) ===== */
.kmcc-topnav-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .kmcc-topnav-text {
        display: none;
    }

    .kmcc-username-text {
        display: none;
    }

    .kmcc-topnav-logo {
        width: 40px;
        height: 40px;
    }
}

/* =====================================================================
   Print / "Export to PDF" support (report pages use window.print(); the
   browser's own Print dialog lets the user pick "Save as PDF" - no
   server-side PDF library needed). Hides chrome, prints just the report.
   ===================================================================== */
@media print {
    .kmcc-topnav,
    .kmcc-sidebar,
    .d-print-none {
        display: none !important;
    }

    main.kmcc-content {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    body {
        background: #fff !important;
    }

    .card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        break-inside: avoid;
    }

    .kmcc-print-letterhead {
        display: block !important;
    }
}

.kmcc-print-letterhead {
    display: none;
}

/* Breathing room between options in a horizontal RadioButtonList (e.g. the
   Member / Outsider pickers) - ASP.NET renders RepeatDirection="Horizontal"
   as a single-row table with no gap between cells by default. */
.rbl-spaced td {
    padding-right: 20px;
}

/* Photo gallery (e.g. Programs/ProgramEdit.aspx) - a wrapping grid of square
   thumbnails, each with a small delete button in the corner. */
.kmcc-photo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kmcc-photo-thumb {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--gray-300, #dee2e6);
}

.kmcc-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Compact variant used for the Member Portal's view-only photo strip - combine with
   .kmcc-photo-thumb (e.g. CssClass="kmcc-photo-thumb kmcc-photo-thumb-sm"). */
.kmcc-photo-thumb-sm {
    width: 64px;
    height: 64px;
    border-radius: 6px;
}

.kmcc-photo-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(220, 53, 69, 0.9);
    color: #fff;
    border-radius: 50%;
    text-decoration: none;
}

.kmcc-photo-delete:hover {
    background: #dc3545;
    color: #fff;
}