@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap");

:root {
  --primary: #c01624;
  --bg: #f7f4f2;
  --surface: #ffffff;
  --text: #0d0d0f;
  --muted: #6b6b74;
  --line: rgba(24, 24, 27, 0.1);
  --shadow: 0 10px 30px rgba(18, 18, 22, 0.08);
  --surface-strong: #ffffff;
  --input-bg: #ffffff;
  --soft-bg: #faf7f5;
  --radius-lg: 16px;
  --radius-md: 12px;
  --good: #22c55e;
  --risk: #ef4444;
  --warn: #f59e0b;
  --hair: #86111b;
  --makeup: #c01624;
  --derma: #4b0b12;
  --executive: #151519;
  --admin: #2a2a31;
}

:root[data-theme="dark"] {
  --bg: #020617;
  --surface: #0f172a;
  --surface-strong: #111c31;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --line: rgba(148, 163, 184, 0.18);
  --shadow: 0 18px 40px rgba(2, 6, 23, 0.45);
  --input-bg: #0b1220;
  --soft-bg: #162033;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  font-family: "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.45;
}

.shell-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}

.shell-toolbar--login {
  margin-bottom: 18px;
}

.main-shell,
.standalone-shell {
  min-height: 100vh;
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px;
}

.login-page,
.transition-page {
  min-height: 100vh;
  padding: 0;
}

.login-page {
  background:
    radial-gradient(circle at 12% 18%, rgba(192, 22, 36, 0.12), transparent 24%),
    radial-gradient(circle at 88% 16%, rgba(17, 17, 17, 0.08), transparent 22%),
    linear-gradient(180deg, rgba(17, 17, 17, 0.03), rgba(17, 17, 17, 0));
}

.standalone-main,
.main-shell {
  display: grid;
  gap: 14px;
}

.standalone-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.topbar-utility {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 1;
  flex-wrap: nowrap;
  position: relative;
  padding-inline-end: 58px;
}

.topbar-actions,
.lang-buttons,
.table-actions,
.segment-tabs,
.branch-metrics {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.topbar-actions--cluster {
  align-items: center;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow);
}

.action-menu {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.action-menu__trigger {
  min-width: 0;
  width: 46px;
  height: 46px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

.action-menu__icon {
  font-size: 1.4rem;
  line-height: 1;
}

.action-menu__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(210px, calc(100vw - 32px));
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.14);
  display: grid;
  gap: 4px;
  z-index: 30;
  transform-origin: top right;
  animation: dropdown-enter 0.18s ease-out;
}

.action-menu__panel[hidden] {
  display: none;
}

.action-menu__item {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
  cursor: pointer;
  text-align: left;
  box-shadow: none;
}

.action-menu__item:hover {
  background: var(--soft-bg);
}

.action-menu__item--danger {
  color: var(--risk);
}

.action-menu__label {
  color: var(--muted);
  font-size: 0.8rem;
  padding: 4px 8px 2px;
}

.action-menu__item.active {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 700;
}

.action-menu__divider {
  height: 1px;
  background: var(--line);
  margin: 2px 4px;
}

@keyframes dropdown-enter {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.month-pill {
  min-width: 210px;
  padding: 10px 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
  display: grid;
  gap: 2px;
}

.month-pill span,
.month-pill small {
  color: var(--muted);
}

.month-pill strong {
  font-size: 1rem;
}

.hero {
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  color: #fff;
  box-shadow: var(--shadow);
}

.real-logo {
  display: inline-grid;
  gap: 2px;
  color: #111111;
}

.real-logo__wordmark {
  font-size: clamp(2.4rem, 4vw, 3.8rem);
  line-height: 0.9;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.real-logo__subtitle {
  font-size: 0.9rem;
  letter-spacing: 0.34em;
  text-transform: lowercase;
  padding-inline-start: 4px;
}

.real-logo__tagline {
  position: relative;
  margin-top: 10px;
  padding-top: 10px;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: #3f3f46;
}

.real-logo__tagline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 112px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #b90f1f, #f33d45);
  transform: skewX(-18deg);
}

.real-logo--hero,
.real-logo--landing,
.real-logo--light,
.real-logo--transition {
  color: inherit;
}

.real-logo--hero .real-logo__subtitle,
.real-logo--hero .real-logo__tagline,
.real-logo--landing .real-logo__subtitle,
.real-logo--landing .real-logo__tagline,
.real-logo--light .real-logo__subtitle,
.real-logo--light .real-logo__tagline,
.real-logo--transition .real-logo__subtitle,
.real-logo--transition .real-logo__tagline {
  color: inherit;
  opacity: 0.92;
}

.real-logo--landing {
  color: #f8fafc;
}

.real-logo--landing .real-logo__wordmark {
  color: #ffffff;
  text-shadow: 0 8px 24px rgba(7, 10, 22, 0.28);
}

.real-logo--landing .real-logo__subtitle {
  color: rgba(255, 255, 255, 0.84);
}

.real-logo--landing .real-logo__tagline {
  color: rgba(255, 255, 255, 0.82);
}

.real-logo--landing .real-logo__tagline::before {
  background: linear-gradient(90deg, #ef4444, #f43f5e);
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.35);
}

.hero h1 {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.1;
}

.hero-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.hero-header__copy {
  display: grid;
  gap: 16px;
}

.hero-header--with-image {
  min-height: 110px;
}

.hero-header__image {
  width: 168px;
  height: 108px;
  object-fit: cover;
  object-position: center;
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.22);
  flex-shrink: 0;
}

.hero-header h1 {
  flex: 1;
}

.hero--main {
  background: linear-gradient(135deg, #111111, #2b2b31 48%, #9e111c);
}

.hero--executive {
  background: linear-gradient(135deg, #111111, #2d2d33 46%, #8b0f18);
}

.hero--hair {
  background: linear-gradient(135deg, #151519, #3a1118 44%, var(--hair));
}

.hero--makeup {
  background: linear-gradient(135deg, #17171b, #541019 42%, var(--makeup));
}

.hero--derma {
  background: linear-gradient(135deg, #121216, #240b10 42%, var(--derma));
}

.hero--admin {
  background: linear-gradient(135deg, #111111, #2e2e34 46%, #7e1019);
}

.surface,
.main-card,
.card,
.branch-card,
.modal-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

.auth-shell {
  max-width: 480px;
  margin: 80px auto;
  padding: 28px;
}

.login-scene {
  min-height: calc(100vh - 74px);
  display: grid;
}

.login-shell {
  width: 100%;
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 380px);
  gap: 0;
  border-radius: 32px;
  overflow: hidden;
  background:
      radial-gradient(circle at 22% 76%, rgba(192, 22, 36, 0.26), transparent 24%),
      radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.22), transparent 28%),
    linear-gradient(115deg, #111111 0%, #2b1115 46%, #f6efeb 100%);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
}

.login-hero-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  padding: 36px 38px 34px;
  color: #fff;
  overflow: hidden;
}

.login-hero-panel::before,
.login-hero-panel::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  opacity: 0.55;
}

.login-hero-panel::before {
  left: -40px;
  bottom: 72px;
  width: 520px;
  height: 220px;
  transform: rotate(-10deg);
}

.login-hero-panel::after {
  top: 72px;
  right: -120px;
  width: 380px;
  height: 380px;
  border-color: rgba(255, 110, 110, 0.14);
}

.login-hero-copy,
.login-products,
.login-card {
  position: relative;
  z-index: 1;
}

.login-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.login-brand-mark {
  color: #f33d45;
  font-size: 0.92rem;
  letter-spacing: -0.2em;
}

.login-hero-copy h1 {
  max-width: 420px;
  margin: 88px 0 14px;
  font-size: clamp(2.35rem, 4vw, 3.7rem);
  line-height: 1.06;
}

.login-hero-copy p {
  max-width: 360px;
  margin: 0;
  color: rgba(226, 232, 240, 0.92);
  font-size: 1.05rem;
  line-height: 1.7;
}

.login-products {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  min-height: 230px;
}

.login-product {
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 22px 42px rgba(7, 13, 28, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.login-product--nashi {
  width: 140px;
  height: 170px;
}

.login-product--makeup {
  width: 118px;
  height: 150px;
  transform: translateY(18px);
}

.login-product--derma {
  width: 128px;
  height: 158px;
}

.login-card {
  margin: 38px;
  padding: 28px 28px 30px;
  border-radius: 26px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
  display: grid;
  align-content: start;
  gap: 16px;
  border: 1px solid var(--line);
}

.transition-page {
  background:
    radial-gradient(circle at 50% 20%, rgba(192, 22, 36, 0.18), transparent 24%),
    linear-gradient(135deg, #0d0d10 0%, #17171b 48%, #3a1217 100%);
  color: #fff;
}

.transition-page--goodbye {
  background:
    radial-gradient(circle at 50% 20%, rgba(229, 62, 62, 0.16), transparent 24%),
    linear-gradient(135deg, #120f11 0%, #1b1719 48%, #4a161c 100%);
}

.transition-scene {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px;
}

.transition-shell {
  position: relative;
  width: min(1160px, 100%);
  min-height: min(520px, calc(100vh - 80px));
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 36px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    rgba(17, 15, 18, 0.68);
  backdrop-filter: blur(10px);
  box-shadow: 0 32px 96px rgba(0, 0, 0, 0.38);
}

.transition-shell::before,
.transition-shell::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 42%;
  pointer-events: none;
}

.transition-shell::before {
  inset-inline-start: 0;
  background: linear-gradient(90deg, rgba(9, 9, 12, 0.84), rgba(9, 9, 12, 0.08));
}

.transition-shell::after {
  inset-inline-end: 0;
  background: linear-gradient(270deg, rgba(96, 15, 24, 0.34), rgba(96, 15, 24, 0));
}

.transition-glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192, 22, 36, 0.26), rgba(192, 22, 36, 0));
  filter: blur(14px);
  animation: transition-float 1.9s ease-in-out infinite alternate;
}

.transition-page--goodbye .transition-glow {
  background: radial-gradient(circle, rgba(255, 112, 112, 0.28), rgba(255, 112, 112, 0));
}

.transition-card {
  position: relative;
  z-index: 1;
  width: min(700px, calc(100% - 64px));
  padding: 42px 44px;
  text-align: center;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.24);
  color: #111111;
}

.transition-card__eyebrow {
  margin-bottom: 18px;
  color: #9f1420;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.transition-card h1 {
  margin: 0;
  font-size: clamp(3.4rem, 7vw, 5.2rem);
  line-height: 1.02;
  color: #111111;
}

.transition-card p {
  margin: 24px auto 0;
  max-width: 520px;
  color: #55555f;
  font-size: 1.12rem;
  line-height: 1.75;
}

.real-logo--transition {
  color: #111111;
  margin-bottom: 12px;
}

.real-logo--transition .real-logo__subtitle {
  color: #111111;
}

.real-logo--transition .real-logo__tagline {
  color: #3f3f46;
}

@keyframes transition-float {
  from {
    transform: translateY(-18px) scale(0.96);
  }
  to {
    transform: translateY(18px) scale(1.04);
  }
}

.login-card__icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 8px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #fff1f2 0%, #ffd5d8 100%);
  color: var(--primary);
  font-size: 2rem;
  box-shadow: 0 12px 24px rgba(192, 22, 36, 0.16);
}

.login-card h2 {
  margin: 0;
  text-align: center;
  font-size: 2rem;
  color: #1e293b;
}

.login-form {
  gap: 14px;
}

.login-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--input-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.login-input__icon {
  color: #94a3b8;
  font-size: 1rem;
  flex: 0 0 auto;
}

.login-input input {
  border: 0;
  background: transparent;
  padding: 14px 0;
  box-shadow: none;
}

.login-input input:focus {
  outline: none;
}

.login-submit {
  margin-top: 4px;
  min-height: 52px;
  border-radius: 14px;
  background: linear-gradient(90deg, #9e101c, #d81f2d);
  box-shadow: 0 14px 28px rgba(192, 22, 36, 0.24);
}

.login-shell h1,
.auth-shell h1 {
  margin: 0 0 10px;
}

.login-error {
  color: var(--risk);
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.18);
  padding: 12px 14px;
  border-radius: 12px;
}

.login-help {
  color: var(--text);
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.16);
  padding: 12px 14px;
  border-radius: 12px;
  margin-bottom: 2px;
}

.login-page--luxury {
  height: 100dvh;
  min-height: 100dvh;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: clamp(10px, 1.4vw, 20px) clamp(14px, 1.8vw, 26px);
  background:
    radial-gradient(circle at 10% 70%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 28%),
    radial-gradient(circle at 62% 40%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 22%),
    radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 20%),
    linear-gradient(120deg, #efe7df 0%, #f8f4ef 42%, #f0e3d8 100%);
}

.login-page--luxury::before,
.login-page--luxury::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.login-page--luxury::before {
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.95) 0 2px, transparent 3px) 0 0 / 120px 120px,
    radial-gradient(circle at 72% 34%, rgba(255, 255, 255, 0.78) 0 1.5px, transparent 3px) 0 0 / 150px 150px,
    radial-gradient(circle at 54% 60%, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0) 55%);
  opacity: 0.9;
}

.login-page--luxury::after {
  background:
    radial-gradient(circle at 56% 52%, rgba(255, 244, 232, 0.92), rgba(255, 244, 232, 0) 30%),
    linear-gradient(115deg, rgba(255, 255, 255, 0) 54%, rgba(255, 255, 255, 0.44) 62%, rgba(255, 255, 255, 0) 72%);
}

.login-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.72);
  color: #111827;
  padding: 9px 12px 9px 16px;
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(10px);
}

.shell-toolbar--login {
  width: min(1400px, 100%);
  margin: 0 auto clamp(8px, 1.4vh, 16px);
  padding-inline: 4px;
}

.login-theme-toggle__track {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.12);
  display: inline-flex;
  align-items: center;
  padding: 2px;
}

.login-theme-toggle__thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15);
  transform: translateX(18px);
}

[data-theme="dark"] .login-theme-toggle__thumb {
  transform: translateX(0);
}

.login-scene--luxury {
  position: relative;
  min-height: 0;
  display: grid;
  align-items: center;
  overflow: hidden;
}

.login-shell--luxury {
  position: relative;
  width: min(1280px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, 420px);
  align-items: center;
  gap: clamp(24px, 3.2vw, 48px);
  padding: 4px 12px 8px;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

.login-hero-panel--luxury {
  min-height: 100%;
  padding: 18px 14px 6px;
  color: #111827;
}

.login-hero-panel--luxury::before,
.login-hero-panel--luxury::after {
  border: 1px solid rgba(255, 255, 255, 0.34);
  opacity: 0.9;
}

.login-hero-panel--luxury::before {
  left: 40%;
  bottom: -92px;
  width: 720px;
  height: 250px;
  transform: rotate(-10deg);
}

.login-hero-panel--luxury::after {
  top: 56px;
  right: -56px;
  width: 560px;
  height: 390px;
}

.login-hero-glow {
  position: absolute;
  inset: 5% -2% 4% 18%;
  background:
    radial-gradient(circle at 22% 26%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 16%),
    radial-gradient(circle at 48% 48%, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0) 18%),
    radial-gradient(circle at 68% 26%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 10%),
    linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.34) 54%, rgba(255, 255, 255, 0) 70%);
  filter: blur(4px);
  opacity: 0.95;
}

