:root {
    color-scheme: dark;
    --viewport-height: 100svh;
    --page-bg: #050b19;
    --bg-color: rgba(255, 255, 255, 0.15);
    --highlight: rgba(255, 255, 255, 0.6);
    --text: #ffffff;
    /* Alias the newer sheets (tasks/automation/badges) already consume. It is
       declared only here: var() resolves it against whichever --text the active
       theme and brand skin win with, so it stays correct in both themes. */
    --text-primary: var(--text);
    --text-muted: rgba(248, 250, 252, 0.72);
    --input-bg: rgba(255, 255, 255, 0.1);
    --input-border: rgba(255, 255, 255, 0.2);
    --input-focus: rgba(255, 255, 255, 0.25);
    /* An OPAQUE surface for anything a native <select> popup paints on.
       A browser renders that popup in its own window and composites a
       translucent colour against the *popup's* backdrop (white), not against
       the page — which is how a dark-theme dropdown ends up with light text on
       a light background. Every colour a popup can touch is therefore solid. */
    --select-surface: #121212;
    --select-surface-hover: #3f3f46;
    --select-text: #ffffff;
    --select-text-disabled: #9aa5b8;
    --option-bg: rgba(18, 18, 18, 0.95);
    --option-hover-bg: rgba(63, 63, 70, 0.95);
    --option-text: #ffffff;
    /* Option states used by autocomplete dropdowns (product/customer pickers). */
    --option-muted: rgba(248, 250, 252, 0.68);
    --option-border: rgba(255, 255, 255, 0.12);
    --option-active-bg: #2563eb;
    --option-active-text: #ffffff;
    --option-surface-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.75);
    --goal-ahead: rgba(52, 211, 153, 0.85);
    --goal-ontrack: rgba(56, 189, 248, 0.9);
    --goal-risk: rgba(249, 115, 22, 0.9);
}

@supports (height: 100dvh) {
    :root {
        --viewport-height: 100dvh;
    }
}

html[data-theme="light"] {
    color-scheme: light;
    --page-bg: #f4f7fb;
    --bg-color: rgba(255, 255, 255, 0.15);
    --highlight: rgba(255, 255, 255, 0.6);
    --text: #0f172a;
    --text-muted: rgba(15, 23, 42, 0.62);
    --input-bg: rgba(255, 255, 255, 0.1);
    --input-border: rgba(255, 255, 255, 0.2);
    --input-focus: rgba(255, 255, 255, 0.25);
    --select-surface: #ffffff;
    --select-surface-hover: #eef2f7;
    --select-text: #0f172a;
    --select-text-disabled: #5b6577;
    --option-bg: #ffffff;
    --option-hover-bg: #eef2f7;
    --option-text: #0f172a;
    --option-muted: #55607a;
    --option-border: #e2e8f0;
    --option-active-bg: #2563eb;
    --option-active-text: #ffffff;
    --option-surface-shadow: 0 14px 34px -18px rgba(15, 23, 42, 0.35);
    --goal-ahead: rgba(5, 150, 105, 0.85);
    --goal-ontrack: rgba(14, 165, 233, 0.88);
    --goal-risk: rgba(234, 88, 12, 0.88);
}

/* --- native <select> and its popup ---------------------------------------
   The floor, not the design. A bare type selector loses to every class-based
   rule a page writes, so this only supplies colours to a <select> nobody
   styled — and, crucially, it supplies an OPAQUE pair, because the popup is
   painted in a separate window that cannot composite `rgba()` against the
   page behind it. That is the whole reason a dropdown could come out light-on-
   light while the closed control looked correct. */
select {
    background-color: var(--select-surface);
    color: var(--select-text);
}

select option,
select optgroup {
    background-color: var(--select-surface);
    color: var(--select-text);
}

select option:checked,
select option:focus,
select option:hover {
    background-color: var(--select-surface-hover);
    color: var(--select-text);
}

select option:disabled,
select:disabled,
select option[disabled] {
    color: var(--select-text-disabled);
}

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

/* body {
    font-family: 'Vazirmatn', sans-serif;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: var(--text);
    background-image: url('https://cdn.nody.ir/files/2021/09/10/nody-%D8%B9%DA%A9%D8%B3-%D9%85%D8%A7%D9%87-%D8%AF%D8%B1-%D8%B4%D8%A8-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%BE%D8%B1%D9%88%D9%81%D8%A7%DB%8C%D9%84-1631253745.jpg'); */
    /* background-image: url('https://img2.taw-bio.ir/2025/310618/1l2f3n7i.jpeg'); */
    /* background-image: url('https://img2.taw-bio.ir/2025/333550/1l6g371o.jpeg'); */
    /* background-image: url('https://cdn.nody.ir/files/2021/09/10/nody-%D8%B9%DA%A9%D8%B3-%D9%85%D8%A7%D9%87-%D9%88-%D8%AF%D8%AE%D8%AA%D8%B1-%D8%AA%D9%86%D9%87%D8%A7-1631253734.jpg'); */
    /* background-image: url('https://cdn.nody.ir/files/2021/09/14/nody-%D8%AF%D8%A7%D9%86%D9%84%D9%88%D8%AF-%D8%B9%DA%A9%D8%B3-%D8%AF%D8%B1%DB%8C%D8%A7-%D8%A8%D8%A7-%DA%A9%DB%8C%D9%81%DB%8C%D8%AA-full-hd-1631604980.jpg'); */
    /* background-image: url('https://cdn.nody.ir/files/2021/09/14/nody-%D8%B9%DA%A9%D8%B3-%D8%AF%D8%B1%DB%8C%D8%A7-%D8%AA%D8%A7%D8%B1%DB%8C%DA%A9-1631604978.jpg'); */
    /* background-image: url('https://cdn.nody.ir/files/2021/09/07/nody-%D8%B9%DA%A9%D8%B3-%D8%A7%D9%82%DB%8C%D8%A7%D9%86%D9%88%D8%B3-%D8%AF%D8%B1-%D8%B4%D8%A8-1630992039.png'); */
    /* background-image: url('https://media.ettelaat.com/d/2025/04/05/4/282441.jpg'); */
    /* background-image: url('https://photo.nagsh.ir/wp-content/uploads/2021/08/25a0e48840d20d475dd4c8f472d20e77.jpg'); */

/* background-size: 100% auto;
background-repeat: no-repeat;
background-position: center;
    background-position: center 0%;
    animation: pan-image 40s linear infinite;
} */


/* ==== Landing-like Animated, Sharper Multi-Bubble Background ==== */
/* ===== Desktop = photo + dark overlay | Mobile = animated bubbles ===== */

:root{
  /* برای موبایل */
  --bubble-shift: 60px;
  --bubble-duration: 28s;
}

/* --- Desktop/Laptop default: keep photo --- */
body{
  font-family: 'Vazirmatn', sans-serif;
  margin: 0; padding: 0;
  color: var(--text, #fff);
  min-height: var(--viewport-height);
  overflow-x: hidden;
  background-color: var(--page-bg);
  position: relative;
}

html[data-theme="dark"] body{
  background-image: none;
}

html[data-theme="dark"] body::before,
html[data-theme="light"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  transform: translateZ(0);
}

html[data-theme="dark"] body::before {
  background-image: url('../img/b.webp');
}

/* روکش ملایم روی عکس */
html[data-theme="dark"] body::after{
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(120% 120% at 50% 30%, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.72) 70%);
  pointer-events: none;
}

html[data-theme="light"] body{
  background-image: none;
  background-color: var(--page-bg);
}

html[data-theme="light"] body::before {
  background-image: url('../img/w.webp');
}

html[data-theme="light"] body::after{
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(120% 120% at 50% 30%, rgba(255,255,255,0.72) 0%, rgba(244,247,251,0.65) 55%, rgba(255,255,255,0.4) 100%);
  pointer-events: none;
}


/* --- Mobile override: no photo, animated colorful bubbles --- */
/* @media (max-width: 768px){
  body{
    background: linear-gradient(180deg, #0b1220 0%, #0a1b2e 50%, #0a223a 100%);
  }
  body::after{ display: none; }

  body::before{
    content: "";
    position: fixed; inset: 0; z-index: -1;
    background-image:
      radial-gradient(1200px 600px at 80% -100%, rgba(42,138,246,0.85) 0, rgba(42,138,246,0) 60%),
      radial-gradient(720px 420px at -10% -10%, rgba(24,204,171,0.78) 0, rgba(24,204,171,0) 58%),
      radial-gradient(740px 420px at 110% 110%, rgba(99,68,245,0.70) 0, rgba(99,68,245,0) 58%),
      radial-gradient(460px 260px at 92% 35%, rgba(76,201,240,0.48) 0, rgba(76,201,240,0) 62%),
      radial-gradient(460px 260px at 15% 45%, rgba(255,99,156,0.42) 0, rgba(255,99,156,0) 64%),
      radial-gradient(420px 240px at 8% 82%, rgba(165,214,82,0.40) 0, rgba(165,214,82,0) 62%),
      radial-gradient(400px 240px at 88% 78%, rgba(255,193,7,0.38) 0, rgba(255,193,7,0) 62%),
      radial-gradient(380px 220px at 55% 18%, rgba(156,39,176,0.38) 0, rgba(156,39,176,0) 62%),
      radial-gradient(340px 200px at 50% 55%, rgba(29,233,182,0.34) 0, rgba(29,233,182,0) 66%);
    background-repeat: no-repeat;
    background-position:
      80% -100%, -10% -10%, 110% 110%, 92% 35%, 15% 45%, 8% 82%, 88% 78%, 55% 18%, 50% 55%;
    animation: floatBubbles var(--bubble-duration) ease-in-out infinite alternate;
    will-change: background-position;
  }

  :root{
    --bubble-shift: 36px;    
    --bubble-duration: 22s;
  }
} */

/* انیمیشن شناوری حباب‌ها (برای موبایل) */
@keyframes floatBubbles{
  0%{
    background-position:
      calc(80% - var(--bubble-shift)) calc(-100% + var(--bubble-shift)),
      calc(-10% + var(--bubble-shift)/2) calc(-10% + var(--bubble-shift)/3),
      calc(110% - var(--bubble-shift)/2) calc(110% - var(--bubble-shift)/3),
      calc(92% - var(--bubble-shift)/3)  calc(35% + var(--bubble-shift)/2),
      calc(15% + var(--bubble-shift)/4)  calc(45% - var(--bubble-shift)/4),
      calc(8%  + var(--bubble-shift)/5)  calc(82% - var(--bubble-shift)/3),
      calc(88% - var(--bubble-shift)/3)  calc(78% + var(--bubble-shift)/4),
      calc(55% + var(--bubble-shift)/6)  calc(18% - var(--bubble-shift)/6),
      calc(50% - var(--bubble-shift)/8)  calc(55% + var(--bubble-shift)/8);
  }
  100%{
    background-position:
      calc(80% + var(--bubble-shift)) calc(-100% - var(--bubble-shift)),
      calc(-10% - var(--bubble-shift)/2) calc(-10% - var(--bubble-shift)/3),
      calc(110% + var(--bubble-shift)/2) calc(110% + var(--bubble-shift)/3),
      calc(92% + var(--bubble-shift)/3)  calc(35% - var(--bubble-shift)/2),
      calc(15% - var(--bubble-shift)/4)  calc(45% + var(--bubble-shift)/4),
      calc(8%  - var(--bubble-shift)/5)  calc(82% + var(--bubble-shift)/3),
      calc(88% + var(--bubble-shift)/3)  calc(78% - var(--bubble-shift)/4),
      calc(55% - var(--bubble-shift)/6)  calc(18% + var(--bubble-shift)/6),
      calc(50% + var(--bubble-shift)/8)  calc(55% - var(--bubble-shift)/8);
  }
}

/* احترام به کاهش موشن سیستم */
@media (prefers-reduced-motion: reduce){
  body::before{ animation: none !important; }
}



@keyframes pan-image {
    0% { background-position: center 0%; }
    50% { background-position: center 100%; }
    100% { background-position: center 0%; }
}

.glass-form-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: var(--viewport-height);
    padding: 20px;
    box-sizing: border-box;
}

.glass-form {
    width: min(100%, 420px);
}

.glass-filter,
.glass-overlay,
.glass-specular {
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.glass-filter {
    z-index: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    filter: url(#glass-distortion) saturate(120%) brightness(1.15);
}

.glass-overlay {
    z-index: 2;
    background: var(--bg-color);
}

.glass-specular {
    z-index: 3;
    box-shadow: inset 1px 1px 1px var(--highlight);
    background: none;
    transition: background 0.5s ease;
}

.glass-content {
    position: relative;
    z-index: 4;
    padding: 40px;
    color: var(--text);
}

.form-container h3 {
    margin: 0 0 25px 0;
    font-size: 26px;
    font-weight: 600;
    text-align: center;
}

.auth-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 18px;
}

.auth-switch-btn {
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(15, 23, 42, 0.35);
    color: var(--text);
    border-radius: 10px;
    padding: 10px 12px;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0;
}

.auth-switch-btn.is-active {
    border-color: rgba(56, 189, 248, 0.8);
    background: linear-gradient(120deg, rgba(14, 116, 144, 0.55), rgba(37, 99, 235, 0.48));
    box-shadow: 0 8px 20px rgba(14, 116, 144, 0.3);
}

.auth-panel h3 {
    margin-bottom: 18px;
    font-size: 22px;
}

html[data-theme="light"] .auth-switch-btn {
    background: rgba(255, 255, 255, 0.75);
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.18);
}

html[data-theme="light"] .auth-switch-btn.is-active {
    color: #0c4a6e;
    background: linear-gradient(120deg, rgba(186, 230, 253, 0.9), rgba(191, 219, 254, 0.86));
    border-color: rgba(14, 116, 144, 0.45);
}

.form-group {
    position: relative;
    margin-bottom: 20px;
}

.form-group i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text);
    opacity: 0.8;
}

.form-group input {
    width: 100%;
    padding: 12px 45px 12px 15px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 10px;
    color: var(--text);
    font-size: 16px;
    font-family: 'Vazirmatn', sans-serif;
    transition: border-color 0.3s ease, background 0.3s ease;
    box-sizing: border-box;
}

.form-group input:focus {
    outline: none;
    background: var(--input-focus);
    border-color: var(--highlight);
}

.form-group input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

button[type="submit"] {
    width: 100%;
    padding: 12px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    color: var(--text);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px; /* فاصله بیشتر */
    font-family: 'Vazirmatn';
}

button[type="submit"]:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.4);
}

.auth-help-text {
    margin-top: -6px;
    margin-bottom: 14px;
    color: rgba(226, 232, 240, 0.88);
    font-size: 0.9rem;
    line-height: 1.7;
    text-align: right;
}

.error-display {
    color: #ffb8b8;
    background-color: rgba(255, 50, 50, 0.2);
    border: 1px solid rgba(255, 82, 82, 0.5);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    display: none;
    text-align: center;
}

/* NOTE: there is deliberately no ".auth-brand-redirect" rule here any more.
   The login form used to render a "sign in on <other brand>'s panel" link after
   a cross-brand attempt, which told anyone with a phone number which product
   the account belongs to. Sign-in now has exactly one failure message and no
   redirect, so the element it styled no longer exists. */


.forgot-password-link,
.forgot-back-link {
    display: inline-flex;
    margin-top: 12px;
    color: #7dd3fc;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
}

.forgot-password-help {
    margin: -8px 0 14px;
    color: rgba(226, 232, 240, 0.82);
    font-size: 0.92rem;
    line-height: 1.8;
}

#forgot-send-code-btn,
#forgot-submit-btn {
    width: 100%;
    padding: 12px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

#forgot-send-code-btn:hover,
#forgot-submit-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}













/* --- استایل‌های جدید برای داشبورد --- */

/* --- استایل‌های جدید برای داشبورد و افکت شیشه‌ای عمومی --- */

.main-layout {
    display: flex;
    height: 100vh;
}

/* کلاس عمومی برای تمام کارت‌های شیشه‌ای */
.glass-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

.glass-card > .glass-filter,
.glass-card > .glass-overlay,
.glass-card > .glass-specular {
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.glass-card > .glass-filter {
    z-index: 1;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    filter: url(#glass-distortion) saturate(120%) brightness(1.1);
}

.glass-card > .glass-overlay {
    z-index: 2;
    background: rgba(255, 255, 255, 0.08);
}

.glass-card > .glass-specular {
    z-index: 3;
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.4);
    background: none;
    transition: background 0.5s ease;
}

.glass-card > .glass-content {
    position: relative;
    z-index: 4;
    height: 100%;
    box-sizing: border-box;
}

/* استایل سایدبار */
.sidebar {
    width: 260px;
    flex-shrink: 0;
}
/* .sidebar.glass-card {
    background: rgba(19, 28, 56, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.sidebar.glass-card > .glass-overlay {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.05) 55%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%);
}
.sidebar.glass-card > .glass-specular {
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0) 70%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.25),
        inset 0 12px 22px rgba(255, 255, 255, 0.12);
} */
.sidebar .glass-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
}


.theme-switcher {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    padding: 10px 18px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(12, 20, 40, 0.3);
    backdrop-filter: blur(8px);
}

.theme-toggle {
    position: relative;
    width: 54px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}


.theme-toggle-track {
    position: absolute;
    inset: 0;
    direction: ltr;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 8px;
    transition: background 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
}

.theme-toggle-thumb {
    position: absolute;
    top: 3px;
    inset-inline-start: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(10, 17, 35, 0.92);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.theme-toggle-thumb i {
    position: absolute;
    font-size: 12px;
    color: #f8fafc;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.theme-toggle-thumb .fa-sun {
    color: #facc15;
    opacity: 0;
    transform: scale(0.6);
}

.theme-toggle-thumb .fa-moon {
    color: #e0f2fe;
}

.theme-toggle-glyph {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    opacity: 0.45;
    color: #f8fafc;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.theme-toggle-glyph--moon {
    margin-inline-end: auto;
}

.theme-toggle-glyph--sun {
    margin-inline-start: auto;
}

.theme-toggle input:checked + .theme-toggle-track {
    background: rgba(99, 102, 241, 0.75);
    border-color: rgba(129, 140, 248, 0.9);
}

/* کمپین - ابزارها */
.campaign-tools-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.campaign-tools-page .hero {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.14), rgba(14, 165, 233, 0.18));
    border-radius: 22px;
    padding: 24px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.campaign-tools-page .hero .eyebrow {
    font-size: 12px;
    letter-spacing: 0.6px;
    color: var(--muted, #9ca3af);
    margin: 0 0 4px;
}

.campaign-tools-page .hero h1 {
    margin: 0 0 6px;
}

.campaign-tools-page .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.campaign-tools-page .btn-ghost {
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: inherit;
    background: transparent;
    border-radius: 14px;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.campaign-tools-page .hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    min-width: 220px;
}

.campaign-tools-page .stat-chip {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.campaign-tools-page .stat-chip span {
    color: var(--muted, #9ca3af);
    font-size: 12px;
}

.campaign-tools-page .stat-chip strong {
    font-size: 20px;
}

.tool-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 18px;
    align-items: start;
}

.tool-library-header,
.tool-list-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.tool-library-grid,
.tools-grid {
    display: grid;
    gap: 14px;
}

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

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

.tool-card .glass-content,
.library-card {
    position: relative;
    border-radius: 18px;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.12));
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 16px;
    min-height: 150px;
}

.library-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    cursor: default;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.library-card.is-actionable {
    cursor: pointer;
}

.library-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.library-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.08);
    color: #fcd34d;
}

.library-body h4 {
    margin: 0 0 6px;
}

.library-body p {
    margin: 0;
    color: var(--muted, #9ca3af);
}

.tool-card .tool-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.tool-card .status-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.16);
    color: #10b981;
    font-size: 12px;
}

.tool-card .status-inactive {
    background: rgba(248, 180, 0, 0.12);
    color: #fbbf24;
}

.tool-card-meta {
    list-style: none;
    padding: 0;
    margin: 12px 0;
    display: grid;
    gap: 6px;
}

.tool-card-meta li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted, #9ca3af);
}

.tool-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.tools-grid.has-items {
    margin-top: 4px;
}

.theme-toggle input:checked + .theme-toggle-track .theme-toggle-thumb {
    transform: translateX(24px);
    background: #f8fafc;
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35);
}

.theme-toggle input:checked + .theme-toggle-track .theme-toggle-thumb .fa-sun {
    opacity: 1;
    transform: scale(1);
}

.theme-toggle input:checked + .theme-toggle-track .theme-toggle-thumb .fa-moon {
    opacity: 0;
    transform: scale(0.6);
}

.theme-toggle input:checked + .theme-toggle-track .theme-toggle-glyph--moon {
    opacity: 0.25;
}

.theme-toggle input:checked + .theme-toggle-track .theme-toggle-glyph--sun {
    opacity: 0.85;
}

html[data-theme="light"] .theme-switcher {
    border-color: rgba(15, 23, 42, 0.18);
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .theme-toggle-track {
    background: rgba(15, 23, 42, 0.12);
    border-color: rgba(15, 23, 42, 0.22);
}

html[data-theme="light"] .theme-toggle-glyph {
    color: rgba(15, 23, 42, 0.75);
}

html[data-theme="light"] .theme-toggle input:checked + .theme-toggle-track {
    background: rgba(79, 70, 229, 0.75);
    border-color: rgba(79, 70, 229, 0.85);
}

html[data-theme="light"] .theme-toggle-thumb {
    background: rgba(15, 23, 42, 0.92);
}

html[data-theme="light"] .theme-toggle input:checked + .theme-toggle-track .theme-toggle-thumb {
    background: #f8fafc;
}

html[data-theme="light"] .theme-toggle-thumb .fa-moon {
    color: #f1f5f9;
}

html[data-theme="light"] .theme-toggle-thumb .fa-sun {
    color: #f59e0b;
}

/* ... بقیه استایل‌های سایدبار (بدون تغییر) ... */
/* The brand block is centred in the sidebar, not pushed to the inline start.
   `justify-content: center` is what does it for an image lock-up (Nila); the
   `margin-inline: auto` + `text-align` on the heading covers the text wordmark
   (Darya) whether or not it is the only child. `space-between` used to be here
   and only looked centred because the heading happened to be alone. */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.sidebar-header h2 {
    margin: 0 auto;
    font-size: 24px;
    color: #fff;
    text-align: center;
}
.sidebar-header > img {
    margin-inline: auto;
}
.sidebar-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sidebar-header-actions > * {
    flex-shrink: 0;
}

.sidebar-utilities {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.sidebar-utilities .theme-switcher {
    margin: 0;
}

.sidebar-utilities .theme-toggle {
    justify-content: center;
}

.sidebar-alert {
    position: relative;
}
.sidebar-alert[hidden] {
    display: none !important;
}
.sidebar-alert-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(15, 23, 42, 0.26);
    color: #fff;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.22);
}
.sidebar-alert-button:hover,
.sidebar-alert-button:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(148, 163, 184, 0.2);
    outline: none;
}
.sidebar-alert-button .bell-icon {
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4em;
    height: 1.4em;
    transform-origin: center top;
}

@keyframes sidebar-bell-wiggle {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(-10deg); }
    40% { transform: rotate(8deg); }
    60% { transform: rotate(-6deg); }
    80% { transform: rotate(4deg); }
}

.sidebar-alert-button.has-alert .bell-icon {
    animation: sidebar-bell-wiggle 2.4s ease-in-out infinite;
}

.sidebar-alert-count {
    min-width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.9), rgba(79, 70, 229, 0.9));
    box-shadow: 0 6px 18px rgba(79, 70, 229, 0.35);
    padding: 0 0.5rem;
}

.sidebar-alert-panel {
    position: absolute;
    right: 0;
    left: auto;
    top: calc(100% + 12px);
    /* width: min(280px, 75vw); */
    z-index: 40;
}
.sidebar-alert-panel .glass-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
}
.sidebar-alert-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.sidebar-alert-panel-title {
    font-weight: 600;
    font-size: 1rem;
    color: inherit;
}
.sidebar-alert-empty {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted, rgba(226, 232, 240, 0.82));
}
.sidebar-alert-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(148, 163, 184, 0.15);
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease;
}
.sidebar-alert-entry:hover,
.sidebar-alert-entry:focus-visible {
    transform: translateY(-1px);
    background: rgba(148, 163, 184, 0.22);
    outline: none;
}
.sidebar-alert-entry-main {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
}
.sidebar-alert-entry-main i {
    font-size: 1rem;
}
.sidebar-alert-entry-count {
    min-width: 2.5rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.28);
    padding: 4px 12px;
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.18);
}

.sidebar-alert-entry[hidden] {
    display: none !important;
}
.sidebar-nav ul { list-style: none; padding: 0; margin: 0; }
.sidebar-nav li a { display: flex; align-items: center; padding: 15px; color: #e0e0e0; text-decoration: none; border-radius: 10px; margin-bottom: 10px; transition: all 0.3s ease; }
.sidebar-nav li a:hover, .sidebar-nav li.active a { background: rgba(255, 255, 255, 0.2); color: #fff; }
.sidebar-nav li a.with-badge { justify-content: space-between; gap: 12px; }
.sidebar-nav li a .nav-counter { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; background: rgba(255, 255, 255, 0.2); color: #fff; }
[data-theme="light"] .sidebar-nav li a .nav-counter { background: rgba(15, 23, 42, 0.12); color: #0f172a; }
.sidebar-nav li a i { font-size: 18px; width: 30px; text-align: center; margin-left: 15px; }
.sidebar-nav li.is-free-plan-highlight {
    order: -10;
    position: sticky;
    top: 0;
    z-index: 8;
    padding-top: 6px;
    padding-bottom: 4px;
    background: rgba(15, 23, 42, 0.98);
    border-bottom: 1px solid rgba(250, 204, 21, 0.25);
}

.sidebar-nav li a.buy-plan-link-highlight,
.plan-cta-btn.is-free-plan-highlight {
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.3), rgba(245, 158, 11, 0.28), rgba(217, 119, 6, 0.26));
    border: 1px solid rgba(250, 204, 21, 0.7);
    color: #fff7d6;
    box-shadow: 0 12px 28px rgba(217, 119, 6, 0.35);
    font-weight: 800;
}

.sidebar-nav li a.buy-plan-link-highlight i,
.plan-cta-btn.is-free-plan-highlight i {
    color: #fde68a;
}

html[data-theme="light"] .sidebar-nav li.is-free-plan-highlight {
    background: rgba(255,255,255,0.98);
    border-bottom: 1px solid rgba(217, 119, 6, 0.25);
}

html[data-theme="light"] .sidebar-nav li a.buy-plan-link-highlight,
html[data-theme="light"] .plan-cta-btn.is-free-plan-highlight {
    background: linear-gradient(135deg, rgba(254, 243, 199, 0.95), rgba(253, 230, 138, 0.92));
    border-color: rgba(217, 119, 6, 0.45);
    color: #78350f;
}

.sidebar-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.user-profile { display: flex; align-items: center; }
.user-profile i { font-size: 24px; margin-left: 10px; }
.user-profile[role="button"] {
    cursor: pointer;
    border-radius: 10px;
    padding: 4px 8px;
    transition: background 0.2s ease;
}
.user-profile[role="button"]:hover,
.user-profile[role="button"]:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    outline: none;
}

html[data-theme="light"] .sidebar-header h2 {
    color: #0f172a;
}

html[data-theme="light"] .sidebar-nav li a {
    color: rgba(30, 41, 59, 0.92);
}

.topbar-alert {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.26);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.22);
    cursor: pointer;
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.22);
}

.topbar-alert .bell-icon {
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4em;
    height: 1.4em;
    transform-origin: center top;
}

.topbar-alert-count {
    min-width: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0 0.45rem;
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.9), rgba(79, 70, 229, 0.9));
    box-shadow: 0 6px 18px rgba(79, 70, 229, 0.35);
}

.topbar-alert.has-alert .bell-icon {
    animation: sidebar-bell-wiggle 2.4s ease-in-out infinite;
}

.topbar-alert:focus-visible {
    outline: 2px solid rgba(79, 70, 229, 0.9);
    outline-offset: 2px;
}

.mobile-alert-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(6px);
    z-index: 90;
}

.mobile-alert-panel {
    position: fixed;
    inset-inline: 16px;
    top: 76px;
    z-index: 91;
    max-height: calc(100vh - 120px);
    overflow: hidden;
}

.mobile-alert-panel .glass-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

.mobile-alert-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mobile-alert-panel-title {
    font-weight: 600;
    font-size: 1rem;
}

.mobile-alert-close {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1.1rem;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.mobile-alert-close:hover,
.mobile-alert-close:focus-visible {
    transform: scale(1.1);
    outline: none;
}

.mobile-alert-empty {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted, rgba(226, 232, 240, 0.82));
}

.mobile-alert-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(148, 163, 184, 0.15);
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease;
}

.mobile-alert-entry:hover,
.mobile-alert-entry:focus-visible {
    transform: translateY(-1px);
    background: rgba(148, 163, 184, 0.22);
    outline: none;
}

.mobile-alert-entry-main {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
}

.mobile-alert-entry-count {
    min-width: 2.5rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.28);
    padding: 4px 12px;
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.18);
}

.mobile-alert-entry[hidden] {
    display: none !important;
}

html[data-theme="light"] .topbar-alert {
    background: rgba(255, 255, 255, 0.85);
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.1);
}

html[data-theme="light"] .topbar-alert-count {
    color: #fff;
}

html[data-theme="light"] .mobile-alert-entry {
    background: rgba(148, 163, 184, 0.22);
}

html[data-theme="light"] .mobile-alert-entry:hover,
html[data-theme="light"] .mobile-alert-entry:focus-visible {
    background: rgba(148, 163, 184, 0.3);
}

@media (max-width: 1024px) {
    .sidebar-utilities {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 12px;
    }

    .sidebar-alert {
        display: none !important;
    }

    .topbar-alert[hidden] {
        display: none !important;
    }

    .topbar-alert {
        display: inline-flex;
    }

    .mobile-alert-panel[hidden],
    .mobile-alert-backdrop[hidden] {
        display: none;
    }
}

@media (min-width: 1025px) {
    .topbar-alert {
        display: none !important;
    }

    .mobile-alert-panel,
    .mobile-alert-backdrop {
        display: none !important;
    }
}

html[data-theme="light"] .sidebar-nav li a:hover,
html[data-theme="light"] .sidebar-nav li.active a {
    color: #1e1b4b;
    background: linear-gradient(136deg, rgb(0 0 0 / 6%), rgb(4 4 4 / 2%));
}   

html[data-theme="light"] .sidebar-nav li a i {
    color: inherit;
}

html[data-theme="light"] .user-profile span,
html[data-theme="light"] .user-profile i {
    color: #0f172a;
}

html[data-theme="light"] .logout-btn {
    color: #0f172a;
}

html[data-theme="light"] .sidebar-alert-button {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(15, 23, 42, 0.18);
    color: #0f172a;
    box-shadow: 0 10px 20px rgba(148, 163, 184, 0.32);
}
html[data-theme="light"] .sidebar-alert-button:hover,
html[data-theme="light"] .sidebar-alert-button:focus-visible {
    background: rgba(226, 232, 240, 0.95);
    border-color: rgba(15, 23, 42, 0.28);
}
html[data-theme="light"] .sidebar-alert-count {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.88), rgba(79, 70, 229, 0.88));
    color: #fff;
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3);
}
html[data-theme="light"] .sidebar-alert-entry {
    background: rgba(226, 232, 240, 0.78);
}
html[data-theme="light"] .sidebar-alert-entry:hover,
html[data-theme="light"] .sidebar-alert-entry:focus-visible {
    background: rgba(203, 213, 225, 0.9);
}
html[data-theme="light"] .sidebar-alert-entry-count {
    background: rgba(15, 23, 42, 0.12);
    color: #0f172a;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .logout-btn:hover {
    color: #e11d48;
}

