/* Zen CRM — plain CSS layer (works alongside Tailwind CDN) --------------- */

[x-cloak] { display: none !important; }

body { font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; }

/* Form control */
.input {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid rgb(203 213 225);
  background: #fff;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: rgb(15 23 42);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.input::placeholder { color: rgb(148 163 184); }
.input:focus {
  border-color: rgb(14 147 132);
  box-shadow: 0 0 0 3px rgba(14, 147, 132, 0.2);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .12s, border-color .12s;
  border: 1px solid transparent;
}
.btn-primary   { background: rgb(14 147 132); color: #fff; }
.btn-primary:hover { background: rgb(15 118 110); }
.btn-secondary { background: #fff; border-color: rgb(203 213 225); color: rgb(51 65 85); }
.btn-secondary:hover { background: rgb(248 250 252); }
.btn-ghost     { background: transparent; color: rgb(51 65 85); }
.btn-ghost:hover { background: rgb(241 245 249); }
.btn-danger    { background: rgb(220 38 38); color: #fff; }
.btn-danger:hover { background: rgb(185 28 28); }

/* Cards */
.card {
  background: #fff;
  border-radius: 0.75rem;
  border: 1px solid rgb(226 232 240);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Sidebar links */
.nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  color: rgb(203 213 225);
  text-decoration: none;
  transition: background-color .1s, color .1s;
}
.nav-link:hover { background: rgb(30 41 59); color: #fff; }
.nav-link .i { color: rgb(148 163 184); width: 1.25rem; text-align: center; }
.nav-link-active { background: rgb(14 147 132); color: #fff; }
.nav-link-active:hover { background: rgb(14 147 132); color: #fff; }
.nav-link-active .i { color: #fff; }

/* Sidebar nav scroll.
   The nav must stay scrollable — viewport height varies with screen size, OS
   display scaling and browser zoom, and at 150% scaling the 12 links overflow.
   The default OS scrollbar reads as a broken second scrollbar butted against
   the content, so give it a thin dark one that matches the sidebar and only
   surfaces on hover. */
.sidebar-scroll {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  overscroll-behavior: contain;
}
.sidebar-scroll:hover { scrollbar-color: rgb(51 65 85) transparent; }
.sidebar-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
  transition: background .15s;
}
.sidebar-scroll:hover::-webkit-scrollbar-thumb { background: rgb(51 65 85); }
.sidebar-scroll::-webkit-scrollbar-thumb:hover { background: rgb(71 85 105); }

/* Stat tone chips */
.stat-tone-blue    { background: rgb(239 246 255); color: rgb(37 99 235); }
.stat-tone-indigo  { background: rgb(238 242 255); color: rgb(79 70 229); }
.stat-tone-emerald { background: rgb(236 253 245); color: rgb(5 150 105); }
.stat-tone-amber   { background: rgb(255 251 235); color: rgb(217 119 6); }

/* Status badges */
.badge, [class^="badge-"] {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  padding: 0.125rem 0.625rem;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
}
.badge-blue    { background: rgb(239 246 255); color: rgb(30 64 175); border: 1px solid rgb(191 219 254); }
.badge-emerald { background: rgb(236 253 245); color: rgb(6 95 70); border: 1px solid rgb(167 243 208); }
.badge-amber   { background: rgb(255 251 235); color: rgb(146 64 14); border: 1px solid rgb(253 230 138); }
.badge-red     { background: rgb(254 242 242); color: rgb(153 27 27); border: 1px solid rgb(254 202 202); }
.badge-slate   { background: rgb(248 250 252); color: rgb(51 65 85); border: 1px solid rgb(226 232 240); }
.badge-indigo  { background: rgb(238 242 255); color: rgb(55 48 163); border: 1px solid rgb(199 210 254); }

/* Kanban stage dot colors */
.stage-dot-slate    { background: rgb(100 116 139); }
.stage-dot-blue     { background: rgb(59 130 246); }
.stage-dot-indigo   { background: rgb(99 102 241); }
.stage-dot-amber    { background: rgb(245 158 11); }
.stage-dot-emerald  { background: rgb(16 185 129); }
.stage-dot-red      { background: rgb(239 68 68); }

/* ---- Employee portal tabs ---- */
.portal-tab {
  padding: 0.6rem 0.75rem;
  white-space: nowrap;
  color: #64748b;
  border-bottom: 2px solid transparent;
}
.portal-tab:hover { color: #0f172a; }
.portal-tab-active {
  color: #0e9384;
  border-bottom-color: #0e9384;
  font-weight: 600;
}

/* ---- Section tab bar (HR + employee portal) ---- */
.tabbar {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  border-bottom: 1px solid #e8e4de;
  scrollbar-width: none;
}
.tabbar::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.55rem 0.85rem;
  white-space: nowrap;
  font-size: 0.875rem;
  color: #64748b;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: #0f172a; background: #f8fafc; }
.tab-active {
  color: #0e9384;
  border-bottom-color: #0e9384;
  font-weight: 600;
}
.tab-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9999px;
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---- Segmented control for sub-views ---- */
.segbar {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: #f1f5f9;
  border-radius: 10px;
}
.seg {
  padding: 0.35rem 0.75rem;
  border-radius: 7px;
  font-size: 0.8125rem;
  color: #475569;
  white-space: nowrap;
}
.seg:hover { color: #0f172a; }
.seg-active {
  background: #fff;
  color: #0f172a;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}