/* =====================================================================
   SocietyBillBook — Application Theme
   ---------------------------------------------------------------------
   Brand design system extracted from https://societybillbook.com/
   (site :root tokens + computed styles). Load this file LAST, after
   bootstrap.min.css and main.css, on every master page / standalone page.

   Society pages  : <link rel="stylesheet" href="assets/css/theme.css" />
   Root pages     : <link rel="stylesheet" href="Society/assets/css/theme.css" />

   All colours used by the application should come from the --sbb-*
   tokens below. Change a token here and the whole app follows.
   ===================================================================== */

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

/* ---------------------------------------------------------------------
   1. Brand tokens
   --------------------------------------------------------------------- */
:root {
    /* Brand — from website :root (--blue-*, --orange-*) */
    --sbb-primary: #2563EB;          /* website --blue-700 : buttons, links, active nav */
    --sbb-primary-hover: #1D4ED8;    /* website --blue-800 : hover / pressed            */
    --sbb-primary-dark: #1E3A8A;     /* website --blue-900 : headings on tint, gradient */
    --sbb-primary-light: #DBEAFE;    /* selected rows, soft badges                      */
    --sbb-primary-50: #EFF6FF;       /* active nav background, table header             */
    --sbb-primary-ring: rgba(37, 99, 235, 0.15);

    --sbb-secondary: #1E3A8A;        /* deep navy — secondary emphasis                  */
    --sbb-accent: #F97316;           /* website --orange-500 : "Free Demo" CTA          */
    --sbb-accent-hover: #EA580C;     /* website --orange-600                            */
    --sbb-accent-light: #FFF7ED;

    /* Surfaces */
    --sbb-page-bg: #F8FAFC;          /* website --gray-50  */
    --sbb-card-bg: #FFFFFF;
    --sbb-header-bg: #FFFFFF;
    --sbb-sidebar-bg: #FFFFFF;
    --sbb-muted-bg: #F1F5F9;         /* website --gray-100 */
    --sbb-footer-bg: #030712;        /* website --gray-950 (site footer) */

    /* Text */
    --sbb-text: #1F2937;             /* website --gray-800 : body copy / headings */
    --sbb-text-strong: #0F172A;
    --sbb-text-secondary: #475569;   /* website --gray-600 */
    --sbb-text-muted: #64748B;       /* website --gray-500 */
    --sbb-text-on-primary: #FFFFFF;

    /* Lines */
    --sbb-border: #E2E8F0;           /* website --gray-200 */
    --sbb-border-strong: #CBD5E1;    /* form control outline (contrast on white) */

    /* Status (website uses green-600 / red-500 / cyan-600 / orange) */
    --sbb-success: #16A34A;
    --sbb-success-hover: #15803D;
    --sbb-success-light: #DCFCE7;
    --sbb-warning: #F59E0B;
    --sbb-warning-hover: #D97706;
    --sbb-warning-light: #FEF3C7;
    --sbb-danger: #DC2626;
    --sbb-danger-hover: #B91C1C;
    --sbb-danger-light: #FEE2E2;
    --sbb-info: #0891B2;
    --sbb-info-hover: #0E7490;
    --sbb-info-light: #CFFAFE;

    /* Tables */
    --sbb-table-head-bg: #EFF6FF;
    --sbb-table-head-text: #1E3A8A;
    --sbb-table-row-hover: #F8FAFC;
    --sbb-table-row-selected: #DBEAFE;
    --sbb-table-stripe: #FBFCFE;

    /* Navigation */
    --sbb-nav-text: #334155;
    --sbb-nav-hover-bg: #F1F5F9;
    --sbb-nav-active-bg: #EFF6FF;
    --sbb-nav-active-text: #1D4ED8;

    /* Shape & depth (website uses 14px inputs / 18px buttons / 24-35px cards;
       slightly tightened for a dense business UI) */
    --sbb-radius-sm: 8px;
    --sbb-radius: 10px;
    --sbb-radius-lg: 16px;
    --sbb-radius-pill: 999px;
    --sbb-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --sbb-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);   /* website header */
    --sbb-shadow-lg: 0 20px 45px rgba(15, 23, 42, 0.08); /* website --shadow-lg */
    --sbb-shadow-primary: 0 8px 18px rgba(37, 99, 235, 0.22);

    /* Spacing */
    --sbb-space-1: 4px;
    --sbb-space-2: 8px;
    --sbb-space-3: 12px;
    --sbb-space-4: 16px;
    --sbb-space-5: 24px;

    /* Typography */
    --sbb-font: "Poppins", "Segoe UI", Roboto, Arial, sans-serif;
    --sbb-font-size: 14px;
    --sbb-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.25);

    /* --- Map Iconic template variables onto the brand (neutrals) --- */
    --dark-color: #1F2937;
    --heading-color: #1F2937;
    --font-color: #334155;
    --font-light: #64748B;
    --font-xlight: #F1F5F9;
    --text-muted: #64748B;
    --border-color: #E2E8F0;
    --card-color: #FFFFFF;
    --body-color: #F8FAFC;
    --box-shadow: #CBD5E1;
    --box-shadow-light: #E2E8F0;
}

