/*
 * XILYXIS Theme Stylesheet
 * Corporate UX styling for TowAdmin.AspMvc
 * Version: 1.0
 * Generated: January 2025
 */

/* ========================================
   CSS Custom Properties (Color Variables)
   ======================================== */
:root {
    /* Primary Colors */
    --color-primary: #A3DAFF;
    --color-primary-dark: #7BC4F2;
    --color-primary-light: #C2EEFF;

    /* Gray Scale (Tailwind gray-900 palette) */
    --gray-900: #111827;
    --gray-800: #1f2937;
    --gray-700: #374151;
    --gray-600: #4b5563;
    --gray-500: #6b7280;
    --gray-400: #9ca3af;
    --gray-300: #d1d5db;
    --gray-200: #e5e7eb;
    --gray-100: #f3f4f6;

    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    --text-disabled: #6b7280;

    /* Background Colors */
    --bg-body: #111827;
    --bg-surface: #1f2937;
    --bg-surface-hover: #374151;
    --bg-overlay: rgba(0, 0, 0, 0.6);

    /* Glassmorphic Colors */
    --bg-glass: rgba(255, 255, 255, 0.1);
    --bg-glass-hover: rgba(255, 255, 255, 0.15);
    --border-glass: rgba(255, 255, 255, 0.2);

    /* Border Colors */
    --border-default: #374151;
    --border-light: #1f2937;
}

/* ========================================
   Base Styles
   ======================================== */
html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    background-color: var(--bg-body);
    color: var(--text-primary);
    font-family: system-ui, Avenir, Helvetica, Arial, sans-serif !important;
    margin: 0;
    line-height: 1.5;
}

/* Hero Background - high specificity to override Kendo .k-content */
body.bg-hero,
body.k-content.bg-hero {
    background: var(--bg-body) url('/Content/Images/mt-rainier-silhouette.webp') center/cover no-repeat fixed !important;
}

/* ========================================
   Typography
   ======================================== */
h1 {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

h2 {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-200);
    margin-bottom: 0.75rem;
}

p {
    color: var(--text-secondary);
}

/* Brand name highlight */
.text-primary,
.x-text-primary {
    color: var(--color-primary) !important;
}

/* ========================================
   Header / Navigation (XILYXIS Style)
   ======================================== */

/* Main Header - fixed with glassmorphism */
.xilyxis-header,
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background-color: var(--bg-glass) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-glass) !important;
    padding: 0 1rem;
    min-height: 4rem;
}

@media (min-width: 640px) {
    .xilyxis-header,
    .navbar {
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) {
    .xilyxis-header,
    .navbar {
        padding: 0 2rem;
    }
}

/* Brand / Logo */
.xilyxis-header .navbar-brand,
.navbar-dark .navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    padding: 0.5rem 0;
    margin-right: 2rem;
    transition: color 0.2s ease;
}

.xilyxis-header .navbar-brand:hover,
.navbar-dark .navbar-brand:hover {
    color: var(--color-primary) !important;
}

/* Navigation Links */
.xilyxis-header .nav-link,
.navbar-dark .navbar-nav .nav-link {
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    position: relative;
    padding: 0.5rem 1rem !important;
    font-size: 1rem;
    font-weight: 400;
    transition: color 0.2s ease;
}

.xilyxis-header .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--text-primary) !important;
}

/* Animated underline on hover - only for non-dropdown links */
.xilyxis-header .nav-link:not(.dropdown-toggle)::after,
.navbar-dark .navbar-nav .nav-link:not(.dropdown-toggle)::after {
    content: '';
    position: absolute;
    bottom: 0.25rem;
    left: 1rem;
    right: 1rem;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: width 0.2s ease;
}

.xilyxis-header .nav-link:not(.dropdown-toggle):hover::after,
.navbar-dark .navbar-nav .nav-link:not(.dropdown-toggle):hover::after {
    width: calc(100% - 2rem);
}

/* Active state */
.xilyxis-header .nav-link.active,
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--text-primary) !important;
}

