/*
 * OWNER ATOM KIT
 * ------------------------------------------------------------
 * Every reusable owner + admin UI atom in ONE file. Consumers
 * import owner-workspace-tokens.css first, then this file, then
 * their surface's page-specific CSS.
 *
 * Scope: anything inside `.owner-workspace` or `.ow-scope`.
 * NEVER apply to the client / diner storefront (that has its
 * own token palette + component set).
 *
 * Naming: BEM under the `.ow-*` prefix.
 *   Block:    .ow-btn
 *   Modifier: .ow-btn--primary, .ow-btn--sm
 *   Element:  .ow-card__head, .ow-field__label
 *
 * Companion Blade components live at
 * `resources/views/components/ow-*.blade.php` — always prefer
 * `<x-ow-btn>` over hand-writing HTML so surface owners can't
 * diverge from the atom's contract.
 *
 * See docs/dev-docs/atom-kit.md for usage + do/don't examples.
 */

/* ============================================================
 * BUTTON  —  .ow-btn
 * Variants:  --primary  --secondary  --ghost  --danger  --link
 * Sizes:     --sm  (default: md)  --lg
 * ============================================================ */

.ow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ow-sp-2);
    height: var(--ow-control-h);
    padding: 0 var(--ow-sp-4);
    background: var(--ow-surface);
    color: var(--ow-ink);
    border: 1px solid var(--ow-line);
    border-radius: var(--ow-radius);
    font-family: inherit;
    font-size: var(--ow-fs-md);
    font-weight: var(--ow-fw-semibold);
    letter-spacing: -0.005em;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background 150ms var(--ow-ease),
                color      150ms var(--ow-ease),
                border-color 150ms var(--ow-ease),
                box-shadow 150ms var(--ow-ease),
                transform  100ms var(--ow-ease);
    white-space: nowrap;
    user-select: none;
}
.ow-btn:hover { background: var(--ow-sunken); border-color: var(--ow-line); }
.ow-btn:active { transform: translateY(1px); }
.ow-btn[disabled], .ow-btn[aria-disabled="true"] {
    opacity: .55; cursor: not-allowed; pointer-events: none;
}
.ow-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

.ow-btn--primary {
    background: var(--ow-brand);
    color: #ffffff;
    border-color: var(--ow-brand);
}
.ow-btn--primary:hover {
    background: var(--ow-brand-hover);
    border-color: var(--ow-brand-hover);
    color: #ffffff;
}

.ow-btn--secondary {
    background: var(--ow-brand-wash);
    color: var(--ow-brand-ink);
    border-color: transparent;
}
.ow-btn--secondary:hover {
    background: var(--ow-brand);
    color: #ffffff;
    border-color: var(--ow-brand);
}

.ow-btn--ghost {
    background: transparent;
    color: var(--ow-body);
    border-color: transparent;
}
.ow-btn--ghost:hover { background: var(--ow-sunken); color: var(--ow-ink); }

.ow-btn--danger {
    background: var(--ow-danger);
    color: #ffffff;
    border-color: var(--ow-danger);
}
.ow-btn--danger:hover {
    background: var(--ow-danger-hover);
    border-color: var(--ow-danger-hover);
    color: #ffffff;
}
.ow-btn--danger:focus-visible { box-shadow: var(--ow-ring-danger); }

.ow-btn--link {
    background: transparent;
    color: var(--ow-brand);
    border-color: transparent;
    padding: 0 var(--ow-sp-2);
    height: auto;
}
.ow-btn--link:hover { background: transparent; color: var(--ow-brand-hover); text-decoration: underline; }

.ow-btn--sm { height: var(--ow-control-h-sm); padding: 0 var(--ow-sp-3); font-size: var(--ow-fs-sm); }
.ow-btn--lg { height: var(--ow-control-h-lg); padding: 0 var(--ow-sp-5); font-size: var(--ow-fs-lg); }
.ow-btn--block { width: 100%; }

/* Icon-only variant. Same size as button, just a square with an
   icon. Use `<x-ow-icon-btn>` or add aria-label. */
.ow-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ow-control-h);
    height: var(--ow-control-h);
    padding: 0;
    background: var(--ow-surface);
    color: var(--ow-body);
    border: 1px solid var(--ow-line);
    border-radius: var(--ow-radius);
    cursor: pointer;
    transition: background 150ms var(--ow-ease), color 150ms var(--ow-ease);
}
.ow-iconbtn:hover { background: var(--ow-sunken); color: var(--ow-ink); }
.ow-iconbtn svg { width: 16px; height: 16px; }
.ow-iconbtn--sm { width: var(--ow-control-h-sm); height: var(--ow-control-h-sm); }
.ow-iconbtn--sm svg { width: 14px; height: 14px; }