html[data-theme="light"] .glass-card .glass-content a {
    color: #000000;
}

html[data-theme="light"] .topbar-title {
    color: #0f172a;
}

html[data-theme="light"] .hamburger .ham-bar {
    background: #0f172a;
}

html[data-theme="light"] .top-logout {
    color: #0f172a;
}

html[data-theme="light"] .top-logout:hover {
    color: #e11d48;
}

html[data-theme="light"] .close-sidebar {
    color: #0f172a;
}

html[data-theme="light"] .data-table tbody tr {
    border-bottom-color: rgba(15, 23, 42, 0.2);
}
html[data-theme="light"] .data-table .dept-report-link,
html[data-theme="light"] .data-table .dept-customer-link {
    color: #0e7490;
    border-bottom-color: rgba(14, 116, 144, 0.45);
}
html[data-theme="light"] .data-table .dept-report-link:hover,
html[data-theme="light"] .data-table .dept-customer-link:hover,
html[data-theme="light"] .data-table .dept-report-link:focus-visible,
html[data-theme="light"] .data-table .dept-customer-link:focus-visible {
    color: #0f172a;
    border-bottom-color: rgba(14, 116, 144, 0.8);
}
html[data-theme="light"] .data-table .manager-link {
    color: #0e7490;
    border-bottom-color: rgba(14, 116, 144, 0.45);
}
html[data-theme="light"] .data-table .manager-link:hover,
html[data-theme="light"] .data-table .manager-link:focus-visible {
    color: #0f172a;
    border-bottom-color: rgba(14, 116, 144, 0.8);
}
html[data-theme="light"] .tag {
    background-color: rgba(15, 23, 42, 0.08);
    border-color: rgba(15, 23, 42, 0.18);
    color: rgba(15, 23, 42, 0.85);
}

html[data-theme="light"] .main-content {
    color: #0f172a;
}

html[data-theme="light"] .main-content :where(h1, h2, h3, h4, h5, h6) {
    color: #0f172a;
}

html[data-theme="light"] .main-content :where(p, span, label, li, dt, dd, th, td, strong, small) {
    color: rgb(0 0 0 / 95%);
}

html[data-theme="light"] .content-header p {
    color: rgba(30, 41, 59, 0.7);
}
.logout-btn { color: #e0e0e0; font-size: 20px; transition: color 0.3s ease; }
.logout-btn:hover { color: #ff8a8a; }

/* استایل محتوای اصلی */
.main-content {
    flex-grow: 1;
    padding: 30px;
    overflow-y: auto;
}
.content-header h1 { font-size: 32px; color: #fff; margin: 0 0 5px 0; }
.content-header p { font-size: 16px; color: #ccc; margin: 0 0 30px 0; }

/* استایل کارت‌های آمار */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}
.stat-card .glass-content {
    padding: 25px;
    display: flex;
    align-items: center;
}
.card-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-left: 20px; flex-shrink: 0; }
.card-icon i { font-size: 24px; }
.card-content-inner {
    flex: 1 1 auto;
    min-width: 0;
}
.card-content-inner h3 { margin: 0; font-size: 28px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; }
#total-revenue { direction: ltr; text-align: left; max-width: 100%; }
.card-content-inner h3 .stat-value__content { display: inline-block; }
.card-content-inner h3.stat-value--compact { font-size: 22px; }
.card-content-inner h3.stat-value--tight { font-size: 20px; }
.card-content-inner h3.stat-value--scroll {
    position: relative;
}
.card-content-inner h3.stat-value--scroll .stat-value__content {
    animation: stat-value-marquee var(--stat-scroll-duration, 10s) linear infinite;
    padding-left: 12px;
    will-change: transform;
}

@keyframes stat-value-marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-1 * var(--stat-scroll-distance, 0px)));
    }
}
.card-content-inner p { margin: 5px 0 0 0; color: #ccc; font-size: 14px; }

/* استایل کانتینر نمودارها */
.charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.chart-container {
    display: flex;
    flex-direction: column;
    min-height: 320px;
}
.chart-container .glass-content {
    flex: 1;
    padding: 20px;
}














/* app/static/css/style.css (ادامه) */

/* --- استایل‌های صفحه دپارتمان --- */
.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 30px;
}

.action-btn {
    background-color: var(--ocean-green);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.action-btn:hover {
    background-color: #02c3d5;
    box-shadow: 0 0 10px rgba(0, 180, 216, 0.5);
}

.table-container {
    width: 100%;
}
.table-container .glass-content {
    padding: 0 0 12px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.table-container .glass-content > table {
    min-width: 720px;
}
.table-container .glass-content::-webkit-scrollbar {
    height: 8px;
}
.table-container .glass-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 999px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    color: #fff;
}
.data-table th, .data-table td {
    padding: 15px 20px;
    text-align: right;
}
.data-table thead {
    background: rgba(255, 255, 255, 0.15);
}
html[data-theme="light"] .data-table thead {
    background: rgba(15, 23, 42, 0.08);
}
html[data-theme="dark"] .data-table thead {
    background: rgba(255, 255, 255, 0.18);
}
.data-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .data-table tbody tr {
    border-bottom-color: rgba(255, 255, 255, 0.18);
}
.data-table tbody tr:last-child {
    border-bottom: none;
}
.data-table .dept-report-link,
.data-table .dept-customer-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #7ee7f3;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px dashed rgba(2, 195, 213, 0.5);
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.data-table .dept-report-link:hover,
.data-table .dept-customer-link:hover,
.data-table .dept-report-link:focus-visible,
.data-table .dept-customer-link:focus-visible {
    color: #ffffff;
    border-bottom-color: rgba(2, 195, 213, 0.9);
    outline: none;
}
.data-table .dept-report-link::after,
.data-table .dept-customer-link::after {
    content: "↗";
    font-size: 0.85em;
    opacity: 0.7;
}
.data-table .manager-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #7ee7f3;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px dashed rgba(2, 195, 213, 0.5);
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.data-table .manager-link i {
    font-size: 0.85em;
    opacity: 0.75;
}
.data-table .manager-link:hover,
.data-table .manager-link:focus-visible {
    color: #ffffff;
    border-bottom-color: rgba(2, 195, 213, 0.9);
    outline: none;
}
.data-table .actions a {
    color: #e0e0e0;
    margin: 0 8px;
    font-size: 16px;
    cursor: pointer;
    transition: color 0.2s ease;
}
.data-table .actions a.edit-btn:hover { color: #fdcb6e; }
.data-table .actions a.delete-btn:hover { color: #ff7675; }

/* Spinner */
.spinner {
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    border-top: 4px solid #fff;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 50px auto;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.modal-overlay[hidden] {
    display: none;
}

body.modal-over-goftino :where(iframe[src*="goftino.com"], iframe[id*="goftino" i], div[id*="goftino" i], div[class*="goftino" i]) {
    z-index: 900 !important;
}

body.plan-expired-lock .topbar,
body.plan-expired-lock .main-layout {
    filter: blur(7px);
    pointer-events: none;
    user-select: none;
}

.plan-lock-overlay {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(2, 6, 23, 0.65);
    backdrop-filter: blur(4px);
}

.plan-lock-overlay[hidden] {
    display: none;
}

.plan-lock-modal {
    width: min(760px, 100%);
}

.plan-lock-modal .glass-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: 'Vazirmatn', sans-serif;
}

.plan-lock-title,
#plan-lock-title {
    margin: 0;
    font-size: clamp(1.18rem, 2.2vw, 1.55rem);
    font-weight: 900;
    letter-spacing: 0.1px;
}

.plan-lock-subtitle {
  margin: 0;
  color: rgba(226, 232, 240, 0.92);
  font-size: 0.98rem;
}

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

.plan-option {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.55), rgba(30, 41, 59, 0.42));
  color: #f8fafc;
  padding: 16px 14px;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.plan-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(2, 6, 23, 0.28);
}

.plan-option.is-selected {
  border-color: rgba(56, 189, 248, 0.9);
  background: linear-gradient(160deg, rgba(14, 116, 144, 0.55), rgba(8, 47, 73, 0.52));
  box-shadow: 0 0 0 2px rgba(125, 211, 252, 0.25), 0 18px 32px rgba(14, 116, 144, 0.25);
}

.plan-option.is-recommended {
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.45);
}

.plan-option-badge {
    font-size: 0.82rem;
    color: #bae6fd;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.plan-option strong {
  font-size: 1.36rem;
  letter-spacing: 0.15px;
  line-height: 1.4;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.plan-option small {
  color: rgba(226, 232, 240, 0.88);
  font-size: 0.88rem;
  line-height: 1.45;
  font-weight: 500;
}

.plan-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}

.plan-old-price {
  color: rgba(148, 163, 184, 0.92);
  text-decoration: line-through;
  text-decoration-thickness: 1.4px;
  text-decoration-color: rgba(248, 113, 113, 0.6);
  font-size: 0.88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.plan-discount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.26), rgba(244, 63, 94, 0.42));
  color: #fecaca;
  border: 1px solid rgba(251, 113, 133, 0.65);
  box-shadow: 0 8px 18px rgba(190, 24, 93, 0.24);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.plan-pay-btn {
  width: 100%;
  justify-content: center;
  min-height: 52px;
  border-radius: 14px;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.15px;
  background: linear-gradient(135deg, #22d3ee, #2563eb 50%, #7c3aed 100%);
  border: 1px solid rgba(147, 197, 253, 0.7);
  box-shadow: 0 18px 32px rgba(37, 99, 235, 0.38);
}

.plan-pay-btn:hover,
.plan-pay-btn:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

html[data-theme="light"] .plan-lock-subtitle {
    color: rgba(15, 23, 42, 0.72);
}

html[data-theme="light"] .plan-option {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.16);
}

html[data-theme="light"] .plan-option small {
    color: rgba(15, 23, 42, 0.68);
}

html[data-theme="light"] .plan-option-badge {
  color: #0369a1;
  font-weight: 700;
}

html[data-theme="light"] .plan-old-price {
  color: rgba(15, 23, 42, 0.5);
  text-decoration-color: rgba(239, 68, 68, 0.5);
}

html[data-theme="light"] .plan-discount {
  background: linear-gradient(135deg, rgba(254, 202, 202, 0.95), rgba(254, 226, 226, 0.98));
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.35);
  box-shadow: 0 8px 18px rgba(239, 68, 68, 0.16);
}

html[data-theme="light"] .plan-option.is-selected {
  background: linear-gradient(160deg, rgba(224, 242, 254, 0.95), rgba(219, 234, 254, 0.9));
  border-color: rgba(14, 116, 144, 0.45);
}

@media (max-width: 768px) {
    .plan-options {
        grid-template-columns: 1fr;
    }

    .plan-lock-modal .glass-content {
        padding: 18px;
    }
}
.modal-content {
    width: 100%;
    max-width: 450px;
}
.compact-modal {
    max-width: 640px;
    max-height: calc(100vh - 120px);
}
.compact-modal .glass-content {
    padding: 20px 24px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
.modal-content .glass-content {
    padding: 10px;
}
.modal-content h3 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 25px;
    color: var(--text);
}
.modal-content p {
    text-align: center;
    font-size: 16px;
    line-height: 1.6;
}

.sms-mode-toggle {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.radio-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--text);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.radio-chip input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.radio-chip input:focus + span,
.radio-chip input:focus-visible + span {
    outline: none;
    box-shadow: 0 0 0 3px rgba(2, 195, 213, 0.35);
    border-radius: inherit;
}

.radio-chip span {
    pointer-events: none;
    font-size: 0.95rem;
}

.radio-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.24);
}

.radio-chip input:checked + span {
    color: var(--text);
    font-weight: 700;
}

/* The real radio is visually hidden, so "which one is selected?" is answered
   entirely by the chip. The previous 18%-tint-plus-hairline read as a hover
   state at a glance; this is a deliberate selected state — accent fill, accent
   ring and bolder label — so the choice is unmistakable at arm's length.
   `--chip-active-*` are token hooks: Nila redefines them in nila_classic.css,
   which is why no brand colour is written literally in the value below.
   `:has()` covers chips whose owner never calls a sync helper; `.is-active`
   stays supported for the scripts that do. */
.radio-chip.is-active,
.radio-chip:has(input:checked) {
    background: var(--chip-active-bg, rgba(2, 195, 213, 0.24));
    border-color: var(--chip-active-border, rgba(2, 195, 213, 0.75));
    box-shadow: 0 6px 18px var(--chip-active-glow, rgba(2, 195, 213, 0.22));
}

.radio-chip.is-active > span,
.radio-chip:has(input:checked) > span {
    color: var(--text);
    font-weight: 700;
}

.sms-panel[hidden] {
    display: none !important;
}

.sms-panel .form-group {
    margin-bottom: 16px;
}

.placeholder-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.placeholder-chip {
    border: 1px dashed rgba(255, 255, 255, 0.35);
    background: rgba(15, 23, 42, 0.35);
    color: var(--text);
    border-radius: 12px;
    padding: 6px 14px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.placeholder-chip:hover,
.placeholder-chip:focus {
    background: rgba(2, 195, 213, 0.18);
    border-color: rgba(2, 195, 213, 0.6);
    transform: translateY(-1px);
}

.placeholder-chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(2, 195, 213, 0.35);
}

@media (max-width: 768px) {
    .sms-mode-toggle {
        flex-direction: column;
        align-items: stretch;
    }

    .radio-chip {
        justify-content: center;
    }
}
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    /* margin-top: 10px; */
}
.modal-actions button {
    padding: 10px 25px;
    border-radius: 8px;
    border: none;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 16px;
    cursor: pointer;
}
.btn-primary { background-color: var(--ocean-green); color: white; }
.btn-secondary { background-color: rgba(255, 255, 255, 0.2); color: white; }
.btn-danger { background-color: #d63031; color: white; }

.modal-overlay.modal-scroll {
    align-items: flex-start;
    overflow-y: auto;
    padding: 40px 16px;
}

.modal-overlay.modal-scroll .modal-content {
    margin: 40px auto;
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
}

.modal-overlay.modal-scroll .modal-content .glass-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

@media (max-width: 768px) {
    .modal-overlay.modal-scroll {
        padding: 24px 12px;
    }
    .modal-overlay.modal-scroll .modal-content {
        margin: 24px auto;
        max-height: calc(100vh - 48px);
    }
    .modal-overlay.modal-scroll .modal-content .glass-content {
        max-height: calc(100vh - 96px);
    }
}

.master-modal {
    max-width: 900px;
    width: 100%;
}

.master-modal .glass-content {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.master-modal-header h3 {
    margin: 0;
    font-size: 1.5rem;
}

.master-modal-header p {
    margin: 8px 0 0;
    font-size: 0.92rem;
    color: rgba(226, 232, 240, 0.78);
}

.master-modal-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
}

.master-modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    padding: 4px 0;
}

.master-modal-form .modal-actions {
    margin-top: 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    justify-content: flex-end;
}

.master-section {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.master-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.master-section-header h4 {
    margin: 0;
    font-size: 1.1rem;
}

.master-section-header p {
    margin: 6px 0 0;
    font-size: 0.85rem;
    color: rgba(226, 232, 240, 0.65);
}

.master-section-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.master-section-disabled {
    opacity: 0.65;
}

.master-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.master-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.master-toggle input {
    display: none;
}

.master-toggle-track {
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.38);
    position: relative;
    transition: all 0.25s ease;
}

.master-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.25s ease;
}

.master-toggle input:checked + .master-toggle-track {
    background: var(--ocean-green);
    border-color: var(--ocean-green);
}

.master-toggle input:checked + .master-toggle-track::after {
    transform: translateX(-20px);
}

.tab-actions .action-btn i {
    font-size: 1rem;
}

html[data-theme="light"] .master-modal-header p {
    color: rgba(71, 85, 105, 0.75);
}

html[data-theme="light"] .master-section {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(148, 163, 184, 0.35);
}

html[data-theme="light"] .master-section-header p {
    color: rgba(71, 85, 105, 0.7);
}

html[data-theme="light"] .master-modal-form .modal-actions {
    border-top: 1px solid rgba(148, 163, 184, 0.25);
}

html[data-theme="light"] .master-toggle-track {
    background: rgba(148, 163, 184, 0.25);
    border-color: rgba(148, 163, 184, 0.45);
}

.tab-actions {
    display: flex;
    justify-content: flex-end;
    padding: 20px 20px 0 20px;
}

.tab-actions .action-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.tab-actions .action-btn i {
    font-size: 1rem;
}

@media (max-width: 640px) {
    .tab-actions {
        justify-content: stretch;
    }
    .tab-actions .action-btn {
        width: 100%;
    }
}
/* Toast Notification */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 14px 28px;
    border-radius: 14px;
    color: #f8fafc;
    font-size: 15px;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(18px) saturate(180%);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.45);
}
.toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-6px);
}
.toast.success {
    background: linear-gradient(135deg, rgba(46, 213, 115, 0.95) 0%, rgba(30, 130, 76, 0.95) 100%);
    color: #0b3d2e;
    border-color: rgba(32, 201, 151, 0.35);
}
.toast.error {
    background: linear-gradient(135deg, rgba(255, 94, 98, 0.95) 0%, rgba(199, 0, 57, 0.95) 100%);
    color: #fff5f5;
    border-color: rgba(255, 94, 98, 0.35);
}
.toast.info {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.95) 0%, rgba(14, 165, 233, 0.95) 100%);
    color: #03131f;
    border-color: rgba(56, 189, 248, 0.35);
}









/* app/static/css/style.css (کدهای جدید را به انتها اضافه کنید) */

/* استایل برای تگ‌های دپارتمان در جدول */
.tag {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.15);
    color: #e0e0e0;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 12px;
    margin: 2px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* استایل‌های جدید برای لیست چک‌باکس سفارشی */
.checkbox-list {
    max-height: 150px;
    overflow-y: auto;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 10px;
    padding: 10px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    padding: 8px 5px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.checkbox-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.checkbox-item.is-checked {
    background: rgba(0, 184, 148, 0.18);
    border: 1px solid rgba(0, 184, 148, 0.4);
    box-shadow: 0 0 0 1px rgba(0, 184, 148, 0.15);
}

.checkbox-item input[type="checkbox"] {
    display: none; /* مخفی کردن چک‌باکس پیش‌فرض */
}

.checkbox-item .custom-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--input-border);
    border-radius: 5px;
    margin-left: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
}

.checkbox-item input[type="checkbox"]:checked + .custom-checkbox {
    background-color: var(--ocean-green);
    border-color: var(--ocean-green);
}

.checkbox-item label {
    font-size: 16px;
    color: var(--text);
    cursor: pointer;
}

/* A department the target manager already holds but the current user has no
   «افزودن مدیر» grant on. Shown checked and inert so an edit cannot silently
   strip it; the server enforces the same rule. */
.checkbox-item.is-locked {
    cursor: not-allowed;
    opacity: 0.6;
}

.checkbox-item.is-locked:hover {
    background: transparent;
}

.checkbox-item.is-locked label {
    cursor: not-allowed;
}

.checkbox-item.is-locked label small {
    font-size: 12px;
    color: var(--text-muted);
    margin-right: 6px;
}














/* app/static/css/style.css (کدهای جدید را به انتها اضافه کنید) */

/* --- استایل‌های صفحه مشتریان --- */

/* Filter Bar */
.filter-bar .glass-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px;
    padding: 15px 20px;
}
.filter-group {
    position: relative;
    flex: 1 1 220px;
    min-width: 200px;
}
.filters-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.filter-group i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #ccc;
}
.filter-group input, .filter-group select {
    width: 100%;
    padding: 10px 40px 10px 15px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    font-family: 'Vazirmatn', sans-serif;
}
.filter-group input::placeholder { color: rgba(255, 255, 255, 0.5); }
.filter-group select { appearance: none; -webkit-appearance: none; }

/* Modal Styles */
.modal-content.large {
    max-width: 800px;
}
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
.required {
    color: #ff9a9a;
    margin-right: 4px;
}
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 400;
}
.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    /* padding: 12px 15px; */
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 10px;
    color: var(--text);
    font-size: 16px;
    font-family: 'Vazirmatn', sans-serif;
    box-sizing: border-box;
}

.form-group select {
    padding: 12px 15px;
}

.form-group input {
    padding: 12px 15px;
}

#login-form .form-group input {
    padding: 12px 40px 12px 15px;
}

#register-form .form-group input {
    padding: 12px 40px 12px 15px;
}

.form-group textarea { resize: vertical; }

/* Custom Rating/Grade Group */
.rating-group {
    display: flex;
    justify-content: space-between;
    background: var(--input-bg);
    border-radius: 10px;
    padding: 5px;
    border: 1px solid var(--input-border);
}
.rating-group label {
    flex-grow: 1;
    text-align: center;
    padding: 8px 0;
    cursor: pointer;
    border-radius: 7px;
    transition: all 0.2s ease-in-out;
}
.rating-group input[type="radio"] {
    display: none;
}
.rating-group input[type="radio"]:checked + label {
    background-color: var(--ocean-green);
    color: white;
    font-weight: 600;
}

/* Custom Tag Input */
.tags-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 10px;
}
.tags-container .tag-item {
    display: flex;
    align-items: center;
    background-color: var(--ocean-blue);
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 14px;
}
.tags-container .tag-item .remove-tag {
    margin-right: 8px;
    cursor: pointer;
    font-weight: bold;
}
#tags-input {
    flex-grow: 1;
    border: none;
    background: transparent;
    color: white;
    outline: none;
    padding: 5px;
    font-size: 16px;
}

/* Pagination */
.pagination-container {
    padding: 20px;
    text-align: center;
}
.pagination-container button {
    font-family: 'Vazirmatn';
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 8px 15px;
    margin: 0 5px;
    border-radius: 6px;
    cursor: pointer;
}
.pagination-container button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.pagination-container button.active {
    background-color: var(--ocean-green);
}


/* Customers advanced pagination */
.customers-pagination {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 14px 18px;
    width: min(100%, 980px);
    margin: 0 auto;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.26);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.14);
}
.customers-pagination-summary {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.92rem;
    line-height: 1.9;
}
.customers-pagination-controls {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pagination-container .pagination-btn,
.pagination-container .pagination-jump-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 42px;
    min-height: 40px;
    padding: 8px 13px;
    margin: 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-weight: 700;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pagination-container .pagination-btn:hover:not(:disabled),
.pagination-container .pagination-jump-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.42);
}
.pagination-container .pagination-btn.active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #22c55e, #06b6d4);
    box-shadow: 0 10px 25px rgba(6, 182, 212, 0.25);
}
.pagination-container .pagination-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    transform: none;
}
.pagination-ellipsis {
    min-width: 28px;
    text-align: center;
    color: rgba(255, 255, 255, 0.58);
    font-weight: 800;
}
.customers-pagination-jump {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9rem;
}
.customers-pagination-jump input {
    width: 86px;
    min-height: 40px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    outline: none;
}
.customers-pagination-jump input:focus {
    border-color: rgba(6, 182, 212, 0.75);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.16);
}
html[data-theme="light"] .customers-pagination {
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] .customers-pagination-summary,
html[data-theme="light"] .customers-pagination-jump {
    color: #475569;
}
html[data-theme="light"] .pagination-container .pagination-btn,
html[data-theme="light"] .pagination-container .pagination-jump-btn {
    color: #0f172a;
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.14);
}
html[data-theme="light"] .pagination-container .pagination-btn:hover:not(:disabled),
html[data-theme="light"] .pagination-container .pagination-jump-btn:hover:not(:disabled) {
    background: #eef2ff;
    border-color: rgba(79, 70, 229, 0.28);
}
html[data-theme="light"] .pagination-container .pagination-btn.active {
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
}
html[data-theme="light"] .pagination-ellipsis {
    color: #64748b;
}
html[data-theme="light"] .customers-pagination-jump input {
    color: #0f172a;
    background: #fff;
    border-color: rgba(15, 23, 42, 0.16);
}
@media (max-width: 720px) {
    .pagination-container {
        padding: 14px 8px 22px;
    }
    .customers-pagination {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px;
        border-radius: 16px;
    }
    .customers-pagination-summary {
        text-align: center;
        font-size: 0.84rem;
    }
    .customers-pagination-controls {
        gap: 6px;
        justify-content: center;
    }
    .pagination-container .pagination-btn {
        min-width: 38px;
        min-height: 38px;
        padding: 7px 10px;
        border-radius: 11px;
        font-size: 0.85rem;
    }
    .pagination-container .pagination-btn span {
        display: inline-block;
    }
    .pagination-container .pagination-btn:first-child span,
    .pagination-container .pagination-btn:nth-child(2) span,
    .pagination-container .pagination-btn:nth-last-child(1) span,
    .pagination-container .pagination-btn:nth-last-child(2) span {
        display: none;
    }
    .pagination-ellipsis {
        min-width: 18px;
    }
    .customers-pagination-jump {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
    .customers-pagination-jump input {
        width: min(110px, 34vw);
    }
}



















/* app/static/css/style.css (کدهای جدید را به انتها اضافه کنید) */

/* --- استایل‌های صفحه پیامک --- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}

.sms-card {
    position: relative;
}

.sms-card .glass-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
}

/* ======================== */
/* Floating filter controls */
/* ======================== */

.floating-filter-btn {
    position: fixed;
    inset-inline-start: 22px;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    width: 56px;
    height: 56px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 18px;
    border: 1px solid rgba(125, 211, 252, 0.38);
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.34), transparent 32%),
        linear-gradient(145deg, rgba(14, 165, 233, 0.92), rgba(79, 70, 229, 0.86));
    color: #f8fafc;
    font-weight: 700;
    box-shadow:
        0 16px 34px rgba(15, 23, 42, 0.34),
        0 6px 16px rgba(14, 165, 233, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.38);
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    z-index: 940;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}

.floating-filter-btn::before {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    pointer-events: none;
}

.floating-filter-btn::after {
    content: '';
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
    pointer-events: none;
}

.floating-filter-btn i {
    position: relative;
    z-index: 1;
    font-size: 1.18rem;
    filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.26));
}

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

.floating-filter-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 20px 40px rgba(15, 23, 42, 0.38),
        0 8px 18px rgba(14, 165, 233, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.floating-filter-btn:active {
    transform: translateY(1px) scale(0.98);
    box-shadow:
        0 10px 22px rgba(15, 23, 42, 0.3),
        0 4px 10px rgba(14, 165, 233, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.floating-filter-btn:focus-visible {
    outline: 3px solid rgba(45, 212, 191, 0.7);
    outline-offset: 4px;
}

body.sidebar-open .floating-filter-btn,
body.filter-drawer-open .floating-filter-btn {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px) scale(0.94);
}

html[data-theme="light"] .floating-filter-btn {
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.78), transparent 34%),
        linear-gradient(145deg, rgba(34, 211, 238, 0.95), rgba(99, 102, 241, 0.88));
    border-color: rgba(14, 116, 144, 0.2);
    color: #ffffff;
    box-shadow:
        0 16px 28px rgba(148, 163, 184, 0.35),
        0 6px 16px rgba(14, 165, 233, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.54);
}

@media (max-width: 480px) {
    .floating-filter-btn {
        inset-inline-start: 18px;
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }

    .floating-filter-btn::before {
        border-radius: 12px;
    }
}

@media (max-width: 768px) {
    .floating-filter-btn {
        display: inline-flex;
    }
}

@media (min-width: 769px) {
    .floating-filter-btn {
        display: none !important;
    }
}

body.filter-drawer-open {
    overflow: hidden;
}

.mobile-filter-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: 0 18px 18px;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(10px);
    z-index: 1300;
}

.mobile-filter-overlay.open {
    display: flex;
}

.mobile-filter-sheet {
    width: 100%;
    max-width: 540px;
    max-height: 92dvh;
    height: min(92dvh, 720px);
    border-radius: 28px 28px 18px 18px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.35);
    display: flex;
    flex-direction: column;
}

.mobile-filter-sheet.glass-card {
    background: transparent;
    display: none;
}

@media (max-width: 768px) {
    .mobile-filter-sheet.glass-card {
    display: flex !important;
}
}

.mobile-filter-sheet.glass-card .glass-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px;
    min-height: 0;
}

.mobile-filter-sheet:not(.glass-card) {
    background: rgba(15, 23, 42, 0.92);
    color: #f8fafc;
    padding: 22px 22px 26px;
}

html[data-theme="light"] .mobile-filter-sheet:not(.glass-card) {
    background: rgba(255, 255, 255, 0.92);
    color: #0f172a;
}

.mobile-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-filter-header h3 {
    margin: 0;
    font-size: 1.05rem;
}

.mobile-filter-close {
    background: none;
    border: 0;
    color: inherit;
    font-size: 1.25rem;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.mobile-filter-close:hover {
    transform: scale(1.05);
}

.mobile-filter-body {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 16px;
    -webkit-overflow-scrolling: touch;
}

.customers-page .mobile-filter-body {
    max-height: none;
    overflow-y: auto;
}

.mobile-filter-footer {
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    display: flex;
    justify-content: center;
}

.mobile-filter-footer .btn-primary {
    width: 100%;
    justify-content: center;
}

html[data-theme="light"] .mobile-filter-footer {
    border-top-color: rgba(15, 23, 42, 0.1);
}

.mobile-filter-body::-webkit-scrollbar {
    width: 6px;
}

.mobile-filter-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 999px;
}

html[data-theme="light"] .mobile-filter-body::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.6);
}

@media (min-width: 769px) {
    .mobile-filter-overlay {
        position: static;
        display: contents;
        background: none;
        backdrop-filter: none;
        padding: 0;
    }

    .mobile-filter-header,
    .mobile-filter-close {
        display: none;
    }

    .mobile-filter-body {
        max-height: none;
        overflow: visible;
        padding: 0;
    }
}

/* Customers filters layout */
#customer-advanced-filters {
    display: contents;
}

.customers-page #customer-filter-toolbar .search-group {
    position: relative;
}

@media (max-width: 768px) {
    .mobile-filter-body #customer-filter-toolbar {
        width: 100%;
        max-width: 100%;
    }

    .mobile-filter-body #customer-filter-toolbar .filter-group {
        width: 100%;
        min-width: 0;
    }

    .mobile-filter-body #customer-filter-toolbar .filter-group.select-wrap > i,
    .mobile-filter-body #customer-filter-toolbar .filter-group.search-group > i {
        inset-inline-start: 12px;
        padding-top: 20px !important;
    }

    .mobile-filter-body #customer-filter-toolbar .filter-row,
    .mobile-filter-body #customer-filter-toolbar .filter-row-inner {
        width: 100%;
        min-width: 0;
    }

    .mobile-filter-body #customer-filter-toolbar .range-inputs {
        flex-wrap: wrap;
    }

    .mobile-filter-body #customer-filter-toolbar .range-inputs input {
        flex: 1 1 160px;
        min-width: 0;
    }
}

.customers-layout {
    display: grid;
    grid-template-columns: minmax(280px, 320px) 1fr;
    gap: 24px;
    align-items: start;
    width: 100%;
}

#customer-filter-card {
    position: sticky;
    top: 96px;
    align-self: start;
}

@media (max-width: 1100px) {
    .customers-layout {
        grid-template-columns: minmax(240px, 280px) 1fr;
        gap: 20px;
    }
}

@media (max-width: 900px) {
    #customer-filter-card {
        top: 84px;
    }
}

@media (max-width: 768px) {
    .modal-content.modal-scrollable {
        max-height: 90vh;
        display: flex;
        flex-direction: column;
    }

    .modal-content.modal-scrollable .glass-content {
        max-height: 90vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .customers-layout {
        display: block;
    }

    #customer-filter-card {
        position: static;
    }
}

/* Reports filter responsiveness */
#reports-filter-desktop-slot {
    width: 100%;
}

