#ratestable {
    --default-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --heading-font: "Inter", sans-serif;
    --nav-font: "Inter", sans-serif;
    --mono-font: "Fira Code", "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
}

/* Spacing Scale */
#ratestable {
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
}

/* Floating Layout Gaps */
#ratestable {
    --floating-gap: 1.25rem;
    /* 20px - gap around floating elements */
    --floating-gap-lg: 1.5rem;
    /* 24px - larger screens */
}

/* Border Radius - Medium (10-12px) for shadcn aesthetic */
#ratestable {
    --radius-sm: 0.375rem;
    /* 6px */
    --radius-md: 0.5rem;
    /* 8px */
    --radius-lg: 0.625rem;
    /* 10px - primary card/element radius */
    --radius-xl: 0.75rem;
    /* 12px - sidebar/header radius */
    --radius-2xl: 1rem;
    /* 16px */
    --radius-full: 9999px;
}

/* Shadows - Enhanced for floating cards */
#ratestable {
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.07);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.08);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-floating: 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 2px 4px -1px rgb(0 0 0 / 0.04);
}

/* Transitions */
#ratestable {
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
}

/* Layout Dimensions */
#ratestable {
    --header-height: 64px;
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 50px;
    /* Slim rail width */
    --footer-height: 60px;
}

/*--------------------------------------------------------------
# Global Colors - Light Mode
# True shadcn style - neutral/monochromatic with zinc palette
--------------------------------------------------------------*/
#ratestable {
    /* Core palette - true shadcn style (neutral/monochromatic) */
    --background-color: #fafafa;
    /* Zinc-50 - light background */
    --default-color: #3f3f46;
    /* Zinc-700 */
    --heading-color: #18181b;
    /* Zinc-900 */
    --accent-color: #18181b;
    /* Zinc-900 - shadcn uses dark as primary */
    --surface-color: #ffffff;
    --contrast-color: #ffffff;
    /* Extended text colors */
    --muted-color: #71717a;
    /* Zinc-500 */
    --light-color: #a1a1aa;
    /* Zinc-400 */
    /* Borders */
    --border-color: #e4e4e7;
    /* Zinc-200 */
    --border-color-light: #f4f4f5;
    /* Zinc-100 */
    --border-color-dark: #d4d4d8;
    /* Zinc-300 */
    /* Status colors - slightly muted for shadcn feel */
    --success-color: #0a863e;
    --success-color-light: #caf9d7;
    --warning-color: #ca8a04;
    /* Yellow-600 */
    --warning-color-light: #fef9c3;
    --danger-color: #dc2626;
    /* Red-600 */
    --danger-color-light: #fee2e2;
    --info-color: #0891b2;
    /* Cyan-600 */
    --info-color-light: #cffafe;
    /* Navigation colors */
    --nav-color: var(--default-color);
    --nav-hover-color: var(--heading-color);
    --nav-mobile-background-color: var(--surface-color);
    --nav-dropdown-background-color: var(--surface-color);
    --nav-dropdown-color: var(--default-color);
    --nav-dropdown-hover-color: var(--heading-color);
    /* Header - Floating card style */
    --header-bg: #ffffff;
    --header-shadow: var(--shadow-floating);
    --header-border: var(--border-color);
    /* Sidebar - Floating card style */
    --sidebar-bg: #ffffff;
    --sidebar-border: var(--border-color);
    --sidebar-shadow: var(--shadow-floating);
    --sidebar-color: var(--default-color);
    --sidebar-muted-color: var(--muted-color);
    --sidebar-hover-bg: #f4f4f5;
    /* Zinc-100 */
    --sidebar-active-bg: #f4f4f5;
    /* Zinc-100 - subtle background */
    --sidebar-active-color: var(--heading-color);
    /* Cards - Both border AND shadow for subtle definition */
    --card-bg: #ffffff;
    --card-shadow: var(--shadow-sm);
    --card-border: var(--border-color);
    /* Tables */
    --table-header-bg: #fafafa;
    --table-hover-bg: #f4f4f5;
    --table-stripe-bg: #fafafa;
    /* Forms */
    --input-bg: #ffffff;
    --input-border: var(--border-color);
    --input-focus-border: var(--heading-color);
    --input-focus-ring: rgb(24 24 27 / 0.15);
}

/* Border Colors */










/* Gradient Backgrounds */










