/* ============================================================================
   Shared styling for every admin-facing form: login, first-run setup, the
   tenant admin console, the FAQ editor, and the API snippets page. One sheet
   so all of them look and behave the same instead of drifting apart.

   Load once, globally, from Components/App.razor <head> — do not re-declare
   these classes in individual .razor <style> blocks.

   Field width rule: every text field, textarea and select uses
   `width: 100%; box-sizing: border-box` explicitly rather than relying on
   flex-stretch — <input>/<select> have an intrinsic size that flexbox
   respects instead of stretching, so without this they render narrower than
   a <textarea> sitting right next to them in the same flex column.
   ============================================================================ */

:root {
    --admin-primary: #2563eb;
    --admin-primary-hover: #1d4ed8;
    --admin-primary-soft: #eaf1ff;
    --admin-danger: #dc3545;
    --admin-danger-soft: #fdecee;
    --admin-success: #16a34a;
    --admin-text: #1a1d21;
    --admin-text-muted: #6b7280;
    --admin-border: #dde1e6;
    --admin-border-strong: #c7cdd4;
    --admin-surface: #ffffff;
    --admin-surface-muted: #f7f8fa;
    --admin-radius: 10px;
    --admin-radius-sm: 7px;
    --admin-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --admin-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Page shell ---------- */

.admin-page {
    max-width: 820px;
    margin: 0 auto;
    padding: 32px 20px 72px;
    font-family: var(--admin-font);
    color: var(--admin-text);
}

.admin-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

.admin-topbar h1 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
}

.admin-logout {
    font-size: 13px;
    font-weight: 600;
    color: var(--admin-primary);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: var(--admin-radius-sm);
    transition: background-color .15s ease;
}

.admin-logout:hover {
    background: var(--admin-primary-soft);
}

.admin-section {
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    background: var(--admin-surface);
    box-shadow: var(--admin-shadow);
    padding: 26px 28px;
    margin-bottom: 24px;
}

.admin-section h2 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
}

.admin-section h3 {
    font-size: 14px;
    font-weight: 700;
    margin: 24px 0 4px;
    padding-top: 20px;
    border-top: 1px solid var(--admin-border);
}

.admin-section h3:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 20px;
}

.admin-hint {
    font-size: 13px;
    line-height: 1.55;
    color: var(--admin-text-muted);
    margin: 0 0 18px;
}

/* ---------- Fields ---------- */

.admin-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.admin-grid label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--admin-text-muted);
    letter-spacing: 0.01em;
}

.admin-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.admin-inline-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--admin-text-muted);
}

/* Spacing modifier for one-off .admin-row placements (a button row after a
   grid, a "copy to clipboard" row before a snippet box, etc.) — keeps rhythm
   consistent without scattering inline style="margin..." across the markup. */
.admin-row-spaced {
    margin: 14px 0 10px;
}

.admin-input,
.admin-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    font-size: 14px;
    font-family: inherit;
    color: var(--admin-text);
    background: var(--admin-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.admin-input:hover,
.admin-textarea:hover {
    border-color: var(--admin-border-strong);
}

.admin-input:focus,
.admin-textarea:focus {
    outline: none;
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px var(--admin-primary-soft);
}

.admin-input::placeholder,
.admin-textarea::placeholder {
    color: #9aa1ab;
}

.admin-input:disabled,
.admin-textarea:disabled {
    background: var(--admin-surface-muted);
    color: var(--admin-text-muted);
    cursor: not-allowed;
}

.admin-textarea {
    min-height: 84px;
    line-height: 1.5;
    resize: vertical;
}

select.admin-input {
    appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* ---------- Buttons ---------- */

.admin-btn-primary,
.admin-btn-secondary,
.admin-btn-danger,
.admin-btn-remove {
    padding: 9px 16px;
    border-radius: var(--admin-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease;
}

.admin-btn-primary {
    background: var(--admin-primary);
    color: #fff;
}

.admin-btn-primary:hover:not(:disabled) {
    background: var(--admin-primary-hover);
}

.admin-btn-primary:disabled {
    background: #b7c3d6;
    cursor: default;
}

.admin-btn-secondary {
    background: var(--admin-surface-muted);
    color: var(--admin-text);
    border-color: var(--admin-border);
}

.admin-btn-secondary:hover:not(:disabled) {
    background: #eef0f3;
}

.admin-btn-danger {
    background: var(--admin-danger);
    color: #fff;
}

.admin-btn-danger:hover:not(:disabled) {
    background: #c22c39;
}

.admin-btn-danger:disabled {
    background: #eeb4ba;
    cursor: default;
}

.admin-btn-remove {
    background: none;
    border: none;
    color: var(--admin-danger);
    align-self: flex-end;
    padding: 4px 2px;
}

.admin-btn-remove:hover {
    text-decoration: underline;
}

/* ---------- Status messages ---------- */

.admin-saved {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--admin-success);
}

.admin-error {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--admin-danger);
}

/* ---------- FAQ cards ---------- */

.admin-faq-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 0;
    border-bottom: 1px solid var(--admin-border);
}

.admin-faq-card:first-of-type {
    padding-top: 4px;
}

.admin-faq-card label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--admin-text-muted);
}

/* ---------- Tenant list ---------- */

.tenant-row {
    border-top: 1px solid var(--admin-border);
}

.tenant-row:first-child {
    border-top: none;
}

.tenant-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 6px;
    border-radius: var(--admin-radius-sm);
    cursor: pointer;
    transition: background-color .15s ease;
}

.tenant-row-header:hover {
    background: var(--admin-surface-muted);
}

.tenant-meta {
    font-size: 12px;
    color: var(--admin-text-muted);
    margin-left: 10px;
}

.tenant-detail {
    padding: 6px 6px 26px;
}

/* ---------- Login / first-run setup card ---------- */

.admin-login {
    max-width: 380px;
    margin: 96px auto;
    padding: 36px 32px;
    font-family: var(--admin-font);
    text-align: center;
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    box-shadow: var(--admin-shadow);
}

.admin-login h1 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
}

.admin-login .admin-hint {
    text-align: left;
    margin: 0 0 20px;
}

.admin-login form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.admin-login input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    font-size: 14px;
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.admin-login input:focus {
    outline: none;
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px var(--admin-primary-soft);
}

.admin-login button {
    margin-top: 4px;
    padding: 10px 12px;
    background: var(--admin-primary);
    color: #fff;
    border: none;
    border-radius: var(--admin-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease;
}

.admin-login button:hover {
    background: var(--admin-primary-hover);
}

.admin-login-error {
    background: var(--admin-danger-soft);
    color: var(--admin-danger);
    font-size: 13px;
    font-weight: 500;
    padding: 10px 12px;
    border-radius: var(--admin-radius-sm);
    margin: 0 0 14px;
    text-align: left;
}

/* ---------- Code/snippet box (ApiSnippets.razor) ---------- */

.snippet-box {
    width: 100%;
    box-sizing: border-box;
    font-family: 'SFMono-Regular', Consolas, 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
    padding: 18px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    background: #1e1e1e;
    color: #d4d4d4;
    white-space: pre;
    resize: vertical;
}
