/* ==========================================================
   GLOBAL RESPONSIVE ARCHITECTURE
   This file is the shared mobile-first safety layer for both
   the public site and the dashboard. Page-level CSS can still
   define identity, but layout primitives stay consistent here.
========================================================== */

:root {
    --space-1: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);
    --space-2: clamp(0.5rem, 0.42rem + 0.4vw, 0.75rem);
    --space-3: clamp(0.75rem, 0.62rem + 0.65vw, 1rem);
    --space-4: clamp(1rem, 0.82rem + 0.9vw, 1.5rem);
    --space-5: clamp(1.25rem, 1rem + 1.25vw, 2rem);
    --space-6: clamp(1.5rem, 1.12rem + 1.9vw, 2.75rem);
    --fluid-page: min(100%, 1400px);
    --fluid-readable: min(100% - clamp(1rem, 4vw, 3rem), 980px);
    --touch-target: 44px;
}

html {
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
}

body {
    overflow-x: hidden;
}

*, *::before, *::after {
    box-sizing: border-box;
    min-width: 0;
}

img, video, canvas, svg, iframe {
    max-width: 100%;
}

img, video {
    height: auto;
}

input, select, textarea, button {
    font: inherit;
}

input, select, textarea {
    max-width: 100%;
}

button,
a,
input,
select,
textarea {
    touch-action: manipulation;
}

p,
li,
h1,
h2,
h3,
h4,
h5,
h6,
.card-title,
.dissertation-title {
    overflow-wrap: anywhere;
}

.abstract-readable,
.abstract-readable p,
.card-abstract,
.abstract-enhanced,
.abstract-preview-text,
.abstract-full-content,
.abstract-text,
.abstract {
    text-align: justify;
    line-height: 1.75;
    letter-spacing: 0;
    word-spacing: 0.02em;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.abstract-readable p,
.abstract-full-content p,
.abstract-text p {
    margin: 0 0 0.95rem;
}

.container,
.wrapper,
.page-wrapper,
.page-container,
.main-content,
.page-main,
.hero-container,
.search-container,
.content,
.dashboard-container,
.dissertations-container,
.results-container,
.detail-container,
.departments-container,
.settings-container,
.abstract-page,
.feedback-page,
.activity-page,
.profile-container,
.password-container {
    width: 100%;
    max-width: 100%;
}

.modal,
.modal-box,
.modal-container,
.modal-content,
.confirm-dialog {
    width: min(var(--modal-width, 560px), calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
}

.table-responsive,
.table-card,
.table-container,
.admin-table-wrap,
.results-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    max-width: 100%;
}

.stats-grid,
.departments-grid,
.dissertations-grid-enhanced,
.dissertations-grid,
.results-grid,
.kpi-grid,
.dashboard-grid,
.dashboard-cards,
.cards-grid,
.analytics-grid,
.charts-grid,
.insights-grid,
.settings-grid,
.form-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: var(--space-4);
}

.stats-grid > *,
.departments-grid > *,
.dissertations-grid-enhanced > *,
.dissertations-grid > *,
.results-grid > *,
.kpi-grid > *,
.dashboard-grid > *,
.dashboard-cards > *,
.cards-grid > *,
.analytics-grid > *,
.charts-grid > *,
.insights-grid > *,
.settings-grid > * {
    min-width: 0;
    max-width: 100%;
}

.search-form,
.search-main-group,
.filter-actions,
.filters-row,
.form-row,
.toolbar,
.header-actions,
.page-actions,
.modal-actions,
.button-row,
.actions,
.nav-actions-row,
.pagination,
.stats-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.search-form > *,
.search-main-group > *,
.filter-actions > *,
.filters-row > *,
.form-row > *,
.toolbar > *,
.header-actions > *,
.page-actions > *,
.modal-actions > *,
.button-row > *,
.actions > *,
.nav-actions-row > * {
    min-width: 0;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-danger,
.btn-success,
.filter-apply,
.filter-reset,
.read-more-btn,
.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    max-width: 100%;
}

