/* Winsum Tracker — full clean CSS */

*{box-sizing:border-box}
html,body{height:100%}

:root{
  --ui-radius: 8px;
  --ui-control-h: 36px;
  --sidebar-expanded-w: 260px;
  --sidebar-collapsed-w: 100px;
}

body{
  margin:0;
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;
  background:var(--bg);
  color:var(--text);
}

a{color:inherit;text-decoration:none}

code{
  background:rgba(255,255,255,.08);
  padding:2px 6px;
  border-radius:var(--ui-radius);
}

/* =========================
   APP SHELL
========================= */
.shell{
  display:flex;
  height:100vh;
  width:100vw;
}

.sidebar{
  width:var(--sidebar-expanded-w);
  background:rgba(255,255,255,.03);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding:10px 8px;
  gap:12px;
  transition:width .18s ease;
}

.sidebar[data-collapsed="1"]{
  width:var(--sidebar-collapsed-w);
  padding:14px 10px;
}

.main{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
  background:var(--bg);
}

/* =========================
   SHARED SHAPE SYSTEM
========================= */
.brand,
.userCard,
.themeRow select,
.btnPrimary,
.btnGhost,
.sheetBtn,
.sheetSearch,
.sheetSelect,
.iconBtn,
.sidebarToggleBtn,
.footerLogoutBtn,
.hoverLevel,
.hoverLevel a,
.card,
.sheetShell,
.sheetStatus,
.sheetTable .filters input,
.loginCard,
.loginForm input,
.alert,
.underConstruction,
.sheetWrap,
.sheetTableWrap{
  border-radius:var(--ui-radius) !important;
}

/* =========================
   BRAND
========================= */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
}

.brandMark{
  width:38px;
  height:38px;
  border-radius:var(--ui-radius);
  background:#fff;
  display:grid;
  place-items:center;
  overflow:hidden;
}

.brandMark img{
  max-width:30px;
  max-height:30px;
}

.brandText{min-width:0}

.brandTitle{
  font-weight:800;
  font-size:14px;
  line-height:1.1;
}

.brandSub{
  font-size:11px;
  color:var(--muted);
  margin-top:4px;
}

.sidebar[data-collapsed="1"] .brandText{display:none}
.sidebar[data-collapsed="1"] .brand{justify-content:center}

/* =========================
   NAVIGATION
========================= */
.nav{
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:auto;
  padding-right:2px;
}

.navItem{
  border-radius:var(--ui-radius);
  overflow:visible;
}

.navItem.level-0{margin-top:2px}
.navItem.level-0 + .navItem.level-0{margin-top:8px}
.navItem.level-0.open{margin-bottom:8px}

.navLink{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:38px;
  padding:6px 10px;
  border:1px solid transparent;
  border-radius:var(--ui-radius) !important;
}

.navItem.level-0 > .navLink{font-weight:600}

.navIcon{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}

.navIcon svg{
  width:22px;
  height:22px;
}

.navLabel{
  flex:1;
  font-size:13px;
  line-height:1.32;
  white-space:normal;
  overflow:hidden;
  text-overflow:ellipsis;
}

.navItem.level-0 > .navLink .navLabel,
.navItem.level-1 > .navLink .navLabel,
.navItem.level-2 > .navLink .navLabel{
  font-size:13px;
  line-height:1.32;
}

.navItem.level-0 > .navLink .navLabel{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  white-space:normal;
}

.navChevron{
  width:16px;
  height:16px;
  display:grid;
  place-items:center;
  margin-left:auto;
  opacity:.8;
}

.navChevron svg{
  width:16px;
  height:16px;
}

.navChevronSpacer{opacity:0}
.navCorner,
.navCornerSpacer{display:none !important}

.navItem.active > .navLink{
  background:var(--primary);
  color:var(--primaryText);
  border-color:rgba(0,0,0,.08);
}

.navItem.active > .navLink,
.navItem.active > .navLink .navLabel{
  color:var(--primaryText) !important;
}

