@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap");

:root {
  --blue: #3153ee;
  --blue-soft: #617af8;
  --page: #f2f4f8;
  --card: #ffffff;
  --line: #dbe3f3;
  --text: #526384;
  --muted: #94a2bb;
  --header: #b9c3d6;
  --green: #dff9eb;
  --green-text: #06a664;
  --yellow: #fbf7d7;
  --yellow-text: #9b8b00;
  --red: #fae6e1;
  --red-text: #b95545;
  --cyan: #d9f6f8;
  --cyan-text: #058795;
  --lavender: #e7ebff;
  --lavender-text: #3153ee;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: var(--page);
  font-family: "Cairo", "DIN Next LT Arabic", "Tahoma", "Arial", sans-serif;
  font-size: 14px;
  letter-spacing: 0;
}

body.dark-mode {
  --page: #111827;
  --card: #182235;
  --line: #334155;
  --text: #cbd5e1;
  --header: #7787a1;
  background: var(--page);
}

body.dark-mode .hero,
body.dark-mode .sidebar {
  filter: brightness(0.88);
}

body.dark-mode .field,
body.dark-mode .table-panel,
body.dark-mode .tasks-title-card,
body.dark-mode .create-title-card,
body.dark-mode .create-card,
body.dark-mode .profile-menu,
body.dark-mode .profile-menu-item,
body.dark-mode .drawer-title-card,
body.dark-mode .drawer-card,
body.dark-mode .task-drawer-title,
body.dark-mode .task-form-card {
  background: var(--card);
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode .smart-select-trigger {
  background: #0f172a;
  color: #d7deeb;
  border-color: var(--line);
}

body.dark-mode .table-wrap,
body.dark-mode .tasks-footer,
body.dark-mode .requests-footer {
  border-color: #2a3850;
}

body.dark-mode thead th {
  background: #182235;
  color: #8fa0bb;
}

body.dark-mode tbody tr:nth-child(odd) {
  background: #151f31;
}

body.dark-mode tbody tr:nth-child(even) {
  background: #111a2a;
}

body.dark-mode tbody tr.selected-row {
  background: #5870ed;
}

body.dark-mode td {
  color: #d7deeb;
}

body.dark-mode .tasks-footer,
body.dark-mode .requests-footer {
  background: #182235;
  color: #9aa8bf;
}

body.dark-mode .pagination button,
body.dark-mode .refresh-button,
body.dark-mode .icon-action,
body.dark-mode .ghost-button {
  background: #111a2a;
  border-color: #2a3850;
  color: #d7deeb;
}

body.dark-mode .pagination button.active {
  background: #3158ee;
  border-color: #5874ff;
  color: #fff;
}

.toast-stack {
  position: fixed;
  top: 20px;
  z-index: 120;
  display: grid;
  gap: 10px;
  width: min(400px, calc(100vw - 32px));
  pointer-events: none;
}

body[data-lang="ar"] .toast-stack {
  right: 18px;
}

body[data-lang="en"] .toast-stack {
  left: 18px;
}

.toast {
  min-height: 76px;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(32, 45, 76, 0.18);
  display: grid;
  grid-template-columns: 34px 1fr 24px;
  gap: 12px;
  align-items: center;
  padding: 13px 12px 13px 18px;
  border-inline-start: 4px solid #2ecc71;
  pointer-events: auto;
  animation: toast-in 0.18s ease-out;
}

.toast[data-type="error"] {
  border-inline-start-color: #e33135;
}

.toast[data-type="warning"] {
  border-inline-start-color: #f2b824;
}

.toast[data-type="info"] {
  border-inline-start-color: #3153ee;
}

.toast-icon {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #2ecc71;
  border: 2px solid currentColor;
}

.toast-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.toast[data-type="error"] .toast-icon {
  color: #e33135;
}

.toast[data-type="warning"] .toast-icon {
  color: #f2b824;
}

.toast[data-type="info"] .toast-icon {
  color: #3153ee;
}

.toast-content {
  min-width: 0;
}

.toast-title {
  margin: 0 0 2px;
  color: #273754;
  font-size: 13px;
  font-weight: 800;
}

.toast-message {
  margin: 0;
  color: #66738d;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.toast-close {
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: #9aa6bb;
  cursor: pointer;
  font-size: 18px;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

.boot-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(130deg, rgba(43, 201, 144, 0.92), rgba(30, 181, 236, 0.94)),
    #f2f4f8;
}

.boot-card {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 25px 70px rgba(21, 48, 111, 0.2);
  position: relative;
  overflow: hidden;
}

.boot-card::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(49, 83, 238, 0.09), rgba(43, 201, 144, 0.08));
}

.boot-hourglass {
  width: 42px;
  height: 42px;
  color: #3153ee;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: relative;
  z-index: 1;
  animation: boot-hourglass-flip 1.8s ease-in-out infinite;
}

.boot-hourglass path:last-child {
  stroke: #16a889;
  stroke-width: 2.4;
  animation: boot-hourglass-sand 1.8s ease-in-out infinite;
  transform-origin: center;
}

@keyframes boot-hourglass-flip {
  0%, 42% {
    transform: rotate(0);
  }
  58%, 100% {
    transform: rotate(180deg);
  }
}

@keyframes boot-hourglass-sand {
  0%, 100% {
    opacity: 0.45;
    transform: scaleY(0.7);
  }
  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(130deg, rgba(43, 201, 144, 0.92), rgba(30, 181, 236, 0.94)),
    #f2f4f8;
}

.auth-card {
  width: min(410px, 100%);
  border-radius: 14px;
  background: #fff;
  padding: 30px;
  box-shadow: 0 25px 70px rgba(21, 48, 111, 0.23);
  color: #526384;
}

.auth-logo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--blue);
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  margin-bottom: 20px;
}

.auth-logo.has-logo {
  color: transparent;
}

.auth-card h1 {
  margin: 0;
  color: #273754;
  font-size: 28px;
}

.auth-card p {
  margin: 8px 0 24px;
  color: #77839a;
  font-weight: 700;
}

.auth-card label {
  display: block;
  margin-bottom: 14px;
}

.auth-card label span {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
}

.auth-card input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 13px;
  outline: none;
}

.auth-card input:focus {
  border-color: #8da1f8;
  box-shadow: 0 0 0 3px rgba(49, 83, 238, 0.1);
}

.auth-submit {
  width: 100%;
  height: 42px;
  margin-top: 8px;
}

.auth-message {
  min-height: 20px;
  margin-top: 14px;
  color: #63728e;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.auth-message[data-type="error"] {
  color: #b95545;
}

.auth-message[data-type="success"] {
  color: #06a664;
}

.auth-switch {
  width: 100%;
  border: 0;
  background: transparent;
  color: #3153ee;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  margin-top: 8px;
  padding: 4px 0;
}

button,
input,
select {
  font: inherit;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 10;
  width: 76px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 140px),
    linear-gradient(180deg, #3153f4 0%, #2345de 58%, #1732b3 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 0 20px;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 12px 35px rgba(18, 38, 140, 0.22);
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background:
    radial-gradient(circle at 70% 35%, #fff 0 18%, transparent 19%),
    conic-gradient(from 18deg, #fff, #dfe6ff, #fff, #cbd8ff, #fff);
  display: grid;
  place-items: center;
  color: var(--blue);
  font-weight: 800;
  font-size: 10px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(7, 24, 96, 0.24), 0 0 0 6px rgba(255, 255, 255, 0.1);
  cursor: pointer;
  padding: 0;
  transition: 0.18s ease;
}

.brand-mark:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(7, 24, 96, 0.3), 0 0 0 7px rgba(255, 255, 255, 0.13);
}

.profile-menu {
  position: absolute;
  top: 22px;
  z-index: 80;
  width: 258px;
  border-radius: 0 12px 12px 0;
  background: #fff;
  box-shadow: 0 17px 45px rgba(31, 43, 76, 0.14);
  overflow: hidden;
  color: #6a7893;
}

body[data-lang="en"] .profile-menu {
  left: 76px;
  right: auto;
  border-radius: 0 12px 12px 0;
}

body[data-lang="ar"] .profile-menu {
  right: 76px;
  left: auto;
  border-radius: 12px 0 0 12px;
}

.profile-head {
  height: 92px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid #edf1f7;
  direction: ltr;
}

.profile-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--blue);
  font-size: 10px;
  font-weight: 900;
  background:
    radial-gradient(circle at 70% 35%, #fff 0 18%, transparent 19%),
    conic-gradient(from 18deg, #fff, #dfe6ff, #fff, #cbd8ff, #fff);
  box-shadow: 0 0 0 1px rgba(49, 83, 238, 0.12);
}

.profile-head p {
  margin: 0 0 4px;
  color: #25324d;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-head strong {
  display: block;
  color: #8995a9;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-menu-item {
  width: 100%;
  height: 58px;
  border: 0;
  border-bottom: 1px solid #edf1f7;
  background: #fff;
  color: #6d7b95;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 21px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
}

.profile-menu-item:last-child {
  border-bottom: 0;
}

.profile-menu-item:hover {
  background: #f6f8fb;
}

.profile-menu-item svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #9aa8be;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-language-item {
  height: 62px;
  cursor: default;
}

.profile-language-item span {
  flex: 1;
}

.profile-menu .language-select {
  width: 96px;
  height: 34px;
  border: 1px solid #d7e1f0;
  border-radius: 7px;
  background: #f5f7fc;
  color: var(--blue);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 800;
  outline: none;
  cursor: pointer;
}

.side-nav {
  width: 100%;
  display: grid;
  gap: 12px;
  margin-top: 192px;
  place-items: center;
  position: relative;
}

.side-nav::before,
.side-nav::after {
  content: "";
  width: 30px;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  margin: 4px 0;
}

.side-nav::after {
  margin-top: 8px;
}

.nav-button {
  position: relative;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: 0.18s ease;
}

.nav-button:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transform: translateY(-1px);
}

