/*
 * Studio Admin compatibility layer for SHIREITO.
 * Design system: next-shadcn-admin-dashboard (radix-nova, MIT).
 * The PHP application keeps its server-rendered views and uses these tokens
 * and component mappings instead of loading the reference project's runtime.
 */

:root {
    --font-sans: Geist, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --font-size: 14px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;
    --radius: 10px;
    --radius-sm: 7px;
    --radius-lg: 12px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --background: #ffffff;
    --foreground: #18181b;
    --card: #ffffff;
    --card-foreground: #18181b;
    --popover: #ffffff;
    --popover-foreground: #18181b;
    --primary: #18181b;
    --primary-foreground: #fafafa;
    --primary-dk: #27272a;
    --primary-lt: #f4f4f5;
    --secondary: #f4f4f5;
    --secondary-foreground: #27272a;
    --muted: #f4f4f5;
    --muted-foreground: #71717a;
    --accent: #f4f4f5;
    --accent-foreground: #18181b;
    --destructive: #dc2626;
    --border: #e4e4e7;
    --input: #e4e4e7;
    --ring: #a1a1aa;
    --body-bg: var(--background);
    --bg-surface: var(--card);
    --bg-surface-secondary: var(--muted);
    --border-color: var(--border);
    --border-color-light: #f4f4f5;
    --border-translucent: rgba(24, 24, 27, .08);
    --text: var(--foreground);
    --text-secondary: #52525b;
    --text-muted: var(--muted-foreground);
    --text-disabled: #a1a1aa;
    --blue: #2563eb;
    --azure: #0284c7;
    --green: #16a34a;
    --lime: #65a30d;
    --yellow: #ca8a04;
    --orange: #ea580c;
    --red: var(--destructive);
    --pink: #db2777;
    --purple: #7c3aed;
    --indigo: #4f46e5;
    --cyan: #0891b2;
    --green-lt: #f0fdf4;
    --red-lt: #fef2f2;
    --yellow-lt: #fefce8;
    --blue-lt: #eff6ff;
    --azure-lt: #f0f9ff;
    --purple-lt: #f5f3ff;
    --cyan-lt: #ecfeff;
    --sidebar-bg: #fafafa;
    --sidebar-text: #71717a;
    --sidebar-text-hover: #18181b;
    --sidebar-text-active: #18181b;
    --sidebar-hover: #f4f4f5;
    --sidebar-active: #e4e4e7;
    --sidebar-border: #e4e4e7;
    --sidebar-w: 272px;
    --shadow: 0 1px 2px rgba(24, 24, 27, .04);
    --shadow-card: 0 1px 2px rgba(24, 24, 27, .04);
}

[data-theme="dark"] {
    --background: #18181b;
    --foreground: #fafafa;
    --card: #202023;
    --card-foreground: #fafafa;
    --popover: #27272a;
    --popover-foreground: #fafafa;
    --primary: #fafafa;
    --primary-foreground: #18181b;
    --primary-dk: #e4e4e7;
    --primary-lt: #27272a;
    --secondary: #27272a;
    --secondary-foreground: #fafafa;
    --muted: #27272a;
    --muted-foreground: #a1a1aa;
    --accent: #303034;
    --accent-foreground: #fafafa;
    --border: rgba(255, 255, 255, .11);
    --input: rgba(255, 255, 255, .16);
    --ring: #71717a;
    --body-bg: var(--background);
    --bg-surface: var(--card);
    --bg-surface-secondary: var(--muted);
    --border-color: var(--border);
    --border-color-light: rgba(255, 255, 255, .07);
    --border-translucent: rgba(255, 255, 255, .11);
    --text: var(--foreground);
    --text-secondary: #d4d4d8;
    --text-muted: var(--muted-foreground);
    --text-disabled: #71717a;
    --green-lt: rgba(22, 163, 74, .15);
    --red-lt: rgba(220, 38, 38, .16);
    --yellow-lt: rgba(202, 138, 4, .16);
    --blue-lt: rgba(37, 99, 235, .17);
    --azure-lt: rgba(2, 132, 199, .17);
    --purple-lt: rgba(124, 58, 237, .18);
    --cyan-lt: rgba(8, 145, 178, .17);
    --sidebar-bg: #202023;
    --sidebar-text: #a1a1aa;
    --sidebar-text-hover: #fafafa;
    --sidebar-text-active: #fafafa;
    --sidebar-hover: #27272a;
    --sidebar-active: #303034;
    --sidebar-border: rgba(255, 255, 255, .11);
    --shadow: 0 1px 2px rgba(0, 0, 0, .22);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .22);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { background: var(--background); font-family: var(--font-sans); }