.navItem:not(.active) > .navLink:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.06);
}

/* Child tree */
.navChildren{
  display:none;
  margin-left:0 !important;
  padding-left:0 !important;
  padding-top:4px !important;
  padding-bottom:4px !important;
  border-left:none !important;
  flex-direction:column;
  gap:2px !important;
}

.navItem.open > .navChildren{display:flex}
.navItem.open > .navLink .navChevron svg{
  transform:rotate(90deg);
  transition:transform .15s ease;
}

.navItem.level-1 > .navLink,
.navItem.level-2 > .navLink{
  padding-left:42px;
  padding-right:10px;
  padding-top:8px;
  padding-bottom:8px;
  min-height:0;
  align-items:flex-start;
}

.navItem.level-1 > .navLink .navLabel,
.navItem.level-2 > .navLink .navLabel{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  white-space:normal;
  text-overflow:ellipsis;
}

.navItem.level-1 > .navLink .navIcon,
.navItem.level-2 > .navLink .navIcon{
  display:none !important;
}

.navItem.level-1 .navChevron,
.navItem.level-2 .navChevron{
  display:none !important;
}

/* =========================
   COLLAPSED SIDEBAR
========================= */
.sidebar[data-collapsed="1"] .navChildren{
  display:none !important;
}

.sidebar[data-collapsed="1"] .navLink{
  flex-direction:column;
  justify-content:center;
  gap:5px;
  padding:10px 6px;
  text-align:center;
}

.sidebar[data-collapsed="1"] .navIcon{
  width:24px;
  height:24px;
}
.sidebar[data-collapsed="1"] .navIcon svg{
  width:24px;
  height:24px;
}

.sidebar[data-collapsed="1"] .navLabel{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  overflow:hidden !important;
  text-overflow:ellipsis;
  white-space:normal !important;
  opacity:1 !important;
  visibility:visible !important;
  font-size:10px !important;
  line-height:1.05 !important;
  text-align:center;
  max-width:76px;
  color:var(--muted) !important;
  margin-top:2px;
}

.sidebar[data-collapsed="1"] .navChevron{
  display:none !important;
}

.sidebar[data-collapsed="1"] .navItem.hasChildren{
  overflow:visible;
}

.sidebar[data-collapsed="1"] .navItem.hasChildren > .navLink{
  position:relative;
}

.sidebar[data-collapsed="1"] .navItem.hasChildren > .navLink::after{
  content:"";
  position:absolute;
  bottom:4px;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:4px solid var(--muted);
  opacity:.7;
  pointer-events:none;
}

.sidebar[data-collapsed="1"] .navItem.hasChildren:hover > .navLink::after{
  opacity:1;
}

/* =========================
   HOVER POPUP
========================= */
.hoverMenu{
  position:fixed;
  z-index:9999;
  display:flex;
  gap:10px;
  border-radius:var(--ui-radius);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}

.hoverLevel{
  min-width:220px;
  background:rgba(18,26,43,.98);
  border:1px solid rgba(255,255,255,.12);
  padding:10px;
  color:rgba(255,255,255,.92);
  border-radius:var(--ui-radius) !important;
}

.hoverLevel .hmTitle{
  font-size:11px;
  font-weight:600;
  letter-spacing:0.5px;
  color:rgba(255,255,255,.55);
  padding:8px 10px 6px;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:4px;
}

.hoverLevel a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  white-space:nowrap;
  color:rgba(255,255,255,.92);
  text-decoration:none;
  font-size:13px;
  border-radius:var(--ui-radius) !important;
}

.hoverLevel a:hover{
  background:rgba(255,255,255,.08);
}

.hoverLevel .hmIcon{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
}
.hoverLevel .hmIcon svg{
  width:18px;
  height:18px;
}
.hoverLevel .hmArrow{
  margin-left:auto;
  opacity:.7;
}

/* =========================
   SIDEBAR TOGGLE / FOOTER
========================= */
.sidebarToggleBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  padding:0;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text);
  cursor:pointer;
  box-shadow:none;
}

