/* SuperAdmin Responsive Styles */
/* Mobile-first responsive design for SuperAdmin pages */

/* ============================================
   MOBILE BREAKPOINTS
   - xs: < 576px (phones)
   - sm: 576px - 767px (large phones)
   - md: 768px - 991px (tablets)
   - lg: 992px+ (desktops)
   ============================================ */

/* ============================================
   HEADER & NAVIGATION
   ============================================ */
.superadmin-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.superadmin-header h4 {
    margin: 0;
    font-size: 1.25rem;
}

@media (max-width: 575.98px) {
    .superadmin-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .superadmin-header h4 {
        font-size: 1.1rem;
        order: -1;
        width: 100%;
    }
}

/* ============================================
   BUTTON GROUPS
   ============================================ */
.superadmin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

@media (max-width: 575.98px) {
    .superadmin-actions {
        width: 100%;
    }

    .superadmin-actions .btn {
        flex: 1;
        min-width: 0;
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
    }

    .superadmin-actions .btn i {
        margin-right: 0.25rem;
    }
}

/* ============================================
   CARD LAYOUTS
   ============================================ */
.superadmin-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

@media (max-width: 575.98px) {
    .superadmin-card-grid {
        grid-template-columns: 1fr;
    }
}

/* Profile and Stats layout for Details page */
.superadmin-detail-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
}

@media (max-width: 991.98px) {
    .superadmin-detail-layout {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   DATA TABLES - MOBILE CARD VIEW
   ============================================ */

/* Hide table on mobile, show cards */
@media (max-width: 767.98px) {
    .superadmin-table-responsive thead {
        display: none;
    }

    .superadmin-table-responsive tbody tr {
        display: block;
        margin-bottom: 1rem;
        background: #fff;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 1rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }

    .superadmin-table-responsive tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
        border: none;
        border-bottom: 1px solid #f0f0f0;
    }

    .superadmin-table-responsive tbody td:last-child {
        border-bottom: none;
        padding-top: 0.75rem;
        justify-content: flex-end;
    }

    .superadmin-table-responsive tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6c757d;
        font-size: 0.75rem;
        text-transform: uppercase;
    }

    .superadmin-table-responsive tbody td:last-child::before {
        content: none;
    }
}

/* DataGrid mobile improvements */
@media (max-width: 767.98px) {
    .superadmin-datagrid .table-responsive {
        border: none;
    }

    .superadmin-datagrid .b-datagrid {
        font-size: 0.875rem;
    }

    .superadmin-datagrid .b-datagrid-header th {
        padding: 0.5rem;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    .superadmin-datagrid .b-datagrid-body td {
        padding: 0.5rem;
        vertical-align: middle;
    }

    /* Hide less important columns on mobile */
    .superadmin-datagrid .mobile-hide {
        display: none;
    }
}

/* ============================================
   FORM LAYOUTS
   ============================================ */
.superadmin-form .row {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

.superadmin-form .row > [class*="col-"] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

@media (max-width: 767.98px) {
    .superadmin-form .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 0.5rem;
    }

    .superadmin-form .field {
        margin-bottom: 0.75rem;
    }

    .superadmin-form .card-body {
        padding: 1rem;
    }
}

/* Form buttons */
.superadmin-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

@media (max-width: 575.98px) {
    .superadmin-form-actions {
        flex-direction: column;
    }

    .superadmin-form-actions .btn {
        width: 100%;
    }
}

/* ============================================
   STATISTICS CARDS
   ============================================ */
.superadmin-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    text-align: center;
}

.superadmin-stats-row .stat-item {
    flex: 1;
    min-width: 80px;
}

@media (max-width: 575.98px) {
    .superadmin-stats-row {
        flex-direction: row;
    }

    .superadmin-stats-row .stat-item h3,
    .superadmin-stats-row .stat-item h4 {
        font-size: 1.25rem;
    }

    .superadmin-stats-row .stat-item small {
        font-size: 0.7rem;
    }
}

/* ============================================
   DEFINITION LISTS (Profile cards)
   ============================================ */
.superadmin-profile dl {
    margin: 0;
}

.superadmin-profile dt {
    font-weight: 600;
    color: #6c757d;
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-top: 0.75rem;
}

.superadmin-profile dt:first-child {
    margin-top: 0;
}

.superadmin-profile dd {
    margin: 0.25rem 0 0 0;
    font-size: 0.9375rem;
}

@media (max-width: 575.98px) {
    .superadmin-profile dl {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem 1rem;
    }

    .superadmin-profile dt {
        margin-top: 0;
    }

    .superadmin-profile dd {
        margin: 0;
    }
}

/* ============================================
   ACTION BUTTONS (in tables/cards)
   ============================================ */
.superadmin-action-buttons {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

@media (max-width: 575.98px) {
    .superadmin-action-buttons {
        justify-content: flex-end;
        width: 100%;
    }

    .superadmin-action-buttons .btn {
        padding: 0.375rem 0.5rem;
    }
}

/* ============================================
   MOBILE CARD VIEW FOR LISTS
   ============================================ */
.superadmin-mobile-card {
    display: none;
}

@media (max-width: 767.98px) {
    .superadmin-desktop-table {
        display: none !important;
    }

    .superadmin-mobile-card {
        display: block;
    }

    .superadmin-mobile-card .card {
        margin-bottom: 0.75rem;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    .superadmin-mobile-card .card-body {
        padding: 1rem;
    }

    .superadmin-mobile-card .card-title {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .superadmin-mobile-card .card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
        font-size: 0.875rem;
        color: #6c757d;
        margin-bottom: 0.75rem;
    }

    .superadmin-mobile-card .card-meta span {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .superadmin-mobile-card .card-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        padding-top: 0.75rem;
        border-top: 1px solid #e9ecef;
    }

    .superadmin-mobile-card .stat-box {
        text-align: center;
        padding: 0.5rem;
        background: #f8f9fa;
        border-radius: 6px;
    }

    .superadmin-mobile-card .stat-box .value {
        font-size: 1.1rem;
        font-weight: 600;
        color: #003951;
    }

    .superadmin-mobile-card .stat-box .label {
        font-size: 0.7rem;
        color: #6c757d;
        text-transform: uppercase;
    }

    .superadmin-mobile-card .card-actions {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid #e9ecef;
    }

    .superadmin-mobile-card .card-actions .btn {
        flex: 1;
        font-size: 0.875rem;
    }
}

/* ============================================
   VOUCHERS & CLIENTS TABLES
   ============================================ */
@media (max-width: 767.98px) {
    .superadmin-voucher-list,
    .superadmin-client-list {
        margin: 0 -1rem;
    }

    .superadmin-voucher-list .table,
    .superadmin-client-list .table {
        margin-bottom: 0;
    }

    .superadmin-voucher-list thead,
    .superadmin-client-list thead {
        display: none;
    }

    .superadmin-voucher-list tbody tr,
    .superadmin-client-list tbody tr {
        display: block;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #e9ecef;
    }

    .superadmin-voucher-list tbody tr:last-child,
    .superadmin-client-list tbody tr:last-child {
        border-bottom: none;
    }

    .superadmin-voucher-list tbody td,
    .superadmin-client-list tbody td {
        display: flex;
        justify-content: space-between;
        padding: 0.25rem 0;
        border: none;
    }

    .superadmin-voucher-list tbody td::before,
    .superadmin-client-list tbody td::before {
        content: attr(data-label);
        font-weight: 500;
        color: #6c757d;
        font-size: 0.8rem;
    }
}

/* ============================================
   LOADING STATES
   ============================================ */
.superadmin-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

@media (max-width: 575.98px) {
    .superadmin-loading {
        min-height: 150px;
    }
}

/* ============================================
   EMPTY STATES
   ============================================ */
.superadmin-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: #6c757d;
}

@media (max-width: 575.98px) {
    .superadmin-empty {
        padding: 1.5rem 1rem;
        font-size: 0.875rem;
    }
}

/* ============================================
   BADGE IMPROVEMENTS
   ============================================ */
@media (max-width: 575.98px) {
    .superadmin-badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
    }
}

/* ============================================
   CARD HEADER WITH ACTION
   ============================================ */
.superadmin-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 575.98px) {
    .superadmin-card-header {
        flex-direction: column;
        align-items: stretch;
    }

    .superadmin-card-header strong {
        margin-bottom: 0.5rem;
    }

    .superadmin-card-header .btn {
        width: 100%;
    }
}