.login-hero-copy--luxury {
  max-width: 700px;
}

.login-brand--luxury {
  color: #111827;
}

.login-brand-lockup {
  display: inline-grid;
  gap: 2px;
}

.login-brand-wordmark {
  font-size: clamp(3rem, 5vw, 4.45rem);
  line-height: 0.9;
  letter-spacing: 0.05em;
  font-weight: 900;
  font-family: "Arial Black", "Segoe UI", Arial, sans-serif;
}

.login-brand-subtitle {
  font-size: 1.08rem;
  letter-spacing: 0.3em;
  text-transform: lowercase;
  padding-inline-start: 6px;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  font-weight: 700;
}

.login-brand-tagline {
  margin-top: 6px;
  font-size: 0.88rem;
  color: #404040;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  position: relative;
  padding-top: 14px;
  padding-inline-start: 6px;
}

.login-brand-tagline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #991b1b, #ef4444);
}

.login-hero-copy--luxury h1 {
  max-width: 620px;
  margin: 30px 0 14px;
  font-size: clamp(2.45rem, 4.6vw, 4.35rem);
  line-height: 0.98;
  color: #101828;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
}

.login-hero-copy--luxury p {
  max-width: 430px;
  color: #4b5563;
  font-size: 1.08rem;
  line-height: 1.55;
}

.login-products--luxury {
  position: relative;
  min-height: 182px;
  align-items: flex-end;
  gap: 14px;
  padding-left: 0;
  margin-top: 6px;
}

.login-products__pedestal {
  position: absolute;
  left: -10px;
  right: 120px;
  bottom: 8px;
  height: 28px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(181, 146, 116, 0.26), rgba(181, 146, 116, 0) 72%);
  filter: blur(8px);
}

.login-shell--luxury .login-product {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.42);
  object-fit: cover;
  box-shadow: 0 16px 34px rgba(125, 88, 53, 0.12);
  border-radius: 22px;
}

.login-shell--luxury .login-product--nashi {
  width: 112px;
  height: 160px;
}

.login-shell--luxury .login-product--makeup {
  width: 132px;
  height: 102px;
  transform: translateY(6px);
}

.login-shell--luxury .login-product--derma {
  width: 132px;
  height: 132px;
}

.login-card--luxury {
  align-self: center;
  margin: 0;
  padding: 28px 28px 30px;
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78));
  border: 1px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 32px 80px rgba(166, 141, 114, 0.18);
  backdrop-filter: blur(22px);
}

.login-card__icon--luxury {
  width: 84px;
  height: 84px;
  margin-bottom: 12px;
  background: linear-gradient(180deg, rgba(241, 245, 249, 0.96), rgba(226, 232, 240, 0.92));
  color: #fb923c;
  box-shadow: 0 18px 30px rgba(148, 163, 184, 0.18);
}

.login-card--luxury h2 {
  margin-bottom: 16px;
  font-size: clamp(2.1rem, 3.2vw, 2.9rem);
  color: #101828;
  font-family: Georgia, "Times New Roman", serif;
}

.login-form--luxury .filter-group {
  gap: 8px;
}

.login-form--luxury .filter-group label {
  color: #6b7280;
  font-size: 0.95rem;
}

.login-input--luxury {
  min-height: 58px;
  padding: 0 16px;
  border-radius: 16px;
  border-color: rgba(226, 232, 240, 0.88);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 244, 246, 0.92));
  box-shadow: 0 8px 18px rgba(148, 163, 184, 0.1);
}

.login-input--luxury .login-input__icon {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  color: #9ca3af;
}

.login-input--luxury input {
  color: #1f2937;
  font-size: 1.02rem;
}

.login-submit--luxury {
  margin-top: 10px;
  min-height: 58px;
  border-radius: 18px;
  background: linear-gradient(90deg, #c1121f 0%, #ef4444 100%);
  box-shadow: 0 16px 34px rgba(239, 68, 68, 0.24);
}

[dir="rtl"] .login-shell--luxury {
  direction: ltr;
}

[dir="rtl"] .login-hero-copy--luxury,
[dir="rtl"] .login-card--luxury,
[dir="rtl"] .login-form--luxury .filter-group,
[dir="rtl"] .login-help--luxury,
[dir="rtl"] .login-error--luxury {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .login-input--luxury input {
  text-align: left;
}

.login-help--luxury,
.login-error--luxury {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(203, 213, 225, 0.72);
}

.login-page--poster {
  display: grid;
  place-items: center;
  padding: 12px;
  background: #f6efe8;
}

.login-poster {
  position: relative;
  width: min(100vw - 24px, calc((100vh - 24px) * 1.333333));
  max-width: 1536px;
  aspect-ratio: 4 / 3;
  background: center / contain no-repeat var(--login-reference);
  direction: ltr;
}

.login-poster__form {
  position: absolute;
  inset: 0;
}

.login-poster__theme-hit {
  position: absolute;
  top: 2.2%;
  right: 1.5%;
  width: 13.8%;
  height: 4.8%;
  border: 0;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
}

.login-poster__theme-hit:focus-visible,
.login-poster__input:focus-visible,
.login-poster__submit:focus-visible {
  outline: 2px solid rgba(29, 78, 216, 0.9);
  outline-offset: 2px;
}

.login-poster__input,
.login-poster__submit {
  position: absolute;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.login-poster__input {
  left: 71.15%;
  width: 22.35%;
  height: 5.35%;
  border-radius: 16px;
  color: #111827;
  font-size: clamp(0.85rem, 1.22vw, 1.18rem);
  padding: 0 4.2% 0 14.5%;
  font-family: inherit;
  line-height: 1;
}

.login-poster__input--email {
  top: 45.65%;
}

.login-poster__input--password {
  top: 57%;
}

.login-poster__input::placeholder {
  color: transparent;
}

.login-poster__submit {
  left: 71.15%;
  top: 68.55%;
  width: 22.35%;
  height: 6.35%;
  border-radius: 18px;
  cursor: pointer;
}

.login-poster__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.login-poster__message {
  position: absolute;
  right: 7.2%;
  width: 26%;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: clamp(0.72rem, 0.95vw, 0.95rem);
  line-height: 1.4;
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.login-poster__message--error {
  top: 76.5%;
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.24);
}

.login-poster__message--info {
  top: 84%;
  color: #1d4ed8;
  border: 1px solid rgba(59, 130, 246, 0.22);
}

.surface {
  padding: 16px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  height: 100%;
}

.surface-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.surface-header h3 {
  margin: 0;
  font-size: 1rem;
}

.filters,
.admin-toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.filter-surface {
  padding: 12px 18px;
}

.filter-group {
  display: grid;
  gap: 6px;
}

.filter-group label {
  color: var(--muted);
  font-size: 0.82rem;
}

.filter-group input,
.filter-group select,
.modal-form input,
.modal-form select {
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
}

.grid-4,
.grid-3,
.grid-2,
.main-grid,
.branch-grid,
.bar-list,
.stack,
.modal-form {
  display: grid;
  gap: 16px;
}

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

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

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

.branch-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.brand-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0;
  align-items: stretch;
}

.brand-metrics div {
  padding: 12px;
  border-radius: 14px;
  background: var(--soft-bg);
  display: grid;
  gap: 4px;
  min-height: 86px;
  align-content: space-between;
}

.brand-metrics span {
  color: var(--muted);
  font-size: 0.83rem;
}

.brand-metrics strong {
  font-size: 0.98rem;
}

.main-card,
.card,
.branch-card {
  padding: 14px;
  height: 100%;
}

.main-card {
  display: grid;
  gap: 14px;
}

.landing-hero {
  min-height: 240px;
  padding: 28px 32px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 75% 28%, rgba(37, 99, 235, 0.26), transparent 18%),
    radial-gradient(circle at 82% 36%, rgba(96, 165, 250, 0.2), transparent 20%),
    linear-gradient(135deg, #020817 0%, #08153a 55%, #0b2e8a 100%);
  color: white;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px;
  overflow: hidden;
  position: relative;
}

.landing-hero::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 12%;
  bottom: 24px;
  height: 80px;
  background:
    radial-gradient(circle at 10% 50%, rgba(59, 130, 246, 0.2), transparent 18%),
    linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.55), transparent);
  opacity: 0.7;
  filter: blur(8px);
}

.landing-hero__copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
}

.landing-hero__copy h1,
.landing-hero__copy h2,
.landing-hero__copy p {
  margin: 0;
}

.landing-hero__copy h2 {
  margin-top: 14px;
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 700;
}

.landing-hero__copy p {
  margin-top: 18px;
  max-width: 360px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
}

.landing-line {
  width: 44px;
  height: 4px;
  margin-top: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, #9e101c, #e33c45);
}

.landing-hero__art {
  position: relative;
  min-height: 180px;
}

.orb {
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.32);
  box-shadow: 0 0 40px rgba(59, 130, 246, 0.22);
}

.orb--one {
  width: 220px;
  height: 220px;
  right: 34px;
  top: -10px;
}

.orb--two {
  width: 130px;
  height: 130px;
  left: 24px;
  top: 58px;
}

.product {
  position: absolute;
  bottom: 8px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}

.product--brush {
  width: 22px;
  height: 118px;
  left: 110px;
  bottom: 20px;
  border-radius: 14px;
  background: linear-gradient(180deg, #4b5563 0%, #111827 55%, #0f172a 100%);
}

.product--brush::before {
  content: "";
  position: absolute;
  width: 46px;
  height: 34px;
  left: -12px;
  top: -24px;
  border-radius: 50% 50% 35% 35%;
  background: radial-gradient(circle at 50% 40%, #7c2d12, #1f2937 72%);
}

.product--lipstick {
  width: 24px;
  height: 92px;
  left: 165px;
  bottom: 24px;
  border-radius: 8px;
  background: linear-gradient(180deg, #111827 0%, #0f172a 65%, #1f2937 100%);
}

.product--lipstick::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 34px;
  left: 3px;
  top: -22px;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, #fb7185, #e11d48);
}

.product--bottle {
  width: 64px;
  height: 138px;
  left: 212px;
  bottom: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 244, 244, 0.95), rgba(251, 191, 179, 0.92));
}

.product--bottle::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 26px;
  left: 17px;
  top: -18px;
  border-radius: 6px;
  background: linear-gradient(180deg, #eab308, #b45309);
}

.product--bottle::after {
  content: "";
  position: absolute;
  width: 52px;
  height: 10px;
  left: 6px;
  top: -26px;
  border-radius: 999px;
  background: linear-gradient(90deg, #b45309, #f59e0b);
}

.product--jar {
  width: 88px;
  height: 78px;
  right: 30px;
  bottom: 16px;
  border-radius: 0 0 36px 36px;
  background: linear-gradient(180deg, rgba(253, 224, 224, 0.92), rgba(157, 23, 77, 0.7));
}

.product--jar::before {
  content: "";
  position: absolute;
  width: 82px;
  height: 28px;
  left: 3px;
  top: -16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #92400e, #f59e0b);
}

.product--jar::after {
  content: "";
  position: absolute;
  width: 56px;
  height: 34px;
  right: -4px;
  top: -6px;
  border-radius: 60% 40% 55% 45%;
  background: linear-gradient(180deg, #fff7ed, #fed7aa);
}

.main-grid--landing {
  gap: 22px;
}

.main-card {
  padding: 26px 22px 18px;
  border-radius: 24px;
}

.main-card__top {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 18px;
  align-items: start;
}

.main-card__icon {
  width: 92px;
  height: 92px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  font-size: 2.6rem;
  font-weight: 800;
}

.main-card__content {
  display: grid;
  gap: 8px;
}

.main-card__content strong {
  font-size: 1.1rem;
}

.main-card__content p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.6;
}

.main-card__divider {
  height: 1px;
  background: #edf2f7;
}

.main-card--hair {
  border-left: 4px solid var(--hair);
}

.main-card--makeup {
  border-left: 4px solid var(--makeup);
}

.main-card--derma {
  border-left: 4px solid var(--derma);
}

.main-card--executive {
  border-left: 4px solid var(--executive);
}

.main-card__icon--hair {
  color: var(--hair);
  background: rgba(59, 130, 246, 0.1);
}

.main-card__icon--makeup {
  color: var(--makeup);
  background: rgba(236, 72, 153, 0.1);
}

.main-card__icon--derma {
  color: var(--derma);
  background: rgba(16, 185, 129, 0.1);
}

.main-card__icon--executive {
  color: var(--executive);
  background: rgba(181, 18, 36, 0.1);
}

.enter-button--hair {
  background: linear-gradient(90deg, #83101a, #b51224);
}

.enter-button--makeup {
  background: linear-gradient(90deg, #a8111d, #d81f2d);
}

.enter-button--derma {
  background: linear-gradient(90deg, #10b981, #34d399);
}

.enter-button--executive {
  background: linear-gradient(90deg, #7c3aed, #8b5cf6);
}

.kpi-label {
  color: var(--muted);
  font-size: 0.82rem;
  margin-bottom: 6px;
}

.kpi-value {
  font-size: 1.45rem;
  font-weight: 800;
  overflow-wrap: anywhere;
  line-height: 1.1;
}

.trend-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 2px;
  padding: 7px 10px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid rgba(226, 232, 240, 0.9);
}

.trend-indicator__icon {
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1;
}

.trend-indicator__copy {
  display: grid;
  gap: 1px;
}

.trend-indicator__copy strong {
  font-size: 0.88rem;
  line-height: 1;
}

.trend-indicator__copy span {
  font-size: 0.74rem;
  color: var(--muted);
}

.trend-indicator--up {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.18);
  color: var(--good);
}

.trend-indicator--down {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.18);
  color: var(--risk);
}

.trend-indicator--stable {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.24);
  color: #64748b;
}

.muted {
  color: var(--muted);
}

.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tag,
.badge,
.segment-tab,
.back-button,
.access-button,
.ghost-button,
.table-action,
.enter-button,
.floating-admin-button {
  border-radius: 12px;
  font: inherit;
}

.tag,
.badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  font-size: 0.82rem;
  font-weight: 700;
}

.tag--hair,
.tag--kera-glow,
.tag--silk-repair,
.tag--follica-pro {
  background: rgba(59, 130, 246, 0.12);
  color: var(--hair);
}

.tag--makeup,
.tag--velvet-touch,
.tag--color-fix,
.tag--luxe-face {
  background: rgba(236, 72, 153, 0.12);
  color: var(--makeup);
}

.tag--derma,
.tag--derma-lab,
.tag--clear-cell,
.tag--skin-barrier {
  background: rgba(16, 185, 129, 0.12);
  color: var(--derma);
}

