/* Shift Planner: versioned shifts and cross-department lock */
.sp-cellwrap{
  position: relative;
}

.sp-cell-blocked{
  background: rgba(148,163,184,.18) !important;
  border-color: rgba(148,163,184,.30) !important;
  color: rgba(71,85,105,.65);
  cursor: not-allowed;
}

.sp-cell-blocked:focus{
  box-shadow: none !important;
}

.sp-cell-badge{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(148,163,184,.16);
  border: 1px solid rgba(148,163,184,.28);
  color: rgba(71,85,105,.85);
  pointer-events: auto;
  white-space: nowrap;
}

.sp-cell-conflict .sp-cell-badge{
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.25);
  color: rgba(161,98,7,.95);
}

:root{
  --bg1:#f6fbff;
  --bg2:#eef5ff;
  --surface:#ffffff;
  --text:#0b1220;
  --muted:#5b677a;
  --border:rgba(11,18,32,.10);
  --shadow:0 18px 60px rgba(11,18,32,.10);
  --radius:22px;
  --accent:#006CFF;
  --accent2:#00B3FF;
  --accentSoft:rgba(0,108,255,.12);

  /* Sidebar sizing */
  --sidebarW:230px;
}

html.sidebar-collapsed{
  --sidebarW:60px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 10% 22%, rgba(0,108,255,.10), transparent 60%),
    radial-gradient(980px 540px at 88% 18%, rgba(0,179,255,.10), transparent 60%),
    radial-gradient(1100px 700px at 50% 110%, rgba(11,18,32,.06), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

a{color:inherit;text-decoration:none}
a:hover{opacity:.95}

.container{width:min(1120px, 92vw);margin:0 auto}

.nav{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(246,251,255,.78);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
  gap:18px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:34px;width:auto;border-radius:10px}
.brand .name{display:flex;flex-direction:column;line-height:1.05}
.brand .name strong{font-size:16px;font-weight:800}
.brand .name span{font-size:12px;color:var(--muted)}

.nav-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  font-weight:650;
  color:rgba(11,18,32,.86);
}
.pill.primary{
  border-color:rgba(0,108,255,.22);
  background:linear-gradient(135deg, rgba(0,108,255,.92), rgba(0,179,255,.85));
  color:#fff;
  box-shadow:0 16px 40px rgba(0,108,255,.18);
}

.hero{
  padding:70px 0 40px;
  text-align:center;
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(0,108,255,.18);
  background:rgba(255,255,255,.70);
  color:rgba(0,108,255,.92);
  font-weight:750;
  font-size:13px;
}
h1{
  margin:18px auto 10px;
  font-size:58px;
  line-height:1.02;
  letter-spacing:-.02em;
  max-width:18ch;
}
@media (max-width: 640px){
  h1{font-size:42px}
}
h1 .accent{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.lead{
  margin:0 auto;
  max-width:70ch;
  font-size:18px;
  line-height:1.65;
  color:rgba(11,18,32,.68);
}

.cta-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:22px;
}

.button{
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:rgba(255,255,255,.78);
  font-weight:750;
  color:rgba(11,18,32,.88);
  min-width:160px;
}
.button.primary{
  border-color:rgba(0,108,255,.20);
  background:linear-gradient(135deg, rgba(0,108,255,.94), rgba(0,179,255,.86));
  color:#fff;
  box-shadow:0 16px 42px rgba(0,108,255,.18);
}
.button.secondary{background:rgba(255,255,255,.92)}
.button:active{transform:translateY(1px)}

.small{font-size:13px;color:rgba(11,18,32,.56)}

.section{padding:48px 0}
.section-title{
  font-size:44px;
  line-height:1.12;
  letter-spacing:-.02em;
  margin:0 0 10px;
  text-align:center;
}
.section-title .accent{color:var(--accent)}
.section-sub{
  text-align:center;
  margin:0 auto 26px;
  max-width:72ch;
  color:rgba(11,18,32,.62);
  line-height:1.6;
}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width: 980px){
  .grid-3{grid-template-columns:1fr}
}

.card{
  background:rgba(255,255,255,.82);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.tile{padding:22px;text-align:left}
.icon{
  height:44px;width:44px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(0,108,255,.95), rgba(0,179,255,.85));
  color:#fff;
  box-shadow:0 14px 30px rgba(0,108,255,.18);
  margin-bottom:14px;
}
.badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,108,255,.18);
  background:rgba(0,108,255,.08);
  color:rgba(0,108,255,.92);
  font-size:12px;
  font-weight:750;
}

.tile h3{margin:10px 0 8px;font-size:18px;letter-spacing:-.01em}
.tile p{margin:0;color:rgba(11,18,32,.62);line-height:1.6}

.split{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center}
@media (max-width: 980px){
  .split{grid-template-columns:1fr}
}

.feature-list{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.check{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px;
  border-radius:18px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.72);
}
.check .mark{
  height:22px;width:22px;border-radius:999px;
  background:rgba(0,108,255,.10);
  border:1px solid rgba(0,108,255,.20);
  display:grid;place-items:center;
  color:rgba(0,108,255,.95);
  flex:0 0 auto;
  margin-top:1px;
}
.check strong{display:block;font-size:14px}
.check span{display:block;font-size:13px;color:rgba(11,18,32,.60);line-height:1.5}

.mock{padding:18px}
.mock-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.mock h4{margin:0;font-size:14px}
.pill-mini{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,108,255,.08);
  border:1px solid rgba(0,108,255,.16);
  color:rgba(0,108,255,.90);
  font-weight:750;
  font-size:12px;
}
.mock-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border-radius:16px;
  background:rgba(11,18,32,.03);
  border:1px solid rgba(11,18,32,.06);
  margin-bottom:10px;
}
.avatar{
  height:34px;width:34px;border-radius:999px;
  background:linear-gradient(135deg, rgba(0,108,255,.95), rgba(0,179,255,.85));
  display:grid;place-items:center;
  color:#fff;
  font-weight:850;
  font-size:13px;
}
.mock-name{display:flex;align-items:center;gap:12px;font-weight:750}
.shift-tag{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,108,255,.10);
  border:1px solid rgba(0,108,255,.16);
  color:rgba(0,108,255,.92);
  font-weight:750;
  font-size:12px;
}

.cta-band{
  margin:40px 0 70px;
  padding:34px 26px;
  border-radius:28px;
  border:1px solid rgba(0,108,255,.18);
  background:
    radial-gradient(700px 300px at 20% 20%, rgba(0,179,255,.20), transparent 60%),
    radial-gradient(700px 320px at 80% 20%, rgba(0,108,255,.22), transparent 60%),
    linear-gradient(135deg, rgba(0,108,255,.95), rgba(0,179,255,.85));
  color:#fff;
  text-align:center;
  box-shadow:0 24px 70px rgba(0,108,255,.22);
}
.cta-band h2{margin:0 0 10px;font-size:40px;letter-spacing:-.02em;line-height:1.12}
.cta-band p{margin:0 auto 18px;max-width:70ch;opacity:.92;line-height:1.6}
.cta-band .button{
  background:#fff;
  color:rgba(0,108,255,.95);
  border-color:rgba(255,255,255,.30);
}

.footer{padding:26px 0 46px;color:rgba(11,18,32,.55);font-size:13px}
hr.sep{border:0;border-top:1px solid rgba(11,18,32,.10);margin:26px 0}

.form-wrap{width:min(520px, 92vw);margin:44px auto 70px;padding:24px}
.form-wrap h2{margin:6px 0 12px}
label{display:block;font-size:13px;color:rgba(11,18,32,.72);margin:14px 0 8px}
input{
  width:100%;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(11,18,32,.12);
  background:rgba(255,255,255,.88);
  color:var(--text);
  outline:none;
}
input:focus{
  border-color:rgba(0,108,255,.30);
  box-shadow:0 0 0 4px rgba(0,108,255,.10);
}
.alert{
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(240,80,80,.35);
  background:rgba(240,80,80,.08);
  color:rgba(11,18,32,.85);
  margin:10px 0 0;
}
.ok{border-color:rgba(70,195,120,.35);background:rgba(70,195,120,.10)}

.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid rgba(11,18,32,.10);padding:12px 10px;text-align:left;font-size:14px}

/* App dashboard layout */
.app{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap:18px;
  padding:22px 0 70px;
}
@media (max-width: 980px){
  .app{grid-template-columns:1fr}
}

.sidebar{
  position:sticky;
  top:86px;
  align-self:start;
  height: calc(100vh - 110px);
  overflow:auto;
  padding:18px;
}

.sidebar-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 10px 16px;
  border-bottom:1px solid rgba(11,18,32,.08);
  margin: -2px -2px 14px;
}
.sidebar-head img{height:34px;width:auto;border-radius:10px}
.sidebar-head strong{display:block;font-weight:900;letter-spacing:-.01em}
.sidebar-head span{display:block;font-size:12px;color:rgba(11,18,32,.56);margin-top:2px}

.nav-group{
  margin-top:12px;
}
.nav-label{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(11,18,32,.48);
  padding:10px 10px 8px;
}
.nav-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(11,18,32,.08);
  background:rgba(255,255,255,.72);
  margin:6px 8px 0;
  font-weight:750;
  color:rgba(11,18,32,.82);
}
.nav-item:hover{border-color:rgba(0,108,255,.18)}
.nav-item.active{
  border-color:rgba(0,108,255,.22);
  background:rgba(0,108,255,.08);
  color:rgba(0,108,255,.95);
}
.nav-left{
  display:flex;
  align-items:center;
  gap:10px;
}
.nav-ico{
  height:30px;width:30px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(11,18,32,.035);
  border:1px solid rgba(11,18,32,.055);
  color:rgba(11,18,32,.70);
}
.nav-item.active .nav-ico{
  background:rgba(0,108,255,.10);
  border-color:rgba(0,108,255,.16);
  color:rgba(0,108,255,.95);
}
.nav-pill{
  font-size:11px;
  font-weight:850;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(0,108,255,.14);
  background:rgba(0,108,255,.08);
  color:rgba(0,108,255,.92);
}

.main{
  padding:0;
}
.main-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin:10px 0 18px;
}
.main-top h2{
  margin:0;
  font-size:40px;
  letter-spacing:-.02em;
  line-height:1.1;
}
.main-top p{
  margin:8px 0 0;
  color:rgba(11,18,32,.62);
  line-height:1.6;
  max-width:72ch;
}
.toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.search{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid rgba(11,18,32,.10);
  background:rgba(255,255,255,.80);
  min-width:320px;
}
@media (max-width: 980px){
  .search{min-width: 0; width:100%}
  .toolbar{width:100%}
}
.search input{
  border:0;
  outline:none;
  background:transparent;
  padding:0;
  margin:0;
}
.search input:focus{box-shadow:none}
.search .sico{
  height:26px;width:26px;border-radius:999px;
  display:grid;place-items:center;
  background:rgba(0,108,255,.10);
  border:1px solid rgba(0,108,255,.16);
  color:rgba(0,108,255,.92);
  font-weight:900;
}

.panel{
  padding:22px;
}
.panel-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.panel-title h3{
  margin:0;
  font-size:16px;
  letter-spacing:-.01em;
}
.empty{
  padding:18px;
  border-radius:18px;
  border:1px dashed rgba(11,18,32,.16);
  background:rgba(255,255,255,.65);
  color:rgba(11,18,32,.66);
  line-height:1.6;
}

/* Full-width page wrapper used for signed-in app pages */
.page-full{
  width:100%;
  padding:0 18px;
}
.page-full-inner{
  width:100%;
  padding:0 18px;
}
@media (max-width: 640px){
  .page-full, .page-full-inner{padding:0 14px}
}

/* App dashboard layout */
.app{
  display:block;
  width:100%;
  padding:22px 0 70px;
}

/* Fixed sidebar on desktop so it always starts at the far left of the screen */
.sidebar{
  position:fixed;
  left:0;
  top:74px; /* below top nav */
  width:280px;
  height: calc(100vh - 74px);
  overflow:auto;
  padding:18px;
  border-radius:0 22px 22px 0;
  border-left:0;
}

.main{
  margin-left: 298px; /* sidebar width + gap */
  padding:0 10px 0 10px;
}

@media (max-width: 980px){
  .sidebar{
    position:static;
    width:auto;
    height:auto;
    border-radius:22px;
  }
  .main{margin-left:0}
}

/* Sidebar header: logo at the top */
.sidebar-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:6px 6px 16px;
  border-bottom:1px solid rgba(11,18,32,.08);
  margin: -2px -2px 14px;
}

/* App shell: sidebar + topbar */
.app-shell{
  width:100%;
  min-height: calc(100vh - 72px);
  padding: 88px 18px 40px;
}
@media (max-width: 640px){
  .app-shell{padding: 84px 14px 40px}
}

.app-sidebar{
  position:fixed;
  left:0;
  top:0;
  width:var(--sidebarW);
  height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:14px 12px;
  background:rgba(255,255,255,.82);
  border-right:1px solid rgba(11,18,32,.10);
  box-shadow: 0 18px 60px rgba(11,18,32,.08);
}

.sidebar-scroll{
  flex:1;
  overflow:auto;
  padding:0 2px 10px;
}

.sidebar-foot{
  padding:10px 2px 2px;
}

.app-topbar{
  position:fixed;
  top:0;
  left:var(--sidebarW);
  right:0;
  height:72px;
  z-index:60;
  backdrop-filter: blur(14px);
  background: rgba(246,251,255,.78);
  border-bottom:1px solid rgba(11,18,32,.10);
}
.app-topbar-inner{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:0 18px;
}
.app-topbar-title{
  font-weight:900;
  letter-spacing:-.01em;
  color:rgba(11,18,32,.86);
}

.app-main{
  margin-left: calc(var(--sidebarW) + 18px);
}
@media (max-width: 980px){
  .app-sidebar{
    position:static;
    width:auto;
    height:auto;
    border-right:0;
    border:1px solid rgba(11,18,32,.10);
    border-radius:22px;
  }
  .app-topbar{
    left:0;
  }
  .app-main{
    margin-left:0;
  }
}

/* Sidebar head tweaks */
.sidebar-brand img{height:34px;width:auto;border-radius:10px}
.sidebar-meta strong{display:block;font-weight:900;letter-spacing:-.01em}
.sidebar-meta span{display:block;font-size:12px;color:rgba(11,18,32,.56);margin-top:2px}

/* Sidebar collapse control (bottom) */
.sidebar-collapse{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(11,18,32,.10);
  background:rgba(255,255,255,.86);
  cursor:pointer;
  color:rgba(11,18,32,.72);
  font-weight:800;
}
.sidebar-collapse:hover{border-color:rgba(0,108,255,.22); color:rgba(0,108,255,.95)}
.sidebar-collapse:active{transform:translateY(1px)}

.sidebar-collapse-ico{
  width:18px;
  height:18px;
  display:inline-block;
  background-color: currentColor;
  -webkit-mask: url('/assets/icons/chevron-left.svg') center / 18px 18px no-repeat;
  mask: url('/assets/icons/chevron-left.svg') center / 18px 18px no-repeat;
}
html.sidebar-collapsed .sidebar-collapse-ico{
  -webkit-mask: url('/assets/icons/chevron-right.svg') center / 18px 18px no-repeat;
  mask: url('/assets/icons/chevron-right.svg') center / 18px 18px no-repeat;
}

/* Icon system (SVG via CSS mask) */
.ico{
  display:inline-block;
  width:18px;
  height:18px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / 18px 18px no-repeat;
  mask: var(--icon) center / 18px 18px no-repeat;
}

.ico-home{--icon:url('/assets/icons/home.svg')}
.ico-docs{--icon:url('/assets/icons/docs.svg')}
.ico-knowledgebase{--icon:url('/assets/icons/knowledgebase.svg')}
.ico-calendar{--icon:url('/assets/icons/calendar.svg')}
.ico-users{--icon:url('/assets/icons/users.svg')}
.ico-tag{--icon:url('/assets/icons/tag.svg')}
.ico-clock{--icon:url('/assets/icons/clock.svg')}
.ico-lock{--icon:url('/assets/icons/lock.svg')}
.ico-logout{--icon:url('/assets/icons/logout.svg')}
.ico-settings{--icon:url('/assets/icons/settings.svg')}
.ico-menu{--icon:url('/assets/icons/menu.svg')}
.ico-chevron-down{--icon:url('/assets/icons/chevron-down.svg')}

.ico-text{
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  font-size:16px;
  line-height:1;
}

/* Sidebar collapsible setup */
.nav-details{ margin:8px 8px 0; }
.nav-summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(11,18,32,.08);
  background:rgba(255,255,255,.72);
  font-weight:750;
  color:rgba(11,18,32,.82);
}
.nav-summary::-webkit-details-marker{display:none}
.nav-details[open] .nav-summary{
  border-color:rgba(0,108,255,.18);
  background:rgba(0,108,255,.06);
}

.nav-caret{
  width:18px;
  height:18px;
  opacity:.55;
  transition: transform .16s ease;
  color:rgba(11,18,32,.70);
}
.nav-caret::before{
  content:"";
  display:block;
  width:18px;
  height:18px;
  background-color: currentColor;
  -webkit-mask: url('/assets/icons/chevron-down.svg') center / 18px 18px no-repeat;
  mask: url('/assets/icons/chevron-down.svg') center / 18px 18px no-repeat;
}
.nav-details[open] .nav-caret{transform:rotate(180deg)}
.nav-subitem{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  margin:8px 0 0 18px;
  border-radius:13px;
  border:1px solid rgba(11,18,32,.08);
  background:rgba(255,255,255,.70);
  font-weight:750;
  color:rgba(11,18,32,.76);
}
.nav-subitem:hover{border-color:rgba(0,108,255,.16)}
.nav-subitem.active{
  border-color:rgba(0,108,255,.22);
  background:rgba(0,108,255,.08);
  color:rgba(0,108,255,.95);
}
.nav-subico{
  height:28px;width:28px;border-radius:11px;
  display:grid;place-items:center;
  background:rgba(11,18,32,.04);
  border:1px solid rgba(11,18,32,.06);
  color:rgba(11,18,32,.66);
}
.nav-subitem.active .nav-subico{
  background:rgba(0,108,255,.10);
  border-color:rgba(0,108,255,.16);
  color:rgba(0,108,255,.95);
}

/* Collapsed sidebar */
html.sidebar-collapsed .app-sidebar{padding:12px 8px}
html.sidebar-collapsed .sidebar-meta{display:none}
html.sidebar-collapsed .nav-label{display:none}
html.sidebar-collapsed .nav-text{display:none}
html.sidebar-collapsed .sidebar-collapse-text{display:none}
html.sidebar-collapsed .nav-item,
html.sidebar-collapsed .nav-summary{
  margin:8px 0 0;
  justify-content:center;
  padding:12px 10px;
}
html.sidebar-collapsed .nav-details{margin:8px 0 0}
html.sidebar-collapsed .nav-left{justify-content:center}
html.sidebar-collapsed .nav-subitem{display:none}
html.sidebar-collapsed .nav-caret{display:none}

.profile-menu { position: relative; display:inline-block; margin-left:16px; }
.profile-trigger { cursor:pointer; }
.profile-avatar {
    width:38px; height:38px; border-radius:50%;
    object-fit:cover; background:#006CFF; color:white;
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:14px;
}
.profile-dropdown {
    position:absolute; right:0; top:48px;
    background:white; border-radius:12px;
    box-shadow:0 12px 30px rgba(0,0,0,0.1);
    display:none; min-width:160px; padding:10px 0;
}
.profile-dropdown a {
    display:block; padding:10px 16px;
    text-decoration:none; color:#0b1220;
}
.profile-dropdown a:hover { background:#f5f7fa; }
.profile-dropdown.show { display:block; }

.profile-header{
  display:flex;
  gap:16px;
  align-items:center;
  margin:18px 0 18px 0;
}
.profile-avatar-big{
  width:88px;
  height:88px;
  border-radius:50%;
  object-fit:cover;
  background:#f2f4f8;
  border:1px solid rgba(0,0,0,0.08);
}
.profile-name{
  font-weight:700;
  font-size:18px;
}
.profile-sub{
  opacity:0.7;
  font-size:13px;
  margin-top:2px;
}



/* Shift Planner */
.sp-panel{ margin-bottom:16px; }

/* Controls bar: compact + aligned */
.sp-controls{
  display:grid;
  grid-template-columns: 190px 260px 150px 150px 1fr auto;
  gap:10px 12px;
  align-items:end;
}

/* Keep each control from forcing huge widths */
.sp-controls .ctrl{min-width:0}
.sp-controls .ctrl.emp-ctrl{position:relative}
.sp-controls .ctrl.sp-badges{justify-self:end}

/* Compact labels */
.sp-controls label{
  display:block;
  font-size:11px;
  font-weight:700;
  color:rgba(11,18,32,.68);
  margin:0 0 5px;
}

/* Compact inputs */
.sp-controls select,
.sp-controls input[type="date"]{
  width:100%;
  height:38px;
  padding:7px 10px;
  border-radius:12px;
  border:1px solid rgba(11,18,32,.12);
  background:rgba(255,255,255,.92);
  color:rgba(11,18,32,.92);
  outline:none;
  font-size:13px;
  line-height:1.2;
}

.sp-controls select:focus,
.sp-controls input[type="date"]:focus{
  border-color:rgba(0,108,255,.30);
  box-shadow:0 0 0 4px rgba(0,108,255,.10);
}

/* Make pills inside the planner controls smaller (scoped) */
.sp-controls .pill{
  padding:7px 11px;
  font-size:13px;
  font-weight:750;
}
.sp-controls .pill.primary{
  box-shadow:0 12px 28px rgba(0,108,255,.16);
}

/* Nav buttons (Prev/This month/Next/Reload) */
.sp-btn{
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(11,18,32,.10);
  background:rgba(255,255,255,.88);
  font-size:13px;
  line-height:1.1;
}
.sp-btn:hover{border-color:rgba(0,108,255,.22)}
.sp-btn.primary{
  border-color:rgba(0,108,255,.22);
}

/* Employee multiselect button */
.emp-btn{
  width:100%;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:7px 10px;
  border-radius:12px;
  border:1px solid rgba(11,18,32,.12);
  background:rgba(255,255,255,.92);
  font-weight:750;
  font-size:13px;
  cursor:pointer;
}
.emp-btn:hover{border-color:rgba(0,108,255,.22)}
.emp-btn #emp_count{
  padding:4px 9px;
  font-size:12px;
  line-height:1;
}

/* Employee panel sizing */
.emp-panel{
  position:absolute;
  left:0;
  right:0;
  top: calc(100% + 8px);
  z-index:60;
  border-radius:16px;
  border:1px solid rgba(11,18,32,.10);
  background:rgba(255,255,255,.98);
  box-shadow:0 18px 60px rgba(11,18,32,.12);
  padding:10px;
}

/* Badges area: compact + tidy */
.sp-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.sp-badges .badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
}

/* Width helpers */
.sp-select{max-width:none}
.sp-select-dept{max-width:none}
.sp-date{max-width:none}

/* Responsive: stack cleanly */
@media (max-width: 1100px){
  .sp-controls{
    grid-template-columns: 1fr 1fr;
  }
  .sp-controls .ctrl.emp-ctrl{grid-column: 1 / -1;}
  .sp-controls .ctrl.sp-nav{grid-column: 1 / -1; justify-content:flex-start;}
  .sp-controls .ctrl.sp-badges{grid-column: 1 / -1; justify-self:start;}
}