@media (max-width: 768px) {
    #reports-filter-desktop-slot {
        display: none;
    }

    .mobile-filter-body {
        max-height: none;
        flex: 1 1 auto;
        padding-bottom: 24px;
    }

    .mobile-filter-body .filter-bar .glass-content {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .mobile-filter-body .filter-group {
        width: 100%;
        min-width: 0;
    }

    .mobile-filter-body .filter-range {
        flex-wrap: wrap;
    }

    .mobile-filter-body .filter-range input {
        width: 100%;
        min-width: 0;
    }

    .mobile-filter-body > .filter-bar {
        width: 100%;
    }

    .mobile-filter-body > .filter-bar.glass-card {
        border-radius: 20px;
    }
}

.sms-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
}


html[data-theme="light"] .sms-card-header {
    border-bottom-color: rgba(15, 23, 42, 0.26);
}

.sms-card-header h4 {
    margin: 0;
    font-size: 18px;
    color: #fff;
}

.status-badge {
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
}
.status-badge.pending { background-color: #fdcb6e; color: #333; }
.status-badge.approved { background-color: #00b894; color: #fff; }
.status-badge.rejected { background-color: #d63031; color: #fff; }
.status-badge.completed { background-color: #10b981; color: #f8fafc; }
.status-badge.cancelled { background-color: #ef4444; color: #f8fafc; }
.status-badge.active { background-color: #16a34a; color: #f8fafc; }
.status-badge.inactive { background-color: #64748b; color: #f8fafc; }
.status-badge.finished { background-color: #0ea5e9; color: #f8fafc; }
.status-badge.not-sent { background-color: #e2e8f0; color: #1e293b; }
.status-badge.sent { background-color: #3b82f6; color: #f8fafc; }
.status-badge.failed { background-color: #ef4444; color: #f8fafc; }
.status-badge.delivered { background-color: #10b981; color: #f8fafc; }
.status-badge.unknown { background-color: #94a3b8; color: #0f172a; }

.sms-card-body p {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #e0e0e0;
    flex-grow: 1;
    margin: 0 0 20px 0;
}

.sms-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #ccc;
}

.sms-card-actions a {
    color: #ccc;
    font-size: 16px;
    margin: 0 8px;
    cursor: pointer;
    transition: color 0.2s;
}
.sms-card-actions a.edit-btn:hover { color: #fdcb6e; }
.sms-card-actions a.delete-btn:hover { color: #ff7675; }

/* The department picker in the SMS modal moved to the searchable pill
   multi-select in css/pill_select.css. */

.sms-placeholder-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    align-items: center;
}

.sms-placeholder-chips .placeholder-chip {
    font-family: 'Vazirmatn';
    border: 1px solid rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.12);
    color: #f8fafc;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.65rem;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.sms-placeholder-chips .placeholder-chip:hover {
    background: rgba(59, 130, 246, 0.22);
}

.sms-defaults-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.sms-default-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.9rem;
}

.sms-default-item input {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(10, 12, 22, 0.5);
    color: #f5f6fb;
}














/* app/static/css/style.css (کدهای جدید را به انتها اضافه کنید) */

/* --- استایل‌های صفحه محصولات --- */

/* Header actions */
.content-header .header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.view-toggle {
    display: inline-flex;
    gap: 8px;
}

.view-toggle .btn-secondary.active {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Card Grid Layout */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.product-card .glass-content {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.product-card-image {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.product-card-image--placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.88);
    text-align: center;
}

.product-card-image--placeholder i {
    font-size: 28px;
    opacity: 0.92;
}

.product-card-image--placeholder span {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.product-card-body {
    padding: 20px;
    flex-grow: 1;
}

.product-card-body h4 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #fff;
}

.product-card-body .price {
    font-size: 20px;
    font-weight: 700;
    color: var(--ocean-green);
    margin-bottom: 15px;
}
.product-card-body .price span {
    font-size: 14px;
    font-weight: 400;
    color: #ccc;
}

.product-card-body .stock {
    font-size: 14px;
    color: #ccc;
}

.product-card-tags {
    padding: 0 20px;
    margin-bottom: 20px;
}

.product-card-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--input-border);
    text-align: left;
}


html[data-theme="light"] .view-toggle .btn-secondary {
    color: #0f172a;
    border-color: rgba(100, 116, 139, 0.45);
    background: rgba(226, 232, 240, 0.72);
}

html[data-theme="light"] .view-toggle .btn-secondary:hover {
    background: rgba(203, 213, 225, 0.85);
    border-color: rgba(100, 116, 139, 0.6);
}

html[data-theme="light"] .view-toggle .btn-secondary.active {
    background: rgba(148, 163, 184, 0.32);
    border-color: rgba(71, 85, 105, 0.62);
    color: #0f172a;
}

html[data-theme="light"] .product-card-body .price span,
html[data-theme="light"] .product-card-body .stock {
    color: rgba(15, 23, 42, 0.82);
}

html[data-theme="light"] .product-card-footer {
    border-top-color: rgba(100, 116, 139, 0.36);
}

/* Product modal layout */
.product-form-grid {
    grid-template-columns: 1fr 1fr;
}

.product-form-column--media {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.product-form-group--media {
    order: 1;
}

.product-form-group--description {
    order: 2;
}

/* List View */
.table-container {
    margin-top: 10px;
    overflow-x: auto;
}

.product-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.28), rgba(15, 23, 42, 0.18));
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 16px;
    overflow: hidden;
    color: var(--text);
    box-shadow: 0 14px 28px rgba(2, 6, 23, 0.18);
    backdrop-filter: blur(6px);
}

.product-table th,
.product-table td {
    padding: 16px 14px;
    text-align: right;
    border-bottom: 1px solid rgba(148, 163, 184, 0.24);
    vertical-align: middle;
    font-size: 0.92rem;
}

.product-table th {
    color: #e2e8f0;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.1px;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.82), rgba(51, 65, 85, 0.78));
    position: sticky;
    top: 0;
    z-index: 2;
}

.product-table tbody tr {
    background: rgba(30, 41, 59, 0.34);
    transition: background 0.2s ease, transform 0.2s ease;
}

.product-table tbody tr:nth-child(even) {
    background: rgba(51, 65, 85, 0.32);
}

.product-table tbody tr:hover {
    background: rgba(148, 163, 184, 0.18);
}

.product-table tbody td:first-child {
    font-weight: 700;
    color: #f8fafc;
    font-size: 0.96rem;
}

.product-table td:nth-child(2) {
    font-weight: 700;
    color: #e5e7eb;
    font-size: 0.94rem;
}

.product-table td:nth-child(3) {
    color: #e5e7eb;
    font-weight: 600;
    font-size: 0.92rem;
}

.product-table td:nth-child(4) {
    color: rgba(226, 232, 240, 0.86);
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.92rem;
    line-height: 1.65;
}

.product-table td input.inline-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--text);
    font-size: 0.92rem;
}

.product-table td.table-actions {
    white-space: nowrap;
}

.product-table td .edit-btn,
.product-table td .report-btn,
.product-table td .delete-btn {
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(30, 41, 59, 0.52);
    color: #e2e8f0;
    width: 34px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
    margin-left: 6px;
    transition: all 0.2s ease;
}

.product-table td .edit-btn:hover {
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.14);
}

.product-table td .report-btn:hover {
    color: #bfdbfe;
    border-color: rgba(59, 130, 246, 0.42);
    background: rgba(30, 64, 175, 0.28);
}

.product-table td .delete-btn:hover {
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.42);
    background: rgba(127, 29, 29, 0.34);
}

html[data-theme="light"] .product-table {
    background: rgba(255, 255, 255, 0.93);
    border-color: rgba(148, 163, 184, 0.34);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.09);
    backdrop-filter: blur(4px);
}

html[data-theme="light"] .product-table th {
    color: #0f172a;
    background: linear-gradient(180deg, rgba(226, 232, 240, 0.88), rgba(241, 245, 249, 0.88));
    border-bottom-color: rgba(148, 163, 184, 0.35);
}

html[data-theme="light"] .product-table tbody tr {
    background: rgba(248, 250, 252, 0.92);
}

html[data-theme="light"] .product-table tbody tr:nth-child(even) {
    background: rgba(241, 245, 249, 0.92);
}

html[data-theme="light"] .product-table tbody tr:hover {
    background: rgba(226, 232, 240, 0.6);
}

html[data-theme="light"] .product-table tbody td:first-child {
    color: #0f172a;
}

html[data-theme="light"] .product-table td:nth-child(2) {
    color: #0f172a;
}

html[data-theme="light"] .product-table td:nth-child(3) {
    color: #334155;
}

html[data-theme="light"] .product-table td:nth-child(4) {
    color: rgba(15, 23, 42, 0.74);
}

html[data-theme="light"] .product-table td .edit-btn,
html[data-theme="light"] .product-table td .report-btn,
html[data-theme="light"] .product-table td .delete-btn {
    background: rgba(255, 255, 255, 0.95);
    color: #334155;
    border-color: rgba(148, 163, 184, 0.4);
}

.product-table td .inline-status {
    display: inline-block;
    margin-right: 8px;
    font-size: 12px;
    color: #9ad39a;
}

@media (max-width: 768px) {
    .product-table {
        min-width: 720px;
    }

    .product-table td input.inline-input {
        min-width: 160px;
    }

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

    .product-form-column--main {
        order: 1;
    }

    .product-form-column--media {
        order: 2;
    }

    .product-form-group--media {
        order: 2;
    }

    .product-form-group--description {
        order: 1;
    }
}

.timeline-header .actions .edit-btn,
.timeline-header .actions .delete-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.12);
    color: #f8fafc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.timeline-header .actions .edit-btn:hover,
.timeline-header .actions .delete-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.25);
}

html[data-theme="light"] .timeline-header .actions .edit-btn,
html[data-theme="light"] .timeline-header .actions .delete-btn {
    border-color: rgba(15, 23, 42, 0.18);
    background: rgb(0 0 0 / 6%);
    color: #ffffff;
    box-shadow: none;
}

/* Image Uploader in Modal */
.upload-btn {
    display: inline-block;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    margin-top: 10px;
}
.upload-btn:hover { background: rgba(255, 255, 255, 0.3); }

.image-preview-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    min-height: 100px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 10px;
    padding: 10px;
}

.img-preview {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    border-radius: 8px;
    overflow: hidden;
}
.img-preview img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.remove-img-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
}











/* app/static/css/style.css (کدهای جدید را به انتها اضافه کنید) */

/* --- استایل‌های صفحه تک مشتری --- */

.profile-grid {
    display: grid;
    grid-template-columns: 280px 1fr; /* ستون کناری باریک‌تر، ستون اصلی بزرگتر */
    gap: 20px;
    align-items: flex-start;
}

.profile-sidebar {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-card .glass-content {
    padding: 25px;
}

.profile-header {
    text-align: center;
    border-bottom: 1px solid var(--input-border);
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.profile-header h2 {
    margin: 0;
    font-size: 24px;
    color: #fff;
}
.profile-header .company-name {
    color: #ccc;
    font-size: 14px;
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 20px;
}

.contact-info {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}
.contact-info li {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
    color: #e0e0e0;
}
.contact-info li i {
    width: 25px;
    text-align: center;
    margin-left: 10px;
    color: #ccc;
}

.profile-actions {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.full-width {
    width: 100%;
}
.btn-secondary {
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.financial-summary div {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--input-border);
    font-size: 14px;
}
.financial-summary div:last-child {
    border-bottom: none;
}
.financial-summary strong {
    font-weight: 600;
    color: #fff;
}
.financial-summary .balance strong {
    font-size: 16px;
    color: var(--ocean-green);
}
.financial-summary .balance.negative strong {
    color: #ff7675;
}

.customer-forms-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.customer-form-item-btn {
    width: 100%;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(17, 25, 40, 0.55);
    color: #fff;
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    transition: all .2s ease;
}
.customer-form-item-btn:hover {
    border-color: rgba(113, 229, 201, 0.6);
    transform: translateY(-1px);
}
.customer-form-item-btn .title {
    font-weight: 700;
    text-align: right;
}
.customer-form-item-btn .meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #b8bfd3;
}

.quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.action-btn-icon {
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e0e0e0;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 14px;
}
.action-btn-icon:hover {
    background-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.action-btn-icon i {
    margin-left: 8px;
}

/* Tabs */
.tabs-container .glass-content {
    padding: 0;
}
.tabs {
    display: flex;
    border-bottom: 1px solid var(--input-border);
    padding: 10px 20px 0 20px;
}
.tab-link {
    padding: 10px 20px;
    cursor: pointer;
    color: #ccc;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: all 0.3s;
}
.tab-link:hover {
    color: #fff;
}
.tab-link.active {
    color: #fff;
    font-weight: 600;
    border-bottom-color: var(--ocean-green);
}

.tab-content {
    padding: 25px;
}
.tab-panel {
    display: none;
}
.tab-panel.active {
    display: block;
}

/* Timeline Style for activities */
.timeline {
    margin-top: 20px;
}
.timeline-item {
    position: relative;
    padding: 15px;
    padding-right: 35px; /* Space for icon and line */
    margin-bottom: 15px;
    background: rgba(17, 25, 40, 0.55);
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 18px 36px rgba(5, 10, 25, 0.35);
}
.timeline-item::before {
    content: '';
    position: absolute;
    right: 15px;
    top: 20px;
    height: 100%;
    border-right: 2px dashed rgba(226, 232, 240, 0.26);
}
.timeline-item:last-child::before {
    display: none;
}

.timeline-icon {
    position: absolute;
    right: 6px;
    top: 15px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.95) 0%, rgba(59, 130, 246, 0.65) 100%);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
}

html[data-theme="light"] .reminder-page-container .timeline-item {
    background: transparent;
    border: none;
    box-shadow: none;
}

html[data-theme="light"] .reminder-page-container .timeline-item::before {
    display: none;
}

.reminder-page-container .timeline {
    display: grid;
    gap: 16px;
}

.reminder-page-container .timeline-item {
    padding: 0;
    margin-bottom: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.reminder-page-container .timeline-item::before {
    display: none;
}

.reminder-page-container .timeline-item .glass-content {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 24px;
}

.reminder-page-container .timeline-item .card-icon {
    flex: 0 0 auto;
}

.reminder-page-container .timeline-item .card-content-inner {
    flex: 1 1 auto;
}
.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.timeline-header .date {
    font-size: 13px;
    color: #ccc;
}
.timeline-header .actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.timeline-header .actions .timeline-action {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.12);
    color: #f8fafc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.timeline-header .actions .timeline-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.25);
}
.timeline-header .actions .timeline-action--cancel {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.45);
    color: #fecaca;
}
.timeline-header .actions .timeline-action--cancel:hover {
    background: rgba(239, 68, 68, 0.28);
}
.timeline-header .actions .timeline-action--complete {
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.45);
    color: #bbf7d0;
}
.timeline-header .actions .timeline-action--complete:hover {
    background: rgba(16, 185, 129, 0.28);
}
.timeline-header .actions .timeline-action:focus-visible {
    outline: 2px solid rgba(148, 163, 184, 0.7);
    outline-offset: 2px;
}
html[data-theme="light"] .timeline-header .actions .timeline-action {
    border-color: rgba(15, 23, 42, 0.18);
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
    box-shadow: none;
}
html[data-theme="light"] .timeline-header .actions .timeline-action--cancel {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
    color: #b91c1c;
}
html[data-theme="light"] .timeline-header .actions .timeline-action--complete {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
    color: #047857;
}
.timeline-content p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #e0e0e0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.sale-doc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}

.sale-doc-actions .doc-label {
    font-size: 12px;
    color: #a1a1aa;
}

.sale-doc-actions .doc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(15, 23, 42, 0.35);
    font-size: 12px;
    color: #e2e8f0;
    text-decoration: none;
    transition: all 0.2s ease;
}

.sale-doc-actions .doc-btn:hover {
    border-color: rgba(124, 58, 237, 0.7);
    color: #fff;
    background: rgba(124, 58, 237, 0.2);
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.2);
}

.input-with-addon {
    display: flex;
    gap: 8px;
    align-items: center;
}

.input-with-addon select {
    min-width: 110px;
}

.input-with-addon input {
    flex: 1;
}

/* Inline Form */
.inline-form {
    display: flex;
    gap: 10px;
}
.inline-form input {
    width: stretch;
    flex-grow: 1;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: #fff;
    padding: 10px 15px;
    border-radius: 8px;
    font-family: 'Vazirmatn', sans-serif;
}
.inline-form button {
    font-family: 'Vazirmatn';
    background: rgb(140 140 140 / 20%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
}

/* Responsive */
@media (max-width: 992px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }
    .profile-sidebar {
        position: static;
    }
}



/* app/static/css/style.css (کد زیر را به انتها اضافه کنید) */

.customer-link {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-direction: row-reverse;
    transition: color 0.2s ease-in-out;
}

.customer-link:hover {
    color: var(--ocean-green);
    text-decoration: none;
}














/* app/static/css/style.css (کدهای جدید را به انتها اضافه کنید) */

/* --- استایل‌های مودال فروش --- */

.form-divider {
    border: none;
    border-top: 1px solid var(--input-border);
    margin: 25px 0;
}

/* Product Search Results */
/* Autocomplete dropdown (product / customer pickers inside modals).
   The background was hardcoded #2d3436 with no light-theme rule, so in light
   mode the page's dark text sat on a dark panel and product names were
   unreadable. It is now driven by the same --option-* tokens as <select>
   options, which are already defined for both themes. */
.search-results {
    position: absolute;
    background: var(--option-bg);
    color: var(--option-text);
    border: 1px solid var(--option-border);
    border-radius: 10px;
    width: 100%;
    max-height: 240px;
    overflow-y: auto;
    /* Above the modal it belongs to, so it is never clipped by the dialog. */
    z-index: 1200;
    box-shadow: var(--option-surface-shadow);
    display: none; /* در حالت عادی مخفی است */
}
.search-result-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--option-border);
    color: var(--option-text);
    /* A long product name wraps instead of stretching the modal. */
    overflow-wrap: anywhere;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background-color: var(--option-hover-bg); }

/* Keyboard highlight and selection are visually distinct from hover, so the
   two states can never be confused. */
.search-result-item.is-active,
.search-result-item[aria-selected="true"] {
    background-color: var(--option-active-bg);
    color: var(--option-active-text);
}
.search-result-item.is-active span,
.search-result-item[aria-selected="true"] span {
    color: color-mix(in srgb, var(--option-active-text) 82%, transparent);
}
.search-result-item:focus-visible {
    outline: 2px solid var(--option-active-bg);
    outline-offset: -2px;
}
.search-result-item.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    color: var(--option-muted);
}
.search-result-item.is-disabled:hover {
    background-color: transparent;
}
/* Secondary text (price, stock) — was hardcoded #ccc, invisible on white. */
.search-result-item span {
    color: var(--option-muted);
    font-size: 12px;
    margin-right: 10px;
    white-space: nowrap;
    flex: 0 0 auto;
}
.search-result-empty,
.search-result-loading {
    padding: 14px;
    text-align: center;
    color: var(--option-muted);
    font-size: 13px;
}

/* Sale Items Table */
.sale-items-container {
    max-height: 200px;
    overflow-y: auto;
    margin-top: 15px;
}
.sale-items-table {
    width: 100%;
    border-collapse: collapse;
}
.sale-items-table th {
    text-align: right;
    padding: 8px 6px 10px;
    color: #cfd6e5;
    font-weight: 500;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sale-items-table td {
    padding: 8px 6px;
    vertical-align: middle;
    direction: ltr;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}
.sale-items-table td:first-child {
    text-align: right;
    direction: rtl;
    font-weight: 500;
    color: #f5f6fb;
}
.sale-items-table td:nth-child(2),
.sale-items-table td:nth-child(3),
.sale-items-table td:nth-child(4) {
    text-align: left;
    direction: ltr;
}
.sale-items-table input {
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(10, 12, 18, 0.35);
    color: #fff;
    text-align: left;
}
.sale-items-table .remove-item-btn {
    color: #ff7675;
    cursor: pointer;
    font-size: 18px;
}
.sale-items-table tr:last-child td {
    border-bottom: none;
}
.sale-items-table .sale-manual-row td:first-child {
    color: #f5d66f;
}

.sale-summary {
    text-align: left;
    margin-top: 20px;
    font-size: 18px;
    color: #fff;
}

#sale-invoice-wrap .toggle-switch,
#master-sale-invoice-wrap .toggle-switch {
    align-items: center;
    gap: 10px;
}

#sale-invoice-wrap .toggle-indicator,
#master-sale-invoice-wrap .toggle-indicator {
    margin-top: 0;
}

#sale-invoice-wrap .toggle-label,
#master-sale-invoice-wrap .toggle-label {
    line-height: 1.4;
    font-size: 0.9rem;
}

.mentions-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mentions-list li {
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(8, 10, 18, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mentions-list a {
    color: #f5f6fb;
    text-decoration: none;
    font-size: 13px;
}

.mentions-list .mention-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
}

.mentions-list .mention-unread {
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(37, 99, 235, 0.1);
}

.mention-card {
    margin-top: 16px;
}

.mention-card--inline {
    margin: 16px 0;
}

.mention-card-header {
    margin-bottom: 10px;
}

/* `.mention-form`, its textarea and the manager checklist rows are styled by
   the shared css/mention_picker.css. They used to live here with hard-coded
   near-white-on-near-black values and no light override, which made the
   composer unreadable on Nila's white card and unstyled in modern (the V2
   shell never loads this file). */

.mention-actions {
    display: flex;
    justify-content: flex-end;
}











/* app/static/css/style.css (کدهای جدید را به انتها اضافه کنید) */

.timeline-content .customer-link-sm {
    font-size: 13px;
    color: #a29bfe;
    text-decoration: none;
    margin-top: 10px;
    display: inline-block;
}
.timeline-content .customer-link-sm:hover {
    text-decoration: underline;
}















/* app/static/css/style.css (کدهای جدید را به انتها اضافه کنید) */

/* --- استایل‌های صفحه تک کمپین --- */
.campaign-detail-page {
    overflow-x: hidden;
}

.campaign-detail-page .table-container {
    max-width: 100%;
}

.campaign-detail-page .table-container .glass-content {
    max-width: 100%;
}
.campaign-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}
.campaign-info h1 { margin: 0; color: #fff; }
.header-meta { display: flex; align-items: center; gap: 15px; margin-top: 10px; color: #ccc; }
.campaign-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.campaign-action-message {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    font-weight: 600;
    color: var(--text);
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(12px);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

html[data-theme="light"] .campaign-action-message {
    background: rgba(15, 23, 42, 0.08);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.14);
    text-shadow: none;
}

.campaign-action-message i {
    font-size: 1rem;
    opacity: 0.9;
}

.campaign-action-message[data-state="active"] {
    background: rgba(16, 185, 129, 0.2);
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.38);
}

html[data-theme="light"] .campaign-action-message[data-state="active"] {
    background: rgba(16, 185, 129, 0.12);
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.26);
}

.campaign-action-message[data-state="finished"] {
    background: rgba(59, 130, 246, 0.2);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.34);
}

html[data-theme="light"] .campaign-action-message[data-state="finished"] {
    background: rgba(59, 130, 246, 0.14);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.26);
}

.campaign-action-message[data-state="inactive"] {
    background: rgba(71, 85, 105, 0.22);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.36);
}

html[data-theme="light"] .campaign-action-message[data-state="inactive"] {
    background: rgba(71, 85, 105, 0.12);
    box-shadow: inset 0 0 0 1px rgba(71, 85, 105, 0.24);
}
.btn-success { background-color: #00b894; }
.btn-success:hover { background-color: #00a383; }

.two-column-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    align-items: flex-start;
}
.sms-preview {
    font-size: 15px;
    line-height: 1.8;
    color: #e0e0e0;
    white-space: pre-wrap; /* To respect new lines in the message */
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Filter Modal */
.modal-content.extra-large { max-width: 900px; }

.filter-modal-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 25px;
}
.filter-sidebar h4, .filter-results h4 {
    margin-top: 0;
    color: #fff;
}
.results-header {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--input-border);
    margin-bottom: 10px;
}
.results-list {
    max-height: 350px;
    overflow-y: auto;
}
.customer-filter-item {
    display: flex;
    align-items: center;
    padding: 10px 5px;
    border-bottom: 1px solid var(--input-border);
}
.customer-filter-item:last-child { border-bottom: none; }
.customer-filter-item label {
    margin-right: 10px;
    flex-grow: 1;
    cursor: pointer;
}
.customer-filter-item .mobile {
    font-size: 13px;
    color: #ccc;
}












/* app/static/css/style.css (کدهای جدید را به انتها اضافه کنید) */

.filter-sidebar .form-group {
    margin-bottom: 15px;
}
.filter-sidebar label {
    font-size: 13px;
    margin-bottom: 6px;
}
.filter-sidebar input, .filter-sidebar select {
    padding: 8px 10px;
    font-size: 14px;
}
.input-pair {
    display: flex;
    gap: 10px;
}

/* --- تقویم کاری --- */
.work-calendar-page .subtitle {
    color: #cbd5f5;
    margin-top: 6px;
}

.work-calendar-card {
    margin-top: 20px;
}

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

.calendar-title {
    text-align: center;
    flex: 1 1 auto;
}

.calendar-title h2 {
    margin: 0;
    font-size: 20px;
}

.calendar-hint {
    font-size: 13px;
    color: #cbd5f5;
}

.calendar-nav {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

.calendar-weekday {
    text-align: center;
    font-size: 13px;
    color: #cbd5f5;
    padding: 6px 0;
}

.calendar-weekday .weekday-short {
    display: none;
}

.calendar-weekday .weekday-long {
    display: inline;
}


.calendar-empty {
    min-height: 96px;
}

.calendar-cell {
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    min-height: 96px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    color: #fff;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    cursor: pointer;
}

.calendar-cell:hover {
    transform: translateY(-2px);
    border-color: rgba(56, 189, 248, 0.5);
    background: rgba(255, 255, 255, 0.16);
}

.calendar-cell.is-today {
    border-color: rgba(56, 189, 248, 0.8);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.6);
}

.calendar-day-number {
    font-size: 16px;
    font-weight: 600;
}

.calendar-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    color: #7dd3fc;
}

.work-day-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.day-section .glass-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.day-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.day-section-header h3 {
    margin: 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.day-section-header .muted {
    margin: 4px 0 0;
    color: #cbd5f5;
    font-size: 13px;
}

.day-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.day-item {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.day-item.empty {
    text-align: center;
    color: #cbd5f5;
    font-size: 14px;
}

.day-item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.day-item-time {
    font-weight: 600;
    color: #f1f5f9;
}

.day-item h4 {
    margin: 0;
    font-size: 16px;
}

.day-item .muted {
    color: #cbd5f5;
    font-size: 14px;
    margin: 0;
}

.day-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 768px) {
    .work-day-layout {
        grid-template-columns: 1fr;
    }

    .day-item-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

html[data-theme="light"] .day-item {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .day-item-time {
    color: #0f172a;
}

html[data-theme="light"] .day-item .muted,
html[data-theme="light"] .day-section-header .muted,
html[data-theme="light"] .day-item.empty {
    color: #475569;
}

.day-placeholder h3 {
    margin-top: 0;
}

@media (max-width: 768px) {
    .calendar-toolbar {
        position: relative;
        display: grid;
        grid-template-columns: 46px 1fr 46px;
        align-items: start;
        gap: 10px;
        margin-bottom: 14px;
    }

    .calendar-nav {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        background: linear-gradient(145deg, rgba(56, 189, 248, 0.28), rgba(59, 130, 246, 0.2));
        border: 1px solid rgba(125, 211, 252, 0.45);
        box-shadow: 0 10px 24px rgba(2, 6, 23, 0.28);
    }

    .calendar-nav i {
        font-size: 15px;
    }

    #calendar-prev {
        justify-self: start;
    }

    #calendar-next {
        justify-self: end;
    }

    .calendar-title {
        grid-column: 2;
        text-align: center;
    }

    .calendar-title h2 {
        font-size: 18px;
        line-height: 1.4;
    }

    .calendar-hint {
        display: block;
        font-size: 12px;
        line-height: 1.6;
        margin-top: 3px;
    }

    .calendar-grid {
        gap: 6px;
    }

    .calendar-weekday {
        font-size: 12px;
        padding: 6px 0;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.06);
    }

    .calendar-weekday .weekday-long {
        display: none;
    }

    .calendar-weekday .weekday-short {
        display: inline;
        font-weight: 700;
    }

    .calendar-cell {
        min-height: 86px;
        padding: 8px 7px;
        border-radius: 12px;
        gap: 6px;
    }

    .calendar-day-number {
        font-size: 15px;
        font-weight: 700;
    }

    .calendar-icons {
        font-size: 13px;
        gap: 6px;
    }
}

html[data-theme="light"] .work-calendar-page .subtitle,
html[data-theme="light"] .calendar-weekday,
html[data-theme="light"] .calendar-hint {
    color: #475569;
}

html[data-theme="light"] .calendar-cell {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.12);
    color: #0f172a;
}

html[data-theme="light"] .calendar-cell:hover {
    background: rgba(15, 23, 42, 0.08);
    border-color: rgba(14, 116, 144, 0.4);
}

html[data-theme="light"] .calendar-icons {
    color: #0ea5e9;
}

html[data-theme="light"] .calendar-weekday {
    background: rgba(15, 23, 42, 0.06);
}

@media (max-width: 768px) {
    .two-column-layout {
        grid-template-columns: 1fr;
    }

    .campaign-detail-page .main-column,
    .campaign-detail-page .sidebar-column {
        min-width: 0;
    }

    .campaign-detail-page .table-container .glass-content > table {
        min-width: 100%;
    }

    .campaign-detail-page .data-table th,
    .campaign-detail-page .data-table td {
        padding: 11px 10px;
        font-size: 0.86rem;
    }

    .two-column-layout .sidebar-column {
        order: -1;
    }

    .filter-modal-layout {
        grid-template-columns: 1fr;
    }

    .filter-sidebar,
    .filter-results {
        width: 100%;
    }

    #customer-filter-modal {
        align-items: flex-start;
        overflow-y: auto;
        padding: 18px 12px;
    }

    #customer-filter-modal .modal-content {
        margin: 0 auto;
        width: 100%;
        max-height: calc(var(--viewport-height, 100svh) - 36px);
        display: flex;
        flex-direction: column;
    }

    #customer-filter-modal .glass-content {
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-height: 100%;
        overflow: hidden;
    }

    #customer-filter-modal .filter-modal-layout {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding-inline-end: 4px;
    }

    #customer-filter-modal .modal-actions {
        position: sticky;
        bottom: 0;
        z-index: 3;
        margin-top: auto;
        padding: 10px 0 calc(8px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(180deg, rgba(5, 11, 25, 0), rgba(5, 11, 25, 0.92) 35%);
    }

    html[data-theme="light"] #customer-filter-modal .modal-actions {
        background: linear-gradient(180deg, rgba(244, 247, 251, 0), rgba(244, 247, 251, 0.96) 35%);
    }
}











/* app/static/css/style.css (کدهای جدید را به انتها اضافه کنید) */

/* --- استایل‌های صفحه اهداف --- */
.target-card .glass-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
}

.target-header {
    margin-bottom: 15px;
}
.target-header h4 {
    margin: 0;
    font-size: 18px;
    color: #fff;
}
.target-header .assignee {
    font-size: 14px;
    color: #ccc;
}