/* ============================================================
 * FIELD  —  .ow-field  (wrapper: label + control + hint)
 * INPUT  —  .ow-input
 * SELECT —  .ow-select  (native select styled)
 * TEXTAREA — .ow-textarea
 * ============================================================ */

.ow-field { display: flex; flex-direction: column; gap: 6px; }
.ow-field__label {
    font-size: var(--ow-fs-sm);
    font-weight: var(--ow-fw-semibold);
    color: var(--ow-body);
    letter-spacing: -0.005em;
}
.ow-field__label--required::after { content: " *"; color: var(--ow-danger); }
.ow-field__hint {
    font-size: var(--ow-fs-xs);
    color: var(--ow-muted);
    line-height: 1.4;
}
.ow-field__error {
    font-size: var(--ow-fs-xs);
    color: var(--ow-danger);
    font-weight: var(--ow-fw-medium);
}
.ow-field.is-invalid .ow-input,
.ow-field.is-invalid .ow-select,
.ow-field.is-invalid .ow-textarea { border-color: var(--ow-danger); }
.ow-field.is-invalid .ow-input:focus-visible,
.ow-field.is-invalid .ow-select:focus-visible,
.ow-field.is-invalid .ow-textarea:focus-visible { box-shadow: var(--ow-ring-danger); }

.ow-input, .ow-select, .ow-textarea {
    width: 100%;
    height: var(--ow-control-h);
    padding: 0 var(--ow-sp-3);
    background: var(--ow-surface);
    border: 1px solid var(--ow-line);
    border-radius: var(--ow-radius);
    color: var(--ow-ink);
    font-family: inherit;
    font-size: var(--ow-fs-md);
    font-weight: var(--ow-fw-medium);
    letter-spacing: -0.005em;
    outline: none;
    transition: border-color 150ms var(--ow-ease), box-shadow 150ms var(--ow-ease);
}
.ow-input::placeholder, .ow-textarea::placeholder { color: var(--ow-muted); font-weight: 400; }
.ow-input:hover:not(:focus):not([disabled]),
.ow-select:hover:not(:focus):not([disabled]),
.ow-textarea:hover:not(:focus):not([disabled]) { border-color: #cfd3d8; }
.ow-input:focus-visible, .ow-select:focus-visible, .ow-textarea:focus-visible {
    border-color: var(--ow-brand);
    box-shadow: var(--ow-ring);
}
.ow-input[disabled], .ow-select[disabled], .ow-textarea[disabled] {
    background: var(--ow-sunken);
    color: var(--ow-muted);
    cursor: not-allowed;
}

.ow-input--sm, .ow-select--sm { height: var(--ow-control-h-sm); font-size: var(--ow-fs-sm); }
.ow-input--lg, .ow-select--lg { height: var(--ow-control-h-lg); font-size: var(--ow-fs-lg); }
.ow-input--mono { font-family: var(--ow-mono); font-variant-numeric: tabular-nums; }

.ow-textarea { height: auto; min-height: 96px; padding: 10px var(--ow-sp-3); line-height: 1.45; resize: vertical; }

/* Native <select> styled — chevron rendered via SVG background so
   we can drop select2's default look everywhere. Keep select2 only
   where a searchable listbox is genuinely needed, themed via
   .ow-select on the underlying element. */
.ow-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 14px;
    cursor: pointer;
}
.ow-select::-ms-expand { display: none; }

/* Field row — label on the left (fixed), control on the right —
   for dense settings-style forms. */
.ow-field--row {
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: center;
    gap: var(--ow-sp-3);
}
.ow-field--row .ow-field__label { text-align: left; }

/* ============================================================
 * SEARCH  —  .ow-search
 * A dedicated search-input pattern with a leading loupe icon.
 * For the reservation-panel loupe-that-expands-in-place variant,
 * use .ow-searchmorph (declared in reservation-panel/shell.css).
 * ============================================================ */

.ow-search {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
    max-width: 320px;
}
.ow-search__input {
    width: 100%;
    height: var(--ow-control-h);
    padding: 0 var(--ow-sp-3) 0 36px;
    background: var(--ow-surface);
    border: 1px solid var(--ow-line);
    border-radius: 999px;
    color: var(--ow-ink);
    font-family: inherit;
    font-size: var(--ow-fs-md);
    outline: none;
    transition: border-color 150ms var(--ow-ease), box-shadow 150ms var(--ow-ease);
}
.ow-search__input::placeholder { color: var(--ow-muted); font-weight: 400; }
.ow-search__input:focus-visible {
    border-color: var(--ow-brand);
    box-shadow: var(--ow-ring);
}
.ow-search__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ow-muted);
    pointer-events: none;
    width: 15px;
    height: 15px;
}
.ow-search__clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--ow-muted);
    cursor: pointer;
}
.ow-search__clear:hover { background: var(--ow-sunken); color: var(--ow-ink); }
.ow-search.is-filled .ow-search__clear { display: inline-flex; }
.ow-search.is-filled .ow-search__input { padding-right: 34px; }