body {
    margin: 0;
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: var(--font-size);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea { font: inherit; }

button { color: inherit; }

a { color: inherit; }

::selection { background: var(--primary); color: var(--primary-foreground); }

/* Application shell ------------------------------------------------------ */
.app-body { min-width: 320px; min-height: 100vh; background: var(--background); }

.sidebar {
    position: fixed;
    z-index: 100;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    width: var(--sidebar-w);
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--sidebar-border);
    background: var(--sidebar-bg);
    transition: width 180ms ease, transform 180ms ease;
}

.sidebar-brand {
    display: flex;
    min-height: 56px;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border-bottom: 1px solid var(--sidebar-border);
    color: var(--sidebar-text-active);
    text-decoration: none;
}

.sidebar-brand:hover { background: var(--sidebar-hover); text-decoration: none; }
.sidebar-brand .brand-mark { background: #AA0000; }
.brand-mark { border-radius: 8px; box-shadow: none; }
.brand-name { color: var(--sidebar-text-active); font-size: 14px; letter-spacing: -.01em; }
.brand-name small { color: var(--sidebar-text); font-size: 9px; letter-spacing: .12em; }

.sidebar-nav { flex: 1; padding: 10px 8px 16px; overflow-y: auto; }
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--border-color); }
.nav-group { margin: 0 0 12px; padding: 0; }
.nav-label { padding: 10px 10px 5px; color: var(--text-muted); font-size: 10px; font-weight: var(--font-weight-bold); letter-spacing: .07em; text-transform: uppercase; }

.nav-link {
    display: flex;
    min-height: 34px;
    align-items: center;
    gap: 10px;
    margin: 1px 0;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    color: var(--sidebar-text);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}

.nav-link .icon { width: 17px; height: 17px; opacity: .75; }
.nav-link:hover { background: var(--sidebar-hover); color: var(--sidebar-text-hover); text-decoration: none; }
.nav-link.active { background: var(--sidebar-active); color: var(--sidebar-text-active); }
.nav-link.active .icon { opacity: 1; }

.main { display: flex; min-width: 0; min-height: 100vh; margin-left: var(--sidebar-w); flex-direction: column; background: var(--background); transition: margin-left 180ms ease; }

.topbar {
    position: sticky;
    z-index: 90;
    top: 0;
    display: flex;
    min-height: 48px;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--background) 92%, transparent);
    backdrop-filter: blur(12px);
}

.topbar-left,
.topbar-right { display: flex; align-items: center; gap: 6px; }