.target-progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 10px;
}
.current-progress { color: #fff; font-weight: 600; }
.goal-value { color: #ccc; }

.progress-bar {
    width: 100%;
    height: 10px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 20px;
}
.progress-bar-inner {
    height: 100%;
    width: 0%; /* Will be set by JS */
    background: linear-gradient(90deg, var(--ocean-blue), var(--ocean-green));
    border-radius: 5px;
    transition: width 0.5s ease-in-out;
}

.target-footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #ccc;
    border-top: 1px solid var(--input-border);
    padding-top: 15px;
}
.target-footer .actions a {
    color: #ff7675;
    cursor: pointer;
}
.radio-group {
    display: flex;
    gap: 20px;
}














/* app/static/css/style.css (کدهای جدید را به انتها اضافه کنید) */
.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: flex-start;
}
.settings-forms, .settings-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}
.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--input-border); color: #ccc; }
.info-list li:last-child { border-bottom: none; }
.info-list li strong { color: #fff; font-weight: 600; }
.data-table td.positive { color: #55efc4; }
.data-table td.negative { color: #ff7675; }

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

@media (max-width: 640px) {
  .settings-grid {
    overflow-x: hidden;
  }

  .settings-forms,
  .settings-info {
    width: 100%;
  }

  .settings-grid .glass-card,
  .settings-grid .table-container {
    width: 100%;
  }

  .settings-grid .glass-content {
    padding-inline: 18px;
  }

  .table-container .glass-content > table {
    min-width: 100%;
  }
}

/* -------- Light theme readability adjustments -------- */
html[data-theme="light"] .content-header .action-btn,
html[data-theme="light"] .content-header a.action-btn {
  background: #0f172a;
  color: #f8fafc;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}

html[data-theme="light"] .content-header .action-btn:hover,
html[data-theme="light"] .content-header a.action-btn:hover {
  background: #111827;
}

html[data-theme="light"] .filter-bar .glass-content {
  color: #0f172a;
}

html[data-theme="light"] .filter-bar .glass-content label,
html[data-theme="light"] .filter-bar .glass-content i,
html[data-theme="light"] .filter-bar .glass-content span,
html[data-theme="light"] .filter-bar .glass-content input,
html[data-theme="light"] .filter-bar .glass-content select {
  color: #0f172a;
}

html[data-theme="light"] .filter-bar .glass-content input::placeholder {
  color: rgba(15, 23, 42, 0.55);
}

html[data-theme="light"] .filter-bar .glass-content .btn-secondary {
  background: rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(15, 23, 42, 0.16);
  color: #0f172a;
}

html[data-theme="light"] .filter-bar .glass-content .btn-secondary:hover {
  background: rgba(15, 23, 42, 0.15);
}

html[data-theme="light"] .reminder-page-container .tabs .tab-link,
html[data-theme="light"] .export-import-page .tabs .tab-link {
  color: #0f172a;
}

html[data-theme="light"] .reminder-page-container .tabs .tab-link.active,
html[data-theme="light"] .export-import-page .tabs .tab-link.active {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.08);
  border-bottom-color: rgba(15, 23, 42, 0.45);
}

html[data-theme="light"] .reminder-section h4 {
  color: #0f172a;
}

html[data-theme="light"] .target-section-title,
html[data-theme="light"] .target-summary .glass-content h3,
html[data-theme="light"] .target-chart-card .glass-content h3,
html[data-theme="light"] .breakdown-card .section-title,
html[data-theme="light"] .breakdown-card table thead th {
  color: #0f172a;
}

html[data-theme="light"] .breakdown-card table tbody td {
  color: #0f172a;
}

html[data-theme="light"] .export-import-page .glass-content {
  color: #0f172a;
}

html[data-theme="light"] .export-import-page .fields-list {
  border-color: rgba(15, 23, 42, 0.18);
  background: rgba(248, 250, 252, 0.35);
}

html[data-theme="light"] .export-import-page .fields-list li {
  color: #0f172a;
}

html[data-theme="light"] .export-import-page .fields-list .field-actions button {
  background: #0f172a;
  color: #f8fafc;
  border: none;
}

html[data-theme="light"] .export-import-page .fields-list .field-actions button:disabled {
  background: rgba(15, 23, 42, 0.35);
  color: rgba(248, 250, 252, 0.7);
}

html[data-theme="light"] .export-import-page .fields-list .field-actions button:not(:disabled):hover {
  background: #111827;
}


/* Export/Import primary action buttons theme contrast */
.export-import-page #download-excel,
.export-import-page #dl-template,
.export-import-page #upload-excel {
  background: #f8fafc;
  color: #0f172a;
  border: 1px solid rgba(248, 250, 252, 0.7);
}

.export-import-page #download-excel:hover,
.export-import-page #dl-template:hover,
.export-import-page #upload-excel:hover {
  background: #ffffff;
  box-shadow: 0 0 14px rgba(248, 250, 252, 0.35);
}

html[data-theme="light"] .export-import-page #download-excel,
html[data-theme="light"] .export-import-page #dl-template,
html[data-theme="light"] .export-import-page #upload-excel {
  background: #0f172a;
  color: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.44);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
}

html[data-theme="light"] .export-import-page #download-excel:hover,
html[data-theme="light"] .export-import-page #dl-template:hover,
html[data-theme="light"] .export-import-page #upload-excel:hover {
  background: #111827;
}

html[data-theme="light"] .api-key-box .btn-secondary,
html[data-theme="light"] #sites-tbody .btn-secondary {
  background: #0f172a;
  color: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.45);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .api-key-box .btn-secondary:hover,
html[data-theme="light"] #sites-tbody .btn-secondary:hover {
  background: #111827;
}

@media (max-width: 768px) {
  .settings-forms,
  .settings-info {
    gap: 16px;
  }
  .settings-forms .glass-card .glass-content,
  .settings-info .glass-card .glass-content {
    padding: 18px;
  }
}

@media (max-width: 600px) {
  .info-list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .info-list li span,
  .info-list li strong {
    display: block;
  }
}













/* app/static/css/style.css (کدهای جدید را به انتها اضافه کنید) */

/* --- استایل‌های صفحه گزارشات --- */
.filter-bar .glass-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 15px;
    padding: 15px 20px;
}
.filter-bar .filter-group {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.filter-bar label {
    font-size: 13px;
    margin-bottom: 6px;
    color: #ccc;
}
.filter-bar select, .filter-bar input {
    width: 100%;
}

.reports-grid {
    margin-top: 20px;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "kpi1 kpi2 kpi3 kpi4"
        "large-chart large-chart large-chart large-chart"
        "medium-chart1 medium-chart1 medium-chart2 medium-chart2"
        "leaderboard1 leaderboard1 leaderboard2 leaderboard2";
}

.report-widget.kpi { grid-area: auto; }
#kpi-revenue { grid-area: kpi1; }
#kpi-sales-count { grid-area: kpi2; }
#kpi-new-customers { grid-area: kpi3; }
#kpi-avg-sale { grid-area: kpi4; }

#chart-sales-over-time-container { grid-area: large-chart; min-height: 350px; }
#chart-sales-by-dept-container { grid-area: medium-chart1; min-height: 300px; }
#chart-customer-sources-container { grid-area: medium-chart2; min-height: 300px; }

.report-widget.leaderboard:nth-of-type(1) { grid-area: leaderboard1; }
.report-widget.leaderboard:nth-of-type(2) { grid-area: leaderboard2; }

.report-widget .glass-content {
    padding: 25px;
}
.report-widget.kpi p { margin: 0; font-size: 14px; color: #ccc; }
.report-widget.kpi h3 { margin: 10px 0 0 0; font-size: 28px; color: #fff; }

.report-widget.leaderboard h4 { margin-top: 0; color: #fff; }
.report-widget.leaderboard ol { padding-right: 20px; color: #e0e0e0; }
.report-widget.leaderboard ol li { padding: 8px 0; border-bottom: 1px solid var(--input-border); }
.report-widget.leaderboard ol li:last-child { border-bottom: none; }
.report-widget.leaderboard ol li strong { color: #fff; float: left; }















/* اندازه‌پذیری مناسب بوم نمودارها */
#chart-sales-over-time-container .glass-content,
#chart-sales-by-dept-container .glass-content,
#chart-customer-sources-container .glass-content {
  position: relative;
  min-height: 300px;
}
#chart-sales-over-time,
#chart-sales-by-dept,
#chart-customer-sources {
  display: block;
  width: 100%;
  height: 260px; /* Chart.js با maintainAspectRatio=false ارتفاع را لحاظ می‌کند */
}

/* شاین لودر سبک روی باکس‌ها هنگام درخواست */
.loading-sheen {
  position: relative;
  overflow: hidden;
}
.loading-sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.06) 30%, transparent 60%);
  animation: sheen 1.4s linear infinite;
}
@keyframes sheen {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ریسپانسیو گرید گزارشات */
@media (max-width: 1200px) {
  .reports-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "kpi1 kpi2"
      "kpi3 kpi4"
      "large-chart large-chart"
      "medium-chart1 medium-chart2"
      "leaderboard1 leaderboard2";
  }
}
@media (max-width: 768px) {
  .reports-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "kpi1" "kpi2" "kpi3" "kpi4"
      "large-chart"
      "medium-chart1"
      "medium-chart2"
      "leaderboard1"
      "leaderboard2";
  }
}









/* ===== Customers Page Fixes (scoped) ===== */
.customers-page { direction: rtl; }

/* فیلتر بالا: از گراید استفاده می‌کنیم تا توهم‌رفتن حل شه */
.customers-page .filter-bar .glass-content{
  display: grid;
  grid-template-columns: repeat(4, minmax(180px,1fr));
  gap: 12px;
  align-items: end;
}

/* سلکت و اینپوت فیلترها: خوانایی و آیکن پیکان */
.customers-page .filter-bar .filter-group{
  display: flex; flex-direction: column; min-width: 0;
}
.customers-page .filter-bar .filter-group label{
  font-size: 13px; margin-bottom: 6px; color:#ccc;
}
.customers-page .filter-bar .filter-group select,
.customers-page .filter-bar .filter-group input{
  width: 100%;
  padding: 10px 12px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
}

/* فلش سلکت؛ چون RTL هست، سمت چپ قرار می‌دیم */
.customers-page .filter-bar .filter-group.select-wrap{ position: relative; }
.customers-page .filter-bar .filter-group.select-wrap select{
  padding-left: 38px; /* جا برای فلش */
}
.customers-page .filter-bar .filter-group.select-wrap::after{
  content: "";
  position: absolute;
  left: 12px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23cccccc' d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 12px 12px;
}

/* خوانایی گزینه‌های منو (بعضی مرورگرها پس‌زمینه روشن می‌زنن) */
.customers-page select option{
  background-color: #1f1f1f;  /* تیره */
  color: #ffffff;             /* نوشته سفید */
}
/* فایرفاکس مک/ویندوز */
@-moz-document url-prefix(){
  .customers-page select { color: #fff; }
}

/* چینش دکمه‌های اعمال/بازنشانی زیر فیلترها */
.customers-page .filters-actions{
  grid-column: 1 / -1;
  display: flex; gap: 10px; justify-content: flex-start; margin-top: 4px;
}

/* ریسپانسیو فیلترها */
@media (max-width: 1100px){
  .customers-page .filter-bar .glass-content{ grid-template-columns: repeat(2, minmax(180px,1fr)); }
}
@media (max-width: 560px){
  .customers-page .filter-bar .glass-content{ grid-template-columns: 1fr; }
}

/* ===== امتیاز/سطح (رادیو) — قابل کلیک و خوانا ===== */
.customers-page .rating-group{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 10px;
  padding: 6px;
}
.customers-page .rating-group input[type="radio"]{
  position: absolute; opacity: 0; pointer-events: none;
}
.customers-page .rating-group label{
  display: block; text-align: center; padding: 8px 0;
  cursor: pointer; border-radius: 7px; color: var(--text);
  user-select: none; transition: all .2s ease;
  border: 1px solid transparent;
}
/* الگوی صحیح: input بلافاصله قبل از label باشد */
.customers-page .rating-group input[type="radio"]:checked + label{
  background-color: var(--ocean-green);
  border-color: var(--ocean-green);
  color: #fff; font-weight: 600;
}

/* فضای داخلی فرم مشتری */
.customers-page .form-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 780px){
  .customers-page .form-grid{ grid-template-columns: 1fr; }
}

/* رفع هم‌پوشانی آیکن‌های داخل فیلتر (اگر جایی آیکن مطلق داری) */
.customers-page .filter-group i{ position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #ccc; pointer-events: none; }
.customers-page .filter-group input.has-icon,
.customers-page .filter-group select.has-icon{ padding-right: 38px; }

.customers-page .table-container .glass-content > table {
  min-width: 640px;
}

.customers-page .data-table th,
.customers-page .data-table td {
  padding: 12px 16px;
  font-size: 0.92rem;
}

.customers-page .data-table th {
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.85);
}

.customers-page .data-table td {
  color: rgba(255, 255, 255, 0.9);
}

.customers-page .data-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.05);
}

html[data-theme="light"] .customers-page .data-table thead {
  background: rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] .customers-page .data-table tbody tr {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .customers-page #search-input {
  color: #0f172a;
}

html[data-theme="light"] .customers-page #search-input::placeholder {
  color: rgba(15, 23, 42, 0.6);
}

html[data-theme="light"] .customers-page .data-table th {
  color: rgba(15, 23, 42, 0.85);
}

html[data-theme="light"] .customers-page .data-table td {
  color: rgba(30, 41, 59, 0.9);
}

html[data-theme="light"] .customers-page .data-table tbody tr:hover {
  background: rgba(15, 23, 42, 0.04);
}

/* ── مرحله قیف فروش روی ردیف مشتری ─────────────────────────────────────────
   مشتری‌هایی که داخل قیف فروش هستند، ردیفشان با رنگ همان مرحله «تینت» می‌شود.
   `--stage-color` را customers.js از پاسخ API روی خود ردیف می‌گذارد؛ مقدار
   fallback این‌جا فقط برای مرحله‌ای است که رنگی برایش ذخیره نشده. رنگ با
   `transparent` ترکیب می‌شود، پس روی پس‌زمینه‌ی هر تم می‌نشیند و در روشن و
   تاریک هر دو خوانا می‌ماند. پس‌زمینه روی سلول‌هاست نه ردیف: جدول
   border-collapse: collapse است و در آن پس‌زمینه‌ی <tr> زیر سلول‌ها گم می‌شود. */