/* Tablet and smaller: grids become room-aware, not squeezed. */
@media (max-width: 1024px) {
    .container,
    .wrapper,
    .page-wrapper,
    .page-container,
    .main-content,
    .page-main,
    .hero-container,
    .search-container,
    .content,
    .dashboard-container,
    .dissertations-container,
    .results-container,
    .detail-container,
    .departments-container,
    .abstract-page,
    .feedback-page,
    .activity-page,
    .profile-container,
    .password-container {
        width: var(--fluid-page) !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .stats-grid,
    .departments-grid,
    .dissertations-grid-enhanced,
    .dissertations-grid,
    .results-grid,
    .kpi-grid,
    .dashboard-grid,
    .dashboard-cards,
    .cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
    }
}

/* Mobile: favor full-width stacking, readable type, and stable touch targets. */
@media (max-width: 768px) {
    h1 { font-size: clamp(1.65rem, 1.25rem + 2vw, 2.2rem) !important; line-height: 1.15; }
    h2 { font-size: clamp(1.35rem, 1.08rem + 1.35vw, 1.75rem) !important; line-height: 1.2; }
    h3 { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem) !important; line-height: 1.25; }

    .container,
    .wrapper,
    .page-wrapper,
    .page-container,
    .main-content,
    .page-main,
    .hero-container,
    .search-container,
    .content,
    .dashboard-container,
    .dissertations-container,
    .results-container,
    .detail-container,
    .departments-container,
    .abstract-page,
    .feedback-page,
    .activity-page,
    .profile-container,
    .password-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .container,
    .dashboard-container,
    .dissertations-container,
    .results-container,
    .detail-container,
    .departments-container,
    .abstract-page,
    .feedback-page,
    .activity-page,
    .profile-container,
    .password-container {
        padding-left: clamp(12px, 4vw, 18px) !important;
        padding-right: clamp(12px, 4vw, 18px) !important;
    }

    .page-main {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .stats-grid,
    .departments-grid,
    .dissertations-grid-enhanced,
    .dissertations-grid,
    .results-grid,
    .kpi-grid,
    .dashboard-grid,
    .dashboard-cards,
    .cards-grid,
    .analytics-grid,
    .charts-grid,
    .insights-grid,
    .settings-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-3) !important;
    }

    .card,
    .stat-card,
    .department-card,
    .dissertation-card,
    .dissertation-card-enhanced,
    .dashboard-card,
    .kpi-card,
    .settings-card,
    .chart-card,
    .insight-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: clamp(0.875rem, 3.5vw, 1.25rem) !important;
    }

    .card-header,
    .section-header,
    .page-header,
    .results-header,
    .dashboard-header {
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .search-form,
    .search-main-group,
    .filters-row,
    .form-row,
    .toolbar,
    .header-actions,
    .page-actions,
    .modal-actions,
    .button-row,
    .actions {
        align-items: stretch;
    }

    .search-form > *,
    .search-main-group > *,
    .filters-row > *,
    .form-row > *,
    .toolbar > *,
    .header-actions > *,
    .page-actions > *,
    .modal-actions > *,
    .button-row > *,
    .actions > * {
        flex: 1 1 100%;
    }

    input,
    select,
    textarea,
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .btn-danger,
    .btn-success,
    .filter-apply,
    .filter-reset,
    .read-more-btn,
    .action-btn {
        min-height: var(--touch-target);
    }

    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 425px) {
    :root {
        --touch-target: 46px;
    }

    .container,
    .wrapper,
    .page-wrapper,
    .page-container,
    .main-content,
    .page-main,
    .hero-container,
    .search-container,
    .content,
    .dashboard-container,
    .dissertations-container,
    .results-container,
    .detail-container,
    .departments-container,
    .abstract-page,
    .feedback-page,
    .activity-page,
    .profile-container,
    .password-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .btn-danger,
    .btn-success,
    .filter-apply,
    .filter-reset,
    .read-more-btn,
    .action-btn {
        width: 100%;
    }
}

@media (max-width: 360px) {
    .container,
    .wrapper,
    .page-wrapper,
    .page-container,
    .main-content,
    .page-main,
    .hero-container,
    .search-container,
    .content,
    .dashboard-container,
    .dissertations-container,
    .results-container,
    .detail-container,
    .departments-container,
    .abstract-page,
    .feedback-page,
    .activity-page,
    .profile-container,
    .password-container {
        width: 100% !important;
        max-width: 100% !important;
    }
}