
/*
 * Iteration 11 Hotfix 4 — AutoHub-grade visual polish
 * ----------------------------------------------------
 * This is intentionally loaded last. It normalizes the Smart Home shell to the
 * same clean business-console rhythm as AutoHub: light surfaces, compact table
 * chrome, consistent cards/forms/buttons, subtle motion and a real elastic
 * SmartTable filler column.
 */
:root {
    color-scheme: light;
    --tsh-bg: #f3f6fb;
    --tsh-surface: #ffffff;
    --tsh-surface-soft: #f8fafc;
    --tsh-surface-3: #f1f5f9;
    --tsh-surface-strong: #f7f9fc;
    --tsh-border: rgba(15,23,42,.09);
    --tsh-border-subtle: rgba(15,23,42,.075);
    --tsh-border-strong: rgba(15,23,42,.14);
    --tsh-text: #0f172a;
    --tsh-text-muted: #64748b;
    --tsh-muted: #64748b;
    --tsh-muted-2: #94a3b8;
    --tsh-primary: #1a4bae;
    --tsh-primary-2: #133b8a;
    --tsh-primary-soft: rgba(26,75,174,.10);
    --tsh-primary-ring: rgba(26,75,174,.18);
    --tsh-success: #15803d;
    --tsh-warning: #b45309;
    --tsh-danger: #b91c1c;
    --tsh-radius-sm: 5px;
    --tsh-radius-md: 7px;
    --tsh-radius-lg: 10px;
    --tsh-control-h: 30px;
    --tsh-shadow: 0 3px 8px rgba(15,23,42,.07), 0 1px 3px rgba(15,23,42,.04);
    --tsh-shadow-card: 0 3px 8px rgba(15,23,42,.07), 0 1px 3px rgba(15,23,42,.04);
    --tsh-shadow-lg: 0 18px 48px rgba(15,23,42,.14), 0 6px 16px rgba(15,23,42,.06);
    --tsh-sidebar-width: 248px;
    --ah-bg: var(--tsh-bg);
    --ah-surface: var(--tsh-surface);
    --ah-surface-2: var(--tsh-surface-soft);
    --ah-surface-3: var(--tsh-surface-3);
    --ah-border: var(--tsh-border);
    --ah-border-2: var(--tsh-border-strong);
    --ah-text: var(--tsh-text);
    --ah-muted: var(--tsh-muted);
    --ah-muted-2: var(--tsh-muted-2);
    --ah-blue: var(--tsh-primary);
    --ah-blue-2: var(--tsh-primary-2);
    --ah-blue-weak: var(--tsh-primary-soft);
    --ah-blue-ring: var(--tsh-primary-ring);
    --ah-control-h: var(--tsh-control-h);
    --ah-radius: var(--tsh-radius-sm);
    --ah-radius-lg: var(--tsh-radius-md);
    --ah-shadow: var(--tsh-shadow);
    --ah-shadow-lg: var(--tsh-shadow-lg);
    --surface-1: #ffffff;
    --surface-2: #f8fafc;
    --surface-3: #f1f5f9;
    --line-1: rgba(15,23,42,.09);
    --line-2: rgba(15,23,42,.14);
    --text-1: #0f172a;
    --text-2: #475569;
    --text-3: #94a3b8;
    --brand: var(--tsh-primary);
    --brand-deep: var(--tsh-primary-2);
    --brand-weak: var(--tsh-primary-soft);
    --brand-line: var(--tsh-primary-ring);
    --ok: #15803d;
    --warn: #b45309;
    --danger: #b91c1c;
    --r-xs: 3px;
    --r-sm: 5px;
    --r-md: 7px;
    --r-lg: 10px;
    --shadow-xs: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --shadow-sm: var(--tsh-shadow);
    --shadow-md: 0 8px 22px rgba(15,23,42,.09), 0 2px 6px rgba(15,23,42,.04);
    --shadow-lg: var(--tsh-shadow-lg);
}

html, body { background: var(--surface-2); }
body.tsh-app-body,
body.tsh-login-body {
    background:
        radial-gradient(circle at top left, rgba(26,75,174,.055), transparent 260px),
        linear-gradient(180deg, rgba(255,255,255,.32), transparent 185px),
        var(--surface-2) !important;
    color: var(--text-1);
}