.customers-page .data-table tbody tr.has-funnel-stage > td {
  background: color-mix(in srgb, var(--stage-color, #64748b) 9%, transparent);
}

/* لبه‌ی سمت راست ردیف (ابتدای ردیف در RTL) به‌جای پس‌زمینه‌ی پررنگ */
.customers-page .data-table tbody tr.has-funnel-stage > td:first-child {
  box-shadow: inset -3px 0 0 color-mix(in srgb, var(--stage-color, #64748b) 55%, transparent);
}

.customers-page .data-table tbody tr.has-funnel-stage:hover > td {
  background: color-mix(in srgb, var(--stage-color, #64748b) 16%, transparent);
}

html[data-theme="light"] .customers-page .data-table tbody tr.has-funnel-stage > td {
  background: color-mix(in srgb, var(--stage-color, #64748b) 11%, transparent);
}

html[data-theme="light"] .customers-page .data-table tbody tr.has-funnel-stage:hover > td {
  background: color-mix(in srgb, var(--stage-color, #64748b) 18%, transparent);
}

/* «لید از دست رفته»: این ردیف‌ها هیچ فرصت بازی ندارند، پس tint مرحله بالا
   هرگز رویشان نمی‌افتد و بدون این قانون بی‌رنگ می‌مانند. همان سازوکار است ــ
   رنگ روی سلول‌ها (نه <tr>) و ترکیب با `transparent` ــ فقط رنگ ثابتِ قرمز
   به‌جای رنگ مرحله، تا در تم روشن و تاریک هر دو خوانا بماند و متن ردیف دست
   نخورد. */
.customers-page .data-table tbody tr.is-lost-lead > td {
  background: color-mix(in srgb, #ef4444 11%, transparent);
}

.customers-page .data-table tbody tr.is-lost-lead > td:first-child {
  box-shadow: inset -3px 0 0 color-mix(in srgb, #ef4444 62%, transparent);
}

.customers-page .data-table tbody tr.is-lost-lead:hover > td {
  background: color-mix(in srgb, #ef4444 18%, transparent);
}

html[data-theme="light"] .customers-page .data-table tbody tr.is-lost-lead > td {
  background: color-mix(in srgb, #dc2626 10%, transparent);
}

html[data-theme="light"] .customers-page .data-table tbody tr.is-lost-lead:hover > td {
  background: color-mix(in srgb, #dc2626 17%, transparent);
}

/* ── نتیجه‌ی قیف فروش روی ردیف مشتری ───────────────────────────────────────
   مشتری‌ای که مسیرش در قیف تمام شده، «برد» یا «باخت» دارد و ردیفش با همان
   حکم رنگ می‌گیرد: سبز برای موفق، قرمز برای از دست رفته/رد شده. حکم را API
   از وضعیت خودِ فرصت (WON/LOST) می‌فرستد، نه از نام مرحله یا فیلدهای مشتری؛
   و مشتری‌ای که دوباره فرصت باز دارد اصلاً حکمی نمی‌گیرد و tint مرحله را
   نگه می‌دارد. رنگ ثابت است چون «نتیجه» بر خلاف «مرحله» در هر پایپ‌لاین یک
   معنا دارد. مکانیزم همان است: رنگ روی سلول‌ها (نه <tr>، چون جدول
   border-collapse است) و ترکیب با transparent تا در هر دو تم خوانا بماند. */
.customers-page .data-table tbody tr.is-funnel-won > td {
  background: color-mix(in srgb, #22c55e 11%, transparent);
}

.customers-page .data-table tbody tr.is-funnel-won > td:first-child {
  box-shadow: inset -3px 0 0 color-mix(in srgb, #22c55e 62%, transparent);
}

.customers-page .data-table tbody tr.is-funnel-won:hover > td {
  background: color-mix(in srgb, #22c55e 18%, transparent);
}

html[data-theme="light"] .customers-page .data-table tbody tr.is-funnel-won > td {
  background: color-mix(in srgb, #16a34a 10%, transparent);
}

html[data-theme="light"] .customers-page .data-table tbody tr.is-funnel-won:hover > td {
  background: color-mix(in srgb, #16a34a 17%, transparent);
}

.customers-page .data-table tbody tr.is-funnel-lost > td {
  background: color-mix(in srgb, #ef4444 11%, transparent);
}

.customers-page .data-table tbody tr.is-funnel-lost > td:first-child {
  box-shadow: inset -3px 0 0 color-mix(in srgb, #ef4444 62%, transparent);
}

.customers-page .data-table tbody tr.is-funnel-lost:hover > td {
  background: color-mix(in srgb, #ef4444 18%, transparent);
}

html[data-theme="light"] .customers-page .data-table tbody tr.is-funnel-lost > td {
  background: color-mix(in srgb, #dc2626 10%, transparent);
}

html[data-theme="light"] .customers-page .data-table tbody tr.is-funnel-lost:hover > td {
  background: color-mix(in srgb, #dc2626 17%, transparent);
}


/* نشان مرحله: یک پله پررنگ‌تر از ردیف، با متنی که کنتراست کامل دارد */
.customers-page .data-table .tag.funnel-stage-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--stage-color, #64748b) 46%, transparent);
  background: color-mix(in srgb, var(--stage-color, #64748b) 22%, transparent);
  color: color-mix(in srgb, var(--stage-color, #64748b) 30%, #ffffff);
  font-weight: 600;
  white-space: nowrap;
}

.customers-page .data-table .tag.funnel-stage-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--stage-color, #64748b);
  flex: 0 0 auto;
}

html[data-theme="light"] .customers-page .data-table .tag.funnel-stage-badge {
  background: color-mix(in srgb, var(--stage-color, #64748b) 16%, transparent);
  border-color: color-mix(in srgb, var(--stage-color, #64748b) 42%, transparent);
  color: color-mix(in srgb, var(--stage-color, #64748b) 42%, #0f172a);
}

.customers-page .customers-table-header {
  display: none;
}

.customers-page .table-search-anchor {
  width: 100%;
}

.customers-page .table-search-anchor .filter-group {
  width: 100%;
  min-width: 0;
}

.customers-page .table-search-anchor .filter-group input {
  font-size: 15px;
}

@media (max-width: 1024px) {
  .customers-page .data-table th,
  .customers-page .data-table td {
    padding: 11px 14px;
    font-size: 0.88rem;
  }
}

@media (max-width: 768px) {
  .customers-page #apply-range-filter {
    display: none !important;
  }

  .customers-page .table-container .glass-content > table {
    min-width: unset;
  }

  .customers-page .customers-table-header {
    display: block;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 18px;
    box-shadow: 0 18px 35px rgba(10, 13, 25, 0.25);
    backdrop-filter: blur(16px);
  }

  .customers-page .customers-table-header .table-header-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .customers-page .table-search-anchor .filter-group {
    flex: 1 1 100%;
  }

  .customers-page .table-search-anchor .filter-group label {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
  }

  .customers-page .table-search-anchor .filter-group input {
    padding: 12px 44px 12px 16px;
    border-radius: 12px;
    font-size: 0.95rem;
  }

  .customers-page .data-table th,
  .customers-page .data-table td {
    font-size: 0.85rem;
    padding: 10px 12px;
  }
}













/* ===== Targets Page (scoped) ===== */
.targets-page .filter-bar .glass-content{
  display:grid; grid-template-columns: repeat(3, minmax(180px,1fr)); gap:12px; align-items:end;
}
.targets-page .filter-bar .filter-group{ display:flex; flex-direction:column; min-width:0; }
.targets-page .filters-actions{ display:flex; gap:10px; align-items:center; }

.targets-page .targets-advanced-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:20px;
  margin:20px 0 28px;
}

.targets-page .targets-advanced-grid .glass-content{
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.targets-page .card-header{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.targets-page .card-header h3{
  margin:0;
  font-size:18px;
  color:var(--text);
}

.targets-page .card-subtitle{
  font-size:13px;
  color:rgba(255,255,255,0.65);
}

html[data-theme="light"] .targets-page .card-subtitle{
  color:rgba(15,23,42,0.6);
}

.targets-page .goal-kpi-wrap{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:14px;
}

.targets-page .goal-kpi{
  display:flex;
  gap:10px;
  align-items:center;
  padding:14px;
  border-radius:16px;
  background: rgba(255,255,255,0.08);
  border:1px solid var(--input-border);
}

html[data-theme="light"] .targets-page .goal-kpi{
  background: rgba(255,255,255,0.7);
}

.targets-page .goal-kpi-icon{
  width:40px;
  height:40px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, rgba(59,130,246,0.65), rgba(14,165,233,0.6));
  color:#fff;
  font-size:18px;
}

.targets-page .goal-kpi-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1;
}

.targets-page .goal-kpi-meta span{
  color:rgba(255,255,255,0.72);
  font-size:13px;
}

html[data-theme="light"] .targets-page .goal-kpi-meta span{
  color:rgba(15,23,42,0.65);
}

.targets-page .goal-kpi-value{
  font-size:20px;
  font-weight:700;
  color:var(--text);
}

.targets-page .goal-kpi-foot{
  font-size:12px;
  color:rgba(255,255,255,0.55);
}

html[data-theme="light"] .targets-page .goal-kpi-foot{
  color:rgba(15,23,42,0.45);
}

.targets-page .goal-spotlight-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.targets-page .goal-spotlight-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border-radius:14px;
  border:1px solid var(--input-border);
  background: rgba(255,255,255,0.06);
}

html[data-theme="light"] .targets-page .goal-spotlight-item{
  background: rgba(255,255,255,0.75);
}

.targets-page .goal-spotlight-item .icon{
  width:36px;
  height:36px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  color:#fff;
}

.targets-page .goal-spotlight-item .text{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.targets-page .goal-spotlight-item strong{
  color:var(--text);
  font-size:15px;
}

.targets-page .goal-spotlight-item p{
  margin:0;
  font-size:13px;
  color:rgba(255,255,255,0.7);
  line-height:1.6;
}

html[data-theme="light"] .targets-page .goal-spotlight-item p{
  color:rgba(15,23,42,0.65);
}

.targets-page .goal-spotlight-item span.meta{
  font-size:12px;
  color:rgba(255,255,255,0.55);
}

html[data-theme="light"] .targets-page .goal-spotlight-item span.meta{
  color:rgba(15,23,42,0.5);
}

.targets-page .goal-spotlight-item.ahead .icon{ background: var(--goal-ahead); }
.targets-page .goal-spotlight-item.on_track .icon{ background: var(--goal-ontrack); }
.targets-page .goal-spotlight-item.at_risk .icon{ background: var(--goal-risk); }

.targets-page .scoreboard-wrapper{
  position:relative;
  overflow-x:auto;
  padding-bottom:8px;
}

.targets-page .goal-scoreboard-table{
  width:100%;
  border-collapse:collapse;
  margin:0;
  font-size:13px;
  color:var(--text);
  min-width:620px;
}

.targets-page .scoreboard-name{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.targets-page .scoreboard-name small{
  font-size:11px;
  color:rgba(255,255,255,0.6);
}

html[data-theme="light"] .targets-page .scoreboard-name small{
  color:rgba(15,23,42,0.55);
}

.targets-page .goal-scoreboard-table th,
.targets-page .goal-scoreboard-table td{
  padding:10px 12px;
  text-align:right;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

html[data-theme="light"] .targets-page .goal-scoreboard-table th,
html[data-theme="light"] .targets-page .goal-scoreboard-table td{
  border-bottom:1px solid rgba(15,23,42,0.1);
}

.targets-page .goal-scoreboard-table th{
  font-weight:600;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:rgba(255,255,255,0.7);
}

html[data-theme="light"] .targets-page .goal-scoreboard-table th{
  color:rgba(15,23,42,0.6);
}

.targets-page .goal-scoreboard-empty{
  display:none;
  text-align:center;
  padding:18px 12px;
  font-size:13px;
  color:rgba(255,255,255,0.6);
}

html[data-theme="light"] .targets-page .goal-scoreboard-empty{
  color:rgba(15,23,42,0.5);
}

.targets-page .scoreboard-status{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.targets-page .status-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  color:#0f172a;
  background:rgba(255,255,255,0.9);
}

.targets-page .status-chip.ahead{ color:#022c22; background:var(--goal-ahead); }
.targets-page .status-chip.on_track{ color:#082f49; background:var(--goal-ontrack); }
.targets-page .status-chip.at_risk{ color:#451a03; background:var(--goal-risk); }
.targets-page .status-chip.neutral{ color:rgba(15,23,42,0.7); background:rgba(255,255,255,0.55); }
.targets-page .status-chip.completed{ color:#111827; background:rgba(148,163,184,0.85); }

.targets-page .milestone-section{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.targets-page .milestone-section h4{
  margin:0;
  font-size:15px;
  color:var(--text);
}

.targets-page .goal-milestones-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.targets-page .goal-milestones-list li{
  padding:12px;
  border-radius:12px;
  border:1px solid var(--input-border);
  background:rgba(255,255,255,0.05);
  display:flex;
  flex-direction:column;
  gap:8px;
}

html[data-theme="light"] .targets-page .goal-milestones-list li{
  background:rgba(255,255,255,0.7);
}

.targets-page .milestone-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  color:var(--text);
}

.targets-page .milestone-progress{
  width:100%;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,0.1);
  overflow:hidden;
}

html[data-theme="light"] .targets-page .milestone-progress{
  background:rgba(15,23,42,0.12);
}

.targets-page .milestone-progress-inner{
  height:100%;
  background:linear-gradient(90deg, rgba(14,165,233,0.8), rgba(96,165,250,0.9));
}

.targets-page .goal-milestones-list li.highlight .milestone-progress-inner{
  background:linear-gradient(90deg, rgba(52,211,153,0.9), rgba(16,185,129,0.95));
}

.targets-page .goal-milestones-list li small{
  color:rgba(255,255,255,0.6);
  font-size:12px;
}

html[data-theme="light"] .targets-page .goal-milestones-list li small{
  color:rgba(15,23,42,0.55);
}

.targets-page .goal-celebrations{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.targets-page .goal-celebration-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--input-border);
  background:rgba(255,255,255,0.06);
  font-size:13px;
  color:var(--text);
}

html[data-theme="light"] .targets-page .goal-celebration-card{
  background:rgba(255,255,255,0.75);
}

.targets-page .goal-celebration-card span.label{
  font-weight:600;
}

.targets-page .goal-celebration-card span.value{
  color:rgba(255,255,255,0.75);
}

html[data-theme="light"] .targets-page .goal-celebration-card span.value{
  color:rgba(15,23,42,0.6);
}

@media (max-width: 780px){
  .targets-page .targets-advanced-grid{
    grid-template-columns:1fr;
  }
}

.targets-page .targets-grid{
  margin-top:20px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:20px;
}
.targets-page .target-card .glass-content{ padding:22px; display:flex; flex-direction:column; }
.targets-page .target-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; cursor:grab; }
.targets-page .target-header h4{ margin:0; color:var(--text); font-size:18px; }
.targets-page .assignee{ font-size:14px; color:#ccc; }

.targets-page .target-progress-info{ display:flex; justify-content:space-between; margin:6px 0 10px; font-size:14px; }
.targets-page .current-progress{ color:#fff; font-weight:600; }
.targets-page .goal-value{ color:#ccc; }

.targets-page .progress-bar{ width:100%; height:10px; background:rgba(0,0,0,.3); border-radius:6px; overflow:hidden; margin-bottom:14px; }
.targets-page .progress-bar-inner{ height:100%; width:0; background: linear-gradient(90deg, var(--ocean-blue), var(--ocean-green)); transition: width .45s ease; }

.targets-page .target-footer{ display:flex; justify-content:space-between; align-items:center; color:#ccc; font-size:13px; border-top:1px solid var(--input-border); padding-top:10px; }
.targets-page .target-footer .actions a{ color:#ff7675; cursor:pointer; }

.targets-page .drag-ghost{ opacity:.7; }

@media (max-width: 860px){
.targets-page .filter-bar .glass-content{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .targets-page .filter-bar .glass-content{ grid-template-columns: 1fr; }
}






/* === Targets enhancements === */
.targets-page .target-progress-row{
  display:flex; align-items:center; gap:10px; margin:4px 0 8px;
}
.targets-page .progress-badge{
  min-width:42px; padding:2px 8px; border-radius:999px;
  background: rgba(255,255,255,0.15);
  border:1px solid var(--input-border);
  color:#fff; font-size:13px; text-align:center;
}

.targets-page .actions a{
  margin-right:10px;
}
.targets-page .actions a.detail-btn { color:#74b9ff; }
.targets-page .actions a.detail-btn:hover { color:#a29bfe; }

.targets-page .detail-body .detail-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.targets-page .detail-body .detail-line{
  display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--input-border);
  padding:8px 0; color:#e0e0e0;
}
.targets-page .detail-body .detail-line strong{ color:#fff; }
@media (max-width: 680px){
  .targets-page .detail-body .detail-grid{ grid-template-columns:1fr; }
}















/* ===================== Target Detail – Size & Progress ===================== */

/* ظرف کلی کارت نمودار مرکزی */
.target-chart-card .glass-content {
  padding: 18px;
}

/* باکس نمودار: ارتفاع قابل‌کنترل و واکنش‌گرا */
.chart-wrap {
  position: relative;
  width: 100%;
  height: 340px;           /* ارتفاع پیشفرض دسکتاپ */
  max-height: 420px;
  margin: 0 auto;          /* وسط‌چین ظرف */
}

.chart-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important; /* Chart.js با maintainAspectRatio=false به این احترام می‌ذاره */
}

/* روی نمایش‌های کوچیک‌تر ارتفاع رو کم کن */
@media (max-width: 992px) {
  .chart-wrap { height: 300px; }
}
@media (max-width: 576px) {
  .chart-wrap { height: 240px; }
}

/* کارت «خلاصه هدف» */
.target-summary .grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 992px) {
  .target-summary .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .target-summary .grid { grid-template-columns: 1fr; }
}

/* KPI کوچک */
.kpi-chip {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.target-section-title {
  margin: 0;
  color: #fff;
}
.kpi-chip .label {
  font-size: 13px;
  color: #ccc;
}
.kpi-chip .value {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

/* نوار پیشرفت با هایلایت واضح بخش طی‌شده */
.progress-outer {
  position: relative;
  width: 100%;
  height: 14px;
  border-radius: 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid var(--input-border);
  overflow: hidden;
}

.progress-inner {
  position: relative;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(0,184,148,0.15), rgba(0,184,148,0.55));
  /* هایلایت واضح */
  box-shadow: inset 0 0 0 1px rgba(0,184,148,0.6), 
              0 0 12px rgba(0,184,148,0.35);
  transition: width .5s ease-in-out;
}

/* استایل خطوط مورب روی بخش طی‌شده برای تاکید */
.progress-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.25) 0px,
    rgba(255,255,255,0.25) 6px,
    transparent 6px,
    transparent 12px
  );
  opacity: .25;
  pointer-events: none;
}

/* مقدار/درصد داخل نوار */
.progress-label {
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #ccc;
}

/* کارت‌های Breakdown */
.breakdown-card .glass-content {
  padding: 18px;
}
.breakdown-table {
  width: 100%;
  border-collapse: collapse;
  color: #fff;
  font-size: 14px;
}
.breakdown-table th, .breakdown-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  text-align: right;
}
.breakdown-table th {
  color: #ddd;
  font-weight: 600;
  background: rgba(255,255,255,0.06);
}

.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid var(--input-border);
  background: rgba(255,255,255,0.08);
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.2;
}

.badge-soft i {
  font-size: 0.85rem;
}

/* شبکه دوبل برای Breakdown */
.breakdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 992px) {
  .breakdown-grid { grid-template-columns: 1fr; }
}

.breakdown-card .glass-content {
  overflow-x: auto;
  padding-bottom: 12px;
}
.breakdown-card .glass-content::-webkit-scrollbar {
  height: 6px;
}
.breakdown-card .glass-content::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 999px;
}
.breakdown-card table {
  min-width: 520px;
}
@media (max-width: 600px) {
  .breakdown-card table { min-width: 460px; }
}

/* کارت عنوان‌بندی */
.section-title {
  margin: 0 0 10px 0;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}






/* --- Sidebar: keep footer pinned, make nav scrollable --- */
.main-layout {
  min-height: var(--viewport-height);
  height: auto;
  overflow: hidden; /* از پخش‌شدن محتوا خارج از نما جلوگیری می‌کند */
}

.sidebar {
  min-height: var(--viewport-height);
  height: auto;
  overflow: hidden; /* اسکرول روی ناوبری انجام می‌شود، نه کل سایدبار */
  flex-shrink: 0;
}

@media (min-width: 1025px) {
  .main-layout {
    height: var(--viewport-height);
    min-height: var(--viewport-height);
  }

  .sidebar {
    height: var(--viewport-height);
    min-height: var(--viewport-height);
  }
}

.sidebar .glass-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.sidebar-header { 
  flex: 0 0 auto; 
  margin-bottom: 12px;
}

.sidebar-nav {
  /* بخش قابل اسکرول */
  flex: 1 1 auto;
  min-height: 0;                /* برای اینکه overflow کار کند */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 8px;           /* فضای اسکرول‌بار */
  margin-right: -8px;           /* خنثی کردن پَدینگ برای تراز شدن */
  padding-bottom: 10px;         /* فاصله از فوتر */
}

.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-footer {
  flex: 0 0 auto;               /* فوتر همیشه پایین می‌ماند */
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
}

/* آیتم‌های منو کمی فشرده‌تر بشن تا تعداد زیاد جا بشه */
.sidebar-nav li a {
  padding: 12px 14px;
  border-radius: 10px;
}

/* اسکرول‌بار ظریف‌تر و شیشه‌ای */
.sidebar-nav::-webkit-scrollbar {
  width: 8px;
}
.sidebar-nav::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
}
.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25);
  border-radius: 10px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.35);
}

/* در ارتفاع‌های خیلی کم، اندازه متن را کمی کم کن تا جا بیشتری بده */
@media (max-height: 720px) {
  .sidebar-nav li a {
    padding: 10px 12px;
    font-size: 14px;
  }
  .sidebar-header h2 {
    font-size: 20px;
  }
}
@media (max-height: 600px) {
  .sidebar-nav li a span { 
    font-size: 13px; 
  }
}










/* ====== Modal: responsive & scrollable body with sticky header/footer ====== */

/* لایه تار نیمه‌شفاف کل صفحه */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;                 /* تا در صفحه‌های کوچک مودال به لبه‌ها نچسبه */
  z-index: 1000;
  overflow: auto;                /* اگر از ارتفاع بیشتر شد، کل اوورلی اسکرول بخورد */
  box-sizing: border-box;
}

.modal-overlay.is-open {
  display: flex;
}

.modal-overlay[hidden],
.modal-overlay[aria-hidden="true"] {
  display: none !important;
}

/* جعبه مودال */
.modal-content.modal-responsive {
  width: 100%;
  max-width: 860px;              /* حداکثر عرض مودال روی دسکتاپ */
  display: grid;                 /* سه ناحیه: header / body / footer */
  grid-template-rows: auto 1fr auto;
  max-height: calc(100vh - 40px);/* هرگز از ارتفاع ویوپورت بیشتر نشود */
}

/* هدر و فوتر چسبان (داخل خود باکس مودال) */
.modal-header-sticky,
.modal-footer-sticky {
  position: sticky;
  top: 0;
  bottom: 0;
  background: transparent; /* شیشه‌ای بودن را لایه‌های glass انجام می‌دهند */
  z-index: 5;
  padding: 16px 20px;
}

/* جداکننده ظریف */
.modal-header-sticky {
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.modal-footer-sticky {
  border-top: 1px solid rgba(255,255,255,0.15);
}

/* بدنه که اسکرول می‌خورد */
.modal-body-scroll {
  padding: 20px;
  overflow: auto;                /* فقط بدنه اسکرول شود */
  min-height: 0;                 /* برای اینکه overflow کار کند */
}

/* شبکه فرم: دو ستونه روی دسکتاپ، تکی روی موبایل */
.form-grid.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 992px) {
  .modal-content.modal-responsive { max-width: 720px; }
}
@media (max-width: 768px) {
  .form-grid.two-col { grid-template-columns: 1fr; }
  .modal-content.modal-responsive { max-width: 92vw; }
}

/* گروه امتیاز/سطح: چیدمان افقی و چندسطره در صفحه باریک */
.rating-group-inline {
  display: grid;
  grid-template-columns: repeat(5, minmax(44px, 1fr));
  gap: 8px;
  align-items: center;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 10px;
  padding: 6px;
}
.rating-group-inline input[type="radio"] {
  display: none;
}
.rating-group-inline label {
  text-align: center;
  padding: 8px 0;
  border-radius: 8px;
  cursor: pointer;
  color: #eee;
  border: 1px solid transparent;
  transition: all .2s ease;
  user-select: none;
}
.rating-group-inline input[type="radio"]:checked + label {
  background-color: var(--ocean-green);
  color: #fff;
  font-weight: 700;
}
@media (max-width: 420px) {
  .rating-group-inline {
    grid-template-columns: repeat(5, minmax(36px, 1fr));
    gap: 6px;
  }
  .rating-group-inline label { padding: 6px 0; font-size: 14px; }
}

/* فوتر اکشن‌ها */
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* اطمینان از اینکه در گوشی‌های خیلی کوتاه هم همه‌چیز قابل دسترسه */
@media (max-height: 620px) {
  .modal-content.modal-responsive {
    max-height: calc(100vh - 20px);
  }
}








/* ===== Modal responsive (اگر قبلاً اضافه شده، تکراری نگذار) ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;justify-content:center;align-items:center;padding:20px;z-index:1000;overflow:auto;box-sizing:border-box;}
.modal-content.modal-responsive{width:100%;max-width:860px;display:grid;grid-template-rows:auto 1fr auto;max-height:calc(100vh - 40px);}
.modal-header-sticky,.modal-footer-sticky{position:sticky;z-index:5;background:transparent;padding:16px 20px;}
.modal-header-sticky{top:0;border-bottom:1px solid rgba(255,255,255,.15);}
.modal-footer-sticky{bottom:0;border-top:1px solid rgba(255,255,255,.15);}
.modal-body-scroll{padding:20px;overflow:auto;min-height:0;}
.form-grid.two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media (max-width:992px){.modal-content.modal-responsive{max-width:720px;}}
@media (max-width:768px){.form-grid.two-col{grid-template-columns:1fr}.modal-content.modal-responsive{max-width:92vw;}}

/* ===== Files Tab ===== */
.dropzone{
  border:2px dashed rgba(255,255,255,0.25);
  border-radius:12px;
  padding:20px;
  text-align:center;
  background:rgba(255,255,255,0.06);
  transition:all .2s ease;
}
.dropzone.dragging{
  border-color: var(--highlight);
  background: rgba(255,255,255,0.12);
}
.dropzone .dz-title{margin:0;font-size:15px;color:#e0e0e0}
.dropzone .dz-title i{margin-left:8px}
.dropzone .dz-hint{margin:8px 0 0 0;color:#bbb;font-size:12px}

.upload-queue{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.upload-row{
  display:grid;
  grid-template-columns:1fr 110px minmax(160px, 260px) 90px;
  gap:10px;
  align-items:center;
  background: rgba(255,255,255,0.06);
  border:1px solid var(--input-border);
  border-radius:10px;
  padding:8px 12px;
  font-size:14px;
}
.ur-name{color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ur-size{color:#ccc}
.ur-progress .bar{height:8px;background:rgba(255,255,255,0.15);border-radius:6px;overflow:hidden}
.ur-progress .bar span{display:block;height:100%;width:0%;background:linear-gradient(90deg, var(--ocean-blue), var(--ocean-green));transition:width .2s}
.ur-progress .ur-percent{font-size:12px;color:#ddd;margin-top:6px;text-align:left}
.ur-status{color:#ccc}

.files-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px;
}
.file-card .glass-content{display:flex;gap:12px;align-items:flex-start;padding:14px}
.file-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.12)}
.file-icon i{font-size:18px}
.file-meta{flex:1 1 auto;min-width:0}
.file-name{color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-sub{color:#bbb;font-size:12px;margin-top:4px}
.file-actions{display:flex;gap:6px;align-items:center}
.btn-sm{padding:10px 5px;border-radius:8px;font-size:13px;line-height:1}
.files-empty{text-align:center;color:#bbb;padding:10px}







.filter-bar.glass-card {
  margin-bottom: 15px !important;
}

/* ===== Global responsive enhancements ===== */
@media (max-width: 1200px) {
  .charts-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1024px) {
  .charts-grid {
    grid-template-columns: 1fr;
  }
  .charts-grid .chart-container {
    min-height: 320px;
  }
}

@media (max-width: 900px) {
  .table-container .glass-content > table {
    min-width: 640px;
  }
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .chart-container .glass-content {
    padding: 18px;
  }
  .chart-container {
    min-height: 280px;
  }
  .filter-bar .glass-content {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .filter-group {
    flex: 1 1 auto;
    min-width: 0;
  }
  .filter-actions,
  .filters-actions {
    width: 100%;
    justify-content: stretch;
    gap: 10px;
  }
  .filter-actions button,
  .filters-actions button,
  .filter-actions .btn-secondary,
  .filters-actions .btn-secondary {
    flex: 1 1 auto;
  }
  .content-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .content-header .action-btn,
  .content-header .btn-primary,
  .content-header .btn-secondary,
  .content-header button,
  .content-header a.btn-secondary {
    /* width: 100%; */
    justify-content: center;
  }
  .table-container .glass-content > table {
    min-width: 560px;
  }
}

@media (max-width: 600px) {
  .glass-card:not(.modal-content) .glass-content {
    padding: 18px;
  }
  .stats-grid {
    gap: 14px;
  }
  .chart-container {
    min-height: 260px;
  }
  .table-container .glass-content > table {
    min-width: 520px;
  }
}

@media (max-width: 480px) {
  .filter-bar .glass-content {
    gap: 12px;
  }
  .filter-summary,
  .filter-actions {
    gap: 8px;
  }
}

@media (max-width: 420px) {
  .table-container .glass-content > table {
    min-width: 460px;
  }
}

/* === October 2025 polishing === */
.targets-page .target-progress-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin: -2px 0 6px;
}

.targets-page .target-progress-caption strong {
  color: #ffffff;
  font-weight: 700;
}

html[data-theme="light"] .targets-page .target-progress-caption {
  color: rgba(15, 23, 42, 0.75);
}

html[data-theme="light"] .targets-page .target-progress-caption strong {
  color: #0f172a;
}

html[data-theme="light"] .targets-page .progress-badge {
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.18);
  color: #0f172a;
}

.reminder-page-container {
  overflow-x: hidden;
}

@media (max-width: 640px) {
  .reminder-page-container .tabs {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px 0;
  }

  .reminder-page-container .tabs .tab-link {
    flex: 1 1 calc(50% - 8px);
    text-align: center;
    border-radius: 10px 10px 0 0;
  }

  .reminder-page-container .timeline-item .glass-content {
    flex-direction: column;
    gap: 18px;
  }

  .reminder-page-container .timeline-item .card-icon {
    margin-left: 0;
  }
}

.profile-grid {
  overflow-x: hidden;
}

.profile-main,
.communications-wrapper,
.communications-sidebar,
.communications-main {
  min-width: 0;
}

.communications-main .glass-content,
.communications-sidebar .glass-content {
  overflow-x: hidden;
}

.profile-main .tabs {
  overflow-x: auto;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 0 20px 6px 20px;
  scrollbar-width: none;
}

.profile-main .tabs::-webkit-scrollbar {
  display: none;
}

.profile-main .tabs .tab-link {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .profile-main .tabs {
    padding: 0 16px 6px 16px;
  }
}

.profile-main .tab-content {
  overflow-x: hidden;
}

html[data-theme="light"] .tab-actions .action-btn {
  background: rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(15, 23, 42, 0.18);
  color: #0f172a;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .tab-actions .action-btn:hover {
  background: rgba(15, 23, 42, 0.16);
}

.tab-actions .action-btn {
  border: 1px solid transparent;
}

/* ---------- Help Center ---------- */
.content-header__title-group{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.content-header__title-group h1{
    margin: 0;
}

.help-trigger{
    font-family: 'Vazirmatn';
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.16);
    color: var(--text);
    padding: 0.55rem 1.1rem;
    font-size: 0.92rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(2, 12, 27, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.help-trigger i{
    font-size: 1rem;
}

.help-trigger span{
    font-weight: 600;
}

.help-trigger:focus-visible,
.help-trigger:hover{
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.24);
    box-shadow: 0 16px 36px rgba(2, 12, 27, 0.22);
}

.help-open .help-trigger{
    pointer-events: none;
    opacity: 0.75;
}

html[data-theme="light"] .help-trigger{
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.88);
    color: #0f172a;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .help-trigger:focus-visible,
html[data-theme="light"] .help-trigger:hover{
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.14);
}

.help-trigger-standalone{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.25rem;
}

.help-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(12, 11, 28, 0.75);
    z-index: 1198;
}

.help-backdrop[hidden],
.help-modal[hidden]{
    display: none !important;
}

.help-modal{
    position: fixed;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: min(1120px, 95vw);
    max-height: min(92vh, 900px);
    display: flex;
    flex-direction: column;
    z-index: 1199;
    overflow: hidden;
}


.help-modal > .glass-filter{
    filter: none;
    backdrop-filter: blur(10px) saturate(120%) brightness(1.06);
    -webkit-backdrop-filter: blur(10px) saturate(120%) brightness(1.06);
}

.help-modal > .glass-overlay{
    background: rgba(255, 255, 255, 0.09);
}

.help-modal .glass-content{
    display: flex;
    flex-direction: column;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    gap: 0;
}

.help-modal__header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex: 0 0 auto;
    padding: 1.35rem 1.75rem 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    /* background: linear-gradient(180deg, rgba(15, 23, 42, 0.42), rgba(15, 23, 42, 0.18));
    box-shadow: 0 14px 28px rgba(2, 12, 27, 0.16); */
}

.help-modal__label{
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 0.2rem;
    color: var(--text-muted, rgba(248, 250, 252, 0.72));
}

.help-modal__header h2{
    margin: 0;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    color: var(--text);
}

.help-modal__close{
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.help-modal__close:hover,
.help-modal__close:focus-visible{
    background: rgba(255, 255, 255, 0.18);
}

.help-modal__video{
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.16);
    aspect-ratio: 16 / 9;
    min-height: 220px;
    max-height: clamp(280px, 52vh, 520px);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* `hidden` is only `display:none` in the UA stylesheet, and the rule above sets
   `display:flex` — author styles win, so `videoWrapper.hidden = true` set the
   attribute while the box kept rendering: a 220px black panel with an inset
   shadow above the text of every guide that has no video. help_center.js has
   always hidden it correctly; this is what makes that take effect. Same trap
   `.modal-overlay[hidden]` documents elsewhere in this file. */
.help-modal__video[hidden]{
    display: none !important;
}

.help-modal__video-frame{
    position: relative;
    width: 100%;
    height: 100%;
}

.help-modal__video::after{
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.35);
}

.help-modal__video video{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
}

.help-video__placeholder{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    color: rgba(248, 250, 252, 0.82);
    font-size: 0.95rem;
    line-height: 1.9;
}

.help-video__error{
    margin-top: 0.75rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted, rgba(248, 250, 252, 0.72));
    line-height: 1.7;
}

.help-modal__video.has-error::after{
    box-shadow: inset 0 0 35px rgba(255, 99, 132, 0.25);
}

.help-modal__scroll{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5rem 1.75rem 1.75rem;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    contain: content;
    transform: translateZ(0);
    will-change: scroll-position;
}

.help-modal__scroll::-webkit-scrollbar{
    width: 0.5rem;
}

.help-modal__scroll::-webkit-scrollbar-track{
    background: transparent;
}

.help-modal__scroll::-webkit-scrollbar-thumb{
    background: linear-gradient(180deg, rgba(2, 195, 213, 0.45), rgba(37, 99, 235, 0.45));
    border-radius: 999px;
}

.help-modal__scroll::-webkit-scrollbar-thumb:hover{
    background: linear-gradient(180deg, rgba(2, 195, 213, 0.65), rgba(37, 99, 235, 0.65));
}

.help-modal__body{
    overflow: visible;
    padding-inline-end: 0;
    padding-bottom: 1.2rem;
    margin-inline-end: 0;
}

.help-modal__body:focus-visible{
    outline: 2px solid rgba(2, 195, 213, 0.45);
    outline-offset: 4px;
    border-radius: 1rem;
}


.help-modal__body img,
.help-modal__body video{
    max-width: 100%;
    border-radius: 1rem;
}


.help-modal__body .help-default{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    line-height: 1.8;
}

.help-modal__body .help-default code{
    background: rgba(2, 195, 213, 0.12);
    color: var(--text);
    padding: 0.2rem 0.45rem;
    border-radius: 0.4rem;
    font-size: 0.85rem;
    direction: ltr;
    display: inline-block;
}

/* ---- Per-page help articles -------------------------------------------
   Every file under /static/help/content wraps its body in `.help-section` and
   uses only these four building blocks: h3 headings, lists, `.help-table` for
   field definitions and `.help-note` for a caveat. Styling them once here is
   what keeps thirty-odd guides looking like one manual instead of thirty
   pages of raw browser defaults. Colours come from the shared tokens, so the
   same markup reads correctly on Darya's dark glass and Nila's white card. */
.help-modal__body .help-section{
    line-height: 2;
    font-size: 0.95rem;
}

.help-modal__body .help-section > :first-child{
    margin-top: 0;
}

/* h2 is included because the guides written before this stylesheet existed
   open with one; new articles start at h3, since the modal header is already
   the page's h2. */
.help-modal__body .help-section h2,
.help-modal__body .help-section h3{
    margin: 1.5rem 0 0.6rem;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text);
}

.help-modal__body .help-section h4{
    margin: 1.1rem 0 0.4rem;
    font-size: 0.93rem;
    font-weight: 700;
    color: var(--text);
}

.help-modal__body .help-section p{
    margin: 0 0 0.7rem;
    color: var(--text-muted);
}

.help-modal__body .help-section ul,
.help-modal__body .help-section ol{
    margin: 0 0 0.9rem;
    padding-inline-start: 1.25rem;
    color: var(--text-muted);
}

.help-modal__body .help-section li{
    margin-bottom: 0.35rem;
}

.help-modal__body .help-section strong{
    color: var(--text);
    font-weight: 700;
}

.help-modal__body .help-section code{
    background: rgba(2, 195, 213, 0.12);
    color: var(--text);
    padding: 0.1rem 0.4rem;
    border-radius: 0.35rem;
    font-size: 0.85rem;
    direction: ltr;
    display: inline-block;
}

/* Field-definition tables. Wrapped in its own scroll container so a wide
   table scrolls instead of forcing the whole modal sideways. */
.help-modal__body .help-table{
    width: 100%;
    margin: 0 0 1rem;
    border-collapse: collapse;
    font-size: 0.88rem;
    display: block;
    overflow-x: auto;
}

.help-modal__body .help-table th,
.help-modal__body .help-table td{
    padding: 0.5rem 0.7rem;
    text-align: start;
    vertical-align: top;
    border-bottom: 1px solid var(--help-rule, rgba(148, 163, 184, 0.24));
}

.help-modal__body .help-table th{
    color: var(--text);
    font-weight: 700;
    white-space: nowrap;
    background: var(--help-table-head-bg, rgba(148, 163, 184, 0.12));
}

.help-modal__body .help-table td{
    color: var(--text-muted);
}

.help-modal__body .help-table tr:last-child td{
    border-bottom: 0;
}

.help-modal__body .help-note{
    margin: 0 0 1rem;
    padding: 0.7rem 0.9rem;
    border-radius: 0.75rem;
    border-inline-start: 3px solid var(--help-note-accent, rgba(2, 195, 213, 0.8));
    background: var(--help-note-bg, rgba(2, 195, 213, 0.10));
    color: var(--text-muted);
    font-size: 0.9rem;
}

.help-modal__body .help-note strong{
    color: var(--text);
}

.help-loading{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem 0;
    color: var(--text-muted, rgba(248, 250, 252, 0.72));
    text-align: center;
}

.help-loading .spinner{
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: rgba(2, 195, 213, 0.8);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.help-error,
.help-empty{
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted, rgba(248, 250, 252, 0.72));
}

@keyframes spin{
    from{ transform: rotate(0); }
    to{ transform: rotate(360deg); }
}

@media (max-width: 768px){
    .content-header__title-group{
        width: 100%;
        justify-content: space-between;
    }

    .help-trigger{
        padding: 0.5rem 1rem;
        font-size: 0.88rem;
    }

    .help-trigger-standalone{
        justify-content: flex-start;
    }

    .help-modal{
        width: min(760px, 96vw);
        max-height: 92vh;
    }

    .help-modal__header{
        padding: 1.1rem 1rem 0.95rem;
    }

    .help-modal__scroll{
        padding: 1.15rem 1rem 1.35rem;
    }

    .help-modal__video{
        min-height: 200px;
        max-height: clamp(240px, 44vh, 360px);
    }
}

@media (max-width: 640px){
    .help-modal__body{
        padding-inline: 0.5rem;
        margin-inline-end: 0;
    }
}

.whatsapp-grid{
    display:grid;
    gap:1.5rem;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    align-items:stretch;
}

.whatsapp-card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0.75rem;
    margin-bottom:1rem;
}

.status-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:96px;
    padding:0.4rem 1rem;
    border-radius:999px;
    font-size:0.85rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.04em;
    transition:background 0.3s ease,color 0.3s ease;
}

.status-pill--connected{
    background:rgba(45,194,126,0.18);
    color:var(--success-strong,#2dc27e);
    border:1px solid rgba(45,194,126,0.35);
}

.status-pill--disconnected{
    background:rgba(255,178,0,0.18);
    color:var(--warning-strong,#ffb200);
    border:1px solid rgba(255,178,0,0.35);
}

.status-list{
    display:grid;
    gap:0.8rem;
    margin:1rem 0 1.2rem;
}

.status-list div{
    display:flex;
    justify-content:space-between;
    gap:1rem;
    font-size:0.95rem;
}

.status-list dt{
    color:var(--text-muted,rgba(255,255,255,0.65));
}

.status-list dd{
    margin:0;
    font-weight:600;
}

.status-alert,
.status-success{
    display:flex;
    align-items:center;
    gap:0.75rem;
    padding:0.8rem 1rem;
    border-radius:14px;
    font-size:0.9rem;
}

.status-alert{
    background:rgba(255,178,0,0.15);
    color:var(--warning-strong,#ffb200);
    border:1px solid rgba(255,178,0,0.25);
}

.status-success{
    background:rgba(45,194,126,0.15);
    color:var(--success-strong,#2dc27e);
    border:1px solid rgba(45,194,126,0.25);
}

.status-alert i,
.status-success i{
    font-size:1.1rem;
}

.whatsapp-form-card .form-group.full-width,
.whatsapp-test-card .form-group{
    width:100%;
}

.whatsapp-test-card .form-actions{
    display:flex;
    justify-content:flex-end;
    margin-top:0.5rem;
}

.whatsapp-test-card .form-feedback{
    margin-top:1rem;
    font-size:0.9rem;
    color:var(--text-muted,rgba(255,255,255,0.65));
}

.whatsapp-test-card .form-feedback.error{
    color:#ff6b6b;
}

.whatsapp-test-card .form-feedback.success{
    color:#2dc27e;
}

.whatsapp-test-card textarea{
    min-height:100px;
    resize:vertical;
}

.whatsapp-status-card .muted,
.whatsapp-test-card .muted{
    color:var(--text-muted,rgba(255,255,255,0.65));
}

.content-actions{
    display:flex;
    gap:0.75rem;
    align-items:center;
}

.action-btn.is-loading{
    opacity:0.6;
    pointer-events:none;
}

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

body.help-open{
    overflow: hidden;
}



select#behavior-tool-select {
    width: 100%;
    padding: 12px 15px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 10px;
    color: var(--text);
    font-size: 16px;
    font-family: 'Vazirmatn', sans-serif;
    box-sizing: border-box;
}
.sms-modal-content .glass-content {
    max-height: 85vh;
    overflow-y: auto;
}

.sms-default-item.is-hidden {
    display: none;
}

/* ===== Billing Plans Page ===== */
.billing-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.billing-hero .glass-content {
  padding: 28px;
}

.billing-eyebrow {
  margin: 0 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #67e8f9;
}

.billing-hero h1 {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 900;
}

.billing-subtitle {
  margin: 10px 0 0;
  max-width: 860px;
  color: rgba(226, 232, 240, 0.88);
  line-height: 1.9;
}

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

.billing-plan-card {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(15, 23, 42, 0.72), rgba(30, 41, 59, 0.62));
  color: #f8fafc;
  text-align: right;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  font-family: "Vazirmatn", sans-serif;
}

.billing-plan-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.32);
}

.billing-plan-card.is-selected {
  border-color: rgba(34, 211, 238, 0.82);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.23), 0 20px 36px rgba(14, 116, 144, 0.28);
}

.billing-plan-card.is-featured {
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.6);
}

.billing-plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  border-radius: 999px;
  padding: 4px 10px;
  background: rgba(125, 211, 252, 0.16);
  color: #bae6fd;
  font-size: .82rem;
  font-weight: 700;
}

.billing-plan-card h3 {
  margin: 4px 0 0;
  font-size: 1.58rem;
  font-weight: 900;
  letter-spacing: 0.15px;
}

.billing-plan-price {
  margin: 0;
  font-size: 1.38rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.billing-plan-discount-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.billing-old-price {
  color: rgba(148, 163, 184, 0.98);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(248, 113, 113, 0.75);
  font-size: .98rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.billing-old-price em {
  font-style: normal;
  opacity: 0.9;
  margin-left: 4px;
}

.billing-discount-pill {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(251, 113, 133, 0.65);
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.45), rgba(251, 113, 133, 0.32));
  color: #fecdd3;
  font-size: .82rem;
  font-weight: 900;
}

.billing-plan-desc {
  margin: 0;
  color: rgba(226, 232, 240, 0.9);
  font-size: .95rem;
  line-height: 1.85;
}

.billing-savings {
  display: inline-block;
  margin-top: 4px;
  color: #fcd34d;
  font-size: .9rem;
  font-weight: 800;
}

.billing-pay-panel .glass-content {
  padding: 22px;
}

.billing-pay-summary {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 14px;
  margin-bottom: 14px;
}

.billing-pay-label {
  margin: 0 0 6px;
  color: rgba(148, 163, 184, .92);
  font-size: .9rem;
}

.billing-pay-summary h2 {
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 900;
}

.billing-pay-btn {
    font-family: 'Vazirmatn';
  min-height: 58px;
  border-radius: 14px;
  width: 100%;
  justify-content: center;
  font-size: 1rem;
  font-weight: 800;
  background: linear-gradient(135deg, #22d3ee, #2563eb 50%, #7c3aed);
  border: 1px solid rgba(147, 197, 253, .68);
  box-shadow: 0 16px 30px rgba(37, 99, 235, .32);
}

.billing-pay-note {
  margin: 10px 0 0;
  text-align: center;
  color: rgba(148, 163, 184, 0.95);
  font-size: .88rem;
}

.billing-error {
  margin: 10px 0 0;
  color: #fecaca;
  text-align: center;
  font-weight: 700;
}

html[data-theme="light"] .billing-eyebrow {
  color: #0369a1;
}

html[data-theme="light"] .billing-subtitle,
html[data-theme="light"] .billing-plan-desc {
  color: rgba(15, 23, 42, 0.72);
}

html[data-theme="light"] .billing-plan-card {
  background: linear-gradient(165deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .95));
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .billing-plan-badge {
  background: rgba(14, 116, 144, .12);
  color: #075985;
}

html[data-theme="light"] .billing-old-price {
  color: rgba(15, 23, 42, .55);
  text-decoration-color: rgba(239, 68, 68, 0.6);
}

html[data-theme="light"] .billing-discount-pill {
  color: #b91c1c;
  background: rgba(254, 226, 226, .95);
  border-color: rgba(239, 68, 68, .35);
}

html[data-theme="light"] .billing-savings {
  color: #a16207;
}

html[data-theme="light"] .billing-pay-label,
html[data-theme="light"] .billing-pay-note {
  color: rgba(15, 23, 42, 0.62);
}

@media (max-width: 1080px) {
  .billing-plans-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .billing-page {
    padding-bottom: 110px;
  }

  .billing-plans-grid {
    order: 1;
  }

  .billing-hero {
    order: 2;
  }

  .billing-pay-panel {
    order: 3;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 10px;
    z-index: 100;
    border-radius: 16px;
  }

  .billing-hero .glass-content,
  .billing-pay-panel .glass-content {
    padding: 14px;
  }

  .billing-pay-panel .glass-content {
    gap: 8px;
  }

  .billing-pay-summary {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .billing-pay-summary h2 {
    font-size: 1rem;
  }

  .billing-pay-label {
    font-size: .8rem;
    margin-bottom: 2px;
  }

  .billing-pay-btn {
    min-height: 50px;
    font-size: .95rem;
  }

  .billing-pay-note {
    display: none;
  }
}


.plan-reminder-modal-content {
  max-width: 580px;
  border-radius: 22px;
}

.plan-reminder-modal-content .glass-content {
  padding: 26px;
  text-align: right;
}

.plan-reminder-icon {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.3), rgba(245, 158, 11, 0.3));
  border: 1px solid rgba(250, 204, 21, 0.6);
  color: #fde68a;
  font-size: 1.35rem;
  margin-bottom: 10px;
  box-shadow: 0 12px 24px rgba(250, 204, 21, 0.24);
}

.plan-reminder-text {
  margin: 0;
  line-height: 1.95;
  color: rgba(226, 232, 240, 0.95);
  font-size: 1.02rem;
}

.plan-reminder-text strong {
  color: #facc15;
  font-size: 1.08rem;
}

.plan-reminder-actions {
  margin-top: 16px;
}

.plan-reminder-buy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  min-height: 48px;
  border-radius: 13px;
  background: linear-gradient(135deg, #f59e0b, #f97316 45%, #ef4444);
  border: 1px solid rgba(251, 191, 36, 0.78);
  box-shadow: 0 14px 30px rgba(249, 115, 22, 0.36);
  font-weight: 800;
}

.plan-reminder-buy-btn:hover,
.plan-reminder-buy-btn:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

html[data-theme="light"] .plan-reminder-text {
  color: rgba(15, 23, 42, 0.82);
}

html[data-theme="light"] .plan-reminder-buy-btn {
  color: #fff;
}

html[data-theme="light"] .plan-reminder-text strong {
  color: #b45309;
}

@media (max-width: 768px) {
  .plan-reminder-modal-content .glass-content {
    padding: 18px;
  }
}

@keyframes plan-reminder-pulse {
  0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.45), 0 14px 30px rgba(249, 115, 22, 0.36); }
  70% { box-shadow: 0 0 0 14px rgba(249, 115, 22, 0), 0 14px 30px rgba(249, 115, 22, 0.36); }
  100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0), 0 14px 30px rgba(249, 115, 22, 0.36); }
}

.plan-reminder-buy-btn {
  animation: plan-reminder-pulse 2s infinite;
}

@media (max-width: 768px) {
  .modal-overlay,
  .plan-lock-overlay {
    padding: 18px 14px;
    align-items: center;
  }

  .modal-content,
  .plan-lock-modal,
  .modal-content.modal-responsive,
  .modal-content.modal-scrollable,
  .modal-content.large,
  .modal-content.extra-large,
  .plan-reminder-modal-content {
    width: 100%;
    max-width: min(92vw, 560px);
    max-height: calc(var(--viewport-height, 100svh) - 36px);
    margin: 0;
  }

  /* --- Mobile modal usability fixes (managers / forms / sms templates) --- */
  #manager-modal .modal-content,
  #form-modal .modal-content,
  #sms-modal .modal-content,
  #tool-modal .modal-content,
  #product-modal .modal-content,
  #target-modal .modal-content,
  #site-modal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(var(--viewport-height, 100svh) - 36px);
  }

  #manager-modal .glass-content,
  #form-modal .glass-content,
  #sms-modal .glass-content,
  #tool-modal .glass-content,
  #product-modal .glass-content,
  #target-modal .glass-content,
  #site-modal .glass-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 100%;
    overflow: hidden;
    padding-bottom: 12px;
  }

  #form-modal .compact-modal {
    max-height: calc(var(--viewport-height, 100svh) - 44px);
  }

  #form-modal.modal-overlay.modal-scroll {
    align-items: center;
    overflow: hidden;
    touch-action: none;
  }

  #tool-modal.modal-overlay.modal-scroll {
    align-items: center;
    overflow: hidden;
    touch-action: none;
  }

  #form-modal.modal-overlay.modal-scroll .modal-content {
    margin: 0;
  }

  #tool-modal.modal-overlay.modal-scroll .modal-content {
    margin: 0;
  }

  #form-modal .compact-modal .glass-content {
    padding: 14px 14px 10px;
    gap: 12px;
  }

  #form-modal #create-form .form-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #manager-modal form,
  #create-form,
  #sms-form,
  #tool-form,
  #product-form,
  #target-form,
  #site-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }

  #manager-modal .modal-actions,
  #form-modal .modal-actions,
  #sms-modal .modal-actions,
  #tool-modal .modal-actions,
  #product-modal .modal-actions,
  #target-modal .modal-actions,
  #site-modal .modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin-top: auto;
    padding: 10px 0 calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgb(63 59 59 / 16%);
    backdrop-filter: blur(10px);
  }

  html[data-theme="light"] #manager-modal .modal-actions,
  html[data-theme="light"] #form-modal .modal-actions,
  html[data-theme="light"] #sms-modal .modal-actions,
  html[data-theme="light"] #tool-modal .modal-actions,
  html[data-theme="light"] #product-modal .modal-actions,
  html[data-theme="light"] #target-modal .modal-actions,
  html[data-theme="light"] #site-modal .modal-actions {
    background: linear-gradient(180deg, rgba(244, 247, 251, 0), rgba(244, 247, 251, 0.96) 35%);
  }

  #site-modal .form-grid,
  #target-modal .form-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #target-modal .input-pair {
    flex-direction: column;
    gap: 8px;
  }
}



button#cancel-btn {
    margin: 20px 0px 0px !important;
}

button.btn-secondary {
    font-family: 'Vazirmatn';
    margin: 20px 0px 0px !important;
}

button.btn-danger {
    margin: 20px 0px 0px 0px !important;
}

a#add-purchase-from-customer-btn {
    width: 95%;
}

section.glass-card.billing-hero {
    margin-bottom: 50px !important;
}

a.btn-primary.plan-reminder-buy-btn {
    margin: 20px 0px 0px 0px;
    padding: 0px 5px;
}


.product-report-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    align-items: end;
}

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

.product-report-grid .report-widget {
    min-height: 340px;
}

.product-report-grid .report-widget--full {
    grid-column: 1 / -1;
}

.product-report-grid .chart-holder--lg {
    min-height: 420px;
}

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

@media (max-width: 1100px) {
    .product-report-grid,
    .product-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .product-report-grid,
    .product-kpi-grid {
        grid-template-columns: 1fr;
    }
}

input#start-date-filter {
    width: auto;
}

input#end-date-filter {
    width: auto;
}

input#manager-end-date {
    width: auto;
}

input#manager-start-date {
    width: auto;
}

input#search-input {
    width: auto;
}

select#sale-discount-type {
    width: auto;
}

select#sale-tax-type {
    width: auto;
}

input#future-payment-search {
    width: auto;
}

