/* claudephpframework — public/assets/css/admin.css
   Shared component library for admin form/list/detail pages.
   Loaded from app/Views/layout/header.php after app.css and the
   inlined critical CSS, so anything here can override those.

   ── Vocabulary (commit to these; do NOT redefine locally) ────────────
     Page layout:  .shell, .shell--narrow|--medium|--wide  (app.css)
     Page header:  .page-header, .page-header-actions
     Surface:      .card, .card-header, .card-body, .tbl-card, .surface
     Forms:        .form-row, .form-grid--2|--3|--2-1|--1-2,
                   .admin-fieldset, .form-actions, .form-actions .spacer
     Field manage: .field-list, .field-row, .field-type-badge
     Inputs:       (raw inputs inside .form-row auto-style; .form-control
                   also exists for views still using .form-group pattern)
     Buttons:      .btn, .btn-primary, .btn-secondary, .btn-danger,
                   .btn-sm, .btn-xs, .btn-group
     Status:       .badge, .badge-success, .badge-danger, .badge-gray,
                   .badge-info, .badge-warning, .badge-purple, plus the
                   `-soft` variants (lighter bg, deeper fg).
                   .status-pill is a smaller uppercase variant for tight
                   contexts (table rows, project cards).
     Tables:       .table, .table-responsive, .row-subtext
     Toolbars:     .toolbar, .toolbar-spacer
     Misc:         .empty-state, .code-chip, .price-cell, .muted-meta

   Scoping strategy:
     • Generic utility-like classes (.page-header, .btn-group, .empty-state,
       .row-subtext, .code-chip, .badge-info) are global and safe to use
       anywhere. They don't style element selectors — only their own class.
     • Form styling targets `.form-row` which is only used by admin views
       in this codebase (grep confirms: only the new batch-1 modules and
       two public pages reference it). Core admin pages use .form-group +
       .form-control and are unaffected.                                 */

/* ── Page header (back link + title row) ───────────────────── */
.page-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.page-header h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-gray-900);
    line-height: 1.3;
}
.page-header .page-header-meta {
    color: var(--color-gray-500);
    font-size: 13.5px;
}
.page-header-actions {
    margin-left: auto;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

/* ── Form-row polish ───────────────────────────────────────── */
.form-row {
    margin-bottom: 1.25rem;
}
.form-row > label:not(:has(input)) {
    display: block;
    font-weight: 500;
    font-size: 13.5px;
    margin-bottom: .35rem;
    color: var(--color-gray-700);
}
/* Required asterisk via `Label *` text convention used throughout.
   We can't target text content, but we can style <label> consistently. */

/* Raw inputs inside a form-row become polished without needing .form-control */
.form-row > input[type="text"],
.form-row > input[type="number"],
.form-row > input[type="email"],
.form-row > input[type="url"],
.form-row > input[type="password"],
.form-row > input[type="search"],
.form-row > input[type="tel"],
.form-row > input[type="time"],
.form-row > input[type="date"],
.form-row > input[type="datetime-local"],
.form-row > input[type="month"],
.form-row > input[type="week"],
.form-row > select,
.form-row > textarea {
    width: 100%;
    padding: .55rem .75rem;
    border: 1px solid var(--border-strong, var(--color-gray-300));
    border-radius: 6px;
    font-size: 14px;
    font-family: var(--font);
    background: var(--bg-panel, #fff);
    color: var(--text-default, var(--color-gray-900));
    transition: border-color .15s, box-shadow .15s;
}
.form-row > input:focus,
.form-row > select:focus,
.form-row > textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .15);
}
.form-row > input::placeholder,
.form-row > textarea::placeholder {
    color: var(--color-gray-400, #9ca3af);
}
.form-row > input:disabled,
.form-row > select:disabled,
.form-row > textarea:disabled {
    background: var(--color-gray-100);
    color: var(--color-gray-500);
    cursor: not-allowed;
}
.form-row > select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    padding-right: 2rem;
}
.form-row > textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}
.form-row > small {
    display: block;
    font-size: 12px;
    color: var(--color-gray-500);
    margin-top: .4rem;
    line-height: 1.5;
}
.form-row > small code {
    background: var(--color-gray-100);
    padding: .05rem .3rem;
    border-radius: 3px;
    font-size: 11.5px;
}
.form-row > .error {
    display: block;
    font-size: 12px;
    color: var(--color-danger);
    margin-top: .3rem;
}

/* Checkbox/radio rows use `<label><input type=checkbox>…</label>` pattern. */
.form-row > label input[type="checkbox"],
.form-row > label input[type="radio"] {
    width: 16px;
    height: 16px;
    margin-right: .5rem;
    accent-color: var(--color-primary);
    vertical-align: -2px;
}
.form-row > label:has(input[type="checkbox"]),
.form-row > label:has(input[type="radio"]) {
    display: inline-flex;
    align-items: center;
    gap: .1rem;
    font-weight: 500;
    font-size: 13.5px;
    color: var(--color-gray-700);
    cursor: pointer;
    margin-bottom: 0;
}

