/**
 * Dashboard Layout Styles
 * Global styles for role-based dashboard panels (Fee Clerk, Admin, etc.)
 *
 * These styles are global (not scoped) to ensure they work with Blazor components.
 * CSS isolation doesn't work well with nested child elements.
 *
 * RESPONSIVE DESIGN SYSTEM:
 * - Uses CSS custom properties from _variables.css
 * - Fluid typography and spacing with clamp()
 * - Breakpoints: xs(480) sm(640) md(768) lg(1024) xl(1280) 2xl(1536) 3xl(1920) 4xl(2560) 5xl(3840)
 * - Container queries for component-level responsiveness
 */

/* =============================================================================
   DASHBOARD BODY
   ============================================================================= */

.rd-body {
    min-height: 100vh;
    background: var(--bg-primary);
    font-size: var(--font-size-base);
}

/* =============================================================================
   TOP NAVIGATION (Dashboard)
   ============================================================================= */

.dashboard-nav.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--navbar-height);
    max-height: var(--navbar-height);
    background: var(--card-gradient);
    border-bottom: 1px solid var(--border);
    z-index: var(--z-fixed, 1030);
    padding: 0 var(--container-padding);
    overflow: visible;
    box-sizing: border-box;
}

.dashboard-nav .nav-container {
    height: 100%;
    max-height: var(--navbar-height);
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: visible;
    padding: 0;
}

.dashboard-nav .nav-container > * {
    max-height: none;
}

.dashboard-nav .nav-left {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding-left: 0;
}

/* Navbar logo - always visible */
.dashboard-nav .nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.dashboard-nav .nav-logo:hover {
    text-decoration: none;
    opacity: 0.9;
}

.dashboard-nav .nav-logo-img {
    height: 100px;
    width: auto;
    object-fit: contain;
}

/* Light theme: show light logo, hide dark logo */
.dashboard-nav .nav-logo-light {
    display: block;
}

.dashboard-nav .nav-logo-dark {
    display: none;
}

/* Dark theme: show dark logo, hide light logo */
[data-theme="dark"] .dashboard-nav .nav-logo-light {
    display: none;
}

[data-theme="dark"] .dashboard-nav .nav-logo-dark {
    display: block;
}

/* Right side group container */
.dashboard-nav .nav-right-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 100%;
}

.dashboard-nav .nav-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 100%;
    max-height: 64px;
    overflow: visible;
}

.dashboard-nav .nav-actions > * {
    max-height: 56px;
    flex-shrink: 0;
}

/* Compact icon buttons for dashboard navbar */
.dashboard-nav .btn-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    font-size: 1rem;
    padding: 0;
}

.dashboard-nav .btn-icon:hover {
    transform: none;
}

/* Notification Bell Badge - Override Bootstrap badge styling */
.nav-notifications {
    position: relative;
}

.nav-notifications .nav-action-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.nav-notifications .nav-action-icon:hover {
    color: var(--text-primary);
}

.nav-notifications .nav-action-icon i {
    font-size: 1.125rem;
}

