/* RollCall+ v2 — palette inspired by v1 (rollcall.illustrate.net).
   Navy + gold, light neutral background, no background image. */

:root {
    --rc-navy: #003366;
    --rc-navy-dark: #002650;
    --rc-navy-light: #003d7a;
    --rc-gold: #D4AF37;
    --rc-gold-dark: #b8960e;
    /* v1-inspired cool blues: page is a light cornflower wash, cards sit
       on top a shade darker so they "lift" off the page (inverse of the
       usual dark-page/white-card pattern). */
    --rc-bg: #e8f0f9;
    --rc-card-bg: #d8e6f4;
    --rc-card-border: #b9cee0;
    --rc-card-footer-bg: #cfdcec;
    --rc-text: #222;
    --rc-muted: #666;
    --rc-link: #003d7a;
    --rc-link-hover: #002650;
}

/* Body — light neutral, NO background image. */
body {
    background-color: var(--rc-bg);
    background-image: none;
    color: var(--rc-text);
}

/* App banner (sits above the navbar) */
.app-banner {
    background: linear-gradient(to bottom, var(--rc-navy-light) 0%, var(--rc-navy) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.app-banner::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(to right, var(--rc-gold), var(--rc-gold-dark));
}
.app-banner-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 14px 24px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    row-gap: 4px;
}
.app-banner-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}
.app-banner-title {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: clamp(20px, 4vw, 26px);
    font-weight: 600;
    line-height: 1.15;
    margin: 0;
    color: #fff;
}
.app-banner-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.78);
}
.app-banner-pill {
    margin-top: 6px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    padding: 6px 14px;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: "Source Sans 3", Arial, sans-serif;
}
.app-banner-pill-prefix {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 1.4px;
}
.app-banner-pill-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--rc-gold);
}
.app-banner-pill-version {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.5px;
    font-feature-settings: "tnum";
}

@media (max-width: 600px) {
    .app-banner-inner {
        row-gap: 6px;
    }
}

/* Cards — clean white surface with subtle navy accent on header */
.card {
    border-radius: 6px;
    background: var(--rc-card-bg);
    border: 1px solid var(--rc-card-border);
}
.card-header {
    border-radius: 6px 6px 0 0;
    background: var(--rc-navy);
    color: #fff;
}
.card-body {
    border-radius: 0;
    background: var(--rc-card-bg);
}
/* When the body is the first/last thing in the card (no header/footer), round
   the exposed corners so the fill doesn't square off past the card's border. */