.tag--executive {
  background: rgba(139, 92, 246, 0.12);
  color: var(--executive);
}

.tag--admin {
  background: rgba(37, 99, 235, 0.12);
  color: var(--primary);
}

.low {
  background: rgba(34, 197, 94, 0.12);
  color: var(--good);
}

.medium {
  background: rgba(245, 158, 11, 0.14);
  color: var(--warn);
}

.high {
  background: rgba(239, 68, 68, 0.12);
  color: var(--risk);
}

.achievement {
  font-weight: 800;
}

.achievement--good {
  color: var(--good);
}

.achievement--warn {
  color: var(--warn);
}

.achievement--risk {
  color: var(--risk);
}

.branch-card {
  display: grid;
  gap: 10px;
  border-top: 4px solid transparent;
  align-content: start;
}

.branch-card--hair {
  border-top-color: var(--hair);
}

.branch-card--makeup {
  border-top-color: var(--makeup);
}

.branch-card--derma {
  border-top-color: var(--derma);
}

.branch-metrics > div {
  min-width: 120px;
  display: grid;
  gap: 4px;
}

.branch-metrics span {
  color: var(--muted);
  font-size: 0.78rem;
}

.branch-metrics strong {
  font-size: 1rem;
}

.bar-track {
  width: 100%;
  height: 10px;
  margin-top: 8px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8f101a, #d31d2c);
}

.trend {
  width: 100%;
  height: 200px;
}

.trend-panel {
  padding: 6px 4px 0;
}

.trend-panel .trend {
  height: 220px;
  display: block;
}

.trend-surface {
  padding: 18px;
  overflow: visible;
}

.trend-showcase {
  display: grid;
  gap: 18px;
}

.trend-showcase__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.trend-showcase__header h3 {
  margin: 0;
  font-size: 1.8rem;
}

.trend-showcase__header p {
  margin: 6px 0 0;
  color: var(--muted);
}

.trend-showcase__pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.trend-filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.92rem;
  box-shadow: var(--shadow);
}

.trend-showcase__summary {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(240px, 0.9fr);
  gap: 14px;
}

.trend-showcase__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.68), rgba(248,250,252,0.96));
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}

.trend-stat-card {
  padding: 18px 16px;
  display: grid;
  gap: 7px;
  align-content: start;
  min-height: 128px;
}

.trend-stat-card + .trend-stat-card {
  border-inline-start: 1px solid var(--line);
}

.trend-stat-card span,
.trend-stat-card small {
  color: var(--muted);
}

.trend-stat-card strong {
  font-size: 1.9rem;
  line-height: 1;
}

.trend-summary-card {
  border-radius: 18px;
  border: 1px solid rgba(34, 197, 94, 0.15);
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.96), rgba(236, 253, 245, 0.82));
  padding: 18px;
  display: grid;
  gap: 12px;
}

.trend-summary-card--down {
  border-color: rgba(239, 68, 68, 0.15);
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.96), rgba(254, 226, 226, 0.82));
}

.trend-summary-card--stable {
  border-color: rgba(148, 163, 184, 0.18);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.9));
}

.trend-summary-card__label {
  color: var(--muted);
  font-size: 0.88rem;
}

.trend-summary-card__body {
  display: flex;
  align-items: center;
  gap: 14px;
}

.trend-summary-card__icon {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--good);
}

.trend-summary-card--down .trend-summary-card__icon {
  color: var(--risk);
}

.trend-summary-card--stable .trend-summary-card__icon {
  color: var(--muted);
}

.trend-summary-card__body strong {
  display: block;
  font-size: 2rem;
  line-height: 1;
  color: var(--good);
}

.trend-summary-card--down .trend-summary-card__body strong {
  color: var(--risk);
}

.trend-summary-card--stable .trend-summary-card__body strong {
  color: var(--text);
}

.trend-summary-card__body small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.92rem;
}

.trend-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.trend-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 600;
}

.trend-legend__swatch {
  width: 26px;
  height: 3px;
  border-radius: 999px;
  background: var(--swatch);
  position: relative;
}

.trend-legend__swatch::after {
  content: "";
  position: absolute;
  inset-inline-end: -1px;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--swatch);
}

.trend-legend__swatch--comparison {
  width: 28px;
  height: 0;
  border-top: 3px dashed rgba(148, 163, 184, 0.8);
  background: transparent;
}

.trend-legend__swatch--comparison::after {
  display: none;
}

.trend-panel--showcase {
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(16, 185, 129, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 253, 244, 0.76));
}

.trend-visual {
  display: grid;
  gap: 12px;
  position: relative;
}

.trend-chart-shell {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.trend-y-axis {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
}

.trend-y-axis span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #94a3b8;
  font-size: 0.82rem;
}

.trend-canvas {
  position: relative;
  min-height: 320px;
}

.trend-visual__stats {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.trend-visual__stat {
  display: grid;
  gap: 3px;
}

.trend-visual__stat span {
  color: var(--muted);
  font-size: 0.78rem;
}

.trend-visual__stat strong {
  font-size: 1rem;
}

.trend-axis-labels {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.85rem;
}

.trend-grid line {
  stroke: rgba(148, 163, 184, 0.28);
  stroke-width: 1;
}

.trend-line {
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trend-comparison {
  stroke: rgba(148, 163, 184, 0.8);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 7 8;
}

.trend-point {
  cursor: pointer;
}

.trend-point__dot {
  transition: transform 140ms ease, filter 140ms ease;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.5;
}

.trend-point:hover .trend-point__dot {
  transform: scale(1.18);
  filter: drop-shadow(0 0 6px rgba(37, 99, 235, 0.28));
}

.trend-tooltip {
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.94);
  color: #fff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.22);
  pointer-events: none;
  display: grid;
  gap: 2px;
  min-width: 110px;
  z-index: 5;
}

.trend-tooltip strong {
  font-size: 0.82rem;
  line-height: 1.1;
}

.trend-annotation {
  position: absolute;
  transform: translate(-50%, -112%);
  padding: 8px 12px;
  border-radius: 14px;
  display: grid;
  gap: 2px;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.14);
  pointer-events: none;
  min-width: 98px;
}

.trend-annotation span {
  font-size: 0.8rem;
}

.trend-annotation strong {
  font-size: 1rem;
}

.trend-annotation--light {
  background: rgba(255, 255, 255, 0.96);
  border: 2px solid rgba(34, 197, 94, 0.72);
  color: var(--good);
}

.trend-annotation--solid {
  background: var(--good);
  border: 2px solid var(--good);
  color: #fff;
}

.trend-showcase__footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(34, 197, 94, 0.12);
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.96), rgba(236, 253, 245, 0.82));
}

.trend-footer-card {
  padding: 16px 18px;
  display: grid;
  gap: 6px;
}

.trend-footer-card + .trend-footer-card {
  border-inline-start: 1px solid rgba(34, 197, 94, 0.12);
}

.trend-footer-card strong {
  font-size: 0.96rem;
}

.trend-footer-card span {
  color: var(--muted);
  font-size: 0.88rem;
}

.trend-tooltip span {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.82);
}

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

.focus-list {
  display: grid;
  gap: 12px;
}

.focus-list--grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.focus-list--stack {
  grid-template-columns: 1fr;
}

.focus-item,
.focus-card {
  transform: translateZ(0);
}

.focus-list .branch-card,
.focus-list .card,
.focus-list .chart-row {
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
}

.focus-list .card,
.focus-list .branch-card,
.compact-scroll__track > * {
  height: 100%;
}

.compact-scroll {
  margin-top: 12px;
}

.compact-scroll__track {
  display: flex;
  gap: 12px;
}

.compact-scroll--horizontal {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
}

.compact-scroll--horizontal .compact-scroll__track > * {
  flex: 0 0 min(320px, 88vw);
}

.compact-scroll--vertical {
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

.compact-scroll--vertical .compact-scroll__track {
  flex-direction: column;
}

.compact-scroll::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.compact-scroll::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.55);
  border-radius: 999px;
}

.chart-row {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--surface-strong), var(--surface));
}

.chart-row__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.chart-row__status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.chart-row__status .trend-indicator {
  margin: 0;
}

.chart-row__bars {
  display: grid;
  grid-template-columns: minmax(110px, 140px) 1fr;
  gap: 8px 14px;
  align-items: center;
}

.chart-stat {
  display: grid;
  gap: 2px;
}

.chart-stat span {
  color: var(--muted);
  font-size: 0.8rem;
}

.chart-stat strong {
  font-size: 0.96rem;
}

.chart-bar {
  height: 12px;
  background: rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  overflow: hidden;
}

.chart-bar__fill {
  height: 100%;
  border-radius: inherit;
}