.xilyxis-header .nav-link.active:not(.dropdown-toggle)::after,
.navbar-dark .navbar-nav .nav-link.active:not(.dropdown-toggle)::after {
    width: calc(100% - 2rem);
}

/* Dropdown menus */
.dropdown-menu {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    margin-top: 0.25rem !important;
    padding: 0.5rem 0 !important;
}

.dropdown-item {
    color: var(--text-secondary) !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.9375rem;
    transition: all 0.2s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bg-surface-hover) !important;
    color: var(--text-primary) !important;
}

.dropdown-divider {
    border-color: var(--border-default) !important;
    margin: 0.5rem 0 !important;
}

/* Mobile menu background - glassmorphic */
@media (max-width: 767.98px) {
    .xilyxis-header .navbar-collapse,
    .navbar-dark .navbar-collapse {
        background-color: var(--bg-glass);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        margin: 0 -1rem;
        padding: 1rem;
        border-bottom: 1px solid var(--border-glass);
    }
}

/* ========================================
   Buttons
   ======================================== */
/* Primary Button */
.btn-primary,
.btn.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.5rem;
    background-color: var(--color-primary) !important;
    color: var(--gray-900) !important;
    font-weight: 600;
    border-radius: 0.5rem !important;
    border: none !important;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-primary:hover,
.btn.btn-primary:hover {
    background-color: var(--color-primary-dark) !important;
    color: var(--gray-900) !important;
}

.btn-primary:focus,
.btn.btn-primary:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--gray-900), 0 0 0 4px var(--color-primary-dark) !important;
}

.btn-primary:disabled,
.btn.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Secondary Button (Outline) */
.btn-secondary,
.btn.btn-secondary,
.btn-outline-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.5rem;
    background-color: transparent !important;
    border: 1px solid var(--color-primary) !important;
    color: var(--color-primary) !important;
    font-weight: 600;
    border-radius: 0.5rem !important;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-secondary:hover,
.btn.btn-secondary:hover,
.btn-outline-primary:hover {
    background-color: var(--color-primary) !important;
    color: var(--gray-900) !important;
}

.btn-secondary:focus,
.btn.btn-secondary:focus,
.btn-outline-primary:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--gray-900), 0 0 0 4px var(--color-primary) !important;
}

/* Ghost Button */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.5rem;
    background-color: transparent;
    border: none;
    color: var(--text-secondary);
    font-weight: 600;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-ghost:hover {
    background-color: var(--bg-surface);
    color: var(--text-primary);
}

/* Button Sizes */
.btn-sm { padding: 0.375rem 1rem; font-size: 0.875rem; }
.btn-md { padding: 0.5rem 1.5rem; font-size: 1rem; }
.btn-lg { padding: 0.75rem 2rem; font-size: 1.125rem; }

/* Success Button - restyle to match theme (cyan instead of green) */
.btn-success,
.btn.btn-success {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--gray-900) !important;
    font-weight: 600;
    border-radius: 0.5rem !important;
    transition: all 0.2s ease;
}

.btn-success:hover,
.btn.btn-success:hover {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    color: var(--gray-900) !important;
}

.btn-success:focus,
.btn.btn-success:focus {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    box-shadow: 0 0 0 3px rgba(163, 218, 255, 0.4) !important;
}

.btn-success:active,
.btn.btn-success:active {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}

/* ========================================
   Cards
   ======================================== */
/*
 * Bootstrap .card styling with Kendo protection.
 * Cards inside Kendo widgets are reset to inherit Kendo's styling.
 */

/* Standard Bootstrap Card - Glassmorphic style */
.card {
    background-color: var(--bg-glass) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--border-glass) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    border-radius: 0.75rem !important;
    transition: all 0.3s ease;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-0.25rem);
    background-color: var(--bg-glass-hover) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}

