/* Apron Inventory - plain CSS, no build step required. */

:root {
    --ink: #1f2430;
    --ink-muted: #5b6272;
    --border: #dde1e8;
    --bg: #f6f7f9;
    --card-bg: #ffffff;
    /* Teal, pulled from the Maryjane & Rose whisk logo, replaces the
       original placeholder green now that the app has real branding. */
    --brand: #3f8b93;
    --brand-dark: #2a6169;
    --danger: #b3441e;
    --radius: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
}

a { color: var(--brand-dark); }

.container { max-width: 1100px; margin: 0 auto; padding: 16px; }

/* Top navigation */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    padding: 10px 16px;
    position: sticky;
    top: 0;
    z-index: 10;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--ink); }
.brand-logo { height: 36px; width: 36px; display: block; }
.nav-toggle { display: none; background: none; border: none; font-size: 1.4rem; cursor: pointer; }
.topnav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.topnav a { text-decoration: none; color: var(--ink-muted); padding: 6px 4px; }
.topnav a.active, .topnav a:hover { color: var(--brand-dark); font-weight: 600; }
.logout-form button {
    background: none; border: none; color: var(--ink-muted); cursor: pointer; font: inherit; padding: 6px 4px;
}
.logout-form button:hover { color: var(--danger); }

@media (max-width: 720px) {
    .nav-toggle { display: block; }
    .topnav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 2px; margin-top: 10px; }
    .topnav.open { display: flex; }
}

