/* Buttons, inputs, tables, badges, modals — reusable atoms. */

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--sp-2);
    padding: 10px 18px;
    font-family: var(--font-body);
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: var(--rad-sm);
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--ink);
    transition: transform var(--duration-1) var(--easing-out),
                background var(--duration-1) var(--easing-out),
                box-shadow var(--duration-1) var(--easing-out);
    white-space: nowrap;
    user-select: none;
}
.btn:hover { background: var(--ink-2); box-shadow: var(--shadow-1); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-2); border-color: var(--accent-2); }

.btn-ghost {
    background: transparent; color: var(--ink);
    border-color: var(--hair-2);
}
.btn-ghost:hover { background: var(--surface-mut); }

.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }

.btn-sm { padding: 6px 12px; font-size: var(--t-xs); }
.btn-icon { padding: 8px; min-width: auto; }

/* ── Inputs ─────────────────────────────────────────────────────────── */
.field {
    display: flex; flex-direction: column;
    gap: 6px;
    margin-bottom: var(--sp-4);
}
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}

.label {
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
}

.input, .textarea, .select {
    width: 100%;
    padding: 10px 14px;
    font-family: var(--font-body);
    font-size: var(--t-base);
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--hair-2);
    border-radius: var(--rad-sm);
    transition: border-color var(--duration-1) var(--easing-out),
                box-shadow var(--duration-1) var(--easing-out);
}
.input:hover, .textarea:hover, .select:hover { border-color: var(--muted); }
.input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: 0.6; }

.textarea { resize: vertical; min-height: 96px; line-height: var(--lh-snug); }

.hint { font-size: var(--t-xs); color: var(--muted); margin-top: 4px; }
.error-text { font-size: var(--t-xs); color: var(--danger); margin-top: 4px; }

.checkbox {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    cursor: pointer;
    font-size: var(--t-sm);
}
.checkbox input { width: 16px; height: 16px; accent-color: var(--accent); }

/* ── Tables ─────────────────────────────────────────────────────────── */
/* Wrap any wide table in .table-wrap so it scrolls horizontally inside
   the page instead of forcing the whole layout wider than the viewport.
   Border + radius live on the wrapper so the inner table can be flush. */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--surface);
    border: 1px solid var(--hair);
    border-radius: var(--rad-md);
}
.table-wrap > .table {
    border: 0;
    border-radius: 0;
    background: transparent;
}
.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--hair);
    border-radius: var(--rad-md);
    overflow: hidden;
    font-size: var(--t-sm);
}
.table thead th {
    text-align: left;
    padding: 14px 18px;
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--muted);
    background: var(--surface-mut);
    border-bottom: 1px solid var(--hair);
    font-weight: 600;
    white-space: nowrap;
}
.table tbody td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--hair);
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr {
    transition: background var(--duration-1) var(--easing-out);
}
.table tbody tr:hover { background: var(--surface-mut); }
.table .row-actions { text-align: right; white-space: nowrap; }
.table .row-actions .btn-link {
    color: var(--accent-ink);
    font-weight: 600;
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    margin-left: var(--sp-3);
    transition: color var(--duration-1) var(--easing-out);
}
.table .row-actions .btn-link:hover { color: var(--accent); }
.table .row-actions .btn-link.danger { color: var(--danger); }

.empty {
    text-align: center;
    padding: var(--sp-7) var(--sp-5);
    color: var(--muted);
    background: var(--surface);
    border: 1px dashed var(--hair-2);
    border-radius: var(--rad-md);
}
.empty .display-num { color: var(--hair-2); }

