/* ==========================================
   BIBLE GROWTH SYSTEM
   SHARED RESPONSIVE / MOBILE CSS
   Load this stylesheet AFTER all other CSS.
========================================== */

/* Prevent padding and borders from causing overflow */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    min-width: 320px;
    margin: 0;
    overflow-x: hidden;
}

/* Images and media should fit their containers */
img,
video,
canvas,
iframe {
    max-width: 100%;
}

img {
    height: auto;
}

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

input,
select,
textarea {
    min-width: 0;
}

/* Long words and URLs must not stretch layouts */
h1,
h2,
h3,
p,
td,
th,
label,
a {
    overflow-wrap: anywhere;
}

/* General content wrappers */
.container,
.page-container,
.main-content,
.voice-page,
.reports-page,
.journal-page,
.activities-page,
.bible-study-page {
    min-width: 0;
    max-width: 100%;
}

/* Common cards and panels */
.card,
.dashboard-card,
.report-card,
.voice-card,
.journal-card,
.activity-card,
.study-card,
.report-stat-card,
.voice-recording {
    min-width: 0;
}

/* Forms: consistent full-width controls */
form {
    max-width: 100%;
}

.form-group,
.form-field,
.field-group,
.voice-field,
.report-filter-field,
.journal-field {
    min-width: 0;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]),
select,
textarea {
    max-width: 100%;
}

textarea {
    resize: vertical;
}

/* Tables should scroll inside their own container */
.table-responsive,
.table-wrapper,
.table-container,
.report-table-wrapper {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    max-width: 100%;
}

.table-responsive table,
.table-wrapper table,
.table-container table,
.report-table-wrapper table {
    min-width: 600px;
}

/* Buttons should be easy to tap */
button,
input[type="submit"],
input[type="button"],
.button,
.btn,
.voice-button,
.report-button,
.report-outline-button {
    min-height: 42px;
    touch-action: manipulation;
}

/* Avoid oversized desktop headings */
@media (max-width: 768px) {
    h1 {
        font-size: clamp(24px, 6vw, 32px);
        line-height: 1.25;
    }

    h2 {
        font-size: clamp(19px, 4.5vw, 24px);
        line-height: 1.35;
    }

    h3 {
        font-size: 17px;
        line-height: 1.4;
    }

    .container,
    .page-container {
        width: 94%;
        max-width: 100%;
    }

    /* Common page headers */
    .dashboard-header,
    .reports-header,
    .voice-header,
    .journal-header,
    .activity-header,
    .study-header {
        flex-wrap: wrap;
        gap: 14px;
    }

    /* Common grids collapse to one column */
    .dashboard-columns,
    .report-progress-grid,
    .journal-grid,
    .activity-grid,
    .study-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Filter bars and action groups */
    .report-filter-card,
    .report-filter-form,
    .report-actions,
    .voice-controls,
    .form-actions {
        max-width: 100%;
    }

    .report-filter-form {
        flex-wrap: wrap;
    }

    /* Cards must not exceed screen width */
    .dashboard-card,
    .report-card,
    .voice-card,
    .journal-card,
    .activity-card,
    .study-card {
        width: 100%;
        padding: 18px;
    }

    /* Prevent form controls overflowing cards */
    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]),
    select,
    textarea {
        width: 100%;
    }

    /* Allow action buttons to wrap */
    .voice-controls,
    .entry-actions,
    .activity-actions,
    .report-actions {
        flex-wrap: wrap;
    }

    .voice-controls > button {
        flex: 1 1 140px;
    }

    /* Progress summaries */
    .report-stat-grid,
    .dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Keep the recording player within its card */
    audio {
        display: block;
        max-width: 100%;
    }
}

/* Phones */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }

    .reports-page,
    .voice-page,
    .journal-page,
    .activities-page,
    .bible-study-page {
        width: 92%;
        padding-top: 18px;
        padding-bottom: 20px;
    }

    .dashboard-stats,
    .report-stat-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .report-card,
    .voice-card,
    .journal-card,
    .activity-card,
    .study-card {
        padding: 15px;
        border-radius: 12px;
    }

    .report-filter-form {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .report-filter-field,
    .report-filter-field input,
    .report-filter-form button {
        width: 100%;
    }

    .report-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .report-actions > *,
    .save-button {
        width: 100%;
    }

    .voice-controls {
        display: flex;
        flex-direction: column;
    }

    .voice-controls > button {
        width: 100%;
    }

    .voice-card-heading {
        align-items: flex-start;
    }

    .voice-recording-top {
        flex-wrap: wrap;
    }

    .report-time-summary {
        flex-wrap: wrap;
    }

    /* Compact spacing for small screens */
    .report-stat-card {
        padding: 16px;
    }

    .report-stat-card strong {
        font-size: 28px;
    }

    .report-period {
        align-items: flex-start;
        flex-direction: column;
    }

    /* Make long tables scroll rather than breaking the page */
    .report-table-wrapper table,
    .table-responsive table,
    .table-wrapper table,
    .table-container table {
        min-width: 580px;
    }

    /* Ensure navigation links are easy to tap */
    nav a {
        min-height: 42px;
    }
}

/* Very small phones */
@media (max-width: 360px) {
    .reports-page,
    .voice-page,
    .journal-page,
    .activities-page,
    .bible-study-page {
        width: 94%;
    }

    .report-card,
    .voice-card,
    .journal-card,
    .activity-card,
    .study-card {
        padding: 12px;
    }

    .report-stat-card strong {
        font-size: 25px;
    }

    .voice-timer {
        font-size: 38px;
    }
}

/* Print reports without mobile-only layout restrictions */
@media print {
    html,
    body {
        width: auto;
        min-width: 0;
        overflow: visible;
    }
}