/**
 * NTTC Portal — Mobile Stylesheet
 * Loaded after main.css. Only mobile fixes, no desktop changes.
 * Tested at: 375px (iPhone SE), 414px (iPhone), 768px (iPad)
 */

/* ============================================================
   iOS auto-zoom prevention — 16px minimum on all inputs
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="url"],
input[type="search"],
input[type="tel"],
select,
textarea {
    font-size: 16px !important;
}

/* ============================================================
   Navigation — hamburger + drawer below 768px
   ============================================================ */
@media (max-width: 768px) {
    /* Sidebar becomes a slide-in drawer */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 1000;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    /* Overlay when drawer is open */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }

    .sidebar-overlay.active {
        display: block;
    }

    /* Main content takes full width */
    .main-content {
        margin-left: 0 !important;
        width: 100%;
    }

    /* Hamburger button always visible */
    .mobile-nav-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        background: none;
        border: none;
        cursor: pointer;
    }

    /* Top header adjustments */
    .top-header {
        padding: 0 var(--space-sm) !important;
        gap: var(--space-sm);
    }

    .page-title {
        font-size: 1rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        min-width: 0;
    }

    .header-actions {
        gap: var(--space-xs) !important;
        flex-shrink: 0;
    }

    /* Content area */
    .content-area {
        padding: var(--space-sm) !important;
    }

    /* Notification bell — always visible, good tap target */
    .notification-bell {
        width: 44px;
        height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .theme-toggle {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }
}

/* ============================================================
   Tables — stacked card layout below 600px
   ============================================================ */
@media (max-width: 600px) {
    .table-container {
        overflow: visible !important;
    }

    table,
    table thead,
    table tbody,
    table th,
    table td,
    table tr {
        display: block !important;
        width: 100% !important;
    }

    table thead tr {
        display: none !important;
    }

    table tbody tr {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        padding: var(--space-sm) var(--space-md);
        margin-bottom: var(--space-sm);
    }

    table td {
        border: none !important;
        border-bottom: 1px solid var(--color-border) !important;
        padding: var(--space-sm) 0 !important;
        text-align: left !important;
        white-space: normal !important;
    }

    table td:last-child {
        border-bottom: none !important;
    }

    /* Show data-label before each cell */
    table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin-bottom: 2px;
    }

    /* Inline buttons in table cells */
    table td .btn {
        margin-top: var(--space-xs);
    }

    table td form {
        display: inline;
    }
}

/* ============================================================
   Forms — full width, stacked layout
   ============================================================ */
@media (max-width: 600px) {
    .form-row.two-col {
        grid-template-columns: 1fr !important;
    }

    .form-input,
    .form-select,
    .form-textarea {
        width: 100% !important;
    }

    /* Full-width buttons */
    .form-group .btn-lg,
    .form-group .btn-primary,
    .form-group .btn-secondary {
        width: 100%;
        margin-bottom: var(--space-sm);
    }

    /* Upload zone */
    .upload-zone {
        min-height: 80px;
        padding: var(--space-md) !important;
    }

    /* Signature canvas */
    #sig-canvas,
    #reset-sig-canvas {
        width: 100% !important;
        min-height: 200px;
    }

    #sig-clear,
    #reset-sig-clear {
        width: 100%;
    }
}

/* ============================================================
   Panels — tighter on mobile
   ============================================================ */
@media (max-width: 600px) {
    .panel {
        padding: var(--space-md) !important;
        margin-bottom: var(--space-md) !important;
    }

    .panel-title {
        font-size: 1rem !important;
    }

    .panel-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: var(--space-sm);
    }
}

/* ============================================================
   Dashboard grids — stack vertically
   ============================================================ */
@media (max-width: 600px) {
    [style*="grid-template-columns: repeat(4, 1fr)"],
    [style*="grid-template-columns: repeat(3, 1fr)"],
    [style*="grid-template-columns: 2fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns: 1fr 400px"],
    [style*="grid-template-columns: 1fr 360px"] {
        grid-template-columns: 1fr !important;
    }

    /* Stats blocks — smaller text */
    .panel[style*="text-align: center"] div[style*="font-size: 2rem"] {
        font-size: 1.5rem !important;
    }
}

/* ============================================================
   Modals — full screen on mobile
   ============================================================ */
@media (max-width: 600px) {
    .modal {
        align-items: stretch !important;
        justify-content: stretch !important;
        padding: 0 !important;
    }

    .modal-content {
        width: 100% !important;
        max-width: none !important;
        height: 100vh !important;
        max-height: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow-y: auto;
    }

    .modal-body {
        padding: var(--space-md) !important;
    }
}

/* ============================================================
   Announcements — full width cards
   ============================================================ */
@media (max-width: 600px) {
    .announcement-item {
        padding: var(--space-md) !important;
    }

    .announcement-urgent {
        border-left-width: 4px !important;
    }
}

/* ============================================================
   Assignment section builder — stack on mobile
   ============================================================ */
@media (max-width: 600px) {
    .section-block .section-header {
        flex-wrap: wrap !important;
        gap: var(--space-xs) !important;
    }

    .section-block .section-header input[type="text"] {
        width: 100% !important;
        order: 3;
    }

    .section-block .section-header input[type="number"] {
        width: 100% !important;
        order: 4;
    }

    .section-block .section-header .btn {
        min-width: 40px;
    }
}

/* ============================================================
   File lists — truncate names
   ============================================================ */
@media (max-width: 600px) {
    td a,
    td strong {
        word-break: break-word;
        overflow-wrap: break-word;
    }
}

/* ============================================================
   Login page — smaller padding
   ============================================================ */
@media (max-width: 600px) {
    .login-container {
        padding: var(--space-md) !important;
        max-width: 100% !important;
    }

    .login-form {
        padding: var(--space-md) !important;
    }

    .login-header h1 {
        font-size: 1.25rem !important;
    }

    .auth-theme-toggle-wrap {
        top: var(--space-sm);
        right: var(--space-sm);
    }

    /* Full-width login button */
    .login-form .btn-block {
        width: 100%;
    }
}

/* ============================================================
   Network banner — mobile padding
   ============================================================ */
@media (max-width: 600px) {
    .network-status-banner {
        padding: var(--space-sm) var(--space-md) !important;
        font-size: 0.75rem !important;
    }
}

/* ============================================================
   E-class banner — stack on mobile
   ============================================================ */
@media (max-width: 600px) {
    .eclass-banner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: var(--space-sm) !important;
    }

    .eclass-banner .btn {
        width: 100%;
    }
}

/* ============================================================
   Progress bars — ensure visibility on small screens
   ============================================================ */
@media (max-width: 600px) {
    .progress-bar {
        width: 100% !important;
        display: block !important;
    }
}

/* ============================================================
   Flex helpers — stack on mobile
   ============================================================ */
@media (max-width: 600px) {
    .flex-between {
        flex-direction: column;
        align-items: flex-start !important;
        gap: var(--space-sm);
    }

    .flex-between > .btn,
    .flex-between > a.btn {
        width: 100%;
    }
}

/* ============================================================
   Print: hide mobile-only elements
   ============================================================ */
@media print {
    .mobile-nav-toggle,
    .sidebar-overlay {
        display: none !important;
    }
}