.sidebar-toggle,
.tb-btn {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.sidebar-toggle svg,
.tb-btn svg { width: 18px; height: 18px; }
.sidebar-toggle:hover,
.tb-btn:hover { background: var(--accent); color: var(--accent-foreground); }
.breadcrumb { display: flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: 12px; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb .current { color: var(--foreground); font-weight: var(--font-weight-medium); }
.breadcrumb .sep { color: var(--text-disabled); }
.tb-btn .dot { width: 6px; height: 6px; border: 1.5px solid var(--background); background: var(--destructive); }
.tb-avatar { width: 28px; height: 28px; margin-left: 2px; border: 1px solid var(--border-color); background: var(--primary); color: var(--primary-foreground); }

.notification-popover {
    border-color: var(--border-color);
    border-radius: var(--radius);
    background: var(--popover);
    box-shadow: 0 12px 32px rgba(24, 24, 27, .14);
    color: var(--popover-foreground);
}

.page-wrapper { width: 100%; max-width: 1536px; margin: 0 auto; padding: 24px; }
.footer { display: flex; min-height: 48px; align-items: center; padding: 0 24px; border-top: 1px solid var(--border-color); color: var(--text-muted); font-size: 12px; }

.app-body.sidebar-rail { --sidebar-w: 68px; }
.app-body.sidebar-rail .sidebar-brand { justify-content: center; padding: 0; }
.app-body.sidebar-rail .brand-name,
.app-body.sidebar-rail .nav-label,
.app-body.sidebar-rail .nav-text { display: none; }
.app-body.sidebar-rail .nav-link { justify-content: center; padding: 7px; }

/* Shared shadcn-style primitives ---------------------------------------- */
.card,
.panel,
.calendar-page,
.cashflow-page,
.projects-page,
.analysis-page,
.hr-page,
.agents-page,
.workflows-page {
    border-color: var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: var(--shadow-card);
}

.primary-button,
.ghost-button,
.select-button,
.add-card-button,
.calendar-view-toggle button,
.cashflow-mode-tabs button,
.analysis-tabs button,
.hr-mode-tabs button,
.btn {
    min-height: 34px;
    border-color: var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: none;
    font-size: 12px;
    font-weight: var(--font-weight-medium);
}

.primary-button,
.btn-primary { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
.primary-button:hover,
.btn-primary:hover { border-color: var(--primary-dk); background: var(--primary-dk); color: var(--primary-foreground); }
.ghost-button,
.select-button,
.add-card-button { background: var(--background); color: var(--secondary-foreground); }
.ghost-button:hover,
.select-button:hover,
.add-card-button:hover { background: var(--accent); color: var(--accent-foreground); }
.icon-button { border-radius: var(--radius-sm); color: var(--text-muted); }
.icon-button:hover:not(:disabled) { background: var(--accent); color: var(--accent-foreground); }

.content-frame label,
.modal-card label { color: var(--foreground); font-size: 12px; }
.content-frame input:not([type="checkbox"]):not([type="radio"]),
.content-frame select,
.content-frame textarea,
.modal-card input:not([type="checkbox"]):not([type="radio"]),
.modal-card select,
.modal-card textarea {
    min-height: 36px;
    border-color: var(--input);
    border-radius: var(--radius-sm);
    background: var(--background);
    color: var(--foreground);
    box-shadow: 0 1px 2px rgba(24, 24, 27, .03);
}
.content-frame input:focus,
.content-frame select:focus,
.content-frame textarea:focus,
.modal-card input:focus,
.modal-card select:focus,
.modal-card textarea:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent); }
.checkbox-line input { accent-color: var(--primary); }

.page-title { margin-bottom: 24px; }
.page-title h1 { color: var(--foreground); font-size: 24px; font-weight: var(--font-weight-bold); letter-spacing: -.03em; }
.page-title nav { color: var(--muted-foreground); font-size: 12px; }
.page-title nav span + span::before { color: var(--text-disabled); }

.panel > header,
.panel-table > header,
.calendar-upcoming-card > header,
.cashflow-analysis-panel > header,
.cashflow-insights-panel > header,
.cashflow-report-table-panel > header,
.hr-offers-panel > header { min-height: 48px; border-color: var(--border-color); }
.panel h2,
.panel h3,
.calendar-page h2,
.cashflow-page h2,
.projects-page h2,
.analysis-page h2,
.hr-page h2 { color: var(--foreground); font-size: 13px; }

.row,
.dashboard-grid,
.placeholder-grid { display: grid; gap: 16px; }
.row.col-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dashboard-grid,
.placeholder-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.metric-card { min-height: 142px; border-color: var(--border-color); background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 4%, var(--card)), var(--card) 56%); box-shadow: var(--shadow-card); }
.metric-icon { width: 30px; height: 30px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--muted); color: var(--muted-foreground); }
.metric-copy span,
.metric-copy small { color: var(--muted-foreground); }
.metric-copy strong { color: var(--foreground); font-size: 26px; letter-spacing: -.035em; }
.metric-delta { border-radius: 999px; background: var(--green-lt); color: var(--green); padding: 2px 7px; }