.sidebarToggleBtn:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
}

.sidebarToggleIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  line-height:1;
}

.sidebarToggleIcon svg{
  width:16px;
  height:16px;
  display:block;
}

.sidebarToggleLabel{display:none}

.userCard{
  padding:10px 12px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
}

.userTitle{
  font-size:11px;
  color:var(--muted);
}

.userValue{
  font-size:13px;
  margin-top:4px;
  word-break:break-all;
}

.themeRow{
  display:flex;
  gap:10px;
  align-items:center;
}

.themeRow select{
  flex:1;
  min-width:0;
  height:var(--ui-control-h);
  padding:0 12px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  color:var(--text);
}

.sidebar[data-collapsed="1"] .themeRow,
.sidebar[data-collapsed="1"] .userCard{
  display:none;
}

.sidebarFooter{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:stretch;
}

.footerActionRow{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
}

.footerLogoutBtn{
  flex:1 1 auto;
  margin:0;
  text-align:center;
}

.footerActionRow .sidebarToggleBtn{
  flex:0 0 36px;
  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
  max-width:36px;
  max-height:36px;
  margin-left:auto;
  margin-right:0;
  overflow:hidden;
}

.sidebar[data-collapsed="1"] .footerActionRow{
  justify-content:center;
}
.sidebar[data-collapsed="1"] .footerLogoutBtn{
  display:none;
}
.sidebar[data-collapsed="1"] .footerActionRow .sidebarToggleBtn{
  margin:0 auto;
}

/* =========================
   BUTTONS / CONTROLS
========================= */
.btnPrimary{
  background:var(--primary);
  color:var(--primaryText);
  border:none;
  padding:0 16px;
  height:var(--ui-control-h);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  display:inline-flex;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:1 !important;
  border-radius:var(--ui-radius) !important;
}

.btnPrimary:hover{filter:brightness(.97)}

.btnPrimary.wide{
  width:100%;
  height:var(--ui-control-h);
}

.btnGhost{
  display:inline-flex;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:1 !important;
  min-height:var(--ui-control-h);
  padding:0 16px;
  font-size:13px;border:1px solid var(--border);
  background:rgba(255,255,255,.02);
  border-radius:var(--ui-radius) !important;
}

.btnGhost:hover{
  background:rgba(255,255,255,.05);
}

.sidebar[data-collapsed="1"] .btnGhost{display:none}

/* =========================
   TOPBAR / CONTENT
========================= */
.topbar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.02);
}

.iconBtn{
  width:38px;
  height:38px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
  border-radius:var(--ui-radius) !important;
}

.iconBtn svg{
  width:18px;
  height:18px;
}

.crumbTitle{font-weight:700;font-size:15px}
.crumbSub{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

.content{
  padding:14px 16px 18px;
  overflow:auto;
  flex:1;
  background:var(--bg);
}

.card{
  max-width:980px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  padding:16px;
}

.card h3{margin:0 0 8px 0}

/* =========================
   LOGIN
========================= */
.loginShell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}

.loginCard{
  width:min(560px,92vw);
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  padding:22px;
}

.loginHead{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
}

.loginLogoBox{
  width:44px;
  height:44px;
  border-radius:var(--ui-radius);
  background:#fff;
  display:grid;
  place-items:center;
  overflow:hidden;
}

.loginLogoBox img{
  max-width:34px;
  max-height:34px;
}

.loginTitle{
  font-size:22px;
  font-weight:800;
  line-height:1;
}

.loginSub{
  color:var(--muted);
  margin-top:4px;
}

.loginForm{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.loginForm label{
  font-size:12px;
  color:var(--muted);
}

.loginForm input{
  padding:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--text);
  outline:none;
}

.loginForm input:focus{
  border-color:rgba(255,255,255,.24);
}

.alert{
  background:rgba(255,0,0,.12);
  border:1px solid rgba(255,0,0,.25);
  padding:10px 12px;
  margin-bottom:10px;
}