@media (max-width: 640px){
  .sp-controls{
    grid-template-columns: 1fr;
  }
  .sp-badges{justify-content:flex-start}
}
.planner-wrap{overflow:auto}
.grid-table{width:100%; border-collapse:separate; border-spacing:0}
.grid-table th,.grid-table td{border-bottom:1px solid rgba(11,18,32,.08); padding:6px 6px; font-size:12px; white-space:nowrap}
.grid-table th{background:rgba(255,255,255,.92)}
.sticky-col{
  position:sticky;
  left:0;
  z-index:3;
  background:rgba(255,255,255,.98);
}
.sticky-col.name{min-width:160px; max-width:160px}
.emp-name{
  font-weight:750;
  font-size:12px;
  line-height:1.1;
}
.sp-emp{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:24px;
}
.sp-emp .emp-name{
  overflow:hidden;
  text-overflow:ellipsis;
}
.sp-emp-avatar{
  width:24px;
  height:24px;
  border-radius:999px;
  object-fit:cover;
  border:2px solid #fff;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  flex:0 0 24px;
}
.sp-emp-avatar.is-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:850;
  letter-spacing:.02em;
  color:rgba(0,108,255,.90);
  background:rgba(0,108,255,.10);
  border:1px solid rgba(0,108,255,.18);
  box-shadow:0 8px 26px rgba(0,108,255,.12);
}
.grid-table .meta{display:none}

.cell-select{
  width:54px;
  min-width:54px;
  max-width:54px;
  padding:6px 6px;
  border-radius:10px;
  border:1px solid rgba(11,18,32,.10);
  background:rgba(255,255,255,.92);
  font-weight:500;
  font-size:12px;
  letter-spacing:0;
  outline:none;
}
.cell-select:focus{
  border-color:rgba(0,108,255,.30);
  box-shadow:0 0 0 3px rgba(0,108,255,.10);
}

@media (max-width: 980px){
  .sticky-col.name{min-width:140px; max-width:140px}
  .cell-select{width:50px; min-width:50px; max-width:50px}
}

/* -----------------------------
   Shared UI helpers
------------------------------ */

.muted{color:rgba(11,18,32,.62)}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(11,18,32,.10);
  background:rgba(255,255,255,.88);
  font-weight:800;
  color:rgba(11,18,32,.86);
  cursor:pointer;
}
.btn:hover{border-color:rgba(0,108,255,.22)}
.btn:active{transform:translateY(1px)}
.btn.primary{
  border-color:rgba(0,108,255,.20);
  background:linear-gradient(135deg, rgba(0,108,255,.94), rgba(0,179,255,.86));
  color:#fff;
  box-shadow:0 16px 42px rgba(0,108,255,.18);
}

.btn.danger{
  border-color:rgba(220,38,38,.22);
  background:rgba(220,38,38,.08);
  color:rgba(153,27,27,.96);
}

.btn.danger:hover{border-color:rgba(220,38,38,.30); background:rgba(220,38,38,.12)}

.kb-category-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.kb-head-actions{display:flex; gap:10px; flex-wrap:wrap}

.kb-tree-hint{
  padding:12px 16px;
  border-bottom:1px solid rgba(11,18,32,.08);
  color:rgba(11,18,32,.56);
  font-size:13px;
}

.kb-tree-col{padding-left:16px}

.kb-tree-name{
  --kb-indent:calc(var(--kb-level, 0) * 16px);
  position:relative;
  padding-left:calc(var(--kb-indent) + 10px);
  font-weight:900;
}

.kb-tree-name::before{
  content:"";
  position:absolute;
  left:calc(var(--kb-indent) + 2px);
  top:.55em;
  width:6px;
  height:6px;
  border-radius:999px;
  background:rgba(11,18,32,.25);
}

.kb-tree-meta{
  margin-top:4px;
  font-size:12px;
  color:rgba(11,18,32,.56);
  padding-left:calc(calc(var(--kb-level, 0) * 16px) + 10px);
}

.kb-tree-path{color:rgba(11,18,32,.78)}
.kb-tree-dot{margin:0 6px}

.kb-tree-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  flex-wrap:wrap;
  padding-right:16px;
}

.alert{
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(11,18,32,.10);
  background:rgba(255,255,255,.80);
  box-shadow:0 10px 26px rgba(11,18,32,.06);
  margin: 0 0 14px;
}
.alert ul{margin:8px 0 0; padding-left:18px}
.alert.success{border-color:rgba(70,195,120,.35);background:rgba(70,195,120,.10)}
.alert.error{border-color:rgba(240,80,80,.35);background:rgba(240,80,80,.10)}

.card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  border-bottom:1px solid rgba(11,18,32,.08);
}
.card-head h3{margin:0;font-size:16px;letter-spacing:-.01em}
.card-body{padding:18px 22px}

.subline{margin:8px 0 0; color:rgba(11,18,32,.68)}
.subline .subline-sep{margin:0 8px; opacity:.55}

/* -----------------------------
   Permissions page
------------------------------ */

.perm-card{overflow:hidden}
.perm-head-actions{
  display:flex;
  align-items:center;
  gap:10px;
  padding-top:2px;
  color:rgba(11,18,32,.70);
}

.perm-form{padding:0}
.perm-groups{padding:18px 22px}

.perm-group{margin-bottom:18px}
.perm-group:last-child{margin-bottom:0}

.perm-group-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.perm-group-head h4{margin:0;font-size:14px;letter-spacing:-.01em}
.perm-group-head p{margin:0; font-size:13px}

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

.perm-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(11,18,32,.10);
  background:rgba(255,255,255,.78);
}
.perm-item:hover{border-color:rgba(0,108,255,.18)}

.perm-meta{display:flex; flex-direction:column; gap:6px; min-width:0}
.perm-title{font-weight:850; color:rgba(11,18,32,.90)}
.perm-key{
  display:inline-flex;
  width:fit-content;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(0,108,255,.14);
  background:rgba(0,108,255,.08);
  color:rgba(0,108,255,.90);
  font-size:12px;
  white-space:nowrap;
}

.perm-toggle{display:flex; align-items:center; gap:10px; flex:0 0 auto}

/* Toggle switch while keeping the checkbox input for forms */
.toggle{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.toggle-ui{
  width:46px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(11,18,32,.16);
  background:rgba(11,18,32,.06);
  position:relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.toggle-ui::after{
  content:"";
  position:absolute;
  top:50%;
  left:3px;
  width:22px;
  height:22px;
  border-radius:999px;
  transform:translateY(-50%);
  background:#fff;
  border:1px solid rgba(11,18,32,.10);
  box-shadow:0 10px 18px rgba(11,18,32,.12);
  transition: left .18s ease;
}

.perm-item:has(.toggle:focus-visible) {
  box-shadow: 0 0 0 4px rgba(0,108,255,.10);
  border-color:rgba(0,108,255,.24);
}

/* Fallback focus styling (for browsers without :has) */
.toggle:focus-visible + .toggle-ui{
  box-shadow: 0 0 0 4px rgba(0,108,255,.10);
  border-color:rgba(0,108,255,.24);
}

.toggle:checked + .toggle-ui{
  background:linear-gradient(135deg, rgba(0,108,255,.94), rgba(0,179,255,.86));
  border-color:rgba(0,108,255,.22);
}
.toggle:checked + .toggle-ui::after{left:21px}

.perm-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 22px 18px;
  border-top:1px solid rgba(11,18,32,.08);
  background:rgba(255,255,255,.78);
  position:sticky;
  bottom:0;
}

@media (max-width: 640px){
  .card-head{padding:16px 16px}
  .card-body{padding:16px 16px}
  .perm-groups{padding:16px 16px}
  .perm-footer{flex-direction:column; align-items:stretch}
  .perm-footer .btn{width:100%}
  .perm-group-head{flex-direction:column; align-items:flex-start}
}
/* Roles & Permissions (modern layout) */
.roles-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.roles-header .title-wrap h1{margin:0}
.roles-header .title-wrap p{margin:6px 0 0; opacity:.75}

.role-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.role-table th, .role-table td{
  padding:12px 14px;
  border-bottom:1px solid rgba(11,18,32,.08);
  vertical-align:middle;
}
.role-table th{
  font-size:12px;
  letter-spacing:.02em;
  text-transform:uppercase;
  opacity:.7;
}
.role-table tr:hover td{background:rgba(11,18,32,.015)}

.badge-system{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  border:1px solid rgba(11,18,32,.10);
  background:rgba(255,255,255,.75);
  margin-left:10px;
}

.permission-group{
  border:1px solid rgba(11,18,32,.08);
  background:rgba(255,255,255,.82);
  border-radius:16px;
  overflow:hidden;
  margin-bottom:14px;
}
.permission-group-header{
  padding:12px 14px;
  font-weight:800;
  border-bottom:1px solid rgba(11,18,32,.08);
  background:rgba(11,18,32,.02);
}
.permission-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border-bottom:1px solid rgba(11,18,32,.06);
}
.permission-row:last-child{border-bottom:0}
.permission-row .meta{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.permission-row .label{
  font-weight:750;
  color:rgba(11,18,32,.88);
}
.permission-key{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(11,18,32,.10);
  background:rgba(11,18,32,.03);
  color:rgba(11,18,32,.70);
}

/* Toggle switch */
.switch{position:relative; display:inline-block; width:42px; height:24px}
.switch input{opacity:0; width:0; height:0}
.slider{
  position:absolute; cursor:pointer;
  top:0; left:0; right:0; bottom:0;
  background:rgba(11,18,32,.18);
  transition:.18s;
  border-radius:999px;
}
.slider:before{
  position:absolute; content:"";
  height:18px; width:18px;
  left:3px; top:3px;
  background:white;
  transition:.18s;
  border-radius:50%;
  box-shadow:0 6px 18px rgba(11,18,32,.18);
}
.switch input:checked + .slider{background:rgba(0,108,255,.65)}
.switch input:checked + .slider:before{transform:translateX(18px)}

/* Footer action area */
.card-footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding:12px 14px;
  border-top:1px solid rgba(11,18,32,.08);
  background:rgba(255,255,255,.75);
  position:sticky;
  bottom:0;
}
/* Team form polishing (scoped) */
.team-form label{
  display:block;
  font-size:12px;
  font-weight:750;
  color:rgba(11,18,32,.62);
  margin:2px 0 8px;
}

.team-form input[type="text"],
.team-form input[type="email"],
.team-form input[type="password"],
.team-form select{
  width:100%;
  height:44px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(11,18,32,.10);
  background:rgba(255,255,255,.92);
  color:#0b1220;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}

.team-form input[type="text"]:focus,
.team-form input[type="email"]:focus,
.team-form input[type="password"]:focus,
.team-form select:focus{
  border-color:rgba(59,130,246,.45);
  box-shadow:0 0 0 4px rgba(59,130,246,.12);
}

/* Role select wrapper so it looks consistent everywhere */
.team-select{
  position:relative;
  max-width:260px;
}
.team-select select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:40px;
}
.team-select:after{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  width:10px;
  height:10px;
  border-right:2px solid rgba(11,18,32,.45);
  border-bottom:2px solid rgba(11,18,32,.45);
  transform:translateY(-60%) rotate(45deg);
  pointer-events:none;
}

/* Active seat row (clean layout) */
.team-seat{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border:1px solid rgba(11,18,32,.10);
  border-radius:16px;
  background:rgba(255,255,255,.72);
}

.team-seat__text{
  min-width:0;
}

.team-seat__title{
  font-weight:850;
  letter-spacing:-.01em;
}

.team-seat__desc{
  margin-top:4px;
  font-size:12px;
  color:rgba(11,18,32,.62);
  line-height:1.45;
}
/* Fix Role dropdown (avoid global .cell-select overrides) */
.team-form .team-select{
  position:relative;
  max-width:260px;
}

.team-form .team-select__control{
  width:100%;
  height:44px;
  padding:10px 40px 10px 12px;
  border-radius:14px;
  border:1px solid rgba(11,18,32,.10);
  background:rgba(255,255,255,.92);
  color:#0b1220;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}

.team-form .team-select__control:focus{
  border-color:rgba(59,130,246,.45);
  box-shadow:0 0 0 4px rgba(59,130,246,.12);
}

.team-form .team-select:after{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  width:10px;
  height:10px;
  border-right:2px solid rgba(11,18,32,.45);
  border-bottom:2px solid rgba(11,18,32,.45);
  transform:translateY(-60%) rotate(45deg);
  pointer-events:none;
}
/* ------------------------------------------------------------
   Team form: Role dropdown + Active user toggle (billing seat)
   Add this at the bottom of styles.css
------------------------------------------------------------ */

.input.select,
select.input.select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(11,18,32,.55) 50%),
    linear-gradient(135deg, rgba(11,18,32,.55) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

.toggle-card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 14px;
  border: 1px solid rgba(11,18,32,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.75);
  box-shadow: 0 10px 28px rgba(11,18,32,.06);
}

.toggle-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.toggle-title {
  font-weight: 850;
  color: rgba(11,18,32,.92);
  line-height: 1.2;
}

.toggle-sub {
  font-size: 12.5px;
  color: rgba(11,18,32,.60);
  line-height: 1.35;
}

/* Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 28px;
  flex: 0 0 auto;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(11,18,32,.18);
  transition: 0.2s ease;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(11,18,32,.08);
}

.switch .slider:before {
  content: "";
  position: absolute;
  height: 22px;
  width: 22px;
  left: 3px;
  top: 3px;
  background: #fff;
  transition: 0.2s ease;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(11,18,32,.18);
}

.switch input:checked + .slider {
  background: rgba(59,130,246,.95);
}

.switch input:checked + .slider:before {
  transform: translateX(18px);
}

.switch input:focus + .slider {
  box-shadow: 0 0 0 4px rgba(59,130,246,.18);
}
/* Fix role dropdown rendering */
select.input,
select.input.select {
  width: 100%;
  height: 46px;
  padding: 0 44px 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(11,18,32,.10);
  background-color: rgba(255,255,255,.85);
  color: rgba(11,18,32,.92);
  font-size: 14px;
  line-height: 46px;
  box-shadow: 0 10px 28px rgba(11,18,32,.06);
  outline: none;
}

select.input:focus,
select.input.select:focus {
  border-color: rgba(59,130,246,.45);
  box-shadow: 0 0 0 4px rgba(59,130,246,.14), 0 10px 28px rgba(11,18,32,.06);
}

/* Keep the custom arrow */
select.input.select,
select.input.select:focus {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(11,18,32,.55) 50%),
    linear-gradient(135deg, rgba(11,18,32,.55) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* If some old rule is shrinking selects, this prevents it */
select.input.select {
  min-height: 46px;
}
/* Fix dropdown opening under the next box (z-index + overflow) */

/* Ensure the main card/form allows dropdowns to render outside */
.card,
.card.panel,
.panel,
.table-wrap {
  overflow: visible;
}

/* Give the role field its own stacking context above the seat box */
.form-row,
.field,
.form-group {
  position: relative;
  overflow: visible;
}

/* If your role select is inside a specific wrapper, this makes it win */
.role-field,
.role-wrap,
.field-role {
  position: relative;
  z-index: 20;
  overflow: visible;
}

/* Lower the seat box stacking so it can’t sit on top of the open dropdown */
.seat-box,
.active-seat,
.active-user-box,
.toggle-card {
  position: relative;
  z-index: 1;
}


/* ===== Happeno: Team Role dropdown stacking fix ===== */
/* Fix: role dropdown list appearing behind the "Active user" box (stacking/overflow). */
.team-form,
.team-form .card,
.team-form .panel{
  overflow: visible;
}

.team-form .team-select{
  max-width: 100%;
  width: 100%;
  position: relative;
  z-index: 5;
}

.team-form .team-select:focus-within{
  z-index: 50;
}

.team-form .team-seat{
  position: relative;
  z-index: 1;
  margin-top: 12px;
}
/* Team drag and drop ordering */
.td-order {
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
}

.drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.9);
  color: rgba(0,0,0,0.55);
  cursor: grab;
  user-select: none;
}

.drag-handle:hover {
  color: rgba(0,0,0,0.75);
  border-color: rgba(0,0,0,0.12);
}

.drag-handle:active {
  cursor: grabbing;
}

#team-sortable tr {
  transition: transform 120ms ease, opacity 120ms ease;
}

#team-sortable tr.row-dragging {
  opacity: 0.55;
}

#team-sortable tr.row-over {
  outline: 2px solid rgba(0,0,0,0.08);
  outline-offset: -2px;
}

.drop-placeholder td {
  padding: 10px 12px;
  background: transparent;
}

.drop-placeholder-inner {
  height: 42px;
  border-radius: 12px;
  border: 2px dashed rgba(0,0,0,0.16);
  background: rgba(0,0,0,0.02);
}

.hint-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 0 14px;
  font-size: 13px;
  color: rgba(0,0,0,0.6);
}

.hint-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.25);
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.95);
  color: rgba(0,0,0,0.75);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  transform: translateY(10px);
  opacity: 0;
  pointer-events: none;
  transition: transform 160ms ease, opacity 160ms ease;
  font-size: 13px;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast.error {
  border-color: rgba(220, 38, 38, 0.25);
  color: rgba(185, 28, 28, 0.95);
}


/* ==== Shift Planner UI helpers (v15) - scoped, safe overrides ==== */
#planner_wrap { position: relative; }

/* Right sticky summary helper */
#sp_right_summary{
  position: fixed;
  right: 18px;
  top: 0;
  z-index: 50;
  width: 140px;
  background: #fff;
  border: 1px solid #e7ecf3;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  overflow: hidden;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}
#sp_right_summary.is-hidden{ display:none; }
#sp_right_summary.is-positioned{
  opacity: 1;
  pointer-events: auto;
}

#sp_right_summary .sp-right-head{
  display:flex;
  gap:0;
  padding: 10px 10px;
  font-weight: 700;
  font-size: 12px;
  color:#334155;
  border-bottom:1px solid #eef2f7;
  height: var(--sp-headh, 48px);
  align-items: center;
}
#sp_right_summary .sp-right-body{
  display:block;
}
#sp_right_summary .sp-r-row{
  display:flex;
  align-items:center;
  height: var(--sp-rowh, 44px);
  border-bottom:1px solid #f1f5f9;
  padding: 0 10px;
  font-size: 12px;
  color:#0f172a;
}
#sp_right_summary .sp-r-row:last-child{ border-bottom:0; }
#sp_right_summary .sp-r-shifts{ width: 55%; text-align:right; padding-right:10px; font-weight:700; }
#sp_right_summary .sp-r-hours{ width: 45%; text-align:right; color:#475569; }

/* Sticky bottom bar */
#sp_stickybar{
  position: sticky;
  bottom: 0;
  z-index: 45;
  margin-top: 10px;
  background: rgba(241,246,255,.92);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(231,236,243,.9);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding: 10px 10px 8px;
}

/* Day totals strip should not create its own visible scrollbar */
#sp_daytotals_scroll{
  overflow: hidden;
}
#sp_daytotals{
  display:flex;
  align-items: stretch;
  gap:0;
}

/* Left white metrics area */
.sp-daytotals-spacer{
  width: calc(var(--sp-name-colw, 150px) + var(--sp-colgap, 0px));
  min-width: calc(var(--sp-name-colw, 150px) + var(--sp-colgap, 0px));
  max-width: calc(var(--sp-name-colw, 150px) + var(--sp-colgap, 0px));
  padding-right: 8px;
}
.sp-daytotals-left{
  background:#fff;
  border:1px solid #e7ecf3;
  border-radius: 12px;
  padding: 10px 12px;
  height: 100%;
  display:flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.sp-daytotals-metric{ font-size: 12px; color:#0f172a; line-height: 1.2; }
.sp-daytotals-metric strong{ font-weight: 800; }
.sp-daytotals-label{ margin-top: 2px; font-size: 12px; color:#64748b; }

/* Day total cells match header widths */
.sp-daycell{
  width: var(--sp-date-colw, 66px);
  min-width: var(--sp-date-colw, 66px);
  max-width: var(--sp-date-colw, 66px);
  background:#fff;
  border:1px solid #eef2f7;
  border-left: 0;
  height: 64px;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
}
.sp-daycell:first-of-type{ border-left:1px solid #eef2f7; }
.sp-daycell.week-start{ border-left: 2px solid #cbd5e1 !important; }


/* Custom horizontal scrollbar bar */
#sp_hscroll{
  margin-top: 8px;
  height: 16px;
  background: rgba(15,23,42,.06);
  border-radius: 999px;
  overflow-x: auto;
  overflow-y: hidden;
}
#sp_hscroll::-webkit-scrollbar{ height: 14px; }
#sp_hscroll::-webkit-scrollbar-track{ background: rgba(15,23,42,.06); border-radius: 999px; }
#sp_hscroll::-webkit-scrollbar-thumb{ background: rgba(37,99,235,.55); border-radius: 999px; }
#sp_hscroll-inner{ height: 1px; }

/* Keep Quinyx-like week divider subtle in grid */
.sp-week-divider{ box-shadow: inset 2px 0 0 #cbd5e1; }


/* Shift Planner v16: week separators + zebra rows (scoped) */

/* Vertical week split line through header and body */
#grid table th.week-start,
#grid table td.week-start {
  border-left: 2px solid #cbd5e1;
}

/* Softer zebra rows for readability (do not affect sticky columns styling) */
#grid table tbody tr:nth-child(even) td {
  background: rgba(2, 132, 199, 0.035);
}

/* Keep left sticky name column readable on zebra rows */
#grid table tbody tr:nth-child(even) td.sticky-col,
#grid table tbody tr:nth-child(even) td:first-child {
  background: rgb(243 250 253);
}



/* Shift Planner v17: lock date column widths so header and bottom totals match exactly */
#grid table.grid-table th.date-col,
#grid table.grid-table td.date-col {
  width: var(--sp-date-colw, 66px);
  min-width: var(--sp-date-colw, 66px);
  max-width: var(--sp-date-colw, 66px);
  box-sizing: border-box;
}

/* Ensure week label never expands column width */
#grid table.grid-table thead th.date-col .week {
  font-size: 10px;
  line-height: 1;
  color: #64748b;
  height: 12px;
  overflow: hidden;
  white-space: nowrap;
}

/* ===========================
   Shift Planner: Bottom day totals typography
   Safe: does not change widths
   =========================== */

.sp-daycell {
  padding-top: 6px;
  padding-bottom: 6px;
}

.sp-daycell-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}

.sp-daycell-weekday {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8b98a7;
  font-weight: 500;
  margin-bottom: 2px;
}

.sp-daycell-date {
  font-size: 13px;
  font-weight: 600;
  color: #2c3e50;
}

.sp-daycell-total {
  font-size: 12px;
  font-weight: 500;
  color: #4b5c6b;
  margin-top: 3px;
}

/* Shift Planner: footer shift legend (compact single-line layout) */

#grid table tfoot th.sticky-col.name{
  padding-top: 6px;
  padding-bottom: 6px;
}

#grid table tfoot th.sticky-col.name .sp-shifthead{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}

#grid table tfoot th.sticky-col.name .sp-shiftcode{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .01em;
  color: #0f172a;
  white-space:nowrap;
}

#grid table tfoot th.sticky-col.name .sp-shifttime{
  font-size: 11px;
  color: #64748b;
  font-weight: 700;
  margin:0;
  white-space:nowrap;
}

.sp-shiftdot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(11,18,32,.14);
  flex: 0 0 auto;
}

.sp-shiftdot.is-empty{
  background: rgba(11,18,32,.10);
}


/* Shifts page filters */
.shifts-filters{
  padding: 14px 18px 0;
}

.shifts-filters__form{
  width:100%;
}

.sf-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 180px auto;
  gap: 12px;
  align-items: end;
}

.sf-field label{
  display:block;
  font-size:11px;
  font-weight:800;
  color:rgba(11,18,32,.68);
  margin:0 0 6px;
}

.sf-select{
  height:38px;
  min-height:38px;
  border-radius:12px;
  font-size:13px;
  padding-left:12px;
  padding-right:40px;
  box-shadow:none;
}

.sf-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.sf-actions .btn{
  padding:9px 14px;
}

/* Multi-select dropdown */
.ms{
  position:relative;
}

.ms-btn{
  width:100%;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:7px 10px;
  border-radius:12px;
  border:1px solid rgba(11,18,32,.12);
  background:rgba(255,255,255,.92);
  font-weight:800;
  font-size:13px;
  color:rgba(11,18,32,.90);
  cursor:pointer;
}