/* Card text colors (light text on dark glassmorphic card) */
.card h3,
.card h4,
.card h5,
.card .card-title {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.card p,
.card .card-text {
    color: #d1d5db !important; /* Light gray for readable body text */
}

/* Card header - subtle lighter background */
.card-header {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid var(--border-glass) !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    font-weight: 600;
}

.card > .card-header:first-child {
    border-top-left-radius: calc(0.75rem - 1px) !important;
    border-top-right-radius: calc(0.75rem - 1px) !important;
}

/* Card footer */
.card-footer {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-top: 1px solid var(--border-glass) !important;
    border-radius: 0 !important;
    color: #d1d5db !important;
}

.card > .card-footer:last-child {
    border-bottom-left-radius: calc(0.75rem - 1px) !important;
    border-bottom-right-radius: calc(0.75rem - 1px) !important;
}

.card-body {
    background-color: transparent !important;
    color: #d1d5db !important;
}

/* RESET: Cards inside Kendo widgets should NOT get themed styling */
/* This prevents Kendo ListView, Grid, etc. from being affected */
/* Using !important to override card styles that also use !important */
.k-widget .card,
.k-listview .card,
.k-listview-content .card,
.k-grid .card,
.k-panelbar .card,
.k-listview-item .card,
.k-listview-item {
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    transform: none !important;
    transition: none !important;
    overflow: visible !important;
}

.k-widget .card:hover,
.k-listview .card:hover,
.k-listview-content .card:hover,
.k-grid .card:hover,
.k-listview-item .card:hover,
.k-listview-item:hover {
    transform: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

.k-widget .card h3,
.k-widget .card h4,
.k-widget .card h5,
.k-widget .card p,
.k-widget .card .card-title,
.k-widget .card .card-text,
.k-listview .card h3,
.k-listview .card h4,
.k-listview .card p,
.k-listview-item h3,
.k-listview-item h4,
.k-listview-item p {
    color: inherit !important;
    font-weight: inherit !important;
}

.k-widget .card-header,
.k-widget .card-footer,
.k-widget .card-body,
.k-listview .card-header,
.k-listview .card-footer,
.k-listview .card-body,
.k-listview-item .card-header,
.k-listview-item .card-footer,
.k-listview-item .card-body {
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: inherit !important;
    border: none !important;
    color: inherit !important;
    border-radius: 0 !important;
}

/* Dark Card (Semi-transparent) - explicit class */
.card-dark {
    background-color: rgba(31, 41, 55, 0.5) !important;
    border-radius: 0.75rem;
    padding: 1.5rem;
    border: 1px solid var(--border-default);
}

.card-dark h3 { color: var(--text-primary); }
.card-dark p { color: var(--text-secondary); }

/* ========================================
   Container / Layout
   ======================================== */
.container,
.container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .container,
    .container-fluid {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .container,
    .container-fluid {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Container sizes */
.container-sm { max-width: 42rem; }
.container-md { max-width: 56rem; }
.container-lg { max-width: 72rem; }
.container-xl { max-width: 80rem; }

/* Overlay Container / Hero Card - Glassmorphic */
.container-overlay {
    background-color: var(--bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-glass);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    border-radius: 0.75rem;
    padding: 2rem;
}

/* Body content with padding for fixed header */
.body-content {
    padding-top: 5rem;
    min-height: calc(100vh - 120px);
}

/* ========================================
   Form Elements
   ======================================== */
/* Text Inputs */
.form-control,
.form-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 0.5rem !important;
    color: var(--text-primary) !important;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control::placeholder,
.form-input::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--text-disabled) !important;
    opacity: 1;
}

.form-control:focus,
.form-input:focus,
input:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(163, 218, 255, 0.1) !important;
}

.form-control:disabled,
.form-input:disabled,
input:disabled,
textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Labels */
.form-label,
label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Select Dropdowns */
.form-select,
select.form-control,
select {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 0.5rem !important;
    color: var(--text-primary) !important;
    font-size: 1rem;
    cursor: pointer;
}

.form-select:focus,
select.form-control:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary) !important;
}

/* Checkboxes & Radio Buttons */
.form-checkbox,
.form-check-input,
input[type="checkbox"],
input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 0.25rem;
    cursor: pointer;
    accent-color: var(--color-primary);
}