.loginFoot{
  color:var(--muted);
  margin-top:12px;
  font-size:12px;
}

/* =========================
   UNDER CONSTRUCTION
========================= */
.cardLike,
.underConstruction,
.sheetShell{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
}

.underConstructionStage{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:calc(100vh - 220px);
  padding:22px 0 14px;
}

.underConstruction{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:min(980px,94%);
  min-height:280px;
  gap:20px;
  padding:34px 38px;
}

.underConstruction .ucText{
  max-width:440px;
}

.underConstruction .ucText h2{
  font-size:20px;
  margin:0 0 8px;
  line-height:1.2;
}

.underConstruction .ucText p{
  font-size:15px;
  margin:0;
  color:var(--muted);
}

.underConstruction .ucVisual{
  width:25%;
  min-width:220px;
  justify-content:center;
  display:flex;
  align-items:center;
}

.underConstruction .ucMachine{
  position:relative;
  width:220px;
  height:184px;
  opacity:.95;
}

.underConstruction .ucTop{
  position:absolute;
  left:42px;
  top:18px;
  width:112px;
  height:26px;
  border-radius:18px 18px 8px 8px;
  background:linear-gradient(180deg,#7aa2ff,#5d7cff);
}
.underConstruction .ucBody{
  position:absolute;
  left:28px;
  top:40px;
  width:134px;
  height:86px;
  border-radius:22px 26px 18px 18px;
  background:linear-gradient(180deg,#8bb0ff,#5e7cff);
}
.underConstruction .ucNeedle{
  position:absolute;
  left:124px;
  top:78px;
  width:12px;
  height:58px;
  border-radius:6px;
  background:#b6c9ff;
}
.underConstruction .ucBase{
  position:absolute;
  left:10px;
  top:138px;
  width:190px;
  height:26px;
  border-radius:20px;
  background:linear-gradient(180deg,#5a76d8,#3c4fa8);
}
.underConstruction .ucWheel{
  position:absolute;
  right:8px;
  top:50px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:#c7d3ff;
  box-shadow:inset 0 0 0 10px #7d97ff;
}
.underConstruction .ucSpool{
  position:absolute;
  left:58px;
  top:2px;
  width:26px;
  height:16px;
  border-radius:8px;
  background:#d7e0ff;
}
.underConstruction .ucThread{
  position:absolute;
  left:70px;
  top:10px;
  width:2px;
  height:86px;
  background:#dfe6ff;
  transform:skewX(10deg);
}

.underConstructionStage + .sheetStatus,
.underConstructionStage + .sheetPlaceholder,
.underConstructionStage + .sheetWrap{
  display:none !important;
}

/* =========================
   SHEET VIEW
========================= */
.sheetShell{
  padding:14px 14px 10px;
}

.sheetHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
}

.sheetTitleWrap h2{
  margin:0 0 6px;
  font-size:20px;
}

.sheetMeta{
  font-size:12px;
  color:var(--muted);
  min-height:16px;
}

.sheetTools{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin:6px 0 4px;
}

.sheetToolsLeft{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.sheetToolsRight{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}

.sheetSelectorRow{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  margin-bottom:10px;
}

.sheetSelectWrap{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
}

.sheetSelectLabel{
  font-weight:600;
}

.sheetSelect,
.sheetSearch{
  height:var(--ui-control-h) !important;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-size:13px;
  padding:0 14px !important;
  border-radius:var(--ui-radius) !important;
  display:inline-flex;
  align-items:center;
}

.sheetSelect{
  min-width:200px;
}

.sheetSearch{
  min-width:168px;
}

.sheetBtn{
  height:var(--ui-control-h) !important;
  border:1px solid transparent;
  background:var(--primary);
  color:var(--primaryText) !important;
  font-size:13px;
  font-weight:600;
  padding:0 18px !important;
  cursor:pointer;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:1 !important;
  white-space:nowrap;
  border-radius:var(--ui-radius) !important;
}

.sheetBtn.secondary{
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  color:var(--text) !important;
}

.sheetStatus{
  margin:8px 0;
  padding:10px 12px;
  background:rgba(255,255,255,.04);
  color:var(--muted);
}

.sheetStatus.error{
  background:rgba(220,38,38,.14);
  color:#fecaca;
}

.sheetWrap{margin-top:4px}

.sheetTable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:14px;
}

.sheetTable thead th{
  position:sticky;
  top:0;
  background:rgba(255,255,255,.03);
  z-index:2;
}

.sheetTable th,
.sheetTable td{
  padding:9px 10px;
  border-bottom:1px solid var(--border);
  text-align:left;
  white-space:nowrap;
}

.sheetTable .filters th{
  padding:6px 8px;
  background:transparent;
}

.sheetTable .filters input{
  width:100%;
  height:32px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
  color:var(--text);
  padding:0 10px;
  border-radius:var(--ui-radius) !important;
}

.sheetEmpty{color:var(--text);opacity:.7}

/* =========================
   LIGHT THEME
========================= */
body[data-theme-mode="LIGHT"]{
  --bg:#f1f3f6;
  --surface:#ffffff;
  --border:#dfe5ec;
  --muted:#677489;
  color:var(--text);
}

body[data-theme-mode="LIGHT"] .sidebar{
  background:#ffffff;
  border-right:1px solid #dde5ee;
}

body[data-theme-mode="LIGHT"] .main,
body[data-theme-mode="LIGHT"] .content{
  background:#edf1f5;
}

body[data-theme-mode="LIGHT"] .topbar{
  background:#ffffff;
}

body[data-theme-mode="LIGHT"] .brand,
body[data-theme-mode="LIGHT"] .userCard,
body[data-theme-mode="LIGHT"] .themeRow select,
body[data-theme-mode="LIGHT"] .btnGhost,
body[data-theme-mode="LIGHT"] .iconBtn{
  background:#fff;
}

body[data-theme-mode="LIGHT"] .cardLike,
body[data-theme-mode="LIGHT"] .sheetShell,
body[data-theme-mode="LIGHT"] .sheetTableWrap,
body[data-theme-mode="LIGHT"] .underConstruction{
  background:#fff;
  border-color:#e1e7ef;
}

body[data-theme-mode="LIGHT"] .sheetBtn.secondary{
  background:#fff;
  color:#243041 !important;
  border-color:#dce4ed;
}

body[data-theme-mode="LIGHT"] .sheetBtn{
  color:#ffffff !important;
}

body[data-theme-mode="LIGHT"] .sheetBtn:not(.secondary){
  background:#011E37 !important;
  color:#ffffff !important;
}

body[data-theme-mode="LIGHT"] .btnPrimary{
  background:#011E37;
  color:#ffffff;
}

body[data-theme-mode="LIGHT"] .sheetSearch,
body[data-theme-mode="LIGHT"] .sheetSelect,
body[data-theme-mode="LIGHT"] .themeRow select{
  border-color:#dce4ed;
  color:#243041;
  background:#fff;
}

body[data-theme-mode="LIGHT"] .sheetStatus{
  background:#fff;
  border-color:#e1e7ef;
  color:#677489;
}

body[data-theme-mode="LIGHT"] .sheetTable thead th{
  background:#fff;
}

body[data-theme-mode="LIGHT"] .sheetTable .filters input{
  background:#fff;
}

body[data-theme-mode="LIGHT"] .sheetEmpty{
  color:#6b7280;
}

body[data-theme-mode="LIGHT"] .navItem:not(.active) > .navLink:hover{
  background:rgba(1,30,55,.14);
  border-color:rgba(1,30,55,.18);
}

body[data-theme-mode="LIGHT"] .navChildren{
  border-left:none !important;
}

body[data-theme-mode="LIGHT"] .navItem.level-1 > .navLink,
body[data-theme-mode="LIGHT"] .navItem.level-2 > .navLink{
  color:#344255;
}

body[data-theme-mode="LIGHT"] .navItem.active > .navLink,
body[data-theme-mode="LIGHT"] .navItem.active > .navLink .navIcon,
body[data-theme-mode="LIGHT"] .navItem.active > .navLink .navLabel{
  color:#FFFFFF !important;
}

body[data-theme-mode="LIGHT"] .sidebarToggleBtn{
  background:#ffffff;
  border-color:rgba(1,30,55,.18);
  color:#011E37;
}

body[data-theme-mode="LIGHT"] .sidebarToggleBtn:hover{
  background:#eef3f9;
  border-color:rgba(1,30,55,.24);
}

body[data-theme-mode="LIGHT"] .hoverMenu,
body[data-theme-mode="LIGHT"] .hoverLevel{
  background:#111A2B;
  color:#F2F5FA;
  border-radius:var(--ui-radius) !important;
}

body[data-theme-mode="LIGHT"] .hoverLevel{
  border:1px solid rgba(255,255,255,.14);
  overflow:hidden;
}

body[data-theme-mode="LIGHT"] .hoverLevel a{
  color:#F2F5FA;
}

body[data-theme-mode="LIGHT"] .hoverLevel a:hover{
  background:rgba(255,255,255,.08);
}

body[data-theme-mode="LIGHT"] .hoverLevel .hmTitle{
  color:rgba(242,245,250,.5);
  border-bottom-color:rgba(255,255,255,.1);
}

body[data-theme-mode="LIGHT"] .sidebar[data-collapsed="1"] .navItem.hasChildren > .navLink::after{
  border-top-color:rgba(0,0,0,.4);
}

body[data-theme-mode="LIGHT"] .sidebar[data-collapsed="1"] .navLabel{
  color:#677489 !important;
}

body[data-theme-mode="LIGHT"] .sidebar[data-collapsed="1"] .navItem.active .navLabel{
  color:#FFFFFF !important;
}

body[data-theme-mode="LIGHT"] .underConstruction{
  background:#f8fafc;
  border-color:#dfe6ef;
}

body[data-theme-mode="LIGHT"] .ucTop{
  background:linear-gradient(180deg,#6e8cff,#4566d6);
}
body[data-theme-mode="LIGHT"] .ucBody{
  background:linear-gradient(180deg,#89a1f2,#5d7de8);
}
body[data-theme-mode="LIGHT"] .ucBase{
  background:linear-gradient(180deg,#516bc7,#314690);
}

body[data-theme-mode="LIGHT"] .loginForm input{
  background:#fff;
  border-color:#dce4ed;
}

body[data-theme-mode="LIGHT"] .loginForm input:focus{
  border-color:rgba(1,30,55,.38);
}

body[data-theme-mode="LIGHT"] .loginCard{
  background:#fff;
  border-color:#dfe6ef;
}

body[data-theme-mode="LIGHT"] code{
  background:rgba(0,0,0,.06);
}

/* =========================
   DARK THEME
========================= */
body[data-theme-mode="DARK"] .sidebar{
  background:#0d1630;
}

body[data-theme-mode="DARK"] .main,
body[data-theme-mode="DARK"] .content{
  background:#071633;
}

body[data-theme-mode="DARK"] .sheetBtn:not(.secondary){
  color:#0B1220 !important;
}

body[data-theme-mode="DARK"] .sheetBtn.secondary{
  color:#F8FBFF !important;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:1200px){
  :root{
    --sidebar-expanded-w: 228px;
  }

  .underConstruction{
    width:min(900px,96%);
    min-height:250px;
    padding:28px 30px;
  }

  .underConstruction .ucVisual{
    min-width:200px;
  }
}

@media (max-width:1100px){
  .sheetTools{
    flex-direction:column;
    align-items:stretch;
  }

  .sheetToolsRight{
    margin-left:0;
    flex-wrap:wrap;
  }

  .underConstruction .ucVisual{
    min-width:180px;
    width:32%;
  }

  .underConstruction .ucText h2{
    font-size:28px;
  }
}