/* Map the template's per-skin accent variables (theme-cyan etc.).
   #wrapper[class] outranks main.css's [class="theme-cyan"]. */
:root,
#wrapper[class^="theme-"],
[class^="theme-"] {
    --primary-color: #2563EB;
    --primary-color2: #1D4ED8;
    --primary-color3: #93C5FD;
    --secondary-color: #F97316;
    --secondary-color2: #EA580C;
    --link-color: #2563EB;
    --primary-gradient: linear-gradient(135deg, #2563EB, #1E3A8A);
}

/* ---------------------------------------------------------------------
   2. Base & typography
   --------------------------------------------------------------------- */
html, body,
body.font-nunito, body.font-ubuntu, body.font-raleway, body.font-IBMplex {
    font-family: var(--sbb-font);
}

body {
    background: var(--sbb-page-bg);
    color: var(--font-color);
    font-size: var(--sbb-font-size);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--sbb-font);
    color: var(--sbb-text);
}

a { color: var(--sbb-primary); }
a:hover, a:focus { color: var(--sbb-primary-hover); }

::selection { background: var(--sbb-primary-light); color: var(--sbb-text-strong); }

/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--sbb-primary);
    outline-offset: 2px;
}

.text-primary { color: var(--sbb-primary) !important; }
.text-success { color: var(--sbb-success) !important; }
.text-danger  { color: var(--sbb-danger) !important; }
.text-warning { color: var(--sbb-warning-hover) !important; }
.text-info    { color: var(--sbb-info) !important; }
.text-muted   { color: var(--sbb-text-muted) !important; }
.bg-primary   { background-color: var(--sbb-primary) !important; }
.bg-success   { background-color: var(--sbb-success) !important; }
.bg-danger    { background-color: var(--sbb-danger) !important; }
.bg-warning   { background-color: var(--sbb-warning) !important; }
.bg-info      { background-color: var(--sbb-info) !important; }

/* ---------------------------------------------------------------------
   3. Page loader
   --------------------------------------------------------------------- */
.page-loader-wrapper { background: var(--sbb-page-bg); }
.page-loader-wrapper .loader p { color: var(--sbb-text-secondary); font-weight: 500; }
.page-loader-wrapper .loader img { width: auto; max-width: 180px; height: auto; max-height: 48px; }

/* ---------------------------------------------------------------------
   4. Header / top navigation
   --------------------------------------------------------------------- */
.navbar-fixed-top,
.navbar.navbar-fixed-top {
    background: var(--sbb-header-bg);
    border-bottom: 1px solid var(--sbb-border);
    box-shadow: var(--sbb-shadow);
}

.navbar-fixed-top .navbar-brand a,
.navbar-fixed-top .navbar-brand a span {
    color: var(--sbb-text);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.01em;
}

.navbar-fixed-top .navbar-brand button,
.navbar-fixed-top .btn-toggle-offcanvas,
.navbar-fixed-top .btn-toggle-fullwidth {
    color: var(--sbb-text-secondary);
    border-radius: var(--sbb-radius-sm);
}

.navbar-fixed-top .icon-menu,
.navbar-fixed-top .navbar-nav > li > a {
    color: var(--sbb-text-secondary);
    border-radius: var(--sbb-radius-sm);
    transition: color .15s ease, background-color .15s ease;
}

.navbar-fixed-top .icon-menu:hover,
.navbar-fixed-top .navbar-nav > li > a:hover,
.navbar-fixed-top .btn-toggle-offcanvas:hover,
.navbar-fixed-top .btn-toggle-fullwidth:hover {
    color: var(--sbb-primary);
    background: var(--sbb-primary-50);
}

/* Logout / power icon keeps its meaning but in brand red */
.navbar-fixed-top .icon-menu .fa-power-off:hover { color: var(--sbb-danger); }

/* ---------------------------------------------------------------------
   5. Sidebar & submenu
   --------------------------------------------------------------------- */