/* Notification count badge - small red circle */
.nav-notifications .nav-action-icon .badge {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    min-width: 16px !important;
    width: auto !important;
    height: 16px !important;
    padding: 0 4px !important;
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    text-align: center !important;
    background: var(--error-text, #ef4444) !important;
    color: var(--btn-primary-text, #ffffff) !important;
    border-radius: 8px !important;
    border: 2px solid var(--bg-primary, #ffffff) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* =============================================================================
   SHELL CONTAINER
   ============================================================================= */

.rd-shell {
    display: flex;
    margin-top: var(--navbar-height);
    min-height: calc(100vh - var(--navbar-height));
    position: relative;
    z-index: 1; /* Keep below navbar (z-index: 1030) */
}

/* =============================================================================
   SIDEBAR
   ============================================================================= */

.rd-sidebar {
    width: var(--sidebar-width);
    background: var(--card-gradient);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: var(--navbar-height);
    bottom: 0;
    overflow-y: auto;
    transition: all 0.3s ease;
    z-index: var(--z-sticky, 1020);
}

.rd-sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

/* Sidebar Header (collapse button only) */
.rd-sidebar__header {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.rd-sidebar__header .btn-icon {
    flex-shrink: 0;
}

.rd-sidebar__header .sidebar-collapse {
    transition: transform 0.3s ease;
}

.rd-sidebar.collapsed .sidebar-collapse {
    transform: rotate(180deg);
}

.rd-sidebar.collapsed .rd-sidebar__header {
    justify-content: center;
}

/* Mobile close button - hidden on desktop */
.sidebar-close-mobile {
    display: none;
}

/* =============================================================================
   SIDEBAR ROLE SWITCH
   ============================================================================= */

.rd-sidebar__role-switch {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.rd-sidebar__label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 0.25rem;
    display: block;
}

.rd-sidebar__role-badge {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    background: var(--brand-blue-alpha, rgba(59, 130, 246, 0.1));
    border-radius: var(--radius-md);
    color: var(--brand-blue, var(--brand-primary));
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 0.4rem;
}

.rd-sidebar__switch-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.35rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.rd-sidebar__switch-btn:hover {
    background: var(--brand-blue, var(--brand-primary));
    color: var(--text-inverse, white);
    border-color: var(--brand-blue, var(--brand-primary));
    text-decoration: none;
}

/* Sidebar Collapsed States */
.rd-sidebar.collapsed .rd-sidebar__role-switch span,
.rd-sidebar.collapsed .rd-sidebar__label {
    display: none;
}

.rd-sidebar.collapsed .rd-sidebar__role-badge,
.rd-sidebar.collapsed .rd-sidebar__switch-btn {
    justify-content: center;
    padding: 0.35rem;
}

/* =============================================================================
   SIDEBAR MENU
   ============================================================================= */

.rd-sidebar__menu {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
}

/* =============================================================================
   SIDEBAR SECTIONS & LINKS
   ============================================================================= */

.rd-sidebar__section {
    margin-bottom: 0.25rem;
}

.rd-sidebar__label--collapsible {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.rd-sidebar__label--collapsible:hover {
    background: var(--bg-secondary);
}

.rd-sidebar__toggle-icon {
    font-size: 0.6rem;
    transition: transform 0.2s ease;
}

.rd-sidebar__toggle-icon.rotated {
    transform: rotate(180deg);
}

.rd-sidebar__links {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.rd-sidebar__links.collapsed {
    max-height: 0;
    opacity: 0;
}

.rd-sidebar__links.expanded {
    max-height: 500px;
    opacity: 1;
}

.rd-sidebar__link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem 0.4rem 1.25rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.8rem;
    transition: all 0.2s ease;
    border-left: 2px solid transparent;
}

.rd-sidebar__link:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    text-decoration: none;
}

.rd-sidebar__link.active {
    background: var(--brand-blue-alpha, rgba(59, 130, 246, 0.1));
    color: var(--brand-blue, var(--brand-primary));
    border-left-color: var(--brand-blue, var(--brand-primary));
    font-weight: 600;
}

.rd-sidebar__link i {
    width: 1rem;
    text-align: center;
    font-size: 0.75rem;
}

.rd-sidebar__text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sidebar Collapsed - hide text */
.rd-sidebar.collapsed .rd-sidebar__section .rd-sidebar__label--collapsible span:first-child,
.rd-sidebar.collapsed .rd-sidebar__toggle-icon,
.rd-sidebar.collapsed .rd-sidebar__text {
    display: none;
}

.rd-sidebar.collapsed .rd-sidebar__link {
    justify-content: center;
    padding: 0.5rem;
}

.rd-sidebar.collapsed .rd-sidebar__link i {
    font-size: 0.9rem;
}

/* =============================================================================
   SIDEBAR FOOTER (User Info & Logout)
   ============================================================================= */

.rd-sidebar__footer {
    padding: 0.5rem;
    border-top: 1px solid var(--border);
    margin-top: auto;
}

.rd-sidebar__user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem;
    margin-bottom: 0.4rem;
}

.rd-sidebar__user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand-blue, var(--brand-primary));
    color: var(--text-inverse, white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.rd-sidebar__user-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rd-sidebar__user-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rd-sidebar__user-role {
    font-size: 0.65rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rd-sidebar__logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0.35rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rd-sidebar__logout-btn:hover {
    background: var(--color-error-alpha, rgba(239, 68, 68, 0.1));
    border-color: var(--color-error, #ef4444);
    color: var(--color-error, #ef4444);
}

/* Sidebar Footer Collapsed States */
.rd-sidebar.collapsed .rd-sidebar__user-info {
    display: none;
}

.rd-sidebar.collapsed .rd-sidebar__user {
    justify-content: center;
    padding: 0;
    margin-bottom: 0.25rem;
}

.rd-sidebar.collapsed .rd-sidebar__logout-btn span {
    display: none;
}

.rd-sidebar.collapsed .rd-sidebar__logout-btn {
    padding: 0.35rem;
    width: auto;
    margin: 0 auto;
}

/* =============================================================================
   MAIN CONTENT
   ============================================================================= */

.rd-main {
    flex: 1;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    /* Container for responsive queries */
    container-type: inline-size;
    container-name: main-content;
}

.rd-sidebar.collapsed ~ .rd-main {
    margin-left: var(--sidebar-collapsed-width);
}

.rd-content {
    flex: 1;
    padding: var(--container-padding);
    /* Max width and center for ultra-wide screens */
    max-width: var(--content-max-width);
    width: 100%;
    margin: 0 auto;
}

.rd-footer {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.7rem;
    text-align: center;
}

/* =============================================================================
   BUTTON ICONS (Dashboard)
   ============================================================================= */

.rd-body .btn-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.rd-body .btn-icon:hover {
    background: var(--bg-secondary);
}

/* =============================================================================
   RESPONSIVE BREAKPOINTS - Industry Standard Mobile-First Approach

   Breakpoints:
   - xs: 0-479px (Extra small phones)
   - sm: 480-639px (Large phones)
   - md: 640-767px (Small tablets)
   - lg: 768-1023px (Tablets / Small laptops 13")
   - xl: 1024-1279px (Laptops)
   - 2xl: 1280-1535px (Large laptops / Small monitors)
   - 3xl: 1536-1919px (Standard monitors)
   - 4xl: 1920-2559px (Full HD monitors)
   - 5xl: 2560-3839px (2K / QHD monitors)
   - 6xl: 3840px+ (4K monitors / Large displays)
   ============================================================================= */

/* Mobile Toggle - hidden by default on desktop */
.rd-body .nav-toggle,
.mobile-menu-btn {
    display: none;
}

/* Mobile overlay when sidebar is open */
.rd-mobile-overlay {
    display: none;
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-sticky, 1020) - 1);
}

/* =============================================================================
   MOBILE: 0-767px (Phones & Small Tablets)
   ============================================================================= */
@media (max-width: 767px) {
    /* Show hamburger button on mobile */
    .rd-body .nav-toggle,
    .dashboard-nav .nav-toggle,
    .dashboard-nav .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: var(--radius-md);
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        color: var(--text-primary);
        cursor: pointer;
        flex-shrink: 0;
        margin-left: 0.5rem;
    }

    .rd-body .nav-toggle:hover,
    .dashboard-nav .mobile-menu-btn:hover {
        background: var(--brand-blue-alpha);
        color: var(--brand-blue);
    }

    /* Hide sidebar by default on mobile */
    .rd-sidebar {
        transform: translateX(-100%);
        width: 280px;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    }

    /* Show sidebar when mobile-open class is added */
    .rd-sidebar.mobile-open {
        transform: translateX(0);
    }

    /* Show overlay when sidebar is open */
    .rd-mobile-overlay.active {
        display: block;
    }

    /* Main content takes full width on mobile */
    .rd-main {
        margin-left: 0 !important;
    }

    /* Ensure collapsed sidebar also slides out on mobile */
    .rd-sidebar.collapsed {
        transform: translateX(-100%);
        width: 280px;
    }

    .rd-sidebar.collapsed.mobile-open {
        transform: translateX(0);
    }

    /* Hide sidebar collapse button on mobile, show close button */
    .rd-sidebar__header .sidebar-collapse {
        display: none;
    }

    .rd-sidebar__header .sidebar-close-mobile {
        display: flex;
    }

    /* Mobile sidebar header layout */
    .rd-sidebar__header {
        justify-content: space-between;
        padding: 0.75rem;
    }

    .mobile-only {
        display: flex !important;
    }

    /* Show navbar logo on mobile */
    .dashboard-nav .nav-logo--mobile {
        display: flex;
    }

    /* IMPORTANT: Override modern-theme.css hiding of nav-actions */
    .dashboard-nav .nav-actions {
        display: flex !important;
        gap: 0.5rem;
    }

    /* Hide all nav items on mobile EXCEPT profile avatar */
    .dashboard-nav .nav-actions .session-selector,
    .dashboard-nav .nav-actions .connection-status,
    .dashboard-nav .nav-actions .nav-icon-btn,
    .dashboard-nav .nav-actions .theme-toggle,
    .dashboard-nav .nav-actions .nav-notifications,
    .dashboard-nav .nav-actions .nav-quick-action {
        display: none !important;
    }

    /* Keep profile and connection status visible in nav-actions */
    .dashboard-nav .nav-actions .nav-profile,
    .dashboard-nav .nav-actions .connection-status {
        display: flex !important;
    }

    /* Compact nav-actions on mobile */
    .dashboard-nav .nav-actions {
        gap: 0.5rem;
        margin-right: 0;
        flex-shrink: 0;
    }

    /* Fix nav-container layout - push items to edges */
    .dashboard-nav .nav-container {
        justify-content: space-between;
    }

    /* Group nav-actions and hamburger together on right */
    .dashboard-nav .nav-right-group {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* Responsive content padding */
    .rd-content {
        padding: var(--space-sm);
    }
}

/* =============================================================================
   EXTRA SMALL: 0-479px (Small Phones)
   ============================================================================= */
@media (max-width: 479px) {
    /* Even smaller hamburger button */
    .dashboard-nav .mobile-menu-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
    }

    /* Smaller logo on very small screens */
    .dashboard-nav .nav-logo-img {
        height: 50px;
    }

    /* Tighter navbar padding */
    .dashboard-nav.top-nav {
        padding: 0 0.5rem;
    }

    /* Compact content */
    .rd-content {
        padding: var(--space-xs);
    }
}

/* =============================================================================
   SMALL LAPTOPS: 768-1023px (13" Laptops)
   ============================================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --sidebar-width: 180px;
        --sidebar-collapsed-width: 48px;
    }

    .rd-content {
        padding: var(--space-md);
    }
}

/* =============================================================================
   MEDIUM LAPTOPS: 1024-1279px (14-15" Laptops)
   ============================================================================= */
@media (min-width: 1024px) and (max-width: 1279px) {
    :root {
        --sidebar-width: 200px;
        --sidebar-collapsed-width: 52px;
    }

    .rd-content {
        padding: var(--space-lg);
    }
}

/* =============================================================================
   LARGE LAPTOPS: 1280-1535px (15-17" Laptops)
   ============================================================================= */
@media (min-width: 1280px) and (max-width: 1535px) {
    :root {
        --sidebar-width: 220px;
        --sidebar-collapsed-width: 56px;
    }

    .rd-content {
        padding: var(--space-lg);
    }
}

/* =============================================================================
   STANDARD MONITORS: 1536-1919px (HD Monitors)
   ============================================================================= */
@media (min-width: 1536px) and (max-width: 1919px) {
    :root {
        --sidebar-width: 240px;
        --sidebar-collapsed-width: 60px;
        --navbar-height: 68px;
    }

    .rd-content {
        padding: var(--space-xl);
    }
}

/* =============================================================================
   FULL HD: 1920-2559px (1080p Monitors)
   ============================================================================= */
@media (min-width: 1920px) and (max-width: 2559px) {
    :root {
        --sidebar-width: 260px;
        --sidebar-collapsed-width: 64px;
        --navbar-height: 72px;
        --content-max-width: 2200px;
    }

    .rd-content {
        padding: var(--space-2xl);
    }

    /* Larger sidebar text */
    .rd-sidebar__link {
        font-size: var(--font-size-lg);
        padding: 0.5rem 0.85rem 0.5rem 1.5rem;
    }

    .rd-sidebar__label {
        font-size: var(--font-size-sm);
    }
}

/* =============================================================================
   2K / QHD: 2560-3839px (1440p Monitors)
   ============================================================================= */
@media (min-width: 2560px) and (max-width: 3839px) {
    :root {
        --sidebar-width: 300px;
        --sidebar-collapsed-width: 72px;
        --navbar-height: 80px;
        --content-max-width: 2800px;
    }

    .rd-content {
        padding: var(--space-3xl);
    }

    /* Scale up sidebar elements */
    .rd-sidebar__link {
        font-size: var(--font-size-xl);
        padding: 0.6rem 1rem 0.6rem 1.75rem;
    }

    .rd-sidebar__label {
        font-size: var(--font-size-base);
    }

    .rd-sidebar__role-badge {
        font-size: var(--font-size-lg);
        padding: 0.5rem 0.75rem;
    }

    /* Larger nav items */
    .dashboard-nav .btn-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        font-size: 1.25rem;
    }

    .dashboard-nav .nav-logo-img {
        height: 120px;
    }
}

/* =============================================================================
   4K: 3840px+ (4K Monitors / Large Displays 75"+)
   ============================================================================= */
@media (min-width: 3840px) {
    :root {
        --sidebar-width: 360px;
        --sidebar-collapsed-width: 84px;
        --navbar-height: 96px;
        --content-max-width: 3400px;
    }

    .rd-content {
        padding: var(--space-4xl);
    }

    /* Scale up all sidebar elements for 4K */
    .rd-sidebar__link {
        font-size: var(--font-size-2xl);
        padding: 0.75rem 1.25rem 0.75rem 2rem;
    }

    .rd-sidebar__link i {
        font-size: 1.25rem;
        width: 1.5rem;
    }

    .rd-sidebar__label {
        font-size: var(--font-size-lg);
    }

    .rd-sidebar__role-badge {
        font-size: var(--font-size-xl);
        padding: 0.6rem 1rem;
    }

    .rd-sidebar__switch-btn {
        font-size: var(--font-size-lg);
        padding: 0.5rem 0.75rem;
    }

    .rd-sidebar__user-avatar {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .rd-sidebar__user-name {
        font-size: var(--font-size-lg);
    }

    .rd-sidebar__user-role {
        font-size: var(--font-size-base);
    }

    .rd-sidebar__logout-btn {
        font-size: var(--font-size-lg);
        padding: 0.5rem 0.75rem;
    }

    /* Scale up navbar elements */
    .dashboard-nav .btn-icon {
        width: 56px;
        height: 56px;
        min-width: 56px;
        min-height: 56px;
        font-size: 1.5rem;
    }

    .dashboard-nav .nav-logo-img {
        height: 150px;
    }

    /* Larger right actions */
    .dashboard-nav .nav-right-group {
        gap: 1.25rem;
    }

    .dashboard-nav .nav-actions {
        gap: 1.25rem;
    }
}

/* =============================================================================
   COMPACT DASHBOARD STYLES (Data-Dense Areas)
   ============================================================================= */

/* Global compact form styling for dashboards */
.rd-body input[type="text"],
.rd-body input[type="number"],
.rd-body input[type="email"],
.rd-body input[type="password"],
.rd-body input[type="date"],
.rd-body input[type="search"],
.rd-body select,
.rd-body textarea {
    padding: 0.35rem 0.5rem;
    font-size: 0.8125rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text-primary);
    line-height: 1.4;
}

.rd-body input:focus,
.rd-body select:focus,
.rd-body textarea:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 2px var(--brand-blue-alpha);
}

/* Compact buttons */
.rd-body .btn,
.rd-body button:not(.btn-icon) {
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    border-radius: var(--radius-sm);
}

.rd-body .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.rd-body .btn-lg {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* Compact tables */
.rd-body table {
    font-size: 0.8125rem;
    border-collapse: collapse;
    width: 100%;
}

.rd-body table th,
.rd-body table td {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.rd-body table th {
    background: var(--bg-secondary);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
}

.rd-body table tr:nth-child(even) {
    background: var(--bg-secondary);
}

.rd-body table tr:hover {
    background: var(--brand-blue-alpha);
}

/* Compact cards */
.rd-body .card,
.rd-body .panel {
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
}

.rd-body .card-header,
.rd-body .panel-header {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    font-weight: 600;
    font-size: 0.8125rem;
}

.rd-body .card-body,
.rd-body .panel-body {
    padding: 0.75rem;
}

.rd-body .card-footer,
.rd-body .panel-footer {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
}

/* Compact form groups */
.rd-body .form-group {
    margin-bottom: 0.5rem;
}

.rd-body label {
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    display: block;
    color: var(--text-secondary);
}

/* Compact grid spacing */
.rd-body .row {
    margin-left: -0.375rem;
    margin-right: -0.375rem;
}

.rd-body .row > [class*="col"] {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}

/* Page title styling */
.rd-body h1,
.rd-body .page-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    color: var(--text-primary);
}

.rd-body h2 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}

.rd-body h3 {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 0.35rem 0;
    color: var(--text-primary);
}

/* Compact badge styling */
.rd-body .badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

/* Alert compact styling */
.rd-body .alert {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
}

/* Compact pagination */
.rd-body .pagination {
    gap: 0.25rem;
}

.rd-body .pagination .page-link {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* Compact dropdowns */
.rd-body .dropdown-menu {
    font-size: 0.8125rem;
    padding: 0.25rem 0;
    border-radius: var(--radius-sm);
}

.rd-body .dropdown-item {
    padding: 0.35rem 0.75rem;
}

/* Compact modal styling */
.rd-body .modal-header {
    padding: 0.75rem 1rem;
}

.rd-body .modal-body {
    padding: 1rem;
}

.rd-body .modal-footer {
    padding: 0.75rem 1rem;
}

/* Status badges */
.rd-body .status-paid,
.rd-body .status-success {
    background: var(--color-success-alpha);
    color: var(--color-success);
}

.rd-body .status-pending,
.rd-body .status-warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--color-warning);
}

.rd-body .status-unpaid,
.rd-body .status-error {
    background: var(--color-error-alpha);
    color: var(--color-error);
}

/* Compact text utilities */
.rd-body .text-sm {
    font-size: 0.75rem;
}

.rd-body .text-xs {
    font-size: 0.6875rem;
}

.rd-body .text-muted {
    color: var(--text-muted);
}

/* Compact spacing utilities */
.rd-body .mb-1 { margin-bottom: 0.25rem; }
.rd-body .mb-2 { margin-bottom: 0.5rem; }
.rd-body .mb-3 { margin-bottom: 0.75rem; }
.rd-body .mb-4 { margin-bottom: 1rem; }
.rd-body .mt-1 { margin-top: 0.25rem; }
.rd-body .mt-2 { margin-top: 0.5rem; }
.rd-body .mt-3 { margin-top: 0.75rem; }
.rd-body .mt-4 { margin-top: 1rem; }
.rd-body .p-1 { padding: 0.25rem; }
.rd-body .p-2 { padding: 0.5rem; }
.rd-body .p-3 { padding: 0.75rem; }
.rd-body .p-4 { padding: 1rem; }

/* Compact gap utilities */
.rd-body .gap-1 { gap: 0.25rem; }
.rd-body .gap-2 { gap: 0.5rem; }
.rd-body .gap-3 { gap: 0.75rem; }
.rd-body .gap-4 { gap: 1rem; }

/* =============================================================================
   RESPONSIVE GRID UTILITIES
   Auto-fill grids that adapt to screen size
   ============================================================================= */

/* Auto-fit grid - items automatically wrap and fill available space */
.rd-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-item-min, 280px), 1fr));
    gap: var(--grid-gap, var(--space-md));
}

