/* ============================================
   PSC Portal — Mobile UI Optimization (Phase 4.1)
   ============================================ */

/* ===== Universal Touch Improvements ===== */
@media (max-width: 991px) {
    /* Bigger touch targets for buttons */
    .btn {
        min-height: 38px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .btn-sm {
        min-height: 34px;
        padding: 6px 12px;
    }

    /* Form inputs - larger on mobile */
    .form-control, .form-select {
        font-size: 15px;
        padding: 10px 12px;
        min-height: 42px;
    }

    .form-control-sm, .form-select-sm {
        font-size: 14px;
        min-height: 36px;
    }

    /* Labels readable */
    .form-label {
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 6px;
    }
}

/* ===== Mobile Sidebar (Both Portals) ===== */
@media (max-width: 991px) {
    /* Sidebar overlay backdrop when shown */
    body.sidebar-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 999;
        animation: fadeIn 0.2s;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .sidebar {
        width: 280px !important;
        box-shadow: 4px 0 20px rgba(0,0,0,0.2);
    }

    /* Larger menu items */
    .sidebar-menu a {
        padding: 12px 14px !important;
        font-size: 15px !important;
        min-height: 44px;
    }

    .sidebar-menu a i {
        font-size: 20px !important;
    }

    /* Brand area */
    .sidebar-brand {
        padding: 18px !important;
    }
}

/* ===== Topbar Improvements ===== */
@media (max-width: 768px) {
    .topbar {
        padding: 10px 14px !important;
    }

    .topbar .page-title {
        font-size: 16px !important;
        max-width: 50%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .topbar .mobile-toggle {
        font-size: 24px !important;
        padding: 6px 8px !important;
        min-width: 38px;
        min-height: 38px;
    }

    .topbar .user-info {
        gap: 6px !important;
    }

    .topbar .user-avatar {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px;
    }

    /* Hide name on mobile, show only avatar */
    .topbar .user-info .d-md-block {
        display: none !important;
    }

    /* Smaller logout button */
    .topbar form button {
        padding: 6px 10px;
        font-size: 14px;
    }
}

/* ===== Content Area ===== */
@media (max-width: 768px) {
    .content-area {
        padding: 14px !important;
    }

    /* Cards spacing */
    .card .card-body {
        padding: 14px !important;
    }

    .card .card-header {
        padding: 12px 14px !important;
    }

    /* Stat cards smaller padding */
    .stat-card {
        padding: 14px !important;
    }

    .stat-card .stat-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 18px;
    }

    .stat-card .stat-value {
        font-size: 22px !important;
    }

    .stat-card .stat-label {
        font-size: 12px !important;
    }
}

/* ===== Tables Mobile-Friendly ===== */
@media (max-width: 768px) {
    .table {
        font-size: 13px;
    }

    .table th, .table td {
        padding: 8px 6px !important;
    }

    /* Action buttons in tables */
    .table .btn-sm {
        padding: 5px 8px;
        font-size: 12px;
        min-height: 30px;
    }

    /* Image avatars in tables */
    .table img.rounded-circle {
        width: 30px !important;
        height: 30px !important;
    }
}

/* ===== Bell / Notification Dropdown ===== */
@media (max-width: 768px) {
    .topbar .dropdown-menu {
        width: calc(100vw - 24px) !important;
        max-width: 360px;
        position: fixed !important;
        right: 12px !important;
        left: auto !important;
        top: 60px !important;
        transform: none !important;
    }
}

/* ===== Forms (Add/Edit pages) ===== */
@media (max-width: 768px) {
    /* Form section cards */
    .card .row.g-3 {
        --bs-gutter-y: 0.75rem;
    }

    /* Action buttons at bottom of forms - sticky on mobile */
    .form-actions-sticky {
        position: sticky;
        bottom: 0;
        background: white;
        padding: 12px;
        margin: 0 -14px -14px;
        border-top: 1px solid #e5e7eb;
        z-index: 10;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
    }
}

/* ===== Modals on Mobile ===== */
@media (max-width: 576px) {
    .modal-dialog {
        margin: 8px;
    }
}

/* ===== Page Headers ===== */
@media (max-width: 576px) {
    /* Page header h4 */
    h4.fw-bold {
        font-size: 18px !important;
    }

    h5.fw-bold {
        font-size: 16px !important;
    }

    /* Subtitle text */
    .text-muted.small {
        font-size: 12px !important;
    }
}

/* ===== Responsive Page Header (page title + actions) ===== */
@media (max-width: 576px) {
    /* Many pages have: <div class="d-flex justify-content-between"> */
    .d-flex.justify-content-between.flex-wrap {
        gap: 8px !important;
    }
}

/* ===== Filter Cards (for index pages) ===== */
@media (max-width: 768px) {
    .card form.row.g-2 input,
    .card form.row.g-2 select {
        margin-bottom: 6px;
    }
}

/* ===== Empty States ===== */
@media (max-width: 576px) {
    .card-body.text-center.py-5 {
        padding: 30px 14px !important;
    }
}

/* ===== ID Cards Responsiveness ===== */
@media (max-width: 576px) {
    /* Member/Team Cards - shrink for mobile */
    [style*="background: linear-gradient"][style*="border-radius: 16px"] {
        padding: 18px !important;
    }
}

/* ===== Improvements for Specific Components ===== */

/* Pagination on mobile */
@media (max-width: 576px) {
    .pagination {
        flex-wrap: wrap;
        gap: 4px;
        font-size: 13px;
    }

    .pagination .page-link {
        padding: 6px 10px;
    }
}

/* Alerts on mobile */
@media (max-width: 576px) {
    .alert {
        padding: 12px;
        font-size: 14px;
    }
}

/* Dashboard widgets stack better */
@media (max-width: 768px) {
    .row.g-3 > [class*="col-"] {
        margin-bottom: 4px;
    }
}

/* ===== Tap-friendly checkbox/radio ===== */
@media (max-width: 768px) {
    .form-check-input {
        width: 1.2em;
        height: 1.2em;
        margin-top: 0.2em;
    }

    .form-check-label {
        padding-left: 4px;
    }
}

/* ===== Responsive Stat Cards Grid ===== */
@media (max-width: 576px) {
    /* Force 2 columns for stat cards on small mobile */
    .row.g-3 > .col-6.col-md {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ===== Back to Top Button ===== */
.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--psc-primary, #0e7490);
    color: white;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    z-index: 999;
    border: none;
    transition: transform 0.2s;
    font-size: 18px;
}
.back-to-top:hover { transform: translateY(-3px); }
.back-to-top.show { display: flex; }

/* ===== Smooth Scroll ===== */
html {
    scroll-behavior: smooth;
}

/* ===== Fix iOS zoom on input focus ===== */
@media (max-width: 768px) {
    input, select, textarea {
        font-size: 16px !important;  /* Prevents iOS auto-zoom */
    }
}