/* Icon Colors */












/*--------------------------------------------------------------
# Base - Reset, Typography, and Global Styles
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Box Sizing & Scroll
--------------------------------------------------------------*/
#ratestable *,
#ratestable *::before,
#ratestable *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

/*--------------------------------------------------------------
# Body
--------------------------------------------------------------*/
#ratestable body {
    margin: 0;
    font-family: var(--default-font);
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--default-color);
    background-color: var(--background-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/*--------------------------------------------------------------
# Headings
--------------------------------------------------------------*/
#ratestable h1,
#ratestable h2,
#ratestable h3,
#ratestable h4,
#ratestable h5,
#ratestable h6 {
    font-family: var(--heading-font);
    font-weight: 600;
    line-height: 1.3;
    color: var(--heading-color);
    margin-top: 0;
    margin-bottom: 0.5rem;
}

#ratestable h1,
#ratestable .h1 {
    font-size: 2.25rem;
}

#ratestable h2,
#ratestable .h2 {
    font-size: 1.875rem;
}

#ratestable h3,
#ratestable .h3 {
    font-size: 1.5rem;
}

#ratestable h4,
#ratestable  .h4 {
    font-size: 1.25rem;
}

#ratestable h5,
#ratestable .h5 {
    font-size: 1.125rem;
}

#ratestable h6,
#ratestable .h6 {
    font-size: 1rem;
}

/*--------------------------------------------------------------
# Paragraph & Text
--------------------------------------------------------------*/
#ratestable p {
    margin-top: 0;
    margin-bottom: 1rem;
}


strong {
    font-weight: 600;
}

/* Custom text size - Bootstrap doesn't have

/*--------------------------------------------------------------
# Links
--------------------------------------------------------------*/
#ratestable a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color var(--transition-fast);
}

#ratestable a:hover {
    color: color-mix(in srgb, var(--accent-color), black 10%);
}

/*--------------------------------------------------------------
# Lists
--------------------------------------------------------------*/
#ratestable ul,
#ratestable ol {
    list-style: none;
    padding: 0;
    margin: 0;
}


/*--------------------------------------------------------------
# Images
--------------------------------------------------------------*/
#ratestable img,
#ratestable svg {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/*--------------------------------------------------------------
# Tables
--------------------------------------------------------------*/
#ratestable table {
    border-collapse: collapse;
    width: 100%;
}

/*--------------------------------------------------------------
# Forms Reset
--------------------------------------------------------------*/
#ratestable button,
#ratestable input,
#ratestable optgroup,
#ratestable select,
#ratestable textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

#ratestable button {
    cursor: pointer;
    border: none;
    background: transparent;
}

/*--------------------------------------------------------------
# Focus Styles
--------------------------------------------------------------*/
:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/*--------------------------------------------------------------
# Selection
--------------------------------------------------------------*/
::-moz-selection {
    background-color: var(--accent-color);
    color: white;
}

::selection {
    background-color: var(--accent-color);
    color: white;
}

/*--------------------------------------------------------------
# Scrollbar (WebKit)
--------------------------------------------------------------*/








/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    #ratestable *,
    #ratestable *::before,
    #ratestable *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* Row gutter */
#ratestable .row {
    --bs-gutter-x: var(--spacing-lg);
    --bs-gutter-y: var(--spacing-lg);
}

/* Grid - ensure all columns use CSS custom properties */
#ratestable .row > * {
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    padding-right: calc(var(--bs-gutter-x) * 0.5);
}

/* Button overrides */


/* Form controls */

/* Cards */
#ratestable .card {
    border-radius: var(--radius-lg);
    border-color: var(--card-border);
    box-shadow: var(--card-shadow);
    margin-bottom: var(--spacing-lg);
}

/* Modals */

/* Dropdowns */

/* Alerts */


/* Badges */
#ratestable  .badge {
    font-weight: 600;
    border-radius: var(--radius-sm);
}

/* List Group */
.list-group-item {
    border-color: var(--border-color);
    padding: var(--spacing-md) var(--spacing-lg);
}

.list-group-item.active {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

/* Navs & Tabs */

/* Tables */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--default-color);
    --bs-table-border-color: var(--border-color);
    --bs-table-striped-bg: var(--table-stripe-bg);
    --bs-table-hover-bg: var(--table-hover-bg);
}