/* ============================================================
 * CARD  —  .ow-card  .ow-card__head  .ow-card__body  .ow-card__foot
 * The one card pattern for every owner surface (dashboard tiles,
 * settings sections, list wrappers, modal contents).
 * ============================================================ */

.ow-card {
    background: var(--ow-surface);
    border: 1px solid var(--ow-line);
    border-radius: var(--ow-radius-lg);
    box-shadow: var(--ow-shadow-card);
    overflow: hidden;
}
.ow-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ow-sp-3);
    padding: var(--ow-sp-4) var(--ow-sp-5);
    border-bottom: 1px solid var(--ow-line-soft);
}
.ow-card__title {
    font-size: var(--ow-fs-lg);
    font-weight: var(--ow-fw-semibold);
    color: var(--ow-ink);
    margin: 0;
    letter-spacing: -0.01em;
}
.ow-card__sub {
    font-size: var(--ow-fs-sm);
    color: var(--ow-muted);
    margin-top: 2px;
    line-height: 1.4;
}
.ow-card__body { padding: var(--ow-sp-5); }
.ow-card__body--tight { padding: var(--ow-sp-3) var(--ow-sp-4); }
.ow-card__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ow-sp-2);
    padding: var(--ow-sp-3) var(--ow-sp-5);
    border-top: 1px solid var(--ow-line-soft);
    background: var(--ow-sunken);
}
.ow-card--flush { box-shadow: none; }
.ow-card--interactive { cursor: pointer; transition: box-shadow 150ms var(--ow-ease), border-color 150ms var(--ow-ease); }
.ow-card--interactive:hover { border-color: var(--ow-brand); box-shadow: var(--ow-shadow-pop); }

/* ============================================================
 * CHIP  —  .ow-chip  (variant: --primary --success --warning --danger --neutral)
 * Small status / label pill. Non-interactive by default; add .ow-chip--tap
 * to make it a filter chip.
 * ============================================================ */

.ow-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: var(--ow-sunken);
    color: var(--ow-body);
    border-radius: 999px;
    font-size: var(--ow-fs-xs);
    font-weight: var(--ow-fw-semibold);
    letter-spacing: -0.005em;
    line-height: 1.4;
    white-space: nowrap;
}
.ow-chip__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; opacity: .85; flex: 0 0 auto;
}
.ow-chip--primary { background: var(--ow-brand-wash); color: var(--ow-brand-ink); }
.ow-chip--success { background: var(--ow-success-wash); color: var(--ow-success); }
.ow-chip--warning { background: var(--ow-warning-wash); color: var(--ow-warning); }
.ow-chip--danger  { background: var(--ow-danger-wash);  color: var(--ow-danger); }
.ow-chip--neutral { background: var(--ow-sunken);       color: var(--ow-body); }
.ow-chip--tap {
    cursor: pointer;
    transition: background 150ms var(--ow-ease), color 150ms var(--ow-ease);
    border: 1px solid transparent;
}
.ow-chip--tap:hover { border-color: var(--ow-line); }
.ow-chip--tap.is-active { background: var(--ow-brand); color: #ffffff; }

/* ============================================================
 * TABLE  —  .ow-table  (data-forward hairlines, no zebra)
 * ============================================================ */

.ow-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--ow-surface);
    font-size: var(--ow-fs-md);
    color: var(--ow-ink);
}
.ow-table thead th {
    text-align: left;
    padding: var(--ow-sp-3) var(--ow-sp-4);
    background: var(--ow-sunken);
    border-bottom: 1px solid var(--ow-line);
    font-size: var(--ow-fs-xs);
    font-weight: var(--ow-fw-bold);
    color: var(--ow-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.ow-table tbody td {
    padding: var(--ow-sp-3) var(--ow-sp-4);
    border-bottom: 1px solid var(--ow-line-soft);
    vertical-align: middle;
}
.ow-table tbody tr:last-child td { border-bottom: 0; }
.ow-table tbody tr:hover td { background: var(--ow-sunken); }
.ow-table td.ow-table__num { font-variant-numeric: tabular-nums; text-align: right; }

/* ============================================================
 * TOAST  —  .ow-toast
 * ============================================================ */

.ow-toast {
    display: inline-flex;
    align-items: center;
    gap: var(--ow-sp-2);
    padding: 10px var(--ow-sp-4);
    background: var(--ow-ink);
    color: #ffffff;
    border-radius: var(--ow-radius);
    box-shadow: var(--ow-shadow-pop);
    font-size: var(--ow-fs-md);
    font-weight: var(--ow-fw-medium);
    line-height: 1.3;
}
.ow-toast--success { background: var(--ow-success); }
.ow-toast--warning { background: var(--ow-warning); }
.ow-toast--danger  { background: var(--ow-danger); }