#left-sidebar,
.sidebar {
    background: var(--sbb-sidebar-bg);
    border-right: 1px solid var(--sbb-border);
    box-shadow: none;
}

#left-sidebar .user-account {
    color: var(--sbb-text-secondary);
}

#left-sidebar .user-account .user-photo {
    border: 2px solid var(--sbb-primary-light);
}

#left-sidebar .user-account .user-name,
#left-sidebar .user-account .user-name span {
    color: var(--sbb-text);
}

#left-sidebar .user-account hr { border-top-color: var(--sbb-border); }

.sidebar-nav .metismenu a {
    color: var(--sbb-nav-text);
    border-radius: var(--sbb-radius);
    font-size: 14px;
    font-weight: 500;
    transition: color .15s ease, background-color .15s ease;
}

.sidebar-nav .metismenu > li > a > i {
    color: var(--sbb-text-muted);
    transition: color .15s ease;
}

.sidebar-nav .metismenu a:hover,
.sidebar-nav .metismenu a:focus {
    color: var(--sbb-primary);
    background: var(--sbb-nav-hover-bg);
    text-decoration: none;
}

.sidebar-nav .metismenu a:hover > i { color: var(--sbb-primary); }

/* Template frames the active / expanded group with a border — soften it */
.sidebar-nav .metismenu > li.active,
.sidebar-nav .metismenu > li.mm-active {
    border-color: var(--sbb-primary-light) !important;
    border-radius: 12px;
}

.sidebar-nav .metismenu > li.active > a,
.sidebar-nav .metismenu > li.mm-active > a {
    color: var(--sbb-nav-active-text);
    background: var(--sbb-nav-active-bg);
    border-radius: var(--sbb-radius);
    font-weight: 600;
}

.sidebar-nav .metismenu > li.active > a > i,
.sidebar-nav .metismenu > li.mm-active > a > i { color: var(--sbb-primary); }

/* Submenu */
.sidebar-nav .metismenu ul a {
    color: var(--sbb-text-secondary);
    font-weight: 400;
    font-size: 13.5px;
}

/* Template bullet is a text glyph ("--") — colour it, don't fill it */
.sidebar-nav .metismenu ul a::before { color: var(--sbb-border-strong); }

.sidebar-nav .metismenu ul li.active > a,
.sidebar-nav .metismenu ul li.mm-active > a {
    color: var(--sbb-primary);
    font-weight: 600;
}

.sidebar-nav .metismenu ul li.active > a::before,
.sidebar-nav .metismenu ul a:hover::before { color: var(--sbb-primary); }

.sidebar-nav .metismenu .has-arrow::after { border-color: var(--sbb-text-muted); }

/* ---------------------------------------------------------------------
   6. Content area, page header & breadcrumbs
   --------------------------------------------------------------------- */
#main-content { background: var(--sbb-page-bg); }

.block-header { color: var(--sbb-text); }
.block-header h2 {
    color: var(--sbb-text);
    font-weight: 600;
    font-size: 20px;
}

.breadcrumb { background: transparent; }
.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a { color: var(--sbb-text-muted); }
.breadcrumb .breadcrumb-item a:hover { color: var(--sbb-primary); }
.breadcrumb .breadcrumb-item.active,
.breadcrumb .breadcrumb-item.active a { color: var(--sbb-primary); font-weight: 500; }

hr { border-top-color: var(--sbb-border); }

/* ---------------------------------------------------------------------
   7. Cards, panels & summary widgets
   --------------------------------------------------------------------- */
.card {
    background: var(--sbb-card-bg);
    border: 1px solid var(--sbb-border);
    border-radius: var(--sbb-radius-lg);
    box-shadow: var(--sbb-shadow-sm);
}

.card .header {
    border-bottom: 0;
}

.card .header h2,
.card .header .title {
    color: var(--sbb-text);
    font-weight: 600;
}

.card .body { color: var(--font-color); }

.card-header {
    background: var(--sbb-card-bg);
    border-bottom: 1px solid var(--sbb-border);
    border-top-left-radius: var(--sbb-radius-lg) !important;
    border-top-right-radius: var(--sbb-radius-lg) !important;
    font-weight: 600;
    color: var(--sbb-text);
}

.card-footer {
    background: var(--sbb-page-bg);
    border-top: 1px solid var(--sbb-border);
}

/* Standalone headings inside forms (e.g. "WING MASTER") */
#main-content .card .body h4 b,
#main-content .card .body h3 b { color: var(--sbb-text); }

/* ---------------------------------------------------------------------
   8. Buttons
   --------------------------------------------------------------------- */