/* Flash messages */
.flash {
    background: #e7f3ec; border: 1px solid #bfe0cd; color: #205133;
    padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px;
}
.flash-error { background: #fbeae4; border-color: #f0c4b2; color: #7a2d10; }
.flash-muted { background: #f0f1f3; border-color: var(--border); color: var(--ink-muted); }
.flash ul { margin: 0; padding-left: 18px; }

/* Page header */
.page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.page-header h1 { margin: 0; font-size: 1.4rem; }
.page-actions { display: flex; gap: 8px; }

/* Admin section sub-nav (Custom Fields / Users) */
.admin-subnav { display: flex; gap: 18px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.admin-subnav a {
    text-decoration: none; color: var(--ink-muted); padding: 8px 2px; margin-bottom: -1px;
    border-bottom: 2px solid transparent; font-weight: 500;
}
.admin-subnav a.active, .admin-subnav a:hover { color: var(--brand-dark); border-bottom-color: var(--brand-dark); }

/* Gallery/Table view toggle (aprons index) */
.view-toggle { display: flex; gap: 6px; }
.view-toggle a {
    text-decoration: none; color: var(--ink-muted); padding: 6px 12px; border-radius: 8px;
    border: 1px solid var(--border); font-size: 0.9rem;
}
.view-toggle a.active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }

/* Gallery sort links */
.gallery-sort { font-size: 0.9rem; color: var(--ink-muted); margin-bottom: 12px; }
.gallery-sort a { margin-left: 8px; text-decoration: none; }
.gallery-sort a.active { color: var(--brand-dark); font-weight: 600; }

/* Table view export buttons + sortable column headers */
.table-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.apron-table th a { text-decoration: none; color: var(--ink); font-weight: 700; }
.apron-table th a.active { color: var(--brand-dark); }
/* Without this, a long unfiltered result list can squeeze the ID column
   (e.g. a hyphenated "A-1010") into wrapping onto two lines, since a browser
   is free to break a line right after a hyphen whenever a column is tight
   on space. Filtered results had more room to spare, so it looked fine
   there, nowrap just makes that guaranteed instead of width-dependent. */
.apron-table td:first-child { white-space: nowrap; }

/* Buttons */
.btn {
    display: inline-block; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--card-bg); color: var(--ink); text-decoration: none; cursor: pointer; font-size: 0.95rem;
}
.btn:hover { border-color: var(--brand); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-muted { color: var(--ink-muted); }
.btn-small { padding: 5px 10px; font-size: 0.85rem; }
.btn-block { display: block; width: 100%; text-align: center; margin-top: 10px; }

/* Filter bar */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.filter-bar input, .filter-bar select { padding: 8px; border-radius: 8px; border: 1px solid var(--border); }
.filter-bar input[type="search"] { flex: 1 1 200px; }
/* Groups Filter/Clear visually apart from the search/dropdown fields above,
   per Bob's request: a divider plus a bit of breathing room, so it reads as
   its own "apply the filter" action rather than one more field in the row. */
.filter-submit-group {
    display: flex; gap: 8px; align-items: center;
    margin-left: 4px; padding-left: 12px; border-left: 1px solid var(--border);
}

/* Apron gallery */
.apron-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.apron-card {
    display: block; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; text-decoration: none; color: var(--ink);
}
.apron-card:hover { border-color: var(--brand); }
.apron-card-photo { aspect-ratio: 4 / 3; background: #eef0f3; display: flex; align-items: center; justify-content: center; }
/* object-fit: contain (not cover) so a portrait-oriented photo (the common
   case: a phone photo of an apron's pocket/calendar insert) is shown in
   full, letterboxed, rather than cropped top/bottom to fill the box. */
.apron-card-photo img { width: 100%; height: 100%; object-fit: contain; }
.no-photo { color: var(--ink-muted); font-size: 0.85rem; }
.no-photo.large { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: #eef0f3; border-radius: var(--radius); }
.apron-card-body { padding: 10px 12px; }
.apron-card-title { font-weight: 700; }
.apron-card-desc { color: var(--ink-muted); font-size: 0.85rem; margin: 2px 0; }
.apron-card-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 0.85rem; color: var(--ink-muted); margin-top: 4px; }
.out-of-stock { color: var(--danger); font-weight: 600; }
.empty-state { color: var(--ink-muted); }
.pagination { margin-top: 20px; }

/* Detail page */
.detail-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.detail-photos img { width: 100%; border-radius: var(--radius); display: block; }
.photo-label { font-size: 0.8rem; color: var(--ink-muted); margin-bottom: 4px; }
@media (max-width: 560px) { .detail-photos { grid-template-columns: 1fr; } }

.detail-fields { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 16px; }
.detail-fields dt { color: var(--ink-muted); }
.detail-fields dd { margin: 0; }
.detail-audit-summary { border-top: 1px solid var(--border); padding-top: 12px; margin-bottom: 16px; }

.audit-history summary { cursor: pointer; color: var(--brand-dark); margin-bottom: 10px; }
.audit-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.audit-table th, .audit-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); }

/* Forms */
.apron-form, .inline-form { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.apron-form label, .inline-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; color: var(--ink-muted); }
.apron-form input, .apron-form select, .apron-form textarea,
.inline-form input, .inline-form select, .inline-form textarea {
    padding: 10px; border-radius: 8px; border: 1px solid var(--border); font: inherit; color: var(--ink);
}
.apron-form label.checkbox, .inline-form label.checkbox { flex-direction: row; align-items: center; gap: 8px; }
.custom-fields { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.custom-fields legend { padding: 0 6px; color: var(--ink-muted); }
/* Extra bottom margin (not just the form's standard 14px row gap) so a
   visible current photo has real breathing room before the next field,
   rather than looking crammed against the following label. */
.current-photo { margin: 6px 0 18px; max-width: 160px; border-radius: 8px; display: block; }
.help-text { color: var(--ink-muted); font-size: 0.9rem; }

/* Front/Back Photo fields: a real file input's own button always reads
   "Choose File" (that text is set by the browser/OS, not by us, and can't
   be relabeled directly). So the real input is kept fully functional but
   visually hidden, and a styled label - triggering the same file picker via
   its "for" attribute, no JS required - shows our own wording instead. */
.photo-field { display: flex; flex-direction: column; gap: 6px; }
.photo-field .field-label { font-size: 0.9rem; color: var(--ink-muted); }
.file-picker-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.file-picker-button {
    display: inline-block; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--card-bg); color: var(--ink); cursor: pointer; font-size: 0.95rem;
}
.file-picker-button:hover { border-color: var(--brand); }
.file-picker-filename { color: var(--ink-muted); font-size: 0.85rem; }
.visually-hidden-file {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Login */
.login-card { max-width: 360px; margin: 60px auto; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; text-align: center; }
.login-logo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 12px; }
.login-card h1 { font-size: 1.2rem; }
.login-card form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.login-card label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; color: var(--ink-muted); }
.login-card input { padding: 10px; border-radius: 8px; border: 1px solid var(--border); font: inherit; }
.login-card label.checkbox { flex-direction: row; align-items: center; }

/* Admin tables */
.admin-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.admin-table th, .admin-table td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table input[type="text"], .admin-table input[type="email"], .admin-table input[type="number"], .admin-table select {
    padding: 6px; border-radius: 6px; border: 1px solid var(--border); width: 100%;
}
.admin-table input.narrow { width: 70px; }
.options-editor summary { cursor: pointer; font-size: 0.85rem; color: var(--brand-dark); }
.options-editor textarea { width: 220px; margin-top: 6px; }

/* Save-in-progress overlay (Add/Edit Apron form). See public/js/app.js for
   when it's shown; it also disables the Save button at the same moment,
   so a second click while photos are still resizing can't fire a
   duplicate save. */
.save-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.85);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.save-overlay.visible { display: flex; }
.save-overlay-inner { text-align: center; color: var(--ink-muted); }
.save-spinner {
    width: 84px;
    height: 84px;
    animation: save-spin 1.1s linear infinite;
}
.save-overlay-inner p { margin: 10px 0 0; font-weight: 600; }
@keyframes save-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Export PDF (Table view) uses the browser's own print dialog rather than
   a server-generated file, see resources/views/aprons/_table.blade.php.
   This hides everything except the page title and the table itself so
   what prints (or saves as PDF) is clean. */
@media print {
    .no-print { display: none !important; }
    body { background: #fff; }
    .container { max-width: none; padding: 0; }
}