/*
   Seiryoku theme — a Velzon-inspired admin skin written on top of Bootstrap 5.
   The palette, spacing and type scale follow the reference design; the CSS itself is our own.
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    /* Palette */
    --sk-primary: #405189;
    --sk-primary-dark: #364574;
    --sk-secondary: #3577f1;
    --sk-success: #0ab39c;
    --sk-danger: #f06548;
    --sk-warning: #f7b84b;
    --sk-info: #299cdb;
    --sk-light: #f3f6f9;
    --sk-dark: #212529;

    /* Surfaces */
    --sk-body-bg: #f3f3f9;
    --sk-card-bg: #fff;
    --sk-border: #e9ebec;
    --sk-heading: #495057;
    --sk-muted: #878a99;
    --sk-shadow: 0 1px 2px rgba(56, 65, 74, .15);

    /* Type scale — every font-size in the app keys off these three, so the whole UI can be
       resized from here. Sizes are rem against the browser's 16px root (see the html/body rule). */
    --sk-font-size: 0.875rem;   /* 14px — body copy, tables, inputs, buttons */
    --sk-font-sm: 0.8125rem;    /* 13px — helper text, small controls */
    --sk-font-xs: 0.75rem;      /* 12px — badges, uppercase labels */

    /* Sidebar */
    --sk-sidebar-bg: #405189;
    --sk-sidebar-item: #abb9e8;
    --sk-sidebar-item-hover: #fff;
    --sk-sidebar-label: #838fb9;
    --sk-sidebar-width: 250px;
    --sk-topbar-height: 70px;

    /* Bootstrap overrides */
    --bs-body-bg: var(--sk-body-bg);
    --bs-body-color: #212529;
    --bs-body-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bs-body-font-size: var(--sk-font-size);
    --bs-border-color: var(--sk-border);
    --bs-border-radius: 0.25rem;
    --bs-primary: var(--sk-primary);
    --bs-primary-rgb: 64, 81, 137;
    --bs-link-color: var(--sk-primary);
    --bs-link-color-rgb: 64, 81, 137;
    --bs-link-hover-color: var(--sk-primary-dark);
    --bs-secondary-color: var(--sk-muted);
}

html, body {
    font-family: var(--bs-body-font-family);
    background-color: var(--sk-body-bg);
    color: var(--bs-body-color);
}

/* Body only, deliberately. A rem font-size on html resolves against the initial 16px and then
   becomes the root every other rem below is measured from — setting it on both applied the
   scale twice and rendered body copy at 10.6px instead of the intended size. */
body { font-size: var(--bs-body-font-size); }

h1, h2, h3, h4, h5, h6 {
    color: var(--sk-heading);
    font-weight: 600;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.15rem; }
h4, h5 { font-size: 1.05rem; }
h6 { font-size: 0.95rem; }

.lead { font-size: 1.05rem; font-weight: 400; }

a {
    color: var(--sk-primary);
    text-decoration: none;
}

    a:hover { color: var(--sk-primary-dark); text-decoration: underline; }

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

h1:focus { outline: none; }

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

.page-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

    .page-title h1 { margin-bottom: 0; }

    .page-title .page-subtitle {
        width: 100%;
        margin: -0.35rem 0 0;
        color: var(--sk-muted);
    }

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

.card {
    background-color: var(--sk-card-bg);
    border: none;
    border-radius: 0.25rem;
    box-shadow: var(--sk-shadow);
    margin-bottom: 1.5rem;
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--sk-border);
    padding: 1rem;
}

    .card-header h1, .card-header h2, .card-header h3,
    .card-header h4, .card-header h5, .card-header h6 { margin-bottom: 0; }

.card-body { padding: 1rem; }

/* ---------- Stat cards ---------- */

.stat-card .stat-label {
    display: block;
    font-size: var(--sk-font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sk-muted);
    margin-bottom: 0.85rem;
}

.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--sk-heading);
    line-height: 1.1;
}