/* ── Form grids for side-by-side form-rows ─────────────────── */
.form-grid {
    display: grid;
    gap: 0 1rem;
    align-items: start;
}
.form-grid--2 { grid-template-columns: 1fr 1fr; }
.form-grid--3 { grid-template-columns: repeat(3, 1fr); }
.form-grid--2-1 { grid-template-columns: 2fr 1fr; }
.form-grid--1-2 { grid-template-columns: 1fr 2fr; }
@media (max-width: 700px) {
    .form-grid--2, .form-grid--3,
    .form-grid--2-1, .form-grid--1-2 { grid-template-columns: 1fr; }
}

/* ── Admin fieldset — grouped section inside a form ───────── */
.admin-fieldset {
    margin: 1.75rem 0 1rem;
    padding: 1.25rem 1.25rem .25rem;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius);
    background: var(--color-gray-50);
}
.admin-fieldset > legend {
    font-weight: 600;
    font-size: 11px;
    padding: 0 .6rem;
    color: var(--text-muted, var(--color-gray-500));
    text-transform: uppercase;
    letter-spacing: .06em;
    background: var(--bg-panel, #fff);
    border: 1px solid var(--border-default, var(--color-gray-200));
    border-radius: 999px;
    padding: .25rem .75rem;
}
.admin-fieldset > .fieldset-hint {
    margin: -.25rem 0 1rem;
    color: var(--color-gray-500);
    font-size: 13px;
    line-height: 1.5;
}

/* ── Form actions bar (button row at bottom of form) ──────── */
.form-actions {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-gray-100);
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}
.form-actions > .spacer { flex: 1; }

/* ── Btn group — inline action cluster ────────────────────── */
.btn-group {
    display: inline-flex;
    gap: .35rem;
    flex-wrap: wrap;
    align-items: center;
}
.btn-group form { display: inline; margin: 0; }

/* ── Empty state panel ────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--color-gray-500);
}
.empty-state-icon {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: .75rem;
    opacity: .6;
}
.empty-state p { margin: 0 0 1rem; }
.empty-state p:last-of-type { margin-bottom: 0; }

/* ── Inline code chip ─────────────────────────────────────── */
.code-chip {
    font-family: ui-monospace, SFMono-Regular, 'Cascadia Mono', 'Consolas', monospace;
    font-size: 12px;
    background: var(--color-gray-100);
    color: var(--color-gray-700);
    padding: .1rem .4rem;
    border-radius: 4px;
    border: 1px solid var(--color-gray-200);
}

/* ── Table row subtext (muted line beneath <strong> in a cell) ─── */
.row-subtext {
    font-size: 12px;
    color: var(--color-gray-500);
    margin-top: .15rem;
    line-height: 1.4;
}
.row-subtext code {
    background: transparent;
    padding: 0;
    color: var(--color-gray-500);
}

/* ── Badge variants (extend the inline-defined family) ────────
   Header.php's critical CSS defines .badge / .badge-primary /
   .badge-success / .badge-danger / .badge-gray with the saturated
   palette. These extra variants cover the "softer, larger" usage
   that wizard / dashboard / wallet pages all reached for ad-hoc. */
