/* ==========================================================================
   GLOBAL RESPONSIVE TABLES (Applies across ALL themes)
   ========================================================================== */

@media (max-width: 767.98px) {

    /* Hide the standard desktop headers */
    .responsive-table thead {
        display: none !important;
    }

    /* Turn table rows into isolated, stacked cards */
    .responsive-table,
    .responsive-table tbody,
    .responsive-table tr,
    .responsive-table td {
        display: block !important;
        width: 100% !important;
    }

    .responsive-table tr {
        margin-bottom: 1.25rem !important;
        background-color: var(--card-bg, #ffffff) !important;
        /* Dynamically inherits from theme */
        border: 1px solid var(--bs-border-color) !important;
        /* Dynamically inherits from theme */
        border-radius: 12px !important;
        padding: 0.75rem 1.25rem !important;
    }

    /* Format each table cell into a flexbox row */
    .responsive-table td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        text-align: right !important;
        padding: 0.6rem 0.5rem !important;
        border-bottom: 1px solid var(--bs-border-color) !important;
        font-size: 0.9rem !important;
    }

    /* Remove the border from the very last item in the stacked row */
    .responsive-table td:last-child {
        border-bottom: none !important;
    }

    /* Inject the dynamic header label on the left using the HTML data-label */
    .responsive-table td::before {
        content: attr(data-label);
        font-weight: 600 !important;
        text-transform: uppercase !important;
        font-size: 0.75rem !important;
        letter-spacing: 0.5px !important;
        color: var(--bs-primary) !important;
        /* Automatically matches the Saffron/Blue/Green of the active theme! */
        text-align: left !important;
        margin-right: 1.5rem !important;
    }
}

/* ==========================================================================
   GLOBAL THEME-AWARE FORM CONTROLS
   ========================================================================== */

/* Label spacing and global neutral typography */
.theme-form-label {
    letter-spacing: 0.2px;
    color: var(--theme-text-muted, #64748b);
    /* Fallback to standard gray */
    transition: color 0.15s ease;
}

/* Base input field styling */
.theme-form-control {
    background-color: var(--form-input-bg, #ffffff) !important;
    border: 1px solid var(--bs-border-color, #dee2e6) !important;
    color: var(--bs-body-color, #212529) !important;
    border-radius: var(--form-border-radius, 6px) !important;
    /* Inherits perfect rounding from the theme */
    padding: 0.625rem 1rem !important;
    font-size: 0.9rem !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

/* Custom placeholder visibility */
.theme-form-control::placeholder {
    color: var(--theme-text-muted, #94a3b8) !important;
    opacity: 0.6;
}

/* Focus states - beautifully using theme accents */
.theme-form-control:focus {
    border-color: var(--bs-primary) !important;
    /* Uses primary theme color dynamically as a soft outer glow */
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15) !important;
    outline: 0;
}

/* Custom styling for select dropdown arrow in dark themes */
.theme-form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23888888' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-size: 12px 12px !important;
}

.scrollable-main {
    flex: 1;
    overflow-y: auto;
    /* Optional: ensures smooth scrolling on iOS mobile devices */
    -webkit-overflow-scrolling: touch;
}