/*=========================================================================
 * Catalog Admin Modules — Responsive & Accessibility Rules
 *
 * Scope: additive, opt-in styling for the catalog admin CRUD views
 * (restaurants, business hours, units of measure, categories, products,
 * product presentations). Does NOT modify core CSS (app.min.css,
 * app-styles.css, bootstrap.min.css) — wrap each view's root markup with
 * the `.catalog-admin` class to opt in.
 *
 * Source of truth: openspec/changes/catalog-admin-modules/design.md
 * "Responsive & accessibility spec" section.
 *=========================================================================*/

/* -------------------------------------------------------------------------
 * 1. Legibility (older-adult-friendly typography)
 * Base body 1.05rem (~16.8px) for admin views, never below 1rem/16px,
 * line-height 1.5. Mobile-first: this is the unqualified base rule, no
 * media query needed at the smallest width.
 * ---------------------------------------------------------------------- */
.catalog-admin {
    font-size: 1.05rem;
    line-height: 1.5;
}

.catalog-admin table,
.catalog-admin .form-label,
.catalog-admin .form-control,
.catalog-admin .form-select,
.catalog-admin .form-check-label {
    font-size: inherit;
    line-height: inherit;
}

/* -------------------------------------------------------------------------
 * 2. Tap targets (WCAG 2.5.5) — action icons at least 44x44px. Switchery
 * toggles are NOT resized here: forcing min-width/min-height on `.switchery`
 * distorts its pill shape (it's a fixed-ratio element). Its size is set via
 * the library's own `size` option instead — see initSwitchery() in
 * catalogAdminHelpers.js, which uses `size: 'large'` (66x40px, the closest
 * built-in size to the 44px target without a broken aspect ratio).
 * ---------------------------------------------------------------------- */
.catalog-admin .table-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

.catalog-admin .form-check-input[type="checkbox"] {
    min-width: 44px;
    min-height: 44px;
}

/* Large pagination hit areas for BootstrapTable (pageSize: 10) */
.catalog-admin .pagination .page-link {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* -------------------------------------------------------------------------
 * 3. Contrast (WCAG AA) — 4.5:1 for text, 3:1 for UI/icon boundaries.
 * Status badges use the theme's bg-success/bg-danger which already meet
 * AA on white backgrounds (design.md); action icons get an explicit
 * boundary color that meets the 3:1 UI-component contrast target.
 * ---------------------------------------------------------------------- */
.catalog-admin .table-action-icon {
    color: #495057 !important;
    border-radius: 4px;
}

.catalog-admin .table-action-icon:hover,
.catalog-admin .table-action-icon:focus {
    color: #212529 !important;
}

/* -------------------------------------------------------------------------
 * 4. Breakpoints — mobile-first base above (no media query), then
 * min-width steps matching Bootstrap 5's grid: 576px (sm), 768px (md),
 * 992px (lg), 1200px (xl). Secondary table columns are hidden below
 * 768px via Bootstrap's `d-none d-md-table-cell` utility classes on the
 * BootstrapTable column definitions themselves (no CSS override needed
 * here); the rules below only adjust catalog-admin-specific spacing.
 * ---------------------------------------------------------------------- */
@media (min-width: 576px) {
    .catalog-admin .modal-dialog {
        max-width: 500px;
    }
}

@media (min-width: 768px) {
    .catalog-admin .modal-dialog {
        max-width: 700px;
    }
}

@media (min-width: 992px) {
    .catalog-admin .modal-dialog {
        max-width: 800px;
    }
}

@media (min-width: 1200px) {
    .catalog-admin .modal-dialog {
        max-width: 900px;
    }
}