.portal-view,
.documents-view,
.team-portal-view,
.reservations-view,
.whistle-view {
  display: grid;
  gap: 20px;
}

.portal-hero,
.danger-hero {
  border-radius: 24px;
  padding: 28px;
  background: linear-gradient(135deg, #0f172a, #155e75);
  color: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.danger-hero {
  background: linear-gradient(135deg, #111827, #7f1d1d);
}

.portal-hero h1,
.danger-hero h1 {
  margin: 10px 0 8px;
}

.portal-hero p,
.danger-hero p {
  max-width: 680px;
  margin: 0;
  color: rgba(255, 255, 255, .86);
}

.portal-actions,
.portal-card-head,
.finance-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.portal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.portal-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr);
  gap: 18px;
  align-items: start;
}

.portal-stack {
  display: grid;
  gap: 18px;
}

.portal-metric-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.portal-metric-row div {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px;
  background: #f8fafc;
}

.portal-metric-row span,
.reservation-block small,
.presence-row small,
.birthday-list span {
  display: block;
  color: #64748b;
  font-size: 13px;
}

.portal-metric-row b {
  display: block;
  margin-top: 4px;
  font-size: 22px;
}

.portal-clock b {
  display: block;
  font-size: 24px;
}

.portal-clock {
  display: grid;
  gap: 14px;
}

.portal-clock-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.portal-clock-metrics div {
  border: 1px solid #dbeafe;
  border-radius: 16px;
  padding: 13px;
  background: linear-gradient(180deg, #f8fbff, #fff);
}

.portal-clock-metrics span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.portal-time-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.portal-clock.active b {
  color: #047857;
}

.portal-clock.done b {
  color: #2563eb;
}

.portal-announcement h3 {
  margin: 10px 0 8px;
}

.who-list,
.birthday-list,
.reservation-timeline,
.whistle-list {
  display: grid;
  gap: 10px;
}

.who-list > div,
.birthday-list > div,
.presence-row,
.reservation-block {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
}

.presence-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #94a3b8;
  flex: 0 0 auto;
}

.presence-dot.working {
  background: #22c55e;
}

.presence-dot.done {
  background: #3b82f6;
}

.presence-dot.absent,
.presence-dot.planned {
  background: #f59e0b;
}

.who-absent {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.who-absent span {
  color: #64748b;
  font-size: 14px;
}

.portal-shortcuts,
.document-folder-grid,
.team-presence-grid {
  display: grid;
  gap: 12px;
}

.portal-shortcuts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portal-shortcuts a,
.document-folder-grid a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
  color: #0f172a;
  text-decoration: none;
  font-weight: 800;
}

.document-folder-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.document-folder-grid a.active {
  border-color: #2563eb;
  background: #eff6ff;
}

.team-presence-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.presence-column h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.presence-column h2 span {
  border-radius: 999px;
  padding: 4px 10px;
  background: #eef2ff;
  color: #1d4ed8;
  font-size: 14px;
}

.reservation-block {
  justify-content: space-between;
}

.reservation-block > span {
  min-width: 96px;
  font-weight: 900;
  color: #1d4ed8;
}

.reservation-block.is-cancelled {
  opacity: .55;
}

.whistle-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 16px;
}

@media (max-width: 980px) {
  .portal-hero,
  .danger-hero {
    display: grid;
  }

  .portal-grid,
  .portal-main-grid {
    grid-template-columns: 1fr;
  }

  .whistle-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .portal-hero,
  .danger-hero {
    border-radius: 18px;
    padding: 22px;
  }

  .portal-actions,
  .portal-card-head,
  .finance-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .portal-metric-row,
  .portal-shortcuts,
  .portal-clock-metrics,
  .portal-time-actions {
    grid-template-columns: 1fr;
  }

  .reservation-block {
    align-items: flex-start;
    flex-direction: column;
  }
}