.chart-bar--target .chart-bar__fill {
  background: linear-gradient(90deg, #cbd5e1, #94a3b8);
}

.chart-bar--actual .chart-bar__fill {
  background: linear-gradient(90deg, #8f101a, #d31d2c);
}

.chart-row--hair .chart-bar--actual .chart-bar__fill {
  background: linear-gradient(90deg, #540d12, var(--hair));
}

.chart-row--makeup .chart-bar--actual .chart-bar__fill {
  background: linear-gradient(90deg, #7f111b, var(--makeup));
}

.chart-row--derma .chart-bar--actual .chart-bar__fill {
  background: linear-gradient(90deg, #2a090d, var(--derma));
}

.chart-row--executive .chart-bar--actual .chart-bar__fill {
  background: linear-gradient(90deg, #520c12, var(--executive));
}

.table-wrap {
  overflow-x: auto;
  border-radius: 14px;
}

.executive-employee-groups {
  display: grid;
  gap: 16px;
}

.executive-employee-branch {
  display: grid;
  gap: 12px;
}

.executive-employee-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.executive-employee-category {
  display: grid;
  gap: 12px;
}

.standalone-main section {
  align-self: start;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 14px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

th {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.segment-tab,
.back-button,
.access-button,
.ghost-button,
.table-action {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  padding: 10px 14px;
  cursor: pointer;
}

.segment-tab.active,
.enter-button,
.floating-admin-button {
  background: var(--primary);
  color: #fff;
  border: 0;
}

.enter-button {
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 700;
}

.table-action.danger {
  color: var(--risk);
}

.empty-state {
  text-align: center;
  padding: 28px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.24);
  display: grid;
  place-items: center;
  padding: 20px;
}

.modal-card {
  width: min(520px, 100%);
  padding: 20px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.floating-admin-button {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  box-shadow: 0 16px 32px rgba(37, 99, 235, 0.28);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-weight: 800;
}

[dir="rtl"] .main-shell,
[dir="rtl"] .standalone-shell,
[dir="rtl"] .standalone-main,
[dir="rtl"] .surface,
[dir="rtl"] .card,
[dir="rtl"] .main-card,
[dir="rtl"] .branch-card,
[dir="rtl"] .hero {
  text-align: right;
}

[dir="rtl"] th,
[dir="rtl"] td,
[dir="rtl"] .filter-group input,
[dir="rtl"] .filter-group select,
[dir="rtl"] .modal-form input,
[dir="rtl"] .modal-form select {
  text-align: right;
}

[dir="rtl"] .topbar-actions,
[dir="rtl"] .lang-buttons,
[dir="rtl"] .segment-tabs,
[dir="rtl"] .table-actions,
[dir="rtl"] .modal-actions,
[dir="rtl"] .branch-metrics,
[dir="rtl"] .meta-row {
  direction: rtl;
}

[dir="rtl"] .action-menu__panel {
  left: 0;
  right: auto;
}

[dir="rtl"] .action-menu__item,
[dir="rtl"] .action-menu__chip {
  text-align: right;
}

[dir="rtl"] .hero-header {
  direction: ltr;
}

[dir="rtl"] .hero-header h1 {
  text-align: right;
}

[dir="rtl"] .login-shell,
[dir="rtl"] .login-hero-panel,
[dir="rtl"] .login-card,
[dir="rtl"] .login-input {
  direction: ltr;
}

[dir="rtl"] .login-card,
[dir="rtl"] .login-card h2,
[dir="rtl"] .login-brand,
[dir="rtl"] .login-hero-copy,
[dir="rtl"] .login-help,
[dir="rtl"] .login-error {
  text-align: left;
}

[dir="rtl"] .floating-admin-button {
  right: auto;
  left: 24px;
}

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

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

  .landing-hero {
      grid-template-columns: 1fr;
      min-height: auto;
    }

    .trend-showcase__summary,
    .trend-showcase__footer {
      grid-template-columns: 1fr;
    }

    .trend-showcase__stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1px;
      background: var(--line);
    }

    .trend-stat-card,
    .trend-footer-card {
      background: var(--surface);
    }

    .trend-stat-card + .trend-stat-card,
    .trend-footer-card + .trend-footer-card {
      border-inline-start: 0;
    }

  .landing-hero__art {
    min-height: 220px;
  }

  .login-shell {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .login-shell--luxury {
    gap: 18px;
    padding: 10px 0 18px;
    grid-template-columns: 1fr;
  }

  .login-hero-panel {
    min-height: 360px;
    padding-bottom: 20px;
  }

  .login-hero-panel--luxury {
    min-height: 420px;
    padding: 12px 8px 0;
  }

  .login-hero-copy h1 {
    margin-top: 40px;
    max-width: 100%;
  }

  .login-hero-copy--luxury h1 {
    margin-top: 34px;
    font-size: clamp(2.8rem, 8vw, 4.3rem);
  }

  .login-products {
    justify-content: center;
    min-height: 180px;
  }

  .login-products--luxury {
    justify-content: flex-start;
  }

  .login-card {
    margin: 0 22px 22px;
  }

  .login-card--luxury {
    max-width: 460px;
    margin: 0 0 22px auto;
  }

  .focus-list--grid {
    grid-template-columns: 1fr;
  }

  .executive-employee-category-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .main-shell,
  .standalone-shell {
    padding: 16px;
  }

  .grid-4,
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .standalone-topbar {
        align-items: flex-start;
        flex-direction: column;
      }

    .trend-showcase__header h3 {
      font-size: 1.45rem;
    }

    .trend-showcase__stats {
      grid-template-columns: 1fr;
    }

  .trend-panel--showcase {
    padding: 14px;
  }

  .trend-chart-shell {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 8px;
  }

  .trend-annotation {
    min-width: 82px;
    padding: 7px 10px;
  }

  .topbar-utility {
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
    padding-inline-end: 54px;
  }

  .month-pill {
    width: 100%;
    min-width: 0;
  }

  .action-menu {
    width: auto;
  }

  .action-menu__trigger {
    width: 44px;
    height: 44px;
  }

  .action-menu__panel {
    right: 0;
    left: auto;
    width: min(210px, calc(100vw - 32px));
  }

  .brand-metrics {
    grid-template-columns: 1fr;
  }

  .landing-hero {
    padding: 22px 18px;
  }

  .login-scene {
    min-height: auto;
  }

  .login-shell {
      border-radius: 22px;
    }

  .login-shell--luxury {
    border-radius: 0;
  }

  .transition-shell {
    min-height: min(420px, calc(100vh - 48px));
  }

  .transition-card {
    width: min(100%, calc(100% - 24px));
    padding: 30px 22px;
  }

  .transition-card h1 {
    font-size: 2.6rem;
  }

  .login-hero-panel {
    padding: 24px 20px 10px;
    min-height: 310px;
  }

  .login-hero-panel--luxury {
    min-height: 360px;
    padding: 12px 0 0;
  }

  .login-hero-copy h1 {
    font-size: 2.1rem;
    margin-top: 28px;
  }

  .login-hero-copy--luxury h1 {
    margin-top: 22px;
    font-size: 2.2rem;
  }

  .login-brand-wordmark {
    font-size: clamp(2.7rem, 12vw, 3.8rem);
  }

  .login-brand-subtitle {
    font-size: 0.94rem;
    letter-spacing: 0.22em;
  }

  .login-hero-copy p {
    font-size: 0.95rem;
  }

  .login-hero-copy--luxury p {
    max-width: 100%;
    font-size: 1rem;
  }

  .login-products {
    gap: 10px;
    min-height: 140px;
  }

  .login-products--luxury {
    min-height: 150px;
    padding-left: 0;
  }

  .login-product--nashi {
    width: 96px;
    height: 116px;
  }

  .login-shell--luxury .login-product--nashi {
    width: 84px;
    height: 118px;
  }

  .login-product--makeup {
    width: 84px;
    height: 102px;
  }

  .login-shell--luxury .login-product--makeup {
    width: 92px;
    height: 78px;
  }

  .login-product--derma {
    width: 90px;
    height: 110px;
  }

  .login-shell--luxury .login-product--derma {
    width: 92px;
    height: 94px;
  }

  .login-card {
    margin: 0 14px 14px;
    padding: 22px 18px;
  }

  .login-card--luxury {
    max-width: none;
    margin: 0;
    padding: 24px 20px 24px;
  }

  .login-page--poster {
    padding: 0;
  }

  .login-poster {
    width: 100vw;
  }

  .login-poster__input {
    font-size: clamp(0.74rem, 1.5vw, 0.95rem);
  }

  .login-poster__message {
    width: 28.5%;
    font-size: clamp(0.64rem, 1vw, 0.82rem);
  }

  .hero-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .chart-row__bars {
    grid-template-columns: 1fr;
  }

  .branch-metrics > div {
    min-width: calc(50% - 8px);
  }

  .hero-header__image {
    width: 132px;
    height: 88px;
  }

  .landing-hero__copy p {
    max-width: none;
  }

  .main-card__top {
    grid-template-columns: 72px 1fr;
  }

  .main-card__icon {
    width: 72px;
    height: 72px;
    font-size: 2rem;
    border-radius: 18px;
  }
}


/* ============================================================
   REAL COSMETICS — REDESIGN LAYER 2026  ("Editorial Beauty Counter")
   طبقة تصميم كاملة فوق البنية الأصلية. لا تغيّر أي منطق.
   ============================================================ */

/* ---------- 1) نظام الرموز (Design Tokens) ---------- */
:root {
  --primary: #c01624;
  --primary-deep: #7c0f1a;
  --bordeaux: #3a0e17;

  --bg: #f4f1f0;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --surface-2: #faf7f6;
  --soft-bg: #f6f1f0;
  --input-bg: #ffffff;

  --text: #23181b;
  --muted: #77696e;
  --line: rgba(35, 24, 27, 0.10);
  --line-strong: rgba(35, 24, 27, 0.16);

  --shadow: 0 18px 44px -22px rgba(58, 14, 23, 0.30);
  --shadow-sm: 0 2px 8px rgba(35, 24, 27, 0.06);

  --radius-lg: 20px;
  --radius-md: 13px;
  --radius-sm: 9px;

  --good: #12876a;  --good-bg: #e6f2ed;
  --warn: #b5730a;  --warn-bg: #faefdc;
  --risk: #c4283a;  --risk-bg: #fbe8ea;

  /* ألوان الأقسام — درجات دافئة متمايزة لسهولة التمييز */
  --hair: #8a1521;
  --makeup: #c01624;
  --derma: #a62a6b;
  --executive: #2a1b20;
  --admin: #43303a;

  --font-display: "Tajawal", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Tajawal", "Segoe UI", system-ui, sans-serif;
}

:root[data-theme="dark"] {
  --primary: #e2515c;
  --primary-deep: #c01624;
  --bordeaux: #1c0a0f;

  --bg: #171013;
  --surface: #211820;
  --surface-strong: #271d26;
  --surface-2: #2a1f27;
  --soft-bg: #251a22;
  --input-bg: #1b131a;

  --text: #f3e9ec;
  --muted: #b39aa3;
  --line: rgba(243, 233, 236, 0.12);
  --line-strong: rgba(243, 233, 236, 0.22);

  --shadow: 0 22px 50px -20px rgba(0, 0, 0, 0.65);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);

  --good: #34d3a6;  --good-bg: rgba(18, 135, 106, 0.18);
  --warn: #e0a53a;  --warn-bg: rgba(181, 115, 10, 0.20);
  --risk: #f0707d;  --risk-bg: rgba(196, 40, 58, 0.22);

  --hair: #e06a76;
  --makeup: #e2515c;
  --derma: #d76aa6;
}

/* ---------- 2) الأساسيات والطباعة ---------- */
body {
  font-family: var(--font-body);
  color: var(--text);
  background:
    radial-gradient(1200px 500px at 100% -10%, rgba(192, 22, 36, 0.05), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(58, 14, 23, 0.04), transparent 55%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.01em; }

/* أرقام مصطفّة أينما ظهرت */
.kpi-value, .branch-metrics strong, .achievement, td, .month-pill strong,
.chart-stat, .trend-visual__stat, .meta-row .tag {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

::selection { background: color-mix(in srgb, var(--primary) 22%, transparent); }

*:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- 3) الأصداف والتخطيط ---------- */
.standalone-shell, .main-shell, .standalone-main {
  max-width: 1320px;
}
.standalone-topbar { margin-bottom: 20px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stack  { display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---------- 4) الشريط العلوي ---------- */
.month-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 16px 9px 14px; box-shadow: var(--shadow-sm);
}
.month-pill::before {
  content: "🗓"; font-size: 15px; opacity: .85;
  margin-inline-end: 2px;
}
.month-pill span  { font-size: 11px; color: var(--muted); font-weight: 500; }
.month-pill strong{ font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.month-pill small { font-size: 11px; color: var(--primary); font-weight: 700;
  background: var(--risk-bg); padding: 2px 8px; border-radius: 999px; }

.ghost-button, .action-menu__trigger {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 13px; min-width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text); box-shadow: var(--shadow-sm);
  transition: background .15s, transform .15s, border-color .15s;
}
.ghost-button:hover, .action-menu__trigger:hover {
  background: var(--soft-bg); border-color: var(--line-strong);
}
.action-menu__icon { font-size: 20px; line-height: 1; }

.action-menu__panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow); padding: 8px; min-width: 210px;
}
.action-menu__item {
  display: block; width: 100%; text-align: start; background: transparent;
  border: 0; padding: 10px 12px; border-radius: 10px; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; color: var(--text);
  transition: background .12s;
}
.action-menu__item:hover { background: var(--soft-bg); }
.action-menu__item.active { color: var(--primary); font-weight: 700; background: var(--risk-bg); }
.action-menu__item--danger { color: var(--risk); }
.action-menu__divider { height: 1px; background: var(--line); margin: 6px 4px; }
.action-menu__label {
  font-size: 11px; color: var(--muted); padding: 8px 12px 3px;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

/* ---------- 5) الهيدر (Hero) ---------- */
.hero {
  background: var(--surface);
  border: 1px solid var(--line);
  border-inline-start: 5px solid var(--primary);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-end: 0;
  width: 42%;
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 60%);
  pointer-events: none;
}
.hero--hair       { border-inline-start-color: var(--hair); }
.hero--makeup     { border-inline-start-color: var(--makeup); }
.hero--derma      { border-inline-start-color: var(--derma); }
.hero--executive  { border-inline-start-color: var(--executive); }
.hero--admin      { border-inline-start-color: var(--admin); }
.hero--hair::after   { background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--hair) 10%, transparent), transparent 60%); }
.hero--makeup::after { background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--makeup) 10%, transparent), transparent 60%); }
.hero--derma::after  { background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--derma) 12%, transparent), transparent 60%); }

.hero-header { display: flex; align-items: center; justify-content: space-between; gap: 22px; position: relative; z-index: 1; }
.hero-header__copy h1 {
  margin: 10px 0 0; font-weight: 800; color: var(--text);
  font-size: clamp(24px, 3.2vw, 36px);
}
.hero-header__image {
  border-radius: 16px; max-height: 118px; width: auto; object-fit: cover;
  box-shadow: var(--shadow); border: 3px solid var(--surface);
}

/* اللوجو */
.real-logo__wordmark {
  font-family: var(--font-display); font-weight: 800; letter-spacing: .16em;
  font-size: 26px; color: var(--primary); line-height: 1;
}
.real-logo__subtitle {
  letter-spacing: .5em; font-size: 10px; text-transform: uppercase;
  color: var(--muted); margin-top: 4px; font-weight: 600;
}
.real-logo__tagline { font-size: 11px; color: var(--muted); margin-top: 3px; font-style: italic; }
.real-logo--hero .real-logo__wordmark { font-size: 22px; }

/* ---------- 6) الأسطح واللوحات ---------- */
.surface {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px 24px; box-shadow: var(--shadow);
}
.surface.filter-surface { padding: 14px 18px; }

.surface-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.surface-header h3 {
  margin: 0; font-size: 17px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 11px;
}
.surface-header h3::before {
  content: ""; width: 4px; height: 20px; border-radius: 3px;
  background: linear-gradient(var(--primary), var(--primary-deep));
}

/* ---------- 7) الفلاتر ---------- */
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.filter-group label {
  display: block; font-size: 12px; font-weight: 600; color: var(--muted);
  margin-bottom: 7px; letter-spacing: .01em;
}
.filter-group select, .modal-form input, .modal-form select {
  width: 100%; padding: 11px 14px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--input-bg); color: var(--text);
  font-family: var(--font-body); font-size: 14px; transition: border-color .15s, box-shadow .15s;
}
.filter-group select:focus, .modal-form input:focus, .modal-form select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}

/* ---------- 8) التبويبات المقسّمة (90% / 100%) ---------- */
.segment-tabs {
  display: inline-flex; gap: 4px; background: var(--soft-bg);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px;
}
.segment-tab {
  border: 0; background: transparent; cursor: pointer;
  padding: 8px 20px; border-radius: 999px; font-family: var(--font-body);
  font-weight: 700; font-size: 13px; color: var(--muted); transition: all .15s;
}
.segment-tab:hover { color: var(--text); }
.segment-tab.active {
  background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm);
}

/* ---------- 9) كروت المؤشرات (KPI) ---------- */
.card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 18px 18px 16px; box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease;
}
.card::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 40px; height: 3px; background: var(--primary);
  border-start-start-radius: var(--radius-md);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.kpi-label {
  font-size: 12px; font-weight: 600; color: var(--muted);
  letter-spacing: .02em; margin-bottom: 9px;
}
.kpi-value {
  font-family: var(--font-display); font-weight: 800; line-height: 1.08;
  font-size: clamp(21px, 2.3vw, 28px); color: var(--text); letter-spacing: -0.015em;
}
.card .muted, .muted { color: var(--muted); }
.card .muted { font-size: 12.5px; margin-top: 9px; }

/* ---------- 10) كروت الكيانات (فروع/براندات/أقسام) ---------- */
.branch-card {
  background: var(--surface); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--primary);
  border-radius: var(--radius-md); padding: 16px 17px; box-shadow: var(--shadow-sm);
  transition: transform .16s, box-shadow .16s;
}
.branch-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.branch-card--hair   { border-inline-start-color: var(--hair); }
.branch-card--makeup { border-inline-start-color: var(--makeup); }
.branch-card--derma  { border-inline-start-color: var(--derma); }

.meta-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.meta-row strong { font-family: var(--font-display); font-weight: 700; font-size: 15px; }

.branch-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 18px; }
.branch-metrics > div { display: flex; flex-direction: column; gap: 3px; }
.branch-metrics span { font-size: 11.5px; color: var(--muted); }
.branch-metrics strong { font-size: 14px; color: var(--text); font-weight: 700; }

.focus-list { display: grid; gap: 14px; }
.focus-list--grid  { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.focus-list--stack { grid-template-columns: 1fr; }
.focus-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px; }

/* ---------- 11) الشارات والوسوم والإنجاز ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.high   { background: var(--risk-bg); color: var(--risk); }
.badge.medium { background: var(--warn-bg); color: var(--warn); }
.badge.low    { background: var(--good-bg); color: var(--good); }

.tag {
  display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary);
}
.tag--hair   { background: color-mix(in srgb, var(--hair) 13%, transparent);   color: var(--hair); }
.tag--makeup { background: color-mix(in srgb, var(--makeup) 13%, transparent); color: var(--makeup); }
.tag--derma  { background: color-mix(in srgb, var(--derma) 14%, transparent);  color: var(--derma); }
.tag--executive { background: color-mix(in srgb, var(--executive) 10%, transparent); color: var(--executive); }
.tag--admin  { background: color-mix(in srgb, var(--admin) 12%, transparent); color: var(--admin); }

.achievement {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 800;
  background: var(--soft-bg);
}
.achievement--good { color: var(--good); background: var(--good-bg); }
.achievement--warn { color: var(--warn); background: var(--warn-bg); }
.achievement--risk { color: var(--risk); background: var(--risk-bg); }

/* شرائح الحالة العامة */
.high  { color: var(--risk); }
.medium{ color: var(--warn); }
.low   { color: var(--good); }