/* ============================================
   UTILITIES PAGE
   ============================================ */
.superadmin-utility-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

@media (max-width: 575.98px) {
    .superadmin-utility-row {
        flex-direction: column;
        align-items: stretch;
    }

    .superadmin-utility-row .btn {
        width: 100%;
        margin-top: 0.5rem;
    }
}

/* ============================================
   SETTINGS PAGE
   ============================================ */
@media (max-width: 767.98px) {
    .superadmin-settings .b-datagrid {
        font-size: 0.875rem;
    }

    .superadmin-settings .b-datagrid-header th:first-child {
        width: 40% !important;
    }

    .superadmin-settings .b-datagrid-body td {
        padding: 0.5rem;
    }

    .superadmin-settings .text-edit {
        font-size: 0.875rem;
    }
}

/* ============================================
   TOUCH FRIENDLY IMPROVEMENTS
   ============================================ */
@media (max-width: 767.98px) {
    /* Larger touch targets */
    .superadmin-touch-target {
        min-height: 44px;
        min-width: 44px;
    }

    /* Prevent text selection on interactive elements */
    .superadmin-no-select {
        -webkit-user-select: none;
        user-select: none;
    }
}

/* ============================================
   SCROLLABLE CONTAINERS
   ============================================ */
.superadmin-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
    .superadmin-scroll-x::-webkit-scrollbar {
        height: 4px;
    }

    .superadmin-scroll-x::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 2px;
    }
}