input#future-payment-date-to {
    width: auto;
}

input#future-payment-date-from {
    width: auto;
}


label.radio-chip {
    width: auto;
}

button.btn-danger.cancel-scheduled-btn {
	font-family: 'Vazirmatn';
    border-radius: 50px;
}



.form-card-actions .btn-danger.card-action {
    margin: 0px !important;
}

.stage-actions .btn-secondary {
    height: 35px !important;
}

button#cancel-schedule-btn {
    margin: 0px !important;
}
/* The manager permissions modal is styled by css/manager_permissions.css.
   Its rules used to live here and hardcoded white text/borders, which made the
   whole modal unreadable in light mode (and therefore on Nila by default). */

/* Disabled customer row actions based on manager department permissions */
.data-table .actions a.is-disabled {
  opacity: .38;
  cursor: not-allowed;
  filter: grayscale(1);
}

/* ...and the same treatment wherever an action is unavailable because the
   accounting integration owns the record: the products grid and the products
   list. Identical declarations on purpose - a disabled control must read the
   same everywhere, and a greyed-out «حذف» must look unavailable rather than
   dangerous, so nothing here touches the colour. Layout is untouched: only
   opacity, filter and cursor change, so a row never resizes or reflows. */
.product-card-footer a.is-disabled,
.table-actions button.is-disabled,
.product-table .table-actions button.is-disabled,
.timeline-header .actions a.is-disabled,
.cas-card-actions .is-disabled,
.row-actions .is-disabled {
  opacity: .38;
  cursor: not-allowed;
  filter: grayscale(1);
  pointer-events: auto;
}

/* The hover state must not make a disabled control look live again. */
.product-card-footer a.is-disabled:hover,
.table-actions button.is-disabled:hover,
.timeline-header .actions a.is-disabled:hover,
.cas-card-actions .is-disabled:hover,
.row-actions .is-disabled:hover {
  opacity: .38;
  filter: grayscale(1);
}

/* A cell the accounting integration owns is readonly, not empty: same fade, and
   the input keeps its size so the column does not jump. */
.product-table .inline-input[readonly] {
  opacity: .55;
  cursor: not-allowed;
}

.form-group .data-table th {
    text-align: center !important;
}

.form-group .data-table td {
    text-align: center !important;
}

input#ex-search {
    width: -webkit-fill-available;
}

input#im-file {
    width: 80%;
}

button#upload-excel {
    margin-top: 15px;
}

button#apply-range-filter {
    margin-top: 0px !important;
    font-family: 'Vazirmatn';
}

html[data-theme="light"] button.action-btn.full-width {
    color: #000;
}

html[data-theme="light"] .pagination-container button {
    color: #000;
    background: rgb(140 140 140 / 20%);
    border: 1px solid rgb(20 19 19 / 30%);
}

html[data-theme="light"] button.btn-secondary {
    color: #000;
    background: rgb(140 140 140 / 20%);
    border: 1px solid rgb(20 19 19 / 30%);
}

html[data-theme="light"] .inline-form button {
    color: #000;
    background: rgb(140 140 140 / 20%);
    border: 1px solid rgb(20 19 19 / 30%);   
}

html[data-theme="light"] .inline-form input {
    color: #000;
    background: rgb(140 140 140 / 20%);
    border: 1px solid rgb(20 19 19 / 30%);   
}

html[data-theme="light"] .timeline-item {
    background: rgb(145 145 145 / 55%)
}

html[data-theme="light"] .cf-dropzone {
        border: 2px dashed black;
}

html[data-theme="light"] .detail-item {
    border: 1px solid rgba(0,0,0, 0.16);
}

html[data-theme="light"] .glass-sub-card {
    background: rgb(204 204 204 / 55%);
}

html[data-theme="light"] .field-library-item {
    background: linear-gradient(136deg, rgb(0 0 0 / 6%), rgb(4 4 4 / 2%));
    border: 1px solid rgb(0 0 0 / 16%);
}

html[data-theme="light"] .builder-field {
    background: linear-gradient(136deg, rgb(0 0 0 / 6%), rgb(4 4 4 / 2%));
    border: 1px solid rgb(0 0 0 / 16%);
}


html[data-theme="light"] .filter-bar .glass-content input {
  background: rgba(255, 255, 255, 0.7);
}

html[data-theme="light"] .filter-group.select-wrap select.has-icon {
  background: rgba(255, 255, 255, 0.7);
}

html[data-theme="light"] .inspector-form input {
  background: linear-gradient(136deg, rgb(0 0 0 / 6%), rgb(4 4 4 / 2%));
  border: 1px solid rgb(0 0 0 / 16%);
}


html[data-theme="light"] .inspector-form textarea {
  background: linear-gradient(136deg, rgb(0 0 0 / 6%), rgb(4 4 4 / 2%));
  border: 1px solid rgb(0 0 0 / 16%);
}

html[data-theme="light"] .toggle-indicator {
  background: linear-gradient(136deg, rgb(0 0 0 / 32%), rgb(4 4 4 / 2%));   
}

html[data-theme="light"] .appearance-card {
  background: linear-gradient(136deg, rgb(0 0 0 / 6%), rgb(4 4 4 / 2%));
  border: 1px solid rgb(0 0 0 / 16%);   
}

html[data-theme="light"] .appearance-custom {
  background: linear-gradient(136deg, rgb(0 0 0 / 6%), rgb(4 4 4 / 2%));
  border: 1px solid rgb(0 0 0 / 16%);   
}

html[data-theme="light"] .builder-panel {
    background: rgb(93 93 93 / 4%);
    border: 1px solid rgb(77 77 77 / 14%);
}

html[data-theme="light"] .builder-main {
    background: rgb(93 93 93 / 4%);
    border: 1px solid rgb(77 77 77 / 14%);
}

html[data-theme="light"] .library-card {
    background: rgb(93 93 93 / 4%);
    border: 1px solid rgb(77 77 77 / 14%);
}

html[data-theme="light"] .library-icon {
    background: rgb(93 93 93 / 4%);
    border: 1px solid rgb(77 77 77 / 14%);
}

button.btn-primary.btn-sm {
    font-family: 'Vazirmatn';
}

html[data-theme="light"] button.btn-primary.btn-sm {
    color: #000;
}

html[data-theme="light"] a.btn-secondary {
    color: black;
}

span.tab-copy {
    font-family: 'Vazirmatn';
}

button#refresh-selected {
    border: none;
    background: none;
}

button#reset-segment {
    border: none;
    background: none;
}

html[data-theme="light"] button#save-segment {
    background: rgb(93 93 93 / 4%);
    border: 1px solid rgb(77 77 77 / 14%);
}

html[data-theme="light"] button#launch-campaign {
    background: rgb(93 93 93 / 4%);
    border: 1px solid rgb(77 77 77 / 14%);
}

div#loading-spinner {
    display: none;
}

html[data-theme="light"] button#add-customers-btn {
    color: #000;
}

.sites-tbody .actions .btn-secondary .btn-rotate {
    margin: 0px !important;
}

#sites-tbody .actions .btn-secondary.btn-rotate {
    margin: 0 !important;
}

#sites-tbody .api-key-box .btn-secondary.btn-copy {
    margin: 0 !important;
}


html[data-theme="light"] .filter-bar select {
    background: rgb(93 93 93 / 4%);
    border: 1px solid rgb(77 77 77 / 14%);
}

html[data-theme="light"] .filter-bar input {
    background: rgb(93 93 93 / 4%);
    border: 1px solid rgb(77 77 77 / 14%);
}


html[data-theme="light"] .form-group input {
    background: rgb(93 93 93 / 4%);
    border: 1px solid rgb(77 77 77 / 14%);
}

html[data-theme="light"] .form-group select {
    background: rgb(93 93 93 / 4%);
    border: 1px solid rgb(77 77 77 / 14%);
}

html[data-theme="light"] .form-group textarea {
    background: rgb(93 93 93 / 4%);
    border: 1px solid rgb(77 77 77 / 14%);
}


html[data-theme="light"] .form-detail-page button.btn-primary {
  background: white;
  border: 1px solid rgb(0 0 0 / 16%);   
}


html[data-theme="light"] #store-phone::placeholder {
  color: #999; 
}

textarea#store-address {
    padding-right: 12px;
}

html[data-theme="light"] .info-list li {
    border-bottom: 1px solid rgb(0 0 0 / 20%);
}

html[data-theme="light"] .sidebar-footer {
    background: transparent;
    border-top: 1px solid #8d8d8db5;
}


html[data-theme="light"] .base-field-item {
  background: linear-gradient(136deg, rgb(0 0 0 / 6%), rgb(4 4 4 / 2%));
  border: 1px solid rgb(0 0 0 / 16%);   
}

html[data-theme="light"] button.btn-primary {
  background: linear-gradient(136deg, rgb(0 0 0 / 6%), rgb(4 4 4 / 2%));
  border: 1px solid rgb(0 0 0 / 16%);   
}


html[data-theme="light"] #custom-field-label::placeholder {
  color: #999; 
}

html[data-theme="light"] #custom-field-key::placeholder {
  color: #999; 
}



html[data-theme="light"] .filter-group input {
  background: linear-gradient(136deg, rgb(0 0 0 / 6%), rgb(4 4 4 / 2%));
  border: 1px solid rgb(0 0 0 / 16%);   
}

html[data-theme="light"] .filter-group select {
  background: linear-gradient(136deg, rgb(0 0 0 / 6%), rgb(4 4 4 / 2%));
  border: 1px solid rgb(0 0 0 / 16%);   
}

html[data-theme="light"] input#ex-search::placeholder {
  color: #999; 
}

html[data-theme="light"] .glass-card .glass-content nav.tabs {
    border-bottom: 1px solid #8d8d8db5;
}

#top-customers li {
    grid-template-columns: none;
}

html[data-theme="light"] .profile-header {
    border-bottom: 1px solid #8d8d8db5;
}

html[data-theme="light"] i.fas.fa-save {
    color: #000;
}


html[data-theme="light"] span#forms-count {
  background: linear-gradient(136deg, rgb(0 0 0 / 6%), rgb(4 4 4 / 2%));
  border: 1px solid rgb(0 0 0 / 16%);   
}


html[data-theme="light"] .steps-container:empty::after {
    border: 1px dashed #8d8d8db5;
}

html[data-theme="light"] .tool-card-actions .btn-secondary {
  background: linear-gradient(136deg, rgb(0 0 0 / 6%), rgb(4 4 4 / 2%));
  border: 1px solid rgb(0 0 0 / 16%);   
}

html[data-theme="light"] .tool-card-actions .btn-text {
  background: linear-gradient(136deg, rgb(0 0 0 / 6%), rgb(4 4 4 / 2%));
  border: 1px solid rgb(0 0 0 / 16%);   
}

html[data-theme="light"] .tool-card-actions .btn-secondary {
  background: linear-gradient(136deg, rgb(0 0 0 / 6%), rgb(4 4 4 / 2%));
  border: 1px solid rgb(0 0 0 / 16%);   
}

a {
  text-decoration: none;
}


.tool-card-actions .btn-text {
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.tool-card-actions .btn-secondary {
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.product-card-footer a{
  cursor: default; /* یا اگر می‌خوای نشانگر دست نشه: default */
  text-decoration: none;
}

.product-card-footer a:hover{
  cursor: default;
}


html[data-theme="light"] #billing-pay-btn {
    background: linear-gradient(135deg, #22d3ee, #2563eb 50%, #7c3aed) !important;
    border: 1px solid rgba(147, 197, 253, .68) !important;
    box-shadow: 0 16px 30px rgba(37, 99, 235, .32) !important;
    color: white;
}

html[data-theme="light"] #billing-pay-btn span {
    color: white !important;
}

html[data-theme="light"] .policy-table .policy-row {
  background: linear-gradient(136deg, rgb(0 0 0 / 6%), rgb(4 4 4 / 2%));
  border: 1px solid rgb(0 0 0 / 16%);   
}


#custom-fields-table-body .btn-secondary {
    margin: 0px !important
}

html[data-theme="light"] .progress-outer {
  background: linear-gradient(136deg, rgb(0 0 0 / 6%), rgb(4 4 4 / 2%));
  border: 1px solid rgb(0 0 0 / 16%);   
}

html[data-theme="light"] .targets-page .target-footer {
    border-top: 1px solid black;
}

html[data-theme="light"] .glass-card > .glass-overlay {
    background: rgb(255 255 255 / 64%);
}

html[data-theme="light"] .insights-page .btn-primary.insight-refresh {
    background: #000;
}


html[data-theme="light"] .customer-filter-item {
    border-bottom: 1px solid #4141416e;
}

html[data-theme="light"] .sms-placeholder-chips .placeholder-chip {
    color: #000;
}


html[data-theme="light"] #save-bale-content-btn {
    color: #000;
}

html[data-theme="light"] #filter-min-balance::placeholder {
  color: #999; 
}

html[data-theme="light"] #filter-max-balance::placeholder {
  color: #999; 
}

html[data-theme="light"] #filter-search::placeholder {
  color: #999; 
}

html[data-theme="light"] #reminder-customer-search::placeholder {
  color: #999; 
}

html[data-theme="light"] #tags-input::placeholder {
  color: #999; 
}

html[data-theme="light"] #form-title::placeholder {
  color: #999; 
}

html[data-theme="light"] #form-link::placeholder {
  color: #999; 
}

html[data-theme="light"] i.fas.fa-circle-check {
  color: #999; 
}

button#open-booking-form-modal {
    margin-top: 0px !important;
}

.modal-actions.appointment-modal-fixed-footer .btn-primary {
    margin-top: 0px !important;
}

.modal-actions.appointment-modal-fixed-footer .btn-secondary {
    margin-top: 0px !important;
}

input#appointments-search {
    font-family: 'Vazirmatn';
    padding-right: 35px;
}

select {
    font-family: 'Vazirmatn';
}

#appointments-search {
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(15, 23, 42, .62);
    color: #f8fafc;
    border-radius: 13px;
    min-height: 42px;
    padding: 10px 12px;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
/* Form builder and campaign-tool creation modals must stay centered like the customer modal.
   Only the body area scrolls; headers/footers remain fixed inside the dialog. */
#form-modal,
#tool-modal {
  align-items: center;
  overflow: hidden;
  padding: 20px;
}

#form-modal .modal-content,
#tool-modal .modal-content {
  margin: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(var(--viewport-height, 100vh) - 40px);
}

#form-modal .modal-header-sticky,
#form-modal .modal-footer-sticky,
#tool-modal .modal-header-sticky,
#tool-modal .modal-footer-sticky {
  flex-direction: row;
  max-height: none;
  overflow: visible;
  flex: 0 0 auto;
}

#form-modal .modal-header-sticky,
#tool-modal .modal-header-sticky {
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

#form-modal .modal-header-sticky h3,
#tool-modal .modal-header-sticky h3 {
  margin: 0;
}

#form-modal .modal-body-scroll,
#tool-modal .modal-body-scroll {
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#form-modal .modal-footer-sticky,
#tool-modal .modal-footer-sticky {
  display: block;
}

#form-modal .modal-actions,
#tool-modal .modal-actions {
  margin-top: 0;
}

@media (max-width: 768px) {
  #form-modal,
  #tool-modal {
    padding: 18px 14px;
  }

  #form-modal .modal-content,
  #tool-modal .modal-content {
    max-height: calc(var(--viewport-height, 100svh) - 36px);
  }

  #form-modal .modal-body-scroll,
  #tool-modal .modal-body-scroll {
    padding: 14px;
  }

  #form-modal #create-form,
  #tool-modal #tool-form {
    overflow: visible;
    padding-bottom: 0;
  }

  #form-modal .modal-actions,
  #tool-modal .modal-actions {
    position: static;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
  }
}

.campaign-customers-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.campaign-customers-toolbar h4 {
    margin: 0;
}

.campaign-customer-search {
    position: relative;
    flex: 1 1 260px;
    max-width: 360px;
}

.campaign-customer-search i {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.65);
    pointer-events: none;
}

.campaign-customer-search input {
    width: 100%;
    padding: 10px 38px 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text);
    font-family: 'Vazirmatn';
}

.campaign-detail-page .pagination-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.campaign-detail-page .pagination-info {
    color: var(--text);
    font-weight: 600;
    min-width: 120px;
}

.campaign-cost-summary {
    margin: 12px 0 18px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.28);
}

.campaign-cost-summary.is-insufficient {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.34);
}

.campaign-cost-summary.is-free {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.3);
}

.cost-summary-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-weight: 700;
    color: var(--text);
}

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

.cost-summary-grid div,
.cost-summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
}

.cost-summary-grid span,
.cost-summary-total span {
    color: var(--muted);
    font-size: 13px;
}

.cost-summary-grid strong,
.cost-summary-total strong {
    color: var(--text);
    white-space: nowrap;
}

.cost-summary-total {
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.12);
}

.cost-credit-message {
    margin-top: 10px;
    font-weight: 700;
    color: #7bed9f;
}

.campaign-cost-summary.is-insufficient .cost-credit-message {
    color: #ff9f9f;
}

@media (max-width: 640px) {
    .cost-summary-grid {
        grid-template-columns: 1fr;
    }
}

#start-campaign-modal {
    overflow: hidden;
}

#start-campaign-modal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(var(--viewport-height, 100svh) - 36px);
}

#start-campaign-modal .modal-content .glass-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: inherit;
    overflow: hidden;
    padding: 0;
}

.campaign-start-modal-body {
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 14px 8px;
}

.campaign-start-modal-actions {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    z-index: 4;
    flex-wrap: wrap;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(20, 24, 36, 0.82);
    backdrop-filter: blur(14px);
}

html[data-theme="light"] .campaign-start-modal-actions {
    background: rgba(244, 247, 251, 0.94);
    border-top-color: rgba(15, 23, 42, 0.12);
}

.campaign-start-modal-actions [hidden] {
    display: none !important;
}

@media (max-width: 640px) {
    #start-campaign-modal {
        align-items: center;
        padding: 12px;
    }

    #start-campaign-modal .modal-content {
        max-width: 94vw;
        max-height: calc(var(--viewport-height, 100svh) - 24px);
    }

    .campaign-start-modal-body {
        padding: 12px 12px 8px;
    }

    .campaign-start-modal-actions {
        justify-content: stretch;
        gap: 8px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    }

    .campaign-start-modal-actions button {
        flex: 1 1 100%;
        width: 100%;
    }
}

#campaign-cost-summary[hidden] {
    display: none !important;
}

.campaign-start-modal-actions {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
    background: transparent;
    backdrop-filter: none;
}

html[data-theme="light"] .campaign-start-modal-actions {
    background: transparent;
}

.campaign-start-modal-actions button {
    flex: 1 1 0;
    min-width: 0;
    white-space: normal;
    padding-inline: 10px;
}

@media (max-width: 640px) {
    .campaign-start-modal-actions {
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 8px;
        background: transparent;
        backdrop-filter: none;
    }

    .campaign-start-modal-actions button {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        padding: 10px 6px;
        font-size: 13px;
        line-height: 1.45;
    }

    .mobile-compact-modal-actions {
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .mobile-compact-modal-actions button {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        padding: 10px 6px;
        font-size: 13px;
        line-height: 1.45;
        white-space: normal;
    }
}

.campaign-start-modal-actions {
    border-top: none;
}

button#pause-campaign-btn {
    margin-top: 0px !important;
}

#toast button.btn-secondary{
    margin-top: 0 !important;
    margin-right: 10px !important;
}

#future-payments-body .purchase-actions button{
    margin-top: 0 !important;
}

input#appointments-date{
    padding: 0px;
}
.tags-suggestions {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tag-suggestion-chip {
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
}
.tag-suggestion-chip:hover {
    transform: translateY(-1px);
    background: rgba(81, 162, 255, 0.25);
    border-color: rgba(81, 162, 255, 0.6);
}

#tag-filter[multiple] {
    min-height: 120px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.tag-match-all-wrap {
    width: 100%;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.tag-match-all-wrap[hidden] {
    display: none !important;
}
.switch-label {
    font-size: 0.9rem;
    font-weight: 600;
}
.multi-select-hidden {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
}
.multi-select-control { position: relative; width: 100%; }
.multi-select-trigger {
    width: 100%;
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: inherit;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 12px;
}
.multi-select-count { background: rgba(56,189,248,.2); padding: 2px 8px; border-radius: 999px; font-size: 12px; }
.multi-select-menu {
    position: absolute; top: calc(100% + 8px); right: 0; left: 0; z-index: 40;
    display: none; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto;
    border: 1px solid var(--input-border); border-radius: 12px; padding: 8px;
    /* Was a hard-coded dark `rgba(15, 23, 42, 0.97)` with no light-theme
       override, so which theme this panel obeyed depended on whether
       multi-select.css happened to win the cascade. Tokens instead, and an
       explicit `color`, because `.multi-select-option` below is `color:
       inherit` and would otherwise take whatever an unrelated ancestor set. */
    background: var(--select-surface);
    color: var(--select-text);
}
.multi-select-control.is-open .multi-select-menu { display: flex; }
.multi-select-option { display:flex; align-items:center; gap:8px; padding:8px; border-radius:8px; cursor:pointer; color: inherit; }
.multi-select-option:hover,
.multi-select-option:focus-visible { background: var(--select-surface-hover); color: var(--select-text); }
.multi-select-option input { display:none; }
.checkbox-box {
    width: 18px; height: 18px; border-radius: 6px;
    border: 1px solid rgba(255,255,255,.35); display:inline-flex; align-items:center; justify-content:center;
}
.checkbox-tick {
    opacity: 0;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-1px);
}
.multi-select-option[aria-selected="true"] .checkbox-box { background: #38bdf8; border-color: #38bdf8; color: #06202d; }
.multi-select-option[aria-selected="true"] .checkbox-tick { opacity: 1; }

/* The chips row under a multi-select — see js/multi_select.js.
   ==========================================================================

   The part a native `<select multiple>` never had: what is currently chosen,
   printed BY NAME, each with its own × so one item can be dropped without
   disturbing the rest. It sits below the closed field, so the answer is
   readable without opening the menu at all.

   Own class names (`ms-*`) rather than `multi-select-chip`, deliberately: three
   pages (automation, segments, tasks) load `css/multi-select.css` AFTER this
   file and define their own `.multi-select-chip`. Sharing the name would make
   this block's rules win or lose depending on which stylesheets a page happens
   to load, which is exactly the class of bug the comment above `.multi-select-menu`
   was written about. */
.ms-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

/* Nothing chosen yet is a sentence, not an empty strip: a blank row under a
   required field reads as a rendering failure. */
.ms-chips.is-empty {
    display: block;
    font-size: 12px;
    color: var(--text-muted, #94a3b8);
}

.ms-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.9;
    /* The same pair the selected menu row uses, so a chip and its ticked option
       are visibly the same thing. */
    background: rgba(56, 189, 248, .16);
    border: 1px solid rgba(56, 189, 248, .32);
    color: var(--select-text, inherit);
    /* A department path can be long; wrap inside the chip rather than pushing
       the row wider than the field. */
    overflow-wrap: anywhere;
}

.ms-chip-remove {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, .22);
    color: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}

.ms-chip-remove:hover,
.ms-chip-remove:focus-visible {
    background: rgba(239, 68, 68, .55);
    color: #fff;
}

html[data-theme="light"] .ms-chip {
    background: rgba(14, 165, 233, .12);
    border-color: rgba(14, 165, 233, .3);
}

html[data-theme="light"] .ms-chip-remove {
    background: rgba(15, 23, 42, .12);
}

/* Locked, not hidden. `holoo_department_lock.js` disables the underlying
   `<select>` for a customer whose department is bound to an accounting
   connection; the visible control is a sibling button, so it has to be told.
   The chips stay readable — the operator still needs to see which departments
   the customer is in — but lose their × . */
.multi-select-control.is-disabled .multi-select-trigger,
.multi-select-trigger:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.ms-chips.is-disabled .ms-chip-remove {
    display: none;
}

/* The menu's "this account has no departments you may pick" row. Declared here
   because `multi_select.js` renders it and only `css/multi-select.css` had a
   rule for it — and that file is not loaded on the customer pages. */
.multi-select-empty {
    padding: 10px;
    font-size: 12px;
    text-align: center;
    color: var(--text-muted, #94a3b8);
}
.modern-switch .slider {
    position: relative; width: 46px; height: 26px; display:inline-block;
    background: rgba(255,255,255,.2); border-radius: 999px; transition: .2s ease;
}
.modern-switch .slider::before {
    content: ''; position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%;
    background: #fff; transition: .2s ease;
}
.modern-switch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.modern-switch input:checked + .slider { background: #38bdf8; }
.modern-switch input:checked + .slider::before { right: 23px; }


span.multi-select-placeholder {
    font-family: 'Vazirmatn';
    margin-right: 25px;
}

button.tag-suggestion-chip {
    font-family: 'Vazirmatn';
}

.response-summary-meta button.icon-button.response-print-btn {
    background: none;
    border: none;
}

button#view-responses-report {
    margin-top: 0px !important;
}

button#export-responses {
    margin-top: 0px !important;
}


button#refresh-responses {
    background: none;
    border: none;
}
.customer-form-empty {
    padding: 16px;
    border: 1px dashed rgba(148, 163, 184, 0.35);
    border-radius: 12px;
    background: rgba(17, 25, 40, 0.35);
    text-align: center;
}

.customer-form-response-card {
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(17, 25, 40, 0.55);
    border-radius: 14px;
    padding: 14px;
}

.customer-form-response-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.customer-form-response-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.customer-form-response-header h5 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 1rem;
}

.customer-form-response-card .response-answers li {
    padding: 8px 0;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.customer-form-response-card .answer-value {
    color: #fff;
    text-align: left;
    overflow-wrap: anywhere;
}


#customer-source-options-list .btn-secondary{
    margin-top: 0px !important;
}

#tab-form-responses .glass-content {
    margin: 10px;
}

button {
    font-family: 'Vazirmatn';
}

input {
    font-family: 'Vazirmatn';
}

@media (min-width: 768px) {
    .campaign-customers-toolbar {
        margin: 10px;
    }
}


/* The picker menu is dark in the dark theme and white in the light theme, so
   the option label has to follow it. This was an unconditional `white`, which
   left every multi-select option invisible in light mode. */
span.multi-select-label {
    color: var(--option-text, #ffffff) !important;
}




@media (max-width: 600px) {
    #sidebar .glass-content {
        padding: 18px;
        padding-bottom: 0px;
    }
}