input[type="radio"] {
    border-radius: 50%;
}

/* ========================================
   Tables
   ======================================== */
.table {
    width: 100%;
    border-collapse: collapse;
    background-color: transparent;
}

.table th {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    font-weight: 600;
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-default) !important;
}

.table td {
    color: var(--text-secondary) !important;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-default) !important;
}

.table tr:hover td {
    background-color: rgba(31, 41, 55, 0.5);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(31, 41, 55, 0.3);
}

/* ========================================
   Jumbotron
   ======================================== */
.jumbotron {
    background-color: var(--bg-glass) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 0.75rem;
    padding: 2rem;
    margin-bottom: 1rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.jumbotron h2,
.jumbotron h4,
.jumbotron #jh2,
.jumbotron #jh4 {
    color: var(--text-primary) !important;
    margin: 0;
}

.jumbotron .lead {
    color: var(--text-secondary);
}

/* ========================================
   Footer
   ======================================== */
.footer {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: 1px solid var(--border-glass);
    padding: 1.5rem 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.footer h3,
.footer h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.footer p,
.footer span {
    color: var(--text-muted);
}

.footer a,
.footer .k-link {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer a:hover,
.footer .k-link:hover {
    color: var(--text-primary);
}

/* ========================================
   Alerts
   ======================================== */
.alert {
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.alert-primary {
    background-color: rgba(163, 218, 255, 0.15);
    border: 1px solid rgba(163, 218, 255, 0.3);
    color: var(--color-primary);
}

.alert-success {
    background-color: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.alert-warning {
    background-color: rgba(234, 179, 8, 0.15);
    border: 1px solid rgba(234, 179, 8, 0.3);
    color: #eab308;
}

.alert-danger {
    background-color: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.alert-info {
    background-color: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #3b82f6;
}

.alert .close {
    color: inherit;
    opacity: 0.7;
}

.alert .close:hover {
    opacity: 1;
}

/* ========================================
   Kendo UI Overrides
   ======================================== */
.k-content {
    background-color: transparent !important;
}

/* ----------------------------------------
   Kendo Grid / ListView - Glassmorphic
   ---------------------------------------- */
.k-grid,
.k-listview {
    background-color: var(--bg-glass) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* Header bar - glassmorphic */
.k-grid-header,
.k-header,
.k-grid-header-wrap,
.k-grid .k-header,
.k-listview .k-header {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--border-glass) !important;
    color: var(--text-primary) !important;
}

.k-grid th,
.k-grid td {
    border-color: var(--border-default) !important;
    color: var(--text-secondary) !important;
}

/* ListView content rows - theme-aligned colors */
.k-listview-content {
    background-color: transparent !important;
}

/* Primary rows - semi-transparent (ListView) */
.k-listview-content > div,
.k-listview-item {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-color: var(--border-glass) !important;
}

/* Alternating rows - slightly more opaque (ListView) */
.k-alt,
.k-listview-content > div:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Kendo Grid rows - primary rows */
.k-master-row,
.k-grid-content tr,
.k-grid tbody tr {
    background-color: rgba(255, 255, 255, 0.03) !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

/* Kendo Grid rows - alternating */
.k-alt.k-master-row,
.k-grid-content tr.k-alt,
.k-grid tbody tr.k-alt {
    background-color: rgba(255, 255, 255, 0.06) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Unified hover state for ALL rows - completely replaces background */
.k-listview-content > div:hover,
.k-listview-item:hover,
.k-alt:hover,
.k-listview-content > div:nth-child(even):hover,
.k-listview-content > div.k-state-hover,
.k-listview-item.k-state-hover,
.k-master-row:hover,
.k-master-row.k-state-hover,
.k-alt.k-master-row:hover,
.k-alt.k-master-row.k-state-hover,
.k-grid-content tr:hover,
.k-grid tbody tr:hover {
    background-color: rgba(163, 218, 255, 0.25) !important;
    background: rgba(163, 218, 255, 0.25) !important;
}

/* ----------------------------------------
   Kendo Pager - Navigation & Carets
   ---------------------------------------- */

/*
 * Hide button-based pager nav controls (Kendo MVC 2023 generates these)
 * The 2021.3 JavaScript doesn't properly manage their disabled state,
 * so we hide them and use the working anchor-based pager controls instead.
 */
button.k-pager-nav {
    display: none !important;
}

.k-pager-wrap,
.k-pager,
.k-grid-pager {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-default) !important;
    color: var(--text-secondary) !important;
}

/* Pager number buttons */
.k-pager-numbers .k-link,
.k-pager-numbers .k-state-selected,
.k-grid-pager .k-pager-numbers .k-link {
    color: var(--text-secondary) !important;
    background-color: transparent !important;
    border-radius: 0.25rem;
}

.k-pager-numbers .k-link:hover,
.k-grid-pager .k-pager-numbers .k-link:hover {
    color: var(--text-primary) !important;
    background-color: var(--bg-surface-hover) !important;
}

.k-pager-numbers .k-state-selected,
.k-grid-pager .k-pager-numbers .k-state-selected {
    color: var(--gray-900) !important;
    background-color: var(--color-primary) !important;
}

/* Pager navigation buttons (arrows/carets) - high contrast */
.k-pager-nav,
.k-pager-wrap .k-link:not(.k-pager-numbers .k-link),
.k-grid-pager .k-pager-nav,
.k-grid-pager .k-link:not(.k-pager-numbers .k-link) {
    color: var(--color-primary) !important;
    background-color: rgba(163, 218, 255, 0.15) !important;
    border-radius: 0.25rem !important;
    border: 1px solid rgba(163, 218, 255, 0.3) !important;
}

.k-pager-nav:hover,
.k-pager-wrap .k-link:not(.k-pager-numbers .k-link):hover,
.k-grid-pager .k-pager-nav:hover,
.k-grid-pager .k-link:not(.k-pager-numbers .k-link):hover {
    color: var(--text-primary) !important;
    background-color: rgba(163, 218, 255, 0.3) !important;
}

/* Pager icons/carets - force high visibility */
.k-pager-nav .k-icon,
.k-pager-wrap .k-icon,
.k-pager-nav span,
.k-pager-first .k-icon,
.k-pager-last .k-icon,
.k-grid-pager .k-icon,
.k-grid-pager .k-pager-nav .k-icon,
.k-grid-pager span.k-icon,
.k-i-arrow-e,
.k-i-arrow-w,
.k-i-seek-e,
.k-i-seek-w,
.k-i-arrow-60-right,
.k-i-arrow-60-left,
.k-i-arrow-end-right,
.k-i-arrow-end-left,
.k-i-caret-alt-left,
.k-i-caret-alt-right,
.k-i-caret-double-alt-left,
.k-i-caret-double-alt-right {
    color: var(--color-primary) !important;
    font-size: 1.2em !important;
}

/* Force icon visibility via pseudo-element */
.k-pager-nav .k-icon::before,
.k-pager-wrap .k-icon::before,
.k-grid-pager .k-icon::before,
.k-grid-pager .k-pager-nav .k-icon::before {
    color: var(--color-primary) !important;
}

.k-pager-nav:hover .k-icon,
.k-pager-wrap .k-link:hover .k-icon,
.k-pager-nav:hover .k-icon::before,
.k-grid-pager .k-pager-nav:hover .k-icon,
.k-grid-pager .k-link:hover .k-icon {
    color: var(--text-primary) !important;
}

/* Pager refresh button */
.k-pager-refresh,
.k-pager-refresh .k-icon,
.k-grid-pager .k-pager-refresh,
.k-grid-pager .k-pager-refresh .k-icon,
.k-i-reload,
.k-i-refresh,
.k-i-arrow-rotate-cw {
    color: var(--color-primary) !important;
}

.k-pager-refresh:hover,
.k-pager-refresh:hover .k-icon,
.k-grid-pager .k-pager-refresh:hover,
.k-grid-pager .k-pager-refresh:hover .k-icon {
    color: var(--text-primary) !important;
    background-color: rgba(163, 218, 255, 0.2) !important;
}

/* Refresh button SVG icon */
.k-pager-refresh svg,
.k-pager-refresh .k-svg-icon,
.k-grid-pager .k-pager-refresh svg,
.k-grid-pager .k-pager-refresh .k-svg-icon {
    fill: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

.k-pager-refresh:hover svg,
.k-pager-refresh:hover .k-svg-icon {
    fill: var(--text-primary) !important;
    color: var(--text-primary) !important;
}

/* Refresh icon pseudo-element */
.k-pager-refresh .k-icon::before,
.k-i-reload::before,
.k-i-refresh::before,
.k-i-arrow-rotate-cw::before {
    color: var(--color-primary) !important;
}

/* Ensure refresh icon is visible */
.k-pager-refresh .k-icon,
.k-pager-refresh span.k-icon {
    display: inline-block !important;
    visibility: visible !important;
    width: 1em !important;
    height: 1em !important;
    font-size: 1rem !important;
}

/* Disabled pager nav - lower contrast */
.k-pager-nav.k-state-disabled,
.k-pager-nav.k-state-disabled .k-icon,
.k-state-disabled .k-icon,
.k-grid-pager .k-pager-nav.k-state-disabled,
.k-grid-pager .k-state-disabled .k-icon {
    color: var(--gray-500) !important;
    background-color: rgba(107, 114, 128, 0.1) !important;
    border-color: rgba(107, 114, 128, 0.2) !important;
    opacity: 0.6 !important;
}

/* Pager dropdown */
.k-pager-sizes .k-dropdown,
.k-pager-sizes .k-dropdownlist,
.k-grid-pager .k-pager-sizes .k-dropdown,
.k-grid-pager .k-pager-sizes .k-dropdownlist,
.k-grid-pager .k-dropdown,
.k-grid-pager .k-dropdownlist {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-default) !important;
    color: var(--text-secondary) !important;
}

/* Pager info text */
.k-pager-info,
.k-grid-pager .k-pager-info {
    color: var(--text-secondary) !important;
}

/* SVG icons in pager (Kendo 2023+) */
.k-pager-wrap svg,
.k-pager-nav svg,
.k-pager-wrap .k-svg-icon,
.k-pager-nav .k-svg-icon,
.k-grid-pager svg,
.k-grid-pager .k-svg-icon,
.k-grid-pager .k-pager-nav svg,
.k-grid-pager .k-pager-nav .k-svg-icon {
    fill: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

.k-pager-nav:hover svg,
.k-pager-nav:hover .k-svg-icon,
.k-grid-pager .k-pager-nav:hover svg,
.k-grid-pager .k-pager-nav:hover .k-svg-icon {
    fill: var(--text-primary) !important;
    color: var(--text-primary) !important;
}

/* Disabled SVG icons */
.k-state-disabled svg,
.k-state-disabled .k-svg-icon,
.k-grid-pager .k-state-disabled svg,
.k-grid-pager .k-state-disabled .k-svg-icon {
    fill: var(--gray-500) !important;
    color: var(--gray-500) !important;
}

/* Grid pager - all buttons and links need visible text/icons */
.k-grid-pager a,
.k-grid-pager .k-link,
.k-grid-pager button,
.k-grid-pager .k-button {
    color: var(--color-primary) !important;
}

.k-grid-pager a:hover,
.k-grid-pager .k-link:hover,
.k-grid-pager button:hover,
.k-grid-pager .k-button:hover {
    color: var(--text-primary) !important;
}

/* Pager input (page number input) */
.k-pager-input .k-textbox,
.k-pager-wrap input {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}

/* ----------------------------------------
   Kendo Icon Definitions (2023 classes for 2021.3 CDN)
   These define ::before content for newer icon class names
   that aren't in the 2021.3.1207 CSS but are generated by
   Kendo MVC 2023.1.425.545 server-side helpers.
   Character codes sourced from kendo.common.min.css 2021.3.1207
   ---------------------------------------- */

/* Pager navigation icons - caret style */
.k-i-caret-alt-to-left::before {
    content: "\e00b";  /* First page - matches k-i-seek-w */
}

.k-i-caret-alt-left::before {
    content: "\e007";  /* Previous page - matches k-i-arrow-60-left */
}

.k-i-caret-alt-right::before {
    content: "\e005";  /* Next page - matches k-i-arrow-60-right */
}

.k-i-caret-alt-to-right::before {
    content: "\e009";  /* Last page - matches k-i-seek-e */
}

/* Arrow end icons (alternative first/last) */
.k-i-arrow-end-left::before {
    content: "\e00b";  /* First page - matches k-i-seek-w */
}

.k-i-arrow-end-right::before {
    content: "\e009";  /* Last page - matches k-i-seek-e */
}

/* Refresh/reload icon */
.k-i-arrow-rotate-cw::before {
    content: "\e103";  /* Refresh - matches k-i-reload */
}

/* ----------------------------------------
   Other Kendo Components
   ---------------------------------------- */
.k-panelbar,
.k-panelbar .k-item {
    background-color: var(--bg-surface);
    border-color: var(--border-default);
}

.k-panelbar .k-link {
    color: var(--text-secondary);
}

.k-panelbar .k-link:hover {
    color: var(--text-primary);
    background-color: var(--bg-surface-hover);
}

.k-button {
    background-color: var(--color-primary);
    color: var(--gray-900);
    border: none;
    border-radius: 0.5rem;
}

.k-button:hover {
    background-color: var(--color-primary-dark);
}

/* Neutralize k-disabled state - ensure text remains visible */
.k-button.k-state-disabled,
.k-button.k-disabled,
.k-button[disabled],
.k-state-disabled.k-button,
.k-disabled.k-button {
    background-color: var(--gray-600) !important;
    color: var(--text-secondary) !important;
    opacity: 0.7 !important;
    cursor: not-allowed !important;
}

/* General k-disabled/k-state-disabled text visibility fix */
.k-disabled,
.k-state-disabled {
    color: var(--text-secondary) !important;
    opacity: 0.7 !important;
}

.k-disabled *,
.k-state-disabled * {
    color: inherit !important;
}

.k-textbox,
.k-dropdown,
.k-dropdownlist,
.k-datepicker,
.k-numerictextbox {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary);
}

/* ========================================
   Utility Classes
   ======================================== */
/* Spacing - Padding */
.p-4 { padding: 1rem; }
.p-8 { padding: 2rem; }
.p-12 { padding: 3rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }

/* Spacing - Margin */
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }

/* Gap (for flexbox/grid) */
.gap-4 { gap: 1rem; }
.gap-8 { gap: 2rem; }

/* Text Utilities */
.text-center { text-align: center; }
.text-white { color: var(--text-primary) !important; }
.text-gray-300 { color: var(--text-secondary) !important; }
.text-gray-400 { color: var(--text-muted) !important; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }

/* Display & Flex */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Borders & Rounded */
.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }
.border { border: 1px solid var(--border-default); }
.border-t { border-top: 1px solid var(--border-default); }
.border-b { border-bottom: 1px solid var(--border-default); }

/* Shadows */
.shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* ========================================
   Responsive Adjustments
   ======================================== */
@media (min-width: 640px) {
    h1 { font-size: 2.5rem; }
}

@media (min-width: 768px) {
    h1 { font-size: 3rem; }
}

@media (min-width: 1024px) {
    h1 { font-size: 3.5rem; }
}

@media (min-width: 1280px) {
    h1 { font-size: 3.75rem; }
}

/* HR styling */
hr {
    border-color: var(--border-default);
    opacity: 0.5;
}

/* Links */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-primary-dark);
}

/* Custom danger text */
.x-text-danger {
    color: #ef4444 !important;
    font-weight: bold;
}