/* site-08-responsive.css: Responsive and accessibility preferences (24-25).
   Part of the old site.css, split by sections (same order: _Styles.cshtml links them one after the other,
   so the cascade is exactly the same). */

/* =====================================================================
   24. RESPONSIVE  (large to small screens)
   ===================================================================== */

/* --- ≥ 1600px: large screens --- */
@media (min-width: 1600px) {
    .content {
        padding: 40px 48px;
    }

    .page-container,
    .form-container,
    .page-header-modern,
    form {
        max-width: 1560px;
    }
}

/* --- ≤ 1200px --- */
@media (max-width: 1200px) {
    .data-grid,
    .physical-grid {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    }
}

/* --- ≤ 1100px --- */
@media (max-width: 1100px) {
    .person-summary {
        gap: 22px;
    }
}

/* --- ≤ 992px: tablet --- */
@media (max-width: 992px) {
    .page-header-modern,
    .toolbar-modern {
        flex-direction: column;
        align-items: stretch;
    }

    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }

    .search-modern,
    .toolbar-modern .input-group {
        flex: 1 1 auto;
        max-width: none;
        width: 100%;
    }

    .person-top {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .person-summary {
        order: 3;
        width: 100%;
        margin-left: 67px;
    }

    .record-grid {
        grid-template-columns: 1fr;
    }
}

/* --- < 992px: collapsed user menu (Bootstrap lg breakpoint) --- */
@media (max-width: 991.98px) {
    .user-menu-wrapper .custom-dropdown {
        display: block !important;
        position: static !important;
        transform: none !important;
        box-shadow: none !important;
        width: 100%;
        margin-top: 10px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--border);
        border-radius: var(--radius);
    }

    .custom-dropdown-item {
        padding: 10px 16px;
    }
}

/* --- ≤ 768px: large mobile --- */
@media (max-width: 768px) {
    .content {
        padding: 16px;
    }

    /* Header and toolbar */
    .page-header-modern {
        align-items: flex-start;
    }

    .toolbar-modern {
        gap: 12px;
    }

    .search-modern {
        min-width: 0;
    }

    .toolbar-actions {
        flex-direction: column;
        width: 100%;
        margin-left: 0;
    }

        .toolbar-actions form {
            flex: 1;
        }

        .toolbar-actions .btn-new,
        .toolbar-actions .btn-secondary-modern,
        .status-filter {
            width: 100%;
        }

    .toolbar-filters {
        width: 100%;
        flex-wrap: wrap;
    }

    /* Filters panel becomes part of the flow */
    .filter-drop {
        width: 100%;
    }

    .filter-toggle {
        width: 100%;
        justify-content: center;
    }

    .filter-panel {
        position: static;
        width: 100%;
        min-width: 0;
        margin-top: 10px;
        box-shadow: none;
    }

    /* Full-width buttons */
    .btn,
    .btn-new {
        width: 100%;
        justify-content: center;
    }

    .form-btn-wrapper {
        display: inline-flex;
        width: 100%;
    }

    /* Navigation bar */
    .nav-shell {
        padding: 10px 16px;
        gap: 10px;
    }

    .nav-brand-subtitle,
    .user-info {
        display: none;
    }

    .user-pill {
        padding: 4px;
    }

    /* Person profile */
    .person-top {
        padding: 18px;
        padding-right: 100px;
    }

    .record-section {
        padding: 18px;
    }

    .record-row {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .person-back-form {
        position: absolute;
        top: 18px;
        right: 18px;
    }

    .person-section {
        padding: 20px;
    }

    .person-summary {
        margin-left: 0;
    }

    .location-grid {
        grid-template-columns: 1fr;
    }

    /* Story editor */
    .rte-area {
        padding: 25px 20px !important;
    }
}

/* --- ≤ 640px --- */
@media (max-width: 640px) {
    .header-content {
        padding: 0 16px;
    }

    .app-logo {
        font-size: 1.05rem;
    }

    .card-modern,
    .section,
    .form-section {
        padding: 16px;
    }

    .person-summary {
        gap: 16px;
    }

    .grid-auto {
        grid-template-columns: 1fr;
    }
}

/* --- ≤ 576px: mobile --- */
@media (max-width: 576px) {
    .person-avatar {
        width: 46px;
        height: 46px;
        font-size: 20px;
    }

    .person-status {
        font-size: 0.65rem;
    }

    .person-summary {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .person-section {
        padding: 17px;
    }

    .section-heading h2 {
        font-size: 0.88rem;
    }

    .section-heading span {
        font-size: 0.65rem;
    }

    .data-item {
        min-height: 64px;
    }
}

/* --- ≤ 480px --- */
@media (max-width: 480px) {
    .toolbar-actions form {
        width: 100%;
    }
}

/* --- ≤ 400px: small mobile --- */
@media (max-width: 400px) {
    .content {
        padding: 12px;
    }

    .page-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        font-size: 1.2rem;
    }

    .btn,
    .btn-new,
    .btn-primary-modern,
    .btn-secondary-modern {
        padding: 0.5rem 0.85rem;
        font-size: 0.8rem;
    }

    .data-grid,
    .physical-grid {
        grid-template-columns: 1fr 1fr;
    }

    .person-summary {
        grid-template-columns: 1fr;
    }
}

/* --- Login --- */
@media (max-width: 960px) {
    /* The video is skipped on narrow screens to save mobile data */
    .auth-bg-video {
        display: none;
    }
}

@media (max-width: 480px) {
    .auth-page {
        padding: 18px 14px;
    }

    .auth-logo {
        padding: 26px 22px 0;
    }

        .auth-logo img {
            width: 80px;
            height: 80px;
        }

    .auth-panel {
        padding: 18px 22px 26px;
    }

    .auth-panel-head h1 {
        font-size: 1.35rem;
    }
}

/* --- Short landscape (login) --- */
@media (max-height: 560px) and (orientation: landscape) {
    .auth-page {
        min-height: auto;
        padding: 16px;
    }

    .auth-logo img {
        width: 64px;
        height: 64px;
    }
}





/* =====================================================================
   25. ACCESSIBILITY PREFERENCES
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

@media (prefers-contrast: more) {
    .app-header-modern {
        background: var(--bg);
        backdrop-filter: none;
    }

    .card-modern,
    .section,
    .form-section {
        border-width: 1.5px;
    }
}