/* ── Badges ─────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 999px;
    border: 1px solid transparent;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
}
.badge-active   { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.badge-inactive { background: var(--paper-2);      color: var(--muted);   border-color: var(--hair-2); }
.badge-suspended{ background: var(--danger-soft);  color: var(--danger);  border-color: var(--danger); }
.badge-pending  { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }
.badge-tier-basic    { background: var(--paper-2); color: var(--ink-2); }
.badge-tier-plus     { background: var(--accent-soft); color: var(--accent-ink); }
.badge-tier-enterprise{ background: var(--forest-soft); color: var(--forest); }

/* ── Card ───────────────────────────────────────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--hair);
    border-radius: var(--rad-md);
    padding: var(--sp-5);
    box-shadow: var(--shadow-1);
}

/* ── Modal / Drawer ─────────────────────────────────────────────────── */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(26, 22, 18, 0.5);
    backdrop-filter: blur(2px);
    z-index: 100;
    animation: fade-in var(--duration-2) var(--easing-out);
}
.modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    background: var(--surface);
    border-radius: var(--rad-lg);
    box-shadow: var(--shadow-3);
    z-index: 101;
    display: flex; flex-direction: column;
    animation: modal-in var(--duration-2) var(--easing-out);
}
/* Wider variant for content-heavy modals (e.g. the draft wizard). */
.modal.modal--wide { width: min(860px, calc(100vw - 32px)); }
.modal-header {
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--hair);
    display: flex; align-items: center; justify-content: space-between;
}
.modal-header h2 {
    font-family: var(--font-display);
    font-size: var(--t-xl);
    font-weight: 500;
}
.modal-header .close {
    width: 32px; height: 32px;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
    color: var(--muted);
}
.modal-header .close:hover { background: var(--paper-2); color: var(--ink); }
.modal-body { padding: var(--sp-5) var(--sp-6); overflow-y: auto; }
.modal-footer {
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--hair);
    display: flex; gap: var(--sp-3); justify-content: flex-end;
    flex-wrap: wrap;
    background: var(--surface-mut);
    border-radius: 0 0 var(--rad-lg) var(--rad-lg);
}

