/* =====================================================================
   Growploy — shared responsive layer (phones, tablets, small laptops).
   Loaded last on every page (see /responsive.js), so it can correct the
   per-page fixed widths without touching each page's own styles.
   ===================================================================== */

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

img, video, canvas, iframe, embed, object { max-width: 100%; }
img, video { height: auto; }

/* Wide tables scroll sideways inside their own box instead of the page
   (responsive.js wraps every table in .table-scroll). */
.table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Flex children of the page shell may shrink below their content width. */
body > *:not(.sidebar):not(script) { min-width: 0; }
main, .main, .main-content, .content, .content-wrapper, .page-content,
.container, .container-fluid, .wrapper { min-width: 0; max-width: 100%; }

pre, code { white-space: pre-wrap; word-break: break-word; }

/* ---------- Tablets and below ---------- */
@media (max-width: 1024px) {
    .container, .container-fluid, .wrapper, .page-wrapper, .main-container,
    .form-container, .card, .panel, .box, .section, form {
        max-width: 100% !important;
    }
}

/* ---------- Phones and small tablets ---------- */
@media (max-width: 768px) {
    /* Containers never exceed the screen */
    main, .main, .main-content, .content, .content-wrapper, .page-content,
    .container, .container-fluid, .wrapper, .page-wrapper, .main-container,
    .form-container, .card, .panel, .box, .section, form, section, article {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Inputs fill their column; 16px stops iOS zooming on focus */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select, textarea {
        max-width: 100%;
        font-size: 16px;
    }

    /* Rows of buttons / filters / header items wrap instead of overflowing */
    .header, .top-header, .page-header, .card-header, .toolbar, .actions,
    .action-buttons, .btn-group, .buttons, .filters, .filter-bar, .filter-row,
    .search-bar, .form-row, .row, .stats, .stats-grid, .tabs, .nav-tabs {
        flex-wrap: wrap;
    }

    /* Multi-column form grids collapse to one or two columns */
    .form-grid, .grid, .form-row-grid, .fields-grid, .info-grid, .details-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
    }

    /* Modals fit the screen */
    .modal, .modal-dialog, .modal-content, .modal-box, .popup, .dialog {
        max-width: calc(100vw - 24px) !important;
    }
    .modal-content, .modal-box, .popup, .dialog { max-height: calc(100vh - 32px); overflow-y: auto; }

    /* Headings scale down */
    h1 { font-size: clamp(1.25rem, 5.5vw, 2rem); }
    h2 { font-size: clamp(1.1rem, 4.8vw, 1.6rem); }

    /* Long words / emails / URLs wrap */
    p, li, dd, label, .value, .info-value { overflow-wrap: anywhere; }
}

/* ---------- Small phones ---------- */
@media (max-width: 480px) {
    .form-grid, .grid, .form-row-grid, .fields-grid, .info-grid, .details-grid {
        grid-template-columns: 1fr !important;
    }
    .btn, button { max-width: 100%; }
}

@media print {
    .table-scroll { overflow: visible; }
}