@import url('./public.css');

:root {
    --sidebar-width: 258px;
    --workspace-topbar: 88px;
}

.workspace-body { min-width: 320px; background: #f5f7fb; }
.workspace-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) 1fr; }
.workspace-sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 23px 18px; background: #111b31; color: #d4dceb; }
.workspace-brand { padding: 0 10px 24px; color: #fff; border-bottom: 1px solid #29344b; }.workspace-brand .brand-copy small { color: #7f8ba2; }
.workspace-nav { display: grid; gap: 5px; margin-top: 24px; }
.workspace-nav a { min-height: 47px; display: flex; align-items: center; gap: 13px; padding: 0 14px; border-radius: 11px; color: #aab5c9; font-size: 13px; font-weight: 650; transition: .2s ease; }
.workspace-nav a span { width: 22px; color: #74819a; text-align: center; font-size: 17px; }.workspace-nav a:hover { color: #fff; background: #1b2841; }.workspace-nav a.is-active { color: #fff; background: #2563eb; box-shadow: 0 12px 26px rgba(0,0,0,.18); }.workspace-nav a.is-active span { color: #fff; }
.sidebar-foot { margin-top: auto; display: flex; align-items: center; gap: 9px; padding: 15px 11px 2px; color: #78869e; font-size: 11px; }.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #20b486; box-shadow: 0 0 0 4px rgba(32,180,134,.12); }
.workspace-main { min-width: 0; }
.workspace-header { min-height: var(--workspace-topbar); display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 18px clamp(24px, 4vw, 54px); background: rgba(255,255,255,.88); border-bottom: 1px solid var(--color-line); backdrop-filter: blur(15px); }
.workspace-header h1 { margin: 3px 0 0; font-size: 25px; line-height: 1.2; letter-spacing: -.035em; }.workspace-header .eyebrow { font-size: 9px; }.workspace-header-actions { display: flex; align-items: center; gap: 10px; }.avatar { width: 43px; height: 43px; border-radius: 12px; color: #fff; background: var(--color-ink); font-weight: 800; cursor: pointer; }
.workspace-content { min-height: calc(100vh - var(--workspace-topbar)); padding: clamp(24px, 4vw, 54px); }
.workspace-empty { min-height: min(620px, calc(100vh - 196px)); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.workspace-empty h2 { max-width: 620px; margin: 13px 0 10px; font-size: clamp(27px, 3.2vw, 40px); line-height: 1.12; letter-spacing: -.04em; }.workspace-empty > p { max-width: 600px; margin: 0; color: var(--color-muted); }.empty-actions { margin-top: 25px; display: flex; gap: 10px; }
.empty-visual { width: 210px; height: 122px; position: relative; margin-bottom: 30px; border: 1px solid #dce5f2; border-radius: 18px; background: linear-gradient(135deg, #eff5ff, #fff); box-shadow: 0 18px 44px rgba(37,99,235,.1); }
.empty-visual::before { content: ""; position: absolute; left: 20px; right: 20px; top: 21px; height: 11px; border-radius: 5px; background: #dce8ff; }.empty-visual::after { content: ""; position: absolute; left: 20px; width: 76px; bottom: 18px; height: 50px; border-radius: 9px; background: #2563eb; opacity: .9; }
.empty-visual span { position: absolute; right: 20px; width: 72px; height: 11px; border-radius: 5px; background: #e3e8f0; }.empty-visual span:nth-child(1) { top: 54px; }.empty-visual span:nth-child(2) { top: 76px; width: 58px; }.empty-visual span:nth-child(3) { top: 98px; width: 65px; }
.empty-visual-admin::after { background: #20b486; }

@media (max-width: 840px) {
    .workspace-shell { grid-template-columns: 78px 1fr; }.workspace-sidebar { padding-inline: 10px; }.workspace-brand { justify-content: center; padding-inline: 0; }.workspace-brand .brand-copy, .workspace-nav a:not(.is-active)::after, .sidebar-foot span:last-child { display: none; }.workspace-nav a { justify-content: center; padding: 0; }.workspace-nav a span { width: auto; }.sidebar-foot { justify-content: center; }.workspace-header .button { display: none; }
}
@media (max-width: 560px) {
    .workspace-shell { display: block; }.workspace-sidebar { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; top: auto; width: 100%; height: 68px; padding: 8px 10px; }.workspace-brand, .sidebar-foot { display: none; }.workspace-nav { height: 100%; margin: 0; display: flex; justify-content: space-around; }.workspace-nav a { width: 48px; min-height: 48px; }.workspace-nav a:nth-child(n+5) { display: none; }.workspace-header { min-height: 76px; padding: 14px 18px; }.workspace-header h1 { font-size: 21px; }.workspace-content { min-height: calc(100vh - 76px); padding: 14px 14px 88px; }.workspace-empty { min-height: calc(100vh - 178px); padding: 34px 18px; }.empty-visual { transform: scale(.85); margin-bottom: 18px; }.empty-actions { width: 100%; display: grid; }.empty-actions .button { width: 100%; }
}