/* Different min-width variants */
.rd-grid-auto-sm {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-md);
}

.rd-grid-auto-lg {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--space-lg);
}

.rd-grid-auto-xl {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: var(--space-xl);
}

/* Fixed column grids that respond to screen size */
.rd-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.rd-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.rd-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

/* Responsive fixed grids - adjust columns at breakpoints */
@media (max-width: 767px) {
    .rd-grid-2,
    .rd-grid-3,
    .rd-grid-4 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .rd-grid-3,
    .rd-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) and (max-width: 1535px) {
    .rd-grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =============================================================================
   RESPONSIVE TYPOGRAPHY UTILITIES
   ============================================================================= */

/* Fluid headings */
.rd-body h1,
.rd-body .page-title {
    font-size: var(--font-size-2xl);
}

.rd-body h2 {
    font-size: var(--font-size-xl);
}

.rd-body h3 {
    font-size: var(--font-size-lg);
}

/* Responsive text that scales with screen */
.text-fluid-sm {
    font-size: var(--font-size-sm);
}

.text-fluid-base {
    font-size: var(--font-size-base);
}

.text-fluid-lg {
    font-size: var(--font-size-lg);
}

.text-fluid-xl {
    font-size: var(--font-size-xl);
}

.text-fluid-2xl {
    font-size: var(--font-size-2xl);
}

/* =============================================================================
   CONTAINER QUERIES - Component-level responsiveness
   ============================================================================= */

/* Define container context */
.rd-container {
    container-type: inline-size;
}

/* Container query based card layouts */
@container (min-width: 400px) {
    .cq-grid-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }
}