/* Tinted rounded square with the glyph masked inside it. */
.stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
}

    .stat-icon::before {
        content: '';
        width: 1.3rem;
        height: 1.3rem;
        background-color: currentColor;
        -webkit-mask: var(--icon) no-repeat center / contain;
        mask: var(--icon) no-repeat center / contain;
    }

.stat-icon-primary { background-color: rgba(64, 81, 137, .15); color: var(--sk-primary); }
.stat-icon-success { background-color: rgba(10, 179, 156, .15); color: var(--sk-success); }
.stat-icon-info { background-color: rgba(41, 156, 219, .15); color: var(--sk-info); }
.stat-icon-warning { background-color: rgba(247, 184, 75, .2); color: #b07d24; }

/* ---------- Shared icon glyphs ---------- */
/* Each class only carries the artwork; consumers decide size and colour. */

.icon-home { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354z'/%3E%3C/svg%3E"); }

.icon-members { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5'/%3E%3C/svg%3E"); }

.icon-memberships { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.669.864 8 0 6.331.864l-1.858.282-.842 1.68-1.337 1.32L2.6 6l-.306 1.854 1.337 1.32.842 1.68 1.858.282L8 12l1.669-.864 1.858-.282.842-1.68 1.337-1.32L13.4 6l.306-1.854-1.337-1.32-.842-1.68zm1.196 1.193.684 1.365 1.086 1.072L12.387 6l.248 1.506-1.086 1.072-.684 1.365-1.51.229L8 10.874l-1.355-.702-1.51-.229-.684-1.365-1.086-1.072L3.614 6l-.25-1.506 1.087-1.072.684-1.365 1.51-.229L8 1.126l1.356.702z'/%3E%3Cpath d='M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1z'/%3E%3C/svg%3E"); }

.icon-payments { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v1h14V4a1 1 0 0 0-1-1zm13 4H1v5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1z'/%3E%3Cpath d='M2 10a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }

.icon-ledger { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 10.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5m0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5'/%3E%3Cpath d='M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2'/%3E%3Cpath d='M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1z'/%3E%3C/svg%3E"); }

.icon-history { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 1 0 4.95 11.95l.707.707A8 8 0 1 1 8 0z'/%3E%3Cpath d='M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5'/%3E%3Cpath d='M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022zm2.004.45a7 7 0 0 0-.985-.299l.219-.976c.383.086.76.2 1.126.342zm1.37.71a7 7 0 0 0-.439-.27l.493-.87c.34.194.669.408.979.654l-.615.789a7 7 0 0 0-.418-.302zm1.834 1.79a7 7 0 0 0-.653-.796l.724-.69c.27.285.52.59.747.91zm.744 1.352a7 7 0 0 0-.214-.468l.893-.45c.18.359.33.723.45 1.088l-.95.313a7 7 0 0 0-.179-.483m.53 2.507a7 7 0 0 0-.1-1.025l.985-.17c.067.386.106.778.116 1.17z'/%3E%3C/svg%3E"); }

.icon-users { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z'/%3E%3C/svg%3E"); }

.icon-roles { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.338 1.59a61 61 0 0 0-2.837.856.48.48 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.7 10.7 0 0 0 2.287 2.233c.346.244.652.42.893.533q.18.085.293.118a1 1 0 0 0 .101.025 1 1 0 0 0 .1-.025q.114-.034.294-.118c.24-.113.547-.29.893-.533a10.7 10.7 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524M5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.8 11.8 0 0 1-2.517 2.453 7 7 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7 7 0 0 1-1.048-.625 11.8 11.8 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 63 63 0 0 1 5.072.56'/%3E%3C/svg%3E"); }

.icon-settings { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0'/%3E%3Cpath d='M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.87.87 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.87.87 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.87.87 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.87.87 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.87.87 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.87.87 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.87.87 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.87.87 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.87 1.87 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.87 1.87 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.87 1.87 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.87 1.87 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.87 1.87 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.87 1.87 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.87 1.87 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.87 1.87 0 0 0 2.692-1.115z'/%3E%3C/svg%3E"); }

.icon-branding { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 5.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1M5.5 7a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1M5 9.5a.5.5 0 1 0-1 0 .5.5 0 0 0 1 0m6-2a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1'/%3E%3Cpath d='M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8m-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7'/%3E%3C/svg%3E"); }

.icon-bank { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m8 0 6.61 3h.89a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5H15v7a.5.5 0 0 1 .485.38l.5 2a.498.498 0 0 1-.485.62H.5a.498.498 0 0 1-.485-.62l.5-2A.5.5 0 0 1 1 13V6H.5a.5.5 0 0 1-.5-.5v-2A.5.5 0 0 1 .5 3h.89zM3.777 3h8.447L8 1zM2 6v7h1V6zm2 0v7h2.5V6zm3.5 0v7h1V6zm2 0v7H12V6zm3 0v7h1V6zm2.5 8H1.283l-.25 1h13.934l-.25-1z'/%3E%3C/svg%3E"); }
.icon-mail { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z'/%3E%3C/svg%3E"); }
.icon-notes { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2M8 1.918l-.797.161A4 4 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4 4 0 0 0-3.203-3.92zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5 5 0 0 1 13 6c0 .88.32 4.2 1.22 6'/%3E%3C/svg%3E"); }
.icon-documents { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5zM5 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5A.5.5 0 0 1 5 8m0 2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E"); }

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

.btn {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 0.9rem;
    --bs-btn-font-size: var(--sk-font-size);
    --bs-btn-font-weight: 400;
    --bs-btn-border-radius: 0.25rem;
}

.btn-sm {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: var(--sk-font-sm);
}

.btn-primary {
    --bs-btn-bg: var(--sk-primary);
    --bs-btn-border-color: var(--sk-primary);
    --bs-btn-hover-bg: var(--sk-primary-dark);
    --bs-btn-hover-border-color: var(--sk-primary-dark);
    --bs-btn-active-bg: var(--sk-primary-dark);
    --bs-btn-active-border-color: var(--sk-primary-dark);
    --bs-btn-disabled-bg: var(--sk-primary);
    --bs-btn-disabled-border-color: var(--sk-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--sk-primary);
    --bs-btn-border-color: var(--sk-primary);
    --bs-btn-hover-bg: var(--sk-primary);
    --bs-btn-hover-border-color: var(--sk-primary);
    --bs-btn-active-bg: var(--sk-primary);
    --bs-btn-active-border-color: var(--sk-primary);
}

.btn-danger {
    --bs-btn-bg: var(--sk-danger);
    --bs-btn-border-color: var(--sk-danger);
    --bs-btn-hover-bg: #d9573c;
    --bs-btn-hover-border-color: #d9573c;
    --bs-btn-active-bg: #d9573c;
    --bs-btn-active-border-color: #d9573c;
}

.btn-outline-danger {
    --bs-btn-color: var(--sk-danger);
    --bs-btn-border-color: var(--sk-danger);
    --bs-btn-hover-bg: var(--sk-danger);
    --bs-btn-hover-border-color: var(--sk-danger);
}

.btn-outline-secondary {
    --bs-btn-color: var(--sk-muted);
    --bs-btn-border-color: var(--sk-border);
    --bs-btn-hover-bg: var(--sk-light);
    --bs-btn-hover-border-color: var(--sk-border);
    --bs-btn-hover-color: var(--sk-heading);
    --bs-btn-active-bg: var(--sk-light);
    --bs-btn-active-color: var(--sk-heading);
}

.btn-outline-warning {
    --bs-btn-color: #b07d24;
    --bs-btn-border-color: var(--sk-warning);
    --bs-btn-hover-bg: var(--sk-warning);
    --bs-btn-hover-border-color: var(--sk-warning);
    --bs-btn-hover-color: #fff;
}

.btn-link { color: var(--sk-primary); }

.btn:focus, .btn:active:focus, .form-control:focus,
.form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.15rem rgba(64, 81, 137, .25);
}

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

.form-label {
    font-size: var(--sk-font-size);
    font-weight: 500;
    color: var(--sk-heading);
    margin-bottom: 0.35rem;
}

.form-control, .form-select {
    font-size: var(--sk-font-size);
    padding: 0.5rem 0.9rem;
    border-color: var(--sk-border);
    border-radius: 0.25rem;
    color: var(--bs-body-color);
}

    .form-control:focus, .form-select:focus { border-color: #a3adcc; }

.form-control-sm, .form-select-sm { font-size: var(--sk-font-sm); padding: 0.25rem 0.6rem; }

.form-text { font-size: var(--sk-font-sm); color: var(--sk-muted); }

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

.valid.modified:not([type=checkbox]) { outline: none; border-color: var(--sk-success); }

.invalid { outline: none; border-color: var(--sk-danger); }

.validation-message { color: var(--sk-danger); font-size: var(--sk-font-sm); }

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

.table {
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--sk-border);
    --bs-table-striped-bg: #f8f9fb;
    --bs-table-hover-bg: #f3f6f9;
    font-size: var(--sk-font-size);
    margin-bottom: 0;
}

    .table > thead > tr > th {
        font-weight: 600;
        font-size: var(--sk-font-size);
        color: var(--sk-muted);
        background-color: var(--sk-light);
        border-bottom: 1px solid var(--sk-border);
        padding: 0.75rem 1rem;
        white-space: nowrap;
    }

    .table > tbody > tr > td { padding: 0.75rem 1rem; vertical-align: middle; }

/* A table filling a card body sits flush with the card edges. */
.card-body.p-0 > .table-responsive > .table > thead > tr > th:first-child,
.card-body.p-0 > .table-responsive > .table > tbody > tr > td:first-child { padding-left: 1rem; }

.card-body.p-0 > .table-responsive > .table > tbody > tr:last-child > td { border-bottom: 0; }

/* ---------- Badges ---------- */
/* Velzon-style soft badges: tinted background with the matching text colour. */

.badge { font-weight: 500; font-size: var(--sk-font-xs); padding: 0.3em 0.6em; border-radius: 0.25rem; }

.badge.text-bg-success { background-color: rgba(10, 179, 156, .12) !important; color: #0ab39c !important; }
.badge.text-bg-danger { background-color: rgba(240, 101, 72, .12) !important; color: #f06548 !important; }
.badge.text-bg-warning { background-color: rgba(247, 184, 75, .18) !important; color: #b07d24 !important; }
.badge.text-bg-info { background-color: rgba(41, 156, 219, .12) !important; color: #299cdb !important; }
.badge.text-bg-secondary { background-color: rgba(135, 138, 153, .14) !important; color: #878a99 !important; }
.badge.text-bg-light { background-color: var(--sk-light) !important; color: var(--sk-muted) !important; }
.badge.text-bg-primary { background-color: rgba(64, 81, 137, .12) !important; color: var(--sk-primary) !important; }

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

.alert { border: none; border-radius: 0.25rem; font-size: var(--sk-font-size); padding: 0.85rem 1rem; }
.alert-info { background-color: rgba(41, 156, 219, .12); color: #1c6ea4; }
.alert-warning { background-color: rgba(247, 184, 75, .18); color: #96691c; }
.alert-danger { background-color: rgba(240, 101, 72, .12); color: #b23c22; }
.alert-success { background-color: rgba(10, 179, 156, .12); color: #067a6b; }

/* ---------- Tabs ---------- */

.nav-tabs {
    border-bottom: 1px solid var(--sk-border);
    gap: 0.25rem;
}

    .nav-tabs .nav-link {
        border: none;
        border-bottom: 2px solid transparent;
        color: var(--sk-muted);
        font-weight: 500;
        padding: 0.6rem 1rem;
        background: none;
    }

        .nav-tabs .nav-link:hover { color: var(--sk-primary); border-bottom-color: #cfd5e6; }

        .nav-tabs .nav-link.active {
            color: var(--sk-primary);
            border-bottom-color: var(--sk-primary);
            background: none;
        }

/* ---------- Dropdowns ---------- */

.dropdown-menu {
    min-width: 12rem;
    padding: 0.35rem 0;
    font-size: var(--sk-font-size);
    border: 1px solid var(--sk-border);
    border-radius: 0.25rem;
    box-shadow: 0 5px 12px rgba(30, 32, 37, .12);
}

.dropdown-header {
    padding: 0.5rem 1rem;
    font-size: var(--sk-font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sk-muted);
}

.dropdown-divider {
    margin: 0.25rem 0;
    border-top-color: var(--sk-border);
}

.dropdown-item {
    width: 100%;
    padding: 0.5rem 1rem;
    text-align: start;
    background: none;
    border: none;
    color: var(--bs-body-color);
}

    .dropdown-item:hover, .dropdown-item:focus {
        background-color: var(--sk-light);
        color: var(--sk-primary);
    }

/* ---------- Modals ---------- */

.modal-content { border: none; border-radius: 0.35rem; box-shadow: 0 5px 20px rgba(30, 32, 37, .18); }
.modal-header { border-bottom: 1px solid var(--sk-border); padding: 1rem; }
.modal-title { font-size: 1.05rem; font-weight: 600; color: var(--sk-heading); }
.modal-body { padding: 1rem; }
.modal-footer { border-top: 1px solid var(--sk-border); padding: 0.75rem 1rem; }
.modal-backdrop.show { opacity: 0.35; }

/* ---------- Sign-in pages ---------- */
/* Shared by the password, two-factor setup and two-factor verification pages. */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-image: linear-gradient(160deg,
        var(--sk-sidebar-bg, #405189) 0%,
        var(--sk-primary-dark, #364574) 100%);
}

.login-card {
    width: 100%;
    max-width: 24rem;
    background: var(--sk-card-bg);
    border-radius: 0.5rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25);
    padding: 2rem;
    text-align: center;
}

    /* Enrolment needs room for a QR code and a block of recovery codes. */
    .login-card.login-card-wide { max-width: 30rem; }

    .login-card form { text-align: start; }

/* Club logo above the sign-in form, capped so tall images cannot dominate the card. */
.login-logo {
    max-width: 100%;
    max-height: 4.5rem;
    object-fit: contain;
    margin-bottom: 0.5rem;
}

/* ---------- Two-factor enrolment ---------- */

.method-choice {
    display: grid;
    gap: 0.75rem;
}

.method-option {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 1rem;
    text-align: start;
    background: none;
    border: 1px solid var(--sk-border);
    border-radius: 0.35rem;
    color: var(--bs-body-color);
    cursor: pointer;
}

    .method-option:hover {
        border-color: var(--sk-primary);
        background-color: var(--sk-light);
    }

.method-icon {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: 0.25rem;
    background-color: rgba(64, 81, 137, .12);
    color: var(--sk-primary);
}

    .method-icon::before {
        content: '';
        margin: auto;
        width: 1.2rem;
        height: 1.2rem;
        background-color: currentColor;
        -webkit-mask: var(--icon) no-repeat center / contain;
        mask: var(--icon) no-repeat center / contain;
    }

/* The QR code is an inline SVG, sized here rather than by the generator. */
.qr-code {
    display: flex;
    justify-content: center;
}

    .qr-code svg {
        width: 11rem;
        height: 11rem;
        border: 1px solid var(--sk-border);
        border-radius: 0.35rem;
        padding: 0.4rem;
        background: #fff;
    }

.manual-key {
    font-family: var(--bs-font-monospace, monospace);
    font-size: var(--sk-font-size);
    letter-spacing: 0.06em;
    text-align: center;
    padding: 0.5rem;
    background-color: var(--sk-light);
    border-radius: 0.25rem;
    word-break: break-all;
}

.recovery-codes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.4rem;
    padding: 0.85rem;
    background-color: var(--sk-light);
    border-radius: 0.35rem;
}

    .recovery-codes code {
        color: var(--sk-heading);
        font-size: var(--sk-font-size);
        letter-spacing: 0.04em;
    }

/* ---------- Misc ---------- */

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
    border-radius: 0.25rem;
}

    .blazor-error-boundary::after { content: "An error has occurred." }

.darker-border-checkbox.form-check-input { border-color: #929292; }