.badge-info    { background: var(--color-info-bg);    color: var(--color-info-fg); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.badge-purple  { background: var(--color-purple-bg);  color: var(--color-purple-fg); }

/* Soft variants — lighter, broader interior padding, friendlier in
   info-dense table rows. */
.badge-success-soft { background: var(--color-success-bg); color: var(--color-success-fg); }
.badge-warning-soft { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.badge-danger-soft  { background: var(--color-danger-bg);  color: var(--color-danger-fg); }
.badge-info-soft    { background: var(--color-info-bg);    color: var(--color-info-fg); }
.badge-purple-soft  { background: var(--color-purple-bg);  color: var(--color-purple-fg); }
.badge-gray-soft    { background: var(--color-gray-100);   color: var(--color-gray-700); }

/* Status pill — smaller, uppercase, tighter. Use on table rows and
   project cards where the badge sits next to denser text. Pairs
   with .badge-*-soft variants for the color. */
.status-pill {
    display: inline-flex;
    align-items: center;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.4;
    white-space: nowrap;
}

/* ── Surface — plain panel wrapper (lighter than .card) ──────
   For dashboard strips, account-info bars, and other contexts that
   want a subtle background panel but not the full card chrome.   */
.surface {
    background: var(--bg-panel, #fff);
    border: 1px solid var(--border-default, var(--color-gray-200));
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
}
.surface--muted {
    background: var(--color-gray-50);
}
.surface--accent {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    border-color: transparent;
}
.surface--accent .surface-meta,
.surface--accent .text-muted {
    color: rgba(255, 255, 255, .85);
}

/* ── Flush-table card — .table inside a .card-body with no padding,
   so the table's cell borders meet the card's edges. Widely needed
   for wallet/admin lists where the table is the whole content. */
.tbl-card .card-body {
    padding: 0;
}
.tbl-card .table {
    margin: 0;
}
.tbl-card .table th:first-child,
.tbl-card .table td:first-child { padding-left: 1.25rem; }
.tbl-card .table th:last-child,
.tbl-card .table td:last-child  { padding-right: 1.25rem; }

/* ── Stacked-row table — admins that opt in get phone-friendly rows
   that collapse each row into a card below 640px. Mark each <td>
   with `data-label="Column name"` to drive the inline label. Headers
   on the desktop side keep their normal rendering.                 */
@media (max-width: 640px) {
    .table--cards {
        display: block;
        border: 0;
    }
    .table--cards thead {
        display: none;
    }
    .table--cards tbody, .table--cards tr {
        display: block;
    }
    .table--cards tr {
        border: 1px solid var(--border-default, var(--color-gray-200));
        border-radius: var(--radius);
        padding: .65rem .85rem;
        margin-bottom: .65rem;
        background: var(--bg-panel, #fff);
    }
    .table--cards td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: .25rem 0;
        border: 0;
        text-align: right;
    }
    .table--cards td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 11.5px;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--text-muted, var(--color-gray-500));
        text-align: left;
        flex-shrink: 0;
    }
    .table--cards td:empty,
    .table--cards td[data-label=""] { display: none; }
}

/* ── Availability editor (scheduling resource form) ───────── */
.avail-row {
    display: grid;
    grid-template-columns: 110px 130px auto 130px auto;
    gap: .5rem;
    align-items: center;
    margin-bottom: .5rem;
}
.avail-row select,
.avail-row input[type="time"] {
    padding: .4rem .6rem;
    border: 1px solid var(--border-strong, var(--color-gray-300));
    border-radius: 6px;
    font-family: var(--font);
    font-size: 13px;
    background: var(--bg-panel, #fff);
    width: 100%;
}
.avail-row .avail-sep {
    color: var(--color-gray-500);
    font-size: 12px;
    justify-self: center;
}
.avail-row .avail-remove {
    background: none;
    border: none;
    color: var(--color-gray-400, #9ca3af);
    cursor: pointer;
    padding: .25rem .5rem;
    font-size: 16px;
    border-radius: 4px;
    line-height: 1;
    transition: background .15s, color .15s;
}
.avail-row .avail-remove:hover {
    background: #fee2e2;
    color: var(--color-danger);
}
@media (max-width: 640px) {
    .avail-row { grid-template-columns: 1fr 1fr auto; }
    .avail-row .avail-sep { display: none; }
}

/* ── Field manager (forms module) ─────────────────────────── */
.field-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.field-row {
    display: grid;
    grid-template-columns: 24px 1fr auto auto auto;
    gap: .75rem;
    align-items: center;
    padding: .65rem .9rem;
    border: 1px solid var(--border-default, var(--color-gray-200));
    border-radius: 8px;
    background: var(--bg-panel, #fff);
    transition: border-color .15s, box-shadow .15s;
}
.field-row:hover {
    border-color: var(--color-gray-300);
    box-shadow: var(--shadow);
}
.field-row .field-drag {
    color: var(--color-gray-300);
    font-size: 16px;
    line-height: 1;
    user-select: none;
    text-align: center;
}
.field-row .field-label {
    min-width: 0;
    overflow: hidden;
}
.field-row .field-label strong {
    font-weight: 500;
    font-size: 14px;
    color: var(--color-gray-900);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.field-row .field-key {
    font-size: 11.5px;
    color: var(--color-gray-500);
    font-family: ui-monospace, SFMono-Regular, monospace;
    margin-top: .1rem;
}
.field-type-badge {
    display: inline-flex;
    align-items: center;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
.field-row .field-required {
    font-size: 11px;
    color: var(--color-gray-500);
}
.field-row .field-required.is-required {
    color: var(--color-danger);
    font-weight: 600;
}
.field-row .field-actions {
    display: inline-flex;
    gap: .25rem;
    align-items: center;
}
.field-row .field-actions form { display: inline; margin: 0; }

@media (max-width: 640px) {
    .field-row {
        grid-template-columns: 24px 1fr auto;
        grid-template-areas:
            "drag label actions"
            ".    meta  meta";
        row-gap: .35rem;
    }
    .field-row .field-drag { grid-area: drag; }
    .field-row .field-label { grid-area: label; }
    .field-row .field-actions { grid-area: actions; }
    .field-row .field-type-badge,
    .field-row .field-required { grid-area: meta; }
}

/* ── Progressive-disclosure helper ────────────────────────── */
/* Parent sets data-field-type; children with data-show-for match it.
   Children with data-show-for="*" are always visible.                  */
[data-show-for]:not([data-show-for="*"]) { display: none; }

/* ── Toolbar row (card-header with multiple buttons on the right) ── */
.toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.toolbar .toolbar-spacer { flex: 1; }

/* ── Price cell (aligned currency in subscription table etc.) ─ */
.price-cell {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.price-cell .price-currency {
    color: var(--color-gray-500);
    font-size: 12px;
    font-weight: 500;
    margin-left: .15rem;
}

/* ── Confirmation & link card bodies (better padding symmetry) ── */
.card-body > *:first-child { margin-top: 0; }
.card-body > *:last-child { margin-bottom: 0; }

/* ── Print: hide form actions and drag handles ────────────── */
@media print {
    .form-actions, .field-drag, .field-actions { display: none !important; }
}