/* ═══════════════════════════════════════════════════════════════════
   TVET ERP — Liquid Glass design system
   Frosted translucent panels over soft light taken from the TVET-A seal
   (sky blue, teal, amber) on deep navy. Right-to-left, Vazirmatn.
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Vazirmatn";
  src: url("../vendor/vazirmatn/Vazirmatn-Variable.f6d31671339d.woff2") format("woff2-variations"),
       url("../vendor/vazirmatn/Vazirmatn-Variable.f6d31671339d.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --erp-bg: #0a101c;
  --erp-bg-2: #111827;
  --erp-text: #e2e8f0;
  --erp-muted: #94a3b8;
  --erp-faint: #64748b;
  --erp-placeholder: #64748b;
  --erp-sky: #4c8dfe;
  --erp-sky-soft: #93c5fd;
  --erp-on-accent: #ffffff;
  --erp-teal: #34d399;
  --erp-amber: #fbbf24;
  --erp-coral: #f87171;
  --erp-coral-text: #fca5a5;
  --erp-amber-text: #fcd34d;
  --erp-teal-text: #6ee7b7;

  --glass-fill: rgba(17, 24, 39, 0.65);
  --glass-fill-strong: rgba(17, 24, 39, 0.85);
  --glass-line: rgba(255, 255, 255, 0.08);
  --glass-line-soft: rgba(255, 255, 255, 0.06);
  --glass-surface: linear-gradient(160deg, rgba(23, 31, 49, 0.86) 0%, rgba(17, 24, 39, 0.82) 100%);
  --glass-edge: linear-gradient(140deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 35%, rgba(255, 255, 255, 0.02) 70%, rgba(255, 255, 255, 0.06) 100%);
  --erp-backdrop: radial-gradient(circle at 6% 0%, rgba(30, 58, 138, 0.38) 0%, transparent 42%), radial-gradient(circle at 94% 3%, rgba(76, 29, 149, 0.35) 0%, transparent 40%), radial-gradient(circle at 70% 100%, rgba(6, 78, 59, 0.28) 0%, transparent 45%), #0a101c;
  --tint: 255, 255, 255;
  --erp-strong: #f1f5f9;
  --erp-sky-text: #93c5fd;
  --erp-coral-strong: #f87171;
  --erp-link-hover: #bfdbfe;
  --erp-menu-bg: rgba(17, 24, 39, 0.92);
  --erp-menu-bg-solid: #111827;
  --erp-glass-solid: #111827;
  --erp-input-bg: #1f2937;
  --erp-input-focus: #1f2937;
  color-scheme: dark;
  --glass-blur: blur(24px) saturate(180%);
  --glass-shine: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --glass-drop: 0 14px 40px rgba(0, 0, 0, 0.45);

  --r-panel: 26px;
  --r-card: 20px;
  --r-control: 14px;

  --bs-body-font-family: "Vazirmatn", Tahoma, sans-serif;
  --bs-body-bg: var(--erp-bg);
  --bs-body-color: var(--erp-text);
  --bs-secondary-color: var(--erp-muted);
  --bs-border-color: var(--glass-line);
  --bs-link-color: var(--erp-sky-soft);
  --bs-link-color-rgb: 138, 216, 255;
  --bs-link-hover-color: var(--erp-link-hover);
  --bs-link-hover-color-rgb: 196, 236, 255;
  --bs-emphasis-color: var(--erp-strong);
  --bs-focus-ring-color: rgba(92, 196, 245, 0.45);
}

[data-bs-theme="dark"] {
  --bs-body-bg: var(--erp-bg);
  --bs-body-color: var(--erp-text);
  --bs-secondary-color: var(--erp-muted);
  --bs-tertiary-bg: rgba(var(--tint), 0.06);
  --bs-border-color: var(--glass-line);
}

html, body { min-height: 100%; }
body {
  font-family: "Vazirmatn", Tahoma, sans-serif;
  background: var(--erp-bg);
  color: var(--erp-text);
  line-height: 1.75;
}
h1, h2, h3, h4, h5 { font-weight: 800; line-height: 1.4; }
.text-secondary { color: var(--erp-muted) !important; }


/* ── Light theme ─────────────────────────────────────────────────────
   Same glass language on a pale sky background: white frosted panels,
   navy text, deeper accents for contrast. Chosen per user (Profile) or
   with the sun/moon button; "automatic" follows the device. */
[data-theme="light"] {
  --erp-bg: #eaf2fb;
  --erp-bg-2: #ffffff;
  --erp-text: #0b2440;
  --erp-muted: rgba(11, 36, 64, 0.74);
  --erp-faint: rgba(11, 36, 64, 0.58);
  --erp-placeholder: rgba(11, 36, 64, 0.45);
  --erp-strong: #031427;
  --erp-sky: #2aa6e0;
  --erp-sky-soft: #0b6fae;
  --erp-sky-text: #0a5f96;
  --erp-teal: #0e9c87;
  --erp-amber: #b7720a;
  --erp-coral: #e0503f;
  --erp-coral-text: #b33424;
  --erp-coral-strong: #c23a2a;
  --erp-amber-text: #8a5300;
  --erp-teal-text: #0a7a69;
  --erp-link-hover: #084f7d;
  --erp-menu-bg: rgba(255, 255, 255, 0.86);
  --erp-menu-bg-solid: rgba(255, 255, 255, 0.98);
  --erp-glass-solid: #f6f9fd;
  --erp-input-bg: rgba(255, 255, 255, 0.82);
  --erp-input-focus: #ffffff;
  --tint: 11, 36, 64;
  --glass-fill: rgba(255, 255, 255, 0.62);
  --glass-fill-strong: rgba(255, 255, 255, 0.8);
  --glass-surface: linear-gradient(150deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.58) 100%);
  --glass-edge: linear-gradient(140deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.2) 40%, rgba(11, 36, 64, 0.08) 70%, rgba(255, 255, 255, 0.8) 100%);
  --erp-backdrop: radial-gradient(65% 55% at 88% -5%, rgba(92, 176, 255, 0.32) 0%, transparent 62%), radial-gradient(55% 50% at 0% 100%, rgba(45, 212, 191, 0.2) 0%, transparent 62%), radial-gradient(40% 38% at 38% 42%, rgba(167, 139, 250, 0.14) 0%, transparent 70%), linear-gradient(180deg, #f6f9fd 0%, #eef3f9 55%, #e7edf5 100%);
  --glass-line: rgba(11, 36, 64, 0.14);
  --glass-line-soft: rgba(11, 36, 64, 0.09);
  --glass-shine: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(11, 36, 64, 0.04);
  --glass-drop: 0 20px 50px rgba(30, 70, 120, 0.14);
  --bs-link-color: var(--erp-sky-soft);
  --bs-link-color-rgb: 11, 111, 174;
  --bs-link-hover-color-rgb: 8, 79, 125;
  --bs-focus-ring-color: rgba(42, 166, 224, 0.35);
  color-scheme: light;
}
[data-bs-theme="light"] {
  --bs-body-bg: var(--erp-bg);
  --bs-body-color: var(--erp-text);
  --bs-secondary-color: var(--erp-muted);
  --bs-tertiary-bg: rgba(11, 36, 64, 0.05);
  --bs-border-color: var(--glass-line);
}
[data-theme="light"] .form-control, [data-theme="light"] .form-select, [data-theme="light"] .glass-input {
  background-color: var(--erp-input-bg); border-color: rgba(11, 36, 64, 0.18);
}
[data-theme="light"] .form-control:focus, [data-theme="light"] .form-select:focus, [data-theme="light"] .glass-input:focus {
  background-color: var(--erp-input-focus);
}
[data-theme="light"] .form-control::placeholder, [data-theme="light"] .glass-input::placeholder { color: rgba(11, 36, 64, 0.45); }
[data-theme="light"] .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230b2440' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
[data-theme="light"] .btn-accent, [data-theme="light"] .btn-primary { --bs-btn-color: #ffffff; --bs-btn-hover-color: #ffffff; --bs-btn-active-color: #ffffff; --bs-btn-hover-bg: #1f97d1; --bs-btn-active-bg: #1888be; }
[data-theme="light"] .pagination { --bs-pagination-active-color: #ffffff; }
[data-theme="light"] .erp-nav a.active { background: rgba(42, 166, 224, 0.16); }
[data-theme="light"] .bubble.mine { background: rgba(42, 166, 224, 0.16); border-color: rgba(42, 166, 224, 0.35); }
[data-theme="light"] .month-cell a.overdue { background: rgba(224, 80, 63, 0.16); }
[data-theme="light"] .erp-brand img { box-shadow: 0 0 0 3px rgba(11, 36, 64, 0.08); }
[data-theme="light"] .sidebar-scrim { background: rgba(11, 36, 64, 0.35); }

/* Theme switch in the top bar */
.theme-toggle .bi-sun { display: none; }
[data-theme="light"] .theme-toggle .bi-sun { display: inline; }
[data-theme="light"] .theme-toggle .bi-moon-stars { display: none; }

/* ── Backdrop light ───────────────────────────────────────────────── */
.erp-backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--erp-backdrop, var(--erp-bg)); pointer-events: none; }
.erp-backdrop .orb { display: none; }

/* ── Glass surfaces ────────────────────────────────────────────────── */
.glass {
  background: var(--glass-surface, var(--glass-fill));
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shine), var(--glass-drop);
}
.glass-panel { border-radius: var(--r-panel); padding: 1.4rem; }
.glass-panel, .glass-card, .auth-card.glass, .mobile-bar.glass { position: relative; }
.glass-panel::after, .glass-card::after, .erp-sidebar.glass::after, .auth-card.glass::after, .mobile-bar.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--glass-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.glass-card { border-radius: var(--r-card); padding: 1.15rem 1.25rem; }
.glass-soft { background: rgba(var(--tint), 0.055); border: 1px solid var(--glass-line-soft); border-radius: 16px; }
.glass-tint-sky { background: rgba(92, 196, 245, 0.13); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--erp-glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--erp-glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .erp-backdrop .orb { display: none; }
}

/* ── App shell ────────────────────────────────────────────────────── */
.erp-shell { display: flex; gap: 1.5rem; padding: 1.5rem; min-height: 100vh; }
.erp-sidebar {
  width: 268px; flex-shrink: 0; position: sticky; top: 1.5rem;
  height: calc(100vh - 3rem); border-radius: 28px; padding: 1.3rem 1rem;
  display: flex; flex-direction: column; gap: 1.2rem; overflow-y: auto;
}
.erp-main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.4rem; }
.erp-brand { display: flex; align-items: center; gap: 0.75rem; padding: 0 0.4rem; color: inherit; text-decoration: none; }
.erp-brand img { width: 50px; height: 50px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(var(--tint), 0.18); }
.erp-brand strong { display: block; font-size: 1.05rem; font-weight: 800; }
.erp-brand small { display: block; font-size: 0.75rem; color: var(--erp-muted); line-height: 1.5; }