table,
.panel table,
.projects-table,
.analysis-sources-table,
.cashflow-report-table,
.cashflow-accounts-table,
.hr-offers-table { color: var(--foreground); }
.panel th,
.projects-table th,
.analysis-sources-table th,
.cashflow-report-table th,
.cashflow-accounts-table th,
.hr-offers-table th { border-color: var(--border-color); background: var(--muted); color: var(--muted-foreground); }
.panel td,
.projects-table td,
.analysis-sources-table td,
.cashflow-report-table td,
.cashflow-accounts-table td,
.hr-offers-table td { border-color: var(--border-color-light); color: var(--text-secondary); }
.panel tbody tr:hover,
.projects-table tbody tr:hover,
.analysis-sources-table tbody tr:hover,
.cashflow-report-table tbody tr:hover,
.cashflow-accounts-table tbody tr:hover,
.hr-offers-table tbody tr:hover { background: var(--muted); }

.tag,
.priority,
.status-badge { border-radius: 999px; font-weight: var(--font-weight-medium); }

.kanban-column,
.hr-kanban-column,
.analysis-column { border-color: var(--border-color); border-radius: var(--radius-lg); background: var(--muted); }
.task-card,
.hr-kanban-card,
.analysis-card { border-color: var(--border-color); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.add-card-button { border-color: var(--border-color); background: transparent; }

.calendar-surface,
.calendar-inspector > section,
.cashflow-balance-panel,
.cashflow-analysis-panel,
.cashflow-insights-panel,
.cashflow-report-table-panel { border-color: var(--border-color); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-card); }
.calendar-weekdays,
.calendar-agenda-heading { background: var(--muted); }
.calendar-day { border-color: var(--border-color-light); background: var(--card); }
.calendar-day.is-outside-month { background: color-mix(in srgb, var(--muted) 70%, var(--card)); }

/* Modal and login surfaces ---------------------------------------------- */
.modal-backdrop { position: fixed; z-index: 1200; inset: 0; background: rgba(24, 24, 27, .48); backdrop-filter: blur(4px); }
.modal-card { border-color: var(--border-color); border-radius: var(--radius-lg); background: var(--popover); box-shadow: 0 24px 56px rgba(24, 24, 27, .22); }
.modal-card > footer { border-color: var(--border-color); }