@container (min-width: 600px) {
    .cq-grid-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-md);
    }
}

@container (min-width: 800px) {
    .cq-grid-4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-md);
    }
}

/* =============================================================================
   RESPONSIVE TABLE UTILITIES
   ============================================================================= */

/* Tables that scale with screen */
.rd-body table {
    font-size: var(--font-size-base);
}

.rd-body table th {
    font-size: var(--font-size-sm);
}

/* Responsive table wrapper - horizontal scroll on small screens */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Scale up table padding on larger screens */
@media (min-width: 1920px) {
    .rd-body table th,
    .rd-body table td {
        padding: var(--space-md) var(--space-lg);
    }
}

@media (min-width: 2560px) {
    .rd-body table th,
    .rd-body table td {
        padding: var(--space-lg) var(--space-xl);
    }
}

@media (min-width: 3840px) {
    .rd-body table th,
    .rd-body table td {
        padding: var(--space-xl) var(--space-2xl);
    }
}

/* =============================================================================
   RESPONSIVE FORM UTILITIES
   ============================================================================= */

/* Form inputs scale with screen */
.rd-body input[type="text"],
.rd-body input[type="number"],
.rd-body input[type="email"],
.rd-body input[type="password"],
.rd-body input[type="date"],
.rd-body input[type="search"],
.rd-body select,
.rd-body textarea {
    font-size: var(--font-size-base);
    padding: var(--space-sm) var(--space-md);
}