.nav-group-title { font-size: 0.75rem; font-weight: 700; color: var(--erp-faint); padding: 0.9rem 0.9rem 0.35rem; }
.erp-nav { display: flex; flex-direction: column; gap: 0.2rem; }
.erp-nav a {
  display: flex; align-items: center; gap: 0.75rem; min-height: 44px; padding: 0 0.9rem;
  border-radius: var(--r-control); color: var(--erp-text); text-decoration: none; font-weight: 500;
}
.erp-nav a .bi { font-size: 1.15rem; }
.erp-nav a:hover { background: rgba(var(--tint), 0.07); color: var(--erp-strong); }
.erp-nav a.active { background: rgba(92, 196, 245, 0.2); color: var(--erp-strong); font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.erp-nav a.active .bi { color: var(--erp-sky); }
.erp-nav .nav-count { margin-inline-start: auto; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--erp-coral); color: #2a0703; font-size: 0.75rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.erp-nav .nav-soon { margin-inline-start: auto; font-size: 0.7rem; color: var(--erp-faint); }
.tone-sky .bi { color: var(--erp-sky-soft); }
.tone-teal .bi { color: var(--erp-teal); }
.tone-amber .bi { color: var(--erp-amber); }
.tone-coral .bi { color: var(--erp-coral); }

.erp-usercard { margin-top: auto; display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem; border-radius: 18px; background: rgba(var(--tint), 0.07); border: 1px solid var(--glass-line-soft); }
.erp-usercard a { color: inherit; text-decoration: none; }
.erp-usercard .who { flex-grow: 1; min-width: 0; line-height: 1.5; }
.erp-usercard .who strong { display: block; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.erp-usercard .who small { color: var(--erp-muted); font-size: 0.75rem; }

.avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; background: #2b6cb0; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.95rem; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); object-fit: cover; }
.avatar-lg { width: 88px; height: 88px; font-size: 1.8rem; }

/* ── Top bar ──────────────────────────────────────────────────────── */
.erp-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.erp-topbar h1 { font-size: 1.75rem; margin: 0; }
.erp-topbar .subtitle { color: var(--erp-muted); font-size: 0.95rem; }
.topbar-actions { display: flex; align-items: center; gap: 0.7rem; }
.icon-btn { width: 48px; height: 48px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--erp-text); position: relative; font-size: 1.25rem; }
.icon-btn:hover { color: var(--erp-strong); background: var(--glass-fill-strong); }
.icon-btn .dot { position: absolute; top: 8px; inset-inline-start: 9px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--erp-coral); color: #2a0703; font-size: 0.7rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.icon-btn .dot[hidden] { display: none; }

.lang-switch { display: inline-flex; padding: 4px; border-radius: 999px; }
.lang-switch button { border: 0; background: transparent; color: var(--erp-text); border-radius: 999px; padding: 0.4rem 1rem; font-weight: 600; font-family: inherit; }
.lang-switch button[aria-pressed="true"] { background: var(--erp-sky); color: var(--erp-on-accent); font-weight: 800; }

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn { font-weight: 700; border-radius: var(--r-control); min-height: 44px; padding-inline: 1.1rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.btn-sm { min-height: 36px; border-radius: 12px; padding-inline: 0.8rem; }
.btn-accent { --bs-btn-bg: var(--erp-sky); --bs-btn-color: var(--erp-on-accent); --bs-btn-border-color: transparent; --bs-btn-hover-bg: #7fd3fb; --bs-btn-hover-color: var(--erp-on-accent); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: #4ab6ea; --bs-btn-active-color: var(--erp-on-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 10px 26px rgba(30, 143, 208, 0.38); font-weight: 800; }
.btn-glass { --bs-btn-bg: rgba(var(--tint), 0.08); --bs-btn-color: var(--erp-text); --bs-btn-border-color: var(--glass-line); --bs-btn-hover-bg: rgba(var(--tint), 0.14); --bs-btn-hover-color: var(--erp-strong); --bs-btn-hover-border-color: rgba(var(--tint), 0.3); --bs-btn-active-bg: rgba(var(--tint), 0.18); --bs-btn-active-color: var(--erp-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.btn-danger-soft { --bs-btn-bg: rgba(255, 122, 107, 0.2); --bs-btn-color: var(--erp-coral-text); --bs-btn-border-color: rgba(255, 122, 107, 0.4); --bs-btn-hover-bg: rgba(255, 122, 107, 0.32); --bs-btn-hover-color: var(--erp-strong); --bs-btn-hover-border-color: rgba(255, 122, 107, 0.6); }

/* ── Forms ────────────────────────────────────────────────────────── */
.form-label { font-weight: 600; font-size: 0.92rem; color: var(--erp-text); margin-bottom: 0.4rem; }
.form-text { color: var(--erp-faint); }
.glass-input, .form-control.glass-input, .form-select.glass-input {
  background-color: var(--erp-input-bg); border: 1px solid rgba(var(--tint), 0.22);
  color: var(--erp-text); border-radius: var(--r-control); min-height: 48px; font-size: 0.97rem;
}
.glass-input::placeholder { color: var(--erp-placeholder); }
.glass-input:focus { background-color: rgba(var(--tint), 0.11); border-color: var(--erp-sky); color: var(--erp-strong); box-shadow: 0 0 0 0.25rem rgba(92, 196, 245, 0.25); }
.glass-input.is-invalid { border-color: var(--erp-coral); }
.invalid-feedback, .errorlist { color: var(--erp-coral-text); font-size: 0.85rem; }
ul.errorlist { list-style: none; padding: 0; margin: 0.35rem 0 0; }
select.glass-input option { background: var(--erp-bg-2); color: var(--erp-text); }
.form-check-input { background-color: rgba(var(--tint), 0.12); border-color: rgba(var(--tint), 0.35); }
.form-check-input:checked { background-color: var(--erp-sky); border-color: var(--erp-sky); }
.input-icon { position: relative; }
.input-icon > .bi { position: absolute; inset-inline-start: 1rem; top: 50%; transform: translateY(-50%); color: var(--erp-muted); pointer-events: none; }
.input-icon > .glass-input { padding-inline-start: 2.8rem; }
.otp-input { font-size: 1.6rem !important; letter-spacing: 0.5em; text-align: center; direction: ltr; font-weight: 700; }
input[type="file"].glass-input { min-height: auto; padding: 0.6rem; }

/* ── Chips, badges, stats ─────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.8rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; background: rgba(var(--tint), 0.1); color: var(--erp-text); white-space: nowrap; }
.chip-sky { background: rgba(92, 196, 245, 0.22); }
.chip-teal { background: rgba(111, 227, 207, 0.2); color: var(--erp-teal-text); }
.chip-amber { background: rgba(255, 196, 107, 0.22); color: var(--erp-amber-text); }
.chip-coral, .chip-danger { background: rgba(255, 122, 107, 0.24); color: var(--erp-coral-text); }
.chip-success { background: rgba(111, 227, 207, 0.2); color: var(--erp-teal-text); }
.chip-info { background: rgba(92, 196, 245, 0.2); color: var(--erp-sky-text); }

.stat { display: flex; flex-direction: column; gap: 0.6rem; height: 100%; }
.stat-head { display: flex; justify-content: space-between; align-items: center; color: var(--erp-muted); font-size: 0.9rem; }
.stat-icon { width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.stat-value { font-size: 2.3rem; font-weight: 800; line-height: 1; }
.stat-note { font-size: 0.82rem; color: var(--erp-faint); }
.bg-tone-sky { background: rgba(92, 196, 245, 0.18); color: var(--erp-sky-soft); }
.bg-tone-teal { background: rgba(111, 227, 207, 0.18); color: var(--erp-teal); }
.bg-tone-amber { background: rgba(255, 196, 107, 0.18); color: var(--erp-amber); }
.bg-tone-coral { background: rgba(255, 122, 107, 0.18); color: var(--erp-coral-strong); }

.module-card { display: flex; flex-direction: column; gap: 1rem; height: 100%; }
.module-card .module-icon { width: 54px; height: 54px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.module-card h3 { font-size: 1.15rem; margin: 0; }
.module-card p { color: var(--erp-muted); font-size: 0.9rem; margin: 0; }

.section-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.section-title h2 { font-size: 1.1rem; margin: 0; }

/* ── Lists and tables ─────────────────────────────────────────────── */
.row-link { display: flex; align-items: center; gap: 0.9rem; padding: 0.75rem 0.9rem; border-radius: 16px; background: rgba(var(--tint), 0.055); border: 1px solid var(--glass-line-soft); color: var(--erp-text); text-decoration: none; }
.row-link:hover { background: rgba(var(--tint), 0.1); color: var(--erp-strong); }
.row-link.unread { border-color: rgba(92, 196, 245, 0.45); background: rgba(92, 196, 245, 0.1); }
.row-link .meta { font-size: 0.78rem; color: var(--erp-faint); }
.list-stack { display: flex; flex-direction: column; gap: 0.55rem; }

.table-glass { --bs-table-bg: transparent; --bs-table-color: var(--erp-text); --bs-table-border-color: var(--glass-line-soft); --bs-table-hover-bg: rgba(var(--tint), 0.05); --bs-table-hover-color: var(--erp-strong); margin: 0; }
.table-glass thead th { color: var(--erp-faint); font-weight: 700; font-size: 0.82rem; border-bottom-color: var(--glass-line); white-space: nowrap; }
.table-glass td { vertical-align: middle; padding-block: 0.8rem; }
.table-glass a { text-decoration: none; }

.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--erp-muted); }
.empty-state .bi { font-size: 2.2rem; color: var(--erp-sky-soft); display: block; margin-bottom: 0.6rem; }

.pagination { --bs-pagination-bg: rgba(var(--tint), 0.06); --bs-pagination-color: var(--erp-text); --bs-pagination-border-color: var(--glass-line-soft); --bs-pagination-hover-bg: rgba(var(--tint), 0.12); --bs-pagination-hover-color: var(--erp-strong); --bs-pagination-active-bg: var(--erp-sky); --bs-pagination-active-color: var(--erp-on-accent); --bs-pagination-active-border-color: var(--erp-sky); --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-color: var(--erp-faint); --bs-pagination-border-radius: 12px; gap: 0.3rem; }
.pagination .page-link { border-radius: 12px !important; }

/* ── Dropdown, alerts, toasts ────────────────────────────────────── */
.dropdown-menu.glass { --bs-dropdown-bg: var(--erp-menu-bg); --bs-dropdown-color: var(--erp-text); --bs-dropdown-border-color: var(--glass-line); --bs-dropdown-link-color: var(--erp-text); --bs-dropdown-link-hover-bg: rgba(var(--tint), 0.08); --bs-dropdown-link-hover-color: var(--erp-strong); border-radius: 22px; padding: 0.6rem; }
.notif-menu { width: min(380px, 92vw); }
.notif-item { display: flex; gap: 0.7rem; padding: 0.65rem 0.7rem; border-radius: 14px; color: var(--erp-text); text-decoration: none; }
.notif-item:hover { background: rgba(var(--tint), 0.08); color: var(--erp-strong); }
.notif-item.unread { background: rgba(92, 196, 245, 0.12); }
.notif-item .icon { width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.notif-item .title { font-weight: 700; font-size: 0.9rem; line-height: 1.55; }
.notif-item .body { font-size: 0.82rem; color: var(--erp-muted); line-height: 1.6; }
.notif-item .time { font-size: 0.72rem; color: var(--erp-faint); }

.alert-glass { border-radius: 18px; border: 1px solid var(--glass-line); background: rgba(var(--tint), 0.09); color: var(--erp-text); display: flex; gap: 0.7rem; align-items: flex-start; }
.alert-glass.alert-success { border-color: rgba(111, 227, 207, 0.45); }
.alert-glass.alert-success .bi { color: var(--erp-teal); }
.alert-glass.alert-danger, .alert-glass.alert-error { border-color: rgba(255, 122, 107, 0.5); }
.alert-glass.alert-danger .bi, .alert-glass.alert-error .bi { color: var(--erp-coral); }
.alert-glass.alert-warning { border-color: rgba(255, 196, 107, 0.5); }
.alert-glass.alert-warning .bi { color: var(--erp-amber); }
.alert-glass.alert-info .bi { color: var(--erp-sky); }

.toast-stack { position: fixed; bottom: 1.5rem; inset-inline-start: 1.5rem; z-index: 1080; display: flex; flex-direction: column; gap: 0.6rem; width: min(360px, calc(100vw - 3rem)); }
.toast-glass { border-radius: 18px; padding: 0.85rem 1rem; display: flex; gap: 0.7rem; animation: toast-in 240ms ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ── Sign-in screens ─────────────────────────────────────────────── */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; gap: 4rem; padding: 2rem clamp(1rem, 6vw, 7rem); flex-wrap: wrap; }
.auth-brand { max-width: 560px; display: flex; flex-direction: column; gap: 1.6rem; }
.auth-seal { width: 150px; height: 150px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.auth-seal img { width: 124px; height: 124px; border-radius: 50%; }
.auth-brand h1 { font-size: clamp(2rem, 4vw, 3.1rem); margin: 0; line-height: 1.3; }
.auth-brand .org { color: var(--erp-muted); font-size: 1.05rem; }
.auth-card { width: min(470px, 100%); border-radius: 30px; padding: 2.4rem; display: flex; flex-direction: column; gap: 1.3rem; }
.auth-card h2 { font-size: 1.7rem; margin: 0; }
.auth-footer { text-align: center; color: var(--erp-faint); font-size: 0.82rem; padding-bottom: 1.5rem; }
.qr-frame { background: #fff; border-radius: 18px; padding: 0.7rem; display: inline-block; }
.qr-frame img { width: 190px; height: 190px; image-rendering: pixelated; display: block; }
.secret-code { direction: ltr; font-family: "Vazirmatn", monospace; letter-spacing: 0.12em; word-break: break-all; background: rgba(var(--tint), 0.07); border-radius: 12px; padding: 0.5rem 0.8rem; font-size: 0.9rem; }

/* ── Focus, motion, small screens ────────────────────────────────── */
:focus-visible { outline: 2px solid var(--erp-sky); outline-offset: 2px; }
.btn:focus-visible, .glass-input:focus-visible { outline: none; box-shadow: 0 0 0 0.25rem rgba(92, 196, 245, 0.4); }
.visually-hidden-focusable:focus { position: fixed !important; top: 1rem; inset-inline-start: 1rem; z-index: 2000; background: var(--erp-sky); color: var(--erp-on-accent); padding: 0.6rem 1rem; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.mobile-bar { display: none; }
@media (max-width: 991.98px) {
  .erp-shell { padding: 0.9rem; gap: 0.9rem; flex-direction: column; }
  .erp-sidebar { position: fixed; top: 0.75rem; bottom: 0.75rem; inset-inline-start: 0.75rem; height: auto; z-index: 1050; transform: translateX(120%); transition: transform 220ms ease; }
  .erp-sidebar.open { transform: none; }
  .sidebar-scrim { position: fixed; inset: 0; background: rgba(2, 10, 28, 0.55); z-index: 1040; display: none; }
  .sidebar-scrim.open { display: block; }
  .mobile-bar { display: flex; align-items: center; justify-content: space-between; border-radius: 22px; padding: 0.5rem 0.7rem; }
  .mobile-bar img { width: 38px; height: 38px; border-radius: 50%; }
  .erp-topbar h1 { font-size: 1.4rem; }
  .auth-wrap { gap: 2rem; }
  .auth-brand { align-items: center; text-align: center; }
  .auth-brand .auth-chips { justify-content: center; }
  .auth-seal { width: 110px; height: 110px; }
  .auth-seal img { width: 92px; height: 92px; }
}

/* ── Module sub-menu ─────────────────────────────────────────────── */
.erp-subnav { display: flex; flex-direction: column; gap: 0.1rem; margin: 0.15rem 0 0.4rem; padding-inline-start: 1.1rem; border-inline-start: 2px solid rgba(92, 196, 245, 0.35); margin-inline-start: 1.3rem; }
.erp-nav .erp-subnav a { min-height: 36px; font-size: 0.88rem; padding: 0 0.7rem; border-radius: 11px; color: var(--erp-muted); }
.erp-nav .erp-subnav a .bi { font-size: 0.95rem; }
.erp-nav .erp-subnav a.current { background: rgba(var(--tint), 0.1); color: var(--erp-strong); font-weight: 700; }

/* ═══ Bootstrap components in the glass style ═══════════════════════
   Module pages (workshop, helpdesk) use standard Bootstrap markup; these
   rules give cards, tables, badges and tabs the same frosted look.       */
.card { --bs-card-bg: var(--glass-fill); --bs-card-border-color: var(--glass-line); --bs-card-cap-bg: rgba(var(--tint), 0.04); --bs-card-color: var(--erp-text); --bs-card-border-radius: var(--r-card); --bs-card-inner-border-radius: calc(var(--r-card) - 1px); box-shadow: var(--glass-shine), var(--glass-drop); }
.card-header { font-weight: 700; border-bottom-color: var(--glass-line-soft); padding: 0.85rem 1.1rem; }
.card-footer { border-top-color: var(--glass-line-soft); }
.list-group { --bs-list-group-bg: transparent; --bs-list-group-color: var(--erp-text); --bs-list-group-border-color: var(--glass-line-soft); --bs-list-group-action-hover-bg: rgba(var(--tint), 0.06); --bs-list-group-action-hover-color: var(--erp-strong); --bs-list-group-action-color: var(--erp-text); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--erp-text); --bs-table-border-color: var(--glass-line-soft); --bs-table-hover-bg: rgba(var(--tint), 0.05); --bs-table-hover-color: var(--erp-strong); --bs-table-striped-bg: rgba(var(--tint), 0.03); --bs-table-striped-color: var(--erp-text); }
.table thead th, .table > :not(caption) > * > th { color: var(--erp-faint); font-weight: 700; font-size: 0.82rem; }
.table-light, .table > thead.table-light { --bs-table-bg: rgba(var(--tint), 0.05); --bs-table-color: var(--erp-muted); }
.table-danger { --bs-table-bg: rgba(255, 122, 107, 0.12); --bs-table-color: var(--erp-text); }
.table-warning { --bs-table-bg: rgba(255, 196, 107, 0.12); --bs-table-color: var(--erp-text); }
.form-control, .form-select { background-color: rgba(var(--tint), 0.07); border-color: rgba(var(--tint), 0.22); color: var(--erp-text); border-radius: var(--r-control); }
.form-control:focus, .form-select:focus { background-color: rgba(var(--tint), 0.11); border-color: var(--erp-sky); color: var(--erp-strong); box-shadow: 0 0 0 0.25rem rgba(92, 196, 245, 0.25); }
.form-control::placeholder { color: var(--erp-placeholder); }
.form-select option { background: var(--erp-bg-2); color: var(--erp-text); }
.input-group-text { background: rgba(var(--tint), 0.1); border-color: rgba(var(--tint), 0.22); color: var(--erp-muted); }
.text-body-secondary, .text-muted { color: var(--erp-muted) !important; }
.text-danger { color: var(--erp-coral-text) !important; }
.text-success { color: var(--erp-teal) !important; }
.text-warning { color: var(--erp-amber) !important; }
.text-primary, .text-info { color: var(--erp-sky-soft) !important; }
.bg-body-tertiary, .bg-light, .bg-body { background-color: rgba(var(--tint), 0.06) !important; color: var(--erp-text) !important; }
.border, .border-top, .border-bottom { border-color: var(--glass-line-soft) !important; }

.badge { font-weight: 700; border-radius: 999px; padding: 0.4em 0.75em; }
.text-bg-primary, .text-bg-info { background-color: rgba(92, 196, 245, 0.24) !important; color: var(--erp-sky-text) !important; }
.text-bg-success { background-color: rgba(111, 227, 207, 0.22) !important; color: var(--erp-teal-text) !important; }
.text-bg-warning { background-color: rgba(255, 196, 107, 0.24) !important; color: var(--erp-amber-text) !important; }
.text-bg-danger { background-color: rgba(255, 122, 107, 0.26) !important; color: var(--erp-coral-text) !important; }
.text-bg-secondary, .text-bg-light, .text-bg-dark { background-color: rgba(var(--tint), 0.12) !important; color: var(--erp-text) !important; }

.btn-primary { --bs-btn-bg: var(--erp-sky); --bs-btn-color: var(--erp-on-accent); --bs-btn-border-color: transparent; --bs-btn-hover-bg: #7fd3fb; --bs-btn-hover-color: var(--erp-on-accent); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: #4ab6ea; --bs-btn-active-color: var(--erp-on-accent); --bs-btn-disabled-bg: rgba(92, 196, 245, 0.4); --bs-btn-disabled-color: var(--erp-on-accent); font-weight: 800; }
.btn-success { --bs-btn-bg: var(--erp-teal); --bs-btn-color: #062a24; --bs-btn-border-color: transparent; --bs-btn-hover-bg: #8ff0de; --bs-btn-hover-color: #062a24; --bs-btn-hover-border-color: transparent; }
.btn-danger { --bs-btn-bg: rgba(255, 122, 107, 0.85); --bs-btn-color: #2a0703; --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--erp-coral); --bs-btn-hover-color: #2a0703; }
.btn-warning { --bs-btn-bg: var(--erp-amber); --bs-btn-color: #2c1a00; --bs-btn-border-color: transparent; --bs-btn-hover-bg: #ffd08a; --bs-btn-hover-color: #2c1a00; }
.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-outline-success, .btn-outline-info, .btn-light, .btn-secondary {
  --bs-btn-bg: rgba(var(--tint), 0.08); --bs-btn-color: var(--erp-text); --bs-btn-border-color: var(--glass-line); --bs-btn-hover-bg: rgba(var(--tint), 0.15); --bs-btn-hover-color: var(--erp-strong); --bs-btn-hover-border-color: rgba(var(--tint), 0.3); --bs-btn-active-bg: rgba(var(--tint), 0.2); --bs-btn-active-color: var(--erp-strong); }
.btn-outline-danger, .btn-outline-warning { --bs-btn-bg: rgba(255, 122, 107, 0.12); --bs-btn-color: var(--erp-coral-text); --bs-btn-border-color: rgba(255, 122, 107, 0.4); --bs-btn-hover-bg: rgba(255, 122, 107, 0.3); --bs-btn-hover-color: var(--erp-strong); --bs-btn-hover-border-color: rgba(255, 122, 107, 0.6); }
.btn-link { --bs-btn-color: var(--erp-sky-soft); --bs-btn-hover-color: var(--erp-link-hover); }
.btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

.nav-tabs { --bs-nav-tabs-border-color: var(--glass-line-soft); --bs-nav-tabs-link-active-bg: rgba(var(--tint), 0.1); --bs-nav-tabs-link-active-color: var(--erp-strong); --bs-nav-tabs-link-active-border-color: var(--glass-line); --bs-nav-link-color: var(--erp-muted); --bs-nav-link-hover-color: var(--erp-strong); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--erp-sky); --bs-nav-pills-link-active-color: var(--erp-on-accent); --bs-nav-link-color: var(--erp-muted); }
.breadcrumb { --bs-breadcrumb-divider-color: var(--erp-faint); --bs-breadcrumb-item-active-color: var(--erp-muted); font-size: 0.85rem; margin: 0.2rem 0 0; }
.breadcrumb a { color: var(--erp-sky-soft); text-decoration: none; }
.progress { --bs-progress-bg: rgba(var(--tint), 0.1); --bs-progress-bar-bg: var(--erp-sky); border-radius: 999px; }
.modal { --bs-modal-bg: rgba(12, 38, 66, 0.9); --bs-modal-color: var(--erp-text); --bs-modal-border-color: var(--glass-line); --bs-modal-header-border-color: var(--glass-line-soft); --bs-modal-footer-border-color: var(--glass-line-soft); --bs-modal-border-radius: 24px; }
.modal-content { -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.alert { border-radius: 18px; background: rgba(var(--tint), 0.08); border-color: var(--glass-line); color: var(--erp-text); }
.alert-warning { border-color: rgba(255, 196, 107, 0.5); }
.alert-danger { border-color: rgba(255, 122, 107, 0.5); }
.alert-success { border-color: rgba(111, 227, 207, 0.45); }
.alert-info { border-color: rgba(92, 196, 245, 0.45); }
.dropdown-menu:not(.glass) { --bs-dropdown-bg: var(--erp-menu-bg-solid); --bs-dropdown-color: var(--erp-text); --bs-dropdown-link-color: var(--erp-text); --bs-dropdown-link-hover-bg: rgba(var(--tint), 0.08); --bs-dropdown-link-hover-color: var(--erp-strong); --bs-dropdown-border-color: var(--glass-line); border-radius: 16px; }
.page-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
hr { border-color: var(--glass-line-soft); opacity: 1; }
dl dt { color: var(--erp-muted); font-weight: 500; }
.stretched-link:hover { color: inherit; }

/* Printable pages (QR labels, receipts, report prints) */
@media print {
  .erp-backdrop, .erp-sidebar, .erp-topbar, .mobile-bar, .toast-stack, .no-print, .sidebar-scrim { display: none !important; }
  body, .erp-shell, .erp-main { background: #fff !important; color: #000 !important; padding: 0 !important; display: block !important; }
  .card, .glass { background: #fff !important; box-shadow: none !important; border-color: #ccc !important; color: #000 !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .table { --bs-table-color: #000; }
  a { color: #000 !important; text-decoration: none; }
}

/* ── Ticket chat ─────────────────────────────────────────────────── */
.chat-panel { display: flex; flex-direction: column; min-height: 520px; position: sticky; top: 1.5rem; }
.chat-log { flex-grow: 1; overflow-y: auto; max-height: 60vh; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.3rem 0.1rem; }
.bubble { max-width: 82%; padding: 0.55rem 0.8rem; border-radius: 18px; line-height: 1.65; }
.bubble.theirs { align-self: flex-start; background: rgba(var(--tint), 0.1); border: 1px solid var(--glass-line-soft); border-start-start-radius: 6px; }
.bubble.mine { align-self: flex-end; background: rgba(92, 196, 245, 0.26); border: 1px solid rgba(92, 196, 245, 0.35); border-start-end-radius: 6px; }
.bubble .who { font-size: 0.75rem; font-weight: 700; color: var(--erp-sky-soft); }
.bubble .text { white-space: pre-line; word-break: break-word; }
.bubble .meta { font-size: 0.7rem; color: var(--erp-faint); margin-top: 0.15rem; }
.bubble audio { width: 230px; max-width: 100%; height: 36px; margin-top: 0.2rem; }
.chat-composer { display: flex; gap: 0.5rem; align-items: flex-end; margin-top: 0.8rem; }
.chat-composer textarea { resize: none; min-height: 48px; max-height: 140px; }
.chat-composer .icon-btn { flex-shrink: 0; width: 48px; height: 48px; padding: 0; }
#chatMic.recording { background: rgba(255, 122, 107, 0.35); border-color: var(--erp-coral); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(255, 122, 107, 0.15); } }

/* ── Timeline ────────────────────────────────────────────────────── */
.timeline li { position: relative; display: flex; gap: 0.8rem; padding-bottom: 0.9rem; }
.timeline li::before { content: ""; position: absolute; inset-inline-start: 6px; top: 16px; bottom: 0; width: 2px; background: var(--glass-line-soft); }
.timeline li:last-child::before { display: none; }
.timeline .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--erp-sky); box-shadow: 0 0 0 4px rgba(92, 196, 245, 0.2); flex-shrink: 0; margin-top: 6px; }

/* ── Week calendar ───────────────────────────────────────────────── */
.week-grid { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 0.6rem; overflow-x: auto; }
.week-day { min-height: 220px; border-radius: 18px; padding: 0.7rem; background: rgba(var(--tint), 0.05); border: 1px solid var(--glass-line-soft); }
.week-day.today { border-color: rgba(92, 196, 245, 0.6); background: rgba(92, 196, 245, 0.1); }
.week-day h3 { font-size: 0.85rem; font-weight: 700; margin-bottom: 0.5rem; }
.visit { display: block; padding: 0.45rem 0.6rem; border-radius: 12px; margin-bottom: 0.4rem; background: rgba(var(--tint), 0.08); color: var(--erp-text); text-decoration: none; font-size: 0.82rem; border-inline-start: 3px solid var(--erp-sky); }
.visit:hover { background: rgba(var(--tint), 0.14); color: var(--erp-strong); }
.visit.late { border-inline-start-color: var(--erp-coral); }
.visit.done { border-inline-start-color: var(--erp-teal); opacity: 0.8; }
.chat-system { align-self: center; font-size: 0.75rem; color: var(--erp-faint); background: rgba(var(--tint), 0.05); border-radius: 999px; padding: 0.2rem 0.8rem; text-align: center; }
.chat-file { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.3rem; color: var(--erp-sky-soft); text-decoration: none; }
.chat-file img { max-width: 220px; max-height: 160px; border-radius: 10px; display: block; }
.bubble .transcript { font-size: 0.8rem; color: var(--erp-muted); border-inline-start: 2px solid var(--glass-line); padding-inline-start: 0.5rem; margin-top: 0.3rem; font-style: italic; }

/* ── Tasks ───────────────────────────────────────────────────────── */
.rte-toolbar { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.rte-toolbar button { width: 38px; height: 38px; border-radius: 10px; }
.rte { min-height: 160px; max-height: 420px; overflow-y: auto; padding: 0.8rem 1rem; line-height: 1.9; }
.rte:empty::before { content: attr(data-placeholder); color: var(--erp-placeholder); }
.rte ul, .rte ol, .rich ul, .rich ol { padding-inline-start: 1.4rem; }
.rich blockquote, .rte blockquote { border-inline-start: 3px solid var(--erp-sky); padding-inline-start: 0.8rem; color: var(--erp-muted); }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.chain .step { padding: 0.45rem 0.8rem; border-radius: 14px; background: rgba(var(--tint), 0.07); border: 1px solid var(--glass-line-soft); font-size: 0.85rem; }
.chain .step.current { border-color: var(--erp-sky); background: rgba(92, 196, 245, 0.18); }
.chain .step.done { border-color: rgba(111, 227, 207, 0.5); }
.chain .arrow { color: var(--erp-faint); }
.board { display: grid; grid-template-columns: repeat(6, minmax(220px, 1fr)); gap: 0.8rem; overflow-x: auto; padding-bottom: 0.5rem; }
.board-col { background: rgba(var(--tint), 0.05); border: 1px solid var(--glass-line-soft); border-radius: 20px; padding: 0.7rem; min-height: 300px; }
.board-col h2 { font-size: 0.9rem; display: flex; justify-content: space-between; margin-bottom: 0.6rem; }
.board-card { display: block; padding: 0.6rem 0.7rem; border-radius: 14px; background: rgba(var(--tint), 0.08); margin-bottom: 0.5rem; color: var(--erp-text); text-decoration: none; font-size: 0.86rem; }
.board-card:hover { background: rgba(var(--tint), 0.14); color: var(--erp-strong); }
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); gap: 0.4rem; overflow-x: auto; }
.month-grid .wd { text-align: center; font-size: 0.8rem; color: var(--erp-faint); padding: 0.2rem; }
.month-cell { min-height: 110px; border-radius: 14px; padding: 0.4rem; background: rgba(var(--tint), 0.05); border: 1px solid var(--glass-line-soft); }
.month-cell.today { border-color: var(--erp-sky); background: rgba(92, 196, 245, 0.1); }
.month-cell .num { font-weight: 700; font-size: 0.85rem; }
.month-cell a { display: block; font-size: 0.75rem; padding: 0.15rem 0.35rem; border-radius: 8px; margin-top: 0.2rem; background: rgba(var(--tint), 0.08); color: var(--erp-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.month-cell a.overdue { background: rgba(255, 122, 107, 0.25); }
.org-tree ul { list-style: none; padding-inline-start: 1.3rem; border-inline-start: 1px dashed var(--glass-line); margin: 0.3rem 0; }
.org-tree > ul { border: 0; padding: 0; }
.org-unit { margin: 0.4rem 0; }
.org-unit > .head { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; }
.org-post { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.15rem 0.2rem; padding: 0.3rem 0.7rem; border-radius: 12px; background: rgba(var(--tint), 0.07); color: var(--erp-text); text-decoration: none; font-size: 0.84rem; }
.org-post.vacant { border: 1px dashed rgba(255, 196, 107, 0.6); }
.org-post:hover { background: rgba(var(--tint), 0.14); color: var(--erp-strong); }

/* ── Star ratings ────────────────────────────────────────────────── */
.star-input { display: inline-flex; align-items: center; gap: 0.9rem; }
.star-input .stars { display: inline-flex; gap: 0.15rem; cursor: pointer; border-radius: 14px; padding: 0.25rem 0.35rem; outline-offset: 3px; }
.star-input .star { font-size: 2.1rem; line-height: 1; color: var(--erp-amber); transition: transform 120ms ease; }
.star-input .star:hover { transform: scale(1.12); }
.star-input .bi-star { color: rgba(var(--tint), 0.32); }
.star-input .star-value { font-size: 1.5rem; font-weight: 800; min-width: 2.5ch; color: var(--erp-amber); }
.stars-show { display: inline-flex; align-items: center; gap: 0.1rem; color: var(--erp-amber); }
.stars-show .bi-star { color: rgba(var(--tint), 0.3); }
.stars-show-value { margin-inline-start: 0.45rem; font-weight: 800; }
/* half-star icons fill from the right in right-to-left pages */
[dir="rtl"] .bi-star-half { display: inline-block; transform: scaleX(-1); }

.rating-star { position: relative; width: 132px; height: 126px; display: inline-flex; align-items: center; justify-content: center; filter: drop-shadow(0 10px 24px rgba(255, 180, 67, 0.35)); }
.rating-star svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rating-star-value { position: relative; top: 8px; font-size: 1.75rem; font-weight: 900; color: #fff; text-shadow: 0 1px 3px rgba(40, 20, 0, 0.55); }
.rating-star-sm { width: 84px; height: 80px; }
.rating-star-sm .rating-star-value { font-size: 1.15rem; top: 6px; }

/* Line charts */
.chart-box { position: relative; height: 280px; }
.chart-box.tall { height: 320px; }
.dictate-btn.recording { background: rgba(255, 122, 107, 0.3); border-color: var(--erp-coral); animation: pulse 1.2s infinite; }

/* ── Organization chart (چارت تشکیلاتی) ─────────────────────────── */
.chart-tabs { display: inline-flex; gap: 0.3rem; padding: 0.35rem; border-radius: 18px; align-self: flex-start; }
.chart-tabs a { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 1rem; border-radius: 14px; color: var(--erp-muted); text-decoration: none; font-weight: 700; }
.chart-tabs a:hover { color: var(--erp-strong); background: rgba(var(--tint), 0.07); }
.chart-tabs a.active { background: var(--erp-sky); color: var(--erp-on-accent); }
.setup-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
@media (max-width: 991px) { .setup-steps { grid-template-columns: 1fr; } }
.setup-step { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.8rem; border-radius: 18px; text-decoration: none; color: var(--erp-text); background: rgba(var(--tint), 0.04); border: 1px solid var(--glass-line-soft); }
.setup-step:hover { background: rgba(var(--tint), 0.08); color: var(--erp-strong); }
.setup-step .num { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; background: rgba(var(--tint), 0.1); }
.setup-step.done .num { background: rgba(111, 227, 207, 0.25); color: var(--erp-teal); }
.setup-step strong { display: block; }
.setup-step small { display: block; color: var(--erp-muted); }
.setup-step .progress { display: flex; background: rgba(var(--tint), 0.1); border-radius: 99px; overflow: hidden; }
.setup-step .progress-bar { background: var(--erp-teal); }

/* level colours */
.tone-amber { --lvl: 255, 196, 107; } .tone-sky { --lvl: 92, 196, 245; } .tone-teal { --lvl: 111, 227, 207; }
.tone-violet { --lvl: 167, 139, 250; } .tone-coral { --lvl: 255, 122, 107; } .tone-none { --lvl: 160, 180, 205; }
.chip-level { background: rgba(var(--lvl), 0.2); border: 1px solid rgba(var(--lvl), 0.45); }
.org-legend { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.org-legend .legend::before { content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 4px; margin-inline-end: 0.35rem; vertical-align: -1px; background: rgba(var(--lvl), 0.85); }
.org-legend .legend.vacant::before { background: transparent; border: 2px dashed var(--erp-amber); }

.orgchart { overflow: auto; padding: 0.5rem 0 1rem; max-height: 72vh; }
.orgchart-inner { transform-origin: top center; transition: transform 160ms ease; width: max-content; min-width: 100%; }
.orgchart ul { display: flex; justify-content: center; padding: 26px 0 0; margin: 0; position: relative; }
.orgchart > .orgchart-inner > ul { padding-top: 0; }
.orgchart li { list-style: none; position: relative; padding: 26px 10px 0; display: flex; flex-direction: column; align-items: center; }
/* connectors: a horizontal line over the siblings and a vertical drop to each box */
.orgchart li::before, .orgchart li::after { content: ""; position: absolute; top: 0; width: 50%; height: 26px; border-top: 2px solid rgba(var(--tint), 0.28); }
.orgchart li::before { inset-inline-end: 50%; }
.orgchart li::after { inset-inline-start: 50%; border-inline-start: 2px solid rgba(var(--tint), 0.28); }
.orgchart li:only-child::before, .orgchart li:only-child::after { border-top: 0; }
.orgchart li:only-child { padding-top: 26px; }
.orgchart li:first-child::before, .orgchart li:last-child::after { border-top: 0; }
.orgchart li:last-child::before { border-inline-end: 2px solid rgba(var(--tint), 0.28); border-start-end-radius: 12px; }
.orgchart li:first-child::after { border-start-start-radius: 12px; }
.orgchart ul ul::before { content: ""; position: absolute; top: 0; left: 50%; height: 26px; border-left: 2px solid rgba(var(--tint), 0.28); }
.orgchart > .orgchart-inner > ul > li { padding-top: 0; }
.orgchart > .orgchart-inner > ul > li::before, .orgchart > .orgchart-inner > ul > li::after { display: none; }

.org-node { position: relative; width: 196px; border-radius: 20px; background: var(--glass-fill-strong); border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shine), 0 10px 26px rgba(0, 0, 0, 0.18);
  overflow: hidden; transition: transform 140ms ease, box-shadow 140ms ease; }
.org-node::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: rgba(var(--lvl), 0.95); }
.org-node:hover { transform: translateY(-2px); box-shadow: var(--glass-shine), 0 16px 34px rgba(0, 0, 0, 0.25); }
.org-node.vacant { border: 2px dashed rgba(255, 196, 107, 0.75); }
.org-node-main { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.85rem 0.8rem 0.7rem; text-decoration: none; color: var(--erp-text); text-align: center; }
.org-level { align-self: center; font-size: 0.7rem; font-weight: 800; padding: 0.1rem 0.6rem; border-radius: 99px; background: rgba(var(--lvl), 0.2); color: var(--erp-text); }
.org-title { font-size: 0.95rem; line-height: 1.5; color: var(--erp-strong); }
.org-unit { font-size: 0.75rem; color: var(--erp-muted); }
.org-holder { font-size: 0.8rem; display: inline-flex; gap: 0.3rem; align-items: center; justify-content: center; margin-top: 0.15rem; }
.org-holder.empty { color: var(--erp-amber); font-weight: 700; }
.org-actions { display: flex; justify-content: center; gap: 0.25rem; padding: 0 0.5rem 0.55rem; opacity: 0.55; transition: opacity 140ms; }
.org-node:hover .org-actions, .org-node:focus-within .org-actions { opacity: 1; }
.org-actions a { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--erp-text); background: rgba(var(--tint), 0.08); text-decoration: none; }
.org-actions a:hover { background: var(--erp-sky); color: var(--erp-on-accent); }

.secret-code { font-size: 1.05rem; letter-spacing: 0.05em; padding: 0.2rem 0.5rem; border-radius: 8px; background: rgba(255, 196, 107, 0.18); color: var(--erp-strong); }
@media print { .no-print, .erp-sidebar, .erp-topbar, .mobile-bar { display: none !important; } .credentials { border: 0 !important; } }

/* Large charts: collapsible branches, stacked employees, compact boxes, branch path */
.orgchart li.collapsed > ul { display: none; }
.org-toggle { display: flex; align-items: center; justify-content: center; gap: 0.35rem; width: 100%; border: 0; border-top: 1px solid var(--glass-line-soft);
  background: rgba(var(--tint), 0.05); color: var(--erp-muted); font: inherit; font-size: 0.75rem; font-weight: 700; padding: 0.4rem; cursor: pointer; }
.org-toggle:hover { background: rgba(var(--tint), 0.1); color: var(--erp-strong); }
.org-toggle .when-open { display: none; }
li:not(.collapsed) > .org-node > .org-toggle .when-open { display: inline-flex; gap: 0.35rem; align-items: center; }
li:not(.collapsed) > .org-node > .org-toggle .when-closed { display: none; }
.orgchart li.collapsed > .org-node > .org-toggle { color: var(--erp-sky-text); background: rgba(92, 196, 245, 0.12); }

.orgchart ul.stack { flex-direction: column; align-items: center; gap: 10px; padding-top: 22px; }
.orgchart ul.stack::before { height: 22px; }
.orgchart ul.stack > li { padding: 0; }
.orgchart ul.stack > li::before, .orgchart ul.stack > li::after { display: none; }
.orgchart ul.stack > li + li::before { display: block; content: ""; position: absolute; top: -10px; left: 50%; width: 0; height: 10px; border: 0; border-left: 2px solid rgba(var(--tint), 0.28); }
.org-node.compact { width: 172px; border-radius: 16px; }
.org-node.compact .org-node-main { padding: 0.55rem 0.6rem 0.4rem; }
.org-node.compact .org-title { font-size: 0.82rem; }
.org-node.compact .org-holder { font-size: 0.74rem; }
.org-node.compact .org-actions { padding-bottom: 0.4rem; }

.org-path { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0.55rem 0.8rem; margin-bottom: 0.6rem; border-radius: 14px; background: rgba(var(--tint), 0.05); font-size: 0.9rem; }
.org-path a { text-decoration: none; display: inline-flex; gap: 0.3rem; align-items: center; }
.org-path .bi-chevron-left { color: var(--erp-faint); font-size: 0.75rem; }


/* ── Speed ──────────────────────────────────────────────────────────
   Backdrop blur is the most expensive effect in the page. Keep it for the large
   surfaces where it is visible; small controls get a plain translucent fill. */
.icon-btn.glass, .lang-switch.glass, .chart-tabs.glass, .btn.glass, .stat.glass, .glass-card.stat {
  -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-fill-strong);
}
.glass-card { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Lighter effects on slower computers and for people who ask for less transparency
   (set automatically in theme.js): no blur at all, solid panels. */
html.lite .glass, html.lite .glass-panel, html.lite .erp-sidebar, html.lite .dropdown-menu, html.lite .modal-content {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--erp-glass-solid) !important;
}
html.lite .glass-panel::after, html.lite .glass-card::after { display: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ── Date / time picker ─────────────────────────────────────────── */
.dp { position: absolute; z-index: 2000; border-radius: 22px; padding: 0.85rem; background: var(--erp-menu-bg-solid) !important;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shine), 0 22px 50px rgba(0, 0, 0, 0.35); }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.dp-head strong { font-size: 1.02rem; }
.dp-nav { width: 36px; height: 36px; border-radius: 12px; border: 0; background: rgba(var(--tint), 0.08); color: var(--erp-text); }
.dp-nav:hover { background: rgba(var(--tint), 0.16); }
.dp-quick { display: flex; gap: 0.35rem; margin-bottom: 0.55rem; }
.dp-quick button, .dp-times button { flex: 1; border: 1px solid var(--glass-line-soft); background: rgba(var(--tint), 0.06); color: var(--erp-text);
  border-radius: 999px; padding: 0.2rem 0.5rem; font: inherit; font-size: 0.8rem; font-weight: 700; }
.dp-quick button:hover, .dp-times button:hover { background: var(--erp-sky); color: var(--erp-on-accent); border-color: transparent; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.dp-wd { font-size: 0.75rem; color: var(--erp-faint); padding: 0.2rem 0; font-weight: 700; }
.dp-day { aspect-ratio: 1; border: 0; border-radius: 12px; background: transparent; color: var(--erp-text); font: inherit; font-size: 0.9rem; }
.dp-day:hover { background: rgba(var(--tint), 0.1); }
.dp-day.today { box-shadow: inset 0 0 0 1.5px var(--erp-sky); font-weight: 800; }
.dp-day.picked { background: var(--erp-sky); color: var(--erp-on-accent); font-weight: 800; }
.dp-time { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.65rem; padding-top: 0.6rem; border-top: 1px solid var(--glass-line-soft); flex-wrap: wrap; }
.dp-time select { width: auto; min-width: 64px; padding-block: 0.2rem; }
.dp-times { display: flex; gap: 0.3rem; flex: 1; }
.dp-foot { display: flex; justify-content: space-between; margin-top: 0.65rem; }
input[data-picker] { cursor: pointer; background-image: none; }
.dp.glass { background: #111827 !important; }
[data-theme="light"] .dp.glass { background: #ffffff !important; }
.nav-module-title { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.6rem; color: var(--erp-muted); }
.nav-module-title .bi { font-size: 0.95rem; color: var(--erp-sky); }
.dp-day.closed { display: inline-flex; align-items: center; justify-content: center; color: var(--erp-faint); opacity: 0.55; cursor: not-allowed; }
.dp-day.holiday { opacity: 1; color: var(--erp-coral); background: rgba(255, 122, 107, 0.12); text-decoration: line-through; }
.month-cell.weekend { background: rgba(var(--tint), 0.025); }
.month-cell.holiday { background: rgba(255, 122, 107, 0.08); border-color: rgba(255, 122, 107, 0.3); }
.month-cell .holiday-name { font-size: 0.72rem; font-weight: 700; color: var(--erp-coral); line-height: 1.4; }
.bubble { position: relative; }
.bubble.deleted .text { font-style: italic; color: var(--erp-faint); }
.bubble-delete { position: absolute; top: 4px; inset-inline-start: -34px; width: 28px; height: 28px; border: 0; border-radius: 9px;
  background: rgba(var(--tint), 0.08); color: var(--erp-muted); opacity: 0; transition: opacity 120ms; }
.bubble:hover .bubble-delete, .bubble-delete:focus { opacity: 1; }
.bubble-delete:hover { background: rgba(255, 122, 107, 0.25); color: var(--erp-coral); }

/* ── Task checklist ─────────────────────────────────────────────── */
.checklist-progress { height: 8px; border-radius: 99px; background: rgba(var(--tint), 0.08); margin-bottom: 0.8rem; }
.checklist-progress .progress-bar { background: linear-gradient(90deg, var(--erp-teal), var(--erp-sky)); border-radius: 99px; transition: width 240ms ease; }
.checklist { display: flex; flex-direction: column; gap: 0.4rem; }
.checklist-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border-radius: 14px; background: rgba(var(--tint), 0.04); border: 1px solid var(--glass-line-soft); }
.checklist-item .form-check-input { width: 1.3rem; height: 1.3rem; margin: 0; flex-shrink: 0; }
.checklist-item.done label { text-decoration: line-through; color: var(--erp-muted); }
.checklist-item .drag { cursor: grab; color: var(--erp-faint); }
.checklist-item .icon-btn { width: 30px; height: 30px; padding: 0; }
.checklist-item[draggable="true"]:active { opacity: 0.6; }
.row-link.blocked { opacity: 0.62; }
.row-link.blocked .bi-lock-fill { color: var(--erp-amber); }
.ticks { cursor: default; letter-spacing: -0.12em; margin-inline-start: 0.25rem; color: var(--erp-faint); }
.ticks.delivered { color: var(--erp-muted); }
.ticks.read { color: #4fb3ff; }
.ticks[role="button"] { cursor: pointer; }
.receipt-pop { position: absolute; z-index: 30; bottom: calc(100% + 6px); inset-inline-end: 0; min-width: 240px; padding: 0.6rem 0.75rem;
  border-radius: 14px; background: var(--erp-menu-bg-solid) !important; font-size: 0.78rem; display: flex; flex-direction: column; gap: 0.4rem; }
.receipt-row { display: flex; flex-direction: column; }
.receipt-row .read { color: #4fb3ff; }
.status-badge { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.9rem; border-radius: 99px; font-weight: 800; }
.status-badge.away { background: rgba(255, 196, 107, 0.2); color: var(--erp-amber-text); border: 1px solid rgba(255, 196, 107, 0.45); }
.status-badge.available { background: rgba(111, 227, 207, 0.18); color: var(--erp-teal-text); border: 1px solid rgba(111, 227, 207, 0.4); }
.away-badge { font-size: 0.7rem; font-weight: 800; color: var(--erp-amber); }

/* ── Announcements ──────────────────────────────────────────────── */
.announce-cards { display: flex; flex-direction: column; gap: 0.6rem; }
.announce-card { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 1.1rem; border-radius: 20px;
  border-inline-start: 4px solid var(--erp-sky) !important; }
.announce-card.urgent { border-inline-start-color: var(--erp-coral) !important; background: rgba(255, 122, 107, 0.1) !important; }
.announce-icon { font-size: 1.5rem; color: var(--erp-sky); }
.announce-card.urgent .announce-icon { color: var(--erp-coral); }
.announce-text p:last-child { margin-bottom: 0; }
.urgent-modal { border: 2px solid rgba(255, 122, 107, 0.6) !important; background: var(--erp-menu-bg-solid) !important; }

/* ── Task / unit calendar ───────────────────────────────────────── */
.cal-chip { position: relative; display: block; margin-top: 3px; padding: 0.2rem 0.45rem; border-radius: 8px; font-size: 0.74rem; font-weight: 700;
  text-decoration: none; color: var(--erp-strong); border-inline-start: 3px solid; background: rgba(var(--tint), 0.06); }
.cal-chip-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip[draggable="true"] { cursor: grab; }
.tone-waiting { --c: 100, 170, 255; } .tone-doing { --c: 255, 196, 107; } .tone-late { --c: 255, 122, 107; } .tone-done { --c: 111, 227, 207; }
.cal-chip.tone-waiting, .cal-chip.tone-doing, .cal-chip.tone-late, .cal-chip.tone-done { border-color: rgb(var(--c)); background: rgba(var(--c), 0.16); }
.cal-preview { display: none; position: absolute; z-index: 40; top: calc(100% + 4px); inset-inline-start: 0; width: 240px; padding: 0.55rem 0.7rem;
  border-radius: 12px; background: var(--erp-menu-bg-solid); border: 1px solid var(--glass-line); box-shadow: 0 14px 30px rgba(0,0,0,.3);
  flex-direction: column; gap: 0.15rem; font-weight: 400; color: var(--erp-text); white-space: normal; }
.cal-chip:hover .cal-preview, .cal-chip:focus .cal-preview { display: flex; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.cal-legend span[class^="tone-"]::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 0.35rem; background: rgb(var(--c)); }
.month-cell.drop, .week-col.drop, .agenda-day.drop { outline: 2px dashed var(--erp-sky); outline-offset: -2px; }
.week-grid { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); gap: 6px; overflow-x: auto; }
.week-col { min-height: 320px; padding: 0.5rem; border-radius: 14px; background: rgba(var(--tint), 0.03); border: 1px solid var(--glass-line-soft); }
.week-col.today { border-color: var(--erp-sky); } .week-col.holiday { background: rgba(255, 122, 107, 0.07); }
.week-head { font-size: 0.78rem; font-weight: 800; margin-bottom: 0.3rem; }
.agenda { display: flex; flex-direction: column; gap: 0.7rem; }
.agenda-date { font-weight: 800; margin-bottom: 0.3rem; }
.agenda-row { display: flex; align-items: center; gap: 0.6rem; } .agenda-row .cal-chip { flex: 1; min-width: 0; font-size: 0.85rem; padding: 0.4rem 0.6rem; }
.print-only { display: none; }
@media print { .print-only { display: block; } .cal-preview { display: none !important; } }
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; align-items: end; }
.podium-place { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; text-align: center; padding: 1rem 0.5rem;
  border-radius: 18px; background: rgba(var(--tint), 0.05); border: 1px solid var(--glass-line-soft); }
.podium-place.place-1 { order: 2; padding-top: 1.8rem; background: rgba(255, 196, 107, 0.12); border-color: rgba(255, 196, 107, 0.4); }
.podium-place.place-2 { order: 1; } .podium-place.place-3 { order: 3; }
.podium .medal { font-size: 2.2rem; line-height: 1; }
.badge-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.8rem; border-radius: 99px; font-weight: 700; font-size: 0.85rem;
  background: rgba(255, 196, 107, 0.16); border: 1px solid rgba(255, 196, 107, 0.4); color: var(--erp-amber-text); }

/* ── Customizable dashboard ─────────────────────────────────────── */
.dash-wrap { display: flex; gap: 1rem; align-items: flex-start; }
.dash-wrap .grid-stack { flex: 1; min-width: 0; }
.dash-catalog { width: 280px; flex-shrink: 0; position: sticky; top: 1rem; max-height: 80vh; overflow: auto; }
@media (max-width: 991px) { .dash-wrap { flex-direction: column; } .dash-catalog { width: 100%; position: static; } }
.grid-stack-item-content { overflow: visible !important; }
.dash-widget { height: 100%; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; }
.dash-widget-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem 0.3rem; }
.dash-widget-head h2 { font-size: 0.95rem; margin: 0; flex: 1; font-weight: 800; }
.dash-widget-head .bi { color: var(--erp-sky); }
.dash-remove { display: none; width: 28px; height: 28px; border: 0; border-radius: 9px; background: rgba(255, 122, 107, 0.15); color: var(--erp-coral); }
.dash-edit-mode .dash-remove { display: inline-flex; align-items: center; justify-content: center; }
.dash-edit-mode .dash-widget { outline: 2px dashed rgba(var(--tint), 0.25); outline-offset: -2px; cursor: move; }
.dash-widget-body { flex: 1; min-height: 0; overflow: auto; padding: 0.3rem 1rem 0.9rem; }
.dash-loading { color: var(--erp-faint); font-size: 0.85rem; padding: 1rem 0; }
.dash-error { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; color: var(--erp-coral); text-align: center; }
.w-counts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6rem; height: 100%; }
@media (max-width: 767px) { .w-counts { grid-template-columns: repeat(2, 1fr); } }
.w-count { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.55rem 0.8rem; border-radius: 16px; text-decoration: none; color: var(--erp-text);
  background: rgba(var(--tint), 0.05); border: 1px solid var(--glass-line-soft); }
.w-count strong { font-size: 1.6rem; line-height: 1.2; color: var(--erp-strong); }
.w-count span { font-size: 0.78rem; color: var(--erp-muted); }
.w-count.tone-coral strong { color: var(--erp-coral); } .w-count.tone-amber strong { color: var(--erp-amber); } .w-count.tone-teal strong { color: var(--erp-teal); }
.w-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; height: 100%; text-align: center; }
.w-big { font-size: 2.6rem; font-weight: 900; color: var(--erp-strong); }
.w-chart { position: relative; height: 100%; min-height: 160px; }
.w-list .row-link { padding-block: 0.45rem; }
.grid-stack > .grid-stack-item > .ui-resizable-se { filter: invert(var(--erp-invert, 0)); }

/* Thin collapsible bars (linked tasks, checklist): closed by default, one line high */
.thin-bar { border-radius: 16px; padding: 0; overflow: visible; }
.thin-bar > summary { list-style: none; display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 1rem; cursor: pointer;
  font-weight: 700; font-size: 0.9rem; min-height: 44px; }
.thin-bar > summary::-webkit-details-marker { display: none; }
.thin-bar > summary .chip { font-size: 0.75rem; }
.thin-bar .thin-caret { transition: transform 160ms ease; color: var(--erp-muted); }
.thin-bar[open] .thin-caret { transform: rotate(180deg); }
.thin-bar.add-only > summary { color: var(--erp-muted); font-weight: 600; }
.thin-body { padding: 0.2rem 1rem 1rem; }
.thin-progress { display: inline-block; width: 90px; height: 6px; border-radius: 99px; background: rgba(var(--tint), 0.1); overflow: hidden; }
.thin-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--erp-teal), var(--erp-sky)); }
details.thin-bar { display: block; width: auto; align-self: stretch; flex-shrink: 0; background: var(--glass-surface, var(--glass-fill)); border: 1px solid var(--glass-line); }
/* Number tiles inside a page panel (not a dashboard widget) keep their natural height. */
.glass-panel > .w-counts { height: auto; }
.glass-panel > .w-counts .w-count { padding-block: 0.7rem; }


/* ── Dark mode like the original ticket system: deep slate, blue→violet accents ── */
:root:not([data-theme="light"]) .erp-nav a.active {
  background: linear-gradient(135deg, #0f62fe, #7c3aed); color: #fff;
  box-shadow: 0 10px 24px rgba(15, 98, 254, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
:root:not([data-theme="light"]) .erp-nav a.active .bi { color: #fff; }
:root:not([data-theme="light"]) .erp-nav a:not(.active):hover { background: rgba(255, 255, 255, 0.05); }
:root:not([data-theme="light"]) .btn-accent, :root:not([data-theme="light"]) .btn-primary {
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
  background: linear-gradient(135deg, #0f62fe 0%, #4c8dfe 100%); border: 0;
  box-shadow: 0 6px 16px rgba(15, 98, 254, 0.28);
}
:root:not([data-theme="light"]) .btn-accent:hover, :root:not([data-theme="light"]) .btn-primary:hover {
  background: linear-gradient(135deg, #0b4bc4, #3f7de0); box-shadow: 0 8px 20px rgba(15, 98, 254, 0.38);
}
:root:not([data-theme="light"]) .form-control, :root:not([data-theme="light"]) .form-select,
:root:not([data-theme="light"]) .glass-input { border-color: #334155; color: #e2e8f0; }
:root:not([data-theme="light"]) .form-control:focus, :root:not([data-theme="light"]) .form-select:focus,
:root:not([data-theme="light"]) .glass-input:focus { border-color: #4c8dfe; box-shadow: 0 0 0 0.2rem rgba(76, 141, 254, 0.25); }
:root:not([data-theme="light"]) .table { --bs-table-color: #e2e8f0; }
:root:not([data-theme="light"]) .dropdown-menu { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
:root:not([data-theme="light"]) .row-link:hover { background: #1f2937; }

/* ── English (left-to-right) ─────────────────────────────────────────
   The layout is written with logical properties (inline-start/end), so it
   mirrors by itself; these are the few direction-bound pieces. */
@media (max-width: 991.98px) {
  [dir="ltr"] .erp-sidebar { transform: translateX(-120%); }
  [dir="ltr"] .erp-sidebar.open { transform: none; }
}
/* Arrow-like icons were drawn for right-to-left reading: mirror them in English. */
[dir="ltr"] .bi-chevron-left, [dir="ltr"] .bi-chevron-right, [dir="ltr"] .bi-arrow-left, [dir="ltr"] .bi-arrow-right,
[dir="ltr"] .bi-arrow-left-short, [dir="ltr"] .bi-arrow-right-short, [dir="ltr"] .bi-caret-left-fill,
[dir="ltr"] .bi-caret-right-fill, [dir="ltr"] .bi-reply, [dir="ltr"] .bi-send, [dir="ltr"] .bi-box-arrow-left,
[dir="ltr"] .bi-box-arrow-right, [dir="ltr"] .bi-arrow-return-left { display: inline-block; transform: scaleX(-1); }
[dir="ltr"] .orgchart ul ul::before, [dir="ltr"] .orgchart ul.stack > li + li::before { left: 50%; }
[dir="ltr"] body { letter-spacing: 0; }

/* ── Scrollbars (Change 6) ───────────────────────────────────────────
   Scrolling stays (mouse, touch, arrow keys, Page Up/Down); only the bar is hidden. */
.erp-sidebar, .chat-log, .no-scrollbar, .dash-catalog, .receipt-pop, .dp, .notif-list, .dropdown-menu {
  scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; overscroll-behavior: contain;
}
.erp-sidebar::-webkit-scrollbar, .chat-log::-webkit-scrollbar, .no-scrollbar::-webkit-scrollbar,
.dash-catalog::-webkit-scrollbar, .receipt-pop::-webkit-scrollbar, .dp::-webkit-scrollbar,
.notif-list::-webkit-scrollbar, .dropdown-menu::-webkit-scrollbar { display: none; width: 0; height: 0; }
.chat-log:focus-visible, .no-scrollbar:focus-visible { outline: 2px solid rgba(92, 196, 245, 0.45); outline-offset: 2px; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .erp-sidebar, .chat-log, .no-scrollbar { scroll-behavior: auto; } }

/* ── Date picker: calendar tabs, other calendars, 12-hour clock (Change 11) ── */
.dp-cals { display: flex; gap: 3px; padding: 3px; margin-bottom: 0.55rem; border-radius: 12px; background: rgba(var(--tint), 0.06); }
.dp-cals button { flex: 1; border: 0; border-radius: 9px; padding: 0.3rem 0.2rem; font: inherit; font-size: 0.76rem; font-weight: 700;
  background: transparent; color: var(--erp-muted); }
.dp-cals button[aria-selected="true"] { background: var(--erp-sky); color: var(--erp-on-accent); }
.dp-also { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; margin-top: 0.5rem; font-size: 0.75rem; color: var(--erp-muted); }
.dp-ampm { display: inline-flex; border-radius: 10px; overflow: hidden; border: 1px solid var(--glass-line-soft); }
.dp-ampm button { border: 0; padding: 0.25rem 0.55rem; font: inherit; font-size: 0.8rem; font-weight: 700; background: transparent; color: var(--erp-muted); }
.dp-ampm button[aria-pressed="true"] { background: var(--erp-sky); color: var(--erp-on-accent); }
.dp > .dp-times { margin-top: 0.45rem; }
.reauth-icon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: var(--erp-sky); background: rgba(92, 196, 245, 0.14); }
.toast-glass.toast-ok, .toast-glass.toast-error { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; border-radius: 16px; font-weight: 600; }
.toast-glass.toast-ok > .bi { color: var(--erp-teal); font-size: 1.2rem; }
.toast-glass.toast-error > .bi { color: var(--erp-coral); font-size: 1.2rem; }

/* ── Settings → Permissions ───────────────────────────────────────── */
.perm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
.perm-wrap { overflow: hidden; }
.perm-wrap .table-responsive { max-height: 70vh; }
.perm-table { min-width: 720px; }
.perm-table thead th { position: sticky; top: 0; z-index: 3; background: var(--erp-menu-bg-solid); }
.perm-table .perm-name { position: sticky; inset-inline-start: 0; z-index: 2; background: var(--erp-menu-bg-solid); min-width: 260px; max-width: 340px; white-space: normal; font-weight: 400; }
.perm-table thead .perm-name { z-index: 4; }
.perm-role { text-align: center; min-width: 108px; }
.perm-role small { display: block; font-weight: 400; color: var(--erp-faint); }
.perm-key { display: block; font-size: 0.7rem; color: var(--erp-faint); }
.perm-group-row th { background: rgba(var(--tint), 0.04) !important; }
.perm-group-toggle { border: 0; background: transparent; color: var(--erp-strong); font: inherit; font-weight: 800; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0; }
.perm-group-toggle .bi { transition: transform 160ms ease; }
.perm-group-toggle[aria-expanded="false"] .bi { transform: rotate(-90deg); }
[dir="rtl"] .perm-group-toggle[aria-expanded="false"] .bi { transform: rotate(90deg); }
.perm-switch { width: 2.4em !important; height: 1.3em; cursor: pointer; }
.perm-switch:disabled { opacity: 0.5; }
tr[data-state="allow"] .override-select { border-color: var(--erp-teal); }
tr[data-state="deny"] .override-select { border-color: var(--erp-coral); }
.leave-request { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; padding: 0.75rem 0.9rem; border-radius: 16px; background: rgba(var(--tint), 0.04); margin-bottom: 0.5rem; }
.avatar-sm { width: 34px !important; height: 34px !important; font-size: 0.8rem !important; }

/* ── Welcome header on dashboards (Change 8) ──────────────────────── */
.welcome-hero { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem; padding: 1.4rem 1.6rem; border-radius: 28px; color: #fff; isolation: isolate;
  background: linear-gradient(120deg, #0b3d91 0%, #0f62fe 45%, #0fb5a4 100%);
  box-shadow: 0 18px 40px rgba(15, 98, 254, 0.28); animation: welcome-in 520ms cubic-bezier(.2,.8,.2,1) both; }
[data-theme="dark"] .welcome-hero { background: linear-gradient(120deg, #0b2a66 0%, #1d4ed8 50%, #0e7c72 100%); box-shadow: 0 18px 44px rgba(2, 10, 28, 0.55); }
.welcome-glow { position: absolute; inset: -40% -10% auto auto; width: 340px; height: 340px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 65%); animation: welcome-float 9s ease-in-out infinite alternate; }
[dir="rtl"] .welcome-glow { inset: -40% auto auto -10%; }
.welcome-main { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.welcome-avatar { width: 64px; height: 64px; border-radius: 22px; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); }
.welcome-avatar.initials { display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 800; color: #fff;
  background: hsl(var(--hue, 210) 70% 42%); }
.welcome-greeting { display: flex; align-items: center; gap: 0.4rem; font-size: 0.92rem; font-weight: 600; opacity: 0.92; }
.welcome-title { margin: 0.1rem 0 0; font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: 800; line-height: 1.35; color: #fff; overflow-wrap: anywhere; }
.welcome-dates { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.welcome-date { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.85rem; border-radius: 18px; min-width: 150px;
  background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: welcome-in 520ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(120ms + var(--delay, 0) * 90ms); }
.welcome-date small { display: block; font-size: 0.72rem; opacity: 0.85; }
.welcome-date strong { display: block; font-size: 0.98rem; font-weight: 800; white-space: nowrap; }
.welcome-date-icon { width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.2); font-size: 1.05rem; flex-shrink: 0; }
@keyframes welcome-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes welcome-float { from { transform: translate(0, 0); } to { transform: translate(-30px, 25px); } }
@media (max-width: 575.98px) { .welcome-hero { padding: 1.1rem; border-radius: 22px; } .welcome-date { flex: 1 1 100%; } .welcome-avatar { width: 52px; height: 52px; } }

/* ── My sticky notes / My reminders (Change 24, 17) ───────────────── */
.note-composer { max-width: 640px; margin-inline: auto; border-radius: 22px; padding: 0.8rem 1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.note-composer input[type=text], .note-composer textarea, .note-edit-title, .note-edit-body { border: 0; background: transparent; color: inherit; font: inherit; outline: none; resize: vertical; width: 100%; }
.note-composer-title, .note-edit-title { font-weight: 800; }
.note-composer-bar { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.note-colors { display: flex; gap: 0.35rem; }
.note-swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid rgba(0, 0, 0, 0.12); position: relative; }
.note-swatch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.note-swatch:has(input:checked) { box-shadow: 0 0 0 3px var(--erp-sky); }
.note-swatch:has(input:focus-visible) { outline: 2px solid var(--erp-sky); outline-offset: 2px; }
.notes-board { margin-top: 1.2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; align-items: start; }
.note { position: relative; border-radius: 18px; padding: 0.9rem 1rem 0.7rem; min-height: 120px; color: #1f2937; cursor: text;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12); transition: transform 140ms ease, box-shadow 140ms ease; display: flex; flex-direction: column; gap: 0.35rem; }
.note:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(15, 23, 42, 0.16); }
.note:focus-visible { outline: 3px solid var(--erp-sky); outline-offset: 3px; }
.note.dragging { opacity: 0.45; transform: scale(0.98); }
.note.pinned::after { content: ""; position: absolute; top: -6px; inset-inline-end: 18px; width: 14px; height: 14px; border-radius: 50%; background: #ef4444; box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.note-title { font-size: 1rem; font-weight: 800; margin: 0; overflow-wrap: anywhere; }
.note-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.92rem; flex-grow: 1; }
.note-meta { font-size: 0.72rem; opacity: 0.6; }
.note-tools { position: absolute; top: 6px; inset-inline-end: 6px; display: flex; gap: 2px; opacity: 0; transition: opacity 120ms; }
.note:hover .note-tools, .note:focus-within .note-tools { opacity: 1; }
.note-grip { cursor: grab; padding: 4px; color: rgba(31, 41, 55, 0.6); }
.note-btn { width: 30px; height: 30px; border: 0; border-radius: 10px; background: transparent; color: inherit; display: inline-flex; align-items: center; justify-content: center; }
.note .note-btn { color: #1f2937; }
.note-btn:hover { background: rgba(var(--tint), 0.1); }
.note .note-btn:hover { background: rgba(0, 0, 0, 0.08); }
.note.editing { cursor: default; }
.note-yellow, .note-swatch.note-yellow, .note-dot.note-yellow { background: #fef08a; }
.note-pink, .note-swatch.note-pink, .note-dot.note-pink { background: #fbcfe8; }
.note-green, .note-swatch.note-green, .note-dot.note-green { background: #bbf7d0; }
.note-blue, .note-swatch.note-blue, .note-dot.note-blue { background: #bfdbfe; }
.note-purple, .note-swatch.note-purple, .note-dot.note-purple { background: #ddd6fe; }
.note-orange, .note-swatch.note-orange, .note-dot.note-orange { background: #fed7aa; }
[data-theme="dark"] .note { filter: saturate(0.9) brightness(0.92); }
.note-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.notes-empty { margin-top: 2rem; text-align: center; }
@media (hover: none) { .note-tools { opacity: 1; } }
.reminder-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; padding: 0.65rem 0.75rem; border-radius: 16px; background: rgba(var(--tint), 0.03); }
.reminder-row.ringing { background: rgba(255, 196, 107, 0.16); box-shadow: inset 3px 0 0 var(--erp-amber); }
.reminder-row .meta { font-size: 0.8rem; color: var(--erp-muted); }
.reminder-check { width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: var(--erp-muted); font-size: 1.3rem; }
.reminder-check:hover i::before { content: "\f26b"; color: var(--erp-teal); }
.snooze-custom { flex-basis: 100%; display: flex; gap: 0.5rem; }
.focus-flash { animation: focus-flash 1.6s ease 2; }
@keyframes focus-flash { 50% { box-shadow: 0 0 0 3px var(--erp-sky); } }
.mini-notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.5rem; }
.mini-note { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.55rem 0.65rem; border-radius: 12px; color: #1f2937 !important; text-decoration: none; font-size: 0.82rem; min-height: 70px; }
.mini-note strong { font-size: 0.85rem; }
.history-filters { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.history-filters button { border: 1px solid var(--glass-line-soft); background: transparent; color: var(--erp-muted); border-radius: 999px;
  padding: 0.2rem 0.7rem; font: inherit; font-size: 0.78rem; font-weight: 700; }
.history-filters button[aria-pressed="true"] { background: var(--erp-sky); border-color: transparent; color: var(--erp-on-accent); }
.timeline .dot-chat { background: var(--erp-teal) !important; }
.chip-violet { background: rgba(167, 139, 250, 0.22); color: inherit; }

/* ── Profile picture (Change 9) ───────────────────────────────────── */
.avatar-edit { position: relative; display: inline-block; }
.avatar-initials { display: inline-flex !important; align-items: center; justify-content: center; color: #fff !important; background: hsl(var(--hue, 210) 65% 45%) !important; font-weight: 800; }
.avatar-initials[hidden] { display: none !important; }
.avatar-camera { position: absolute; bottom: 4px; inset-inline-end: 4px; width: 38px; height: 38px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; background: var(--erp-sky); color: var(--erp-on-accent); cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.avatar-camera:hover { filter: brightness(1.08); }
.crop-area { max-height: 60vh; background: rgba(var(--tint), 0.05); border-radius: 16px; overflow: hidden; }
.crop-area img { display: block; max-width: 100%; }
.crop-tools { display: flex; gap: 0.4rem; align-items: center; margin-top: 0.8rem; }
.crop-preview { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; margin-inline-start: auto; box-shadow: 0 0 0 3px rgba(var(--tint), 0.2); }
.sound-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.4rem 1rem; }
.sound-grid.is-off { opacity: 0.45; pointer-events: none; }
.auth-head { display: flex; flex-wrap: wrap-reverse; justify-content: space-between; align-items: flex-start; gap: 0.8rem 1rem; }
.auth-head-text { flex: 1 1 230px; min-width: 0; }
.auth-head > .d-flex { flex-shrink: 0; }

/* ── Forwarding (Change 20) and overdue decision (Change 16) ───────── */
.part-mine { padding: 0.8rem; border-radius: 16px; background: rgba(92, 196, 245, 0.08); margin-bottom: 0.8rem; display: flex; flex-direction: column; gap: 0.35rem; }
.forward-node { border-inline-start: 3px solid rgba(var(--tint), 0.15); padding-inline-start: 0.8rem; margin-bottom: 0.8rem; }
.forward-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.forward-parts { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.4rem; }
.forward-parts > li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; border-radius: 12px; background: rgba(var(--tint), 0.04); }
.forward-child { flex-basis: 100%; margin-top: 0.4rem; }
.forward-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--erp-sky); flex-shrink: 0; }
.forward-dot.submitted { background: var(--erp-teal); } .forward-dot.returned { background: var(--erp-coral); }
.forward-form summary { list-style: none; display: inline-flex; } .forward-form summary::-webkit-details-marker { display: none; }
.forward-targets { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.3rem 1rem; }
.overdue-decide { align-items: flex-start; }
.band-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0.9rem; padding: 0; list-style: none; }
.band-tab { border: 1px solid var(--glass-line-soft); background: transparent; color: var(--erp-muted); border-radius: 999px; padding: 0.35rem 0.8rem; font: inherit; font-weight: 700; font-size: 0.85rem; display: inline-flex; gap: 0.4rem; align-items: center; }
.band-tab.active { background: var(--erp-sky); color: var(--erp-on-accent); border-color: transparent; }

/* ── Assignment statistics (Change 22) ───────────────────────────── */
.stats-filters { display: flex; flex-direction: column; gap: 0.8rem; }
.stats-filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.7rem 0.9rem; }
.stats-filter-row .form-select, .stats-filter-row .form-control { min-width: 130px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 0.8rem; }
.stat-mini { padding: 0.9rem 1rem; gap: 0.35rem; }
.stat-mini .stat-head { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; }
.stat-mini .stat-value { font-size: 1.55rem; }
.mini-bar { height: 6px; border-radius: 3px; background: rgba(var(--tint), 0.1); overflow: hidden; width: 80px; display: inline-block; vertical-align: middle; margin-inline-end: 0.4rem; }
.mini-bar span { display: block; height: 100%; background: var(--erp-teal); }
.seg { display: inline-flex; gap: 0.25rem; }

/* ── Group chats (Change 21) ─────────────────────────────────────── */
.chat-app { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; height: calc(100vh - 190px); min-height: 480px; padding: 0; overflow: hidden; position: relative; }
.btn-icon { width: 38px; height: 38px; padding: 0; display: inline-grid; place-items: center; border-radius: 12px; color: var(--erp-muted); background: transparent; border: 0; flex: none; }
.btn-icon:hover, .btn-icon:focus-visible { background: rgba(var(--tint), 0.08); color: var(--erp-text); }
.btn-icon.btn-sm { width: 30px; height: 30px; border-radius: 9px; }
.chat-list { border-inline-end: 1px solid var(--glass-line); display: flex; flex-direction: column; min-height: 0; }
.chat-list-head { display: flex; gap: 0.4rem; padding: 0.8rem; border-bottom: 1px solid var(--glass-line-soft); }
.chat-search { flex: 1; display: flex; align-items: center; gap: 0.45rem; background: var(--erp-input-bg); border-radius: var(--r-control); padding: 0 0.7rem; }
.chat-search input { flex: 1; background: transparent; border: 0; color: var(--erp-text); padding: 0.5rem 0; outline: 0; min-width: 0; }
.chat-rooms { overflow-y: auto; flex: 1; }
.chat-room-row { display: flex; gap: 0.7rem; align-items: center; padding: 0.65rem 0.9rem; color: var(--erp-text); text-decoration: none; border-bottom: 1px solid var(--glass-line-soft); }
.chat-room-row:hover { background: rgba(var(--tint), 0.04); color: var(--erp-text); }
.chat-room-row.active { background: rgba(76, 141, 254, 0.14); }
.chat-room-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.chat-room-top, .chat-room-bottom { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.chat-room-top strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.93rem; }
.chat-room-time { color: var(--erp-faint); font-size: 0.72rem; flex: none; }
.chat-room-row.unread .chat-room-time { color: var(--erp-teal); font-weight: 600; }
.chat-room-preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; color: var(--erp-muted); }
.chat-unread { background: var(--erp-teal); color: #062e22; border-radius: 999px; min-width: 1.3rem; padding: 0 0.4rem; font-size: 0.72rem; font-weight: 700; text-align: center; line-height: 1.3rem; }
.chat-unread.muted { background: var(--erp-faint); color: var(--erp-bg); }
.chat-muted { color: var(--erp-faint); font-size: 0.8rem; }
.chat-at { color: var(--erp-teal); font-weight: 800; }
.chat-empty { padding: 1.2rem; color: var(--erp-muted); }
.chat-avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 0.95rem; overflow: hidden; position: relative; background: var(--erp-sky); }
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-avatar.sm { width: 34px; height: 34px; font-size: 0.8rem; overflow: visible; }
.chat-avatar.sm img { border-radius: 50%; }
.chat-avatar.online::after { content: ""; position: absolute; bottom: 0; inset-inline-end: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--erp-teal); border: 2px solid var(--erp-bg-2); }
.chat-room { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.chat-placeholder { flex: 1; display: grid; place-content: center; justify-items: center; gap: 0.8rem; color: var(--erp-muted); text-align: center; padding: 2rem; }
.chat-room-inner { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.chat-room-inner[hidden] { display: none; }
.chat-room-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--glass-line); }
.chat-room-title { flex: 1; min-width: 0; text-align: start; background: none; border: 0; color: var(--erp-text); display: flex; flex-direction: column; padding: 0; }
.chat-room-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-room-title small { color: var(--erp-muted); font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-room-title small.typing { color: var(--erp-teal); }
.chat-back { display: none; }
.chat-stream { flex: 1; overflow-y: auto; padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; overscroll-behavior: contain;
  background-image: radial-gradient(rgba(var(--tint), 0.035) 1px, transparent 1px); background-size: 18px 18px; }
.chat-stream .bubble { max-width: min(78%, 560px); }
.chat-stream .bubble.mine + .bubble.theirs, .chat-stream .bubble.theirs + .bubble.mine { margin-top: 0.45rem; }
.chat-day { align-self: center; font-size: 0.72rem; color: var(--erp-muted); background: rgba(var(--tint), 0.07); padding: 0.15rem 0.7rem; border-radius: 999px; margin: 0.5rem 0; }
.chat-system { align-self: center; font-size: 0.76rem; color: var(--erp-muted); text-align: center; max-width: 80%; }
.chat-unread-line { border-top: 1px dashed var(--erp-teal); margin: 0.5rem 0; opacity: 0.7; }
.bubble.pending { opacity: 0.75; }
.bubble.failed { border-color: var(--erp-coral) !important; cursor: pointer; }
.bubble.flash { box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.5); transition: box-shadow 0.3s; }
.bubble .meta { display: flex; gap: 0.2rem; justify-content: flex-end; align-items: center; }
.ticks.failed { color: var(--erp-coral); }
.chat-quote { display: flex; flex-direction: column; text-align: start; width: 100%; background: rgba(var(--tint), 0.07); border: 0; border-inline-start: 3px solid var(--erp-teal); border-radius: 8px; padding: 0.25rem 0.5rem; margin-bottom: 0.25rem; color: var(--erp-text); font-size: 0.78rem; }
.chat-quote strong { color: var(--erp-teal-text); }
.chat-quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--erp-muted); }
.chat-image img { display: block; max-width: 100%; max-height: 300px; border-radius: 12px; margin: 0.15rem 0; }
.chat-file { display: flex; gap: 0.4rem; align-items: center; padding: 0.4rem 0.55rem; background: rgba(var(--tint), 0.07); border-radius: 10px; text-decoration: none; font-size: 0.85rem; word-break: break-all; }
.mention { color: var(--erp-sky-soft); font-weight: 600; }
.mention.me { background: rgba(52, 211, 153, 0.18); color: var(--erp-teal-text); border-radius: 4px; padding: 0 0.15rem; }
.chat-reactions { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.15rem; }
.chat-reactions:empty { display: none; }
.chat-react { border: 1px solid var(--glass-line); background: rgba(var(--tint), 0.06); color: var(--erp-text); border-radius: 999px; padding: 0 0.45rem; font-size: 0.8rem; line-height: 1.6; }
.chat-react.mine { border-color: var(--erp-teal); background: rgba(52, 211, 153, 0.15); }
.chat-actions { position: absolute; top: -14px; inset-inline-end: 6px; display: flex; gap: 2px; background: var(--erp-menu-bg-solid); border: 1px solid var(--glass-line); border-radius: 10px; padding: 2px; opacity: 0; pointer-events: none; transition: opacity 0.12s; z-index: 2; }
.bubble:hover .chat-actions, .bubble:focus-within .chat-actions { opacity: 1; pointer-events: auto; }
.bubble.active .chat-actions { opacity: 1; pointer-events: auto; }
.chat-stream .bubble .text[dir="auto"] { text-align: start; unicode-bidi: plaintext; }
.emoji-pick { position: absolute; z-index: 5; top: -48px; inset-inline-end: 0; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--erp-menu-bg-solid); }
.emoji-pick button { border: 0; background: transparent; font-size: 1.25rem; width: 36px; height: 36px; border-radius: 50%; }
.emoji-pick button:hover, .emoji-pick button:focus-visible { background: rgba(var(--tint), 0.1); transform: scale(1.15); }
.chat-typing:empty { display: none; }
.chat-reply { display: flex; align-items: center; gap: 0.5rem; margin: 0 0.9rem; padding: 0.4rem 0.6rem; border-inline-start: 3px solid var(--erp-teal); background: rgba(var(--tint), 0.06); border-radius: 10px 10px 0 0; }
.chat-reply > div { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 0.8rem; }
.chat-reply span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--erp-muted); }
.chat-reply[hidden] { display: none; }
.chat-composer { display: flex; align-items: flex-end; gap: 0.35rem; padding: 0.6rem 0.8rem; border-top: 1px solid var(--glass-line); }
.chat-composer textarea { flex: 1; resize: none; background: var(--erp-input-bg); color: var(--erp-text); border: 1px solid var(--glass-line); border-radius: 20px; padding: 0.5rem 0.9rem; max-height: 160px; outline: 0; line-height: 1.5; }
.chat-composer textarea:focus { border-color: var(--erp-sky); }
.chat-composer .btn-accent.btn-icon { border-radius: 50%; color: var(--erp-on-accent); }
[dir="rtl"] .chat-composer .bi-send-fill { display: inline-block; transform: scaleX(-1); }
.chat-app.recording .chat-composer textarea { color: var(--erp-coral-text); }
.chat-app.recording #micBtn { color: var(--erp-coral); }
.mention-pop { margin: 0 0.9rem; background: var(--erp-menu-bg-solid); border: 1px solid var(--glass-line); border-radius: 12px; overflow: hidden; }
.mention-pop[hidden] { display: none; }
.mention-opt { display: block; width: 100%; text-align: start; border: 0; background: transparent; color: var(--erp-text); padding: 0.45rem 0.8rem; }
.mention-opt.active, .mention-opt:hover { background: rgba(76, 141, 254, 0.18); }
.chat-side { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(320px, 100%); background: var(--erp-glass-solid); border-inline-start: 1px solid var(--glass-line); padding: 1rem; overflow-y: auto; z-index: 6; box-shadow: var(--glass-drop); }
.chat-side[hidden] { display: none; }
.chat-member { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0; border-bottom: 1px solid var(--glass-line-soft); }
.chat-member small { display: block; font-size: 0.72rem; }
.new-room-people { max-height: 300px; overflow-y: auto; border: 1px solid var(--glass-line); border-radius: var(--r-control); padding: 0.4rem 0.8rem; }
.new-room-person { padding: 0.2rem 0; }
.new-room-person[hidden] { display: none; }
.chat-info li { padding: 0.4rem 0; border-bottom: 1px solid var(--glass-line-soft); }
[data-theme="light"] .chat-unread { color: #fff; }
@media (max-width: 767px) {
  .chat-app { grid-template-columns: 1fr; height: calc(100vh - 150px); }
  .chat-room { display: none; }
  .chat-app.show-room .chat-list { display: none; }
  .chat-app.show-room .chat-room { display: flex; }
  .chat-back { display: inline-grid; }
  .chat-stream { padding: 0.8rem; }
  .chat-stream .bubble { max-width: 88%; }
}
@media (prefers-reduced-motion: reduce) { .bubble.flash, .chat-actions { transition: none; } }

/* ── Organization chart, interactive (Change 23) ─────────────────── */
.org-panel { padding-bottom: 1rem; }
.org-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.6rem; }
.org-search { position: relative; display: flex; align-items: center; gap: 0.45rem; background: var(--erp-input-bg); border-radius: var(--r-control); padding: 0 0.7rem; min-width: min(320px, 100%); flex: 1 1 240px; max-width: 420px; }
.org-search input { flex: 1; background: transparent; border: 0; color: var(--erp-text); padding: 0.45rem 0; outline: 0; min-width: 0; }
.org-results { position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 20; max-height: 360px; overflow-y: auto; padding: 0.3rem; border-radius: 14px; background: var(--erp-menu-bg-solid); }
.org-result { display: flex; flex-direction: column; width: 100%; text-align: start; border: 0; background: transparent; color: var(--erp-text); padding: 0.45rem 0.6rem; border-radius: 10px; }
.org-result small { color: var(--erp-muted); }
.org-result.active, .org-result:hover { background: rgba(76, 141, 254, 0.18); }
.org-result.empty { color: var(--erp-muted); }
.org-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin-bottom: 0.5rem; }
.org-canvas { position: relative; height: max(460px, calc(100vh - 330px)); border-radius: 18px; overflow: hidden; touch-action: none; cursor: grab; user-select: none;
  background-color: rgba(var(--tint), 0.02); background-image: radial-gradient(rgba(var(--tint), 0.06) 1px, transparent 1px); background-size: 22px 22px; border: 1px solid var(--glass-line-soft); }
.org-canvas.panning { cursor: grabbing; }
.org-canvas.move-mode { box-shadow: inset 0 0 0 2px rgba(76, 141, 254, 0.5); }
.org-canvas svg { width: 100%; height: 100%; display: block; font-family: var(--bs-body-font-family); }
.org-n { cursor: pointer; outline: none; }
.org-n .org-box { transition: stroke 0.15s, filter 0.15s; }
.org-n:hover .org-box, .org-n:focus-visible .org-box { stroke: var(--erp-sky); stroke-width: 2; }
.org-n.is-focus .org-box { stroke: var(--erp-sky); stroke-width: 2.5; filter: drop-shadow(0 6px 18px rgba(76, 141, 254, 0.35)); }
.org-n.flash .org-box { stroke: var(--erp-teal); stroke-width: 3.5; }
.org-n.dragging { opacity: 0.8; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45)); }
.org-n.drop-ok .org-box { stroke: var(--erp-teal); stroke-width: 3; stroke-dasharray: none; }
.org-n.drop-bad .org-box { stroke: var(--erp-coral); stroke-width: 3; }
.move-mode .org-n { cursor: move; }
.org-tog { cursor: pointer; }
.org-tog:hover rect { stroke-width: 2; }
.org-move-hint { position: absolute; top: 10px; inset-inline-start: 50%; transform: translateX(-50%); background: var(--erp-menu-bg-solid); border: 1px solid var(--erp-sky); border-radius: 999px; padding: 0.3rem 0.9rem; font-size: 0.85rem; pointer-events: none; }
[dir="rtl"] .org-move-hint { transform: translateX(50%); }
.org-card { position: absolute; z-index: 10; width: 300px; max-width: calc(100% - 16px); padding: 0.9rem; border-radius: 18px; background: var(--erp-menu-bg-solid); box-shadow: var(--glass-drop); cursor: default; user-select: text; }
.org-card[hidden] { display: none; }
.org-card-head { position: relative; padding-inline-end: 1.6rem; border-top: 4px solid var(--tone); padding-top: 0.5rem; margin-top: -0.4rem; display: flex; flex-direction: column; gap: 0.15rem; }
.org-card-level { color: var(--tone); font-size: 0.75rem; font-weight: 700; }
.org-card-close { position: absolute; top: 0.4rem; inset-inline-end: 0; transform: scale(0.8); }
[data-theme="light"] .org-card-close { filter: none; }
.org-card-people { margin: 0.7rem 0; display: flex; flex-direction: column; gap: 0.4rem; }
.org-card-people li { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.org-card-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; color: #fff; font-size: 0.75rem; font-weight: 700; flex: none; }
.org-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.org-card-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.org-card-actions .btn { display: inline-flex; gap: 0.3rem; align-items: center; }
.org-card-move { margin-top: 0.7rem; border-top: 1px solid var(--glass-line); padding-top: 0.6rem; }
.org-empty { position: absolute; inset: 0; display: grid; place-content: center; }
.org-empty[hidden] { display: none; }
body.busy, body.busy * { cursor: progress !important; }
@media (max-width: 767px) { .org-canvas { height: calc(100vh - 260px); } .org-card { width: auto; } }