.btn {
    font-family: var(--sbb-font);
    font-weight: 600;
    border-radius: var(--sbb-radius);
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, box-shadow .15s ease;
}

.btn:focus,
.btn.focus { box-shadow: var(--sbb-focus-ring); }

.btn-xs, .btn-group-xs > .btn { border-radius: var(--sbb-radius-sm); }

/* Primary — brand blue */
.btn-primary,
.btn.btn-primary {
    background-color: var(--sbb-primary);
    border-color: var(--sbb-primary);
    color: var(--sbb-text-on-primary);
}
.btn-primary:hover,
.btn.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary.active {
    background-color: var(--sbb-primary-hover);
    border-color: var(--sbb-primary-hover);
    color: var(--sbb-text-on-primary);
    box-shadow: var(--sbb-shadow-primary);
}
.btn-primary:focus,
.btn-primary.focus { background-color: var(--sbb-primary-hover); border-color: var(--sbb-primary-hover); color: #fff; }
.btn-primary.disabled,
.btn-primary:disabled { background-color: var(--sbb-primary); border-color: var(--sbb-primary); opacity: .55; }

/* Secondary / default — website "ghost" button
   (.btn.btn-secondary outranks main.css, which paints it with --secondary-color) */
.btn.btn-secondary,
.btn-default,
.btn.btn-default {
    background-color: #FFFFFF;
    border: 1px solid var(--sbb-border-strong);
    color: var(--sbb-text);
}
.btn.btn-secondary:hover,
.btn-default:hover,
.btn.btn-secondary:not(:disabled):not(.disabled):active,
.btn-default:not(:disabled):not(.disabled):active,
.btn.btn-secondary:focus,
.btn-default:focus {
    background-color: var(--sbb-muted-bg);
    border-color: var(--sbb-border-strong);
    color: var(--sbb-text-strong);
}

/* Muted / light — website "muted" button */
.btn-light {
    background-color: var(--sbb-muted-bg);
    border-color: var(--sbb-muted-bg);
    color: var(--sbb-text);
}
.btn-light:hover,
.btn-light:focus { background-color: var(--sbb-border); border-color: var(--sbb-border); color: var(--sbb-text-strong); }

/* Outline */
.btn-outline,
.btn-outline-primary {
    background-color: transparent;
    border: 1px solid var(--sbb-primary);
    color: var(--sbb-primary);
}
.btn-outline:hover,
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--sbb-primary);
    border-color: var(--sbb-primary);
    color: #fff;
}

.btn-outline-secondary { border-color: var(--sbb-border-strong); color: var(--sbb-text-secondary); }
.btn-outline-secondary:hover { background: var(--sbb-muted-bg); border-color: var(--sbb-border-strong); color: var(--sbb-text); }

/* Accent — website orange CTA */
.btn-accent,
.btn-warning {
    background-color: var(--sbb-accent);
    border-color: var(--sbb-accent);
    color: #fff;
}
.btn-accent:hover,
.btn-warning:hover,
.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:focus {
    background-color: var(--sbb-accent-hover);
    border-color: var(--sbb-accent-hover);
    color: #fff;
}

