/*
 * WebTechs Employee Hub — Modern interface layer.
 * Loaded after the stable component stylesheet so existing installations keep
 * their markup and behavior while receiving the refreshed visual system.
 */

@font-face {
  font-family: "Vazirmatn Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/vazirmatn-arabic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: "Vazirmatn Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/vazirmatn-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
}

html.wteh-theme-dark {
  color-scheme: dark;
}

body.wteh-webapp-body {
  background: #eef2f8 !important;
  color: #172033;
  font-family: "Vazirmatn Variable", Vazirmatn, Tahoma, "Segoe UI", sans-serif;
}

.wteh-webapp-background {
  background:
    radial-gradient(circle at 8% 2%, rgba(99, 91, 255, .13), transparent 32%),
    radial-gradient(circle at 94% 94%, rgba(14, 184, 166, .10), transparent 30%),
    linear-gradient(145deg, #f8faff 0%, #eef2f8 55%, #e9eef7 100%);
}

.wteh-webapp-glow {
  filter: blur(30px);
  opacity: .42;
}

.wteh-webapp-glow-one {
  background: radial-gradient(circle, rgba(109, 93, 252, .34), rgba(109, 93, 252, 0) 68%);
}

.wteh-webapp-glow-two {
  background: radial-gradient(circle, rgba(20, 207, 189, .25), rgba(20, 207, 189, 0) 68%);
}

.wteh-webapp-grid {
  background-image: linear-gradient(rgba(31, 41, 70, .028) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 41, 70, .028) 1px, transparent 1px);
  background-size: 48px 48px;
}

.wteh-webapp-view {
  padding: clamp(12px, 2vw, 28px);
}