.card-body:first-child {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.card-body:last-child {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
.card-footer {
    border-radius: 0 0 6px 6px;
    background: var(--rc-card-footer-bg);
    color: var(--rc-text);
    border-top: 1px solid var(--rc-card-border);
}

/* Helper backgrounds used by existing partials. Keep the class names so we
   don't have to rename them throughout the project — just rebind the colors. */
.bg-card-header { background: var(--rc-navy) !important; color: #fff !important; }
.bg-card-body { background: var(--rc-card-bg) !important; color: var(--rc-text) !important; }
.bg-card-footer { background: var(--rc-navy) !important; color: #fff !important; }

/* Navbar — keep the dropdown menu's appearance Bootstrap-default but make
   sure the navbar itself reads as v1 navy.

   Role-coded variants: Manager gets a lifted navy, Admin gets a lifted
   wine/burgundy. Both at roughly the same lightness as the base navy
   so headers don't shout but the role is visible at a glance. Applied
   in _PartialHeader by adding the modifier class alongside
   bg-card-footer; compound-class specificity (no !important needed)
   lets the variant override the base. White text from the existing
   .navbar.bg-card-footer rule continues to apply. */
.navbar.bg-card-footer { background: var(--rc-navy) !important; }
.navbar.bg-card-footer.bg-card-footer-manager { background: #3070b3 !important; }
.navbar.bg-card-footer.bg-card-footer-admin   { background: #5c1a1a !important; }
.navbar.bg-card-footer .navbar-brand,
.navbar.bg-card-footer .nav-link,
.navbar.bg-card-footer .dropdown-item {
    color: #fff;
}
.navbar.bg-card-footer .dropdown-menu {
    background: #fff;
}
.navbar.bg-card-footer .dropdown-menu .dropdown-item {
    color: var(--rc-text);
}
.navbar.bg-card-footer .dropdown-menu .dropdown-item:hover {
    background: #f0f4f8;
    color: var(--rc-link);
}

/* Buttons */
.btn-primary {
    background-color: var(--rc-navy);
    border-color: var(--rc-navy);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--rc-navy-dark);
    border-color: var(--rc-navy-dark);
}
.btn-outline-primary {
    color: var(--rc-navy);
    border-color: var(--rc-navy);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--rc-navy);
    color: #fff;
}

/* Links — but don't override Bootstrap button colors. The :visited variant of
   the bare-element selector has higher specificity than .btn / .btn-primary,
   so without :not(.btn) the Staff Sign In button (an <a class="btn btn-primary">)
   went unreadable navy-on-navy after the user had visited /Identity/Account/Login. */
a:not(.btn), a:not(.btn):visited { color: var(--rc-link); }
a:not(.btn):hover { color: var(--rc-link-hover); }

/* Focused Elements */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* #region Pagination */
.pagination .page-link {
    background-color: var(--pagination-bg, #FFFFFF);
    border-color: var(--pagination-border, #808080);
    color: var(--pagination-text, #424143);
}

.pagination .page-item.active .page-link {
    background-color: var(--pagination-active-bg, #808080);
    border-color: var(--pagination-active-border, #808080);
    color: var(--pagination-active-text, #FFFFFF);
}

.pagination .page-link:hover {
    background-color: var(--pagination-hover-bg, #D3D3D3);
    color: var(--pagination-hover-text, #424143);
}

.pagination .page-item.disabled .page-link {
    background-color: var(--pagination-disabled-bg, #f8f9fa);
    border-color: var(--pagination-disabled-border, #808080);
    color: var(--pagination-disabled-text, #6c757d);
}
/* #endregion Pagination */

/* Footer */
.footer-nav-link {
    color: #ffffffcc;
    transition: color 0.2s, background-color 0.2s;
    padding: 2px 6px;
}

    .footer-nav-link:hover {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.1);
    }

.footer-fs {
    font-size: 0.85rem;
}
/* End Footer */

/* #region Enhanced Table Styling */

/*
 * ENHANCED TABLE IMPLEMENTATION GUIDE
 * ===================================
 *
 * USAGE PATTERN:
 * 1. Container: <div class="table-responsive enhanced-table-container">
 * 2. Table:     <table class="table enhanced-table">
 * 3. Rows:      <tr class="enhanced-table-row">
 *
 * FEATURES:
 * - Smooth hover transitions with accent color left border
 * - No layout shifting (border-left reserves space via transparent border)
 * - Subtle background highlighting and box shadow on hover
 * - Mobile responsive with horizontal scroll support
 * - Alternative color schemes: .admin-style, .warning-style, .danger-style
 */

/* Enhanced table row with hover effects and left border indicator */
.enhanced-table-row {
    transition: all 0.3s ease-in-out;
    border-left: 3px solid transparent;
    cursor: pointer;
}

    .enhanced-table-row:hover {
        background-color: rgba(0,51,102,0.05) !important;
        border-left: 3px solid var(--rc-navy);
        box-shadow: 0 2px 8px rgba(0,51,102,0.15);
    }

/* Enhanced table container - allow horizontal scroll if needed */
.enhanced-table-container {
    overflow-x: auto;
}

/* Enhanced table class for easy application */
.enhanced-table .enhanced-table-row {
    transition: all 0.3s ease-in-out;
    border-left: 3px solid transparent;
}

    .enhanced-table .enhanced-table-row:hover {
        background-color: rgba(0,51,102,0.05) !important;
        border-left: 3px solid var(--rc-navy);
        box-shadow: 0 2px 8px rgba(0,51,102,0.15);
    }

/* Alternative color schemes for different contexts */
.enhanced-table-row.admin-style:hover {
    background-color: rgba(13, 110, 253, 0.05) !important;
    border-left: 3px solid #0d6efd;
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.15);
}

.enhanced-table-row.warning-style:hover {
    background-color: rgba(255, 193, 7, 0.05) !important;
    border-left: 3px solid #ffc107;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.15);
}

.enhanced-table-row.danger-style:hover {
    background-color: rgba(220, 53, 69, 0.05) !important;
    border-left: 3px solid #dc3545;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.15);
}

/* Responsive table fixes for mobile */
@media (max-width: 767px) {
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    .table td, .table th {
        white-space: nowrap;
        min-width: auto;
    }

    .enhanced-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .enhanced-table td {
        white-space: nowrap;
    }
}

/* Force text wrapping for title columns that exceed length limit */
.enhanced-table td.title-wrap {
    max-width: 300px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* #endregion Enhanced Table Styling */