/* Shell: same calm, compact console proportions as AutoHub. */
.tsh-app-shell { background: var(--surface-2); }
.tsh-sidebar {
    background: linear-gradient(170deg, #0d1629 0%, #111e34 100%) !important;
    box-shadow: inset -1px 0 0 rgba(255,255,255,.035);
}
.tsh-brand-row { height: 54px; padding: 0 13px; border-bottom-color: rgba(255,255,255,.07); }
.tsh-brand { gap: 9px; font-size: 16px; letter-spacing: -.025em; }
.tsh-brand-logo { width: 29px; height: 29px; border-radius: 5px; }
.tsh-user-card {
    margin: 10px 10px 5px;
    padding: 9px 10px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 6px;
    background: rgba(255,255,255,.042);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.tsh-avatar { width: 30px; height: 30px; border-radius: 5px; }
.tsh-nav { padding: 7px 8px 18px; }
.tsh-nav-group {
    margin: 14px 8px 5px;
    font-size: 9.5px;
    letter-spacing: .13em;
    opacity: .72;
}
.tsh-nav-item {
    min-height: 32px;
    padding: 7px 9px;
    border-radius: 5px;
    margin: 1px 0;
    font-size: 12.5px;
    font-weight: 650;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.tsh-nav-item:hover { background: rgba(255,255,255,.07); }
.tsh-nav-item.is-active {
    background: rgba(37,99,235,.20);
    border-color: rgba(99,148,235,.18);
    box-shadow: inset 2px 0 0 var(--brand);
}
.tsh-nav-item.is-active::after {
    content: '';
    position: absolute;
    right: 9px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #93c5fd;
    box-shadow: 0 0 0 4px rgba(147,197,253,.10);
}
.tsh-nav-icon img { width: 14px; height: 14px; }

.tsh-main { background: var(--surface-2); }
.tsh-topbar {
    height: 54px;
    padding: 0 16px;
    background: rgba(255,255,255,.94) !important;
    border-bottom: 1px solid var(--line-1);
    box-shadow: 0 1px 0 rgba(15,23,42,.03), var(--shadow-xs);
    backdrop-filter: saturate(1.08) blur(12px);
    -webkit-backdrop-filter: saturate(1.08) blur(12px);
}
.tsh-topbar h1 { font-size: 18px; letter-spacing: -.025em; color: var(--text-1); }
.tsh-page-kicker { color: var(--text-2); font-size: 10.5px; font-weight: 800; letter-spacing: .075em; }
.tsh-content {
    padding: 18px 20px 52px;
    gap: 14px;
    background:
        radial-gradient(circle at top left, rgba(26,75,174,.055), transparent 260px),
        linear-gradient(180deg, rgba(255,255,255,.28), transparent 180px) !important;
    animation: tshContentIn 150ms ease;
}
@keyframes tshContentIn { from { opacity: .72; transform: translateY(2px); } to { opacity: 1; transform: none; } }

/* Card rhythm. */
.tsh-card,
.spa-card,
.tsh-tab-card,
.tsh-note-card,
.smart-table-card,
.smart-form-card,
.tsh-relationship-board,
.tsh-dashboard-builder,
.tsh-settings-editor,
.summary-card,
.detail-item {
    background: #fff !important;
    border: 1px solid var(--line-1) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--text-1);
}
.tsh-card,
.spa-card { padding: 16px; position: relative; }
.tsh-card::before,
.spa-card::before,
.smart-table-card::before,
.smart-form-card::before,
.tsh-relationship-board::before,
.tsh-dashboard-builder::before,
.tsh-settings-editor::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(26,75,174,.18), transparent);
    opacity: .75;
    pointer-events: none;
}
.tsh-card h1, .tsh-card h2, .tsh-card h3,
.spa-card h1, .spa-card h2, .spa-card h3 {
    color: var(--text-1);
    letter-spacing: -.02em;
}
.tsh-card p, .spa-card p, .ah-muted, .smart-muted { color: var(--text-2) !important; }
.tsh-card.tsh-hero-card,
.page-intro {
    border-radius: var(--r-lg) !important;
    background: linear-gradient(115deg, #0d1629 0%, #1a3060 60%, #172a55 100%) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    box-shadow: 0 4px 14px rgba(10,20,50,.18) !important;
    color: #fff;
}
.tsh-card.tsh-hero-card::before,
.page-intro::before {
    content: '';
    position: absolute;
    inset: -60% auto auto 34%;
    width: 360px;
    height: 360px;
    border-radius: 999px;
    background: conic-gradient(from 210deg, transparent, rgba(96,165,250,.16), transparent 42%);
    pointer-events: none;
}
.tsh-card.tsh-hero-card h1,
.tsh-card.tsh-hero-card h2,
.tsh-card.tsh-hero-card h3,
.page-intro h1,
.page-intro h2 { color: #fff !important; }
.tsh-card.tsh-hero-card p,
.page-intro p { color: #cbd7eb !important; }

/* Buttons and inputs. */
.smart-input,
.smart-select,
.smart-textarea,
.tsh-form input,
.tsh-form select,
.tsh-form textarea,
.ah-field input,
.ah-field select,
.ah-field textarea {
    height: var(--ah-control-h);
    min-height: var(--ah-control-h);
    border: 1px solid var(--line-2) !important;
    border-radius: var(--r-sm) !important;
    background: #fff !important;
    color: var(--text-1) !important;
    box-shadow: none !important;
    font-size: 13px;
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.smart-textarea,
.tsh-form textarea,
.ah-field textarea { height: auto; min-height: 96px; padding: 7px 9px; }
.smart-input::placeholder,
.tsh-form input::placeholder,
.smart-textarea::placeholder { color: #9aa8ba; }
.smart-input:focus,
.smart-select:focus,
.smart-textarea:focus,
.tsh-form input:focus,
.tsh-form select:focus,
.tsh-form textarea:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px var(--brand-line) !important;
    outline: none;
}
.ah-btn,
.tsh-top-button,
.tsh-ghost-button {
    min-height: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--line-1) !important;
    border-radius: var(--r-sm) !important;
    background: #fff !important;
    color: #1e2c42 !important;
    box-shadow: none !important;
    font-size: 12.5px;
    font-weight: 750;
    padding: 0 10px;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.ah-btn:hover,
.tsh-top-button:hover,
.tsh-ghost-button:hover {
    background: #f7fafe !important;
    border-color: var(--line-2) !important;
    box-shadow: var(--shadow-xs) !important;
    transform: translateY(-1px);
    text-decoration: none;
}
.ah-btn:active,
.tsh-top-button:active,
.tsh-ghost-button:active { transform: none; box-shadow: none !important; }
.ah-btn.primary {
    color: #fff !important;
    background: linear-gradient(180deg, var(--brand), var(--brand-deep)) !important;
    border-color: var(--brand-deep) !important;
}
.ah-btn.primary:hover { background: linear-gradient(180deg, #235dcc, var(--brand-deep)) !important; color: #fff !important; }
.ah-btn.soft { background: #f3f7fc !important; color: #17356c !important; }
.ah-btn.danger,
.tsh-top-button.danger { color: var(--danger) !important; border-color: #f4b7b7 !important; background: #fffafa !important; }
.ah-btn.icon { width: 30px; padding: 0; }
.btn-ico,
.tsh-top-button img { width: 14px; height: 14px; object-fit: contain; opacity: .82; }
.top-kbd,
kbd {
    border: 1px solid var(--line-1);
    background: #f8fafc;
    border-radius: var(--r-xs);
    color: var(--text-2);
    padding: 1px 5px;
    font-size: 10.5px;
    font-weight: 800;
}

/* Pills and code. */
.pill {
    border: 1px solid var(--line-1);
    border-radius: 999px;
    background: #f8fafc;
    color: var(--text-2);
    font-size: 10.5px;
    font-weight: 850;
    letter-spacing: .015em;
    padding: 2px 7px;
}
.pill.ok { background: #f0fdf4; border-color: #a7f3c0; color: #166534; }
.pill.warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.pill.danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.pill.off { background: #f8fafc; border-color: #dbe3ed; color: #64748b; }
.ah-code,
.tsh-code {
    display: inline-flex;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--tsh-mono);
    font-size: 12px;
    color: #1e3a8a;
    background: #f3f7ff;
    border: 1px solid #d8e5ff;
    border-radius: var(--r-xs);
    padding: 1px 5px;
}

/* Tabs: less custom/dark, more AutoHub. */
.tsh-tab-card { overflow: hidden; padding: 0 !important; }
.tsh-tab-strip,
.tabs {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    padding: 0 12px;
    border-bottom: 2px solid var(--line-1) !important;
    background: linear-gradient(180deg, #fff, #f8fafc) !important;
}
.tsh-tab-strip button,
.tabs .tab,
.tab {
    appearance: none;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    color: var(--text-2) !important;
    padding: 11px 12px 9px !important;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px;
}
.tsh-tab-strip button:hover,
.tabs .tab:hover,
.tab:hover { color: var(--brand) !important; background: rgba(26,75,174,.045) !important; }
.tsh-tab-strip button.is-active,
.tabs .tab.active,
.tab.active {
    color: var(--brand) !important;
    border-bottom-color: var(--brand) !important;
    background: transparent !important;
    box-shadow: none !important;
}
.tsh-tab-panel { padding: 16px; background: #fff; }

/* SmartTable — AutoHub-compatible chrome, including real filler column. */
.smart-table-card {
    position: relative;
    overflow: hidden;
    padding: 14px;
    border-radius: var(--r-md) !important;
}
.smart-table-toolbar,
.smart-pagination,
.smart-bulk-bar {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
}
.smart-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.smart-table-title { min-width: 0; gap: 2px; }
.smart-table-title strong { color: var(--text-1) !important; font-size: 14.5px; font-weight: 850; letter-spacing: -.015em; }
.smart-table-title small { color: var(--text-2) !important; font-size: 12px; }
.smart-table-tools { gap: 6px; flex-wrap: wrap; }
.smart-search-wrap { min-width: 220px; max-width: 360px; flex: 1 1 240px; }
.smart-input.compact,
.ah-btn.compact { min-height: 26px; height: 26px; font-size: 12px; padding-top: 0; padding-bottom: 0; }
.smart-toolbar-toggle.active {
    color: var(--brand) !important;
    border-color: #b8cdf3 !important;
    background: #f0f6ff !important;
}
.smart-count {
    display: inline-grid;
    place-items: center;
    min-width: 17px;
    height: 17px;
    margin-left: 5px;
    padding: 0 5px;
    border-radius: 999px;
    color: #fff;
    background: var(--brand);
    font-size: 10px;
    font-weight: 900;
}
.smart-filter-panel,
.smart-column-panel {
    margin: 0 0 10px;
    padding: 10px;
    border: 1px solid var(--line-1) !important;
    border-radius: var(--r-sm);
    background: #fbfdff !important;
}
.smart-panel-head { margin-bottom: 9px; }
.smart-panel-head strong { color: var(--text-1) !important; font-size: 13px; }
.smart-filter-grid,
.smart-column-grid { gap: 8px; }
.smart-filter-field,
.smart-column-field { color: var(--text-2) !important; font-size: 11.5px; font-weight: 800; }
.smart-column-field {
    border: 1px solid var(--line-1) !important;
    border-radius: var(--r-sm) !important;
    background: #fff !important;
    padding: 7px 8px;
}
.smart-panel-note,
.smart-table-hint {
    margin: -3px 0 8px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--text-3) !important;
    font-size: 11px;
    letter-spacing: .01em;
}
.smart-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--text-2) !important;
    font-size: 12px;
}
.smart-pagination-top { margin: 0 0 8px; }
.smart-pagination-bottom { margin: 8px 0 0; }
.smart-page-size,
.smart-page-controls,
.page-jump-wrap { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.smart-page-summary { color: var(--text-1) !important; font-weight: 800; }
.smart-page-controls .ah-btn.icon {
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    border-radius: var(--r-xs) !important;
    font-size: 13px;
}
.smart-page-size select { width: 72px; }
.page-jump { width: 50px; height: 24px; min-height: 24px; font-size: 12px; padding: 0 5px; text-align: center; }
.table-spinner { border-color: #dbe3ee; border-top-color: var(--brand); }
.smart-bulk-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: -3px 0 9px;
    padding: 7px 10px !important;
    border: 1px solid #c8d8f0 !important;
    background: linear-gradient(90deg, #f0f6ff, #f8fbff) !important;
    border-radius: var(--r-sm);
    color: #334155;
    box-shadow: 0 1px 4px rgba(26,75,174,.07);
}
.smart-bulk-bar[hidden] { display: none !important; }
.smart-bulk-bar [data-st-selection-count] { font-weight: 850; color: var(--text-1); }
.smart-bulk-bar .ah-btn { height: 26px; min-height: 26px; }
.smart-table-wrap {
    overflow: auto;
    max-width: 100%;
    border: 1px solid var(--line-1) !important;
    border-radius: var(--r-sm) !important;
    background: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
    scrollbar-width: thin;
    scrollbar-color: rgba(15,23,42,.10) transparent;
}
.smart-table.server-driven,
.smart-table-configurable {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    min-width: 100%;
    width: max-content;
    background: #fff;
}
.smart-table.server-driven th,
.smart-table.server-driven td,
.smart-table th,
.smart-table td {
    padding: 6px 9px !important;
    border-bottom: 1px solid #edf2f8 !important;
    text-align: left;
    vertical-align: middle;
}
.smart-table.server-driven th,
.smart-table th {
    height: 34px;
    color: #64748b !important;
    background: #f7f9fc !important;
    border-bottom: 1px solid #e3eaf5 !important;
    font-size: 10.5px !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 800;
    position: sticky;
    top: 0;
    z-index: 2;
    white-space: nowrap;
}
.smart-table.server-driven th.sorted,
.smart-table th.sorted { color: #1a3a72 !important; background: #f2f6fd !important; }
.smart-sort-button { color: inherit !important; font-weight: inherit; }
.sort-mark { color: #1a3a72; font-size: 10px; margin-left: 3px; }
.sort-index {
    min-width: 13px;
    height: 13px;
    margin-left: 2px;
    background: #dbeafe;
    color: #1e3a8a;
    font-size: 8.5px;
}
.smart-col-drag { color: #94a3b8; font-size: 11px; opacity: .72; }
.smart-col-resize { top: 0; right: 0; width: 9px; height: 100%; }
.smart-col-resize::after { right: 4px; top: 20%; bottom: 20%; background: #c0cfe2; opacity: .7; }
.smart-col-resize:hover::after { background: var(--brand); opacity: 1; }
.smart-table.server-driven td,
.smart-table td {
    height: 33px;
    color: #1a2b42 !important;
    font-size: 13px !important;
    background: #fff;
}
.smart-table.server-driven tbody tr:nth-child(even) td,
.smart-table tbody tr:nth-child(even) td { background-image: linear-gradient(0deg, rgba(248,250,252,.58), rgba(248,250,252,.58)); }
.smart-table.server-driven tbody tr:hover td,
.smart-table tbody tr:hover td { background: #f6f9ff !important; background-image: none; }
.smart-table tr:last-child td { border-bottom: 0 !important; }
.smart-cell-time { color: #64748b !important; }
.select-col,
.select-col-col { width: 34px !important; min-width: 34px !important; max-width: 34px !important; text-align: center !important; }
.select-col input { width: 14px; height: 14px; accent-color: var(--brand); cursor: pointer; }
.row-actions-col { width: 1%; min-width: 112px; white-space: nowrap; }
.row-actions { display: flex; gap: 3px; flex-wrap: nowrap; white-space: nowrap; }
.smart-table .ah-btn,
.row-actions .ah-btn { height: 24px; min-height: 24px; font-size: 11.5px; padding: 0 7px; border-radius: var(--r-xs) !important; }
.smart-table .ah-btn.smart-action-icon { width: 24px; min-width: 24px; padding: 0; display: inline-grid; place-items: center; }
.smart-table .ah-btn.smart-action-icon .btn-ico { width: 13px; height: 13px; }
.smart-fill-col-col { width: auto !important; min-width: 24px !important; max-width: none !important; }
.smart-table .smart-fill-col {
    min-width: 24px !important;
    width: auto !important;
    padding: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    background: #fff !important;
    cursor: default !important;
}
.smart-table th.smart-fill-col { background: #f7f9fc !important; }
.smart-table tbody tr:nth-child(even) td.smart-fill-col { background-image: linear-gradient(0deg, rgba(248,250,252,.58), rgba(248,250,252,.58)) !important; }
.smart-table tbody tr:hover td.smart-fill-col { background: #f6f9ff !important; }
.smart-table-empty-cell { padding: 26px !important; }

/* SmartForm and settings — keep the same density as tables. */
.smart-form-card { padding: 16px; }
.smart-form-title strong { color: var(--text-1); font-size: 15px; }
.smart-form-title small,
.smart-form-field small,
.smart-form-check small { color: var(--text-2) !important; }
.smart-form-grid { gap: 12px; }
.smart-form-field { gap: 6px; color: var(--text-2); font-size: 12.5px; font-weight: 750; }
.smart-form-actions { border-top: 1px solid var(--line-1); padding-top: 12px; }
.tsh-settings-editor { overflow: hidden; }
.tsh-settings-editor-head,
.tsh-settings-footer {
    background: linear-gradient(180deg, #fff, #f8fafc) !important;
    border-color: var(--line-1) !important;
    border-radius: 0 !important;
}
.tsh-setting-row {
    border-color: var(--line-1) !important;
    background: #fff !important;
    border-radius: 0 !important;
}
.tsh-setting-row.is-dirty { background: #fffdf3 !important; }
.tsh-setting-tags span { background: #f8fafc !important; border-color: var(--line-1) !important; color: var(--text-2) !important; }

/* Relationship board and dashboard builder should look like the same product, not separate widgets. */
.tsh-relationship-board,
.tsh-dashboard-builder { position: relative; padding: 14px; }
.tsh-rel-header,
.tsh-dashboard-builder-head {
    margin: -14px -14px 12px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #fff, #f8fafc);
    border-bottom: 1px solid var(--line-1);
}
.tsh-rel-header strong,
.tsh-dashboard-builder-head strong { color: var(--text-1); font-size: 15px; }
.tsh-rel-header small,
.tsh-dashboard-builder-head small { color: var(--text-2); }
.tsh-rel-column,
.tsh-dashboard-palette,
.tsh-dashboard-widget,
.tsh-rel-node,
.tsh-rel-edge {
    border-color: var(--line-1) !important;
    border-radius: var(--r-sm) !important;
    box-shadow: var(--shadow-xs) !important;
}
.tsh-rel-column,
.tsh-dashboard-palette { background: #fbfdff !important; }
.tsh-rel-node,
.tsh-rel-edge,
.tsh-dashboard-widget { background: #fff !important; }
.tsh-rel-node:hover,
.tsh-dashboard-widget:hover { border-color: #b8cdf3 !important; background: #f6f9ff !important; }

/* Drawer/modal matching AutoHub density. */
.tsh-drawer-backdrop,
.tsh-modal-backdrop { background: rgba(13,22,41,.42) !important; }
.tsh-drawer-panel,
.tsh-modal-card {
    background: #fff !important;
    border-color: var(--line-1) !important;
    box-shadow: var(--shadow-lg) !important;
}
.tsh-drawer-panel header,
.tsh-modal-card header {
    background: linear-gradient(180deg, #fff, #f8fafc) !important;
    border-bottom: 1px solid var(--line-1) !important;
}
.tsh-drawer-body,
.tsh-modal-body { background: #f8fafc !important; }

/* Motion: subtle. Prevent the previous heavy flicker/skipping feel. */
[data-tsh-page-root] { transition: opacity 120ms ease, transform 120ms ease; }
[data-tsh-page-root].is-loading-next { opacity: .82 !important; transform: none !important; }
.smart-row-enter { animation: smartRowEnterSoft 120ms ease both !important; }
@keyframes smartRowEnterSoft { from { opacity: .72; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media (max-width: 900px) {
    .tsh-content { padding: 14px 12px 36px; }
    .smart-table-toolbar,
    .smart-pagination { align-items: stretch; flex-direction: column; }
    .smart-table-tools,
    .smart-page-controls,
    .smart-page-size { width: 100%; }
    .smart-search-wrap { min-width: 0; max-width: none; width: 100%; }
    .tsh-topbar-actions .tsh-top-button span { display: none; }
    .tsh-topbar-actions .tsh-top-button { width: 30px; padding: 0; }
}


/* Iter11 hotfix6: drawer-first CRUD UX, table row actions and details panels. */
.smart-toolbar-create { gap: 7px; }
.smart-toolbar-create .btn-ico { width: 14px; height: 14px; }
.smart-record-details { display: grid; gap: 8px; }
.smart-record-detail-row {
    display: grid;
    grid-template-columns: minmax(150px, 220px) 1fr;
    gap: 12px;
    align-items: start;
    padding: 10px 12px;
    border: 1px solid var(--line-1);
    background: #fff;
    border-radius: var(--r-sm);
}
.smart-record-detail-row > span { color: var(--text-2); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .025em; }
.smart-record-detail-row > strong { color: var(--text-1); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.smart-drawer-form-host .smart-form-card { border: 0 !important; box-shadow: none !important; padding: 0 !important; background: transparent !important; }
.tsh-confirm-body { display: grid; gap: 18px; }
.tsh-confirm-body p { color: var(--text-1); line-height: 1.55; }
.tsh-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ah-btn.danger { color: #b42318; border-color: #fecaca; background: #fff5f5; }
.ah-btn.danger:hover { background: #fee2e2; border-color: #fca5a5; }
@media (max-width: 760px) {
    .smart-record-detail-row { grid-template-columns: 1fr; }
}
