/* ============================================================
   ServerNet Base (سرورنت فرایند) — always active, both themes
   IRANSans font + RTL fixes + brand accents + login layout
   ============================================================ */

/* ---------- IRANSans (same files as servernet.cloud) ---------- */
@font-face { font-family: 'IRANSans'; src: url('/fonts/iransans/IRANSans-UltraLight-web.woff2') format('woff2'), url('/fonts/iransans/IRANSans-UltraLight-web.woff') format('woff'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'IRANSans'; src: url('/fonts/iransans/IRANSans-Light-web.woff2') format('woff2'), url('/fonts/iransans/IRANSans-Light-web.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'IRANSans'; src: url('/fonts/iransans/IRANSans-web.woff2') format('woff2'), url('/fonts/iransans/IRANSans-web.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IRANSans'; src: url('/fonts/iransans/IRANSans-Medium-web.woff2') format('woff2'), url('/fonts/iransans/IRANSans-Medium-web.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IRANSans'; src: url('/fonts/iransans/IRANSans-Bold-web.woff2') format('woff2'), url('/fonts/iransans/IRANSans-Bold-web.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --sn-blue: #3B82F6;
  --sn-cyan: #22D3EE;
  --sn-violet: #8B5CF6;
  --sn-green: #34D399;
  --sn-grad: linear-gradient(100deg, #3B82F6, #22D3EE);
  --sn-grad-txt: linear-gradient(100deg, #60A5FA 0%, #22D3EE 55%, #A78BFA 100%);
  --sn-r: 16px;
  --sn-r-sm: 10px;
  --sn-r-lg: 22px;
  --sn-ease: cubic-bezier(.22,1,.36,1);
  --sn-font: 'IRANSans', system-ui, 'Segoe UI', Tahoma, sans-serif;
}

/* ---------- Font everywhere (both modes) ---------- */
html, body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.btn, label, input, select, textarea, button, .tooltip, .popover,
.dropdown-menu, .nav, .navbar, table, .multiselect, .vue-form-renderer {
  font-family: var(--sn-font) !important;
}
/* keep code/monospace areas intact */
pre, code, kbd, samp, .monaco-editor, .monaco-editor *, .CodeMirror, .CodeMirror * {
  font-family: Consolas, 'Courier New', monospace !important;
}

/* ---------- Brand accents (safe in both modes) ---------- */
.btn { border-radius: 10px; transition: all .22s var(--sn-ease); }
.btn-primary, .btn-success {
  background: var(--sn-grad) !important;
  border: none !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-success:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(59,130,246,.55); }
.btn-danger { background: linear-gradient(100deg, #EF4444, #F87171) !important; border: none !important; color: #fff !important; }
.page-item.active .page-link { background: var(--sn-blue); border-color: var(--sn-blue); }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--sn-grad); border-color: transparent; }
.form-control:focus, .custom-select:focus, textarea:focus {
  border-color: rgba(59,130,246,.6);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}

/* ============================================================
   RTL fixes (html[dir=rtl])
   ============================================================ */
[dir="rtl"] body { direction: rtl; text-align: right; }
[dir="rtl"] th, [dir="rtl"] td { text-align: right; }
[dir="rtl"] .text-left { text-align: right !important; }
[dir="rtl"] .text-right { text-align: left !important; }
[dir="rtl"] .float-left { float: right !important; }
[dir="rtl"] .float-right { float: left !important; }

[dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: .25rem !important; }
[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: .5rem !important; }
[dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; }
[dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }
[dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: .25rem !important; }
[dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: .5rem !important; }
[dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 1rem !important; }
[dir="rtl"] .ml-4 { margin-left: 0 !important; margin-right: 1.5rem !important; }
[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; }
[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; }
[dir="rtl"] .pr-1 { padding-right: 0 !important; padding-left: .25rem !important; }
[dir="rtl"] .pr-2 { padding-right: 0 !important; padding-left: .5rem !important; }
[dir="rtl"] .pr-3 { padding-right: 0 !important; padding-left: 1rem !important; }
[dir="rtl"] .pl-1 { padding-left: 0 !important; padding-right: .25rem !important; }
[dir="rtl"] .pl-2 { padding-left: 0 !important; padding-right: .5rem !important; }
[dir="rtl"] .pl-3 { padding-left: 0 !important; padding-right: 1rem !important; }

[dir="rtl"] .dropdown-menu { text-align: right; }
[dir="rtl"] .dropdown-item { text-align: right; }
[dir="rtl"] .modal-header .close { margin: -1rem auto -1rem -1rem; }
[dir="rtl"] .form-check { padding-left: 0; padding-right: 1.25rem; }
[dir="rtl"] .form-check-input { margin-left: 0; margin-right: -1.25rem; }
[dir="rtl"] .custom-control { padding-left: 0; padding-right: 1.5rem; }
[dir="rtl"] .custom-control-label::before,
[dir="rtl"] .custom-control-label::after { left: auto; right: -1.5rem; }
[dir="rtl"] select.form-control, [dir="rtl"] .custom-select {
  background-position: left .75rem center;
  padding-left: 1.75rem;
  padding-right: .75rem;
}
[dir="rtl"] .breadcrumb-item + .breadcrumb-item { padding-right: .5rem; padding-left: 0; }
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { padding-left: .5rem; padding-right: 0; }
[dir="rtl"] ul:not(.list-unstyled):not(.nav):not(.navbar-nav):not(.pagination):not(.dropdown-menu), [dir="rtl"] ol { padding-right: 1.5rem; padding-left: 0; }
[dir="rtl"] .vdpOuterWrap { direction: rtl; }
[dir="rtl"] .vdpClearInput { left: .5em; right: auto; }
[dir="rtl"] .multiselect__tags { padding-right: 8px; padding-left: 40px; }
[dir="rtl"] .multiselect__select { right: auto; left: 1px; }
[dir="rtl"] .multiselect__content { text-align: right; }
[dir="rtl"] .monaco-editor, [dir="rtl"] pre, [dir="rtl"] code, [dir="rtl"] .CodeMirror { direction: ltr; text-align: left; }
[dir="rtl"] input[type="number"], [dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"], [dir="rtl"] input[type="email"] { direction: ltr; text-align: right; }

/* ============================================================
   Login page layout (structure shared by both modes)
   ============================================================ */
.login-layout { min-height: 100vh; }
.login-container {
  border-radius: var(--sn-r-lg) !important;
  padding: 2.2rem 2.4rem !important;
  max-width: 460px;
  margin-inline: auto;
}
.login-container .form-control-login {
  border-radius: 12px !important;
  padding: .75rem 1rem;
  height: auto;
}
.login-container label { font-weight: 500; margin-bottom: .35rem; }
.button-login {
  background: var(--sn-grad) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: .7rem 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0;
  transition: all .25s var(--sn-ease);
}
.button-login:hover { filter: brightness(1.1); box-shadow: 0 10px 26px -10px rgba(34,211,238,.6); }
.button-login-uppercase { text-transform: none !important; }
.login-logo img { max-height: 54px; }
[dir="rtl"] .login-panel, [dir="rtl"] .login-container { text-align: right; }
[dir="rtl"] .login-container .password-container .fa-eye { left: 12px; right: auto; }

/* ServerNet-branded hero (same in both modes) */
.background-cover {
  background:
    radial-gradient(1100px 520px at 80% -10%, rgba(59,130,246,.22), transparent 60%),
    radial-gradient(800px 480px at 15% 110%, rgba(139,92,246,.16), transparent 60%),
    #070B16 !important;
}
.slogan-panel .head-text {
  letter-spacing: 0 !important;
  font-weight: 500;
  color: #22D3EE !important;
}
.slogan-panel .display-line { font-weight: 700; color: #FFFFFF !important; }
.slogan-panel .display-complexity {
  background: var(--sn-grad-txt);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.slogan-panel .subtext { color: #9AA4BC !important; line-height: 2; }
html.sn-dark .login-container { border-radius: var(--sn-r-lg) !important; }

/* ============================================================
   ServerNet logo (inline HTML — uses page IRANSans)
   ============================================================ */
.sn-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  direction: rtl;
  text-decoration: none !important;
  line-height: 1;
}
.sn-logo-mark { flex: 0 0 auto; display: block; }
.sn-logo-text { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.sn-logo-name { font-weight: 700; letter-spacing: 0; }
.sn-logo-product {
  font-weight: 700;
  background: var(--sn-grad-txt);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* login variant: on dark hero card */
.sn-logo-login .sn-logo-name { color: #1F2937; font-size: 26px; }
.sn-logo-login .sn-logo-product { font-size: 26px; }
html.sn-dark .sn-logo-login .sn-logo-name { color: #FFFFFF; }
/* sidebar variant: theme-aware */
.sn-logo-side .sn-logo-name { color: #1F2937; font-size: 19px; }
.sn-logo-side .sn-logo-product { font-size: 19px; }
html.sn-dark .sn-logo-side .sn-logo-name { color: #FFFFFF; }
#sidebar .logo, #sidebar .logo-closed { padding: 14px 12px; }
#sidebar .logo a, #sidebar .logo-closed a { display: inline-flex; }

/* ============================================================
   Sidebar & Navbar RTL professional polish
   ============================================================ */
/* expanded sidebar rows: flex layout works identically in RTL/LTR */
#sidebar .expanded .nav-link {
  display: flex !important;
  align-items: center;
  gap: 10px;
}
#sidebar .expanded .nav-text { flex: 1 1 auto; }
[dir="rtl"] #sidebar .expanded .nav-text { text-align: right; }
[dir="rtl"] #sidebar .section {
  margin-left: 0;
  margin-right: 16px;
  text-align: right;
}
[dir="rtl"] #sidebar .logo { margin: 16px 9px 24px 16px; }
[dir="rtl"] #sidebar .expanded #custom_icon { margin-right: -3px; margin-left: 7px; }
/* flip the expand/collapse chevrons so they point outward correctly */
[dir="rtl"] #sidebar .sidebar-expansion .fa-angle-double-left,
[dir="rtl"] #sidebar .sidebar-expansion .fa-angle-double-right {
  transform: scaleX(-1);
}
/* ---- collapsed sidebar: icons perfectly centered (RTL & LTR) ---- */
#sidebar .closed li,
#sidebar .closed .nav-item { text-align: center !important; }
#sidebar .closed .nav-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#sidebar .closed .nav-link .nav-icon,
#sidebar .closed .nav-link i {
  margin: 0 auto !important;
  min-width: 0 !important;
  display: block;
}
/* hide any leftover label space when collapsed */
#sidebar .closed .nav-text { display: none !important; }
/* logo + expand button centered too */
#sidebar .closed .logo-closed,
#sidebar .closed .sidebar-expansion { display: flex !important; justify-content: center !important; }
#sidebar .closed .sidebar-expansion .nav-link { justify-content: center !important; }

/* navbar */
[dir="rtl"] .dropdown-toggle::after { margin-left: 0; margin-right: .255em; }
[dir="rtl"] .navbar .dropdown-menu { text-align: right; }
[dir="rtl"] .breadcrumb { padding-right: 0; }
[dir="rtl"] .navbar-nav .nav-item { margin-left: 0; }
/* search bar: keep icon on the correct side */
[dir="rtl"] .search-bar .fa-search, [dir="rtl"] .search-bar .fas.fa-search { margin-left: .5rem; margin-right: 0; }
/* notification & profile dropdowns hug the correct edge in RTL */
[dir="rtl"] .navbar .dropdown-menu-right { right: auto !important; left: 0 !important; }

/* ============================================================
   BPMN Modeler: LTR canvas island (its absolute layout is LTR-designed)
   while text panels stay Persian/RTL — the professional standard for
   diagram tools inside RTL apps.
   ============================================================ */
[dir="rtl"] #modeler-app { direction: ltr; }

/* the modeler's own breadcrumb (process path) stays RTL and anchored right */
[dir="rtl"] #modeler-app .breadcrumb {
  direction: rtl;
  text-align: right;
}
[dir="rtl"] #modeler-app .breadcrumb-item + .breadcrumb-item { padding-right: .5rem; padding-left: 0; }
[dir="rtl"] #modeler-app .breadcrumb-item + .breadcrumb-item::before { padding-left: .5rem; padding-right: 0; }

/* inspector (element settings) panel: content RTL for Persian labels */
[dir="rtl"] #modeler-app .inspector-column,
[dir="rtl"] #modeler-app .inspector-column .form-group,
[dir="rtl"] #modeler-app .inspector-column label,
[dir="rtl"] #modeler-app .inspector-column small {
  direction: rtl;
  text-align: right;
}
[dir="rtl"] #modeler-app .inspector-column .form-control,
[dir="rtl"] #modeler-app .inspector-column .custom-select {
  direction: rtl;
  text-align: right;
}
/* numeric/latin technical fields inside inspector stay ltr for readability */
[dir="rtl"] #modeler-app .inspector-column input[type="number"],
[dir="rtl"] #modeler-app .inspector-column input[name*="id"],
[dir="rtl"] #modeler-app .inspector-column textarea[name*="expression"] {
  direction: ltr;
  text-align: left;
}

/* element palette rail keeps LTR positioning; mini-map expands from the rail
   by design — the LTR island above already keeps it inside the canvas */

/* mini-map open/close: another scoped rule can pin it hidden; make the
   opened state authoritative */
#modeler-app .mini-paper-container.opened {
  visibility: visible !important;
  opacity: 1 !important;
}
#modeler-app .mini-paper-container.closed {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none;
}

/* modeler top toolbar: in RTL keep the process path on the right,
   action buttons on the left (mirrored layout) */
[dir="rtl"] #modeler-app .toolbar.d-flex.justify-content-between { flex-direction: row-reverse; }
[dir="rtl"] #modeler-app .toolbar > .d-flex.mr-3 { margin-right: 0 !important; margin-left: 1rem; }

/* keep the process title crumb on one line with ellipsis instead of wrapping */
#modeler-app .breadcrumb { flex-wrap: nowrap; max-width: 420px; }
#modeler-app .breadcrumb-item { white-space: nowrap; }
#modeler-app .breadcrumb-item:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* ============================================================
   Processes catalogue (فهرست فرایندها): RTL + IRANSans
   Vue scoped styles carry [data-v-*] specificity, so these need !important.
   ============================================================ */
.menu-catalog,
.menu-catalog *,
.list-group-item,
.list-item,
.text-no-result,
#category-menu,
#category-menu * {
  font-family: 'IRANSans', system-ui, 'Segoe UI', Tahoma, sans-serif !important;
  letter-spacing: 0 !important;
}
[dir="rtl"] .menu-catalog,
[dir="rtl"] #category-menu,
[dir="rtl"] .list-group-item,
[dir="rtl"] .list-item {
  direction: rtl !important;
  text-align: right !important;
}
[dir="rtl"] .list-item {
  margin-left: 0 !important;
  margin-right: 16px !important;
  padding: 12px 16px !important;
  line-height: 1.9 !important;
}
/* the collapsible section headers ("فرایندهای در دسترس", "افزودن از قالب‌ها") */
[dir="rtl"] .menu-catalog .d-flex.align-items-center.justify-content-between { direction: rtl !important; }
[dir="rtl"] .menu-catalog .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; }
[dir="rtl"] .menu-catalog .pl-3 { padding-left: 0 !important; padding-right: 1rem !important; }
[dir="rtl"] .menu-catalog .pr-3 { padding-right: 0 !important; padding-left: 1rem !important; }
/* dark theme readability for the catalogue rail */
html.sn-dark .menu-catalog,
html.sn-dark .list-group-item,
html.sn-dark .list-item { background: transparent !important; color: var(--snd-muted) !important; }
html.sn-dark .list-item:hover { background: var(--snd-surface-2) !important; color: #fff !important; }
html.sn-dark .list-item-selected { background: rgba(59,130,246,.22) !important; color: #93C5FD !important; }

/* ============================================================
   Data grids (pm-table): RTL header + filter button on the LEFT
   ============================================================ */
[dir="rtl"] .pm-table-filter-button {
  right: auto !important;
  left: 7px !important;
}
[dir="rtl"] th .pm-table-column-header,
[dir="rtl"] .pm-table-column-header {
  text-align: right !important;
  /* keep the title clear of the filter button that now sits on the left */
  padding-left: 26px !important;
  padding-right: 0 !important;
}
[dir="rtl"] th, [dir="rtl"] .pm-table-ellipsis-column { text-align: right !important; }
/* the resizer handle belongs on the opposite edge in RTL */
[dir="rtl"] .pm-table-column-resizer { right: auto !important; left: 0 !important; }
/* PM capitalises headers for English; pointless (and ugly) for Persian */
[dir="rtl"] .pm-table-ellipsis-column { text-transform: none !important; }

/* ============================================================
   Processes catalogue: search box + cards
   ============================================================ */
.search-input-group,
.search-input-group input,
.search-input-group .btn,
.card-text, .card-text *,
.card-info, .card-info * {
  font-family: 'IRANSans', system-ui, 'Segoe UI', Tahoma, sans-serif !important;
}
[dir="rtl"] .search-input-group { direction: rtl !important; }
[dir="rtl"] .search-input-group input,
[dir="rtl"] .search-input-group .search-box {
  text-align: right !important;
  direction: rtl !important;
}
/* prepend (magnifier) hugs the right, append (clear ✕) hugs the left */
[dir="rtl"] .search-input-group .input-group-prepend .btn {
  border-radius: 0 10px 10px 0 !important;
}
[dir="rtl"] .search-input-group .input-group-append .btn {
  border-radius: 10px 0 0 10px !important;
}
[dir="rtl"] .search-input-group .fa-arrow-left { transform: scaleX(-1); }
/* process cards read right-to-left */
[dir="rtl"] .card-text, [dir="rtl"] .card-info { text-align: right !important; }
[dir="rtl"] .bookmark { float: left !important; }

/* ============================================================
   Breadcrumb (مسیر ناوبری): proper RTL separators & spacing
   ============================================================ */
[dir="rtl"] .breadcrumb {
  direction: rtl !important;
  padding: .5rem 0 !important;
  margin-bottom: 0 !important;
  flex-wrap: wrap;
  align-items: center;
}
[dir="rtl"] .breadcrumb-item { display: inline-flex; align-items: center; }
/* Bootstrap injects "/" via ::before on the left — flip it to the right side */
[dir="rtl"] .breadcrumb-item + .breadcrumb-item {
  padding-left: 0 !important;
  padding-right: .5rem !important;
}
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
  content: "‹" !important;          /* RTL-appropriate chevron instead of "/" */
  float: none !important;
  padding-left: .5rem !important;
  padding-right: 0 !important;
  color: #9AA4BC;
}
[dir="rtl"] .breadcrumb-item a { text-decoration: none; }
[dir="rtl"] #breadcrumbs { direction: rtl !important; }

/* ---------- PMQL search bar: symmetric icon spacing in RTL ---------- */
.search-bar-container { padding-inline: 6px; }
.search-bar-container .fa-search,
.search-bar-container .fa-times,
.search-bar-container .pmql-icons {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-inline: 10px !important;
}
/* keep the magnifier snug to the start, ✕ snug to the end, both with breathing room */
[dir="rtl"] .search-bar-container .fa-search { margin-right: 4px !important; margin-left: 10px !important; }
[dir="rtl"] .search-bar-container .fa-times  { margin-left: 6px  !important; margin-right: 10px !important; }

/* explorer rail (controls list) tooltips inherit page rtl fine */

/* ---------- cases/requests grid (jscomposition table) RTL ----------
   The Tailwind classes on THeader.vue are physical (tw-text-left,
   tw-right-0), so in RTL the title lands on the left and the filter
   icon on the right — the mirror of what it should be. */
[dir="rtl"] th.thead-resizable > div:first-child {
  text-align: right !important;
  /* leave room for the absolutely positioned filter icon on the left */
  padding-left: 28px !important;
  padding-right: 12px !important;
}
/* filter icon: move to the start-side (left) of the column */
[dir="rtl"] th.thead-resizable > div.tw-w-5 {
  right: auto !important;
  left: 0 !important;
  margin-right: 0 !important;
  margin-left: 4px !important;
  justify-content: flex-start !important;
}
/* column resizer grip belongs on the left edge in RTL */
[dir="rtl"] th.thead-resizable > div.tw-cursor-col-resize {
  right: auto !important;
  left: 0 !important;
  border-right-width: 0 !important;
  border-left: 1px solid #d1d5db;
}
[dir="rtl"] .thead-resizable:nth-last-child(-n+2) > div:nth-last-child(1) {
  border-left-width: 0 !important;
}
/* body cells follow the header alignment */
[dir="rtl"] table tbody td .tw-text-left,
[dir="rtl"] th.thead-resizable ~ th.thead-resizable > div:first-child {
  text-align: right !important;
}