/* ---------- 12) الأزرار ---------- */
.enter-button, .access-button, .login-submit, .login-submit--luxury,
.login-poster__submit, .modal-actions .primary, button.primary {
  background: var(--primary); color: #fff; border: 0; cursor: pointer;
  padding: 12px 22px; border-radius: 12px; font-family: var(--font-body);
  font-weight: 700; font-size: 14px;
  box-shadow: 0 12px 24px -12px var(--primary);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.enter-button:hover, .access-button:hover, .login-submit:hover,
.login-submit--luxury:hover, .login-poster__submit:hover, button.primary:hover {
  background: var(--primary-deep); transform: translateY(-1px);
  box-shadow: 0 16px 28px -12px var(--primary);
}
.enter-button--hair   { background: var(--hair); box-shadow: 0 12px 24px -12px var(--hair); }
.enter-button--makeup { background: var(--makeup); }
.enter-button--derma  { background: var(--derma); box-shadow: 0 12px 24px -12px var(--derma); }
.enter-button--executive { background: var(--executive); box-shadow: none; }

.back-button, .ghost-button.table-action, .table-action {
  background: var(--surface); color: var(--text); border: 1px solid var(--line-strong);
  padding: 9px 16px; border-radius: 10px; font-family: var(--font-body);
  font-weight: 600; font-size: 13px; cursor: pointer; transition: background .15s;
}
.back-button:hover, .table-action:hover { background: var(--soft-bg); }
.danger { color: var(--risk); }

.floating-admin-button {
  background: var(--primary); color: #fff; border: 0; border-radius: 14px;
  padding: 12px 18px; font-weight: 700; box-shadow: var(--shadow); cursor: pointer;
}

/* ---------- 13) كروت اللاندنج/الأدمن (main-card) ---------- */
.main-grid, .main-grid--landing {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px;
}
.main-card {
  background: var(--surface); border: 1px solid var(--line);
  border-block-start: 3px solid var(--primary);
  border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow);
  transition: transform .18s, box-shadow .18s;
}
.main-card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -22px rgba(58,14,23,.34); }
.main-card--hair   { border-block-start-color: var(--hair); }
.main-card--makeup { border-block-start-color: var(--makeup); }
.main-card--derma  { border-block-start-color: var(--derma); }
.main-card--executive { border-block-start-color: var(--executive); }
.main-card__top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.main-card__icon {
  font-size: 25px; width: 54px; height: 54px; border-radius: 15px;
  display: grid; place-items: center; background: var(--soft-bg);
}
.main-card__icon--hair   { background: color-mix(in srgb, var(--hair) 12%, transparent); }
.main-card__icon--makeup { background: color-mix(in srgb, var(--makeup) 12%, transparent); }
.main-card__icon--derma  { background: color-mix(in srgb, var(--derma) 12%, transparent); }
.main-card__divider { height: 1px; background: var(--line); margin: 16px 0; }
.main-card__content { color: var(--muted); font-size: 13.5px; }

/* ---------- 14) الرسوم والاتجاهات (Trend / Charts) ---------- */
.bar-track { background: var(--soft-bg); border-radius: 999px; height: 9px; overflow: hidden; }
.bar-fill  { background: linear-gradient(90deg, var(--primary), var(--primary-deep)); height: 100%; border-radius: 999px; }

.chart-bar__fill { border-radius: 6px 6px 0 0; }
.chart-bar--actual .chart-bar__fill { background: var(--primary); }
.chart-bar--target .chart-bar__fill { background: var(--line-strong); }
.chart-row--hair   .chart-bar--actual .chart-bar__fill { background: var(--hair); }
.chart-row--makeup .chart-bar--actual .chart-bar__fill { background: var(--makeup); }
.chart-row--derma  .chart-bar--actual .chart-bar__fill { background: var(--derma); }

.trend-panel, .trend-surface, .trend-showcase {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.trend-line { stroke: var(--primary); }
.trend-point__dot { fill: var(--primary); }
.trend-legend__swatch { background: var(--primary); border-radius: 3px; }
.trend-legend__swatch--comparison { background: var(--line-strong); }
.trend-indicator--up   .trend-indicator__icon { color: var(--good); }
.trend-indicator--down .trend-indicator__icon { color: var(--risk); }
.trend-filter-pill {
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 12.5px; cursor: pointer;
}
.trend-filter-pill.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---------- 15) الجداول ---------- */
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
  text-align: start; font-weight: 700; font-size: 12px; color: var(--muted);
  padding: 13px 15px; background: var(--soft-bg); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 1;
}
tbody td { padding: 12px 15px; border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--soft-bg); }

/* ---------- 16) النوافذ المنبثقة (Modal) ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(35, 24, 27, 0.5);
  backdrop-filter: blur(4px); display: grid; place-items: center; z-index: 60; padding: 20px;
}
.modal-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px; width: min(540px, 100%); box-shadow: var(--shadow);
}
.modal-form { display: grid; gap: 14px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }

/* ---------- 17) الحالة الفارغة ---------- */
.empty-state {
  text-align: center; color: var(--muted); padding: 34px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: var(--surface-2);
}

/* ---------- 18) صفحة تسجيل الدخول (Luxury) ---------- */
.login-page--luxury {
  min-height: 100vh; display: grid; place-items: center; padding: 28px;
  background:
    radial-gradient(900px 500px at 88% 8%, rgba(192, 22, 36, 0.10), transparent 60%),
    radial-gradient(700px 500px at 6% 92%, rgba(58, 14, 23, 0.08), transparent 55%),
    var(--bg);
}
.login-scene--luxury { width: min(1060px, 100%); }
.login-shell--luxury {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  border-radius: 26px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line);
  background: var(--surface);
}
.login-hero-panel--luxury {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, var(--bordeaux) 0%, #200a10 60%, #12060a 100%);
  color: #fff; padding: 46px 44px; display: flex; flex-direction: column; gap: 18px; justify-content: center;
}
.login-hero-panel--luxury h1 {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3vw, 31px);
  line-height: 1.18; margin: 6px 0 0; color: #fff;
}
.login-hero-panel--luxury p { color: rgba(255, 255, 255, 0.78); margin: 0; font-size: 14px; }
.login-hero-panel--luxury .real-logo__wordmark { color: #fff; }
.login-hero-panel--luxury .real-logo__subtitle,
.login-hero-panel--luxury .real-logo__tagline { color: rgba(255, 255, 255, 0.65); }
.login-hero-glow {
  position: absolute; inset-block-end: -25%; inset-inline-end: -18%;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 81, 92, 0.45), transparent 70%);
  filter: blur(6px); pointer-events: none;
}
.login-products--luxury { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 12px; margin-top: 6px; }
.login-product {
  width: 30%; border-radius: 14px; box-shadow: 0 16px 30px -14px rgba(0,0,0,.6);
  border: 2px solid rgba(255,255,255,.14);
}
.login-products__pedestal { display: none; }

/* بطاقة النموذج (الجانب الأيمن) */
.login-card--luxury, .login-poster__form {
  padding: 46px 40px; display: flex; flex-direction: column; gap: 16px; justify-content: center;
  background: var(--surface);
}
.login-card__icon--luxury, .login-card__icon {
  width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center;
  background: var(--risk-bg); font-size: 26px; margin-bottom: 4px;
}
.login-card--luxury h2, .login-card h2 { font-family: var(--font-display); font-weight: 800; font-size: 26px; margin: 0; }
.login-input--luxury, .login-input, .login-poster__input {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 14px;
  background: var(--input-bg); transition: border-color .15s, box-shadow .15s;
}
.login-input--luxury:focus-within, .login-input:focus-within, .login-poster__input:focus-within {
  border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}
.login-input--luxury input, .login-input input, .login-poster__input input {
  border: 0; outline: 0; background: transparent; width: 100%;
  font-family: var(--font-body); font-size: 14px; color: var(--text);
}
.login-input__icon { color: var(--muted); }
.login-error--luxury, .login-error, .login-poster__message--error {
  background: var(--risk-bg); color: var(--risk); border: 1px solid color-mix(in srgb, var(--risk) 26%, transparent);
  border-radius: 11px; padding: 10px 14px; font-size: 13px; font-weight: 600;
}
.login-help--luxury, .login-help, .login-poster__message--info { color: var(--muted); font-size: 12.5px; }
.login-submit--luxury, .login-submit, .login-poster__submit { width: 100%; padding: 13px; font-size: 15px; }

@media (max-width: 860px) {
  .login-shell--luxury { grid-template-columns: 1fr; }
  .login-hero-panel--luxury { padding: 34px 28px; }
  .login-card--luxury, .login-poster__form { padding: 32px 26px; }
}

/* ---------- 19) لمسات نهائية ---------- */
.compact-scroll--horizontal .compact-scroll__track { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; }
.compact-scroll--horizontal .branch-card { min-width: 260px; flex: 0 0 auto; }
.compact-scroll__track::-webkit-scrollbar { height: 8px; }
.compact-scroll__track::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }

.landing-hero, .hero--main {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow);
}

/* ============================================================
   20) PROFESSIONAL REFINEMENT — بوكسات / بطاقات / أقسام منظّمة
   طبقة صقل فوق ما سبق: تحسين الوضوح والقراءة والتناسق في كل الصفحات.
   لا تغيّر أي منطق — تنسيق فقط.
   ============================================================ */

/* --- 20.1 إيقاع التخطيط: تنفّس أوضح بين الأقسام --- */
.standalone-main,
.main-shell {
  gap: 22px;
}
.standalone-topbar { margin-bottom: 22px; }

/* عناوين الأقسام: تباعد وهرمية أوضح */
.surface-header { margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.surface-header h3 { font-size: 17px; letter-spacing: -0.01em; }
.surface-header h3::before { height: 22px; width: 4px; }

/* --- 20.2 كروت المؤشرات (KPI) — بلاطات إحصائية أنيقة --- */
.grid-4 > .card {
  display: flex; flex-direction: column;
  padding: 20px 20px 18px;
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 100%, transparent), var(--surface-2));
}
.grid-4 > .card::before { width: 46px; height: 3px; }
.kpi-label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.kpi-value {
  font-size: clamp(22px, 2.3vw, 29px); line-height: 1.05; margin-bottom: 2px;
}
.grid-4 > .card .muted {
  margin-top: auto; padding-top: 10px; font-size: 12px; line-height: 1.45;
}

/* --- 20.3 شبكات المؤشّرات داخل الكروت — كل قيمة داخل بوكس مستقل --- */
.branch-metrics,
.brand-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 4px;
}
.brand-metrics { grid-template-columns: repeat(3, 1fr); }
.branch-metrics > div,
.brand-metrics > div {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  min-width: 0;
}
.branch-metrics span,
.brand-metrics span {
  font-size: 11px; color: var(--muted); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.branch-metrics strong,
.brand-metrics strong {
  font-size: 14px; color: var(--text); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
/* خلية الإنجاز داخل الشبكة تأخذ لون حالتها */
.branch-metrics strong.achievement,
.brand-metrics strong.achievement { padding: 0; background: transparent; }

@media (max-width: 560px) {
  .brand-metrics { grid-template-columns: 1fr 1fr; }
}

/* --- 20.4 رأس البطاقة (الاسم + الشارة) — فصل بصري أنظف --- */
/* الفاصل يظهر فقط عندما يتبع رأسَ البطاقة محتوى (لا في كروت الترتيب المكوّنة من سطر واحد) */
.meta-row:not(:last-child) {
  padding-bottom: 12px; margin-bottom: 13px;
  border-bottom: 1px solid var(--line);
}
.meta-row strong { font-size: 15px; letter-spacing: -0.01em; }
/* بطاقات المقارنة/التوب لا تحتاج فاصل مزدوج مع الشبكة الملاصقة */
.branch-metrics { margin-top: 0; }

/* --- 20.5 لوحة الاستثناءات (Alert) — تنبيه واضح بدل نص سائب --- */
.alert {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--risk-bg);
  border: 1px solid color-mix(in srgb, var(--risk) 24%, transparent);
  border-inline-start: 3px solid var(--risk);
  border-radius: var(--radius-sm);
  padding: 13px 15px 13px 14px;
}
.alert strong {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--text); display: flex; align-items: center; gap: 8px;
}
.alert strong::before { content: "⚠"; font-size: 14px; color: var(--risk); }
.alert .muted { font-size: 12.5px; margin: 0; line-height: 1.45; }

/* --- 20.6 قائمة مقارنة الأقسام (bar-list) — كروت متباعدة --- */
.bar-list { display: grid; grid-template-columns: 1fr; gap: 12px; }

/* --- 20.7 قسم رؤية الموظفين (Executive) — شبكة منظّمة --- */
.executive-employee-groups { display: grid; gap: 18px; }
.executive-employee-branch {
  display: grid; gap: 13px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px 16px 18px;
}
.executive-employee-branch > .meta-row { margin-bottom: 2px; }
.executive-employee-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}
.executive-employee-category { padding: 14px; }
.executive-employee-category .surface-header {
  margin-bottom: 12px; padding-bottom: 10px;
}
.executive-employee-category .surface-header h3 { font-size: 14px; }

/* --- 20.8 شريط أدوات الأدمن + حقول الإدخال --- */
.admin-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; align-items: end; margin-bottom: 18px;
}
.filter-group input {
  width: 100%; padding: 11px 14px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--input-bg); color: var(--text);
  font-family: var(--font-body); font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.filter-group input::placeholder { color: var(--muted); }
.filter-group input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}
@media (max-width: 720px) {
  .admin-toolbar { grid-template-columns: 1fr; }
}

/* --- 20.9 أزرار الإجراءات داخل الجداول --- */
.table-actions { display: flex; flex-wrap: wrap; gap: 7px; }

/* --- 20.10 الجداول — قراءة أسهل بتظليل متناوب --- */
tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--soft-bg) 55%, transparent); }
tbody tr:hover td { background: var(--soft-bg); }
thead th { letter-spacing: .02em; text-transform: uppercase; font-size: 11px; }

/* --- 20.11 التمرير العمودي (ترتيب الفروع) --- */
.compact-scroll--vertical .compact-scroll__track {
  display: grid; gap: 10px; max-height: 300px; overflow-y: auto;
  padding-inline-end: 4px;
}
.compact-scroll--vertical .compact-scroll__track::-webkit-scrollbar { width: 8px; }
.compact-scroll--vertical .compact-scroll__track::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 999px;
}

/* --- 20.12 بطاقات اللاندنج — هرمية عنوان/وصف أوضح --- */
.main-card__content { display: flex; flex-direction: column; }
.main-card__content strong {
  font-family: var(--font-display); font-weight: 800; font-size: 17px;
  color: var(--text); margin-bottom: 4px; letter-spacing: -0.01em;
}
.main-card__content p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* --- 20.13 كرت السبب الجذري / القوائم النصية داخل stack --- */
.stack > .card { border-radius: var(--radius-md); }
.stack > .card > strong {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 14px; margin-bottom: 5px;
}

/* --- 20.14 شريط التقدّم داخل مساهمة البراند --- */
.brand-metrics + .bar-track { margin-top: 12px; }

/* --- 20.15 لمسة أخيرة: توحيد ظل التمرير للكروت --- */
.card:hover { box-shadow: var(--shadow); }
.branch-card:hover { box-shadow: var(--shadow); }