/* Scale up form elements on larger screens */
@media (min-width: 1920px) {
    .rd-body input[type="text"],
    .rd-body input[type="number"],
    .rd-body input[type="email"],
    .rd-body input[type="password"],
    .rd-body input[type="date"],
    .rd-body input[type="search"],
    .rd-body select,
    .rd-body textarea {
        padding: var(--space-md) var(--space-lg);
    }
}

@media (min-width: 2560px) {
    .rd-body input[type="text"],
    .rd-body input[type="number"],
    .rd-body input[type="email"],
    .rd-body input[type="password"],
    .rd-body input[type="date"],
    .rd-body input[type="search"],
    .rd-body select,
    .rd-body textarea {
        padding: var(--space-lg) var(--space-xl);
    }
}

/* =============================================================================
   RESPONSIVE BUTTON UTILITIES
   ============================================================================= */

.rd-body .btn,
.rd-body button:not(.btn-icon) {
    font-size: var(--font-size-base);
    padding: var(--space-sm) var(--space-lg);
}

@media (min-width: 1920px) {
    .rd-body .btn,
    .rd-body button:not(.btn-icon) {
        padding: var(--space-md) var(--space-xl);
    }
}

@media (min-width: 2560px) {
    .rd-body .btn,
    .rd-body button:not(.btn-icon) {
        padding: var(--space-lg) var(--space-2xl);
    }
}

/* =============================================================================
   RESPONSIVE CARD UTILITIES
   ============================================================================= */

.rd-body .card,
.rd-body .panel {
    border-radius: var(--radius-lg);
}

.rd-body .card-header,
.rd-body .panel-header {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--font-size-lg);
}

.rd-body .card-body,
.rd-body .panel-body {
    padding: var(--space-lg);
}

@media (min-width: 1920px) {
    .rd-body .card-header,
    .rd-body .panel-header {
        padding: var(--space-lg) var(--space-xl);
    }

    .rd-body .card-body,
    .rd-body .panel-body {
        padding: var(--space-xl);
    }
}

@media (min-width: 2560px) {
    .rd-body .card,
    .rd-body .panel {
        border-radius: var(--radius-xl);
    }

    .rd-body .card-header,
    .rd-body .panel-header {
        padding: var(--space-xl) var(--space-2xl);
    }

    .rd-body .card-body,
    .rd-body .panel-body {
        padding: var(--space-2xl);
    }
}