/* Status buttons */
.btn-success { background-color: var(--sbb-success); border-color: var(--sbb-success); color: #fff; }
.btn-success:hover,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active { background-color: var(--sbb-success-hover); border-color: var(--sbb-success-hover); color: #fff; }

.btn-danger { background-color: var(--sbb-danger); border-color: var(--sbb-danger); color: #fff; }
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active { background-color: var(--sbb-danger-hover); border-color: var(--sbb-danger-hover); color: #fff; }

.btn-info { background-color: var(--sbb-info); border-color: var(--sbb-info); color: #fff; }
.btn-info:hover,
.btn-info:focus,
.btn-info:not(:disabled):not(.disabled):active { background-color: var(--sbb-info-hover); border-color: var(--sbb-info-hover); color: #fff; }

.btn-link { color: var(--sbb-primary); font-weight: 500; }
.btn-link:hover { color: var(--sbb-primary-hover); }

/* Legacy <asp:Button> controls that render inline brand colours
   (BackColor="#2563EB") — give them the same shape and hover as .btn. */
input[type="submit"][style*="2563EB" i],
input[type="button"][style*="2563EB" i] {
    border-radius: var(--sbb-radius);
    border-style: solid;
    border-width: 1px;
    font-family: var(--sbb-font);
    cursor: pointer;
    transition: filter .15s ease, box-shadow .15s ease;
}
input[type="submit"][style*="2563EB" i]:hover,
input[type="button"][style*="2563EB" i]:hover {
    filter: brightness(0.9);
    box-shadow: var(--sbb-shadow-primary);
}

/* ---------------------------------------------------------------------
   9. Forms, inputs, dropdowns, checkboxes
   --------------------------------------------------------------------- */
.form-control,
.custom-select,
#main-content input[type="text"]:not(.fstsearchinput),
#main-content input[type="number"],
#main-content input[type="date"],
#main-content input[type="email"],
#main-content input[type="password"],
#main-content select,
#main-content textarea {
    font-family: var(--sbb-font);
    color: var(--sbb-text);
    background-color: #FFFFFF;
    border: 1px solid var(--sbb-border-strong);
    border-radius: var(--sbb-radius);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:hover,
.custom-select:hover { border-color: #94A3B8; }

.form-control:focus,
.custom-select:focus,
#main-content input:focus,
#main-content select:focus,
#main-content textarea:focus {
    border-color: var(--sbb-primary);
    box-shadow: 0 0 0 4px var(--sbb-primary-ring);   /* website calc-field focus */
    outline: none;
}

.form-control::placeholder { color: #94A3B8; opacity: 1; }

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--sbb-muted-bg);
    color: var(--sbb-text-secondary);
}

label,
.control-label { color: var(--sbb-text-secondary); font-weight: 500; }

.input-group-text {
    background: var(--sbb-muted-bg);
    border-color: var(--sbb-border-strong);
    color: var(--sbb-text-secondary);
}
.input-group > .input-group-prepend > .input-group-text { border-radius: var(--sbb-radius) 0 0 var(--sbb-radius); }
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-append > .btn { border-radius: 0 var(--sbb-radius) var(--sbb-radius) 0; }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }

input[type="checkbox"],
input[type="radio"] { accent-color: var(--sbb-primary); }

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--sbb-primary);
    border-color: var(--sbb-primary);
}
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: var(--sbb-focus-ring); }

.fancy-checkbox input[type="checkbox"]:checked + span::before {
    background: var(--sbb-primary);
    border-color: var(--sbb-primary);
}

/* Validation colours (keep meaning, brand shade) */
.is-invalid, .form-control.is-invalid { border-color: var(--sbb-danger) !important; }
.invalid-feedback { color: var(--sbb-danger); }
.is-valid, .form-control.is-valid { border-color: var(--sbb-success) !important; }

/* fstdropdown (searchable select plugin) */
.fstdropdown {
    border: 1px solid var(--sbb-border-strong);
    border-radius: var(--sbb-radius);
    background: #FFFFFF;
}
.fstdropdown > .fstselected {
    color: var(--sbb-text);
    box-shadow: none;
    font-family: var(--sbb-font);
}
.fstdiv.open > .fstdropdown,
.fstdropdown.open {
    border-color: var(--sbb-primary);
    box-shadow: 0 0 0 4px var(--sbb-primary-ring);
}
.fstdropdown .fstsearchinput {
    border: 1px solid var(--sbb-border-strong);
    border-radius: var(--sbb-radius-sm);
}
.fstdropdown .fstlist > div:hover,
.fstdropdown .fstlist > div.hover { background: var(--sbb-primary-50); color: var(--sbb-primary-hover); }
.fstdropdown .fstlist > div.selected { background: var(--sbb-primary); color: #fff; }

/* Bootstrap datepicker */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active,
.datepicker table tr td.selected,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
    background: var(--sbb-primary) !important;
    background-image: none !important;
    border-color: var(--sbb-primary) !important;
    color: #fff !important;
    text-shadow: none;
}
.datepicker table tr td.today { background: var(--sbb-accent-light) !important; background-image: none !important; color: var(--sbb-accent-hover) !important; }
.datepicker.dropdown-menu { border-radius: var(--sbb-radius); box-shadow: var(--sbb-shadow-lg); border-color: var(--sbb-border); }

/* ---------------------------------------------------------------------
   10. Tables, GridViews & DataTables
   --------------------------------------------------------------------- */
.table,
#main-content table[rules] {
    color: var(--sbb-text);
    font-size: 13.5px;
    background: #FFFFFF;
}

/* ASP.NET GridView renders <table rules="all" border="1"> */
#main-content table[rules] {
    border-collapse: collapse;
    border: 1px solid var(--sbb-border) !important;
}

.table th, .table td,
#main-content table[rules] > tbody > tr > th,
#main-content table[rules] > tbody > tr > td,
#main-content table[rules] > thead > tr > th,
#main-content table[rules] > thead > tr > td {
    border-color: var(--sbb-border) !important;
    vertical-align: middle;
}

