/* V245 — دمج 28 ملف أنماط إصلاحات في ملف واحد */


/* ===== easha-v218.css ===== */
.easha-v218-security-note,
.easha-v218-warning {
  border: 1px solid rgba(180, 35, 24, .32);
  background: rgba(180, 35, 24, .08);
  color: inherit;
  border-radius: 12px;
  padding: 10px 12px;
  margin: 0 0 12px;
  line-height: 1.7;
}

.easha-v218-security-panel,
.easha-v218-backup-panel {
  border-inline-start: 4px solid #b8923c;
}

.easha-v218-password-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.v218-inspection-section {
  margin-top: 18px;
}

@media (max-width: 800px) {
  .easha-v218-password-grid {
    grid-template-columns: 1fr;
  }
}


/* ===== easha-v218-ads-display.css ===== */
.v218-ads-hub {
  --v218-navy-950: #061b2a;
  --v218-navy-900: #082f49;
  --v218-navy-800: #0b405e;
  --v218-gold: #c9a34e;
  --v218-gold-soft: #f4e6bd;
  --v218-ink: #153244;
  --v218-muted: #667b88;
  --v218-line: #dfe8eb;
  --v218-canvas: #f3f7f8;
  color: var(--v218-ink);
  direction: rtl;
}

.v218-ads-hub *,
.v218-ads-modal *,
.v218-ads-preview-modal * {
  box-sizing: border-box;
}

.v218-ads-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.v218-ads-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 230px;
  margin-bottom: 18px;
  padding: 34px 38px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 5%, rgba(201, 163, 78, .24), transparent 30%),
    linear-gradient(118deg, #061b2a 0%, #082f49 58%, #0b405e 100%);
  box-shadow: 0 16px 36px rgba(6, 27, 42, .18);
  color: #fff;
}

.v218-ads-hero::before,
.v218-ads-hero::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.v218-ads-hero::before {
  left: -45px;
  top: -80px;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(255, 255, 255, .025), 0 0 0 110px rgba(255, 255, 255, .018);
}

.v218-ads-hero::after {
  inset: auto 45% -85px -40px;
  height: 170px;
  border-top: 1px solid rgba(201, 163, 78, .18);
  transform: rotate(-7deg);
}

.v218-ads-hero-copy,
.v218-ads-hero-actions {
  position: relative;
  z-index: 1;
}

.v218-ads-hero-copy {
  max-width: 720px;
}

.v218-ads-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #f0d58f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}

.v218-ads-eyebrow.dark {
  color: #8b6a23;
}

.v218-ads-eyebrow .v218-ads-icon {
  width: 17px;
  height: 17px;
}

.v218-ads-hero h1 {
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(28px, 3vw, 43px);
  line-height: 1.25;
  letter-spacing: -.02em;
}

.v218-ads-hero p {
  max-width: 650px;
  margin: 0;
  color: rgba(255, 255, 255, .76);
  font-size: 15px;
  line-height: 1.9;
}

.v218-ads-live {
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-top: 22px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .72);
  font-size: 11px;
  backdrop-filter: blur(10px);
}

.v218-ads-live i,
.v218-screen-workspace-head .online {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #36d392;
  box-shadow: 0 0 0 4px rgba(54, 211, 146, .15);
}

.v218-ads-live b {
  color: #fff;
  font-size: 12px;
}

.v218-ads-live span {
  color: rgba(255, 255, 255, .25);
}

.v218-ads-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  min-width: 260px;
}

.v218-ads-btn,
.v218-screen-actions button,
.v218-modal-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 11px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.v218-ads-btn:hover,
.v218-screen-actions button:hover,
.v218-modal-actions button:hover {
  transform: translateY(-1px);
}

.v218-ads-btn-gold {
  background: linear-gradient(135deg, #d7b45d, #bd9137);
  box-shadow: 0 8px 20px rgba(201, 163, 78, .2);
  color: #0c2635;
}

.v218-ads-btn-light {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.v218-ads-btn-primary {
  background: var(--v218-navy-900);
  color: #fff;
}

.v218-ads-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.v218-ads-stat {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 108px;
  padding: 18px;
  border: 1px solid var(--v218-line);
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(27, 62, 78, .05);
}

.v218-ads-stat-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #e8f2f5;
  color: var(--v218-navy-800);
}

.v218-ads-stat.active .v218-ads-stat-icon {
  background: #e6f8f0;
  color: #157253;
}

.v218-ads-stat.scheduled .v218-ads-stat-icon {
  background: #fff4df;
  color: #966d13;
}

.v218-ads-stat.screens .v218-ads-stat-icon {
  background: #e9edf8;
  color: #334e89;
}

.v218-ads-stat > div {
  display: grid;
  grid-template-columns: auto auto;
  align-items: end;
  column-gap: 8px;
}

.v218-ads-stat small {
  grid-column: 1 / -1;
  color: var(--v218-muted);
  font-size: 11px;
  font-weight: 700;
}

.v218-ads-stat strong {
  margin-top: 3px;
  color: var(--v218-ink);
  font-size: 26px;
  line-height: 1.2;
}

.v218-ads-stat > div > span {
  padding-bottom: 3px;
  color: #8a9aa3;
  font-size: 10px;
}

.v218-ads-tabs {
  display: flex;
  gap: 5px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 5px;
  border: 1px solid var(--v218-line);
  border-radius: 14px;
  background: #fff;
}

.v218-ads-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 15px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #687f8b;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.v218-ads-tabs button.active {
  background: var(--v218-navy-900);
  box-shadow: 0 5px 14px rgba(8, 47, 73, .16);
  color: #fff;
}

.v218-ads-tabs b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #eef3f5;
  color: #5e7480;
  font-size: 10px;
}

.v218-ads-tabs button.active b {
  background: rgba(255, 255, 255, .13);
  color: #fff;
}

.v218-ads-panel {
  min-height: 380px;
  padding: 22px;
  border: 1px solid var(--v218-line);
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 7px 24px rgba(27, 62, 78, .05);
}

.v218-ads-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.v218-ads-toolbar h2,
.v218-screen-workspace-head h2,
.v218-modal-head h2 {
  margin: 0;
  color: var(--v218-ink);
  font-size: 20px;
}

.v218-ads-toolbar p,
.v218-screen-workspace-head p,
.v218-modal-head p {
  margin: 5px 0 0;
  color: var(--v218-muted);
  font-size: 11px;
  line-height: 1.6;
}

.v218-ads-filters {
  display: flex;
  align-items: center;
  gap: 8px;
}

.v218-ads-search {
  display: flex;
  align-items: center;
  min-width: 250px;
  height: 41px;
  padding: 0 12px;
  border: 1px solid var(--v218-line);
  border-radius: 10px;
  background: #f9fbfc;
}

.v218-ads-search span {
  color: #8ba0aa;
  font-size: 20px;
}

.v218-ads-search input,
.v218-ads-filters select {
  height: 100%;
  border: 0 !important;
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--v218-ink);
  font: inherit;
  font-size: 11px;
}

.v218-ads-search input {
  flex: 1;
  min-width: 0;
  padding: 0 8px;
}

.v218-ads-filters select {
  height: 41px;
  padding: 0 12px;
  border: 1px solid var(--v218-line) !important;
  border-radius: 10px;
  background: #f9fbfc !important;
}

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

.v218-ad-card {
  overflow: hidden;
  border: 1px solid var(--v218-line);
  border-radius: 17px;
  background: #fff;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.v218-ad-card:hover {
  transform: translateY(-3px);
  border-color: #cadadd;
  box-shadow: 0 13px 25px rgba(24, 59, 75, .1);
}

.v218-ad-card[hidden] {
  display: none !important;
}

.v218-ad-visual {
  position: relative;
  display: grid;
  place-items: center;
  height: 150px;
  overflow: hidden;
  background:
    radial-gradient(circle at 75% 15%, rgba(255, 255, 255, .17), transparent 30%),
    linear-gradient(135deg, #082f49, #0b526d);
  color: rgba(255, 255, 255, .9);
}

.v218-ad-visual.important {
  background: linear-gradient(135deg, #6b4b0d, #b08025);
}

.v218-ad-visual.urgent {
  background: linear-gradient(135deg, #5c1820, #a5343f);
}

.v218-ad-visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v218-ad-visual-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(2, 19, 28, .02), rgba(2, 19, 28, .4));
}

.v218-ad-visual-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 20px;
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(8px);
}

.v218-ad-visual-icon .v218-ads-icon {
  width: 31px;
  height: 31px;
}

.v218-ad-status,
.v218-ad-priority {
  position: absolute;
  z-index: 2;
  top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(3, 22, 32, .55);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  backdrop-filter: blur(8px);
}

.v218-ad-status {
  right: 12px;
}

.v218-ad-status.active {
  background: rgba(13, 112, 77, .86);
}

.v218-ad-status.scheduled {
  background: rgba(152, 105, 14, .87);
}

.v218-ad-status.expired,
.v218-ad-status.inactive {
  background: rgba(71, 81, 88, .82);
}

.v218-ad-status .v218-ads-icon {
  width: 13px;
  height: 13px;
}

.v218-ad-priority {
  right: auto;
  left: 12px;
}

.v218-ad-card-body {
  padding: 16px;
}

.v218-ad-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.v218-ad-card-heading small {
  color: #8b9aa2;
  font-size: 9px;
  font-weight: 700;
}

.v218-ad-card h3 {
  margin: 4px 0 0;
  color: var(--v218-ink);
  font-size: 15px;
  line-height: 1.45;
}

.v218-icon-button {
  display: grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0 !important;
  border: 1px solid var(--v218-line);
  border-radius: 9px;
  background: #f7fafb;
  color: #536d7a;
  cursor: pointer;
}

.v218-icon-button.light {
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.v218-icon-button .v218-ads-icon {
  width: 17px;
  height: 17px;
}

.v218-ad-card-body > p {
  display: -webkit-box;
  min-height: 43px;
  margin: 11px 0;
  overflow: hidden;
  color: #637985;
  font-size: 11px;
  line-height: 1.9;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.v218-ad-meta {
  display: grid;
  gap: 6px;
  min-height: 50px;
  padding: 10px 0;
  border-top: 1px solid #edf2f3;
  color: #738792;
  font-size: 9px;
}

.v218-ad-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.v218-ad-meta .v218-ads-icon {
  width: 14px;
  height: 14px;
  color: #99aab2;
}

.v218-ad-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 11px;
  border-top: 1px solid #edf2f3;
}

.v218-ad-card-actions button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border: 0;
  border-radius: 7px;
  background: #eef4f5;
  color: #536d7a;
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.v218-ad-card-actions button.danger {
  margin-inline-start: auto;
  background: #fff0ef;
  color: #a93630;
}

.v218-ad-card-actions .v218-ads-icon {
  width: 13px;
  height: 13px;
}

.v218-ads-empty {
  display: grid;
  justify-items: center;
  max-width: 420px;
  margin: 44px auto;
  padding: 20px;
  text-align: center;
}

.v218-ads-empty[hidden] {
  display: none;
}

.v218-ads-empty > .v218-ads-icon {
  width: 52px;
  height: 52px;
  padding: 12px;
  border-radius: 15px;
  background: #edf4f6;
  color: var(--v218-navy-800);
}

.v218-ads-empty h3 {
  margin: 14px 0 4px;
  color: var(--v218-ink);
}

.v218-ads-empty p {
  margin: 0 0 14px;
  color: var(--v218-muted);
  font-size: 11px;
}

.v218-screen-manager {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  min-height: 650px;
  overflow: hidden;
  border: 1px solid var(--v218-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 7px 24px rgba(27, 62, 78, .05);
}

.v218-screen-list {
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  background: linear-gradient(180deg, #071f31, #082f49);
  color: #fff;
}

.v218-screen-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.v218-screen-list-head small {
  color: #d5b968;
  font-size: 9px;
  font-weight: 800;
}

.v218-screen-list-head h3 {
  margin: 3px 0 0;
  color: #fff;
  font-size: 16px;
}

.v218-screen-list-items {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

.v218-screen-list-item {
  position: relative;
  display: grid;
  grid-template-columns: 37px minmax(0, 1fr) 8px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 64px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, .72);
  text-align: right;
  cursor: pointer;
}

.v218-screen-list-item:hover,
.v218-screen-list-item.active {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .09);
  color: #fff;
}

.v218-screen-list-item.active::before {
  position: absolute;
  right: -14px;
  width: 3px;
  height: 31px;
  border-radius: 3px 0 0 3px;
  background: var(--v218-gold);
  content: "";
}

.v218-screen-list-item .device {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
}

.v218-screen-list-item .device .v218-ads-icon {
  width: 18px;
  height: 18px;
}

.v218-screen-list-item b,
.v218-screen-list-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v218-screen-list-item b {
  font-size: 11px;
}

.v218-screen-list-item small {
  margin-top: 4px;
  color: rgba(255, 255, 255, .45);
  font-size: 8px;
}

.v218-screen-list-item > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #36d392;
  box-shadow: 0 0 0 3px rgba(54, 211, 146, .12);
}

.v218-screen-list-item > i.off {
  background: #8ea0aa;
  box-shadow: none;
}

.v218-screen-list-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: auto;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 11px;
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .48);
}

.v218-screen-list-note .v218-ads-icon {
  width: 14px;
  height: 14px;
  color: #36d392;
}

.v218-screen-list-note p {
  margin: 0;
  font-size: 8px;
  line-height: 1.7;
}

.v218-screen-workspace {
  min-width: 0;
  padding: 22px;
  background: #f7fafb;
}

.v218-screen-workspace-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.v218-screen-workspace-head .v218-ads-eyebrow {
  margin-bottom: 5px;
}

.v218-screen-workspace-head p {
  display: flex;
  align-items: center;
  gap: 7px;
}

.v218-screen-workspace-head .online {
  display: inline-block;
  width: 6px;
  height: 6px;
  box-shadow: none;
}

.v218-screen-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.v218-screen-actions button {
  min-height: 37px;
  padding: 7px 10px;
  border-color: var(--v218-line);
  background: #fff;
  color: #5d737f;
  font-size: 9px;
}

.v218-screen-actions button.preview {
  border-color: #b9cbd1;
  color: var(--v218-navy-800);
}

.v218-screen-actions button.save {
  border-color: var(--v218-navy-900);
  background: var(--v218-navy-900);
  color: #fff;
}

.v218-screen-actions button.danger {
  color: #a93630;
}

.v218-screen-actions .v218-ads-icon {
  width: 14px;
  height: 14px;
}

.v218-screen-editor-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1.05fr) minmax(330px, .95fr);
  align-items: start;
  gap: 16px;
}

.v218-screen-preview-card,
.v218-screen-form {
  min-width: 0;
  border: 1px solid var(--v218-line);
  border-radius: 16px;
  background: #fff;
}

.v218-screen-preview-card {
  position: sticky;
  top: 12px;
  padding: 15px;
}

.v218-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.v218-section-title small {
  color: #9a7c36;
  font-size: 8px;
  font-weight: 800;
}

.v218-section-title h3 {
  margin: 2px 0 0;
  color: var(--v218-ink);
  font-size: 13px;
}

.v218-section-title > span {
  padding: 4px 7px;
  border-radius: 6px;
  background: #eef3f5;
  color: #71858f;
  font-size: 8px;
  font-weight: 800;
}

#v218ScreenPreview,
.v218-modal-screen {
  padding: 7px;
  border-radius: 13px;
  background: #071721;
}

.v218-screen-canvas {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 9px;
  background: var(--screen-bg, #082f49);
  color: var(--screen-color, #fff);
  isolation: isolate;
}

.v218-screen-bg,
.v218-screen-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.v218-screen-bg {
  z-index: -3;
  object-fit: cover;
}

.v218-screen-shade {
  z-index: -2;
  background: linear-gradient(105deg, rgba(3, 22, 33, .83), rgba(3, 22, 33, .17)), rgba(0, 0, 0, var(--screen-overlay, .34));
}

.v218-screen-brand {
  position: absolute;
  top: 8%;
  right: 5%;
  padding-right: 9px;
  border-right: 3px solid var(--v218-gold);
  color: #fff;
  font-size: clamp(9px, 1.2vw, 15px);
  font-weight: 900;
}

.v218-screen-brand small {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, .6);
  font-size: 46%;
  font-weight: 500;
}

.v218-screen-logo {
  position: absolute;
  top: 6%;
  right: 5%;
  width: 13%;
  max-height: 17%;
  object-fit: contain;
}

.v218-screen-clock {
  position: absolute;
  top: 8%;
  left: 5%;
  color: #fff;
  text-align: left;
}

.v218-screen-clock b,
.v218-screen-clock span {
  display: block;
}

.v218-screen-clock b {
  font-size: clamp(9px, 1.3vw, 16px);
}

.v218-screen-clock span {
  margin-top: 2px;
  color: rgba(255, 255, 255, .55);
  font-size: clamp(5px, .65vw, 8px);
}

.v218-screen-message {
  position: absolute;
  top: 48%;
  right: 8%;
  left: 8%;
  transform: translateY(-50%);
}

.v218-screen-message > span {
  display: inline-block;
  margin-bottom: 7px;
  padding: 3px 7px;
  border: 1px solid rgba(201, 163, 78, .5);
  border-radius: 99px;
  background: rgba(201, 163, 78, .12);
  color: #efd88d;
  font-size: clamp(5px, .55vw, 7px);
  font-weight: 800;
}

.v218-screen-message h2 {
  margin: 0;
  color: inherit;
  font-size: clamp(15px, 2.7vw, 32px);
  line-height: 1.3;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}

.v218-screen-message p {
  display: -webkit-box;
  max-width: 76%;
  margin: 5px 0 0;
  overflow: hidden;
  color: rgba(255, 255, 255, .73);
  font-size: clamp(6px, .8vw, 10px);
  line-height: 1.7;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.v218-screen-ticker {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: 13%;
  border-top: 1px solid rgba(201, 163, 78, .45);
  background: var(--ticker-bg, #071f33);
  color: #fff;
  font-size: clamp(5px, .7vw, 9px);
}

.v218-screen-ticker > b {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 3%;
  background: var(--v218-gold);
  color: #102d3b;
}

.v218-screen-ticker > div {
  flex: 1;
  min-width: 0;
  padding: 0 3%;
  overflow: hidden;
}

.v218-screen-ticker span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v218-screen-preview-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 2px 0;
  color: #71858f;
  font-size: 8px;
}

.v218-screen-preview-foot span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.v218-screen-preview-foot b {
  color: #16805d;
}

.v218-screen-preview-foot .v218-ads-icon {
  width: 13px;
  height: 13px;
}

.v218-screen-form {
  overflow: hidden;
}

.v218-screen-form details + details {
  border-top: 1px solid var(--v218-line);
}

.v218-screen-form summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  column-gap: 9px;
  padding: 13px 15px;
  list-style: none;
  cursor: pointer;
}

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

.v218-screen-form summary > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #eef4f5;
  color: var(--v218-navy-800);
}

.v218-screen-form summary .v218-ads-icon {
  width: 16px;
  height: 16px;
}

.v218-screen-form summary b {
  color: var(--v218-ink);
  font-size: 11px;
}

.v218-screen-form summary small {
  color: #8a9da6;
  font-size: 8px;
}

.v218-screen-fields,
.v218-ad-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.v218-screen-fields {
  padding: 2px 15px 16px;
}

.v218-screen-field {
  display: block;
  min-width: 0;
}

.v218-screen-field.wide {
  grid-column: 1 / -1;
}

.v218-screen-field > span {
  display: block;
  margin-bottom: 5px;
  color: #526b78;
  font-size: 8px;
  font-weight: 800;
}

.v218-screen-field input,
.v218-screen-field select,
.v218-screen-field textarea {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid #dce6e9;
  border-radius: 8px;
  outline: 0;
  background: #fbfcfd;
  color: var(--v218-ink);
  font: inherit;
  font-size: 9px;
}

.v218-screen-field input:focus,
.v218-screen-field select:focus,
.v218-screen-field textarea:focus {
  border-color: #8fb0bf;
  box-shadow: 0 0 0 3px rgba(8, 74, 106, .07);
}

.v218-screen-field textarea {
  min-height: 70px;
  resize: vertical;
  line-height: 1.7;
}

.v218-screen-field input[type="color"] {
  height: 36px;
  padding: 3px;
  cursor: pointer;
}

.v218-screen-field input[type="range"] {
  padding: 0;
  accent-color: var(--v218-navy-800);
}

.v218-file-button {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 36px;
  padding: 7px 9px;
  overflow: hidden;
  border: 1px dashed #bdcdd3;
  border-radius: 8px;
  background: #f6f9fa;
  color: #627985;
  font-size: 8px;
  cursor: pointer;
}

.v218-file-button.large {
  min-height: 48px;
  justify-content: center;
}

.v218-file-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.v218-file-button .v218-ads-icon {
  width: 15px;
  height: 15px;
}

.v218-screen-presets {
  display: flex;
  gap: 6px;
  padding: 0 15px 12px;
}

.v218-screen-presets button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid var(--v218-line);
  border-radius: 7px;
  background: #fff;
  color: #5d737f;
  font: inherit;
  font-size: 8px;
  cursor: pointer;
}

.v218-screen-presets i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.v218-ads-modal,
.v218-ads-preview-modal {
  z-index: 10050 !important;
  padding: 20px;
  background: rgba(3, 18, 27, .72) !important;
  backdrop-filter: blur(8px);
}

.v218-ads-modal .modal-box,
.v218-ads-preview-modal .modal-box {
  width: min(920px, 96vw);
  max-width: 920px;
  max-height: 92vh;
  overflow: auto;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: #f7fafb;
  box-shadow: 0 28px 75px rgba(0, 0, 0, .32);
  color: var(--v218-ink);
}

.v218-ads-preview-modal .modal-box {
  width: min(850px, 96vw);
}

.v218-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 23px 25px 18px;
  border-bottom: 1px solid var(--v218-line);
  background: #fff;
}

.v218-modal-head .v218-ads-eyebrow {
  margin-bottom: 5px;
}

.v218-modal-close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--v218-line);
  border-radius: 10px;
  background: #f7fafb;
  color: #6c818c;
  font-size: 22px;
  cursor: pointer;
}

.v218-ad-form {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
  padding: 18px;
}

.v218-ad-form > section {
  padding: 17px;
  border: 1px solid var(--v218-line);
  border-radius: 14px;
  background: #fff;
}

.v218-ad-form h3 {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #edf2f3;
  color: var(--v218-ink);
  font-size: 12px;
}

.v218-ad-form-grid {
  gap: 12px;
}

.v218-ad-form-grid .v218-screen-field > span {
  font-size: 9px;
}

.v218-ad-form-grid .v218-screen-field input,
.v218-ad-form-grid .v218-screen-field select,
.v218-ad-form-grid .v218-screen-field textarea {
  min-height: 41px;
  font-size: 10px;
}

.v218-ad-form-grid .v218-screen-field textarea {
  min-height: 82px;
}

.v218-modal-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 15px 25px;
  border-top: 1px solid var(--v218-line);
  background: rgba(255, 255, 255, .96);
}

.v218-modal-actions button {
  min-height: 40px;
  border-color: var(--v218-line);
  background: #fff;
  color: #607682;
  font-size: 10px;
}

.v218-modal-actions button.primary {
  border-color: var(--v218-navy-900);
  background: var(--v218-navy-900);
  color: #fff;
}

.v218-modal-screen {
  margin: 20px;
}

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

  .v218-screen-editor-grid {
    grid-template-columns: 1fr;
  }

  .v218-screen-preview-card {
    position: static;
  }
}

@media (max-width: 980px) {
  .v218-ads-hero {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
    padding: 28px;
  }

  .v218-ads-hero-actions {
    justify-content: flex-start;
  }

  .v218-ads-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .v218-screen-manager {
    grid-template-columns: 1fr;
  }

  .v218-screen-list {
    min-height: 0;
  }

  .v218-screen-list-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .v218-screen-list-note {
    display: none;
  }

  .v218-ad-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .v218-ads-hero {
    min-height: 0;
    padding: 24px 20px;
    border-radius: 18px;
  }

  .v218-ads-hero-actions,
  .v218-ads-hero-actions .v218-ads-btn {
    width: 100%;
  }

  .v218-ads-stats,
  .v218-ads-grid,
  .v218-screen-list-items,
  .v218-screen-fields,
  .v218-ad-form-grid {
    grid-template-columns: 1fr;
  }

  .v218-screen-field.wide {
    grid-column: auto;
  }

  .v218-ads-toolbar,
  .v218-screen-workspace-head {
    align-items: stretch;
    flex-direction: column;
  }

  .v218-ads-filters {
    align-items: stretch;
    flex-direction: column;
  }

  .v218-ads-search {
    min-width: 0;
  }

  .v218-ads-tabs {
    width: 100%;
  }

  .v218-ads-tabs button {
    flex: 1;
    justify-content: center;
    padding-inline: 8px;
  }

  .v218-screen-workspace {
    padding: 15px;
  }

  .v218-screen-actions {
    justify-content: flex-start;
  }

  .v218-ad-form {
    padding: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v218-ads-hub *,
  .v218-ads-modal *,
  .v218-ads-preview-modal * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}


/* ===== easha-v218-gate-screen.css ===== */
/* V218 — بوابة دخول داخلية عالية التباين */
.gate-overlay,
#gateOverlayBox {
  display: none !important;
}

.v218-gate-page {
  --gate-navy-950: #051a28;
  --gate-navy-900: #082f49;
  --gate-navy-800: #0b4665;
  --gate-gold: #caa84f;
  --gate-text: #163445;
  --gate-muted: #607985;
  --gate-line: #dce7ea;
  direction: rtl;
  color: var(--gate-text);
}

.v218-gate-page *,
.v218-gate-page *::before,
.v218-gate-page *::after {
  box-sizing: border-box;
}

.v218-gate-icon {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.v218-gate-topbar {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 170px;
  margin-bottom: 16px;
  padding: 28px 32px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 10% 0%, rgba(202, 168, 79, .22), transparent 30%),
    linear-gradient(120deg, var(--gate-navy-950), var(--gate-navy-900) 58%, var(--gate-navy-800));
  box-shadow: 0 16px 34px rgba(7, 42, 62, .16);
  color: #fff;
}

.v218-gate-topbar::after {
  position: absolute;
  bottom: -115px;
  left: -35px;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 50%;
  box-shadow: 0 0 0 50px rgba(255, 255, 255, .025), 0 0 0 100px rgba(255, 255, 255, .018);
  content: "";
}

.v218-gate-topbar > div {
  position: relative;
  z-index: 1;
}

.v218-gate-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  color: #eed58e;
  font-size: 11px;
  font-weight: 800;
}

.v218-gate-kicker .v218-gate-icon {
  width: 17px;
  height: 17px;
}

.v218-gate-topbar h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(27px, 3vw, 40px);
  line-height: 1.3;
  letter-spacing: -.02em;
}

.v218-gate-topbar > div > p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  line-height: 1.7;
}

.v218-gate-top-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(135px, 1fr));
  gap: 9px;
  min-width: 330px;
}

.v218-gate-top-info > div {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  min-height: 67px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 13px;
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(10px);
}

.v218-gate-top-info > div > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  color: #efd37f;
}

.v218-gate-top-info .v218-gate-icon {
  width: 18px;
  height: 18px;
}

.v218-gate-top-info small,
.v218-gate-top-info b {
  display: block;
  margin-right: 9px;
}

.v218-gate-top-info small {
  color: rgba(255, 255, 255, .55);
  font-size: 8px;
}

.v218-gate-top-info b {
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v218-gate-stage {
  display: grid;
  grid-template-columns: minmax(260px, 32%) minmax(0, 1fr);
  min-height: 530px;
  overflow: hidden;
  border: 1px solid var(--gate-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(24, 61, 79, .08);
  transition: border-color .25s ease, box-shadow .25s ease;
}

.v218-gate-stage.allowed {
  border-color: #77bfa4;
  box-shadow: 0 15px 38px rgba(19, 111, 79, .13);
}

.v218-gate-stage.denied {
  border-color: #d49191;
  box-shadow: 0 15px 38px rgba(145, 44, 44, .13);
}

.v218-gate-scan-panel {
  display: flex;
  flex-direction: column;
  padding: 26px 23px;
  border-left: 1px solid var(--gate-line);
  background: #f8fbfc;
}

.v218-gate-stage.allowed .v218-gate-scan-panel {
  background: #f3faf7;
}

.v218-gate-stage.denied .v218-gate-scan-panel {
  background: #fff7f6;
}

.v218-gate-scan-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 28px;
}

.v218-gate-scan-head > span {
  display: grid;
  place-items: center;
  width: 47px;
  height: 47px;
  border-radius: 14px;
  background: #e8f1f4;
  color: var(--gate-navy-800);
}

.v218-gate-scan-head .v218-gate-icon {
  width: 24px;
  height: 24px;
}

.v218-gate-scan-head small {
  color: #9a7b31;
  font-size: 8px;
  font-weight: 800;
}

.v218-gate-scan-head h2 {
  margin: 3px 0 0;
  color: #163445 !important;
  font-size: 15px;
}

.v218-gate-scan-panel > label {
  margin-bottom: 7px;
  color: #425e6c !important;
  font-size: 10px;
  font-weight: 800;
}

.v218-gate-scan-input {
  display: flex;
  align-items: center;
  height: 54px;
  overflow: hidden;
  border: 2px solid #b8cbd2;
  border-radius: 13px;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.v218-gate-scan-input:focus-within {
  border-color: #267398;
  box-shadow: 0 0 0 4px rgba(38, 115, 152, .1);
}

.v218-gate-scan-input > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 100%;
  color: #587482;
}

.v218-gate-scan-input .v218-gate-icon {
  width: 20px;
  height: 20px;
}

.v218-gate-scan-input input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 2px 0 12px;
  border: 0 !important;
  outline: 0;
  background: #fff !important;
  box-shadow: none !important;
  color: #102f40 !important;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
}

.v218-gate-scan-input input::placeholder {
  color: #879ba5 !important;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  opacity: 1;
}

.v218-gate-scan-button {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 49px;
  margin-top: 10px;
  padding: 10px 14px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #0b4665, #082f49);
  box-shadow: 0 8px 18px rgba(8, 47, 73, .18);
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.v218-gate-scan-button:hover {
  background: linear-gradient(135deg, #0c5578, #0a3c5a);
}

.v218-gate-scan-button span {
  text-align: right;
  font-size: 11px;
  font-weight: 900;
}

.v218-gate-scan-button small {
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 5px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .72);
  font-size: 7px;
}

.v218-gate-scan-button .v218-gate-icon {
  width: 19px;
  height: 19px;
}

.v218-gate-scan-note {
  display: flex;
  gap: 9px;
  margin-top: 18px;
  padding: 12px;
  border: 1px solid #dce8eb;
  border-radius: 11px;
  background: #f1f6f7;
  color: #536f7c;
}

.v218-gate-scan-note .v218-gate-icon {
  width: 17px;
  height: 17px;
  color: #287556;
}

.v218-gate-scan-note p {
  margin: 0;
}

.v218-gate-scan-note b,
.v218-gate-scan-note span {
  display: block;
}

.v218-gate-scan-note b {
  color: #234653;
  font-size: 9px;
}

.v218-gate-scan-note span {
  margin-top: 3px;
  color: #647d88;
  font-size: 8px;
  line-height: 1.7;
}

.v218-gate-scan-actions {
  display: grid;
  gap: 7px;
  margin-top: auto;
  padding-top: 20px;
}

.v218-gate-scan-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 37px;
  padding: 7px 10px;
  border: 1px solid #d4e0e4;
  border-radius: 9px;
  background: #fff;
  color: #516d7a;
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.v218-gate-scan-actions .v218-gate-icon {
  width: 14px;
  height: 14px;
}

.v218-gate-result {
  position: relative;
  min-width: 0;
  min-height: 530px;
  overflow: hidden;
  background: #eef4f6;
}

.v218-gate-idle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  min-height: 530px;
  padding: 45px;
  background:
    radial-gradient(circle at center, rgba(30, 95, 124, .06), transparent 35%),
    linear-gradient(145deg, #f8fbfc, #edf4f6);
  text-align: center;
}

.v218-gate-idle-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border: 1px solid #d4e3e8;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 13px 30px rgba(28, 73, 94, .09);
  color: var(--gate-navy-800);
}

.v218-gate-idle-icon::after {
  position: absolute;
  inset: -13px;
  border: 1px solid rgba(19, 89, 120, .1);
  border-radius: 35px;
  content: "";
}

.v218-gate-idle-icon .v218-gate-icon {
  width: 43px;
  height: 43px;
}

.v218-gate-idle h2 {
  margin: 27px 0 7px;
  color: #173747 !important;
  font-size: 22px;
}

.v218-gate-idle > p {
  max-width: 550px;
  margin: 0;
  color: #58727f !important;
  font-size: 11px;
  line-height: 1.9;
}

.v218-gate-idle-methods {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 22px;
}

.v218-gate-idle-methods span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid #d7e3e7;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  color: #5a7380;
  font-size: 8px;
  font-weight: 700;
}

.v218-gate-idle-methods .v218-gate-icon {
  width: 13px;
  height: 13px;
}

.v218-gate-result-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 530px;
  padding: 28px 30px 20px;
  color: #fff;
  animation: v218GateReveal .28s ease both;
  isolation: isolate;
}

.v218-gate-result-screen.allowed {
  background:
    radial-gradient(circle at 88% 15%, rgba(87, 231, 176, .14), transparent 28%),
    linear-gradient(135deg, #06382a, #07563e 60%, #08704e);
}

.v218-gate-result-screen.denied {
  background:
    radial-gradient(circle at 88% 15%, rgba(255, 142, 142, .14), transparent 28%),
    linear-gradient(135deg, #451419, #681d25 60%, #842631);
}

.v218-gate-result-screen::after {
  position: absolute;
  left: -110px;
  bottom: -130px;
  z-index: -1;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(255, 255, 255, .025), 0 0 0 110px rgba(255, 255, 255, .018);
  content: "";
}

.v218-gate-result-status {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.v218-gate-result-status > span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 2px solid rgba(255, 255, 255, .42);
  border-radius: 18px;
  background: rgba(255, 255, 255, .13);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}

.v218-gate-result-status > span .v218-gate-icon {
  width: 31px;
  height: 31px;
  stroke-width: 2.5;
}

.v218-gate-result-status small,
.v218-gate-result-status h2,
.v218-gate-result-status p {
  color: #fff !important;
}

.v218-gate-result-status small {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .03em;
  opacity: .78;
}

.v218-gate-result-status h2 {
  margin: 2px 0;
  font-size: 24px;
  line-height: 1.3;
}

.v218-gate-result-status p {
  margin: 0;
  font-size: 9px;
  opacity: .72;
}

.v218-gate-result-status time {
  align-self: start;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 7px;
  background: rgba(0, 0, 0, .11);
  color: #fff !important;
  font-size: 9px;
  font-weight: 800;
}

.v218-gate-result-main {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  padding: 23px 0 18px;
}

.v218-gate-person-photo {
  display: grid;
  place-items: center;
  width: 145px;
  height: 165px;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, .82);
  border-radius: 20px;
  background: rgba(255, 255, 255, .18);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .2);
  color: #fff;
  font-size: 42px;
  font-weight: 900;
}

.v218-gate-person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #eef4f4;
}

.v218-gate-person > small {
  color: rgba(255, 255, 255, .68) !important;
  font-size: 8px;
  font-weight: 800;
}

.v218-gate-person h1 {
  margin: 3px 0 11px;
  overflow: hidden;
  color: #fff !important;
  font-size: clamp(22px, 2.5vw, 34px);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}

.v218-gate-reason {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 11px;
  background: rgba(0, 0, 0, .13);
}

.v218-gate-reason > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

.v218-gate-reason .v218-gate-icon {
  width: 17px;
  height: 17px;
}

.v218-gate-reason small,
.v218-gate-reason strong {
  display: block;
  color: #fff !important;
}

.v218-gate-reason small {
  margin-bottom: 2px;
  font-size: 7px;
  opacity: .7;
}

.v218-gate-reason strong {
  font-size: 10px;
  line-height: 1.6;
}

.v218-gate-data-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.v218-gate-data-grid > div {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 9px;
  background: rgba(255, 255, 255, .08);
}

.v218-gate-data-grid small,
.v218-gate-data-grid strong {
  display: block;
}

.v218-gate-data-grid small {
  margin-bottom: 3px;
  color: rgba(255, 255, 255, .62) !important;
  font-size: 7px;
}

.v218-gate-data-grid strong {
  overflow: hidden;
  color: #fff !important;
  font-size: 9px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v218-gate-health {
  position: relative;
  z-index: 1;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 12px;
  color: #fff;
}

.v218-gate-health.clear {
  background: rgba(0, 0, 0, .11);
}

.v218-gate-health.warning {
  border-color: #f1c75e;
  background: #fff8df;
  color: #462f06;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}

.v218-gate-health-title {
  display: flex;
  align-items: center;
  gap: 9px;
}

.v218-gate-health-title .v218-gate-icon {
  width: 20px;
  height: 20px;
}

.v218-gate-health-title b,
.v218-gate-health-title span {
  display: block;
}

.v218-gate-health.clear .v218-gate-health-title b,
.v218-gate-health.clear .v218-gate-health-title span {
  color: #fff !important;
}

.v218-gate-health-title b {
  font-size: 9px;
}

.v218-gate-health-title span {
  margin-top: 2px;
  font-size: 7px;
  opacity: .75;
}

.v218-gate-health-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.v218-gate-health-grid > div {
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid #ead998;
  border-radius: 8px;
  background: #fffdf4;
}

.v218-gate-health-grid > div.wide,
.v218-gate-health-grid > div.alert {
  grid-column: 1 / -1;
}

.v218-gate-health-grid > div.alert {
  border-color: #db7d76;
  background: #fff0ef;
}

.v218-gate-health-grid small,
.v218-gate-health-grid strong {
  display: block;
}

.v218-gate-health-grid small {
  margin-bottom: 2px;
  color: #81651e !important;
  font-size: 7px;
}

.v218-gate-health-grid strong {
  color: #3f310e !important;
  font-size: 8px;
  line-height: 1.55;
}

.v218-gate-health-grid > div.alert small,
.v218-gate-health-grid > div.alert strong {
  color: #751d20 !important;
}

.v218-gate-result-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: auto;
  padding-top: 14px;
}

.v218-gate-result-footer > div {
  flex: 1;
}

.v218-gate-result-footer > div span {
  display: block;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, .66) !important;
  font-size: 7px;
}

.v218-gate-result-footer > div i {
  position: relative;
  display: block;
  width: 100%;
  max-width: 250px;
  height: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, .18);
}

.v218-gate-result-footer > div i::after {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #fff;
  content: "";
  transform-origin: right;
  animation: v218GateCountdown var(--gate-reset-duration, 8s) linear forwards;
}

.v218-gate-result-footer button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 9px;
  background: rgba(255, 255, 255, .12);
  color: #fff !important;
  font: inherit;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}

.v218-gate-result-footer button:hover {
  background: rgba(255, 255, 255, .2);
}

.v218-gate-result-footer .v218-gate-icon {
  width: 14px;
  height: 14px;
}

.v218-gate-history {
  margin-top: 16px;
  padding: 20px;
  border: 1px solid var(--gate-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(24, 61, 79, .05);
}

.v218-gate-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 13px;
}

.v218-gate-history-head small {
  color: #9b7b31 !important;
  font-size: 8px;
  font-weight: 800;
}

.v218-gate-history-head h2 {
  margin: 2px 0 0;
  color: #163445 !important;
  font-size: 16px;
}

.v218-gate-history-head > span {
  padding: 5px 8px;
  border-radius: 7px;
  background: #eef4f5;
  color: #667d88 !important;
  font-size: 8px;
  font-weight: 700;
}

.v218-gate-history table {
  width: 100%;
  border-collapse: collapse;
  color: #294958;
  font-size: 9px;
}

.v218-gate-history th {
  padding: 9px 8px;
  border-bottom: 1px solid #dce7ea;
  background: #f5f8f9;
  color: #536f7c !important;
  text-align: right;
  font-size: 8px;
}

.v218-gate-history td {
  padding: 9px 8px;
  border-bottom: 1px solid #edf2f3;
  color: #3e5b68 !important;
  vertical-align: middle;
}

.v218-gate-history td b {
  color: #193b4b !important;
}

.v218-gate-log-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
}

.v218-gate-log-status.allowed {
  background: #e2f6ed;
  color: #126545 !important;
}

.v218-gate-log-status.denied {
  background: #fde9e7;
  color: #94342f !important;
}

.v218-gate-log-status .v218-gate-icon {
  width: 11px;
  height: 11px;
}

.v218-gate-no-logs {
  padding: 24px;
  color: #758a94;
  text-align: center;
}

@keyframes v218GateReveal {
  from { opacity: 0; transform: scale(.985); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes v218GateCountdown {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@media (max-width: 1150px) {
  .v218-gate-stage {
    grid-template-columns: minmax(250px, 36%) minmax(0, 1fr);
  }

  .v218-gate-result-main {
    grid-template-columns: 115px minmax(0, 1fr);
  }

  .v218-gate-person-photo {
    width: 115px;
    height: 140px;
  }

  .v218-gate-data-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .v218-gate-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .v218-gate-top-info {
    width: 100%;
    min-width: 0;
  }

  .v218-gate-stage {
    grid-template-columns: 1fr;
  }

  .v218-gate-scan-panel {
    border-bottom: 1px solid var(--gate-line);
    border-left: 0;
  }

  .v218-gate-scan-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
  }

  .v218-gate-result,
  .v218-gate-idle,
  .v218-gate-result-screen {
    min-height: 500px;
  }
}

@media (max-width: 650px) {
  .v218-gate-topbar {
    min-height: 0;
    padding: 23px 20px;
    border-radius: 17px;
  }

  .v218-gate-top-info,
  .v218-gate-scan-actions,
  .v218-gate-data-grid,
  .v218-gate-health-grid {
    grid-template-columns: 1fr;
  }

  .v218-gate-stage {
    border-radius: 17px;
  }

  .v218-gate-scan-panel {
    padding: 21px 17px;
  }

  .v218-gate-result-screen {
    padding: 20px 17px 16px;
  }

  .v218-gate-result-status {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .v218-gate-result-status > span {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .v218-gate-result-status time {
    display: none;
  }

  .v218-gate-result-main {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 13px;
  }

  .v218-gate-person-photo {
    width: 86px;
    height: 105px;
    border-width: 3px;
    border-radius: 14px;
  }

  .v218-gate-person h1 {
    white-space: normal;
  }

  .v218-gate-health-grid > div.wide,
  .v218-gate-health-grid > div.alert {
    grid-column: auto;
  }

  .v218-gate-result-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .v218-gate-result-footer button {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v218-gate-page *,
  .v218-gate-page *::before,
  .v218-gate-page *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }

  .v218-gate-result-screen {
    animation: none;
  }
}


/* ===== easha-v218-catering-workflow.css ===== */
/* V218 — Catering workflow tables */
.v218-cr-page,
.v218-cr-modal {
  --cr-navy: #082f49;
  --cr-teal: #0f766e;
  --cr-teal-deep: #115e59;
  --cr-gold: #c8a44d;
  --cr-gold-soft: #f7e7b0;
  --cr-blue: #2563eb;
  --cr-green: #15803d;
  --cr-red: #b42318;
  --cr-amber: #b45309;
  --cr-ink: #f7fbfc;
  --cr-muted: #c3d5d8;
  --cr-panel: rgba(6, 39, 46, .94);
  --cr-panel-soft: rgba(255, 255, 255, .055);
  --cr-line: rgba(206, 229, 231, .18);
  color: var(--cr-ink);
}

.v218-cr-page { display: grid; gap: 16px; }
.v218-cr-page *, .v218-cr-modal * { box-sizing: border-box; }
.v218-cr-page button, .v218-cr-modal button, .v218-cr-page input, .v218-cr-page select { font: inherit; }
.v218-cr-icon { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

.v218-cr-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  min-height: 190px;
  padding: 30px 34px;
  border: 1px solid rgba(200, 164, 77, .36);
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 8% 20%, rgba(43, 177, 164, .24), transparent 34%),
    linear-gradient(132deg, #063b45 0%, #082f49 58%, #0b2533 100%);
  box-shadow: 0 18px 50px rgba(0, 19, 26, .2);
}
.v218-cr-hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset-inline-end: -56px;
  top: -72px;
  width: 270px;
  height: 270px;
  border: 46px solid rgba(200, 164, 77, .09);
  border-radius: 50%;
}
.v218-cr-eyebrow, .v218-cr-section-kicker {
  display: block;
  margin-bottom: 7px;
  color: #e7ca78;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
}
.v218-cr-hero h2 { margin: 0 0 10px; color: #fff; font-size: clamp(25px, 3vw, 36px); line-height: 1.25; }
.v218-cr-hero p { max-width: 750px; margin: 0; color: #d8e7e9; font-size: 14px; line-height: 1.9; }
.v218-cr-hero-total {
  min-width: 150px;
  padding: 21px 25px;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 18px;
  text-align: center;
  background: rgba(255, 255, 255, .09);
  backdrop-filter: blur(10px);
}
.v218-cr-hero-total span, .v218-cr-hero-total small { display: block; color: #d8e7e9; }
.v218-cr-hero-total strong { display: block; margin: 4px 0; color: #fff1bf; font-size: 37px; line-height: 1; }

.v218-cr-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.v218-cr-stat {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 92px;
  padding: 16px;
  border: 1px solid var(--cr-line);
  border-radius: 16px;
  background: var(--cr-panel);
  box-shadow: 0 8px 24px rgba(0, 20, 27, .11);
}
.v218-cr-stat-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; color: #e8cd82; background: rgba(200, 164, 77, .13); }
.v218-cr-stat strong, .v218-cr-stat small { display: block; }
.v218-cr-stat strong { color: #fff; font-size: 24px; line-height: 1.1; }
.v218-cr-stat small { margin-top: 5px; color: var(--cr-muted); font-size: 12px; }
.v218-cr-stat.is-action { border-color: rgba(200, 164, 77, .42); }
.v218-cr-stat.is-ready .v218-cr-stat-icon { color: #6ee7b7; background: rgba(16, 185, 129, .13); }
.v218-cr-stat.is-complete .v218-cr-stat-icon { color: #93c5fd; background: rgba(59, 130, 246, .13); }

.v218-cr-create { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.v218-cr-create button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 15px 17px;
  border: 1px solid rgba(70, 180, 168, .32);
  border-radius: 15px;
  color: #effcfc;
  text-align: right;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(15, 118, 110, .25), rgba(8, 47, 73, .58));
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.v218-cr-create button:hover { transform: translateY(-2px); border-color: #60c5b9; background: linear-gradient(135deg, rgba(15, 118, 110, .39), rgba(8, 47, 73, .7)); }
.v218-cr-create button.is-urgent { border-color: rgba(245, 158, 11, .43); }
.v218-cr-create button > .v218-cr-icon { width: 25px; height: 25px; color: #e7ca78; }
.v218-cr-create span, .v218-cr-create b, .v218-cr-create small { display: block; }
.v218-cr-create b { color: #fff; font-size: 14px; }
.v218-cr-create small { margin-top: 4px; color: #c9dcdf; font-size: 11px; }

.v218-cr-card {
  overflow: hidden;
  border: 1px solid var(--cr-line);
  border-radius: 18px;
  color: var(--cr-ink);
  background: var(--cr-panel);
  box-shadow: 0 10px 30px rgba(0, 20, 27, .11);
}
.v218-cr-card-heading, .v218-cr-registry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 21px 23px 16px;
}
.v218-cr-card h3, .v218-cr-registry-head h3 { margin: 0 0 5px; color: #fff; font-size: 19px; }
.v218-cr-card p, .v218-cr-registry-head p { margin: 0; color: var(--cr-muted); font-size: 12px; line-height: 1.65; }
.v218-cr-count {
  display: grid;
  place-items: center;
  min-width: 45px;
  height: 45px;
  padding: 0 10px;
  border-radius: 13px;
  color: #1e293b;
  font-size: 18px;
  font-weight: 900;
  background: #e8cb79;
}
.v218-cr-action-card { border-color: rgba(200, 164, 77, .52); }
.v218-cr-action-card .v218-cr-card-heading { background: linear-gradient(90deg, rgba(200, 164, 77, .1), transparent); }
.v218-cr-dept-count { padding: 7px 11px; border: 1px solid var(--cr-line); border-radius: 999px; color: #d8e7e9; font-size: 11px; white-space: nowrap; }

.v218-cr-legend { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 5px 23px 24px; }
.v218-cr-legend > div { position: relative; display: flex; align-items: center; gap: 9px; min-height: 52px; padding: 9px 12px; color: #e7eff0; background: rgba(255, 255, 255, .045); }
.v218-cr-legend > div:first-child { border-radius: 0 12px 12px 0; }
.v218-cr-legend > div:last-child { border-radius: 12px 0 0 12px; }
.v218-cr-legend > div:not(:last-child)::after { content: ''; position: absolute; inset-inline-start: -7px; z-index: 2; border-block: 7px solid transparent; border-inline-end: 7px solid rgba(255, 255, 255, .13); }
.v218-cr-legend span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; color: #162633; font-weight: 900; background: #dfc16c; flex: 0 0 auto; }
.v218-cr-legend b { font-size: 11px; line-height: 1.45; }

.v218-cr-filters {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 185px 210px auto;
  align-items: end;
  gap: 10px;
  padding: 0 23px 18px;
}
.v218-cr-filters label { display: grid; gap: 6px; color: #d7e5e6; font-size: 11px; font-weight: 700; }
.v218-cr-filters input, .v218-cr-filters select {
  width: 100%;
  height: 43px;
  padding: 0 12px;
  border: 1px solid rgba(211, 228, 230, .24);
  border-radius: 11px;
  outline: none;
  color: #f8ffff;
  background: rgba(0, 20, 27, .34);
}
.v218-cr-filters select option { color: #102a31; background: #fff; }
.v218-cr-filters input::placeholder { color: #9eb8bc; opacity: 1; }
.v218-cr-filters input:focus, .v218-cr-filters select:focus { border-color: #e0c06b; box-shadow: 0 0 0 3px rgba(200, 164, 77, .12); }
.v218-cr-filters .v218-cr-search { position: relative; display: block; }
.v218-cr-search .v218-cr-icon { position: absolute; inset-inline-start: 13px; top: 11px; width: 19px; height: 19px; color: #a9c3c5; pointer-events: none; }
.v218-cr-search input { padding-inline-start: 43px; }
.v218-cr-result-count { display: flex; align-items: center; justify-content: center; gap: 6px; height: 43px; padding: 0 13px; border-radius: 11px; color: #c9dcdf; font-size: 11px; background: rgba(255, 255, 255, .055); }
.v218-cr-result-count b { color: #fff0bd; font-size: 16px; }

.v218-cr-table-wrap { width: 100%; overflow: auto; border-top: 1px solid var(--cr-line); }
.v218-cr-table { width: 100%; min-width: 1250px; border-collapse: separate; border-spacing: 0; table-layout: fixed; color: #edf7f8; font-size: 11px; }
.v218-cr-table th, .v218-cr-table td { padding: 13px 12px; border: 0; border-bottom: 1px solid rgba(211, 228, 230, .12); text-align: right; vertical-align: middle; }
.v218-cr-table thead th { position: sticky; top: 0; z-index: 2; color: #f8e9b4; font-size: 10px; font-weight: 800; white-space: nowrap; background: #0a3942; }
.v218-cr-table tbody tr { background: rgba(255, 255, 255, .012); transition: background .15s ease; }
.v218-cr-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .033); }
.v218-cr-table tbody tr:hover { background: rgba(41, 160, 147, .095); }
.v218-cr-table tbody tr.is-actionable { box-shadow: inset -3px 0 #c8a44d; }
.v218-cr-table tbody tr:last-child td { border-bottom: 0; }
.v218-cr-table th:nth-child(1), .v218-cr-table td:nth-child(1) { width: 145px; }
.v218-cr-table th:nth-child(2), .v218-cr-table td:nth-child(2) { width: 170px; }
.v218-cr-table th:nth-child(3), .v218-cr-table td:nth-child(3) { width: 190px; }
.v218-cr-table th:nth-child(4), .v218-cr-table td:nth-child(4) { width: 145px; }
.v218-cr-table th:nth-child(5), .v218-cr-table td:nth-child(5) { width: 300px; }
.v218-cr-table th:nth-child(6), .v218-cr-table td:nth-child(6) { width: 190px; }
.v218-cr-table th:nth-child(7), .v218-cr-table td:nth-child(7) { width: 125px; text-align: center; }
.v218-cr-table td > b, .v218-cr-table td > small { display: block; }
.v218-cr-table td > b { color: #f8ffff; font-size: 11px; }
.v218-cr-table td > small { max-width: 210px; margin-top: 5px; overflow: hidden; color: #b9ced1; font-size: 9.5px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.v218-cr-reference { display: block; margin-bottom: 7px; padding: 0; border: 0; color: #f3d983; font-weight: 900; cursor: pointer; background: none; }
.v218-cr-reference:hover { text-decoration: underline; }
.v218-cr-priority { display: inline-flex; padding: 3px 7px; border-radius: 999px; color: #d9e6e7; font-size: 9px; background: rgba(255, 255, 255, .08); }
.v218-cr-priority.is-urgent { color: #fff3ce; background: rgba(180, 83, 9, .35); }
.v218-cr-items-count { color: #e7eff0 !important; }
.v218-cr-muted { color: #a9bfc2; }
.v218-cr-status { display: inline-flex; align-items: center; min-height: 27px; padding: 4px 9px; border: 1px solid transparent; border-radius: 999px; font-size: 9.5px; font-weight: 800; line-height: 1.35; }
.v218-cr-status.is-active { color: #fff0bd; border-color: rgba(234, 179, 8, .28); background: rgba(161, 98, 7, .24); }
.v218-cr-status.is-ready { color: #a7f3d0; border-color: rgba(52, 211, 153, .27); background: rgba(5, 150, 105, .2); }
.v218-cr-status.is-completed { color: #bfdbfe; border-color: rgba(96, 165, 250, .28); background: rgba(37, 99, 235, .2); }
.v218-cr-status.is-rejected { color: #fecaca; border-color: rgba(248, 113, 113, .28); background: rgba(185, 28, 28, .22); }
.v218-cr-open { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 10px; border: 1px solid rgba(211, 228, 230, .25); border-radius: 10px; color: #effafa; font-size: 10px; cursor: pointer; background: rgba(255, 255, 255, .055); }
.v218-cr-open .v218-cr-icon { width: 16px; height: 16px; }
.v218-cr-open:hover { border-color: #68c4ba; background: rgba(15, 118, 110, .23); }
.v218-cr-open.is-primary { color: #172735; border-color: #ddc06d; font-weight: 900; background: #e2c775; }
.v218-cr-empty td { padding: 34px !important; color: #bed0d2; text-align: center !important; }

.v218-cr-flow { display: grid; grid-template-columns: repeat(5, 1fr); direction: rtl; gap: 4px; min-width: 274px; }
.v218-cr-flow-step { position: relative; min-width: 0; text-align: center; }
.v218-cr-flow-step:not(:last-child)::after { content: ''; position: absolute; top: 11px; inset-inline-start: calc(-50% + 12px); width: calc(100% - 24px); height: 2px; background: rgba(178, 203, 206, .23); }
.v218-cr-flow-step span { position: relative; z-index: 1; display: grid; place-items: center; width: 23px; height: 23px; margin: 0 auto 5px; border: 2px solid #607b80; border-radius: 50%; color: #c1d2d4; font-size: 9px; font-weight: 900; background: #163d44; }
.v218-cr-flow-step small { display: block; overflow: hidden; color: #afc4c7; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.v218-cr-flow-step.is-completed span { color: #062b27; border-color: #5eead4; background: #5eead4; }
.v218-cr-flow-step.is-completed:not(:last-child)::after { background: #3fb5a6; }
.v218-cr-flow-step.is-current span { color: #2a230e; border-color: #f2d679; background: #f2d679; box-shadow: 0 0 0 4px rgba(242, 214, 121, .13); }
.v218-cr-flow-step.is-current small { color: #fff1bc; font-weight: 800; }
.v218-cr-flow-step.is-rejected span { color: #fff; border-color: #ef4444; background: #b91c1c; }
.v218-cr-flow-step.is-rejected small { color: #fecaca; }
.v218-cr-flow-step.is-blocked { opacity: .48; }

.v218-cr-modal { align-items: flex-start !important; padding: 2.4vh 1.5vw !important; overflow-y: auto !important; }
.v218-cr-detail-modal { width: min(1320px, 97vw) !important; max-width: 1320px !important; max-height: none !important; margin: auto; overflow: visible !important; border: 1px solid rgba(200, 164, 77, .35) !important; border-radius: 20px !important; color: var(--cr-ink) !important; background: #072c34 !important; box-shadow: 0 24px 80px rgba(0, 12, 17, .48) !important; }
.v218-cr-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 25px; border-bottom: 1px solid var(--cr-line); background: linear-gradient(120deg, rgba(15, 118, 110, .22), rgba(8, 47, 73, .45)); }
.v218-cr-modal-head h2 { margin: 0; color: #fff; font-size: 25px; }
.v218-cr-modal-head p { margin: 5px 0 0; color: #c4d8da; }
.v218-cr-detail-section { padding: 21px 25px 0; }
.v218-cr-detail-title { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.v218-cr-detail-title > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; color: #172735; font-size: 10px; font-weight: 900; background: #dfc16c; }
.v218-cr-detail-title h3 { margin: 0; color: #f8ffff; font-size: 16px; }
.v218-cr-detail-section .v218-cr-table-wrap { overflow: auto; border: 1px solid var(--cr-line); border-radius: 13px; }
.v218-cr-detail-summary, .v218-cr-detail-table { width: 100%; border-collapse: collapse; color: #edf7f8; font-size: 11px; }
.v218-cr-detail-summary th, .v218-cr-detail-summary td, .v218-cr-detail-table th, .v218-cr-detail-table td { padding: 11px 12px; border: 0; border-bottom: 1px solid rgba(211, 228, 230, .13); border-inline-start: 1px solid rgba(211, 228, 230, .11); text-align: right; vertical-align: middle; }
.v218-cr-detail-summary tr:last-child th, .v218-cr-detail-summary tr:last-child td, .v218-cr-detail-table tbody tr:last-child td { border-bottom: 0; }
.v218-cr-detail-summary th { width: 14%; color: #f5dfa0; font-size: 10px; background: rgba(255, 255, 255, .055); }
.v218-cr-detail-summary td { width: 36%; color: #fff; background: rgba(255, 255, 255, .02); }
.v218-cr-detail-table { min-width: 850px; }
.v218-cr-detail-table thead th { color: #f5dfa0; font-size: 10px; background: #0a3a43; }
.v218-cr-detail-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .028); }
.v218-cr-detail-table td > b, .v218-cr-detail-table td > small { display: block; }
.v218-cr-detail-table td > small { margin-top: 4px; color: #b8cdd0; font-size: 9px; }
.v218-cr-change { color: #ffd7a0 !important; }
.v218-cr-workflow-table { min-width: 1050px; table-layout: fixed; }
.v218-cr-workflow-table th:nth-child(1) { width: 68px; text-align: center; }
.v218-cr-workflow-table th:nth-child(2) { width: 220px; }
.v218-cr-workflow-table th:nth-child(3) { width: 125px; }
.v218-cr-workflow-table th:nth-child(4) { width: 165px; }
.v218-cr-workflow-table th:nth-child(5) { width: 180px; }
.v218-cr-workflow-table th:nth-child(6) { width: auto; }
.v218-cr-workflow-table td:first-child { text-align: center; }
.v218-cr-workflow-table tr.is-current { background: rgba(200, 164, 77, .09); }
.v218-cr-workflow-table tr.is-rejected { background: rgba(185, 28, 28, .1); }
.v218-cr-workflow-table tr.is-blocked { opacity: .6; }
.v218-cr-stage-number { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 2px solid #617f84; border-radius: 50%; color: #d5e4e5; font-size: 10px; font-weight: 900; }
tr.is-completed .v218-cr-stage-number { color: #052b26; border-color: #5eead4; background: #5eead4; }
tr.is-current .v218-cr-stage-number { color: #2c250f; border-color: #f1d375; background: #f1d375; }
tr.is-rejected .v218-cr-stage-number { color: #fff; border-color: #ef4444; background: #b91c1c; }
.v218-cr-stage-state { display: inline-flex; padding: 4px 8px; border-radius: 999px; color: #cbdadd; font-size: 9px; font-weight: 800; background: rgba(255, 255, 255, .075); }
.v218-cr-stage-state.is-completed { color: #a7f3d0; background: rgba(5, 150, 105, .21); }
.v218-cr-stage-state.is-current { color: #fff1bc; background: rgba(180, 83, 9, .26); }
.v218-cr-stage-state.is-rejected { color: #fecaca; background: rgba(185, 28, 28, .27); }
.v218-cr-rejection { margin: 18px 25px 0; padding: 13px 15px; border: 1px solid rgba(248, 113, 113, .42); border-radius: 12px; color: #fee2e2; background: rgba(153, 27, 27, .17); }
.v218-cr-rejection b, .v218-cr-rejection p { display: block; margin: 0; }
.v218-cr-rejection p { margin-top: 5px; line-height: 1.65; }
.v218-cr-next-action { margin: 20px 25px 0; padding: 13px 15px; border: 1px solid rgba(200, 164, 77, .3); border-radius: 12px; background: rgba(200, 164, 77, .08); }
.v218-cr-next-action > div { display: flex; align-items: center; gap: 10px; }
.v218-cr-next-action .v218-cr-icon { color: #e6c96f; }
.v218-cr-next-action small, .v218-cr-next-action b { display: block; }
.v218-cr-next-action small { margin-bottom: 3px; color: #c6d8da; font-size: 9px; }
.v218-cr-next-action b { color: #fff; font-size: 12px; }
.v218-cr-modal-actions { position: sticky; bottom: 0; z-index: 3; margin: 20px -1px -1px !important; padding: 15px 25px !important; border-top: 1px solid var(--cr-line); border-radius: 0 0 20px 20px; background: rgba(5, 35, 42, .97); backdrop-filter: blur(12px); }

body.mode-light .v218-cr-page,
body.mode-light .v218-cr-modal {
  --cr-ink: #102f37;
  --cr-muted: #4f686e;
  --cr-panel: #ffffff;
  --cr-panel-soft: #f4f8f8;
  --cr-line: #d9e5e6;
}
body.mode-light .v218-cr-stat strong,
body.mode-light .v218-cr-card h3,
body.mode-light .v218-cr-registry-head h3 { color: #12343b; }
body.mode-light .v218-cr-stat { box-shadow: 0 8px 24px rgba(15, 62, 70, .08); }
body.mode-light .v218-cr-create button { color: #12343b; border-color: #bddbd7; background: linear-gradient(135deg, #eef9f7, #eef5f7); }
body.mode-light .v218-cr-create b { color: #12343b; }
body.mode-light .v218-cr-create small { color: #506c71; }
body.mode-light .v218-cr-legend > div { color: #17363d; background: #f0f6f6; }
body.mode-light .v218-cr-filters input, body.mode-light .v218-cr-filters select { color: #15383f; border-color: #c8d9db; background: #fff; }
body.mode-light .v218-cr-filters input::placeholder { color: #607b80; }
body.mode-light .v218-cr-result-count { color: #456369; background: #edf4f4; }
body.mode-light .v218-cr-result-count b { color: #765d1a; }
body.mode-light .v218-cr-table { color: #15363d; }
body.mode-light .v218-cr-table thead th { color: #fff7dc; background: #0b5961; }
body.mode-light .v218-cr-table tbody tr { background: #fff; }
body.mode-light .v218-cr-table tbody tr:nth-child(even) { background: #f7fafa; }
body.mode-light .v218-cr-table tbody tr:hover { background: #edf8f6; }
body.mode-light .v218-cr-table td > b { color: #14363d; }
body.mode-light .v218-cr-table td > small { color: #536e73; }
body.mode-light .v218-cr-reference { color: #765b13; }
body.mode-light .v218-cr-priority { color: #3d555a; background: #e9f0f1; }
body.mode-light .v218-cr-status.is-active { color: #7c4a03; background: #fff4d6; }
body.mode-light .v218-cr-status.is-ready { color: #087044; background: #e0f8ec; }
body.mode-light .v218-cr-status.is-completed { color: #1d4f91; background: #e8f1ff; }
body.mode-light .v218-cr-status.is-rejected { color: #a31f18; background: #feeceb; }
body.mode-light .v218-cr-open { color: #15363d; border-color: #b8cccf; background: #fff; }
body.mode-light .v218-cr-flow-step span { color: #536f74; border-color: #8ba3a7; background: #fff; }
body.mode-light .v218-cr-flow-step small { color: #49666b; }
body.mode-light .v218-cr-flow-step.is-current small { color: #735710; }
body.mode-light .v218-cr-flow-step.is-current span { color: #3a2d08; }
body.mode-light .v218-cr-detail-modal { color: #17363d !important; background: #f8fbfb !important; }
body.mode-light .v218-cr-modal-head { background: linear-gradient(120deg, #e7f6f3, #edf4f8); }
body.mode-light .v218-cr-modal-head h2, body.mode-light .v218-cr-detail-title h3 { color: #12343b; }
body.mode-light .v218-cr-modal-head p { color: #4b696f; }
body.mode-light .v218-cr-detail-summary, body.mode-light .v218-cr-detail-table { color: #17363d; }
body.mode-light .v218-cr-detail-summary th, body.mode-light .v218-cr-detail-table thead th { color: #fff7dc; background: #0b5961; }
body.mode-light .v218-cr-detail-summary td { color: #15363d; background: #fff; }
body.mode-light .v218-cr-detail-table tbody tr:nth-child(even) { background: #f2f7f7; }
body.mode-light .v218-cr-modal-actions { background: rgba(248, 251, 251, .97); }
body.mode-light .v218-cr-next-action b { color: #193940; }

@media (max-width: 1180px) {
  .v218-cr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v218-cr-filters { grid-template-columns: minmax(260px, 1fr) 1fr 1fr; }
  .v218-cr-result-count { grid-column: 1 / -1; }
  .v218-cr-legend { grid-template-columns: 1fr; gap: 5px; }
  .v218-cr-legend > div, .v218-cr-legend > div:first-child, .v218-cr-legend > div:last-child { border-radius: 10px; }
  .v218-cr-legend > div::after { display: none; }
}

@media (max-width: 760px) {
  .v218-cr-hero { grid-template-columns: 1fr; padding: 24px 20px; }
  .v218-cr-hero-total { min-width: 0; }
  .v218-cr-create, .v218-cr-stats { grid-template-columns: 1fr; }
  .v218-cr-filters { grid-template-columns: 1fr; padding-inline: 15px; }
  .v218-cr-card-heading, .v218-cr-registry-head { align-items: flex-start; padding-inline: 15px; }
  .v218-cr-detail-modal { width: 98vw !important; }
  .v218-cr-modal-head { align-items: flex-start; padding: 19px 17px; }
  .v218-cr-detail-section { padding-inline: 15px; }
  .v218-cr-detail-summary { min-width: 720px; }
  .v218-cr-next-action { margin-inline: 15px; }
  .v218-cr-modal-actions { padding-inline: 15px !important; }
}


/* ===== easha-v218-shifts.css ===== */
/* V218 — Fast monthly shift management interface */
.v218-shifts-page,
.v218-shift-modal {
  --shift-panel: rgba(6, 39, 46, .95);
  --shift-panel-soft: rgba(255, 255, 255, .055);
  --shift-line: rgba(204, 226, 229, .18);
  --shift-text: #f5fbfc;
  --shift-muted: #bdd1d4;
  --shift-gold: #dfc16b;
  --shift-teal: #2ba99b;
  --shift-red: #ef7770;
  color: var(--shift-text);
}
.v218-shifts-page { display: grid; gap: 15px; }
.v218-shifts-page *, .v218-shift-modal * { box-sizing: border-box; }
.v218-shift-icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

.v218-shifts-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 170px;
  padding: 27px 31px;
  border: 1px solid rgba(223, 193, 107, .38);
  border-radius: 21px;
  color: #fff;
  background: radial-gradient(circle at 12% 18%, rgba(43, 169, 155, .26), transparent 34%), linear-gradient(132deg, #063b45, #082f49 58%, #0b2633);
  box-shadow: 0 17px 45px rgba(0, 18, 25, .17);
}
.v218-shifts-hero::after { content: ''; position: absolute; inset-inline-end: -60px; top: -80px; width: 250px; height: 250px; border: 43px solid rgba(223, 193, 107, .075); border-radius: 50%; pointer-events: none; }
.v218-shifts-hero > div { position: relative; z-index: 1; }
.v218-shifts-hero span { display: block; margin-bottom: 7px; color: #ead084; font-size: 11px; font-weight: 900; }
.v218-shifts-hero h2 { margin: 0 0 9px; color: #fff; font-size: clamp(24px, 3vw, 34px); }
.v218-shifts-hero p { max-width: 760px; margin: 0; color: #d9e7e9; font-size: 13px; line-height: 1.8; }
.v218-shifts-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.v218-shifts-hero-actions button { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 9px 14px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 11px; color: #fff; cursor: pointer; background: rgba(255, 255, 255, .08); }
.v218-shifts-hero-actions button.primary { color: #1c2b32; border-color: #e5ca78; font-weight: 900; background: #e5ca78; }

.v218-shifts-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.v218-shifts-stats > div { display: grid; grid-template-columns: 43px 1fr; grid-template-rows: auto auto; column-gap: 11px; align-items: center; min-height: 82px; padding: 14px 15px; border: 1px solid var(--shift-line); border-radius: 15px; background: var(--shift-panel); box-shadow: 0 8px 24px rgba(0, 18, 25, .1); }
.v218-shifts-stats > div > span { grid-row: 1 / 3; display: grid; place-items: center; width: 43px; height: 43px; border-radius: 12px; color: #ead080; background: rgba(223, 193, 107, .12); }
.v218-shifts-stats b { align-self: end; color: #fff; font-size: 21px; }
.v218-shifts-stats small { align-self: start; margin-top: 3px; color: var(--shift-muted); font-size: 10px; }

.v218-shifts-workflow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--shift-line); border-radius: 14px; background: var(--shift-panel); }
.v218-shifts-workflow > div { position: relative; display: flex; align-items: center; gap: 9px; min-height: 59px; padding: 10px 13px; border-inline-start: 1px solid var(--shift-line); }
.v218-shifts-workflow > div:first-child { border-inline-start: 0; }
.v218-shifts-workflow b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #16262e; font-size: 11px; background: #dfc16b; flex: 0 0 auto; }
.v218-shifts-workflow span { color: #e6f0f1; font-size: 10px; font-weight: 800; line-height: 1.45; }

.v218-shifts-registry { overflow: hidden; border: 1px solid var(--shift-line); border-radius: 18px; background: var(--shift-panel); box-shadow: 0 10px 30px rgba(0, 18, 25, .11); }
.v218-shifts-registry-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 20px 22px; border-bottom: 1px solid var(--shift-line); }
.v218-shifts-registry-head h3 { margin: 0 0 5px; color: #fff; font-size: 18px; }
.v218-shifts-registry-head p { margin: 0; color: var(--shift-muted); font-size: 11px; }
.v218-shifts-registry-head label { position: relative; display: flex; align-items: center; min-width: 310px; }
.v218-shifts-registry-head label .v218-shift-icon { position: absolute; inset-inline-start: 12px; color: #a8bec1; }
.v218-shifts-registry-head input { width: 100%; height: 42px; padding: 0 42px; border: 1px solid rgba(204, 226, 229, .22); border-radius: 11px; outline: none; color: #f8ffff; background: rgba(0, 20, 27, .34); }
.v218-shifts-registry-head input::placeholder { color: #a8bec1; opacity: 1; }
.v218-shifts-registry-head label > span { position: absolute; inset-inline-end: 11px; display: grid; place-items: center; min-width: 23px; height: 23px; padding: 0 5px; border-radius: 7px; color: #182832; font-size: 10px; font-weight: 900; background: #dec16d; }
.v218-shift-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; }
.v218-shift-card { overflow: hidden; border: 1px solid rgba(204, 226, 229, .16); border-radius: 15px; background: rgba(255, 255, 255, .025); }
.v218-shift-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 17px; }
.v218-shift-card-top h3 { margin: 9px 0 5px; color: #fff; font-size: 15px; line-height: 1.45; }
.v218-shift-card-top p { margin: 0; color: #bed1d4; font-size: 10px; }
.v218-shift-card-days { min-width: 58px; padding: 10px; border-radius: 12px; text-align: center; background: rgba(223, 193, 107, .1); }
.v218-shift-card-days b, .v218-shift-card-days small { display: block; }
.v218-shift-card-days b { color: #f5d986; font-size: 21px; }
.v218-shift-card-days small { margin-top: 2px; color: #cbdadc; font-size: 9px; }
.v218-shift-status { display: inline-flex; padding: 4px 8px; border: 1px solid transparent; border-radius: 999px; font-size: 9px; font-weight: 900; }
.v218-shift-status.is-draft { color: #d9e7e9; border-color: rgba(201, 218, 221, .18); background: rgba(255, 255, 255, .07); }
.v218-shift-status.is-sent { color: #ffe9a7; border-color: rgba(245, 190, 72, .28); background: rgba(180, 83, 9, .2); }
.v218-shift-status.is-approved { color: #a7f3d0; border-color: rgba(52, 211, 153, .28); background: rgba(5, 150, 105, .19); }
.v218-shift-status.is-returned { color: #fecaca; border-color: rgba(248, 113, 113, .28); background: rgba(185, 28, 28, .2); }
.v218-shift-card-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border-block: 1px solid var(--shift-line); background: var(--shift-line); }
.v218-shift-card-meta span { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 43px; padding: 7px 5px; color: #c9dadc; font-size: 9px; text-align: center; background: #0b3941; }
.v218-shift-card-meta .v218-shift-icon { width: 14px; height: 14px; color: #d9bd69; }
.v218-shift-card-meta b { color: #fff; }
.v218-shift-card-meta span.is-ready { color: #9eebc5; }
.v218-shift-card-meta span.is-warning { color: #ffdaa3; }
.v218-shift-return-reason { margin: 12px 15px 0; padding: 9px 11px; border: 1px solid rgba(248, 113, 113, .27); border-radius: 10px; color: #fee2e2; font-size: 10px; background: rgba(153, 27, 27, .13); }
.v218-shift-card-actions { display: flex; flex-wrap: wrap; gap: 7px; padding: 14px 15px; }
.v218-shift-card-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 35px; padding: 6px 9px; border: 1px solid rgba(204, 226, 229, .22); border-radius: 9px; color: #edf8f9; font-size: 9.5px; cursor: pointer; background: rgba(255, 255, 255, .05); }
.v218-shift-card-actions button:hover { border-color: #54b6aa; background: rgba(43, 169, 155, .14); }
.v218-shift-card-actions button.is-primary { color: #182832; border-color: #e1c46f; font-weight: 900; background: #e1c46f; }
.v218-shift-card-actions button.is-danger { color: #fecaca; border-color: rgba(248, 113, 113, .3); background: rgba(185, 28, 28, .13); }
.v218-shift-card-actions button.is-icon-only { width: 35px; padding: 0; margin-inline-start: auto; }
.v218-shift-card-actions .v218-shift-icon { width: 15px; height: 15px; }
.v218-shifts-empty { grid-column: 1 / -1; padding: 42px 20px; color: #bdd0d2; text-align: center; }

.v218-shift-modal { align-items: flex-start !important; padding: 2vh 1.3vw !important; overflow-y: auto !important; }
.v218-shift-config-modal, .v218-shift-builder-modal, .v218-shift-preview-modal { width: min(1320px, 98vw) !important; max-width: 1320px !important; max-height: none !important; margin: auto; overflow: visible !important; border: 1px solid rgba(223, 193, 107, .35) !important; border-radius: 19px !important; color: var(--shift-text) !important; background: #072c34 !important; box-shadow: 0 24px 80px rgba(0, 12, 17, .5) !important; }
.v218-shift-builder-modal, .v218-shift-preview-modal { width: min(1540px, 99vw) !important; max-width: 1540px !important; }
.v218-shift-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 21px 24px; border-bottom: 1px solid var(--shift-line); background: linear-gradient(120deg, rgba(43, 169, 155, .19), rgba(8, 47, 73, .43)); }
.v218-shift-modal-head > div:first-child > span { display: block; margin-bottom: 5px; color: #e6c977; font-size: 10px; font-weight: 900; }
.v218-shift-modal-head h2 { margin: 0 0 5px; color: #fff; font-size: 22px; }
.v218-shift-modal-head p { margin: 0; color: #c5d8da; font-size: 11px; line-height: 1.6; }
.v218-shift-modal-head > button, .v218-shift-preview-actions button { min-height: 37px; padding: 7px 11px; border: 1px solid rgba(204, 226, 229, .24); border-radius: 9px; color: #f1f9fa; cursor: pointer; background: rgba(255, 255, 255, .055); }
.v218-shift-modal-body, .v218-shift-builder-body { display: grid; gap: 15px; padding: 19px 22px 25px; }
.v218-shift-form-section, .v218-shift-builder-section { overflow: hidden; border: 1px solid var(--shift-line); border-radius: 14px; background: rgba(255, 255, 255, .022); }
.v218-shift-section-title { padding: 14px 16px; border-bottom: 1px solid var(--shift-line); background: rgba(255, 255, 255, .035); }
.v218-shift-section-title b, .v218-shift-section-title small { display: block; }
.v218-shift-section-title b { color: #fff; font-size: 14px; }
.v218-shift-section-title small { margin-top: 4px; color: var(--shift-muted); font-size: 9.5px; }
.v218-shift-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 16px; }
.v218-shift-form-grid label { display: grid; gap: 6px; min-width: 0; }
.v218-shift-form-grid label.is-wide { grid-column: span 2; }
.v218-shift-form-grid label span, .v218-shift-period-input label { color: #d5e4e6; font-size: 10px; font-weight: 800; }
.v218-shift-form-grid input, .v218-shift-form-grid select, .v218-shift-form-grid textarea, .v218-shift-period-input input, .v218-shift-membership, .v218-shift-rotation-controls select, .v218-shift-builder-tools input { width: 100%; border: 1px solid rgba(204, 226, 229, .22); border-radius: 9px; outline: none; color: #f8ffff; background: rgba(0, 20, 27, .35); }
.v218-shift-form-grid input, .v218-shift-form-grid select, .v218-shift-period-input input, .v218-shift-membership, .v218-shift-rotation-controls select { height: 40px; padding: 0 10px; }
.v218-shift-form-grid textarea { min-height: 82px; padding: 10px; line-height: 1.6; resize: vertical; }
.v218-shift-form-grid select option, .v218-shift-membership option, .v218-shift-rotation-controls option { color: #17343b; background: #fff; }
.v218-shift-form-grid input:focus, .v218-shift-form-grid select:focus, .v218-shift-form-grid textarea:focus, .v218-shift-period-input input:focus, .v218-shift-membership:focus { border-color: #dec16d; box-shadow: 0 0 0 3px rgba(223, 193, 107, .11); }
.v218-shift-period-inputs { display: grid; gap: 8px; padding: 14px 16px; }
.v218-shift-period-input { display: grid; grid-template-columns: 1.2fr .8fr .8fr 1.3fr; align-items: end; gap: 10px; padding: 11px; border: 1px solid rgba(204, 226, 229, .13); border-radius: 11px; background: rgba(255, 255, 255, .025); }
.v218-shift-period-input > div { display: grid; gap: 6px; }
.v218-shift-time-preview { min-height: 40px; align-content: center; padding: 7px 10px; border-radius: 9px; text-align: center; background: rgba(223, 193, 107, .09); }
.v218-shift-time-preview small, .v218-shift-time-preview b { display: block; }
.v218-shift-time-preview small { color: #c2d5d7; font-size: 8px; }
.v218-shift-time-preview b { margin-top: 3px; color: #f4db90; font-size: 10px; }
.v218-shift-advanced { overflow: hidden; border: 1px solid var(--shift-line); border-radius: 14px; background: rgba(255, 255, 255, .02); }
.v218-shift-advanced summary { padding: 15px 17px; color: #f4d987; font-size: 12px; font-weight: 900; cursor: pointer; background: rgba(223, 193, 107, .065); }
.v218-shift-sticky-actions { position: sticky; z-index: 6; bottom: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 -1px -1px; padding: 13px 22px; border-top: 1px solid var(--shift-line); border-radius: 0 0 19px 19px; background: rgba(5, 35, 42, .97); backdrop-filter: blur(12px); }
.v218-shift-sticky-actions button { min-height: 39px; padding: 8px 13px; border: 1px solid rgba(204, 226, 229, .23); border-radius: 9px; color: #f3fbfc; cursor: pointer; background: rgba(255, 255, 255, .055); }
.v218-shift-sticky-actions button.primary { color: #182832; border-color: #e1c46f; font-weight: 900; background: #e1c46f; }

.v218-shift-builder-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border-bottom: 1px solid var(--shift-line); background: var(--shift-line); }
.v218-shift-builder-summary > div { display: grid; grid-template-columns: 35px auto 1fr; align-items: center; gap: 7px; min-height: 62px; padding: 10px 15px; background: #0a343c; }
.v218-shift-builder-summary > div > span { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; color: #e5cb7b; background: rgba(223, 193, 107, .1); }
.v218-shift-builder-summary b { color: #fff; font-size: 18px; }
.v218-shift-builder-summary small { color: #bcd0d3; font-size: 9px; }
.v218-shift-builder-section-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 16px; border-bottom: 1px solid var(--shift-line); background: rgba(255, 255, 255, .035); }
.v218-shift-builder-section-head > div:first-child > b, .v218-shift-builder-section-head > div:first-child > small { display: block; }
.v218-shift-builder-section-head > div:first-child > b { color: #fff; font-size: 14px; }
.v218-shift-builder-section-head > div:first-child > small { max-width: 720px; margin-top: 4px; color: var(--shift-muted); font-size: 9.5px; line-height: 1.55; }
.v218-shift-builder-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.v218-shift-builder-tools label { position: relative; min-width: 260px; }
.v218-shift-builder-tools label .v218-shift-icon { position: absolute; inset-inline-start: 10px; top: 9px; color: #a9bfc2; }
.v218-shift-builder-tools input { height: 37px; padding: 0 38px 0 10px; }
.v218-shift-builder-tools button, .v218-shift-builder-section-head > button, .v218-shift-rotation-controls button { min-height: 37px; padding: 7px 10px; border: 1px solid rgba(204, 226, 229, .22); border-radius: 9px; color: #edf8f9; font-size: 9.5px; cursor: pointer; background: rgba(255, 255, 255, .055); }
.v218-shift-builder-tools button.is-smart, .v218-shift-builder-section-head > button.is-smart { color: #192931; border-color: #dec16d; font-weight: 900; background: #dec16d; }
.v218-shift-employee-table-wrap { max-height: 440px; overflow: auto; }
.v218-shift-employee-table { width: 100%; min-width: 950px; border-collapse: separate; border-spacing: 0; color: #ecf7f8; font-size: 10px; }
.v218-shift-employee-table th, .v218-shift-employee-table td { padding: 9px 10px; border: 0; border-bottom: 1px solid rgba(204, 226, 229, .12); text-align: right; vertical-align: middle; }
.v218-shift-employee-table thead th { position: sticky; z-index: 3; top: 0; color: #f5e1a5; font-size: 9px; background: #0a3b43; }
.v218-shift-employee-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .025); }
.v218-shift-employee-table tbody tr:hover { background: rgba(43, 169, 155, .075); }
.v218-shift-employee-table td b, .v218-shift-employee-table td small { display: block; }
.v218-shift-employee-table td b { color: #fff; }
.v218-shift-employee-table td small { margin-top: 3px; color: #b6cccf; font-size: 8.5px; }
.v218-shift-employee-table input[type=checkbox] { width: 18px; height: 18px; accent-color: #27a595; }
.v218-shift-membership { min-width: 135px; height: 35px; font-size: 9px; }
.v218-shift-membership:disabled { opacity: .45; }

.v218-shift-day-block { margin: 12px; overflow: hidden; border: 1px solid rgba(204, 226, 229, .14); border-radius: 12px; background: rgba(255, 255, 255, .018); }
.v218-shift-day-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-bottom: 1px solid rgba(204, 226, 229, .13); }
.v218-shift-day-head > div:first-child > b, .v218-shift-day-head > div:first-child > small { display: block; }
.v218-shift-day-head > div:first-child > b { color: #fff; font-size: 12px; }
.v218-shift-day-head > div:first-child > small { margin-top: 3px; color: #d8bd6e; font-size: 9px; }
.v218-shift-rotation-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 7px; }
.v218-shift-rotation-controls label { display: grid; gap: 4px; color: #c4d7d9; font-size: 8.5px; }
.v218-shift-rotation-controls select { min-width: 120px; height: 35px; font-size: 9px; }
.v218-shift-days-scroll { overflow-x: auto; }
.v218-shift-days-table { min-width: max-content; border-collapse: separate; border-spacing: 0; color: #edf8f9; font-size: 9px; }
.v218-shift-days-table th, .v218-shift-days-table td { min-width: 47px; padding: 7px 5px; border-inline-start: 1px solid rgba(204, 226, 229, .12); border-bottom: 1px solid rgba(204, 226, 229, .12); text-align: center; }
.v218-shift-days-table th.is-label { position: sticky; z-index: 2; inset-inline-start: 0; min-width: 125px; color: #f1d681; background: #0a3a43; }
.v218-shift-days-table thead th { color: #dcebed; background: rgba(255, 255, 255, .045); }
.v218-shift-days-table thead th span, .v218-shift-days-table thead th b { display: block; }
.v218-shift-days-table thead th span { max-width: 44px; overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.v218-shift-days-table thead th b { margin-top: 3px; color: #f0d57f; font-size: 11px; }
.v218-shift-day-cell button { display: grid; place-items: center; width: 29px; height: 29px; margin: auto; padding: 0; border: 1px solid rgba(79, 209, 193, .36); border-radius: 9px; color: #a9f0e7; font-weight: 900; cursor: pointer; background: rgba(15, 118, 110, .2); }
.v218-shift-day-cell button:hover { color: #15262e; border-color: #e1c46f; background: #e1c46f; }

.v218-shift-preview-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.v218-shift-preview-actions button { display: inline-flex; align-items: center; gap: 6px; }
.v218-shift-preview-actions button.primary { color: #192931; border-color: #e1c46f; font-weight: 900; background: #e1c46f; }
.v218-shift-preview-actions button:disabled { cursor: not-allowed; opacity: .45; }
.v218-shift-preview-stage { max-width: 100%; overflow: auto; padding: 18px; border-radius: 0 0 19px 19px; background: #7c8788; }
.v218-shift-preview-stage .v218-shift-official-sheet { margin: auto; box-shadow: 0 9px 30px rgba(0, 0, 0, .3); }

body.mode-light .v218-shifts-page,
body.mode-light .v218-shift-modal { --shift-panel: #fff; --shift-panel-soft: #f3f7f7; --shift-line: #d6e2e4; --shift-text: #15353c; --shift-muted: #536c72; }
body.mode-light .v218-shifts-stats b, body.mode-light .v218-shifts-registry-head h3, body.mode-light .v218-shift-card-top h3 { color: #15353c; }
body.mode-light .v218-shifts-workflow span { color: #193a41; }
body.mode-light .v218-shifts-registry-head input { color: #15353c; border-color: #c7d8da; background: #fff; }
body.mode-light .v218-shifts-registry-head input::placeholder { color: #647c81; }
body.mode-light .v218-shift-card { background: #f9fbfb; }
body.mode-light .v218-shift-card-meta span { color: #4e696f; background: #f0f5f5; }
body.mode-light .v218-shift-card-meta b { color: #16373e; }
body.mode-light .v218-shift-card-actions button { color: #17383f; border-color: #c2d4d6; background: #fff; }
body.mode-light .v218-shift-config-modal, body.mode-light .v218-shift-builder-modal, body.mode-light .v218-shift-preview-modal { color: #17373e !important; background: #f7fafa !important; }
body.mode-light .v218-shift-modal-head { background: linear-gradient(120deg, #e8f6f4, #edf4f7); }
body.mode-light .v218-shift-modal-head h2, body.mode-light .v218-shift-section-title b, body.mode-light .v218-shift-builder-section-head > div:first-child > b, body.mode-light .v218-shift-day-head > div:first-child > b { color: #15353c; }
body.mode-light .v218-shift-modal-head p { color: #526e74; }
body.mode-light .v218-shift-form-grid label span, body.mode-light .v218-shift-period-input label { color: #35575e; }
body.mode-light .v218-shift-form-grid input, body.mode-light .v218-shift-form-grid select, body.mode-light .v218-shift-form-grid textarea, body.mode-light .v218-shift-period-input input, body.mode-light .v218-shift-membership, body.mode-light .v218-shift-rotation-controls select, body.mode-light .v218-shift-builder-tools input { color: #17383f; border-color: #c5d7d9; background: #fff; }
body.mode-light .v218-shift-employee-table { color: #17383f; }
body.mode-light .v218-shift-employee-table thead th { color: #fff7dc; background: #0b5961; }
body.mode-light .v218-shift-employee-table tbody tr:nth-child(even) { background: #f2f6f6; }
body.mode-light .v218-shift-employee-table td b { color: #17383f; }
body.mode-light .v218-shift-builder-summary > div { background: #edf4f4; }
body.mode-light .v218-shift-builder-summary b { color: #17383f; }
body.mode-light .v218-shift-sticky-actions { background: rgba(247, 250, 250, .97); }
body.mode-light .v218-shift-days-table { color: #17383f; }
body.mode-light .v218-shift-days-table th.is-label { color: #fff5d2; background: #0b5961; }
body.mode-light .v218-shift-days-table thead th { color: #36575e; background: #edf4f4; }

@media (max-width: 1120px) {
  .v218-shifts-stats, .v218-shift-builder-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v218-shifts-workflow { grid-template-columns: 1fr; }
  .v218-shifts-workflow > div { border-inline-start: 0; border-top: 1px solid var(--shift-line); }
  .v218-shifts-workflow > div:first-child { border-top: 0; }
  .v218-shift-cards { grid-template-columns: 1fr; }
  .v218-shift-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v218-shift-period-input { grid-template-columns: 1fr 1fr; }
  .v218-shift-builder-section-head, .v218-shift-day-head { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 720px) {
  .v218-shifts-hero { align-items: flex-start; flex-direction: column; padding: 22px 18px; }
  .v218-shifts-stats, .v218-shift-builder-summary { grid-template-columns: 1fr; }
  .v218-shifts-registry-head { align-items: stretch; flex-direction: column; }
  .v218-shifts-registry-head label { min-width: 0; }
  .v218-shift-card-meta { grid-template-columns: repeat(2, 1fr); }
  .v218-shift-form-grid, .v218-shift-period-input { grid-template-columns: 1fr; }
  .v218-shift-form-grid label.is-wide { grid-column: auto; }
  .v218-shift-modal-head { align-items: flex-start; flex-direction: column; padding: 18px 15px; }
  .v218-shift-modal-body, .v218-shift-builder-body { padding-inline: 12px; }
  .v218-shift-builder-tools, .v218-shift-builder-tools label { width: 100%; min-width: 0; }
  .v218-shift-builder-tools button { flex: 1; }
  .v218-shift-rotation-controls { width: 100%; }
  .v218-shift-rotation-controls label { flex: 1; }
  .v218-shift-sticky-actions { padding-inline: 13px; }
}


/* ===== easha-v219-vision2030.css ===== */
/* V219 — شعار رؤية السعودية 2030 في شاشة تسجيل الدخول */
.v219-vision2030-login {
  position: fixed;
  left: clamp(16px, 1.35vw, 26px);
  bottom: clamp(14px, 1.8vh, 24px);
  z-index: 40;
  width: clamp(88px, 7.2vw, 132px);
  height: auto;
  display: block;
  opacity: .38;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .18));
}

.login-screen .v219-vision2030-login,
.login-screen-v2 .v219-vision2030-login {
  visibility: visible !important;
}

@media (max-width: 980px), (max-height: 700px) {
  .v219-vision2030-login {
    width: 82px;
    left: 12px;
    bottom: 12px;
    opacity: .32;
  }
}

@media (max-width: 620px) {
  .v219-vision2030-login {
    width: 68px;
    left: 8px;
    bottom: 8px;
    opacity: .28;
  }
}

@media print {
  .v219-vision2030-login { display: none !important; }
}


/* ===== easha-v222-maroon-light.css ===== */
/* V222 — ثيم فاتح هادئ بخلفية التروس وهوية عنابية رسمية */
body.mode-light {
  --v222-maroon-950: #240714;
  --v222-maroon-900: #350b1e;
  --v222-maroon-800: #4d1028;
  --v222-maroon-700: #681a37;
  --v222-maroon-100: #f5e9ee;
  --v222-maroon-050: #fbf6f8;
  --v222-gold: #b18b3e;
  --v222-gold-dark: #725417;
  --v222-ink: #2b2025;
  --v222-muted: #665960;
  --v222-line: #dfd3d8;
  --v222-paper: rgba(255, 255, 255, .96);
  --bg: #f3f2f2 !important;
  --card: var(--v222-paper) !important;
  --text: var(--v222-ink) !important;
  --muted: var(--v222-muted) !important;
  --line: var(--v222-line) !important;
  --primary: var(--v222-maroon-800) !important;
  color: var(--v222-ink) !important;
  background: #f1f1f0 !important;
}

/* الصورة البيضاء تظهر كعلامة مائية هادئة، ولا تنافس المحتوى. */
body.mode-light::before {
  background:
    linear-gradient(105deg, rgba(255,255,255,.91), rgba(248,248,247,.82)),
    url(../assets/img/v220-light-gears-bg.jpg) center/cover fixed no-repeat !important;
  opacity: 1 !important;
}
body.mode-light .app > main {
  color: var(--v222-ink) !important;
  background:
    linear-gradient(rgba(255,255,255,.84), rgba(247,247,246,.90)),
    url(../assets/img/v220-light-gears-bg.jpg) center/cover fixed no-repeat !important;
}
body.mode-light .content { color: var(--v222-ink) !important; background: transparent !important; }

/* القائمة وحدها تحمل خامة العنابي، بطبقة داكنة لتثبيت وضوح النص. */
body.mode-light .app > aside {
  color: #fffafc !important;
  background-color: var(--v222-maroon-950) !important;
  background-image:
    linear-gradient(180deg, rgba(25,2,13,.70), rgba(55,6,28,.80)),
    url(../assets/img/v220-maroon-panels-bg.jpg) !important;
  background-position: center !important;
  background-size: cover !important;
  border-color: rgba(214,180,108,.22) !important;
  box-shadow: -8px 0 32px rgba(38,6,21,.14) !important;
}
body.mode-light .app > aside .brand,
body.mode-light .app > aside .redesigned-brand {
  color: #fffafc !important;
  background: rgba(18,2,10,.22) !important;
  border-color: rgba(255,255,255,.10) !important;
}
body.mode-light .app > aside .sidebar-brand-lines,
body.mode-light .app > aside .sidebar-brand-lines span,
body.mode-light .app > aside .group-title { color: #eadde3 !important; }
body.mode-light .app > aside .group-title {
  border-color: rgba(214,180,108,.22) !important;
  letter-spacing: .01em !important;
}
body.mode-light .app > aside .nav-btn {
  color: #f8f0f3 !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
body.mode-light .app > aside .nav-btn span { color: #d7b76d !important; }
body.mode-light .app > aside .nav-btn b { color: inherit !important; }
body.mode-light .app > aside .nav-btn em { color: #eadde3 !important; background: rgba(255,255,255,.08) !important; }
body.mode-light .app > aside .nav-btn:hover {
  color: #fff !important;
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(255,255,255,.08) !important;
}
body.mode-light .app > aside .nav-btn.active {
  color: #fff !important;
  background: linear-gradient(90deg, rgba(122,38,69,.72), rgba(255,255,255,.10)) !important;
  border-color: rgba(220,187,112,.32) !important;
  box-shadow: inset -3px 0 0 #d2ad5c !important;
}
body.mode-light .app > aside .nav-logout {
  color: #fff !important;
  background: rgba(137,33,55,.38) !important;
  border-color: rgba(255,190,200,.18) !important;
}

/* رأس الصفحة فاتح وهادئ؛ لا تُكرر فيه صورة العنابي. */
body.mode-light .main-route-header {
  color: var(--v222-ink) !important;
  background: rgba(255,255,255,.94) !important;
  border-bottom: 1px solid var(--v222-line) !important;
  box-shadow: 0 8px 24px rgba(50,14,31,.06) !important;
  backdrop-filter: blur(12px) !important;
}
body.mode-light .main-route-header h1 { color: var(--v222-maroon-800) !important; }
body.mode-light .main-route-header img { filter: drop-shadow(0 4px 10px rgba(53,11,30,.12)); }

/* البطاقة الأساسية: أبيض واضح وحدّ عنابي رفيع ولمسة ذهبية فقط. */
body.mode-light .card,
body.mode-light .notice,
body.mode-light .stat,
body.mode-light .table-wrap,
body.mode-light .modal-box,
body.mode-light .permission-modal,
body.mode-light .dash-panel,
body.mode-light .shortcuts-panel,
body.mode-light .kpi-card,
body.mode-light .bottom-kpis > div {
  color: var(--v222-ink) !important;
  background: var(--v222-paper) !important;
  border-color: var(--v222-line) !important;
  box-shadow: 0 9px 26px rgba(54,13,32,.07), inset 0 1px 0 #fff !important;
}
body.mode-light .card::before,
body.mode-light .notice::before {
  background: linear-gradient(90deg, var(--v222-maroon-800), var(--v222-gold), transparent) !important;
  opacity: .72 !important;
}
body.mode-light .card h1,
body.mode-light .card h2,
body.mode-light .card h3,
body.mode-light .notice h1,
body.mode-light .notice h2,
body.mode-light .notice h3,
body.mode-light .stat strong,
body.mode-light .dash-panel h3,
body.mode-light .shortcuts-panel h3,
body.mode-light .kpi-card strong,
body.mode-light .bottom-kpis b { color: var(--v222-maroon-800) !important; }
body.mode-light .card p,
body.mode-light .card small,
body.mode-light .notice p,
body.mode-light .notice small,
body.mode-light .stat span,
body.mode-light .stat small,
body.mode-light .kpi-card span,
body.mode-light .kpi-card small,
body.mode-light .bottom-kpis small { color: var(--v222-muted) !important; }

/* مربعات مختارة بخامة العنابي: الترحيب ورؤوس الوحدات التشغيلية فقط. */
body.mode-light .dash-welcome,
body.mode-light .v218-cr-hero,
body.mode-light .v218-shifts-hero {
  color: #fffafc !important;
  background-color: var(--v222-maroon-900) !important;
  background-image:
    linear-gradient(120deg, rgba(34,4,18,.64), rgba(92,18,48,.76)),
    url(../assets/img/v220-maroon-panels-bg.jpg) !important;
  background-position: center 42% !important;
  background-size: cover !important;
  border-color: rgba(215,182,109,.34) !important;
  box-shadow: 0 14px 34px rgba(55,10,31,.16) !important;
}
body.mode-light .dash-welcome h1,
body.mode-light .dash-welcome h2,
body.mode-light .dash-welcome h3,
body.mode-light .dash-welcome strong,
body.mode-light .v218-cr-hero h2,
body.mode-light .v218-cr-hero strong,
body.mode-light .v218-shifts-hero h2,
body.mode-light .v218-shifts-hero strong { color: #fff !important; }
body.mode-light .dash-welcome p,
body.mode-light .dash-welcome span,
body.mode-light .dash-welcome small,
body.mode-light .v218-cr-hero p,
body.mode-light .v218-cr-hero span,
body.mode-light .v218-cr-hero small,
body.mode-light .v218-shifts-hero p,
body.mode-light .v218-shifts-hero span,
body.mode-light .v218-shifts-hero small { color: #f0e4e9 !important; }

/* تبويبات واختيارات: الفاتح افتراضي والعنابي للاختيار النشط. */
body.mode-light .screen-tabs {
  background: rgba(255,255,255,.88) !important;
  border-color: var(--v222-line) !important;
  box-shadow: 0 5px 16px rgba(54,13,32,.05) !important;
}
body.mode-light .screen-tab {
  color: #5e4b54 !important;
  background: transparent !important;
  border-color: transparent !important;
}
body.mode-light .screen-tab span { color: var(--v222-maroon-700) !important; }
body.mode-light .screen-tab em { color: var(--v222-maroon-800) !important; background: var(--v222-maroon-100) !important; }
body.mode-light .screen-tab:hover { color: var(--v222-maroon-800) !important; background: var(--v222-maroon-050) !important; }
body.mode-light .screen-tab.active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--v222-maroon-800), var(--v222-maroon-700)) !important;
  box-shadow: 0 6px 14px rgba(77,16,40,.18) !important;
}
body.mode-light .screen-tab.active span,
body.mode-light .screen-tab.active b { color: #fff !important; }
body.mode-light .screen-tab.active em { color: #2c1a08 !important; background: #d7b96f !important; }

/* حقول الإدخال: سطح أبيض ونص داكن صريح. */
body.mode-light label { color: #48333d !important; }
body.mode-light input,
body.mode-light select,
body.mode-light textarea {
  color: #291d23 !important;
  background: #fff !important;
  border-color: #d8c9d0 !important;
  box-shadow: inset 0 1px 2px rgba(53,11,30,.025) !important;
}
body.mode-light input::placeholder,
body.mode-light textarea::placeholder { color: #82747b !important; opacity: 1 !important; }
body.mode-light input:focus,
body.mode-light select:focus,
body.mode-light textarea:focus {
  border-color: var(--v222-maroon-700) !important;
  box-shadow: 0 0 0 3px rgba(104,26,55,.13) !important;
}
body.mode-light select option { color: #291d23 !important; background: #fff !important; }

/* الأزرار: دلالات واضحة بدون خلط لون النص والخلفية. */
body.mode-light button { border-color: #d6c4cc; }
body.mode-light button:not(.primary):not(.gold):not(.danger):not(.nav-btn):not(.screen-tab):not(.v221-theme-option) {
  color: var(--v222-maroon-800) !important;
  background: #fff !important;
}
body.mode-light button:not(.primary):not(.gold):not(.danger):not(.nav-btn):not(.screen-tab):not(.v221-theme-option):hover {
  color: #fff !important;
  background: var(--v222-maroon-700) !important;
  border-color: var(--v222-maroon-700) !important;
}
body.mode-light button.primary,
body.mode-light .primary {
  color: #fff !important;
  background: linear-gradient(135deg, var(--v222-maroon-800), var(--v222-maroon-700)) !important;
  border-color: var(--v222-maroon-700) !important;
}
body.mode-light button.gold,
body.mode-light .gold { color: #211707 !important; background: #d8bb70 !important; border-color: #b69140 !important; }
body.mode-light button.danger,
body.mode-light .danger { color: #fff !important; background: #972f45 !important; border-color: #842438 !important; }

/* الجداول: رؤوس عنابية هادئة، صفوف بيضاء، خط داكن. */
body.mode-light .table-wrap { overflow: auto; }
body.mode-light table { color: var(--v222-ink) !important; background: rgba(255,255,255,.98) !important; }
body.mode-light th,
body.mode-light thead th {
  color: #fffafc !important;
  background: linear-gradient(180deg, #57142f, #421024) !important;
  border-color: rgba(255,255,255,.13) !important;
}
body.mode-light th *,
body.mode-light thead th * { color: inherit !important; }
body.mode-light td { color: var(--v222-ink) !important; border-color: #eadfe4 !important; background: transparent !important; }
body.mode-light tbody tr { background: rgba(255,255,255,.98) !important; }
body.mode-light tbody tr:nth-child(even) { background: #fbf5f7 !important; }
body.mode-light tbody tr:hover td { color: #2d1f26 !important; background: #f5e8ed !important; }
body.mode-light td b,
body.mode-light td strong { color: #39242e !important; }
body.mode-light td small { color: #6e5e66 !important; }

/* الاختصارات والإحصاءات. */
body.mode-light .quick-action,
body.mode-light .alert-line {
  color: var(--v222-ink) !important;
  background: rgba(255,255,255,.90) !important;
  border-color: var(--v222-line) !important;
}
body.mode-light .quick-action > span { color: #fff !important; background: var(--v222-maroon-700) !important; }
body.mode-light .quick-action b,
body.mode-light .alert-line span { color: var(--v222-ink) !important; }
body.mode-light .quick-action small,
body.mode-light .alert-line small { color: var(--v222-muted) !important; }

/* الشارات. */
body.mode-light .badge.ok { color: #fff !important; background: #276749 !important; }
body.mode-light .badge.warn { color: #2c2008 !important; background: #dfbf70 !important; }
body.mode-light .badge.bad { color: #fff !important; background: #9b3046 !important; }
body.mode-light .badge:not(.ok):not(.warn):not(.bad) {
  color: var(--v222-maroon-800) !important;
  background: var(--v222-maroon-100) !important;
  border-color: #ddcbd3 !important;
}
body.mode-light a { color: #681a37 !important; }
body.mode-light .gold-text,
body.mode-light .oktxt { color: var(--v222-gold-dark) !important; }
body.mode-light .badtxt { color: #8d263c !important; }

/* طلبات الإعاشة الجديدة. */
body.mode-light .v218-cr-page,
body.mode-light .v218-cr-modal {
  --cr-ink: var(--v222-ink);
  --cr-muted: var(--v222-muted);
  --cr-panel: rgba(255,255,255,.96);
  --cr-panel-soft: #faf4f7;
  --cr-line: var(--v222-line);
  color: var(--v222-ink) !important;
}
body.mode-light .v218-cr-stat,
body.mode-light .v218-cr-card { color: var(--v222-ink) !important; background: rgba(255,255,255,.96) !important; border-color: var(--v222-line) !important; }
body.mode-light .v218-cr-stat strong,
body.mode-light .v218-cr-card h3,
body.mode-light .v218-cr-registry-head h3 { color: var(--v222-maroon-800) !important; }
body.mode-light .v218-cr-stat small,
body.mode-light .v218-cr-card p,
body.mode-light .v218-cr-registry-head p { color: var(--v222-muted) !important; }
body.mode-light .v218-cr-create button {
  color: var(--v222-maroon-800) !important;
  background: linear-gradient(135deg, #fff, #f8eef2) !important;
  border-color: #decbd3 !important;
}
body.mode-light .v218-cr-create button b { color: var(--v222-maroon-800) !important; }
body.mode-light .v218-cr-create button small { color: var(--v222-muted) !important; }
body.mode-light .v218-cr-create button:hover { color: #fff !important; background: var(--v222-maroon-700) !important; }
body.mode-light .v218-cr-create button:hover b,
body.mode-light .v218-cr-create button:hover small { color: #fff !important; }
body.mode-light .v218-cr-legend > div,
body.mode-light .v218-cr-result-count { color: #4c3842 !important; background: #f8f0f3 !important; }
body.mode-light .v218-cr-table { color: var(--v222-ink) !important; }
body.mode-light .v218-cr-table thead th,
body.mode-light .v218-cr-detail-table thead th,
body.mode-light .v218-cr-detail-summary th { color: #fff !important; background: #4d1028 !important; }
body.mode-light .v218-cr-table td > b,
body.mode-light .v218-cr-detail-table td > b { color: #34232b !important; }
body.mode-light .v218-cr-table td > small,
body.mode-light .v218-cr-detail-table td > small { color: #6d5d65 !important; }
body.mode-light .v218-cr-detail-modal { color: var(--v222-ink) !important; background: #fff !important; border-color: var(--v222-line) !important; }
body.mode-light .v218-cr-modal-head { background: #f8eef2 !important; border-color: var(--v222-line) !important; }
body.mode-light .v218-cr-modal-head h2,
body.mode-light .v218-cr-detail-title h3 { color: var(--v222-maroon-800) !important; }
body.mode-light .v218-cr-modal-head p,
body.mode-light .v218-cr-next-action small { color: var(--v222-muted) !important; }
body.mode-light .v218-cr-detail-summary td,
body.mode-light .v218-cr-next-action b { color: var(--v222-ink) !important; background: #fff !important; }
body.mode-light .v218-cr-modal-actions { background: rgba(255,255,255,.97) !important; }

/* المناوبات والنوافذ المتخصصة. */
body.mode-light .v218-shifts-page,
body.mode-light .v218-shift-modal {
  --shift-panel: #fff;
  --shift-panel-soft: #faf4f7;
  --shift-line: var(--v222-line);
  --shift-text: var(--v222-ink);
  --shift-muted: var(--v222-muted);
  color: var(--v222-ink) !important;
}
body.mode-light .v218-shifts-registry,
body.mode-light .v218-shift-card,
body.mode-light .v218-shift-config-modal,
body.mode-light .v218-shift-builder-modal,
body.mode-light .v218-shift-preview-modal,
body.mode-light .v218-shift-form-section,
body.mode-light .v218-shift-builder-section { color: var(--v222-ink) !important; background: #fff !important; border-color: var(--v222-line) !important; }
body.mode-light .v218-shifts-stats b,
body.mode-light .v218-shifts-registry-head h3,
body.mode-light .v218-shift-card-top h3,
body.mode-light .v218-shift-modal-head h2,
body.mode-light .v218-shift-section-title b,
body.mode-light .v218-shift-builder-section-head b,
body.mode-light .v218-shift-day-head b { color: var(--v222-maroon-800) !important; }
body.mode-light .v218-shift-card-top p,
body.mode-light .v218-shift-modal-head p,
body.mode-light .v218-shift-section-title small,
body.mode-light .v218-shift-builder-section-head small { color: var(--v222-muted) !important; }
body.mode-light .v218-shift-card-meta span,
body.mode-light .v218-shift-builder-summary > div,
body.mode-light .v218-shift-section-title,
body.mode-light .v218-shift-builder-section-head,
body.mode-light .v218-shift-day-block { color: #4d3943 !important; background: #f8f0f3 !important; }
body.mode-light .v218-shift-card-meta b,
body.mode-light .v218-shift-builder-summary b { color: var(--v222-maroon-800) !important; }
body.mode-light .v218-shift-modal-head { background: #f8eef2 !important; border-color: var(--v222-line) !important; }
body.mode-light .v218-shift-form-grid label span,
body.mode-light .v218-shift-period-input label,
body.mode-light .v218-shift-rotation-controls label { color: #523c47 !important; }
body.mode-light .v218-shift-sticky-actions { background: rgba(255,255,255,.98) !important; border-color: var(--v222-line) !important; }
body.mode-light .v218-shift-employee-table,
body.mode-light .v218-shift-days-table { color: var(--v222-ink) !important; }
body.mode-light .v218-shift-employee-table thead th,
body.mode-light .v218-shift-days-table th.is-label { color: #fff !important; background: #4d1028 !important; }
body.mode-light .v218-shift-days-table thead th:not(.is-label) { color: #4f3944 !important; background: #f4e9ee !important; }
body.mode-light .v218-shift-employee-table td b { color: #34232b !important; }
body.mode-light .v218-shift-card-actions button,
body.mode-light .v218-shift-builder-tools button,
body.mode-light .v218-shift-rotation-controls button { color: var(--v222-maroon-800) !important; background: #fff !important; border-color: #d7c5cd !important; }

/* اختيار الثيم موجود داخل الإعدادات فقط. */
.v221-theme-settings-card { overflow: hidden; }
.v221-theme-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.v221-theme-option {
  display: grid !important;
  grid-template-columns: 116px 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 5px 13px !important;
  align-items: center !important;
  min-height: 98px !important;
  padding: 13px !important;
  text-align: right !important;
  border: 2px solid #e1d5da !important;
  border-radius: 16px !important;
  color: var(--v222-ink) !important;
  background: #fff !important;
}
.v221-theme-option:hover { border-color: #b58d9e !important; background: #fdf9fa !important; }
.v221-theme-option.is-active { border-color: var(--v222-maroon-700) !important; box-shadow: 0 0 0 3px rgba(104,26,55,.11) !important; }
.v221-theme-option > b { color: var(--v222-maroon-800) !important; font-size: 14px !important; }
.v221-theme-option > small { color: var(--v222-muted) !important; font-size: 11px !important; }
.v221-theme-preview {
  grid-row: 1 / 3;
  display: grid;
  grid-template-columns: 31px 1fr;
  grid-template-rows: 22px 40px;
  width: 116px;
  height: 62px;
  overflow: hidden;
  border: 1px solid #d7c9cf;
  border-radius: 9px;
  background: linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72)),url(../assets/img/v220-light-gears-bg.jpg) center/cover;
}
.v221-theme-preview i { grid-row: 1 / 3; background: #4d1028; }
.v221-theme-preview em { background: #fff; border-bottom: 1px solid #e2d8dc; }
.v221-theme-preview strong { margin: 6px; border-radius: 4px; background: rgba(255,255,255,.96); box-shadow: 0 2px 6px rgba(52,12,31,.12); }
.v221-theme-option.dark .v221-theme-preview { background: #092b31; }
.v221-theme-option.dark .v221-theme-preview i { background: #061c22; }
.v221-theme-option.dark .v221-theme-preview em { background: #103c42; border: 0; }
.v221-theme-option.dark .v221-theme-preview strong { background: #173f43; }
body.mode-dark .v221-theme-settings-card { color: #fff; background: rgba(5,27,32,.92); }
body.mode-dark .v221-theme-option { color: #fff !important; background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.13) !important; }
body.mode-dark .v221-theme-option.is-active { border-color: #c7a24a !important; }
body.mode-dark .v221-theme-option > b { color: #fff !important; }
body.mode-dark .v221-theme-option > small { color: #c7d6d3 !important; }

@media (max-width: 850px) {
  body.mode-light .app > aside { background-position: center top !important; }
  .v221-theme-options { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .v221-theme-option { grid-template-columns: 90px 1fr !important; }
  .v221-theme-preview { width: 90px; }
}
@media print {
  body.mode-light,
  body.mode-light::before,
  body.mode-light .app > main { color: #000 !important; background: #fff !important; }
  body.mode-light .card,
  body.mode-light .notice,
  body.mode-light .table-wrap,
  body.mode-light table { box-shadow: none !important; background: #fff !important; }
  body.mode-light th,
  body.mode-light thead th { color: #000 !important; background: #eee !important; }
}


/* ===== easha-v223-saudi-background.css ===== */
/* V223 — الخلفية السعودية الجديدة مع طبقات تباين مستقلة للدخول والواجهتين */
:root {
  --v223-teal-950: #04191c;
  --v223-teal-900: #08272a;
  --v223-teal-800: #0b3638;
  --v223-gold: #c7a85c;
  --v223-gold-light: #ead79a;
  --v223-light-ink: #202c2e;
  --v223-light-muted: #566567;
  --v223-light-line: rgba(20, 64, 65, .18);
  --v223-light-surface: rgba(255, 255, 255, .965);
}

/* شاشة الدخول: الصورة الأصلية كاملة مع تعتيم موجّه خلف النص والنموذج. */
html:has(.login-screen-v2),
body:has(.login-screen-v2),
html:has(.static-login-overlay:not(.hidden)),
body:has(.static-login-overlay:not(.hidden)) {
  background: var(--v223-teal-950) !important;
}
.login-screen,
.login-screen-v2 {
  isolation: isolate !important;
  background-color: var(--v223-teal-950) !important;
  background-image: url(../assets/img/easha-v223-saudi-heritage-bg.jpg) !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
.static-login-overlay {
  background-color: var(--v223-teal-950) !important;
  background-image:
    linear-gradient(90deg, rgba(3, 18, 21, .78), rgba(3, 18, 21, .44) 48%, rgba(3, 18, 21, .68)),
    url(../assets/img/easha-v223-saudi-heritage-bg.jpg) !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
.login-screen-v2::before {
  z-index: -1 !important;
  background:
    radial-gradient(circle at 69% 48%, rgba(218, 177, 87, .12), transparent 30%),
    linear-gradient(90deg, rgba(3, 18, 21, .76) 0%, rgba(3, 18, 21, .37) 44%, rgba(3, 18, 21, .67) 100%) !important;
}
.login-layout-v2 {
  filter: drop-shadow(0 20px 42px rgba(0, 0, 0, .16));
}
.login-info-v2,
.login-info-v2 h1,
.login-info-v2 h2,
.login-info-v2 h3,
.login-info-v2 p,
.login-info-v2 span,
.system-mini-title h3,
.system-mini-title span {
  color: #fffdf7 !important;
  -webkit-text-fill-color: #fffdf7 !important;
  text-shadow: 0 3px 14px rgba(0, 0, 0, .92), 0 1px 2px rgba(0, 0, 0, .9) !important;
}
.login-info-v2 strong { color: var(--v223-gold-light) !important; -webkit-text-fill-color: var(--v223-gold-light) !important; }
.login-box-v2 {
  color: #fffdf7 !important;
  background:
    linear-gradient(145deg, rgba(10, 47, 49, .94), rgba(3, 23, 27, .965)) !important;
  border: 1px solid rgba(234, 215, 154, .48) !important;
  box-shadow:
    0 28px 72px rgba(0, 0, 0, .46),
    inset 0 1px 0 rgba(255, 255, 255, .09) !important;
  backdrop-filter: blur(18px) saturate(118%) !important;
}
.static-login-form {
  color: #fffdf7 !important;
  background: linear-gradient(145deg, rgba(10, 47, 49, .94), rgba(3, 23, 27, .965)) !important;
  border: 1px solid rgba(234, 215, 154, .48) !important;
  box-shadow: 0 28px 72px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 255, 255, .09) !important;
  backdrop-filter: blur(18px) saturate(118%) !important;
}
.login-box-v2 h1,
.login-box-v2 h2,
.login-box-v2 h3,
.login-box-v2 p,
.login-box-v2 label,
.login-title-with-logo h2,
.login-title-with-logo small,
.login-footer-links {
  color: #fffdf7 !important;
  -webkit-text-fill-color: #fffdf7 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .72) !important;
}
.static-login-info,
.static-login-info h1,
.static-login-info h2,
.static-login-info h3,
.static-login-info p,
.static-login-info span,
.static-login-form h1,
.static-login-form h2,
.static-login-form h3,
.static-login-form p,
.static-login-form label,
.static-form-title h3,
.static-form-title small {
  color: #fffdf7 !important;
  -webkit-text-fill-color: #fffdf7 !important;
  text-shadow: 0 2px 9px rgba(0, 0, 0, .78) !important;
}
.static-login-info strong { color: var(--v223-gold-light) !important; -webkit-text-fill-color: var(--v223-gold-light) !important; }
.login-box-v2 input {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
  background: rgba(1, 17, 20, .82) !important;
  border: 1px solid rgba(234, 215, 154, .42) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .32) !important;
}
.static-login-form input {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
  background: rgba(1, 17, 20, .82) !important;
  border: 1px solid rgba(234, 215, 154, .42) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .32) !important;
}
.login-box-v2 input::placeholder {
  color: #c7d4d3 !important;
  -webkit-text-fill-color: #c7d4d3 !important;
  opacity: 1 !important;
}
.static-login-form input::placeholder {
  color: #c7d4d3 !important;
  -webkit-text-fill-color: #c7d4d3 !important;
  opacity: 1 !important;
}
.login-box-v2 input:focus {
  border-color: var(--v223-gold-light) !important;
  box-shadow: 0 0 0 3px rgba(234, 215, 154, .18), inset 0 1px 3px rgba(0, 0, 0, .3) !important;
}
.static-login-form input:focus {
  border-color: var(--v223-gold-light) !important;
  box-shadow: 0 0 0 3px rgba(234, 215, 154, .18), inset 0 1px 3px rgba(0, 0, 0, .3) !important;
}
.login-box-v2 .primary.full {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: linear-gradient(135deg, #157067, #0a4b49) !important;
  border: 1px solid rgba(234, 215, 154, .48) !important;
}
.login-box-v2 .primary.full:hover {
  background: linear-gradient(135deg, #1a8175, #0c5b57) !important;
}
.v219-vision2030-login {
  width: clamp(72px, 5.4vw, 104px) !important;
  opacity: .30 !important;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .28)) !important;
}
.static-login-form button:not(.secondary) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: linear-gradient(135deg, #157067, #0a4b49) !important;
  border: 1px solid rgba(234, 215, 154, .48) !important;
}

/* الخلفية الداخلية المشتركة: نفس الصورة من دون تكرارها داخل البطاقات. */
body.mode-light,
body.mode-dark {
  background-color: var(--v223-teal-950) !important;
  background-image: url(../assets/img/easha-v223-saudi-heritage-bg.jpg) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* الوضع الفاتح: الصورة علامة مائية مرئية، والمحتوى داكن فوق أسطح شبه مصمتة. */
body.mode-light::before {
  background:
    linear-gradient(112deg, rgba(250, 249, 246, .94) 0%, rgba(250, 249, 246, .88) 54%, rgba(248, 246, 240, .84) 100%),
    url(../assets/img/easha-v223-saudi-heritage-bg.jpg) center/cover fixed no-repeat !important;
  opacity: 1 !important;
}
body.mode-light .app > main {
  color: var(--v223-light-ink) !important;
  background:
    linear-gradient(112deg, rgba(250, 249, 246, .91), rgba(250, 249, 246, .83)),
    url(../assets/img/easha-v223-saudi-heritage-bg.jpg) center/cover fixed no-repeat !important;
}
body.mode-light .content { color: var(--v223-light-ink) !important; }
body.mode-light .app > aside {
  background-color: var(--v223-teal-950) !important;
  background-image:
    linear-gradient(180deg, rgba(2, 20, 23, .91), rgba(5, 31, 34, .95)),
    url(../assets/img/easha-v223-saudi-heritage-bg.jpg) !important;
  background-position: 15% center !important;
  background-size: auto 100% !important;
  border-color: rgba(234, 215, 154, .25) !important;
}
body.mode-light .main-route-header {
  color: var(--v223-light-ink) !important;
  background: rgba(255, 255, 255, .95) !important;
  border-color: var(--v223-light-line) !important;
}
body.mode-light .main-route-header h1 { color: #0b4a49 !important; }
body.mode-light .card,
body.mode-light .notice,
body.mode-light .stat,
body.mode-light .table-wrap,
body.mode-light .modal-box,
body.mode-light .permission-modal,
body.mode-light .panel,
body.mode-light .dash-panel,
body.mode-light .shortcuts-panel,
body.mode-light .kpi-card,
body.mode-light .bottom-kpis > div,
body.mode-light .system-settings-card,
body.mode-light .settings-section,
body.mode-light .option {
  color: var(--v223-light-ink) !important;
  background-color: var(--v223-light-surface) !important;
  background-image: none !important;
  border-color: var(--v223-light-line) !important;
  box-shadow: 0 12px 30px rgba(7, 38, 40, .10), inset 0 1px 0 #fff !important;
}
body.mode-light .card h1,
body.mode-light .card h2,
body.mode-light .card h3,
body.mode-light .notice h1,
body.mode-light .notice h2,
body.mode-light .notice h3,
body.mode-light .panel h1,
body.mode-light .panel h2,
body.mode-light .panel h3 { color: #123f40 !important; }
body.mode-light .card p,
body.mode-light .notice p,
body.mode-light .panel p,
body.mode-light .card small,
body.mode-light .notice small { color: var(--v223-light-muted) !important; }
body.mode-light input,
body.mode-light select,
body.mode-light textarea {
  color: #1e292b !important;
  -webkit-text-fill-color: #1e292b !important;
  background: #ffffff !important;
  border-color: rgba(16, 73, 73, .28) !important;
}
body.mode-light input::placeholder,
body.mode-light textarea::placeholder {
  color: #6d7b7d !important;
  -webkit-text-fill-color: #6d7b7d !important;
}
body.mode-light th,
body.mode-light thead th {
  color: #fffdf7 !important;
  background: linear-gradient(180deg, #0c4b4b, #07383a) !important;
}
body.mode-light td { color: #253133 !important; background-color: rgba(255, 255, 255, .985) !important; }
body.mode-light tbody tr:nth-child(even) td { background-color: #f2f7f6 !important; }
body.mode-light tbody tr:hover td { background-color: #e7f1ef !important; }

/* أبطال الأقسام يحتفظون بالهوية الداكنة مع نص فاتح صريح. */
body.mode-light .dash-welcome,
body.mode-light .v218-cr-hero,
body.mode-light .v218-shifts-hero {
  color: #fffdf7 !important;
  background-color: var(--v223-teal-900) !important;
  background-image:
    linear-gradient(120deg, rgba(3, 24, 27, .91), rgba(8, 54, 56, .86)),
    url(../assets/img/easha-v223-saudi-heritage-bg.jpg) !important;
  background-position: center !important;
  background-size: cover !important;
  border-color: rgba(234, 215, 154, .36) !important;
}
body.mode-light .dash-welcome :is(h1,h2,h3,p,span,small,b,strong),
body.mode-light .v218-cr-hero :is(h1,h2,h3,p,span,small,b,strong),
body.mode-light .v218-shifts-hero :is(h1,h2,h3,p,span,small,b,strong) {
  color: #fffdf7 !important;
  -webkit-text-fill-color: #fffdf7 !important;
}

/* الوضع الداكن: الخلفية أوضح، لكن جميع أسطح القراءة عاتمة بدرجة كافية. */
body.mode-dark::before {
  background:
    linear-gradient(115deg, rgba(2, 18, 21, .76), rgba(2, 18, 21, .68)),
    url(../assets/img/easha-v223-saudi-heritage-bg.jpg) center/cover fixed no-repeat !important;
  opacity: 1 !important;
}
body.mode-dark .app > main {
  color: #f8fbfa !important;
  background:
    linear-gradient(115deg, rgba(3, 23, 27, .76), rgba(3, 23, 27, .66)),
    url(../assets/img/easha-v223-saudi-heritage-bg.jpg) center/cover fixed no-repeat !important;
}
body.mode-dark .app > aside {
  background-color: #03171a !important;
  background-image:
    linear-gradient(180deg, rgba(1, 14, 17, .92), rgba(4, 29, 32, .95)),
    url(../assets/img/easha-v223-saudi-heritage-bg.jpg) !important;
  background-position: 15% center !important;
  background-size: auto 100% !important;
  border-color: rgba(234, 215, 154, .24) !important;
}
body.mode-dark header,
body.mode-dark .main-route-header {
  color: #f8fbfa !important;
  background: rgba(3, 27, 31, .96) !important;
  border-color: rgba(234, 215, 154, .22) !important;
}
body.mode-dark .card,
body.mode-dark .notice,
body.mode-dark .stat,
body.mode-dark .table-wrap,
body.mode-dark .modal-box,
body.mode-dark .permission-modal,
body.mode-dark .panel,
body.mode-dark .dash-panel,
body.mode-dark .shortcuts-panel,
body.mode-dark .kpi-card,
body.mode-dark .bottom-kpis > div,
body.mode-dark .system-settings-card,
body.mode-dark .settings-section,
body.mode-dark .option,
body.mode-dark .v218-cr-card,
body.mode-dark .v218-cr-stat,
body.mode-dark .v218-shift-card,
body.mode-dark .v218-shift-form-section,
body.mode-dark .v218-shift-builder-section {
  color: #f8fbfa !important;
  background-color: rgba(4, 29, 33, .95) !important;
  background-image: none !important;
  border-color: rgba(234, 215, 154, .24) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}
body.mode-dark .card :is(h1,h2,h3,h4,h5,h6,b,strong),
body.mode-dark .notice :is(h1,h2,h3,h4,h5,h6,b,strong),
body.mode-dark .panel :is(h1,h2,h3,h4,h5,h6,b,strong) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
body.mode-dark .card :is(p,small),
body.mode-dark .notice :is(p,small),
body.mode-dark .panel :is(p,small) {
  color: #cad9d7 !important;
  -webkit-text-fill-color: #cad9d7 !important;
}
body.mode-dark input:not([type=checkbox]):not([type=radio]):not([type=color]),
body.mode-dark select,
body.mode-dark textarea {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #061f23 !important;
  border-color: rgba(234, 215, 154, .35) !important;
}
body.mode-dark input::placeholder,
body.mode-dark textarea::placeholder {
  color: #afc3c1 !important;
  -webkit-text-fill-color: #afc3c1 !important;
}
body.mode-dark table { color: #f8fbfa !important; background: rgba(3, 24, 28, .98) !important; }
body.mode-dark th,
body.mode-dark thead th {
  color: var(--v223-gold-light) !important;
  background: #062629 !important;
  border-color: rgba(234, 215, 154, .20) !important;
}
body.mode-dark td {
  color: #f8fbfa !important;
  background: rgba(4, 31, 35, .985) !important;
  border-color: rgba(255, 255, 255, .09) !important;
}
body.mode-dark tbody tr:nth-child(even) td { background: rgba(7, 39, 43, .985) !important; }
body.mode-dark tbody tr:hover td { background: rgba(16, 66, 68, .98) !important; }
body.mode-dark .badge.ok,
body.mode-dark .badge.ok * { color: #91f0b2 !important; -webkit-text-fill-color: #91f0b2 !important; }
body.mode-dark .badge.warn,
body.mode-dark .badge.warn * { color: #ffda8c !important; -webkit-text-fill-color: #ffda8c !important; }
body.mode-dark .badge.bad,
body.mode-dark .badge.bad * { color: #ffb8b2 !important; -webkit-text-fill-color: #ffb8b2 !important; }
body.mode-dark button.gold,
body.mode-dark button.gold * { color: #10231d !important; -webkit-text-fill-color: #10231d !important; }

/* معاينة الثيمين في الإعدادات تستخدم الخلفية الجديدة نفسها. */
.v221-theme-preview,
.v221-theme-option.dark .v221-theme-preview {
  background-image:
    linear-gradient(rgba(255,255,255,.78), rgba(255,255,255,.78)),
    url(../assets/img/easha-v223-saudi-heritage-bg.jpg) !important;
  background-position: center !important;
  background-size: cover !important;
}
.v221-theme-option.dark .v221-theme-preview {
  background-image:
    linear-gradient(rgba(3,24,28,.62), rgba(3,24,28,.62)),
    url(../assets/img/easha-v223-saudi-heritage-bg.jpg) !important;
}

@media (max-width: 850px) {
  .login-screen-v2,
  .login-screen,
  .static-login-overlay,
  body.mode-light,
  body.mode-dark,
  body.mode-light::before,
  body.mode-dark::before,
  body.mode-light .app > main,
  body.mode-dark .app > main { background-attachment: scroll !important; }
  .login-screen-v2::before {
    background: linear-gradient(rgba(3, 18, 21, .68), rgba(3, 18, 21, .76)) !important;
  }
  .v219-vision2030-login { width: 64px !important; opacity: .26 !important; }
}

@media print {
  body.mode-light,
  body.mode-dark,
  body.mode-light::before,
  body.mode-dark::before,
  body.mode-light .app > main,
  body.mode-dark .app > main {
    color: #000 !important;
    background: #fff !important;
  }
}


/* ===== easha-v224-complete-visual-theme.css ===== */
/*
 * V224 — الهوية البصرية السعودية المتكاملة
 * - شاشة الدخول: الخلفية السعودية الأفقية المعتمدة في V223.
 * - الواجهة الداخلية: الصورة الذهبية كعلامة بصرية ممتدة، والنقشة البنية للقائمة والخيارات.
 * - طبقات القراءة مستقلة عن الصور حتى يبقى النص واضحاً في الوضعين.
 */

:root {
  --v224-teal-975: #031619;
  --v224-teal-925: #08272a;
  --v224-teal-850: #0d3d3d;
  --v224-coffee-950: #20130d;
  --v224-coffee-900: #342117;
  --v224-coffee-750: #604029;
  --v224-gold-500: #c9954f;
  --v224-gold-300: #ebce8a;
  --v224-ivory-050: #fffdf8;
  --v224-ivory-100: #f6f0e7;
  --v224-ink: #1d2929;
  --v224-muted: #5b6664;
  --v224-light-line: rgba(72, 52, 35, .20);
  --v224-dark-line: rgba(235, 206, 138, .26);
}

/* ---------- شاشة الدخول: الصورة السابقة هي الواجهة الرئيسية ---------- */
.login-screen,
.login-screen-v2 {
  background-color: var(--v224-teal-975) !important;
  background-image: url(../assets/img/easha-v223-saudi-heritage-bg.jpg) !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.static-login-overlay {
  background-color: var(--v224-teal-975) !important;
  background-image:
    linear-gradient(90deg, rgba(2, 17, 20, .77), rgba(2, 17, 20, .35) 48%, rgba(2, 17, 20, .72)),
    url(../assets/img/easha-v223-saudi-heritage-bg.jpg) !important;
  background-position: center, center !important;
  background-size: cover, cover !important;
  background-repeat: no-repeat !important;
}

.login-screen-v2::before,
.static-login-overlay::before {
  background:
    radial-gradient(circle at 67% 48%, rgba(231, 194, 116, .11), transparent 31%),
    linear-gradient(90deg, rgba(2, 17, 20, .77) 0%, rgba(2, 17, 20, .30) 45%, rgba(2, 17, 20, .71) 100%) !important;
}

.login-layout-v2 {
  width: min(1220px, 100%) !important;
  gap: clamp(28px, 4vw, 62px) !important;
}

.login-box-v2,
.static-login-form {
  color: var(--v224-ivory-050) !important;
  background-color: rgba(4, 25, 28, .955) !important;
  background-image:
    linear-gradient(145deg, rgba(4, 31, 33, .94), rgba(20, 17, 14, .95)),
    url(../assets/img/easha-v224-brown-calligraphy.jpg) !important;
  background-position: center, center !important;
  background-size: cover, cover !important;
  border: 1px solid rgba(235, 206, 138, .48) !important;
  box-shadow:
    0 30px 76px rgba(0, 0, 0, .46),
    inset 0 1px 0 rgba(255, 255, 255, .10) !important;
  backdrop-filter: blur(18px) saturate(112%) !important;
}

.login-box-v2 :is(h1,h2,h3,h4,p,label,small,span),
.static-login-form :is(h1,h2,h3,h4,p,label,small,span),
.login-info-v2 :is(h1,h2,h3,h4,p,label,small,span) {
  color: var(--v224-ivory-050) !important;
  -webkit-text-fill-color: var(--v224-ivory-050) !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .88) !important;
}

.login-box-v2 input,
.static-login-form input {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;
  background: rgba(2, 18, 20, .86) !important;
  border-color: rgba(235, 206, 138, .43) !important;
}

.login-box-v2 input::placeholder,
.static-login-form input::placeholder {
  color: #cbd7d4 !important;
  -webkit-text-fill-color: #cbd7d4 !important;
  opacity: 1 !important;
}

.login-box-v2 .primary.full,
.static-login-form button:not(.secondary) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: linear-gradient(135deg, #176d65, #0a4848) !important;
  border-color: rgba(235, 206, 138, .52) !important;
}

.v219-vision2030-login {
  width: clamp(58px, 4.4vw, 82px) !important;
  opacity: .22 !important;
  left: clamp(10px, 1.15vw, 20px) !important;
  bottom: clamp(10px, 1.35vh, 18px) !important;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .28)) !important;
}

/* ---------- الخلفية الداخلية: الصورتان حاضرتان على جميع الصفحات ---------- */
body.mode-light,
body.mode-dark {
  background-color: var(--v224-teal-975) !important;
  background-image:
    linear-gradient(rgba(3, 22, 25, .22), rgba(3, 22, 25, .22)),
    url(../assets/img/easha-v224-gold-calligraphy.jpg),
    url(../assets/img/easha-v224-brown-calligraphy.jpg) !important;
  background-position: center, left center, center !important;
  background-size: cover, min(38vw, 620px) auto, 520px auto !important;
  background-repeat: no-repeat, no-repeat, repeat !important;
  background-attachment: fixed, fixed, fixed !important;
}

body.mode-light::before {
  background-color: var(--v224-ivory-100) !important;
  background-image:
    linear-gradient(112deg, rgba(255, 253, 248, .93), rgba(246, 240, 231, .86)),
    url(../assets/img/easha-v224-gold-calligraphy.jpg),
    url(../assets/img/easha-v224-brown-calligraphy.jpg) !important;
  background-position: center, left center, center !important;
  background-size: cover, min(38vw, 620px) auto, 520px auto !important;
  background-repeat: no-repeat, no-repeat, repeat !important;
  background-attachment: fixed, fixed, fixed !important;
  opacity: 1 !important;
}

body.mode-dark::before {
  background-color: var(--v224-teal-975) !important;
  background-image:
    linear-gradient(112deg, rgba(3, 22, 25, .77), rgba(25, 18, 14, .72)),
    url(../assets/img/easha-v224-gold-calligraphy.jpg),
    url(../assets/img/easha-v224-brown-calligraphy.jpg) !important;
  background-position: center, left center, center !important;
  background-size: cover, min(38vw, 620px) auto, 520px auto !important;
  background-repeat: no-repeat, no-repeat, repeat !important;
  background-attachment: fixed, fixed, fixed !important;
  opacity: 1 !important;
}

body.mode-light .app > main {
  color: var(--v224-ink) !important;
  background-color: rgba(250, 247, 240, .90) !important;
  background-image:
    linear-gradient(112deg, rgba(255, 253, 248, .92), rgba(246, 240, 231, .85)),
    url(../assets/img/easha-v224-gold-calligraphy.jpg),
    url(../assets/img/easha-v224-brown-calligraphy.jpg) !important;
  background-position: center, left center, right top !important;
  background-size: cover, min(38vw, 620px) auto, 520px auto !important;
  background-repeat: no-repeat, no-repeat, repeat !important;
  background-attachment: fixed, fixed, fixed !important;
}

body.mode-dark .app > main {
  color: var(--v224-ivory-050) !important;
  background-color: rgba(3, 22, 25, .88) !important;
  background-image:
    linear-gradient(112deg, rgba(3, 22, 25, .77), rgba(25, 18, 14, .72)),
    url(../assets/img/easha-v224-gold-calligraphy.jpg),
    url(../assets/img/easha-v224-brown-calligraphy.jpg) !important;
  background-position: center, left center, right top !important;
  background-size: cover, min(38vw, 620px) auto, 520px auto !important;
  background-repeat: no-repeat, no-repeat, repeat !important;
  background-attachment: fixed, fixed, fixed !important;
}

/* ---------- القائمة الجانبية: النقشة البنية مع نص فاتح ثابت ---------- */
body.mode-light .app > aside,
body.mode-dark .app > aside {
  color: var(--v224-ivory-050) !important;
  background-color: var(--v224-coffee-950) !important;
  background-image:
    linear-gradient(180deg, rgba(18, 12, 9, .86), rgba(43, 27, 18, .92)),
    url(../assets/img/easha-v224-brown-calligraphy.jpg) !important;
  background-position: center !important;
  background-size: cover !important;
  border-color: var(--v224-dark-line) !important;
  box-shadow: -10px 0 36px rgba(15, 10, 7, .24) !important;
}

body.mode-light .app > aside :is(.brand,.redesigned-brand),
body.mode-dark .app > aside :is(.brand,.redesigned-brand) {
  color: #fff !important;
  background: rgba(9, 8, 7, .34) !important;
  border-color: rgba(235, 206, 138, .18) !important;
}

body.mode-light .app > aside :is(.sidebar-brand-lines,.sidebar-brand-lines span,.group-title),
body.mode-dark .app > aside :is(.sidebar-brand-lines,.sidebar-brand-lines span,.group-title) {
  color: #f0e5d4 !important;
  -webkit-text-fill-color: #f0e5d4 !important;
}

body.mode-light .app > aside .nav-btn,
body.mode-dark .app > aside .nav-btn {
  color: #f9f3ea !important;
  background: rgba(255, 255, 255, .025) !important;
  border-color: transparent !important;
}

body.mode-light .app > aside .nav-btn :is(b,em),
body.mode-dark .app > aside .nav-btn :is(b,em) {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

body.mode-light .app > aside .nav-btn > span,
body.mode-dark .app > aside .nav-btn > span {
  color: var(--v224-gold-300) !important;
  -webkit-text-fill-color: var(--v224-gold-300) !important;
}

body.mode-light .app > aside .nav-btn:hover,
body.mode-dark .app > aside .nav-btn:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .09) !important;
  border-color: rgba(235, 206, 138, .17) !important;
}

body.mode-light .app > aside .nav-btn.active,
body.mode-dark .app > aside .nav-btn.active {
  color: #fff !important;
  background-image:
    linear-gradient(90deg, rgba(20, 82, 78, .92), rgba(81, 49, 29, .86)),
    url(../assets/img/easha-v224-brown-calligraphy.jpg) !important;
  background-size: cover !important;
  border-color: rgba(235, 206, 138, .38) !important;
  box-shadow: inset -3px 0 0 var(--v224-gold-300), 0 8px 20px rgba(0, 0, 0, .15) !important;
}

/* ---------- رأس كل صفحة: سطح داكن واضح ونقشة هادئة ---------- */
body.mode-light .main-route-header,
body.mode-dark .main-route-header {
  color: var(--v224-ivory-050) !important;
  background-color: var(--v224-coffee-950) !important;
  background-image:
    linear-gradient(90deg, rgba(5, 38, 40, .92), rgba(40, 27, 19, .89)),
    url(../assets/img/easha-v224-brown-calligraphy.jpg) !important;
  background-position: center !important;
  background-size: cover !important;
  border-color: var(--v224-dark-line) !important;
  box-shadow: 0 10px 30px rgba(18, 12, 9, .18) !important;
}

body.mode-light .main-route-header :is(h1,h2,h3,p,span,small,b,strong),
body.mode-dark .main-route-header :is(h1,h2,h3,p,span,small,b,strong) {
  color: var(--v224-ivory-050) !important;
  -webkit-text-fill-color: var(--v224-ivory-050) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .68) !important;
}

body.mode-light .main-route-header button:not(.danger),
body.mode-dark .main-route-header button:not(.danger) {
  color: #20170f !important;
  -webkit-text-fill-color: #20170f !important;
  background: linear-gradient(135deg, #f0d79d, #c7964d) !important;
  border-color: #e8c679 !important;
}

/* ---------- البطاقات الفاتحة: نص داكن وصورة بنية كعلامة مائية ---------- */
body.mode-light .card,
body.mode-light .notice,
body.mode-light .stat,
body.mode-light .table-wrap,
body.mode-light .modal-box,
body.mode-light .permission-modal,
body.mode-light .panel,
body.mode-light .dash-panel,
body.mode-light .shortcuts-panel,
body.mode-light .kpi-card,
body.mode-light .bottom-kpis > div,
body.mode-light .system-settings-card,
body.mode-light .settings-section,
body.mode-light .option,
body.mode-light .v218-cr-card,
body.mode-light .v218-cr-stat,
body.mode-light .v218-shift-card,
body.mode-light .v218-shift-form-section,
body.mode-light .v218-shift-builder-section {
  color: var(--v224-ink) !important;
  background-color: rgba(255, 253, 248, .97) !important;
  background-image:
    linear-gradient(112deg, rgba(255, 253, 248, .965), rgba(246, 240, 231, .935)),
    url(../assets/img/easha-v224-brown-calligraphy.jpg) !important;
  background-position: center, right top !important;
  background-size: cover, 330px auto !important;
  background-repeat: no-repeat !important;
  border-color: var(--v224-light-line) !important;
  box-shadow: 0 12px 30px rgba(45, 29, 18, .10), inset 0 1px 0 #fff !important;
}

body.mode-light .content :is(h1,h2,h3,h4,h5,h6,b,strong),
body.mode-light .modal-box :is(h1,h2,h3,h4,h5,h6,b,strong) {
  color: #263332 !important;
  -webkit-text-fill-color: #263332 !important;
}

body.mode-light .content :is(p,label,li,legend,caption),
body.mode-light .modal-box :is(p,label,li,legend,caption) {
  color: #354240 !important;
  -webkit-text-fill-color: #354240 !important;
}

body.mode-light .content :is(small,.muted,.hint,.subtext,.subtitle,.help-text,.field-hint,.note-text),
body.mode-light .modal-box :is(small,.muted,.hint,.subtext,.subtitle,.help-text,.field-hint,.note-text) {
  color: var(--v224-muted) !important;
  -webkit-text-fill-color: var(--v224-muted) !important;
}

/* ---------- البطاقات الداكنة: نص فاتح وصورة بنية مدمجة ---------- */
body.mode-dark .card,
body.mode-dark .notice,
body.mode-dark .stat,
body.mode-dark .table-wrap,
body.mode-dark .modal-box,
body.mode-dark .permission-modal,
body.mode-dark .panel,
body.mode-dark .dash-panel,
body.mode-dark .shortcuts-panel,
body.mode-dark .kpi-card,
body.mode-dark .bottom-kpis > div,
body.mode-dark .system-settings-card,
body.mode-dark .settings-section,
body.mode-dark .option,
body.mode-dark .v218-cr-card,
body.mode-dark .v218-cr-stat,
body.mode-dark .v218-shift-card,
body.mode-dark .v218-shift-form-section,
body.mode-dark .v218-shift-builder-section {
  color: var(--v224-ivory-050) !important;
  background-color: rgba(4, 28, 31, .96) !important;
  background-image:
    linear-gradient(112deg, rgba(4, 31, 34, .955), rgba(30, 22, 17, .945)),
    url(../assets/img/easha-v224-brown-calligraphy.jpg) !important;
  background-position: center, right top !important;
  background-size: cover, 360px auto !important;
  background-repeat: no-repeat !important;
  border-color: var(--v224-dark-line) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .27), inset 0 1px 0 rgba(255, 255, 255, .055) !important;
}

body.mode-dark .content :is(h1,h2,h3,h4,h5,h6,b,strong,p,label,li,legend,caption),
body.mode-dark .modal-box :is(h1,h2,h3,h4,h5,h6,b,strong,p,label,li,legend,caption) {
  color: var(--v224-ivory-050) !important;
  -webkit-text-fill-color: var(--v224-ivory-050) !important;
}

body.mode-dark .content :is(small,.muted,.hint,.subtext,.subtitle,.help-text,.field-hint,.note-text),
body.mode-dark .modal-box :is(small,.muted,.hint,.subtext,.subtitle,.help-text,.field-hint,.note-text) {
  color: #d1ddd8 !important;
  -webkit-text-fill-color: #d1ddd8 !important;
}

/* ---------- الصورة الذهبية: رؤوس الوحدات والمشهد الترحيبي ---------- */
body.mode-light .dash-welcome,
body.mode-dark .dash-welcome,
body.mode-light .v218-cr-hero,
body.mode-dark .v218-cr-hero,
body.mode-light .v218-shifts-hero,
body.mode-dark .v218-shifts-hero {
  color: var(--v224-ivory-050) !important;
  background-color: var(--v224-teal-925) !important;
  background-image:
    linear-gradient(90deg, rgba(3, 27, 30, .94), rgba(10, 53, 53, .80) 58%, rgba(61, 38, 23, .74)),
    url(../assets/img/easha-v224-gold-calligraphy.jpg) !important;
  background-position: center, center 43% !important;
  background-size: cover, cover !important;
  background-repeat: no-repeat !important;
  border-color: rgba(235, 206, 138, .40) !important;
  box-shadow: 0 16px 38px rgba(24, 17, 12, .22) !important;
}

body.mode-light :is(.dash-welcome,.v218-cr-hero,.v218-shifts-hero) :is(h1,h2,h3,h4,p,span,small,b,strong),
body.mode-dark :is(.dash-welcome,.v218-cr-hero,.v218-shifts-hero) :is(h1,h2,h3,h4,p,span,small,b,strong) {
  color: var(--v224-ivory-050) !important;
  -webkit-text-fill-color: var(--v224-ivory-050) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .72) !important;
}

.dashboard-meta-chip {
  color: var(--v224-ivory-050) !important;
  background-color: rgba(22, 17, 13, .80) !important;
  background-image:
    linear-gradient(135deg, rgba(7, 54, 53, .83), rgba(45, 29, 19, .83)),
    url(../assets/img/easha-v224-brown-calligraphy.jpg) !important;
  background-position: center !important;
  background-size: cover !important;
  border-color: rgba(235, 206, 138, .31) !important;
}

.dashboard-meta-chip :is(span,strong,small) {
  color: var(--v224-ivory-050) !important;
  -webkit-text-fill-color: var(--v224-ivory-050) !important;
}

/* ---------- الخيارات والاختصارات: الداكن دائماً يحمل نصاً فاتحاً ---------- */
body.mode-light .quick-action,
body.mode-dark .quick-action,
body.mode-light .screen-tab.active,
body.mode-dark .screen-tab.active,
body.mode-light .system-settings-tabs button.active,
body.mode-dark .system-settings-tabs button.active,
body.mode-light .v221-theme-option.is-active,
body.mode-dark .v221-theme-option.is-active {
  color: #fff !important;
  background-color: var(--v224-coffee-900) !important;
  background-image:
    linear-gradient(135deg, rgba(6, 55, 55, .88), rgba(77, 47, 29, .88)),
    url(../assets/img/easha-v224-brown-calligraphy.jpg) !important;
  background-position: center !important;
  background-size: cover !important;
  border-color: rgba(235, 206, 138, .38) !important;
}

body.mode-light .quick-action :is(b,small,span),
body.mode-dark .quick-action :is(b,small,span),
body.mode-light .screen-tab.active :is(b,span,em),
body.mode-dark .screen-tab.active :is(b,span,em),
body.mode-light .system-settings-tabs button.active :is(b,span,em),
body.mode-dark .system-settings-tabs button.active :is(b,span,em),
body.mode-light .v221-theme-option.is-active :is(b,small,span),
body.mode-dark .v221-theme-option.is-active :is(b,small,span) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body.mode-light .screen-tabs,
body.mode-light .system-settings-tabs {
  color: var(--v224-ink) !important;
  background: rgba(255, 253, 248, .94) !important;
  border-color: var(--v224-light-line) !important;
}

body.mode-dark .screen-tabs,
body.mode-dark .system-settings-tabs {
  color: var(--v224-ivory-050) !important;
  background: rgba(4, 28, 31, .94) !important;
  border-color: var(--v224-dark-line) !important;
}

body.mode-light .screen-tab:not(.active),
body.mode-light .system-settings-tabs button:not(.active) {
  color: #49382d !important;
  -webkit-text-fill-color: #49382d !important;
  background: transparent !important;
}

body.mode-dark .screen-tab:not(.active),
body.mode-dark .system-settings-tabs button:not(.active) {
  color: #e5ddd2 !important;
  -webkit-text-fill-color: #e5ddd2 !important;
  background: transparent !important;
}

/* ---------- الحقول والجداول والأزرار ---------- */
body.mode-light input:not([type=checkbox]):not([type=radio]):not([type=color]),
body.mode-light select,
body.mode-light textarea {
  color: #1f2928 !important;
  -webkit-text-fill-color: #1f2928 !important;
  caret-color: #1f2928 !important;
  background: #fff !important;
  border-color: rgba(81, 56, 37, .30) !important;
}

body.mode-light input::placeholder,
body.mode-light textarea::placeholder {
  color: #6c7774 !important;
  -webkit-text-fill-color: #6c7774 !important;
  opacity: 1 !important;
}

body.mode-dark input:not([type=checkbox]):not([type=radio]):not([type=color]),
body.mode-dark select,
body.mode-dark textarea {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;
  background: #071f21 !important;
  border-color: rgba(235, 206, 138, .37) !important;
}

body.mode-dark input::placeholder,
body.mode-dark textarea::placeholder {
  color: #bdcbc7 !important;
  -webkit-text-fill-color: #bdcbc7 !important;
  opacity: 1 !important;
}

body.mode-light th,
body.mode-light thead th,
body.mode-dark th,
body.mode-dark thead th {
  color: #fffaf1 !important;
  -webkit-text-fill-color: #fffaf1 !important;
  background-color: var(--v224-coffee-900) !important;
  background-image:
    linear-gradient(90deg, rgba(6, 55, 55, .91), rgba(70, 43, 27, .90)),
    url(../assets/img/easha-v224-brown-calligraphy.jpg) !important;
  background-size: cover !important;
  border-color: rgba(235, 206, 138, .18) !important;
}

body.mode-light td {
  color: #253130 !important;
  -webkit-text-fill-color: #253130 !important;
  background: rgba(255, 253, 248, .985) !important;
  border-color: rgba(81, 56, 37, .14) !important;
}

body.mode-light tbody tr:nth-child(even) td { background: rgba(244, 238, 228, .985) !important; }
body.mode-light tbody tr:hover td { background: #eee3d2 !important; }

body.mode-dark td {
  color: #f8fbf9 !important;
  -webkit-text-fill-color: #f8fbf9 !important;
  background: rgba(5, 31, 33, .985) !important;
  border-color: rgba(255, 255, 255, .09) !important;
}

body.mode-dark tbody tr:nth-child(even) td { background: rgba(35, 28, 22, .985) !important; }
body.mode-dark tbody tr:hover td { background: rgba(22, 69, 67, .985) !important; }

body.mode-light button.primary,
body.mode-light .primary,
body.mode-dark button.primary,
body.mode-dark .primary {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: linear-gradient(135deg, #155f5b, #49301f) !important;
  border-color: #97713d !important;
}

body.mode-light button.gold,
body.mode-light .gold,
body.mode-dark button.gold,
body.mode-dark .gold {
  color: #20170f !important;
  -webkit-text-fill-color: #20170f !important;
  background: linear-gradient(135deg, #f0d79d, #c7964d) !important;
  border-color: #a97a36 !important;
}

/* ---------- بطاقات اختيار الثيم داخل الإعدادات ---------- */
.v221-theme-preview,
.v221-theme-option.light .v221-theme-preview {
  background-image:
    linear-gradient(110deg, rgba(255, 253, 248, .77), rgba(246, 240, 231, .67)),
    url(../assets/img/easha-v224-gold-calligraphy.jpg),
    url(../assets/img/easha-v224-brown-calligraphy.jpg) !important;
  background-position: center, left center, right center !important;
  background-size: cover, 48% auto, 58% auto !important;
  background-repeat: no-repeat !important;
}

.v221-theme-option.dark .v221-theme-preview {
  background-image:
    linear-gradient(110deg, rgba(3, 24, 27, .63), rgba(32, 21, 14, .66)),
    url(../assets/img/easha-v224-gold-calligraphy.jpg),
    url(../assets/img/easha-v224-brown-calligraphy.jpg) !important;
  background-position: center, left center, right center !important;
  background-size: cover, 48% auto, 58% auto !important;
  background-repeat: no-repeat !important;
}

/* ---------- التجاوب والطباعة ---------- */
@media (max-width: 980px) {
  .login-screen-v2,
  .login-screen,
  .static-login-overlay,
  body.mode-light,
  body.mode-dark,
  body.mode-light::before,
  body.mode-dark::before,
  body.mode-light .app > main,
  body.mode-dark .app > main {
    background-attachment: scroll !important;
  }

  .login-screen-v2::before {
    background: linear-gradient(rgba(2, 17, 20, .58), rgba(2, 17, 20, .78)) !important;
  }

  body.mode-light .app > main,
  body.mode-dark .app > main {
    background-position: center, left top, right top !important;
    background-size: cover, min(68vw, 440px) auto, 390px auto !important;
  }
}

@media (max-width: 620px) {
  .v219-vision2030-login { width: 50px !important; opacity: .18 !important; }
  .login-info-v2 p { font-size: 14px !important; line-height: 1.85 !important; }
  .main-route-header { padding: 10px 13px !important; }
  .main-route-header h1 { font-size: 19px !important; }
  body.mode-light .card,
  body.mode-dark .card,
  body.mode-light .dash-panel,
  body.mode-dark .dash-panel {
    background-size: cover, 240px auto !important;
  }
}

@media print {
  body.mode-light,
  body.mode-dark,
  body.mode-light::before,
  body.mode-dark::before,
  body.mode-light .app > main,
  body.mode-dark .app > main,
  body.mode-light .card,
  body.mode-dark .card,
  body.mode-light .table-wrap,
  body.mode-dark .table-wrap {
    color: #000 !important;
    background: #fff !important;
  }
}


/* ===== easha-v225-dashboard-unified.css ===== */
/* V225 — توحيد خلفية بطاقات لوحة الرئيسية مع البطاقات العلوية */

/* جميع المساحات الواقعة أسفل لوحة التاريخ والأذكار تحمل نفس الخلفية. */
body.mode-light .new-dash .kpi-card,
body.mode-dark .new-dash .kpi-card,
body.mode-light .new-dash .dash-panel,
body.mode-dark .new-dash .dash-panel,
body.mode-light .new-dash .shortcuts-panel,
body.mode-dark .new-dash .shortcuts-panel,
body.mode-light .new-dash .quick-action,
body.mode-dark .new-dash .quick-action,
body.mode-light .new-dash .bottom-kpis > div,
body.mode-dark .new-dash .bottom-kpis > div {
  color: #fffdf8 !important;
  background-color: rgba(22, 17, 13, .88) !important;
  background-image:
    linear-gradient(135deg, rgba(7, 54, 53, .86), rgba(45, 29, 19, .86)),
    url(../assets/img/easha-v224-brown-calligraphy.jpg) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  border-color: rgba(235, 206, 138, .31) !important;
  box-shadow:
    0 14px 34px rgba(20, 13, 9, .18),
    inset 0 1px 0 rgba(255, 255, 255, .055) !important;
}

/* الأرقام والعناوين فاتحة، والعناوين الثانوية هادئة من دون فقدان الوضوح. */
body.mode-light .new-dash .kpi-card strong,
body.mode-dark .new-dash .kpi-card strong,
body.mode-light .new-dash .panel-head h3,
body.mode-dark .new-dash .panel-head h3,
body.mode-light .new-dash .quick-action b,
body.mode-dark .new-dash .quick-action b,
body.mode-light .new-dash .bottom-kpis b,
body.mode-dark .new-dash .bottom-kpis b,
body.mode-light .new-dash .alert-line span,
body.mode-dark .new-dash .alert-line span,
body.mode-light .new-dash .dash-dist-row b,
body.mode-dark .new-dash .dash-dist-row b {
  color: #fffdf8 !important;
  -webkit-text-fill-color: #fffdf8 !important;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .42) !important;
}

body.mode-light .new-dash .kpi-card :is(span,small),
body.mode-dark .new-dash .kpi-card :is(span,small),
body.mode-light .new-dash .panel-head p,
body.mode-dark .new-dash .panel-head p,
body.mode-light .new-dash .quick-action small,
body.mode-dark .new-dash .quick-action small,
body.mode-light .new-dash .bottom-kpis small,
body.mode-dark .new-dash .bottom-kpis small,
body.mode-light .new-dash .alert-line small,
body.mode-dark .new-dash .alert-line small,
body.mode-light .new-dash .dash-dist-row,
body.mode-dark .new-dash .dash-dist-row {
  color: #d7e4df !important;
  -webkit-text-fill-color: #d7e4df !important;
}

body.mode-light .new-dash .kpi-card i,
body.mode-dark .new-dash .kpi-card i,
body.mode-light .new-dash .bottom-kpis span,
body.mode-dark .new-dash .bottom-kpis span,
body.mode-light .new-dash .dash-dist-row small,
body.mode-dark .new-dash .dash-dist-row small {
  color: #ebce8a !important;
  -webkit-text-fill-color: #ebce8a !important;
}

/* الرسم الخطي والدائري فوق الخلفية الداكنة. */
body.mode-light .new-dash .line-chart line,
body.mode-dark .new-dash .line-chart line {
  stroke: rgba(255, 255, 255, .15) !important;
}

body.mode-light .new-dash .line-chart text,
body.mode-dark .new-dash .line-chart text {
  fill: #dbe7e3 !important;
}

body.mode-light .new-dash .line-chart polyline,
body.mode-dark .new-dash .line-chart polyline {
  stroke: #4ad2a9 !important;
}

body.mode-light .new-dash .line-chart circle,
body.mode-dark .new-dash .line-chart circle {
  fill: #4ad2a9 !important;
  stroke: #082d2d !important;
}

body.mode-light .new-dash .donut-chart::before,
body.mode-dark .new-dash .donut-chart::before {
  background: rgba(3, 25, 27, .97) !important;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .28) !important;
}

body.mode-light .new-dash .donut-chart b,
body.mode-dark .new-dash .donut-chart b {
  color: #fffdf8 !important;
  -webkit-text-fill-color: #fffdf8 !important;
}

body.mode-light .new-dash .donut-chart span,
body.mode-dark .new-dash .donut-chart span {
  color: #d7e4df !important;
  -webkit-text-fill-color: #d7e4df !important;
}

/* التنبيهات والجداول الداخلية لا تعود إلى الأبيض في الوضع الفاتح. */
body.mode-light .new-dash .alert-line,
body.mode-dark .new-dash .alert-line {
  color: #fffdf8 !important;
  background: rgba(255, 255, 255, .065) !important;
  border-top: 1px solid rgba(255, 255, 255, .04) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .04) !important;
}

body.mode-light .new-dash .recent-panel .table-wrap,
body.mode-dark .new-dash .recent-panel .table-wrap {
  color: #fffdf8 !important;
  background: rgba(2, 20, 22, .30) !important;
  border-color: rgba(235, 206, 138, .17) !important;
  box-shadow: none !important;
}

body.mode-light .new-dash .recent-panel table,
body.mode-dark .new-dash .recent-panel table {
  color: #fffdf8 !important;
  background: transparent !important;
}

body.mode-light .new-dash .recent-panel th,
body.mode-dark .new-dash .recent-panel th {
  color: #fff7e8 !important;
  -webkit-text-fill-color: #fff7e8 !important;
  background: rgba(49, 36, 24, .80) !important;
  border-color: rgba(235, 206, 138, .16) !important;
}

body.mode-light .new-dash .recent-panel td,
body.mode-dark .new-dash .recent-panel td,
body.mode-light .new-dash .recent-panel tbody tr:nth-child(even) td,
body.mode-dark .new-dash .recent-panel tbody tr:nth-child(even) td {
  color: #f8fbf9 !important;
  -webkit-text-fill-color: #f8fbf9 !important;
  background: rgba(4, 34, 36, .76) !important;
  border-color: rgba(255, 255, 255, .08) !important;
}

body.mode-light .new-dash .recent-panel tbody tr:nth-child(even) td,
body.mode-dark .new-dash .recent-panel tbody tr:nth-child(even) td {
  background: rgba(43, 31, 22, .74) !important;
}

body.mode-light .new-dash .recent-panel tbody tr:hover td,
body.mode-dark .new-dash .recent-panel tbody tr:hover td {
  background: rgba(20, 75, 71, .90) !important;
}

/* أزرار اللوحة تتبع الهوية الداكنة نفسها. */
body.mode-light .new-dash :is(.panel-head button,.more-btn),
body.mode-dark .new-dash :is(.panel-head button,.more-btn) {
  color: #fff8e9 !important;
  -webkit-text-fill-color: #fff8e9 !important;
  background: rgba(235, 206, 138, .11) !important;
  border-color: rgba(235, 206, 138, .34) !important;
}

/* يتغلب على قاعدة الأزرار البيضاء العامة في الثيم الفاتح. */
body.mode-light .new-dash .chart-panel .panel-head button:not(.primary):not(.gold):not(.danger):not(.nav-btn):not(.screen-tab):not(.v221-theme-option) {
  color: #fff8e9 !important;
  -webkit-text-fill-color: #fff8e9 !important;
  background: rgba(235, 206, 138, .11) !important;
  border-color: rgba(235, 206, 138, .34) !important;
}

body.mode-light .new-dash .alerts-panel button.more-btn:not(.primary):not(.gold):not(.danger):not(.nav-btn):not(.screen-tab):not(.v221-theme-option) {
  color: #fff8e9 !important;
  -webkit-text-fill-color: #fff8e9 !important;
  background: rgba(235, 206, 138, .11) !important;
  border-color: rgba(235, 206, 138, .34) !important;
}

body.mode-light .new-dash button.quick-action:not(.primary):not(.gold):not(.danger):not(.nav-btn):not(.screen-tab):not(.v221-theme-option) {
  color: #fffdf8 !important;
  background-color: rgba(22, 17, 13, .88) !important;
  background-image:
    linear-gradient(135deg, rgba(7, 54, 53, .86), rgba(45, 29, 19, .86)),
    url(../assets/img/easha-v224-brown-calligraphy.jpg) !important;
  border-color: rgba(235, 206, 138, .31) !important;
}

body.mode-light .new-dash .quick-action > span,
body.mode-dark .new-dash .quick-action > span {
  color: #ebce8a !important;
  -webkit-text-fill-color: #ebce8a !important;
  background: rgba(235, 206, 138, .13) !important;
  border: 1px solid rgba(235, 206, 138, .22) !important;
}

body.mode-light .new-dash .recent-panel td .badge:not(.ok):not(.warn):not(.bad),
body.mode-dark .new-dash .recent-panel td .badge:not(.ok):not(.warn):not(.bad) {
  color: #fff8e9 !important;
  -webkit-text-fill-color: #fff8e9 !important;
  background: rgba(235, 206, 138, .13) !important;
  border: 1px solid rgba(235, 206, 138, .28) !important;
}

body.mode-light .new-dash :is(.panel-head button,.more-btn):hover,
body.mode-dark .new-dash :is(.panel-head button,.more-btn):hover {
  color: #20170f !important;
  -webkit-text-fill-color: #20170f !important;
  background: #ebce8a !important;
}

body.mode-light .new-dash .chart-panel .panel-head button:not(.primary):not(.gold):not(.danger):not(.nav-btn):not(.screen-tab):not(.v221-theme-option):hover {
  color: #20170f !important;
  -webkit-text-fill-color: #20170f !important;
  background: #ebce8a !important;
}

body.mode-light .new-dash .alerts-panel button.more-btn:not(.primary):not(.gold):not(.danger):not(.nav-btn):not(.screen-tab):not(.v221-theme-option):hover {
  color: #20170f !important;
  -webkit-text-fill-color: #20170f !important;
  background: #ebce8a !important;
}

body.mode-light .new-dash .quick-action:hover,
body.mode-dark .new-dash .quick-action:hover {
  background-image:
    linear-gradient(135deg, rgba(10, 76, 71, .91), rgba(72, 45, 27, .91)),
    url(../assets/img/easha-v224-brown-calligraphy.jpg) !important;
  border-color: rgba(235, 206, 138, .52) !important;
}

@media print {
  body.mode-light .new-dash .kpi-card,
  body.mode-dark .new-dash .kpi-card,
  body.mode-light .new-dash .dash-panel,
  body.mode-dark .new-dash .dash-panel,
  body.mode-light .new-dash .shortcuts-panel,
  body.mode-dark .new-dash .shortcuts-panel,
  body.mode-light .new-dash .bottom-kpis > div,
  body.mode-dark .new-dash .bottom-kpis > div {
    color: #000 !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  body.mode-light .new-dash :is(.kpi-card,.dash-panel,.shortcuts-panel,.bottom-kpis > div) :is(h1,h2,h3,h4,p,span,small,b,strong),
  body.mode-dark .new-dash :is(.kpi-card,.dash-panel,.shortcuts-panel,.bottom-kpis > div) :is(h1,h2,h3,h4,p,span,small,b,strong),
  body.mode-light .new-dash .recent-panel :is(th,td),
  body.mode-dark .new-dash .recent-panel :is(th,td) {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    background: #fff !important;
    text-shadow: none !important;
  }
}


/* ===== easha-v226-login-background.css ===== */
/* V226 — تثبيت الصورة المرفقة كخلفية شاشة الدخول فقط */

html:has(.login-screen),
body:has(.login-screen),
html:has(.login-screen-v2),
body:has(.login-screen-v2),
html:has(.static-login-overlay:not(.hidden)),
body:has(.static-login-overlay:not(.hidden)) {
  background-color: #04191c !important;
}

.login-screen,
.login-screen-v2 {
  isolation: isolate !important;
  background-color: #04191c !important;
  background-image: url(../assets/img/easha-v226-login-background.jpg) !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

.static-login-overlay {
  background-color: #04191c !important;
  background-image: url(../assets/img/easha-v226-login-background.jpg) !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

.login-screen-v2::before,
.static-login-overlay::before {
  background: rgba(2, 17, 20, .30) !important;
}

@media (max-width: 980px) {
  .login-screen,
  .login-screen-v2,
  .static-login-overlay {
    background-attachment: scroll !important;
    background-position: center center !important;
  }

  .login-screen-v2::before,
  .static-login-overlay::before {
    background: rgba(2, 17, 20, .42) !important;
  }
}

@media print {
  .login-screen,
  .login-screen-v2,
  .static-login-overlay {
    background: #fff !important;
  }
}


/* ===== easha-v227-reports-login-admin.css ===== */
/* V227 — Arabic reports and administrator controls for the login screen. */

.v227-reports-page {
  display: grid;
  gap: 16px;
}

.v227-report-intro,
.v227-cost-card,
.v227-arabic-reports {
  border: 1px solid rgba(204, 169, 86, .28);
  border-radius: 18px;
  background: rgba(4, 31, 34, .88);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .16);
}

.v227-report-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 21px;
}

.v227-report-intro h2,
.v227-cost-card h3,
.v227-arabic-reports h3 {
  margin: 0 0 6px;
  color: #fff;
}

.v227-report-intro p,
.v227-cost-card p,
.v227-arabic-reports p {
  margin: 0;
  color: #c8d8d7;
  line-height: 1.75;
}

.v227-report-badge {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid rgba(223, 190, 101, .48);
  border-radius: 999px;
  color: #f4d98b;
  font-size: 12px;
  font-weight: 800;
  background: rgba(223, 190, 101, .10);
}

.v227-cost-card,
.v227-arabic-reports {
  padding: 18px;
}

.v227-cost-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.v227-cost-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}

.v227-cost-controls label {
  display: grid;
  gap: 6px;
  color: #e7eeee;
  font-size: 12px;
  font-weight: 800;
}

.v227-cost-controls input,
.v227-cost-controls select {
  min-height: 42px;
  color: #fff;
  border: 1px solid rgba(216, 184, 99, .34);
  border-radius: 10px;
  background: rgba(255, 255, 255, .055);
}

.v227-cost-controls option {
  color: #152522;
  background: #fff;
}

.v227-cost-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.v227-cost-summary > div {
  min-height: 84px;
  padding: 13px;
  border: 1px solid rgba(211, 177, 85, .22);
  border-radius: 13px;
  background: rgba(255, 255, 255, .045);
}

.v227-cost-summary span,
.v227-cost-summary b,
.v227-cost-summary small {
  display: block;
}

.v227-cost-summary span {
  color: #c7d7d6;
  font-size: 11px;
}

.v227-cost-summary b {
  margin-top: 6px;
  color: #f4d889;
  font-size: 21px;
}

.v227-cost-summary small {
  margin-top: 3px;
  color: #aebfbe;
  font-size: 9px;
}

.v227-cost-table-wrap {
  overflow: auto;
  border: 1px solid rgba(211, 177, 85, .18);
  border-radius: 13px;
}

.v227-cost-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  color: #edf5f4;
  font-size: 11px;
}

.v227-cost-table th,
.v227-cost-table td {
  padding: 10px 9px;
  border-bottom: 1px solid rgba(211, 177, 85, .14);
  text-align: right;
}

.v227-cost-table th {
  color: #f5dfa0;
  background: #103d3a;
  white-space: nowrap;
}

.v227-empty-report {
  padding: 24px !important;
  color: #c7d7d6;
  text-align: center !important;
}

.v227-arabic-report-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.v227-arabic-report-card {
  display: flex;
  flex-direction: column;
  min-height: 142px;
  padding: 14px;
  border: 1px solid rgba(211, 177, 85, .20);
  border-radius: 13px;
  background: rgba(255, 255, 255, .04);
}

.v227-arabic-report-card b {
  color: #fff;
  font-size: 14px;
}

.v227-arabic-report-card strong {
  margin: 9px 0 4px;
  color: #f4d889;
  font-size: 24px;
}

.v227-arabic-report-card small {
  flex: 1;
  color: #b9cac8;
  line-height: 1.6;
}

.v227-arabic-report-card button {
  margin-top: 11px;
}

.v227-login-admin-panel {
  margin: 14px 0;
  padding: 16px;
  border: 1px solid rgba(202, 165, 72, .34);
  border-radius: 16px;
  background: rgba(6, 42, 41, .72);
}

.v227-login-admin-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.v227-login-admin-head h3 {
  margin: 0 0 5px;
  color: #fff;
}

.v227-login-admin-head p {
  margin: 0;
  color: #c7d6d5;
  line-height: 1.7;
}

.v227-login-admin-grid {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.6fr);
  gap: 14px;
}

.v227-login-preview {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 330px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(202, 165, 72, .30);
  border-radius: 14px;
  color: #fff;
  text-align: center;
  background: #092a2b url(../assets/img/easha-v226-login-background.jpg) center / cover no-repeat;
}

.v227-login-preview-inner {
  width: min(100%, 340px);
  padding: 17px;
  border: 1px solid rgba(223, 190, 101, .40);
  border-radius: 14px;
  background: rgba(2, 22, 23, .82);
}

.v227-login-preview img {
  object-fit: contain;
}

.v227-login-preview h4 {
  margin: 10px 0 4px;
}

.v227-login-preview .v227-preview-subtitle,
.v227-login-preview .v227-preview-description,
.v227-login-preview .v227-preview-extra {
  display: block;
  margin-top: 6px;
  line-height: 1.65;
}

.v227-login-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.v227-login-fields label {
  display: grid;
  gap: 6px;
  color: #e6eeee;
  font-size: 11px;
  font-weight: 800;
}

.v227-login-fields .full {
  grid-column: 1 / -1;
}

.v227-login-fields input,
.v227-login-fields select,
.v227-login-fields textarea {
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
}

.v227-login-fields textarea {
  min-height: 82px;
  resize: vertical;
}

.v227-logo-range {
  display: grid;
  grid-template-columns: 1fr 72px;
  gap: 8px;
  align-items: center;
}

.v227-logo-range input[type="range"] {
  padding: 0;
}

.v227-login-admin-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.v227-extra-login-phrases {
  display: grid;
  gap: 4px;
  margin-top: 11px;
}

.v227-extra-login-phrases span {
  display: block;
}

body.mode-light .v227-report-intro,
body.mode-light .v227-cost-card,
body.mode-light .v227-arabic-reports,
body.mode-light .v227-login-admin-panel {
  color: #172421;
  border-color: rgba(112, 76, 27, .20);
  background: rgba(255, 253, 247, .94);
}

body.mode-light .v227-report-intro h2,
body.mode-light .v227-cost-card h3,
body.mode-light .v227-arabic-reports h3,
body.mode-light .v227-arabic-report-card b,
body.mode-light .v227-login-admin-head h3 {
  color: #172421;
}

body.mode-light .v227-report-intro p,
body.mode-light .v227-cost-card p,
body.mode-light .v227-arabic-reports p,
body.mode-light .v227-login-admin-head p,
body.mode-light .v227-login-fields label {
  color: #4f625d;
}

body.mode-light .v227-cost-controls label,
body.mode-light .v227-cost-table,
body.mode-light .v227-cost-controls input,
body.mode-light .v227-cost-controls select {
  color: #172421;
}

body.mode-light .v227-cost-controls input,
body.mode-light .v227-cost-controls select,
body.mode-light .v227-cost-summary > div,
body.mode-light .v227-arabic-report-card {
  background: rgba(73, 47, 17, .045);
}

@media (max-width: 1050px) {
  .v227-cost-summary,
  .v227-arabic-report-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .v227-login-admin-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .v227-report-intro,
  .v227-cost-head {
    flex-direction: column;
  }
  .v227-cost-controls,
  .v227-cost-summary,
  .v227-arabic-report-grid,
  .v227-login-fields {
    grid-template-columns: 1fr;
  }
  .v227-login-fields .full {
    grid-column: auto;
  }
}

@media print {
  .v227-cost-controls,
  .v227-report-intro,
  .v227-arabic-reports,
  .v227-login-admin-panel,
  .sidebar,
  .topbar,
  button {
    display: none !important;
  }
  .v227-cost-card {
    color: #111 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
  }
  .v227-cost-table {
    color: #111 !important;
  }
}


/* ===== easha-v229-ornaments.css ===== */
/* V229 — restrained Saudi ornament treatment for every internal module. */

body.app-ready .main-route-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image:
    linear-gradient(90deg, rgba(4, 31, 34, .84), rgba(12, 48, 48, .94)),
    url(../assets/img/easha-v229-ornament.jpg);
  background-repeat: no-repeat;
  background-position: center, left 34%;
  background-size: auto, min(46vw, 620px) auto;
}

body.mode-light.app-ready .main-route-header {
  background-image:
    linear-gradient(90deg, rgba(247, 242, 232, .88), rgba(255, 253, 248, .96)),
    url(../assets/img/easha-v229-ornament.jpg);
}

body.app-ready .main-route-header > * {
  position: relative;
  z-index: 1;
}

.v229-ornament-host {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
}

.v229-ornament-host > :not(.v229-ornament-mark) {
  position: relative;
  z-index: 1;
}

.v229-ornament-mark {
  position: absolute !important;
  z-index: 0 !important;
  inset: -38px auto auto -32px;
  width: clamp(230px, 27vw, 430px);
  height: clamp(150px, 19vw, 275px);
  display: block;
  border: 0;
  border-radius: 0 0 70% 0;
  background: url(../assets/img/easha-v229-ornament.jpg) center / cover no-repeat;
  opacity: .072;
  mix-blend-mode: multiply;
  filter: sepia(.18) saturate(.72) contrast(1.08);
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(135deg, #000 12%, rgba(0, 0, 0, .72) 48%, transparent 82%);
  mask-image: linear-gradient(135deg, #000 12%, rgba(0, 0, 0, .72) 48%, transparent 82%);
}

body.mode-dark .v229-ornament-mark,
body:not(.mode-light) .v229-ornament-mark {
  opacity: .05;
  mix-blend-mode: screen;
  filter: grayscale(.72) sepia(.2) brightness(1.4) contrast(.9);
}

body.mode-light .content input:not([type="checkbox"]):not([type="radio"]),
body.mode-light .content select,
body.mode-light .content textarea {
  background-color: rgba(255, 255, 255, .97) !important;
  color: #1f2926 !important;
  border-color: rgba(91, 71, 45, .28) !important;
}

body.mode-light .content input::placeholder,
body.mode-light .content textarea::placeholder {
  color: #6f746f !important;
  opacity: 1;
}

.easha-v229-homepage-logo {
  position: absolute;
  inset: 14px auto auto 18px;
  object-fit: contain;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .18));
}

.new-dash.v229-dashboard-logo-host {
  position: relative;
}

@media (max-width: 900px) {
  .v229-ornament-mark {
    width: 230px;
    height: 160px;
    opacity: .055;
  }

  .easha-v229-homepage-logo {
    opacity: .82;
  }
}

@media (max-width: 640px) {
  body.app-ready .main-route-header {
    background-size: auto, 320px auto;
  }

  .v229-ornament-mark {
    inset: -28px auto auto -38px;
    width: 190px;
    height: 135px;
  }
}

@media print {
  .v229-ornament-mark,
  .easha-v229-homepage-logo {
    display: none !important;
  }

  body.app-ready .main-route-header {
    background-image: none !important;
  }
}


/* ===== easha-v230-comprehensive-reports.css ===== */
/* V230 — complete reports center, contrast correction, and admin refinements. */

.nav-btn.nav-logout {
  border-color: rgba(226, 74, 78, .46) !important;
  background: linear-gradient(135deg, rgba(127, 24, 29, .28), rgba(67, 13, 17, .18)) !important;
}

.nav-btn.nav-logout b,
.nav-btn.nav-logout span {
  color: #ff6268 !important;
  -webkit-text-fill-color: #ff6268 !important;
}

.nav-btn.nav-logout b {
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: .01em;
}

.nav-btn.nav-logout:hover {
  border-color: rgba(255, 98, 104, .78) !important;
  background: rgba(133, 25, 31, .42) !important;
}

body.app-ready:not(.mode-light) .v218-ads-hub {
  --v218-ink: #f5f2e9;
  --v218-muted: #c0d0cd;
  --v218-line: rgba(220, 184, 93, .26);
  --v218-canvas: #071f22;
}

body.app-ready:not(.mode-light) .v218-ads-stat,
body.app-ready:not(.mode-light) .v218-ads-tabs,
body.app-ready:not(.mode-light) .v218-ads-panel,
body.app-ready:not(.mode-light) .v218-ad-card,
body.app-ready:not(.mode-light) .v218-screen-manager,
body.app-ready:not(.mode-light) .v218-screen-workspace,
body.app-ready:not(.mode-light) .v218-screen-preview-card,
body.app-ready:not(.mode-light) .v218-screen-form,
body.app-ready:not(.mode-light) .v218-ads-modal .modal-box,
body.app-ready:not(.mode-light) .v218-ads-preview-modal .modal-box,
body.app-ready:not(.mode-light) .v218-modal-head,
body.app-ready:not(.mode-light) .v218-ad-form > section,
body.app-ready:not(.mode-light) .v218-modal-actions {
  color: #f5f2e9 !important;
  border-color: rgba(220, 184, 93, .27) !important;
  background-color: #09292a !important;
  background-image:
    linear-gradient(135deg, rgba(5, 36, 37, .94), rgba(20, 42, 36, .91)),
    url(../assets/img/easha-v229-ornament.jpg) !important;
  background-position: center, center !important;
  background-size: auto, 520px auto !important;
  box-shadow: 0 15px 32px rgba(0, 0, 0, .22) !important;
}

body.app-ready:not(.mode-light) .v218-ads-stat {
  background-image:
    linear-gradient(135deg, rgba(8, 47, 48, .96), rgba(35, 47, 37, .92)),
    url(../assets/img/easha-v229-ornament.jpg) !important;
}

body.app-ready:not(.mode-light) .v218-ads-stat small,
body.app-ready:not(.mode-light) .v218-ads-stat > div > span,
body.app-ready:not(.mode-light) .v218-ads-toolbar p,
body.app-ready:not(.mode-light) .v218-ad-card-body > p,
body.app-ready:not(.mode-light) .v218-ad-meta,
body.app-ready:not(.mode-light) .v218-screen-workspace-head p,
body.app-ready:not(.mode-light) .v218-modal-head p,
body.app-ready:not(.mode-light) .v218-screen-field > span,
body.app-ready:not(.mode-light) .v218-screen-form summary small {
  color: #c3d2cf !important;
  -webkit-text-fill-color: #c3d2cf !important;
}

body.app-ready:not(.mode-light) .v218-ads-stat strong,
body.app-ready:not(.mode-light) .v218-ads-toolbar h2,
body.app-ready:not(.mode-light) .v218-ad-card h3,
body.app-ready:not(.mode-light) .v218-screen-workspace-head h2,
body.app-ready:not(.mode-light) .v218-section-title h3,
body.app-ready:not(.mode-light) .v218-screen-form summary b,
body.app-ready:not(.mode-light) .v218-modal-head h2,
body.app-ready:not(.mode-light) .v218-ad-form h3,
body.app-ready:not(.mode-light) .v218-ads-empty h3 {
  color: #fffaf0 !important;
  -webkit-text-fill-color: #fffaf0 !important;
}

body.app-ready:not(.mode-light) .v218-ads-search,
body.app-ready:not(.mode-light) .v218-ads-search input,
body.app-ready:not(.mode-light) .v218-ads-filters select,
body.app-ready:not(.mode-light) .v218-screen-field input,
body.app-ready:not(.mode-light) .v218-screen-field select,
body.app-ready:not(.mode-light) .v218-screen-field textarea,
body.app-ready:not(.mode-light) .v218-file-button,
body.app-ready:not(.mode-light) .v218-screen-actions button,
body.app-ready:not(.mode-light) .v218-screen-presets button,
body.app-ready:not(.mode-light) .v218-modal-actions button,
body.app-ready:not(.mode-light) .v218-icon-button {
  color: #f5f2e9 !important;
  border-color: rgba(220, 184, 93, .28) !important;
  background: rgba(2, 25, 27, .72) !important;
}

body.app-ready:not(.mode-light) .v218-ad-meta,
body.app-ready:not(.mode-light) .v218-ad-card-actions,
body.app-ready:not(.mode-light) .v218-ad-form h3,
body.app-ready:not(.mode-light) .v218-screen-form details + details {
  border-color: rgba(220, 184, 93, .20) !important;
}

body.app-ready:not(.mode-light) .v218-ad-card-actions button {
  color: #eaf3ef !important;
  background: rgba(255, 255, 255, .08) !important;
}

body.app-ready:not(.mode-light) .v218-ad-card-actions button.danger,
body.app-ready:not(.mode-light) .v218-screen-actions button.danger {
  color: #ff8588 !important;
  background: rgba(139, 27, 33, .24) !important;
}

body.app-ready:not(.mode-light) .v218-ads-tabs button:not(.active),
body.app-ready:not(.mode-light) .v218-ads-tabs b,
body.app-ready:not(.mode-light) .v218-section-title > span,
body.app-ready:not(.mode-light) .v218-screen-form summary > span,
body.app-ready:not(.mode-light) .v218-ads-empty > .v218-ads-icon {
  color: #d8e5e1 !important;
  background: rgba(255, 255, 255, .08) !important;
}

.v230-report-center {
  display: grid;
  gap: 15px;
  color: #eef5f2;
}

.v230-report-hero,
.v230-filter-panel,
.v230-report-library,
.v230-report-detail,
.v230-insights,
.v230-kpi-grid > div {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(214, 174, 75, .30);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(5, 38, 39, .95), rgba(25, 43, 35, .92)),
    url(../assets/img/easha-v229-ornament.jpg) center / 580px auto;
  box-shadow: 0 15px 34px rgba(0, 0, 0, .18);
}

.v230-report-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
}

.v230-report-title-row,
.v230-hero-actions,
.v230-library-head,
.v230-scope-tabs,
.v230-detail-heading,
.v230-detail-actions,
.v230-period-shortcuts {
  display: flex;
  align-items: center;
  gap: 9px;
}

.v230-report-title-row h2,
.v230-library-head h3,
.v230-detail-heading h3 {
  margin: 0;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.v230-report-title-row h2 {
  font-size: 24px;
}

.v230-report-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid rgba(235, 198, 105, .45);
  border-radius: 999px;
  color: #f5d77f;
  font-size: 12px;
  font-weight: 900;
  background: rgba(214, 174, 75, .12);
}

.v230-report-badge i {
  font-style: normal;
  font-size: 17px;
}

.v230-report-center button {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(220, 184, 93, .29);
  border-radius: 10px;
  color: #edf5f1;
  background: rgba(255, 255, 255, .065);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.v230-report-center button:hover {
  border-color: rgba(240, 204, 111, .62);
  transform: translateY(-1px);
}

.v230-report-center button.primary,
.v230-scope-tabs button.active {
  color: #102720;
  background: linear-gradient(135deg, #e6c56b, #bf9337);
}

.v230-filter-panel {
  padding: 15px;
}

.v230-filter-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr)) auto;
  gap: 9px;
  align-items: end;
}

.v230-filter-grid label {
  display: grid;
  gap: 6px;
  color: #d8e5e1;
  font-size: 10px;
  font-weight: 800;
}

.v230-filter-grid input,
.v230-filter-grid select {
  width: 100%;
  min-height: 39px;
  padding: 7px 9px;
  border: 1px solid rgba(220, 184, 93, .27);
  border-radius: 9px;
  color: #fff;
  background: rgba(2, 24, 26, .72);
  font: inherit;
}

.v230-filter-grid option {
  color: #182824;
  background: #fff;
}

.v230-period-shortcuts {
  flex-wrap: wrap;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid rgba(220, 184, 93, .16);
}

.v230-period-shortcuts span {
  color: #b9cbc6;
  font-size: 10px;
}

.v230-period-shortcuts button {
  min-height: 30px;
  padding: 5px 10px;
}

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

.v230-kpi-grid > div {
  min-height: 108px;
  padding: 15px;
}

.v230-kpi-grid span,
.v230-kpi-grid b,
.v230-kpi-grid small {
  position: relative;
  z-index: 1;
  display: block;
}

.v230-kpi-grid span {
  color: #c7d6d2;
  font-size: 10px;
  font-weight: 800;
}

.v230-kpi-grid b {
  margin: 7px 0 4px;
  color: #f4d783;
  font-size: 21px;
}

.v230-kpi-grid small {
  color: #aebfba;
  font-size: 9px;
  line-height: 1.6;
}

.v230-insights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}

.v230-insight {
  padding: 11px;
  border-right: 3px solid #4bbf96;
  border-radius: 9px;
  background: rgba(255, 255, 255, .045);
}

.v230-insight.warning {
  border-right-color: #e0ad47;
}

.v230-insight span,
.v230-insight b,
.v230-insight small {
  display: block;
}

.v230-insight span,
.v230-insight small {
  color: #b9cbc5;
  font-size: 9px;
}

.v230-insight b {
  margin: 5px 0;
  color: #fff;
  font-size: 14px;
}

.v230-report-library,
.v230-report-detail {
  padding: 16px;
}

.v230-library-head,
.v230-detail-heading {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 13px;
}

.v230-library-head p,
.v230-detail-heading p {
  margin: 4px 0 0;
  color: #b9cac6;
  font-size: 10px;
  line-height: 1.7;
}

.v230-scope-tabs {
  padding: 4px;
  border: 1px solid rgba(220, 184, 93, .24);
  border-radius: 11px;
  background: rgba(0, 0, 0, .15);
}

.v230-scope-tabs button {
  min-height: 31px;
  border: 0;
}

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

.v230-report-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 100px !important;
  padding: 12px !important;
  text-align: right;
  background: rgba(255, 255, 255, .045) !important;
}

.v230-report-card.active {
  border-color: rgba(239, 204, 111, .76) !important;
  background: linear-gradient(135deg, rgba(177, 133, 42, .23), rgba(22, 89, 69, .18)) !important;
}

.v230-report-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: #f1d177;
  background: rgba(218, 179, 79, .12);
  font-size: 20px;
}

.v230-report-card-copy b,
.v230-report-card-copy small {
  display: block;
}

.v230-report-card-copy b {
  color: #fff;
  font-size: 12px;
}

.v230-report-card-copy small {
  margin-top: 5px;
  color: #b6c8c3;
  font-size: 8px;
  line-height: 1.6;
}

.v230-report-card strong {
  color: #f2d27a;
  font-size: 11px;
  white-space: nowrap;
}

.v230-report-card em {
  position: absolute;
  top: 7px;
  left: 7px;
  color: #94aaa4;
  font-size: 7px;
  font-style: normal;
}

.v230-detail-heading span {
  color: #f0cf73;
  font-size: 9px;
  font-weight: 900;
}

.v230-data-notice {
  margin-bottom: 11px;
  padding: 9px 11px;
  border: 1px solid rgba(225, 182, 76, .28);
  border-radius: 9px;
  color: #e8dba9;
  background: rgba(216, 172, 62, .08);
  font-size: 9px;
  line-height: 1.7;
}

.v230-table-wrap {
  max-height: 560px;
  overflow: auto;
  border: 1px solid rgba(220, 184, 93, .19);
  border-radius: 12px;
}

.v230-report-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  color: #edf5f2;
  font-size: 9px;
}

.v230-report-table th,
.v230-report-table td {
  padding: 9px 8px;
  border-bottom: 1px solid rgba(220, 184, 93, .13);
  text-align: right;
  vertical-align: top;
}

.v230-report-table th {
  position: sticky;
  z-index: 2;
  top: 0;
  color: #f7dda0;
  background: #0b3b38;
  white-space: nowrap;
}

.v230-report-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, .027);
}

.v230-report-table tbody tr:hover {
  background: rgba(221, 181, 81, .075);
}

.v230-empty {
  padding: 28px !important;
  color: #b9cac6;
  text-align: center !important;
}

body.mode-light .v230-report-center {
  color: #172421;
}

body.mode-light .v230-report-hero,
body.mode-light .v230-filter-panel,
body.mode-light .v230-report-library,
body.mode-light .v230-report-detail,
body.mode-light .v230-insights,
body.mode-light .v230-kpi-grid > div {
  border-color: rgba(118, 82, 33, .22);
  background:
    linear-gradient(135deg, rgba(255, 252, 244, .96), rgba(238, 232, 217, .93)),
    url(../assets/img/easha-v229-ornament.jpg) center / 580px auto;
  box-shadow: 0 12px 26px rgba(73, 51, 28, .10);
}

body.mode-light .v230-report-title-row h2,
body.mode-light .v230-library-head h3,
body.mode-light .v230-detail-heading h3,
body.mode-light .v230-report-card-copy b,
body.mode-light .v230-insight b {
  color: #18312c;
  -webkit-text-fill-color: #18312c;
}

body.mode-light .v230-library-head p,
body.mode-light .v230-detail-heading p,
body.mode-light .v230-report-card-copy small,
body.mode-light .v230-insight span,
body.mode-light .v230-insight small,
body.mode-light .v230-kpi-grid span,
body.mode-light .v230-kpi-grid small,
body.mode-light .v230-period-shortcuts span,
body.mode-light .v230-filter-grid label {
  color: #536761;
}

body.mode-light .v230-filter-grid input,
body.mode-light .v230-filter-grid select {
  color: #172421;
  border-color: rgba(118, 82, 33, .24);
  background: rgba(255, 255, 255, .90);
}

body.mode-light .v230-report-center button:not(.primary):not(.active),
body.mode-light .v230-report-card {
  color: #29443d;
  border-color: rgba(118, 82, 33, .22);
  background: rgba(83, 63, 34, .055) !important;
}

body.mode-light .v230-report-table {
  color: #172421;
}

body.mode-light .v230-report-table th {
  color: #fff;
  background: #315b52;
}

body.mode-light .v230-report-table tbody tr:nth-child(even) {
  background: rgba(64, 84, 73, .04);
}

@media (max-width: 1180px) {
  .v230-filter-grid { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
  .v230-report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v230-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .v230-report-hero,
  .v230-library-head,
  .v230-detail-heading { flex-direction: column; align-items: stretch; }
  .v230-report-title-row { flex-wrap: wrap; }
  .v230-filter-grid,
  .v230-kpi-grid,
  .v230-report-grid,
  .v230-insights { grid-template-columns: 1fr; }
  .v230-hero-actions,
  .v230-detail-actions { flex-wrap: wrap; }
  .v230-report-card { grid-template-columns: 42px minmax(0, 1fr); }
  .v230-report-card strong { grid-column: 2; }
}

@media print {
  .v230-report-hero,
  .v230-filter-panel,
  .v230-kpi-grid,
  .v230-insights,
  .v230-report-library,
  .v230-detail-actions,
  .sidebar,
  .topbar { display: none !important; }
  .v230-report-detail { color: #111 !important; border: 0 !important; box-shadow: none !important; background: #fff !important; }
  .v230-report-table { color: #111 !important; }
}


/* ===== easha-v231-saudi-light-theme.css ===== */
/* V231 — Saudi heritage light theme. The dark theme remains untouched. */
:root {
  --v231-paper: #fffdf8;
  --v231-paper-soft: #f7f1e7;
  --v231-ink: #183239;
  --v231-muted: #5d6d6d;
  --v231-teal: #0a4c54;
  --v231-teal-deep: #06353d;
  --v231-gold: #ba893e;
  --v231-gold-soft: #e6c989;
  --v231-line: rgba(104, 73, 42, .24);
  --v231-shadow: 0 16px 38px rgba(67, 47, 31, .16);
}

/* Full interior background. */
body.mode-light {
  color: var(--v231-ink) !important;
  background-color: #eadfce !important;
  background-image:
    linear-gradient(115deg, rgba(255, 253, 248, .38), rgba(248, 238, 221, .22)),
    url(../assets/img/easha-v231-light-main-bg.jpg) !important;
  background-position: center, center !important;
  background-size: cover, cover !important;
  background-repeat: no-repeat, no-repeat !important;
  background-attachment: fixed, fixed !important;
}

body.mode-light::before {
  background:
    linear-gradient(115deg, rgba(255, 253, 248, .26), rgba(250, 244, 233, .12)),
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, .38), transparent 34%) !important;
  opacity: 1 !important;
}

body.mode-light .app > main {
  position: relative;
  color: var(--v231-ink) !important;
  background-color: transparent !important;
  background-image:
    linear-gradient(118deg, rgba(255, 253, 248, .62), rgba(247, 238, 224, .42)),
    url(../assets/img/easha-v231-light-main-bg.jpg) !important;
  background-position: center, center !important;
  background-size: cover, cover !important;
  background-repeat: no-repeat, no-repeat !important;
  background-attachment: fixed, fixed !important;
}

body.mode-light .content { position: relative; background: transparent !important; }

/* Light ivory navigation. */
body.mode-light .app > aside {
  color: var(--v231-ink) !important;
  background-color: rgba(255, 252, 245, .95) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 253, 248, .93), rgba(243, 233, 216, .94)),
    url(../assets/img/easha-v231-decor-blue.jpg) !important;
  background-position: center, center bottom !important;
  background-size: auto, 340px auto !important;
  background-repeat: no-repeat, no-repeat !important;
  border-color: rgba(126, 88, 44, .24) !important;
  box-shadow: -12px 0 34px rgba(77, 52, 30, .13) !important;
  backdrop-filter: blur(16px) saturate(112%) !important;
}

body.mode-light .app > aside :is(.brand,.redesigned-brand) {
  color: var(--v231-ink) !important;
  background: rgba(255, 255, 255, .58) !important;
  border: 1px solid rgba(126, 88, 44, .16) !important;
  border-radius: 16px !important;
  padding: 10px !important;
  box-shadow: 0 10px 24px rgba(75, 52, 32, .08) !important;
}

body.mode-light .app > aside :is(.sidebar-brand-lines,.sidebar-brand-lines span) {
  color: #243b40 !important;
  -webkit-text-fill-color: #243b40 !important;
  text-shadow: none !important;
}

body.mode-light .app > aside .group-title {
  color: #8c642a !important;
  -webkit-text-fill-color: #8c642a !important;
  border-bottom: 1px solid rgba(186, 137, 62, .21);
  padding-bottom: 5px;
}

body.mode-light .app > aside .nav-btn {
  color: #24373b !important;
  background: rgba(255, 255, 255, .30) !important;
  border: 1px solid transparent !important;
}

body.mode-light .app > aside .nav-btn :is(b,em) { color: inherit !important; -webkit-text-fill-color: inherit !important; }
body.mode-light .app > aside .nav-btn > span { color: #9a6d2c !important; -webkit-text-fill-color: #9a6d2c !important; }

body.mode-light .app > aside .nav-btn:hover {
  color: var(--v231-teal-deep) !important;
  background: rgba(225, 210, 184, .53) !important;
  border-color: rgba(160, 116, 54, .23) !important;
}

body.mode-light .app > aside .nav-btn.active {
  color: #fffdf6 !important;
  background-color: var(--v231-teal-deep) !important;
  background-image:
    linear-gradient(100deg, rgba(6, 53, 61, .96), rgba(25, 85, 86, .91)),
    url(../assets/img/easha-v231-decor-teal-gold.jpg) !important;
  background-position: center, center 38% !important;
  background-size: auto, cover !important;
  border-color: rgba(230, 201, 137, .57) !important;
  box-shadow: inset -4px 0 0 var(--v231-gold-soft), 0 8px 18px rgba(8, 48, 53, .18) !important;
}

body.mode-light .app > aside .nav-btn.active :is(b,em,span) { color: #fffdf6 !important; -webkit-text-fill-color: #fffdf6 !important; }

body.mode-light .app > aside .nav-btn.nav-logout {
  color: #b4232c !important;
  background: rgba(180, 35, 44, .08) !important;
  border-color: rgba(180, 35, 44, .28) !important;
}

body.mode-light .app > aside .nav-btn.nav-logout :is(b,span) { color: #c4212b !important; -webkit-text-fill-color: #c4212b !important; }

/* Light header and real decorative miniatures. */
body.mode-light .main-route-header {
  color: var(--v231-ink) !important;
  background-color: rgba(255, 253, 248, .91) !important;
  background-image:
    linear-gradient(90deg, rgba(255, 253, 248, .90), rgba(247, 239, 225, .82)),
    url(../assets/img/easha-v231-decor-bronze.jpg) !important;
  background-position: center, left 42% !important;
  background-size: auto, 210px auto !important;
  background-repeat: no-repeat, no-repeat !important;
  border-color: rgba(126, 88, 44, .23) !important;
  box-shadow: 0 10px 28px rgba(69, 48, 30, .13) !important;
  backdrop-filter: blur(18px) saturate(120%) !important;
}

body.mode-light .main-route-header :is(h1,h2,h3,p,span,small,b,strong) {
  color: var(--v231-ink) !important;
  -webkit-text-fill-color: var(--v231-ink) !important;
  text-shadow: none !important;
}

body.mode-light .main-route-header .route-identity img,
body.mode-light .main-route-header .defense-header-logo { filter: drop-shadow(0 5px 10px rgba(66, 46, 28, .16)); }

.v231-ornament-dock { display: none; }

body.mode-light .v231-ornament-dock {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  margin-inline-start: auto;
  padding: 6px 8px;
  border: 1px solid rgba(151, 108, 51, .20);
  border-radius: 16px;
  background: rgba(255, 255, 255, .54);
  box-shadow: 0 8px 20px rgba(67, 47, 31, .10);
}

.v231-mini-ornament {
  width: 40px;
  height: 40px;
  display: block;
  overflow: hidden;
  border: 2px solid rgba(198, 153, 79, .72);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 5px 12px rgba(52, 36, 25, .18);
  transform: rotate(2deg);
}

.v231-mini-ornament:nth-child(even) { transform: rotate(-2deg); }
.v231-mini-ornament img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* Ivory glass content surfaces. */
body.mode-light :is(
  .card,.notice,.stat,.table-wrap,.modal-box,.permission-modal,.panel,.dash-panel,
  .shortcuts-panel,.kpi-card,.bottom-kpis > div,.system-settings-card,.settings-section,
  .option,.v218-cr-card,.v218-cr-stat,.v218-shift-card,.v218-shift-form-section,
  .v218-shift-builder-section,.v218-ads-stat,.v218-ads-tabs,.v218-ads-panel,
  .v218-ad-card,.v218-screen-manager,.v218-screen-workspace,.v218-screen-preview-card,
  .v218-screen-form,.v218-ad-form > section
) {
  color: var(--v231-ink) !important;
  background-color: rgba(255, 253, 248, .92) !important;
  background-image:
    linear-gradient(125deg, rgba(255, 255, 255, .94), rgba(248, 240, 226, .88)),
    url(../assets/img/easha-v231-decor-blue.jpg) !important;
  background-position: center, left -38px bottom -46px !important;
  background-size: auto, 148px 148px !important;
  background-repeat: no-repeat, no-repeat !important;
  border-color: var(--v231-line) !important;
  box-shadow: var(--v231-shadow), inset 0 1px 0 rgba(255, 255, 255, .86) !important;
  backdrop-filter: blur(15px) saturate(112%) !important;
}

body.mode-light .content :is(h1,h2,h3,h4,h5,h6,b,strong),
body.mode-light .modal-box :is(h1,h2,h3,h4,h5,h6,b,strong) {
  color: var(--v231-ink) !important;
  -webkit-text-fill-color: var(--v231-ink) !important;
  text-shadow: none !important;
}

body.mode-light .content :is(p,label,li,legend,caption),
body.mode-light .modal-box :is(p,label,li,legend,caption) { color: #334b50 !important; -webkit-text-fill-color: #334b50 !important; }

body.mode-light .content :is(small,.muted,.hint,.subtext,.subtitle,.help-text,.field-hint,.note-text),
body.mode-light .modal-box :is(small,.muted,.hint,.subtext,.subtitle,.help-text,.field-hint,.note-text) {
  color: var(--v231-muted) !important;
  -webkit-text-fill-color: var(--v231-muted) !important;
}

/* Rotate supplied artwork quietly across major cards. */
body.mode-light .content > :is(.card,.notice):nth-of-type(4n+2),
body.mode-light .new-dash .dash-panel:nth-of-type(4n+2) {
  background-image: linear-gradient(125deg, rgba(255,255,255,.94), rgba(248,240,226,.88)), url(../assets/img/easha-v231-decor-teal-gold.jpg) !important;
}

body.mode-light .content > :is(.card,.notice):nth-of-type(4n+3),
body.mode-light .new-dash .dash-panel:nth-of-type(4n+3) {
  background-image: linear-gradient(125deg, rgba(255,255,255,.94), rgba(248,240,226,.88)), url(../assets/img/easha-v231-decor-bronze.jpg) !important;
}

body.mode-light .content > :is(.card,.notice):nth-of-type(4n+4),
body.mode-light .new-dash .dash-panel:nth-of-type(4n+4) {
  background-image: linear-gradient(125deg, rgba(255,255,255,.94), rgba(248,240,226,.88)), url(../assets/img/easha-v231-decor-hope.jpg) !important;
}

/* Dashboard in a genuine light style. */
body.mode-light :is(.dash-welcome,.v218-cr-hero,.v218-shifts-hero) {
  color: var(--v231-ink) !important;
  background-color: rgba(255, 253, 248, .91) !important;
  background-image:
    linear-gradient(100deg, rgba(255, 253, 248, .94), rgba(243, 230, 209, .79)),
    url(../assets/img/easha-v231-decor-teal-gold.jpg) !important;
  background-position: center, left 44% !important;
  background-size: auto, 280px auto !important;
  border-color: rgba(172, 124, 54, .32) !important;
  box-shadow: var(--v231-shadow) !important;
}

body.mode-light :is(.dash-welcome,.v218-cr-hero,.v218-shifts-hero) :is(h1,h2,h3,h4,p,span,small,b,strong),
body.mode-light .new-dash :is(.kpi-card,.dash-panel,.shortcuts-panel,.bottom-kpis > div) :is(h1,h2,h3,h4,p,span,small,b,strong) {
  color: var(--v231-ink) !important;
  -webkit-text-fill-color: var(--v231-ink) !important;
  text-shadow: none !important;
}

body.mode-light .new-dash :is(.kpi-card,.dash-panel,.shortcuts-panel,.bottom-kpis > div) {
  color: var(--v231-ink) !important;
  background-color: rgba(255, 253, 248, .93) !important;
  background-image:
    linear-gradient(125deg, rgba(255, 255, 255, .95), rgba(246, 237, 220, .89)),
    url(../assets/img/easha-v231-decor-blue.jpg) !important;
  background-position: center, left -35px bottom -38px !important;
  background-size: auto, 132px 132px !important;
  background-repeat: no-repeat, no-repeat !important;
  border-color: var(--v231-line) !important;
  box-shadow: var(--v231-shadow) !important;
}

body.mode-light .new-dash .dash-kpis .kpi-card:nth-child(4n+2),
body.mode-light .new-dash .bottom-kpis > div:nth-child(4n+2) {
  background-image: linear-gradient(125deg, rgba(255,255,255,.95), rgba(246,237,220,.89)), url(../assets/img/easha-v231-decor-bronze.jpg) !important;
}

body.mode-light .new-dash .dash-kpis .kpi-card:nth-child(4n+3),
body.mode-light .new-dash .bottom-kpis > div:nth-child(4n+3) {
  background-image: linear-gradient(125deg, rgba(255,255,255,.95), rgba(246,237,220,.89)), url(../assets/img/easha-v231-decor-hope.jpg) !important;
}

body.mode-light .new-dash .dash-kpis .kpi-card:nth-child(4n+4),
body.mode-light .new-dash .bottom-kpis > div:nth-child(4n+4) {
  background-image: linear-gradient(125deg, rgba(255,255,255,.95), rgba(246,237,220,.89)), url(../assets/img/easha-v231-decor-teal-gold.jpg) !important;
}

body.mode-light .new-dash :is(.kpi-card i,.bottom-kpis span,.dash-dist-row small) { color: #9a6d2c !important; -webkit-text-fill-color: #9a6d2c !important; }
body.mode-light .new-dash .line-chart line { stroke: rgba(39, 66, 68, .15) !important; }
body.mode-light .new-dash .line-chart text { fill: #4d6466 !important; }
body.mode-light .new-dash .line-chart polyline { stroke: #138a78 !important; }
body.mode-light .new-dash .line-chart circle { fill: #d0a64f !important; stroke: #0a4c54 !important; }
body.mode-light .new-dash .donut-chart::before { background: #fffdf8 !important; }
body.mode-light .new-dash .donut-chart :is(b,span) { color: var(--v231-ink) !important; -webkit-text-fill-color: var(--v231-ink) !important; }

body.mode-light .new-dash .alert-line {
  color: var(--v231-ink) !important;
  background: rgba(236, 226, 208, .58) !important;
  border-color: rgba(19, 138, 120, .32) !important;
}

body.mode-light .new-dash .alert-line :is(span,small,b) { color: var(--v231-ink) !important; -webkit-text-fill-color: var(--v231-ink) !important; }

/* Dark option tiles keep light copy. */
body.mode-light :is(.quick-action,.screen-tab.active,.system-settings-tabs button.active,.v221-theme-option.is-active) {
  color: #fffdf6 !important;
  background-color: var(--v231-teal-deep) !important;
  background-image:
    linear-gradient(110deg, rgba(6, 53, 61, .94), rgba(43, 69, 62, .91)),
    url(../assets/img/easha-v231-decor-teal-gold.jpg) !important;
  background-position: center, center !important;
  background-size: auto, cover !important;
  border-color: rgba(224, 190, 116, .48) !important;
}

body.mode-light :is(.quick-action,.screen-tab.active,.system-settings-tabs button.active,.v221-theme-option.is-active) :is(b,small,span,em) {
  color: #fffdf6 !important;
  -webkit-text-fill-color: #fffdf6 !important;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .38) !important;
}

body.mode-light .quick-action > span {
  color: #fff4d4 !important;
  -webkit-text-fill-color: #fff4d4 !important;
  background: rgba(230, 201, 137, .16) !important;
  border-color: rgba(230, 201, 137, .35) !important;
}

/* Forms, tables and buttons. */
body.mode-light input:not([type=checkbox]):not([type=radio]):not([type=color]),
body.mode-light select,
body.mode-light textarea {
  color: #172f35 !important;
  -webkit-text-fill-color: #172f35 !important;
  caret-color: #172f35 !important;
  background: rgba(255, 255, 255, .96) !important;
  border-color: rgba(89, 66, 43, .31) !important;
  box-shadow: inset 0 1px 2px rgba(57, 40, 25, .06) !important;
}

body.mode-light input::placeholder,
body.mode-light textarea::placeholder { color: #667779 !important; -webkit-text-fill-color: #667779 !important; opacity: 1 !important; }

body.mode-light th,
body.mode-light thead th {
  color: #fffdf5 !important;
  -webkit-text-fill-color: #fffdf5 !important;
  background-color: var(--v231-teal-deep) !important;
  background-image:
    linear-gradient(90deg, rgba(6, 53, 61, .98), rgba(35, 79, 75, .96)),
    url(../assets/img/easha-v231-decor-teal-gold.jpg) !important;
  background-size: auto, cover !important;
  border-color: rgba(230, 201, 137, .21) !important;
}

body.mode-light td,
body.mode-light tbody tr:nth-child(even) td {
  color: #1e383e !important;
  -webkit-text-fill-color: #1e383e !important;
  background: rgba(255, 253, 248, .94) !important;
  border-color: rgba(92, 68, 43, .14) !important;
}

body.mode-light tbody tr:nth-child(even) td { background: rgba(244, 237, 224, .95) !important; }
body.mode-light tbody tr:hover td { background: #eee1cc !important; }

body.mode-light button:not(.primary):not(.gold):not(.danger):not(.nav-btn):not(.screen-tab):not(.v221-theme-option):not(.quick-action) {
  color: #234048 !important;
  -webkit-text-fill-color: #234048 !important;
  background: rgba(255, 253, 248, .86) !important;
  border-color: rgba(119, 83, 43, .28) !important;
}

body.mode-light button.primary,
body.mode-light .primary { color: #fff !important; -webkit-text-fill-color: #fff !important; background: linear-gradient(135deg, #0b6264, #083b45) !important; border-color: #b98a42 !important; }

body.mode-light button.gold,
body.mode-light .gold { color: #2d2114 !important; -webkit-text-fill-color: #2d2114 !important; background: linear-gradient(135deg, #f0dba6, #c79446) !important; border-color: #aa7730 !important; }

/* Ads page readability. */
body.mode-light .v218-ads-hub {
  --v218-ink: #183239;
  --v218-muted: #5d6d6d;
  --v218-line: rgba(104, 73, 42, .24);
  --v218-canvas: rgba(255, 253, 248, .92);
}

body.mode-light .v218-ads-hub :is(h1,h2,h3,h4,b,strong,p,span,small,label) { text-shadow: none !important; }

body.mode-light .v218-ad-card-cover,
body.mode-light .v218-screen-preview {
  background-color: #0a4650 !important;
  background-image: linear-gradient(110deg, rgba(5,51,59,.82), rgba(83,62,36,.66)), url(../assets/img/easha-v231-decor-bronze.jpg) !important;
  background-position: center, center !important;
  background-size: cover, cover !important;
}

body.mode-light .v218-ad-card-cover :is(span,b,small),
body.mode-light .v218-screen-preview :is(span,b,small) { color: #fff !important; -webkit-text-fill-color: #fff !important; }

/* V230 reports converted to the new light visual language. */
body.mode-light .v230-report-center { color: var(--v231-ink) !important; }

body.mode-light :is(.v230-report-hero,.v230-filter-panel,.v230-report-library,.v230-report-detail,.v230-insights,.v230-kpi-grid > div) {
  color: var(--v231-ink) !important;
  background-color: rgba(255, 253, 248, .93) !important;
  background-image: linear-gradient(125deg, rgba(255,255,255,.95), rgba(246,237,220,.88)), url(../assets/img/easha-v231-decor-bronze.jpg) !important;
  background-position: center, left -38px bottom -42px !important;
  background-size: auto, 148px 148px !important;
  border-color: var(--v231-line) !important;
  box-shadow: var(--v231-shadow) !important;
}

body.mode-light .v230-report-title-row h2,
body.mode-light .v230-library-head h3,
body.mode-light .v230-detail-heading h3,
body.mode-light .v230-report-center :is(h1,h2,h3,h4,b,strong,p,span,small,label) { color: var(--v231-ink) !important; -webkit-text-fill-color: var(--v231-ink) !important; }

body.mode-light .v230-report-badge {
  color: #704d1d !important;
  -webkit-text-fill-color: #704d1d !important;
  background: rgba(219, 184, 112, .21) !important;
  border-color: rgba(154, 109, 44, .37) !important;
}

body.mode-light .v230-filter-grid input,
body.mode-light .v230-filter-grid select { color: var(--v231-ink) !important; -webkit-text-fill-color: var(--v231-ink) !important; background: #fff !important; }

body.mode-light .v230-report-card {
  color: var(--v231-ink) !important;
  background: rgba(255, 255, 255, .80) !important;
  border-color: rgba(104, 73, 42, .20) !important;
}

body.mode-light .v230-report-card :is(b,small,strong,em,span) { color: var(--v231-ink) !important; -webkit-text-fill-color: var(--v231-ink) !important; }

body.mode-light .v230-report-card.active {
  color: #fffdf6 !important;
  background-color: var(--v231-teal-deep) !important;
  background-image: linear-gradient(110deg, rgba(6,53,61,.96), rgba(40,78,72,.92)), url(../assets/img/easha-v231-decor-teal-gold.jpg) !important;
  background-size: auto, cover !important;
  border-color: rgba(230, 201, 137, .52) !important;
}

body.mode-light .v230-report-card.active :is(b,small,strong,em,span) { color: #fffdf6 !important; -webkit-text-fill-color: #fffdf6 !important; }

body.mode-light .v230-report-center button.primary,
body.mode-light .v230-scope-tabs button.active { color: #fff !important; -webkit-text-fill-color: #fff !important; background: linear-gradient(135deg, #0b6264, #083b45) !important; }

/* Theme selector preview. */
.v221-theme-option.light .v221-theme-preview {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(110deg, rgba(255,253,248,.39), rgba(247,237,219,.19)), url(../assets/img/easha-v231-light-main-bg.jpg) !important;
  background-position: center, center !important;
  background-size: cover, cover !important;
}

.v221-theme-option.light .v221-theme-preview :is(i,em,strong) {
  position: absolute;
  bottom: 8px;
  width: 31px;
  height: 31px;
  display: block;
  border: 2px solid rgba(237, 211, 154, .88);
  border-radius: 10px;
  background-position: center;
  background-size: cover;
  box-shadow: 0 4px 10px rgba(44, 31, 23, .22);
}

.v221-theme-option.light .v221-theme-preview i { right: 9px; background-image: url(../assets/img/easha-v231-decor-teal-gold.jpg); }
.v221-theme-option.light .v221-theme-preview em { right: 45px; background-image: url(../assets/img/easha-v231-decor-bronze.jpg); }
.v221-theme-option.light .v221-theme-preview strong { right: 81px; background-image: url(../assets/img/easha-v231-decor-blue.jpg); }

@media (max-width: 1050px) {
  body.mode-light,
  body.mode-light .app > main { background-attachment: scroll, scroll !important; background-position: center, center top !important; }
  body.mode-light .v231-ornament-dock { gap: 5px; }
  .v231-mini-ornament { width: 34px; height: 34px; border-radius: 11px; }
}

@media (max-width: 760px) {
  body.mode-light .main-route-header { flex-wrap: wrap; }
  body.mode-light .v231-ornament-dock { width: 100%; justify-content: center; margin: 4px 0 0; }
  body.mode-light .app > aside { background-size: auto, 240px auto !important; }
}

@media (max-width: 480px) {
  .v231-mini-ornament { width: 31px; height: 31px; }
  body.mode-light .content { padding: 10px !important; }
  body.mode-light :is(.card,.notice,.dash-panel,.kpi-card) { border-radius: 15px !important; }
}

@media print {
  .v231-ornament-dock { display: none !important; }
  body.mode-light,
  body.mode-light::before,
  body.mode-light .app > main,
  body.mode-light :is(.card,.notice,.table-wrap,.dash-panel,.kpi-card,.v230-report-detail) {
    color: #000 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
}


/* ===== easha-v231-readable-typography.css ===== */
/* V231 — Unified Arabic readability scale for every internal screen.
   This layer is loaded last so legacy 7–11px labels remain readable without
   flattening the heading hierarchy or changing the selected theme. */

:root {
  --easha-type-micro: 12.5px;
  --easha-type-caption: 13px;
  --easha-type-body: 14px;
  --easha-type-control: 14px;
  --easha-type-nav: 15px;
  --easha-type-section: 18px;
  --easha-type-title: 24px;
  --easha-icon-inline: 19px;
  --easha-icon-box: 38px;
}

html { font-size: 16px; }

body {
  font-size: 15px !important;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.app-ready .app {
  font-size: var(--easha-type-body) !important;
  line-height: 1.65;
}

/* Core reading surfaces and controls. */
body.app-ready .app :is(p, li, label, legend, caption, td, th),
body.app-ready > .modal :is(p, li, label, legend, caption, td, th),
body.app-ready > [class*="modal"] :is(p, li, label, legend, caption, td, th) {
  font-size: var(--easha-type-body) !important;
  line-height: 1.6 !important;
}

body.app-ready .app :is(button, input, select, textarea),
body.app-ready > .modal :is(button, input, select, textarea),
body.app-ready > [class*="modal"] :is(button, input, select, textarea) {
  font-size: var(--easha-type-control) !important;
  line-height: 1.45 !important;
}

body.app-ready .app small,
body.app-ready > .modal small,
body.app-ready > [class*="modal"] small,
body.app-ready .app :is(.small, .subtitle, .note, .hint),
body.app-ready .app :is([class$="-hint"], [class$="-note"], [class$="-sub"]) {
  font-size: var(--easha-type-caption) !important;
  line-height: 1.6 !important;
}

body.app-ready .app :is(.badge, [class$="-badge"], [class$="-status"], [class$="-state"]),
body.app-ready > [class*="modal"] :is(.badge, [class$="-badge"], [class$="-status"], [class$="-state"]) {
  font-size: var(--easha-type-micro) !important;
  line-height: 1.35 !important;
}

body.app-ready .app h1 { font-size: clamp(26px, 2.25vw, 36px) !important; line-height: 1.3 !important; }
body.app-ready .app h2 { font-size: clamp(22px, 1.75vw, 30px) !important; line-height: 1.35 !important; }
body.app-ready .app h3 { font-size: var(--easha-type-section) !important; line-height: 1.45 !important; }
body.app-ready .app h4 { font-size: 16px !important; line-height: 1.45 !important; }

html body.app-ready > .modal h2,
html body.app-ready > [class*="-modal"] h2 {
  font-size: var(--easha-type-title) !important;
  line-height: 1.35 !important;
}

html body.app-ready > .modal h3,
html body.app-ready > [class*="-modal"] h3 {
  font-size: 17px !important;
  line-height: 1.45 !important;
}

/* Sidebar: one clear scale and icon-to-label ratio. */
body.app-ready .app > aside > nav .nav-btn:not(.nav-logout) {
  min-height: 46px !important;
  grid-template-columns: 28px minmax(0, 1fr) auto !important;
  column-gap: 9px !important;
  padding: 8px 11px !important;
  font-size: var(--easha-type-nav) !important;
  line-height: 1.45 !important;
}

html body.app-ready .app > aside > nav .nav-btn > b,
html body.app-ready .app > aside > nav .nav-btn:not(.nav-logout) > b {
  font-size: var(--easha-type-nav) !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
}

body.app-ready .app > aside > nav .nav-btn > span {
  width: 28px !important;
  min-width: 28px !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

html body.app-ready .app > aside > nav .nav-btn > em,
html body.app-ready .app > aside > nav .nav-btn:not(.nav-logout) > em {
  min-width: 22px !important;
  font-size: var(--easha-type-micro) !important;
  line-height: 1.2 !important;
}

html body.app-ready .app > aside > nav .group-title {
  margin-top: 16px !important;
  font-size: var(--easha-type-caption) !important;
  font-weight: 900 !important;
  line-height: 1.5 !important;
}

html body.mode-light.app-ready .app > aside > nav .group-title {
  color: #6f4d28 !important;
  -webkit-text-fill-color: #6f4d28 !important;
}

html body.mode-light.app-ready .app > aside > nav .nav-btn:not(.nav-logout):not(.active) > em {
  color: #785222 !important;
  -webkit-text-fill-color: #785222 !important;
}

html body.mode-light.app-ready .app > aside > nav .nav-btn.active > em {
  color: #fffdf6 !important;
  -webkit-text-fill-color: #fffdf6 !important;
}

body.app-ready .app > aside > nav .nav-btn.nav-logout b {
  font-size: 17px !important;
}

/* Horizontal module tabs and quick actions shown above routes. */
body.app-ready .app :is(.screen-tab, .m7-tabs button, .quick-action) {
  min-height: 43px !important;
  font-size: var(--easha-type-control) !important;
  line-height: 1.45 !important;
}

body.app-ready .app :is(.screen-tab b, .screen-tab span, .quick-action b) {
  font-size: var(--easha-type-control) !important;
}

body.app-ready .app :is(.screen-tab em, .quick-action small, .screen-tabs-label) {
  font-size: var(--easha-type-caption) !important;
  line-height: 1.45 !important;
}

body.app-ready .app .main-route-header > div > span,
body.app-ready .app .main-title .range,
body.app-ready .app .panel-head p,
body.app-ready .app .welcome-date span {
  font-size: var(--easha-type-caption) !important;
  line-height: 1.6 !important;
}

/* Common KPI, metadata and workflow labels used by legacy and new routes. */
body.app-ready .app :is(
  .stat span, .health-kpi span, .health-kpi small,
  .service-kpi span, .employee-performance-kpi span,
  .dashboard-meta-chip small, .admin-mini-stats .stat span,
  .p149-stats span, .v153-report-summary span, .v189-kpis span,
  .v209-request-cards span, .v209-summary-grid span,
  .v213-cost-page .v213-kpi span,
  .v213-cost-page .v213-contract-summary span,
  .donut-chart span
) {
  font-size: var(--easha-type-caption) !important;
  line-height: 1.5 !important;
}

body.app-ready .app :is(
  .meta, .meta span, .meta b, .meta div,
  .messaging-v176-meta, .v192-report-meta b,
  .v209-print-meta, .v209-print-meta span,
  .v214-shift-meta span
) {
  font-size: var(--easha-type-caption) !important;
  line-height: 1.55 !important;
}

body.app-ready .app :is(
  .approval-path span, .recipe-operation-path span,
  .workflow-stage-grid label, .delegation-step b,
  .delegation-step small, .v209-workflow-strip span,
  .v212-contract-modal .v212-flow span,
  .v214-shift-page .v214-shift-step span
) {
  font-size: var(--easha-type-caption) !important;
  line-height: 1.5 !important;
}

/* SVG/icon system: inline glyphs never look smaller than their labels. */
body.app-ready .app :is(
  .v218-ads-icon, .v218-gate-icon, .v218-cr-icon,
  .v218-shift-icon, .v230-report-icon svg
) {
  width: var(--easha-icon-inline) !important;
  height: var(--easha-icon-inline) !important;
  flex: 0 0 var(--easha-icon-inline) !important;
}

body.app-ready .app button > svg,
body.app-ready .app a > svg,
body.app-ready .app label > svg,
body.app-ready > [class*="modal"] button > svg {
  width: var(--easha-icon-inline) !important;
  height: var(--easha-icon-inline) !important;
  min-width: var(--easha-icon-inline) !important;
}

body.app-ready .app :is(.v218-icon-button, .icon-button, .icon-btn) {
  width: var(--easha-icon-box) !important;
  min-width: var(--easha-icon-box) !important;
  height: var(--easha-icon-box) !important;
}

/* Advertising, display-screen editor and its dialogs. */
.v218-ads-modal,
.v218-ads-preview-modal {
  --v218-ink: #183640;
  --v218-muted: #526c75;
  --v218-line: #d7e2e4;
}

body.app-ready :is(.v218-ads-hub, .v218-ads-modal, .v218-ads-preview-modal) :is(
  .v218-ads-eyebrow, .v218-ad-status, .v218-ad-priority,
  .v218-ad-card-heading small, .v218-ad-meta,
  .v218-screen-list-head small, .v218-screen-list-item b,
  .v218-screen-list-item small, .v218-screen-list-note p,
  .v218-section-title small, .v218-section-title > span,
  .v218-screen-preview-foot, .v218-screen-form summary b,
  .v218-screen-form summary small, .v218-screen-field > span,
  .v218-file-button, .v218-screen-presets button,
  .v218-ad-form-grid .v218-screen-field > span
) {
  font-size: var(--easha-type-caption) !important;
  line-height: 1.55 !important;
}

body.app-ready :is(.v218-ads-hub, .v218-ads-modal, .v218-ads-preview-modal) :is(
  .v218-ads-search input, .v218-ads-filters select,
  .v218-screen-actions button, .v218-screen-field input,
  .v218-screen-field select, .v218-screen-field textarea,
  .v218-ad-form-grid input, .v218-ad-form-grid select,
  .v218-ad-form-grid textarea, .v218-modal-actions button,
  .v218-ad-card-actions button
) {
  font-size: var(--easha-type-control) !important;
}

body.app-ready :is(.v218-ads-hub, .v218-ads-modal, .v218-ads-preview-modal) :is(
  .v218-ads-toolbar p, .v218-screen-workspace-head p,
  .v218-modal-head p, .v218-ad-card-body > p, .v218-ads-empty p
) {
  font-size: var(--easha-type-body) !important;
}

body.mode-light .v218-ads-modal .modal-box,
body.mode-light .v218-ads-preview-modal .modal-box,
body.mode-light .v218-ads-modal .v218-modal-head,
body.mode-light .v218-ads-preview-modal .v218-modal-head,
body.mode-light .v218-ads-modal .v218-ad-form > section,
body.mode-light .v218-ads-preview-modal .v218-ad-form > section {
  color: #183640 !important;
  background-color: #fffdf8 !important;
}

body.mode-light :is(.v218-ads-modal, .v218-ads-preview-modal) :is(h1, h2, h3, h4, b, strong) {
  color: #183640 !important;
  -webkit-text-fill-color: #183640 !important;
}

body.mode-light :is(.v218-ads-modal, .v218-ads-preview-modal) :is(p, label, small, .v218-screen-field > span) {
  color: #405c64 !important;
  -webkit-text-fill-color: #405c64 !important;
}

body.mode-light :is(.v218-ads-modal, .v218-ads-preview-modal) :is(input, select, textarea) {
  color: #17343b !important;
  -webkit-text-fill-color: #17343b !important;
  background: #fff !important;
}

body.mode-light :is(.v218-ads-modal, .v218-ads-preview-modal) .v218-modal-actions button.primary {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Catering workflow and gate-screen modules. */
body.app-ready .app :is(.v218-catering-page, .v218-cr-page, .v218-gate-page, .v218-gate-screen) :is(
  small, p, label, button, input, select, textarea, th, td,
  [class$="-badge"], [class$="-status"], [class$="-hint"]
) {
  font-size: var(--easha-type-body) !important;
  line-height: 1.55 !important;
}

body.app-ready .app :is(
  .v218-cr-dept-count, .v218-cr-legend b, .v218-cr-result-count,
  .v218-cr-priority, .v218-cr-flow-step span,
  .v218-cr-detail-title > span, .v218-cr-stage-number,
  .v218-cr-stage-state, .v218-cr-next-action small
) {
  font-size: var(--easha-type-caption) !important;
}

body.app-ready .app :is(.v218-cr-table, .v218-cr-detail-summary, .v218-cr-detail-table) {
  font-size: var(--easha-type-caption) !important;
  line-height: 1.5 !important;
}

/* Shift management: fixes every 8–11px label visible in the supplied captures. */
body.app-ready .app :is(.v218-shifts-page, .v218-shift-modal) :is(
  p, small, label, button, input, select, textarea, th, td
) {
  font-size: var(--easha-type-body) !important;
  line-height: 1.55 !important;
}

body.app-ready .app .v218-shifts-hero > div > span,
body.app-ready .app .v218-shift-modal-head > div:first-child > span,
body.app-ready .app .v218-shift-section-title small,
body.app-ready .app .v218-shift-builder-summary small,
body.app-ready .app .v218-shift-builder-section-head small,
body.app-ready .app .v218-shift-day-head small,
body.app-ready .app .v218-shift-rotation-controls label,
body.app-ready .app .v218-shift-time-preview small,
body.app-ready .app .v218-shift-time-preview b {
  font-size: var(--easha-type-caption) !important;
  line-height: 1.5 !important;
}

body.app-ready .app :is(
  .v218-shifts-workflow span, .v218-shifts-workflow b,
  .v218-shifts-registry-head label > span, .v218-shift-status,
  .v218-shift-card-meta span, .v218-shift-return-reason,
  .v218-shift-form-grid label span, .v218-shift-period-input label,
  .v218-shift-builder-tools button, .v218-shift-membership,
  .v218-shift-rotation-controls select, .v218-shift-days-table,
  .v218-shift-employee-table
) {
  font-size: var(--easha-type-caption) !important;
  line-height: 1.5 !important;
}

body.app-ready > .v218-shift-modal :is(
  .v218-shift-modal-head > div:first-child > span,
  .v218-shift-form-grid label span,
  .v218-shift-period-input label,
  .v218-shift-time-preview small,
  .v218-shift-time-preview b,
  .v218-shift-builder-summary small,
  .v218-shift-builder-section-head small,
  .v218-shift-rotation-controls label,
  .v218-shift-day-head small,
  .v218-shift-status,
  .v218-shift-stage-state
) {
  font-size: var(--easha-type-caption) !important;
  line-height: 1.5 !important;
}

body.app-ready .app .v218-shift-card-top h3,
body.app-ready .app .v218-shift-section-title b,
body.app-ready .app .v218-shift-builder-section-head b,
body.app-ready .app .v218-shift-day-head b {
  font-size: 16px !important;
}

body.app-ready .app .v218-shift-card-days b,
body.app-ready .app .v218-shifts-stats b,
body.app-ready .app .v218-shift-builder-summary b {
  font-size: 24px !important;
  line-height: 1.2 !important;
}

body.app-ready .app .v218-shift-card-meta .v218-shift-icon {
  width: 18px !important;
  height: 18px !important;
}

/* Reports center: filters, cards, KPIs and tables use the same scale. */
body.app-ready .app .v230-report-center :is(
  p, small, label, button, input, select, textarea, th, td
) {
  font-size: var(--easha-type-body) !important;
  line-height: 1.55 !important;
}

body.app-ready .app .v230-report-center :is(
  .v230-report-badge, .v230-period-shortcuts span,
  .v230-kpi-grid span, .v230-kpi-grid small,
  .v230-insight span, .v230-insight small,
  .v230-report-card-copy small, .v230-report-card strong,
  .v230-report-card em, .v230-detail-heading span,
  .v230-data-notice, .v230-report-table
) {
  font-size: var(--easha-type-caption) !important;
  line-height: 1.55 !important;
}

body.app-ready .app .v230-report-card-copy b { font-size: 15px !important; }
body.app-ready .app .v230-kpi-grid b { font-size: 26px !important; line-height: 1.2 !important; }
body.app-ready .app .v230-report-icon { width: 46px !important; height: 46px !important; font-size: 22px !important; }

/* On-screen A4 shift preview: readable without changing the printed dimensions. */
body.app-ready .app .v218-shift-preview-stage .v218-shift-official-sheet,
body.app-ready > .v218-shift-modal .v218-shift-preview-stage .v218-shift-official-sheet {
  font-size: 7.4px !important;
  zoom: 1.12;
}

body.app-ready .app .v218-shift-preview-stage .v218-official-title h1,
body.app-ready > .v218-shift-modal .v218-shift-preview-stage .v218-official-title h1 { font-size: 12.5px !important; }
body.app-ready .app .v218-shift-preview-stage .v218-official-period h2,
body.app-ready > .v218-shift-modal .v218-shift-preview-stage .v218-official-period h2 { font-size: 10px !important; }
body.app-ready .app .v218-shift-preview-stage .v218-official-entity,
body.app-ready .app .v218-shift-preview-stage .v218-official-copy,
body.app-ready > .v218-shift-modal .v218-shift-preview-stage .v218-official-entity,
body.app-ready > .v218-shift-modal .v218-shift-preview-stage .v218-official-copy { font-size: 7.6px !important; }
body.app-ready .app .v218-shift-preview-stage .v218-official-calendar,
body.app-ready > .v218-shift-modal .v218-shift-preview-stage .v218-official-calendar { font-size: 7px !important; }
body.app-ready .app .v218-shift-preview-stage .v218-official-calendar th,
body.app-ready .app .v218-shift-preview-stage .v218-official-calendar td,
body.app-ready > .v218-shift-modal .v218-shift-preview-stage .v218-official-calendar th,
body.app-ready > .v218-shift-modal .v218-shift-preview-stage .v218-official-calendar td { font-size: 7px !important; line-height: 1.3 !important; }
body.app-ready .app .v218-shift-preview-stage .v218-official-member,
body.app-ready .app .v218-shift-preview-stage .v218-official-instructions,
body.app-ready .app .v218-shift-preview-stage .v218-official-footer,
body.app-ready > .v218-shift-modal .v218-shift-preview-stage .v218-official-member,
body.app-ready > .v218-shift-modal .v218-shift-preview-stage .v218-official-instructions,
body.app-ready > .v218-shift-modal .v218-shift-preview-stage .v218-official-instructions li,
body.app-ready > .v218-shift-modal .v218-shift-preview-stage .v218-official-footer { font-size: 7.4px !important; line-height: 1.45 !important; }

/* Mini display canvas is a deliberately scaled preview; keep its hierarchy compact. */
body.app-ready .app .v218-screen-canvas .v218-screen-brand { font-size: clamp(10px, 1.2vw, 15px) !important; }
body.app-ready .app .v218-screen-canvas .v218-screen-brand small { font-size: 9px !important; }
body.app-ready .app .v218-screen-canvas .v218-screen-clock b { font-size: clamp(10px, 1.3vw, 16px) !important; }
body.app-ready .app .v218-screen-canvas .v218-screen-clock span { font-size: 9px !important; }
body.app-ready .app .v218-screen-canvas .v218-screen-message > span { font-size: 9px !important; }
body.app-ready .app .v218-screen-canvas .v218-screen-message h2 { font-size: clamp(17px, 2.7vw, 32px) !important; }
body.app-ready .app .v218-screen-canvas .v218-screen-message p { font-size: 11px !important; }
body.app-ready .app .v218-screen-canvas .v218-screen-ticker { font-size: 10px !important; }

@media (max-width: 980px) {
  :root {
    --easha-type-body: 14px;
    --easha-type-control: 14px;
    --easha-type-nav: 14px;
  }

  body.app-ready .app h1 { font-size: clamp(24px, 6vw, 32px) !important; }
  body.app-ready .app h2 { font-size: clamp(21px, 5vw, 28px) !important; }
}

@media (max-width: 640px) {
  :root {
    --easha-type-micro: 12px;
    --easha-type-caption: 13px;
    --easha-type-body: 14px;
    --easha-type-control: 14px;
    --easha-type-nav: 14px;
    --easha-icon-inline: 18px;
  }

  body.app-ready .app :is(button, input, select, textarea) { min-height: 42px; }
  body.app-ready .app > aside > nav .nav-btn:not(.nav-logout) { min-height: 44px !important; }
}

@media print {
  /* Screen readability rules must not enlarge unrelated official print forms. */
  body { font-size: initial !important; line-height: initial; }
}


/* ===== easha-v232-clarity.css ===== */
/* V232 — contrast, workflow clarity and readable print-preview layer. */
:root {
  --easha-type-micro: 13px;
  --easha-type-caption: 13.5px;
  --easha-type-body: 15px;
  --easha-type-control: 15px;
  --easha-type-nav: 15px;
  --easha-icon-inline: 20px;
  --easha-icon-box: 40px;
  --v232-gold: #c9a34e;
  --v232-gold-strong: #b98b2f;
  --v232-gold-line: rgba(201, 163, 78, .68);
  --v232-neutral-line: #c8d5d8;
  --v232-dark: #092a31;
  --v232-dark-soft: #0e3740;
  --v232-light: #fffdf8;
  --v232-ink: #17343b;
}

body.app-ready .app :is(p, li, label, legend, caption, td, th, button, input, select, textarea),
body.app-ready > .modal :is(p, li, label, legend, caption, td, th, button, input, select, textarea),
body.app-ready > [class*="-modal"] :is(p, li, label, legend, caption, td, th, button, input, select, textarea) {
  font-size: var(--easha-type-body) !important;
  line-height: 1.6 !important;
}

body.app-ready .app :is(small, .small, .hint, .note, .subtitle, [class$="-hint"], [class$="-note"], [class$="-sub"]),
body.app-ready > .modal :is(small, .small, .hint, .note, .subtitle),
body.app-ready > [class*="-modal"] :is(small, .small, .hint, .note, .subtitle) {
  font-size: var(--easha-type-caption) !important;
  line-height: 1.55 !important;
  opacity: 1 !important;
}

body.app-ready .app :is(button, input, select, textarea),
body.app-ready > .modal :is(button, input, select, textarea),
body.app-ready > [class*="-modal"] :is(button, input, select, textarea) {
  min-height: 42px;
}

body.app-ready .app :is(.v218-ads-icon, .v218-shift-icon, .v218-gate-icon, .v218-cr-icon) {
  width: var(--easha-icon-inline) !important;
  height: var(--easha-icon-inline) !important;
}

body.mode-light .content :is(p, small, label, td, th),
body.mode-dark .content :is(p, small, label, td, th) {
  opacity: 1 !important;
}

/* Advertising hub: golden identity edges with neutral field borders. */
.v218-ads-hub {
  --v218-line: var(--v232-neutral-line);
}

.v218-ads-hub :is(
  .v218-ads-hero, .v218-ads-stat, .v218-ads-tabs, .v218-ads-panel,
  .v218-ad-card, .v218-screen-manager, .v218-screen-preview-card,
  .v218-screen-form
),
.v218-ads-modal .modal-box,
.v218-ads-preview-modal .modal-box {
  border: 1px solid var(--v232-gold-line) !important;
  box-shadow: 0 12px 32px rgba(3, 28, 34, .14), 0 0 0 1px rgba(255, 255, 255, .04) inset !important;
}

.v218-ads-hub .v218-ads-hero {
  border-width: 1.5px !important;
}

.v218-ads-hub :is(.v218-screen-field input, .v218-screen-field select, .v218-screen-field textarea),
.v218-ads-modal :is(input, select, textarea),
.v218-ads-preview-modal :is(input, select, textarea) {
  min-height: 44px !important;
  border: 1px solid var(--v232-neutral-line) !important;
  box-shadow: none !important;
}

.v218-ads-hub :is(.v218-screen-field input, .v218-screen-field select, .v218-screen-field textarea):focus,
.v218-ads-modal :is(input, select, textarea):focus,
.v218-ads-preview-modal :is(input, select, textarea):focus {
  border-color: #3f8790 !important;
  box-shadow: 0 0 0 3px rgba(33, 117, 125, .18) !important;
}

.v218-ads-hub :is(
  .v218-ads-search input, .v218-ads-filters select,
  .v218-screen-actions button, .v218-screen-field input,
  .v218-screen-field select, .v218-screen-field textarea,
  .v218-ad-card-actions button, .v218-ads-tabs button
),
.v218-ads-modal :is(
  .v218-screen-field > span, input, select, textarea,
  .v218-file-button, .v218-modal-actions button
) {
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.v218-ads-hub :is(
  .v218-ads-toolbar p, .v218-screen-workspace-head p,
  .v218-ad-card-body > p, .v218-screen-list-note p,
  .v218-screen-preview-foot, .v218-screen-form summary small
),
.v218-ads-modal :is(.v218-modal-head p, .v218-ads-eyebrow) {
  font-size: 14px !important;
  line-height: 1.65 !important;
  opacity: 1 !important;
}

.v218-ads-hub :is(.v218-screen-field > span, .v218-screen-form summary b, .v218-screen-list-item b) {
  font-size: 14px !important;
  font-weight: 800 !important;
}

.v218-ads-hub .v218-screen-list-item small {
  font-size: 13px !important;
}

.v218-ads-hub :is(.v218-ads-btn, .v218-screen-actions button) {
  min-height: 44px !important;
}

.v218-ads-hub .v218-ads-btn-gold {
  border: 1px solid #f0d991 !important;
  background: linear-gradient(135deg, #e6c66f, #c99b3b) !important;
  color: #172f35 !important;
  -webkit-text-fill-color: #172f35 !important;
}

.v218-ads-hub :is(.v218-ads-panel, .v218-screen-manager),
.v218-ads-modal .modal-box,
.v218-ads-preview-modal .modal-box {
  overflow: hidden;
}

/* Three-step operational guide. */
.v232-ads-workflow {
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid var(--v232-gold-line);
  border-radius: 18px;
  background: rgba(255, 253, 248, .97);
  box-shadow: 0 10px 26px rgba(3, 28, 34, .10);
}

.v232-ads-workflow > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 20px;
  border-bottom: 1px solid rgba(201, 163, 78, .34);
}

.v232-ads-workflow > header span {
  display: block;
  margin-bottom: 3px;
  color: #8a641f;
  font-size: 13.5px;
  font-weight: 900;
}

.v232-ads-workflow > header h2 {
  margin: 0;
  color: var(--v232-ink);
  font-size: 20px !important;
}

.v232-ads-workflow > header small {
  max-width: 330px;
  color: #506970;
  text-align: left;
}

.v232-ads-workflow-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(201, 163, 78, .24);
}

.v232-ads-workflow-steps article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px 12px;
  min-height: 142px;
  padding: 17px;
  background: var(--v232-light);
}

.v232-ads-workflow-steps article.is-current {
  background: #f9f2df;
  box-shadow: inset 0 -3px 0 var(--v232-gold-strong);
}

.v232-ads-workflow-steps article > b {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #0b525a;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 18px !important;
}

.v232-ads-workflow-steps h3 {
  margin: 0 0 4px;
  color: var(--v232-ink);
  font-size: 16px !important;
}

.v232-ads-workflow-steps p {
  margin: 0;
  color: #49636b;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.v232-ads-workflow-steps button {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  border: 1px solid #266f76;
  border-radius: 10px;
  background: #0b525a;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 14px !important;
  font-weight: 800;
  cursor: pointer;
}

.v232-screen-help {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(54, 131, 139, .34);
  border-radius: 11px;
  background: #eaf5f4;
  color: #214850;
}

.v232-screen-help > div {
  display: grid;
  gap: 2px;
}

.v232-screen-help :is(b, span) {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  font-size: 14px !important;
}

.v232-ad-editor-guide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 16px 18px 0;
  padding: 12px 14px;
  border: 1px solid rgba(201, 163, 78, .5);
  border-radius: 11px;
  background: #f8f2e2;
  color: #28444b;
}

.v232-ad-editor-guide span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  font-size: 14px !important;
  font-weight: 800;
}

.v232-ad-editor-guide span b {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 8px;
  background: #0b525a;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.v232-ad-editor-guide i {
  width: 32px;
  height: 1px;
  background: rgba(201, 163, 78, .72);
}

/* Light advertisement surfaces. */
body.mode-light .v218-ads-hub,
body.mode-light :is(.v218-ads-modal, .v218-ads-preview-modal) {
  --v218-ink: #17343b;
  --v218-muted: #405c64;
}

body.mode-light .v218-ads-hub :is(
  .v218-ads-stat, .v218-ads-tabs, .v218-ads-panel, .v218-ad-card,
  .v218-screen-manager, .v218-screen-workspace, .v218-screen-preview-card,
  .v218-screen-form, .v218-screen-form details
),
body.mode-light :is(.v218-ads-modal, .v218-ads-preview-modal) :is(
  .modal-box, .v218-modal-head, .v218-ad-form > section, .v218-modal-actions
) {
  background: #fffdf8 !important;
  color: #17343b !important;
}

body.mode-light .v218-ads-hub :is(h1, h2, h3, h4, b, strong, p, label, small, span),
body.mode-light :is(.v218-ads-modal, .v218-ads-preview-modal) :is(h1, h2, h3, h4, b, strong, p, label, small) {
  color: #17343b !important;
  -webkit-text-fill-color: #17343b !important;
  text-shadow: none !important;
}

body.mode-light .v218-ads-hub :is(.v218-ads-hero, .v218-screen-list, .v218-screen-canvas) :is(h1, h2, h3, h4, b, strong, p, label, small, span),
body.mode-light .v218-ads-hub :is(.v218-ads-tabs button.active, .v218-ads-btn-primary, .v218-screen-actions button.save) :is(span, b),
body.mode-light .v218-ads-hub :is(.v218-ads-tabs button.active, .v218-ads-btn-primary, .v218-screen-actions button.save) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body.mode-light :is(.v218-ads-modal, .v218-ads-preview-modal) :is(input, select, textarea) {
  background: #fff !important;
  color: #17343b !important;
  -webkit-text-fill-color: #17343b !important;
}

/* Dark advertisement surfaces: never place pale text on a white modal again. */
body.mode-dark .v218-ads-hub,
body.mode-dark :is(.v218-ads-modal, .v218-ads-preview-modal) {
  --v218-ink: #f7fbfa;
  --v218-muted: #c8d8da;
  --v218-line: rgba(201, 163, 78, .48);
}

body.mode-dark .v218-ads-hub :is(
  .v218-ads-stat, .v218-ads-tabs, .v218-ads-panel, .v218-ad-card,
  .v218-screen-manager, .v218-screen-workspace, .v218-screen-preview-card,
  .v218-screen-form, .v218-screen-form details
),
body.mode-dark :is(.v218-ads-modal, .v218-ads-preview-modal) :is(
  .modal-box, .v218-modal-head, .v218-ad-form > section, .v218-modal-actions
) {
  background: var(--v232-dark) !important;
  color: #f7fbfa !important;
}

body.mode-dark .v218-ads-hub :is(h1, h2, h3, h4, b, strong, p, label, small),
body.mode-dark :is(.v218-ads-modal, .v218-ads-preview-modal) :is(h1, h2, h3, h4, b, strong, p, label, small) {
  color: #f7fbfa !important;
  -webkit-text-fill-color: #f7fbfa !important;
  text-shadow: none !important;
}

body.mode-dark .v218-ads-hub :is(.v218-ad-card-heading small, .v218-ad-meta, .v218-screen-form summary small, .v218-screen-preview-foot),
body.mode-dark :is(.v218-ads-modal, .v218-ads-preview-modal) .v218-ads-eyebrow {
  color: #d0dddf !important;
  -webkit-text-fill-color: #d0dddf !important;
}

body.mode-dark .v218-ads-hub :is(
  .v218-ads-search, .v218-ads-filters select,
  .v218-screen-field input, .v218-screen-field select, .v218-screen-field textarea,
  .v218-screen-actions button, .v218-file-button, .v218-screen-presets button
),
body.mode-dark :is(.v218-ads-modal, .v218-ads-preview-modal) :is(
  input, select, textarea, .v218-file-button, .v218-modal-close,
  .v218-modal-actions button:not(.primary)
) {
  background: #061f25 !important;
  color: #f8fbfb !important;
  -webkit-text-fill-color: #f8fbfb !important;
  border-color: #557177 !important;
}

body.mode-dark :is(.v218-ads-modal, .v218-ads-preview-modal) :is(input, textarea)::placeholder,
body.mode-dark .v218-ads-hub :is(input, textarea)::placeholder {
  color: #bacacc !important;
  -webkit-text-fill-color: #bacacc !important;
  opacity: 1 !important;
}

body.mode-dark .v218-ads-hub :is(.v218-ad-card-actions, .v218-ad-meta, .v218-screen-form details + details),
body.mode-dark :is(.v218-ads-modal, .v218-ads-preview-modal) :is(.v218-modal-head, .v218-modal-actions, .v218-ad-form h3) {
  border-color: rgba(201, 163, 78, .4) !important;
}

body.mode-dark .v232-ads-workflow,
body.mode-dark .v232-ads-workflow > header,
body.mode-dark .v232-ads-workflow-steps article,
body.mode-dark .v232-ad-editor-guide {
  background: var(--v232-dark) !important;
  color: #f7fbfa !important;
}

body.mode-dark .v232-ads-workflow-steps article.is-current {
  background: #133b42 !important;
}

body.mode-dark .v232-ads-workflow :is(h2, h3, p, small),
body.mode-dark .v232-ad-editor-guide span {
  color: #f7fbfa !important;
  -webkit-text-fill-color: #f7fbfa !important;
}

body.mode-dark .v232-screen-help {
  background: #103940;
  color: #eef8f8;
  border-color: #3f7278;
}

/* Shift preview: readable on screen, while the print popup keeps A4 dimensions. */
.v218-shift-preview-modal {
  border: 1px solid var(--v232-gold-line) !important;
}

.v218-shift-preview-stage {
  padding: 24px !important;
  overflow: auto !important;
  background: #687477 !important;
}

body.app-ready .v218-shift-preview-stage .v218-shift-official-sheet {
  zoom: 1.35;
  color: #050505 !important;
  background: #fff !important;
  box-shadow: 0 12px 38px rgba(0, 0, 0, .38) !important;
}

html body.app-ready .v218-shift-preview-modal .v218-shift-official-sheet,
html body.app-ready .v218-shift-preview-modal .v218-shift-official-sheet :is(
  header, section, footer, div, span, b, strong, small, h1, h2, h3, p, ul, li, table, tbody, tr, th, td
) {
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

html body.app-ready .v218-shift-preview-modal .v218-shift-official-sheet {
  font-size: 8.4px !important;
  line-height: 1.45 !important;
}

html body.app-ready .v218-shift-preview-modal .v218-official-title h1 {
  font-size: 14px !important;
  font-weight: 900 !important;
}

html body.app-ready .v218-shift-preview-modal .v218-official-period h2 {
  font-size: 11.5px !important;
  font-weight: 900 !important;
}

html body.app-ready .v218-shift-preview-modal .v218-official-calendar,
html body.app-ready .v218-shift-preview-modal .v218-official-calendar :is(th, td) {
  font-size: 7.5px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

html body.app-ready .v218-shift-preview-modal .v218-official-calendar tr:first-child th:not(.v218-official-row-label),
html body.app-ready .v218-shift-preview-modal .v218-official-group-head {
  background: #d7d7d7 !important;
}

html body.app-ready .v218-shift-preview-modal .v218-official-calendar .v218-official-row-label {
  background: #e4e4e4 !important;
}

html body.app-ready .v218-shift-preview-modal .v218-official-timebox {
  background: #eeeeee !important;
}

html body.app-ready .v218-shift-preview-modal :is(
  .v218-official-entity, .v218-official-copy, .v218-official-member,
  .v218-official-instructions, .v218-official-instructions li,
  .v218-official-footer, .v218-official-copies, .v218-official-sign
) {
  font-size: 8.2px !important;
  line-height: 1.5 !important;
}

.v232-shift-zoom {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px;
  border: 1px solid rgba(201, 163, 78, .55);
  border-radius: 10px;
  background: rgba(2, 22, 27, .3);
}

.v232-shift-zoom button {
  min-height: 34px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
}

.v232-shift-zoom output {
  min-width: 54px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

body.mode-light .v232-shift-zoom {
  background: #e8f0ef;
}

body.mode-light .v232-shift-zoom output {
  color: #17343b;
}

@media (max-width: 1100px) {
  .v232-ads-workflow-steps { grid-template-columns: 1fr; }
  .v232-ads-workflow-steps article { min-height: 0; }
  .v232-ads-workflow > header { align-items: flex-start; flex-direction: column; }
  .v232-ads-workflow > header small { max-width: none; text-align: right; }
}

@media (max-width: 720px) {
  :root {
    --easha-type-caption: 13px;
    --easha-type-body: 14px;
    --easha-type-control: 14px;
  }

  .v232-ad-editor-guide { align-items: stretch; flex-direction: column; }
  .v232-ad-editor-guide i { display: none; }
  .v218-shift-preview-stage { padding: 12px !important; }
  .v232-shift-zoom { width: 100%; justify-content: center; }
}

@media print {
  .v232-ads-workflow,
  .v232-screen-help,
  .v232-ad-editor-guide,
  .v232-shift-zoom {
    display: none !important;
  }

  .v218-shift-official-sheet {
    zoom: 1 !important;
  }
}


/* ===== sidebar-style-v217.css ===== */
:root {
  --easha-sidebar-font-family: Tahoma, Arial, sans-serif;
  --easha-sidebar-font-size: 15px;
  --easha-sidebar-font-color: #f7f3e8;
  --easha-sidebar-frame: rgba(201, 169, 97, .42);
  --easha-sidebar-frame-strong: rgba(226, 196, 116, .72);
}

/* نمط موحد لكل عناصر التنقل من الرئيسية حتى تسجيل الخروج. */
body.app-ready .app > aside > nav .nav-btn {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 42px !important;
  margin: 3px 0 !important;
  padding: 7px 10px !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) auto !important;
  column-gap: 8px !important;
  align-items: center !important;
  border: 1px solid var(--easha-sidebar-frame) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, .012) !important;
  box-shadow: none !important;
  font-family: var(--easha-sidebar-font-family) !important;
  font-size: var(--easha-sidebar-font-size) !important;
  line-height: 1.35 !important;
  transition: border-color .16s ease, background-color .16s ease !important;
}

body.app-ready .app > aside > nav .nav-btn:hover,
body.app-ready .app > aside > nav .nav-btn:focus-visible {
  border-color: var(--easha-sidebar-frame-strong) !important;
  background: rgba(201, 169, 97, .055) !important;
}

body.app-ready .app > aside > nav .nav-btn.active {
  border-color: var(--easha-sidebar-frame-strong) !important;
  background: rgba(201, 169, 97, .075) !important;
  box-shadow: inset 3px 0 0 rgba(226, 196, 116, .62) !important;
}

body.app-ready .app > aside > nav .nav-btn > span {
  width: 24px !important;
  font-size: 1em !important;
  line-height: 1 !important;
  opacity: .92 !important;
}

html body.app-ready .app > aside > nav .nav-btn > b,
html body.app-ready .app > aside > nav .nav-btn.active > b,
html body.app-ready.mode-light .app > aside > nav .nav-btn.nav-logout > b {
  min-width: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 600 !important;
  line-height: inherit !important;
  color: var(--easha-sidebar-font-color) !important;
  -webkit-text-fill-color: var(--easha-sidebar-font-color) !important;
}

body.app-ready .app > aside > nav .nav-btn > em {
  min-width: 18px !important;
  font-family: inherit !important;
  font-size: .88em !important;
  font-style: normal !important;
  color: #e6c66d !important;
  opacity: .95 !important;
}

body.app-ready .app > aside > nav .group-title {
  margin: 14px 7px 5px !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: var(--easha-sidebar-font-family) !important;
  font-size: max(12px, calc(var(--easha-sidebar-font-size) - 2px)) !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  color: var(--easha-sidebar-font-color) !important;
  -webkit-text-fill-color: var(--easha-sidebar-font-color) !important;
  opacity: .78 !important;
}

/* لوحة تحكم مدير النظام بخط القائمة الجانبية. */
.easha-sidebar-style-card {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(201, 169, 97, .32);
  border-radius: 12px;
  background: rgba(201, 169, 97, .045);
}

.easha-sidebar-style-card .easha-sidebar-style-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.easha-sidebar-style-card h4 {
  margin: 0 0 5px;
  color: var(--gold, #c9a961);
  font-size: 16px;
}

.easha-sidebar-style-card p {
  margin: 0;
  opacity: .78;
  line-height: 1.65;
}

.easha-sidebar-style-grid {
  display: grid;
  grid-template-columns: minmax(190px, 1.3fr) minmax(210px, 1fr) minmax(100px, .55fr) minmax(150px, .75fr);
  gap: 12px;
  align-items: end;
}

.easha-sidebar-style-field {
  display: grid;
  gap: 7px;
}

.easha-sidebar-style-field > span {
  font-weight: 700;
}

.easha-sidebar-style-field select,
.easha-sidebar-style-field input[type="number"],
.easha-sidebar-style-field input[type="color"] {
  width: 100%;
  min-height: 42px;
}

.easha-sidebar-style-field input[type="color"] {
  padding: 4px;
  cursor: pointer;
}

.easha-sidebar-style-field input[type="range"] {
  width: 100%;
  accent-color: var(--gold, #c9a961);
}

.easha-sidebar-style-preview {
  margin: 16px 0 12px;
  padding: 12px;
  border: 1px dashed rgba(201, 169, 97, .3);
  border-radius: 10px;
}

.easha-sidebar-style-preview-row {
  min-height: 42px;
  padding: 7px 10px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--easha-sidebar-frame);
  border-radius: 6px;
  background: rgba(201, 169, 97, .055);
  font-family: var(--easha-sidebar-font-family);
  font-size: var(--easha-sidebar-font-size);
  color: var(--easha-sidebar-font-color);
  line-height: 1.35;
}

.easha-sidebar-style-preview-row b {
  font-size: inherit;
  color: inherit;
}

.easha-sidebar-style-preview-row em {
  color: #e6c66d;
  font-size: .88em;
  font-style: normal;
}

.easha-sidebar-style-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.easha-sidebar-style-status {
  min-height: 22px;
  margin-inline-start: 4px;
  color: #2f9e67;
  font-weight: 700;
}

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

  .easha-sidebar-style-card .easha-sidebar-style-head {
    display: block;
  }
}


/* ===== easha-v233-navigation-cleanup.css ===== */
/* V233: طبقة زخرفية واحدة ثابتة فقط، بلا صور متراكبة عند تغيير الصفحات. */
.v229-ornament-mark,
.v231-ornament-dock {
  display: none !important;
  visibility: hidden !important;
}

body.mode-light .main-route-header,
body.mode-light .dashboard-hero,
body.mode-light .stat-card,
body.mode-light .card,
body.mode-light .panel,
body.mode-light .report-card,
body.mode-light .dash-card,
body.mode-light .dashboard-card,
body.mode-light .kpi-card,
body.mode-light .quick-action-card,
body.mode-light .activity-card,
body.mode-light .main-card,
body.mode-light .content-card,
body.mode-light .screen-card,
body.mode-light .feature-card,
body.mode-light .module-card,
body.mode-light .info-card,
body.mode-light .summary-card,
body.mode-light .widget-card,
body.mode-light .settings-section,
body.mode-light .form-section,
body.mode-light .table-wrap,
body.mode-light .modal-card,
body.mode-light .announcement-card,
body.mode-light .ad-card {
  background-image: linear-gradient(145deg, rgba(255,255,255,.97), rgba(248,244,235,.95)) !important;
}

body.mode-light .main-route-header,
body.mode-light .dashboard-hero {
  background-image: linear-gradient(110deg, rgba(8,53,55,.96), rgba(27,45,46,.94) 58%, rgba(72,47,26,.92)) !important;
}

body.mode-light .app > aside .nav-btn.active {
  background-image: linear-gradient(135deg, rgba(201,169,97,.18), rgba(9,56,57,.92)) !important;
}

body.mode-light .content > :is(.card,.notice):nth-of-type(n),
body.mode-light .new-dash .dash-panel:nth-of-type(n),
body.mode-light :is(.dash-welcome,.v218-cr-hero,.v218-shifts-hero),
body.mode-light .new-dash :is(.kpi-card,.dash-panel,.shortcuts-panel,.bottom-kpis > div),
body.mode-light :is(.v230-report-hero,.v230-filter-panel,.v230-report-library,.v230-report-detail,.v230-insights,.v230-kpi-grid > div) {
  background-image: linear-gradient(125deg, rgba(255,255,255,.97), rgba(248,244,235,.95)) !important;
}

body.mode-light .v230-report-card.active,
body.mode-light .v218-ad-card-cover,
body.mode-light .v218-screen-preview {
  background-image: linear-gradient(110deg, rgba(6,53,61,.97), rgba(62,51,34,.93)) !important;
}

/* الخلفية الرئيسية العامة تبقى وحدها وتغطي مساحة المحتوى بلا تكرار. */
body.mode-light .app > main,
body.mode-light .app-main,
body.mode-light .main-content {
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}


/* ===== easha-v236-unified-design.css ===== */
/* V236 — توحيد التصميم والخيارات بصورة واحدة من داخل البرنامج فقط */
:root{
  --easha-v236-unified-image:url(../assets/img/system-background.png);
  --easha-v236-panel:rgba(6,31,36,.88);
  --easha-v236-panel-light:rgba(255,255,255,.94);
  --easha-v236-border:rgba(201,162,67,.34);
  --easha-v236-border-strong:rgba(201,162,67,.55);
  --easha-v236-gold:#c9a243;
  --easha-v236-green:#06363a;
  --easha-v236-ink:#0d3034;
  --easha-v236-muted:#5d7172;
  --easha-v236-radius:18px;
}

/* صورة واحدة فقط للخلفيات الزخرفية داخل الشاشات: ../assets/img/system-background.png */
body .app > main,
body .app-main,
body .main-content,
body .content{
  background-image:linear-gradient(180deg,rgba(3,18,21,.80),rgba(3,18,21,.92)),var(--easha-v236-unified-image) !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
}
body.mode-light .app > main,
body.mode-light .app-main,
body.mode-light .main-content,
body.mode-light .content{
  background-image:linear-gradient(180deg,rgba(246,242,232,.88),rgba(245,240,228,.95)),var(--easha-v236-unified-image) !important;
}

/* منع تكدس الزخارف والصور المتعددة، مع إبقاء الشعارات الرسمية وصور المستفيدين كما هي */
.v229-ornament-mark,
.v231-ornament-dock,
body::before,
body::after,
.content::before,
.content::after,
.main-content::before,
.main-content::after{
  pointer-events:none !important;
}
.v229-ornament-mark,
.v231-ornament-dock{
  display:none !important;
}

/* توحيد شكل البطاقات والخيارات في كل الصفحات */
.card,
.notice,
.panel,
.main-card,
.content-card,
.screen-card,
.feature-card,
.module-card,
.info-card,
.summary-card,
.widget-card,
.report-card,
.dash-card,
.dashboard-card,
.kpi-card,
.quick-action-card,
.activity-card,
.settings-section,
.form-section,
.table-wrap,
.modal-box,
.announcement-card,
.ad-card,
.reg-topic-card,
.easha-topic-card,
.v227-arabic-report-card,
.v230-report-card,
.v209-page .card,
.v218-ad-card,
.v218-display-panel,
.v236-zk-card,
.v236-result-card{
  border:1px solid var(--easha-v236-border) !important;
  border-radius:var(--easha-v236-radius) !important;
  background:linear-gradient(145deg,rgba(8,43,48,.91),rgba(4,26,31,.88)) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.20) !important;
  overflow:hidden;
}
body.mode-light :is(.card,.notice,.panel,.main-card,.content-card,.screen-card,.feature-card,.module-card,.info-card,.summary-card,.widget-card,.report-card,.dash-card,.dashboard-card,.kpi-card,.quick-action-card,.activity-card,.settings-section,.form-section,.table-wrap,.modal-box,.announcement-card,.ad-card,.reg-topic-card,.easha-topic-card,.v227-arabic-report-card,.v230-report-card,.v209-page .card,.v218-ad-card,.v218-display-panel,.v236-zk-card,.v236-result-card){
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(248,244,235,.94)) !important;
  color:var(--easha-v236-ink) !important;
  box-shadow:0 15px 34px rgba(22,40,40,.10) !important;
}

/* كل خيار يظهر كعنصر مرتب بحد واضح وخلفية موحدة */
button,
.button,
.primary,
.small,
.nav-btn,
.screen-tab,
.actions button,
.module-toolbar button,
.login-footer-links span,
.verification-option,
.guide-outline-card,
.reg-doc-list-item,
.easha-topic-card,
.quick-action-card,
.v230-report-card,
.v236-option,
.v236-zk-employee-row{
  border:1px solid var(--easha-v236-border) !important;
  border-radius:14px !important;
  background:linear-gradient(135deg,rgba(8,52,58,.90),rgba(11,38,43,.82)) !important;
  color:#f9fbfb !important;
  box-shadow:none !important;
}
body.mode-light :is(button,.button,.primary,.small,.nav-btn,.screen-tab,.actions button,.module-toolbar button,.login-footer-links span,.verification-option,.guide-outline-card,.reg-doc-list-item,.easha-topic-card,.quick-action-card,.v230-report-card,.v236-option,.v236-zk-employee-row){
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(246,240,226,.94)) !important;
  color:var(--easha-v236-ink) !important;
}
button.primary,
.primary,
.nav-btn.active,
.screen-tab.active,
.v230-report-card.active{
  border-color:var(--easha-v236-border-strong) !important;
  background:linear-gradient(135deg,rgba(201,162,67,.28),rgba(6,54,58,.95)) !important;
  color:#fff !important;
}
body.mode-light :is(button.primary,.primary,.nav-btn.active,.screen-tab.active,.v230-report-card.active){
  background:linear-gradient(135deg,rgba(201,162,67,.22),rgba(8,67,69,.90)) !important;
  color:#fff !important;
}

/* أيقونات القائمة موحدة بالشكل نفسه بدلاً من تنوع غير منظم */
.nav-btn{
  grid-template-columns:34px 1fr auto !important;
  margin:3px 0 !important;
  min-height:44px !important;
}
.nav-btn > span:first-child,
.nav-btn > i:first-child,
.nav-btn > em:first-child{
  width:28px !important;
  height:28px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:10px !important;
  background:rgba(201,162,67,.16) !important;
  border:1px solid rgba(201,162,67,.32) !important;
  color:#f3cf6d !important;
  font-style:normal !important;
}
.nav-btn b{font-size:13.5px !important;line-height:1.45 !important;}
.nav-btn em{font-size:10.5px !important;}
.group-title{
  border-top:1px solid rgba(201,162,67,.18) !important;
  padding-top:10px !important;
}

/* الجداول والنماذج أوضح ومحددة */
table{border-collapse:separate !important;border-spacing:0 !important;width:100% !important;}
th,td{border-bottom:1px solid rgba(201,162,67,.16) !important;}
thead th{
  background:rgba(201,162,67,.13) !important;
  color:inherit !important;
  font-weight:900 !important;
}
input,select,textarea{
  border:1px solid rgba(201,162,67,.32) !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.92) !important;
  color:#173538 !important;
  min-height:42px;
}
body.mode-dark input,
body.mode-dark select,
body.mode-dark textarea{
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
}

/* شاشة البحث الذكي الجديدة */
.v236-search-shell{display:grid;gap:14px;}
.v236-search-box{display:grid;grid-template-columns:220px minmax(260px,1fr) auto;gap:10px;align-items:end;}
.v236-search-box label{display:flex;flex-direction:column;gap:6px;font-weight:900;}
.v236-search-hint{font-size:13px;line-height:1.8;color:var(--muted,#c9d8d3);}
body.mode-light .v236-search-hint{color:#566b6c;}
.v236-smart-summary{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.v236-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;border:1px solid var(--easha-v236-border);background:rgba(201,162,67,.10);font-weight:800;font-size:12px;}
.v236-result-title{display:flex;flex-direction:column;gap:4px;}
.v236-result-title small{font-size:12px;color:var(--muted,#c9d8d3);line-height:1.7;}
body.mode-light .v236-result-title small{color:#5f7373;}
.v236-snippet{line-height:1.9;max-width:640px;white-space:normal;}
.v236-highlight{background:rgba(201,162,67,.28);border-radius:6px;padding:0 3px;color:inherit;}
.v236-no-results{padding:32px;text-align:center;line-height:2;color:var(--muted,#c9d8d3);}
body.mode-light .v236-no-results{color:#607273;}

/* صفحة ZKTeco */
.v236-zk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0;}
.v236-zk-card{padding:16px;line-height:1.9;}
.v236-zk-card h3{margin:0 0 6px;font-size:18px;}
.v236-zk-card p{margin:0;color:var(--muted,#c9d8d3);}
body.mode-light .v236-zk-card p{color:#607273;}
.v236-zk-form{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:10px;align-items:end;}
.v236-zk-form label{display:flex;flex-direction:column;gap:6px;font-weight:800;}
.v236-zk-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.v236-zk-employee-list{display:grid;gap:8px;max-height:420px;overflow:auto;padding-left:4px;}
.v236-zk-employee-row{display:grid;grid-template-columns:1.4fr 170px 120px;gap:8px;align-items:center;padding:10px;}
.v236-zk-employee-row b{display:block;line-height:1.5;}
.v236-zk-employee-row small{display:block;opacity:.75;line-height:1.6;}
.v236-login-biometric{margin-top:10px !important;width:100% !important;}
.v236-zk-note{padding:10px 12px;border:1px dashed var(--easha-v236-border);border-radius:14px;line-height:1.8;background:rgba(201,162,67,.08);}
@media(max-width:980px){
  .v236-search-box,.v236-zk-form,.v236-zk-grid,.v236-zk-employee-row{grid-template-columns:1fr;}
}


/* ===== easha-v237-regulations-zkteco-polish.css ===== */
/* V237 — إصلاحات ملاحظات المستخدم: توحيد حجم خط القائمة، مكتبة وثائق حديثة، وZKTeco داخل إعدادات مدير النظام */
:root{
  --v237-card:rgba(5,28,32,.90);
  --v237-card-2:rgba(8,44,48,.88);
  --v237-gold:#c9a243;
  --v237-border:rgba(201,162,67,.38);
  --v237-border-strong:rgba(201,162,67,.58);
  --v237-muted:#c9d8d3;
  --v237-radius:18px;
}

/* إصلاح مظهر خطوط القائمة الجانبية: الحجم يطبق على كل الكلمات داخل الزر وليس جزءاً منها فقط. لا يغير الألوان. */
html body.app-ready .app > aside > nav .nav-btn,
html body.app-ready .app > aside > nav .nav-btn *:not(svg):not(path){
  font-family:var(--easha-sidebar-font-family,Tahoma,Arial,sans-serif) !important;
  font-size:var(--easha-sidebar-font-size,15px) !important;
  line-height:1.42 !important;
}
html body.app-ready .app > aside > nav .nav-btn > span,
html body.app-ready .app > aside > nav .nav-btn > i{
  width:calc(var(--easha-sidebar-font-size,15px) + 14px) !important;
  height:calc(var(--easha-sidebar-font-size,15px) + 14px) !important;
  min-width:calc(var(--easha-sidebar-font-size,15px) + 14px) !important;
  display:grid !important;
  place-items:center !important;
}
html body.app-ready .app > aside > nav .nav-btn > em{
  font-size:max(11px,calc(var(--easha-sidebar-font-size,15px) - 2px)) !important;
  line-height:1.25 !important;
}
html body.app-ready .app > aside > nav .group-title{
  font-family:var(--easha-sidebar-font-family,Tahoma,Arial,sans-serif) !important;
  font-size:max(12px,calc(var(--easha-sidebar-font-size,15px) - 1px)) !important;
  line-height:1.45 !important;
}
.easha-sidebar-style-preview-row,
.easha-sidebar-style-preview-row *{
  font-family:var(--easha-sidebar-font-family,Tahoma,Arial,sans-serif) !important;
  font-size:var(--easha-sidebar-font-size,15px) !important;
}
.easha-sidebar-style-preview-row em{font-size:max(11px,calc(var(--easha-sidebar-font-size,15px) - 2px)) !important;}

/* إخفاء أي زر قديم لتكامل ZKTeco من القائمة الجانبية فقط. التبويب الصحيح أصبح داخل إعدادات مدير النظام. */
.app > aside > nav .nav-btn[data-key="zkteco_fingerprint"],
.app > aside > nav .nav-btn[onclick*="zkteco_fingerprint"]{display:none !important;}

/* مكتبة اللوائح V237 */
.v237-reg-hero{
  position:relative;
  overflow:hidden;
  padding:22px !important;
  border:1px solid var(--v237-border) !important;
  border-radius:22px !important;
  background:
    radial-gradient(circle at 15% 0%,rgba(201,162,67,.16),transparent 35%),
    linear-gradient(135deg,rgba(6,45,49,.94),rgba(18,24,22,.90)) !important;
}
.v237-reg-hero::after{
  content:"";
  position:absolute;
  inset:auto 24px 18px 24px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,162,67,.55),transparent);
}
.v237-reg-hero h2{margin:0 0 8px;font-size:clamp(24px,2vw,34px) !important;line-height:1.35 !important;}
.v237-reg-hero p{max-width:920px;margin:0;color:var(--v237-muted);line-height:1.9;font-size:15px !important;}
.v237-reg-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px;}
.v237-reg-stat{padding:13px 14px;border:1px solid var(--v237-border);border-radius:16px;background:rgba(255,255,255,.045);}
.v237-reg-stat b{display:block;font-size:22px !important;color:#f4d680;line-height:1.2;}
.v237-reg-stat span{display:block;margin-top:5px;font-size:13px !important;color:var(--v237-muted);}

.v237-reg-controls{display:grid;grid-template-columns:minmax(280px,1fr) 220px auto auto;gap:10px;align-items:end;margin-top:12px;}
.v237-reg-controls label{display:flex;flex-direction:column;gap:7px;font-weight:900;}
.v237-reg-controls input,.v237-reg-controls select{width:100%;}
.v237-reg-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px;}
.v237-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid var(--v237-border);border-radius:999px;background:rgba(201,162,67,.11);font-weight:900;font-size:12.5px !important;line-height:1.2;}
.v237-chip.ok{border-color:rgba(69,186,128,.45);background:rgba(69,186,128,.12);}
.v237-chip.wait{border-color:rgba(201,162,67,.45);background:rgba(201,162,67,.12);}
.v237-chip.info{border-color:rgba(96,165,250,.38);background:rgba(96,165,250,.10);}

.v237-reg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px;}
.v237-doc-card{
  position:relative;
  min-height:230px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px;
  border:1px solid var(--v237-border) !important;
  border-radius:20px !important;
  background:linear-gradient(145deg,rgba(7,42,46,.91),rgba(8,24,27,.88)) !important;
  box-shadow:0 18px 34px rgba(0,0,0,.18);
}
.v237-doc-card::before{
  content:"§";
  position:absolute;
  inset-block-start:14px;
  inset-inline-start:14px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid var(--v237-border);
  border-radius:12px;
  color:#f4d680;
  background:rgba(201,162,67,.12);
  font-weight:900;
}
.v237-doc-card h3{margin:0;padding-inline-start:46px;font-size:18px !important;line-height:1.55 !important;}
.v237-doc-card .v237-doc-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:2px;}
.v237-doc-card p{margin:0;color:var(--v237-muted);line-height:1.85;font-size:13.5px !important;}
.v237-doc-snippet{min-height:56px;padding:10px 12px;border:1px dashed rgba(201,162,67,.27);border-radius:14px;background:rgba(255,255,255,.035);line-height:1.75;color:#dce9e5;font-size:13px !important;}
.v237-highlight{background:rgba(201,162,67,.30);border-radius:6px;padding:0 3px;color:inherit;}
.v237-doc-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;}
.v237-doc-actions button{min-height:38px !important;}
.v237-empty{padding:36px;text-align:center;border:1px dashed var(--v237-border);border-radius:18px;background:rgba(255,255,255,.035);line-height:1.9;color:var(--v237-muted);}
.v237-reg-index-note{margin-top:10px;padding:12px 14px;border:1px dashed var(--v237-border);border-radius:16px;background:rgba(201,162,67,.07);line-height:1.85;color:var(--v237-muted);}

.v237-document-modal{max-width:min(980px,94vw) !important;}
.v237-document-modal .v237-modal-title{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;}
.v237-document-modal .v237-modal-title > span{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;border:1px solid var(--v237-border);background:rgba(201,162,67,.12);color:#f4d680;font-weight:900;}
.v237-document-modal .v237-modal-title h2{margin:0;font-size:24px !important;line-height:1.45 !important;}
.v237-document-modal .v237-modal-title p{margin:3px 0 0;color:var(--v237-muted);}
.v237-modal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0;}
.v237-modal-grid > div{padding:12px;border:1px solid var(--v237-border);border-radius:14px;background:rgba(255,255,255,.04);}
.v237-modal-grid b{display:block;color:#f4d680;margin-bottom:6px;}
.v237-modal-body{padding:14px;border:1px solid rgba(201,162,67,.22);border-radius:16px;background:rgba(0,0,0,.14);line-height:1.9;}
.v237-modal-body p{margin:0 0 10px;}
.v237-modal-body ul{margin:8px 0 0;padding:0 22px 0 0;}
.v237-modal-body li{margin-bottom:6px;}

/* صفحة ZKTeco داخل إعدادات مدير النظام */
.v237-zk-layout{display:grid;gap:14px;}
.v237-zk-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.v237-zk-step{padding:14px;border:1px solid var(--v237-border);border-radius:16px;background:rgba(201,162,67,.07);line-height:1.8;}
.v237-zk-step b{display:block;color:#f4d680;font-size:16px !important;margin-bottom:5px;}
.v237-zk-step span{font-size:13px !important;color:var(--v237-muted);}
.v237-zk-form{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:10px;align-items:end;}
.v237-zk-form label{display:flex;flex-direction:column;gap:7px;font-weight:900;}
.v237-zk-users{display:grid;gap:8px;max-height:430px;overflow:auto;padding-inline-start:5px;}
.v237-zk-user-row{display:grid;grid-template-columns:minmax(220px,1fr) 170px 120px;gap:8px;align-items:center;padding:10px;border:1px solid var(--v237-border);border-radius:14px;background:rgba(255,255,255,.035);}
.v237-zk-user-row b{display:block;line-height:1.55;}
.v237-zk-user-row small{display:block;opacity:.78;line-height:1.5;}

body.mode-light .v237-reg-hero,
body.mode-light .v237-doc-card{
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(248,244,235,.95)) !important;
  color:#0d3034 !important;
}
body.mode-light .v237-reg-hero p,
body.mode-light .v237-doc-card p,
body.mode-light .v237-doc-snippet,
body.mode-light .v237-reg-index-note,
body.mode-light .v237-zk-step span{color:#526a6c !important;}
body.mode-light .v237-doc-snippet,
body.mode-light .v237-modal-body{background:rgba(6,54,58,.04);}

@media(max-width:1100px){
  .v237-reg-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .v237-reg-controls,.v237-zk-form,.v237-zk-steps{grid-template-columns:1fr 1fr;}
}
@media(max-width:760px){
  .v237-reg-grid,.v237-reg-stats,.v237-reg-controls,.v237-zk-form,.v237-zk-steps,.v237-zk-user-row,.v237-modal-grid{grid-template-columns:1fr;}
}


/* ===== easha-v238-sidebar-typography-fix.css ===== */
/* V238 — إصلاح نهائي للتحكم بحجم عبارات القائمة الجانبية */
:root{
  --easha-sidebar-font-family: Tahoma, Arial, sans-serif;
  --easha-sidebar-font-size: 16px;
  --easha-sidebar-label-size: 16px;
  --easha-sidebar-number-size: 15px;
  --easha-sidebar-title-size: 15px;
}

/* عبارات القائمة: عنوان الخيار + الرقم + الرمز + عناوين المجموعات كلها مرتبطة بنفس المتغير */
html body.app-ready .app > aside > nav .nav-btn,
html body.app-ready .app > aside > nav .nav-btn > b,
html body.app-ready .app > aside > nav .nav-btn > strong,
html body.app-ready .app > aside > nav .nav-btn > span,
html body.app-ready .app > aside > nav .nav-btn > em,
html body.app-ready .app > aside > nav .nav-btn > i,
html body.app-ready .app > aside > nav .nav-btn > small{
  font-family: var(--easha-sidebar-font-family, Tahoma, Arial, sans-serif) !important;
  line-height: 1.42 !important;
}

html body.app-ready .app > aside > nav .nav-btn{
  font-size: var(--easha-sidebar-font-size, 16px) !important;
  min-height: calc(var(--easha-sidebar-font-size, 16px) + 30px) !important;
  grid-template-columns: calc(var(--easha-sidebar-font-size, 16px) + 12px) minmax(0, 1fr) auto !important;
}

html body.app-ready .app > aside > nav .nav-btn > b,
html body.app-ready .app > aside > nav .nav-btn > strong{
  font-size: var(--easha-sidebar-label-size, var(--easha-sidebar-font-size, 16px)) !important;
  font-weight: 800 !important;
}

html body.app-ready .app > aside > nav .nav-btn > em{
  font-size: var(--easha-sidebar-number-size, calc(var(--easha-sidebar-font-size, 16px) - 1px)) !important;
  font-weight: 800 !important;
}

html body.app-ready .app > aside > nav .nav-btn > span,
html body.app-ready .app > aside > nav .nav-btn > i{
  width: calc(var(--easha-sidebar-font-size, 16px) + 14px) !important;
  height: calc(var(--easha-sidebar-font-size, 16px) + 14px) !important;
  min-width: calc(var(--easha-sidebar-font-size, 16px) + 14px) !important;
  font-size: var(--easha-sidebar-font-size, 16px) !important;
  display: grid !important;
  place-items: center !important;
}

html body.app-ready .app > aside > nav .group-title{
  font-family: var(--easha-sidebar-font-family, Tahoma, Arial, sans-serif) !important;
  font-size: var(--easha-sidebar-title-size, calc(var(--easha-sidebar-font-size, 16px) - 1px)) !important;
  line-height: 1.45 !important;
  font-weight: 900 !important;
}

/* وضوح لوحة التحكم نفسها */
#eashaSidebarStylePanel .easha-sidebar-style-field input[type="range"]{
  height: 30px !important;
  cursor: ew-resize !important;
}
#eashaSidebarStylePanel .easha-sidebar-style-field input[type="number"]{
  font-size: 18px !important;
  font-weight: 900 !important;
  text-align: center !important;
}
#eashaSidebarStylePanel .easha-sidebar-style-preview-row,
#eashaSidebarStylePanel .easha-sidebar-style-preview-row *{
  font-family: var(--easha-sidebar-font-family, Tahoma, Arial, sans-serif) !important;
  font-size: var(--easha-sidebar-font-size, 16px) !important;
}
#eashaSidebarStylePanel .easha-sidebar-style-status{
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: rgba(201,162,67,.10) !important;
  color: #f3d27a !important;
}


/* ===== easha-v239-gate-zkteco-polish.css ===== */
/* V239 — إصلاح بوابة دخول الوجبات: وضوح النص، خلفية موحدة، حدود ذهبية، وربط مباشر ببصمة ZKTeco */
:root{
  --v239-gold:#d7b35a;
  --v239-gold-strong:#f1d27a;
  --v239-ink:#f8f2df;
  --v239-muted:#d7e0d6;
  --v239-deep:#061a1d;
  --v239-panel:rgba(8,35,36,.92);
  --v239-panel-2:rgba(16,45,43,.88);
  --v239-border:rgba(215,179,90,.72);
  --v239-border-soft:rgba(215,179,90,.38);
  --v239-shadow:0 22px 52px rgba(0,0,0,.30);
}

body .v218-gate-page{
  position:relative !important;
  isolation:isolate !important;
  padding:18px !important;
  border-radius:28px !important;
  color:var(--v239-ink) !important;
  background:
    linear-gradient(135deg,rgba(4,20,22,.94),rgba(9,40,40,.88)),
    url(../assets/img/system-background.png) center/cover no-repeat !important;
  box-shadow:inset 0 0 0 1px rgba(215,179,90,.20) !important;
}
body .v218-gate-page::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:28px;
  background:
    radial-gradient(circle at 12% 8%,rgba(241,210,122,.18),transparent 32%),
    radial-gradient(circle at 90% 12%,rgba(42,119,112,.18),transparent 30%);
  pointer-events:none;
}
body .v218-gate-page *,
body.mode-light .v218-gate-page *,
body.mode-dark .v218-gate-page *{
  text-shadow:none !important;
}

body .v218-gate-topbar{
  min-height:150px !important;
  margin-bottom:18px !important;
  padding:26px 32px !important;
  border:1.5px solid var(--v239-border) !important;
  border-radius:26px !important;
  background:
    linear-gradient(135deg,rgba(7,38,43,.96),rgba(13,77,82,.88)),
    url(../assets/img/system-background.png) center/cover no-repeat !important;
  box-shadow:var(--v239-shadow) !important;
  color:#fff8df !important;
}
body .v218-gate-kicker,
body .v218-gate-topbar h1,
body .v218-gate-topbar > div > p{
  color:#fff8df !important;
}
body .v218-gate-topbar h1{
  font-size:clamp(34px,3.4vw,52px) !important;
  font-weight:900 !important;
  line-height:1.2 !important;
}
body .v218-gate-topbar > div > p{
  margin-top:10px !important;
  font-size:16px !important;
  font-weight:700 !important;
  line-height:1.9 !important;
  opacity:.96 !important;
}
body .v218-gate-kicker{
  font-size:14px !important;
  font-weight:900 !important;
  color:var(--v239-gold-strong) !important;
}
body .v218-gate-top-info > div{
  min-height:76px !important;
  border:1.5px solid var(--v239-border) !important;
  background:rgba(4,24,27,.72) !important;
  box-shadow:0 14px 28px rgba(0,0,0,.22) !important;
}
body .v218-gate-top-info > div > span,
body .v218-gate-scan-head > span,
body .v218-gate-scan-input > span,
body .v218-gate-idle-icon,
body .v218-gate-result-status > span,
body .v218-gate-reason > span{
  border:1.5px solid var(--v239-border) !important;
  background:rgba(215,179,90,.16) !important;
  color:var(--v239-gold-strong) !important;
}
body .v218-gate-top-info small,
body .v218-gate-top-info b{
  color:#fff8df !important;
}
body .v218-gate-top-info small{font-size:12px !important;font-weight:800 !important;opacity:.88 !important;}
body .v218-gate-top-info b{font-size:17px !important;font-weight:900 !important;}

body .v218-gate-stage,
body.mode-light .v218-gate-stage{
  grid-template-columns:minmax(370px,34%) minmax(0,1fr) !important;
  min-height:650px !important;
  border:2px solid var(--v239-border) !important;
  border-radius:28px !important;
  background:
    linear-gradient(135deg,rgba(5,24,27,.95),rgba(8,39,40,.92)),
    url(../assets/img/system-background.png) center/cover no-repeat !important;
  box-shadow:var(--v239-shadow), inset 0 0 0 1px rgba(255,255,255,.04) !important;
}
body .v218-gate-scan-panel,
body.mode-light .v218-gate-scan-panel,
body .v218-gate-stage.allowed .v218-gate-scan-panel,
body .v218-gate-stage.denied .v218-gate-scan-panel{
  padding:30px 26px !important;
  border-left:2px solid var(--v239-border) !important;
  background:linear-gradient(180deg,rgba(9,40,40,.94),rgba(5,24,27,.94)) !important;
  color:var(--v239-ink) !important;
}
body .v218-gate-scan-head{margin-bottom:26px !important;}
body .v218-gate-scan-head small,
body.mode-light .v218-gate-scan-head small{
  color:var(--v239-gold-strong) !important;
  font-size:14px !important;
  font-weight:900 !important;
}
body .v218-gate-scan-head h2,
body.mode-light .v218-gate-scan-head h2{
  color:#fff8df !important;
  font-size:24px !important;
  font-weight:900 !important;
  line-height:1.35 !important;
}
body .v218-gate-scan-panel > label,
body.mode-light .v218-gate-scan-panel > label{
  margin:0 0 10px !important;
  color:#fff2c4 !important;
  font-size:16px !important;
  font-weight:900 !important;
}
body .v218-gate-scan-input,
body.mode-light .v218-gate-scan-input{
  height:62px !important;
  border:2px solid var(--v239-border) !important;
  border-radius:17px !important;
  background:rgba(2,18,21,.96) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.04) !important;
}
body .v218-gate-scan-input:focus-within{
  border-color:var(--v239-gold-strong) !important;
  box-shadow:0 0 0 4px rgba(215,179,90,.22), 0 12px 28px rgba(0,0,0,.24) !important;
}
body .v218-gate-scan-input input,
body.mode-light .v218-gate-scan-input input{
  background:transparent !important;
  color:#fff8df !important;
  font-size:20px !important;
  font-weight:900 !important;
  letter-spacing:.03em !important;
}
body .v218-gate-scan-input input::placeholder,
body.mode-light .v218-gate-scan-input input::placeholder{
  color:rgba(255,248,223,.78) !important;
  font-size:15px !important;
  font-weight:700 !important;
  opacity:1 !important;
}
body .v218-gate-scan-button,
body .v239-gate-biometric-button,
body .v239-gate-settings-button{
  min-height:58px !important;
  border:1.5px solid var(--v239-border) !important;
  border-radius:17px !important;
  background:linear-gradient(135deg,rgba(215,179,90,.23),rgba(10,69,67,.86)) !important;
  color:#fff8df !important;
  box-shadow:0 13px 27px rgba(0,0,0,.25) !important;
  font-family:Tahoma,Arial,sans-serif !important;
}
body .v218-gate-scan-button:hover,
body .v239-gate-biometric-button:hover,
body .v239-gate-settings-button:hover{
  border-color:var(--v239-gold-strong) !important;
  background:linear-gradient(135deg,rgba(241,210,122,.32),rgba(12,82,78,.92)) !important;
}
body .v218-gate-scan-button span,
body .v239-gate-biometric-button span,
body .v239-gate-settings-button span{
  color:#fff8df !important;
  font-size:16px !important;
  font-weight:900 !important;
}
body .v218-gate-scan-button small,
body .v239-gate-biometric-button small{
  border-color:rgba(215,179,90,.50) !important;
  color:#fff2c4 !important;
  font-size:11px !important;
  font-weight:800 !important;
}
body .v239-gate-biometric-button{
  display:grid !important;
  grid-template-columns:22px 1fr auto !important;
  align-items:center !important;
  gap:8px !important;
  width:100% !important;
  margin-top:10px !important;
  padding:10px 14px !important;
  cursor:pointer !important;
}
body .v239-gate-settings-button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  width:100% !important;
  padding:11px 13px !important;
  cursor:pointer !important;
}
body .v218-gate-scan-note,
body.mode-light .v218-gate-scan-note,
body .v239-gate-biometric-status{
  margin-top:18px !important;
  padding:14px !important;
  border:1.5px solid var(--v239-border-soft) !important;
  border-radius:16px !important;
  background:rgba(255,248,223,.08) !important;
  color:var(--v239-muted) !important;
}
body .v218-gate-scan-note b,
body .v218-gate-scan-note span,
body.mode-light .v218-gate-scan-note b,
body.mode-light .v218-gate-scan-note span{
  color:#fff8df !important;
  font-size:14px !important;
  line-height:1.8 !important;
}
body .v218-gate-scan-note span{color:rgba(255,248,223,.78) !important;}
body .v239-gate-biometric-status{
  display:block !important;
  min-height:46px !important;
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1.8 !important;
}
body .v239-gate-biometric-status.ok{border-color:rgba(85,190,129,.65) !important;color:#c7f7d9 !important;background:rgba(40,130,83,.14) !important;}
body .v239-gate-biometric-status.bad{border-color:rgba(231,108,108,.70) !important;color:#ffd3d3 !important;background:rgba(154,46,46,.18) !important;}
body .v218-gate-scan-actions button,
body.mode-light .v218-gate-scan-actions button{
  min-height:45px !important;
  border:1.5px solid var(--v239-border-soft) !important;
  border-radius:14px !important;
  background:rgba(255,248,223,.08) !important;
  color:#fff8df !important;
  font-size:14px !important;
  font-weight:900 !important;
}

body .v218-gate-result,
body.mode-light .v218-gate-result{
  min-height:650px !important;
  background:
    radial-gradient(circle at center,rgba(215,179,90,.12),transparent 36%),
    linear-gradient(145deg,rgba(7,34,36,.86),rgba(4,20,22,.95)) !important;
  color:var(--v239-ink) !important;
}
body .v218-gate-idle,
body.mode-light .v218-gate-idle{
  min-height:650px !important;
  padding:58px !important;
  background:transparent !important;
  color:var(--v239-ink) !important;
}
body .v218-gate-idle-icon{
  width:118px !important;
  height:118px !important;
  border-radius:34px !important;
  box-shadow:0 18px 38px rgba(0,0,0,.28), 0 0 0 12px rgba(215,179,90,.08) !important;
}
body .v218-gate-idle h2,
body.mode-light .v218-gate-idle h2{
  margin:30px 0 10px !important;
  color:#fff8df !important;
  font-size:34px !important;
  font-weight:900 !important;
  line-height:1.35 !important;
}
body .v218-gate-idle > p,
body.mode-light .v218-gate-idle > p{
  max-width:760px !important;
  color:rgba(255,248,223,.88) !important;
  font-size:18px !important;
  font-weight:700 !important;
  line-height:2 !important;
}
body .v218-gate-idle-methods span,
body.mode-light .v218-gate-idle-methods span{
  padding:10px 14px !important;
  border:1.5px solid var(--v239-border) !important;
  border-radius:999px !important;
  background:rgba(255,248,223,.09) !important;
  color:#fff2c4 !important;
  font-size:14px !important;
  font-weight:900 !important;
}
body .v218-gate-icon,
body .v218-gate-page svg,
body .v218-gate-page .v218-gate-icon{
  color:var(--v239-gold-strong) !important;
  stroke:currentColor !important;
}

body .v218-gate-result-screen.allowed,
body .v218-gate-result-screen.denied{
  min-height:650px !important;
  border:0 !important;
  background:linear-gradient(135deg,rgba(7,52,38,.96),rgba(11,90,63,.92)) !important;
}
body .v218-gate-result-screen.denied{background:linear-gradient(135deg,rgba(76,18,22,.96),rgba(124,39,45,.92)) !important;}
body .v218-gate-data-grid > div,
body .v218-gate-reason,
body .v218-gate-health,
body .v218-gate-health-grid > div{
  border:1.5px solid var(--v239-border-soft) !important;
  border-radius:14px !important;
}
body .v218-gate-person h1{font-size:clamp(27px,2.6vw,40px) !important;}
body .v218-gate-result-status h2{font-size:29px !important;}
body .v218-gate-result-status p,
body .v218-gate-reason strong,
body .v218-gate-data-grid strong{font-size:15px !important;}
body .v218-gate-result-status small,
body .v218-gate-reason small,
body .v218-gate-data-grid small{font-size:12px !important;}

body .v218-gate-history,
body.mode-light .v218-gate-history{
  margin-top:18px !important;
  border:1.5px solid var(--v239-border) !important;
  border-radius:22px !important;
  background:rgba(5,24,27,.92) !important;
  color:var(--v239-ink) !important;
  box-shadow:var(--v239-shadow) !important;
}
body .v218-gate-history-head small,
body .v218-gate-history-head h2,
body .v218-gate-history-head > span,
body.mode-light .v218-gate-history-head small,
body.mode-light .v218-gate-history-head h2,
body.mode-light .v218-gate-history-head > span{
  color:#fff8df !important;
}
body .v218-gate-history-head small{font-size:13px !important;color:var(--v239-gold-strong) !important;}
body .v218-gate-history-head h2{font-size:22px !important;}
body .v218-gate-history table,
body.mode-light .v218-gate-history table{
  color:var(--v239-ink) !important;
  background:transparent !important;
  font-size:14px !important;
}
body .v218-gate-history th,
body.mode-light .v218-gate-history th{
  border-color:rgba(215,179,90,.35) !important;
  background:rgba(215,179,90,.16) !important;
  color:#fff2c4 !important;
  font-size:13px !important;
}
body .v218-gate-history td,
body .v218-gate-history td b,
body.mode-light .v218-gate-history td,
body.mode-light .v218-gate-history td b{
  border-color:rgba(215,179,90,.20) !important;
  background:transparent !important;
  color:#fff8df !important;
}

/* تعميم حدود ذهبية أكثر وضوحاً داخل صفحة البوابة فقط */
body .v218-gate-page input,
body .v218-gate-page select,
body .v218-gate-page textarea,
body .v218-gate-page button,
body .v218-gate-page .badge,
body .v218-gate-page .chip{
  border-color:var(--v239-border) !important;
}

/* قسم ربط بصمة المستفيدين داخل إعدادات مدير النظام */
.v239-zk-beneficiary-section{
  margin-top:14px;
  padding:18px;
  border:1.5px solid var(--v239-border) !important;
  border-radius:22px !important;
  background:linear-gradient(145deg,rgba(7,36,39,.92),rgba(8,26,28,.92)) !important;
  box-shadow:0 16px 36px rgba(0,0,0,.18);
}
.v239-zk-beneficiary-section h3{margin:0;color:#fff8df !important;font-size:22px !important;line-height:1.45 !important;}
.v239-zk-beneficiary-section p{margin:6px 0 0;color:rgba(255,248,223,.80) !important;font-size:14px !important;line-height:1.9 !important;}
.v239-zk-toolbar{display:grid;grid-template-columns:minmax(240px,1fr) auto auto;gap:10px;margin:14px 0;align-items:end;}
.v239-zk-toolbar input{min-height:44px;border:1.5px solid var(--v239-border) !important;border-radius:14px !important;background:rgba(2,18,21,.85) !important;color:#fff8df !important;font-size:15px !important;}
.v239-zk-toolbar button,.v239-zk-toolbar label{min-height:44px;border:1.5px solid var(--v239-border) !important;border-radius:14px !important;background:rgba(215,179,90,.13) !important;color:#fff8df !important;font-weight:900 !important;}
.v239-zk-beneficiary-list{display:grid;gap:8px;max-height:460px;overflow:auto;padding-inline-start:5px;}
.v239-zk-beneficiary-row{display:grid;grid-template-columns:minmax(260px,1fr) 180px 110px;gap:8px;align-items:center;padding:11px;border:1px solid var(--v239-border-soft);border-radius:15px;background:rgba(255,248,223,.05);}
.v239-zk-beneficiary-row b{display:block;color:#fff8df !important;line-height:1.55;}
.v239-zk-beneficiary-row small{display:block;color:rgba(255,248,223,.72) !important;line-height:1.6;}
.v239-zk-beneficiary-row input{min-height:42px;border:1.5px solid var(--v239-border) !important;border-radius:12px !important;background:rgba(2,18,21,.85) !important;color:#fff8df !important;font-weight:900;}
.v239-zk-beneficiary-row button{min-height:42px;border:1.5px solid var(--v239-border) !important;border-radius:12px !important;background:rgba(215,179,90,.14) !important;color:#fff8df !important;font-weight:900;}
.v239-zk-beneficiary-status{margin-top:10px;padding:10px 12px;border:1px dashed var(--v239-border);border-radius:14px;color:#fff2c4;background:rgba(215,179,90,.08);line-height:1.8;}

@media(max-width:1100px){
  body .v218-gate-stage{grid-template-columns:1fr !important;}
  body .v218-gate-scan-panel{border-left:0 !important;border-bottom:2px solid var(--v239-border) !important;}
  .v239-zk-toolbar,.v239-zk-beneficiary-row{grid-template-columns:1fr !important;}
}


/* ===== easha-v240-independent-meal-schedule.css ===== */
/* V240 - جدول وجبات مستقل لكل يوم */
.v240-independent-weekly-meal-section{
  border: 1.5px solid rgba(214,180,98,.55) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06) !important;
  border-radius: 18px !important;
  overflow: hidden;
}
.v240-independent-weekly-meal-section .weekly-meal-section-head{
  align-items: center;
  background: linear-gradient(135deg, rgba(7,61,58,.82), rgba(42,30,21,.72)) !important;
  border-bottom: 1px solid rgba(214,180,98,.40) !important;
}
.v240-independent-weekly-meal-section .weekly-meal-section-head h3{margin-bottom:4px!important}
.v240-independent-weekly-meal-section .weekly-meal-section-head small{
  display:block;color:#f7e7bf;font-weight:800;font-size:13px;letter-spacing:.1px
}
.v240-independent-weekly-meal-table th{
  border-color: rgba(214,180,98,.55) !important;
  background: linear-gradient(180deg, rgba(7,57,50,.95), rgba(5,42,39,.98)) !important;
  color:#fff8e8!important;
}
.v240-independent-weekly-meal-table th b{display:block;font-size:16px;line-height:1.7;color:#fff!important}
.v240-independent-weekly-meal-table th em{display:inline-block;font-style:normal;font-size:11px;color:#d9b765;border:1px solid rgba(214,180,98,.55);border-radius:99px;padding:1px 8px;margin-top:3px;background:rgba(214,180,98,.08)}
.v240-independent-weekly-meal-table td{
  border-color: rgba(214,180,98,.36) !important;
  background: rgba(5,34,31,.68) !important;
}
.v240-independent-weekly-meal-table tr:nth-child(even) td{background: rgba(43,32,24,.58) !important}
.v240-independent-meal-item{
  min-height:42px!important;
  justify-content:space-between!important;
  gap:8px!important;
}
.v240-independent-meal-item .meal-item-name{
  flex:1;
  min-height:36px!important;
  border:1.5px solid rgba(214,180,98,.58)!important;
  background:linear-gradient(135deg, rgba(8,64,60,.90), rgba(11,46,45,.90))!important;
  color:#fff!important;
  font-weight:900!important;
  border-radius:12px!important;
  padding:7px 10px!important;
  text-align:center!important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.v240-independent-meal-item .meal-item-delete{
  min-width:32px!important;height:36px!important;border-radius:12px!important;
  border:1.5px solid rgba(214,180,98,.65)!important;color:#fff4d4!important;background:rgba(7,64,68,.82)!important;
  font-size:20px!important;font-weight:900!important;
}
.v240-independent-meal-item .meal-entry-badge{
  display:inline-block;margin-inline-start:6px;padding:2px 7px;border-radius:999px;font-size:10px;line-height:1.4;font-weight:900;border:1px solid rgba(214,180,98,.55);color:#f8e7b8;background:rgba(214,180,98,.12)
}
.v240-independent-meal-item .meal-entry-badge.direct{color:#cceeea;border-color:rgba(77,198,183,.5);background:rgba(77,198,183,.10)}
.v240-independent-weekly-meal-table .empty-meal-cell span{
  display:block;min-height:36px;padding:8px;border:1px dashed rgba(214,180,98,.36);border-radius:12px;color:rgba(255,248,232,.68);font-weight:800;background:rgba(0,0,0,.10)
}
body.mode-light .v240-independent-weekly-meal-table td{background:rgba(251,247,235,.9)!important;color:#163b39!important}
body.mode-light .v240-independent-meal-item .meal-item-name{color:#163b39!important;background:#fffaf0!important}


/* ===== easha-v241-gate-supervisors-auto-ready.css ===== */
/* V241 — تنسيق مشرفي البوابة والتعرف التلقائي */
.v241-gate-supervisor-box,
.v241-auto-ready-controls{
  margin:12px 0;
  padding:14px;
  border:1px solid rgba(214,174,88,.82)!important;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(10,45,48,.96),rgba(24,35,31,.92));
  box-shadow:0 12px 30px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.035);
}
.v241-gate-supervisor-box label,
.v241-auto-ready-controls label{
  display:block;
  margin-bottom:8px;
  color:#f5d787!important;
  font-weight:900;
  font-size:15px;
}
.v241-gate-supervisor-box select,
.v241-gate-supervisor-box input,
.v241-auto-ready-controls select,
.v241-auto-ready-controls input{
  width:100%;
  min-height:46px;
  border:1px solid rgba(214,174,88,.9)!important;
  border-radius:14px!important;
  background:#06272b!important;
  color:#fff8df!important;
  font-weight:900!important;
  padding:9px 12px!important;
}
.v241-gate-supervisor-box small,
.v241-auto-ready-controls small,
#v241GateSupervisorStatus,
#v241ZkAutoStatus{
  display:block;
  margin-top:8px;
  color:#d9eee9!important;
  line-height:1.7;
  font-size:12px;
  font-weight:800;
}
#v241GateSupervisorStatus,
#v241ZkAutoStatus{
  border:1px dashed rgba(214,174,88,.44);
  border-radius:12px;
  padding:8px 10px;
  background:rgba(255,255,255,.045);
}
#v241ZkAutoStatus.ok{color:#baf4cf!important;border-color:rgba(60,190,105,.45)}
#v241ZkAutoStatus.bad{color:#ffd2d2!important;border-color:rgba(220,80,80,.5)}
.v241-auto-ready-controls button,
.v241-gate-roster button{
  min-height:42px;
  border:1px solid rgba(214,174,88,.9)!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,#0b4145,#17312d)!important;
  color:#fff7d7!important;
  font-weight:900!important;
}
.v241-auto-ready-controls button:hover,
.v241-gate-roster button:hover{filter:brightness(1.08)}
.v241-gate-supervisor-field{
  padding:10px;
  border:1px solid rgba(214,174,88,.45);
  border-radius:14px;
  background:rgba(214,174,88,.08);
}
.v241-gate-supervisor-field small{display:block;margin-top:6px;color:#e9d18c;font-weight:800;line-height:1.6}
.v241-gate-roster{
  margin-top:16px;
  padding:16px;
  border:1px solid rgba(214,174,88,.5);
  border-radius:18px;
  background:rgba(7,34,35,.82);
}
.v241-gate-roster h3{margin:0 0 6px;color:#f5d787;font-size:20px}
.v241-gate-roster p{margin:0 0 12px;color:#dcebe7;line-height:1.8}
.v241-roster-toolbar{display:grid;grid-template-columns:1fr auto;gap:10px;margin-bottom:12px}
.v241-roster-toolbar input{
  min-height:44px;
  border:1px solid rgba(214,174,88,.65)!important;
  border-radius:14px!important;
  background:#06272b!important;
  color:#fff!important;
  font-weight:800!important;
  padding:8px 12px!important;
}
.v241-roster-row{
  display:grid;
  grid-template-columns:minmax(260px,1fr) auto auto;
  gap:10px;
  align-items:center;
  margin-bottom:8px;
  padding:11px;
  border:1px solid rgba(214,174,88,.26);
  border-radius:14px;
  background:rgba(255,255,255,.035);
}
.v241-roster-row.is-gate{background:rgba(22,96,72,.18);border-color:rgba(214,174,88,.62)}
.v241-roster-row b{display:block;color:#fff;font-size:15px}
.v241-roster-row small{display:block;margin-top:4px;color:#cfe2dd}
.v241-roster-row span{color:#f5d787;font-weight:900;white-space:nowrap}
.v241-roster-note,.v241-empty{margin-top:10px;color:#d9eee9;line-height:1.7;font-weight:800}
.v218-gate-result-footer div span::after{content:' — جاهز آلياً للمستفيد التالي';color:#f5d787;font-weight:900}
@media(max-width:850px){.v241-roster-toolbar,.v241-roster-row{grid-template-columns:1fr}.v241-roster-row span{white-space:normal}}
body.mode-light .v241-gate-supervisor-box,
body.mode-light .v241-auto-ready-controls,
body.mode-light .v241-gate-roster{background:#fffaf0;color:#173c31}
body.mode-light #v241GateSupervisorStatus,
body.mode-light #v241ZkAutoStatus,
body.mode-light .v241-gate-supervisor-box small,
body.mode-light .v241-auto-ready-controls small,
body.mode-light .v241-gate-roster p,
body.mode-light .v241-roster-note,
body.mode-light .v241-roster-row small{color:#284d43!important}
body.mode-light .v241-roster-row b{color:#173c31}


/* ===== easha-v242-professional-corrections.css ===== */
/* V242 - professional corrections for meal composition, stock issue, date display, and unified option borders */
:root{
  --v242-gold:#d8b65c;
  --v242-gold-strong:#f0d27a;
  --v242-dark-border:rgba(216,182,92,.58);
  --v242-dark-bg:rgba(4,26,27,.72);
  --v242-dark-card:rgba(5,24,25,.82);
  --v242-light-ink:#111827;
  --v242-light-muted:#2f3a40;
}

/* Global option/card/input borders in dark and light themes */
body:not(.mode-light) :is(.card,.notice,.panel,.modal-box,.table-wrap,.settings-section,.system-settings-card,.dash-panel,.kpi-card,.option,.nav-btn,.meal-cell-item,.weekly-meal-section,.v187-manual-card,.v242-issue-mode,.v242-gold-box),
body:not(.mode-light) :is(input,select,textarea,button,.small,.primary,.gold,.upload-button){
  border-color:var(--v242-dark-border)!important;
}
body:not(.mode-light) :is(input,select,textarea){
  background:rgba(2,28,29,.78)!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 1px rgba(216,182,92,.08)!important;
}
body:not(.mode-light) :is(input:focus,select:focus,textarea:focus){
  outline:2px solid rgba(240,210,122,.32)!important;
  border-color:var(--v242-gold-strong)!important;
}
body:not(.mode-light) button,
body:not(.mode-light) .small,
body:not(.mode-light) .primary,
body:not(.mode-light) .gold{
  border:1px solid var(--v242-dark-border)!important;
}

/* Light Saudi heritage: use a supplied background, clear text, black borders */
body.mode-light{
  color:var(--v242-light-ink)!important;
  background-color:#f3eadc!important;
  background-image:
    linear-gradient(115deg,rgba(255,255,255,.84),rgba(245,235,219,.76)),
    url(../assets/img/system-background.png)!important;
  background-position:center!important;
  background-size:cover!important;
  background-attachment:fixed!important;
}
body.mode-light .app>main,
body.mode-light .content{
  color:var(--v242-light-ink)!important;
}
body.mode-light :is(.card,.notice,.panel,.modal-box,.table-wrap,.settings-section,.system-settings-card,.dash-panel,.kpi-card,.option,.weekly-meal-section,.v187-manual-card,.v242-issue-mode,.v242-gold-box){
  color:var(--v242-light-ink)!important;
  background-color:rgba(255,255,255,.91)!important;
  background-image:linear-gradient(125deg,rgba(255,255,255,.96),rgba(246,239,227,.9)),url(../assets/img/system-background.png)!important;
  background-size:auto,cover!important;
  background-position:center!important;
  border:1.7px solid #111!important;
  box-shadow:0 12px 28px rgba(17,24,39,.14),inset 0 1px 0 rgba(255,255,255,.9)!important;
}
body.mode-light :is(h1,h2,h3,h4,h5,h6,b,strong,label,p,span,small,td,th,li,em,div){
  color:var(--v242-light-ink)!important;
  -webkit-text-fill-color:currentColor!important;
  text-shadow:none!important;
}
body.mode-light :is(p,small,.muted,.hint,.subtext,.subtitle,.help-text,.field-hint,.note-text){
  color:var(--v242-light-muted)!important;
  -webkit-text-fill-color:var(--v242-light-muted)!important;
}
body.mode-light :is(input,select,textarea){
  color:#111!important;
  -webkit-text-fill-color:#111!important;
  background:#fff!important;
  border:1.7px solid #111!important;
  box-shadow:none!important;
}
body.mode-light :is(input:focus,select:focus,textarea:focus){
  outline:3px solid rgba(216,182,92,.42)!important;
  border-color:#111!important;
}
body.mode-light :is(button,.small,.primary,.gold,.upload-button){
  border:1.7px solid #111!important;
  color:#111!important;
  -webkit-text-fill-color:#111!important;
  background:linear-gradient(135deg,#f4d57d,#c89c44)!important;
}
body.mode-light .app>aside .nav-btn,
body.mode-light .screen-tabs button,
body.mode-light .system-settings-tabs button{
  border:1.7px solid #111!important;
  color:#111!important;
  background:rgba(255,255,255,.82)!important;
}
body.mode-light .app>aside .nav-btn.active,
body.mode-light .screen-tabs button.active,
body.mode-light .system-settings-tabs button.active{
  background:#102f31!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border-color:#111!important;
}
body.mode-light .app>aside .nav-btn.active :is(b,span,em){color:#fff!important;-webkit-text-fill-color:#fff!important;}

/* Golden icon treatment across options */
:is(.nav-btn,.screen-tabs button,.system-settings-tabs button,.actions button,.meal-cell-item,.v242-issue-mode) :is(svg,i,.icon,span:first-child){
  border-color:rgba(216,182,92,.75)!important;
}
body:not(.mode-light) :is(.nav-btn,.screen-tabs button,.system-settings-tabs button,.actions button,.meal-cell-item,.v242-issue-mode) :is(svg,i,.icon,span:first-child){
  color:var(--v242-gold-strong)!important;
  -webkit-text-fill-color:var(--v242-gold-strong)!important;
}

/* Recipe editor auto-link styling */
.v242-recipe-auto-note{padding:12px 14px;border-radius:14px;border:1px solid rgba(216,182,92,.48);background:rgba(216,182,92,.10);line-height:1.8;margin:10px 0;font-weight:800}
.v242-auto-warehouse-cell{min-width:210px;text-align:center;font-weight:800}
.v242-auto-warehouse-cell .ok{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(24,146,91,.14);border:1px solid rgba(24,146,91,.38);color:#bff3d7}
.v242-auto-warehouse-cell .missing{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(216,182,92,.12);border:1px solid rgba(216,182,92,.38);color:#f4d57d}
body.mode-light .v242-auto-warehouse-cell .ok{color:#075e39!important;background:#e8fff3!important;border-color:#111!important}
body.mode-light .v242-auto-warehouse-cell .missing{color:#5b3b00!important;background:#fff7df!important;border-color:#111!important}
.v242-unit-select{min-width:96px!important}

/* New stock-out mode */
.v242-issue-modes{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:12px;margin:12px 0 16px}
.v242-issue-mode{display:flex;align-items:center;gap:10px;padding:14px;border-radius:16px;background:rgba(255,255,255,.045);cursor:pointer;font-weight:900}
.v242-issue-mode input{width:auto!important;min-height:auto!important}
.v242-issue-mode small{display:block;margin-top:3px;font-weight:700;opacity:.82}
.v242-meal-generate-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px;margin:12px 0;align-items:end}
.v242-generated-preview{margin:10px 0;padding:12px;border-radius:14px;border:1px dashed rgba(216,182,92,.55);background:rgba(216,182,92,.08)}
.v242-generated-preview h3{margin-top:0}
@media(max-width:900px){.v242-issue-modes,.v242-meal-generate-grid{grid-template-columns:1fr}}

/* ZKTeco beneficiary section must appear only inside the ZKTeco tab */
body:not(.v242-zkteco-tab) #v239ZkBeneficiaries,
body:not(.v242-zkteco-tab) #v241GateSupervisorsRoster{display:none!important}

/* Date helper */
.v242-calendar-card{margin-top:12px}
.v242-date-hint{display:block;margin-top:5px;font-size:12px;font-weight:800;color:var(--v242-gold-strong)!important}
body.mode-light .v242-date-hint{color:#6f4b09!important}
.v242-date-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;border:1px solid rgba(216,182,92,.5);background:rgba(216,182,92,.12);font-weight:900;margin-inline-start:6px}

/* Remove old auto link button text if any legacy render leaks it */
button.v242-hidden-legacy, .v242-hidden-legacy{display:none!important}


/* ===== easha-v243-final-fixes.css ===== */
/* V243 — إصلاحات الدخول، بوابة الوجبات، المكونات، والمستودعات */
:root{--v243-gold:#d7b45a;--v243-ink:#102426;--v243-green:#073f3c}

@media screen{
  html body .login-screen,
  html body .login-screen-v2,
  html body .static-login-overlay{
    background-color:#cdb9a5!important;
    background-image:url(../assets/img/easha-v243-login-background.jpg)!important;
    background-size:cover!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
  }
  html body .login-screen-v2::before,
  html body .static-login-overlay::before{
    background:linear-gradient(90deg,rgba(255,248,239,.08),rgba(5,32,32,.16) 46%,rgba(3,25,26,.58))!important;
  }
  .login-screen-v2 .login-box-v2{
    background:linear-gradient(145deg,rgba(4,39,38,.94),rgba(16,28,27,.91))!important;
    border:1.5px solid rgba(215,180,90,.86)!important;
    box-shadow:0 24px 70px rgba(17,15,12,.34),inset 0 1px 0 rgba(255,255,255,.12)!important;
    backdrop-filter:blur(14px)!important;
  }
  .login-screen-v2 .login-info-v2{
    background:rgba(255,250,243,.84)!important;
    border:1px solid rgba(92,65,38,.28)!important;
    border-radius:22px!important;
    padding:24px!important;
    box-shadow:0 18px 48px rgba(61,45,30,.16)!important;
    backdrop-filter:blur(8px)!important;
  }
  .login-screen-v2 .login-info-v2 :is(h1,h2,h3,p,span,small){color:#172d2d!important;-webkit-text-fill-color:#172d2d!important;text-shadow:none!important}
  .login-screen-v2 .login-box-v2 :is(h1,h2,h3,label,p,span,small){color:#fff!important;-webkit-text-fill-color:#fff!important}
  .login-screen-v2 .login-box-v2 input{background:rgba(255,255,255,.97)!important;color:#101b1b!important;-webkit-text-fill-color:#101b1b!important;border:1.5px solid var(--v243-gold)!important;font-size:16px!important}
  .login-screen-v2 .login-box-v2 .primary{font-size:17px!important;min-height:48px!important;background:linear-gradient(135deg,#dfbf69,#b88732)!important;color:#142525!important;-webkit-text-fill-color:#142525!important}
}

#v236ZktecoLoginButton,.login-screen .v236-login-biometric,.login-screen-v2 .v236-login-biometric,.easha-login-core-fix-badge{display:none!important}

.v243-login-note{margin-top:12px;padding:10px 12px;border:1px solid rgba(215,180,90,.45);border-radius:11px;color:#f5e4ae!important;font-size:13px!important;line-height:1.7;text-align:center}

.v242-dish-editor{width:min(980px,96vw)!important;max-width:980px!important;max-height:92vh!important;overflow-y:auto!important;overscroll-behavior:contain}
.v242-dish-editor .dish-master-fields .v243-hidden-field,.v242-dish-editor .v243-hidden-column{display:none!important}
.v242-dish-editor .dish-ingredients-wrap{max-height:44vh!important;overflow:auto!important;border:1.5px solid var(--v243-gold)!important;border-radius:14px!important}
.v242-dish-editor .dish-ingredients-table{min-width:640px!important;width:100%!important}
.v242-dish-editor .dish-ingredients-table thead{position:sticky;top:0;z-index:3}
.v242-dish-editor .dish-ingredients-table th{background:#093b3a!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:14px!important}
.v242-dish-editor .dish-ingredients-table td{font-size:14px!important}
.v242-dish-editor .dish-ingredients-table :is(input,select){font-size:15px!important;min-height:42px!important}
.v242-dish-editor .dish-ingredients-table .dr-item{min-width:240px!important}
.v243-auto-link-note{display:block;margin-top:5px;color:#9be1c2!important;font-size:12px!important;line-height:1.5}

.v243-warehouse-guide{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:12px;margin:0 0 16px}
.v243-warehouse-guide>div{padding:14px;border:1px solid rgba(215,180,90,.65);border-radius:15px;background:rgba(4,43,42,.72)}
.v243-warehouse-guide b{display:block;color:#f4d77f!important;font-size:16px;margin-bottom:5px}
.v243-warehouse-guide span{color:#fff!important;font-size:14px;line-height:1.7}
.v243-unified-issue>.card{margin-top:14px}

@media(max-width:760px){
  .login-screen-v2 .login-info-v2{display:none!important}
  .v243-warehouse-guide{grid-template-columns:1fr}
  .v242-dish-editor .dish-ingredients-table{min-width:540px!important}
}


/* ===== easha-v244-navigation-repair.css ===== */
/* V244 — منع الخلفيات والزخارف من حجب أزرار وأيقونات البرنامج */
.app>aside,.app>main,.content,.main-route-header,.new-dash,.quick-grid,.screen-tabs{position:relative;z-index:2}
.app :is(button,a,[role="button"],input,select,textarea,label){position:relative;z-index:5;pointer-events:auto!important}
.app :is(.nav-btn,.quick-action,.screen-tab,.acc177-tabs button,.v209-request-cards button,.v218-cr-create button){cursor:pointer!important;touch-action:manipulation}
.app :is(.v229-ornament-mark,.v231-ornament-dock,.ornament,.decorative-layer,.background-decoration){pointer-events:none!important}
.app :is(.card,.panel,.content,.new-dash,.dash-welcome,.module-card)::before,
.app :is(.card,.panel,.content,.new-dash,.dash-welcome,.module-card)::after{pointer-events:none!important}
.v244-nav-error{position:fixed;inset:auto 24px 24px 24px;z-index:100000;padding:14px 18px;border:1px solid #e4bd57;border-radius:14px;background:#3d1717;color:#fff;font-size:15px;font-weight:800;text-align:center;box-shadow:0 12px 36px rgba(0,0,0,.35)}

@media(max-width:760px){.app :is(.nav-btn,.quick-action,.screen-tab){min-height:48px!important}}