/* Employee home dashboard inspired by the supplied BringHR reference. */
body.dashboard-home { background: #fff; }
/* Slim 62px Rail + Expandable 216px Side Panel Architecture */
body.dashboard-home { background: #fff; }
body.employee-portal .sidebar { display: flex !important; width: 62px !important; }
body.employee-portal .breadcrumbs { display: flex !important; }
body.employee-portal .page-footer { display: flex !important; }
body.employee-portal .topbar { min-height: 54px; height: 54px; gap: 18px; padding: 0 25px; border-bottom-color: #e8eaf0; }

/* Eliminate top navigation bar - all navigation moved to side */
.employee-home-nav { display: none !important; }

/* Collapsed side panel: Dashboard has maximum wide screen views! */
body.side-panel-collapsed .side-panel {
  transform: translateX(-100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.side-panel-collapsed .main-area {
  margin-left: 62px !important;
}

/* Expanded side panel: User clicked rail icon to open side sub-navigation */
body.side-panel-open .side-panel {
  transform: translateX(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  display: flex !important;
}
body.side-panel-open .main-area {
  margin-left: 278px !important;
}

@media (max-width: 1200px) {
  body.side-panel-open .side-panel {
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.12) !important;
    z-index: 30 !important;
  }
  body.side-panel-open .main-area {
    margin-left: 62px !important;
  }
}
body.employee-portal .topbar-actions { gap: 10px; flex: 0 0 auto; }
body.dashboard-home .topbar-actions .environment-pill { letter-spacing: .35px; font-size: 8px; }
body.dashboard-home .page-content { max-width: 1580px; padding: 18px 28px 20px; }
.employee-dashboard { min-height: calc(100vh - 82px); color: #20283c;  }
.dash-welcome {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin: 4px 0 18px;
}
.dash-welcome-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.dash-welcome h1 {
  margin: 0;
  color: #161a27;
  font: 800 clamp(22px, 2vw, 26px) Manrope, "DM Sans", sans-serif;
  letter-spacing: -.5px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-wave {
  display: inline-block;
  font-family: "Segoe UI Emoji", sans-serif;
  font-size: 0.95em;
  transform-origin: 70% 70%;
}
.dash-selected { height: 34px; padding: 0 11px; border: 1px solid #e5e8ef; border-radius: 7px; background: #fff; color: #3d465a; font-size: 12px; font-weight: 700; }

/* ========================================================
   Shift Clockbar, Real-time Progress Bar & Attendance Policy
   Executive Top Full-Width Attendance Card: Configurable by Super Admin
   Zero Layout Shift between Clocked Out / Clocked In / On Break
   ======================================================== */
.dash-clockbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 18px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.dash-clockbar-divider {
  width: 1px;
  height: 42px;
  background: #edf2f7;
  flex: 0 0 1px;
}

/* Section 1: Shift Timing & Dual-Color Progress Bar */
.dash-shift-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 240px;
  max-width: 600px;
  box-sizing: border-box;
}

.dash-shift-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 22px;
}

.dash-shift-header-left {
  display: flex;
  align-items: center;
  gap: 5.5px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.dash-shift-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.dash-shift-icon {
  color: #6366f1;
  flex-shrink: 0;
}

.dash-shift-name {
  color: #0f172a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.15px;
  white-space: nowrap;
}

.dash-shift-timing {
  color: #475569;
  font-size: 9px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: #f8fafc;
  padding: 1px 4.5px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
}

.dash-shift-sep {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

.dash-shift-header-right {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* Live Shift Stopwatch in Header Rectangular Space (Green working, Orange overtime, Off when clocked out) */
.dash-shift-stopwatch {
  display: inline-flex;
  align-items: center;
  gap: 4.5px;
  padding: 1.5px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  line-height: 1.2;
  white-space: nowrap;
  user-select: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.dash-shift-stopwatch.is-working {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857;
  box-shadow: 0 1px 2px rgba(16, 185, 129, 0.08);
}

.dash-shift-stopwatch.is-overtime {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #c2410c;
  box-shadow: 0 1px 3px rgba(249, 115, 22, 0.12);
}

.dash-shift-stopwatch.is-off {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b;
}

.dash-stopwatch-pulse {
  width: 5.5px;
  height: 5.5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dash-stopwatch-pulse.is-green {
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
  animation: dash-pulse 1.8s infinite;
}

.dash-stopwatch-pulse.is-ot {
  background: #f97316;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.3);
  animation: dash-pulse 1.4s infinite;
}

.dash-stopwatch-pulse.is-off {
  background: #94a3b8;
}

.dash-stopwatch-svg {
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.dash-stopwatch-label {
  font-size: 9px;
  font-weight: 600;
  opacity: 0.85;
}

.dash-stopwatch-digits {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: -0.2px;
}

.dash-stopwatch-digits.is-green {
  color: #065f46;
}

.dash-stopwatch-digits.is-ot {
  color: #ea580c;
}

.dash-stopwatch-digits.is-off {
  color: #475569;
  font-size: 9px;
  letter-spacing: 0.2px;
}

.dash-stopwatch-ot-badge {
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  background: #ffedd5;
  color: #c2410c;
  padding: 1px 3.5px;
  border-radius: 3px;
  letter-spacing: 0.2px;
  margin-left: 2px;
}

.dash-stopwatch-off-total {
  font-size: 8.5px;
  font-weight: 600;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}

.dash-timer-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
}

/* Day 24-Hour Timeline Scale with AM/PM Time Gaps & Small-Fit Emojis */
.dash-timeline-scale {
  position: relative;
  width: 100%;
  height: 13px;
  margin-top: 1px;
  margin-bottom: 2px;
  user-select: none;
}

.dash-scale-node {
  position: absolute;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 7.5px;
  line-height: 1;
  white-space: nowrap;
  color: #475569;
  cursor: default;
  transition: color 0.15s ease;
}

.dash-scale-node:hover {
  color: #0f172a;
}

.dash-scale-node.is-start,
.dash-scale-node.is-midnight-start {
  left: 0;
  transform: translateX(0);
}

.dash-scale-node.is-mid,
.dash-scale-node.is-morning,
.dash-scale-node.is-afternoon {
  transform: translateX(-50%);
}

.dash-scale-node.is-end,
.dash-scale-node.is-evening {
  transform: translateX(-50%);
}

.dash-scale-node.is-close,
.dash-scale-node.is-midnight-end {
  transform: translateX(-100%);
}

.dash-scale-emoji {
  font-style: normal;
  font-size: 11px;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

.dash-scale-time {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #1e293b;
  font-size: 8.5px;
  letter-spacing: -0.15px;
}

.dash-scale-tag {
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
  color: #4338ca;
  background: #e0e7ff;
  padding: 0.5px 3.5px;
  border-radius: 2.5px;
  line-height: 1.1;
  letter-spacing: 0.2px;
  margin-left: 2px;
  display: inline-block;
  vertical-align: middle;
}

/* Multi-Segment Day Timeline Track (Gray pre-in, Green worked, Orange OT, Gray post-out) */
.dash-timer-bar-track {
  position: relative;
  height: 9px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  display: flex;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.dash-bar-seg {
  height: 100%;
  flex-shrink: 0;
  transition: width 0.3s ease;
  position: relative;
}

/* Gray unworked segment before punch-in (6am to 9:30am) */
.dash-bar-seg.is-pre-in {
  background: #cbd5e1;
  border-right: 1px solid #94a3b8;
}

/* Vibrant emerald gradient for working time */
.dash-bar-seg.is-worked {
  background: linear-gradient(90deg, #10b981 0%, #16a34a 100%);
}

/* Orange gradient for overtime */
.dash-bar-seg.is-ot {
  background: linear-gradient(90deg, #f97316 0%, #ea580c 100%);
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 6px rgba(249, 115, 22, 0.35);
}

/* Gray segment after clock-out / off-duty */
.dash-bar-seg.is-post-out {
  background: #cbd5e1;
  border-left: 1px solid #94a3b8;
}

.dash-timer-bar-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #0f172a;
  z-index: 2;
  transform: translateX(-50%);
  opacity: 0.75;
}

/* Backward compatibility for selectors */
.dash-timer-bar-green {
  height: 100%;
  background: linear-gradient(90deg, #10b981 0%, #16a34a 100%);
  transition: width 0.3s ease;
  flex-shrink: 0;
}

.dash-timer-bar-orange {
  height: 100%;
  background: linear-gradient(90deg, #f97316 0%, #ea580c 100%);
  transition: width 0.3s ease;
  flex-shrink: 0;
  box-shadow: 0 0 5px rgba(249, 115, 22, 0.4);
}

.dash-timer-bar-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9.5px;
  color: #64748b;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  white-space: nowrap;
  margin-top: 1.5px;
}

/* Rounded green worked badge (Requested by user: "remove worktimer and the rounded section make it green") */
.dash-bar-caption-left-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
}

.dash-bar-caption-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3.5px;
  padding: 1.5px 8.5px;
  border-radius: 999px;
  font-size: 9px;
  line-height: 1.2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: all 0.2s ease;
}

.dash-bar-caption-pill.is-worked {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857;
  box-shadow: 0 1px 2px rgba(16, 185, 129, 0.08);
}

.dash-bar-caption-pill.is-worked b {
  color: #065f46;
  font-weight: 800;
}

.dash-bar-caption-pill.is-break {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #b45309;
  box-shadow: 0 1px 2px rgba(245, 158, 11, 0.08);
}

.dash-bar-caption-pill.is-break b {
  color: #92400e;
  font-weight: 800;
}

.dash-bar-caption-pill .dash-break-icon {
  font-size: 8.5px;
  line-height: 1;
  margin-right: 0.5px;
}

.dash-bar-caption-pill.is-ot {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #c2410c;
  box-shadow: 0 1px 2px rgba(249, 115, 22, 0.1);
}

.dash-bar-caption-pill.is-ot b {
  color: #9a3412;
  font-weight: 800;
}

.dash-bar-caption-pill.is-off {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
}

.dash-bar-caption-pill.is-off b {
  color: #1e293b;
  font-weight: 700;
}

.dash-bar-caption-pill.is-idle {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b;
}

.dash-pill-dot {
  display: none !important;
}

.dash-bar-caption-left b {
  color: #065f46;
  font-weight: 800;
}

.dash-ot-pill {
  color: #ea580c;
  font-weight: 700;
  font-size: 9px;
  background: #fff7ed;
  padding: 0.5px 5px;
  border-radius: 3px;
  border: 1px solid #ffedd5;
  letter-spacing: -0.1px;
}

/* Section 1 status inline (Working / On Break indicator directly beside Shift Timing) */
.dash-clock-status-inline,
.dash-clock-status-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  white-space: nowrap;
  line-height: 1.2;
}

.dash-clock-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: #94a3b8;
  flex-shrink: 0;
}

.is-working .dash-clock-dot {
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.is-overtime .dash-clock-dot {
  background: #f97316;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.25);
}

.is-break .dash-clock-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}

.dash-clock-status-label {
  color: #0f172a;
  font-weight: 700;
  font-size: 10.5px;
}

.dash-clock-since {
  color: #64748b;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Section 2: Attendance Policy Limits (Compact, snug 252px card with zero empty gap) */
.dash-clock-policy-section {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 0 0 252px;
  width: 252px;
  min-width: 252px;
  max-width: 252px;
  box-sizing: border-box;
}

.dash-policy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  line-height: 1.1;
  margin-bottom: 1px;
}

.dash-policy-head-title {
  display: flex;
  align-items: center;
  gap: 4.5px;
  color: #0f172a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.15px;
  white-space: nowrap;
}

.dash-policy-head-icon {
  color: #6366f1;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.dash-policy-month-pill {
  color: #475569;
  font-size: 9px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: #f8fafc;
  padding: 1px 5.5px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
  line-height: 1.2;
}

.dash-policy-matrix {
  display: flex;
  flex-direction: column;
  gap: 2.5px;
}

.dash-policy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 2.5px 7px;
  background: #f8fafc;
  border-radius: 5px;
  border: 1px solid #edf2f7;
  font-size: 9.5px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.dash-policy-row:hover {
  background: #f1f5f9;
  border-color: #e2e8f0;
}

.dash-policy-type {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #334155;
  font-weight: 700;
  font-size: 9.5px;
  flex-shrink: 0;
}

.dash-policy-icon {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dash-policy-icon.is-late {
  background: #f59e0b;
}

.dash-policy-icon.is-early {
  background: #ec4899;
}

.dash-policy-stats {
  display: flex;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dash-policy-stat small {
  color: #64748b;
  font-size: 9px;
  font-weight: 500;
}

.dash-policy-stat b {
  color: #1e293b;
  font-weight: 700;
  font-size: 9.5px;
}

.dash-policy-stat b.has-late-val,
.dash-policy-stat b.has-early-val {
  color: #d97706;
}

.dash-policy-sep {
  color: #cbd5e1;
  font-size: 8px;
}

.dash-rest-tag {
  display: inline-block;
  padding: 0.5px 5px;
  border-radius: 4px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: -0.1px;
  white-space: nowrap;
  line-height: 1.3;
}

.dash-rest-tag.is-safe {
  color: #15803d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.dash-rest-tag.is-warn {
  color: #b45309;
  background: #fefce8;
  border: 1px solid #fef08a;
}

.dash-rest-tag.is-danger {
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
}

/* Section 3: Digital Timer & Generous, Executive 36px Action Buttons */
.dash-clock-action-section {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  margin-left: auto;
  box-sizing: border-box;
}

.dash-clock-timer {
  display: inline-flex;
  align-items: baseline;
  gap: 3.5px;
  color: #0f172a;
  font: 800 16.5px Manrope, "DM Sans", sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
  min-width: 105px;
  text-align: right;
  justify-content: flex-end;
  user-select: none;
}

.dash-clock-time-val {
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.2px;
}

.dash-clock-ampm {
  font-size: 10.5px;
  font-weight: 700;
  color: #475569;
  letter-spacing: -0.1px;
}

.dash-clock-tz {
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  color: #6366f1;
  background: #eef2ff;
  border: 1px solid #e0e7ff;
  padding: 0.5px 3.5px;
  border-radius: 3px;
  line-height: 1.2;
  letter-spacing: 0.3px;
  margin-left: 1px;
}

/* Dedicated 216px button slot: comfortable, prominent touch target */
.dash-clock-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 216px;
  min-width: 216px;
  max-width: 216px;
  flex: 0 0 216px;
  box-sizing: border-box;
}

.dash-clock-buttons > :only-child {
  width: 100% !important;
  flex: 1 1 100% !important;
}

.dash-clock-main, .dash-clock-break {
  height: 36px;
  border: 0;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .12s, background .15s, opacity .15s;
  box-sizing: border-box;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.1px;
}

/* Clocked out: Clock in fills the full 216px button box */
.dash-clock-main.is-in {
  width: 100%;
  flex: 1 1 100%;
  padding: 0 16px;
  background: #0f172a;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
  font-size: 12px;
}
.dash-clock-main.is-in:hover { background: #1e293b; }

/* Clocked in: Clock out and Break share the 216px box with comfortable room */
.dash-clock-main.is-out {
  flex: 1 1 52%;
  min-width: 0;
  padding: 0 10px;
  background: #e11d48;
  color: #ffffff;
}
.dash-clock-main.is-out:hover { background: #be123c; }

.dash-clock-break {
  flex: 1 1 48%;
  min-width: 0;
  padding: 0 9px;
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}
.dash-clock-break:hover { background: #fef3c7; }
.dash-clock-break.is-active {
  background: #f59e0b;
  color: #ffffff;
  border-color: #d97706;
}
.dash-clock-break b {
  margin-left: 3px;
  font-variant-numeric: tabular-nums;
  font-size: 10px;
}

.dash-clock-main:active, .dash-clock-break:active { transform: scale(.97); }
.dash-clock-main:focus-visible, .dash-clock-break:focus-visible { outline: 2.5px solid #b99cf0; outline-offset: 1.5px; }
.dash-clock-main:disabled, .dash-clock-break:disabled { opacity: .55; cursor: wait; }

@keyframes dash-pulse { 50% { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); } }
@media (prefers-reduced-motion: reduce) { .is-working .dash-clock-dot { animation: none; } }
@media (max-width: 1140px) {
  .dash-welcome {
    flex-wrap: wrap;
    gap: 12px;
  }
  .dash-clockbar {
    order: 3;
    margin-left: 0;
  }
}
@media (max-width: 820px) {
  .dash-clockbar {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
  }
  .dash-shift-section, .dash-clock-policy-section, .dash-clock-action-section {
    width: 100%; min-width: 100%; max-width: 100%; flex: 1 1 100%;
  }
}


/* Executive Profile Details (Clean, box-free enterprise ledger) */
.dash-profile-meta-list { display: flex; flex-direction: column; margin-top: 4px; border-top: 1px solid #f1f5f9; }
.dash-profile-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 4px; border-bottom: 1px solid #f1f5f9; transition: background .12s ease; }
.dash-profile-row:last-child { border-bottom: none; padding-bottom: 2px; }
.dash-profile-row:hover { background: #f8fafc; border-radius: 4px; }
.dash-profile-key { color: #64748b; font-size: 11.5px; font-weight: 500; letter-spacing: 0.1px; }
.dash-profile-val { color: #0f172a; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Backward compatibility if dash-info-grid is invoked elsewhere (transparent, zero boxes) */
.dash-info-grid { display: flex; flex-direction: column; margin-top: 4px; border-top: 1px solid #f1f5f9; }
.dash-info-tile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 4px; border: none; border-radius: 0; background: transparent; border-bottom: 1px solid #f1f5f9; }
.dash-info-tile:last-child { border-bottom: none; }
.dash-info-tile small { color: #64748b; font-size: 11.5px; font-weight: 500; text-transform: none; }
.dash-info-tile b { color: #0f172a; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 0; }
.dash-info-tile.is-blood { border: none; background: transparent; }
.dash-info-tile.is-blood b { color: #0f172a; font-size: 12.5px; }

.dash-info-email { display: flex; align-items: center; gap: 7px; margin-top: 9px; padding: 8px 11px; border-radius: 10px; background: #f3effc; font-size: 11px; }
.dash-info-email a { overflow: hidden; color: #5c22b3; text-overflow: ellipsis; text-decoration: none; }

.dash-banner { margin: 0 0 13px; padding: 10px 12px; border: 1px solid #eee6cc; border-radius: 7px; background: #fff9e8; color: #725b22; font-size: 12px; }
.dash-columns { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.28fr) minmax(0,.92fr); align-items: start; gap: 14px; }
.dash-column { display: flex; min-width: 0; flex-direction: column; gap: 12px; }
.dash-card { min-width: 0; padding: 13px 14px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 1px 2px rgba(15,23,42,0.02); contain: layout style; }
.dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 11px; }
.dash-card-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; color: #0f172a; font: 800 13.5px Manrope, "DM Sans", sans-serif; letter-spacing: -.22px; }
.dash-card-icon { display: inline-grid; width: 20px; height: 20px; place-items: center; border: 1px solid #e2e8f0; border-radius: 5px; color: #475569; background: #f8fafc; font: 600 12px "DM Sans",sans-serif; flex-shrink: 0; }
.dash-text-link { flex: 0 0 auto; padding: 0; border: 0; background: transparent; color: #456db4; text-decoration: underline; font-size: 11px; font-weight: 700; cursor: pointer; }
.dash-employee-card { padding: 14px; }
.dash-employee-top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.dash-employee-top h2 { margin: 0; color: #182033; font: 800 16px Manrope,"DM Sans",sans-serif; }
.dash-employee-top p { margin: 3px 0 7px; color: #687187; font-size: 12px; }
.dash-employee-top strong { color: #273047; font-size: 12px; }
.dash-big-avatar { display: grid; width: 64px; height: 68px; flex: 0 0 64px; place-items: center; border-radius: 10px; background: linear-gradient(135deg,#e0e7ff 0%,#c7d2fe 100%); color: #3730a3; font: 800 18px Manrope,sans-serif; box-shadow: inset 0 1px 2px rgba(255,255,255,0.6); }
.dash-today-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; color: #1f2739; font-size: 13px; }
.dash-plan { display: inline-flex; align-items: center; gap: 5px; color: #15803d; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.dash-plan.is-late { color: #cc4d58; }
.dash-plan.is-late i { background: #e23f42; }
.dash-last-punch { display: flex; align-items: center; gap: 6px; }
.dash-last-punch i { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: #e23f42; }
.dash-plan i { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,0.2); }
.dash-day-summary { display: flex; justify-content: space-between; gap: 9px; align-items: center; }
.dash-day-copy { display: flex; flex-direction: column; min-width: 0; gap: 4px; }
.dash-punch-icon { color: #7436b1; font-size: 20px; line-height: 1; }
.dash-day-copy>strong { color: #30394d; font-size: 11px; }
.dash-day-copy p { margin: 2px 0 0; color: #697287; font-size: 10px; }
.dash-day-copy p b { color: #cc4d58; }
.dash-day-copy small { overflow: hidden; color: #788096; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.dash-hours-ring { display: grid; width: 88px; height: 88px; flex: 0 0 88px; place-items: center; border-radius: 50%; background: conic-gradient(#16a34a var(--hours),#eff0f3 0); position: relative; box-shadow: 0 4px 14px rgba(22, 163, 74, .16); }
.dash-hours-ring:before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
.dash-hours-ring span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; color: #30374b; }
.dash-hours-ring b { font: 800 24px Manrope,sans-serif; line-height: 1; }
.dash-hours-ring small { color: #667087; font-size: 9px; font-weight: 600; }
.dash-hours-ring em { color: #d44e53; font-size: 9px; font-style: normal; font-weight: 700; }
.dash-day-copy p b { color: #cc4d58; }
.dash-punch-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.dash-clock-button { height: 29px; padding: 0 11px; border: 0; border-radius: 6px; background: #5c22b3; color: #fff; font-size: 10px; font-weight: 700; cursor: pointer; }
.dash-clock-button:hover { background: #481597; }
.dash-clock-button:disabled { opacity: .55; cursor: wait; }
.dash-punch-actions span { color: #8b91a0; font-size: 8px; }
.dash-big-number { display: block; margin: 0 0 3px; color: #171d2d; font: 800 28px Manrope,sans-serif; letter-spacing: -1px; }
.dash-card>p { margin: 4px 0 0; color: #59647b; font-size: 11px; line-height: 1.45; }
.dash-inbox-card { border: 1px solid #e2e8f0; background: #fff; }
.dash-inbox-card .dash-card-head h2 { color: #0f172a; }
.dash-card-symbol { display: inline-grid; width: 20px; height: 20px; place-items: center; border-radius: 5px; background: #eff6ff; color: #2563eb; font-size: 12px; }
.dash-inline-route { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 0; border: 0; background: transparent; color: #2563eb; font-size: 10px; font-weight: 700; text-align: left; cursor: pointer; transition: color .12s; }
.dash-inline-route:hover { color: #1d4ed8; text-decoration: underline; }
.dash-project-card { border: 1px solid #e2e8f0; background: #fff; }
.dash-project-card .dash-card-head h2 { color: #0f172a; }
.dash-project-card .dash-card-icon { background: #eef2ff; color: #4f46e5; border-color: #c7d2fe; }
.dash-progress { height: 6px; overflow: hidden; margin: 8px 0 6px; border-radius: 6px; background: #f1f5f9; }
.dash-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4f46e5, #6366f1); }
.dash-pink-copy { display: inline-block; margin-top: 8px; color: #4f46e5; font-size: 10px; font-weight: 700; }
.dash-action-list { display: grid; gap: 3px; margin-top: 3px; }
.dash-action-list>button { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 5px 0; border: 0; border-top: 1px solid #eef0f4; background: transparent; color: #2f374b; text-align: left; cursor: pointer; }
.dash-action-list>button:first-child { border-top: 0; }
.dash-action-list>button i { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 7px; background: #f2e9ff; color: #6f3cbb; font-size: 16px; font-style: normal; }
.dash-action-list>button:nth-child(2) i { background: #e6f6f6; color: #21829a; }
.dash-action-list>button:nth-child(3) i { background: #fff2d5; color: #bb8321; }
.dash-action-list>button span { font-size: 10px; font-weight: 600; }
.dash-work-card { padding-bottom: 11px; }
.dash-work-employee { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid #f0f1f5; border-radius: 6px; background: #fcfcfe; }
.dash-small-avatar { display: grid; width: 37px; height: 37px; flex: 0 0 37px; place-items: center; border-radius: 7px; background: #eee9ff; color: #6846ab; font-size: 11px; font-weight: 800; }
.dash-work-employee>span:nth-child(2),.dash-poll-author>span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.dash-work-employee b,.dash-poll-author b { overflow: hidden; color: #283147; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.dash-work-employee small,.dash-poll-author small { color: #7b8497; font-size: 9px; }
.dash-work-total { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; }
.dash-work-total b { color: #1f2739; font-size: 12px; }
.dash-time-line { display: flex; justify-content: space-between; gap: 4px; padding: 10px 2px 5px; border-bottom: 1px solid #edf0f4; }
.dash-time-mark { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 3px; color: #536079; }
.dash-time-mark i { display: grid; width: 20px; height: 20px; place-items: center; color: #6d58b2; font-size: 15px; font-style: normal; }
.dash-time-mark.out i { color: #e9ad1e; }
.dash-time-mark b { font-size: 9px; font-weight: 500; white-space: nowrap; }
.dash-time-mark.planned { opacity: .5; }
.dash-checkin-note { min-height: 21px; padding-top: 4px; color: #838b9b; font-size: 8px; text-align: center; }
.dash-week-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 7px 0; color: #30394d; }
.dash-week-heading strong { font-size: 14px; }
.dash-week-heading span { color: #535e73; font-size: 12px; white-space: nowrap; }
.dash-week-bars { display: grid; height: auto; container-type: inline-size; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 7px; }
.dash-week-day { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.dash-week-track { position: relative; display: block; width: min(44%, 28px); height: clamp(96px, 34cqw, 166px); flex: 0 0 clamp(96px, 34cqw, 166px); overflow: hidden; border-radius: 4px; background: #f1f3fb; }
.dash-week-track>span { position: absolute; right: 0; bottom: 0; left: 0; display: flex; min-height: 0; flex-direction: column; align-items: center; justify-content: center; border-radius: 5px; background: linear-gradient(180deg,#16a34a 0%,#15803d 100%); box-shadow: 0 2px 6px rgba(22,163,74,0.26); color: white; }
.dash-week-track>span b { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; font-weight: 700; letter-spacing: 0.3px; }
.dash-week-day>small { color: #334155; font-size: 11px; font-weight: 700; }
.dash-week-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px 10px; margin: 0 0 8px; }
.dash-week-legend-item { display: inline-flex; align-items: center; gap: 4px; color: #475569; font-size: 9px; font-weight: 600; white-space: nowrap; }
.dash-week-legend-item i { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 2px; background: #16a34a; }
.dash-week-legend-item i.work-hours { background: #16a34a; }
.dash-week-legend-item i.auto-clockout { background: #ef4444; }
.dash-week-legend-item i.holiday { background: #0891b2; }
.dash-week-legend-item i.optional-holiday { background: #f59e0b; }
.dash-week-legend-item i.weekoff { background: #94a3b8; }
.dash-week-track[data-day-type="auto-clockout"] { background: #fff0ef; }
.dash-week-track[data-day-type="holiday"] { background: #e5f5fa; }
.dash-week-track[data-day-type="optional-holiday"] { background: #fff4dc; }
.dash-week-track[data-day-type="weekoff"] { background: #eff0f4; }
.dash-week-track[data-day-type]::before { position: absolute; z-index: 2; top: 5px; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: #8b93a4; content: ""; transform: translateX(-50%); }
.dash-week-track[data-day-type="auto-clockout"]::before { background: #df514b; }
.dash-week-track[data-day-type="holiday"]::before { background: #28a5c5; }
.dash-week-track[data-day-type="optional-holiday"]::before { background: #e7a21a; }
.dash-week-nav { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.dash-week-nav button { display: inline-flex; min-height: 32px; align-items: center; padding: 5px 9px; border: 1px solid #d8deea; border-radius: 7px; background: #fff; color: #59667d; font: inherit; font-size: 10px; cursor: pointer; }
.dash-week-nav button:hover:not(:disabled) { border-color: #8b76d1; color: #5c42ad; background: #faf9ff; }
.dash-week-nav button:disabled { opacity: .55; cursor: wait; }
.dash-week-nav [role="status"] { max-width: 48%; overflow: hidden; color: #738097; font-size: 9px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.dash-week-nav [role="status"].error { color: #c4423c; }
.dash-people-strip { display: flex; align-items: flex-start; gap: 5px; overflow: hidden; padding: 2px 0 0; }
.dash-person-chip { display: flex; min-width: 35px; flex-direction: column; align-items: center; gap: 4px; color: #313b50; }
.dash-person-chip b,.dash-more { display: grid; width: 33px; height: 33px; place-items: center; border-radius: 7px; background: var(--avatar,#eee9ff); color: var(--avatar-ink,#6045ad); font-size: 9px; font-weight: 800; }
.dash-person-chip small { max-width: 42px; overflow: hidden; font-size: 8px; text-overflow: ellipsis; }
.dash-more { flex: 0 0 33px; border: 1px solid #b9bed0; background: #fff; color: #4f5870; font-size: 10px; }
.dash-holiday-card { overflow: hidden; border: 1px solid #e2e8f0; background: #fff; }
.dash-holiday-card .dash-card-head h2 { color: #0f172a; }
.dash-holiday-card .dash-text-link { color: #2563eb; }
.dash-holiday-month { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 0 0 7px; color: #64748b; border-bottom: 1px solid #f1f5f9; margin-bottom: 3px; }
.dash-holiday-month strong { color: #0f172a; font-size: 11px; font-weight: 700; }
.dash-holiday-month>span { color: #64748b; font-size: 8px; font-weight: 700; letter-spacing: .5px; }
.dash-holiday-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid #f1f5f9; }
.dash-holiday-row:first-of-type { border-top: none; }
.dash-date-tile { display: flex; width: 42px; height: 42px; flex: 0 0 42px; flex-direction: column; align-items: center; justify-content: center; border-radius: 6px; background: #f8fafc; border: 1px solid #e2e8f0; color: #0f172a; font-size: 15px; font-weight: 800; font-family: Manrope, sans-serif; }
.dash-date-tile small { font-size: 7.5px; font-weight: 800; color: #e11d48; text-transform: uppercase; letter-spacing: 0.4px; line-height: 1; margin-bottom: 1px; }
.dash-date-tile.cyan { background: #f0fdfa; border-color: #99f6e4; }
.dash-date-tile.cyan small { color: #0d9488; }
.dash-date-tile.yellow { background: #fffbeb; border-color: #fde68a; }
.dash-date-tile.yellow small { color: #b45309; }
.dash-holiday-row>span { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.dash-holiday-row>span strong { overflow: hidden; color: #0f172a; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.dash-holiday-row>span small { color: #64748b; font-size: 9px; font-weight: 500; }
.dash-holiday-row>i { color: #94a3b8; font-size: 14px; font-style: normal; }
.dash-card.dash-quick-links, .dash-quick-links { padding: 11px 12px; }
.dash-quick-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.dash-quick-link { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 4px; padding: 5px 2px; border: 0; border-radius: 6px; background: transparent; color: #333c52; cursor: pointer; transition: all .15s ease; }
.dash-quick-link:hover { background: #f8fafc; transform: translateY(-1px); }
.dash-quick-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 8px; font-size: 16px; transition: all .15s ease; }
.dash-quick-link:nth-child(1) .dash-quick-icon { background: #ecfdf5; color: #059669; }
.dash-quick-link:nth-child(2) .dash-quick-icon { background: #eff6ff; color: #2563eb; }
.dash-quick-link:nth-child(3) .dash-quick-icon { background: #f5f3ff; color: #7c3aed; }
.dash-quick-link:nth-child(4) .dash-quick-icon { background: #fffbeb; color: #d97706; }
.dash-quick-link:nth-child(5) .dash-quick-icon { background: #fff1f2; color: #e11d48; }
.dash-quick-link:hover .dash-quick-icon { box-shadow: 0 2px 8px rgba(15,23,42,0.08); transform: scale(1.05); }
.dash-quick-link>span:last-child { font-size: 8.5px; text-align: center; font-weight: 600; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; color: #475569; }
.dash-announcement { padding: 9px 0; border-top: 1px solid #eff1f5; }
.dash-announcement:first-of-type { padding-top: 0; border-top: 0; }
.dash-announcement-author { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.dash-announcement-meta { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; }
.dash-announcement-meta b { overflow: hidden; color: #0f172a; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.dash-announcement-meta small { color: #64748b; font-size: 9.5px; font-weight: 500; white-space: nowrap; }
.dash-announcement-author button { padding: 0 4px; border: 0; background: transparent; color: #64748b; font-size: 16px; cursor: pointer; line-height: 1; border-radius: 4px; }
.dash-announcement-author button:hover { color: #0f172a; background: #f1f5f9; }
.dash-announcement>strong { display: block; color: #1e293b; font-size: 11px; font-weight: 700; line-height: 1.4; margin-bottom: 2px; }
.dash-announcement p { margin: 2px 0 0; color: #64748b; font-size: 10px; line-height: 1.5; }
.dash-announcements>.dash-text-link { display: inline-block; margin-top: 7px; }
.dash-filter { height: 25px; padding: 0 7px; border: 1px solid #edf0f5; border-radius: 5px; background: #fff; color: #48546a; font-size: 9px; }
.dash-birthday-banner { position: relative; overflow: hidden; padding: 11px 12px; border-radius: 8px; background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: #fff; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.16); }
.dash-birthday-banner> b { display: block; margin-bottom: 7px; font-size: 11px; }
.dash-birthday-banner .dash-people-strip { gap: 4px; }
.dash-birthday-banner .dash-person-chip { color: #fff; }
.dash-birthday-banner .dash-person-chip b { border: 1px solid #ffffff88; background: #ffffff29; color: white; }
.dash-birthday-banner .dash-person-chip small { color: #ffffffd4; }
.dash-birthday-banner .dash-more { border-color: #ffffffaa; background: #ffffffdd; }
.dash-birthday-banner p { max-width: 76%; margin: 8px 0 0; color: #fff; font-size: 9px; line-height: 1.45; }
.dash-balloons { position: absolute; top: 9px; right: 9px; font-size: 34px; }
.dash-poll-author { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.dash-poll-author .dash-small-avatar { width: 34px; height: 34px; flex-basis: 34px; }
.dash-poll-question { display: block; margin: 7px 0 10px; color: #252e43; font-size: 11px; }
.dash-poll-option { margin: 8px 0; }
.dash-poll-option>span { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-bottom: 4px; color: #333d51; }
.dash-poll-option>span b { font-size: 10px; }.dash-poll-option>span small { color: #6f788b; font-size: 9px; }
.dash-poll-option>i { display: block; height: 7px; overflow: hidden; border-radius: 5px; background: #ecf0f7; }
.dash-poll-option>i b { display: block; height: 100%; border-radius: inherit; background: #6366f1; }
.dash-poll-option:nth-of-type(2)>i b { background: #94a3b8; }
.dash-poll-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 11px; padding-top: 8px; border-top: 1px solid #f1f5f9; color: #64748b; font-size: 9px; }
.dash-poll-foot button { min-height: 27px; padding: 0 11px; border: 0; border-radius: 5px; background: #0f172a; color: #fff; font-size: 9.5px; font-weight: 700; cursor: pointer; transition: background .12s; }
.dash-poll-foot button:hover { background: #1e293b; }
.dash-module-empty { padding: 12px 5px; color: #8790a1; font-size: 10px; line-height: 1.5; }
.dash-data-note { margin: 5px 0 0 !important; color: #8c93a1 !important; font-size: 9px !important; }
.dash-footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 11px; padding: 4px 2px; color: #8991a1; font-size: 9px; }
.dash-footer button { padding: 0; border: 0; background: transparent; color: #6660a5; font-size: 9px; cursor: pointer; }
.dash-loading { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.dash-loading i { display: block; height: 390px; border-radius: 8px; background: linear-gradient(100deg,#f7f7fa,#ededf4,#f7f7fa); background-size: 200% 100%; animation: dash-shimmer 1.2s infinite linear; }
@keyframes dash-shimmer { to { background-position: -200% 0; } }
.dash-error { max-width: 600px; margin: 80px auto; padding: 36px; border: 1px solid #e9e6f4; border-radius: 13px; background: #fcfbff; text-align: center; }
.dash-error>span { display: inline-grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; background: #efebff; color: #6c58c4; font-size: 24px; }
.dash-error h2 { margin: 14px 0 7px; color: #30364b; font: 700 18px Manrope,sans-serif; }
.dash-error p { margin: 0 auto 16px; max-width: 430px; color: #858b98; font-size: 12px; line-height: 1.6; }
.dash-error .fbtn { margin-left: 7px; }
@media (max-width: 1050px) {
  body.employee-portal .topbar { padding: 0 14px; gap: 8px; }
  .employee-home-nav { gap: 0; }
  .employee-home-nav a:not(.home-brand),.employee-home-nav button { padding-right: 7px; padding-left: 7px; font-size: 11px; }
  body.employee-portal .topbar-actions .environment-pill { display: none; }
  body.dashboard-home .page-content { padding-right: 17px; padding-left: 17px; }
  .dash-columns { gap: 10px; }
  .dash-column { gap: 10px; }
  .dash-card { padding: 11px; }
}
@media (max-width: 760px) {
  .employee-home-nav { height: 54px; }
  .home-brand img { width: 70px; height: 32px; }
  .employee-home-nav a:not(.home-brand),.employee-home-nav button { height: 32px; font-size: 10px; }
  body.employee-portal .topbar { min-height: 54px; }
  body.employee-portal .topbar-actions .auth-button { padding: 0 8px; font-size: 10px; }
  body.employee-portal .topbar-actions .icon-button { display: none; }
  body.dashboard-home .page-content { padding: 14px 12px; }
  .dash-columns { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dash-column-right { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
  .dash-column-right>.dash-card { align-self: start; }
}
@media (max-width: 520px) {
  .employee-home-nav { gap: 0; }
  .employee-home-nav a:not(.home-brand),.employee-home-nav button { padding: 0 6px; font-size: 9px; }
  .home-brand { margin-right: 3px; }
  .home-brand img { width: 62px; }
  body.employee-portal .topbar-actions { gap: 3px; }
  body.employee-portal .topbar-actions .auth-button { max-width: 52px; overflow: hidden; }
  body.employee-portal .topbar-actions .avatar-top { width: 28px; height: 28px; }
  .dash-columns { grid-template-columns: 1fr; }
  .dash-column-right { grid-column: auto; display: flex; }
  .dash-welcome { align-items: flex-start; }
  .dash-welcome h1 { font-size: 18px; }
  .dash-selected { font-size: 10px; }
  .dash-loading { grid-template-columns: 1fr; }
  .dash-loading i:not(:first-child) { display: none; }
}

/* Compact weekly/monthly/yearly attendance views with standardized dimensions. */
.dash-work-card { display: flex; flex-direction: column; min-height: 366px; padding: 10px 12px 9px; box-sizing: border-box; }
.dash-work-card .dash-card-head { margin-bottom: 7px; }
.dash-work-card .dash-card-head h2 { font-size: 14px; }
.dash-work-chart-stage { min-height: 164px; display: flex; flex-direction: column; justify-content: center; }
.dash-view-switch { display: inline-flex; align-items: center; gap: 1px; padding: 2px; border: 1px solid #e9e8f2; border-radius: 7px; background: #f7f6fb; }
.dash-view-button { min-height: 25px; padding: 3px 7px; border: 0; border-radius: 5px; background: transparent; color: #687187; font: inherit; font-size: 9px; font-weight: 700; cursor: pointer; }
.dash-view-button:hover { color: #5921a6; background: #efebfa; }
.dash-view-button.is-active { background: #fff; color: #5d20b5; box-shadow: 0 1px 3px #2c17421c; }
.dash-view-button:focus-visible,.dash-week-nav button:focus-visible { outline: 2px solid #8f75df; outline-offset: 2px; }
.dash-period-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 4px 0 6px; color: #30394d; }
.dash-period-heading strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.dash-period-heading span { flex: 0 0 auto; color: #535e73; font-size: 11px; white-space: nowrap; }
.dash-week-heading { margin: 4px 0 6px; }
.dash-week-bars { display: grid; height: 164px; container-type: inline-size; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 5px; align-items: end; }
.dash-week-day { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.dash-week-track { position: relative; display: block; width: min(44%, 28px); height: 136px; flex: 0 0 136px; overflow: hidden; border-radius: 4px; background: #f1f3fb; }
.dash-week-legend { gap: 4px 9px; margin: 7px 0 2px; }
.dash-week-legend-item { font-size: 8.5px; font-weight: 600; color: #475569; }
.dash-week-legend-item i { width: 8px; height: 8px; border-radius: 2px; background: #16a34a; }
.dash-week-legend-item i.work-hours { background: #16a34a; }
.dash-week-legend.is-week .dash-week-legend-item i.work-hours { background: #16a34a; }
.dash-week-legend.is-heatmap .dash-week-legend-item i.work-hours { background: #16a34a; }
.dash-week-legend-item i.auto-clockout { background: #ef4444; }
.dash-week-legend-item i.holiday { background: #0891b2; }
.dash-week-legend-item i.optional-holiday { background: #f59e0b; }
.dash-week-legend-item i.weekoff { background: #94a3b8; }
.dash-week-nav { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.dash-week-nav button { min-height: 28px; padding: 4px 8px; font-size: 9px; }
.dash-month-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 3px; align-items: center; min-height: 164px; }
.dash-month-grid>span:not(.dash-period-cell):not(.dash-month-empty) { padding: 1px 0 3px; color: #758096; font-size: 8px; text-align: center; }
.dash-period-cell { display: grid; min-width: 0; height: 20px; place-items: center; border: 1px solid transparent; border-radius: 4px; background: #f1f3f8; color: #637087; }
.dash-period-cell b { font-size: 8px; font-weight: 600; line-height: 1; }
.dash-period-cell.level-1,.dash-year-cell.level-1 { background: #dff3e4; }
.dash-period-cell.level-2,.dash-year-cell.level-2 { background: #a9dfb4; }
.dash-period-cell.level-3,.dash-year-cell.level-3 { background: #5dbb76; }
.dash-period-cell.level-4,.dash-year-cell.level-4 { background: #19793a; color: #fff; }
.dash-period-cell.status-holiday,.dash-year-cell.status-holiday { border-color: #1599b8; background: #d8f2f7; color: #1e697a; }
.dash-period-cell.status-optional-holiday,.dash-year-cell.status-optional-holiday { border-color: #e4a521; background: #fff0c9; color: #765410; }
.dash-period-cell.status-weekoff,.dash-year-cell.status-weekoff { border-color: #a2a8b4; background: #eceef2; color: #606a7d; }
.dash-period-cell.status-auto-clockout,.dash-year-cell.status-auto-clockout { border-color: #df514b; background: #ffe5e2; color: #a33b37; }
.dash-year-calendar { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: start; gap: 6px 7px; max-height: 164px; overflow-y: auto; overflow-x: hidden; padding-right: 2px; scrollbar-width: thin; scrollbar-color: #cbd2e0 transparent; }
.dash-year-calendar::-webkit-scrollbar { width: 4px; }
.dash-year-calendar::-webkit-scrollbar-thumb { background: #cbd2e0; border-radius: 4px; }
.dash-year-month { min-width: 0; padding: 4px; border: 1px solid #edf0f5; border-radius: 6px; background: #fff; }
.dash-year-month-title { margin: 0 0 3px; color: #46516a; font-size: 8px; font-weight: 800; line-height: 1.1; text-align: center; }
.dash-year-weekdays { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); margin-bottom: 2px; color: #788399; font-size: 6px; line-height: 1; text-align: center; }
.dash-year-dates { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 2px; }
.dash-year-cell { display: grid; min-width: 0; aspect-ratio: 1; place-items: center; border-radius: 3px; background: #edf0f3; color: #687287; font: 700 clamp(6px,.6vw,8px)/1 "DM Sans",sans-serif; font-variant-numeric: tabular-nums; }
.dash-year-cell.is-empty { visibility: hidden; background: transparent; }
.dash-year-cell.level-0 { background: #edf0f3; }
.dash-week-track[data-day-type="auto-clockout"] { background: #fff0ef; }
.dash-week-track[data-day-type="holiday"] { background: #e5f5fa; }
.dash-week-track[data-day-type="optional-holiday"] { background: #fff4dc; }
.dash-week-track[data-day-type="weekoff"] { background: #eff0f4; }
.dash-week-nav [role="status"] { flex: 1; }
@media (max-width: 520px) {
  .dash-view-button { min-height: 24px; padding-inline: 5px; font-size: 8px; }
  .dash-year-calendar { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
  .dash-period-cell { height: 18px; }
  .dash-period-cell b { font-size: 7px; }
}

.dash-attendance-counts { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; margin: -2px 0 7px; }
.dash-attendance-count { display: inline-flex; align-items: center; gap: 4px; color: #475569; font-size: 10px; font-weight: 600; white-space: nowrap; }
.dash-attendance-count i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 2px; background: #16a34a; }
.dash-attendance-count b { color: #0f172a; font-size: 9px; font-weight: 800; }
.dash-attendance-count small { color: #64748b; font-size: 8px; font-weight: 600; text-transform: capitalize; }
.dash-attendance-count.status-absent i { background: #ef4444; }
.dash-attendance-count.status-holiday i { background: #0891b2; }
.dash-attendance-count.status-leave i { background: #0284c7; }
.dash-period-cell.status-present,.dash-year-cell.status-present { border-color: #15803d; background: #16a34a; color: #fff; }
.dash-period-cell.status-absent,.dash-year-cell.status-absent { border-color: #dc2626; background: #ef4444; color: #fff; }
.dash-period-cell.status-leave,.dash-year-cell.status-leave { border-color: #0369a1; background: #0284c7; color: #fff; }
.dash-period-cell.status-holiday,.dash-year-cell.status-holiday { border-color: #0e7490; background: #0891b2; color: #fff; }
.dash-period-cell.status-optional-holiday,.dash-year-cell.status-optional-holiday { border-color: #d97706; background: #f59e0b; color: #fff; }
.dash-period-cell.status-weekoff,.dash-year-cell.status-weekoff { border-color: #94a3b8; background: #cbd5e1; color: #334155; }
.dash-period-cell.status-unrecorded,.dash-year-cell.status-unrecorded { border-color: transparent; background: #f1f5f9; color: #64748b; }
.dash-week-legend-item i.present { background: #16a34a; }
.dash-week-legend-item i.absent { background: #ef4444; }
.dash-week-legend-item i.leave { background: #0284c7; }
.dash-week-legend-item i.no-record { border: 1px solid #cbd5e1; background: #f1f5f9; }
@media (min-width: 761px) {
  .dash-columns, .dash-columns.has-attendance-detail { grid-template-columns: minmax(0,.92fr) minmax(0,1.28fr) minmax(0,.92fr); }
}
@media (max-width: 760px) {
  .dash-year-calendar { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
}
@media (max-width: 520px) {
  .dash-attendance-counts { column-gap: 7px; }
  .dash-attendance-count small { font-size: 6px; }
}

.dash-late-line { display: flex; align-items: center; gap: 5px; margin-top: 2px; color: #788096; }
.dash-late-line i { width: 6px; height: 6px; border-radius: 50%; background: #aab0bf; }
.dash-late-line b { color: #8b91a0; }
.dash-late-line.has-late i { background: #e23f42; }
.dash-late-line.has-late b { color: #cc4d58; }
.dash-avg-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; margin: 2px 0 10px; color: #475569; font-size: 11px; }
.dash-avg-item { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.dash-avg-item i { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,0.2); }
.dash-avg-item.is-break i { background: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,0.2); }
.dash-avg-item b { color: #0f172a; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dash-avg-strip small { margin-left: auto; color: #64748b; font-size: 10px; font-weight: 600; letter-spacing: 0.3px; }

.dash-ring em { color: #d44e53; font-size: 8px; font-style: normal; font-weight: 700; margin-top: 1px; }
.dash-ring small { font-size: 7px; }
.dash-ring:not(.has-issues) em { color: #1fa86a; }

/* Compact Indian Corporate Leave & WFH Balances Card */
.dash-leave-card { padding: 11px 12px; }
.dash-leave-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.dash-leave-title-wrap { display: flex; align-items: center; gap: 7px; min-width: 0; }
.dash-leave-title-wrap .dash-card-icon { width: 19px; height: 19px; flex: 0 0 19px; border-radius: 4px; color: #0284c7; background: #e0f2fe; border: 1px solid #bae6fd; font-size: 11px; }
.dash-leave-title-wrap h3 { margin: 0; color: #0f172a; font: 800 13px/1.2 Manrope, "DM Sans", sans-serif; letter-spacing: -.2px; }
.dash-leave-title-wrap p { margin: 1px 0 0; color: #64748b; font-size: 8.5px; font-weight: 500; }
.dash-btn-apply-sm { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border: 0; border-radius: 5px; background: #0f172a; color: #fff; font-family: inherit; font-size: 9.5px; font-weight: 700; cursor: pointer; transition: all .15s ease; box-shadow: 0 1px 3px rgba(15,23,42,0.18); flex-shrink: 0; }
.dash-btn-apply-sm:hover { background: #1e293b; transform: translateY(-1px); }
.dash-btn-apply-sm .plus { font-size: 11px; font-weight: 800; line-height: 1; }

/* Executive Leave Ledger (Clean, box-free corporate ledger) */
.dash-leave-ledger { display: flex; flex-direction: column; margin-bottom: 4px; }
.dash-leave-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 4px; border-bottom: 1px solid #f1f5f9; cursor: pointer; transition: background .12s ease; outline: none; }
.dash-leave-item:last-child { border-bottom: none; }
.dash-leave-item:hover, .dash-leave-item:focus-visible { background: #f8fafc; border-radius: 6px; padding-left: 6px; padding-right: 6px; }

.dash-leave-item-info { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dash-leave-indicator { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dash-leave-indicator.is-el { background: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,0.15); }
.dash-leave-indicator.is-cl { background: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,0.15); }
.dash-leave-indicator.is-sl { background: #e11d48; box-shadow: 0 0 0 2px rgba(225,29,72,0.15); }
.dash-leave-indicator.is-co { background: #d97706; box-shadow: 0 0 0 2px rgba(217,119,6,0.15); }
.dash-leave-wfh-icon { font-size: 12px; line-height: 1; flex-shrink: 0; }

.dash-leave-item-details { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.dash-leave-item-head { display: flex; align-items: center; gap: 5px; }
.dash-leave-item-head strong { color: #0f172a; font-size: 11.5px; font-weight: 700; line-height: 1.2; }
.dash-leave-badge { display: inline-block; padding: 1px 4px; border-radius: 3px; font-size: 8px; font-weight: 800; letter-spacing: 0.3px; line-height: 1.1; background: #f1f5f9; color: #475569; }
.dash-leave-badge.is-el { background: #dcfce7; color: #15803d; }
.dash-leave-badge.is-cl { background: #dbeafe; color: #1d4ed8; }
.dash-leave-badge.is-sl { background: #ffe4e6; color: #be123c; }
.dash-leave-badge.is-co { background: #fef3c7; color: #b45309; }
.dash-leave-badge.is-wfh { background: #e0e7ff; color: #3730a3; }

.dash-leave-item-meta { color: #64748b; font-size: 9px; font-weight: 500; line-height: 1.2; }
.dash-leave-item-meta b { color: #334155; font-weight: 700; }

.dash-leave-item-stat { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; gap: 1px; }
.dash-leave-item-val { color: #0f172a; font-size: 15px; font-weight: 800; line-height: 1; font-family: Manrope, "DM Sans", sans-serif; font-variant-numeric: tabular-nums; }
.dash-leave-item-lbl { color: #64748b; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.dash-leave-item-lbl.is-now { color: #15803d; }
.dash-leave-item-lbl.is-wfh { color: #3730a3; }

.dash-leave-slim-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-top: 5px; border-top: 1px solid #f1f5f9; font-size: 8.5px; }
.dash-leave-slim-status { display: flex; align-items: center; gap: 5px; color: #475569; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-leave-dot-approved { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; flex-shrink: 0; }
.dash-leave-slim-status b { color: #0f172a; font-weight: 700; }
.dash-leave-link-sm { padding: 0; border: 0; background: transparent; color: #2563eb; font-size: 9px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.dash-leave-link-sm:hover { text-decoration: underline; color: #1d4ed8; }


/* Holiday Dropdown & Scrollable List */
.dash-holiday-actions { display: flex; align-items: center; gap: 7px; }
.dash-holiday-range-select { height: 25px; padding: 0 7px; border: 1px solid #e2e8f0; border-radius: 5px; background: #f8fafc; color: #0f172a; font-family: inherit; font-size: 9.5px; font-weight: 700; cursor: pointer; outline: none; transition: all .15s ease; }
.dash-holiday-range-select:hover, .dash-holiday-range-select:focus { border-color: #cbd5e1; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,0.06); }
.dash-holiday-list { display: flex; flex-direction: column; max-height: 215px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; padding-right: 2px; }
.dash-holiday-list::-webkit-scrollbar { width: 4px; }
.dash-holiday-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.dash-holiday-row { transition: background .12s ease; padding: 7px 4px; border-radius: 5px; }
.dash-holiday-row:hover { background: #f8fafc; }
.dash-holiday-row.is-optional .dash-date-tile { border-color: #fde68a; }

/* Super Admin specific dashboard polish */
.employee-home-nav .nav-settings-tab {
  color: #92400e !important;
  background: #fef3c7 !important;
  font-weight: 700 !important;
  border-radius: 6px;
  padding: 0 11px !important;
  transition: all 0.15s ease;
}
.employee-home-nav .nav-settings-tab:hover,
.employee-home-nav .nav-settings-tab.is-active {
  background: #fde68a !important;
  color: #78350f !important;
}
.dash-employee-card.is-superadmin {
  background: linear-gradient(180deg, #ffffff 0%, #fffdf7 100%);
  border: 1px solid #fde68a;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.08);
}


/* Birthday Card & Bursting 3D Balloon Cluster */
.dash-card.dash-birthday-card, .dash-birthday-card {
  position: relative;
  overflow: visible !important;
}
.dash-birthday-banner {
  position: relative;
  overflow: visible !important;
  background: #5E17EB;
  border-radius: 14px;
  padding: 13px 15px 14px 15px;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(94, 23, 235, 0.22);
}

/* 3D Pastel Balloon Cluster positioned on upper right of Today's section (never covering pictures) */
.dash-balloon-cluster {
  position: absolute;
  top: -30px;
  right: -15px;
  width: 125px;
  height: 135px;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  transition: transform 0.3s ease;
}
.dash-birthday-banner:hover .dash-balloon-cluster {
  transform: translateY(-2px) scale(1.03);
}

/* Section 1: Today's Birthday (Top) */
.dash-birthday-today {
  position: relative;
  z-index: 6;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  max-width: 74%; /* Ensures text and buttons never collide with balloons on right */
}
.dash-today-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2.5px 7px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ffffff;
  margin-bottom: 8px;
}
.dash-today-profile {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-today-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.dash-today-avatar {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  overflow: hidden;
  border: 2px solid #ffffff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  background: #ded9ec;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dash-today-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dash-today-avatar b {
  font-size: 13px;
  font-weight: 700;
  color: #5b21b6;
}
.dash-today-crown {
  position: absolute;
  top: -7px;
  right: -5px;
  font-size: 13px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
.dash-today-info {
  min-width: 0;
}
.dash-today-name {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  margin: 0;
}
.dash-today-role {
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.85);
  margin: 2px 0 6px 0;
}
.dash-wish-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border: 0;
  border-radius: 6px;
  background: #ffffff;
  color: #5E17EB;
  font-size: 9.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  transition: all 0.15s ease;
}
.dash-wish-btn:hover {
  background: #f8fafc;
  transform: translateY(-1px);
}

/* Section 2: This Week's Birthdays (Bottom, 100% visible, zero overlap!) */
.dash-birthday-week {
  padding-top: 11px;
  position: relative;
  z-index: 6;
}
.dash-week-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}
.dash-week-title {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}
.dash-week-count {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}
.dash-celebrants-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.dash-celebrant-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 38px;
  text-align: center;
}
.dash-celebrant-avatar {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  background: #ede9fe;
}
.dash-celebrant-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dash-celebrant-avatar b {
  font-size: 11px;
  font-weight: 700;
  color: #5b21b6;
}
.dash-celebrant-name {
  font-size: 9.5px;
  font-weight: 500;
  color: #ffffff;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42px;
  opacity: 0.95;
}
.dash-celebrant-more {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: #ffffff;
  color: #1e1b4b;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}