.reminder-page-container .timeline-content .reminder-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.reminder-page-container .timeline-content .reminder-meta-row .customer-link-sm {
    margin-top: 0;
}

.reminder-creator-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(56, 189, 248, 0.28);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(99, 102, 241, 0.14));
    color: #bae6fd;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    box-shadow: 0 10px 24px rgba(14, 165, 233, 0.08);
}

.reminder-creator-badge i {
    color: #7dd3fc;
    font-size: 12px;
}

html[data-theme="light"] .reminder-creator-badge {
    border-color: rgba(2, 132, 199, 0.22);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(99, 102, 241, 0.08));
    color: #075985;
    box-shadow: 0 10px 24px rgba(2, 132, 199, 0.08);
}

html[data-theme="light"] .reminder-creator-badge i {
    color: #0284c7;
}

.reminder-visibility-options {
    display: grid;
    gap: 12px;
    margin: 16px 0;
}

.reminder-visibility-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.18);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.reminder-visibility-option:hover {
    transform: translateY(-1px);
    border-color: rgba(56, 189, 248, 0.38);
    background: rgba(14, 165, 233, 0.08);
}

.reminder-visibility-option input {
    margin-top: 4px;
    accent-color: #0ea5e9;
}

.reminder-visibility-option span {
    display: grid;
    gap: 5px;
}

.reminder-visibility-option strong {
    color: #f8fafc;
    font-size: 14px;
}

.reminder-visibility-option small {
    color: #cbd5e1;
    line-height: 1.8;
}

html[data-theme="light"] .reminder-visibility-option {
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(248, 250, 252, 0.76);
}

html[data-theme="light"] .reminder-visibility-option:hover {
    border-color: rgba(2, 132, 199, 0.28);
    background: rgba(14, 165, 233, 0.08);
}

html[data-theme="light"] .reminder-visibility-option strong {
    color: #0f172a;
}

html[data-theme="light"] .reminder-visibility-option small {
    color: #475569;
}

.customers-page .customers-table-area {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.customers-page .table-container {
    min-width: 0;
}

.customers-page .customers-pagination-panel {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    text-align: initial;
    overflow: visible;
}

.customers-page .customers-pagination-panel .customers-pagination {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

@media (max-width: 720px) {
    .customers-page .customers-table-area {
        gap: 12px;
    }

    .customers-page .customers-pagination-panel {
        padding: 0;
    }
}

/* Customers pagination: keep the panel aligned with the customer list card and give it the same glass feel. */
.customers-page .customers-pagination-panel {
    max-width: 100%;
    overflow: hidden;
}

.customers-page .customers-pagination-panel .customers-pagination {
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

.customers-page .customers-pagination-panel .customers-pagination::before,
.customers-page .customers-pagination-panel .customers-pagination::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.customers-page .customers-pagination-panel .customers-pagination::before {
    z-index: 0;
    backdrop-filter: blur(10px) saturate(120%) brightness(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(120%) brightness(1.1);
}

.customers-page .customers-pagination-panel .customers-pagination::after {
    z-index: 0;
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.4);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035));
}

.customers-page .customers-pagination-panel .customers-pagination > * {
    position: relative;
    z-index: 1;
}

html[data-theme="light"] .customers-page .customers-pagination-panel .customers-pagination {
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .customers-page .customers-pagination-panel .customers-pagination::after {
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.7);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(248, 250, 252, 0.22));
}

.sms-inbound-only-option {
  align-items: center;
  gap: 10px;
  margin: 12px 0 2px;
  padding: 12px 14px;
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 14px;
  background: rgba(56, 189, 248, 0.08);
  color: var(--text-primary, #e5e7eb);
  font-weight: 700;
  line-height: 1.8;
  cursor: pointer;
}

.sms-inbound-only-option input {
  width: 18px;
  height: 18px;
  accent-color: #38bdf8;
  flex: 0 0 auto;
}

.glass-content.customer-pipeline-hero-content {
    padding: 15px;
}

button#daryayar-toggle {
    z-index: 10;
}

button#cas-filter-apply {
    margin-top: 0px !important;
}

button#cas-search-btn {
    margin-top: 0px !important;
}
/* Department hierarchy cards */
.department-tree-row td:first-child {
    min-width: 280px;
}
.department-tree-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "badge title"
        "badge hint";
    align-items: center;
    gap: 5px 10px;
    width: fit-content;
    max-width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(126, 231, 243, 0.22);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(2, 195, 213, 0.12), rgba(255, 255, 255, 0.06));
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14);
}
.department-tree-card--level-2 {
    margin-right: 42px;
    border-color: rgba(168, 85, 247, 0.32);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.14), rgba(2, 195, 213, 0.07));
}
.department-tree-card--level-3 {
    margin-right: 84px;
    border-color: rgba(34, 197, 94, 0.32);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.13), rgba(2, 195, 213, 0.06));
}
.department-tree-rail {
    position: absolute;
    top: 50%;
    right: -34px;
    width: 28px;
    height: 2px;
    background: linear-gradient(90deg, rgba(126, 231, 243, 0), rgba(126, 231, 243, 0.65));
    display: none;
}
.department-tree-card--level-2 .department-tree-rail,
.department-tree-card--level-3 .department-tree-rail {
    display: block;
}
.department-level-badge {
    grid-area: badge;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(2, 195, 213, 0.18);
    color: #bff7ff;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}
.department-tree-title {
    grid-area: title;
    width: fit-content;
}
.department-parent-hint {
    grid-area: hint;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.82rem;
}
html[data-theme="light"] .department-tree-card {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.10), rgba(255, 255, 255, 0.92));
    border-color: rgba(14, 165, 233, 0.26);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] .department-tree-card--level-2 {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.10), rgba(255, 255, 255, 0.94));
    border-color: rgba(147, 51, 234, 0.24);
}
html[data-theme="light"] .department-tree-card--level-3 {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.10), rgba(255, 255, 255, 0.94));
    border-color: rgba(22, 163, 74, 0.24);
}
html[data-theme="light"] .department-level-badge {
    background: rgba(14, 165, 233, 0.12);
    color: #0369a1;
}
html[data-theme="light"] .department-parent-hint {
    color: rgba(51, 65, 85, 0.76);
}

/* --- Holoo-connected departments are leaves ------------------------------
   The badge sits INSIDE `.department-parent-hint`, not beside it: the card is a
   two-row named grid ("badge title" / "badge hint") and a third child would be
   auto-placed into a row of its own. Nested, it flows with the hint text and the
   card keeps the shape every other row has.
   The locked add-child control is rendered in place of the button rather than
   omitted, so the reason is readable on hover instead of the action silently
   not being there. It is an <a> with no handler and `aria-disabled`, matching
   how the page's other withheld actions behave. */
.department-holoo-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(2, 195, 213, 0.18);
    color: #bff7ff;
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}
.department-holoo-badge i { font-size: 0.68rem; }
html[data-theme="light"] .department-holoo-badge {
    background: rgba(14, 165, 233, 0.14);
    color: #0369a1;
}
.actions .create-child-btn.is-locked {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: auto;
}
@media (max-width: 768px) {
    .department-tree-card--level-2 { margin-right: 24px; }
    .department-tree-card--level-3 { margin-right: 48px; }
    .department-tree-rail { right: -22px; width: 18px; }
}

/* Department tree depth + "locked by parent" styling for the SMS modal now
   lives with the rest of the picker in css/pill_select.css. */


/* Keep hidden modal overlays hidden even after later compatibility modal rules. */
.modal-overlay[hidden],
.modal-overlay[aria-hidden="true"] {
  display: none !important;
}

/* Enhanced classic departments page (kept outside the modern v2 department bundle). */
.departments-page:not(.departments-page--modern) {
    display: grid;
    gap: 18px;
}
.departments-page:not(.departments-page--modern) .departments-modern-header {
    padding: 22px 24px;
    border: 1px solid rgba(126, 231, 243, 0.18);
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(2, 195, 213, 0.24), transparent 34%),
        linear-gradient(135deg, rgba(6, 18, 32, 0.78), rgba(14, 45, 63, 0.58));
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
    margin-bottom: 0;
}
.departments-classic-subtitle {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.74);
    line-height: 1.9;
}
.departments-classic-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 14px;
}
.departments-classic-overview article,
.departments-classic-toolbar {
    border: 1px solid rgba(126, 231, 243, 0.18);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.075);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(14px);
}
.departments-classic-overview article {
    padding: 16px 18px;
    display: grid;
    gap: 8px;
}
.departments-classic-overview span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.9rem;
}
.departments-classic-overview strong {
    color: #bff7ff;
    font-size: 1.55rem;
}
.departments-classic-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
}
.departments-search {
    flex: 1 1 320px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    min-height: 48px;
    border: 1px solid rgba(126, 231, 243, 0.22);
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.16);
    color: #7ee7f3;
}
.departments-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font-family: inherit;
}
.departments-toolbar-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.departments-page:not(.departments-page--modern) .departments-table-card .glass-content {
    padding: 10px;
}
.departments-page:not(.departments-page--modern) .data-table {
    border-collapse: separate;
    border-spacing: 0 10px;
}
.departments-page:not(.departments-page--modern) .data-table thead {
    background: transparent;
}
.departments-page:not(.departments-page--modern) .data-table tbody tr {
    border: 1px solid rgba(126, 231, 243, 0.14);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.055);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.departments-page:not(.departments-page--modern) .data-table tbody tr:hover {
    transform: translateY(-2px);
    border-color: rgba(126, 231, 243, 0.34);
    background: rgba(126, 231, 243, 0.08);
}
.departments-page:not(.departments-page--modern) .data-table tbody td:first-child {
    border-radius: 0 18px 18px 0;
}
.departments-page:not(.departments-page--modern) .data-table tbody td:last-child {
    border-radius: 18px 0 0 18px;
}
.departments-page:not(.departments-page--modern) .department-tree-card {
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
        "toggle badge title"
        "toggle badge hint";
    min-width: min(560px, 100%);
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 6px 4px;
}
.department-toggle,
.department-toggle-spacer {
    grid-area: toggle;
    width: 34px;
    height: 34px;
}
.department-toggle {
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(126, 231, 243, 0.32);
    border-radius: 12px;
    background: rgba(2, 195, 213, 0.13);
    color: #bff7ff;
    cursor: pointer;
    transition: all 0.2s ease;
}
.department-toggle:hover {
    background: rgba(2, 195, 213, 0.25);
    transform: scale(1.04);
}
.department-count-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 74px;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #e8fbff;
    text-decoration: none;
}
.departments-page:not(.departments-page--modern) .actions a {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
}
html[data-theme="light"] .departments-page:not(.departments-page--modern) .departments-modern-header,
body.light-theme .departments-page:not(.departments-page--modern) .departments-modern-header {
    background: linear-gradient(135deg, rgba(240, 249, 255, 0.98), rgba(224, 242, 254, 0.9));
    border-color: rgba(14, 165, 233, 0.2);
}
html[data-theme="light"] .departments-classic-subtitle,
body.light-theme .departments-classic-subtitle,
html[data-theme="light"] .departments-classic-overview span,
body.light-theme .departments-classic-overview span {
    color: #64748b;
}
html[data-theme="light"] .departments-classic-overview article,
html[data-theme="light"] .departments-classic-toolbar,
body.light-theme .departments-classic-overview article,
body.light-theme .departments-classic-toolbar {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] .departments-classic-overview strong,
body.light-theme .departments-classic-overview strong {
    color: #0369a1;
}
html[data-theme="light"] .departments-search,
body.light-theme .departments-search {
    background: #fff;
    color: #0284c7;
}
html[data-theme="light"] .departments-search input,
body.light-theme .departments-search input {
    color: #0f172a;
}
html[data-theme="light"] .departments-page:not(.departments-page--modern) .data-table tbody tr,
body.light-theme .departments-page:not(.departments-page--modern) .data-table tbody tr {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] .department-count-pill,
body.light-theme .department-count-pill {
    background: rgba(14, 165, 233, 0.09);
    color: #075985;
}
@media (max-width: 900px) {
    .departments-classic-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .departments-classic-toolbar { align-items: stretch; flex-direction: column; }
    .departments-search { flex-basis: auto; }
}
@media (max-width: 640px) {
    .departments-classic-overview { grid-template-columns: 1fr; }
    .departments-page:not(.departments-page--modern) .department-tree-card--level-2 { margin-right: 18px; }
    .departments-page:not(.departments-page--modern) .department-tree-card--level-3 { margin-right: 34px; }
}

.departments-page:not(.departments-page--modern) .actions a.details-btn:hover { color: #7ee7f3; }
.department-details-modal .department-details-content {
    max-width: 720px;
    width: min(720px, calc(100vw - 32px));
}
.department-details-body { display: grid; gap: 18px; }
.department-details-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(126, 231, 243, 0.22);
    background: linear-gradient(135deg, rgba(2, 195, 213, 0.18), rgba(108, 92, 231, 0.16));
}
.department-details-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.12);
    color: #bff7ff;
    font-size: 1.45rem;
}
.department-details-hero span,
.department-details-section-title,
.department-details-grid span { color: rgba(255, 255, 255, 0.72); }
.department-details-hero h3 { margin: 4px 0; color: #fff; }
.department-details-hero p { margin: 0; color: rgba(255, 255, 255, 0.68); }
.department-details-section {
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
}
.department-details-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-weight: 700;
}
.department-details-note {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(253, 203, 110, 0.13);
    color: #ffeaa7;
}
.department-details-managers {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}
.department-details-managers li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.14);
}
.department-details-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(126, 231, 243, 0.16);
    color: #7ee7f3;
}
.department-details-managers strong { display: block; color: #fff; }
.department-details-managers small { color: rgba(255, 255, 255, 0.62); }
.department-details-empty,
.department-details-loading,
.department-details-error {
    justify-content: center;
    color: rgba(255, 255, 255, 0.72);
    text-align: center;
}
.department-details-error { color: #ffb4b4; }
.department-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.department-details-grid article {
    display: grid;
    gap: 8px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(126, 231, 243, 0.14);
    background: rgba(255, 255, 255, 0.07);
}
.department-details-grid span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}
.department-details-grid strong { color: #e8fbff; line-height: 1.8; }
html[data-theme="light"] .department-details-hero,
body.light-theme .department-details-hero,
html[data-theme="light"] .department-details-section,
body.light-theme .department-details-section,
html[data-theme="light"] .department-details-grid article,
body.light-theme .department-details-grid article {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(14, 165, 233, 0.16);
}
html[data-theme="light"] .department-details-hero h3,
html[data-theme="light"] .department-details-managers strong,
html[data-theme="light"] .department-details-grid strong,
body.light-theme .department-details-hero h3,
body.light-theme .department-details-managers strong,
body.light-theme .department-details-grid strong { color: #0f172a; }
html[data-theme="light"] .department-details-hero span,
html[data-theme="light"] .department-details-hero p,
html[data-theme="light"] .department-details-section-title,
html[data-theme="light"] .department-details-grid span,
html[data-theme="light"] .department-details-managers small,
body.light-theme .department-details-hero span,
body.light-theme .department-details-hero p,
body.light-theme .department-details-section-title,
body.light-theme .department-details-grid span,
body.light-theme .department-details-managers small { color: #64748b; }
html[data-theme="light"] .department-details-managers li,
body.light-theme .department-details-managers li { background: rgba(14, 165, 233, 0.08); }
html[data-theme="light"] .department-details-note,
body.light-theme .department-details-note { color: #92400e; background: #fffbeb; }
@media (max-width: 640px) {
    .department-details-hero { align-items: flex-start; }
    .department-details-grid { grid-template-columns: 1fr; }
}

/* Keep the department details modal fixed while long content scrolls internally. */
.department-details-modal {
    padding: 24px;
    overflow: hidden;
}
.department-details-modal .department-details-content {
    max-height: calc(100vh - 48px);
    overflow: hidden;
}
.department-details-modal .department-details-content > .glass-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
    min-height: 0;
}
.department-details-modal .department-details-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-inline-end: 4px;
}
.department-details-modal .modal-actions {
    flex: 0 0 auto;
    margin-top: 14px;
}

/* --- Classic campaign detail layout refresh --- */
.campaign-detail-page:not(.campaign-detail-modern) {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.campaign-detail-page:not(.campaign-detail-modern) .campaign-detail-topbar {
    display: flex;
    justify-content: flex-start;
}

.campaign-detail-page:not(.campaign-detail-modern) .campaign-back-btn,
.campaign-detail-page:not(.campaign-detail-modern) .action-btn,
.campaign-detail-page:not(.campaign-detail-modern) .campaign-report-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 14px;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.14);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.campaign-detail-page:not(.campaign-detail-modern) .campaign-back-btn:hover,
.campaign-detail-page:not(.campaign-detail-modern) .action-btn:hover,
.campaign-detail-page:not(.campaign-detail-modern) .campaign-report-link:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.3);
}

.campaign-detail-page:not(.campaign-detail-modern) .campaign-detail-header {
    margin-bottom: 0;
    padding: 22px;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background:
        radial-gradient(circle at 12% 20%, rgba(0, 184, 148, 0.22), transparent 32%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
    gap: 18px;
}

.campaign-detail-page:not(.campaign-detail-modern) .campaign-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.campaign-detail-page:not(.campaign-detail-modern) .campaign-info h1 {
    font-size: clamp(1.4rem, 2vw, 2rem);
    font-weight: 900;
}

.campaign-detail-page:not(.campaign-detail-modern) .campaign-meta-strip {
    margin: 0;
}

.campaign-detail-page:not(.campaign-detail-modern) .campaign-meta-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 12px;
}

.campaign-detail-page:not(.campaign-detail-modern) .campaign-meta-item {
    min-height: 92px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
}

.campaign-detail-page:not(.campaign-detail-modern) .campaign-meta-item span,
.campaign-detail-page:not(.campaign-detail-modern) .campaign-meta-item small {
    color: #cbd5e1;
    font-size: 12px;
}

.campaign-detail-page:not(.campaign-detail-modern) .campaign-meta-item strong {
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-detail-page:not(.campaign-detail-modern) .two-column-layout {
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    grid-template-areas:
        "side main"
        "stats main";
    gap: 22px;
    direction: ltr;
}

.campaign-detail-page:not(.campaign-detail-modern) .main-column {
    grid-area: main;
    min-width: 0;
    direction: rtl;
}

.campaign-detail-page:not(.campaign-detail-modern) .sidebar-column {
    grid-area: side;
    min-width: 0;
    direction: rtl;
}

.campaign-detail-page:not(.campaign-detail-modern) .campaign-stats-column {
    grid-area: stats;
    min-width: 0;
    direction: rtl;
}

.campaign-detail-page:not(.campaign-detail-modern) .table-container,
.campaign-detail-page:not(.campaign-detail-modern) .info-card,
.campaign-detail-page:not(.campaign-detail-modern) .campaign-stats-card {
    border-radius: 24px;
    overflow: hidden;
}

.campaign-detail-page:not(.campaign-detail-modern) .info-card .glass-content,
.campaign-detail-page:not(.campaign-detail-modern) .campaign-stats-card .glass-content,
.campaign-detail-page:not(.campaign-detail-modern) .table-container .glass-content {
    padding: 20px;
}

.campaign-detail-page:not(.campaign-detail-modern) .info-card h4,
.campaign-detail-page:not(.campaign-detail-modern) .campaign-stats-card h4,
.campaign-detail-page:not(.campaign-detail-modern) .campaign-customers-toolbar h4 {
    margin: 0 0 16px;
    color: #fff;
    font-size: 17px;
    font-weight: 900;
}

.campaign-detail-page:not(.campaign-detail-modern) .sms-preview {
    min-height: 210px;
    margin: 0;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.28), rgba(15, 23, 42, 0.12));
    color: #f8fafc;
    line-height: 2;
}

.campaign-detail-page:not(.campaign-detail-modern) .campaign-stat-donut {
    width: 150px;
    height: 150px;
    margin: 4px auto 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-align: center;
    background: radial-gradient(circle, rgba(15, 23, 42, 0.45) 52%, transparent 54%), conic-gradient(#00b894 0 72%, rgba(255, 255, 255, 0.16) 72% 100%);
}

.campaign-detail-page:not(.campaign-detail-modern) .campaign-stat-donut span {
    display: block;
    color: #fff;
    font-size: 27px;
    font-weight: 900;
}

.campaign-detail-page:not(.campaign-detail-modern) .campaign-stat-donut small {
    display: block;
    color: #cbd5e1;
    font-size: 12px;
}

.campaign-detail-page:not(.campaign-detail-modern) .campaign-stat-list {
    display: grid;
    gap: 10px;
}

.campaign-detail-page:not(.campaign-detail-modern) .campaign-stat-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
}

.campaign-detail-page:not(.campaign-detail-modern) .campaign-stat-list strong {
    color: #fff;
    font-size: 16px;
}

.campaign-detail-page:not(.campaign-detail-modern) .campaign-customers-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.campaign-detail-page:not(.campaign-detail-modern) .campaign-customer-search {
    position: relative;
    flex: 0 1 360px;
}

.campaign-detail-page:not(.campaign-detail-modern) .campaign-customer-search i {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
}

.campaign-detail-page:not(.campaign-detail-modern) #campaign-customer-search {
    width: 100%;
    min-height: 42px;
    padding-inline-start: 38px;
    border-radius: 14px;
}

.campaign-detail-page:not(.campaign-detail-modern) .data-table {
    overflow: hidden;
    border-radius: 18px;
}

.campaign-detail-page:not(.campaign-detail-modern) .data-table th {
    background: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

.campaign-detail-page:not(.campaign-detail-modern) .data-table th,
.campaign-detail-page:not(.campaign-detail-modern) .data-table td {
    padding: 14px 16px;
}

html[data-theme="light"] .campaign-detail-page:not(.campaign-detail-modern) .campaign-detail-header,
html[data-theme="light"] .campaign-detail-page:not(.campaign-detail-modern) .campaign-meta-item,
html[data-theme="light"] .campaign-detail-page:not(.campaign-detail-modern) .campaign-stat-list div {
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.78);
}

html[data-theme="light"] .campaign-detail-page:not(.campaign-detail-modern) .campaign-info h1,
html[data-theme="light"] .campaign-detail-page:not(.campaign-detail-modern) .campaign-meta-item strong,
html[data-theme="light"] .campaign-detail-page:not(.campaign-detail-modern) .info-card h4,
html[data-theme="light"] .campaign-detail-page:not(.campaign-detail-modern) .campaign-stats-card h4,
html[data-theme="light"] .campaign-detail-page:not(.campaign-detail-modern) .campaign-customers-toolbar h4,
html[data-theme="light"] .campaign-detail-page:not(.campaign-detail-modern) .campaign-stat-list strong {
    color: #0f172a;
}

html[data-theme="light"] .campaign-detail-page:not(.campaign-detail-modern) .campaign-meta-item span,
html[data-theme="light"] .campaign-detail-page:not(.campaign-detail-modern) .campaign-meta-item small,
html[data-theme="light"] .campaign-detail-page:not(.campaign-detail-modern) .campaign-stat-list div {
    color: #475569;
}

html[data-theme="light"] .campaign-detail-page:not(.campaign-detail-modern) .sms-preview {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.1);
    color: #0f172a;
}

html[data-theme="light"] .campaign-detail-page:not(.campaign-detail-modern) .campaign-back-btn,
html[data-theme="light"] .campaign-detail-page:not(.campaign-detail-modern) .action-btn,
html[data-theme="light"] .campaign-detail-page:not(.campaign-detail-modern) .campaign-report-link {
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.76);
}

@media (max-width: 1180px) {
    .campaign-detail-page:not(.campaign-detail-modern) .campaign-meta-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .campaign-detail-page:not(.campaign-detail-modern) .two-column-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "side" "stats" "main";
        direction: rtl;
    }
}

@media (max-width: 768px) {
    .campaign-detail-page:not(.campaign-detail-modern) .campaign-detail-header {
        flex-direction: column;
        align-items: stretch;
    }

    .campaign-detail-page:not(.campaign-detail-modern) .campaign-meta-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .campaign-detail-page:not(.campaign-detail-modern) .campaign-actions .action-btn {
        flex: 1 1 140px;
    }

    .campaign-detail-page:not(.campaign-detail-modern) .campaign-customer-search {
        flex-basis: 100%;
    }
}

/* Keep campaign customer picker inside viewport without scrolling the page */
#customer-filter-modal.campaign-customer-modal {
    align-items: center;
    justify-content: center;
    padding: 18px;
    overflow: hidden;
    box-sizing: border-box;
}

#customer-filter-modal.campaign-customer-modal .modal-content {
    width: min(940px, calc(100vw - 36px));
    max-height: min(760px, calc(var(--viewport-height, 100svh) - 36px));
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
}

#customer-filter-modal.campaign-customer-modal .glass-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    max-height: 100%;
    padding: 18px;
    overflow: hidden;
}

#customer-filter-modal.campaign-customer-modal .glass-content > h3 {
    flex: 0 0 auto;
    margin-bottom: 4px;
}

#customer-filter-modal.campaign-customer-modal .filter-modal-layout {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

#customer-filter-modal.campaign-customer-modal .filter-sidebar,
#customer-filter-modal.campaign-customer-modal .filter-results,
#customer-filter-modal.campaign-customer-modal .results-list {
    min-height: 0;
}

#customer-filter-modal.campaign-customer-modal .filter-sidebar {
    overflow-y: auto;
    padding-inline-end: 6px;
}

#customer-filter-modal.campaign-customer-modal .filter-results {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#customer-filter-modal.campaign-customer-modal .results-list {
    flex: 1 1 auto;
    max-height: none;
    overflow-y: auto;
    padding-inline-end: 6px;
}

#customer-filter-modal.campaign-customer-modal .modal-actions {
    flex: 0 0 auto;
    margin-top: 0;
    padding-top: 10px;
}

@media (max-width: 768px) {
    #customer-filter-modal.campaign-customer-modal {
        align-items: stretch;
        padding: 10px;
    }

    #customer-filter-modal.campaign-customer-modal .modal-content {
        width: 100%;
        max-height: calc(var(--viewport-height, 100svh) - 20px);
    }

    #customer-filter-modal.campaign-customer-modal .filter-modal-layout {
        overflow-y: auto;
    }

    #customer-filter-modal.campaign-customer-modal .filter-sidebar,
    #customer-filter-modal.campaign-customer-modal .filter-results {
        overflow: visible;
    }

    #customer-filter-modal.campaign-customer-modal .results-list {
        max-height: 38vh;
    }
}

/* Collapsible categorized classic sidebar; keeps existing links and role guards intact */
.sidebar-nav-groups {
  display: grid;
  gap: 10px;
}

.sidebar-nav-group {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
  overflow: hidden;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.sidebar-nav-group[open] {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.sidebar-nav-group summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 13px;
  color: rgba(248, 250, 252, 0.88);
  cursor: pointer;
  user-select: none;
  list-style: none;
  border-radius: 16px;
  font-weight: 800;
  transition: background 0.2s ease, color 0.2s ease;
}

.sidebar-nav-group summary::-webkit-details-marker {
  display: none;
}

.sidebar-nav-group summary::after {
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: auto;
  font-size: 0.78rem;
  opacity: 0.75;
  transition: transform 0.2s ease;
}

.sidebar-nav-group[open] summary::after {
  transform: rotate(180deg);
}

.sidebar-nav-group summary:hover,
.sidebar-nav-group summary:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  outline: none;
}

.sidebar-nav-group summary > i {
  width: 26px;
  text-align: center;
  margin-left: 4px;
  color: rgba(125, 211, 252, 0.95);
}

.sidebar-nav-group > ul {
  display: grid;
  gap: 5px;
  padding: 0 8px 9px;
}

.sidebar-nav-group > ul > li a {
  margin-bottom: 0;
  padding: 10px 11px;
  border-radius: 12px;
}

.sidebar-nav-group > ul > li.active a {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.12));
  box-shadow: inset 3px 0 0 rgba(125, 211, 252, 0.9);
}

.sidebar-nav-group > ul > li a i {
  width: 26px;
  margin-left: 10px;
  font-size: 16px;
}

html[data-theme="light"] .sidebar-nav-group {
  border-color: rgba(15, 23, 42, 0.1);
  background: rgba(15, 23, 42, 0.035);
}

html[data-theme="light"] .sidebar-nav-group[open] {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .sidebar-nav-group summary {
  color: rgba(15, 23, 42, 0.78);
}

html[data-theme="light"] .sidebar-nav-group summary:hover,
html[data-theme="light"] .sidebar-nav-group summary:focus-visible {
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
}

html[data-theme="light"] .sidebar-nav-group summary > i {
  color: #0ea5e9;
}

html[data-theme="light"] .sidebar-nav-group > ul > li.active a {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.1), rgba(15, 23, 42, 0.05));
  box-shadow: inset 3px 0 0 rgba(14, 165, 233, 0.9);
}

/* Sidebar collapsible group refinements: remove native marker and reduce card height */
.sidebar-nav-group {
  border-radius: 13px;
}

.sidebar-nav-group summary {
  box-sizing: border-box;
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 13px;
  line-height: 1.35;
}

.sidebar-nav-group summary::marker {
  content: "";
  display: none;
}

.sidebar-nav-group summary::-webkit-details-marker {
  display: none;
}

.sidebar-nav-group > ul {
  gap: 4px;
  padding: 0 7px 8px;
}

.sidebar-nav-group > ul > li a {
  padding: 9px 10px;
}

.sidebar-nav-group summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0.75;
  font-family: inherit;
}

.sidebar-nav-group[open] summary::after {
  transform: rotate(225deg);
}

/* Pipeline uses the same customer edit modal structure; keep only the modal body scrollable */
#customer-modal.pipeline-customer-edit-modal {
  overflow: hidden;
  align-items: center;
  justify-content: center;
}

#customer-modal.pipeline-customer-edit-modal .modal-content.modal-responsive {
  max-height: calc(var(--viewport-height, 100svh) - 40px);
  overflow: hidden;
}

#customer-modal.pipeline-customer-edit-modal .modal-header-sticky,
#customer-modal.pipeline-customer-edit-modal .modal-footer-sticky {
  flex: 0 0 auto;
}

#customer-modal.pipeline-customer-edit-modal .modal-body-scroll {
  min-height: 0;
  overflow-y: auto;
}

button#ui-version-modern-btn {
    display: none;
}

input#confirmText {
    border-radius: 20px;
    height: 30px;
}

button#expand-all-departments {
    margin-top: 0px !important;
}

button#collapse-all-departments {
    margin-top: 0px !important;
}


html[data-theme="light"] .sidebar-header {
    border-bottom: 1px solid rgb(0 0 0 / 20%);
}


/* Customer table column settings */
.column-settings-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.column-settings-hint {
  margin: 0 0 14px;
  color: rgba(255,255,255,.72);
  font-size: .92rem;
  text-align: center;
}
.column-settings-search {
  position: relative;
  margin: 0 auto 14px;
  max-width: 560px;
}
.column-settings-search i {
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.55);
}
.column-settings-search input {
  width: 100%;
  padding: 12px 42px 12px 14px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  color: inherit;
  outline: none;
}
.column-settings-list {
  min-height: 180px;
  max-height: 360px;
  overflow: auto;
  padding-inline-end: 4px;
}
.column-settings-group + .column-settings-group {
  margin-top: 16px;
}
.column-settings-group h4 {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0 0 8px;
  padding: 8px 4px;
  color: rgba(255,255,255,.78);
  background: rgba(15,23,42,.72);
  backdrop-filter: blur(6px);
  font-size: .9rem;
}
.column-settings-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.045);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.column-settings-row:hover {
  border-color: rgba(90,200,250,.45);
  background: rgba(90,200,250,.08);
}
.column-settings-row[draggable="true"] {
  cursor: grab;
}
.column-settings-row .drag-handle {
  color: rgba(255,255,255,.45);
  text-align: center;
}
.column-settings-row label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  cursor: pointer;
  font-weight: 600;
}
.column-settings-row small {
  color: rgba(255,255,255,.55);
  font-size: .75rem;
}
.column-settings-actions {
  margin: 0;
}