@keyframes fade-in {
    from { opacity: 0; } to { opacity: 1; }
}
@keyframes modal-in {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* ── Toast ──────────────────────────────────────────────────────────── */
.toast-area {
    position: fixed;
    bottom: var(--sp-5); right: var(--sp-5);
    display: flex; flex-direction: column; gap: var(--sp-3);
    z-index: 200;
    pointer-events: none;
}
.toast {
    background: var(--ink);
    color: var(--paper);
    padding: 12px 18px;
    border-radius: var(--rad-sm);
    font-size: var(--t-sm);
    box-shadow: var(--shadow-2);
    animation: toast-in var(--duration-2) var(--easing-out);
    pointer-events: auto;
    max-width: 380px;
}
.toast.error    { background: var(--danger); }
.toast.success  { background: var(--success); }
@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Skeleton loader ────────────────────────────────────────────────── */
.skel {
    background: linear-gradient(90deg,
        var(--paper-2) 0%, var(--hair) 50%, var(--paper-2) 100%);
    background-size: 200% 100%;
    animation: skel-pulse 1.4s linear infinite;
    border-radius: var(--rad-sm);
    height: 14px;
}
@keyframes skel-pulse {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ── Property Settings tabs and form ───────────────────────────────── */
.ps-tabs { display:flex; border-bottom:2px solid var(--hair); margin-bottom:24px; }
.ps-tab  { padding:12px 24px; cursor:pointer; font-size:var(--t-xs);
           letter-spacing:var(--tracking-label); text-transform:uppercase;
           color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-2px; }
.ps-tab--active { color:var(--ink); border-bottom-color:var(--accent); font-weight:600; }
.ps-section { margin-bottom:8px; }
.ps-section-label { font-size:var(--t-xs); letter-spacing:var(--tracking-label);
                    text-transform:uppercase; color:var(--muted);
                    margin-bottom:12px; font-weight:600; }
.ps-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ps-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.chip { padding:6px 12px; border:1px solid var(--hair); border-radius:16px;
        font-size:var(--t-sm); background:var(--surface-mut); cursor:pointer;
        user-select:none; display:inline-block; }
.chip--selected { background:var(--accent); color:#fff; border-color:var(--accent); }
.chip--add      { border-style:dashed; color:var(--muted); }
.input--error   { border-color:var(--danger) !important; }
.field-error    { color:var(--danger); font-size:var(--t-xs); margin-top:4px; }
.input--readonly{ background:var(--surface-mut); font-weight:600; }
/* BEM-style button variants used by property-settings tab files */
.btn--primary  { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn--primary:hover { background:var(--accent-2); border-color:var(--accent-2); }
.btn--ghost    { background:transparent; color:var(--muted); border-color:var(--hair-2); }
.btn--ghost:hover { background:var(--surface-mut); }
.btn--dashed   { background:transparent; border:1px dashed var(--accent); color:var(--accent); }
.btn--sm       { padding:4px 10px; font-size:var(--t-xs); }

/* Property Settings · Governance sub-tabs and year panels */
.ps-subtabs       { display:flex; gap:6px; margin-bottom:24px; }
.ps-subtab        { padding:6px 18px; font-size:12px; letter-spacing:.08em;
                    text-transform:uppercase; border:1px solid var(--border, #d4c4a8);
                    border-radius:16px; background:transparent;
                    color:var(--text-muted, #888); cursor:pointer;
                    font-family:inherit; }
.ps-subtab--active { background:var(--text, #3a2a1a); color:var(--bg, #faf3e7);
                     border-color:var(--text, #3a2a1a); font-weight:600; }

.ps-year-panel    { border:1px solid var(--border, #d4c4a8); border-radius:6px;
                    margin-bottom:10px; background:var(--bg-input, #fdf8ee);
                    overflow:hidden; }
.ps-year-head     { display:flex; align-items:center; justify-content:space-between;
                    padding:12px 16px; background:var(--bg-muted, #f0e6d0); }
.ps-year-caret    { font-size:11px; color:var(--text-muted, #888); }
.ps-year-title    { font-size:15px; font-weight:600; color:var(--text, #3a2a1a); }
.ps-year-count    { font-size:12px; color:var(--text-muted, #888); }
.ps-year-body     { padding:14px 16px; }

.ps-member-row    { display:grid; grid-template-columns: 200px 1fr 130px 80px;
                    gap:10px; align-items:center; margin-bottom:8px; padding:8px;
                    background:var(--bg, #faf3e7); border-radius:4px; }

.btn--link        { background:none; border:none; color:#a04040; cursor:pointer;
                    font-size:12px; padding:4px 8px; font-family:inherit; }

/* === Brand wizard ===================================================== */
.brand-wizard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    min-width: 520px;
}
.wizard-pane {
    padding: 12px;
    background: #f7f7f5;
    border-radius: 8px;
}
.wizard-step-indicator {
    display: inline-block;
    background: #7c4a1a;
    color: #fff;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
    font-weight: 600;
    margin-bottom: 8px;
}
.wizard-help {
    color: #4b5563;
    font-size: 13px;
    margin: 10px 0;
}
.wizard-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}
.wizard-input-hex {
    width: 110px;
    margin-top: 6px;
    font-family: 'Courier New', monospace;
}
.wizard-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
}

.chip-row { margin-top: 10px; }

.swatch-row { margin-top: 10px; }
.swatch {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-right: 6px;
    cursor: pointer;
}
.swatch.sel { outline: 2px solid #1f2937; outline-offset: 3px; }

.label-mini {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.wizard-input + .label-mini { margin-top: 10px; }

.wizard-preview {
    padding: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}
.preview-banner {
    color: #fff;
    padding: 5px 9px;
    font-size: 11px;
    letter-spacing: 0.5px;
    margin-top: 8px;
    border-radius: 2px;
    text-align: center;
}
.preview-title {
    font-weight: 600;
    font-size: 12px;
    margin-top: 8px;
    text-align: center;
}
.preview-body {
    font-size: 10px;
    line-height: 1.5;
    margin-top: 8px;
    color: #374151;
}
.preview-footer {
    border-top: 1px solid #e5e7eb;
    margin-top: 14px;
    padding-top: 5px;
    font-size: 8px;
    color: #9ca3af;
    text-align: center;
}

/* CTA banner on the Property page when wizard is skipped */
.brand-cta-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fdf6ee;
    border: 1px solid #f0d4a0;
    padding: 10px 14px;
    border-radius: 8px;
    margin: 10px 0;
    color: #7c4a1a;
}
.skip-link {
    color: #6b7280;
    font-size: 13px;
    text-decoration: underline;
}

.brand-edit-row {
    text-align: right;
    margin: 10px 0;
}

.font-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
}
.font-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px 8px;
    text-align: center;
    cursor: pointer;
}
.font-card:hover { border-color: #d1d5db; }
.font-card.sel { border-color: #7c4a1a; background: #fdf6ee; }
.font-name {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
}
.font-sample {
    font-size: 18px;
    margin-top: 6px;
}
.wizard-textarea {
    height: 60px;
    resize: vertical;
}
.wizard-review-mode {
    grid-template-columns: 1fr;   /* review screen spans full width */
}
.wizard-preview-large {
    padding: 24px;
    min-height: 260px;
}
.review-summary {
    margin-top: 14px;
    font-size: 13px;
    color: #374151;
}
.review-summary ul {
    padding-left: 18px;
    margin: 6px 0;
}

/* Advanced styling panel — opened from the wizard's review step */
.review-advanced-cta {
    background: #f7f7f5;
    border-radius: 8px;
    padding: 12px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.review-advanced-text {
    font-size: 12px;
    color: #6b7280;
    flex: 1;
}

.ap-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 20px;
    min-width: 680px;
}
.ap-form { display: flex; flex-direction: column; gap: 14px; }
.ap-preview { /* preview pane self-styled in JS */ }
.ap-field {
    background: #f7f7f5;
    padding: 12px;
    border-radius: 8px;
}
.ap-label {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.ap-radio-row { display: flex; gap: 16px; margin-bottom: 10px; font-size: 12px; }
.ap-radio-row label { display: flex; gap: 4px; align-items: center; cursor: pointer; }

.ap-letterhead-spec {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 10px;
    display: flex;
    gap: 14px;
    align-items: center;
}
.ap-spec-icon {
    width: 96px;
    height: 32px;
    background: linear-gradient(90deg, #fdf6ee, #fdf6ee 24%, #ffeed1 24%, #ffeed1 36%, #fdf6ee 36%);
    border: 1px dashed #c2a472;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7c4a1a;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.ap-spec-body { font-size: 12px; color: #374151; line-height: 1.5; }
.ap-spec-body strong { color: #111827; }
.ap-spec-body ul { margin: 4px 0 0 0; padding-left: 16px; font-size: 11px; color: #4b5563; }
.ap-spec-body li { margin: 2px 0; }

.ap-file-pick {
    display: block;
    background: #fff;
    border: 1px dashed #d1d5db;
    border-radius: 6px;
    padding: 14px;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
    cursor: pointer;
}
.ap-file-pick:hover { border-color: #7c4a1a; color: #7c4a1a; }

.ap-letterhead-thumb {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 8px;
}
.ap-letterhead-thumb img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 90px;
    object-fit: contain;
    border-radius: 3px;
}
.ap-thumb-actions {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    font-size: 11px;
}
.ap-link {
    color: #7c4a1a;
    cursor: pointer;
    text-decoration: underline;
}

.ap-radio-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}
.ap-radio-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 10px 8px;
    text-align: center;
    cursor: pointer;
    font-size: 11px;
    color: #374151;
}
.ap-radio-card:hover { border-color: #d1d5db; }
.ap-radio-card.sel { border-color: #7c4a1a; background: #fdf6ee; }
.ap-radio-card-demo { margin-bottom: 4px; font-size: 10px; color: #6b7280; }

.ap-title-demo--small  { font-size: 11px; }
.ap-title-demo--medium { font-size: 14px; font-weight: 700; }
.ap-title-demo--large  { font-size: 17px; font-weight: 700; }
.ap-body-demo--small  { font-size: 9px; }
.ap-body-demo--normal { font-size: 11px; }
.ap-body-demo--large  { font-size: 13px; }

.ap-align-buttons { display: flex; gap: 6px; }
.ap-align-btn {
    width: 38px;
    height: 32px;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
}
.ap-align-btn:hover { border-color: #d1d5db; }
.ap-align-btn.sel { border-color: #7c4a1a; background: #fdf6ee; }

.ap-modal-footer {
    display: flex;
    justify-content: flex-end;
}

.ap-field--disabled {
    opacity: 0.45;
    pointer-events: none;
}

.ap-template-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ap-template-option {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.4;
}
.ap-template-option input[type="radio"] {
    margin-top: 2px;
    flex-shrink: 0;
}
.ap-template-text strong { color: #111827; }
.ap-template-text span { color: #6b7280; }

/* Wider modal when the Advanced styling panel is inside. The default
   .modal width (560px) clips the panel's preview pane (grid needs ~680px+).
   Uses :has() — Chrome 105+, Safari 15.4+, Firefox 121+. */
.modal:has(.ap-grid) {
    width: min(920px, calc(100vw - 32px));
}

/* Wider modal for the brand wizard so the Review screen's large preview fits
   comfortably, and the form+preview grid on steps 1-5 has more breathing room.
   Width stays constant across all 5 steps so the modal doesn't jump on
   Next/Back. */
.modal:has(.brand-wizard-grid) {
    width: min(820px, calc(100vw - 32px));
}

/* Server resources card — labelled metric rows with a threshold-colored bar.
   Used on the Boss dashboard's infrastructure section. */
.resource-row + .resource-row { margin-top: var(--sp-4); }
.resource-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
}
.resource-bar {
    height: 8px;
    background: var(--hair);
    border-radius: var(--rad-pill, 999px);
    overflow: hidden;
}
.resource-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width var(--duration-3, 320ms) var(--easing-out, ease-out);
}
.resource-bar > span.tone-success { background: var(--success); }
.resource-bar > span.tone-warning { background: var(--warning); }
.resource-bar > span.tone-danger  { background: var(--danger); }