.portal-view{gap:28px}.portal-hero{background:transparent;color:var(--tk-ink);padding:0;border-radius:0}.portal-hero h1{font-size:42px;line-height:1.06;letter-spacing:-.02em;margin:0 0 8px}.portal-hero p{color:#6f7771;font-size:17px;max-width:680px}.portal-grid{grid-template-columns:1fr 1fr;gap:20px}.portal-main-grid{grid-template-columns:minmax(0,1.1fr) minmax(320px,.82fr);gap:20px}.portal-card-head h2{margin:0;font-size:21px;letter-spacing:-.01em}.portal-clock{grid-template-columns:128px 1fr;align-items:center;gap:24px}.portal-clock-ring{width:116px;height:116px;border-radius:999px;background:conic-gradient(var(--tk-green) var(--p),#e7e8e2 0);display:grid;place-items:center;position:relative}.portal-clock-ring:after{content:"";position:absolute;inset:12px;background:var(--tk-panel);border-radius:999px}.portal-clock-ring b,.portal-clock-ring span{position:relative;z-index:1;text-align:center}.portal-clock-ring b{font-size:27px;line-height:1;color:var(--tk-ink)}.portal-clock-ring span{font-size:13px;color:var(--tk-muted);margin-top:28px}.portal-clock-body p{margin:0 0 6px;color:var(--tk-muted);font-size:16px}.portal-clock-body small{display:block;color:var(--tk-muted);font-weight:800;margin-bottom:12px}.portal-time-actions{display:flex;gap:10px}.portal-time-actions .btn{width:auto;min-height:42px;padding:11px 18px}.portal-expense-summary{display:grid;gap:14px}.portal-expense-total{display:flex;align-items:center;gap:14px}.portal-expense-total b{font-size:42px;line-height:1;letter-spacing:-.03em}.portal-expense-total span{background:#e3f1e8;color:var(--tk-green);border-radius:999px;padding:6px 10px;font-weight:950}.portal-expense-bar{display:flex;height:10px;overflow:hidden;border-radius:999px;background:#e7e8e2}.portal-expense-bar i{display:block}.portal-expense-bar .bar-1,.portal-expense-legend .bar-1{background:var(--tk-green)}.portal-expense-bar .bar-2,.portal-expense-legend .bar-2{background:var(--tk-lime)}.portal-expense-bar .bar-3,.portal-expense-legend .bar-3{background:var(--tk-warm)}.portal-expense-bar .bar-4,.portal-expense-legend .bar-4{background:#d9d9d1}.portal-expense-legend{display:flex;gap:12px;flex-wrap:wrap;color:var(--tk-muted)}.portal-expense-legend span{display:inline-flex;align-items:center;gap:7px}.portal-expense-legend i{width:10px;height:10px;border-radius:999px}.portal-todo-list{display:grid}.portal-todo-list a{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:14px;padding:13px 4px;border-bottom:1px solid var(--tk-line)}.portal-todo-list a:last-child{border-bottom:0}.portal-todo-list .nav-icon-wrap{background:#eef5ef;border:0;color:var(--tk-green);width:36px;height:36px}.portal-todo-list b,.portal-todo-list small{display:block}.portal-todo-list b{font-size:16px}.portal-todo-list small{color:var(--tk-muted);margin-top:3px}.portal-todo-list i{font-style:normal;color:#9ba19b;font-size:24px}.portal-metric-row div{border-color:var(--tk-line);background:#fbfbf7}.portal-shortcuts a,.document-folder-grid a,.who-list>div,.birthday-list>div,.presence-row,.reservation-block{border-color:var(--tk-line);background:#fbfbf7}.time-focus-grid{display:grid;grid-template-columns:minmax(320px,420px) minmax(0,1fr);gap:20px;align-items:start}.time-side-stack{display:grid;gap:20px}.time-clock-card{background:var(--tk-green-dark);color:#fff;border-color:transparent;padding:28px}.time-day-label{text-align:center;color:#95a49b;font-weight:900;margin-bottom:8px}.time-clock-card .time-clock-face{background:radial-gradient(circle,#10231b 58%,transparent 59%),conic-gradient(var(--tk-lime) 68%,rgba(255,255,255,.13) 0);border:0;min-height:246px;border-radius:999px;width:246px;height:246px;margin:0 auto;padding:0}.time-clock-card .time-clock-face span{color:#a8b8ae}.time-clock-card .time-clock-face b{font-size:44px;color:#fff}.time-clock-card .time-clock-face small{color:#a8b8ae}.time-clock-card .time-actions{display:flex;justify-content:center;margin-top:22px}.time-clock-card .btn{background:var(--tk-lime);color:var(--tk-green-dark)}.time-clock-card .btn.red,.time-clock-card .btn.secondary{background:rgba(255,255,255,.12);color:#fff}.time-clock-card .checks{margin-top:20px}.time-clock-card .check{background:transparent;border:0;border-top:1px solid rgba(255,255,255,.12);border-radius:0;color:#a8b8ae;padding:12px 0}.time-clock-card .check b{color:#fff}.time-week-card,.time-incident-card{padding:24px}.time-week-card .portal-card-head span{color:var(--tk-muted);font-weight:800}.time-week-bars{display:grid;gap:12px;margin-top:16px}.time-week-bars div{display:grid;grid-template-columns:44px 1fr 52px;gap:12px;align-items:center}.time-week-bars b{color:#7a817b}.time-week-bars span{height:29px;border-radius:10px;background:#ecede7;overflow:hidden;display:flex}.time-week-bars i{display:block;background:var(--tk-green);border-radius:10px}.time-week-bars em{display:block;background:var(--tk-lime);border-radius:10px;margin-left:0}.time-week-bars strong{text-align:right}.time-week-legend{display:flex;gap:16px;margin-top:18px;color:var(--tk-muted)}.time-week-legend span{display:inline-flex;align-items:center;gap:7px}.time-week-legend i{width:10px;height:10px;border-radius:99px;background:var(--tk-green)}.time-week-legend span:nth-child(2) i{background:var(--tk-lime)}.time-week-legend span:nth-child(3) i{background:#dfdfd8}.time-incident-row{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:14px;border:1px solid #eedfc8;border-radius:16px;padding:14px;margin-top:12px}.time-incident-row>span{width:24px;height:24px;border-radius:999px;background:#fff4dc;color:#bd7b2b;display:grid;place-items:center;font-weight:950}.time-incident-row b,.time-incident-row small{display:block}.time-incident-row small{color:var(--tk-muted);margin-top:3px}@media(max-width:1050px){.portal-grid,.portal-main-grid,.time-focus-grid{grid-template-columns:1fr}.portal-clock{grid-template-columns:1fr}.portal-clock-ring{margin:auto}}@media(max-width:640px){.portal-hero h1{font-size:34px}.portal-expense-total{align-items:flex-start;flex-direction:column}.portal-expense-total b{font-size:34px}.portal-time-actions{flex-direction:column}.portal-time-actions .btn{width:100%}.time-clock-card .time-clock-face{width:210px;height:210px}.time-week-bars div{grid-template-columns:38px 1fr 46px}.time-incident-row{grid-template-columns:1fr}.time-incident-row .btn{width:100%}}

/* Ticketly visual restyle: design-only token layer. */
:root{--canvas:#F4F3EF;--surface:#FFFFFF;--surface-2:#FBFAF7;--ink:#101C19;--ink-2:#5A6763;--ink-3:#8A948F;--line:#E4E2DB;--line-strong:#C9C5BA;--primary:#0E7C66;--primary-hover:#0A6151;--primary-soft:#E7F1ED;--accent:#D6F25B;--warn:#F0A13A;--warn-soft:#FFFDF9;--warn-ink:#B9762A;--danger:#D6544B;--danger-soft:#FDF2F1;--tk-bg:var(--canvas);--tk-panel:var(--surface);--tk-ink:var(--ink);--tk-muted:var(--ink-2);--tk-line:var(--line);--tk-green:var(--primary);--tk-green-dark:var(--ink);--tk-lime:var(--accent);--tk-warm:var(--warn);--tk-soft:var(--primary-soft)}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body,button,input,select,textarea{font-family:"Instrument Sans",system-ui,sans-serif}
body{background:var(--canvas);color:var(--ink);font-size:13.5px}
p,.muted,.section-copy{text-wrap:pretty}
a{color:var(--primary);text-decoration:none}a:hover{color:var(--primary-hover)}
h1,.top h1,.head h1,.page-title-block h1,.portal-hero h1,.danger-hero h1{color:var(--ink);font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.06}
.field-box b,.card b,.stat b,.portal-expense-total b,.portal-clock-ring b,.time-clock-card .time-clock-face b,.amount,.plan-price,td b{font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.card h2,.panel h2,.portal-card-head h2,.finance-section-head h2,.login-card h2,.register-card h2,.admin-login-card h1,.admin-main h2{color:var(--ink);font-size:15px;font-weight:650;letter-spacing:-.01em;line-height:1.2}
.muted,.field-box span,.portal-metric-row span,.reservation-block small,.presence-row small,.birthday-list span,.auth-footer,.side-company,.portal-clock-body small,.time-incident-row small{color:var(--ink-2);font-size:12.5px;font-weight:400}
th,.nav-section-label,.badge,label,.portal-clock-metrics span,.admin-mark small,.admin-brand small{color:var(--ink-2);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
label{display:block;margin-bottom:6px}.main,.app-shell .main,.main-content,.admin-layout,.admin-main,.login-wrap,.register-wrap,.public-login-wrap{background:var(--canvas)}
.card,.panel,.login-card,.register-card,.admin-login-card,.field-box,.item,.ticket-card,.suite-card,.role-suite,.split-band,.filters,.filters.advanced,.portal-metric-row div,.portal-shortcuts a,.document-folder-grid a,.who-list>div,.birthday-list>div,.presence-row,.reservation-block,.time-week-card,.time-incident-card,.worker-file-summary .card,.worker-file-card,.time-employee-group,.year-calendar-card,.time-calendar-day,.schedule-day-editor,.time-config-summary div,.announcement-card,.whistle-card{background:var(--surface);border:1px solid var(--line);box-shadow:0 1px 2px rgba(16,28,25,.05)}
.app-topbar,.side,.app-shell .side,.admin-side,.side-search,.table th,thead,.table tr:hover td,.document-folder-grid a:hover,.portal-shortcuts a:hover{background:var(--surface-2)}
.table{border-spacing:0 8px}td{background:var(--surface);border-color:var(--line)!important;color:var(--ink);font-size:13.5px}th{padding:0 12px 7px}
.btn,button.btn,a.btn{min-height:38px;border:1px solid transparent;border-radius:999px;padding:10px 17px;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--primary);color:#fff;font-size:13.5px;font-weight:600;line-height:1;box-shadow:0 1px 2px rgba(16,28,25,.12);transition:background-color 120ms ease,border-color 120ms ease,color 120ms ease,transform 120ms ease}
.btn:hover,button.btn:hover,a.btn:hover{background:var(--primary-hover);color:#fff}.btn.secondary,button.btn.secondary,a.btn.secondary{background:#fff;border-color:var(--line);color:var(--ink);box-shadow:none}.btn.secondary:hover,button.btn.secondary:hover,a.btn.secondary:hover{background:#fff;border-color:var(--line-strong);color:var(--ink)}
.btn.soft,button.btn.soft,a.btn.soft{background:var(--primary-soft);border-color:transparent;color:var(--primary);box-shadow:none}.btn.green,.top-add-ticket{background:var(--primary);color:#fff}.btn.red,.btn.danger,.icon-danger{background:#fff;border-color:#E8C4C1;color:var(--danger);box-shadow:none}.btn.red:hover,.btn.danger:hover,.icon-danger:hover{background:var(--danger-soft);color:var(--danger)}
.mini,.btn.mini{min-height:32px;padding:7px 14px;font-size:12.5px}.time-clock-card .btn,.cta-band .btn.green,.side-month-card a{background:var(--accent);color:var(--ink);box-shadow:none}.time-clock-card .btn:hover,.cta-band .btn.green:hover,.side-month-card a:hover{background:#cbe94f;color:var(--ink)}
.icon-btn,.announcement-bell,.side-collapse{width:34px;height:34px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);box-shadow:none}
input,select,textarea{border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:#fff;color:var(--ink);font-size:14px;font-weight:400}input:focus,select:focus,textarea:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"],.field-error input,.field-error textarea,.field-error select{border-color:var(--danger)}
.warning,.time-incident-row{background:var(--warn-soft);border-color:var(--warn);color:var(--warn-ink)}.error{background:var(--danger-soft);color:var(--danger)}.notice,.success{background:var(--primary-soft);border-color:#C8DDD5;color:var(--primary)}
.pill,.badge,.mini-module-list span,.register-suite-panel span,.presence-column h2 span,.portal-expense-total span{border-radius:999px;font-size:13px;font-weight:600}.badge{background:var(--primary-soft);border:1px solid #D4E5DE;color:var(--primary)}
.pay-toggle button,.category-choice,.department-select-grid label,.module-permission-grid label{border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:13px;font-weight:600}.pay-toggle button.active{border-color:var(--ink);background:var(--ink);color:#fff}
.pending,.personal{background:#FFF5E7;color:var(--warn-ink)}.approved,.corporate{background:var(--primary-soft);color:var(--primary)}.rejected{background:var(--danger-soft);color:var(--danger)}.paid,.draft{background:var(--surface-2);color:var(--ink-2)}
.logo,.admin-mark .logo,.admin-brand .logo{background:var(--primary);box-shadow:none}.portal-hero,.danger-hero{background:transparent;color:var(--ink)}.portal-hero p,.danger-hero p{color:var(--ink-2)}
.finance-snapshot,.cta-band,.time-clock-card,.side-month-card{background:var(--ink);color:#fff}.finance-snapshot .badge,.cta-band .badge{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff}.bar-row i,.portal-clock-ring,.portal-expense-bar .bar-1,.portal-expense-legend .bar-1,.time-week-bars i{background:var(--primary)}.portal-expense-bar .bar-2,.portal-expense-legend .bar-2,.time-week-bars em{background:var(--accent)}.portal-expense-bar .bar-3,.portal-expense-legend .bar-3{background:var(--warn)}
.app-shell .side{background:var(--surface-2)}.side nav a{color:var(--ink-2);font-size:13.5px;font-weight:600}.side nav a:hover{background:var(--primary-soft);color:var(--primary-hover)}.side nav a.active{background:var(--primary-soft);color:var(--primary)}
@media(max-width:760px){.btn,button.btn,a.btn{min-height:44px}h1,.top h1,.head h1,.page-title-block h1,.portal-hero h1,.danger-hero h1{font-size:26px}}

/* Cards module visual pass only. */
.cards-view{gap:20px}
.cards-view .finance-hero{background:var(--ink);color:#fff;border:1px solid rgba(255,255,255,.08);border-radius:24px;box-shadow:none}
.cards-view .finance-hero h1{color:#fff}
.cards-view .finance-hero p{color:#DDE6E2}
.cards-view .finance-hero .badge{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff}
.card-provider{background:var(--warn-soft);border:1px solid var(--warn);border-radius:18px;color:var(--warn-ink);box-shadow:0 1px 2px rgba(16,28,25,.04)}
.card-provider.ready{background:var(--primary-soft);border-color:#C8DDD5;color:var(--primary)}
.card-provider b{font-size:15px;font-weight:650;letter-spacing:-.01em}
.card-provider p{color:inherit;font-size:12.5px}
.card-provider>span{background:#fff;border:1px solid var(--line);color:inherit;font-size:12.5px;font-weight:600;padding:7px 12px}
.cards-view .finance-kpis{gap:12px}
.cards-view .finance-kpi{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 1px 2px rgba(16,28,25,.05)}
.cards-view .finance-kpi.primary{background:var(--primary-soft);border-color:#C8DDD5;color:var(--ink)}
.cards-view .finance-kpi span{color:var(--ink-2);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.cards-view .finance-kpi b{color:var(--ink);font-size:31px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.cards-view .finance-kpi p{color:var(--ink-2);font-size:12.5px}
.card-mini{gap:5px}
.card-mini span{background:var(--ink);color:#fff;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px}
.card-mini b{color:var(--ink);font-size:14px;font-weight:650;letter-spacing:-.01em}
.card-mini small{color:var(--ink-3);font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.cards-table td{vertical-align:middle}
.cards-table .pill{white-space:nowrap}
.card-usage{gap:9px}
.card-usage>div:first-child b{font-size:14px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.card-usage span{color:var(--ink-2);font-size:12.5px;font-weight:500}
.card-usage-track{height:8px;background:var(--line);border-radius:999px}
.card-usage-track i{background:linear-gradient(90deg,var(--primary),var(--accent))}
.card-actions{gap:8px}
.card-limit-form{gap:8px}
.card-limit-form input{height:38px;border-radius:12px;font-size:13.5px}
.employee-card-grid{gap:14px}
.employee-card{min-height:270px;padding:22px;border:1px solid rgba(255,255,255,.08);border-radius:24px;background:linear-gradient(135deg,var(--ink),#1D302B);box-shadow:0 12px 28px rgba(16,28,25,.14)}
.employee-card:before{content:"";width:42px;height:28px;border-radius:8px;background:linear-gradient(135deg,rgba(214,242,91,.95),rgba(214,242,91,.45));box-shadow:inset 0 0 0 1px rgba(16,28,25,.18)}
.employee-card.paused,.employee-card.cancelled{filter:none;opacity:.72}
.employee-card-top{order:-1}
.employee-card-top>span{color:#DDE6E2;font-size:12.5px;font-weight:600}
.employee-card h2{margin:2px 0 0;color:#fff;font-size:20px;font-weight:650;letter-spacing:-.02em}
.employee-card p{color:#DDE6E2;font-size:18px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.employee-card-row{border-top:1px solid rgba(255,255,255,.12);padding-top:11px}
.employee-card-row span{color:#B9C7C1;font-size:12.5px}
.employee-card-row b{color:#fff;font-size:13.5px;font-weight:650;font-variant-numeric:tabular-nums}
.employee-card .card-usage-track{background:rgba(255,255,255,.14)}
.employee-card .card-usage-track i{background:var(--accent)}
.employee-card .pill.approved{background:rgba(231,241,237,.14);color:#fff}
.employee-card .pill.pending{background:rgba(255,253,249,.12);color:#FFE4B9}
.employee-card .pill.rejected{background:rgba(253,242,241,.12);color:#FFD8D5}
@media(max-width:760px){.cards-view .finance-hero{border-radius:20px}.card-provider{align-items:flex-start;flex-direction:column}.card-provider>span{width:max-content}.card-limit-form{grid-template-columns:1fr}.card-actions,.card-actions .btn,.card-limit-form .btn{width:100%}.employee-card{min-height:0}}

/* HR portal responsive polish. */
.portal-clock-card{min-width:0;overflow:hidden}
.portal-clock{grid-template-columns:minmax(118px,124px) minmax(0,1fr);gap:18px}
.portal-clock-ring{width:124px;height:124px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;flex:0 0 auto}
.portal-clock-ring:after{z-index:0}
.portal-clock-ring b{max-width:76px;font-size:24px;line-height:.98;overflow-wrap:normal}
.portal-clock-ring span{margin-top:0;font-size:11.5px;line-height:1.1}
.portal-clock-body{min-width:0}
.portal-card-head+.who-list{margin-top:14px}
.who-list{gap:11px}
@media(max-width:1180px){.portal-clock{grid-template-columns:1fr}.portal-clock-ring{margin:2px auto 8px}.portal-clock-body{text-align:left}.portal-time-actions{justify-content:flex-start}}
@media(max-width:760px){.portal-card-head+.who-list{margin-top:12px}.portal-clock-ring{width:116px;height:116px}.portal-clock-ring b{font-size:22px}}

/* Portal card header breathing room. */
.portal-view .portal-card-head{margin-bottom:14px}
.portal-view .portal-card-head+.who-list{margin-top:0}
.portal-view .portal-card-head+.portal-metric-row,
.portal-view .portal-card-head+.portal-todo-list,
.portal-view .portal-card-head+.empty,
.portal-view .portal-card-head+.portal-announcement,
.portal-view .portal-card-head+.table-wrap{margin-top:0}
@media(max-width:760px){.portal-view .portal-card-head{margin-bottom:12px}}

/* Time page clock detail fit. */
.time-view .time-clock-card .time-clock-face{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:8px;
  text-align:center;
  overflow:hidden;
}
.time-view .time-clock-card .time-clock-face span,
.time-view .time-clock-card .time-clock-face b,
.time-view .time-clock-card .time-clock-face small{
  position:relative;
  z-index:1;
}
.time-view .time-clock-card .time-clock-face span{
  max-width:132px;
  font-size:11.5px;
  line-height:1.1;
  letter-spacing:.06em;
}
.time-view .time-clock-card .time-clock-face b{
  margin:0;
  font-size:41px;
  line-height:.95;
  max-width:168px;
  white-space:nowrap;
}
.time-view .time-clock-card .time-clock-face small{
  max-width:142px;
  font-size:11px;
  line-height:1.25;
  font-weight:600;
  color:#C7D4CE;
  text-wrap:balance;
}

/* Fixed desktop shell: sidebar stays still and only the workspace scrolls. */
@media(min-width:981px){
  .layout,
  .app-shell.layout{
    height:100vh;
    min-height:100vh;
    overflow:hidden;
  }
  .app-shell .side,
  .side{
    height:100vh;
    max-height:100vh;
    overflow:auto;
    overscroll-behavior:contain;
  }
  .app-shell .main,
  .main{
    height:100vh;
    overflow:auto;
    overscroll-behavior:contain;
  }
}
@media(max-width:760px){
  .time-view .time-clock-card .time-clock-face b{font-size:34px}
  .time-view .time-clock-card .time-clock-face small{max-width:132px;font-size:10.8px}
}