body.app-body .app-sidebar { border: 0; background: radial-gradient(circle at 5% 76%, rgba(27, 174, 126, .16), transparent 30%), linear-gradient(180deg, #043b37 0%, #06473f 55%, #043b37 100%); color: #fff; box-shadow: 6px 0 28px rgba(4, 59, 55, .12); }
body.app-body .sidebar-brand { height: 78px; justify-content: space-between; padding: 0 18px; border: 0; background: transparent; }
body.app-body .sidebar-wordmark { gap: 11px; }
body.app-body .sidebar-wordmark .brand-shield { display:block; width:38px; height:42px; padding:4px; object-fit:contain; background:linear-gradient(145deg,#effff7,#a8e3c9); border:1px solid rgba(255,255,255,.38); border-radius:12px 12px 15px 15px; box-shadow:0 8px 22px rgba(0,0,0,.16); }
body.app-body .brand-copy { display: grid; line-height: 1.05; }
body.app-body .sidebar-wordmark strong { font-family: var(--font-display); font-size: 20px; font-weight: 800; }
body.app-body .brand-copy small { margin-top: 5px; color: rgba(226, 252, 240, .62); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
body.app-body .icon-button { width: 36px; height: 36px; min-width: 36px; border: 1px solid rgba(255,255,255,.14); border-radius: 11px; background: rgba(255,255,255,.06); transition: background .18s ease, border-color .18s ease; }
body.app-body .icon-button:hover { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.12); }
body.app-body .sidebar-nav { gap: 3px; padding: 12px 14px 18px; }
body.app-body .sidebar-section-label { padding: 14px 13px 6px; color: rgba(218, 246, 234, .48); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
body.app-body .nav-link { position: relative; min-height: 44px; gap: 12px; padding: 10px 13px; border-radius: 12px; color: rgba(240, 255, 248, .78); font-weight: 600; transition: .18s ease; }
body.app-body .nav-link .material-symbols-rounded { min-width: 22px; color: rgba(226, 252, 240, .72); font-size: 21px; }
body.app-body .nav-link:hover { background: rgba(255,255,255,.075); color: #fff; transform: translateX(2px); }
body.app-body .nav-link:hover .material-symbols-rounded { color: #fff; }
body.app-body .nav-link.active { color: #fff; background: linear-gradient(100deg, #10a66f, #12b97a); box-shadow: 0 10px 22px rgba(0, 30, 26, .22); }
body.app-body .nav-link.active .material-symbols-rounded { color: #fff; font-variation-settings: "FILL" 1, "wght" 500; }
body.app-body .sidebar-footer { padding: 14px; border-color: rgba(255,255,255,.08); }
body.app-body .sidebar-user { padding: 10px; color: #fff; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: rgba(255,255,255,.045); }
body.app-body .sidebar-avatar { display: grid; place-items: center; width: 34px; height: 34px; min-width: 34px; border-radius: 50%; background: linear-gradient(145deg, #4fca83, #158659); color: #fff; font-size: 11px; font-weight: 800; box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); }
body.app-body .sidebar-user strong { color: #fff; }
body.app-body .sidebar-user small { color: rgba(228,250,240,.58); }
body.app-body .sidebar-logout { margin-top: 8px; color: rgba(244,255,250,.72); }
body.app-body .sidebar-logout:hover { color: #fff; background: rgba(255,255,255,.07); }
body.app-body .app-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; height: 78px; padding: 0 clamp(16px, 2.2vw, 32px); border-bottom: 1px solid rgba(221,232,227,.8); background: rgba(255,255,255,.88); backdrop-filter: blur(18px); }
body.app-body .global-search { display: flex; align-items: center; flex: 1; max-width: 650px; height: 44px; gap: 10px; padding: 0 13px; border: 1px solid var(--line); border-radius: 13px; background: #fbfdfc; box-shadow: 0 4px 14px rgba(12, 52, 46, .035); }
body.app-body .global-search > span { color: var(--ink-500); font-size: 21px; }
body.app-body .global-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink-950); font: 500 13px var(--font-body); }
body.app-body .global-search input::placeholder { color: #89a09c; }
body.app-body .global-search kbd { padding: 4px 7px; border: 1px solid #e4ebe8; border-radius: 6px; background: #f4f7f6; color: #718985; font: 600 10px var(--font-body); }
body.app-body .topbar-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
body.app-body .topbar-icon { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: var(--ink-600); }
body.app-body .topbar-icon:hover { background: var(--surface-soft); color: var(--green-600); }
body.app-body .topbar-icon i { position: absolute; right: 8px; top: 7px; width: 6px; height: 6px; border: 2px solid #fff; border-radius: 50%; background: var(--green-500); }
body.app-body .topbar-divider { width: 1px; height: 28px; background: var(--line); }
body.app-body .topbar-profile { display: flex; align-items: center; gap: 9px; }
body.app-body .topbar-profile > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--green-900); color: #fff; font-size: 11px; font-weight: 800; }
body.app-body .topbar-profile div { display: grid; line-height: 1.15; }
body.app-body .topbar-profile strong { max-width: 135px; overflow: hidden; color: var(--ink-950); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
body.app-body .topbar-profile small { margin-top: 3px; color: var(--ink-500); font-size: 10px; }
body.app-body .app-content { padding: clamp(16px, 2vw, 30px); }
body.app-body .card, body.app-body .employee-section, body.app-body .folder-toolbar, body.app-body .folder-sidebar { border-color: var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
body.app-body .btn-primary { background: var(--green-600); box-shadow: 0 6px 14px rgba(12,155,104,.16); }
body.app-body .btn-primary:hover { background: #087f57; }
body.app-body .input:focus { border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(20,184,122,.12); }
body.app-body .sidebar-collapsed { width: 68px!important; min-width: 68px!important; max-width: 68px!important; overflow: visible!important; }
body.app-body .sidebar-collapsed .sidebar-brand { height: 68px; justify-content: center; padding: 0; }
body.app-body .sidebar-collapsed .sidebar-wordmark { display: flex; }
body.app-body .sidebar-collapsed .sidebar-wordmark .brand-shield { width: 36px; height: 40px; min-width: 36px; }
body.app-body .sidebar-collapsed .brand-copy, body.app-body .sidebar-collapsed .sidebar-section-label { display: none; }
body.app-body .sidebar-collapsed .icon-button { position: absolute; z-index: 4; top: 22px; right: -10px; width: 22px; height: 22px; min-width: 22px; margin: 0!important; border: 2px solid #f5f8f7; border-radius: 50%; background: #fff; color: var(--green-800); box-shadow: 0 4px 12px rgba(4,59,55,.22); }
body.app-body .sidebar-collapsed .icon-button:hover { border-color: #f5f8f7; background: #e5f8ef; color: var(--green-900); }
body.app-body .sidebar-collapsed .icon-button .material-symbols-rounded { font-size: 16px; font-variation-settings: "wght" 650; }
body.app-body .sidebar-collapsed .sidebar-nav { align-items: center; gap: 5px; padding: 10px 0 14px; }
body.app-body .sidebar-collapsed .nav-link { width: 44px; height: 44px; min-height: 44px; justify-content: center; gap: 0; margin: 0; padding: 0; border-radius: 12px; }
body.app-body .sidebar-collapsed .nav-link:hover { transform: none; }
body.app-body .sidebar-collapsed .nav-link .material-symbols-rounded { display: grid; place-items: center; width: 22px; min-width: 22px; margin: 0; font-size: 21px; }
body.app-body .sidebar-collapsed .sidebar-footer { display: grid; justify-items: center; gap: 6px; padding: 10px 0 12px; }
body.app-body .sidebar-collapsed .sidebar-user { width: 44px; height: 44px; justify-content: center; padding: 0; border-color: transparent; background: transparent; }
body.app-body .sidebar-collapsed .sidebar-avatar { width: 34px; height: 34px; min-width: 34px; }
body.app-body .sidebar-collapsed .sidebar-footer form { width: 44px; }
body.app-body .sidebar-collapsed .sidebar-logout { width: 44px; height: 44px; justify-content: center; margin: 0; padding: 0; border-radius: 12px; }
@media (max-width: 767px) { body.app-body .app-topbar { height: 66px; padding: 0 14px; } body.app-body .global-search kbd, body.app-body .topbar-profile div, body.app-body .topbar-divider { display: none; } body.app-body .topbar-actions { gap: 4px; } }