#main-content table[rules] > tbody > tr > th,
#main-content table[rules] > tbody > tr > td,
#main-content table[rules] > thead > tr > th {
    padding: 8px 10px;
}

.table thead th,
.table > thead > tr > th,
table.dataTable thead th,
#main-content table[rules] > thead > tr > th,
#main-content table[rules] > tbody > tr:first-child > th {
    background: var(--sbb-table-head-bg);
    color: var(--sbb-table-head-text);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .02em;
    border-bottom: 1px solid #BFDBFE !important;
    white-space: nowrap;
}

#main-content table[rules] > tbody > tr > th a,
.table thead th a { color: var(--sbb-table-head-text); }

.table-hover tbody tr:hover,
#main-content table[rules] > tbody > tr:hover > td,
table.dataTable tbody tr:hover > td {
    background-color: var(--sbb-table-row-hover);
}

.table-striped tbody tr:nth-of-type(odd) { background-color: var(--sbb-table-stripe); }

.table .table-active,
.table tr.selected > td,
table.dataTable tbody tr.selected > td,
#main-content table[rules] > tbody > tr.selected > td {
    background-color: var(--sbb-table-row-selected) !important;
}

/* Footer / total rows */
.table tfoot td, .table tfoot th {
    background: var(--sbb-page-bg);
    font-weight: 600;
    color: var(--sbb-text);
}

/* GridView pager row (nested table) */
#main-content table[rules] table td { border: 0 !important; padding: 2px; background: transparent; }
#main-content table[rules] table td a,
#main-content table[rules] table td span {
    display: inline-block;
    min-width: 30px;
    padding: 4px 8px;
    border-radius: var(--sbb-radius-sm);
    text-align: center;
}
#main-content table[rules] table td a { color: var(--sbb-primary); }
#main-content table[rules] table td a:hover { background: var(--sbb-primary-50); text-decoration: none; }
#main-content table[rules] table td span { background: var(--sbb-primary); color: #fff; font-weight: 600; }

