/* Supplements BDP's app.css with ONLY the classes it doesn't define (layout helpers, multi-state
   status pills, the link box). `.field`, `.pill` (base), `.brand`, the shell, etc. come from app.css.
   `.input` is here because app.css styles inputs via `.input-affix`, not a bare `.input`. */

.head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 16px;
    gap: 12px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    align-items: center;
}

.input {
    padding: 9px 12px;
    border: 1px solid #d4dcd8;
    border-radius: 9px;
    font: inherit;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}

.err { color: #b42318; font-size: 13px; margin: 6px 0; }
.empty { color: #667; text-align: center; padding: 28px; }

.pill.ok { background: #e7f6f1; color: #0b6b52; }
.pill.warn { background: #fef7e6; color: #8a6d00; }
.pill.bad { background: #fdecea; color: #b42318; }

.link-result { margin-top: 16px; }
.link-result label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #667; }
.link-box {
    margin-top: 6px;
    padding: 10px 12px;
    background: #f4f7f6;
    border: 1px dashed #cdd8d3;
    border-radius: 9px;
    overflow: auto;
}
.link-box code { color: #0f766e; }

/* Pre-boot loading state (shown in #app until the WASM renders; replaces the default Blazor
   loading-progress SVG, which renders as a black disc without the template's app.css). */
.app-loading {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.app-loading-spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid #cdd8d3;
    border-top-color: #0f766e;
    animation: app-spin .8s linear infinite;
}
.app-loading-text { color: #667; font-size: 14px; }
@keyframes app-spin { to { transform: rotate(360deg); } }

/* Toasts (ported from BDP WritebackToast look; stacked top-right, global via ToastHost). */
.toast-stack {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 420px;
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
    font-size: 13px;
    animation: toast-slide-in .25s ease-out;
}
.toast strong { display: block; margin-bottom: 2px; }
.toast-icon { flex-shrink: 0; margin-top: 1px; }
.toast-content { flex: 1; }
.toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: .6;
    padding: 0;
    line-height: 0;
}
.toast-close:hover { opacity: 1; }
.toast-success { background: #e7f6f1; border-color: #b1dfbb; color: #0b6b52; }
.toast-error   { background: #fdecea; border-color: #f5c6cb; color: #b42318; }
.toast-warning { background: #fef7e6; border-color: #ffe69c; color: #8a6d00; }
.toast-info    { background: #eef2f7; border-color: #d4dce6; color: #33415c; }
@keyframes toast-slide-in {
    from { opacity: 0; transform: translateX(1rem); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Admin ↔ tenant assignment chips (spec 006) */
.chip-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
    border: 1px solid var(--line, #d4dce6);
    background: transparent;
    color: inherit;
    border-radius: 999px;
    padding: .2rem .7rem;
    font-size: .82rem;
    cursor: pointer;
    opacity: .7;
}
.chip:hover { opacity: 1; }
.chip.on {
    background: #e7f0ff;
    border-color: #9cc0ff;
    color: #1d4ed8;
    opacity: 1;
    font-weight: 600;
}

/* Payments toolbar + list interactions (spec 007) */
.head-actions { display: flex; gap: .6rem; align-items: center; }
.toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: .8rem; }
.toolbar .input { width: auto; }
.toolbar .check { display: inline-flex; align-items: center; gap: .35rem; font-size: 13px; color: var(--muted); white-space: nowrap; }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: var(--row-hover, rgba(0,0,0,.03)); }
.detail-list { display: grid; grid-template-columns: max-content 1fr; gap: .4rem .9rem; margin: 0 0 1rem; }
.detail-list dt { color: var(--muted); font-size: 12.5px; }
.detail-list dd { margin: 0; }

/* Select chevron (spec 009 AC-4) — native arrow sits too close to the edge; draw our own with room. */
select.input {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.2rem;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
}

/* Skeleton loaders (spec 009 AC-2) — shimmer placeholders instead of a "Loading…" string. */
.skeleton-table { width: 100%; }
.skeleton-row {
    height: 1.15rem;
    margin: 0.55rem 0;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--sk-base, #e9edf2) 25%, var(--sk-hi, #f4f7fa) 37%, var(--sk-base, #e9edf2) 63%);
    background-size: 400% 100%;
    animation: sk-shimmer 1.3s ease-in-out infinite;
}
@keyframes sk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-color-scheme: dark) { :root { --sk-base: #232a33; --sk-hi: #2c3540; } }
:root[data-theme="dark"] { --sk-base: #232a33; --sk-hi: #2c3540; }
:root[data-theme="light"] { --sk-base: #e9edf2; --sk-hi: #f4f7fa; }

/* Sort headers + load-more (spec 010) */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--text, inherit); }
.load-more { display: flex; justify-content: center; padding: 0.9rem; }

/* Responsive: below the breakpoint the sidebar becomes an off-canvas drawer with a hamburger (spec 010 AC-3). */
.nav-toggle { display: none; }
.nav-scrim { display: none; }
@media (max-width: 820px) {
    .admin-shell { grid-template-columns: 1fr; }
    .nav-toggle {
        display: flex; align-items: center; justify-content: center;
        position: fixed; top: 12px; left: 12px; z-index: 60;
        width: 40px; height: 40px; border-radius: 9px; cursor: pointer;
        background: #102227; color: #fff; border: none; font-size: 20px; line-height: 1;
    }
    .side {
        position: fixed; top: 0; left: 0; bottom: 0; width: 250px; z-index: 50;
        transform: translateX(-100%); transition: transform .2s ease;
    }
    .side.open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.45); }
    .nav-scrim.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 45; }
    .main { grid-column: 1 / -1; }
    .content { padding-top: 60px; } /* clear the fixed hamburger */
    .head-row { flex-wrap: wrap; gap: .5rem; }
    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar .input, .toolbar .check { width: 100%; }
    .drawer { width: 100%; max-width: 100%; }
    table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Dark mode: --danger is a light salmon, so white text on a solid-danger button is unreadable.
   Use dark text on the light-danger fill instead (confirm/archive/delete buttons). */
:root[data-theme="dark"] .btn-danger-solid { color: #1f1210; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-danger-solid { color: #1f1210; } }

/* Payments head actions row (Refresh + Download report + New) — spec 012/015. */
.head-actions { display: inline-flex; gap: 8px; align-items: center; }

/* Toolbar date-range inputs (spec 015-list-ux). */
.toolbar .date { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted, #667085); }
.toolbar .date input { width: auto; }

/* Tenant webhooks list (spec 018-tenant-webhooks). */
.wh-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.wh-item .wh-url { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.wh-add { display: flex; gap: 8px; margin-top: 6px; }
.wh-add .input { flex: 1; }

/* Sign-out button + tenant switcher share the sidebar's theme-toggle look exactly (transparent fill,
   same border + hover) so the three foot controls match (spec 012 AC-4/AC-5; item 4 follow-up). */
.side-foot .btn,
.side-tenant select.input {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .12);
    color: #bcccce;
}
.side-foot .btn:hover,
.side-tenant select.input:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
}
.side-tenant select.input option { color: #14232a; } /* the popup list stays on the OS-native surface */
.side-tenant .eyebrow { color: #7e9698; }