:root{
  --red:#e11d2e;--red-dark:#be123c;--red-soft:#fff1f2;
  --navy:#111827;--navy-2:#0b1220;--ink:#0f172a;--muted:#64748b;
  --bg:#f4f7fb;--surface:#fff;--surface-2:#f8fafc;--line:#e8edf4;
  --green:#16a34a;--blue:#2563eb;--amber:#d97706;--violet:#7c3aed;
  --shadow:0 10px 30px rgba(15,23,42,.055);--shadow-lg:0 24px 60px rgba(15,23,42,.10);
  --r-sm:12px;--r:18px;--r-lg:24px;--sidebar:272px;--sidebar-collapsed:86px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}html,body{margin:0;min-height:100%}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit}button,input,select{font:inherit}button{cursor:pointer}svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Login / guest compatibility */
.guest-body{min-height:100vh}.login-screen{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 18% 15%,rgba(225,29,46,.18),transparent 32%),linear-gradient(145deg,#0b1220,#1f1720)}
.login-card{width:min(440px,100%);background:rgba(255,255,255,.98);border:1px solid rgba(255,255,255,.7);border-radius:28px;padding:34px;box-shadow:0 30px 80px rgba(0,0,0,.24)}
.login-brand{display:flex;align-items:center;gap:13px;margin-bottom:28px}.login-brand strong{display:block;font-size:19px}.login-brand span{display:block;margin-top:3px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.brand-mark{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;color:#fff;font-weight:800;background:linear-gradient(135deg,#f43f5e,#d71920);box-shadow:0 14px 30px rgba(225,29,46,.28)}
.login-heading h1{margin:0;font-size:31px;letter-spacing:-.045em}.login-heading p{color:var(--muted);line-height:1.6;margin:8px 0 22px}.login-footnote{text-align:center;color:var(--muted);font-size:11px;margin-top:18px}.form-stack{display:grid;gap:16px}.form-group label{display:block;margin-bottom:7px;font-size:12px;font-weight:800}.form-group input{width:100%;border:1px solid var(--line);border-radius:15px;padding:13px 14px;outline:none;background:#fff}.form-group input:focus{border-color:#fda4af;box-shadow:0 0 0 4px var(--red-soft)}
.alert{border-radius:14px;padding:12px 14px;margin:0 0 16px;font-size:13px;font-weight:700}.alert-success{background:#ecfdf5;color:#166534;border:1px solid #bbf7d0}.alert-error{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}

/* Buttons */
.btn{height:42px;border:1px solid transparent;border-radius:13px;padding:0 15px;font-weight:700;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;transition:.18s ease}.btn svg{width:17px;height:17px}.btn-primary{background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;box-shadow:0 10px 24px rgba(225,29,46,.20)}.btn-soft{background:#fff;border-color:var(--line);color:var(--ink)}.btn-soft:hover{border-color:#cbd5e1;background:#f8fafc}.btn-block{width:100%}.icon-btn{width:38px;height:38px;border:0;border-radius:12px;display:grid;place-items:center;background:transparent;color:inherit}.icon-btn:hover{background:rgba(148,163,184,.12)}

/* Shell */
.app-shell{min-height:100vh;display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);transition:grid-template-columns .22s ease}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);z-index:50;display:flex;flex-direction:column;padding:18px 14px;background:linear-gradient(180deg,#0c1423 0%,#111827 62%,#231014 100%);color:#fff;border-right:1px solid rgba(255,255,255,.06);overflow-y:auto;overflow-x:hidden;transition:width .22s ease,transform .24s ease}.main-content{grid-column:2;min-width:0;padding:0 28px 34px;transition:margin .22s ease}.sidebar-collapsed .app-shell{grid-template-columns:var(--sidebar-collapsed) minmax(0,1fr)}.sidebar-collapsed .sidebar{width:var(--sidebar-collapsed)}

.sidebar-head{min-height:62px;display:flex;align-items:center;gap:7px;padding:0 4px 14px;border-bottom:1px solid rgba(255,255,255,.08)}.brand{min-width:0;flex:1;display:flex;align-items:center;gap:11px;text-decoration:none}.brand-copy{min-width:0}.brand-copy strong{display:block;font-size:15px}.brand-copy small{display:block;margin-top:3px;color:#94a3b8;font-size:10px;white-space:nowrap}.sidebar-collapse-btn{color:#94a3b8;flex:0 0 auto}.sidebar-close-btn{display:none}.sidebar-collapse-btn svg{transition:transform .2s ease}.sidebar-collapsed .sidebar-collapse-btn svg{transform:rotate(180deg)}
.nav-section{margin:20px 10px 8px;color:#64748b;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}.nav-list{display:grid;gap:5px}.nav-item{position:relative;display:flex;align-items:center;gap:12px;min-height:46px;padding:0 12px;border-radius:14px;color:#cbd5e1;text-decoration:none;font-size:13px;font-weight:650;white-space:nowrap;transition:.16s ease}.nav-item:hover{background:rgba(255,255,255,.065);color:#fff}.nav-item.active{background:linear-gradient(90deg,rgba(225,29,46,.16),rgba(255,255,255,.075));color:#fff}.nav-item.active:before{content:"";position:absolute;left:-3px;top:10px;bottom:10px;width:3px;border-radius:999px;background:#fb3850;box-shadow:0 0 16px rgba(251,56,80,.65)}.nav-icon{width:22px;height:22px;display:grid;place-items:center;flex:0 0 22px;color:#94a3b8}.nav-item.active .nav-icon,.nav-item:hover .nav-icon{color:#fff}.nav-icon svg{width:18px;height:18px}.sidebar-spacer{flex:1;min-height:20px}
.workspace-note{display:flex;align-items:center;gap:10px;margin:10px 2px;padding:12px;border-radius:15px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.045)}.workspace-note-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,#fb7185,#e11d48);font-weight:800;flex:0 0 32px}.workspace-note-copy{min-width:0}.workspace-note-copy strong,.workspace-note-copy small{display:block}.workspace-note-copy strong{font-size:11px}.workspace-note-copy small{margin-top:3px;color:#94a3b8;font-size:9px;line-height:1.4}
.sidebar-user{display:flex;align-items:center;gap:10px;padding:10px 8px;margin-top:4px;border-radius:15px;background:rgba(0,0,0,.12)}.avatar{width:36px;height:36px;display:grid;place-items:center;flex:0 0 36px;border-radius:50%;background:linear-gradient(135deg,#f43f5e,#be123c);font-size:10px;font-weight:800}.sidebar-user-copy{min-width:0;flex:1}.sidebar-user-copy strong,.sidebar-user-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-user-copy strong{font-size:11px}.sidebar-user-copy small{margin-top:3px;color:#94a3b8;font-size:9px}.sidebar-logout .icon-btn{color:#94a3b8;width:34px;height:34px}.sidebar-logout svg{width:17px;height:17px}
.sidebar-collapsed .brand-copy,.sidebar-collapsed .nav-label,.sidebar-collapsed .nav-section,.sidebar-collapsed .workspace-note-copy,.sidebar-collapsed .sidebar-user-copy,.sidebar-collapsed .sidebar-logout{display:none}.sidebar-collapsed .sidebar-head{justify-content:center}.sidebar-collapsed .brand{flex:0 0 auto}.sidebar-collapsed .sidebar-collapse-btn{position:absolute;right:5px;top:31px;width:24px;height:24px;background:#1f2937}.sidebar-collapsed .nav-item{justify-content:center;padding:0}.sidebar-collapsed .workspace-note{justify-content:center;padding:10px}.sidebar-collapsed .sidebar-user{justify-content:center;padding:10px}.sidebar-collapsed .nav-section+nav{margin-top:18px}

/* Topbar */
.topbar{position:sticky;top:0;z-index:30;min-height:94px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 0;background:rgba(244,247,251,.87);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.topbar-left{display:flex;align-items:center;gap:12px;min-width:0}.page-title-wrap{min-width:0}.page-kicker{margin-bottom:5px;color:var(--red);font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.topbar h1{margin:0;font-size:clamp(24px,2.5vw,34px);line-height:1.12;letter-spacing:-.045em}.topbar p{margin:6px 0 0;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:720px}.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-shrink:0}.role-chip{height:36px;display:inline-flex;align-items:center;gap:7px;padding:0 11px;border:1px solid #ffe4e6;border-radius:999px;background:#fff7f7;color:#9f1239;font-size:10px;font-weight:800}.role-dot{width:6px;height:6px;border-radius:50%;background:#f43f5e}.mobile-menu-btn{display:none;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.top-search{width:min(330px,31vw);height:42px;display:flex;align-items:center;gap:8px;padding:0 13px;border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:0 4px 18px rgba(15,23,42,.035)}.top-search svg{width:17px;height:17px;color:#94a3b8}.top-search input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:12px}.top-search input::placeholder{color:#94a3b8}
.page-content{max-width:1720px;margin:0 auto}.mobile-overlay{position:fixed;inset:0;z-index:45;background:rgba(2,6,23,.55);backdrop-filter:blur(3px)}

/* Welcome */
.welcome-panel{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.48fr) minmax(300px,.72fr);gap:22px;margin-bottom:18px;padding:26px;border:1px solid rgba(255,255,255,.85);border-radius:var(--r-lg);background:linear-gradient(135deg,#fff 0%,#fff9fa 55%,#f6f8fc 100%);box-shadow:var(--shadow)}.welcome-panel:before{content:"";position:absolute;right:-120px;top:-150px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(225,29,46,.11),transparent 68%);pointer-events:none}.welcome-copy{position:relative;z-index:1}.welcome-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #ffe4e6;border-radius:999px;background:#fff;color:#9f1239;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.welcome-badge span{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.10)}.welcome-copy h2{max-width:750px;margin:16px 0 8px;font-size:clamp(26px,3vw,40px);line-height:1.06;letter-spacing:-.052em}.welcome-copy>p{max-width:720px;margin:0;color:var(--muted);font-size:13px;line-height:1.65}.brand-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px;max-width:760px}.brand-company{height:62px;display:flex;align-items:center;justify-content:center;padding:10px 13px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.82)}.brand-company img{display:block;max-width:100%;max-height:38px;object-fit:contain}.welcome-insight{position:relative;z-index:1;padding:18px;border:1px solid #e8edf4;border-radius:20px;background:rgba(255,255,255,.83);box-shadow:0 10px 28px rgba(15,23,42,.04)}.insight-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.mini-label{display:block;color:#94a3b8;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}.insight-title-row h3,.surface-head h3{margin:4px 0 0;font-size:16px;letter-spacing:-.025em}.live-pill,.card-chip{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border-radius:999px;padding:7px 9px;background:#f0fdf4;color:#15803d;font-size:9px;font-weight:800}.live-pill i{width:6px;height:6px;border-radius:50%;background:#22c55e}.pulse-list{display:grid;gap:9px;margin-top:16px}.pulse-item{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:center;padding:10px;border:1px solid #eef2f7;border-radius:14px;background:#fff}.pulse-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:11px}.pulse-icon svg{width:17px;height:17px}.pulse-red{color:#be123c;background:#fff1f2}.pulse-amber{color:#b45309;background:#fffbeb}.pulse-blue{color:#1d4ed8;background:#eff6ff}.pulse-item strong,.pulse-item small{display:block}.pulse-item strong{font-size:11px}.pulse-item small{margin-top:3px;color:var(--muted);font-size:9px;line-height:1.4}

/* Metrics */
.metric-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:18px}.metric-card{min-width:0;min-height:146px;display:block;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);text-decoration:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.metric-card:hover{transform:translateY(-2px);border-color:#d8e0ea;box-shadow:0 14px 36px rgba(15,23,42,.08)}.metric-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.metric-card-icon,.quick-icon{width:35px;height:35px;display:grid;place-items:center;border-radius:11px}.metric-card-icon svg,.quick-icon svg{width:17px;height:17px}.metric-trend{padding:5px 7px;border-radius:999px;background:#f8fafc;color:#64748b;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.metric-card>strong{display:block;margin:15px 0 3px;font-size:27px;line-height:1.05;letter-spacing:-.045em}.metric-money>strong{font-size:clamp(15px,1.15vw,20px);overflow-wrap:anywhere}.metric-card>span{display:block;font-size:11px;font-weight:750}.metric-card>small{display:block;margin-top:4px;color:var(--muted);font-size:9px;line-height:1.4}.icon-slate{color:#475569;background:#f1f5f9}.icon-blue{color:#1d4ed8;background:#eff6ff}.icon-red{color:#be123c;background:#fff1f2}.icon-amber{color:#b45309;background:#fffbeb}.icon-emerald{color:#047857;background:#ecfdf5}.icon-violet{color:#6d28d9;background:#f5f3ff}.trend-blue{color:#1d4ed8;background:#eff6ff}.trend-red{color:#be123c;background:#fff1f2}.trend-amber{color:#b45309;background:#fffbeb}.trend-green{color:#15803d;background:#f0fdf4}.trend-violet{color:#6d28d9;background:#f5f3ff}.rp-icon{font-size:10px;font-weight:800}.metric-link{position:relative}.metric-link:after{content:"→";position:absolute;right:14px;bottom:13px;color:#94a3b8;font-size:13px}

/* Surfaces */
.dashboard-main-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(320px,.65fr);gap:16px;align-items:start}.surface-card{overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--shadow)}.surface-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--line)}.surface-head p{margin:5px 0 0;color:var(--muted);font-size:10px;line-height:1.5}.compact-head{align-items:center}.card-chip{background:#f8fafc;color:#64748b}.filter-bar{display:flex;align-items:center;gap:8px}.select-wrap{height:38px;display:flex;align-items:center;gap:7px;padding:0 10px;border:1px solid var(--line);border-radius:11px;background:#fff}.select-wrap svg{width:15px;height:15px;color:#94a3b8}.select-wrap select{max-width:200px;border:0;outline:0;background:transparent;color:#334155;font-size:10px;font-weight:700}.reset-filter{padding:9px 10px;border-radius:10px;background:#fff1f2;color:#be123c;text-decoration:none;font-size:9px;font-weight:800}.responsive-table-wrap{width:100%;overflow:auto}.responsive-table{width:100%;min-width:780px;border-collapse:collapse}.responsive-table th{padding:12px 16px;border-bottom:1px solid var(--line);background:#fafbfc;color:#94a3b8;text-align:left;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.responsive-table td{padding:13px 16px;border-bottom:1px solid #eef2f6;vertical-align:middle;font-size:11px}.responsive-table tbody tr:last-child td{border-bottom:0}.responsive-table tbody tr:hover{background:#fcfdff}.project-cell{display:flex;align-items:center;gap:10px;min-width:250px}.project-monogram{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,#fff1f2,#f8fafc);color:#be123c;font-size:8px;font-weight:800;border:1px solid #ffe4e6}.project-code,.project-code-text{display:block;color:#0f172a;font-size:11px;font-weight:800;text-decoration:none}.project-code:hover{color:var(--red)}.project-cell small,.deadline-cell small{display:block;margin-top:3px;color:var(--muted);font-size:9px;line-height:1.35}.status-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:999px;font-size:9px;font-weight:800;white-space:nowrap}.status-pill i{width:5px;height:5px;border-radius:50%;background:currentColor}.status-running{color:#1d4ed8;background:#eff6ff}.status-overdue{color:#be123c;background:#fff1f2}.deadline-cell strong{display:block;font-size:10px}.text-danger{color:#dc2626!important}.text-green{color:#15803d!important}.team-cell{display:flex;align-items:center;gap:7px;min-width:120px}.team-avatar{width:28px;height:28px;display:grid;place-items:center;flex:0 0 28px;border-radius:50%;background:#111827;color:#fff;font-size:8px;font-weight:800}.team-cell>span:last-child{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.progress-meta{display:flex;justify-content:flex-end;margin-bottom:5px;color:#475569;font-size:9px;font-weight:800}.progress-track{width:100%;min-width:100px;height:6px;overflow:hidden;border-radius:999px;background:#edf2f7}.progress-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f43f5e,#fb923c)}.empty-state{display:flex;align-items:center;justify-content:center;gap:8px;padding:40px;color:var(--muted)}.empty-state span{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#ecfdf5;color:#15803d}.empty-state strong{font-size:11px}.table-footer{min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--line);color:var(--muted);font-size:9px;font-weight:650}.pager{display:flex;align-items:center;gap:6px}.pager-btn,.pager-current{min-width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:#fff;text-decoration:none;font-size:9px;font-weight:800}.pager-current{padding:0 10px;background:#111827;border-color:#111827;color:#fff}.pager-btn.disabled{color:#cbd5e1;background:#f8fafc}
.side-stack{display:grid;gap:16px}.compact-card{min-width:0}.timeline-list{display:grid;gap:2px;padding:10px 16px 16px}.timeline-item{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid #f0f3f7}.timeline-item:last-child{border-bottom:0}.timeline-marker{width:28px;height:28px;display:grid;place-items:center;border-radius:10px;background:#f1f5f9;color:#475569;font-size:8px;font-weight:800}.timeline-danger{color:#be123c;background:#fff1f2}.timeline-warning{color:#b45309;background:#fffbeb}.timeline-info{color:#1d4ed8;background:#eff6ff}.timeline-finance,.timeline-success{color:#15803d;background:#f0fdf4}.timeline-item strong,.timeline-item small{display:block}.timeline-item strong{font-size:10px}.timeline-item small{margin-top:3px;color:var(--muted);font-size:9px;line-height:1.45}.finance-list{padding:4px 16px 14px}.finance-list>div{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #f0f3f7}.finance-list>div:last-child{border-bottom:0}.finance-list span{color:var(--muted);font-size:9px}.finance-list strong{text-align:right;font-size:10px}.snapshot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:14px 16px 16px}.snapshot-grid div{padding:12px;border:1px solid #eef2f7;border-radius:13px;background:#fbfcfe}.snapshot-grid strong,.snapshot-grid span{display:block}.snapshot-grid strong{font-size:19px;letter-spacing:-.04em}.snapshot-grid span{margin-top:3px;color:var(--muted);font-size:8px}
.action-card{margin-top:16px}.quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:14px 16px 16px}.quick-grid a{display:grid;grid-template-columns:36px minmax(0,1fr) 18px;gap:10px;align-items:center;padding:11px;border:1px solid #eef2f7;border-radius:14px;background:#fff;text-decoration:none;transition:.16s ease}.quick-grid a:hover{transform:translateY(-1px);border-color:#d8e0ea;background:#fcfdff}.quick-grid strong,.quick-grid small{display:block}.quick-grid strong{font-size:10px}.quick-grid small{margin-top:3px;color:var(--muted);font-size:8px}.quick-grid b{color:#94a3b8;font-size:11px}.quick-icon{width:34px;height:34px}.quick-icon svg{width:16px;height:16px}

/* Placeholder/module compatibility */
.section-card,.stat-card{border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--shadow)}.section-card{margin-bottom:16px;overflow:hidden}.section-header{padding:18px 20px;border-bottom:1px solid var(--line)}.section-header h3{margin:0;font-size:16px}.section-header small{display:block;margin-top:4px;color:var(--muted);font-size:10px}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:18px}.detail-item{padding:13px;border:1px solid #eef2f7;border-radius:14px}.detail-item span{display:block;color:var(--muted);font-size:9px;margin-bottom:5px}.module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:18px}.module-card{padding:14px;border:1px solid var(--line);border-radius:14px;text-decoration:none}.placeholder-card{padding:40px;text-align:center}.placeholder-card h2{margin:12px 0 8px}.placeholder-card p{max-width:720px;margin:0 auto 18px;color:var(--muted);line-height:1.65}.placeholder-icon{width:54px;height:54px;margin:0 auto;border-radius:18px;display:grid;place-items:center;color:#166534;background:#ecfdf5;font-size:24px;font-weight:800}.error-code{font-size:72px;line-height:1;font-weight:800;color:var(--red);letter-spacing:-.06em}.muted{color:var(--muted)}

/* Responsive */
@media(max-width:1450px){.metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.welcome-panel{grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr)}}
@media(max-width:1180px){.dashboard-main-grid{grid-template-columns:1fr}.side-stack{grid-template-columns:repeat(3,minmax(0,1fr))}.welcome-panel{grid-template-columns:1fr}.welcome-insight{display:grid;grid-template-columns:220px 1fr;gap:14px;align-items:center}.pulse-list{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}.insight-title-row{display:block}.live-pill{margin-top:10px}.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1024px){.app-shell{display:block}.sidebar{width:min(86vw,286px);transform:translateX(-105%);box-shadow:0 30px 70px rgba(0,0,0,.28)}.sidebar-open .sidebar{transform:translateX(0)}.main-content{grid-column:auto;padding:0 18px 28px}.mobile-menu-btn{display:grid}.sidebar-collapse-btn{display:none}.sidebar-close-btn{display:grid;color:#94a3b8}.topbar{min-height:84px}.desktop-logout{display:none}.top-search{width:min(340px,42vw)}.sidebar-collapsed .sidebar{width:min(86vw,286px)}.sidebar-collapsed .brand-copy,.sidebar-collapsed .nav-label,.sidebar-collapsed .nav-section,.sidebar-collapsed .workspace-note-copy,.sidebar-collapsed .sidebar-user-copy,.sidebar-collapsed .sidebar-logout{display:initial}.sidebar-collapsed .nav-item{justify-content:flex-start;padding:0 12px}.sidebar-collapsed .workspace-note,.sidebar-collapsed .sidebar-user{justify-content:flex-start}.sidebar-collapsed .sidebar-head{justify-content:flex-start}}
@media(max-width:820px){.top-actions .role-chip{display:none}.top-search{display:none}.page-title-wrap p{max-width:68vw}.side-stack{grid-template-columns:1fr}.brand-row{grid-template-columns:1fr 1fr 1fr}.welcome-insight{display:block}.pulse-list{grid-template-columns:1fr;margin-top:16px}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.quick-grid{grid-template-columns:1fr 1fr}.surface-head{align-items:flex-start;flex-direction:column}.filter-bar{width:100%;justify-content:space-between}.select-wrap{flex:1}.select-wrap select{max-width:none;width:100%}}
@media(max-width:640px){.main-content{padding:0 12px 22px}.topbar{min-height:78px;padding:12px 0}.page-kicker{display:none}.topbar h1{font-size:22px}.topbar p{font-size:10px;max-width:64vw}.export-btn span{display:none}.export-btn{width:40px;padding:0}.welcome-panel{padding:18px;border-radius:20px}.welcome-copy h2{font-size:27px}.welcome-copy>p{font-size:11px}.brand-row{gap:7px}.brand-company{height:52px;padding:8px}.brand-company img{max-height:30px}.metric-grid{grid-template-columns:1fr 1fr;gap:9px}.metric-card{min-height:132px;padding:13px}.metric-card>strong{font-size:23px}.metric-money>strong{font-size:14px}.dashboard-main-grid{gap:12px}.responsive-table-wrap{overflow:visible}.responsive-table{min-width:0}.responsive-table thead{display:none}.responsive-table,.responsive-table tbody,.responsive-table tr,.responsive-table td{display:block;width:100%}.responsive-table tbody{display:grid;gap:10px;padding:10px}.responsive-table tr{padding:12px;border:1px solid var(--line);border-radius:15px;background:#fff}.responsive-table td{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:center;padding:8px 0;border-bottom:1px dashed #edf1f5}.responsive-table td:last-child{border-bottom:0}.responsive-table td:before{content:attr(data-label);color:#94a3b8;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}.project-cell{min-width:0}.project-cell small{white-space:normal}.team-cell{min-width:0}.progress-track{min-width:0}.table-footer{align-items:flex-start;flex-direction:column}.quick-grid{grid-template-columns:1fr}.surface-head{padding:15px 16px}.timeline-list,.finance-list{padding-left:14px;padding-right:14px}.snapshot-grid{padding:12px 14px 14px}.action-card{margin-top:12px}}
@media(max-width:410px){.metric-grid{grid-template-columns:1fr}.brand-row{grid-template-columns:1fr}.brand-company{height:50px}.page-title-wrap p{display:none}}
@media print{.sidebar,.mobile-overlay,.topbar,.hide-print{display:none!important}.app-shell{display:block}.main-content{padding:0}.page-content{max-width:none}.welcome-panel,.surface-card,.metric-card{box-shadow:none;break-inside:avoid}.metric-grid{grid-template-columns:repeat(3,1fr)}.dashboard-main-grid{grid-template-columns:1fr}.side-stack{grid-template-columns:1fr}.responsive-table{min-width:0}body{background:#fff}}

/* =========================================================
   TPOS 2.0 FINAL UI FOUNDATION v2.2
   Master design system refinements
   ========================================================= */
:root{
  --topbar-h:88px;
  --content-max:1780px;
  --focus-ring:0 0 0 4px rgba(225,29,46,.09);
  --ease:cubic-bezier(.2,.75,.25,1);
}

/* More balanced desktop composition */
.page-content{max-width:var(--content-max)}
.dashboard-main-grid{grid-template-columns:minmax(0,1.72fr) minmax(320px,.58fr);gap:16px;align-items:start}
.dashboard-primary-stack,.side-stack{display:grid;gap:16px;align-content:start;min-width:0}
.snapshot-card,.action-card{margin-top:0}
.snapshot-grid-wide{grid-template-columns:repeat(4,minmax(0,1fr));padding:14px 16px 16px}
.snapshot-grid-wide div{min-height:78px;display:flex;flex-direction:column;justify-content:center}
.snapshot-grid-wide strong{font-size:22px}
.quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.finance-card{position:sticky;top:104px}

/* Modern topbar behaviour */
.topbar{min-height:var(--topbar-h)}
.mobile-actions-wrap{display:none;position:relative}
.mobile-more-btn{border:1px solid var(--line);background:#fff;box-shadow:var(--shadow)}
.mobile-action-menu{position:absolute;right:0;top:46px;width:230px;padding:8px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.98);box-shadow:var(--shadow-lg);z-index:90;backdrop-filter:blur(14px)}
.mobile-profile-row{display:grid;grid-template-columns:32px minmax(0,1fr);gap:9px;align-items:center;padding:8px 9px 10px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.avatar-sm{width:32px;height:32px;flex-basis:32px}
.mobile-profile-row strong,.mobile-profile-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mobile-profile-row strong{font-size:11px}.mobile-profile-row small{margin-top:2px;color:var(--muted);font-size:9px}
.mobile-action-menu form{margin:0}.mobile-action-item{width:100%;min-height:40px;display:flex;align-items:center;gap:9px;padding:0 10px;border:0;border-radius:11px;background:transparent;color:var(--ink);font-size:11px;font-weight:700;text-align:left}
.mobile-action-item:hover{background:#f8fafc}.mobile-action-item svg{width:16px;height:16px;color:#64748b}.mobile-action-danger{color:#be123c}.mobile-action-danger svg{color:#be123c}

/* Dashboard polish */
.running-card,.compact-card,.snapshot-card,.action-card{transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.running-card:hover,.compact-card:hover,.snapshot-card:hover,.action-card:hover{border-color:#dde5ef;box-shadow:0 14px 34px rgba(15,23,42,.065)}
.responsive-table tbody tr{transition:background .15s ease}
.deadline-cell small:not(.text-danger){color:#64748b}
.status-overdue{box-shadow:inset 0 0 0 1px rgba(190,18,60,.05)}
.progress-track span{transition:width .55s var(--ease)}
.brand-company img{filter:saturate(.96);transition:transform .18s ease,filter .18s ease}
.brand-company:hover img{transform:scale(1.025);filter:saturate(1.06)}

/* Shared module design primitives (master design system) */
.module-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;padding:12px 14px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.9);box-shadow:var(--shadow)}
.module-toolbar-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ui-input,.ui-select{height:40px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);outline:none;padding:0 12px;font-size:11px;transition:border-color .16s ease,box-shadow .16s ease}
.ui-input:focus,.ui-select:focus{border-color:#fda4af;box-shadow:var(--focus-ring)}
.ui-search{position:relative;min-width:250px}.ui-search .ui-input{width:100%;padding-left:36px}.ui-search svg{position:absolute;left:12px;top:50%;width:15px;height:15px;color:#94a3b8;transform:translateY(-50%)}
.ui-badge{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 9px;border-radius:999px;font-size:9px;font-weight:800;white-space:nowrap}.ui-badge-dot{width:5px;height:5px;border-radius:50%;background:currentColor}
.ui-badge-blue{color:#1d4ed8;background:#eff6ff}.ui-badge-green{color:#15803d;background:#f0fdf4}.ui-badge-red{color:#be123c;background:#fff1f2}.ui-badge-amber{color:#b45309;background:#fffbeb}.ui-badge-slate{color:#475569;background:#f1f5f9}
.ui-empty{display:grid;place-items:center;gap:8px;min-height:190px;padding:30px;text-align:center;color:var(--muted)}.ui-empty-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:#f8fafc;color:#64748b}.ui-empty strong{color:var(--ink);font-size:13px}.ui-empty p{max-width:430px;margin:0;font-size:10px;line-height:1.55}
.ui-table-card{overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--shadow)}
.ui-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}

@media(max-width:1180px){
  .dashboard-main-grid{grid-template-columns:1fr}
  .dashboard-primary-stack{order:1}.side-stack{order:2;grid-template-columns:repeat(2,minmax(0,1fr))}
  .finance-card{position:static}
  .snapshot-grid-wide{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media(max-width:820px){
  .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 12px;padding:12px 0 11px}
  .topbar-left{grid-column:1;grid-row:1}
  .top-actions{display:contents}
  .top-search{display:flex;grid-column:1/-1;grid-row:2;width:100%;max-width:none}
  .top-actions>.export-btn,.top-actions>.role-chip,.desktop-logout{display:none!important}
  .mobile-actions-wrap{display:block;grid-column:2;grid-row:1;justify-self:end}
  .page-title-wrap p{max-width:76vw}
  .side-stack{grid-template-columns:1fr}
  .snapshot-grid-wide{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ui-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .module-toolbar{align-items:stretch;flex-direction:column}
  .module-toolbar-group{width:100%}.ui-search{min-width:0;flex:1}
}

@media(max-width:640px){
  .topbar{position:sticky;min-height:auto}
  .topbar h1{font-size:21px}.topbar p{max-width:72vw}
  .top-search{height:40px;border-radius:12px}
  .welcome-panel{padding:16px}
  .welcome-badge{padding:6px 9px}
  .welcome-copy h2{margin-top:14px;font-size:25px}
  .brand-row{margin-top:17px}
  .brand-company{height:50px}
  .welcome-insight{padding:14px;border-radius:17px}
  .pulse-list{margin-top:12px}
  .snapshot-grid-wide{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quick-grid{grid-template-columns:1fr}
  .ui-card-grid{grid-template-columns:1fr}
}

@media(max-width:410px){
  .topbar h1{font-size:19px}.topbar p{display:none}
  .snapshot-grid-wide{grid-template-columns:1fr 1fr}
}

/* =========================================================
   TPOS 2.0 FINAL UI FOUNDATION v2.2
   Responsive polish + QA fixes
   ========================================================= */
:root{
  --muted:#5b6b7e;
  --topbar-h:88px;
  --mobile-card-gap:10px;
}

/* Fixed application chrome without content sliding below the topbar. */
.app-body{height:100vh;overflow:hidden}
.main-content{
  height:100vh;
  min-height:0;
  padding:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
}
.topbar{
  position:relative;
  top:auto;
  margin:0 28px;
  padding:17px 0 15px;
  border-bottom:1px solid rgba(226,232,240,.82);
  background:rgba(244,247,251,.94);
  box-shadow:0 8px 20px rgba(15,23,42,.018);
}
.main-scroll{
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding:0 28px 34px;
}
body.sidebar-open .main-scroll{overflow:hidden}

/* Keep independent columns balanced; Quick Actions becomes full width. */
.dashboard-main-grid{grid-template-columns:minmax(0,1.72fr) minmax(320px,.58fr);align-items:start}
.dashboard-primary-stack,.side-stack{align-self:start}
.finance-card{position:static}
.dashboard-quick-actions{margin-top:16px}

/* Accessibility / typography floor. */
.surface-head p,.metric-card small,.timeline-item small,.finance-list span,.quick-grid small,
.snapshot-grid span,.project-cell small,.deadline-cell small,.pulse-item small,.welcome-copy>p{font-size:11px}
.responsive-table td{font-size:12px}.responsive-table th{font-size:10px}
.mini-label,.card-chip,.metric-trend,.ui-badge{font-size:10px}
.workspace-note-copy small,.sidebar-user-copy small,.brand-copy small{font-size:10px}
.quick-grid strong,.timeline-item strong,.finance-list strong{font-size:12px}

/* Dedicated mobile project cards. Desktop/tablet keep the dense table. */
.mobile-project-list{display:none}
.mobile-project-card{border:1px solid var(--line);border-radius:16px;background:#fff;padding:14px;box-shadow:0 5px 18px rgba(15,23,42,.035)}
.mobile-project-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.mobile-project-head .project-cell{min-width:0;flex:1}
.mobile-project-head .status-pill{flex:0 0 auto}
.mobile-project-meta{display:grid;grid-template-columns:1fr 1.25fr;gap:9px;margin-top:13px}
.mobile-project-meta>div{min-width:0;padding:10px;border:1px solid #eef2f6;border-radius:12px;background:#fbfcfe}
.mobile-project-meta>div>span{display:block;margin-bottom:5px;color:#8290a3;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.mobile-project-meta strong{font-size:12px}.mobile-project-meta small{display:block;margin-top:3px;color:var(--muted);font-size:11px}
.mobile-project-meta .team-cell{min-width:0}.mobile-project-meta .team-cell strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mobile-project-progress{margin-top:12px}.mobile-project-progress .progress-meta{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px;color:var(--muted);font-size:11px}.mobile-project-progress .progress-meta strong{color:var(--ink)}

/* Mobile hero is shorter and pulse cards swipe horizontally rather than stack forever. */
@media(max-width:1024px){
  .main-content{padding:0}
  .topbar{
    margin:0 18px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    align-items:center;
    gap:10px 12px;
    padding:12px 0 11px;
  }
  .main-scroll{padding:0 18px 28px}
  .topbar-left{grid-column:1;grid-row:1;min-width:0}
  .top-actions{display:contents}
  .top-search{display:flex!important;grid-column:1/-1;grid-row:2;width:100%;max-width:none;height:40px}
  .top-actions>.export-btn,.top-actions>.role-chip,.desktop-logout{display:none!important}
  .mobile-actions-wrap{display:block!important;grid-column:2;grid-row:1;justify-self:end}
  .page-title-wrap p{max-width:66vw}
  .sidebar{overscroll-behavior:contain}
}

@media(max-width:820px){
  .page-title-wrap p{display:none}
  .page-kicker{margin-bottom:4px;font-size:9px}
  .topbar h1{font-size:22px}
  .welcome-panel{padding:18px}
  .welcome-copy h2{font-size:26px}
  .welcome-copy>p{max-width:680px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .brand-row{gap:8px}
  .brand-company{height:52px;padding:7px}
  .brand-company img{max-height:30px;max-width:90%}
  .welcome-insight{padding:14px}
  .dashboard-quick-actions{margin-top:12px}
}

@media(max-width:720px){
  .responsive-table-wrap{display:none}
  .mobile-project-list{display:grid;gap:var(--mobile-card-gap);padding:12px}
  .table-footer{padding-top:10px}
  .surface-head{padding:15px 16px}
  .filter-bar{width:100%}
  .select-wrap{min-width:0;flex:1}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .metric-card{min-height:126px;padding:14px}
  .metric-card>strong{font-size:24px}
  .metric-money>strong{font-size:15px;line-height:1.18;overflow-wrap:anywhere}
  .quick-grid{grid-template-columns:1fr}
}

@media(max-width:640px){
  .topbar{margin:0 12px;padding:10px 0}
  .main-scroll{padding:0 12px 22px}
  .topbar-left{gap:9px}
  .mobile-menu-btn,.mobile-more-btn{width:38px;height:38px}
  .topbar h1{font-size:21px}
  .top-search{height:39px;border-radius:12px}
  .welcome-panel{margin-bottom:12px;padding:14px;border-radius:19px}
  .welcome-badge{padding:5px 8px;font-size:9px}
  .welcome-copy h2{margin-top:12px;font-size:24px;line-height:1.12}
  .welcome-copy>p{margin-top:8px;font-size:11px;line-height:1.5}
  .brand-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:14px}
  .brand-company{height:44px;padding:6px}
  .brand-company img{max-height:27px;max-width:92%}
  .welcome-insight{margin-top:12px;padding:12px;border-radius:15px}
  .pulse-list{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .pulse-list::-webkit-scrollbar{display:none}
  .pulse-item{flex:0 0 min(220px,78vw);scroll-snap-align:start;min-height:72px}
  .snapshot-grid-wide{grid-template-columns:repeat(2,minmax(0,1fr))}
  .snapshot-grid-wide div{min-height:72px}
}

@media(max-width:430px){
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric-card{min-height:122px;padding:12px}
  .metric-card>strong{font-size:22px}
  .metric-card>span{font-size:11px}
  .metric-card small{font-size:10px}
  .metric-money>strong{font-size:13px}
  .brand-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .brand-company{height:42px}
  .brand-company img{max-height:24px}
  .mobile-project-meta{grid-template-columns:1fr}
  .snapshot-grid-wide strong{font-size:20px}
}

@media print{
  .app-body{height:auto;overflow:visible}
  .main-content{height:auto;display:block;overflow:visible}
  .main-scroll{overflow:visible;padding:0}
  .mobile-project-list{display:none!important}
  .responsive-table-wrap{display:block!important}
}

/* =========================================================
   TPOS 2.0 UI FOUNDATION v2.3 — RESPONSIVE GRID FIX
   Scope: dashboard lower grid, Timeline, Finance, Project mobile.
   ========================================================= */

/* Prevent compact side cards from shrinking their monetary content. */
.timeline-card,.cashflow-card,.finance-card,.side-stack{min-width:0}
.card-chip{white-space:nowrap;flex:0 0 auto}
.finance-row{min-width:0}
.finance-value{
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  letter-spacing:-.01em;
}

/* Desktop: keep primary monitor + comfortable side rail. */
@media(min-width:1280px){
  .dashboard-main-grid{
    grid-template-columns:minmax(0,1.75fr) minmax(340px,.62fr);
    gap:16px;
    align-items:start;
  }
  .dashboard-primary-stack{display:grid;gap:16px;min-width:0}
  .side-stack{display:grid;grid-template-columns:1fr;gap:16px;min-width:0}
}

/* Tablet / small desktop: never squeeze Timeline and Finance into skinny columns.
   Order becomes Project Running -> Timeline + Finance -> Operational. */
@media(max-width:1279px){
  .dashboard-main-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:16px;
  }
  .dashboard-primary-stack{display:contents}
  .running-card{order:1;min-width:0}
  .side-stack{
    order:2;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    min-width:0;
  }
  .snapshot-card{order:3;min-width:0}
  .dashboard-quick-actions{margin-top:16px}

  .timeline-list{padding:12px 16px 16px}
  .timeline-item{grid-template-columns:32px minmax(0,1fr);gap:10px}
  .timeline-item strong{font-size:12px;line-height:1.35}
  .timeline-item small{font-size:11px;line-height:1.45;overflow-wrap:anywhere}

  .finance-list{padding:6px 16px 14px}
  .finance-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
  .finance-label{min-width:0}
  .finance-value{margin-left:auto;text-align:right}
}

/* At mobile widths, every operational panel gets the full reading width. */
@media(max-width:767px){
  .dashboard-main-grid{gap:12px}
  .side-stack{
    grid-template-columns:minmax(0,1fr);
    gap:12px;
  }

  /* True mobile project cards: no hidden table columns, no horizontal table scroll. */
  .responsive-table-wrap{display:none!important}
  .mobile-project-list{display:grid!important;gap:10px;padding:12px}
  .mobile-project-card{padding:14px;border-radius:15px}
  .mobile-project-head{align-items:flex-start}
  .mobile-project-meta{grid-template-columns:1fr 1fr}

  /* Timeline is a set of touch-friendly cards instead of compressed rows. */
  .timeline-list{display:grid;gap:9px;padding:12px}
  .timeline-item{
    grid-template-columns:34px minmax(0,1fr);
    gap:11px;
    padding:12px;
    border:1px solid #edf1f5;
    border-radius:14px;
    background:#fff;
  }
  .timeline-item:last-child{border-bottom:1px solid #edf1f5}
  .timeline-marker{width:32px;height:32px;border-radius:10px}
  .timeline-item strong{font-size:12px;line-height:1.3}
  .timeline-item small{font-size:11px;line-height:1.45}

  /* Finance switches from label/value row to label above amount. */
  .finance-list{padding:6px 14px 14px}
  .finance-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr);
    gap:5px!important;
    align-items:start!important;
    padding:12px 0!important;
  }
  .finance-label{font-size:11px!important;line-height:1.4}
  .finance-value{
    margin-left:0!important;
    text-align:left!important;
    font-size:14px!important;
    line-height:1.25;
  }
  .cashflow-card .surface-head{flex-direction:row;align-items:center}
  .cashflow-card .surface-head>div{min-width:0}
  .cashflow-card .card-chip{font-size:9px}
}

@media(max-width:520px){
  .mobile-project-meta{grid-template-columns:1fr}
  .timeline-card .surface-head,.cashflow-card .surface-head{align-items:center;flex-direction:row}
  .timeline-card .card-chip,.cashflow-card .card-chip{max-width:42%;overflow:hidden;text-overflow:ellipsis}
}

/* Extra-narrow phones: retain readable amounts and actions without overflow. */
@media(max-width:390px){
  .timeline-list,.finance-list{padding-left:10px;padding-right:10px}
  .timeline-item{padding:10px}
  .finance-value{font-size:13px!important}
  .mobile-project-list{padding:10px}
}

/* =========================================================
   TPOS 2.0 UI FOUNDATION v2.3.1 — MICRO RESPONSIVE PATCH
   Final fixes:
   1) <1024px Project Running uses card mode.
   2) <1280px layout is Running full-width -> Timeline|Finance -> Operational.
   ========================================================= */

/* Force the tablet composition explicitly so older grid rules can never win. */
@media (max-width:1279px){
  .dashboard-main-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:
      "running"
      "side"
      "snapshot"!important;
    gap:16px!important;
    align-items:start!important;
  }
  .dashboard-primary-stack{
    display:contents!important;
  }
  .running-card{
    grid-area:running!important;
    width:100%!important;
    min-width:0!important;
  }
  .side-stack{
    grid-area:side!important;
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px!important;
    align-items:start!important;
  }
  .timeline-card,.cashflow-card,.finance-card{
    min-width:0!important;
    width:100%!important;
  }
  .snapshot-card{
    grid-area:snapshot!important;
    width:100%!important;
    min-width:0!important;
  }
  .dashboard-quick-actions{
    width:100%!important;
    margin-top:16px!important;
  }
}

/* Tablet and phone: project monitor becomes cards before the table gets cramped. */
@media (max-width:1023px){
  .running-card .responsive-table-wrap{
    display:none!important;
  }
  .running-card .mobile-project-list{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
    padding:12px!important;
  }
  .running-card .mobile-project-card{
    display:block!important;
    width:100%!important;
    min-width:0!important;
  }
  .running-card .mobile-project-head{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:12px!important;
  }
  .running-card .mobile-project-meta{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  .running-card .mobile-project-progress{
    display:block!important;
  }
  .running-card .project-cell,
  .running-card .team-cell{
    min-width:0!important;
  }
  .running-card .team-cell>span:last-child{
    max-width:none!important;
    white-space:normal!important;
  }
}

/* Phone: operational panels become a single reading column. */
@media (max-width:767px){
  .dashboard-main-grid{
    gap:12px!important;
  }
  .side-stack{
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
  }
  .running-card .mobile-project-meta{
    grid-template-columns:minmax(0,1fr)!important;
  }
}

/* CSP-safe progress width utilities v1 */
.progress-width-0{width:0%}
.progress-width-1{width:1%}
.progress-width-2{width:2%}
.progress-width-3{width:3%}
.progress-width-4{width:4%}
.progress-width-5{width:5%}
.progress-width-6{width:6%}
.progress-width-7{width:7%}
.progress-width-8{width:8%}
.progress-width-9{width:9%}
.progress-width-10{width:10%}
.progress-width-11{width:11%}
.progress-width-12{width:12%}
.progress-width-13{width:13%}
.progress-width-14{width:14%}
.progress-width-15{width:15%}
.progress-width-16{width:16%}
.progress-width-17{width:17%}
.progress-width-18{width:18%}
.progress-width-19{width:19%}
.progress-width-20{width:20%}
.progress-width-21{width:21%}
.progress-width-22{width:22%}
.progress-width-23{width:23%}
.progress-width-24{width:24%}
.progress-width-25{width:25%}
.progress-width-26{width:26%}
.progress-width-27{width:27%}
.progress-width-28{width:28%}
.progress-width-29{width:29%}
.progress-width-30{width:30%}
.progress-width-31{width:31%}
.progress-width-32{width:32%}
.progress-width-33{width:33%}
.progress-width-34{width:34%}
.progress-width-35{width:35%}
.progress-width-36{width:36%}
.progress-width-37{width:37%}
.progress-width-38{width:38%}
.progress-width-39{width:39%}
.progress-width-40{width:40%}
.progress-width-41{width:41%}
.progress-width-42{width:42%}
.progress-width-43{width:43%}
.progress-width-44{width:44%}
.progress-width-45{width:45%}
.progress-width-46{width:46%}
.progress-width-47{width:47%}
.progress-width-48{width:48%}
.progress-width-49{width:49%}
.progress-width-50{width:50%}
.progress-width-51{width:51%}
.progress-width-52{width:52%}
.progress-width-53{width:53%}
.progress-width-54{width:54%}
.progress-width-55{width:55%}
.progress-width-56{width:56%}
.progress-width-57{width:57%}
.progress-width-58{width:58%}
.progress-width-59{width:59%}
.progress-width-60{width:60%}
.progress-width-61{width:61%}
.progress-width-62{width:62%}
.progress-width-63{width:63%}
.progress-width-64{width:64%}
.progress-width-65{width:65%}
.progress-width-66{width:66%}
.progress-width-67{width:67%}
.progress-width-68{width:68%}
.progress-width-69{width:69%}
.progress-width-70{width:70%}
.progress-width-71{width:71%}
.progress-width-72{width:72%}
.progress-width-73{width:73%}
.progress-width-74{width:74%}
.progress-width-75{width:75%}
.progress-width-76{width:76%}
.progress-width-77{width:77%}
.progress-width-78{width:78%}
.progress-width-79{width:79%}
.progress-width-80{width:80%}
.progress-width-81{width:81%}
.progress-width-82{width:82%}
.progress-width-83{width:83%}
.progress-width-84{width:84%}
.progress-width-85{width:85%}
.progress-width-86{width:86%}
.progress-width-87{width:87%}
.progress-width-88{width:88%}
.progress-width-89{width:89%}
.progress-width-90{width:90%}
.progress-width-91{width:91%}
.progress-width-92{width:92%}
.progress-width-93{width:93%}
.progress-width-94{width:94%}
.progress-width-95{width:95%}
.progress-width-96{width:96%}
.progress-width-97{width:97%}
.progress-width-98{width:98%}
.progress-width-99{width:99%}
.progress-width-100{width:100%}


/* ===== TPOS LOGIN UI V2 ===== */

.guest-body{
  margin:0;
  min-height:100vh;
  background:#eef2f7;
}

.login-screen-v2{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:38px 24px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 18%,rgba(59,130,246,.10),transparent 28%),
    radial-gradient(circle at 88% 78%,rgba(225,29,46,.09),transparent 28%),
    linear-gradient(135deg,#f5f7fb 0%,#eef2f7 48%,#f8fafc 100%);
}

.login-screen-v2::before,
.login-screen-v2::after{
  content:"";
  position:absolute;
  border-radius:999px;
  filter:blur(8px);
  pointer-events:none;
}

.login-screen-v2::before{
  width:360px;
  height:360px;
  left:-160px;
  bottom:-130px;
  background:rgba(30,64,175,.07);
}

.login-screen-v2::after{
  width:330px;
  height:330px;
  right:-120px;
  top:-130px;
  background:rgba(225,29,46,.06);
}

.login-shell{
  position:relative;
  z-index:1;
  width:min(980px,100%);
  min-height:575px;
  display:grid;
  grid-template-columns:1.03fr .97fr;
  overflow:hidden;
  border:1px solid rgba(203,213,225,.9);
  border-radius:28px;
  background:#fff;
  box-shadow:
    0 36px 90px rgba(15,23,42,.16),
    0 4px 16px rgba(15,23,42,.05);
}

.login-showcase{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:42px 42px 34px;
  color:#fff;
  background:
    radial-gradient(circle at 80% 15%,rgba(96,165,250,.24),transparent 30%),
    linear-gradient(145deg,#111827 0%,#172554 52%,#1e3a8a 100%);
  position:relative;
}

.login-showcase::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.13;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent);
}

.login-showcase-top,
.login-showcase-footer{
  position:relative;
  z-index:1;
}

.login-showcase-brand{
  display:flex;
  align-items:center;
  gap:13px;
}

.login-showcase-mark{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg,#fb3857,#d71920);
  color:#fff;
  font-size:16px;
  font-weight:800;
  box-shadow:0 14px 34px rgba(225,29,46,.34);
}

.login-showcase-brand strong{
  display:block;
  font-size:18px;
}

.login-showcase-brand span{
  display:block;
  margin-top:4px;
  color:#bfdbfe;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.13em;
}

.login-showcase-copy{
  margin-top:58px;
}

.login-showcase-kicker,
.login-form-kicker{
  display:block;
  margin-bottom:13px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
}

.login-showcase-kicker{
  color:#93c5fd;
}

.login-showcase-copy h1{
  max-width:390px;
  margin:0;
  color:#fff;
  font-size:38px;
  line-height:1.13;
  letter-spacing:-.045em;
}

.login-showcase-copy p{
  max-width:410px;
  margin:18px 0 0;
  color:#dbeafe;
  font-size:13px;
  line-height:1.75;
}

.login-feature-list{
  display:grid;
  gap:14px;
  margin-top:34px;
}

.login-feature{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.login-feature>span{
  flex:0 0 auto;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:#bfdbfe;
  font-size:12px;
  font-weight:800;
}

.login-feature strong{
  display:block;
  color:#fff;
  font-size:12px;
}

.login-feature small{
  display:block;
  margin-top:3px;
  color:#bfdbfe;
  font-size:10px;
  line-height:1.45;
}

.login-showcase-footer{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:38px;
  padding:17px 18px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
}

.login-workspace-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:rgba(255,255,255,.13);
  font-weight:800;
}

.login-showcase-footer strong{
  display:block;
  font-size:11px;
}

.login-showcase-footer span{
  display:block;
  margin-top:3px;
  color:#bfdbfe;
  font-size:9px;
}

.login-form-panel{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 52px;
  background:#fff;
}

.login-form-wrap{
  width:100%;
  max-width:390px;
}

.login-mobile-brand{
  display:none;
}

.login-heading-v2{
  margin-bottom:27px;
}

.login-form-kicker{
  margin-bottom:10px;
  color:#e11d2e;
}

.login-heading-v2 h1{
  margin:0;
  color:#0f172a;
  font-size:31px;
  line-height:1.15;
  letter-spacing:-.045em;
}

.login-heading-v2 p{
  margin:9px 0 0;
  color:#64748b;
  font-size:13px;
  line-height:1.6;
}

.login-form-v2{
  gap:18px;
}

.login-form-v2 .form-group label{
  margin-bottom:8px;
  color:#1e293b;
  font-size:12px;
  font-weight:800;
}

.login-form-v2 .form-group input{
  height:49px;
  padding:0 15px;
  border:1px solid #d8e0ea;
  border-radius:12px;
  background:#fff;
  color:#0f172a;
  font-size:13px;
  transition:border-color .18s ease,box-shadow .18s ease;
}

.login-form-v2 .form-group input::placeholder{
  color:#a3afbf;
}

.login-form-v2 .form-group input:focus{
  border-color:#60a5fa;
  box-shadow:0 0 0 4px rgba(59,130,246,.11);
}

.login-submit{
  width:100%;
  height:48px;
  margin-top:2px;
  border:0;
  border-radius:12px;
  background:linear-gradient(135deg,#f43f5e,#d71920);
  color:#fff;
  font-family:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(225,29,46,.22);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}

.login-submit:hover{
  transform:translateY(-1px);
  filter:brightness(.98);
  box-shadow:0 15px 32px rgba(225,29,46,.28);
}

.login-submit:active{
  transform:translateY(0);
}

.login-footnote-v2{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:19px;
  color:#64748b;
}

.login-security-dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.09);
}

.login-form-footer{
  margin-top:30px;
  padding-top:18px;
  border-top:1px solid #eef2f7;
  color:#94a3b8;
  text-align:center;
  font-size:9px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.login-screen-v2 .alert{
  margin-bottom:18px;
  border-radius:12px;
  font-size:11px;
}

@media(max-width:820px){
  .login-screen-v2{
    padding:24px 16px;
  }

  .login-shell{
    width:min(520px,100%);
    min-height:0;
    grid-template-columns:1fr;
  }

  .login-showcase{
    display:none;
  }

  .login-form-panel{
    padding:38px 34px;
  }

  .login-mobile-brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:34px;
  }

  .login-mobile-brand strong{
    display:block;
    color:#0f172a;
    font-size:17px;
  }

  .login-mobile-brand span{
    display:block;
    margin-top:3px;
    color:#64748b;
    font-size:9px;
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
  }
}

@media(max-width:480px){
  .login-screen-v2{
    padding:14px;
    align-items:flex-start;
  }

  .login-shell{
    margin-top:18px;
    border-radius:22px;
  }

  .login-form-panel{
    padding:30px 22px;
  }

  .login-heading-v2 h1{
    font-size:27px;
  }

  .login-form-wrap{
    max-width:none;
  }
}

/* ===== TPOS LOGIN OFFICIAL LOGO ===== */

.login-showcase-brand-logo{
  gap:16px;
}

.login-teknolab-logo{
  width:72px;
  height:72px;
  flex:0 0 auto;
  object-fit:contain;
  display:block;
  padding:5px;
  border-radius:15px;
  background:rgba(255,255,255,.96);
  box-shadow:0 12px 30px rgba(15,23,42,.20);
}

.login-logo-system-name{
  min-width:0;
}

.login-logo-system-name span{
  display:block;
  color:#dbeafe;
  font-size:10px;
  line-height:1.5;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.13em;
}

@media(max-width:820px){
  .login-teknolab-logo{
    width:62px;
    height:62px;
  }
}


/* ===== SIDEBAR TEKNOLAB LOGO ===== */

.brand-mark.brand-mark-logo{
  width:46px;
  height:46px;
  flex:0 0 46px;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:4px;
  border-radius:14px;
  background:#ffffff;
  box-shadow:0 10px 24px rgba(15,23,42,.22);
}

.sidebar-brand-logo{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}

.sidebar-collapsed .brand-mark.brand-mark-logo{
  margin:0 auto;
}



/* ===== DASHBOARD HERO ECOSYSTEM V2 ===== */

.welcome-copy-v2{
  min-width:0;
}

.welcome-command-label{
  margin-top:24px;
  margin-bottom:7px;
  color:#2563eb;
  font-size:9px;
  line-height:1;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.welcome-copy-v2 h2{
  margin-top:0;
}

.welcome-description{
  max-width:760px;
  margin-top:8px;
  color:#64748b;
  font-size:12px;
  line-height:1.7;
}

.ecosystem-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-top:24px;
  margin-bottom:10px;
}

.ecosystem-heading span{
  display:block;
  color:#0f172a;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.ecosystem-heading small{
  display:block;
  margin-top:6px;
  color:#64748b;
  font-size:10px;
  line-height:1.55;
}

.brand-row-v2{
  align-items:stretch;
}

.brand-company-v2{
  height:auto;
  min-height:112px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:12px 14px 13px;
  border:1px solid #e2e8f0;
  border-radius:16px;
  background:
    linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  box-shadow:0 8px 22px rgba(15,23,42,.035);
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.brand-company-v2:hover{
  transform:translateY(-2px);
  border-color:#cbd5e1;
  box-shadow:0 12px 28px rgba(15,23,42,.07);
}

.brand-logo-area{
  min-height:45px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.brand-company-v2 .brand-logo-area img{
  max-width:100%;
  max-height:38px;
  object-fit:contain;
}

.brand-company-copy{
  margin-top:11px;
  padding-top:10px;
  border-top:1px solid #eef2f7;
  text-align:left;
}

.brand-company-copy strong{
  display:block;
  color:#0f172a;
  font-size:8px;
  line-height:1.3;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.brand-company-copy span{
  display:block;
  margin-top:4px;
  color:#64748b;
  font-size:8px;
  line-height:1.45;
}

@media(max-width:1024px){
  .brand-company-v2{
    min-height:108px;
  }
}

@media(max-width:640px){
  .welcome-command-label{
    margin-top:18px;
  }

  .ecosystem-heading{
    margin-top:18px;
  }

  .brand-row-v2{
    display:grid;
    grid-template-columns:1fr;
  }

  .brand-company-v2{
    min-height:102px;
  }

  .brand-company-copy{
    text-align:center;
  }
}

/* ===== ECOSYSTEM TYPOGRAPHY POLISH ===== */

.ecosystem-heading{
  margin-top:26px;
  margin-bottom:14px;
}


/* ===== TEKNOLAB ECOSYSTEM LOGO BALANCE ===== */

.brand-company-v2 .brand-logo-area img.ecosystem-logo-teknolab{
  max-width:150px;
  max-height:48px;
  width:auto;
  height:auto;
  transform:scale(1.28);
  transform-origin:center center;
}


/* ===== RKB MODULE V1 ===== */

.rkb-overview-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:18px;
}

.rkb-list-card{
  overflow:hidden;
}

.rkb-surface-head{
  gap:20px;
  align-items:flex-end;
}

.rkb-filter-form{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
}

.rkb-filter-form input,
.rkb-filter-form select{
  min-height:38px;
  border:1px solid #dbe3ef;
  border-radius:10px;
  background:#fff;
  padding:8px 11px;
  color:#0f172a;
  font:inherit;
  font-size:11px;
  outline:none;
}

.rkb-filter-form input{
  width:190px;
}

.rkb-filter-form select{
  max-width:220px;
}

.rkb-filter-form input:focus,
.rkb-filter-form select:focus{
  border-color:#94a3b8;
  box-shadow:0 0 0 3px rgba(59,130,246,.08);
}

.rkb-table td strong{
  display:block;
  color:#0f172a;
  font-size:11px;
}

.rkb-table td small{
  display:block;
  margin-top:3px;
  color:#64748b;
  font-size:9px;
}

.rkb-progress-meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
  color:#64748b;
  font-size:9px;
}

.rkb-progress-meta strong{
  font-size:9px !important;
}

.rkb-progress-track{
  width:100%;
  height:6px;
  overflow:hidden;
  border-radius:999px;
  background:#e8eef7;
}

.rkb-progress-track span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#2563eb,#38bdf8);
}

.rkb-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 9px;
  border-radius:999px;
  font-size:9px;
  font-weight:800;
}

.rkb-status-ok{
  color:#047857;
  background:#ecfdf5;
  border:1px solid #a7f3d0;
}

.rkb-status-danger{
  color:#be123c;
  background:#fff1f2;
  border:1px solid #fecdd3;
}

.rkb-empty-state{
  min-height:300px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
  text-align:center;
}

.rkb-empty-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  margin-bottom:16px;
  border-radius:18px;
  background:#eff6ff;
  color:#2563eb;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
}

.rkb-empty-state strong{
  color:#0f172a;
  font-size:15px;
}

.rkb-empty-state p{
  max-width:430px;
  margin-top:7px;
  color:#64748b;
  font-size:11px;
  line-height:1.6;
}

.rkb-pagination{
  padding:14px 18px 18px;
}

@media(max-width:1000px){
  .rkb-overview-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .rkb-surface-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .rkb-filter-form{
    justify-content:flex-start;
    width:100%;
  }
}

@media(max-width:640px){
  .rkb-overview-grid{
    grid-template-columns:1fr 1fr;
    gap:9px;
  }

  .rkb-filter-form{
    display:grid;
    grid-template-columns:1fr;
  }

  .rkb-filter-form input,
  .rkb-filter-form select{
    width:100%;
    max-width:none;
  }
}


/* ===== RKB CREATE FORM ===== */

.rkb-form-card{
  max-width:1100px;
}

.rkb-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  padding-top:8px;
}

.rkb-form-full{
  grid-column:1/-1;
}

.rkb-form-card .form-group{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.rkb-form-card .form-group label{
  color:#334155;
  font-size:10px;
  font-weight:800;
}

.rkb-form-card .form-group label span{
  color:#e11d48;
}

.rkb-form-card input,
.rkb-form-card select,
.rkb-form-card textarea{
  width:100%;
  border:1px solid #dbe3ef;
  border-radius:11px;
  background:#fff;
  padding:10px 12px;
  color:#0f172a;
  font:inherit;
  font-size:11px;
  outline:none;
}

.rkb-form-card input,
.rkb-form-card select{
  min-height:42px;
}

.rkb-form-card textarea{
  resize:vertical;
}

.rkb-form-card input:focus,
.rkb-form-card select:focus,
.rkb-form-card textarea:focus{
  border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(37,99,235,.08);
}

.form-help{
  color:#94a3b8;
  font-size:9px;
  line-height:1.5;
}

.form-error{
  color:#e11d48;
  font-size:9px;
  font-weight:700;
}

.rkb-form-actions{
  display:flex;
  justify-content:flex-end;
  gap:9px;
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid #eef2f7;
}

@media(max-width:640px){
  .rkb-form-grid{
    grid-template-columns:1fr;
  }

  .rkb-form-full{
    grid-column:auto;
  }

  .rkb-form-actions{
    flex-direction:column-reverse;
  }

  .rkb-form-actions .btn{
    width:100%;
    justify-content:center;
  }
}


/* ===== TPOS DATE FIELD ===== */

#rkb_date{
  font-variant-numeric:tabular-nums;
  letter-spacing:.03em;
}

#rkb_date::placeholder{
  color:#94a3b8;
}


/* ===== RKB CREATE FORM POLISH V2 ===== */

.rkb-form-section{
  padding:20px 0;
  border-bottom:1px solid #edf1f6;
}

.rkb-form-section:first-child{
  padding-top:10px;
}

.rkb-form-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
}

.rkb-form-section-head h4{
  margin:3px 0 0;
  color:#0f172a;
  font-size:13px;
  line-height:1.3;
}

.rkb-form-section-head p{
  margin:4px 0 0;
  color:#64748b;
  font-size:9px;
  line-height:1.5;
}

.rkb-auto-code{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:5px 10px;
  border:1px solid #dbeafe;
  border-radius:999px;
  background:#eff6ff;
  color:#2563eb;
  font-size:8px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}

.rkb-primary-grid{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(160px,.8fr) minmax(140px,.65fr);
  gap:14px;
  align-items:start;
}

.rkb-document-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.rkb-form-card{
  max-width:1180px;
}

.rkb-form-card .form-group label{
  font-size:10px;
  color:#1e293b;
}

.rkb-form-card input,
.rkb-form-card select,
.rkb-form-card textarea{
  border-color:#d8e1ed;
  background:#fff;
}

.rkb-form-card input,
.rkb-form-card select{
  min-height:44px;
}

.rkb-form-card textarea{
  min-height:112px;
}

.rkb-form-footnote{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:18px;
  padding:12px 14px;
  border:1px solid #dbeafe;
  border-radius:12px;
  background:#f8fbff;
}

.rkb-footnote-icon{
  width:24px;
  height:24px;
  flex:0 0 24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#2563eb;
  color:#fff;
  font-size:10px;
  font-weight:900;
}

.rkb-form-footnote strong{
  display:block;
  color:#1e3a8a;
  font-size:9px;
}

.rkb-form-footnote small{
  display:block;
  margin-top:2px;
  color:#64748b;
  font-size:9px;
  line-height:1.5;
}

@media(max-width:900px){
  .rkb-primary-grid{
    grid-template-columns:1fr 1fr;
  }

  .rkb-project-field{
    grid-column:1/-1;
  }
}

@media(max-width:640px){
  .rkb-primary-grid{
    grid-template-columns:1fr;
  }

  .rkb-project-field{
    grid-column:auto;
  }

  .rkb-form-section-head{
    flex-direction:column;
  }
}


/* ===== RKB CREATE FORM STANDARD V3 ===== */

.rkb-form-card{
  max-width:1120px;
  margin:0 auto;
  overflow:hidden;
}

.rkb-form-card > .surface-head{
  padding:22px 24px 18px;
  margin:0;
  border-bottom:1px solid #e8edf4;
}

.rkb-form-card > form{
  padding:22px 24px 24px;
}

.rkb-form-section{
  margin:0 0 16px;
  padding:20px;
  border:1px solid #e3eaf3;
  border-radius:16px;
  background:#fbfdff;
}

.rkb-form-section:first-child{
  padding-top:20px;
}

.rkb-form-section:last-of-type{
  margin-bottom:16px;
}

.rkb-form-section-head{
  margin:0 0 18px;
  padding:0;
}

.rkb-form-section-head h4{
  margin:4px 0 0;
  color:#0f172a;
  font-size:14px;
  font-weight:800;
}

.rkb-form-section-head p{
  margin:5px 0 0;
  color:#64748b;
  font-size:10px;
  line-height:1.55;
}

.rkb-form-section-head .mini-label{
  font-size:9px;
  letter-spacing:.12em;
}

.rkb-auto-code{
  min-height:28px;
  padding:5px 11px;
  border-color:#bfdbfe;
  background:#eff6ff;
  color:#1d4ed8;
}

.rkb-primary-grid{
  grid-template-columns:minmax(0,1.8fr) minmax(180px,.75fr) minmax(150px,.55fr);
  gap:16px;
}

.rkb-document-grid{
  gap:16px;
}

.rkb-form-card .form-group{
  gap:8px;
}

.rkb-form-card .form-group label{
  font-size:10px;
  font-weight:800;
  color:#1e293b;
}

.rkb-form-card input,
.rkb-form-card select,
.rkb-form-card textarea{
  border:1px solid #cfd9e7;
  border-radius:10px;
  background:#fff;
}

.rkb-form-card input,
.rkb-form-card select{
  min-height:44px;
  padding:10px 12px;
}

.rkb-form-card textarea{
  min-height:105px;
  padding:12px;
}

.rkb-form-card input:focus,
.rkb-form-card select:focus,
.rkb-form-card textarea:focus{
  border-color:#3b82f6;
  box-shadow:0 0 0 3px rgba(59,130,246,.10);
}

.form-help{
  margin-top:0;
  font-size:9px;
  color:#94a3b8;
}

.rkb-form-footnote{
  margin:0 0 18px;
  padding:13px 15px;
  border-radius:12px;
}

.rkb-form-actions{
  margin:0;
  padding:18px 0 0;
  border-top:1px solid #edf1f6;
}

.rkb-form-actions .btn{
  min-height:40px;
}

@media(max-width:900px){
  .rkb-form-card{
    max-width:none;
  }

  .rkb-primary-grid{
    grid-template-columns:1fr 1fr;
  }

  .rkb-project-field{
    grid-column:1/-1;
  }
}

@media(max-width:640px){
  .rkb-form-card > .surface-head{
    padding:18px;
  }

  .rkb-form-card > form{
    padding:16px;
  }

  .rkb-form-section{
    padding:16px;
  }

  .rkb-primary-grid{
    grid-template-columns:1fr;
  }

  .rkb-project-field{
    grid-column:auto;
  }
}


/* ===== RKB DATE PICKER V1 ===== */

.rkb-date-control{
  position:relative;
  display:flex;
  align-items:center;
}

.rkb-date-control #rkb_date{
  width:100%;
  padding-right:46px;
  cursor:pointer;
  font-variant-numeric:tabular-nums;
  letter-spacing:.025em;
}

.rkb-date-trigger{
  position:absolute;
  right:5px;
  top:50%;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#475569;
  cursor:pointer;
  transform:translateY(-50%);
  transition:background .16s ease,color .16s ease;
}

.rkb-date-trigger:hover{
  background:#eff6ff;
  color:#2563eb;
}

.rkb-date-trigger:focus-visible{
  outline:2px solid #60a5fa;
  outline-offset:1px;
}

.rkb-date-trigger svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.rkb-date-native{
  position:absolute;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:0 !important;
  opacity:0;
  pointer-events:none;
  overflow:hidden;
}


/* ===== RKB DETAIL PAGE V1 ===== */

.rkb-detail-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) 245px;
  gap:20px;
  margin-bottom:16px;
  padding:24px;
  border:1px solid #e2e8f0;
  border-radius:18px;
  background:linear-gradient(135deg,#ffffff 0%,#f8fbff 100%);
  box-shadow:0 10px 32px rgba(15,23,42,.04);
}

.rkb-detail-main h2{
  margin:6px 0 4px;
  color:#0f172a;
  font-size:24px;
  letter-spacing:-.03em;
}

.rkb-detail-main>p{
  margin:0;
  color:#64748b;
  font-size:11px;
}

.rkb-detail-meta{
  display:flex;
  flex-wrap:wrap;
  gap:28px;
  margin-top:24px;
}

.rkb-detail-meta>div{
  min-width:110px;
}

.rkb-detail-meta span{
  display:block;
  color:#94a3b8;
  font-size:8px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.rkb-detail-meta strong{
  display:block;
  margin-top:5px;
  color:#0f172a;
  font-size:11px;
}

.rkb-detail-progress{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:19px;
  border-radius:16px;
  background:#111827;
}

.rkb-progress-big strong{
  display:block;
  color:#fff;
  font-size:30px;
  letter-spacing:-.04em;
}

.rkb-progress-big span{
  display:block;
  margin-top:2px;
  margin-bottom:14px;
  color:#94a3b8;
  font-size:8px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.rkb-detail-progress .progress-track{
  height:7px;
  background:rgba(255,255,255,.12);
}

.rkb-detail-progress small{
  display:block;
  margin-top:9px;
  color:#94a3b8;
  font-size:8px;
}

.rkb-status-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
  margin-bottom:16px;
}

.rkb-status-grid article{
  padding:15px;
  border:1px solid #e2e8f0;
  border-radius:14px;
  background:#fff;
}

.rkb-stat-label{
  display:block;
  color:#64748b;
  font-size:8px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.rkb-status-grid article strong{
  display:block;
  margin-top:7px;
  color:#0f172a;
  font-size:21px;
}

.rkb-status-grid article small{
  display:block;
  margin-top:2px;
  color:#94a3b8;
  font-size:8px;
}

.rkb-stat-success{
  border-color:#bbf7d0 !important;
  background:#f6fff9 !important;
}

.rkb-stat-success strong{
  color:#047857 !important;
}

.rkb-stat-danger{
  border-color:#fecdd3 !important;
  background:#fff7f8 !important;
}

.rkb-stat-danger strong{
  color:#be123c !important;
}

.rkb-component-card{
  overflow:hidden;
}

.rkb-detail-notes{
  margin-top:16px;
}

.rkb-detail-notes h3{
  margin:5px 0 0;
  color:#0f172a;
  font-size:13px;
}

.rkb-detail-notes p{
  margin:10px 0 0;
  color:#475569;
  font-size:10px;
  line-height:1.7;
  white-space:pre-line;
}

@media(max-width:1000px){
  .rkb-status-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:800px){
  .rkb-detail-hero{
    grid-template-columns:1fr;
  }
}

@media(max-width:640px){
  .rkb-detail-hero{
    padding:18px;
  }

  .rkb-status-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .rkb-detail-meta{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
  }
}


/* =========================================================
   RKB INLINE COMPONENT ADD / EDIT
   ========================================================= */

.rkb-item-table{
    min-width:1100px;
}

.rkb-item-table td > small{
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-size:9px;
    line-height:1.4;
}

.rkb-inline-form-row[hidden]{
    display:none !important;
}

.rkb-inline-form-row td{
    padding:0 !important;
    background:#f8fafc;
}

.rkb-inline-panel{
    padding:18px 20px;
    border-top:1px solid #e8edf3;
    border-bottom:1px solid #e8edf3;
    background:
        linear-gradient(
            180deg,
            #fbfdff 0%,
            #f8fafc 100%
        );
}

.rkb-inline-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}

.rkb-inline-panel-head strong{
    display:block;
    color:#0f172a;
    font-size:12px;
    font-weight:800;
}

.rkb-inline-panel-head small{
    display:block;
    margin-top:3px;
    color:var(--muted);
    font-size:9px;
}

.rkb-inline-grid{
    display:grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap:12px;
}

.rkb-inline-span-2{
    grid-column:span 2;
}

.rkb-inline-span-4{
    grid-column:1 / -1;
}

.rkb-inline-field{
    min-width:0;
}

.rkb-inline-field label{
    display:block;
    margin-bottom:6px;
    color:#334155;
    font-size:9px;
    font-weight:800;
}

.rkb-inline-field input{
    width:100%;
    height:40px;
    padding:0 12px;
    border:1px solid #dbe3ec;
    border-radius:10px;
    outline:none;
    background:#fff;
    color:#0f172a;
    font-size:10px;
    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.rkb-inline-field input:focus{
    border-color:#fda4af;
    box-shadow:
        0 0 0 3px rgba(244,63,94,.08);
}

.rkb-inline-field input::placeholder{
    color:#94a3b8;
}

.rkb-inline-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid #e8edf3;
}

.rkb-inline-errors{
    margin-bottom:14px;
    padding:11px 13px;
    border:1px solid #fecdd3;
    border-radius:10px;
    background:#fff1f2;
    color:#9f1239;
    font-size:9px;
}

.rkb-inline-errors strong{
    display:block;
    margin-bottom:5px;
}

.rkb-inline-errors ul{
    margin:0;
    padding-left:18px;
}

.rkb-btn-sm{
    min-height:30px;
    padding:6px 10px;
    border-radius:9px;
    font-size:9px;
}

.rkb-table-empty{
    padding:34px 20px !important;
    color:var(--muted);
    text-align:center;
    font-size:10px !important;
}

@media(max-width:900px){

    .rkb-inline-grid{
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

    .rkb-inline-span-4{
        grid-column:1 / -1;
    }
}

@media(max-width:640px){

    .rkb-inline-grid{
        grid-template-columns:1fr;
    }

    .rkb-inline-span-2,
    .rkb-inline-span-4{
        grid-column:auto;
    }

    .rkb-inline-actions{
        align-items:stretch;
        flex-direction:column-reverse;
    }

    .rkb-inline-actions .btn{
        width:100%;
    }
}


/* =========================================================
   TPOS DASHBOARD — OPERATIONAL HEALTH GAUGE
   Desktop command-center visual
   ========================================================= */

.operational-health{
    display:none;
}

@media(min-width:1451px){

    .welcome-copy-v2{
        padding-right:250px;
    }

    .operational-health{
        position:absolute;
        top:0;
        right:0;
        bottom:0;

        width:226px;

        display:flex;
        flex-direction:column;
        align-items:center;

        padding:16px;

        border:1px solid rgba(219,227,239,.95);
        border-radius:20px;

        background:
            radial-gradient(
                circle at 50% 34%,
                rgba(37,99,235,.08),
                transparent 38%
            ),
            linear-gradient(
                180deg,
                rgba(255,255,255,.97) 0%,
                rgba(248,250,252,.95) 100%
            );

        box-shadow:
            0 12px 32px rgba(15,23,42,.045),
            inset 0 1px 0 rgba(255,255,255,.9);

        overflow:hidden;
    }

    .operational-health:before{
        content:"";
        position:absolute;
        inset:auto -50px -70px auto;

        width:150px;
        height:150px;

        border-radius:50%;

        background:
            radial-gradient(
                circle,
                rgba(225,29,46,.07),
                transparent 68%
            );

        pointer-events:none;
    }

    .health-head{
        position:relative;
        z-index:1;

        width:100%;

        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:8px;
    }

    .health-head strong{
        display:block;
        margin-top:4px;

        color:#0f172a;

        font-size:12px;
        font-weight:850;
        letter-spacing:-.02em;
    }

    .health-live{
        display:inline-flex;
        align-items:center;
        gap:5px;

        padding:5px 7px;

        border-radius:999px;

        background:#ecfdf5;
        color:#15803d;

        font-size:8px;
        font-weight:900;
        letter-spacing:.06em;
    }

    .health-live i{
        width:5px;
        height:5px;

        border-radius:50%;

        background:#22c55e;

        box-shadow:
            0 0 0 4px rgba(34,197,94,.09);
    }

    .health-gauge{
        position:relative;
        z-index:1;

        width:118px;
        height:118px;

        display:grid;
        place-items:center;

        margin-top:18px;
        padding:9px;

        border-radius:50%;

        background:
            conic-gradient(
                #2563eb 0 var(--health-progress),
                #e5ecf5 var(--health-progress) 100%
            );

        box-shadow:
            0 12px 28px rgba(37,99,235,.11);
    }

    .health-gauge-core{
        width:100%;
        height:100%;

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;

        border-radius:50%;

        background:
            linear-gradient(
                145deg,
                #ffffff,
                #f8fafc
            );

        box-shadow:
            inset 0 0 0 1px #edf2f7;
    }

    .health-gauge-core strong{
        color:#0f172a;

        font-size:28px;
        line-height:1;
        font-weight:900;
        letter-spacing:-.055em;

        font-variant-numeric:tabular-nums;
    }

    .health-gauge-core span{
        margin-top:4px;

        color:#94a3b8;

        font-size:8px;
        font-weight:900;
        letter-spacing:.12em;
    }

    .health-progress-label{
        position:relative;
        z-index:1;

        margin-top:10px;

        color:#475569;

        font-size:9px;
        font-weight:750;

        text-align:center;
    }

    .health-stats{
        position:relative;
        z-index:1;

        width:100%;

        display:grid;
        grid-template-columns:
            repeat(3,minmax(0,1fr));

        margin-top:15px;

        border-top:1px solid #edf1f6;
        border-bottom:1px solid #edf1f6;
    }

    .health-stats > div{
        min-width:0;

        padding:10px 4px;

        text-align:center;
    }

    .health-stats > div + div{
        border-left:1px solid #edf1f6;
    }

    .health-stats span,
    .health-stats strong{
        display:block;
    }

    .health-stats span{
        color:#94a3b8;

        font-size:7px;
        font-weight:850;
        letter-spacing:.05em;
        text-transform:uppercase;
    }

    .health-stats strong{
        margin-top:4px;

        color:#0f172a;

        font-size:15px;
        font-weight:900;

        font-variant-numeric:tabular-nums;
    }

    .health-status{
        position:relative;
        z-index:1;

        width:100%;

        display:flex;
        align-items:center;
        justify-content:center;
        gap:7px;

        margin-top:auto;
        padding:8px 9px;

        border-radius:11px;

        font-size:8px;
        font-weight:900;
        letter-spacing:.06em;
        text-transform:uppercase;
    }

    .health-status i{
        width:6px;
        height:6px;

        border-radius:50%;

        background:currentColor;
    }

    .health-normal{
        color:#15803d;
        background:#ecfdf5;
        border:1px solid #bbf7d0;
    }

    .health-warning{
        color:#b45309;
        background:#fffbeb;
        border:1px solid #fde68a;
    }

    .health-danger{
        color:#be123c;
        background:#fff1f2;
        border:1px solid #fecdd3;
    }

    .health-footer{
        position:relative;
        z-index:1;

        display:block;

        margin-top:8px;

        color:#94a3b8;

        font-size:7px;
        font-weight:750;
        letter-spacing:.08em;
        text-transform:uppercase;
    }
}



/* =========================================================
   TPOS 2.0 — LIGHT INDUSTRIAL SIDEBAR V1
   QA visual refinement
   ========================================================= */

.sidebar{
    background:
        linear-gradient(
            180deg,
            #fbfcfe 0%,
            #f7f9fc 52%,
            #f4f7fb 100%
        );

    color:#334155;

    border-right:1px solid #e2e8f0;

    box-shadow:
        8px 0 28px rgba(15,23,42,.035);
}


/* Header / Brand */

.sidebar-head{
    border-bottom:1px solid #e5eaf1;
}

.brand{
    color:#0f172a;
}

.brand-copy strong{
    color:#0f172a;
}

.brand-copy small{
    color:#64748b;
}


/* Section labels */

.nav-section{
    color:#94a3b8;
}


/* Navigation */

.nav-item{
    color:#475569;

    border:1px solid transparent;

    background:transparent;
}

.nav-item:hover{
    color:#0f172a;

    background:#f1f5f9;

    border-color:#e8edf4;
}

.nav-item.active{
    color:#be123c;

    background:
        linear-gradient(
            90deg,
            #fff1f2 0%,
            #fff7f8 100%
        );

    border-color:#ffe4e6;

    box-shadow:
        inset 4px 0 0 #e11d48,
        0 4px 14px rgba(225,29,72,.045);
}

.nav-item.active .nav-icon{
    color:#e11d48;
}

.nav-icon{
    color:#64748b;
}


/* Collapse / close buttons */

.sidebar-collapse-btn,
.sidebar-close-btn{
    color:#64748b;

    border:1px solid #e2e8f0;

    background:#ffffff;

    box-shadow:
        0 3px 10px rgba(15,23,42,.04);
}

.sidebar-collapse-btn:hover,
.sidebar-close-btn:hover{
    color:#be123c;

    background:#fff1f2;

    border-color:#fecdd3;
}

.sidebar-collapsed .sidebar-collapse-btn{
    background:#ffffff;

    color:#64748b;

    border:1px solid #e2e8f0;

    box-shadow:
        0 3px 10px rgba(15,23,42,.05);
}


/* Workspace card */

.workspace-note{
    border:1px solid #e2e8f0;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fafc 100%
        );

    box-shadow:
        0 5px 16px rgba(15,23,42,.035);
}

.workspace-note-icon{
    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #fb7185,
            #e11d48
        );

    box-shadow:
        0 5px 14px rgba(225,29,72,.16);
}

.workspace-note-copy strong{
    color:#0f172a;
}

.workspace-note-copy small{
    color:#64748b;
}


/* User area */

.sidebar-user{
    border:1px solid #e2e8f0;

    background:#ffffff;

    box-shadow:
        0 5px 16px rgba(15,23,42,.035);
}

.sidebar-user-copy strong{
    color:#0f172a;
}

.sidebar-user-copy small{
    color:#64748b;
}

.avatar{
    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #f43f5e,
            #be123c
        );

    box-shadow:
        0 5px 14px rgba(190,18,60,.16);
}


/* Logout */

.sidebar-logout .icon-btn{
    color:#64748b;

    border:1px solid transparent;

    background:transparent;
}

.sidebar-logout .icon-btn:hover{
    color:#be123c;

    border-color:#fecdd3;

    background:#fff1f2;
}


/* Floating tooltip for collapsed sidebar */

.sidebar-floating-tooltip{
    color:#334155;

    border:1px solid #e2e8f0;

    background:#ffffff;

    box-shadow:
        0 10px 28px rgba(15,23,42,.12);
}


/* Mobile drawer */

@media(max-width:1024px){

    .sidebar{
        box-shadow:
            18px 0 48px rgba(15,23,42,.16);
    }

}




/* =========================================================
   TPOS 2.0 — LIGHT INDUSTRIAL SIDEBAR V1.1
   Final visual polish
   ========================================================= */

/* 1. Sedikit lebih tegas dari V1 */
.sidebar{
    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #f4f7fa 52%,
            #f3f6fa 100%
        );

    border-right:1px solid #dce3ec;

    box-shadow:
        7px 0 24px rgba(15,23,42,.028);
}


/* 2. Menu normal sedikit lebih kuat */
.nav-item{
    color:#334155;
}

.nav-icon{
    color:#5f6f82;
}


/* 3. Section label lebih jelas tetapi tetap subtle */
.nav-section{
    color:#8291a5;
}


/* 4. Workspace card dibuat lebih menyatu */
.workspace-note{
    background:#fbfcfe;

    border-color:#dfe6ee;

    box-shadow:
        0 3px 10px rgba(15,23,42,.025);
}


/* 5. User card dibuat lebih tenang */
.sidebar-user{
    background:#ffffff;

    border-color:#dfe6ee;

    box-shadow:
        0 3px 10px rgba(15,23,42,.025);
}


/* Active state tetap dipertahankan */
.nav-item.active{
    color:#be123c;

    background:
        linear-gradient(
            90deg,
            #fff1f2 0%,
            #fff7f8 100%
        );

    border-color:#ffe4e6;

    box-shadow:
        inset 4px 0 0 #e11d48,
        0 3px 10px rgba(225,29,72,.035);
}