.nav-button.active {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  box-shadow: 0 12px 24px rgba(9, 21, 83, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
}

.nav-button.active::before {
  content: "";
  position: absolute;
  top: 11px;
  width: 4px;
  height: 24px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
}

body[data-lang="en"] .nav-button.active::before {
  left: -15px;
}

body[data-lang="ar"] .nav-button.active::before {
  right: -15px;
}

.nav-button::after {
  content: attr(data-nav-label);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  min-width: max-content;
  max-width: 180px;
  border-radius: 8px;
  background: #101a33;
  color: #fff;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: 0.16s ease;
}

body[data-lang="en"] .nav-button::after {
  left: calc(100% + 12px);
}

body[data-lang="ar"] .nav-button::after {
  right: calc(100% + 12px);
}

.nav-button:hover::after {
  opacity: 1;
}

.nav-button.bottom {
  margin-top: auto;
  background: rgba(255, 255, 255, 0.08);
}

.nav-button svg,
.primary-button svg,
.ghost-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-shell {
  min-height: 100vh;
  margin-left: 76px;
  padding: 16px 28px 0 15px;
}

body[data-lang="ar"] .sidebar {
  inset: 0 0 0 auto;
}

body[data-lang="ar"] .app-shell {
  margin-left: 0;
  margin-right: 76px;
  padding: 16px 15px 0 28px;
}

body[data-lang="en"] .sidebar {
  inset: 0 auto 0 0;
}

body[data-lang="en"] .app-shell {
  margin-left: 76px;
  margin-right: 0;
  padding: 16px 28px 0 15px;
}

.hero {
  position: relative;
  height: 172px;
  border-radius: 14px;
  background: linear-gradient(106deg, #2bc990 0%, #1eb5ec 72%, #45d3e8 100%);
  box-shadow: 0 9px 18px rgba(73, 92, 129, 0.17);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 47px;
}

body[data-lang="ar"] .hero {
  direction: rtl;
  text-align: right;
}

body[data-lang="en"] .hero {
  direction: ltr;
  text-align: left;
}

.user-menu {
  position: absolute;
  top: 22px;
  left: 24px;
  display: none;
  align-items: center;
  gap: 10px;
  direction: ltr;
}

body[data-lang="ar"] .user-menu {
  left: 24px;
  right: auto;
}

body[data-lang="en"] .user-menu {
  right: 24px;
  left: auto;
}

.user-menu span {
  max-width: 240px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.language-select {
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: #f2f4fb;
  color: #0c36ca;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
  outline: none;
  cursor: pointer;
}

.config-notice {
  margin-top: 16px;
  border: 1px solid #f6e7a8;
  border-radius: 8px;
  background: #fff9dc;
  color: #8a7411;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  direction: rtl;
}

.hero p {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
}

.hero h1 {
  margin: 0;
  font-size: 31px;
  line-height: 1.2;
  font-weight: 800;
}

.filters {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
  gap: 9px;
  margin-top: 16px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  margin-top: 18px;
}

.summary-card {
  min-height: 92px;
  border-radius: 11px;
  background: var(--card);
  padding: 18px 20px;
  box-shadow: 0 10px 30px rgba(43, 54, 85, 0.04);
}

.summary-card span {
  display: block;
  color: #63728e;
  font-size: 11px;
  font-weight: 800;
}

.summary-card strong {
  display: block;
  margin-top: 12px;
  color: #18233a;
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
}

.dashboard-view {
  display: flex;
  flex-direction: column;
  padding-bottom: 28px;
}

.dashboard-view > .tasks-title-card { order: 0; }
.dashboard-view > .dashboard-kpis { order: 1; }
.dashboard-view > .dashboard-filters-toggle { order: 2; }
.dashboard-view > .dashboard-controls { order: 3; }
.dashboard-view > .dashboard-grid { order: 4; }

.dashboard-filters-toggle {
  align-self: flex-start;
  margin-top: 20px;
  padding: 10px 16px;
  border: 1px solid #dbe3f2;
  border-radius: 10px;
  background: var(--card);
  color: #3158ee;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.dashboard-filters-toggle span { margin-inline-start: 8px; }
.dashboard-controls.collapsed { display: none; }

.dashboard-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.dashboard-controls .field {
  grid-column: auto;
}

.dashboard-reset {
  align-self: end;
  height: 41px;
}

.dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  margin-top: 18px;
}

.dashboard-kpi,
.dashboard-card {
  border-radius: 11px;
  background: var(--card);
  box-shadow: 0 10px 30px rgba(43, 54, 85, 0.04);
}

.dashboard-kpi {
  min-height: 118px;
  padding: 19px 20px;
}

.dashboard-kpi span {
  display: block;
  color: #6f7d98;
  font-size: 13px;
  font-weight: 800;
}

.dashboard-kpi strong {
  display: block;
  margin-top: 18px;
  color: #172136;
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 15px;
  margin-top: 20px;
}

.dashboard-card {
  min-height: 330px;
  padding: 18px 20px 20px;
}

.dashboard-card.chart-wide {
  grid-column: span 2;
}

.dashboard-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.dashboard-card h2 {
  margin: 0;
  color: #172136;
  font-size: 18px;
  font-weight: 700;
}

.dashboard-split {
  min-height: 255px;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(220px, 0.9fr);
  align-items: center;
  gap: 22px;
}

.pie-chart {
  display: grid;
  place-items: center;
  min-height: 250px;
}

.pie-ring {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
}

.pie-ring::after {
  content: "";
  position: absolute;
  inset: 54px;
  border-radius: 50%;
  background: var(--card);
}

.pie-ring span {
  position: relative;
  z-index: 1;
  color: #172136;
  font-size: 24px;
  font-weight: 900;
}

.chart-legend {
  display: grid;
  gap: 10px;
}

.chart-legend.dense {
  max-height: 260px;
  overflow: auto;
  padding-inline-end: 4px;
}

.legend-row {
  min-height: 30px;
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  color: #52627f;
  font-size: 12px;
}

.legend-color {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: var(--legend-color);
}

.legend-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legend-row em {
  color: #172136;
  font-style: normal;
  font-weight: 900;
}

.horizontal-bars {
  display: grid;
  gap: 14px;
}

.bar-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  color: #52627f;
  font-size: 12px;
  font-weight: 800;
}

.bar-track {
  height: 12px;
  border-radius: 999px;
  background: #edf2fb;
  overflow: hidden;
}

.bar-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.vertical-chart {
  min-height: 265px;
  display: grid;
  grid-template-columns: repeat(12, minmax(42px, 1fr));
  align-items: end;
  gap: 14px;
  border-bottom: 1px solid #e5ebf6;
  padding: 18px 0 0;
  overflow-x: auto;
}

.vbar {
  min-height: 230px;
  display: grid;
  grid-template-rows: 1fr auto auto;
  align-items: end;
  justify-items: center;
  gap: 7px;
  color: #65728c;
  font-size: 11px;
}

.vbar span {
  width: 100%;
  max-width: 72px;
  border-radius: 6px 6px 0 0;
  background: #2f78d6;
}

.vbar strong {
  color: #172136;
  font-size: 11px;
}

.vbar em {
  font-style: normal;
  white-space: nowrap;
}

.chart-empty {
  min-height: 160px;
  display: grid;
  place-items: center;
  color: #8b99b3;
  font-size: 13px;
  font-weight: 800;
}

.field {
  position: relative;
  grid-column: auto;
  min-width: 0;
  min-height: 112px;
  border-radius: 11px;
  background: var(--card);
  padding: 16px 20px;
}

body[data-lang="ar"] .field,
body[data-lang="ar"] .create-card,
body[data-lang="ar"] .create-field,
body[data-lang="ar"] .form-section summary,
body[data-lang="ar"] .section-grid,
body[data-lang="ar"] .task-field,
body[data-lang="ar"] .drawer-form,
body[data-lang="ar"] .activity-layout,
body[data-lang="ar"] .activity-list,
body[data-lang="ar"] .activity-item {
  direction: rtl;
  text-align: right;
}

body[data-lang="en"] .field,
body[data-lang="en"] .create-view,
body[data-lang="en"] .create-card,
body[data-lang="en"] .create-field,
body[data-lang="en"] .form-section summary,
body[data-lang="en"] .section-grid,
body[data-lang="en"] .task-field,
body[data-lang="en"] .drawer-form,
body[data-lang="en"] .activity-layout,
body[data-lang="en"] .activity-list,
body[data-lang="en"] .activity-item {
  direction: ltr;
  text-align: left;
}

.field span {
  display: block;
  margin-bottom: 12px;
  color: #63728e;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.45;
}

.field input,
.field select {
  width: 100%;
  height: 41px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  color: #596987;
  padding: 0 15px;
  outline: none;
}

.field input:focus,
.field select:focus {
  border-color: #8da1f8;
  box-shadow: 0 0 0 3px rgba(49, 83, 238, 0.1);
}

.field select.enhanced-native,
.create-field select.enhanced-native,
.task-field select.enhanced-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.smart-select {
  position: relative;
  direction: ltr;
}

.smart-select-trigger {
  width: 100%;
  height: 41px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  color: #596987;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px 0 15px;
  cursor: pointer;
}

.smart-select-trigger.open {
  border-color: #d7def0;
  border-radius: 5px 5px 0 0;
  box-shadow: 0 18px 45px rgba(65, 74, 104, 0.14);
}

.smart-select-value {
  min-width: 0;
  overflow: hidden;
  color: #60708e;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smart-select-value.placeholder {
  color: #8c98ad;
}

.smart-select-icons {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #8b99b3;
}

.smart-select-clear {
  border: 0;
  background: transparent;
  color: #9aa5b8;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}

.smart-select-panel {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  z-index: 30;
  width: 100%;
  min-width: 216px;
  max-height: 222px;
  overflow: hidden;
  border-radius: 0 0 9px 9px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 20px 52px rgba(31, 43, 76, 0.17);
}

.smart-select-search {
  width: 100%;
  height: 39px;
  border: 0;
  border-bottom: 1px solid #edf1f7;
  outline: none;
  padding: 0 15px;
  color: #6c7890;
}

.smart-select-options {
  max-height: 183px;
  overflow-y: auto;
}

.smart-select-option {
  width: 100%;
  min-height: 48px;
  border: 0;
  background: #fff;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 18px;
  align-items: center;
  column-gap: 8px;
  padding: 6px 14px;
  color: #4c5f82;
  text-align: left;
  cursor: pointer;
}

.smart-select.no-option-icons .smart-select-option {
  grid-template-columns: minmax(0, 1fr);
}

.smart-select-option:nth-child(even) {
  background: #f3f5f8;
}

.smart-select-option:hover,
.smart-select-option.active {
  background: #5770f2;
  color: #fff;
}

.smart-select-option:hover *,
.smart-select-option.active * {
  color: #fff;
}

.smart-select-option:hover .smart-select-check,
.smart-select-option.active .smart-select-check,
.smart-select-option:hover .smart-select-option-title,
.smart-select-option.active .smart-select-option-title {
  color: #fff;
}

.smart-select-option-icon {
  font-size: 16px;
}

.flag {
  width: 18px;
  height: 12px;
  border-radius: 1px;
  display: inline-block;
  box-shadow: 0 0 0 1px rgba(32, 45, 76, 0.1);
  position: relative;
  overflow: hidden;
}

.flag-sd {
  background: linear-gradient(#d71920 0 33%, #fff 33% 66%, #000 66%);
}

.flag-sd::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid #007229;
}

.flag-eg {
  background: linear-gradient(#ce1126 0 33%, #fff 33% 66%, #000 66%);
}

.flag-ye {
  background: linear-gradient(#ce1126 0 33%, #fff 33% 66%, #000 66%);
}

.flag-ph {
  background: linear-gradient(#0038a8 0 50%, #ce1126 50%);
}

.flag-ph::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #fff;
}

.flag-pk {
  background: linear-gradient(90deg, #fff 0 24%, #01411c 24%);
}

.flag-lk {
  background: linear-gradient(90deg, #ffbe29 0 12%, #8d153a 12% 56%, #00534e 56% 88%, #ffbe29 88%);
}

.flag-in {
  background: linear-gradient(#ff9933 0 33%, #fff 33% 66%, #138808 66%);
}

.flag-ug {
  background: repeating-linear-gradient(#000 0 2px, #fcdc04 2px 4px, #d90000 4px 6px);
}

.flag-ke {
  background: linear-gradient(#000 0 28%, #fff 28% 34%, #bb0000 34% 66%, #fff 66% 72%, #006600 72%);
}

.flag-et {
  background: linear-gradient(#078930 0 33%, #fcdd09 33% 66%, #da121a 66%);
}

.flag-bd {
  background: radial-gradient(circle at 56% 50%, #f42a41 0 30%, transparent 31%), #006a4e;
}

.smart-select-option-text {
  min-width: 0;
  line-height: 1.2;
}

.smart-select-option-title {
  display: block;
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smart-select-option-subtitle {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #99a5b9;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smart-select-option:hover .smart-select-option-subtitle,
.smart-select-option.active .smart-select-option-subtitle {
  color: #fff;
}

.smart-select-check {
  color: #fff;
  font-weight: 900;
}

.field.wide {
  grid-column: span 2;
}

.tasks-view {
  min-height: calc(100vh - 16px);
}

.tasks-title-card {
  height: 76px;
  border-radius: 12px;
  background: #fff;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  box-shadow: 0 10px 30px rgba(43, 54, 85, 0.04);
}

.tasks-title-card h1 {
  margin: 0;
  color: #6e7897;
  font-size: 24px;
  font-weight: 800;
}

.tasks-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 15px;
}

.tasks-filters .field {
  grid-column: auto;
}

.tasks-panel {
  min-height: 385px;
  border-radius: 12px;
  padding-bottom: 16px;
}

.tasks-actions {
  height: 43px;
  align-items: flex-start;
  justify-content: space-between;
}

.tasks-actions h2 {
  margin: 3px 0 0;
  color: #18233a;
  font-size: 18px;
  font-weight: 500;
}

.task-tools {
  display: flex;
  gap: 8px;
  align-items: center;
}

.icon-action {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: #f2f4fb;
  color: #0c36ca;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.icon-action svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tasks-table {
  min-width: 1280px;
}

.tasks-table th,
.tasks-table td {
  width: auto;
}

.tasks-table th:nth-child(1),
.tasks-table td:nth-child(1) {
  width: 5%;
}

.tasks-table th:nth-child(2),
.tasks-table td:nth-child(2) {
  width: 17%;
}

.tasks-table th:nth-child(3),
.tasks-table td:nth-child(3),
.tasks-table th:nth-child(4),
.tasks-table td:nth-child(4) {
  width: 9%;
}

.tasks-table th:nth-child(5),
.tasks-table td:nth-child(5) {
  width: 16%;
}

.tasks-table th:nth-child(6),
.tasks-table td:nth-child(6) {
  width: 22%;
}

.tasks-table th:nth-child(7),
.tasks-table td:nth-child(7) {
  width: 11%;
}

.tasks-table th:nth-child(8),
.tasks-table td:nth-child(8) {
  width: 10%;
}

.tasks-table th:nth-child(9),
.tasks-table td:nth-child(9) {
  width: 12%;
}

.tasks-table td {
  height: 72px;
  white-space: normal;
  line-height: 1.65;
}

.tasks-table .empty-tasks {
  height: 150px;
  text-align: center;
  color: #94a2bb;
  font-size: 14px;
  font-weight: 800;
  background: #f6f8fb;
}

.task-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.task-badge.priority-normal {
  background: #e8f8ef;
  color: #16794d;
}

.task-badge.priority-critical {
  background: #ffe8ec;
  color: #c3263a;
}

.task-badge.status-progress {
  background: #edf2ff;
  color: #3158ee;
}

.task-badge.status-done {
  background: #e4f8ed;
  color: #12834e;
}

.task-badge.status-blocked {
  background: #fff2d6;
  color: #a76505;
}

.task-attachment {
  width: 122px;
  height: 46px;
  border-radius: 24px;
  background: #f1f4fa;
  display: grid;
  place-items: center;
  color: #b5c2da;
  overflow: hidden;
}

.task-attachment.has-thumb::before {
  content: "";
  width: 100%;
  height: 100%;
  background: var(--thumb);
}

.task-attachment svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.tasks-footer,
.requests-footer {
  height: 48px;
  border: 1px solid #e5ebf6;
  border-top: 0;
  border-radius: 0 0 12px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px;
  color: #657391;
  font-size: 12px;
  direction: ltr;
}

.items-summary {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pagination {
  display: flex;
  gap: 8px;
}

.pagination button,
.refresh-button {
  width: 28px;
  height: 28px;
  border: 1px solid #e3e9f5;
  border-radius: 6px;
  background: #fff;
  color: #3153ee;
  cursor: pointer;
}

.pagination button:first-child,
.pagination button:last-child {
  background: #f2f4fb;
  color: #8a98b1;
}

.pagination button.active {
  color: #fff;
  background: #3158ee;
  border-color: #3158ee;
}

.pagination button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pagination-ellipsis {
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8a98b1;
  font-weight: 800;
}

.pagination-current {
  min-width: 100px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #526487;
  font-size: 12px;
  font-weight: 800;
}

.admin-view {
  display: grid;
  gap: 18px;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 18px;
}

.users-only-grid {
  grid-template-columns: 1fr;
}

.admin-card {
  border-radius: 10px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 8px 22px rgba(49, 67, 110, 0.05);
}

.admin-card h2 {
  margin: 0 0 18px;
  color: #25324d;
  font-size: 18px;
}

.admin-card .create-field {
  width: 100%;
  margin-bottom: 14px;
}

.admin-note {
  margin: 14px 0 0;
  color: #7f8da5;
  font-size: 12px;
  line-height: 1.7;
}

.admin-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-card-head h2 {
  margin: 0;
}

.followups-view {
  gap: 18px;
}

.followup-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}

.returned-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}

.followup-kpi {
  min-height: 92px;
  border-radius: 8px;
  background: #fff;
  padding: 16px 18px;
  box-shadow: 0 8px 22px rgba(49, 67, 110, 0.05);
  border: 1px solid #edf1f8;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.followup-kpi span {
  display: block;
  color: #71809b;
  font-size: 12px;
  font-weight: 900;
}

.followup-kpi strong {
  display: block;
  color: #1f2a44;
  font-size: 32px;
  line-height: 1;
}

.returned-workers-view {
  gap: 18px;
}

.returned-title-card {
  display: flex;
  align-items: center;
  justify-content: center;
}

.returned-add-button {
  height: 36px;
  padding-inline: 14px 16px;
  box-shadow: 0 12px 24px rgba(49, 83, 238, 0.18);
}

.returned-table-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.returned-form-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.returned-worker-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 12px;
}

.returned-worker-form .create-field {
  margin-bottom: 0;
}

.returned-worker-form .wide {
  grid-column: span 2;
}

.returned-form-actions {
  display: flex;
  align-items: end;
  gap: 10px;
}

.returned-filters {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.returned-table-card .admin-card-head span {
  color: #71809b;
  font-size: 12px;
  font-weight: 900;
}

.returned-workers-table {
  min-width: 1180px;
}

.returned-workers-table td {
  height: 70px;
  white-space: normal;
  line-height: 1.55;
}

.returned-workers-table td strong,
.returned-workers-table td small {
  display: block;
}

.returned-workers-table td small {
  margin-top: 4px;
  color: #75839c;
  font-size: 11px;
}

.returned-workers-table tr {
  cursor: pointer;
}

.returned-workers-table tr:hover td {
  background: #f7f9fe;
}

.returned-warranty {
  min-width: 78px;
  display: inline-flex;
  justify-content: center;
  border-radius: 6px;
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 900;
}

.returned-warranty.inside {
  background: #dff8eb;
  color: #087d4a;
}

.returned-warranty.warning {
  background: #fff1cf;
  color: #a36a00;
}

.returned-warranty.expired {
  background: #ffe3e3;
  color: #c92332;
}

.returned-warranty.neutral {
  background: #edf1f8;
  color: #6c7890;
}

.followup-kpi.danger {
  border-color: #ffd5d5;
}

.followup-kpi.warning {
  border-color: #fff0bf;
}

.followup-kpi.info {
  border-color: #cce5ff;
}

.followup-controls {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px 16px;
  align-items: end;
  border-radius: 10px;
  background: #fff;
  padding: 18px 20px;
  box-shadow: 0 8px 22px rgba(49, 67, 110, 0.05);
}

.followup-controls .field {
  grid-column: span 3;
  min-height: auto;
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.followup-controls .field:nth-child(4) {
  grid-column: span 6;
}

.followup-controls .field:nth-child(5) {
  grid-column: span 3;
}

.followup-controls .field span {
  margin-bottom: 8px;
  font-size: 11px;
}

.followup-controls .field input,
.followup-controls .field select {
  height: 44px;
  border-radius: 6px;
}

.followup-controls .dashboard-reset {
  grid-column: span 3;
  height: 44px;
  align-self: end;
}

.followup-board {
  padding: 18px 20px;
}

.followup-list {
  display: grid;
  gap: 10px;
}

.followup-item {
  width: 100%;
  border: 1px solid #dfe7f4;
  border-inline-start: 4px solid #89a2c6;
  border-radius: 8px;
  background: #f9fbff;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: minmax(260px, 1.2fr) minmax(260px, 1fr) minmax(260px, 1fr) minmax(120px, auto);
  gap: 16px;
  align-items: center;
  text-align: start;
  cursor: pointer;
  transition: 0.18s ease;
}

.followup-item:hover {
  border-color: #3153f4;
  box-shadow: 0 12px 28px rgba(49, 83, 244, 0.12);
  transform: translateY(-1px);
}

.followup-item.urgent {
  border-inline-start-color: #e12d39;
}

.followup-item.high {
  border-inline-start-color: #f5a524;
}

.followup-item.normal {
  border-inline-start-color: #31b978;
}

.followup-main {
  display: grid;
  gap: 6px;
}

.followup-main strong {
  color: #1d2a46;
  font-size: 15px;
}

.followup-main span,
.followup-main small,
.followup-action small {
  color: #65748f;
  font-weight: 800;
}

.followup-meta,
.followup-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.followup-reasons span,
.followup-priority {
  border-radius: 999px;
  background: #eef3ff;
  color: #3153f4;
  padding: 7px 11px;
  font-size: 11px;
  font-weight: 900;
}

.followup-action {
  display: grid;
  gap: 6px;
  justify-items: end;
}

.followup-empty {
  border: 1px dashed #d5deed;
  border-radius: 8px;
  padding: 24px;
  color: #75839d;
  text-align: center;
  font-weight: 900;
}

.admin-table-card {
  min-width: 0;
}

.admin-table th,
.admin-table td {
  width: auto;
}

.role-select {
  height: 32px;
  border: 1px solid #d7e1f0;
  border-radius: 7px;
  background: #fff;
  color: #52627e;
  padding: 0 8px;
  margin-inline-end: 8px;
  font-weight: 800;
}

.role-select:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.role-lock-note {
  display: block;
  margin-top: 7px;
  color: #8b98b2;
  font-size: 11px;
  font-weight: 800;
}

.activity-layout {
  display: grid;
  gap: 18px;
}

.activity-summary-card {
  min-height: 82px;
  border-radius: 10px;
  background: #fff;
  padding: 18px 20px;
  box-shadow: 0 8px 22px rgba(49, 67, 110, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.activity-summary-card span {
  display: block;
  color: #7d8aa3;
  font-size: 12px;
  font-weight: 800;
}

.activity-summary-card strong {
  display: block;
  margin-top: 3px;
  color: #25324d;
  font-size: 30px;
  line-height: 1;
}

.activity-list {
  display: grid;
  gap: 10px;
}

.activity-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 260px));
  gap: 14px;
  margin: 0 0 16px;
}

.activity-filters label {
  display: grid;
  gap: 7px;
}

.activity-filters span {
  color: #76849f;
  font-size: 11px;
  font-weight: 900;
}

.activity-filters select {
  height: 42px;
  border: 1px solid #d9e2f2;
  border-radius: 6px;
  background: #fff;
  color: #4a5c7c;
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.activity-item {
  min-height: 72px;
  border: 1px solid #e5ebf6;
  border-radius: 8px;
  background: #f8fafc;
  padding: 13px 15px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.activity-item.unread {
  border-color: #cdd8ff;
  background: #f0f4ff;
}

.activity-item h3 {
  margin: 0 0 4px;
  color: #25324d;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.activity-item h3 small {
  border-radius: 999px;
  background: #e8eeff;
  color: #3859d6;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.activity-item p {
  margin: 0;
  color: #657391;
  font-size: 12px;
  line-height: 1.6;
}

.activity-meta {
  color: #91a0b8;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.activity-details {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}

.activity-detail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  background: #eef3fb;
  padding: 5px 9px;
  color: #536582;
  font-size: 11px;
  font-weight: 800;
}

.activity-detail strong,
.activity-detail em {
  font-style: normal;
}

.activity-detail strong {
  color: #7d8aa3;
}

.activity-detail em {
  color: #25324d;
}

.activity-empty {
  min-height: 120px;
  border: 1px dashed #d8e0ef;
  border-radius: 8px;
  background: #f8fafc;
  color: #7d8aa3;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
}

.settings-card {
  max-width: 920px;
  margin: 0 auto;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 18px 26px;
}

.settings-actions {
  padding-left: 0;
}

.table-panel {
  margin-top: 20px;
  min-height: 515px;
  border-radius: 12px 12px 0 0;
  background: #fff;
  padding: 15px 20px 0;
}

.actions {
  height: 43px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
}

.file-input {
  position: fixed;
  left: -100vw;
  top: -100vh;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.action-label {
  user-select: none;
}

.primary-button,
.ghost-button {
  height: 32px;
  border: 0;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 15px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.primary-button {
  color: #fff;
  background: var(--blue);
}

.ghost-button {
  color: #0c36ca;
  background: #f2f4fb;
}

.danger-button {
  height: 32px;
  min-width: 80px;
  border: 0;
  border-radius: 6px;
  background: #d9252a;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.danger-button span {
  font-size: 22px;
  line-height: 1;
}

.table-wrap {
  overflow: auto;
  border: 1px solid #e5ebf6;
  border-radius: 12px 12px 0 0;
}

table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
  direction: ltr;
}

thead th {
  height: 41px;
  color: var(--header);
  background: #fff;
  font-size: 10px;
  font-weight: 800;
  text-align: left;
  white-space: nowrap;
  padding: 0 18px;
}

tbody tr:nth-child(odd) {
  background: #f6f8fb;
}

tbody tr:nth-child(even) {
  background: #fff;
}

tbody tr.selected-row {
  background: #5870ed;
}

tbody tr.selected-row td {
  color: #fff;
}

td {
  height: 72px;
  padding: 0 18px;
  white-space: nowrap;
  color: #556789;
  font-size: 13px;
  vertical-align: middle;
}

.skeleton-row td {
  pointer-events: none;
}

.skeleton-cell {
  display: block;
  width: min(100%, 118px);
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #edf1f7 0%, #f8fafc 45%, #edf1f7 90%);
  background-size: 220% 100%;
  animation: skeleton-shimmer 1.25s ease-in-out infinite;
}

.skeleton-row td:nth-child(1) .skeleton-cell,
.skeleton-row td:nth-child(2) .skeleton-cell,
.skeleton-row td:nth-child(7) .skeleton-cell {
  width: 72px;
}

.skeleton-row td:nth-child(3) .skeleton-cell,
.skeleton-row td:nth-child(10) .skeleton-cell {
  width: 150px;
}

.skeleton-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
}

@keyframes skeleton-shimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-cell {
    animation: none;
  }
}

body[data-lang="ar"] table {
  direction: rtl;
}

body[data-lang="ar"] thead th,
body[data-lang="ar"] td {
  text-align: right;
}

body[data-lang="en"] table {
  direction: ltr;
}

body[data-lang="en"] thead th,
body[data-lang="en"] td {
  text-align: left;
}

body[data-lang="ar"] .badge,
body[data-lang="en"] .badge,
body[data-lang="ar"] .attachment,
body[data-lang="en"] .attachment,
body[data-lang="ar"] .task-attachment,
body[data-lang="en"] .task-attachment,
body[data-lang="ar"] .empty-tasks,
body[data-lang="en"] .empty-tasks {
  text-align: center;
}

th:nth-child(1),
td:nth-child(1) {
  width: 8%;
}

th:nth-child(2),
td:nth-child(2) {
  width: 10%;
}

th:nth-child(3),
td:nth-child(3) {
  width: 14%;
}

th:nth-child(4),
td:nth-child(4) {
  width: 10%;
}

th:nth-child(5),
td:nth-child(5),
th:nth-child(6),
td:nth-child(6) {
  width: 8%;
}

th:nth-child(7),
td:nth-child(7) {
  width: 12%;
}

th:nth-child(8),
td:nth-child(8) {
  width: 11%;
}

th:nth-child(9),
td:nth-child(9) {
  width: 13%;
}

th:nth-child(10),
td:nth-child(10) {
  width: 6%;
}

th:nth-child(11),
td:nth-child(11) {
  width: 76px;
  padding: 0 12px;
  text-align: center;
}

.sort {
  color: #3153ee;
  margin-left: 18px;
  font-size: 13px;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 23px;
  max-width: 190px;
  border-radius: 5px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 700;
  direction: rtl;
}

.badge.green {
  background: var(--green);
  color: var(--green-text);
}

.badge.yellow {
  background: var(--yellow);
  color: var(--yellow-text);
}

.badge.red {
  background: var(--red);
  color: var(--red-text);
}

.badge.cyan {
  background: var(--cyan);
  color: var(--cyan-text);
}

.badge.lavender {
  background: var(--lavender);
  color: var(--lavender-text);
}

.attachment {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #d5ddea;
  display: block;
  overflow: hidden;
  background:
    linear-gradient(35deg, transparent 55%, rgba(255, 255, 255, 0.75) 56% 68%, transparent 69%),
    repeating-linear-gradient(0deg, rgba(38, 62, 113, 0.18) 0 2px, transparent 2px 5px),
    var(--thumb, linear-gradient(135deg, #b9d5ef, #f0b0a9));
  box-shadow: inset 0 0 0 9px rgba(255, 255, 255, 0.38);
}

.attachment.has-image {
  background: #fff;
  box-shadow: none;
  cursor: zoom-in;
}

.attachment img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.attachment-preview-bubble {
  position: fixed;
  z-index: 3000;
  width: 260px;
  height: 320px;
  overflow: hidden;
  border: 1px solid rgba(214, 224, 240, 0.95);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 22px 70px rgba(22, 34, 66, 0.28);
  pointer-events: none;
}

.attachment-preview-bubble img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #f4f7fb;
}

.empty {
  color: #77839a;
  letter-spacing: 1px;
}

dialog {
  width: min(420px, calc(100vw - 32px));
  border: 0;
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 26px 65px rgba(20, 35, 76, 0.28);
}

dialog::backdrop {
  background: rgba(19, 31, 62, 0.35);
}

.modal {
  display: grid;
  gap: 12px;
  padding: 20px;
  direction: rtl;
}

.modal h2 {
  margin: 0 0 4px;
  color: #273754;
  font-size: 20px;
}

.modal .field {
  min-height: auto;
  padding: 0;
}

.modal-actions {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 5px;
}

body.drawer-open {
  overflow: hidden;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(20, 31, 55, 0.42);
  display: flex;
  justify-content: flex-end;
  padding: 16px 18px;
}

.edit-drawer {
  width: min(900px, calc(100vw - 96px));
  height: calc(100vh - 32px);
  background: #f4f7fb;
  border: 1px solid rgba(220, 228, 242, 0.9);
  border-radius: 18px;
  padding: 18px;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 28px 90px rgba(17, 31, 62, 0.24);
  position: relative;
}

.drawer-close {
  position: sticky;
  top: 0;
  z-index: 4;
  margin-inline-start: auto;
  margin-bottom: 10px;
  width: 36px;
  height: 36px;
  border: 1px solid #dbe4f2;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #687795;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(31, 47, 86, 0.12);
}

.drawer-form {
  width: 100%;
  margin: 0 auto;
}

.drawer-title-card {
  min-height: 72px;
  border: 1px solid #e2e9f4;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff, #f8fbff);
  display: flex;
  align-items: center;
  padding: 0 24px;
  margin-bottom: 14px;
  box-shadow: 0 12px 36px rgba(43, 58, 95, 0.06);
}

.drawer-title-card h2 {
  margin: 0;
  color: #18233a;
  font-size: 24px;
  font-weight: 800;
}

.drawer-card {
  border: 1px solid #e2e9f4;
  border-radius: 16px;
  padding: 18px 20px 0;
  box-shadow: 0 14px 44px rgba(43, 58, 95, 0.06);
}

.drawer-card .create-field {
  width: 100%;
  margin-bottom: 22px;
}

.drawer-card .create-field.narrow,
.drawer-card .create-field.small {
  width: 100%;
}

.drawer-card .section-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  padding: 18px 20px 16px;
}

.drawer-card .section-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.drawer-card .section-grid.three {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.drawer-card .create-upload {
  width: 100%;
  min-height: 121px;
  grid-row: span 2;
}

.drawer-card .note-field {
  grid-column: span 2;
  width: 100%;
}

.drawer-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  border-top: 1px solid #e2e9f4;
  border-radius: 0 0 16px 16px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  justify-content: flex-end;
  gap: 12px;
  margin: 24px -20px 0;
  padding: 16px 20px 18px;
  flex-wrap: wrap;
}

.update-button {
  min-width: 112px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0f9f5f, #12b76a);
  color: #fff;
  box-shadow: 0 12px 28px rgba(18, 183, 106, 0.32);
}

.update-button:hover {
  background: linear-gradient(135deg, #0b8b53, #0f9f5f);
  transform: translateY(-1px);
}

.update-button svg,
#deleteRequestButton svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#deleteRequestButton {
  min-width: 132px;
  height: 38px;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(217, 37, 42, 0.16);
}

.request-task-box {
  width: 100%;
  border: 1px solid #b9c9ff;
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
  background: #f6f8ff;
}

.request-task-box summary {
  height: 44px;
  background: linear-gradient(135deg, #3158ee, #24a7d8);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 16px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.14);
}

.request-task-box summary:hover {
  background: linear-gradient(135deg, #2548d7, #168fbf);
}

.request-task-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 22px;
  padding: 16px;
}

.request-task-grid .create-field {
  width: 100%;
  margin-bottom: 0;
}

.request-task-grid .task-note-field {
  grid-column: span 2;
}

.task-edit-drawer {
  width: min(720px, calc(100vw - 96px));
  padding: 18px;
}

.task-drawer-form {
  width: 100%;
}

.task-drawer-title {
  min-height: 74px;
  border: 1px solid #e2e9f4;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff, #f8fbff);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 18px;
  margin-bottom: 14px;
  box-shadow: 0 12px 36px rgba(43, 58, 95, 0.06);
}

.task-drawer-title h2 {
  margin: 0;
  color: #18233a;
  font-size: 22px;
  font-weight: 800;
}

.task-delete-top {
  min-width: 116px;
  height: 38px;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(217, 37, 42, 0.16);
}

.task-form-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
  border: 1px solid #e2e9f4;
  border-radius: 16px;
  background: #fff;
  padding: 18px 20px;
  box-shadow: 0 14px 44px rgba(43, 58, 95, 0.06);
}

.task-field {
  display: block;
  width: 100%;
  margin-bottom: 0;
}

.task-field.compact {
  width: 100%;
}

.task-field span:first-child {
  display: block;
  margin-bottom: 8px;
  color: #63728e;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.task-field em {
  color: #bac4d6;
  font-style: normal;
}

.task-field input,
.task-field select,
.task-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #596987;
  padding: 10px 13px;
  outline: none;
}

.task-field input,
.task-field select {
  height: 40px;
  padding-top: 0;
  padding-bottom: 0;
}

.task-field textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.65;
  direction: rtl;
}

.task-drawer-attachment {
  width: 100%;
  height: 150px;
  border: 1px solid #dfe7f4;
  border-radius: 12px;
  background: #f1f4fa;
  display: grid;
  place-items: center;
  color: #b5c2da;
  overflow: hidden;
}

.task-drawer-attachment.has-thumb::before {
  content: "";
  width: 100%;
  height: 100%;
  background: var(--thumb);
}

.task-drawer-attachment svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.task-update-button {
  grid-column: 1 / -1;
  justify-self: end;
  min-width: 132px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0f9f5f, #12b76a);
  color: #fff;
  margin-top: 4px;
  box-shadow: 0 12px 28px rgba(18, 183, 106, 0.32);
}

.task-update-button:hover {
  background: linear-gradient(135deg, #0b8b53, #0f9f5f);
  transform: translateY(-1px);
}

.task-delete-top svg,
.task-update-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.task-field:first-child,
.task-field:nth-child(5),
.task-field:nth-child(7) {
  grid-column: 1 / -1;
}

.create-view {
  min-height: calc(100vh - 16px);
  padding: 74px 0 80px;
  direction: rtl;
}

.create-form {
  width: min(900px, calc(100vw - 130px));
  margin: 0 auto;
}

.create-title-card,
.create-card {
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(43, 54, 85, 0.04);
}

.create-title-card {
  min-height: 76px;
  border: 1px solid #e2e9f4;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff, #f8fbff);
  display: flex;
  align-items: center;
  padding: 0 24px;
  margin-bottom: 14px;
  box-shadow: 0 12px 36px rgba(43, 58, 95, 0.06);
}

.create-title-card h2 {
  width: 100%;
  margin: 0;
  color: #18233a;
  font-size: 26px;
  font-weight: 800;
}

.create-card {
  border: 1px solid #e2e9f4;
  border-radius: 16px;
  padding: 18px 20px 0;
  box-shadow: 0 14px 44px rgba(43, 58, 95, 0.06);
}

.create-field {
  display: block;
  width: 260px;
  margin-bottom: 27px;
}

.create-field.narrow,
.create-field.small {
  width: 160px;
}

.create-field span,
.create-upload > span {
  display: block;
  margin-bottom: 9px;
  color: #63728e;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.create-field em,
.create-upload em {
  color: #bac4d6;
  font-style: normal;
}

.create-field input,
.create-field select {
  width: 100%;
  height: 41px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  color: #596987;
  padding: 0 15px;
  outline: none;
}

.form-section {
  margin-top: 16px;
  border: 1px solid #e2e8f3;
  border-radius: 12px;
  overflow: visible;
  background: #fff;
}

.form-section summary {
  height: 46px;
  padding: 0 16px;
  background: #fff;
  color: #526586;
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  list-style: none;
  border-radius: 12px;
  font-weight: 800;
}

.form-section[open] summary {
  background: #f5f8fd;
  border-bottom: 1px solid #e2e8f3;
  border-radius: 12px 12px 0 0;
}

.form-section summary::-webkit-details-marker {
  display: none;
}

.form-section summary::after {
  content: "›";
  margin-left: auto;
  color: #6c7894;
  font-size: 25px;
}

body[data-lang="ar"] .form-section summary::after {
  margin-left: 0;
  margin-right: auto;
}

.form-section[open] summary::after {
  transform: rotate(90deg);
}

.section-icon {
  width: 16px;
  color: #71809e;
  font-size: 16px;
}

.section-grid {
  display: grid;
  grid-template-columns: 260px 160px;
  gap: 16px 26px;
  padding: 16px 20px 14px;
}

.section-grid.two {
  grid-template-columns: 180px 180px;
}

.section-grid.two .create-field:not(.select-create) {
  width: 260px;
}

.section-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.section-grid.three .create-field,
.section-grid.three .create-field.small {
  width: 100%;
}

.create-upload {
  grid-row: span 2;
  display: block;
  width: 144px;
  min-height: 112px;
}

.create-file-grid {
  padding: 16px;
}

.create-attachments-panel {
  min-height: 180px;
}

.create-upload-wide {
  width: 100%;
  min-height: 132px;
}

.create-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.create-upload strong,
.create-upload small {
  display: flex;
  align-items: center;
  justify-content: center;
}

.create-upload strong {
  height: 42px;
  border: 1px dashed #d5dfee;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: #f6f8fb;
  color: #c4cedd;
  font-size: 30px;
}

.create-upload small {
  height: 58px;
  border: 1px dashed #d5dfee;
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: #f6f8fb;
  color: #a8b3c6;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.create-view .create-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: 24px -20px 0;
  border-top: 1px solid #e2e9f4;
  border-radius: 0 0 16px 16px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  padding: 16px 20px 18px;
  display: flex;
  gap: 12px;
  justify-content: center;
}

.create-view .create-submit {
  min-width: 112px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0f9f5f, #12b76a);
  color: #fff;
  box-shadow: 0 12px 28px rgba(18, 183, 106, 0.32);
}

.create-view .create-submit:hover {
  background: linear-gradient(135deg, #0b8b53, #0f9f5f);
  transform: translateY(-1px);
}

.create-view #cancelCreateButton {
  min-width: 104px;
  height: 38px;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(217, 37, 42, 0.16);
}

.create-view #cancelCreateButton svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1200px) {
  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-controls,
  .dashboard-kpis,
  .followup-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .followup-controls,
  .followup-item {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .followup-controls .field,
  .followup-controls .field:nth-child(4),
  .followup-controls .field:nth-child(5),
  .followup-controls .dashboard-reset {
    grid-column: auto;
  }

  .filters,
  .tasks-filters {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }

  .field,
  .field.wide {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .sidebar {
    width: 58px;
  }

  .side-nav {
    margin-top: 110px;
    gap: 13px;
  }

  .app-shell {
    margin-left: 58px;
    padding: 12px;
  }

  body[data-lang="ar"] .app-shell {
    margin-left: 0;
    margin-right: 58px;
  }

  body[data-lang="en"] .app-shell {
    margin-left: 58px;
    margin-right: 0;
  }

  .edit-drawer {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    padding: 12px;
    border-radius: 14px;
  }

  .task-edit-drawer {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    padding: 12px;
    border-radius: 14px;
  }

  .task-drawer-title {
    align-items: flex-start;
    flex-direction: column;
    padding: 14px;
  }

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

  .create-form {
    width: calc(100vw - 82px);
  }

  .create-card {
    padding: 14px;
  }

  .create-card .section-grid,
  .create-card .section-grid.two,
  .create-card .section-grid.three {
    grid-template-columns: 1fr;
  }

  .create-card .create-field,
  .create-card .create-field.narrow,
  .create-card .create-field.small,
  .create-card .create-upload {
    width: 100%;
  }

  .create-view .create-actions {
    margin-inline: -14px;
    justify-content: center;
  }

  .task-field.compact,
  .task-drawer-attachment {
    width: 100%;
  }

  .drawer-card .section-grid,
  .drawer-card .section-grid.two,
  .drawer-card .section-grid.three {
    grid-template-columns: 1fr;
  }

  .drawer-card .create-field,
  .drawer-card .create-field.narrow,
  .drawer-card .create-field.small,
  .drawer-card .note-field,
  .drawer-card .create-upload {
    grid-column: auto;
    width: 100%;
  }

  .hero {
    height: 150px;
    padding: 0 22px;
  }

  .hero h1 {
    font-size: 24px;
  }

  .filters {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .summary-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .dashboard-controls,
  .dashboard-kpis,
  .dashboard-grid,
  .dashboard-split,
  .followup-kpis,
  .followup-controls,
  .followup-item {
    grid-template-columns: 1fr;
  }

  .followup-action {
    justify-items: start;
  }

  .followup-controls .field,
  .followup-controls .field:nth-child(4),
  .followup-controls .field:nth-child(5),
  .followup-controls .dashboard-reset {
    grid-column: auto;
  }

  .dashboard-card.chart-wide {
    grid-column: auto;
  }

  .dashboard-card {
    min-height: auto;
  }

  .tasks-filters {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .field,
  .field.wide {
    grid-column: auto;
  }

  .table-panel {
    padding-inline: 10px;
  }

  .tasks-footer,
  .requests-footer {
    height: auto;
    min-height: 48px;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
  }
}

body.dark-mode .table-wrap {
  background: #111a2a;
  border-color: #2a3850;
}

body.dark-mode .table-panel table thead th,
body.dark-mode .tasks-panel table thead th {
  background: #182235;
  color: #8fa0bb;
}

body.dark-mode .table-panel table tbody tr:nth-child(odd),
body.dark-mode .tasks-panel table tbody tr:nth-child(odd) {
  background: #151f31;
}

body.dark-mode .table-panel table tbody tr:nth-child(even),
body.dark-mode .tasks-panel table tbody tr:nth-child(even) {
  background: #111a2a;
}

body.dark-mode .table-panel table tbody tr.selected-row,
body.dark-mode .tasks-panel table tbody tr.selected-row {
  background: #5870ed;
}

body.dark-mode .table-panel table td,
body.dark-mode .tasks-panel table td {
  color: #d7deeb;
}

body.dark-mode .skeleton-cell {
  background: linear-gradient(90deg, #1c273b 0%, #2b3952 45%, #1c273b 90%);
  background-size: 220% 100%;
}

body.dark-mode .edit-drawer,
body.dark-mode .task-edit-drawer,
body.dark-mode dialog,
body.dark-mode .modal {
  background: #111827;
  color: #d7deeb;
}

body.dark-mode .drawer-title-card,
body.dark-mode .drawer-card,
body.dark-mode .create-title-card,
body.dark-mode .create-card,
body.dark-mode .task-drawer-title,
body.dark-mode .task-form-card,
body.dark-mode .admin-card,
body.dark-mode .profile-menu,
body.dark-mode .toast {
  background: #182235;
  color: #d7deeb;
  border-color: #2a3850;
}

body.dark-mode .drawer-title-card h2,
body.dark-mode .create-title-card h2,
body.dark-mode .task-drawer-title h2,
body.dark-mode .modal h2,
body.dark-mode .tasks-actions h2,
body.dark-mode .admin-card h2,
body.dark-mode .toast-title {
  color: #e6edf8;
}

body.dark-mode .task-drawer-title {
  background: linear-gradient(135deg, #182235, #111a2a);
}

body.dark-mode .task-form-card {
  background: #182235;
}

body.dark-mode .task-update-button {
  background: linear-gradient(135deg, #0f9f5f, #12b76a);
  color: #fff;
}

body.dark-mode .form-section,
body.dark-mode .request-task-box,
body.dark-mode .create-upload,
body.dark-mode .task-drawer-attachment {
  background: #111a2a;
  border-color: #2a3850;
}

body.dark-mode .form-section summary,
body.dark-mode .form-section[open] summary,
body.dark-mode .request-task-box summary,
body.dark-mode .linked-task-button {
  background: #111a2a;
  color: #cbd5e1;
  border-color: #2a3850;
}

body.dark-mode .request-task-box summary {
  background: linear-gradient(135deg, #3158ee, #24a7d8);
  color: #fff;
}

body.dark-mode .form-section[open] summary {
  background: #151f31;
}

body.dark-mode .request-task-box[open] summary {
  background: linear-gradient(135deg, #2548d7, #168fbf);
}

body.dark-mode .section-icon,
body.dark-mode .form-section summary::after,
body.dark-mode .drawer-close,
body.dark-mode .toast-message,
body.dark-mode .toast-close,
body.dark-mode .empty {
  color: #93a4bd;
}

body.dark-mode .create-field span,
body.dark-mode .create-upload > span,
body.dark-mode .create-field em,
body.dark-mode .create-upload em {
  color: #91a2bc;
}

body.dark-mode .create-field input,
body.dark-mode .create-field select,
body.dark-mode .auth-card input {
  background: #0f172a;
  color: #d7deeb;
  border-color: #2a3850;
}

body.dark-mode .profile-menu-item {
  background: #182235;
  border-color: #2a3850;
}

body.dark-mode .activity-summary-card,
body.dark-mode .activity-card {
  background: #182235;
  color: #d7deeb;
}

body.dark-mode .activity-summary-card strong,
body.dark-mode .activity-item h3 {
  color: #e6edf8;
}

body.dark-mode .activity-summary-card span,
body.dark-mode .activity-item p,
body.dark-mode .activity-meta {
  color: #93a4bd;
}

body.dark-mode .activity-filters span,
body.dark-mode .activity-detail strong {
  color: #93a4bd;
}

body.dark-mode .activity-filters select,
body.dark-mode .activity-detail {
  background: #111a2a;
  border-color: #2a3850;
  color: #d7deeb;
}

body.dark-mode .activity-detail em {
  color: #e6edf8;
}

body.dark-mode .activity-item h3 small {
  background: #22345f;
  color: #9fb6ff;
}

body.dark-mode .activity-item {
  background: #111a2a;
  border-color: #2a3850;
}

body.dark-mode .activity-item.unread {
  background: #172341;
  border-color: #3f56a8;
}

body.dark-mode .activity-empty {
  background: #111a2a;
  border-color: #2a3850;
  color: #93a4bd;
}

body.dark-mode .dashboard-kpi,
body.dark-mode .dashboard-card,
body.dark-mode .followup-kpi,
body.dark-mode .followup-controls,
body.dark-mode .followup-item {
  background: #182235;
  box-shadow: none;
  border-color: #2a3850;
}

body.dark-mode .dashboard-kpi span,
body.dark-mode .dashboard-card h2,
body.dark-mode .followup-kpi span,
body.dark-mode .followup-main span,
body.dark-mode .followup-main small,
body.dark-mode .followup-action small,
body.dark-mode .legend-row,
body.dark-mode .bar-label,
body.dark-mode .vbar {
  color: #cbd5e1;
}

body.dark-mode .dashboard-kpi strong,
body.dark-mode .followup-kpi strong,
body.dark-mode .followup-main strong,
body.dark-mode .legend-row em,
body.dark-mode .vbar strong,
body.dark-mode .pie-ring span {
  color: #e8eefb;
}

body.dark-mode .followup-item:hover {
  border-color: #5870ed;
  box-shadow: 0 12px 28px rgba(88, 112, 237, 0.16);
}

body.dark-mode .followup-reasons span,
body.dark-mode .followup-priority {
  background: #22345f;
  color: #b9c8ff;
}

body.dark-mode .followup-empty {
  background: #111a2a;
  border-color: #2a3850;
  color: #93a4bd;
}

body.dark-mode .pie-ring::after {
  background: #182235;
}

body.dark-mode .bar-track {
  background: #0f172a;
}

body.dark-mode .vertical-chart {
  border-color: #2a3850;
}

body.dark-mode .chart-empty {
  color: #93a4bd;
}

body.dark-mode .summary-card {
  background: #172236;
  box-shadow: none;
}

body.dark-mode .summary-card span {
  color: #94a3bd;
}

body.dark-mode .summary-card strong {
  color: #e8eefb;
}

.request-file-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 16px; }
.request-attachments-panel, .request-timeline-panel { padding: 16px; border: 1px solid #dce5f5; border-radius: 14px; background: #fff; }
.request-timeline-panel { grid-column: 1 / -1; }
.request-attachments-panel h3, .request-timeline-panel h3 { margin: 0 0 12px; color: #28395b; }
.compact-upload { display: inline-flex; cursor: pointer; color: #2457dc; font-weight: 700; margin-bottom: 12px; }
.compact-upload input { display: none; }
.attachment-list { display: grid; gap: 8px; }
.request-attachment-item { display: grid; grid-template-columns: 58px minmax(0, 1fr) 26px; align-items: center; gap: 10px; padding: 9px 11px; background: #f5f8ff; border-radius: 9px; }
.request-attachment-item a { color: #234cba; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.request-attachment-item.has-preview {
  position: relative;
  grid-template-columns: 1fr;
  min-height: 132px;
  overflow: hidden;
  padding: 0;
  border: 1px solid #d7e1f0;
  background: #eef3fb;
}

.request-attachment-preview,
.request-attachment-file {
  width: 52px;
  height: 52px;
  border: 1px solid #d7e1f0;
  border-radius: 8px;
  background: #fff;
}

.request-attachment-item.has-preview .request-attachment-preview {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
}

.request-attachment-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.request-attachment-file {
  display: grid;
  place-items: center;
  color: #6a78a0;
  font-size: 9px;
  font-weight: 900;
}

.request-attachment-name { min-width: 0; }
.request-attachment-item.has-preview .request-attachment-name {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  min-width: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  padding: 7px 10px;
  backdrop-filter: blur(8px);
}

.request-attachment-item button { border: 0; background: #feecec; color: #c62e2e; border-radius: 50%; width: 26px; height: 26px; cursor: pointer; }
.request-attachment-item.has-preview button {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
}
.attachment-empty { color: #8490a8; margin: 8px 0; }
.request-timeline {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  padding: 22px 4px 12px;
  border-top: 2px solid #cad8f5;
  scrollbar-width: thin;
  scrollbar-color: #9db3e8 #edf2fb;
}
.request-timeline article {
  position: relative;
  flex: 0 0 250px;
  min-height: 112px;
  padding: 14px;
  border: 1px solid #dce5f5;
  border-radius: 12px;
  background: #f8faff;
  scroll-snap-align: start;
}
.request-timeline article::before {
  content: "";
  position: absolute;
  top: -28px;
  inset-inline-start: 18px;
  width: 10px;
  height: 10px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #315fe5;
  box-shadow: 0 0 0 2px #315fe5;
}
.request-timeline time { display: block; color: #8995aa; font-size: 12px; }
.request-timeline strong { color: #28395b; }
.request-timeline p { margin: 3px 0 0; color: #66738c; }
body.dark-mode .request-attachments-panel, body.dark-mode .request-timeline-panel { background: #172038; border-color: #34415f; }
body.dark-mode .request-attachment-item { background: #202b47; }
body.dark-mode .request-timeline { border-color: #445475; scrollbar-color: #526a9f #172038; }
body.dark-mode .request-timeline article { background: #202b47; border-color: #34415f; }
body.dark-mode .request-timeline article::before { border-color: #172038; }
body.dark-mode .request-attachments-panel h3, body.dark-mode .request-timeline-panel h3, body.dark-mode .request-timeline strong { color: #edf2ff; }
@media (max-width: 760px) { .request-file-grid { grid-template-columns: 1fr; } .request-timeline-panel { grid-column: auto; } }
.filters .field {
  min-height: 76px;
  border-radius: 8px;
  padding: 10px 12px;
}

.filters .field span {
  margin-bottom: 7px;
  font-size: 9px;
  line-height: 1.25;
}

.filters .field input,
.filters .field select {
  height: 34px;
  padding: 0 10px;
}

.filters .field { grid-column: span 1; }
.global-search-field { grid-column: span 2; }
.filter-span-2,
.filter-span-3,
.filter-span-4 {
  grid-column: span 1;
}

@media (max-width: 1280px) {
  .filters {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .filters .field,
  .filter-span-2,
  .filter-span-3,
  .filter-span-4 {
    grid-column: span 1;
  }

  .global-search-field { grid-column: span 2; }
}

@media (max-width: 760px) {
  .filters {
    grid-template-columns: 1fr;
  }

  .filters .field,
  .global-search-field,
  .filter-span-2,
  .filter-span-3,
  .filter-span-4,
  .field.wide {
    grid-column: auto;
  }
}

.option-manager-card { margin-top: 20px; }
.settings-hub { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 24px; width: min(1050px, calc(100% - 40px)); margin: 34px auto; }
.settings-hub-card { min-height: 280px; padding: 34px; border: 1px solid #dce5f5; border-radius: 24px; background: #fff; box-shadow: 0 14px 36px rgba(47, 76, 139, .08); cursor: pointer; font-family: inherit; text-align: center; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.settings-hub-card:hover { transform: translateY(-5px); border-color: #91acf4; box-shadow: 0 20px 44px rgba(47, 76, 139, .15); }
.settings-hub-icon { display: grid; place-items: center; width: 112px; height: 112px; margin: 0 auto 24px; border-radius: 30px; color: #fff; background: linear-gradient(145deg, #5579fa, #2548d8); box-shadow: 0 14px 28px rgba(48, 83, 222, .28); }
.settings-hub-card.options .settings-hub-icon { background: linear-gradient(145deg, #18bfa0, #07806e); box-shadow: 0 14px 28px rgba(8, 145, 121, .25); }
.finance-hub { grid-template-columns: repeat(3, minmax(230px, 1fr)); }
.finance-hub-card.payments .settings-hub-icon { background: linear-gradient(145deg, #18bfa0, #07806e); box-shadow: 0 14px 28px rgba(8, 145, 121, .25); }
.finance-hub-card.requests .settings-hub-icon { background: linear-gradient(145deg, #5579fa, #2548d8); box-shadow: 0 14px 28px rgba(48, 83, 222, .28); }
.finance-hub-card.offices .settings-hub-icon { background: linear-gradient(145deg, #f3b73f, #d07808); box-shadow: 0 14px 28px rgba(208, 120, 8, .22); }
.finance-hub-card.treasury .settings-hub-icon { background: linear-gradient(145deg, #29b69f, #176b88); box-shadow: 0 14px 28px rgba(23, 107, 136, .24); }
.finance-panel { width: 100%; }
.settings-hub-icon svg { width: 58px; height: 58px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.settings-hub-card strong { display: block; margin-bottom: 10px; color: #213354; font-size: 25px; }
.settings-hub-card small { color: #7e8ba3; font-size: 15px; line-height: 1.8; }
.settings-panel-back { margin-bottom: 18px; border: 0; border-radius: 10px; padding: 9px 15px; color: #2457dc; background: #edf3ff; cursor: pointer; font-family: inherit; font-weight: 800; }
body.dark-mode .settings-hub-card { background: #172038; border-color: #34415f; box-shadow: none; }
body.dark-mode .settings-hub-card strong { color: #edf2ff; }
body.dark-mode .settings-hub-card:hover { border-color: #6684d4; }
.option-manager-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.option-manager-head h2 { margin: 0 0 5px; color: #253758; }
.option-manager-head p { margin: 0; color: #7a879f; }
.option-field-filter { width: min(320px, 100%); }
.option-add-form { display: grid; grid-template-columns: minmax(240px, 2fr) minmax(110px, .7fr) minmax(140px, 1fr) auto; align-items: end; gap: 12px; padding: 16px; border-radius: 14px; background: #f6f8fd; }
.option-add-form .primary-button { min-height: 48px; }
.option-list { display: grid; gap: 9px; margin-top: 16px; }
.option-row { display: grid; grid-template-columns: 14px minmax(180px, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #dce5f5; border-radius: 11px; background: #fff; }
.option-row.inactive { opacity: .58; background: #f5f6f9; }
.option-row small { color: #7d899d; }
.option-row button { border: 0; border-radius: 8px; padding: 7px 11px; cursor: pointer; font-family: inherit; font-weight: 700; color: #2457dc; background: #edf3ff; }
.option-row-actions { display: flex; gap: 5px; }
.option-row .option-delete-button { color: #c93445; background: #ffedf0; }
.password-confirm-backdrop { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 20px; background: rgba(15, 23, 42, .62); backdrop-filter: blur(3px); }
.password-confirm-card { position: relative; width: min(440px, 100%); padding: 30px; border-radius: 20px; background: #fff; box-shadow: 0 28px 70px rgba(0, 0, 0, .25); text-align: center; }
.password-confirm-close { position: absolute; top: 13px; inset-inline-end: 13px; border: 0; background: transparent; color: #8792a7; font-size: 25px; cursor: pointer; }
.password-confirm-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%; color: #fff; background: #e53949; font-size: 30px; font-weight: 800; }
.password-confirm-card h3 { margin: 0 0 8px; color: #263756; font-size: 22px; }
.password-confirm-card p { margin: 0 0 20px; color: #758198; }
.password-confirm-card .incomplete-request-fields { margin-top: -8px; padding: 10px 12px; border-radius: 12px; background: #fff7e6; color: #9a6700; font-weight: 800; line-height: 1.8; }
.password-confirm-card label { display: grid; gap: 7px; text-align: start; color: #52617b; font-weight: 700; }
.password-confirm-card input { width: 100%; min-height: 48px; padding: 10px 13px; border: 1px solid #ced9ed; border-radius: 10px; font: inherit; }
.password-confirm-actions { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
body.dark-mode .password-confirm-card { background: #172038; }
body.dark-mode .password-confirm-card h3 { color: #edf2ff; }
body.dark-mode .password-confirm-card input { color: #edf2ff; background: #111a2d; border-color: #3a4968; }
.sla-editor-backdrop { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 20px; background: rgba(15, 23, 42, .62); backdrop-filter: blur(3px); }
.sla-editor-card { position: relative; width: min(620px, 100%); padding: 28px; border-radius: 22px; background: #fff; box-shadow: 0 28px 70px rgba(0, 0, 0, .25); }
.sla-editor-close { position: absolute; top: 14px; inset-inline-end: 15px; border: 0; background: transparent; color: #8792a7; font-size: 26px; cursor: pointer; }
.sla-editor-card header { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.sla-editor-card header > span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; color: #fff; background: #315be5; font-size: 27px; }
.sla-editor-card h3 { margin: 0 0 4px; color: #263756; font-size: 22px; }
.sla-editor-card header p { margin: 0; color: #758198; }
.sla-editor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sla-editor-grid label { display: grid; gap: 8px; color: #53627b; font-weight: 700; }
.sla-editor-grid label div { display: flex; align-items: center; border: 1px solid #d3ddef; border-radius: 11px; overflow: hidden; }
.sla-editor-grid input { width: 100%; min-width: 0; min-height: 50px; padding: 10px 12px; border: 0; outline: 0; font: inherit; }
.sla-editor-grid em { padding: 0 10px; color: #8b96a9; font-style: normal; font-size: 12px; }
.sla-exclude { display: flex; align-items: center; gap: 9px; margin-top: 20px; padding: 13px; border-radius: 11px; color: #53627b; background: #f5f8fe; cursor: pointer; }
.sla-exclude input { width: 19px; height: 19px; accent-color: #315be5; }
.sla-editor-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
body.dark-mode .sla-editor-card { background: #172038; }
body.dark-mode .sla-editor-card h3 { color: #edf2ff; }
body.dark-mode .sla-editor-grid label div, body.dark-mode .sla-editor-grid input { color: #edf2ff; background: #111a2d; border-color: #3a4968; }
body.dark-mode .sla-exclude { color: #d7dff0; background: #111a2d; }
@media (max-width: 620px) { .sla-editor-grid { grid-template-columns: 1fr; } }
.notification-center-button { position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin-top: 18px; border: 1px solid rgba(255,255,255,.35); border-radius: 14px; color: #fff; background: rgba(255,255,255,.1); box-shadow: none; cursor: pointer; }
.notification-center-button:hover { background: rgba(255,255,255,.18); }
.notification-center-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.notification-center-button > span { position: absolute; top: -7px; inset-inline-start: -7px; min-width: 21px; height: 21px; padding: 0 5px; border: 3px solid #3153f4; border-radius: 20px; color: #fff; background: #e63f50; font-size: 10px; font-weight: 800; line-height: 15px; }
.notification-center-panel { position: fixed; top: 94px; z-index: 1300; width: min(480px, calc(100vw - 108px)); max-height: calc(100vh - 118px); overflow: hidden; border: 1px solid #dce5f5; border-radius: 20px; background: #fff; box-shadow: 0 25px 70px rgba(20, 36, 75, .25); }
body[data-lang="ar"] .notification-center-panel { right: 94px; }
body[data-lang="en"] .notification-center-panel { left: 94px; }
.notification-center-panel > header { display: flex; align-items: start; justify-content: space-between; gap: 15px; padding: 20px; border-bottom: 1px solid #e7edf8; }
.notification-center-panel h2 { margin: 0 0 3px; color: #233555; font-size: 21px; }
.notification-center-panel header p { margin: 0; color: #8792a6; }
.notification-center-panel header button { border: 0; background: transparent; color: #8995aa; font-size: 27px; cursor: pointer; }
.notification-center-tools { padding: 10px 16px; background: #f7f9fd; }
.notification-center-tools button { border: 0; color: #315be5; background: transparent; cursor: pointer; font-family: inherit; font-weight: 800; }
.notification-center-list { max-height: calc(100vh - 245px); overflow-y: auto; padding: 12px; display: grid; gap: 10px; }
.notification-item { padding: 14px; border: 1px solid #e0e7f4; border-inline-start: 4px solid #4e78e8; border-radius: 12px; background: #fff; }
.notification-item.overdue { border-inline-start-color: #e2a72f; }
.notification-item.urgent { border-inline-start-color: #e34855; }
.notification-item.read { opacity: .65; }
.notification-item-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.notification-item-head span { color: #315be5; font-size: 12px; font-weight: 800; }
.notification-item.overdue .notification-item-head span { color: #b47c0b; }
.notification-item.urgent .notification-item-head span { color: #d42e40; }
.notification-item time, .notification-item small { color: #8995aa; font-size: 12px; }
.notification-item > strong { display: block; color: #283958; }
.notification-item > p { margin: 6px 0; color: #68758d; font-size: 13px; line-height: 1.7; }
.notification-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.notification-actions button { border: 0; border-radius: 7px; padding: 6px 9px; color: #315be5; background: #edf3ff; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700; }
.notification-actions label { display: flex; gap: 4px; }
.notification-actions input { width: 125px; border: 1px solid #d5dff0; border-radius: 7px; padding: 4px; font: inherit; font-size: 11px; }
.notification-empty { padding: 35px 15px; color: #8792a6; text-align: center; }
body.dark-mode .notification-center-button { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); }
body.dark-mode .notification-center-panel, body.dark-mode .notification-item { color: #9db5ff; background: #172038; border-color: #34415f; }
body.dark-mode .notification-center-button > span { border-color: #172038; }
body.dark-mode .notification-center-panel h2, body.dark-mode .notification-item > strong { color: #edf2ff; }
body.dark-mode .notification-center-panel > header { border-color: #34415f; }
body.dark-mode .notification-center-tools { background: #111a2d; }
body.dark-mode .notification-actions input { color: #edf2ff; background: #111a2d; border-color: #3a4968; }
@media (max-width: 680px) { .notification-center-button { width: 42px; height: 42px; margin-top: 14px; } .notification-center-panel { top: 76px; right: 86px; left: 15px; width: auto; max-height: calc(100vh - 94px); } }
.option-color { width: 11px; height: 11px; border-radius: 50%; background: #54b47a; }
.option-color.red { background: #ee5e68; }
.option-color.yellow { background: #e7b947; }
.option-color.cyan { background: #41b8cf; }
.option-color.lavender { background: #876de0; }
body.dark-mode .option-manager-head h2 { color: #edf2ff; }
body.dark-mode .option-add-form, body.dark-mode .option-row.inactive { background: #121b2e; }
body.dark-mode .option-row { background: #172038; border-color: #34415f; }
@media (max-width: 850px) { .option-manager-head { align-items: stretch; flex-direction: column; } .option-add-form { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .settings-hub,.finance-hub { grid-template-columns: 1fr; } .settings-hub-card { min-height: 230px; } }
@media (max-width: 560px) { .option-add-form { grid-template-columns: 1fr; } .option-row { grid-template-columns: 14px 1fr auto; } .option-row small { display: none; } }
/* Reports center */
.payroll-card{margin-top:20px}.payroll-card .admin-card-head p{margin:4px 0 0;color:var(--muted)}.payroll-card .admin-card-head>div:last-child{display:flex;gap:8px}.payroll-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:18px 0}.payroll-summary>div{background:#f6f8fc;border:1px solid #e3e8f1;border-radius:12px;padding:13px}.payroll-summary span{display:block;color:#8491a7;font-size:10px}.payroll-summary strong{display:block;margin-top:5px;font-size:18px}.payroll-employees{display:grid;gap:9px;margin-top:18px}.payroll-employee{display:grid;grid-template-columns:1.4fr repeat(4,1fr) auto;align-items:center;gap:10px;border:1px solid #e1e7f0;border-radius:13px;padding:12px}.payroll-employee span{display:block;color:#8491a6;font-size:10px}.payroll-employee strong{display:block;margin-top:4px}.payroll-employee button{border:0;border-radius:9px;padding:8px 10px;background:#edf2ff;color:#3158ee;font:inherit;font-weight:800;cursor:pointer}@media(max-width:900px){.payroll-employee{grid-template-columns:1fr 1fr}.payroll-summary{grid-template-columns:repeat(2,1fr)}}

.budgeting-card{margin-top:20px}.budgeting-card .admin-card-head>div:last-child{display:flex;flex-wrap:wrap;gap:8px}.budgeting-card h3{margin:0 0 14px}.budget-toolbar{display:flex;justify-content:space-between;align-items:end;gap:15px;margin:18px 0}.budget-toolbar label{display:grid;gap:6px;min-width:260px}.budget-toolbar label span{font-size:12px;font-weight:800;color:var(--muted)}.budget-toolbar select{border:1px solid #dce4f1;border-radius:10px;padding:11px;background:var(--card);color:var(--text);font:inherit}.budget-scenarios{display:flex;background:#f1f4fa;border-radius:11px;padding:4px}.budget-scenarios button{border:0;background:transparent;color:#74819a;border-radius:8px;padding:9px 14px;font:inherit;font-weight:800;cursor:pointer}.budget-scenarios button.active{background:#3158ee;color:#fff;box-shadow:0 5px 14px #3158ee33}.budget-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}.budget-summary>div{border:1px solid #e0e7f2;border-radius:13px;padding:14px;background:#f8faff}.budget-summary span{display:block;color:#7f8ca4;font-size:11px}.budget-summary strong{display:block;margin-top:6px;font-size:18px}.budget-alerts{display:grid;gap:8px;margin-bottom:15px}.budget-alert{border-radius:10px;padding:11px 13px;font-weight:800}.budget-alert.warning{background:#fff8df;color:#8a6500}.budget-alert.danger{background:#fff0f0;color:#bd3030}.budget-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:18px}.budget-state{display:inline-block;padding:5px 8px;border-radius:99px;font-size:11px;font-weight:800}.budget-state.ok{background:#e8f8ef;color:#18834a}.budget-state.over{background:#fff0f0;color:#c73232}.cash-forecast{display:grid;gap:9px}.forecast-month{border:1px solid #e1e7f1;border-radius:12px;padding:11px}.forecast-month>div:first-child{display:flex;justify-content:space-between;gap:8px}.forecast-month span{font-weight:800;color:#17804a}.forecast-month span.negative{color:#d13737}.forecast-month small{color:#7e8aa0}.forecast-bars{height:8px;background:#eef2f8;border-radius:10px;margin:9px 0;overflow:hidden;display:flex}.forecast-bars i{background:#42b77c}.forecast-bars b{background:#ef6969}.positive{color:#18834a!important}.negative{color:#d13737!important}@media(max-width:1050px){.budget-layout{grid-template-columns:1fr}.budget-summary{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.budget-toolbar{align-items:stretch;flex-direction:column}.budget-toolbar label{min-width:0}.budget-summary{grid-template-columns:1fr}}
.treasury-card{margin-top:20px}.treasury-card .admin-card-head p{margin:4px 0 0;color:var(--muted)}.treasury-card .admin-card-head>div:last-child{display:flex;gap:8px;flex-wrap:wrap}.treasury-account-tabs{margin:16px 0 0}.treasury-accounts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:18px 0}.treasury-account{display:grid;grid-template-columns:1.4fr repeat(3,1fr) auto;gap:10px;align-items:center;border:1px solid #e0e6f0;border-radius:14px;padding:14px}.treasury-account.inactive{background:#f7f8fb;border-style:dashed;opacity:.82}.treasury-account span,.treasury-account small{display:block;color:#8693a8;font-size:10px}.treasury-account strong{display:block;margin-top:4px}.treasury-account small{max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.treasury-account-actions{justify-content:flex-end}.positive{color:#168454}.negative{color:#c33845}.reconciliation-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:16px 0}.reconciliation-summary>div{padding:12px;border-radius:11px;background:#f5f7fb}.reconciliation-summary span{display:block;color:#8491a8;font-size:10px}.reconciliation-summary strong{display:block;font-size:19px;margin-top:4px}.reconciliation-summary .matched{background:#e9f8f0;color:#168454}.reconciliation-summary .possible{background:#fff5dc;color:#a97108}.reconciliation-summary .unmatched{background:#ffedf0;color:#c33845}.reconcile-status{display:inline-block;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:800}.reconcile-status.matched{background:#e8f8ef;color:#168454}.reconcile-status.possible{background:#fff4da;color:#a76c06}.reconcile-status.unmatched{background:#ffedf0;color:#c33845}.reconcile-status.ignored{background:#eef1f5;color:#6d798d}@media(max-width:1200px){.treasury-account{grid-template-columns:1fr 1fr}.treasury-account-actions{justify-content:flex-start}}@media(max-width:900px){.treasury-accounts{grid-template-columns:1fr}}@media(max-width:600px){.reconciliation-summary{grid-template-columns:repeat(2,1fr)}}
.accounting-card{margin-top:20px}.accounting-card .admin-card-head p{margin:4px 0 0;color:var(--muted)}.accounting-card .admin-card-head>div:last-child{display:flex;gap:8px}.accounting-tabs{display:flex;gap:8px;margin:18px 0;overflow:auto}.accounting-tabs button{border:1px solid #dfe5f0;border-radius:999px;padding:8px 13px;background:#fff;color:#62718d;font:inherit;cursor:pointer;white-space:nowrap}.accounting-tabs button.active{background:#3158ee;border-color:#3158ee;color:#fff}.trial-balance-head{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}.trial-balance-head span{background:#f6f8fc;border-radius:11px;padding:12px;color:#78869e}.trial-balance-head strong{display:block;margin-top:4px;color:#263653}.trial-balance-head .balanced{background:#e8f8ef;color:#168454}.trial-balance-head .unbalanced{background:#ffedf0;color:#c33845}.chart-accounts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.chart-account-item{border:1px solid #e0e6f0;border-radius:12px;padding:12px}.chart-account-item span{color:#3158ee;font-weight:800}.chart-account-item strong,.chart-account-item small{display:block;margin-top:4px}.chart-account-item small{color:#8794a9}.income-statement{width:min(620px,100%);margin:auto;display:grid;gap:10px}.income-statement>div{display:flex;justify-content:space-between;padding:17px;border:1px solid #e1e6ef;border-radius:13px}.income-statement .net{background:#f0f3ff;border-color:#cfd8ff;font-size:18px}.income-statement .positive{color:#168454}.income-statement .negative{color:#c33845}@media(max-width:700px){.trial-balance-head,.chart-accounts-grid{grid-template-columns:1fr}}
.journal-table{table-layout:fixed;min-width:1160px}.journal-table th,.journal-table td{vertical-align:middle}.journal-table th:nth-child(1),.journal-table td:nth-child(1){width:120px}.journal-table th:nth-child(2),.journal-table td:nth-child(2){width:115px}.journal-table th:nth-child(3),.journal-table td:nth-child(3){width:240px}.journal-table th:nth-child(4),.journal-table td:nth-child(4){width:250px}.journal-table th:nth-child(5),.journal-table td:nth-child(5),.journal-table th:nth-child(6),.journal-table td:nth-child(6){width:170px}.journal-table th:nth-child(7),.journal-table td:nth-child(7){width:90px}.journal-table th:nth-child(8),.journal-table td:nth-child(8){width:95px}.journal-no,.journal-date{white-space:nowrap;color:#536381;font-weight:800}.journal-description,.journal-link{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#536381}.journal-money-cell{display:grid;gap:4px;min-width:0;justify-items:start}.journal-money-cell strong{font-size:13px;line-height:1.25;white-space:nowrap}.journal-money-cell small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8490a5;font-size:11px;line-height:1.35}.journal-table .finance-row-actions{justify-content:flex-start}
.finance-invoices-card{margin-top:20px}.finance-invoices-card .admin-card-head p{margin:4px 0 0;color:var(--muted)}.invoice-tax-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}.invoice-tax-summary div{background:#f6f8fc;border:1px solid #e3e8f1;border-radius:12px;padding:13px}.invoice-tax-summary span{display:block;color:#8491a8;font-size:11px}.invoice-tax-summary strong{display:block;margin-top:5px;font-size:18px}.invoice-items-editor{margin:10px 0}.invoice-item-row{display:grid;grid-template-columns:2fr .6fr 1fr .6fr;gap:8px}.invoice-item-row input{min-width:0;border:1px solid #dce4f1;border-radius:10px;padding:11px;font:inherit}.invoice-live-total{padding:13px;border-radius:11px;background:#eef2ff;color:#3158ee;font-weight:800;margin-bottom:14px}
.finance-two-columns{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;margin-top:20px}.finance-parties-card,.finance-aging-card{min-width:0}.finance-parties-card .admin-card-head p,.finance-aging-card .admin-card-head p{margin:4px 0 0;color:var(--muted);font-size:12px}.finance-party-filters{display:flex;gap:7px;margin:16px 0;overflow:auto}.finance-party-filters button{border:1px solid #dde5f1;border-radius:999px;padding:7px 11px;background:#fff;color:#65738e;font:inherit;font-size:11px;cursor:pointer;white-space:nowrap}.finance-party-filters button.active{background:#3158ee;color:#fff;border-color:#3158ee}.finance-parties-list,.installments-list{display:grid;gap:9px;max-height:480px;overflow:auto}.finance-party-item{border:1px solid #e1e7f1;border-radius:13px;padding:13px}.finance-party-top,.finance-party-foot{display:flex;justify-content:space-between;gap:10px;align-items:center}.finance-party-top small{display:block;color:#8692a7;margin-top:3px}.party-type{padding:4px 8px;border-radius:999px;background:#eef2ff;color:#3158ee;font-size:10px}.finance-party-numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:11px 0}.finance-party-numbers div{background:#f6f8fc;border-radius:9px;padding:8px}.finance-party-numbers span{display:block;color:#8995aa;font-size:9px}.finance-party-numbers strong{font-size:12px}.credit-warning{color:#c53842;font-size:10px;font-weight:800}.finance-party-foot button{border:0;background:transparent;color:#3158ee;font:inherit;font-size:11px;font-weight:800;cursor:pointer}.aging-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:16px 0}.aging-bucket{padding:10px 5px;border-radius:10px;background:#f5f7fb;text-align:center}.aging-bucket span{display:block;color:#8692a7;font-size:9px}.aging-bucket strong{font-size:12px}.installment-item{display:grid;grid-template-columns:1fr auto;gap:10px;border:1px solid #e2e7f1;border-radius:12px;padding:12px}.installment-item small{display:block;color:#8793a8;margin-top:4px}.installment-amount{text-align:left}.installment-amount strong,.installment-amount span{display:block}.installment-amount span{color:#c33b47;font-size:10px;margin-top:4px}.statement-print{font-family:Arial,Tahoma,sans-serif;direction:rtl;color:#22314e}.statement-print header{display:flex;justify-content:space-between;border-bottom:3px solid #3158ee;padding-bottom:15px}.statement-print table{width:100%;border-collapse:collapse;margin-top:20px;font-size:12px}.statement-print th{background:#eef2ff}.statement-print th,.statement-print td{padding:9px;border-bottom:1px solid #e2e6ed;text-align:right}@media(max-width:1000px){.finance-two-columns{grid-template-columns:1fr}}
.finance-title-card { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.finance-title-card p { margin:0 0 5px; color:var(--muted); }
.finance-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin:24px 0; }
.finance-kpi { background:var(--card); border:1px solid #e1e7f2; border-radius:18px; padding:19px; box-shadow:0 8px 24px rgba(35,56,96,.05); }
.finance-kpi span { display:block; color:#7c899f; font-size:12px; }
.finance-kpi strong { display:block; margin:6px 0; font-size:25px; }
.finance-kpi small { color:#8794aa; }
.finance-kpi.income strong { color:#158657; }.finance-kpi.expense strong { color:#d04851; }.finance-kpi.profit strong { color:#3158ee; }.finance-kpi.due strong { color:#b67a0e; }
.finance-filters { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.finance-search-field { grid-column:span 2; }
.finance-table-card,.contract-profit-card { margin-top:20px; }
.finance-table-card .admin-card-head p { margin:4px 0 0; color:var(--muted); }
.finance-type,.finance-status { display:inline-block; padding:5px 9px; border-radius:999px; font-size:11px; font-weight:800; }
.finance-type.receipt { background:#e7f8ef;color:#168454 }.finance-type.payment,.finance-type.expense,.finance-type.refund { background:#ffedf0;color:#bc3340 }
.finance-status.approved { background:#e7f8ef;color:#168454 }.finance-status.draft { background:#fff4da;color:#a86c05 }.finance-status.cancelled { background:#eef1f6;color:#6e7b91 }.finance-status.missing { background:#fff0f1;color:#c53842 }
.finance-debit { color:#168454; white-space:nowrap; }.finance-credit { color:#c53842; white-space:nowrap; }
.finance-row-actions { display:flex; gap:6px; }.finance-row-actions button { border:0;border-radius:8px;padding:7px 9px;font:inherit;font-size:11px;font-weight:800;cursor:pointer;background:#edf2ff;color:#3158ee }.finance-row-actions .print { color:#0b7f59;background:#e7f8ef }.finance-row-actions .cancel { color:#b62e3b;background:#ffedf0 }
.contract-profit-list { display:grid; gap:10px; }
.contract-profit-item { display:grid; grid-template-columns:minmax(180px,1.5fr) repeat(4,1fr); gap:12px; align-items:center; padding:14px; border:1px solid #e1e7f1; border-radius:14px; }
.contract-profit-item span { color:#7e8ba2;font-size:11px;display:block }.contract-profit-item strong { display:block;margin-top:4px }.contract-profit-item .positive { color:#168454 }.contract-profit-item .negative { color:#c53842 }
.finance-modal-backdrop { position:fixed;inset:0;z-index:1300;display:grid;place-items:center;padding:18px;background:rgba(11,21,44,.65) }.finance-modal { width:min(850px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:22px;padding:25px;color:#243451 }.finance-modal-head{display:flex;justify-content:space-between;align-items:center}.finance-modal-close{border:0;background:#eef2f8;border-radius:50%;width:36px;height:36px;font-size:22px;cursor:pointer}.finance-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:20px 0}.finance-form-grid .wide{grid-column:1/-1}.finance-modal-actions{display:flex;justify-content:flex-end;gap:10px;border-top:1px solid #e5e9f1;padding-top:16px}
.external-office-invoice-modal{width:min(940px,100%);padding:0;overflow:auto}.external-office-invoice-modal .finance-modal-head{position:sticky;top:0;z-index:3;background:#fff;padding:24px 26px 18px;border-bottom:1px solid #e7ebf3}.invoice-modal-section{padding:18px 26px;border-bottom:1px solid #edf1f6}.invoice-modal-section h3{margin:0 0 14px;color:#243451;font-size:15px}.finance-form-grid.compact{margin:0;gap:12px}.external-office-invoice-modal .sticky-actions{position:sticky;bottom:0;z-index:3;background:#fff;padding:15px 26px 20px;box-shadow:0 -14px 28px rgba(25,39,70,.06)}@media(max-width:800px){.external-office-invoice-modal .finance-modal-head{align-items:flex-start;padding:20px}.invoice-modal-section{padding:16px 20px}.external-office-invoice-modal .sticky-actions{padding:14px 20px}}
.journal-entry-modal{width:min(900px,100%);padding:28px}.journal-entry-grid{margin:18px 0 12px}.journal-side-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0 22px}.journal-side-card{border:1px solid #dfe7f2;border-radius:14px;background:#f8faff;padding:16px;display:grid;gap:12px}.journal-side-card h3{margin:0;color:#203151;font-size:15px}.journal-side-card.debit{border-top:3px solid #168454}.journal-side-card.credit{border-top:3px solid #c53842}.journal-side-card .create-field{min-height:auto;background:transparent;padding:0;border-radius:0}.journal-side-card input{height:46px;font-weight:800}.journal-side-card input::placeholder{font-weight:700;color:#9aa6ba}@media(max-width:760px){.journal-side-grid{grid-template-columns:1fr}.journal-entry-modal{padding:20px}}
.simple-finance-actions{display:flex;gap:10px;align-items:center}.simple-finance-filters{grid-template-columns:repeat(4,1fr)}.request-finance-filters{margin:14px 0 8px}.request-finance-count{justify-content:flex-start;margin:0 0 10px}.simple-finance-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);gap:18px}.finance-table td small{display:block;margin-top:4px;color:#8490a5}.simple-request-finance-list{display:grid;gap:10px;max-height:650px;overflow:auto}.simple-request-finance-item{display:grid;grid-template-columns:1.6fr repeat(4,.8fr);gap:10px;align-items:center}.simple-request-finance-item strong{white-space:nowrap}.simple-request-finance-item small{display:block;margin-top:5px;color:#8490a5;font-weight:800}.external-office-finance-card{margin-top:18px}.external-office-finance-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.external-office-finance-item{display:grid;grid-template-columns:1.4fr repeat(3,.8fr);gap:10px;align-items:center;width:100%;padding:14px;border:1px solid #e1e7f1;border-radius:14px;background:#fff;color:inherit;font:inherit;text-align:inherit;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.external-office-finance-item:hover{transform:translateY(-2px);border-color:#b9c8ee;box-shadow:0 14px 30px rgba(37,72,216,.08)}.external-office-finance-item span{display:block;color:#7e8ba2;font-size:11px}.external-office-finance-item strong{display:block;margin-top:4px;white-space:nowrap}.external-office-finance-item small{display:block;margin-top:3px;color:#8794aa}.external-office-finance-item .positive{color:#168454}.external-office-finance-item .negative{color:#c53842}.external-office-statement-card{margin-top:18px}.office-statement-head{align-items:flex-start}.office-statement-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}.office-statement-summary article{border:1px solid #e1e7f1;border-radius:14px;padding:14px;background:#f8faff}.office-statement-summary span{display:block;color:#7e8ba2;font-size:11px}.office-statement-summary strong{display:block;margin-top:5px;font-size:18px}.office-statement-summary .positive{color:#168454}.office-statement-summary .negative{color:#c53842}.office-statement-filters{margin:0 0 16px}.office-statement-table td small{display:block;margin-top:4px;color:#8490a5}.simple-finance-progress{grid-column:1/-1;height:8px;border-radius:999px;background:#eef2f8;overflow:hidden}.simple-finance-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#11b36b,#3158ee)}.simple-finance-modal{width:min(720px,100%)}
@media(max-width:800px){.finance-kpis,.finance-filters{grid-template-columns:repeat(2,1fr)}.contract-profit-item{grid-template-columns:1fr 1fr}.finance-form-grid{grid-template-columns:1fr}.finance-form-grid .wide{grid-column:auto}}
@media(max-width:1100px){.simple-finance-layout{grid-template-columns:1fr}.simple-request-finance-item,.external-office-finance-item{grid-template-columns:1fr 1fr}.external-office-finance-list{grid-template-columns:1fr}.simple-finance-actions{flex-wrap:wrap}.simple-finance-filters{grid-template-columns:repeat(2,1fr)}.office-statement-summary{grid-template-columns:1fr}}

@media (max-width: 1100px) {
  .returned-worker-form,
  .returned-filters,
  .returned-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .returned-worker-form .wide {
    grid-column: span 2;
  }
}

@media (max-width: 720px) {
  .returned-worker-form,
  .returned-filters,
  .returned-kpis {
    grid-template-columns: 1fr;
  }

  .returned-worker-form .wide {
    grid-column: auto;
  }
}
.dashboard-full-width { grid-column:1 / -1; }
.employee-performance-card { padding:24px; }
.employee-performance-head p { margin:5px 0 0; color:var(--muted); font-size:13px; }
.employee-performance-head label { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13px; }
.employee-performance-head select { min-width:145px; border:1px solid #dce4f2; border-radius:11px; padding:10px 12px; background:var(--card); color:var(--text); font:inherit; }
.employee-performance-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:20px 0; }
.employee-kpi-summary { padding:15px; border:1px solid #e2e8f3; border-radius:14px; background:#f8faff; }
.employee-kpi-summary span { display:block; color:#7e8ba4; font-size:12px; }
.employee-kpi-summary strong { display:block; margin-top:5px; font-size:23px; color:#243556; }
.employee-performance-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.employee-performance-item { border:1px solid #e0e6f1; border-radius:17px; padding:17px; background:var(--card); }
.employee-performance-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.employee-performance-user { display:flex; gap:11px; align-items:center; }
.employee-performance-avatar { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:#eaf0ff; color:#3158ee; font-weight:800; }
.employee-performance-user strong, .employee-performance-user small { display:block; }
.employee-performance-user small { color:#8793a8; margin-top:3px; }
.workload-badge { padding:6px 10px; border-radius:999px; font-size:11px; font-weight:800; white-space:nowrap; }
.workload-badge.normal { color:#168454; background:#e7f8ef; }
.workload-badge.high { color:#b47306; background:#fff4d8; }
.workload-badge.support { color:#c53842; background:#ffecef; }
.employee-performance-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:15px 0; }
.employee-performance-metrics div { padding:9px 7px; border-radius:10px; background:#f6f8fc; text-align:center; }
.employee-performance-metrics span { display:block; color:#8793a8; font-size:10px; }
.employee-performance-metrics strong { display:block; margin-top:4px; font-size:15px; }
.employee-performance-progress { height:7px; background:#e9edf5; border-radius:99px; overflow:hidden; }
.employee-performance-progress i { display:block; height:100%; background:linear-gradient(90deg,#3158ee,#55b6e8); border-radius:inherit; }
.employee-performance-foot { display:flex; justify-content:space-between; align-items:center; margin-top:12px; color:#78859d; font-size:11px; }
.employee-performance-foot button { border:0; background:transparent; color:#3158ee; font:inherit; font-weight:800; cursor:pointer; }
.data-quality-card { padding:24px; }
.data-quality-head p { margin:5px 0 0; color:var(--muted); font-size:13px; }
.data-quality-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:20px 0 14px; }
.quality-summary-item { border:1px solid #e1e7f1; border-radius:14px; padding:14px; background:#f9faff; }
.quality-summary-item span { display:block; color:#7f8ca4; font-size:12px; }
.quality-summary-item strong { display:block; margin-top:4px; font-size:22px; }
.quality-summary-item.good strong { color:#168454; }
.quality-summary-item.warn strong { color:#bd7d0c; }
.quality-summary-item.danger strong { color:#c53b46; }
.data-quality-tabs { display:flex; gap:8px; overflow:auto; padding-bottom:12px; }
.data-quality-tabs button { border:1px solid #dfe6f2; border-radius:999px; padding:8px 14px; background:#fff; color:#60708d; font:inherit; cursor:pointer; white-space:nowrap; }
.data-quality-tabs button.active { background:#3158ee; border-color:#3158ee; color:#fff; }
.data-quality-list { display:grid; gap:10px; max-height:580px; overflow:auto; padding-inline-end:4px; }
.quality-issue { display:grid; grid-template-columns:minmax(190px,1.2fr) minmax(240px,2fr) auto; align-items:center; gap:14px; padding:14px; border:1px solid #e2e7f0; border-radius:14px; background:var(--card); }
.quality-request strong,.quality-request small { display:block; }
.quality-request small { color:#8793a8; margin-top:3px; }
.quality-description { color:#52617d; font-size:13px; }
.quality-description span { display:inline-block; margin-inline-end:7px; padding:4px 8px; border-radius:8px; background:#fff1da; color:#a66a00; font-size:11px; font-weight:700; }
.quality-actions { display:flex; gap:7px; }
.quality-actions button { border:0; border-radius:9px; padding:8px 11px; font:inherit; font-weight:700; cursor:pointer; }
.quality-fix { color:#3158ee; background:#edf2ff; }
.quality-merge { color:#b52332; background:#ffedf0; }
.quality-score { margin-top:7px; display:flex; align-items:center; gap:7px; font-size:10px; color:#8390a7; }
.quality-score i { width:75px; height:5px; background:#e7ebf2; border-radius:99px; overflow:hidden; }
.quality-score i::after { content:""; display:block; height:100%; width:var(--score); background:var(--score-color,#31aa70); }
.merge-preview-backdrop { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:20px; background:rgba(12,22,44,.62); }
.merge-preview-card { width:min(760px,100%); max-height:88vh; overflow:auto; border:0; border-radius:20px; padding:24px; background:#fff; color:#253451; box-shadow:0 30px 80px rgba(0,0,0,.24); }
.merge-preview-card h3 { margin:0; }
.merge-preview-card > p { color:#74819a; }
.merge-preview-table { width:100%; border-collapse:collapse; margin:16px 0; font-size:12px; }
.merge-preview-table th,.merge-preview-table td { padding:10px; text-align:right; border-bottom:1px solid #e7ebf2; }
.merge-preview-table th { background:#f1f4fa; }
.merge-preview-actions { display:flex; justify-content:flex-end; gap:10px; }
@media (max-width:750px) { .data-quality-summary { grid-template-columns:repeat(2,1fr); } .quality-issue { grid-template-columns:1fr; } .quality-actions { justify-content:flex-start; } }
@media (max-width:900px) { .employee-performance-list { grid-template-columns:1fr; } }
@media (max-width:650px) { .employee-performance-summary,.employee-performance-metrics { grid-template-columns:repeat(2,1fr); } .employee-performance-head { align-items:flex-start; flex-direction:column; } }
.reports-title-card { display:flex; align-items:center; justify-content:space-between; }
.reports-title-card p { margin:0 0 6px; color:var(--muted); }
.report-builder-card, .report-preview-shell { margin-top:24px; }
.report-type-grid { display:grid; grid-template-columns:repeat(5,minmax(130px,1fr)); gap:12px; }
.report-type-card { min-height:128px; padding:18px 12px; border:1px solid #dce5f5; border-radius:18px; background:#f8faff; color:#243556; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; font:inherit; transition:.2s ease; }
.report-type-card span { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:#eaf0ff; color:#3158ee; font-size:22px; font-weight:800; }
.report-type-card svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.report-type-card strong { font-size:17px; }
.report-type-card small { color:#7b89a5; }
.report-type-card:hover, .report-type-card.active { border-color:#3158ee; background:#eef2ff; transform:translateY(-2px); box-shadow:0 10px 24px rgba(49,88,238,.12); }
.report-controls { display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:14px; margin-top:22px; padding-top:20px; border-top:1px solid #e6ebf4; align-items:end; }
.report-generate-button { min-height:52px; }
.report-actions > div { display:flex; gap:10px; }
.report-preview { background:#eef2f8; border-radius:18px; padding:22px; overflow:auto; }
.report-paper { width:min(100%,1050px); min-height:520px; margin:auto; background:#fff; color:#1f2b44; padding:38px; border-radius:8px; box-shadow:0 8px 30px rgba(29,44,74,.09); }
.report-paper-head { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-bottom:20px; border-bottom:3px solid #3158ee; }
.report-brand { display:flex; align-items:center; gap:14px; }
.report-brand-mark { width:58px; height:58px; border-radius:18px; display:grid; place-items:center; background:linear-gradient(145deg,#3158ee,#2344c8); color:#fff; font-size:22px; font-weight:900; overflow:hidden; }
.report-brand-mark img { width:100%; height:100%; display:block; object-fit:cover; }
.report-brand h2, .report-paper-head h1 { margin:0; }
.report-brand p, .report-paper-head p { margin:5px 0 0; color:#7b89a5; }
.report-paper-head > div:last-child { text-align:left; }
.report-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:24px 0; }
.report-stat { border:1px solid #e4e9f3; border-radius:14px; padding:14px; background:#fafbfe; }
.report-stat span { display:block; color:#7886a0; font-size:12px; }
.report-stat strong { display:block; font-size:22px; margin-top:5px; }
.report-table-wrap { overflow:auto; }
.report-table { width:100%; border-collapse:collapse; font-size:12px; }
.report-table th { background:#eef2ff; color:#2849bd; padding:11px 8px; text-align:right; white-space:nowrap; }
.report-table td { padding:10px 8px; border-bottom:1px solid #e7ebf3; vertical-align:top; }
.report-table tr:nth-child(even) td { background:#fbfcfe; }
.report-empty { padding:70px 20px; text-align:center; color:#7b89a5; }
.report-foot { display:flex; justify-content:space-between; margin-top:28px; padding-top:14px; border-top:1px solid #e4e9f3; color:#8a96aa; font-size:11px; }
@media (max-width:1050px) { .report-type-grid { grid-template-columns:repeat(3,1fr); } .report-controls { grid-template-columns:repeat(2,1fr); } }
@media (max-width:650px) { .report-type-grid, .report-controls, .report-summary { grid-template-columns:1fr; } .report-paper { padding:20px; } .report-paper-head { align-items:flex-start; flex-direction:column; } }
 .profile-avatar-button { cursor: pointer; border: 0; background-size: cover; background-position: center; }
 .profile-avatar-button.has-avatar { color: transparent; }
 .brand-mark.has-avatar { background-size: cover; background-position: center; }
 .brand-mark.has-avatar span { opacity: 0; }

.system-logo-field {
  grid-column: span 2;
}

.system-logo-control {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.system-logo-preview {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #3158ee;
  color: #fff;
  font-weight: 900;
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 24px rgba(49, 88, 238, 0.22);
}

.system-logo-preview.has-logo {
  color: transparent;
}