.ms-btn:hover{border-color:rgba(0,108,255,.22)}
.ms-btn:focus{outline:none}
.ms:has(.ms-btn:focus-visible) .ms-btn{
  box-shadow:0 0 0 4px rgba(0,108,255,.10);
  border-color:rgba(0,108,255,.26);
}

.ms-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:800;
}

.ms-pill{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(0,108,255,.16);
  background:rgba(0,108,255,.08);
  color:rgba(0,108,255,.92);
  font-weight:900;
  font-size:12px;
  line-height:1;
}

.ms-panel{
  position:absolute;
  left:0;
  right:0;
  top: calc(100% + 8px);
  z-index: 80;
  border-radius:16px;
  border:1px solid rgba(11,18,32,.10);
  background:rgba(255,255,255,.98);
  box-shadow:0 18px 60px rgba(11,18,32,.12);
  padding:10px;
  display:none;
}

.ms.open .ms-panel{display:block}

.ms-actions{
  display:flex;
  align-items:center;
  gap:10px;
  padding:2px 4px 8px;
  color:rgba(11,18,32,.62);
  font-size:12px;
  font-weight:800;
}

.ms-link{
  border:0;
  background:transparent;
  padding:0;
  font:inherit;
  color:rgba(0,108,255,.92);
  cursor:pointer;
}
.ms-link:hover{opacity:.9}

.ms-dot{
  width:4px;
  height:4px;
  border-radius:999px;
  background:rgba(11,18,32,.28);
}

.ms-list{
  max-height: 220px;
  overflow:auto;
  padding:2px 2px;
}

.ms-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:12px;
  border:1px solid rgba(11,18,32,.06);
  background:rgba(11,18,32,.02);
  margin-bottom:8px;
  cursor:pointer;
  user-select:none;
}

.ms-item:last-child{margin-bottom:0}
.ms-item:hover{border-color:rgba(0,108,255,.16)}
.ms-item input{
  width:16px;
  height:16px;
  margin:0;
}

.ms-empty{
  padding:12px 10px;
  border-radius:12px;
  border:1px dashed rgba(11,18,32,.16);
  background:rgba(255,255,255,.70);
  color:rgba(11,18,32,.62);
  font-size:13px;
}

/* Responsive */
@media (max-width: 1100px){
  .sf-grid{
    grid-template-columns: 1fr 1fr;
  }
  .sf-actions{
    grid-column: 1 / -1;
    justify-content:flex-start;
  }
}

@media (max-width: 640px){
  .sf-grid{
    grid-template-columns: 1fr;
  }
  .sf-actions .btn{width:100%}
}

/* Knowledge Base */
.kb-hero{
  background: linear-gradient(180deg, rgba(79,70,229,.08), rgba(79,70,229,0));
  border-radius: 18px;
  padding: 22px;
}
.kb-hero-inner{max-width: 980px; margin: 0 auto;}
.kb-title{font-size: 34px; margin: 0; letter-spacing: -0.02em;}
.kb-subtitle{margin: 10px 0 0; max-width: 720px;}

.kb-search{
  margin-top: 16px;
  display:flex;
  align-items:center;
  gap:10px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 10px 10px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}
.kb-search-icon{
  width: 28px;
  height: 28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  background: rgba(79,70,229,.08);
  color: rgba(79,70,229,1);
  font-size: 14px;
}
.kb-search-input{
  flex:1;
  border: 0 !important;
  outline: none !important;
  background: transparent;
  font-size: 15px;
  padding: 8px 6px;
}
.kb-search-btn{
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  background: rgba(79,70,229,1);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.kb-search-btn:hover{opacity:.92;}

.kb-hero-actions{margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap;}

.kb-section{margin-top: 16px;}
.kb-section-head h2{margin:0; font-size:18px;}
.kb-section-head p{margin:6px 0 0;}

.kb-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.kb-card{
  display:block;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: transform .12s ease, box-shadow .12s ease;
}
.kb-card:hover{transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.08);}
.kb-card-title{font-weight: 800; font-size: 15px;}
.kb-card-desc{margin-top: 6px; color: rgba(0,0,0,.65); font-size: 13px; min-height: 34px;}
.kb-card-meta{margin-top: 10px; color: rgba(0,0,0,.55); font-size: 12px;}

/* Knowledge Base: category footer meta (avatars + count) */
.kb-card-footer{margin-top: 12px; display:flex; align-items:center; justify-content:space-between; gap:10px;}
.kb-card-footer .kb-card-count{color: rgba(0,0,0,.55); font-size: 12px; white-space:nowrap;}
.kb-avatar-stack{display:flex; align-items:center; min-height: 22px;}
.kb-avatar-stack img{width: 30px; height: 30px; border-radius: 999px; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,.08);}
.kb-avatar-stack img + img{margin-left: -7px;}
.kb-avatar-stack .kb-avatar-more{
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 11px;
  font-weight: 800;
  color: rgba(0,0,0,.7);
  background: rgba(148,163,184,.25);
  border: 2px solid #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  margin-left: -7px;
}

.kb-article-list{display:flex; flex-direction:column; gap:8px;}
.kb-article-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  text-decoration:none;
  color: inherit;
}
.kb-article-item:hover{background: rgba(79,70,229,.04);}
.kb-article-main{flex: 1 1 auto; min-width: 0;}
.kb-article-right{flex: 0 0 auto; display:flex; align-items:flex-start; justify-content:flex-end;}
.kb-article-title{font-weight: 750; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.kb-article-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top: 6px;}
.kb-article-date{color: rgba(0,0,0,.55); font-size: 12px; white-space:nowrap; padding-top: 2px;}

/* Compact category pill for Knowledge Base lists (homepage). */
.kb-cat-pill{
  display:inline-flex;
  align-items:center;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.70);
  color: rgba(11,18,32,.78);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.kb-breadcrumb{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin: 4px 0 12px; color: rgba(0,0,0,.6);}
.kb-breadcrumb a{text-decoration:none; color: rgba(79,70,229,1); font-weight: 700;}
.kb-sep{opacity:.5;}

.kb-category-head{display:flex; align-items:flex-end; justify-content:space-between; gap: 12px; flex-wrap:wrap;}
.kb-page-title{margin:0; font-size: 34px; line-height: 1.12; letter-spacing: -0.02em;max-width: none !important;width: 100%;}
.kb-page-subtitle{margin:10px 0 0; max-width: 720px; color: rgba(0,0,0,.65);}

.kb-inline-search{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 8px 10px;
  min-width: 360px;
}
.kb-inline-search .kb-search-input{padding: 6px 4px;}
.kb-inline-search .kb-search-btn{padding: 9px 12px;}

.kb-article-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom: 12px;}
.kb-article-head .btn{white-space:nowrap;}
.kb-article-head > div{flex: 1 1 auto;min-width: 0;}
.kb-article-head-meta{margin-top:10px; display:flex; gap:10px; align-items:center; flex-wrap:wrap;}

.kb-article-card{margin-top: 6px;}
.kb-article-content{padding: 18px;}
.kb-article-content img{max-width:100%; height:auto; border-radius: 14px;}
.kb-article-content p{line-height:1.55; margin:0 0 12px;}
.kb-article-content p:last-child{margin-bottom:0;}
/* Hide empty paragraphs that editors often insert (these create huge gaps in the KB reader). */
.kb-article-content p:empty{display:none;}

.kb-article-content h1,
.kb-article-content h2,
.kb-article-content h3,
.kb-article-content h4,
.kb-article-content h5,
.kb-article-content h6{margin:18px 0 10px; line-height:1.25;}
.kb-article-content h1:first-child,
.kb-article-content h2:first-child,
.kb-article-content h3:first-child,
.kb-article-content h4:first-child,
.kb-article-content h5:first-child,
.kb-article-content h6:first-child{margin-top:0;}

/* Fix editor output that wraps list item text in <p> (prevents double spacing) */
.kb-article-content ul,
.kb-article-content ol{margin:0 0 12px 22px; padding:0;}
.kb-article-content li{margin:0 0 8px; line-height:1.5;}
.kb-article-content li:last-child{margin-bottom:0;}
.kb-article-content li > p{margin:0;}
.kb-article-content li > p + p{margin-top:10px;}

.kb-article-content blockquote{margin:0 0 12px; padding:10px 12px; border-left:3px solid rgba(15,23,42,.18); background:rgba(148,163,184,.08); border-radius:12px;}
.kb-article-content hr{border:0; border-top:1px solid rgba(15,23,42,.12); margin:16px 0;}
.kb-article-content pre{white-space:pre-wrap; margin:0 0 12px; padding:12px 14px; border-radius:14px; background:rgba(15,23,42,.06); overflow:auto;}
.kb-article-content code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:.95em;}

.kb-feedback{margin-top: 14px; display:flex; align-items:center; justify-content:space-between; gap: 12px; flex-wrap:wrap;}
.kb-feedback-text{font-weight: 700;}
.kb-feedback-actions{display:flex; gap:10px;}

@media (max-width: 980px){
  .kb-grid{grid-template-columns: 1fr 1fr;}
  .kb-inline-search{min-width: 100%;}
}
@media (max-width: 640px){
  .kb-grid{grid-template-columns: 1fr;}
  .kb-search{flex-wrap:wrap;}
  .kb-search-btn{width:100%;}
}

/* Docs: right side panel polish (Status + Knowledge Base box) */
.docs-sidepanel .ctrl{margin-bottom: 12px;}

/* Docs editor: keep Quill dropdowns and tooltips above the editor area */
#quillToolbar{
  overflow: visible;
  position: relative;
  z-index: 20;
}

#quillToolbar .ql-picker{
  position: relative;
  z-index: 25;
}

#quillToolbar .ql-picker-options,
.ql-snow .ql-picker.ql-expanded .ql-picker-options,
.ql-snow .ql-tooltip{
  z-index: 9999;
}

.docs-select{
  width: 100%;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(11,18,32,.10);
  background: rgba(255,255,255,.90);
  color: rgba(11,18,32,.92);
  padding: 10px 42px 10px 12px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.docs-select:focus{
  border-color: rgba(59,130,246,.45);
  box-shadow: 0 0 0 4px rgba(59,130,246,.12);
}

.docs-kb-card{
  box-shadow: 0 16px 46px rgba(11,18,32,.08);
}

.docs-kb-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(11,18,32,.08);
}

.docs-kb-title{
  font-weight: 900;
  letter-spacing: -.01em;
}

.docs-kb-sub{
  font-size: 12px;
  color: rgba(11,18,32,.60);
  line-height: 1.35;
  margin-top: 3px;
}

.docs-kb-cascade select{width: 100%;}

.docs-kb-feature{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(11,18,32,.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.docs-kb-feature__title{
  font-weight: 800;
  font-size: 13px;
  color: rgba(11,18,32,.88);
}

.docs-switch{
  flex: 0 0 auto;
}

.docs-kb-card .help{
  font-size: 12px;
  color: rgba(11,18,32,.58);
}

/* Ensure disabled KB fields still look intentional */
.docs-kb-card select:disabled,
.docs-kb-card input:disabled{
  opacity: .55;
  cursor: not-allowed;
}

/* Knowledge Base article reader (modern layout) */
.kb-article-shell{
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 0 0;
}

.kb-article-hero{
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(79,70,229,.08), rgba(255,255,255,.72));
  border: 1px solid rgba(15,23,42,.08);
}

.kb-article-hero-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.kb-article-hero-main{
  flex: 1 1 560px;
  min-width: 0;
}

.kb-article-hero-actions{
  flex: 0 0 auto;
}

.kb-page-title-pro{
  font-size: clamp(26px, 2.25vw, 38px);
  letter-spacing: -.02em;
  line-height: 1.12;
  margin: 4px 0 10px;
}

.kb-article-meta{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-start;
}

.kb-author{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(15,23,42,.08);
}

.kb-author-avatar{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
  box-shadow: 0 1px 2px rgba(15,23,42,.08);
}

.kb-author-avatar-fallback{
  background: radial-gradient(circle at 30% 30%, rgba(79,70,229,.35), rgba(15,23,42,.08));
}

.kb-author-text{min-width: 0;}

.kb-author-name{
  font-weight: 760;
  font-size: 13px;
  color: rgba(11,18,32,.92);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}

.kb-author-meta{
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(11,18,32,.62);
}

.kb-dot{
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(11,18,32,.28);
  display: inline-block;
}

.kb-article-grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px;
  align-items: start;
}

.kb-article-grid-noaside{
  grid-template-columns: minmax(0, 1fr);
}

.kb-article-card{
  border-radius: 18px;
}

.kb-article-content{
  padding: 22px;
  font-size: 15px;
  color: rgba(11,18,32,.92);
}

.kb-article-content p{line-height: 1.7;}

.kb-article-content a{
  color: rgba(79,70,229,.95);
  text-decoration: none;
}

.kb-article-content a:hover{ text-decoration: underline; }

.kb-article-content h2{
  margin-top: 22px;
  scroll-margin-top: 96px;
}

.kb-article-content h3{
  margin-top: 18px;
  scroll-margin-top: 96px;
}

.kb-article-content pre{
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(15,23,42,.045);
}

.kb-article-content blockquote{
  border-left-color: rgba(79,70,229,.35);
}

.kb-article-aside{position: relative;}

.kb-toc{
  position: sticky;
  top: 92px;
  padding: 14px 14px 12px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.66);
  backdrop-filter: blur(8px);
}

.kb-toc-title{
  font-weight: 760;
  font-size: 13px;
  color: rgba(11,18,32,.82);
  margin-bottom: 10px;
}

.kb-toc-links{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kb-toc-link{
  display: block;
  padding: 6px 8px;
  border-radius: 12px;
  font-size: 13px;
  color: rgba(11,18,32,.76);
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kb-toc-link:hover{
  background: rgba(79,70,229,.06);
  border-color: rgba(79,70,229,.10);
  color: rgba(11,18,32,.92);
}

.kb-toc-link.is-sub{ padding-left: 18px; font-size: 12.5px; color: rgba(11,18,32,.68); }

@media (max-width: 980px){
  .kb-article-grid{grid-template-columns: minmax(0, 1fr);}
  .kb-toc{position: static;}
}

/* Landing page polish */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.hero-title{max-width:22ch}
.hero-rotate{
  position:relative;
  display:inline-block;
  min-width:10ch;
  text-align:left;
  padding:0 2px;
}
.hero-rotate-word{
  position:absolute;
  left:0;top:0;
  opacity:0;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:900;
}
.hero-rotate-word.is-on{
  position:relative;
  opacity:1;
  transform: translateY(0);
}

.hero-badges{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(11,18,32,.10);
  background:rgba(255,255,255,.74);
  font-size:13px;
  color:rgba(11,18,32,.70);
  font-weight:650;
}
.dot{
  height:8px;width:8px;
  border-radius:999px;
  background:rgba(0,108,255,.95);
  box-shadow:0 10px 26px rgba(0,108,255,.20);
}

.hero-preview{
  margin:28px auto 0;
  width:min(1120px, 94vw);
  background:rgba(255,255,255,.82);
}
.hero-preview-inner{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:16px;
  padding:18px;
  align-items:center;
}
@media (max-width: 980px){
  .hero-preview-inner{grid-template-columns:1fr}
}
.hero-preview-kicker{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(11,18,32,.55);font-weight:800}
.hero-preview-title{font-size:18px;font-weight:900;letter-spacing:-.01em;margin-top:6px}
.hero-preview-sub{font-size:13px;color:rgba(11,18,32,.60);line-height:1.55;margin-top:6px}
.hero-preview-right{display:flex;flex-direction:column;gap:10px}
.hero-chip{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(11,18,32,.10);
  background:rgba(11,18,32,.03);
  font-weight:800;
  color:rgba(11,18,32,.82);
}
.hero-chip.subtle{color:rgba(11,18,32,.65)}
.hero-chip-ico{
  height:30px;width:30px;
  border-radius:12px;
  display:grid;place-items:center;
  background:rgba(0,108,255,.10);
  border:1px solid rgba(0,108,255,.16);
}

.tile-actions{margin-top:14px}
.mini-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(0,108,255,.18);
  background:rgba(0,108,255,.06);
  color:rgba(0,108,255,.92);
  font-weight:800;
}
.mini-link:hover{background:rgba(0,108,255,.08)}

/* Pricing page */
.pricing-wrap{max-width:1080px;margin:0 auto}
.pricing-title{margin:12px 0 10px;font-size:52px;letter-spacing:-.02em;line-height:1.08}
.pricing-lead{max-width:780px}
@media (max-width: 640px){
  .pricing-title{font-size:40px}
}

.pricing-points{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.pricing-point{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(11,18,32,.10);
  background:rgba(255,255,255,.72);
  font-size:13px;
  color:rgba(11,18,32,.70);
  font-weight:650;
}

.pricing-grid{
  display:grid;
  gap:18px;
  margin:26px auto 0;
}
@media (max-width: 980px){
  .pricing-grid{grid-template-columns:1fr !important}
}

.plan-card{padding:18px}
.plan-card.is-featured{
  border-color:rgba(0,108,255,.22);
  box-shadow:0 24px 70px rgba(0,108,255,.14);
}
.plan-badge{background:rgba(0,108,255,.10)}
.plan-head{padding:6px 2px 14px}
.plan-name{margin:0 0 6px;font-size:20px;letter-spacing:-.01em}
.plan-price{font-weight:950;font-size:22px;letter-spacing:-.01em;margin-bottom:10px}
.plan-desc{margin:0;color:rgba(11,18,32,.68);line-height:1.55}
.plan-body{border-top:1px solid rgba(11,18,32,.10);padding-top:12px;margin-top:12px}
.plan-subtitle{font-weight:900;margin-bottom:10px}
.plan-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;color:rgba(11,18,32,.78)}
.plan-check{display:inline-grid;place-items:center;height:18px;width:18px;border-radius:999px;background:rgba(0,108,255,.10);border:1px solid rgba(0,108,255,.18);color:rgba(0,108,255,.95);font-weight:900;margin-right:8px}
.plan-cta{margin-top:16px}
.plan-note{margin-top:10px}

.pricing-info{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1080px;margin:22px auto 0}
@media (max-width: 980px){
  .pricing-info{grid-template-columns:1fr}
}
.pricing-info-text{color:rgba(11,18,32,.70);line-height:1.55}

.faq{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.faq-item{
  border:1px solid rgba(11,18,32,.10);
  border-radius:16px;
  background:rgba(255,255,255,.72);
  padding:12px 12px;
}
.faq-item summary{
  cursor:pointer;
  font-weight:850;
  color:rgba(11,18,32,.84);
}
.faq-body{margin-top:10px;color:rgba(11,18,32,.68);line-height:1.55}




/* ===============================
   Shift Planner compact redesign
   Scoped only to Shift Planner
   =============================== */

:root{
  --sp-name-colw: 148px;
  --sp-date-colw: 46px;
  --sp-rowh: 38px;
  --sp-headh: 54px;
}

.sp-panel,
#planner_wrap,
#grid,
#sp_stickybar,
#sp_right_summary{
  font-variant-numeric: tabular-nums;
}

.sp-controls{
  grid-template-columns: 170px 230px 132px 132px auto auto;
  gap:8px 10px;
  align-items:end;
}

.sp-controls label{
  font-size:10px;
  margin:0 0 4px;
  letter-spacing:.02em;
}

.sp-controls select,
.sp-controls input[type="date"],
.emp-btn{
  height:34px;
  min-height:34px;
  padding:6px 10px;
  border-radius:11px;
  font-size:12px;
}

.sp-controls .pill,
.sp-btn{
  padding:6px 10px;
  font-size:12px;
}

.sp-badges{
  gap:6px;
}

.sp-badges .badge{
  padding:5px 9px;
  font-size:11px;
}

.planner-wrap{
  overflow:auto;
  scrollbar-gutter: stable both-edges;
}

.grid-table{
  table-layout:fixed;
  width:max-content;
  min-width:100%;
}

.grid-table th,
.grid-table td{
  padding:3px 2px;
  font-size:11px;
  text-align:center;
  height:var(--sp-rowh, 38px);
}

.grid-table thead th{
  position:sticky;
  top:0;
  z-index:4;
  background:rgba(255,255,255,.96);
  height:var(--sp-headh, 54px);
  vertical-align:middle;
}

.grid-table thead th .week{
  font-size:9px;
  line-height:1;
  color:#7b8796;
  font-weight:800;
  min-height:10px;
  margin-bottom:2px;
}

.grid-table thead th .date{
  font-size:15px;
  font-weight:900;
  line-height:1;
  color:#111827;
}

.grid-table thead th .dow{
  font-size:10px;
  line-height:1.1;
  color:#667085;
  font-weight:700;
  margin-top:3px;
}

.grid-table th.date-col,
.grid-table td.date-col,
#grid table.grid-table th.date-col,
#grid table.grid-table td.date-col,
.sp-daycell{
  width:var(--sp-date-colw, 46px);
  min-width:var(--sp-date-colw, 46px);
  max-width:var(--sp-date-colw, 46px);
}

.sticky-col,
.sticky-col.name{
  width:var(--sp-name-colw, 148px);
  min-width:var(--sp-name-colw, 148px);
  max-width:var(--sp-name-colw, 148px);
  text-align:left;
}

.grid-table .divider-col{
  width:54px;
  min-width:54px;
  max-width:54px;
}

.grid-table tfoot th,
.grid-table tfoot td{
  background:rgba(248,250,252,.96);
}

.sp-emp{
  gap:7px;
  min-height:26px;
}

.sp-emp-avatar{
  width:22px;
  height:22px;
  flex:0 0 22px;
}

.sp-emp .emp-name,
.emp-name{
  font-size:12px;
  font-weight:800;
  line-height:1.05;
}

.cell-select{
  width:40px;
  min-width:40px;
  max-width:40px;
  height:28px;
  padding:2px 16px 2px 4px;
  border-radius:9px;
  font-size:11px;
  font-weight:800;
  text-align:center;
  text-align-last:center;
  appearance:none;
  -webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, rgba(11,18,32,.45) 50%), linear-gradient(135deg, rgba(11,18,32,.45) 50%, transparent 50%);
  background-position:calc(100% - 10px) calc(50% - 1px), calc(100% - 6px) calc(50% - 1px);
  background-size:4px 4px, 4px 4px;
  background-repeat:no-repeat;
}

.cell-select option{
  font-size:12px;
}

.sp-cell-badge{
  font-size:9px;
  padding:3px 5px;
}

#sp_right_summary{
  width:88px;
  border-radius:12px;
}

#sp_right_summary .sp-right-head,
#sp_right_summary .sp-r-row{
  padding-left:8px;
  padding-right:8px;
  font-size:11px;
}

#sp_right_summary .sp-r-shifts,
#sp_right_summary .sp-r-hours{
  font-size:11px;
}

#sp_stickybar{
  margin-top:8px;
  padding:0;
  border-radius:12px;
}

.sp-daytotals-spacer{
  width:var(--sp-name-colw, 148px);
  min-width:var(--sp-name-colw, 148px);
  max-width:var(--sp-name-colw, 148px);
}

.sp-daytotals-left{
  padding:8px 10px;
  border-radius:10px;
}

.sp-daytotals-metric,
.sp-daytotals-label{
  font-size:11px;
}

.sp-daycell{
  height:56px;
}

.sp-daycell-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  height:100%;
  padding:6px 4px;
}

.sp-daycell-metric{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
}

.sp-daycell-label{
  font-size:9px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#64748b;
  font-weight:700;
}

.sp-daycell-value{
  font-size:12px;
  line-height:1.05;
  color:#0f172a;
  font-weight:900;
}

#grid table tfoot th.sticky-col.name .sp-shifthead{
  gap:6px;
}

#grid table tfoot th.sticky-col.name .sp-shiftcode{
  font-size:11px;
}

#grid table tfoot th.sticky-col.name .sp-shifttime{
  font-size:10px;
}

.sp-shiftdot{
  width:8px;
  height:8px;
}