/* --- 20.18 قسم أداء البراندات (Brand Performance) — شبكة مدمجة متجاوبة --- */
.brand-perf-grid { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
.brand-perf-grid .branch-card { padding: 15px 15px 16px; }
.brand-perf-grid .branch-metrics { gap: 8px; }

/* ============================================================
   20.19) تقارير مبيعات الأصناف (Item Sales Reports)
   ============================================================ */
/* الشريط العلوي: مجموعة يسار (رجوع + زر التقارير) */
.topbar-left { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.items-link-button {
  width: auto; min-width: 0; height: 44px; padding: 0 16px; gap: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: 13.5px;
  border-radius: 13px;
}
.items-link-button span { line-height: 1; }

/* شبكة بطاقات البراندات (قابلة للنقر) */
.items-brand-card {
  width: 100%; display: block; text-align: start; cursor: pointer;
  font-family: var(--font-body); color: var(--text);
  -webkit-appearance: none; appearance: none;
}
.items-brand-card:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 2px; }
.items-brand-card__cta {
  background: color-mix(in srgb, var(--primary) 9%, var(--surface-2)) !important;
  border-color: color-mix(in srgb, var(--primary) 22%, transparent) !important;
  flex-direction: row !important; align-items: center; justify-content: space-between;
}
.items-brand-card__cta span { color: var(--primary); font-weight: 700; }
.items-brand-card__cta strong { color: var(--primary); font-size: 18px; line-height: 1; }

/* شريط الفلاتر اللاصق */
.items-filter-bar {
  position: sticky; top: 10px; z-index: 6;
  backdrop-filter: blur(6px);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
.items-filter-bar input[type="date"] { color-scheme: light; }
:root[data-theme="dark"] .items-filter-bar input[type="date"] { color-scheme: dark; }

/* --- 20.20 مُنتقي الشهر في الشريط العلوي --- */
.month-pill--select { padding-block: 6px; padding-inline: 14px 10px; }
.month-select {
  border: 0; background: transparent; color: var(--text);
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  cursor: pointer; padding: 3px 6px; border-radius: 8px; max-width: 170px;
  color-scheme: light;
}
.month-select:hover { background: var(--soft-bg); }
.month-select:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent); }
:root[data-theme="dark"] .month-select { color-scheme: dark; }

/* رأس تفاصيل الأصناف: رجوع + عنوان + تبويب القيمة/الكمية */
.items-detail-header { flex-wrap: wrap; gap: 14px; }
.items-detail-headline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.items-detail-headline h3 { display: flex; align-items: center; gap: 10px; }
.items-detail-headline h3::before { display: none; }
.items-view-tabs { flex: 0 0 auto; }

/* حقل البحث */
.items-search-row {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--input-bg); padding: 10px 14px; margin-bottom: 16px;
  transition: border-color .15s, box-shadow .15s;
}
.items-search-row:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}
.items-search__icon { opacity: .7; font-size: 14px; }
.items-search-input {
  flex: 1; border: 0; outline: 0; background: transparent; color: var(--text);
  font-family: var(--font-body); font-size: 14px; min-width: 0;
}
.items-search-input::placeholder { color: var(--muted); }

/* جدول الأصناف */
.items-table { min-width: 860px; }
.items-table th.items-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.items-table th.items-th-sort:hover { color: var(--primary); }
.items-mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; font-size: 12.5px; color: var(--muted); }
.items-cell--emph { font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; }
.items-stock-badge { white-space: nowrap; }

/* ترقيم الصفحات */
.items-pagination {
  display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px;
}
.items-pagination .table-action { min-width: 40px; }
.items-pagination .table-action:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 720px) {
  .items-detail-header { align-items: flex-start; }
  .items-view-tabs { width: 100%; }
  .items-brand-grid { grid-template-columns: 1fr; }
}

/* --- 20.16 إصلاح الشعار (Logo) على الهيدر في كل الصفحات ---
   الهيرو صار بخلفية فاتحة، لكن قواعد قديمة كانت تورث لون النص أبيض
   فيختفي "COSMETICS" و"endless beauty". نُثبّت ألواناً واضحة ومتباينة. */
.real-logo--hero .real-logo__wordmark { color: var(--primary); }
.real-logo--hero .real-logo__subtitle,
.real-logo--hero .real-logo__tagline {
  color: var(--muted);
  opacity: 1;
}
/* لمعة السطر الأحمر تحت التاغلاين تبقى كلمسة هوية واضحة */
.real-logo--hero .real-logo__tagline::before {
  background: linear-gradient(90deg, var(--primary), var(--primary-deep));
}

/* --- 20.17 إصلاح هيدر اللاندنج (Landing) ---
   صار بخلفية فاتحة، لكن كان لونه أبيض قديماً فتختفي الكتابة والشعار،
   وفيه توهج/دوائر زرقاء لا تناسب هوية البوردو. نصلح النص ونعيد تلوين الزينة. */
.landing-hero { color: var(--text); }
.landing-hero__copy h2 { color: var(--text); }
.landing-hero__copy p { color: var(--muted); }

/* شعار اللاندنج على الخلفية الفاتحة */
.real-logo--landing .real-logo__wordmark { color: var(--primary); text-shadow: none; }
.real-logo--landing .real-logo__subtitle,
.real-logo--landing .real-logo__tagline { color: var(--muted); }
.real-logo--landing .real-logo__tagline::before {
  background: linear-gradient(90deg, var(--primary), var(--primary-deep));
  box-shadow: none;
}

/* التوهّج والدوائر الزرقاء القديمة → درجات الهوية (بوردو/أحمر) */
.landing-hero::after {
  background:
    radial-gradient(circle at 12% 50%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 22%),
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 20%, transparent), transparent);
  opacity: .5;
}
.orb {
  border-color: color-mix(in srgb, var(--primary) 26%, transparent);
  box-shadow: 0 0 40px color-mix(in srgb, var(--primary) 16%, transparent);
}

/* ============================================================================
   REDESIGN 2.0 — MODERN ENTERPRISE (2026)
   Full visual overhaul. Design only — no markup/logic changes.
   Neutral-forward surface system + focused accent, generous space, soft depth.
   This layer intentionally supersedes the earlier "Editorial" styling.
   ============================================================================ */

/* ---------- Tokens ---------- */
:root {
  --primary: #e11d48;
  --primary-deep: #9f1239;
  --primary-soft: #fff1f4;

  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --surface-2: #f5f7fa;
  --surface-3: #eef1f6;
  --soft-bg: #f2f5f9;
  --input-bg: #ffffff;

  --text: #0f172a;
  --text-2: #334155;
  --muted: #64748b;
  --muted-2: #94a3b8;
  --line: #e7eaf0;
  --line-strong: #d7dce5;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 2px 5px rgba(15, 23, 42, 0.05);
  --shadow: 0 8px 20px -8px rgba(15, 23, 42, 0.14), 0 2px 6px -2px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 28px 55px -26px rgba(15, 23, 42, 0.30);

  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 13px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --good: #059669;  --good-bg: #e6f6ef;
  --warn: #d97706;  --warn-bg: #fdf1e1;
  --risk: #e11d48;  --risk-bg: #fdeaee;

  --hair: #e11d48;
  --makeup: #7c3aed;
  --derma: #0d9488;
  --executive: #334155;
  --admin: #475569;
}

:root[data-theme="dark"] {
  --primary: #fb7185;
  --primary-deep: #e11d48;
  --primary-soft: rgba(251, 113, 133, 0.14);

  --bg: #0a0f1c;
  --surface: #121a2b;
  --surface-strong: #16203466;
  --surface-2: #182339;
  --surface-3: #1e2b45;
  --soft-bg: #172134;
  --input-bg: #0f1728;

  --text: #eef2f9;
  --text-2: #cbd5e1;
  --muted: #94a3b8;
  --muted-2: #64748b;
  --line: rgba(148, 163, 184, 0.16);
  --line-strong: rgba(148, 163, 184, 0.30);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 30px 60px -24px rgba(0, 0, 0, 0.7);

  --good: #34d399;  --good-bg: rgba(5, 150, 105, 0.18);
  --warn: #fbbf24;  --warn-bg: rgba(217, 119, 6, 0.20);
  --risk: #fb7185;  --risk-bg: rgba(225, 29, 72, 0.22);

  --hair: #fb7185;
  --makeup: #a78bfa;
  --derma: #2dd4bf;
  --executive: #cbd5e1;
  --admin: #94a3b8;
}

/* ---------- Base ---------- */
body {
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
}
h1, h2, h3, h4 { letter-spacing: -0.02em; }

/* ---------- Shell & layout rhythm ---------- */
.standalone-shell, .main-shell, .standalone-main { max-width: 1400px; }
.standalone-main, .main-shell { gap: 24px; }
.standalone-topbar { margin-bottom: 26px; }
.grid-4 { gap: 18px; }
.grid-3, .grid-2 { gap: 20px; }

/* ---------- Top app bar ---------- */
.month-pill {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 8px 14px;
}
.month-pill::before { opacity: .75; }
.month-pill span { color: var(--muted); font-weight: 600; }
.month-select { color: var(--text); }