/* DataTables */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--sbb-border-strong);
    border-radius: var(--sbb-radius);
    padding: 4px 10px;
    background: #fff;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--sbb-primary);
    box-shadow: 0 0 0 4px var(--sbb-primary-ring);
    outline: none;
}
.dataTables_wrapper .dataTables_info { color: var(--sbb-text-muted); }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--sbb-radius-sm) !important;
    color: var(--sbb-text-secondary) !important;
    border: 1px solid transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--sbb-primary-50) !important;
    border-color: var(--sbb-primary-light) !important;
    color: var(--sbb-primary-hover) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--sbb-primary) !important;
    border-color: var(--sbb-primary) !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: transparent !important;
    color: #94A3B8 !important;
    border-color: transparent !important;
}
table.dataTable.no-footer { border-bottom-color: var(--sbb-border); }
table.dataTable thead th, table.dataTable thead td { border-bottom-color: #BFDBFE; }

/* ---------------------------------------------------------------------
   11. Pagination & tabs
   --------------------------------------------------------------------- */
.pagination .page-link {
    color: var(--sbb-primary);
    border-color: var(--sbb-border);
}
.pagination .page-link:hover { background: var(--sbb-primary-50); color: var(--sbb-primary-hover); border-color: var(--sbb-border); }
.pagination .page-item.active .page-link {
    background: var(--sbb-primary);
    border-color: var(--sbb-primary);
    color: #fff;
}
.pagination .page-item:first-child .page-link { border-radius: var(--sbb-radius-sm) 0 0 var(--sbb-radius-sm); }
.pagination .page-item:last-child .page-link  { border-radius: 0 var(--sbb-radius-sm) var(--sbb-radius-sm) 0; }

.nav-tabs { border-bottom-color: var(--sbb-border); }
.nav-tabs .nav-link,
.nav-tabs > li > a {
    color: var(--sbb-text-secondary);
    font-weight: 500;
    border: 0;
    border-bottom: 2px solid transparent;
}
.nav-tabs .nav-link:hover,
.nav-tabs > li > a:hover { color: var(--sbb-primary); background: transparent; border-bottom-color: var(--sbb-primary-light); }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--sbb-primary);
    background: transparent;
    border-bottom: 2px solid var(--sbb-primary);
    font-weight: 600;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link { background: var(--sbb-primary); color: #fff; }

/* ---------------------------------------------------------------------
   12. Dropdowns, modals, popovers
   --------------------------------------------------------------------- */
.dropdown-menu {
    border: 1px solid var(--sbb-border);
    border-radius: var(--sbb-radius);
    box-shadow: var(--sbb-shadow-lg);
    font-family: var(--sbb-font);
}
.dropdown-item { color: var(--sbb-text); }
.dropdown-item:hover,
.dropdown-item:focus { background: var(--sbb-primary-50); color: var(--sbb-primary-hover); }
.dropdown-item.active,
.dropdown-item:active { background: var(--sbb-primary); color: #fff; }

.modal-content {
    border: 1px solid var(--sbb-border);
    border-radius: var(--sbb-radius-lg);
    box-shadow: var(--sbb-shadow-lg);
}
.modal-header { border-bottom: 1px solid var(--sbb-border); }
.modal-header .modal-title { color: var(--sbb-text); font-weight: 600; }
.modal-footer { border-top: 1px solid var(--sbb-border); }
.modal-backdrop.show { opacity: .45; background: #0F172A; }

/* SweetAlert v1 — the confirm colour is set inline from JS, so the brand
   default is applied with swal.setDefaults() in each master page.
   Explicit confirmButtonColor values (e.g. #DD6B55 for deletes) are kept. */
.sweet-alert {
    border-radius: var(--sbb-radius-lg);
    font-family: var(--sbb-font);
}
.sweet-alert h2 { color: var(--sbb-text); font-weight: 600; }
.sweet-alert p { color: var(--sbb-text-secondary); }
.sweet-alert button {
    border-radius: var(--sbb-radius) !important;
    font-family: var(--sbb-font);
    font-weight: 600;
}
.sweet-alert button.cancel {
    background-color: var(--sbb-muted-bg) !important;
    color: var(--sbb-text) !important;
}
.sweet-alert button.cancel:hover { background-color: var(--sbb-border) !important; }

/* ---------------------------------------------------------------------
   13. Alerts, badges, toasts, progress
   --------------------------------------------------------------------- */
.alert { border-radius: var(--sbb-radius); border-width: 1px; }
.alert-primary, .alert-info { background: var(--sbb-primary-50); border-color: var(--sbb-primary-light); color: var(--sbb-primary-dark); }
.alert-success { background: #F0FDF4; border-color: #BBF7D0; color: #166534; }
.alert-warning { background: var(--sbb-accent-light); border-color: #FED7AA; color: #9A3412; }
.alert-danger  { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }

.badge { font-weight: 600; border-radius: var(--sbb-radius-pill); padding: .35em .7em; }
.badge-primary { background: var(--sbb-primary); color: #fff; }
.badge-success { background: var(--sbb-success-light); color: #166534; }
.badge-warning { background: #FFEDD5; color: #9A3412; }
.badge-danger  { background: var(--sbb-danger-light); color: #991B1B; }
.badge-info    { background: var(--sbb-primary-50); color: var(--sbb-primary-dark); }
.badge-default,
.badge-secondary { background: var(--sbb-muted-bg); color: var(--sbb-text-secondary); }

.progress { background: var(--sbb-muted-bg); border-radius: var(--sbb-radius-pill); }
.progress-bar { background-color: var(--sbb-primary); }

#toast-container > .toast-success { background-color: var(--sbb-success); }
#toast-container > .toast-error   { background-color: var(--sbb-danger); }
#toast-container > .toast-info    { background-color: var(--sbb-primary); }
#toast-container > .toast-warning { background-color: var(--sbb-accent); }
#toast-container > div { border-radius: var(--sbb-radius); box-shadow: var(--sbb-shadow-lg); opacity: 1; }

/* ---------------------------------------------------------------------
   14. Authentication pages (Login_in, MemberLogin, Committee_Login, FMLogin)
   --------------------------------------------------------------------- */
.auth-main {
    background: linear-gradient(135deg, #EFF6FF, #FFFFFF 54%, #FFF7ED) !important; /* website hero */
}
.auth-main::before,
.auth-main::after { display: none; }

.auth-main .auth-box .top { text-align: center; }
.auth-main .auth-box .top img { max-width: 260px; height: auto; border-radius: var(--sbb-radius); }

.auth-main .card {
    border: 1px solid var(--sbb-border);
    border-radius: 24px;                 /* website --radius-xl */
    box-shadow: var(--sbb-shadow-lg);
    padding: 16px;
}

.auth-main .card .header .lead {
    color: var(--sbb-text);
    font-weight: 600;
    font-size: 18px;
}
.auth-main .card .header a.lead {
    color: var(--sbb-primary);
    font-weight: 500;
}
.auth-main .card .header a.lead:hover { color: var(--sbb-primary-hover); }

.auth-main .form-control {
    background: var(--sbb-page-bg);
    border: 1px solid var(--sbb-border);
    border-radius: 14px;                 /* website input radius */
    padding: 12px 14px;
    height: auto;
}
.auth-main .form-control:focus { background: #fff; }

/* Primary sign-in action — brand blue regardless of legacy btn-light class */
.auth-main .auth-box .btn-block,
.auth-main .auth-box input[type="submit"] {
    background-color: var(--sbb-primary);
    border: 1px solid var(--sbb-primary);
    color: #fff;
    border-radius: 14px;
    padding: 12px 18px;
    font-weight: 600;
    box-shadow: var(--sbb-shadow-primary);
}
.auth-main .auth-box .btn-block:hover,
.auth-main .auth-box input[type="submit"]:hover {
    background-color: var(--sbb-primary-hover);
    border-color: var(--sbb-primary-hover);
    color: #fff;
}

.auth-main .fstdropdown { border-radius: 14px; background: var(--sbb-page-bg); border-color: var(--sbb-border); }
.auth-main .fstdropdown > .fstselected { padding: 10px 28px 10px 14px; }

/* ---------------------------------------------------------------------
   15. Mobile & tablet
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    #left-sidebar { box-shadow: var(--sbb-shadow-lg); }
    .block-header h2 { font-size: 18px; }
}

@media (max-width: 767.98px) {
    /* Long society names must not push the header off-screen */
    .navbar-fixed-top .navbar-brand { max-width: calc(100% - 56px); overflow: hidden; }
    .navbar-fixed-top .navbar-brand a {
        display: inline-block;
        max-width: calc(100vw - 130px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        font-size: 16px;
    }
}

@media (max-width: 575.98px) {
    .card { border-radius: 12px; }
    .auth-main .card { border-radius: 18px; padding: 8px; }
    #main-content table[rules] > tbody > tr > th,
    #main-content table[rules] > tbody > tr > td { padding: 6px 8px; }
}

/* ---------------------------------------------------------------------
   16. Print — keep reports clean and ink-friendly
   --------------------------------------------------------------------- */
@media print {
    body, #main-content { background: #fff !important; }
    .card { box-shadow: none !important; border-color: #ccc !important; }
    .table thead th,
    #main-content table[rules] > tbody > tr:first-child > th {
        background: #f1f1f1 !important;
        color: #000 !important;
    }
}

/* ---------------------------------------------------------------------
   17. Header — financial-year selector and logged-in user (MasterPage)
   --------------------------------------------------------------------- */
#navbar-menu .navbar-nav { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; }
#navbar-menu .sbb-fy-item,
#navbar-menu .sbb-user-item { display: flex; align-items: center; margin-right: 10px; }
.sbb-fy-form { display: flex; align-items: center; gap: 6px; margin: 0; }
.sbb-fy-label {
    display: inline-flex; align-items: center; gap: 5px; margin: 0;
    font-size: 12px; font-weight: 600; color: var(--sbb-text-muted);
}
.sbb-fy-label .fa { color: var(--sbb-primary); }
.sbb-fy-select {
    height: 32px; padding: 0 28px 0 10px;
    border: 1px solid var(--sbb-border-strong); border-radius: var(--sbb-radius-pill);
    background: var(--sbb-primary-50); color: var(--sbb-primary-dark);
    font-size: 13px; font-weight: 600; cursor: pointer;
}
.sbb-fy-select:focus { outline: none; box-shadow: var(--sbb-focus-ring); border-color: var(--sbb-primary); }
.sbb-user-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: var(--sbb-radius-pill);
    background: var(--sbb-muted-bg); color: var(--sbb-text); font-size: 13px; white-space: nowrap;
}
.sbb-user-chip .fa { color: var(--sbb-primary); font-size: 16px; }
.sbb-user-chip .sbb-user-name { font-weight: 600; }
.sbb-user-chip .sbb-user-role {
    font-size: 11px; font-weight: 600; color: var(--sbb-primary);
    background: var(--sbb-primary-light); border-radius: var(--sbb-radius-pill); padding: 1px 8px;
}
@media (max-width: 767px) {
    /* keep society name + year selector + logout on one header row */
    .navbar-fixed-top > .container-fluid { display: flex; flex-wrap: nowrap; align-items: center; }
    .navbar-fixed-top .navbar-brand { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .navbar-fixed-top .navbar-right { flex: 0 0 auto; margin-left: auto; }
    .sbb-fy-label, #navbar-menu .sbb-user-item { display: none !important; }
    #navbar-menu .sbb-fy-item { margin-right: 4px; }
    .sbb-fy-select { height: 30px; font-size: 12px; padding: 0 22px 0 8px; }
}