@media (max-width: 1500px){
  :root{
    --sp-name-colw: 138px;
    --sp-date-colw: 44px;
    --sp-rowh: 36px;
  }

  .sp-controls{
    grid-template-columns: 1fr 1.15fr 125px 125px auto;
  }

  .sp-controls .ctrl.sp-badges{
    grid-column:1 / -1;
    justify-self:start;
  }
}

@media (max-width: 1200px){
  :root{
    --sp-name-colw: 130px;
    --sp-date-colw: 42px;
  }

  .grid-table .divider-col{
    width:50px;
    min-width:50px;
    max-width:50px;
  }

  .cell-select{
    width:36px;
    min-width:36px;
    max-width:36px;
    font-size:10px;
    padding-right:14px;
  }
}

@media (max-width: 980px){
  :root{
    --sp-name-colw: 124px;
    --sp-date-colw: 40px;
  }

  #sp_right_summary{
    display:none !important;
  }
}


/* Shift Planner layout refinement: use more horizontal space without affecting the rest of the app */
.sp-main{
  margin-left: calc(var(--sidebarW) + 6px);
  margin-right: 6px;
}

#planner_wrap{
  padding-right: 0;
}

/* Remove the separate right summary rail so the planner can use the full width */
#sp_right_summary{
  display:none !important;
}

/* Keep the end summary columns compact and readable inside the grid itself */
.grid-table .divider-col,
#grid table.grid-table .divider-col{
  width: 44px;
  min-width: 44px;
  max-width: 44px;
}

.grid-table th.divider-col,
.grid-table td.divider-col{
  font-size: 11px;
  font-weight: 800;
}

@media (max-width: 980px){
  .sp-main{
    margin-left: 0;
    margin-right: 0;
  }
}


/* Shift Planner: keep the right-side summary columns visible and aligned */
#planner_wrap,
.planner-wrap{
  padding-right: 12px;
}

#grid{
  padding-right: 6px;
}

.grid-table th.count-col,
.grid-table td.count-col,
#grid table.grid-table th.count-col,
#grid table.grid-table td.count-col{
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  padding-left: 2px;
  padding-right: 2px;
}

.grid-table thead th.count-col .date,
#grid table.grid-table thead th.count-col .date{
  font-size: 12px;
}

.grid-table thead th.count-col .dow,
#grid table.grid-table thead th.count-col .dow{
  font-size: 9px;
}


/* Shift Planner: protect right summary columns from page scrollbar clipping */
.sp-main{
  margin-right: 18px;
}

#planner_wrap,
.planner-wrap{
  padding-right: 20px !important;
}

#grid{
  padding-right: 12px;
}

.grid-table .end-pad-col,
#grid table.grid-table .end-pad-col{
  width: 22px;
  min-width: 22px;
  max-width: 22px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.grid-table th.end-pad-col{
  position: static !important;
}

@media (max-width: 980px){
  .sp-main{
    margin-right: 10px;
  }
}

/* Shift Planner premium interaction layer */
.sp-quicktips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 12px;
}

.sp-quicktip{
  display:inline-flex;
  align-items:center;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(0,108,255,.12);
  background:rgba(255,255,255,.78);
  color:rgba(11,18,32,.68);
  font-size:12px;
  font-weight:700;
  box-shadow:0 8px 22px rgba(11,18,32,.04);
}

#planner_wrap{
  position:relative;
  overflow-x:auto;
  overflow-y:visible;
  overscroll-behavior-x:contain;
  overscroll-behavior-y:auto;
}

#grid .grid-table{
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
}

#grid .grid-table th,
#grid .grid-table td{
  position:relative;
}

#grid .grid-table td.weekend-col,
#grid .grid-table th.weekend-col,
.sp-daycell.weekend-col{
  background:rgba(0,108,255,.035);
}

#grid .grid-table tbody tr:hover td:not(.sticky-col){
  background:rgba(0,108,255,.045);
}

#grid .grid-table .sticky-col.name{
  z-index:6;
  box-shadow:10px 0 18px rgba(15,23,42,.04);
}

#grid .grid-table thead .sticky-col.name{
  z-index:8;
}

#grid .grid-table tbody tr:nth-child(even) td.sticky-col.name{
  background:rgba(247,251,255,.98);
}

#grid .grid-table tbody tr:nth-child(odd) td.sticky-col.name{
  background:rgba(255,255,255,.98);
}

#grid .grid-table td.sp-cellwrap{
  padding:4px 3px;
  background-clip:padding-box;
}

#grid .cell-select{
  width:100%;
  min-width:0;
  max-width:none;
  height:30px;
  border-radius:10px;
  border:1px solid rgba(11,18,32,.10);
  background:rgba(255,255,255,.92);
  font-weight:800;
  letter-spacing:.01em;
  text-align:center;
  text-align-last:center;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 1px 2px rgba(15,23,42,.04);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

#grid .cell-select:hover{
  border-color:rgba(0,108,255,.24);
  box-shadow:0 6px 18px rgba(0,108,255,.10);
}

#grid .cell-select:focus{
  border-color:rgba(0,108,255,.32);
  box-shadow:0 0 0 3px rgba(0,108,255,.12), 0 6px 18px rgba(0,108,255,.10);
}

#grid .cell-select.has-value{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px rgba(15,23,42,.08);
}

#grid td.has-shift-value .sp-fill-handle,
#grid td:hover .sp-fill-handle,
body.sp-dragging #grid td.sp-drag-source .sp-fill-handle{
  opacity:1;
  transform:scale(1);
}

.sp-fill-handle{
  position:absolute;
  right:2px;
  bottom:2px;
  width:10px;
  height:10px;
  border:0;
  padding:0;
  border-radius:999px;
  background:#006CFF;
  box-shadow:0 0 0 2px #fff, 0 6px 16px rgba(0,108,255,.20);
  cursor:crosshair;
  opacity:0;
  transform:scale(.7);
  transition:opacity .12s ease, transform .12s ease;
}

.sp-fill-handle:hover{
  transform:scale(1.08);
}

#grid td.sp-drag-target::after{
  content:"";
  position:absolute;
  inset:2px;
  border:2px dashed rgba(0,108,255,.42);
  border-radius:11px;
  pointer-events:none;
}

#grid td.sp-drag-source::before{
  content:"";
  position:absolute;
  inset:2px;
  border:2px solid rgba(0,108,255,.55);
  border-radius:11px;
  pointer-events:none;
}

.sp-daycell.weekend-col{
  background:rgba(0,108,255,.05);
}

.sp-daycell{
  border-color:rgba(11,18,32,.08);
}

.sp-stickybar,
#sp_stickybar{
  margin-top:10px;
  border-radius:16px;
}

@media (max-width: 980px){
  .sp-quicktips{
    gap:6px;
  }

  .sp-quicktip{
    font-size:11px;
    padding:6px 10px;
  }

  .sp-fill-handle{
    opacity:1;
    transform:none;
  }
}


/* Shift Planner: keep only the blue custom bottom scrollbar */
.planner-wrap,
#planner_wrap{
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.planner-wrap::-webkit-scrollbar,
#planner_wrap::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.sp-daytotals-scroll,
#sp_daytotals_scroll{
  overflow: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  pointer-events: none;
}
.sp-daytotals-scroll::-webkit-scrollbar,
#sp_daytotals_scroll::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}


/* Shift Planner footer final fix */
.sp-daytotals-spacer{
  width: var(--sp-name-colw, 136px) !important;
  min-width: var(--sp-name-colw, 136px) !important;
  max-width: var(--sp-name-colw, 136px) !important;
  padding-right: 0 !important;
}

.sp-daytotals-left{
  width: calc(100% - 6px);
  margin-right: 6px;
  padding: 10px 12px !important;
  border-radius: 0px !important;
}

.sp-daytotals-metric{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  white-space:nowrap;
  font-size:12px !important;
  line-height:1.15 !important;
}

.sp-daytotals-metric strong{
  white-space:nowrap;
}

.sp-daytotals-label{
  display:none !important;
}

.sp-daycell{
  border-left: 0 !important;
}

.sp-daycell:first-of-type{
  border-left: 1px solid rgba(11,18,32,.08) !important;
}

.sp-daycell-inner{
  gap: 2px !important;
}

.sp-daycell-metric[data-kind="shifts"] .sp-daycell-label,
.sp-daycell-metric[data-kind="hours"] .sp-daycell-label{
  color:#64748b !important;
}

.sp-daycell-metric[data-kind="shifts"] .sp-daycell-value{
  color:#2563eb !important;
}

.sp-daycell-metric[data-kind="hours"] .sp-daycell-value{
  color:#0f172a !important;
}

/* Shift Planner scroll fix: allow normal page vertical scrolling while keeping horizontal planner scrolling */
.planner-wrap,
#planner_wrap{
  overflow-x: auto !important;
  overflow-y: visible !important;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}

/* =====================================================
   Shift Planner footer and width alignment final cleanup
   Keep sizing in CSS only
   ===================================================== */
:root{
  --sp-left-summary-w: 136px;
  --sp-day-colw-final: 46px;
}

/* One source of truth for the left employee column and the bottom summary box */
#grid table.grid-table th.sticky-col.name,
#grid table.grid-table td.sticky-col.name,
#grid table.grid-table tfoot th.sticky-col.name,
.sticky-col.name,
.sp-daytotals-spacer{
  width: var(--sp-left-summary-w) !important;
  min-width: var(--sp-left-summary-w) !important;
  max-width: var(--sp-left-summary-w) !important;
}

/* One source of truth for day widths in both header/grid/footer */
#grid table.grid-table th.date-col,
#grid table.grid-table td.date-col,
.sp-daycell,
#grid table.grid-table thead th.date-col,
#grid table.grid-table tbody td.date-col{
  width: var(--sp-day-colw-final) !important;
  min-width: var(--sp-day-colw-final) !important;
  max-width: var(--sp-day-colw-final) !important;
  box-sizing: border-box;
}

