/**
 * ============================================================================
 * Sum-Ag Attendance System - Mobile Optimization CSS
 * ============================================================================
 * Universal mobile-responsive overrides aligned with the Slate & Gold theme.
 */

/* ============================================================================
   MOBILE-FIRST BASE STYLES
   ============================================================================ */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    height: 100%;
}

body {
    -webkit-overflow-scrolling: touch;
}

/* Touch-friendly tap targets */
button,
a,
input[type="submit"],
input[type="button"],
.btn {
    min-height: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(232, 185, 49, 0.2);
}

/* Remove 300ms click delay on mobile */
a,
button,
input,
select,
textarea {
    touch-action: manipulation;
}

/* Prevents auto-zoom on iOS */
input,
select,
textarea {
    font-size: 16px !important; 
    max-width: 100%;
}

/* ============================================================================
   RESPONSIVE BREAKPOINTS
   ============================================================================ */

/* Mobile Phones (Portrait) - Up to 576px */
@media (max-width: 576px) {
    body {
        font-size: 0.875rem;
    }

    /* Typography adjustments */
    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.25rem !important; }

    /* Button full-width behaviors */
    .btn:not(.btn-sm):not(.btn-icon) {
        width: 100%;
    }

    /* Responsive stacked tables */
    .table-stacked {
        display: block;
    }

    .table-stacked thead {
        display: none;
    }

    .table-stacked tbody,
    .table-stacked tr,
    .table-stacked td {
        display: block;
        width: 100%;
    }

    .table-stacked tr {
        margin-bottom: 1rem;
        border: 1px solid var(--border);
        border-radius: var(--border-radius);
        padding: 0.75rem;
        background: var(--bg-secondary);
    }

    .table-stacked td {
        text-align: right;
        padding: 0.5rem 0.75rem;
        position: relative;
        padding-left: 45%;
        border-bottom: 1px solid var(--border);
    }

    .table-stacked td:last-child {
        border-bottom: none;
    }

    .table-stacked td::before {
        content: attr(data-label);
        position: absolute;
        left: 0.75rem;
        font-weight: 600;
        text-align: left;
        color: var(--text-secondary);
    }
}

/* ============================================================================
   MOBILE NAVIGATION MENU (HAMBURGER)
   ============================================================================ */

.mobile-menu-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--border-radius-sm);
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
    }

    .nav-links-container {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border);
        padding: 1.5rem;
        flex-direction: column;
        gap: 1rem;
        z-index: 999;
        box-shadow: var(--shadow-lg);
    }

    .nav-links-container.active {
        display: flex;
    }

    .nav-links-container a,
    .nav-links-container button {
        width: 100%;
        text-align: center;
    }
}

/* ============================================================================
   iOS & ANDROID SPECIFIC UX FIXES
   ============================================================================ */

/* iOS rounded input resetting */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Android autofill styling fix */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--bg-secondary) inset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

/* Safe area insets for notched iPhones */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ============================================================================
   TOAST / FLOATING NOTIFICATIONS
   ============================================================================ */

.toast-container {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    z-index: 9999;
    pointer-events: none;
}

@media (min-width: 576px) {
    .toast-container {
        left: auto;
        right: 1.5rem;
        width: 380px;
    }
}

.toast {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 1rem;
    box-shadow: var(--shadow-lg);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    pointer-events: auto;
    animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast-success { border-left: 4px solid var(--success); }
.toast-danger { border-left: 4px solid var(--danger); }
.toast-warning { border-left: 4px solid var(--warning); }
.toast-info { border-left: 4px solid var(--info); }