.ghost-button, .action-menu__trigger {
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.ghost-button:hover, .action-menu__trigger:hover { background: var(--surface-2); border-color: var(--line-strong); }
.items-link-button { box-shadow: var(--shadow-sm); }
.items-link-button:hover { background: var(--surface-2); }

/* ---------- Page header (hero) — slim, clean, no heavy glow ---------- */
.hero {
  background: var(--surface);
  border: 1px solid var(--line);
  border-inline-start: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 26px 30px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  position: relative;
}
.hero::after { display: none; }
.hero::before {
  content: "";
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 5px; border-radius: var(--radius-pill);
  background: linear-gradient(var(--primary), var(--primary-deep));
}
.hero--hair::before   { background: linear-gradient(var(--hair), color-mix(in srgb, var(--hair) 60%, #000)); }
.hero--makeup::before { background: linear-gradient(var(--makeup), color-mix(in srgb, var(--makeup) 60%, #000)); }
.hero--derma::before  { background: linear-gradient(var(--derma), color-mix(in srgb, var(--derma) 60%, #000)); }
.hero--executive::before { background: linear-gradient(var(--executive), #0f172a); }
.hero--admin::before  { background: linear-gradient(var(--admin), #0f172a); }
.hero-header__copy h1 { font-weight: 800; font-size: clamp(22px, 2.8vw, 32px); }
.hero-header__image { max-height: 108px; border-radius: 14px; border: 4px solid var(--surface); box-shadow: var(--shadow); }
.real-logo--hero .real-logo__wordmark { font-size: 20px; letter-spacing: .18em; }

/* ---------- Panels / surfaces ---------- */
.surface {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.surface.filter-surface { padding: 16px 20px; border-radius: var(--radius-lg); }
.surface-header { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.surface-header h3 { font-size: 16px; font-weight: 700; gap: 10px; }
.surface-header h3::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary); flex: 0 0 auto;
}

/* ---------- KPI stat tiles ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card::before { content: none !important; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }

.grid-4 > .card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 22px 22px 20px;
  background: var(--surface);
}
.kpi-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--muted); margin-bottom: 10px;
}
.kpi-value {
  font-size: clamp(25px, 2.6vw, 33px); font-weight: 800; line-height: 1.05;
  color: var(--text); letter-spacing: -0.03em;
}
.grid-4 > .card .muted { margin-top: 10px; padding-top: 0; font-size: 12.5px; color: var(--muted); }

/* ---------- Entity cards (branch / brand / top) ---------- */
.branch-card, .focus-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-inline-start: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.branch-card::before {
  content: ""; position: absolute; inset-block: 14px; inset-inline-start: 0;
  width: 3px; border-radius: var(--radius-pill); background: var(--primary);
}
.branch-card--hair::before   { background: var(--hair); }
.branch-card--makeup::before { background: var(--makeup); }
.branch-card--derma::before  { background: var(--derma); }
.branch-card { padding-inline-start: 22px; }
.branch-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.meta-row:not(:last-child) { padding-bottom: 14px; margin-bottom: 14px; }
.meta-row strong { font-size: 15px; font-weight: 700; }

/* Metric pairs → clean key/value rows (de-cluttered, no filled boxes) */
.branch-metrics, .brand-metrics {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; margin-top: 2px;
}
.brand-metrics { grid-template-columns: 1fr 1fr; }
.branch-metrics > div, .brand-metrics > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  background: none; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--line);
  padding: 9px 0;
}
.branch-metrics > div:nth-last-child(-n+2), .brand-metrics > div:last-child { border-bottom: 0; }
.branch-metrics span, .brand-metrics span {
  color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.branch-metrics strong, .brand-metrics strong {
  font-size: 13.5px; font-weight: 700; color: var(--text-2);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap;
}
.branch-metrics strong.achievement, .brand-metrics strong.achievement { padding: 0; background: none; }

@media (max-width: 560px) {
  .brand-metrics, .branch-metrics { grid-template-columns: 1fr; }
}

/* ---------- Badges / tags / achievements — refined pills ---------- */
.badge, .tag, .achievement {
  border-radius: var(--radius-pill); font-weight: 600; font-size: 11.5px;
  padding: 4px 11px; line-height: 1.4;
}
.badge { border: 1px solid transparent; }
.badge.high   { background: var(--risk-bg); color: var(--risk); border-color: color-mix(in srgb, var(--risk) 24%, transparent); }
.badge.medium { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 24%, transparent); }
.badge.low    { background: var(--good-bg); color: var(--good); border-color: color-mix(in srgb, var(--good) 24%, transparent); }
.tag { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); font-weight: 700; }
.achievement { font-weight: 800; }
.achievement--good { color: var(--good); background: var(--good-bg); }
.achievement--warn { color: var(--warn); background: var(--warn-bg); }
.achievement--risk { color: var(--risk); background: var(--risk-bg); }

/* ---------- Buttons ---------- */
.enter-button, .access-button, .login-submit, .login-submit--luxury,
.login-poster__submit, .modal-actions .primary, button.primary, .floating-admin-button {
  border-radius: 12px; font-weight: 700;
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--primary) 70%, transparent);
}
.enter-button:hover, .access-button:hover, .login-submit:hover,
.modal-actions .primary:hover, button.primary:hover { transform: translateY(-1px); }
.enter-button--makeup { background: var(--makeup); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--makeup) 70%, transparent); }
.enter-button--derma  { background: var(--derma); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--derma) 70%, transparent); }
.enter-button--executive { background: var(--executive); box-shadow: none; }
.back-button, .table-action {
  border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface);
  font-weight: 600; box-shadow: var(--shadow-sm);
}
.back-button:hover, .table-action:hover { background: var(--surface-2); }
.floating-admin-button { border-radius: 14px; box-shadow: var(--shadow-lg); }

/* ---------- Filters ---------- */
.filters { gap: 16px; }
.filter-group label { color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.filter-group select, .filter-group input, .modal-form input, .modal-form select {
  border-radius: 11px; border: 1px solid var(--line-strong); background: var(--input-bg);
  padding: 11px 14px; font-size: 14px;
}
.filter-group select:focus, .filter-group input:focus, .modal-form input:focus, .modal-form select:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

/* ---------- Segment tabs ---------- */
.segment-tabs { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 4px; }
.segment-tab { border-radius: var(--radius-pill); font-weight: 600; color: var(--muted); }
.segment-tab.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }

/* ---------- Tables — clean data grid ---------- */
.table-wrap { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
table { font-size: 13.5px; }
thead th {
  background: var(--surface-2); color: var(--muted); font-weight: 700;
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
}
tbody td { padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--text-2); }
tbody tr:nth-child(even) td { background: transparent; }
tbody tr:hover td { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }

/* ---------- Alerts ---------- */
.alert {
  background: var(--risk-bg);
  border: 1px solid color-mix(in srgb, var(--risk) 22%, transparent);
  border-inline-start: 3px solid var(--risk);
  border-radius: var(--radius-md); padding: 14px 16px;
}
.alert strong { font-weight: 700; }

/* ---------- Progress bars ---------- */
.bar-track { background: var(--surface-3); height: 8px; }
.bar-fill { background: linear-gradient(90deg, var(--primary), var(--primary-deep)); }

/* ---------- Landing cards ---------- */
.main-card {
  background: var(--surface); border: 1px solid var(--line);
  border-block-start: 1px solid var(--line);
  border-radius: var(--radius-xl); padding: 26px; box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.main-card::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 4px;
  background: var(--primary);
}
.main-card--hair::before { background: var(--hair); }
.main-card--makeup::before { background: var(--makeup); }
.main-card--derma::before { background: var(--derma); }
.main-card--executive::before { background: var(--executive); }
.main-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.main-card__icon { border-radius: 14px; width: 52px; height: 52px; }

/* ---------- Executive employee groups ---------- */
.executive-employee-branch { background: var(--surface-2); border-radius: var(--radius-lg); }

/* ---------- Brand performance grid ---------- */
.brand-perf-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }

/* De-crowd: Brand Performance shown as one calm, scannable list (rows, table-like)
   instead of a wall of 19 metric cards. Item Sales Reports brand grid keeps its cards. */
.brand-perf-grid:not(.items-brand-grid) {
  display: flex; flex-direction: column; gap: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
}
.brand-perf-grid:not(.items-brand-grid) .branch-card {
  display: grid;
  grid-template-columns: minmax(150px, 1.6fr) repeat(4, minmax(86px, 1fr));
  align-items: center; gap: 18px;
  padding: 13px 22px;
  border: 0; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--line);
}
.brand-perf-grid:not(.items-brand-grid) .branch-card:last-child { border-bottom: 0; }
.brand-perf-grid:not(.items-brand-grid) .branch-card::before { display: none; }
.brand-perf-grid:not(.items-brand-grid) .branch-card:hover {
  transform: none; background: var(--surface-2); box-shadow: none;
}
.brand-perf-grid:not(.items-brand-grid) .meta-row {
  border: 0; padding: 0; margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.brand-perf-grid:not(.items-brand-grid) .meta-row strong { font-size: 13.5px; }
.brand-perf-grid:not(.items-brand-grid) .branch-metrics { display: contents; }
.brand-perf-grid:not(.items-brand-grid) .branch-metrics > div {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  border: 0; padding: 0;
}
.brand-perf-grid:not(.items-brand-grid) .branch-metrics span { font-size: 10.5px; font-weight: 500; }
.brand-perf-grid:not(.items-brand-grid) .branch-metrics strong { font-size: 13px; }

@media (max-width: 820px) {
  .brand-perf-grid:not(.items-brand-grid) .branch-card {
    grid-template-columns: 1fr 1fr; gap: 10px 18px; padding: 14px 18px;
  }
  .brand-perf-grid:not(.items-brand-grid) .meta-row {
    grid-column: 1 / -1; padding-bottom: 8px; border-bottom: 1px solid var(--line);
  }
}

/* ---------- Item Sales Reports ---------- */
.items-filter-bar { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.items-brand-grid { gap: 16px; }
.items-brand-card__cta {
  background: var(--primary-soft) !important; border: 0 !important;
  border-radius: 0 !important; border-bottom: 0 !important;
}
.items-brand-card__cta span, .items-brand-card__cta strong { color: var(--primary); }
.items-search-row { border-radius: 12px; }
.items-stock-badge { border-radius: var(--radius-pill); }
.items-cell--emph { color: var(--primary); font-weight: 800; }

/* ---------- Modals ---------- */
.modal-backdrop { background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(6px); }
.modal-card { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 28px; }

/* ---------- Empty state ---------- */
.empty-state { border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-2); }

/* ---------- Login (keep two-column, refresh surface) ---------- */
.login-shell--luxury, .login-shell { box-shadow: var(--shadow-lg); }
.login-submit, .login-submit--luxury { border-radius: 12px; }

/* ---------- Focus ring ---------- */
*:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 60%, transparent); outline-offset: 2px; }

/* ============================================================================
   DE-CROWD PASS — calmer, list/table-style presentation for dense sections
   (category comparison, forecast, top employees, root causes, branch performance)
   Design only: flattens "boxes-inside-panels" into clean scannable rows.
   ============================================================================ */

/* Category comparison (executive) — flat hairline-separated blocks, not boxes */
.bar-list { gap: 0; }
.bar-list > .card {
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.bar-list > .card:first-child { padding-top: 2px; }
.bar-list > .card:last-child { padding-bottom: 2px; border-bottom: 0; }
.bar-list > .card:hover { transform: none; box-shadow: none; }

/* Forecast / Top employees / Root causes — flat rows inside their panels */
.stack > .card {
  background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 3px 0;
}
.stack > .card:hover { transform: none; box-shadow: none; }

/* Branch performance (category pages) — table-like rows for the top group */
.focus-list--grid:not(.brand-perf-grid) {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
}
.focus-list--grid:not(.brand-perf-grid) .branch-card {
  display: grid;
  grid-template-columns: minmax(120px, 1.5fr) repeat(6, minmax(70px, 1fr));
  align-items: center; gap: 14px; padding: 12px 20px;
  border: 0; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--line);
}
.focus-list--grid:not(.brand-perf-grid) .branch-card:last-child { border-bottom: 0; }
.focus-list--grid:not(.brand-perf-grid) .branch-card::before { display: none; }
.focus-list--grid:not(.brand-perf-grid) .branch-card:hover {
  transform: none; background: var(--surface-2); box-shadow: none;
}
.focus-list--grid:not(.brand-perf-grid) .meta-row {
  border: 0; padding: 0; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.focus-list--grid:not(.brand-perf-grid) .meta-row strong { font-size: 13px; }
.focus-list--grid:not(.brand-perf-grid) .branch-metrics { display: contents; }
.focus-list--grid:not(.brand-perf-grid) .branch-metrics > div {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border: 0; padding: 0;
}
.focus-list--grid:not(.brand-perf-grid) .branch-metrics span { font-size: 10px; }
.focus-list--grid:not(.brand-perf-grid) .branch-metrics strong { font-size: 12.5px; }

@media (max-width: 900px) {
  .focus-list--grid:not(.brand-perf-grid) .branch-card { grid-template-columns: 1fr 1fr 1fr; gap: 10px 14px; }
  .focus-list--grid:not(.brand-perf-grid) .meta-row {
    grid-column: 1 / -1; padding-bottom: 8px; border-bottom: 1px solid var(--line);
  }
}

/* ============================================================================
   UNIFY ALL LIST SECTIONS → Brand-Performance table style (clean rows)
   Covers: Branch Performance (top + rest), Branch Ranking, Brand Contribution,
   and the Item Sales Reports brand grid. The surrounding .surface is the frame;
   lists are flush rows separated by hairlines. Design only — no data changes.
   ============================================================================ */

/* Brand Performance itself: flush inside its surface (single frame, matches others) */
.brand-perf-grid:not(.items-brand-grid) { border: 0; border-radius: 0; box-shadow: none; }

/* Containers → continuous vertical lists; unfurl the scroll rows into the table */
.focus-list--stack { display: flex; flex-direction: column; gap: 0; }
.focus-list--grid:not(.brand-perf-grid) { border: 0; border-radius: 0; }
.compact-scroll { margin: 0; }
.compact-scroll--horizontal .compact-scroll__track,
.compact-scroll--vertical .compact-scroll__track {
  display: flex; flex-direction: column; gap: 0;
  overflow: visible; max-height: none; padding: 0;
}
.compact-scroll__track::-webkit-scrollbar { display: none; }

/* Shared row skeleton for every list item card */
.focus-list--grid:not(.brand-perf-grid) > .branch-card,
.compact-scroll--horizontal .branch-card,
.focus-list--stack > .focus-card,
.compact-scroll--horizontal .focus-card,
.focus-list--stack > .card:not(.focus-card),
.compact-scroll--vertical .card,
.items-brand-grid > .items-brand-card {
  min-width: 0; flex: none; width: 100%;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--line);
}
.focus-list--grid:not(.brand-perf-grid) > .branch-card:hover,
.compact-scroll--horizontal .branch-card:hover,
.focus-list--stack > .focus-card:hover,
.compact-scroll--horizontal .focus-card:hover,
.focus-list--stack > .card:not(.focus-card):hover,
.compact-scroll--vertical .card:hover,
.items-brand-grid > .items-brand-card:hover {
  transform: none; box-shadow: none; background: var(--surface-2);
}
.focus-list--grid:not(.brand-perf-grid) > .branch-card::before,
.compact-scroll--horizontal .branch-card::before,
.items-brand-grid > .items-brand-card::before { display: none; }

/* Meta-row (name + pill) becomes the first, clean cell everywhere */
.focus-list--grid:not(.brand-perf-grid) .meta-row,
.compact-scroll--horizontal .branch-card .meta-row,
.focus-list--stack > .focus-card .meta-row,
.compact-scroll--horizontal .focus-card .meta-row,
.focus-list--stack > .card:not(.focus-card) .meta-row,
.compact-scroll--vertical .card .meta-row,
.items-brand-grid .meta-row {
  border: 0; padding: 0; margin: 0;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0;
}
.focus-list--grid:not(.brand-perf-grid) .meta-row strong,
.compact-scroll--horizontal .branch-card .meta-row strong,
.focus-list--stack .meta-row strong,
.compact-scroll .meta-row strong,
.items-brand-grid .meta-row strong { font-size: 13px; }

/* Metric wrappers spill into grid columns */
.focus-list--grid:not(.brand-perf-grid) .branch-metrics,
.compact-scroll--horizontal .branch-card .branch-metrics,
.focus-list--stack > .focus-card .brand-metrics,
.compact-scroll--horizontal .focus-card .brand-metrics,
.items-brand-grid .branch-metrics { display: contents; }
.focus-list--grid:not(.brand-perf-grid) .branch-metrics > div,
.compact-scroll--horizontal .branch-card .branch-metrics > div,
.focus-list--stack > .focus-card .brand-metrics > div,
.compact-scroll--horizontal .focus-card .brand-metrics > div,
.items-brand-grid .branch-metrics > div {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  border: 0; padding: 0; background: none; min-width: 0;
}
.focus-list--grid:not(.brand-perf-grid) .branch-metrics span,
.compact-scroll--horizontal .branch-card .branch-metrics span,
.focus-list--stack .brand-metrics span,
.compact-scroll .brand-metrics span,
.items-brand-grid .branch-metrics span { font-size: 10px; font-weight: 500; }
.focus-list--grid:not(.brand-perf-grid) .branch-metrics strong,
.compact-scroll--horizontal .branch-card .branch-metrics strong,
.focus-list--stack .brand-metrics strong,
.compact-scroll .brand-metrics strong,
.items-brand-grid .branch-metrics strong { font-size: 12.5px; }

/* Branch Performance rows — name + 6 metrics */
.focus-list--grid:not(.brand-perf-grid) > .branch-card,
.compact-scroll--horizontal .branch-card {
  display: grid; grid-template-columns: minmax(120px, 1.6fr) repeat(6, minmax(66px, 1fr));
  align-items: center; gap: 14px; padding: 12px 4px;
}

/* Brand Contribution rows — name + 3 metrics + full-width mini bar */
.focus-list--stack > .focus-card,
.compact-scroll--horizontal .focus-card {
  display: grid; grid-template-columns: minmax(140px, 1.7fr) repeat(3, minmax(80px, 1fr));
  align-items: center; gap: 14px; padding: 12px 4px;
}
.focus-list--stack > .focus-card .bar-track,
.compact-scroll--horizontal .focus-card .bar-track {
  grid-column: 1 / -1; height: 5px; margin-top: 6px;
}

/* Branch Ranking rows — simple name + achievement */
.focus-list--stack > .card:not(.focus-card),
.compact-scroll--vertical .card { padding: 14px 4px; }

/* Item Sales Reports brand grid — name + 4 cells (Sales, Qty, Items, CTA) */
.items-brand-grid { display: flex; flex-direction: column; gap: 0; }
.items-brand-grid > .items-brand-card {
  display: grid; grid-template-columns: minmax(140px, 1.7fr) repeat(4, minmax(72px, 1fr));
  align-items: center; gap: 14px; padding: 13px 6px; text-align: start;
}
.items-brand-grid .items-brand-card__cta {
  background: none !important; flex-direction: row !important; align-items: center; gap: 6px;
}
.items-brand-grid .items-brand-card__cta span,
.items-brand-grid .items-brand-card__cta strong { color: var(--primary); }

/* Responsive: collapse metric columns on small screens */
@media (max-width: 900px) {
  .focus-list--grid:not(.brand-perf-grid) > .branch-card,
  .compact-scroll--horizontal .branch-card,
  .focus-list--stack > .focus-card,
  .compact-scroll--horizontal .focus-card,
  .items-brand-grid > .items-brand-card {
    grid-template-columns: 1fr 1fr 1fr; gap: 10px 14px;
  }
  .focus-list--grid:not(.brand-perf-grid) .meta-row,
  .compact-scroll--horizontal .branch-card .meta-row,
  .focus-list--stack > .focus-card .meta-row,
  .compact-scroll--horizontal .focus-card .meta-row,
  .items-brand-grid .meta-row {
    grid-column: 1 / -1; padding-bottom: 8px; border-bottom: 1px solid var(--line);
  }
}

/* ============================================================================
   Stop panels stretching to the tallest column — each takes its own content
   height (removes the big empty white space under the shorter panels).
   ============================================================================ */
.grid-3, .grid-2 { align-items: start; }
/* Override the legacy `.surface { height: 100% }` so panels size to their content
   instead of stretching to the tallest column (kills the big empty white space). */
.grid-3 > .surface, .grid-2 > .surface { align-self: start; height: auto; }

/* ============================================================================
   Balanced two-column panel group — each column stacks its panels tightly
   (no holes between panels); the tallest panel is paired with the shortest so
   the columns end near the same height (no big empty area).
   ============================================================================ */
.panel-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.panel-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.panel-col > .surface { height: auto; width: 100%; }
@media (max-width: 900px) { .panel-cols { grid-template-columns: 1fr; } }

/* Branch dashboard section sub-headers */
.branch-subhead { margin-top: 22px; }

/* Branch Item Reports: back-to-branches row */
.branch-items-nav { display: flex; }

/* Item reports: header tools cluster (hint/tabs + export button) */
.items-header-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ============================================================================
   Executive: horizontal Category Comparison (3 columns side by side)
   + horizontal Exceptions row beneath it.
   ============================================================================ */
.bar-list--horizontal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
}
.bar-list--horizontal > .card {
  border-bottom: 0;
  border-inline-start: 1px solid var(--line);
  padding: 4px 24px;
}
.bar-list--horizontal > .card:first-child {
  border-inline-start: 0;
  padding-inline-start: 2px;
}
@media (max-width: 900px) {
  .bar-list--horizontal { grid-template-columns: 1fr; }
  .bar-list--horizontal > .card {
    border-inline-start: 0;
    border-bottom: 1px solid var(--line);
    padding: 16px 2px;
  }
  .bar-list--horizontal > .card:last-child { border-bottom: 0; }
}