.wteh-shell {
  --wteh-accent-strong: color-mix(in srgb, var(--wteh-accent) 82%, #221b66);
  --wteh-accent-soft: color-mix(in srgb, var(--wteh-accent) 10%, #fff);
  --wteh-accent-faint: color-mix(in srgb, var(--wteh-accent) 5%, transparent);
  --wteh-surface: #fff;
  --wteh-surface-2: #f8f9fc;
  --wteh-surface-3: #f1f4f9;
  --wteh-canvas: #f4f6fb;
  --wteh-text: #172033;
  --wteh-text-2: #3f4c63;
  --wteh-text-3: #5d697f;
  --wteh-accent-readable: #5143c9;
  --wteh-border: #e4e8f0;
  --wteh-border-strong: #d7dce7;
	--wteh-ink: var(--wteh-text);
	--wteh-muted: var(--wteh-text-2);
	--wteh-line: var(--wteh-border);
	--wteh-bg: var(--wteh-canvas);
	--wteh-card: var(--wteh-surface);
  --wteh-shadow-sm: 0 6px 20px rgba(25, 35, 58, .055);
  --wteh-shadow-md: 0 16px 44px rgba(25, 35, 58, .09);
  --wteh-shadow-lg: 0 30px 90px rgba(23, 31, 52, .16);
  color: var(--wteh-text);
  font-family: "Vazirmatn Variable", Vazirmatn, Tahoma, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.8;
  max-width: 1480px;
}

.wteh-shell h1,
.wteh-shell h2,
.wteh-shell h3,
.wteh-shell h4 {
  color: var(--wteh-text);
  font-weight: 800;
  letter-spacing: -.025em;
}

.wteh-shell a {
  text-underline-offset: 3px;
}

.wteh-shell .screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

/* Standalone application and authentication surfaces */
.wteh-application-shell,
.wteh-auth-shell,
.wteh-portal {
  border: 1px solid rgba(255, 255, 255, .88);
  box-shadow: var(--wteh-shadow-lg);
}

.wteh-application-shell {
  background: var(--wteh-canvas);
  border-radius: 28px;
}

.wteh-hero {
  background:
    radial-gradient(circle at 12% 0, rgba(129, 140, 248, .56), transparent 34%),
    radial-gradient(circle at 90% 110%, rgba(20, 184, 166, .30), transparent 36%),
    linear-gradient(125deg, #10172f 0%, #282567 53%, #3a2ca0 100%);
  min-height: 300px;
  padding: 60px 7%;
}

.wteh-hero::before {
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 34px rgba(255, 255, 255, .035), 0 0 0 68px rgba(255, 255, 255, .025);
}

.wteh-hero h2 {
  font-size: clamp(31px, 4vw, 50px);
  line-height: 1.4;
}

.wteh-hero p {
  color: #dbe2f7;
  font-size: 15px;
}

.wteh-hero-tags span {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .17);
  font-size: 12px;
  padding: 7px 13px;
}

.wteh-brand-mark {
  background: linear-gradient(145deg, #7c72ff, var(--wteh-accent) 48%, #10bca8);
  border-radius: 16px;
  box-shadow: 0 13px 34px color-mix(in srgb, var(--wteh-accent) 32%, transparent), inset 0 1px rgba(255, 255, 255, .42);
}

.wteh-application-form {
  padding: 42px 7% 60px;
}

.wteh-application-form .wteh-form-section {
  background: var(--wteh-surface);
  border-color: var(--wteh-border);
  border-radius: 22px;
  box-shadow: var(--wteh-shadow-sm);
  padding: clamp(22px, 3vw, 32px);
}

.wteh-section-heading {
  border-color: var(--wteh-border);
  margin-bottom: 26px;
}

.wteh-section-heading > span:first-child {
  background: var(--wteh-accent-soft);
  border: 1px solid color-mix(in srgb, var(--wteh-accent) 14%, var(--wteh-border));
  border-radius: 13px;
  font-size: 14px;
  height: 44px;
}

.wteh-section-heading h3 {
  font-size: 18px;
}

.wteh-section-heading p {
  color: var(--wteh-text-3);
  font-size: 12px;
}

.wteh-auth-shell {
  background:
    radial-gradient(circle at 12% 7%, rgba(124, 114, 255, .48), transparent 32%),
    radial-gradient(circle at 92% 91%, rgba(16, 188, 168, .23), transparent 30%),
    linear-gradient(145deg, #0d1428, #20204f);
  border-radius: 28px;
  min-height: min(720px, calc(100svh - 40px));
}

.wteh-auth-card {
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 24px;
  box-shadow: 0 32px 90px rgba(3, 8, 24, .36);
  max-width: 460px;
  padding: 40px;
}

.wteh-auth-card > p,
.wteh-forgot {
  font-size: 12px;
}

/* Portal frame and top bar */
.wteh-portal {
  background: var(--wteh-canvas);
  border-radius: 28px;
  overflow: clip;
  position: relative;
}

.wteh-portal-header {
  align-items: center;
  backdrop-filter: blur(18px) saturate(145%);
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid var(--wteh-border);
  box-shadow: 0 8px 28px rgba(27, 37, 62, .055);
  color: var(--wteh-text);
  gap: 18px;
  min-height: 82px;
  padding: 13px 22px;
  position: sticky;
  top: 0;
  z-index: 40;
}

.wteh-portal-header::after {
  background: linear-gradient(90deg, transparent, var(--wteh-accent), var(--wteh-cyan), transparent);
  height: 2px;
  inset: auto 8% -1px;
  opacity: .82;
  width: auto;
}

.wteh-portal-brand {
  gap: 12px;
  min-width: 220px;
}

.wteh-portal-brand .wteh-brand-mark {
  border-radius: 14px;
  flex-basis: 50px;
  height: 50px;
}

.wteh-portal-brand strong {
  color: var(--wteh-text);
  font-size: 16px;
  line-height: 1.5;
}

.wteh-portal-brand span {
  color: var(--wteh-text-3);
  font-size: 11px;
}

.wteh-live-badge {
  background: #eefbf7;
  border-color: #d4f1e8;
  color: #167563;
  font-size: 11px;
  margin-inline: auto;
  padding: 7px 12px;
}

.wteh-live-badge i {
  background: #18b897;
  box-shadow: 0 0 0 4px rgba(24, 184, 151, .12);
}

.wteh-header-actions {
  align-items: center;
  display: flex;
  gap: 9px;
}

.wteh-theme-toggle,
.wteh-header-menu,
.wteh-notification-toggle {
  align-items: center;
  background: var(--wteh-surface-2);
  border: 1px solid var(--wteh-border);
  border-radius: 13px;
  color: var(--wteh-text-2);
  cursor: pointer;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  padding: 0;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
  width: 44px;
}

.wteh-theme-toggle:hover,
.wteh-header-menu:hover,
.wteh-notification-toggle:hover,
.wteh-notification-toggle[aria-expanded="true"] {
  background: var(--wteh-accent-soft);
  border-color: color-mix(in srgb, var(--wteh-accent) 24%, var(--wteh-border));
  color: var(--wteh-accent);
  transform: translateY(-1px);
}

.wteh-theme-toggle > span:first-child {
  font-size: 18px;
  line-height: 1;
}

.wteh-header-menu {
  display: none;
  flex-direction: column;
  gap: 4px;
}

.wteh-header-menu > span {
  background: currentColor;
  border-radius: 3px;
  height: 2px;
  width: 18px;
}

.wteh-notification-toggle > span {
  color: inherit;
  font-size: 18px;
}

.wteh-notification-toggle > b {
  background: #f59e0b;
  border-color: var(--wteh-surface);
  color: #241500;
  font-size: 9px;
  height: 20px;
  min-width: 20px;
  right: -6px;
  top: -6px;
}

.wteh-user-chip {
  background: var(--wteh-surface-2);
  border-color: var(--wteh-border);
  border-radius: 15px;
  min-height: 50px;
  padding: 5px 7px 5px 10px;
}

.wteh-avatar {
  background: linear-gradient(145deg, var(--wteh-accent), #8f86ff);
  box-shadow: 0 7px 17px color-mix(in srgb, var(--wteh-accent) 24%, transparent);
  height: 40px;
}

.wteh-user-chip strong {
  color: var(--wteh-text);
  font-size: 12px;
}

.wteh-user-chip small {
  color: var(--wteh-text-3);
  font-size: 10px;
}

.wteh-user-chip > a {
  align-items: center;
  border-radius: 9px;
  color: var(--wteh-text-3);
  display: flex;
  font-size: 16px;
  height: 32px;
  justify-content: center;
  margin-right: 6px;
  width: 32px;
}

.wteh-user-chip > a:hover {
  background: #fff0f2;
  color: #c43b56;
}

.wteh-nav-backdrop {
  display: none;
}

/* Sidebar navigation */
.wteh-portal-layout {
  grid-template-columns: 270px minmax(0, 1fr);
  min-height: 760px;
}

.wteh-sidebar {
  background:
    radial-gradient(circle at 12% 4%, rgba(124, 114, 255, .22), transparent 28%),
    radial-gradient(circle at 85% 92%, rgba(16, 188, 168, .12), transparent 25%),
    linear-gradient(180deg, #0c1326 0%, #101a33 55%, #0c152b 100%);
  border-left: 1px solid rgba(255, 255, 255, .065);
  padding: 22px 15px;
}

.wteh-sidebar::before {
  opacity: .14;
}

.wteh-nav-list {
  gap: 5px;
}

.wteh-sidebar .wteh-nav-list a,
.wteh-sidebar .wteh-nav-list a:link,
.wteh-sidebar .wteh-nav-list a:visited {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #cbd4ea !important;
  font-size: 12.5px;
  font-weight: 650;
  gap: 11px;
  min-height: 46px;
  padding: 8px 10px;
  text-shadow: none;
}

.wteh-sidebar .wteh-nav-list a span,
.wteh-sidebar .wteh-nav-list a i {
  -webkit-text-fill-color: currentColor !important;
  color: inherit !important;
}

.wteh-nav-list i {
  background: rgba(255, 255, 255, .065);
  border: 1px solid rgba(255, 255, 255, .055);
  border-radius: 10px;
  flex-basis: 31px;
  font-size: 15px;
  height: 31px;
  width: 31px;
}

.wteh-sidebar .wteh-nav-list a:hover {
  background: rgba(255, 255, 255, .075);
  border-color: rgba(255, 255, 255, .075);
  color: #fff !important;
  transform: translateX(-2px);
}

.wteh-sidebar .wteh-nav-list a.is-active,
.wteh-sidebar .wteh-nav-list a.is-active:visited {
  background: linear-gradient(110deg, color-mix(in srgb, var(--wteh-accent) 88%, #fff), var(--wteh-accent-strong));
  border-color: rgba(255, 255, 255, .20);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--wteh-accent) 30%, transparent);
  color: #fff !important;
  transform: none;
}

.wteh-sidebar .wteh-nav-list a.is-active i {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .13);
}

.wteh-nav-badge {
  background: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, .12);
  color: #2c1c00 !important;
  font-size: 9px;
  height: 21px;
  min-width: 21px;
}

.wteh-sidebar-help {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .08);
  border-radius: 15px;
  padding: 15px;
}

.wteh-sidebar-help strong {
  font-size: 12px;
}

.wteh-sidebar-help p,
.wteh-sidebar-help a {
  font-size: 10.5px;
}

/* Main canvas, page intros and cards */
.wteh-portal-main {
  background:
    radial-gradient(circle at 4% 0, var(--wteh-accent-faint), transparent 26%),
    radial-gradient(circle at 96% 100%, rgba(20, 184, 166, .055), transparent 25%),
    var(--wteh-canvas);
  padding: clamp(24px, 3vw, 38px);
}

.wteh-page-title {
  background:
    linear-gradient(125deg, color-mix(in srgb, var(--wteh-accent) 7%, var(--wteh-surface)), var(--wteh-surface) 54%, color-mix(in srgb, #14b8a6 5%, var(--wteh-surface)));
  border: 1px solid var(--wteh-border);
  border-radius: 20px;
  box-shadow: var(--wteh-shadow-sm);
  margin-bottom: 22px;
  min-height: 112px;
  overflow: hidden;
  padding: 21px 23px;
  position: relative;
}

.wteh-page-title::after {
  background: linear-gradient(180deg, var(--wteh-accent), #14b8a6);
  border-radius: 0 4px 4px 0;
  content: "";
  inset: 19px 0 19px auto;
  position: absolute;
  width: 4px;
}

.wteh-page-title > * {
  position: relative;
  z-index: 1;
}

.wteh-page-title h1 {
  font-size: clamp(23px, 2.5vw, 30px);
  line-height: 1.45;
  margin-bottom: 4px;
}

.wteh-page-title p {
  color: var(--wteh-text-2);
  font-size: 13px;
  max-width: 760px;
}

.wteh-eyebrow {
  color: var(--wteh-accent-readable);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .02em;
}

.wteh-back-link {
  font-size: 12px;
}

.wteh-stats-grid {
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  margin-bottom: 22px;
}

.wteh-stat-card {
  background: var(--wteh-surface);
  border-color: var(--wteh-border);
  border-radius: 19px;
  box-shadow: var(--wteh-shadow-sm);
  gap: 13px;
  min-height: 112px;
  padding: 18px;
}

.wteh-stat-card::before {
  background: linear-gradient(90deg, var(--wteh-accent), #14b8a6);
  border-radius: 2px;
  height: 3px;
  inset: 0 18px auto;
  opacity: .78;
  width: auto;
}

.wteh-stat-card:hover {
  border-color: color-mix(in srgb, var(--wteh-accent) 20%, var(--wteh-border));
  box-shadow: var(--wteh-shadow-md);
  transform: translateY(-3px);
}

.wteh-stat-card > i {
  border: 1px solid currentColor;
  border-radius: 14px;
  flex-basis: 48px;
  font-size: 20px;
  height: 48px;
  opacity: .95;
}

.wteh-stat-card strong {
  color: var(--wteh-text);
  font-size: 24px;
  font-weight: 850;
}

.wteh-stat-card span {
  color: var(--wteh-text-3);
  font-size: 11px;
}

.wteh-stat-card > a {
  background: var(--wteh-surface-3);
  border-radius: 8px;
  bottom: 10px;
  color: var(--wteh-text-2);
  font-size: 10px;
  left: 11px;
  padding: 3px 8px;
}

.wteh-stat-purple > i { background: #f0efff; border-color: #ddd9ff; color: #6658e8; }
.wteh-stat-blue > i { background: #edf7ff; border-color: #d6ebfb; color: #2577bd; }
.wteh-stat-amber > i { background: #fff7e7; border-color: #f8e7bd; color: #b77400; }
.wteh-stat-red > i { background: #fff0f3; border-color: #f8d9df; color: #ca3e5a; }
.wteh-stat-green > i { background: #eaf9f3; border-color: #ccebdd; color: #18775a; }

.wteh-content-card {
  background: var(--wteh-surface);
  border-color: var(--wteh-border);
  border-radius: 20px;
  box-shadow: var(--wteh-shadow-sm);
  margin-bottom: 20px;
  padding: clamp(19px, 2.2vw, 26px);
}

.wteh-content-card:hover {
  border-color: color-mix(in srgb, var(--wteh-accent) 13%, var(--wteh-border));
  box-shadow: 0 11px 32px rgba(25, 35, 58, .065);
}

.wteh-card-heading {
  border-color: var(--wteh-border);
  margin-bottom: 18px;
  padding-bottom: 16px;
}

.wteh-card-heading h3 {
  font-size: 16px;
}

.wteh-card-heading p,
.wteh-card-heading > a {
  font-size: 11px;
}

.wteh-progress-card {
  background:
    radial-gradient(circle at 96% -20%, rgba(124, 114, 255, .50), transparent 36%),
    linear-gradient(105deg, #111a34, #27255e 62%, #214a62);
  border-radius: 19px;
  box-shadow: 0 16px 40px rgba(22, 29, 70, .16);
  padding: 21px 23px;
}

.wteh-progress-card strong {
  font-size: 13px;
}

.wteh-progress-card > div > span {
  font-size: 11px;
}

/* Forms and actions */
.wteh-field > label,
.wteh-auth-card label {
  color: var(--wteh-text-2);
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 8px;
}

.wteh-field input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
.wteh-field select,
.wteh-field textarea,
.wteh-auth-card input[type="text"],
.wteh-auth-card input[type="password"] {
  background: var(--wteh-surface);
  border-color: var(--wteh-border-strong);
  border-radius: 13px;
  color: var(--wteh-text);
  min-height: 52px;
  padding: 12px 14px;
}

.wteh-field textarea {
  min-height: 112px;
}

.wteh-field input:focus,
.wteh-field select:focus,
.wteh-field textarea:focus,
.wteh-auth-card input:focus {
  background: var(--wteh-surface);
  border-color: var(--wteh-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--wteh-accent) 13%, transparent), 0 8px 22px rgba(31, 42, 72, .055);
}

.wteh-field input[type="checkbox"],
.wteh-field input[type="radio"] {
  accent-color: var(--wteh-accent);
  height: 18px;
  min-height: 0;
  padding: 0;
  width: 18px;
}

.wteh-file-picker,
.wteh-dropzone {
  background: var(--wteh-surface-2);
  border-color: color-mix(in srgb, var(--wteh-accent) 24%, var(--wteh-border));
  border-radius: 14px;
}

.wteh-file-button {
  background: var(--wteh-accent-soft);
  border-radius: 10px;
}

.wteh-consent,
.wteh-privacy-note {
  background: linear-gradient(135deg, #eff9ff, #f3f1ff);
  border-color: #dbe8f5;
  border-radius: 14px;
  color: #3d5269;
  font-size: 12px;
}

.wteh-button {
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 750;
  min-height: 46px;
  padding: 10px 18px;
}

.wteh-button:hover {
  box-shadow: 0 12px 26px rgba(25, 34, 66, .13);
  transform: translateY(-2px);
}

.wteh-button-primary {
  background: linear-gradient(135deg, var(--wteh-accent), var(--wteh-accent-strong));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--wteh-accent) 26%, transparent);
}

.wteh-button-soft {
  background: var(--wteh-surface-3);
  border-color: var(--wteh-border);
  color: var(--wteh-text-2) !important;
}

.wteh-button-danger {
  background: #fff1f3;
  border-color: #f8d6dd;
}

.wteh-link-button {
  background: var(--wteh-accent-soft);
  border: 1px solid color-mix(in srgb, var(--wteh-accent) 14%, var(--wteh-border));
  border-radius: 9px;
  color: var(--wteh-accent-readable);
  font-size: 11px;
  padding: 6px 10px;
}

.wteh-link-button:hover {
  background: var(--wteh-accent);
  color: #fff;
}

.wteh-notice {
  border-radius: 14px;
  box-shadow: var(--wteh-shadow-sm);
  font-size: 12px;
  padding: 14px 17px;
}

.wteh-sticky-actions {
  backdrop-filter: blur(16px);
  background: color-mix(in srgb, var(--wteh-surface) 90%, transparent);
  border-color: var(--wteh-border);
  border-radius: 15px;
}

/* Data tables */
.wteh-table-wrap {
  background: var(--wteh-surface);
  border: 1px solid var(--wteh-border);
  border-radius: 15px;
  overflow: auto;
}

.wteh-table {
  border-collapse: separate;
  border-spacing: 0;
}

.wteh-table thead {
  background: var(--wteh-surface-2);
}

.wteh-table th {
  border-bottom: 1px solid var(--wteh-border);
  color: var(--wteh-text-3);
  font-size: 11.5px;
  letter-spacing: .01em;
  padding: 13px 14px;
}

.wteh-table td {
  border-color: var(--wteh-border);
  color: var(--wteh-text-2);
  font-size: 12.5px;
  padding: 14px;
}

.wteh-table tbody tr:not(.wteh-report-date-row) {
  transition: background .16s ease;
}

.wteh-table tbody tr:not(.wteh-report-date-row):hover td {
  background: color-mix(in srgb, var(--wteh-accent) 3.5%, var(--wteh-surface));
}

.wteh-table td strong {
  color: var(--wteh-text);
  font-weight: 750;
}

.wteh-table td small {
  color: var(--wteh-text-3);
  font-size: 10.5px;
}

.wteh-status,
.wteh-priority,
.wteh-training-category,
.wteh-required-badge,
.wteh-published-badge,
.wteh-security-badge {
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1.5;
  padding: 5px 9px;
}

.wteh-status-new,
.wteh-status-submitted,
.wteh-status-pending,
.wteh-status-sent,
.wteh-priority-high { border-color: #f0ddb1; }
.wteh-status-reviewing,
.wteh-status-interview,
.wteh-status-acknowledged,
.wteh-status-in_progress,
.wteh-status-published,
.wteh-priority-normal { border-color: #cfe4f6; }
.wteh-status-accepted,
.wteh-status-hired,
.wteh-status-reviewed,
.wteh-status-approved,
.wteh-status-completed { border-color: #cbe8dc; }
.wteh-status-rejected,
.wteh-status-needs_revision,
.wteh-status-declined,
.wteh-status-blocked,
.wteh-status-archived,
.wteh-priority-urgent { border-color: #f2ccd4; }

.wteh-status-draft,
.wteh-status-cancelled,
.wteh-priority-low {
  color: #556073;
}

.wteh-report-date-row td {
  background: linear-gradient(90deg, var(--wteh-accent-soft), var(--wteh-surface-2));
  color: var(--wteh-accent-readable);
  font-size: 11px;
  padding: 9px 14px;
}

.wteh-pagination .page-numbers {
  background: var(--wteh-surface);
  border-color: var(--wteh-border);
  border-radius: 10px;
  color: var(--wteh-text-2);
  font-size: 11px;
  min-width: 38px;
  padding: 7px 10px;
}

/* Task, training and directory cards */
.wteh-task-grid,
.wteh-training-grid,
.wteh-employee-grid {
  gap: 14px;
}

.wteh-task-card,
.wteh-training-card,
.wteh-employee-card {
  background: var(--wteh-surface);
  border-color: var(--wteh-border);
  border-radius: 18px;
  box-shadow: var(--wteh-shadow-sm);
  padding: 19px;
}

.wteh-task-card:hover,
.wteh-training-card:hover,
.wteh-employee-card:hover {
  border-color: color-mix(in srgb, var(--wteh-accent) 28%, var(--wteh-border));
  box-shadow: var(--wteh-shadow-md);
  transform: translateY(-3px);
}

.wteh-task-card h3,
.wteh-training-card h3 {
  color: var(--wteh-text);
  font-size: 16px;
}

.wteh-task-card p,
.wteh-training-card p {
  color: var(--wteh-text-2);
  font-size: 12px;
}

.wteh-task-meta {
  border-color: var(--wteh-border);
  color: var(--wteh-text-3);
  font-size: 10.5px;
}

.wteh-task-card.is-overdue {
  border-color: #edb8c2;
  box-shadow: inset -4px 0 #d94c66, var(--wteh-shadow-sm);
}

.wteh-employee-card strong {
  color: var(--wteh-text);
  font-size: 13px;
}

.wteh-employee-card span,
.wteh-employee-card small {
  color: var(--wteh-text-2);
  font-size: 11px;
}

.wteh-training-content {
  color: var(--wteh-text-2);
  font-size: 14px;
  line-height: 2.15;
}

.wteh-training-note {
  background: var(--wteh-surface-2);
  border-color: color-mix(in srgb, var(--wteh-accent) 15%, var(--wteh-border));
  border-radius: 12px;
}

.wteh-training-note-preview,
.wteh-training-note-full {
  color: var(--wteh-text-2);
  font-size: 11.5px;
}

.wteh-training-note-full {
  background: var(--wteh-surface);
  border-color: var(--wteh-border);
}

.wteh-filter-form,
.wteh-report-filter {
  background: var(--wteh-surface);
  border: 1px solid var(--wteh-border);
  border-radius: 17px;
  box-shadow: var(--wteh-shadow-sm);
  margin-bottom: 18px;
  padding: 16px;
}

.wteh-filter-pills {
  margin-top: 0;
}

.wteh-filter-pills a {
  background: var(--wteh-surface);
  border-color: var(--wteh-border);
  color: var(--wteh-text-2);
  font-size: 11px;
  padding: 6px 12px;
}

/* Details, documents, modals and contracts */
.wteh-readonly-grid {
  gap: 8px;
}

.wteh-readonly-grid > div,
.wteh-detail-grid > div {
  background: var(--wteh-surface-2);
  border: 1px solid var(--wteh-border);
  border-radius: 11px !important;
}

.wteh-readonly-grid span,
.wteh-detail-grid span {
  color: var(--wteh-text-3);
  font-size: 10px;
}

.wteh-readonly-grid strong,
.wteh-detail-grid strong {
  color: var(--wteh-text);
  font-size: 11.5px;
}

.wteh-detail-section {
  border-color: var(--wteh-border);
}

.wteh-detail-section h4 {
  font-size: 12px;
}

.wteh-detail-section p {
  color: var(--wteh-text-2);
  font-size: 12px;
}

.wteh-document-item {
  background: var(--wteh-surface-2);
  border-color: var(--wteh-border);
  border-radius: 13px;
  padding: 12px;
}

.wteh-document-item strong {
  color: var(--wteh-text);
  font-size: 12px;
}

.wteh-document-item span,
.wteh-document-item > a {
  font-size: 10.5px;
}

.wteh-empty {
  color: var(--wteh-text-3);
}

.wteh-empty-icon {
  background: var(--wteh-accent-soft);
  border: 1px solid color-mix(in srgb, var(--wteh-accent) 15%, var(--wteh-border));
}

.wteh-empty h3 {
  font-size: 15px;
}

.wteh-empty p {
  font-size: 12px;
}

.wteh-modal-backdrop {
  backdrop-filter: blur(5px);
  background: rgba(7, 12, 25, .62);
}

.wteh-modal-panel {
  background: var(--wteh-surface);
  border: 1px solid var(--wteh-border);
  border-radius: 22px;
  box-shadow: 0 32px 100px rgba(3, 8, 24, .34);
  padding: 30px;
}

.wteh-modal-close {
  background: var(--wteh-surface-3);
  color: var(--wteh-text-2);
}

.wteh-contract-paper {
  background: var(--wteh-surface);
  border-color: var(--wteh-border);
  border-radius: 22px;
  box-shadow: var(--wteh-shadow-md);
}

.wteh-contract-paper > header {
  background: linear-gradient(115deg, var(--wteh-surface-2), var(--wteh-accent-soft));
  border-color: var(--wteh-border);
}

.wteh-contract-paper > header h2,
.wteh-contract-meta strong {
  color: var(--wteh-text);
}

.wteh-contract-paper > header > b,
.wteh-contract-meta > span,
.wteh-contract-paper > footer span,
.wteh-contract-paper > footer code {
  color: var(--wteh-text-3);
}

.wteh-contract-meta,
.wteh-contract-paper > footer {
  background: var(--wteh-surface-2);
  border-color: var(--wteh-border);
}

.wteh-contract-content {
  color: var(--wteh-text-2);
  font-size: 14px;
}

.wteh-signature-wrap,
.wteh-contract-disclosure > summary {
  background: var(--wteh-surface-2);
  border-color: var(--wteh-border);
}

.wteh-signature-pad {
  background: var(--wteh-surface);
  border-color: var(--wteh-border-strong);
}

/* Notification center */
.wteh-notification-popover {
  background: var(--wteh-surface);
  border-color: var(--wteh-border);
  border-radius: 18px;
  box-shadow: 0 26px 75px rgba(9, 14, 34, .22);
  width: min(410px, calc(100vw - 24px));
}

.wteh-notification-popover > header,
.wteh-notification-mark-all {
  background: var(--wteh-surface-2);
  border-color: var(--wteh-border);
}

.wteh-notification-popover > header strong,
.wteh-notification-mini-list > a strong {
  color: var(--wteh-text);
  font-size: 11.5px;
}

.wteh-notification-popover > header small,
.wteh-notification-mini-list > a small {
  color: var(--wteh-text-3);
  font-size: 9.5px;
}

.wteh-notification-mini-list > a {
  border-color: var(--wteh-border);
  color: var(--wteh-text-2);
  padding: 13px 15px;
}

.wteh-notification-mini-list > a:hover {
  background: var(--wteh-surface-2);
}

.wteh-notification-mini-list > a.is-unread {
  background: var(--wteh-accent-soft);
}

.wteh-notification-summary {
  background:
    radial-gradient(circle at 92% -10%, rgba(124, 114, 255, .45), transparent 40%),
    linear-gradient(135deg, #111a34, #28255e);
  border-radius: 19px;
  padding: 17px 19px;
}

.wteh-notification-card {
  background: var(--wteh-surface);
  border-color: var(--wteh-border);
  border-radius: 17px;
  box-shadow: var(--wteh-shadow-sm);
  padding: 17px;
}

.wteh-notification-card.is-unread {
  background: linear-gradient(100deg, var(--wteh-accent-soft), var(--wteh-surface));
  border-color: color-mix(in srgb, var(--wteh-accent) 24%, var(--wteh-border));
}

.wteh-notification-icon {
  border-radius: 13px;
  height: 44px;
}

.wteh-notification-copy h3 {
  color: var(--wteh-text);
  font-size: 14px;
}

.wteh-notification-copy p {
  color: var(--wteh-text-2);
  font-size: 11.5px;
}

.wteh-notification-copy > small {
  color: var(--wteh-text-3);
  font-size: 9.5px;
}

/* Work calendar and leave awareness */
.wteh-day-status {
  align-items: center;
  background: linear-gradient(120deg, #eefaf5, #f7fcfa);
  border: 1px solid #cce9dc;
  border-radius: 16px;
  color: #215b49;
  display: flex;
  gap: 13px;
  margin: 0 0 20px;
  padding: 14px 16px;
}

.wteh-day-status.is-holiday,
.wteh-day-status.is-friday {
  background: linear-gradient(120deg, #fff8e8, #fffdf7);
  border-color: #ecdcae;
  color: #684d12;
}

.wteh-day-status > i {
  align-items: center;
  background: rgba(255, 255, 255, .78);
  border: 1px solid currentColor;
  border-radius: 12px;
  display: flex;
  flex: 0 0 42px;
  font-style: normal;
  height: 42px;
  justify-content: center;
}

.wteh-day-status > div {
  min-width: 0;
}

.wteh-day-status strong,
.wteh-day-status span {
  color: inherit;
  display: block;
}

.wteh-day-status strong {
  font-size: 12.5px;
  font-weight: 850;
}

.wteh-day-status span {
  font-size: 11px;
  line-height: 1.85;
  margin-top: 2px;
}

.wteh-day-status > b {
  background: rgba(255, 255, 255, .72);
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  flex: 0 0 auto;
  font-size: 9.5px;
  padding: 5px 9px;
}

.wteh-leave-reports {
  padding: 0;
}

.wteh-leave-reports > summary {
  color: #21664f;
  cursor: pointer;
  font-size: 11px;
  font-weight: 850;
  padding: 15px 18px;
}

.wteh-leave-reports > div {
  border-top: 1px solid var(--wteh-border);
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 14px 18px 18px;
}

.wteh-leave-reports span {
  background: #ebf9f3;
  border: 1px solid #ccebdd;
  border-radius: 20px;
  color: #21664f;
  font-size: 10px;
  padding: 5px 9px;
}

/* Contrast hardening for inherited legacy components */
.wteh-shell .wteh-card-heading p,
.wteh-shell .wteh-card-heading > a,
.wteh-shell .wteh-secure-note,
.wteh-shell .wteh-file-name,
.wteh-shell .wteh-muted-label,
.wteh-shell .wteh-signature-head span,
.wteh-shell .wteh-contract-disclosure > summary small,
.wteh-shell .wteh-notification-day,
.wteh-shell .wteh-document-item span {
  color: var(--wteh-text-3);
}

.wteh-shell .wteh-card-heading > a,
.wteh-shell .wteh-back-link,
.wteh-shell .wteh-filter-pills a.is-active {
  font-weight: 750;
}

.wteh-shell .wteh-card-heading > a,
.wteh-shell .wteh-back-link,
.wteh-shell .wteh-training-note-action,
.wteh-shell .wteh-document-item > a {
  color: var(--wteh-accent-readable);
}

.wteh-shell .wteh-field label small,
.wteh-shell input::placeholder,
.wteh-shell textarea::placeholder {
  color: var(--wteh-text-3);
  opacity: 1;
}

.wteh-shell select option {
  background: var(--wteh-surface);
  color: var(--wteh-text);
}

/* Dark mode */
.wteh-theme-dark body.wteh-webapp-body {
  background: #080d18 !important;
  color: #e7ecf6;
}

.wteh-theme-dark .wteh-webapp-background {
  background:
    radial-gradient(circle at 5% 0, rgba(100, 86, 255, .24), transparent 32%),
    radial-gradient(circle at 96% 96%, rgba(12, 175, 155, .13), transparent 30%),
    linear-gradient(145deg, #080d18, #0d1423 54%, #101828);
}

.wteh-theme-dark .wteh-webapp-grid {
  background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
}

.wteh-theme-dark .wteh-shell {
  --wteh-accent-soft: color-mix(in srgb, var(--wteh-accent) 18%, #151c2c);
  --wteh-accent-faint: color-mix(in srgb, var(--wteh-accent) 10%, transparent);
  --wteh-surface: #151c2b;
  --wteh-surface-2: #192233;
  --wteh-surface-3: #202a3d;
  --wteh-canvas: #0f1624;
  --wteh-text: #eef2f9;
  --wteh-text-2: #d0d8e6;
  --wteh-text-3: #adb9cb;
  --wteh-accent-readable: #bbb4ff;
  --wteh-border: #273247;
  --wteh-border-strong: #354159;
  --wteh-shadow-sm: 0 7px 24px rgba(0, 0, 0, .16);
  --wteh-shadow-md: 0 18px 48px rgba(0, 0, 0, .24);
  --wteh-shadow-lg: 0 30px 90px rgba(0, 0, 0, .38);
}

.wteh-theme-dark .wteh-portal,
.wteh-theme-dark .wteh-application-shell,
.wteh-theme-dark .wteh-auth-shell {
  border-color: rgba(255, 255, 255, .07);
}

.wteh-theme-dark .wteh-portal-header {
  background: rgba(16, 23, 37, .92);
}

.wteh-theme-dark .wteh-live-badge {
  background: rgba(20, 184, 166, .10);
  border-color: rgba(52, 211, 153, .16);
  color: #75dfc7;
}

.wteh-theme-dark .wteh-user-chip > a:hover {
  background: rgba(244, 63, 94, .11);
  color: #fb7185;
}

.wteh-theme-dark .wteh-stat-purple > i { background: rgba(109, 93, 252, .14); border-color: rgba(141, 130, 255, .22); color: #a9a0ff; }
.wteh-theme-dark .wteh-stat-blue > i { background: rgba(49, 156, 255, .12); border-color: rgba(96, 184, 255, .20); color: #75bdff; }
.wteh-theme-dark .wteh-stat-amber > i { background: rgba(245, 158, 11, .12); border-color: rgba(251, 191, 36, .20); color: #f9c45d; }
.wteh-theme-dark .wteh-stat-red > i { background: rgba(244, 63, 94, .12); border-color: rgba(251, 113, 133, .20); color: #fb899c; }
.wteh-theme-dark .wteh-stat-green > i { background: rgba(16, 185, 129, .12); border-color: rgba(52, 211, 153, .20); color: #79dfbd; }

.wteh-theme-dark .wteh-consent,
.wteh-theme-dark .wteh-privacy-note,
.wteh-theme-dark .wteh-feedback-box,
.wteh-theme-dark .wteh-signature-evidence,
.wteh-theme-dark .wteh-sensitive-card {
  background: linear-gradient(135deg, #172638, #211f3a);
  border-color: #304056;
  color: var(--wteh-text-2);
}

.wteh-theme-dark .wteh-button-danger {
  background: rgba(244, 63, 94, .10);
  border-color: rgba(251, 113, 133, .20);
  color: #fb899c !important;
}

.wteh-theme-dark .wteh-status-new,
.wteh-theme-dark .wteh-status-submitted,
.wteh-theme-dark .wteh-status-pending,
.wteh-theme-dark .wteh-status-sent,
.wteh-theme-dark .wteh-priority-high,
.wteh-theme-dark .wteh-required-badge { background: rgba(245, 158, 11, .12); border-color: rgba(251, 191, 36, .18); color: #f5c66a; }
.wteh-theme-dark .wteh-status-reviewing,
.wteh-theme-dark .wteh-status-interview,
.wteh-theme-dark .wteh-status-acknowledged,
.wteh-theme-dark .wteh-status-in_progress,
.wteh-theme-dark .wteh-status-published,
.wteh-theme-dark .wteh-priority-normal { background: rgba(49, 156, 255, .12); border-color: rgba(96, 184, 255, .18); color: #79c0ff; }
.wteh-theme-dark .wteh-status-employee_signed,
.wteh-theme-dark .wteh-status-assigned,
.wteh-theme-dark .wteh-status-not_started,
.wteh-theme-dark .wteh-training-category,
.wteh-theme-dark .wteh-security-badge { background: rgba(109, 93, 252, .15); border-color: rgba(141, 130, 255, .22); color: #b2aaff; }
.wteh-theme-dark .wteh-status-accepted,
.wteh-theme-dark .wteh-status-hired,
.wteh-theme-dark .wteh-status-reviewed,
.wteh-theme-dark .wteh-status-approved,
.wteh-theme-dark .wteh-status-completed { background: rgba(16, 185, 129, .12); border-color: rgba(52, 211, 153, .18); color: #75d9b8; }
.wteh-theme-dark .wteh-status-rejected,
.wteh-theme-dark .wteh-status-needs_revision,
.wteh-theme-dark .wteh-status-declined,
.wteh-theme-dark .wteh-status-blocked,
.wteh-theme-dark .wteh-status-archived,
.wteh-theme-dark .wteh-priority-urgent { background: rgba(244, 63, 94, .12); border-color: rgba(251, 113, 133, .18); color: #fb899c; }
.wteh-theme-dark .wteh-status-draft,
.wteh-theme-dark .wteh-status-cancelled,
.wteh-theme-dark .wteh-priority-low { background: #222c3e; border-color: #334057; color: #aab5c8; }

.wteh-theme-dark .wteh-row-overdue td {
  background: rgba(244, 63, 94, .045);
}

.wteh-theme-dark .wteh-notification-mini-list > a.is-unread,
.wteh-theme-dark .wteh-notification-card.is-unread {
  box-shadow: inset -3px 0 var(--wteh-accent), var(--wteh-shadow-sm);
}

.wteh-theme-dark .wteh-auth-card {
  background: rgba(21, 28, 43, .97);
  border-color: rgba(255, 255, 255, .08);
}

.wteh-theme-dark .wteh-auth-card > p,
.wteh-theme-dark .wteh-auth-card label {
  color: var(--wteh-text-2);
}

.wteh-theme-dark .wteh-day-status {
  background: linear-gradient(120deg, #153229, #172c2a);
  border-color: #2e5b4b;
  color: #b9f1dc;
}

.wteh-theme-dark .wteh-day-status.is-holiday,
.wteh-theme-dark .wteh-day-status.is-friday {
  background: linear-gradient(120deg, #332b18, #29271d);
  border-color: #5e4e27;
  color: #f5d98b;
}

.wteh-theme-dark .wteh-day-status > i,
.wteh-theme-dark .wteh-day-status > b {
  background: rgba(10, 15, 25, .34);
}

.wteh-theme-dark .wteh-leave-reports > summary {
  color: #91e5c4;
}

.wteh-theme-dark .wteh-leave-reports span {
  background: rgba(16, 185, 129, .12);
  border-color: rgba(52, 211, 153, .22);
  color: #a5e8cf;
}

.wteh-theme-dark .wteh-missing-reports > summary {
  color: #ff9bad;
}

.wteh-theme-dark .wteh-missing-reports span {
  background: rgba(244, 63, 94, .12);
  border-color: rgba(251, 113, 133, .22);
  color: #ffadbb;
}

.wteh-theme-dark .wteh-notice-success,
.wteh-theme-dark .wteh-success-card {
  background: #153329;
  border-color: #2e5b4b;
  color: #b9f1dc;
}

.wteh-theme-dark .wteh-notice-error,
.wteh-theme-dark .wteh-signature-evidence.has-integrity-error {
  background: #351d25;
  border-color: #63303f;
  color: #ffb3c0;
}

.wteh-theme-dark .wteh-legal-note,
.wteh-theme-dark .wteh-contract-alert {
  background: #332b18;
  border-color: #5e4e27;
  color: #f5d98b;
}

.wteh-theme-dark .wteh-notification-section,
.wteh-theme-dark .wteh-evidence-tags span,
.wteh-theme-dark .wteh-published-badge {
  background: rgba(16, 185, 129, .13);
  color: #9be2c7;
}

.wteh-theme-dark .wteh-unread-dot {
  background: rgba(245, 158, 11, .14);
  color: #f5d080;
}

.wteh-theme-dark .wteh-signature-evidence p,
.wteh-theme-dark .wteh-signature-head strong,
.wteh-theme-dark .wteh-training-note-action,
.wteh-theme-dark .wteh-contract-disclosure > summary strong {
  color: var(--wteh-text-2);
}

/* Responsive portal and card-style mobile tables */
@media (max-width: 1100px) {
  .wteh-portal-layout {
    grid-template-columns: 238px minmax(0, 1fr);
  }

  .wteh-portal-main {
    padding: 26px;
  }

  .wteh-report-filter {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  body.wteh-nav-open {
    overflow: hidden !important;
  }

  .wteh-webapp-view {
    padding: 0;
  }

  .wteh-webapp-body .wteh-application-shell,
  .wteh-webapp-body .wteh-portal,
  .wteh-webapp-body .wteh-auth-shell {
    border: 0;
    border-radius: 0;
    min-height: 100svh;
  }

  .wteh-portal-header {
    min-height: 72px;
    padding: 10px 12px;
  }

  .wteh-portal-brand {
    min-width: 0;
  }

  .wteh-portal-brand .wteh-brand-mark {
    flex-basis: 42px;
    height: 42px;
  }

  .wteh-portal-brand strong {
    font-size: 13px;
  }

  .wteh-portal-brand span,
  .wteh-live-badge {
    display: none;
  }

  .wteh-header-actions {
    gap: 6px;
    margin-right: auto;
  }

  .wteh-theme-toggle,
  .wteh-header-menu,
  .wteh-notification-toggle {
    display: inline-flex;
    height: 41px;
    width: 41px;
  }

  .wteh-user-chip {
    background: transparent;
    border: 0;
    min-height: 42px;
    padding: 0;
  }

  .wteh-user-chip > span:not(.wteh-avatar),
  .wteh-user-chip > a {
    display: none;
  }

  .wteh-avatar {
    flex-basis: 38px;
    height: 38px;
  }

  .wteh-portal-layout {
    display: block;
    min-height: 0;
  }

  .wteh-sidebar {
    border: 0;
    bottom: 0;
    box-shadow: -22px 0 70px rgba(0, 0, 0, .34);
    display: flex;
    height: 100svh;
    max-height: 100svh;
    max-width: 330px;
    min-height: 0;
    overscroll-behavior: contain;
    overflow-y: auto;
    padding: 14px;
    position: fixed;
    right: 0;
    top: 0;
    transform: translateX(108%);
    transition: transform .28s cubic-bezier(.22, .8, .28, 1);
    width: min(86vw, 330px);
    z-index: 1002;
  }

  .wteh-portal.is-nav-open .wteh-sidebar {
    transform: translateX(0);
  }

  .wteh-mobile-nav-toggle {
    align-items: center;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    color: #fff;
    display: flex;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 750;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 10px 12px;
    width: 100%;
  }

  .wteh-mobile-nav-toggle span {
    color: #fff !important;
    font-size: 22px;
    line-height: 1;
  }

  .wteh-nav-list,
  .wteh-sidebar.is-open .wteh-nav-list {
    display: flex;
    padding-top: 0;
  }

  .wteh-sidebar-help {
    display: block;
  }

  .wteh-nav-backdrop {
    background: rgba(4, 8, 18, .58);
    border: 0;
    display: block;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity .22s ease;
    visibility: hidden;
    z-index: 1001;
  }

  .wteh-portal.is-nav-open .wteh-nav-backdrop {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  .wteh-portal-main {
    padding: 18px 12px 32px;
  }

  .wteh-page-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    padding: 18px;
  }

  .wteh-page-title .wteh-button {
    width: 100%;
  }

  .wteh-page-title h1 {
    font-size: 22px;
  }

  .wteh-grid-2,
  .wteh-grid-3,
  .wteh-docs-layout,
  .wteh-detail-layout,
  .wteh-employee-grid,
  .wteh-task-grid,
  .wteh-training-grid,
  .wteh-filter-form,
  .wteh-report-filter {
    grid-template-columns: 1fr;
  }

  .wteh-report-filter .wteh-submit-row {
    grid-column: auto;
  }

  .wteh-detail-layout aside,
  .wteh-upload-card {
    position: static;
  }

  .wteh-notification-popover {
    left: 10px;
    max-height: calc(100svh - 82px);
    position: fixed;
    right: 10px;
    top: 72px;
    width: auto;
  }
}

@media (max-width: 640px) {
  .wteh-hero {
    padding: 36px 20px;
  }

  .wteh-application-form {
    padding: 20px 12px 34px;
  }

  .wteh-application-form .wteh-form-section,
  .wteh-content-card {
    border-radius: 16px;
    padding: 17px;
  }

  .wteh-stats-grid {
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wteh-stat-card {
    align-items: flex-start;
    flex-direction: column;
    min-height: 128px;
    padding: 15px;
  }

  .wteh-stat-card > i {
    flex-basis: 40px;
    height: 40px;
    width: 40px;
  }

  .wteh-stat-card strong {
    font-size: 20px;
  }

  .wteh-progress-card {
    grid-template-columns: 1fr 42px;
  }

  .wteh-progress-card .wteh-progress {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .wteh-table-wrap {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  .wteh-table,
  .wteh-table tbody,
  .wteh-table tr,
  .wteh-table td {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .wteh-table thead {
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
  }

  .wteh-table tbody tr:not(.wteh-report-date-row) {
    background: var(--wteh-surface);
    border: 1px solid var(--wteh-border);
    border-radius: 15px;
    box-shadow: var(--wteh-shadow-sm);
    margin-bottom: 11px;
    overflow: hidden;
  }

  .wteh-table td {
    align-items: start;
    border: 0;
    border-bottom: 1px solid var(--wteh-border);
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(88px, 35%) minmax(0, 1fr);
    padding: 11px 13px;
    text-align: right;
  }

  .wteh-table td:last-child {
    border-bottom: 0;
  }

  .wteh-table td::before {
    color: var(--wteh-text-3);
    content: attr(data-label);
    font-size: 10.5px;
    font-weight: 750;
  }

  .wteh-table td[data-label=""] {
    display: block;
  }

  .wteh-table td[data-label=""]::before {
    display: none;
  }

  .wteh-table .wteh-report-date-row {
    margin: 17px 0 8px;
  }

  .wteh-table .wteh-report-date-row td {
    border: 1px solid color-mix(in srgb, var(--wteh-accent) 14%, var(--wteh-border));
    border-radius: 11px;
    display: block;
  }

  .wteh-notification-card {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 14px;
  }

  .wteh-notification-actions {
    align-items: stretch;
    flex-direction: row;
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .wteh-notification-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .wteh-notification-summary nav {
    width: 100%;
  }

  .wteh-notification-summary nav a {
	flex: 1;
	text-align: center;
  }

  .wteh-day-status {
	align-items: flex-start;
	flex-wrap: wrap;
  }

  .wteh-day-status > div {
	flex: 1 1 calc(100% - 58px);
  }

  .wteh-day-status > b {
	margin-right: 55px;
  }

  .wteh-modal {
    padding: 0;
  }

  .wteh-modal-panel {
    border-radius: 20px 20px 0 0;
    bottom: 0;
    max-height: 91svh;
    padding: 26px 16px;
    position: absolute;
  }

  .wteh-contract-content {
    padding: 24px 18px 30px;
    text-align: right;
  }
}

@media (max-width: 410px) {
  .wteh-portal-brand div:last-child {
    display: none;
  }

  .wteh-stats-grid {
    grid-template-columns: 1fr;
  }

  .wteh-stat-card {
    align-items: center;
    flex-direction: row;
    min-height: 92px;
  }

  .wteh-submit-row .wteh-button {
    width: 100%;
  }

  .wteh-auth-card {
    padding: 28px 18px;
  }
}

@media print {
  .wteh-theme-toggle,
  .wteh-header-menu,
  .wteh-nav-backdrop {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wteh-sidebar,
  .wteh-nav-backdrop {
    transition: none !important;
  }
}