.table > thead {
    background-color: var(--table-header-bg);
}

/* Pagination */

/* Progress */

/* Accordion */

/* Breadcrumb */

/* Close button */


/* Tooltips */




/* Popovers */

/* Spinners */

/* Offcanvas */

/* Input group */

/*--------------------------------------------------------------
# DataTables Overrides (simple-datatables)
--------------------------------------------------------------*/


/* Empty state */


/*--------------------------------------------------------------
# Chart Library Overrides
--------------------------------------------------------------*/
/* ApexCharts */

/* Chart.js */

/* ECharts */


/* Chart Containers */

/* Chart Loading State */

/* Chart Legend Custom */

/* Sparkline Charts */


/* Mini Chart Stat */

/*--------------------------------------------------------------
# Header - Floating Card Style with Expandable Search
--------------------------------------------------------------*/



/* Desktop: Account for floating sidebar with gaps */
@media (min-width: 1200px) {

    @media (min-width: 576px) {
    }

    /* Hide logo on desktop (shown in sidebar) */
    @media (min-width: 1200px) {
    }

    /* Sidebar Toggle Button */
    /*--------------------------------------------------------------
# Expandable Search
--------------------------------------------------------------*/
    @media (min-width: 768px) {
    }

    .search-form {
        position: relative;
        display: flex;
        align-items: center;
        transition: width var(--transition-base);
    }

    /* Collapsed state - icon only */
    .search-form.collapsed {
        width: 40px;
        height: 40px;
    }

    .search-form.collapsed input {
        width: 0;
        padding: 0;
        opacity: 0;
        pointer-events: none;
        border: none;
    }

    /* Expanded state - full search field */
    .search-form.expanded {
        width: 280px;
    }

    .search-form.expanded input {
        width: 100%;
        opacity: 1;
        pointer-events: auto;
    }

    .search-form input {
        height: 40px;
        padding: 0 var(--spacing-md) 0 40px;
        background: var(--background-color);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        font-size: 0.875rem;
        color: var(--default-color);
        transition: width var(--transition-base), opacity var(--transition-base), padding var(--transition-base), border-color var(--transition-fast), box-shadow var(--transition-fast);
    }

    .search-form input::-moz-placeholder {
        color: var(--muted-color);
    }

    .search-form input::placeholder {
        color: var(--muted-color);
    }

    .search-form input:focus {
        outline: none;
        border-color: var(--accent-color);
        box-shadow: 0 0 0 3px var(--input-focus-ring);
    }

    /* Search toggle button */
    .search-toggle-btn {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-md);
        background: transparent;
        border: none;
        color: var(--muted-color);
        cursor: pointer;
        z-index: 1;
        transition: background-color var(--transition-fast), color var(--transition-fast);
    }

    .search-toggle-btn:hover {
        background: var(--background-color);
        color: var(--accent-color);
    }

    .search-toggle-btn i {
        font-size: 1.125rem;
    }

    /* Hide toggle btn when expanded and focused */
    .search-form.expanded .search-toggle-btn {
        pointer-events: none;
    }

    /* Header Right - Actions */
    @media (min-width: 576px) {
    }

    /* Header Action Button */
    @media (min-width: 576px) {
    }

    /* Notification Badge */
    /* Theme Toggle */




    /* Mobile actions - visible only on mobile */
    @media (min-width: 768px) {
    }

    /* Mobile Menu Toggle */
    /*--------------------------------------------------------------
# Mobile Search Overlay
--------------------------------------------------------------*/
    /* Mobile search form styling */
    /*--------------------------------------------------------------
# Mobile Header Menu (Three Dots Menu)
--------------------------------------------------------------*/
    @media (min-width: 768px) {

    }















    /* Danger variant for sign out */
    /* Theme toggle in mobile menu */
    /* Fullscreen toggle in mobile menu */
    /* Desktop: Align main content with header (same left position) */
    @media (min-width: 1200px) {
        .main {
            /* Match header's left position exactly */
            margin-left: calc(var(--sidebar-width) + var(--floating-gap) * 2);
            /* No horizontal padding - content fills the space like the header */
            padding: 0;
            padding-bottom: var(--floating-gap);
            /* Right margin to match header's right gap */
            margin-right: var(--floating-gap);
        }
    }

    /* Main Content */
    .main-content {
        flex: 1;
        padding: 5px;
        padding-bottom: 2rem;
    }

    /* Page Header */
    /* Breadcrumb */
    /* Content Sections */
    .section {
        margin-bottom: var(--spacing-xl);
    }

    .section:last-child {
        margin-bottom: 0;
    }

    .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--spacing-lg);
        flex-wrap: wrap;
        gap: var(--spacing-md);
    }

    .section-title {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--heading-color);
        margin: 0;
    }

    .section-subtitle {
        font-size: 0.875rem;
        color: var(--muted-color);
        margin-top: 2px;
    }


    /*--------------------------------------------------------------
# Cards
--------------------------------------------------------------*/
    .card {
        background: var(--card-bg);
        border: 1px solid var(--card-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--card-shadow);
    }

    .card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-md) var(--spacing-lg);
        background: transparent;
        border-bottom: 1px solid var(--border-color);
    }

    .card-header:first-child {
        border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
    }

    .card-title {
        font-size: 1rem;
        font-weight: 600;
        color: var(--heading-color);
        margin: 0;
    }

    .card-subtitle {
        font-size: 0.8125rem;
        color: var(--muted-color);
        margin-top: 2px;
    }

    .card-body {
        padding: var(--spacing-lg);
    }

    .card-footer {
        padding: var(--spacing-md) var(--spacing-lg);
        background: var(--background-color);
        border-top: 1px solid var(--border-color);
        border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
    }

    /* Card Actions (Dropdown menu) */
    .card-actions {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
    }

    .card-actions
    .card-actions
        /* Card with no header border */
    .card-borderless .card-header {
        border-bottom: none;
        padding-bottom: 0;
    }

    /* Card with colored header */
    .card-header-primary {
        background: var(--accent-color);
        color: white;
        border-bottom: none;
    }

    .card-header-primary .card-title {
        color: white;
    }

    /* Card image */
    .card-img-top {
        border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
    }

    .card-img-bottom {
        border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
    }

    /* Horizontal Card */
    .card-horizontal {
        flex-direction: row;
    }

    .card-horizontal .card-img-left {
        border-radius: calc(var(--radius-lg) - 1px) 0 0 calc(var(--radius-lg) - 1px);
        width: 200px;
        -o-object-fit: cover;
        object-fit: cover;
    }

    /* Card Link */
    .card-link {
        text-decoration: none;
        color: inherit;
        display: block;
    }

    .card-link:hover .card {
        border-color: var(--accent-color);
        box-shadow: var(--shadow-md);
    }

    /* Card hover effect */
    .card-hover {
        transition: transform var(--transition-base), box-shadow var(--transition-base);
    }

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


    /*--------------------------------------------------------------
# Badges
--------------------------------------------------------------*/
    #ratestable  .badge {
        display: inline-flex;
        align-items: center;
        padding: 0.25em 0.5em;
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: var(--radius-sm);
    }

    /* Badge Colors - Bootstrap's

    #ratestable  .badge.bg-secondary {
        color: white;
    }

    #ratestable  .badge.bg-success {
        color: white;
    }

    #ratestable  .badge.bg-warning {
        color: #1e293b;
    }

    #ratestable  .badge.bg-danger {
        color: white;
    }

    #ratestable  .badge.bg-info {
        color: white;
    }

    #ratestable  .badge.bg-light {
        color: var(--default-color);
    }

    #ratestable  .badge.bg-dark {
        color: white;
    }

    /* Soft/Light Badge Variants */
    #ratestable  .badge-soft-primary {
        background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
        color: var(--accent-color);
    }

    #ratestable  .badge-soft-success {
        background-color: var(--success-color-light);
        color: var(--success-color);
    }

    #ratestable  .badge-soft-warning {
        background-color: var(--warning-color-light);
        color: var(--warning-color);
    }

    #ratestable  .badge-soft-danger {
        background-color: var(--danger-color-light);
        color: var(--danger-color);
    }

    #ratestable  .badge-soft-info {
        background-color: var(--info-color-light);
        color: var(--info-color);
    }

    #ratestable  .badge-soft-secondary {
        background-color: var(--border-color-light);
        color: var(--muted-color);
    }

    /* Outline Badges */
    #ratestable  .badge-outline-primary {
        background-color: transparent;
        border: 1px solid var(--accent-color);
        color: var(--accent-color);
    }

    #ratestable  .badge-outline-secondary {
        background-color: transparent;
        border: 1px solid var(--muted-color);
        color: var(--muted-color);
    }

    #ratestable  .badge-outline-success {
        background-color: transparent;
        border: 1px solid var(--success-color);
        color: var(--success-color);
    }

    #ratestable  .badge-outline-warning {
        background-color: transparent;
        border: 1px solid var(--warning-color);
        color: var(--warning-color);
    }

    #ratestable  .badge-outline-danger {
        background-color: transparent;
        border: 1px solid var(--danger-color);
        color: var(--danger-color);
    }

    #ratestable  .badge-outline-info {
        background-color: transparent;
        border: 1px solid var(--info-color);
        color: var(--info-color);
    }

    /* Pill Badge - Bootstrap has .rounded-pill, this adds badge-specific padding */
    #ratestable  .badge.rounded-pill {
        padding-left: 0.75em;
        padding-right: 0.75em;
    }

    /* Badge with Icon */
    #ratestable  .badge-icon {
        display: inline-flex;
        align-items: center;
        gap: 0.25em;
    }

    #ratestable  .badge-icon i {
        font-size: 0.875em;
    }

    /* Badge Dot */
    #ratestable  .badge-dot {
        width: 8px;
        height: 8px;
        padding: 0;
        border-radius: var(--radius-full);
    }

    #ratestable  .badge-dot-lg {
        width: 10px;
        height: 10px;
    }

    /* Status Badge */












    /* Badge Sizes */
    #ratestable  .badge-sm {
        padding: 0.2em 0.4em;
        font-size: 0.625rem;
    }

    #ratestable  .badge-lg {
        padding: 0.35em 0.65em;
        font-size: 0.875rem;
    }








    /* Floating Labels */
    /* Required Indicator */


    /*--------------------------------------------------------------
# Tables
--------------------------------------------------------------*/
    .table {
        width: 100%;
        margin-bottom: 0;
        color: var(--default-color);
        vertical-align: middle;
        border-color: var(--border-color);
    }

    .table > :not(caption) > * > * {
        padding: var(--spacing-md) var(--spacing-md);
        background-color: transparent;
        border-bottom-width: 1px;
        box-shadow: none;
    }

    .table > thead {
        vertical-align: bottom;
    }

    .table > thead > tr > th {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted-color);
        background-color: var(--table-header-bg);
        border-bottom: 1px solid var(--border-color);
    }

    .table > tbody > tr > td {
        font-size: 0.875rem;
        border-bottom: 1px solid var(--border-color-light);
    }

    .table > tbody > tr:last-child > td {
        border-bottom: none;
    }

    /* Striped Table */
    .table-striped > tbody > tr:nth-of-type(odd) > * {
        background-color: var(--table-stripe-bg);
    }

    /* Hover Table */
    .table-hover > tbody > tr:hover > * {
        background-color: var(--table-hover-bg);
    }

    /* Bordered Table */
    .table-bordered > :not(caption) > * {
        border-width: 1px 0;
    }

    .table-bordered > :not(caption) > * > * {
        border-width: 0 1px;
    }

    /* Borderless Table */
    .table-borderless > :not(caption) > * > * {
        border-bottom-width: 0;
    }

    /* Small Table */
    .table-sm > :not(caption) > * > * {
        padding: var(--spacing-sm) var(--spacing-sm);
    }

    /* Responsive Table */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Table with Actions */
    .table-actions {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
    }

    .table-actions
        /* Table User Cell */
    .table-user {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .table-user-avatar {
        width: 36px;
        height: 36px;
        border-radius: var(--radius-full);
        -o-object-fit: cover;
        object-fit: cover;
        flex-shrink: 0;
    }

    .table-user-name {
        font-weight: 500;
        color: var(--heading-color);
    }

    .table-user-email {
        font-size: 0.8125rem;
        color: var(--muted-color);
    }

    /* Table Status */
    .table-status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.8125rem;
        font-weight: 500;
    }

    .table-status::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: var(--radius-full);
    }

    .table-status-active::before {
        background-color: var(--success-color);
    }

    .table-status-inactive::before {
        background-color: var(--light-color);
    }

    .table-status-pending::before {
        background-color: var(--warning-color);
    }

    /* Sortable Headers */
    .table-sortable th {
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
    }

    .table-sortable th:hover {
        background-color: var(--table-hover-bg);
    }

    .table-sort-icon {
        margin-left: var(--spacing-xs);
        opacity: 0.3;
    }

    .table-sortable th.sorted .table-sort-icon {
        opacity: 1;
        color: var(--accent-color);
    }

    /* Selectable Rows */
    .table-selectable tbody tr {
        cursor: pointer;
    }

    .table-selectable tbody tr.selected {
        background-color: color-mix(in srgb, var(--accent-color), transparent 90%) !important;
    }

    /* Empty Table State */
    .table-empty {
        text-align: center;
        padding: var(--spacing-2xl) var(--spacing-lg);
        color: var(--muted-color);
    }

    .table-empty-icon {
        font-size: 2rem;
        margin-bottom: var(--spacing-md);
        opacity: 0.5;
    }

    /*--------------------------------------------------------------
# Table Density Toggle
--------------------------------------------------------------*/
    /* Compact density */
    .table-compact > :not(caption) > * > * {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 0.8125rem;
    }

    .table-compact > thead > tr > th {
        font-size: 0.6875rem;
    }

    /* Comfortable density (default - same as base table) */
    .table-comfortable > :not(caption) > * > * {
        padding: var(--spacing-md) var(--spacing-md);
    }

    /* Spacious density */
    .table-spacious > :not(caption) > * > * {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    /* Density toggle button group */
    .table-density-toggle {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        padding: 2px;
        background: var(--background-color);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
    }

    .table-density-toggle button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        padding: 0;
        border-radius: var(--radius-sm);
        border: none;
        background: transparent;
        color: var(--muted-color);
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .table-density-toggle button:hover {
        color: var(--default-color);
    }

    .table-density-toggle button.active {
        background: var(--surface-color);
        color: var(--accent-color);
        box-shadow: var(--shadow-sm);
    }

    .table-density-toggle button i {
        font-size: 0.875rem;
    }


    /* Tab Content */
    .tab-content > .tab-pane {
        display: none;
    }

    .tab-content > .active {
        display: block;
    }

    /* Nav with Icon */
    /* Segment Control (Toggle Group) */
    /* Card Nav (inside card header) */
    .card-header-tabs {
        margin-right: calc(var(--spacing-lg) * -0.5);
        margin-bottom: calc(var(--spacing-md) * -1);
        margin-left: calc(var(--spacing-lg) * -0.5);
        border-bottom: 0;
    }

    .card-header-pills {
        margin-right: calc(var(--spacing-lg) * -0.5);
        margin-left: calc(var(--spacing-lg) * -0.5);
    }


    /*--------------------------------------------------------------
# Responsive Tables Page Styles
--------------------------------------------------------------*/
    /* Stacked Table Pattern - transforms to card-like layout on mobile */
    @media (max-width: 767.98px) {
        .table-stacked thead {
            display: none;
        }

        .table-stacked tbody tr {
            display: block;
            margin-bottom: var(--spacing-md);
            padding: var(--spacing-md);
            background-color: var(--surface-color);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
        }

        .table-stacked tbody td {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--spacing-sm) 0;
            border: none;
            border-bottom: 1px solid var(--border-color-light);
        }

        .table-stacked tbody td:last-child {
            border-bottom: none;
        }

        .table-stacked tbody td::before {
            content: attr(data-label);
            font-weight: 600;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--muted-color);
            margin-right: var(--spacing-md);
        }
    }

    /* Scroll Indicator Wrapper */
    .table-scroll-wrapper {
        position: relative;
    }

    .table-scroll-wrapper::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 40px;
        background: linear-gradient(to right, transparent, var(--surface-color));
        pointer-events: none;
        opacity: 1;
        transition: opacity var(--transition-fast);
    }

    .table-scroll-wrapper.scrolled-end::after {
        opacity: 0;
    }

    /* Sticky Column Table */
    .table-sticky-col .sticky-col {
        position: sticky;
        left: 0;
        background-color: var(--surface-color);
        z-index: 1;
        min-width: 200px;
    }

    .table-sticky-col .sticky-col::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 1px;
        background-color: var(--border-color);
    }

    .table-sticky-col thead .sticky-col {
        background-color: var(--table-header-bg);
        z-index: 2;
    }

    .table-sticky-col tbody tr:hover .sticky-col {
        background-color: var(--table-hover-bg);
    }
}