.alerts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}

/* ============================================================================
   Total / Local / Foreign mini segmented control (in-section view switcher)
   ============================================================================ */
.segment-tabs--mini { padding: 3px; gap: 2px; }
.segment-tabs--mini .segment-tab { padding: 4px 12px; font-size: 11px; font-weight: 700; }
.origin-tabs-row { margin: 2px 0 12px; display: inline-flex; }
.origin-view-strip { display: flex; margin-bottom: -8px; }

/* ============================================================================
   Employee Visibility (executive) — redesigned: stacked full-width category
   blocks with clean tables + in-section Total/Local/Foreign switcher.
   ============================================================================ */
.exec-emp-block { margin-bottom: 22px; }
.exec-emp-block:last-child { margin-bottom: 0; }
.exec-emp-block__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.exec-emp-block .table-wrap { border-radius: var(--radius-md); }

/* ============================================================================
   Daily Sales (branch sub-page) — expandable brand-breakdown rows
   ============================================================================ */
.daily-expand-col { width: 46px; }
.daily-expand-btn { min-width: 34px; padding: 4px 0; font-size: 16px; line-height: 1; font-weight: 700; }
.daily-detail-row > td { background: var(--surface-2) !important; padding: 12px 18px; }
.daily-breakdown { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.daily-breakdown thead th {
  background: transparent; border-bottom: 1px solid var(--line-strong);
  padding: 8px 12px; font-size: 10.5px;
}
.daily-breakdown tbody td { padding: 8px 12px; border-bottom: 1px solid var(--line); background: transparent !important; }
.daily-breakdown tbody tr:last-child td { border-bottom: 0; }

/* ============================================================================
   NEW ITEMS table — compact fit: all 12 columns visible without horizontal
   scrolling on desktop widths.
   ============================================================================ */
.new-items-wrap { overflow-x: auto; }
.new-items-table { min-width: 0; width: 100%; table-layout: auto; font-size: 11.5px; }
.new-items-table thead th {
  padding: 9px 7px; font-size: 9.5px; letter-spacing: 0;
  white-space: normal; line-height: 1.3;
}
.new-items-table tbody td { padding: 8px 7px; white-space: nowrap; }
.new-items-table tbody td:nth-child(3) { white-space: normal; min-width: 120px; line-height: 1.35; }
.new-items-table .items-mono { font-size: 10.5px; }
.new-items-table .tag { padding: 2px 8px; font-size: 10px; }

/* NEW ITEMS: 13th column (Sell Through) — slightly tighter cells to keep the
   whole table visible without horizontal scroll. */
.new-items-table thead th { padding: 9px 5px; }
.new-items-table tbody td { padding: 8px 5px; }
.new-items-table .achievement { padding: 2px 8px; font-size: 10.5px; }

/* ============================================================================
   BRAND PERFORMANCE: 5th metric column (Daily Required) + STOCK PAGE styles
   ============================================================================ */
.brand-perf-grid:not(.items-brand-grid) .branch-card {
  grid-template-columns: minmax(140px, 1.5fr) repeat(5, minmax(78px, 1fr));
  gap: 14px;
}

/* Stock page table reuses the new-items compact table skeleton */
.stock-table-wrap { overflow-x: auto; }
.stock-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.stock-table thead th {
  text-align: start; padding: 9px 7px; font-size: 10.5px; font-weight: 700;
  color: var(--text-3); text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.stock-table tbody td {
  padding: 8px 7px; border-bottom: 1px solid var(--line); vertical-align: middle;
}
.stock-table tbody tr:last-child td { border-bottom: 0; }
.stock-table tbody tr:hover { background: var(--surface-2); }
.stock-table .muted-cell { color: var(--text-3); font-size: 11px; }
.stock-status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.stock-status--in { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.stock-status--low { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
.stock-status--out { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.stock-search-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.stock-search-row input[type="search"] {
  flex: 1; min-width: 240px; height: 42px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  font-family: inherit; font-size: 13px; color: var(--text-1);
}
.stock-search-row input[type="search"]:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }

/* Multi-select (checkbox) filters — matches .filter-group select styling */
.ms-group { position: relative; }
.ms-toggle {
  width: 100%; min-width: 0; padding: 11px 14px;
  border: 1px solid var(--line-strong, #dbe3ef); border-radius: 12px;
  background: var(--input-bg, var(--surface, #fff)); color: var(--text);
  font: inherit; cursor: pointer; text-align: start;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ms-toggle:hover { border-color: var(--primary, #d61f5c); }
.ms-toggle-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-caret { color: var(--text-3, #94a3b8); font-size: 11px; flex: none; }
.ms-open .ms-caret { transform: rotate(180deg); }
.ms-panel {
  position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 80;
  min-width: 100%; width: max-content; max-width: 320px;
  background: var(--surface, #fff); border: 1px solid var(--line, #dbe3ef);
  border-radius: 14px; box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
  padding: 10px;
}
.ms-search {
  width: 100%; padding: 8px 12px; margin-bottom: 8px;
  border: 1px solid var(--line, #dbe3ef); border-radius: 10px;
  background: var(--surface-2, #f8fafc); color: var(--text); font: inherit; font-size: 12.5px;
}
.ms-search:focus { outline: 2px solid var(--primary-soft, rgba(214, 31, 92, 0.2)); border-color: var(--primary, #d61f5c); }
.ms-actions { display: flex; gap: 8px; margin-bottom: 8px; }
.ms-actions button {
  flex: 1; padding: 6px 10px; border: 1px solid var(--line, #dbe3ef); border-radius: 9px;
  background: var(--surface-2, #f8fafc); color: var(--text-2, inherit);
  font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.ms-actions button:hover { border-color: var(--primary, #d61f5c); color: var(--primary, #d61f5c); }
.ms-options { max-height: 520px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; scrollbar-width: thin; scrollbar-color: var(--primary, #d61f5c) transparent; }
.ms-options::-webkit-scrollbar { width: 10px; }
.ms-options::-webkit-scrollbar-thumb { background: var(--primary, #d61f5c); border-radius: 6px; }
.ms-options::-webkit-scrollbar-track { background: rgba(214,31,92,0.12); border-radius: 6px; }
.ms-option {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px;
  border-radius: 9px; cursor: pointer; font-size: 12.8px; color: var(--text);
}
.ms-option:hover { background: var(--surface-2, rgba(15, 23, 42, 0.05)); }
.ms-option input[type="checkbox"] { accent-color: var(--primary, #d61f5c); width: 15px; height: 15px; flex: none; }
.ms-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[dir="rtl"] .ms-toggle { text-align: right; }

/* The checkbox popover must escape the surface's overflow:hidden clipping,
   and the whole filter bar must stack above the sections below it. */
.surface:has(.ms-group) {
  overflow: visible;
  position: relative;
  z-index: 40;
}
.surface:has(.ms-open) { z-index: 90; }

/* ABC analysis — class colors: A green, B orange, C red */
.abc-kpi { border-inline-start: 5px solid transparent; }
.abc-kpi--a { border-inline-start-color: var(--success, #1e9e57); background: color-mix(in srgb, var(--success, #1e9e57) 7%, var(--surface, #fff)); }
.abc-kpi--b { border-inline-start-color: var(--warning, #e08a00); background: color-mix(in srgb, var(--warning, #e08a00) 8%, var(--surface, #fff)); }
.abc-kpi--c { border-inline-start-color: var(--danger, #d23c3c); background: color-mix(in srgb, var(--danger, #d23c3c) 7%, var(--surface, #fff)); }
.abc-kpi--a .kpi-value { color: var(--success, #1e9e57); }
.abc-kpi--b .kpi-value { color: var(--warning, #e08a00); }
.abc-kpi--c .kpi-value { color: var(--danger, #d23c3c); }
.abc-table tbody tr.abc-row--a td { background: color-mix(in srgb, var(--success, #1e9e57) 5%, transparent); }
.abc-table tbody tr.abc-row--b td { background: color-mix(in srgb, var(--warning, #e08a00) 6%, transparent); }
.abc-table tbody tr.abc-row--c td { background: color-mix(in srgb, var(--danger, #d23c3c) 5%, transparent); }
.abc-table tbody tr.abc-row--a:hover td,
.abc-table tbody tr.abc-row--b:hover td,
.abc-table tbody tr.abc-row--c:hover td { filter: brightness(0.97); }

/* Higher specificity so the class tint beats the generic .card background */
.grid-4 .card.abc-kpi--a, .card.abc-kpi.abc-kpi--a { background: color-mix(in srgb, #1e9e57 8%, var(--surface, #ffffff)); }
.grid-4 .card.abc-kpi--b, .card.abc-kpi.abc-kpi--b { background: color-mix(in srgb, #e08a00 9%, var(--surface, #ffffff)); }
.grid-4 .card.abc-kpi--c, .card.abc-kpi.abc-kpi--c { background: color-mix(in srgb, #d23c3c 8%, var(--surface, #ffffff)); }

/* Monthly vs YTD view badge next to the month select */
.view-mode-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
  background: color-mix(in srgb, #2f6fd6 10%, transparent);
  color: #2f6fd6; border: 1px solid color-mix(in srgb, #2f6fd6 25%, transparent);
}
.view-mode-badge--ytd {
  background: color-mix(in srgb, #1e9e57 10%, transparent);
  color: #1e9e57; border-color: color-mix(in srgb, #1e9e57 28%, transparent);
}

/* KPI card note line (the small text right under the big value) — red */
.card .kpi-value + .muted { color: var(--danger, #c01624); }

/* Refresh button in the top utility bar */
.refresh-button { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.refresh-button .refresh-icon { font-size: 15px; line-height: 1; display: inline-block; }
.refresh-button.is-busy { opacity: .7; cursor: progress; }
.refresh-button.is-busy .refresh-icon { animation: refresh-spin 1s linear infinite; }
@keyframes refresh-spin { to { transform: rotate(360deg); } }

/* Brand rows: the OTHER bucket is a group total, visually distinct */
.branch-card--bucket { border-style: dashed; }
.bucket-note { font-size: 10.5px; line-height: 1.35; margin: -2px 0 6px; }

/* Collapse / expand toggle next to a section title */
.section-toggle {
  min-width: 30px; padding: 2px 0; font-size: 16px; line-height: 1;
  font-weight: 700; margin-inline-end: 8px; flex: none;
}

/* Sticky table headers — Stock, New Items and ABC only */
.stock-table-wrap, .new-items-wrap { max-height: 70vh; overflow: auto; }
.stock-table thead th,
.new-items-table thead th {
  position: sticky; top: 0; z-index: 5;
  background: var(--surface, #ffffff);
  box-shadow: inset 0 -1px 0 var(--line, #dbe3ef);
}

/* Shared table pagination */
.table-pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 12px 2px 2px; margin-top: 4px;
  border-top: 1px solid var(--line, #dbe3ef);
}
.pager-info { font-size: 12px; color: var(--text-3, #94a3b8); }
.pager-page-info { margin-inline-start: 4px; }
.pager-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pager-btn {
  min-width: 34px; padding: 6px 10px; border: 1px solid var(--line, #dbe3ef);
  border-radius: 9px; background: var(--surface, #fff); color: var(--text);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.pager-btn:hover:not(:disabled) { border-color: var(--primary, #d61f5c); color: var(--primary, #d61f5c); }
.pager-btn.active {
  background: var(--primary, #d61f5c); border-color: var(--primary, #d61f5c); color: #fff;
}
.pager-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Up-To-Date KPI tones + clickable Returns card (2026-08-04) ---------- */
.kpi-value--good { color: var(--good, #1d9e6f); }
.kpi-value--warn { color: var(--warn, #b8860b); }
.kpi-value--risk { color: var(--risk, #c01624); }
.kpi-card--link { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.kpi-card--link:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.10); }
.kpi-card--link:focus-visible { outline: 2px solid var(--primary, #c01624); outline-offset: 2px; }

/* ============================================================
   MOBILE LAYER — 2026-08-05
   Phone-width fixes (<=640px). Tables keep horizontal scroll;
   toolbars wrap instead of overflowing the viewport.
   ============================================================ */
@media (max-width: 640px) {
  /* Top strip: month picker + view badge + days-remaining used to sit on one
     unwrappable line and push the page to ~550px wide. */
  .standalone-topbar,
  .topbar-utility {
    flex-wrap: wrap;
    row-gap: 8px;
    max-width: 100%;
  }
  .month-pill,
  .month-pill--select {
    flex-wrap: wrap;
    max-width: 100%;
    row-gap: 4px;
  }
  .month-pill--select select {
    max-width: calc(100vw - 96px);
  }
  .view-mode-badge {
    white-space: normal;
    font-size: 11px;
    line-height: 1.35;
  }
  .month-pill small { white-space: nowrap; }

  /* Admin shortcut floated off-screen on phones. */
  .floating-admin-button {
    left: auto !important;
    right: 14px !important;
  }

  /* Dashboard sub-page buttons (Item Reports / Stock / ABC / ...) */
  .topbar-left {
    flex-wrap: wrap;
    row-gap: 8px;
    max-width: 100%;
  }
  .items-link-button { flex: 0 1 auto; }

  /* Filter popovers must never exceed the phone width. */
  .ms-panel {
    max-width: calc(100vw - 28px);
    min-width: 0;
  }

  /* Shells breathe a bit less on phones. */
  .main-shell,
  .standalone-shell { padding: 12px; }
  .surface { padding: 14px; }

  /* Hero rows (title + image) stack. */
  .hero,
  .dashboard-hero,
  .hero-flex,
  .surface-header {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  /* Every data table scrolls inside its own wrapper — never the page. */
  .table-wrap,
  .stock-table-wrap,
  .new-items-wrap,
  .items-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .table-wrap table,
  .stock-table-wrap table { min-width: 640px; }

  /* Category comparison + top-3 stacks. */
  .bar-list--horizontal { grid-template-columns: 1fr; }
  .alerts-row { grid-template-columns: 1fr; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }

  /* KPI numbers a notch smaller so long JOD values never clip. */
  .kpi-value { font-size: 22px; }

  /* Login: single column card, products hidden. */
  .login-shell { grid-template-columns: 1fr; }
  .login-hero-panel { min-height: 0; }
  .login-products { display: none; }
  .login-card { padding: 22px 18px; }

  /* Segment tabs / origin toggles wrap. */
  .segment-tabs { flex-wrap: wrap; }

  /* Admin table on phones: let it scroll. */
  .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 420px) {
  .month-pill--select select { max-width: calc(100vw - 72px); }
  .kpi-value { font-size: 20px; }
  .hero h1, .hero h2 { font-size: 20px; }
}