/* Keep only the custom blue scrollbar while allowing normal vertical page scroll */
#planner_wrap,
.planner-wrap{
  overflow-x: auto !important;
  overflow-y: visible !important;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
#planner_wrap::-webkit-scrollbar,
.planner-wrap::-webkit-scrollbar,
#sp_daytotals_scroll::-webkit-scrollbar,
.sp-daytotals-scroll::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
#sp_daytotals_scroll,
.sp-daytotals-scroll{
  overflow: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  pointer-events: none;
}

/* Bottom left summary card */
.sp-daytotals-spacer{
  padding-right: 0 !important;
}
.sp-daytotals-left{
  width: 100% !important;
  margin-right: 0 !important;
  padding: 10px 12px !important;
  border-radius: 0px !important;
}
.sp-daytotals-metric{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  white-space: nowrap;
  font-size: 12px !important;
  line-height: 1.15 !important;
}
.sp-daytotals-metric strong,
.sp-daytotals-metric span{
  white-space: nowrap;
}
.sp-daytotals-label{
  display: none !important;
}

/* Footer day summary styling restored to blue + black */
.sp-daycell{
  height: 56px !important;
  border-left: 0 !important;
  border-color: rgba(11,18,32,.08) !important;
}
.sp-daycell:first-of-type{
  border-left: 1px solid rgba(11,18,32,.08) !important;
}
.sp-daycell-inner{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  width: 100%;
  height: 100%;
  padding: 6px 2px !important;
}
.sp-daycell-metric{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.sp-daycell-label{
  font-size: 9px !important;
  line-height: 1 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b !important;
  font-weight: 700 !important;
}
.sp-daycell-metric[data-kind="shifts"] .sp-daycell-value{
  color: #2563eb !important;
  font-size: 12px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
}
.sp-daycell-metric[data-kind="hours"] .sp-daycell-value{
  color: #0f172a !important;
  font-size: 12px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
}


.ico-projects{--icon:url('/assets/icons/projects.svg')}

.projects-hero{
  display:grid;
  grid-template-columns:minmax(0, 1.3fr) minmax(280px, .7fr);
  gap:16px;
  margin-bottom:16px;
}
.projects-hero-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.08);
  border-radius:24px;
  background:linear-gradient(135deg,#ffffff 0%,#f7f9fc 48%,#eef4ff 100%);
  box-shadow:0 18px 36px rgba(15,23,42,.06);
}
.projects-hero-card::after{
  content:'';
  position:absolute;
  right:-70px;
  top:-70px;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,108,255,.12) 0%, rgba(0,108,255,0) 72%);
  pointer-events:none;
}
.projects-hero-body{padding:24px; position:relative; z-index:1;}
.projects-kicker{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#eef4ff; color:#0b5bd3; font-weight:700; font-size:12px; letter-spacing:.02em;}
.projects-hero-title{margin:14px 0 8px; font-size:32px; line-height:1.05; font-weight:800; color:#0f172a;}
.projects-hero-sub{margin:0; color:#5b6474; max-width:720px;}
.projects-hero-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}
.projects-stat-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
.projects-stat{
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
}
.projects-stat-label{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#7a8291;}
.projects-stat-value{margin-top:8px; font-size:28px; line-height:1; font-weight:800; color:#111827;}
.projects-stat-sub{margin-top:6px; color:#6b7280; font-size:13px;}
.projects-summary-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:16px 0 18px;}
.project-summary-tile{padding:16px 18px; background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:20px; box-shadow:0 10px 24px rgba(15,23,42,.04);}
.project-summary-tile .eyebrow{font-size:12px; font-weight:700; text-transform:uppercase; color:#7c8595; letter-spacing:.05em;}
.project-summary-tile .value{margin-top:8px; font-size:28px; font-weight:800; color:#111827;}
.project-summary-tile .meta{margin-top:6px; color:#6b7280; font-size:13px;}
.project-list-name{display:flex; align-items:flex-start; gap:12px;}
.project-dot{width:14px; height:14px; border-radius:999px; flex:0 0 14px; margin-top:4px; box-shadow:0 0 0 4px rgba(15,23,42,.04);}
.project-name{font-weight:800; color:#111827; font-size:15px;}
.project-meta{margin-top:5px; color:#6b7280; font-size:13px;}
.project-status-badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; font-weight:700; font-size:12px;}
.project-status-badge.planning{background:#eff6ff; color:#1d4ed8;}
.project-status-badge.active{background:#ecfdf5; color:#047857;}
.project-status-badge.on_hold{background:#fff7ed; color:#c2410c;}
.project-status-badge.completed{background:#f3f4f6; color:#374151;}
.project-status-badge.archived{background:#f8fafc; color:#64748b;}
.project-status-badge .status-dot{width:8px; height:8px; border-radius:999px; background:currentColor; opacity:.9;}
.project-empty{padding:36px 24px; text-align:center; border:1px dashed rgba(15,23,42,.12); border-radius:24px; color:#6b7280; background:#fafbfd;}
.project-layout{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr); gap:16px; align-items:start;}
.project-editor{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; align-items:start;}
.project-sidecard{padding:16px; border:1px solid rgba(15,23,42,.08); border-radius:20px; background:#fff; box-shadow:0 10px 24px rgba(15,23,42,.04);}
.project-sidecard + .project-sidecard{margin-top:12px;}
.project-sidecard h3{margin:0 0 8px; font-size:16px;}
.project-sidecard p{margin:0; color:#6b7280;}
.project-color-input{display:flex; align-items:center; gap:10px;}
.project-color-chip{width:44px; height:44px; border-radius:14px; border:1px solid rgba(15,23,42,.08); flex:0 0 44px;}
.project-overview{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px;}
.project-overview-card{padding:16px; border-radius:20px; background:#fff; border:1px solid rgba(15,23,42,.08); box-shadow:0 10px 24px rgba(15,23,42,.04);}
.project-overview-card .label{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:#7c8595; font-weight:700;}
.project-overview-card .big{margin-top:8px; font-size:26px; font-weight:800; color:#111827;}
.project-overview-card .small{margin-top:6px; color:#6b7280; font-size:13px;}
.project-content{padding:18px 20px; border-radius:22px; border:1px solid rgba(15,23,42,.08); background:#fff; box-shadow:0 10px 24px rgba(15,23,42,.04);}
.project-content h3{margin-top:0;}
.project-prose{color:#374151; line-height:1.7;}
.project-prose h1,.project-prose h2,.project-prose h3{color:#111827;}
.project-prose img{max-width:100%; border-radius:14px;}
.project-meta-list{display:grid; gap:12px;}
.project-meta-row{display:flex; justify-content:space-between; gap:12px; align-items:flex-start;}
.project-meta-row .key{color:#7c8595; font-size:13px;}
.project-meta-row .val{color:#111827; font-weight:700; text-align:right;}
.project-board-wrap{margin-top:18px;}
.project-board-head{display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:12px;}
.project-board{display:grid; grid-template-columns:repeat(4,minmax(260px,1fr)); gap:14px; align-items:start; overflow-x:auto; padding-bottom:4px;}
.project-column{background:#f8fafc; border:1px solid rgba(15,23,42,.08); border-radius:22px; min-height:260px; display:flex; flex-direction:column;}
.project-column-head{padding:14px 14px 10px; display:flex; align-items:center; justify-content:space-between; gap:10px;}
.project-column-title{font-weight:800; color:#111827; display:flex; align-items:center; gap:8px;}
.project-column-title .dot{width:10px; height:10px; border-radius:999px; background:currentColor;}
.project-column-count{font-size:12px; font-weight:700; color:#64748b; padding:6px 10px; background:#fff; border-radius:999px; border:1px solid rgba(15,23,42,.06);}
.project-task-list{padding:0 12px 12px; display:flex; flex-direction:column; gap:10px; min-height:170px;}
.project-column.drag-over{box-shadow:0 0 0 2px rgba(0,108,255,.18) inset; background:#f0f6ff;}
.project-task{background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:18px; padding:14px; box-shadow:0 8px 18px rgba(15,23,42,.04); cursor:grab;}
.project-task:active{cursor:grabbing;}
.project-task-title{font-weight:800; color:#111827; margin-bottom:6px;}
.project-task-desc{font-size:13px; color:#6b7280; line-height:1.5; margin-bottom:10px;}
.project-task-meta{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.project-chip{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; background:#f3f4f6; color:#374151;}
.project-chip.priority-low{background:#eff6ff; color:#1d4ed8;}
.project-chip.priority-medium{background:#fff7ed; color:#c2410c;}
.project-chip.priority-high{background:#fef2f2; color:#dc2626;}
.project-chip.priority-urgent{background:#111827; color:#fff;}
.project-task-footer{display:flex; justify-content:space-between; gap:10px; align-items:center;}
.project-assignee{display:flex; align-items:center; gap:8px; min-width:0;}
.project-avatar{width:30px; height:30px; border-radius:999px; object-fit:cover; background:#e5e7eb; color:#374151; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px;}
.project-avatar-stack{display:flex; align-items:center;}
.project-avatar-stack .project-avatar{margin-left:-8px; border:2px solid #fff; box-shadow:0 4px 12px rgba(15,23,42,.1);}
.project-avatar-stack .project-avatar:first-child{margin-left:0;}
.project-task-actions{display:flex; gap:8px; flex-wrap:wrap;}
.project-inline-form{margin-top:10px; padding-top:10px; border-top:1px dashed rgba(15,23,42,.08); display:none;}
.project-inline-form.open{display:block;}
.project-inline-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
.project-add-task{display:none; margin-top:12px; padding:14px; background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:18px;}
.project-add-task.open{display:block;}
.project-mini-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;}
.project-muted{color:#6b7280;}
.project-pill-link{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1px solid rgba(15,23,42,.08); color:#111827; font-weight:700; text-decoration:none;}
.project-assignee-name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; color:#374151;}

@media (max-width: 1180px){
  .projects-hero,
  .project-layout,
  .project-editor{grid-template-columns:1fr;}
  .projects-summary-grid,
  .project-overview{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width: 760px){
  .home-page{
    width:auto;
    margin-left:0;
    margin-right:0;
  }

  .home-page .container{
    width:min(100%, calc(100vw - 32px));
  }


  .projects-stat-grid,
  .projects-summary-grid,
  .project-overview,
  .project-inline-grid{grid-template-columns:1fr;}
  .projects-hero-title{font-size:28px;}
}

/* Projects board statuses and tighter project header */
.app-topbar-title{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.project-header-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,108,255,.14);
  background:rgba(255,255,255,.78);
  color:#0b5bd3;
  font-size:12px;
  font-weight:800;
}
.project-header-badge .dot{width:8px; height:8px; border-radius:999px; display:inline-block;}
.project-page-head--compact{margin-bottom:12px;}
.project-view-tabs{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.project-view-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(11,18,32,.10);
  background:rgba(255,255,255,.92);
  font-weight:800;
  color:rgba(11,18,32,.84);
}
.project-view-tab.is-active,
.project-view-tab.active{
  border-color:rgba(0,108,255,.22);
  background:linear-gradient(135deg, rgba(0,108,255,.94), rgba(0,179,255,.86));
  color:#fff;
  box-shadow:0 12px 28px rgba(0,108,255,.16);
}
.project-board-shell{display:flex; flex-direction:column; gap:12px;}
.project-board-toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.project-board-inline-stats{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.project-board-inline-stat{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  box-shadow:0 8px 18px rgba(15,23,42,.04);
}
.project-board-inline-stat .k{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:#7c8595; font-weight:800;}
.project-board-inline-stat .v{font-size:14px; color:#111827; font-weight:900;}
.project-board-status-form,
.project-add-task{
  display:none;
  padding:14px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.04);
}
.project-board-status-form.open,
.project-add-task.open{display:block;}
.project-inline-grid--status{grid-template-columns:minmax(240px,1fr) 180px;}
.project-column-head-actions{display:flex; align-items:center; gap:8px;}
.project-column-delete{
  width:26px;
  height:26px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  color:#64748b;
  font-size:16px;
  line-height:1;
  cursor:pointer;
}
.project-column-delete:hover{border-color:rgba(220,38,38,.24); color:#b91c1c;}
.project-board-wrap--tabbed{margin-top:0;}
.project-board{grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); align-items:start;}
.project-column{min-height:220px; max-height:calc(100vh - 260px);}
.project-task-list{overflow:auto; min-height:120px; padding-bottom:10px;}
.project-task--compact{padding:12px; border-radius:16px;}
.project-task--compact .project-task-title{font-size:13px; line-height:1.3;}
.project-task--compact .project-task-desc{font-size:12px; line-height:1.45; margin-top:5px; color:#6b7280;}
.project-task-meta--compact{margin-top:8px; gap:6px; flex-wrap:wrap;}
.project-task-footer--compact{margin-top:8px; gap:8px; align-items:center;}
.project-task-footer--compact .project-avatar{width:24px; height:24px;}
.project-task-footer--compact .project-assignee-name,
.project-task-footer--compact .project-muted{font-size:12px;}
.project-task-actions .pill{padding:7px 10px; font-size:12px;}
.project-mini-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
.project-muted{color:#6b7280;}
@media (max-width: 980px){
  .project-inline-grid--status{grid-template-columns:1fr;}
  .project-column{max-height:none;}
}


.project-page-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.project-page-head__actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end;}
.project-page-head__actions .btn,
.project-view-tab{padding:8px 13px; font-size:13px; min-height:36px; box-shadow:none;}
.project-view-tabs{gap:8px;}
.project-board-inline-stats{margin-top:2px; margin-bottom:2px;}
.project-board-inline-stat{padding:7px 10px; box-shadow:none;}
.project-board-inline-stat .v{font-size:13px;}
.project-column-edit,
.project-column-delete{width:24px; height:24px; font-size:13px;}
.project-column-edit{border-radius:999px; border:1px solid rgba(15,23,42,.10); background:#fff; color:#64748b; cursor:pointer;}
.project-column-edit:hover{border-color:rgba(0,108,255,.24); color:#0b5bd3;}
.project-task--compact .project-task-title{margin-bottom:2px;}
.project-task--compact .project-task-meta{margin-bottom:8px;}
.project-task--compact .project-task-actions .pill{padding:6px 10px; font-size:12px;}
.project-task--compact{cursor:grab;}
.project-modal{position:fixed; inset:0; display:none; z-index:120;}
.project-modal.open{display:block;}
.project-modal__backdrop{position:absolute; inset:0; background:rgba(15,23,42,.42);}
.project-modal__dialog{position:relative; z-index:1; width:min(760px, calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto; margin:16px auto; background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:20px; box-shadow:0 30px 80px rgba(15,23,42,.28); padding:18px;}
.project-modal__head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px;}
.project-modal__title{font-size:18px; font-weight:800; color:#111827; line-height:1.2;}
.project-modal__sub{font-size:12px; color:#6b7280; margin-top:4px;}
.project-modal__close{width:34px; height:34px; border-radius:999px; border:1px solid rgba(15,23,42,.10); background:#fff; color:#64748b; font-size:22px; line-height:1; cursor:pointer;}
.project-modal__close:hover{border-color:rgba(0,108,255,.24); color:#0b5bd3;}
body.project-modal-open{overflow:hidden;}
@media (max-width: 760px){
  .project-page-head{align-items:flex-start;}
  .project-page-head__actions{width:100%; justify-content:flex-start;}
  .project-modal__dialog{width:min(100vw - 20px, 760px); margin:10px auto; padding:14px;}
}


/* Projects board compact card and modal refinement */
.project-task-list{gap:8px;}
.project-task--compact{padding:10px 12px;}
.project-task-actions{gap:6px;}
.project-task-actions .pill{padding:6px 10px; font-size:12px;}
.project-modal__head-actions{display:flex; align-items:center; gap:8px;}
.project-task-view{display:block;}
.project-task-view__chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.project-task-view__grid{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(220px,.7fr); gap:16px;}
.project-task-view__section{padding:14px; border-radius:16px; background:#f8fafc; border:1px solid rgba(15,23,42,.08);}
.project-task-view__label{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:#7c8595; font-weight:800; margin-bottom:8px;}
.project-task-view__content{color:#374151; line-height:1.65;}
.project-task-view__meta{padding:14px; border-radius:16px; background:#fff; border:1px solid rgba(15,23,42,.08);}
.project-task-view__row{display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding:8px 0; border-bottom:1px solid rgba(15,23,42,.06);}
.project-task-view__row:last-child{border-bottom:0;}
.project-task-view__row span{font-size:12px; color:#7c8595;}
.project-task-view__row strong{font-size:13px; color:#111827; text-align:right;}
.project-task-edit-form[hidden], .project-task-view[hidden]{display:none !important;}
@media (max-width:760px){.project-task-view__grid{grid-template-columns:1fr;}}

/* Sidebar fixes and Orkify-style polish */
.sidebar-head{
  gap:12px;
  align-items:center;
}

.sidebar-menu-toggle{
  width:40px;
  height:40px;
  min-width:40px;
  border-radius:14px;
  border:1px solid rgba(11,18,32,.10);
  background:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(11,18,32,.05);
}
.sidebar-menu-toggle:hover{
  border-color:rgba(0,108,255,.22);
  color:rgba(0,108,255,.95);
}
.sidebar-menu-toggle .nav-ico{
  margin:0;
  width:18px;
  height:18px;
  border:0;
  background:transparent;
}

.sidebar-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.sidebar-brand img{
  display:block;
  height:36px;
  width:auto;
  max-width:36px;
  object-fit:contain;
  border-radius:10px;
}

.sidebar-meta{
  min-width:0;
}
.sidebar-meta strong,
.sidebar-meta span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sidebar-foot{
  border-top:1px solid rgba(11,18,32,.08);
  margin-top:6px;
  padding-top:12px;
}

.sidebar-user{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 4px 12px;
}
.sidebar-user-avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  overflow:hidden;
  background:rgba(0,108,255,.10);
  color:rgba(0,108,255,.95);
  border:1px solid rgba(11,18,32,.08);
  display:grid;
  place-items:center;
  font-weight:800;
  flex:0 0 40px;
}
.sidebar-user-avatar img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.sidebar-user-meta{
  min-width:0;
}
.sidebar-user-meta strong,
.sidebar-user-meta span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sidebar-user-meta strong{
  font-size:14px;
  font-weight:800;
}
.sidebar-user-meta span{
  font-size:12px;
  color:rgba(11,18,32,.56);
}

html.sidebar-collapsed .sidebar-brand,
html.sidebar-collapsed .sidebar-user-meta{
  display:none;
}
html.sidebar-collapsed .sidebar-user{
  justify-content:center;
  padding-left:0;
  padding-right:0;
}
html.sidebar-collapsed .sidebar-collapse{
  justify-content:center;
}

@media (max-width: 980px){
  .app-sidebar{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:min(280px, 88vw);
    transform:translateX(-100%);
    transition:transform .22s ease;
    z-index:90;
    border-radius:0 22px 22px 0;
  }
  html.sidebar-mobile-open .app-sidebar{
    transform:translateX(0);
  }
}

/* Happeno sidebar redesign inspired by the attached reference */
:root{
  --sidebarW: 248px;
  --ork-border:#e5e7eb;
  --ork-bg:#f7f7f8;
  --ork-text:#111111;
  --ork-muted:#71717a;
  --ork-soft:#f1f1f2;
}

.app-shell,
.app-layout,
.page-shell,
.page-layout{
  min-height:100vh;
}

.ork-sidebar.app-sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:var(--sidebarW);
  background:var(--ork-bg);
  border-right:1px solid var(--ork-border);
  display:flex;
  flex-direction:column;
  z-index:100;
  box-shadow:none;
  padding:0;
  border-radius:0;
}

.ork-sidebar__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:20px 18px 14px;
  border-bottom:1px solid var(--ork-border);
}

.ork-brand{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
}

.ork-brand__logo{
  width:36px;
  height:36px;
  border-radius:12px;
  background:#111;
  display:grid;
  place-items:center;
  overflow:hidden;
  flex:0 0 36px;
  position:relative;
}

.ork-brand__logo img,
.ork-brand__fallback{
  width:100%;
  height:100%;
}

.ork-brand__logo img{
  object-fit:contain;
  display:block;
  padding:4px;
  background:#111;
}

.ork-brand__fallback{
  display:grid;
  place-items:center;
  color:#fff;
  font-size:14px;
  font-weight:800;
}

.ork-brand__meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  line-height:1.12;
}

.ork-brand__meta strong{
  font-size:14px;
  font-weight:700;
  color:var(--ork-text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ork-brand__meta span{
  margin-top:2px;
  font-size:12px;
  color:var(--ork-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ork-header-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.ork-icon-btn{
  width:28px;
  height:28px;
  border:0;
  background:transparent;
  border-radius:8px;
  display:grid;
  place-items:center;
  color:#3f3f46;
  cursor:pointer;
}

.ork-icon-btn:hover{
  background:#ececee;
}

.ork-icon-btn .nav-ico{
  width:16px;
  height:16px;
  margin:0;
  border:0;
  background:transparent;
}

.ork-sidebar__scroll{
  flex:1 1 auto;
  overflow:auto;
  padding:12px 14px 18px;
}

.ork-section + .ork-section{
  margin-top:18px;
}

.ork-section__label{
  margin:0 10px 8px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#8b8b93;
  font-weight:600;
}

.ork-nav-list{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.ork-nav-item,
.ork-nav-item--summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:42px;
  padding:0 12px;
  border-radius:12px;
  color:var(--ork-text);
  font-size:15px;
  font-weight:500;
  border:1px solid transparent;
  background:transparent;
}

.ork-nav-item:hover,
.ork-nav-item--summary:hover{
  background:#efeff0;
}

.ork-nav-item.active,
.ork-nav-group[open] > .ork-nav-item--summary{
  background:#efeff0;
}

.ork-nav-item__left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.ork-nav-item__label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ork-nav-item .nav-ico,
.ork-nav-item--summary .nav-ico{
  width:18px;
  height:18px;
  margin:0;
  border:0;
  background:transparent;
  color:#27272a;
  flex:0 0 18px;
}

.ork-nav-item__chev{
  width:16px;
  height:16px;
  flex:0 0 16px;
  position:relative;
}

.ork-nav-item__chev::before{
  content:'';
  position:absolute;
  top:4px;
  left:5px;
  width:6px;
  height:6px;
  border-right:1.8px solid #52525b;
  border-bottom:1.8px solid #52525b;
  transform:rotate(45deg);
  transition:transform .18s ease;
}

.ork-nav-group{
  margin:0;
}

.ork-nav-group summary{
  list-style:none;
  cursor:pointer;
}

.ork-nav-group summary::-webkit-details-marker{
  display:none;
}

.ork-nav-group[open] .ork-nav-item__chev::before{
  transform:rotate(45deg) translate(1px, 1px);
}

.ork-subnav{
  position:relative;
  margin:4px 0 2px 28px;
  padding-left:12px;
}

.ork-subnav::before{
  content:'';
  position:absolute;
  top:2px;
  bottom:2px;
  left:0;
  width:1px;
  background:#dddddf;
}

.ork-subnav__item{
  position:relative;
  display:flex;
  align-items:center;
  min-height:38px;
  padding:0 12px;
  border-radius:10px;
  color:#18181b;
  font-size:15px;
  font-weight:400;
}

.ork-subnav__item:hover,
.ork-subnav__item.active{
  background:#efeff0;
}

.ork-subnav__line{display:none;}

.ork-sidebar__footer{
  padding:14px;
  border-top:1px solid var(--ork-border);
  background:var(--ork-bg);
}

.ork-user{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:52px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid transparent;
  background:#fff;
}

.ork-user__avatar{
  width:34px;
  height:34px;
  border-radius:999px;
  overflow:hidden;
  background:#ececee;
  flex:0 0 34px;
  display:grid;
  place-items:center;
}

.ork-user__avatar img,
.ork-user__fallback{
  width:100%;
  height:100%;
}

.ork-user__avatar img{
  display:block;
  object-fit:cover;
}

.ork-user__fallback{
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:700;
  color:#27272a;
}

.ork-user__meta{
  min-width:0;
  flex:1 1 auto;
}

.ork-user__meta strong{
  display:block;
  font-size:14px;
  line-height:1.1;
  color:#111;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ork-user__meta span{
  display:block;
  margin-top:3px;
  font-size:12px;
  color:#71717a;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ork-user__chev{
  width:16px;
  height:16px;
  position:relative;
  flex:0 0 16px;
}

.ork-user__chev::before{
  content:'';
  position:absolute;
  top:4px;
  left:4px;
  width:6px;
  height:6px;
  border-right:1.8px solid #52525b;
  border-bottom:1.8px solid #52525b;
  transform:rotate(45deg);
}

.app-topbar{
  left:var(--sidebarW);
}

.app-main{
  margin-left:calc(var(--sidebarW) + 18px);
}

html.sidebar-collapsed{
  --sidebarW: 76px;
}

html.sidebar-collapsed .ork-sidebar.app-sidebar{
  width:var(--sidebarW);
}

html.sidebar-collapsed .ork-brand__meta,
html.sidebar-collapsed .ork-section__label,
html.sidebar-collapsed .ork-nav-item__label,
html.sidebar-collapsed .ork-subnav,
html.sidebar-collapsed .ork-user__meta,
html.sidebar-collapsed .ork-user__chev,
html.sidebar-collapsed .sidebar-collapse{
  display:none !important;
}

html.sidebar-collapsed .ork-sidebar__header{
  justify-content:center;
  padding:20px 10px 14px;
}

html.sidebar-collapsed .ork-brand{
  display:none;
}

html.sidebar-collapsed .sidebar-menu-toggle{
  display:grid;
}

html.sidebar-collapsed .ork-header-actions{
  width:100%;
  justify-content:center;
}

html.sidebar-collapsed .ork-nav-item,
html.sidebar-collapsed .ork-nav-item--summary{
  justify-content:center;
  padding:0;
}

html.sidebar-collapsed .ork-nav-item__left{
  justify-content:center;
}

html.sidebar-collapsed .ork-user{
  justify-content:center;
  padding:8px;
}

@media (max-width: 980px){
  .app-topbar{
    left:0;
  }

  .app-main{
    margin-left:0;
  }

  .ork-sidebar.app-sidebar{
    width:248px;
    transform:translateX(-100%);
    transition:transform .2s ease;
  }

  html.sidebar-mobile-open .ork-sidebar.app-sidebar{
    transform:translateX(0);
  }
}


/* Sidebar final fixes: keep logo visible when collapsed, move toggle to bottom, hide setup caret when collapsed */
.ork-brand-wrap{
  width:100%;
}

.ork-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  width:100%;
}

.ork-sidebar__header{
  justify-content:flex-start;
}

.ork-header-actions{
  display:none;
}

.ork-sidebar__footer{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.ork-collapse-toggle{
  width:100%;
  height:40px;
  border:1px solid var(--ork-border);
  background:#fff;
  border-radius:12px;
  display:grid;
  place-items:center;
  color:#3f3f46;
  cursor:pointer;
}

.ork-collapse-toggle:hover{
  background:#efeff0;
}

.ork-collapse-toggle .nav-ico{
  width:18px;
  height:18px;
  margin:0;
  border:0;
  background:transparent;
}

html.sidebar-collapsed .ork-sidebar__header{
  padding:20px 10px 14px;
  justify-content:center;
}

html.sidebar-collapsed .ork-brand-wrap,
html.sidebar-collapsed .ork-brand{
  display:flex;
  justify-content:center;
  width:auto;
}

html.sidebar-collapsed .ork-brand__meta,
html.sidebar-collapsed .ork-user__meta,
html.sidebar-collapsed .ork-user__chev,
html.sidebar-collapsed .ork-subnav,
html.sidebar-collapsed .ork-section__label,
html.sidebar-collapsed .ork-nav-item__label,
html.sidebar-collapsed .ork-nav-item__chev{
  display:none !important;
}

html.sidebar-collapsed .ork-nav-item,
html.sidebar-collapsed .ork-nav-item--summary{
  justify-content:center;
  padding:0;
}

html.sidebar-collapsed .ork-nav-item__left{
  justify-content:center;
}

html.sidebar-collapsed .ork-user{
  justify-content:center;
  padding:8px;
}

html.sidebar-collapsed .ork-collapse-toggle{
  width:44px;
  margin:0 auto;
}

.ork-brand__logo img,
.ork-user__avatar img{
  display:block;
}

.ork-brand__logo.has-fallback img,
.ork-user__avatar.has-fallback img{
  display:none !important;
}


/* Sidebar polish requested: keep top logo visible, avatar only footer, bottom arrow toggle */
.ork-sidebar__header{
  min-height:72px;
  padding:12px 18px;
  align-items:center;
}

.ork-brand-wrap{
  display:flex;
  align-items:center;
  min-height:48px;
}

.ork-brand{
  min-height:48px;
}

.ork-brand__logo{
  width:40px;
  height:40px;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--ork-border);
  box-shadow:none;
}

.ork-brand__logo img{
  padding:3px;
  background:transparent;
}

.ork-brand__fallback{
  background:#111;
  color:#fff;
  border-radius:12px;
}

.ork-sidebar__footer{
  padding:12px 14px 14px;
  gap:10px;
}

.ork-user.ork-user--avatar-only{
  min-height:auto;
  justify-content:flex-start;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
}

.ork-user--avatar-only .ork-user__avatar{
  width:40px;
  height:40px;
  border:1px solid var(--ork-border);
  background:#fff;
}

.ork-collapse-toggle{
  width:40px;
  height:40px;
  border-radius:14px;
  background:#fff;
  border:1px solid #d9d9de;
}

.ork-collapse-toggle__arrow{
  position:relative;
  width:14px;
  height:14px;
  display:block;
}

.ork-collapse-toggle__arrow::before{
  content:'';
  position:absolute;
  inset:2px 3px 2px 1px;
  border-right:2px solid #5b5b66;
  border-bottom:2px solid #5b5b66;
  transform:rotate(135deg);
  border-radius:1px;
}

html.sidebar-collapsed .ork-collapse-toggle__arrow::before{
  transform:rotate(-45deg);
}

html.sidebar-collapsed .ork-sidebar__header{
  justify-content:center;
  padding:12px 10px;
}

html.sidebar-collapsed .ork-brand-wrap,
html.sidebar-collapsed .ork-brand{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
}

html.sidebar-collapsed .ork-brand__meta,
html.sidebar-collapsed .ork-user__meta,
html.sidebar-collapsed .ork-user__chev,
html.sidebar-collapsed .ork-subnav,
html.sidebar-collapsed .ork-section__label,
html.sidebar-collapsed .ork-nav-item__label,
html.sidebar-collapsed .ork-nav-item__chev{
  display:none !important;
}

html.sidebar-collapsed .ork-brand__logo{
  margin:0 auto;
}

html.sidebar-collapsed .ork-user.ork-user--avatar-only{
  justify-content:center;
}

html.sidebar-collapsed .ork-collapse-toggle{
  margin:0 auto;
}


/* Final sidebar cleanup requested */
.ork-sidebar.app-sidebar{
  background:#fbfbfc;
}

.ork-sidebar__header{
  min-height:72px;
  padding:0 18px;
  display:flex;
  align-items:center;
  border-bottom:1px solid #e4e7ec;
}

.ork-brand-wrap,
.ork-brand{
  min-height:72px;
  height:72px;
  display:flex;
  align-items:center;
}

.ork-brand{
  gap:12px;
}

.ork-brand__logo{
  width:32px;
  height:32px;
  min-width:32px;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  overflow:visible;
}

.ork-brand__logo img{
  width:32px;
  height:32px;
  object-fit:contain;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

.ork-brand__fallback{
  width:32px;
  height:32px;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--text);
  box-shadow:none !important;
}

.ork-sidebar__footer{
  padding:14px 0 18px;
  border-top:1px solid #e4e7ec;
  display:flex;
  justify-content:center;
  align-items:center;
}

.ork-user,
.ork-user.ork-user--avatar-only{
  display:none !important;
}

.ork-collapse-toggle{
  width:auto !important;
  height:auto !important;
  min-width:0;
  min-height:0;
  padding:0 !important;
  border:none !important;
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.ork-collapse-toggle:hover,
.ork-collapse-toggle:focus,
.ork-collapse-toggle:active{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

.ork-collapse-toggle__arrow{
  width:12px;
  height:12px;
}

.ork-collapse-toggle__arrow::before{
  inset:1px 2px 1px 0;
  border-right:2px solid #6b7280;
  border-bottom:2px solid #6b7280;
  transform:rotate(135deg);
}

html.sidebar-collapsed .ork-collapse-toggle__arrow::before{
  transform:rotate(-45deg);
}

html.sidebar-collapsed .ork-sidebar__header{
  padding:0;
  justify-content:center;
}

html.sidebar-collapsed .ork-brand-wrap,
html.sidebar-collapsed .ork-brand{
  min-height:72px;
  height:72px;
  justify-content:center;
}

html.sidebar-collapsed .ork-brand__logo{
  margin:0;
}

html.sidebar-collapsed .ork-sidebar__footer{
  justify-content:center;
}

/* Sidebar width + collapsed alignment fix */
:root{
  --sidebarW: 230px !important;
}
html.sidebar-collapsed{
  --sidebarW: 60px !important;
}

.ork-sidebar.app-sidebar{
  width: var(--sidebarW) !important;
}

.app-topbar{
  left: var(--sidebarW) !important;
}

.app-main{
  margin-left: calc(var(--sidebarW) + 18px) !important;
}

.ork-sidebar__header{
  box-sizing: border-box;
  width: 100%;
}

html.sidebar-collapsed .ork-sidebar__header{
  padding: 0 !important;
  width: 100%;
  justify-content: center;
}

html.sidebar-collapsed .ork-brand-wrap,
html.sidebar-collapsed .ork-brand{
  width: 100%;
  min-height: 72px;
  height: 72px;
  justify-content: center;
}

html.sidebar-collapsed .ork-sidebar__scroll{
  padding-left: 10px;
  padding-right: 10px;
}

html.sidebar-collapsed .ork-nav-item,
html.sidebar-collapsed .ork-nav-item--summary{
  min-height: 42px;
  width: 40px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 12px;
}

html.sidebar-collapsed .ork-sidebar__footer{
  width: 100%;
  padding: 14px 0 18px;
  justify-content: center;
}

@media (max-width: 980px){
  .app-topbar{
    left: 0 !important;
  }

  .app-main{
    margin-left: 0 !important;
  }
}

/* Final sidebar collapsed polish fix */
:root{
  --sidebarW:230px !important;
}
html.sidebar-collapsed{
  --sidebarW:60px !important;
}

.ork-sidebar.app-sidebar{
  width:var(--sidebarW) !important;
  overflow:hidden;
}

.app-topbar{
  left:var(--sidebarW) !important;
}

.app-main{
  margin-left:calc(var(--sidebarW) + 18px) !important;
}

.ork-sidebar__header{
  height:72px !important;
  min-height:72px !important;
  padding:0 12px !important;
  display:flex !important;
  align-items:center !important;
  border-bottom:1px solid rgba(11,18,32,.10) !important;
  box-sizing:border-box !important;
}

.ork-brand-wrap,
.ork-brand{
  width:100%;
  height:72px;
  display:flex;
  align-items:center;
}

.ork-brand{
  gap:10px;
}

.ork-brand__logo{
  width:28px;
  height:28px;
  flex:0 0 28px;
}

.ork-brand__logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.ork-sidebar__scroll{
  padding:12px 0 0 !important;
}

html.sidebar-collapsed .ork-sidebar__header{
  padding:0 !important;
  justify-content:center !important;
}

html.sidebar-collapsed .ork-brand-wrap,
html.sidebar-collapsed .ork-brand{
  width:60px !important;
  min-width:60px !important;
  max-width:60px !important;
  height:72px !important;
  justify-content:center !important;
  margin:0 auto !important;
}

html.sidebar-collapsed .ork-brand__logo{
  margin:0 auto !important;
}

html.sidebar-collapsed .ork-sidebar__scroll{
  padding:12px 0 0 !important;
}

html.sidebar-collapsed .ork-nav-list{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
}

html.sidebar-collapsed .ork-nav-item,
html.sidebar-collapsed .ork-nav-item--summary{
  width:36px !important;
  min-width:36px !important;
  max-width:36px !important;
  height:36px !important;
  min-height:36px !important;
  padding:0 !important;
  margin:0 auto 14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:10px !important;
}

html.sidebar-collapsed .ork-nav-item__left{
  width:36px !important;
  height:36px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

html.sidebar-collapsed .nav-ico,
html.sidebar-collapsed .ork-nav-item .nav-ico,
html.sidebar-collapsed .ork-nav-item--summary .nav-ico{
  width:20px !important;
  height:20px !important;
  margin:0 !important;
  display:grid !important;
  place-items:center !important;
  flex:0 0 20px !important;
}

html.sidebar-collapsed .ork-nav-item__chev,
html.sidebar-collapsed .ork-nav-item__label,
html.sidebar-collapsed .ork-section__label,
html.sidebar-collapsed .ork-subnav,
html.sidebar-collapsed .ork-brand__meta{
  display:none !important;
}

.ork-sidebar__footer{
  padding:12px 0 16px !important;
  border-top:1px solid rgba(11,18,32,.10) !important;
  min-height:48px !important;
}

.ork-collapse-toggle{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  min-height:20px !important;
  padding:0 !important;
  margin:0 auto !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  outline:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
}

.ork-collapse-toggle::before,
.ork-collapse-toggle::after,
.ork-collapse-toggle__arrow::after{
  content:none !important;
  display:none !important;
}

.ork-collapse-toggle > *:not(.ork-collapse-toggle__arrow){
  display:none !important;
}

.ork-collapse-toggle__arrow{
  width:10px !important;
  height:10px !important;
  display:block !important;
}

.ork-collapse-toggle__arrow::before{
  width:8px !important;
  height:8px !important;
  border-right:2px solid rgba(11,18,32,.55) !important;
  border-bottom:2px solid rgba(11,18,32,.55) !important;
  transform:rotate(135deg) !important;
}

html.sidebar-collapsed .ork-collapse-toggle__arrow::before{
  transform:rotate(-45deg) !important;
}

@media (max-width:980px){
  .app-topbar{left:0 !important;}
  .app-main{margin-left:0 !important;}
}

/* Exact collapsed/open header divider alignment fix */
.ork-sidebar__header{
  position:relative !important;
  height:72px !important;
  min-height:72px !important;
  padding:0 18px !important;
  border-bottom:0 !important;
  box-sizing:border-box !important;
}

.ork-sidebar__header::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:1px !important;
  background:rgba(11,18,32,.10) !important;
  pointer-events:none !important;
}

html.sidebar-collapsed .ork-sidebar__header{
  padding:0 !important;
  justify-content:center !important;
}

html.sidebar-collapsed .ork-brand-wrap,
html.sidebar-collapsed .ork-brand{
  width:100% !important;
  height:72px !important;
  min-height:72px !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Final exact sidebar/header line alignment */
.ork-sidebar.app-sidebar{
  top:0 !important;
  padding:0 !important;
  border-right:1px solid rgba(11,18,32,.10) !important;
  box-sizing:border-box !important;
}

.ork-sidebar__header{
  height:72px !important;
  min-height:72px !important;
  margin:0 !important;
  padding:0 12px !important;
  display:flex !important;
  align-items:center !important;
  box-sizing:border-box !important;
  border-bottom:1px solid rgba(11,18,32,.10) !important;
}

.ork-sidebar__header::after{
  display:none !important;
}

.ork-sidebar__scroll{
  padding:12px 10px 0 !important;
}

.ork-sidebar__footer{
  padding:10px 0 12px !important;
}

html.sidebar-collapsed .ork-sidebar.app-sidebar{
  padding:0 !important;
}

html.sidebar-collapsed .ork-sidebar__header{
  padding:0 !important;
  justify-content:center !important;
}

html.sidebar-collapsed .ork-sidebar__scroll{
  padding:12px 0 0 !important;
}

html.sidebar-collapsed .ork-sidebar__footer{
  padding:10px 0 12px !important;
}


/* === Projects module overrides merged safely on top of original global styles === */

.ico-projects{--icon:url('/assets/icons/projects.svg')}

.projects-hero{
  display:grid;
  grid-template-columns:minmax(0, 1.3fr) minmax(280px, .7fr);
  gap:16px;
  margin-bottom:16px;
}
.projects-hero-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.08);
  border-radius:24px;
  background:linear-gradient(135deg,#ffffff 0%,#f7f9fc 48%,#eef4ff 100%);
  box-shadow:0 18px 36px rgba(15,23,42,.06);
}
.projects-hero-card::after{
  content:'';
  position:absolute;
  right:-70px;
  top:-70px;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,108,255,.12) 0%, rgba(0,108,255,0) 72%);
  pointer-events:none;
}
.projects-hero-body{padding:24px; position:relative; z-index:1;}
.projects-kicker{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#eef4ff; color:#0b5bd3; font-weight:700; font-size:12px; letter-spacing:.02em;}
.projects-hero-title{margin:14px 0 8px; font-size:32px; line-height:1.05; font-weight:800; color:#0f172a;}
.projects-hero-sub{margin:0; color:#5b6474; max-width:720px;}
.projects-hero-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}
.projects-stat-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
.projects-stat{
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
}
.projects-stat-label{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#7a8291;}
.projects-stat-value{margin-top:8px; font-size:28px; line-height:1; font-weight:800; color:#111827;}
.projects-stat-sub{margin-top:6px; color:#6b7280; font-size:13px;}
.projects-summary-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:16px 0 18px;}
.project-summary-tile{padding:16px 18px; background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:20px; box-shadow:0 10px 24px rgba(15,23,42,.04);}
.project-summary-tile .eyebrow{font-size:12px; font-weight:700; text-transform:uppercase; color:#7c8595; letter-spacing:.05em;}
.project-summary-tile .value{margin-top:8px; font-size:28px; font-weight:800; color:#111827;}
.project-summary-tile .meta{margin-top:6px; color:#6b7280; font-size:13px;}
.project-list-name{display:flex; align-items:flex-start; gap:12px;}
.project-dot{width:14px; height:14px; border-radius:999px; flex:0 0 14px; margin-top:4px; box-shadow:0 0 0 4px rgba(15,23,42,.04);}
.project-name{font-weight:800; color:#111827; font-size:15px;}
.project-meta{margin-top:5px; color:#6b7280; font-size:13px;}
.project-status-badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; font-weight:700; font-size:12px;}
.project-status-badge.planning{background:#eff6ff; color:#1d4ed8;}
.project-status-badge.active{background:#ecfdf5; color:#047857;}
.project-status-badge.on_hold{background:#fff7ed; color:#c2410c;}
.project-status-badge.completed{background:#f3f4f6; color:#374151;}
.project-status-badge.archived{background:#f8fafc; color:#64748b;}
.project-status-badge .status-dot{width:8px; height:8px; border-radius:999px; background:currentColor; opacity:.9;}
.project-empty{padding:36px 24px; text-align:center; border:1px dashed rgba(15,23,42,.12); border-radius:24px; color:#6b7280; background:#fafbfd;}
.project-layout{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr); gap:16px; align-items:start;}
.project-editor{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; align-items:start;}
.project-sidecard{padding:16px; border:1px solid rgba(15,23,42,.08); border-radius:20px; background:#fff; box-shadow:0 10px 24px rgba(15,23,42,.04);}
.project-sidecard + .project-sidecard{margin-top:12px;}
.project-sidecard h3{margin:0 0 8px; font-size:16px;}
.project-sidecard p{margin:0; color:#6b7280;}
.project-color-input{display:flex; align-items:center; gap:10px;}
.project-color-chip{width:44px; height:44px; border-radius:14px; border:1px solid rgba(15,23,42,.08); flex:0 0 44px;}
.project-overview{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px;}
.project-overview-card{padding:16px; border-radius:20px; background:#fff; border:1px solid rgba(15,23,42,.08); box-shadow:0 10px 24px rgba(15,23,42,.04);}
.project-overview-card .label{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:#7c8595; font-weight:700;}
.project-overview-card .big{margin-top:8px; font-size:26px; font-weight:800; color:#111827;}
.project-overview-card .small{margin-top:6px; color:#6b7280; font-size:13px;}
.project-content{padding:18px 20px; border-radius:22px; border:1px solid rgba(15,23,42,.08); background:#fff; box-shadow:0 10px 24px rgba(15,23,42,.04);}
.project-content h3{margin-top:0;}
.project-prose{color:#374151; line-height:1.7;}
.project-prose h1,.project-prose h2,.project-prose h3{color:#111827;}
.project-prose img{max-width:100%; border-radius:14px;}
.project-meta-list{display:grid; gap:12px;}
.project-meta-row{display:flex; justify-content:space-between; gap:12px; align-items:flex-start;}
.project-meta-row .key{color:#7c8595; font-size:13px;}
.project-meta-row .val{color:#111827; font-weight:700; text-align:right;}
.project-board-wrap{margin-top:18px;}
.project-board-head{display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:12px;}
.project-board{display:grid; grid-template-columns:repeat(4,minmax(260px,1fr)); gap:14px; align-items:start; overflow-x:auto; padding-bottom:4px;}
.project-column{background:#f8fafc; border:1px solid rgba(15,23,42,.08); border-radius:22px; min-height:260px; display:flex; flex-direction:column;}
.project-column-head{padding:14px 14px 10px; display:flex; align-items:center; justify-content:space-between; gap:10px;}
.project-column-title{font-weight:800; color:#111827; display:flex; align-items:center; gap:8px;}
.project-column-title .dot{width:10px; height:10px; border-radius:999px; background:currentColor;}
.project-column-count{font-size:12px; font-weight:700; color:#64748b; padding:6px 10px; background:#fff; border-radius:999px; border:1px solid rgba(15,23,42,.06);}
.project-task-list{padding:0 12px 12px; display:flex; flex-direction:column; gap:10px; min-height:170px;}
.project-column.drag-over{box-shadow:0 0 0 2px rgba(0,108,255,.18) inset; background:#f0f6ff;}
.project-task{background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:18px; padding:14px; box-shadow:0 8px 18px rgba(15,23,42,.04); cursor:grab;}
.project-task:active{cursor:grabbing;}
.project-task-title{font-weight:800; color:#111827; margin-bottom:6px;}
.project-task-desc{font-size:13px; color:#6b7280; line-height:1.5; margin-bottom:10px;}
.project-task-meta{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.project-chip{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; background:#f3f4f6; color:#374151;}
.project-chip.priority-low{background:#eff6ff; color:#1d4ed8;}
.project-chip.priority-medium{background:#fff7ed; color:#c2410c;}
.project-chip.priority-high{background:#fef2f2; color:#dc2626;}
.project-chip.priority-urgent{background:#111827; color:#fff;}
.project-task-footer{display:flex; justify-content:space-between; gap:10px; align-items:center;}
.project-assignee{display:flex; align-items:center; gap:8px; min-width:0;}
.project-avatar{width:30px; height:30px; border-radius:999px; object-fit:cover; background:#e5e7eb; color:#374151; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px;}
.project-avatar-stack{display:flex; align-items:center;}
.project-avatar-stack .project-avatar{margin-left:-8px; border:2px solid #fff; box-shadow:0 4px 12px rgba(15,23,42,.1);}
.project-avatar-stack .project-avatar:first-child{margin-left:0;}
.project-task-actions{display:flex; gap:8px; flex-wrap:wrap;}
.project-inline-form{margin-top:10px; padding-top:10px; border-top:1px dashed rgba(15,23,42,.08); display:none;}
.project-inline-form.open{display:block;}
.project-inline-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
.project-add-task{display:none; margin-top:12px; padding:14px; background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:18px;}
.project-add-task.open{display:block;}
.project-mini-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;}
.project-muted{color:#6b7280;}
.project-pill-link{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1px solid rgba(15,23,42,.08); color:#111827; font-weight:700; text-decoration:none;}
.project-assignee-name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; color:#374151;}

@media (max-width: 1180px){
  .projects-hero,
  .project-layout,
  .project-editor{grid-template-columns:1fr;}
  .projects-summary-grid,
  .project-overview{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 760px){
  .projects-stat-grid,
  .projects-summary-grid,
  .project-overview,
  .project-inline-grid{grid-template-columns:1fr;}
  .projects-hero-title{font-size:28px;}
}


/* ===============================
   Projects compact refinement
   =============================== */
.projects-hero{grid-template-columns:minmax(0,1fr) 320px;gap:12px;margin-bottom:12px;}
.projects-hero-card{border-radius:18px;box-shadow:0 10px 22px rgba(15,23,42,.05);}
.projects-hero-body{padding:16px 18px;}
.projects-kicker{padding:6px 10px;font-size:11px;}
.projects-hero-title{margin:10px 0 6px;font-size:24px;line-height:1.1;}
.projects-hero-sub{font-size:13px;max-width:620px;}
.projects-hero-actions{margin-top:12px;gap:8px;}
.projects-stat-grid{gap:10px;}
.projects-stat{padding:12px 14px;border-radius:16px;}
.projects-stat-label{font-size:11px;}
.projects-stat-value{margin-top:4px;font-size:22px;}
.projects-stat-sub{margin-top:4px;font-size:12px;line-height:1.35;}
.projects-summary-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0 14px;}
.project-summary-tile{padding:12px 14px;border-radius:16px;box-shadow:none;}
.project-summary-tile .eyebrow{font-size:11px;}
.project-summary-tile .value{margin-top:4px;font-size:22px;}
.project-summary-tile .meta{margin-top:3px;font-size:12px;line-height:1.35;}
.project-layout{gap:12px;grid-template-columns:minmax(0,1fr) 300px;}
.project-editor{gap:12px;grid-template-columns:minmax(0,1fr) 300px;}
.project-sidecard{padding:14px;border-radius:16px;box-shadow:none;}
.project-sidecard + .project-sidecard{margin-top:10px;}
.project-sidecard h3{font-size:14px;margin:0 0 6px;}
.project-color-chip{width:38px;height:38px;flex:0 0 38px;border-radius:12px;}
.project-overview{gap:10px;margin-bottom:12px;}
.project-overview-card{padding:12px 14px;border-radius:16px;box-shadow:none;}
.project-overview-card .label{font-size:11px;}
.project-overview-card .big{margin-top:4px;font-size:22px;}
.project-overview-card .small{margin-top:3px;font-size:12px;line-height:1.35;}
.project-content{padding:16px;border-radius:18px;box-shadow:none;}
.project-meta-list{gap:10px;}
.project-meta-row .key,.project-meta-row .val{font-size:13px;}
.project-pill-link{padding:6px 10px;font-size:12px;}
.project-pill-link--status{background:#eef4ff;border-color:rgba(0,108,255,.12);color:#0b5bd3;}
.project-dot{width:10px;height:10px;flex:0 0 10px;margin-top:0;box-shadow:none;}
.project-page-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:12px;}
.project-page-head__main{min-width:0;}
.project-page-head__actions{display:flex;gap:8px;flex-wrap:wrap;}
.project-page-title{margin:10px 0 4px;font-size:20px;line-height:1.15;font-weight:800;letter-spacing:-.01em;}
.project-page-subtitle{margin:0;max-width:760px;color:#6b7280;font-size:13px;line-height:1.45;}
.project-view-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px;}
.project-view-tab{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:999px;border:1px solid rgba(15,23,42,.08);background:#fff;color:#334155;font-size:13px;font-weight:700;text-decoration:none;}
.project-view-tab.active{background:linear-gradient(135deg, rgba(0,108,255,.94), rgba(0,179,255,.86));border-color:rgba(0,108,255,.18);color:#fff;box-shadow:0 8px 18px rgba(0,108,255,.14);}
.project-board-wrap{margin-top:0;}
.project-board-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap;margin-bottom:10px;}
.project-board-title{margin:0;font-size:16px;line-height:1.2;}
.project-board-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.project-inline-stats{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.project-inline-stat{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:999px;border:1px solid rgba(15,23,42,.08);background:#fff;color:#475569;font-size:12px;line-height:1;}
.project-inline-stat strong{font-size:12px;color:#111827;}
.project-inline-stat.is-alert{border-color:rgba(220,38,38,.18);background:#fef2f2;color:#b91c1c;}
.project-add-task{margin-top:10px;padding:12px;border-radius:16px;}
.project-inline-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.project-inline-grid .ctrl label{font-size:11px;margin:0 0 4px;}
.project-inline-grid input,
.project-inline-grid select,
.project-inline-grid textarea{font-size:13px;border-radius:12px;}
.project-mini-actions{gap:8px;margin-top:8px;}
.project-board{grid-template-columns:repeat(4,minmax(240px,1fr));gap:10px;align-items:start;overflow-x:auto;padding-bottom:4px;}
.project-column{border-radius:18px;min-height:0;max-height:calc(100vh - 270px);overflow:hidden;}
.project-column-head{padding:10px 12px 8px;}
.project-column-title{font-size:13px;gap:6px;}
.project-column-title .dot{width:8px;height:8px;}
.project-column-count{font-size:11px;padding:4px 8px;}
.project-task-list{padding:0 8px 8px;gap:8px;overflow:auto;}
.project-task{padding:10px 10px 9px;border-radius:14px;box-shadow:none;}
.project-task-title{font-size:13px;line-height:1.3;margin-bottom:4px;}
.project-task-desc{font-size:12px;line-height:1.4;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.project-task-meta{gap:6px;margin-bottom:8px;}
.project-chip{padding:5px 8px;font-size:11px;}
.project-task-footer{gap:8px;align-items:center;}
.project-assignee{gap:6px;}
.project-avatar{width:24px;height:24px;font-size:10px;}
.project-assignee-name{font-size:12px;}
.project-task-actions{gap:6px;}
.project-task-actions .pill{padding:6px 9px;font-size:11px;}
.project-inline-form{margin-top:8px;padding-top:8px;}
.project-muted{font-size:12px;line-height:1.4;}
.btn{padding:8px 12px;font-size:13px;}
.btn.primary{box-shadow:0 10px 18px rgba(0,108,255,.14);}
.panel{padding:16px;}
.panel-title{font-size:15px;}
.panel-subtitle{font-size:12px;color:#6b7280;}
.table th,.table td{padding:10px 8px;font-size:13px;}
.project-name{font-size:14px;}
.project-meta{font-size:12px;}
.project-status-badge{padding:6px 10px;font-size:11px;}
@media (max-width: 1180px){
  .projects-hero{grid-template-columns:1fr;}
  .projects-summary-grid,.project-overview{grid-template-columns:repeat(2,minmax(0,1fr));}
  .project-layout,.project-editor{grid-template-columns:1fr;}
  .project-column{max-height:none;}
}
@media (max-width: 760px){
  .projects-stat-grid,.projects-summary-grid,.project-overview,.project-inline-grid{grid-template-columns:1fr;}
  .project-board{grid-template-columns:repeat(4, minmax(220px, 1fr));}
}

/* Projects view cleanup: keep overview/task board compact and use topbar title as main title */
.project-page-head--compact{
  align-items:center;
  margin-bottom:10px;
}
.project-page-head--compact .project-view-tabs{
  margin:0;
}
.project-page-head--compact .project-page-head__actions{
  margin-left:auto;
}
.project-view-tab.is-active{
  background:linear-gradient(135deg, rgba(0,108,255,.94), rgba(0,179,255,.86));
  border-color:rgba(0,108,255,.18);
  color:#fff;
  box-shadow:0 8px 18px rgba(0,108,255,.14);
}
.app-topbar-title{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.project-topbar-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 10px;
  border-radius:999px;
  background:#eef4ff;
  border:1px solid rgba(0,108,255,.14);
  color:#0b5bd3;
  font-size:12px;
  font-weight:800;
  line-height:1;
}
.project-topbar-status .project-dot{
  margin-top:0;
}
.project-board-shell{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.project-board-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:0;
}
.project-board-inline-stats{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.project-board-inline-stat{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  color:#475569;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}
.project-board-inline-stat .k{
  font-weight:700;
}
.project-board-inline-stat .v{
  font-weight:800;
  color:#111827;
}
.project-layout > div:last-child{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.project-layout > div:last-child .project-sidecard + .project-sidecard{
  margin-top:0;
}
@media (max-width: 760px){
  .project-page-head--compact{
    align-items:flex-start;
  }
  .project-page-head--compact .project-page-head__actions{
    margin-left:0;
    width:100%;
  }
}

/* Projects tasks list tab */
.project-tasks-shell{
  gap:12px;
}
.project-task-list-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:22px;
  box-shadow:0 16px 32px rgba(15,23,42,.04);
  overflow:hidden;
}
.project-task-list-card__head{
  padding:16px 18px 12px;
  border-bottom:1px solid rgba(15,23,42,.06);
}
.project-task-list-card__head h3{
  margin:0 0 4px;
  font-size:16px;
}
.project-list-table{
  display:flex;
  flex-direction:column;
}
.project-list-row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:14px 18px;
  border-top:1px solid rgba(15,23,42,.06);
  cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.project-list-row:first-child{
  border-top:none;
}
.project-list-row:hover{
  background:rgba(248,250,252,.82);
}
.project-list-row__main{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(160px,220px);
  gap:14px;
  align-items:center;
}
.project-list-row__titlewrap{
  min-width:0;
}
.project-list-row__title{
  font-size:14px;
  font-weight:800;
  color:#0f172a;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.project-list-row__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:7px;
}
.project-list-status,
.project-list-due{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.08);
  background:#f8fafc;
  color:#475569;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}
.project-list-status .dot{
  width:8px;
  height:8px;
  border-radius:999px;
  display:inline-block;
}
.project-list-due.due-overdue{
  color:#b91c1c;
  background:#fef2f2;
  border-color:rgba(220,38,38,.14);
}
.project-list-due.due-today{
  color:#b45309;
  background:#fff7ed;
  border-color:rgba(245,158,11,.16);
}
.project-list-due.due-done{
  color:#047857;
  background:#ecfdf5;
  border-color:rgba(16,185,129,.16);
}
.project-list-row__assignee{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
}
.project-list-row__actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.project-list-row__actions form{
  margin:0;
}
.project-list-empty{
  padding:26px 18px;
  color:#64748b;
}
.project-task-view__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 240px;
  gap:18px;
}
.project-task-view__chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
}
.project-task-view__section{
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.06);
  border-radius:18px;
  padding:14px;
}
.project-task-view__label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#64748b;
  font-weight:800;
  margin-bottom:8px;
}
.project-task-view__content{
  color:#1f2937;
  line-height:1.6;
}
.project-task-view__meta{
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  padding:10px 14px;
}
.project-task-view__row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-top:1px solid rgba(15,23,42,.06);
}
.project-task-view__row:first-child{
  border-top:none;
}
.project-task-view__row span{
  color:#64748b;
  font-size:12px;
}
.project-task-view__row strong{
  color:#0f172a;
  text-align:right;
  font-size:13px;
}
@media (max-width: 980px){
  .project-list-row,
  .project-list-row__main{
    grid-template-columns:1fr;
  }
  .project-list-row__actions{
    justify-content:flex-start;
  }
  .project-task-view__grid{
    grid-template-columns:1fr;
  }
}


/* Projects tasks list filters and inline status */
.project-task-list-card__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.project-task-filters{
  display:flex;
  align-items:end;
  gap:10px;
  flex-wrap:wrap;
}
.project-task-filters__field{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:150px;
}
.project-task-filters__field span{
  font-size:12px;
  font-weight:700;
  color:#64748b;
}
.project-task-filters__field select,
.project-inline-status-select{
  height:38px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  padding:0 12px;
  font-size:13px;
  color:#0f172a;
  outline:none;
}
.project-task-filters__field select:focus,
.project-inline-status-select:focus{
  border-color:#2f9cf4;
  box-shadow:0 0 0 3px rgba(47,156,244,.14);
}
.btn.btn-small{
  height:38px;
  padding:0 14px;
}
.project-list-row__actions{
  gap:10px;
}
.project-inline-status-form{
  margin:0;
}
.project-inline-status-select{
  min-width:150px;
  background:#f8fafc;
}
.project-list-row__main{
  grid-template-columns:minmax(0,1fr) minmax(150px,220px);
}
@media (max-width: 960px){
  .project-task-list-card__head{
    align-items:stretch;
  }
  .project-task-filters{
    width:100%;
  }
  .project-task-filters__field{
    flex:1 1 180px;
  }
  .project-list-row{
    grid-template-columns:1fr;
  }
  .project-list-row__main{
    grid-template-columns:1fr;
  }
  .project-list-row__actions{
    justify-content:flex-start;
  }
}



/* ===============================
   Projects Gantt Chart
   Appended safely to the current live stylesheet
   =============================== */

.project-gantt-shell{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.project-gantt-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:22px;
  box-shadow:0 16px 32px rgba(15,23,42,.04);
  overflow:hidden;
}

.project-gantt-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:16px 18px 12px;
  border-bottom:1px solid rgba(15,23,42,.06);
}

.project-gantt-head h3{
  margin:0 0 4px;
  font-size:16px;
  color:#0f172a;
}

.project-gantt-head p{
  margin:0;
  color:#64748b;
  font-size:13px;
}

.project-gantt-legend{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.project-gantt-legend-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  color:#475569;
  font-size:12px;
  line-height:1;
}

.project-gantt-legend-item .dot{
  width:8px;
  height:8px;
  border-radius:999px;
  display:inline-block;
}

.project-gantt-wrap{
  overflow:auto;
  padding:0;
}

.project-gantt{
  min-width:920px;
}

.project-gantt-grid{
  display:grid;
  grid-template-columns:320px minmax(680px, 1fr);
  align-items:start;
}

.project-gantt-sidebar{
  border-right:1px solid rgba(15,23,42,.06);
  background:#fff;
  position:sticky;
  left:0;
  z-index:2;
}

.project-gantt-timeline{
  background:
    linear-gradient(to right, rgba(15,23,42,.05) 1px, transparent 1px) 0 0 / 48px 100%,
    #fff;
}

.project-gantt-head-row{
  display:grid;
  align-items:center;
  min-height:46px;
  border-bottom:1px solid rgba(15,23,42,.06);
  background:#f8fafc;
  position:sticky;
  top:0;
  z-index:3;
}

.project-gantt-sidebar .project-gantt-head-row{
  grid-template-columns:minmax(0,1fr) 96px;
  padding:0 16px;
}

.project-gantt-timeline .project-gantt-head-row{
  grid-auto-flow:column;
  grid-auto-columns:48px;
}

.project-gantt-col-label{
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#64748b;
}

.project-gantt-day{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  color:#64748b;
  min-height:46px;
  border-left:1px solid rgba(15,23,42,.04);
}

.project-gantt-body{
  display:block;
}

.project-gantt-row{
  display:grid;
  grid-template-columns:320px minmax(680px, 1fr);
  min-height:58px;
}

.project-gantt-row + .project-gantt-row{
  border-top:1px solid rgba(15,23,42,.06);
}

.project-gantt-taskmeta{
  display:grid;
  grid-template-columns:minmax(0,1fr) 96px;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  background:#fff;
  position:sticky;
  left:0;
  z-index:1;
  border-right:1px solid rgba(15,23,42,.06);
}

.project-gantt-taskmain{
  min-width:0;
}

.project-gantt-tasktitle{
  font-size:13px;
  font-weight:800;
  color:#0f172a;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.project-gantt-tasksub{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-top:6px;
}

.project-gantt-tasksub .project-chip{
  padding:5px 8px;
  font-size:11px;
}

.project-gantt-taskdates{
  font-size:12px;
  color:#64748b;
  text-align:right;
  white-space:nowrap;
}

.project-gantt-track{
  position:relative;
  min-height:58px;
  background:
    linear-gradient(to right, rgba(15,23,42,.05) 1px, transparent 1px) 0 0 / 48px 100%;
}

.project-gantt-track::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:rgba(15,23,42,.04);
  transform:translateY(-50%);
}

.project-gantt-bar{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  height:30px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.08);
  background:linear-gradient(135deg, rgba(0,108,255,.94), rgba(0,179,255,.86));
  box-shadow:0 10px 22px rgba(0,108,255,.18);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:0 10px;
  color:#fff;
  cursor:pointer;
  min-width:34px;
  overflow:hidden;
}

.project-gantt-bar:hover{
  box-shadow:0 12px 28px rgba(0,108,255,.24);
}

.project-gantt-bar.is-completed{
  background:linear-gradient(135deg, #10b981, #34d399);
  box-shadow:0 10px 22px rgba(16,185,129,.16);
}

.project-gantt-bar.is-overdue{
  background:linear-gradient(135deg, #dc2626, #ef4444);
  box-shadow:0 10px 22px rgba(220,38,38,.18);
}

.project-gantt-bar.is-on-hold{
  background:linear-gradient(135deg, #f59e0b, #fbbf24);
  box-shadow:0 10px 22px rgba(245,158,11,.18);
}

.project-gantt-bar.is-planning{
  background:linear-gradient(135deg, #6366f1, #818cf8);
  box-shadow:0 10px 22px rgba(99,102,241,.18);
}

.project-gantt-bar__label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  font-weight:800;
}

.project-gantt-bar__days{
  flex:0 0 auto;
  font-size:11px;
  font-weight:700;
  opacity:.92;
}

.project-gantt-today{
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  background:rgba(220,38,38,.60);
  box-shadow:0 0 0 1px rgba(255,255,255,.85);
  z-index:1;
  pointer-events:none;
}

.project-gantt-empty{
  padding:24px 18px 28px;
  color:#64748b;
}

.project-gantt-empty strong{
  display:block;
  color:#111827;
  margin-bottom:6px;
}

.project-gantt-foot{
  padding:10px 18px 14px;
  border-top:1px solid rgba(15,23,42,.06);
  color:#64748b;
  font-size:12px;
  background:#fbfdff;
}

/* Additional aliases in case the gantt template uses slightly different class names */
.project-gantt-chart,
.gantt-chart,
.gantt-shell{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.project-gantt-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

.project-gantt-table th,
.project-gantt-table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(15,23,42,.06);
  font-size:13px;
}

.project-gantt-table th{
  background:#f8fafc;
  color:#64748b;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.project-gantt-table .bar-cell{
  position:relative;
  min-width:540px;
  background:
    linear-gradient(to right, rgba(15,23,42,.05) 1px, transparent 1px) 0 0 / 48px 100%;
}

.project-gantt-table .bar{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(0,108,255,.94), rgba(0,179,255,.86));
  color:#fff;
  font-size:12px;
  font-weight:800;
  box-shadow:0 8px 18px rgba(0,108,255,.16);
}

@media (max-width: 1100px){
  .project-gantt-grid,
  .project-gantt-row{
    grid-template-columns:260px minmax(620px, 1fr);
  }

  .project-gantt-sidebar .project-gantt-head-row,
  .project-gantt-taskmeta{
    grid-template-columns:minmax(0,1fr) 84px;
  }
}

@media (max-width: 820px){
  .project-gantt-wrap{
    overflow:auto;
  }

  .project-gantt{
    min-width:820px;
  }

  .project-gantt-grid,
  .project-gantt-row{
    grid-template-columns:240px minmax(580px, 1fr);
  }

  .project-gantt-sidebar .project-gantt-head-row,
  .project-gantt-taskmeta{
    grid-template-columns:minmax(0,1fr) 76px;
    padding-left:12px;
    padding-right:12px;
  }

  .project-gantt-taskdates{
    font-size:11px;
  }

  .project-gantt-bar{
    height:28px;
    padding:0 8px;
  }
}

/* ===== Projects Gantt compact alignment fix ===== */
.project-gantt-wrap{
  overflow:auto;
}

.project-gantt.project-gantt--table{
  display:block;
}

.project-gantt-grid-head,
.project-gantt-grid-row{
  display:grid;
  grid-template-columns:300px minmax(680px,1fr);
  align-items:stretch;
}

.project-gantt-grid-head{
  position:sticky;
  top:0;
  z-index:3;
  background:#fff;
}

.project-gantt-side-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) 84px;
  gap:10px;
  align-items:end;
  padding:10px 16px;
  min-height:74px;
  background:#fff;
  position:sticky;
  left:0;
  z-index:4;
  border-right:1px solid rgba(15,23,42,.06);
}

.project-gantt-time-head{
  background:#fff;
}

.project-gantt-week-row,
.project-gantt-day-row{
  display:flex;
}

.project-gantt-week{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  font-size:11px;
  font-weight:800;
  color:#64748b;
  border-left:1px solid rgba(15,23,42,.04);
}

.project-gantt-day{
  width:48px;
  min-width:48px;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:11px;
  font-weight:700;
  color:#64748b;
  border-left:1px solid rgba(15,23,42,.04);
}

.project-gantt-day.is-weekend{
  background:rgba(15,23,42,.018);
}

.project-gantt-day.is-today{
  color:#0f172a;
}

.project-gantt-grid-row{
  min-height:62px;
}

.project-gantt-grid-row + .project-gantt-grid-row{
  border-top:1px solid rgba(15,23,42,.06);
}

.project-gantt-taskcell{
  display:grid;
  grid-template-columns:minmax(0,1fr) 84px;
  gap:10px;
  align-items:center;
  padding:8px 16px;
  min-height:62px;
  background:#fff;
  position:sticky;
  left:0;
  z-index:2;
  border-right:1px solid rgba(15,23,42,.06);
  cursor:pointer;
}

.project-gantt-taskcell__main{
  min-width:0;
}

.project-gantt-tasktitle{
  font-size:13px;
  font-weight:800;
  line-height:1.25;
  color:#0f172a;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.project-gantt-taskdates{
  font-size:12px;
  line-height:1.35;
  color:#64748b;
  text-align:right;
  white-space:nowrap;
}

.project-gantt-trackcell{
  min-height:62px;
  background:#fff;
  overflow:hidden;
  cursor:pointer;
}

.project-gantt-track{
  position:relative;
  min-height:62px;
  background:linear-gradient(to right, rgba(15,23,42,.05) 1px, transparent 1px) 0 0 / 48px 100%;
}

.project-gantt-track::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:rgba(15,23,42,.04);
  transform:translateY(-50%);
}

.project-gantt-bar{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  height:28px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 10px;
  color:#fff;
  overflow:hidden;
  white-space:nowrap;
  z-index:1;
}

.project-gantt-bar__label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  font-weight:800;
}

.project-gantt-bar__meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.project-gantt-bar__assignee{
  display:flex;
  align-items:center;
  gap:6px;
  max-width:160px;
}

.project-gantt-bar__assignee img,
.project-gantt-bar__assignee .initial{
  width:18px;
  height:18px;
  border-radius:999px;
  object-fit:cover;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.22);
  color:#fff;
  font-size:10px;
  font-weight:800;
}

.project-gantt-bar__assignee .name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  font-weight:700;
  opacity:.95;
}

.project-gantt-bar__days{
  font-size:11px;
  font-weight:800;
  opacity:.95;
}

@media (max-width: 1200px){
  .project-gantt-grid-head,
  .project-gantt-grid-row{
    grid-template-columns:260px minmax(680px,1fr);
  }

  .project-gantt-side-head,
  .project-gantt-taskcell{
    grid-template-columns:minmax(0,1fr) 78px;
    width:260px !important;
  }

  .project-gantt-bar__assignee .name{
    display:none;
  }
}

/* =====================================================
   Projects Gantt ultra-compact refinement
   Added safely on top of the latest live stylesheet
   ===================================================== */
.project-gantt-card{
  border-radius:18px;
}

.project-gantt-head{
  padding:14px 16px 10px;
}

.project-gantt-head h3{
  font-size:15px;
}

.project-gantt-head p{
  font-size:12px;
}

.project-gantt-legend{
  gap:6px;
}

.project-gantt-legend-item{
  padding:5px 9px;
  font-size:11px;
}

.project-gantt-wrap{
  overflow:auto;
}

.project-gantt.project-gantt--table{
  display:block;
}

.project-gantt-grid-head,
.project-gantt-grid-row{
  display:grid;
  grid-template-columns:292px minmax(640px,1fr);
  align-items:stretch;
}

.project-gantt-side-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) 80px;
  align-items:center;
  padding:0 12px;
  min-height:46px;
  background:#f8fafc;
  border-right:1px solid rgba(15,23,42,.06);
  border-bottom:1px solid rgba(15,23,42,.06);
  position:sticky;
  left:0;
  z-index:3;
}

.project-gantt-time-head{
  border-bottom:1px solid rgba(15,23,42,.06);
  background:#f8fafc;
}

.project-gantt-week-row{
  display:flex;
  min-height:26px;
  border-bottom:1px solid rgba(15,23,42,.05);
}

.project-gantt-week{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  color:#64748b;
  border-left:1px solid rgba(15,23,42,.04);
}

.project-gantt-day-row{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:48px;
}

.project-gantt-day{
  min-height:34px;
  font-size:10px;
  line-height:1.15;
  font-weight:700;
  padding-top:2px;
  padding-bottom:2px;
}

.project-gantt-grid-row{
  min-height:38px;
}

.project-gantt-grid-row + .project-gantt-grid-row{
  border-top:1px solid rgba(15,23,42,.05);
}

.project-gantt-taskcell{
  display:grid;
  grid-template-columns:minmax(0,1fr) 80px;
  gap:8px;
  align-items:center;
  padding:5px 12px;
  min-height:38px;
  background:#fff;
  position:sticky;
  left:0;
  z-index:2;
  border-right:1px solid rgba(15,23,42,.06);
  cursor:pointer;
}

.project-gantt-taskcell__main{
  min-width:0;
}

.project-gantt-tasktitle{
  font-size:12px;
  line-height:1.2;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.project-gantt-taskdates{
  font-size:11px;
  line-height:1.2;
  color:#64748b;
  text-align:right;
  white-space:nowrap;
}

.project-gantt-trackcell{
  min-height:38px;
  background:#fff;
  overflow:hidden;
  cursor:pointer;
}

.project-gantt-track{
  position:relative;
  min-height:38px;
  background:linear-gradient(to right, rgba(15,23,42,.05) 1px, transparent 1px) 0 0 / 48px 100%;
}

.project-gantt-track::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:rgba(15,23,42,.035);
  transform:translateY(-50%);
}

.project-gantt-bar{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  height:18px;
  min-width:26px;
  padding:0 7px;
  gap:6px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#fff;
  overflow:hidden;
  white-space:nowrap;
  z-index:1;
  box-shadow:0 6px 14px rgba(15,23,42,.12);
}

.project-gantt-bar__label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  line-height:1;
  font-weight:800;
}

.project-gantt-bar__meta{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}

.project-gantt-bar__assignee{
  display:flex;
  align-items:center;
  gap:4px;
  max-width:126px;
}

.project-gantt-bar__assignee img,
.project-gantt-bar__assignee .initial{
  width:14px;
  height:14px;
  border-radius:999px;
  object-fit:cover;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.20);
  color:#fff;
  font-size:9px;
  font-weight:800;
}

.project-gantt-bar__assignee .name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
  line-height:1;
  font-weight:700;
  opacity:.95;
}

.project-gantt-bar__days{
  font-size:10px;
  line-height:1;
  font-weight:800;
  opacity:.95;
}

.project-gantt-today{
  width:2px;
}

@media (max-width: 1100px){
  .project-gantt-grid-head,
  .project-gantt-grid-row{
    grid-template-columns:260px minmax(620px,1fr);
  }

  .project-gantt-side-head,
  .project-gantt-taskcell{
    grid-template-columns:minmax(0,1fr) 72px;
    padding-left:10px;
    padding-right:10px;
  }
}

@media (max-width: 820px){
  .project-gantt-grid-head,
  .project-gantt-grid-row{
    grid-template-columns:236px minmax(580px,1fr);
  }

  .project-gantt-side-head,
  .project-gantt-taskcell{
    grid-template-columns:minmax(0,1fr) 68px;
    padding-left:9px;
    padding-right:9px;
  }

  .project-gantt-taskdates{
    font-size:10px;
  }

  .project-gantt-bar{
    height:17px;
    padding:0 6px;
  }

  .project-gantt-bar__assignee .name{
    display:none;
  }
}


/* =====================================================
   Roles edit page redesign (Perfex-inspired compact layout)
===================================================== */
.role-permissions-page .alert{margin-bottom:14px}
.rp-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.55fr) minmax(320px, .9fr);
  gap:20px;
  align-items:start;
}
.rp-main-card,
.rp-side-card{overflow:hidden}
.rp-panel-head,
.rp-side-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  border-bottom:1px solid rgba(11,18,32,.08);
}
.rp-panel-head h3,
.rp-side-head h3{margin:0;font-size:17px;letter-spacing:-.02em}
.rp-panel-head p,
.rp-side-head p{margin:6px 0 0;color:rgba(11,18,32,.66);font-size:13px}
.rp-role-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rp-role-key{
  display:inline-flex;
  align-items:center;
  padding:7px 11px;
  border:1px solid rgba(11,18,32,.10);
  border-radius:999px;
  background:rgba(255,255,255,.75);
  color:rgba(11,18,32,.78);
  font-size:12px;
}
.rp-name-wrap{padding:16px 20px 18px;border-bottom:1px solid rgba(11,18,32,.08);background:rgba(11,18,32,.015)}
.rp-name-form{display:flex;align-items:flex-end;gap:12px}
.rp-name-field{flex:1 1 auto;min-width:0;margin:0}
.rp-name-field label{margin-bottom:8px;display:block}
.rp-note{margin:10px 0 0;color:rgba(11,18,32,.62);font-size:13px}
.rp-permissions-form{padding:0}
.rp-table-wrap{overflow:auto}
.rp-permissions-table,
.rp-users-table{width:100%;border-collapse:separate;border-spacing:0}
.rp-permissions-table thead th,
.rp-users-table thead th{
  padding:12px 18px;
  text-align:left;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:rgba(11,18,32,.56);
  background:rgba(11,18,32,.028);
  border-bottom:1px solid rgba(11,18,32,.08);
}
.rp-permissions-table tbody td,
.rp-users-table tbody td{border-bottom:1px solid rgba(11,18,32,.07);vertical-align:top}
.rp-permissions-table tbody tr:last-child td,
.rp-users-table tbody tr:last-child td{border-bottom:0}
.rp-feature-col{width:240px}
.rp-feature-cell{padding:16px 18px;background:rgba(11,18,32,.012)}
.rp-feature-title{font-weight:850;color:rgba(11,18,32,.92);line-height:1.2}
.rp-feature-sub{margin-top:6px;font-size:12px;color:rgba(11,18,32,.56)}
.rp-capabilities-cell{padding:10px 14px}
.rp-capabilities-list{display:flex;flex-direction:column;gap:8px}
.rp-capability-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid rgba(11,18,32,.08);
  border-radius:14px;
  background:rgba(255,255,255,.78);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.rp-capability-item:hover{border-color:rgba(0,108,255,.20);background:rgba(255,255,255,.95)}
.rp-capability-item.is-checked{border-color:rgba(0,108,255,.18);background:rgba(0,108,255,.03)}
.rp-capability-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.rp-capability-label{font-weight:760;color:rgba(11,18,32,.90);line-height:1.25}
.rp-capability-key{display:inline-flex;align-items:center;width:fit-content;padding:3px 8px;border-radius:999px;background:rgba(11,18,32,.045);border:1px solid rgba(11,18,32,.08);font-size:11px;color:rgba(11,18,32,.62)}
.rp-toggle-wrap{display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding-left:8px}
.rp-footer-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 18px;
  border-top:1px solid rgba(11,18,32,.08);
  background:rgba(255,255,255,.92);
  position:sticky;
  bottom:0;
}
.rp-footer-copy{color:rgba(11,18,32,.70);font-size:13px}
.rp-side-body{padding:16px 18px 18px}
.rp-stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
.rp-stat-box{padding:14px;border:1px solid rgba(11,18,32,.08);border-radius:16px;background:rgba(11,18,32,.02)}
.rp-stat-label{display:block;font-size:12px;color:rgba(11,18,32,.56);margin-bottom:6px}
.rp-stat-box strong{font-size:26px;letter-spacing:-.03em;color:rgba(11,18,32,.94)}
.rp-users-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.rp-users-chip{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(0,108,255,.08);border:1px solid rgba(0,108,255,.12);color:rgba(0,108,255,.86);font-size:12px;font-weight:700}
.rp-users-table-wrap{border:1px solid rgba(11,18,32,.08);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.84)}
.rp-users-table tbody td{padding:12px 14px;vertical-align:middle}
.rp-user-row{display:flex;align-items:center;gap:12px;min-width:0}
.rp-user-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;background:rgba(11,18,32,.08);color:rgba(11,18,32,.72);font-weight:800;flex:0 0 36px}
.rp-user-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.rp-user-copy{display:flex;flex-direction:column;min-width:0}
.rp-user-copy strong{font-size:14px;color:rgba(11,18,32,.92);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-user-copy small{font-size:12px;color:rgba(11,18,32,.58);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-status-badge{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(11,18,32,.06);border:1px solid rgba(11,18,32,.08);color:rgba(11,18,32,.62);font-size:12px;font-weight:700}
.rp-status-badge.is-active{background:rgba(70,195,120,.12);border-color:rgba(70,195,120,.24);color:#1f8a4c}
.rp-empty-state{padding:18px;border:1px dashed rgba(11,18,32,.14);border-radius:16px;background:rgba(11,18,32,.02);color:rgba(11,18,32,.70)}
.rp-empty-state strong{display:block;margin-bottom:6px;color:rgba(11,18,32,.88)}
.rp-empty-state p{margin:0;font-size:13px;line-height:1.5}

@media (max-width: 1200px){
  .rp-layout{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 720px){
  .rp-panel-head,
  .rp-side-head,
  .rp-name-wrap,
  .rp-side-body{padding-left:16px;padding-right:16px}
  .rp-name-form,
  .rp-footer-bar{flex-direction:column;align-items:stretch}
  .rp-footer-bar .btn{width:100%}
  .rp-permissions-table thead{display:none}
  .rp-permissions-table,
  .rp-permissions-table tbody,
  .rp-permissions-table tr,
  .rp-permissions-table td{display:block;width:100%}
  .rp-permissions-table tbody tr{border-bottom:1px solid rgba(11,18,32,.08)}
  .rp-feature-cell{padding:14px 16px 6px}
  .rp-capabilities-cell{padding:8px 16px 16px}
  .rp-stat-grid{grid-template-columns:1fr}
}

/* =====================================
   Happeno homepage redesign
   Fully scoped to .home-page
   ===================================== */

.home-page{
  position:relative;
  isolation:isolate;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  color:#e8edf7;
  overflow:hidden;
  background:
    radial-gradient(1200px 680px at 8% 10%, rgba(66,127,255,.18), transparent 62%),
    radial-gradient(900px 560px at 88% 14%, rgba(0,140,255,.16), transparent 58%),
    radial-gradient(1000px 700px at 50% 110%, rgba(123,97,255,.14), transparent 62%),
    linear-gradient(180deg, #07111f 0%, #0b1322 40%, #0a1220 100%);
}

.home-page .container{
  width:min(1340px, calc(100vw - 64px));
}

.home-page .sr-only{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.home-page .home-hero{
  position:relative;
  overflow:hidden;
  padding:42px 0 44px;
  background:linear-gradient(180deg, rgba(255,255,255,.015) 0%, rgba(255,255,255,0) 100%);
}

.home-page .home-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.52), transparent 86%);
  opacity:.22;
  pointer-events:none;
}

.home-page .home-aurora{
  position:absolute;
  border-radius:999px;
  filter:blur(32px);
  pointer-events:none;
}

.home-page .home-aurora-one{
  width:540px;
  height:540px;
  top:-160px;
  right:-120px;
  background:radial-gradient(circle, rgba(0,108,255,.34) 0%, rgba(0,108,255,.02) 68%, transparent 72%);
}

.home-page .home-aurora-two{
  width:500px;
  height:500px;
  bottom:-220px;
  left:-120px;
  background:radial-gradient(circle, rgba(91,64,255,.22) 0%, rgba(91,64,255,.02) 68%, transparent 72%);
}

.home-page .home-hero-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, 1.02fr) minmax(420px, .98fr);
  gap:52px;
  align-items:center;
}

.home-page .home-eyebrow,
.home-page .home-section-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(14px);
  color:rgba(232,237,247,.9);
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.home-page .home-eyebrow-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:linear-gradient(135deg, #7fd3ff, #006cff);
  box-shadow:0 0 18px rgba(0,108,255,.55);
}

.home-page .home-title{
  margin:22px 0 16px;
  font-size:clamp(44px, 6vw, 82px);
  line-height:.97;
  letter-spacing:-.05em;
  max-width:11ch;
  color:#f7fbff;
}

.home-page .home-rotate{
  position:relative;
  display:inline-block;
  min-width:7.6ch;
}

.home-page .home-rotate-word{
  position:absolute;
  left:0;
  top:0;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .28s ease, transform .28s ease;
  background:linear-gradient(135deg, #ffffff 0%, #90d2ff 36%, #3e8fff 68%, #a7b8ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.home-page .home-rotate-word.is-on{
  position:relative;
  opacity:1;
  transform:translateY(0);
}

.home-page .home-lead{
  max-width:62ch;
  margin:0;
  color:rgba(228,235,247,.72);
  font-size:18px;
  line-height:1.72;
}

.home-page .home-cta-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:28px;
}

.home-page .home-cta-row-center{
  justify-content:center;
}

.home-page .home-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:54px;
  padding:0 20px;
  border-radius:16px;
  border:1px solid transparent;
  font-weight:800;
  font-size:15px;
  transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.home-page .home-button:hover{
  transform:translateY(-1px);
  opacity:1;
}

.home-page .home-button-primary{
  background:linear-gradient(135deg, #ffffff 0%, #d8ebff 100%);
  color:#08111f;
  box-shadow:0 18px 40px rgba(0,0,0,.22);
}

.home-page .home-button-secondary{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.12);
  color:#f4f8ff;
  backdrop-filter:blur(12px);
}

.home-page .home-button-ghost{
  background:transparent;
  border-color:rgba(255,255,255,.10);
  color:rgba(228,235,247,.76);
}

.home-page .home-trust-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:22px;
}

.home-page .home-trust-pill,
.home-page .home-status-pill{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);
  color:rgba(228,235,247,.74);
  font-size:12px;
  font-weight:700;
}

.home-page .home-hero-visual{
  position:relative;
  min-height:620px;
}

.home-page .home-orbit-card{
  position:relative;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(18,25,40,.82) 0%, rgba(9,14,24,.92) 100%);
  box-shadow:0 28px 90px rgba(0,0,0,.38);
  backdrop-filter:blur(24px);
}

.home-page .home-orbit-main{
  padding:22px;
  max-width:620px;
  margin:56px auto 0;
}

.home-page .home-orbit-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.home-page .home-orbit-kicker,
.home-page .home-signal-label,
.home-page .home-mini-kicker,
.home-page .home-stat-kicker,
.home-page .home-path-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(225,233,246,.66);
  font-size:11px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.home-page .home-orbit-headline{
  margin-top:18px;
  font-size:34px;
  line-height:1.05;
  letter-spacing:-.04em;
  color:#ffffff;
  font-weight:800;
  max-width:11ch;
}

.home-page .home-orbit-sub{
  margin-top:12px;
  color:rgba(225,233,246,.7);
  line-height:1.65;
  max-width:34ch;
}

.home-page .home-signal-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:24px;
}

.home-page .home-signal-card,
.home-page .home-panel-card,
.home-page .home-feature-card,
.home-page .home-path-card,
.home-page .home-stat-item,
.home-page .home-value-item{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  box-shadow:0 12px 28px rgba(0,0,0,.14);
}

.home-page .home-signal-card{
  padding:16px;
}

.home-page .home-signal-card strong{
  display:block;
  margin-top:12px;
  font-size:15px;
  line-height:1.35;
  color:#f7fbff;
}

.home-page .home-floating-chip{
  position:absolute;
  min-height:40px;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(8,14,24,.7);
  color:#dbe8f8;
  font-size:12px;
  font-weight:700;
  letter-spacing:.03em;
  box-shadow:0 14px 34px rgba(0,0,0,.28);
  backdrop-filter:blur(16px);
}

.home-page .home-floating-chip-one{top:10px; right:20px;}
.home-page .home-floating-chip-two{left:10px; bottom:120px;}
.home-page .home-floating-chip-three{right:54px; bottom:34px;}

.home-page .home-stats{
  position:relative;
  padding:0 0 34px;
}

.home-page .home-stat-bar{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}

.home-page .home-stat-item{
  padding:22px;
}

.home-page .home-stat-item strong{
  display:block;
  margin-top:12px;
  font-size:18px;
  line-height:1.45;
  color:#f3f8ff;
}

.home-page .home-section{
  position:relative;
  padding:86px 0;
}

.home-page .home-section-dark{
  background:linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,.035) 100%);
}

.home-page .home-section-soft{
  background:linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.055) 100%);
}

.home-page .home-section-heading{
  max-width:760px;
  margin-bottom:30px;
}

.home-page .home-section-heading.center{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

.home-page .home-section-heading h2,
.home-page .home-showcase-copy h2,
.home-page .home-cta-panel h2{
  margin:18px 0 12px;
  font-size:clamp(34px, 4vw, 58px);
  line-height:1.02;
  letter-spacing:-.045em;
  color:#f7fbff;
}

.home-page .home-section-heading p,
.home-page .home-showcase-copy p,
.home-page .home-cta-panel p{
  margin:0;
  color:rgba(228,235,247,.68);
  line-height:1.72;
  font-size:17px;
}

.home-page .home-feature-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}

.home-page .home-feature-card{
  padding:24px;
}

.home-page .home-feature-card-large{
  grid-column:span 2;
}

.home-page .home-feature-icon{
  display:inline-grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.1);
  color:#f6fbff;
  font-weight:900;
  font-size:13px;
}

.home-page .home-feature-card h3,
.home-page .home-path-card h3{
  margin:18px 0 10px;
  font-size:24px;
  line-height:1.15;
  letter-spacing:-.03em;
  color:#f7fbff;
}

.home-page .home-feature-card p,
.home-page .home-path-card p,
.home-page .home-value-item span{
  margin:0;
  color:rgba(228,235,247,.66);
  line-height:1.65;
}

.home-page .home-feature-meta{
  margin-top:18px;
  color:#9cb7d9;
  font-size:13px;
  font-weight:700;
}

.home-page .home-showcase{
  display:grid;
  grid-template-columns:minmax(0, .92fr) minmax(320px, 1.08fr);
  gap:28px;
  align-items:center;
}

.home-page .home-value-list{
  display:grid;
  gap:14px;
  margin-top:24px;
}

.home-page .home-value-item{
  padding:18px 20px;
}

.home-page .home-value-item strong{
  display:block;
  margin-bottom:8px;
  color:#f7fbff;
  font-size:18px;
}

.home-page .home-showcase-panel{
  position:relative;
}

.home-page .home-panel-window{
  border-radius:30px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(18,24,36,.9) 0%, rgba(10,14,22,.95) 100%);
  box-shadow:0 28px 80px rgba(0,0,0,.34);
  overflow:hidden;
}

.home-page .home-panel-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:18px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.home-page .home-panel-bar span{
  width:10px;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
}

.home-page .home-panel-body{
  display:grid;
  grid-template-columns:200px minmax(0, 1fr);
  min-height:450px;
}

.home-page .home-panel-side{
  padding:18px;
  border-right:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}

.home-page .home-panel-nav{
  min-height:42px;
  display:flex;
  align-items:center;
  padding:0 14px;
  border-radius:14px;
  color:rgba(228,235,247,.54);
  font-weight:700;
  margin-bottom:8px;
}

.home-page .home-panel-nav.active{
  background:rgba(255,255,255,.07);
  color:#f7fbff;
}

.home-page .home-panel-main{
  padding:22px;
}

.home-page .home-panel-card{
  padding:18px;
}

.home-page .home-panel-card-wide{
  margin-bottom:14px;
}

.home-page .home-panel-card strong{
  display:block;
  margin-top:12px;
  color:#f7fbff;
  font-size:18px;
}

.home-page .home-panel-card p{
  margin:10px 0 0;
  color:rgba(228,235,247,.62);
  line-height:1.6;
  font-size:14px;
}

.home-page .home-panel-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.home-page .home-path-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}

.home-page .home-path-card{
  padding:24px;
}

.home-page .home-path-number{
  color:#90d2ff;
}

.home-page .home-cta-section{
  padding-top:34px;
  padding-bottom:90px;
}

.home-page .home-cta-panel{
  position:relative;
  overflow:hidden;
  padding:48px 36px;
  border-radius:34px;
  border:1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(circle at top right, rgba(0,108,255,.25), transparent 34%),
    radial-gradient(circle at left bottom, rgba(99,102,241,.18), transparent 32%),
    linear-gradient(180deg, rgba(16,23,37,.88) 0%, rgba(8,12,20,.96) 100%);
  text-align:center;
  box-shadow:0 30px 90px rgba(0,0,0,.34);
}

.home-page .home-cta-panel p{
  max-width:740px;
  margin-left:auto;
  margin-right:auto;
}

@media (max-width: 1180px){
  .home-page .home-hero-inner,
  .home-page .home-showcase,
  .home-page .home-panel-body{
    grid-template-columns:1fr;
  }

  .home-page .home-feature-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .home-page .home-feature-card-large{
    grid-column:span 2;
  }

  .home-page .home-path-grid,
  .home-page .home-stat-bar{
    grid-template-columns:1fr;
  }

  .home-page .home-hero-visual{
    min-height:auto;
  }

  .home-page .home-orbit-main{
    margin-top:0;
    max-width:none;
  }
}

@media (max-width: 760px){
  .home-page .home-hero{
    padding-top:18px;
  }

  .home-page .home-title{
    max-width:100%;
  }

  .home-page .home-lead{
    font-size:16px;
  }

  .home-page .home-feature-grid,
  .home-page .home-panel-grid,
  .home-page .home-path-grid,
  .home-page .home-signal-grid{
    grid-template-columns:1fr;
  }

  .home-page .home-feature-card-large{
    grid-column:span 1;
  }

  .home-page .home-cta-panel{
    padding:34px 22px;
  }

  .home-page .home-section{
    padding:68px 0;
  }

  .home-page .home-floating-chip{
    display:none;
  }

  .home-page .home-panel-side{
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
}


.home-page h1,
.home-page h2,
.home-page h3,
.home-page h4,
.home-page p,
.home-page strong,
.home-page span{
  color:inherit;
}

.home-page .home-title,
.home-page .home-section-heading h2,
.home-page .home-showcase-copy h2,
.home-page .home-cta-band h2,
.home-page .home-feature-card h3,
.home-page .home-path-card h3,
.home-page .home-value-item strong,
.home-page .home-stat-item strong{
  color:#f7fbff;
}

.home-page .home-section-heading p,
.home-page .home-showcase-copy p,
.home-page .home-feature-card p,
.home-page .home-path-card p,
.home-page .home-value-item span,
.home-page .home-cta-band p{
  color:rgba(228,235,247,.74);
}

.pricing-page::after{
  width:280px;
  height:280px;
  left:-120px;
  top:260px;
  background:radial-gradient(circle, rgba(124,92,255,.10) 0%, rgba(124,92,255,0) 72%);
}

.pricing-shell{
  position:relative;
  z-index:1;
  width:min(1240px, calc(100vw - 48px));
  margin:0 auto;
}

.pricing-hero-v2{
  display:grid;
  grid-template-columns:minmax(0, 1.08fr) minmax(340px, .92fr);
  gap:26px;
  align-items:stretch;
}

.pricing-kicker-v2{
  margin-bottom:16px;
}

.pricing-title-v2{
  margin:0;
  font-size:clamp(44px, 6vw, 70px);
  line-height:1.02;
  letter-spacing:-.045em;
  color:#0b1220;
  max-width:760px;
}

.pricing-lead-v2{
  margin:20px 0 0;
  max-width:700px;
  font-size:19px;
  line-height:1.65;
  color:rgba(11,18,32,.72);
}

.pricing-hero-copy{
  padding:18px 0 10px;
}

.pricing-hero-points{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}

.pricing-pill{
  display:inline-flex;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(11,18,32,.08);
  background:rgba(255,255,255,.72);
  box-shadow:0 12px 30px rgba(15,23,42,.05);
  color:rgba(11,18,32,.72);
  font-size:13px;
  font-weight:750;
}

.pricing-hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:26px;
}

.pricing-hero-panel{
  position:relative;
  overflow:hidden;
  padding:28px;
  border-radius:30px;
  border:1px solid rgba(15,23,42,.08);
  background:
    linear-gradient(180deg, rgba(6,14,30,.98) 0%, rgba(10,23,51,.96) 100%);
  color:#fff;
  box-shadow:0 34px 80px rgba(9,17,34,.22);
}

.pricing-hero-panel::before{
  content:'';
  position:absolute;
  inset:auto -70px -70px auto;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(76,142,255,.36) 0%, rgba(76,142,255,0) 72%);
  pointer-events:none;
}

.pricing-hero-panel-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.pricing-panel-label,
.pricing-panel-status{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:7px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.pricing-panel-label{
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.10);
}

.pricing-panel-status{
  background:rgba(76,142,255,.16);
  color:#dce9ff;
  border:1px solid rgba(76,142,255,.24);
}

.pricing-panel-price-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-top:26px;
}

.pricing-panel-price{
  font-size:clamp(44px, 5vw, 62px);
  line-height:.95;
  letter-spacing:-.05em;
  font-weight:950;
  color:#fff;
}

.pricing-panel-sub{
  margin-top:10px;
  font-size:15px;
  color:rgba(255,255,255,.70);
}

.pricing-panel-orb{
  flex:0 0 84px;
  width:84px;
  height:84px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.95) 0%, rgba(133,183,255,.72) 26%, rgba(76,142,255,.18) 58%, rgba(76,142,255,0) 72%);
  filter:blur(.2px);
}

.pricing-hero-stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
  margin-top:28px;
}

.pricing-stat-tile{
  padding:16px 14px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
}

.pricing-stat-label{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(255,255,255,.56);
  font-weight:800;
}

.pricing-stat-tile strong{
  display:block;
  margin-top:8px;
  font-size:20px;
  line-height:1.2;
  color:#fff;
}

.pricing-hero-note{
  margin-top:18px;
  color:rgba(255,255,255,.70);
  line-height:1.65;
}

.pricing-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:20px;
  margin-top:34px;
}

.pricing-empty-card{
  padding:28px;
}

.pricing-plan-card-v2{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:22px;
  border-radius:28px;
  border:1px solid rgba(15,23,42,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(247,250,255,.96) 100%);
  box-shadow:0 18px 44px rgba(15,23,42,.06);
}

.pricing-plan-sheen{
  position:absolute;
  inset:-30% auto auto -15%;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(76,142,255,.12) 0%, rgba(76,142,255,0) 72%);
  pointer-events:none;
}

.pricing-plan-card-v2.is-featured{
  border-color:rgba(16,73,181,.14);
  background:linear-gradient(180deg, #ffffff 0%, #eef4ff 100%);
  box-shadow:0 24px 64px rgba(0,108,255,.14);
  transform:translateY(-2px);
}

.pricing-plan-top{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.pricing-plan-eyebrow{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:#71809a;
  font-weight:850;
}

.pricing-plan-name-v2{
  margin:8px 0 0;
  font-size:26px;
  line-height:1.04;
  letter-spacing:-.03em;
  color:#0b1220;
}

.pricing-plan-badge-v2{
  background:rgba(0,108,255,.10);
  color:#0b5bd3;
  border:1px solid rgba(0,108,255,.14);
}

.pricing-plan-price-wrap{
  position:relative;
  z-index:1;
  margin-top:18px;
}

.pricing-plan-price-v2{
  font-size:32px;
  line-height:1.08;
  letter-spacing:-.03em;
  font-weight:950;
  color:#0b1220;
}

.pricing-plan-meta{
  margin-top:8px;
  color:#687586;
  font-size:14px;
  font-weight:700;
}

.pricing-plan-desc-v2{
  position:relative;
  z-index:1;
  margin:14px 0 0;
  line-height:1.7;
  color:rgba(11,18,32,.70);
}

.pricing-plan-feature-box{
  position:relative;
  z-index:1;
  margin-top:18px;
  padding:16px;
  border-radius:22px;
  border:1px solid rgba(15,23,42,.07);
  background:rgba(255,255,255,.62);
}

.pricing-plan-feature-title{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#71809a;
  font-weight:900;
  margin-bottom:12px;
}

.pricing-plan-list-v2{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:11px;
}

.pricing-plan-list-v2 li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:#152031;
  font-weight:700;
  line-height:1.45;
}

.pricing-check-v2{
  display:inline-grid;
  place-items:center;
  flex:0 0 20px;
  width:20px;
  height:20px;
  margin-top:1px;
  border-radius:999px;
  background:rgba(0,108,255,.10);
  border:1px solid rgba(0,108,255,.16);
  color:#0b5bd3;
  font-size:12px;
  font-weight:900;
}

.pricing-plan-empty{
  color:#6f7c8c;
}

.pricing-plan-footer{
  margin-top:auto;
  padding-top:18px;
}

.pricing-plan-footer .button{
  width:100%;
  justify-content:center;
}

.pricing-plan-footer .button + .button{
  margin-top:10px;
}

.pricing-plan-note-v2{
  margin-top:12px;
  color:#6f7c8c;
}

.pricing-lower-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:24px;
}

.pricing-info-panel-v2{
  padding:24px;
  border-radius:26px;
}

.pricing-info-soft{
  background:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(247,250,255,.96) 100%);
}

.pricing-info-accent{
  background:linear-gradient(135deg, #0b1731 0%, #10264d 50%, #0a1d3a 100%);
  color:#fff;
  box-shadow:0 24px 64px rgba(9,17,34,.16);
}

.pricing-info-accent .badge{
  background:rgba(255,255,255,.10);
  color:#fff;
  border-color:rgba(255,255,255,.14);
}

.pricing-panel-title-v2 h3{
  margin:0;
  font-size:24px;
  letter-spacing:-.02em;
}

.pricing-info-copy-v2{
  margin:14px 0 0;
  color:#5d697b;
  line-height:1.7;
}

.pricing-info-steps{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:18px;
}

.pricing-step-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.07);
  background:rgba(255,255,255,.72);
  color:#132033;
  font-weight:700;
}

.pricing-step-item span{
  display:inline-grid;
  place-items:center;
  flex:0 0 26px;
  width:26px;
  height:26px;
  border-radius:999px;
  background:#eef4ff;
  color:#0b5bd3;
  font-size:12px;
  font-weight:900;
}

.pricing-value-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:14px;
}

.pricing-value-item{
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,.10);
}

.pricing-value-item:first-child{
  border-top:none;
  padding-top:0;
}

.pricing-value-item strong{
  display:block;
  font-size:18px;
  line-height:1.25;
  color:#fff;
}

.pricing-value-item span{
  display:block;
  margin-top:6px;
  line-height:1.7;
  color:rgba(255,255,255,.72);
}

.pricing-faq-wrap{
  margin-top:24px;
  padding:24px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(248,250,255,.96) 100%);
}

.pricing-faq-grid-v2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:18px;
}

.pricing-faq-item-v2{
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 8px 24px rgba(15,23,42,.04);
  padding:16px 16px;
}

.pricing-faq-item-v2 summary{
  list-style:none;
}

.pricing-faq-item-v2 summary::-webkit-details-marker{
  display:none;
}

.pricing-faq-item-v2 summary::after{
  content:'+';
  float:right;
  color:#7a8698;
  font-size:18px;
  line-height:1;
  margin-left:10px;
}

.pricing-faq-item-v2[open] summary::after{
  content:'−';
}

@media (max-width: 1080px){
  .pricing-shell{
    width:min(1180px, calc(100vw - 32px));
  }

  .pricing-hero-v2,
  .pricing-lower-grid,
  .pricing-faq-grid-v2{
    grid-template-columns:1fr;
  }
}

@media (max-width: 760px){
  .pricing-page{
    padding-top:18px !important;
  }

  .pricing-shell{
    width:min(100vw - 20px, 100%);
  }

  .pricing-title-v2{
    font-size:40px;
  }

  .pricing-lead-v2{
    font-size:17px;
  }

  .pricing-hero-panel,
  .pricing-faq-wrap,
  .pricing-info-panel-v2,
  .pricing-plan-card-v2{
    padding:20px;
  }

  .pricing-panel-price-row{
    flex-direction:column;
  }

  .pricing-panel-orb{
    width:68px;
    height:68px;
    flex-basis:68px;
  }

  .pricing-hero-stats{
    grid-template-columns:1fr;
  }

  .pricing-card-grid{
    grid-template-columns:1fr;
  }
}


/* =====================================================
   Happeno landing header refresh
   Added safely on top of existing styles
   ===================================================== */

.nav{
  position:sticky;
  top:0;
  z-index:80;
  backdrop-filter:saturate(180%) blur(14px);
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(11,18,32,.08);
  box-shadow:0 8px 24px rgba(15,23,42,.04);
}

.nav-inner{
  min-height:72px;
  padding:10px 0;
  gap:16px;
}

.brand.brand-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0;
  flex:0 0 auto;
}

.brand.brand-mark img{
  display:block;
  height:50px;
  width:auto;
  border-radius:0;
  transition:transform .18s ease, opacity .18s ease;
}

.brand.brand-mark:hover img{
  transform:translateY(-1px) scale(1.02);
}

.nav-links{
  gap:10px;
}

.nav .pill{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(11,18,32,.10);
  background:#fff;
  color:rgba(11,18,32,.86);
  font-size:14px;
  font-weight:800;
  line-height:1;
  box-shadow:0 8px 18px rgba(15,23,42,.04);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease, color .16s ease;
}

.nav .pill:hover{
  opacity:1;
  transform:translateY(-1px);
  border-color:rgba(0,108,255,.22);
  box-shadow:0 14px 28px rgba(15,23,42,.08);
}

.nav .pill:active{
  transform:translateY(0);
}

.nav .pill.primary{
  border-color:var(--accent);
  background:var(--accent);
  color:#fff;
  box-shadow:0 14px 30px rgba(0,108,255,.18);
}

.nav .pill.primary:hover{
  background:#005fe0;
  border-color:#005fe0;
  box-shadow:0 18px 34px rgba(0,108,255,.24);
}

.nav .pill:focus-visible,
.brand.brand-mark:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(0,108,255,.12);
}

@media (max-width: 640px){
  .nav-inner{
    min-height:64px;
    padding:10px 0;
    gap:12px;
  }

  .brand.brand-mark img{
    height:36px;
  }

  .nav-links{
    gap:8px;
  }

  .nav .pill{
    min-height:38px;
    padding:0 15px;
    font-size:13px;
  }
}


/* Sidebar logo refresh */
.ork-sidebar__header{
  height:64px !important;
  min-height:64px !important;
  padding:0 14px !important;
}

.ork-brand-wrap,
.ork-brand{
  height:64px !important;
}

.ork-brand.ork-brand--sidebar{
  justify-content:flex-start;
  gap:0 !important;
}

.ork-brand__logo.ork-brand__logo--sidebar{
  width:34px !important;
  height:34px !important;
  flex:0 0 34px !important;
  display:grid;
  place-items:center;
  border-radius:12px;
  transition:transform .18s ease, filter .18s ease;
}

.ork-brand__logo.ork-brand__logo--sidebar img{
  width:100% !important;
  height:100% !important;
  object-fit:contain;
}

.ork-brand.ork-brand--sidebar:hover .ork-brand__logo.ork-brand__logo--sidebar{
  transform:scale(1.04);
  filter:drop-shadow(0 4px 10px rgba(13, 110, 253, .12));
}

html.sidebar-collapsed .ork-sidebar__header{
  height:64px !important;
  min-height:64px !important;
}

html.sidebar-collapsed .ork-brand-wrap,
html.sidebar-collapsed .ork-brand{
  height:64px !important;
}

html.sidebar-collapsed .ork-brand__logo.ork-brand__logo--sidebar{
  width:34px !important;
  height:34px !important;
  flex-basis:34px !important;
}

/* Header and sidebar height alignment fix */
.app-topbar{
  height:64px !important;
  min-height:64px !important;
}

.app-topbar-inner{
  height:64px !important;
  min-height:64px !important;
  padding:0 16px !important;
}

.app-shell{
  min-height:calc(100vh - 64px) !important;
  padding:80px 18px 40px !important;
}

.ork-sidebar__header{
  height:64px !important;
  min-height:64px !important;
  padding:0 14px !important;
}

.ork-brand-wrap,
.ork-brand{
  height:64px !important;
}

@media (max-width: 640px){
  .app-shell{
    padding:76px 14px 32px !important;
  }
}


/* Dual sidebar logo states */
.ork-brand.ork-brand--sidebar{
  display:flex;
  align-items:center;
}

.ork-brand__logo.ork-brand__logo--sidebar{
  width:auto !important;
  max-width:180px !important;
  height:40px !important;
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.ork-brand__logo.ork-brand__logo--sidebar .ork-brand__img{
  display:block;
  width:auto !important;
  object-fit:contain;
}

.ork-brand__logo.ork-brand__logo--sidebar .ork-brand__img--full{
  height:40px !important;
  max-width:180px !important;
}

.ork-brand__logo.ork-brand__logo--sidebar .ork-brand__img--icon{
  display:none;
  height:40px !important;
  width:40px !important;
}

html.sidebar-collapsed .ork-brand__logo.ork-brand__logo--sidebar{
  width:34px !important;
  max-width:34px !important;
  height:34px !important;
  justify-content:center !important;
}

html.sidebar-collapsed .ork-brand__logo.ork-brand__logo--sidebar .ork-brand__img--full{
  display:none !important;
}

html.sidebar-collapsed .ork-brand__logo.ork-brand__logo--sidebar .ork-brand__img--icon{
  display:block !important;
}