.customers-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.customers-header-actions .column-settings-trigger {
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
}
.customers-header-actions .column-settings-trigger:hover {
  background: rgba(90,200,250,.16);
  border-color: rgba(90,200,250,.45);
}
@media (max-width: 768px) {
  .customers-header-actions {
    width: 100%;
    justify-content: stretch;
  }
  .customers-header-actions > :is(button, a) {
    flex: 1 1 0;
  }
}

/* Customer columns settings page */
.customer-columns-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.customer-columns-hero {
  align-items: flex-start;
}
.customer-columns-hero h1 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.customer-columns-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 18px;
  align-items: start;
}
.customer-columns-card .glass-content,
.customer-columns-help-card .glass-content,
.customer-columns-preview-card .glass-content {
  padding: 22px;
}
.section-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}
.section-title-row h2,
.customer-columns-help-card h2 {
  margin: 0 0 8px;
  font-size: 1.2rem;
}
.section-title-row p,
.customer-columns-help-card li {
  color: rgba(255,255,255,.72);
  line-height: 1.9;
}
.customer-columns-help-card ul {
  margin: 0;
  padding-inline-start: 20px;
}
.customer-columns-status {
  margin-top: 18px;
  border-radius: 14px;
  border: 1px solid rgba(90,200,250,.24);
  background: rgba(90,200,250,.08);
  color: rgba(255,255,255,.86);
  padding: 12px 14px;
  line-height: 1.8;
}
.customer-columns-search {
  margin-inline: 0;
  max-width: 100%;
}
.customer-columns-list {
  display: grid;
  gap: 18px;
}
.customer-columns-group h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(15,23,42,.5);
  color: rgba(255,255,255,.86);
  font-size: 1rem;
}
.customer-columns-row {
  grid-template-columns: 28px minmax(0, 1fr) auto;
}
.customer-columns-order {
  min-width: 34px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.72);
  font-size: .82rem;
  font-weight: 700;
}
.customer-columns-preview-card {
  position: sticky;
  bottom: 12px;
  z-index: 20;
}
.customer-columns-preview-table-wrap {
  overflow-x: auto;
  border-radius: 18px;
}
.customer-columns-preview-table {
  min-width: 760px;
}
.customer-columns-preview-table th,
.customer-columns-preview-table td {
  white-space: nowrap;
}
.empty-state {
  margin: 0;
  padding: 18px;
  border: 1px dashed rgba(255,255,255,.22);
  border-radius: 16px;
  color: rgba(255,255,255,.72);
  text-align: center;
}
html[data-theme="light"] .section-title-row p,
html[data-theme="light"] .customer-columns-help-card li {
  color: rgba(15, 23, 42, .68);
}
html[data-theme="light"] .customer-columns-status,
html[data-theme="light"] .customer-columns-group h3,
html[data-theme="light"] .customer-columns-order {
  color: rgba(15, 23, 42, .78);
}
@media (max-width: 992px) {
  .customer-columns-layout {
    grid-template-columns: 1fr;
  }
  .customer-columns-preview-card {
    position: relative;
    bottom: auto;
  }
}
@media (max-width: 640px) {
  .section-title-row,
  .customer-columns-hero {
    flex-direction: column;
  }
  .section-title-row .btn-primary,
  .section-title-row .btn-secondary,
  .customer-columns-hero .header-actions,
  .customer-columns-hero .header-actions > * {
    width: 100%;
  }
}

a#customer-column-settings-btn {
    min-height: 0px !important;
}

button#customer-columns-save-top {
    margin-top: 0px !important;
}

button#customer-columns-save-bottom {
    margin-top: 0px !important;
}
/* Loyalty landing page: reuse dashboard glass/stat/chart primitives with minimal layout polish. */
.loyalty-page .loyalty-features-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: stretch;
}
.loyalty-feature-card {
    min-height: 210px;
    color: inherit;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.loyalty-feature-card:hover,
.loyalty-feature-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    outline: none;
}
.loyalty-feature-card .glass-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
}
.loyalty-feature-card__head {
    display: flex;
    align-items: flex-start;
    gap: 0;
}
.loyalty-feature-card h3,
.loyalty-message-card h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 20px;
}
.loyalty-feature-card p,
.loyalty-message-card p {
    margin: 0;
    color: #ccc;
    line-height: 1.8;
}
.loyalty-feature-card__action {
    align-self: flex-start;
}
@media (max-width: 600px) {
    .loyalty-page .loyalty-features-grid { grid-template-columns: 1fr; }
    .loyalty-feature-card { min-height: 190px; }
}

/* Loyalty admin pages: small scoped refinements on top of dashboard cards/tables. */
.loyalty-admin-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.loyalty-admin-page .stats-grid {
    margin-bottom: 0;
}
.loyalty-filter-card,
.loyalty-table-card {
    min-height: 0;
}
.loyalty-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    align-items: center;
}
.loyalty-filter-grid--actions {
    display: flex;
    justify-content: flex-start;
}
.loyalty-filter-grid input,
.loyalty-filter-grid select,
.loyalty-filter-grid .btn {
    min-height: 44px;
}
.loyalty-table-card .glass-content {
    padding: 20px;
}
.loyalty-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.loyalty-icon-btn {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.loyalty-icon-btn:hover,
.loyalty-icon-btn:focus-visible {
    transform: translateY(-2px);
    background: rgba(2, 195, 213, 0.16);
    border-color: rgba(2, 195, 213, 0.42);
    outline: none;
}
.loyalty-icon-btn--success { color: #55efc4; }
.loyalty-icon-btn--warning { color: #fdcb6e; }
.loyalty-icon-btn--danger { color: #ff7675; }
.loyalty-number,
.loyalty-amount {
    direction: ltr;
    text-align: left;
    font-variant-numeric: tabular-nums;
}
.loyalty-amount--positive { color: #55efc4; }
.loyalty-amount--negative { color: #ff7675; }
.loyalty-muted { color: #cbd5e1; font-size: 0.85rem; }
.loyalty-empty-state {
    text-align: center !important;
    padding: 30px 16px !important;
    color: #cbd5e1;
}
.loyalty-page-message {
    margin-top: 12px;
    color: #fdcb6e;
}
.loyalty-pagination {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
    color: #cbd5e1;
}
.loyalty-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.loyalty-modal-header h3 {
    margin: 0;
}
.loyalty-modal-subtitle {
    margin: 18px 0 8px;
    font-size: 14px;
    color: #cbd5e1;
}
.loyalty-detail-table th {
    width: 40%;
    text-align: right;
    color: #94a3b8;
    font-weight: 600;
    white-space: nowrap;
}
.loyalty-detail-table td {
    text-align: right;
}
.loyalty-detail-list {
    margin: 0;
    padding-inline-start: 18px;
    color: #e2e8f0;
    font-size: 13px;
    word-break: break-word;
}
.loyalty-detail-list li {
    margin-bottom: 6px;
}

/* ---- Loyalty modal engine (loyalty_ui.js) ---- */
body.loyalty-modal-open { overflow: hidden; }
.loyalty-modal-overlay { z-index: 1200; padding: 16px; }
.loyalty-modal { width: 100%; max-width: 640px; display: flex; flex-direction: column; max-height: 90vh; }
.loyalty-modal--sm { max-width: 460px; }
.loyalty-modal--md { max-width: 640px; }
.loyalty-modal--lg { max-width: 900px; }
.loyalty-modal--xl { max-width: 1120px; }
.loyalty-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.loyalty-modal-title { margin: 0; font-size: 18px; }
.loyalty-modal-body { flex: 1 1 auto; overflow-y: auto; }
.loyalty-modal-foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.loyalty-modal-banner { border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 13px; font-weight: 600; }
.loyalty-modal-banner--error { background: rgba(239, 68, 68, .14); color: #fca5a5; border: 1px solid rgba(239, 68, 68, .35); }
.loyalty-modal-banner--success { background: rgba(0, 184, 148, .14); color: #6ee7b7; border: 1px solid rgba(0, 184, 148, .35); }
.loyalty-modal-banner--info { background: rgba(56, 189, 248, .14); color: #7dd3fc; border: 1px solid rgba(56, 189, 248, .35); }
.loyalty-modal-banner--warning { background: rgba(246, 185, 59, .16); color: #fcd34d; border: 1px solid rgba(246, 185, 59, .35); }

.loyalty-confirm { text-align: center; padding: 6px 4px 2px; }
.loyalty-confirm-icon { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.loyalty-confirm-icon--primary { background: rgba(94, 46, 227, .16); color: #a78bfa; }
.loyalty-confirm-icon--danger { background: rgba(239, 68, 68, .16); color: #f87171; }
.loyalty-confirm-icon--warning { background: rgba(246, 185, 59, .18); color: #fbbf24; }
.loyalty-confirm-icon--success { background: rgba(0, 184, 148, .16); color: #34d399; }
.loyalty-confirm-text { font-size: 15px; margin: 0 0 6px; line-height: 1.7; }
.loyalty-confirm-detail { font-size: 13px; color: #94a3b8; margin: 0; }

.loyalty-form-note { font-size: 13px; color: #94a3b8; margin: 0 0 14px; line-height: 1.7; }
.loyalty-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.loyalty-field { margin-bottom: 6px; }
.loyalty-field--full { grid-column: 1 / -1; }
.loyalty-form-section { grid-column: 1 / -1; font-size: 13px; font-weight: 700; color: #cbd5e1; border-bottom: 1px solid rgba(255, 255, 255, .1); padding-bottom: 6px; margin: 10px 0 4px; }
.loyalty-field--check { display: flex; flex-direction: column; justify-content: center; }
.loyalty-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.loyalty-check input { width: auto; margin: 0; }
.loyalty-field-help { display: block; color: #94a3b8; font-size: 11px; margin-top: 4px; }
.field-error { color: #f87171; font-size: 12px; margin-top: 4px; }
.loyalty-form .has-error, .loyalty-field .has-error { border-color: rgba(239, 68, 68, .6) !important; }

.loyalty-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.loyalty-tab { background: transparent; border: none; color: #94a3b8; padding: 8px 14px; cursor: pointer; font: inherit; font-size: 13px; border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0; }
.loyalty-tab:hover { color: #e2e8f0; }
.loyalty-tab.active { color: #fff; border-bottom-color: #5e2ee3; background: rgba(94, 46, 227, .12); }
.loyalty-page-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.loyalty-page-section { display: none; }
.loyalty-page-section.active { display: block; }

.loyalty-picker-results { max-height: 300px; overflow-y: auto; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; padding: 6px; margin-bottom: 12px; }
.loyalty-picker-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.loyalty-picker-row:hover { background: rgba(255, 255, 255, .05); }
.loyalty-picker-row.is-disabled { opacity: .55; cursor: not-allowed; }
.loyalty-picker-info { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.loyalty-pagination { align-items: center; gap: 10px; }
.loyalty-pagination .btn { padding: 6px 12px; }

.loyalty-tier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.loyalty-tier-card { position: relative; border-radius: 16px; padding: 0; overflow: hidden; }
.loyalty-tier-card .glass-content { padding: 18px; }
.loyalty-tier-accent { height: 6px; width: 100%; }
.loyalty-tier-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.loyalty-tier-badge-dot { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto; }
.loyalty-tier-meta { font-size: 12px; color: #94a3b8; margin: 2px 0; }
.loyalty-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: middle; border: 1px solid rgba(255,255,255,.2); }

/* Progress bar (missions) */
.loyalty-progress { position: relative; height: 8px; min-width: 90px; background: rgba(255, 255, 255, .1); border-radius: 6px; overflow: hidden; }
.loyalty-progress-bar { position: absolute; inset: 0 auto 0 0; height: 100%; background: linear-gradient(90deg, #5e2ee3, #02c3d5); border-radius: 6px; }
.loyalty-progress-wrap { display: flex; align-items: center; gap: 8px; }
.loyalty-progress-wrap span { font-size: 12px; color: #cbd5e1; min-width: 34px; }

/* Reward catalog thumbnails */
.loyalty-thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.loyalty-thumb-ph { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #94a3b8; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.loyalty-reward-img { width: 100%; max-height: 180px; object-fit: contain; border-radius: 12px; margin-bottom: 12px; background: rgba(255, 255, 255, .04); }

/* Modal sub-heading + tab count badge */
.loyalty-modal-subhead { font-size: 13px; font-weight: 700; color: #cbd5e1; margin: 16px 0 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.loyalty-tab-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-inline-start: 6px; font-size: 11px; line-height: 18px; text-align: center; border-radius: 9px; background: rgba(255, 255, 255, .16); }
.loyalty-resolved { padding: 10px 12px; border-radius: 10px; margin-top: 8px; font-size: 13px; }
.loyalty-resolved--ok { background: rgba(0, 184, 148, .14); color: #34d399; border: 1px solid rgba(0, 184, 148, .3); }
.loyalty-resolved--err { background: rgba(239, 68, 68, .14); color: #f87171; border: 1px solid rgba(239, 68, 68, .3); }

/* Rule builder (create/edit rule modal) */
.loyalty-builder-row { display: grid; grid-template-columns: 1fr 1fr 1.2fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.loyalty-builder-row select, .loyalty-builder-row input { width: 100%; margin: 0; }
.loyalty-builder-add { margin: 2px 0 6px; }

/* Structured condition/action cards (rule & version details) */
.loyalty-cards { display: flex; flex-direction: column; gap: 8px; }
.loyalty-card-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; background: rgba(255, 255, 255, .03); font-size: 13px; }
.loyalty-card-idx { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; border-radius: 50%; background: rgba(94, 46, 227, .2); color: #c4b5fd; font-size: 12px; }
.loyalty-card-field { font-weight: 700; color: #e2e8f0; }
.loyalty-card-op { color: #94a3b8; }
.loyalty-card-val { color: #cbd5e1; }

/* Rule validation result */
.loyalty-validate-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 10px; font-weight: 700; margin-bottom: 6px; }
.loyalty-validate-head--ok { background: rgba(0, 184, 148, .14); color: #34d399; border: 1px solid rgba(0, 184, 148, .3); }
.loyalty-validate-head--err { background: rgba(239, 68, 68, .14); color: #f87171; border: 1px solid rgba(239, 68, 68, .3); }
.loyalty-list-err li { color: #fca5a5; }
.loyalty-list-warn li { color: #fcd34d; }

/* Execution reference chip */
.loyalty-ref { font-family: monospace; font-size: 12px; padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, .06); color: #cbd5e1; }

/* Liability report: stat-card info button + explanation text */
.loyalty-admin-page .stat-card .glass-content { position: relative; }
.loyalty-card-info { position: absolute; top: 10px; inset-inline-start: 10px; background: transparent; border: none; color: #94a3b8; cursor: pointer; font-size: 13px; padding: 2px; line-height: 1; }
.loyalty-card-info:hover, .loyalty-card-info:focus-visible { color: #c4b5fd; }
.loyalty-explain-text { font-size: 13px; line-height: 2; color: #cbd5e1; }

@media (max-width: 600px) {
    .loyalty-builder-row { grid-template-columns: 1fr 1fr; }
    .loyalty-filter-grid,
    .loyalty-filter-grid--actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .loyalty-table-card .glass-content {
        padding: 14px;
    }
    .loyalty-form-grid { grid-template-columns: 1fr; }
}

/* ===================== Loyalty settings / customer-portal management ===================== */
.loyalty-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.loyalty-help-btn { flex: 0 0 auto; }

.loyalty-settings-group { margin-bottom: 16px; }
.loyalty-settings-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.loyalty-settings-group-head .card-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto; }
.loyalty-settings-group-head h3 { margin: 0; font-size: 16px; }
.loyalty-settings-group-head p { margin: 2px 0 0; font-size: 12px; color: #94a3b8; }
.loyalty-settings-list { display: flex; flex-direction: column; }
.loyalty-setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 2px; border-top: 1px solid rgba(255, 255, 255, .07); flex-wrap: wrap; }
.loyalty-setting:first-child { border-top: none; }
.loyalty-setting-info { flex: 1 1 260px; min-width: 200px; }
.loyalty-setting-info label { display: block; font-size: 14px; font-weight: 600; color: #e2e8f0; margin: 0 0 3px; }
.loyalty-setting-info small { display: block; font-size: 12px; color: #94a3b8; line-height: 1.7; }
.loyalty-setting-control { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.loyalty-setting-control input[type=text], .loyalty-setting-control input[type=number], .loyalty-setting-control select, .loyalty-setting-control textarea { width: 210px; max-width: 100%; margin: 0; height: 40px; }
.loyalty-setting-control input[type=color] { width: 48px; height: 40px; padding: 2px; margin: 0; background: transparent; border-radius: 8px; }
.loyalty-setting-control textarea { height: auto; }
.loyalty-setting.is-locked { opacity: .55; }
.loyalty-dep-note { flex: 1 1 100%; font-size: 12px; color: #fcd34d; margin: 2px 0 0; }
.loyalty-setting .field-error { flex: 1 1 100%; text-align: start; }

/* Toggle switch (reuses dashboard accent gradient) */
.loyalty-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 auto; }
.loyalty-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.loyalty-switch .loyalty-slider { position: absolute; inset: 0; cursor: pointer; background: rgb(1 0 0 / 18%); border-radius: 26px; transition: .2s; }
.loyalty-switch .loyalty-slider::before { content: ""; position: absolute; width: 20px; height: 20px; right: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.loyalty-switch input:checked + .loyalty-slider { background: linear-gradient(90deg, #5e2ee3, #02c3d5); }
.loyalty-switch input:checked + .loyalty-slider::before { transform: translateX(-20px); }
.loyalty-switch input:disabled + .loyalty-slider { cursor: not-allowed; opacity: .5; }

/* Sticky save bar + dirty state */
.loyalty-save-bar { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 12px 16px; border-radius: 14px; background: rgba(17, 20, 32, .92); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .1); flex-wrap: wrap; }
.loyalty-save-state { font-size: 13px; color: #94a3b8; display: flex; align-items: center; gap: 8px; }
.loyalty-save-state.is-dirty { color: #fcd34d; }
.loyalty-save-actions { display: flex; gap: 8px; }

/* Status / health chips */
.loyalty-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #cbd5e1; }
.loyalty-chip--ok { background: rgba(0, 184, 148, .14); color: #34d399; border-color: rgba(0, 184, 148, .3); }
.loyalty-chip--warn { background: rgba(246, 185, 59, .16); color: #fcd34d; border-color: rgba(246, 185, 59, .35); }
.loyalty-chip--off { background: rgba(148, 163, 184, .12); color: #94a3b8; }

/* Portal live preview */
.loyalty-portal-preview { border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); }
.loyalty-preview-head { padding: 22px 20px; text-align: center; }
.loyalty-preview-logo { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; margin: 0 auto 10px; display: block; background: rgba(255, 255, 255, .1); }
.loyalty-preview-title { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.loyalty-preview-welcome { font-size: 13px; opacity: .85; margin: 0; line-height: 1.8; }
.loyalty-preview-body { padding: 16px 20px; background: rgba(0, 0, 0, .18); }
.loyalty-preview-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Loading skeleton */
.loyalty-skeleton { border-radius: 12px; background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .1), rgba(255, 255, 255, .05)); background-size: 200% 100%; animation: loyaltyShimmer 1.3s infinite; height: 16px; margin: 10px 0; }
@keyframes loyaltyShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@media (max-width: 600px) {
    .loyalty-setting-control { width: 100%; justify-content: flex-start; }
    .loyalty-setting-control input[type=text], .loyalty-setting-control input[type=number], .loyalty-setting-control select, .loyalty-setting-control textarea { width: 100%; }
}

/* ============================================================================
   Financial history cards (sales, payments/deposits, invoices)
   ----------------------------------------------------------------------------
   .timeline-item carries a hardcoded dark glass surface, and the only light
   override was scoped to .reminder-page-container — so on the customer page in
   light mode these cards were dark panels floating on a light background.

   Light mode now gets a real card surface; the status stays in the badge and a
   thin accent bar rather than colouring the whole card, so a red/green wash
   never overwhelms the content and the meaning survives without colour.
   ========================================================================== */
html[data-theme="light"] .timeline-item {
    background: #ffffff;
    border: 1px solid #e4e9f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 22px -14px rgba(15, 23, 42, .18);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
html[data-theme="light"] .timeline-item:hover {
    border-color: #cfd7e3;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 28px -14px rgba(15, 23, 42, .22);
}
html[data-theme="light"] .timeline-item::before {
    border-right-color: #dbe2ec;
}
html[data-theme="light"] .timeline-header .date {
    color: #55607a;
}

/* Amount: the value a user scans for, so it outranks everything else in the
   card. Tabular figures keep columns of amounts aligned. */
.timeline-content .amount,
.timeline-content .sale-amount,
.timeline-content strong.amount {
    font-size: 17px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.2px;
}
html[data-theme="light"] .timeline-content .amount,
html[data-theme="light"] .timeline-content .sale-amount {
    color: #0f172a;
}

/* Direction of a financial movement, shown by sign + weight rather than colour
   alone. */
.timeline-item.is-credit .amount { color: #047857; }
.timeline-item.is-debit .amount { color: #b91c1c; }
html[data-theme="light"] .timeline-item.is-credit { border-inline-start: 3px solid #10b981; }
html[data-theme="light"] .timeline-item.is-debit { border-inline-start: 3px solid #ef4444; }

/* Secondary metadata sits below the amount and must not compete with it. */
html[data-theme="light"] .timeline-content .meta,
html[data-theme="light"] .timeline-content .doc-label {
    color: #55607a;
    font-size: 13px;
}

/* Actions stay quiet until hover/focus so they do not crowd the content. */
html[data-theme="light"] .timeline-header .actions .timeline-action {
    border: 1px solid #dbe2ec;
    background: #f7f9fc;
    color: #475569;
}
html[data-theme="light"] .timeline-header .actions .timeline-action:hover,
html[data-theme="light"] .timeline-header .actions .timeline-action:focus-visible {
    background: #eef2f7;
    border-color: #cfd7e3;
    color: #0f172a;
}

/* Status badges: readable in light mode without shouting. */
html[data-theme="light"] .status-badge.pending   { background-color: #fef4e3; color: #92400e; border: 1px solid #f3d9ac; }
html[data-theme="light"] .status-badge.approved,
html[data-theme="light"] .status-badge.completed,
html[data-theme="light"] .status-badge.active    { background-color: #e7f6ef; color: #047857; border: 1px solid #b9e4d0; }
html[data-theme="light"] .status-badge.rejected,
html[data-theme="light"] .status-badge.cancelled { background-color: #fdecec; color: #b91c1c; border: 1px solid #f5c2c2; }
html[data-theme="light"] .status-badge.inactive  { background-color: #f1f4f8; color: #475569; border: 1px solid #dce3ec; }
html[data-theme="light"] .status-badge.finished  { background-color: #e6f3fb; color: #0c5a87; border: 1px solid #b6dcf0; }

/* Dark mode: keep the elevated surface but make the border visible against the
   page rather than melting into it, and avoid near-black-on-black. */
html[data-theme="dark"] .timeline-item,
:root:not([data-theme="light"]) .timeline-item {
    border-color: rgba(148, 163, 184, 0.28);
}

/* Long customer or product names must wrap instead of widening the card. */
.timeline-content { min-width: 0; overflow-wrap: anywhere; }
.timeline-header { gap: 10px; }
.timeline-header .actions { flex: 0 0 auto; }

@media (max-width: 560px) {
    .timeline-item { padding: 12px; padding-right: 30px; }
    .timeline-header { flex-wrap: wrap; }
    .timeline-content .amount,
    .timeline-content .sale-amount { font-size: 16px; }
}

/* =========================================================================
   Sale document sharing — the «ارسال پیام» action and its modal.

   The button joins the existing .sale-doc-actions group on each sale row, so it
   inherits .doc-btn and only adds emphasis; the rest are the modal's own
   classes. Colours come from the same palette the group already uses.
   ========================================================================= */
.sale-doc-actions .doc-btn.doc-btn-send {
    font-family: inherit;
    cursor: pointer;
    border-color: rgba(124, 58, 237, 0.55);
    background: rgba(124, 58, 237, 0.22);
    color: #f5f3ff;
}

.sale-doc-actions .doc-btn.doc-btn-send:hover {
    border-color: rgba(124, 58, 237, 0.9);
    background: rgba(124, 58, 237, 0.35);
}

/* «ویرایش» / «حذف» on a sale row. Both are <button>s inside a group whose base
   style was written for <a>, so they have to re-declare the font and cursor.
   Delete is the only destructive action in the group, so it is the only one
   that leaves the neutral palette. */
.sale-doc-actions .doc-btn.doc-btn-edit,
.sale-doc-actions .doc-btn.doc-btn-delete {
    font-family: inherit;
    cursor: pointer;
}

.sale-doc-actions .doc-btn.doc-btn-delete {
    border-color: rgba(239, 68, 68, 0.55);
    background: rgba(239, 68, 68, 0.16);
    color: #fecaca;
}

.sale-doc-actions .doc-btn.doc-btn-delete:hover {
    border-color: rgba(239, 68, 68, 0.9);
    background: rgba(239, 68, 68, 0.3);
    color: #fff;
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.22);
}

.send-doc-subtitle {
    margin: 6px 0 0;
    font-size: 12px;
    color: #a1a1aa;
}

.send-doc-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Document type and channel decide what the customer receives and where, so
   this modal earns an explicit tick on top of the shared chip fill. The mark is
   always in the box and only fades in, so choosing an option cannot reflow the
   row. A literal "✓" rather than a Font Awesome ligature: the icon font is
   version-pinned per skin, a plain character is not. */
.send-doc-toggle .radio-chip > span::before {
    content: "\2713";
    margin-inline-end: 7px;
    font-weight: 900;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.send-doc-toggle .radio-chip.is-active > span::before,
.send-doc-toggle .radio-chip:has(input:checked) > span::before {
    opacity: 1;
}

/* The link is shown LTR and allowed to wrap: a long token on a narrow phone
   must not push the modal into a horizontal scroll. */
.send-doc-link {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px dashed rgba(124, 58, 237, 0.5);
    background: rgba(124, 58, 237, 0.12);
    font-size: 12px;
    word-break: break-all;
    text-align: left;
}

.send-doc-preview {
    margin: 0;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(15, 23, 42, 0.28);
    font-size: 13px;
    line-height: 1.9;
    white-space: pre-line;
    min-height: 64px;
}

html[data-theme="light"] .send-doc-subtitle { color: #6b7280; }

html[data-theme="light"] .send-doc-preview {
    background: #f8fafc;
    border-color: #e2e8f0;
}


html[data-theme="light"] button.tag-suggestion-chip {
    background-color: #DC6465;
}


html[data-theme="light"] .sale-items-table tr:last-child td {
    color: black;
}

button#daryayar-send {
    width: auto;
}

/* This rule used to hard-code `#ffffff !important`. It is more specific than
   the themed `span.multi-select-label` above and declared later, so it won on
   both counts and put the unconditional white back — the light theme's white
   menu, and every department name in the «افزودن مشتری» multi-select invisible
   again. Same token as the rule it was overriding; the extra specificity is
   kept so any page-level patch it was written for still lands. */
.multi-select-menu .multi-select-option span.multi-select-label {
    color: var(--option-text, #ffffff) !important;
}

/* The tick box outline was `rgba(255,255,255,.35)`: invisible against the light
   theme's white menu, so an unticked row showed no checkbox at all and ticked
   vs unticked could not be told apart. */
html[data-theme="light"] .multi-select-option .checkbox-box {
    border-color: rgba(15, 23, 42, .38);
}

/* A chosen row is distinguished by the row itself, not by recolouring its text:
   the menu surface does not change when a row is selected, so dark ink would be
   the same invisibility from the other side in the dark theme. */
.multi-select-option[aria-selected="true"] {
    background: rgba(56, 189, 248, .16);
}

.multi-select-option[aria-selected="true"] span.multi-select-label {
    font-weight: 700;
}

/* …and a chosen row still has to react to the pointer: the tint above is
   declared after `.multi-select-option:hover` and would otherwise win. */
.multi-select-option[aria-selected="true"]:hover,
.multi-select-option[aria-selected="true"]:focus-visible {
    background: rgba(56, 189, 248, .3);
}

/* The row is `tabindex=0` (js/multi_select.js), so it is a real tab stop and
   needs a real focus ring rather than a background change alone. */
.multi-select-option:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: -2px;
}

html[data-theme="light"] td.sale-col-name {
    color: black !important;
}

/* ==========================================================================
   Reminder approve / reject  (.reminder-decision)
   ==========================================================================
   ONE component, used by the customer page's reminder tab and by the work
   calendar's day view. Both surfaces render it only while the reminder is
   pending — `can_approve` / `can_reject` come from the server so the two
   cannot disagree.

   Every layout rule is scoped one level deep (`.reminder-decision .…__btn`,
   specificity (0,2,0)) because `style.css` carries `.form-group label`
   (0,1,1) and `.form-group i` (0,1,1) rules that would otherwise win inside
   any form context and pull the icons out of flow. `box-sizing` is stated
   explicitly: this codebase has no global border-box reset. */
.reminder-decision {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.reminder-decision .reminder-decision__btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.reminder-decision .reminder-decision__btn i {
    /* Undo the login-form icon rule (.form-group i) wherever this component is
       rendered inside a form. */
    position: static;
    inset: auto;
    transform: none;
    font-size: 14px;
}

.reminder-decision .reminder-decision__btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.22);
}

.reminder-decision .reminder-decision__btn:focus-visible {
    outline: 2px solid rgba(148, 163, 184, 0.75);
    outline-offset: 2px;
}

.reminder-decision .reminder-decision__btn:disabled {
    opacity: 0.55;
    cursor: progress;
    transform: none;
    box-shadow: none;
}

.reminder-decision .reminder-decision__btn--approve {
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.45);
    color: #bbf7d0;
}

.reminder-decision .reminder-decision__btn--approve:hover:not(:disabled) {
    background: rgba(16, 185, 129, 0.3);
}

.reminder-decision .reminder-decision__btn--reject {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.45);
    color: #fecaca;
}

.reminder-decision .reminder-decision__btn--reject:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.3);
}

html[data-theme="light"] .reminder-decision .reminder-decision__btn--approve {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
    color: #047857;
}

html[data-theme="light"] .reminder-decision .reminder-decision__btn--reject {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
    color: #b91c1c;
}

/* Narrow screens: two full-width rows beat two cramped pills. */
@media (max-width: 480px) {
    .reminder-decision .reminder-decision__btn {
        flex: 1 1 100%;
    }
}

/* Inline status line for the work calendar's day view (no toast host here). */
.day-inline-message {
    box-sizing: border-box;
    margin: 0 0 10px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 13px;
}

.day-inline-message[data-kind="success"] {
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(16, 185, 129, 0.38);
    color: #047857;
}

.day-inline-message[data-kind="error"] {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.38);
    color: #b91c1c;
}

html[data-theme="dark"] .day-inline-message[data-kind="success"] {
    color: #bbf7d0;
}

html[data-theme="dark"] .day-inline-message[data-kind="error"] {
    color: #fecaca;
}

/* Why «افزودن محصول» is off (js/products.js, and any other page-level Holoo
   lock that follows). A disabled control with no explanation is the complaint
   this note answers, so it is a real block of text under the button rather
   than a tooltip only a mouse can find. */
.holoo-lock-note {
    display: block;
    max-width: 46ch;
    margin: 8px 0 0;
    padding: 8px 12px;
    border: 1px solid rgba(245, 158, 11, .38);
    border-radius: 10px;
    background: rgba(245, 158, 11, .12);
    color: var(--select-text, inherit);
    font-size: 12px;
    line-height: 1.8;
}