.login-body.auth-page { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: #18181b; }
.login-body.auth-page::before { inset: 0; background: radial-gradient(circle at 15% 16%, rgba(255, 255, 255, .08), transparent 30%), radial-gradient(circle at 85% 84%, rgba(170, 0, 0, .22), transparent 34%); mask-image: none; }
.login-body.auth-page::after { width: min(70vw, 900px); height: min(70vw, 900px); border-color: rgba(255, 255, 255, .08); box-shadow: 0 0 0 80px rgba(255, 255, 255, .018), 0 0 80px rgba(170, 0, 0, .12); }
.login-shell { width: min(100%, 390px); }
.auth-card.login-card { border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; background: #202023; box-shadow: 0 24px 56px rgba(0, 0, 0, .3); }
.login-card .auth-title { color: #fafafa; font-size: 26px; font-weight: 600; letter-spacing: -.03em; }
.login-card .auth-subtitle,
.auth-card .brand-name small { color: #a1a1aa; }
.auth-card .brand-name { color: #fafafa; }
.login-card .form-group { color: #e4e4e7; font-size: 12px; }
.login-card .input-wrap input { border-color: rgba(255, 255, 255, .14); background: #18181b; color: #fafafa; box-shadow: none; }
.login-card .input-wrap > svg,
.login-card .icon-button { color: #a1a1aa; }
.login-card .checkbox-line { color: #d4d4d8; }
.login-submit { border-color: #880000; background: #AA0000; color: #fff; }
.login-submit:hover { border-color: #770000; background: #880000; }

/* Responsive shell ------------------------------------------------------- */
@media (max-width: 1100px) {
    .row.col-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.is-open { box-shadow: 16px 0 40px rgba(24, 24, 27, .16); transform: translateX(0); }
    .main { margin-left: 0; }
    .sidebar-backdrop { position: fixed; z-index: 95; inset: 0; display: block; background: rgba(24, 24, 27, .38); backdrop-filter: blur(2px); }
    .topbar { padding: 0 16px; }
    .page-wrapper { padding: 20px 16px; }
}

@media (max-width: 640px) {
    .topbar { min-height: 48px; padding: 0 12px; }
    .breadcrumb { display: none; }
    .page-wrapper { padding: 16px 12px; }
    .footer { padding: 0 12px; }
    .row.col-4 { grid-template-columns: 1fr; }
    .page-title h1 { font-size: 21px; }
    .auth-card.login-card { padding: 28px 22px; }
}

/* Studio component structure ------------------------------------------------
 *
 * These rules style the server-rendered PHP templates with the same component
 * boundaries as the reference dashboard: sidebar/header/page/KPI/card.  The
 * legacy class names stay in place only as behaviour hooks for app.js.
 */
.studio-app { min-height: 100dvh; background: var(--background); }

.studio-sidebar { width: var(--sidebar-w); }
.studio-sidebar-header { flex: 0 0 56px; border-bottom: 1px solid var(--sidebar-border); }
.studio-sidebar .sidebar-brand { min-height: 55px; border: 0; }
.studio-sidebar-content { padding: 12px 8px 24px; }
.studio-nav-group { display: block; margin-bottom: 16px; }
.studio-nav-group:last-child { margin-bottom: 0; }
.studio-nav-group .nav-label { padding: 10px 10px 6px; }
.studio-nav-group .nav-link { min-height: 36px; margin: 2px 0; padding: 8px 10px; }
.studio-nav-group .nav-link.active { background: var(--sidebar-active); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent); }

.studio-main { background: var(--background); }
.studio-topbar { min-height: 56px; padding: 0 24px; background: color-mix(in srgb, var(--background) 86%, transparent); }
.studio-header-separator { width: 1px; height: 16px; margin: 0 8px; background: var(--border); }
.studio-topbar .tb-btn,
.studio-topbar .sidebar-toggle { width: 32px; height: 32px; }
.studio-topbar .tb-avatar { width: 30px; height: 30px; }
.studio-topbar .breadcrumb { gap: 8px; font-size: 12px; }

.studio-page-content { max-width: none; padding: 28px 28px 40px; }
.studio-page-heading { align-items: flex-end; margin-bottom: 28px; }
.studio-page-heading-copy { display: grid; gap: 7px; }
.studio-page-heading h1 { font-size: 25px; font-weight: 600; letter-spacing: -.035em; text-transform: none; }
.studio-page-heading nav { margin: 0; font-size: 12px; }
.studio-page-heading .primary-button { min-height: 36px; padding: 0 13px; }

.studio-kpi-grid { gap: 16px; margin-bottom: 16px; }
.studio-kpi-card {
    display: grid;
    min-height: 148px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: none;
}
.studio-kpi-card::before { display: none; }
.studio-kpi-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.studio-kpi-header > span { color: var(--muted-foreground); font-size: 12px; font-weight: 500; }
.studio-kpi-card .metric-icon { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 7px; background: var(--muted); color: var(--muted-foreground); }
.studio-kpi-card .metric-icon svg { width: 16px; height: 16px; }
.studio-kpi-card .metric-copy { align-self: end; gap: 3px; margin: 14px 0 0; }
.studio-kpi-card .metric-copy strong { font-size: 28px; font-weight: 600; letter-spacing: -.045em; }
.studio-kpi-card .metric-copy small { max-width: calc(100% - 84px); color: var(--muted-foreground); font-size: 11px; }
.studio-kpi-card .metric-delta { right: 18px; top: auto; bottom: 21px; }
.studio-kpi-card .sparkline { right: 15px; bottom: 12px; opacity: .6; }
.studio-kpi-card.tone-blue .metric-icon { background: var(--blue-lt); color: var(--blue); }
.studio-kpi-card.tone-green .metric-icon { background: var(--green-lt); color: var(--green); }
.studio-kpi-card.tone-amber .metric-icon { background: var(--yellow-lt); color: var(--yellow); }

.studio-page-content .panel,
.studio-page-content .calendar-page,
.studio-page-content .cashflow-page,
.studio-page-content .projects-page,
.studio-page-content .analysis-page,
.studio-page-content .hr-page,
.studio-page-content .agents-page,
.studio-page-content .workflows-page {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: none;
}
.studio-page-content .panel > header,
.studio-page-content .panel-table > header,
.studio-page-content .calendar-upcoming-card > header,
.studio-page-content .cashflow-analysis-panel > header,
.studio-page-content .cashflow-insights-panel > header,
.studio-page-content .cashflow-report-table-panel > header,
.studio-page-content .hr-offers-panel > header {
    min-height: 54px;
    padding: 14px 18px;
    border-color: var(--border);
}
.studio-page-content .panel h2,
.studio-page-content .calendar-page h2,
.studio-page-content .cashflow-page h2,
.studio-page-content .projects-page h2,
.studio-page-content .analysis-page h2,
.studio-page-content .hr-page h2 { font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.studio-page-content .panel header > a,
.studio-page-content .calendar-page header > a,
.studio-page-content .cashflow-page header > a { color: var(--foreground); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 4px; }
.studio-page-content .panel header > a:hover,
.studio-page-content .calendar-page header > a:hover,
.studio-page-content .cashflow-page header > a:hover { text-decoration-color: currentColor; }

.studio-page-content .primary-button,
.studio-page-content .ghost-button,
.studio-page-content .select-button,
.studio-page-content .add-card-button,
.studio-page-content .calendar-view-toggle button,
.studio-page-content .cashflow-mode-tabs button,
.studio-page-content .analysis-tabs button,
.studio-page-content .hr-mode-tabs button {
    min-height: 34px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
}
.studio-page-content .primary-button { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
.studio-page-content .primary-button:hover { border-color: var(--primary-dk); background: var(--primary-dk); }
.studio-page-content .ghost-button,
.studio-page-content .select-button,
.studio-page-content .add-card-button { border-color: var(--border); background: var(--background); color: var(--foreground); }
.studio-page-content .ghost-button:hover,
.studio-page-content .select-button:hover,
.studio-page-content .add-card-button:hover { border-color: var(--border); background: var(--accent); color: var(--accent-foreground); }

.studio-page-content input:not([type="checkbox"]):not([type="radio"]),
.studio-page-content select,
.studio-page-content textarea,
.modal-card input:not([type="checkbox"]):not([type="radio"]),
.modal-card select,
.modal-card textarea { border-color: var(--input); background: var(--background); box-shadow: none; }
.studio-page-content input:focus,
.studio-page-content select:focus,
.studio-page-content textarea:focus,
.modal-card input:focus,
.modal-card select:focus,
.modal-card textarea:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 20%, transparent); }

.studio-page-content .panel th,
.studio-page-content .projects-table th,
.studio-page-content .analysis-sources-table th,
.studio-page-content .cashflow-report-table th,
.studio-page-content .cashflow-accounts-table th,
.studio-page-content .hr-offers-table th { height: 38px; background: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .045em; }
.studio-page-content .panel td,
.studio-page-content .projects-table td,
.studio-page-content .analysis-sources-table td,
.studio-page-content .cashflow-report-table td,
.studio-page-content .cashflow-accounts-table td,
.studio-page-content .hr-offers-table td { height: 48px; padding: 10px 14px; }
.studio-page-content .status-badge,
.studio-page-content .priority,
.studio-page-content .tag,
.studio-page-content .analysis-chip { min-height: 22px; border-radius: 999px; font-size: 10px; }

.studio-page-content .workflow-toolbar,
.studio-page-content .hr-toolbar,
.studio-page-content .projects-toolbar,
.studio-page-content .analysis-toolbar,
.studio-page-content .cashflow-report-toolbar,
.studio-page-content .cashflow-balances-toolbar { padding: 14px 18px; border-color: var(--border); background: color-mix(in srgb, var(--card) 94%, var(--muted)); }
.studio-page-content .kanban-board,
.studio-page-content .hr-kanban-board,
.studio-page-content .analysis-board { gap: 16px; padding: 18px; }
.studio-page-content .kanban-column,
.studio-page-content .hr-kanban-column,
.studio-page-content .analysis-column { border-color: var(--border); border-radius: var(--radius-lg); background: var(--muted); box-shadow: none; }
.studio-page-content .kanban-column > header,
.studio-page-content .hr-kanban-column > header,
.studio-page-content .analysis-column > header { min-height: 48px; padding: 11px 12px; border-color: var(--border); }
.studio-page-content .task-card,
.studio-page-content .hr-kanban-card,
.studio-page-content .analysis-card { border-color: var(--border); border-radius: 8px; background: var(--card); box-shadow: 0 1px 2px rgba(24, 24, 27, .04); }
.studio-page-content .task-card:hover,
.studio-page-content .hr-kanban-card:hover,
.studio-page-content .analysis-card:hover { border-color: var(--ring); }
.studio-page-content .add-card-button { margin: 0 10px 10px; justify-content: flex-start; border-style: dashed; background: transparent; }

.studio-page-content .calendar-toolbar { min-height: 64px; padding: 14px 18px; border-color: var(--border); }
.studio-page-content .calendar-workspace { gap: 18px; padding: 18px; }
.studio-page-content .calendar-surface,
.studio-page-content .calendar-inspector > section { border-color: var(--border); border-radius: 8px; box-shadow: none; }
.studio-page-content .calendar-weekdays,
.studio-page-content .calendar-agenda-heading { background: var(--muted); }
.studio-page-content .calendar-day { min-height: 128px; background: var(--card); }
.studio-page-content .calendar-date { width: 32px; height: 32px; font-size: 14px; font-weight: 600; }

.modal-backdrop { background: rgba(9, 9, 11, .54); }
.modal-card { border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 24px 64px rgba(0, 0, 0, .28); }
.modal-card > header { min-height: 62px; padding: 16px 20px; border-color: var(--border); }
.modal-card > footer { min-height: 64px; padding: 14px 20px; border-color: var(--border); }
.modal-card.account-modal .account-modal-header { align-items: flex-start; }

.studio-auth-page { padding: 16px; background: #18181b; }
.studio-auth-shell { width: min(100%, 420px); }
.studio-auth-card { padding: 34px; }
.studio-auth-brand { margin-bottom: 34px; }
.studio-auth-heading { display: grid; gap: 7px; margin-bottom: 28px; }
.studio-auth-heading > p:first-child { margin: 0; color: #a1a1aa; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.studio-auth-heading .auth-title { margin: 0; font-size: 28px; }
.studio-auth-heading .auth-subtitle { margin: 0; line-height: 1.55; }
.studio-auth-card .form-group { gap: 8px; margin-bottom: 18px; }
.studio-auth-card .auth-actions { margin: 0 0 18px; }
.studio-auth-card .login-submit { min-height: 38px; }

@media (max-width: 900px) {
    .studio-page-content { padding: 20px 16px 32px; }
    .studio-topbar { padding: 0 16px; }
}

@media (max-width: 640px) {
    .studio-page-heading { align-items: flex-start; flex-direction: column; margin-bottom: 20px; }
    .studio-page-heading .primary-button { width: 100%; }
    .studio-page-content { padding: 18px 12px 28px; }
    .studio-topbar { padding: 0 12px; }
    .studio-header-separator { display: none; }
    .studio-auth-card { padding: 28px 22px; }
}