/* ============================================================
   ServerNet Dark Glass (سرورنت فرایند) — active only on html.sn-dark
   Scoped skin: every rule prefixed, guaranteed text contrast.
   ============================================================ */

html.sn-dark {
  --snd-bg: #05070F;
  --snd-bg2: #0B0F1D;
  --snd-surface: rgba(255,255,255,.045);
  --snd-surface-2: rgba(255,255,255,.07);
  --snd-surface-3: rgba(255,255,255,.10);
  --snd-line: rgba(255,255,255,.09);
  --snd-line-2: rgba(255,255,255,.16);
  --snd-text: #E6EAF3;
  --snd-muted: #9AA4BC;
  --snd-dim: #5B6478;
  --snd-blur: saturate(150%) blur(14px);
  color-scheme: dark;
}

/* ---------- page shell ---------- */
html.sn-dark { background: var(--snd-bg) !important; }
html.sn-dark body {
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(59,130,246,.13), transparent 60%),
    radial-gradient(900px 480px at 10% 110%, rgba(139,92,246,.09), transparent 60%),
    var(--snd-bg) !important;
  background-attachment: fixed !important;
  color: var(--snd-text);
}
html.sn-dark #mainbody, html.sn-dark #main, html.sn-dark .main { background: transparent !important; }

/* default text colors on dark */
html.sn-dark body, html.sn-dark p, html.sn-dark span, html.sn-dark div,
html.sn-dark td, html.sn-dark th, html.sn-dark li, html.sn-dark dt, html.sn-dark dd,
html.sn-dark h1, html.sn-dark h2, html.sn-dark h3, html.sn-dark h4, html.sn-dark h5, html.sn-dark h6,
html.sn-dark label, html.sn-dark legend { color: var(--snd-text); }
html.sn-dark .text-muted, html.sn-dark small, html.sn-dark .small { color: var(--snd-muted) !important; }
html.sn-dark .text-dark, html.sn-dark .text-body, html.sn-dark .text-black-50 { color: var(--snd-text) !important; }
html.sn-dark a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link) { color: #7DB5FA; }
html.sn-dark a:not(.btn):hover { color: #22D3EE; }
html.sn-dark hr { border-color: var(--snd-line) !important; }
html.sn-dark ::selection { background: rgba(34,211,238,.30); color: #fff; }

/* scrollbars */
html.sn-dark * { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
html.sn-dark *::-webkit-scrollbar { width: 8px; height: 8px; }
html.sn-dark *::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 8px; }
html.sn-dark *::-webkit-scrollbar-track { background: transparent; }

/* ---------- sidebar ---------- */
html.sn-dark #sidebar {
  background: rgba(8,11,22,.85) !important;
  -webkit-backdrop-filter: var(--snd-blur);
  backdrop-filter: var(--snd-blur);
  border-inline-end: 1px solid var(--snd-line) !important;
}
html.sn-dark #sidebar a, html.sn-dark #sidebar .nav-link,
html.sn-dark #sidebar .sidebaricon, html.sn-dark #sidebar span, html.sn-dark #sidebar i {
  color: var(--snd-muted) !important;
}
html.sn-dark #sidebar a:hover, html.sn-dark #sidebar a:hover * { color: #fff !important; }
html.sn-dark #sidebar .nav-link:hover { background: var(--snd-surface-2) !important; border-radius: 10px; }
html.sn-dark #sidebar .active > a, html.sn-dark #sidebar .nav-link.active,
html.sn-dark #sidebar .active > a *, html.sn-dark #sidebar .nav-link.active * {
  color: #fff !important;
}
html.sn-dark #sidebar .active > a, html.sn-dark #sidebar .nav-link.active {
  background: linear-gradient(100deg, rgba(59,130,246,.28), rgba(34,211,238,.12)) !important;
  border-radius: 10px;
}

/* ---------- navbar ---------- */
html.sn-dark .navbar, html.sn-dark nav.navbar {
  background: rgba(8,11,22,.80) !important;
  -webkit-backdrop-filter: var(--snd-blur);
  backdrop-filter: var(--snd-blur);
  border-bottom: 1px solid var(--snd-line) !important;
  box-shadow: none !important;
}
html.sn-dark .navbar .nav-link, html.sn-dark .navbar a:not(.dropdown-item),
html.sn-dark .navbar .navbar-brand, html.sn-dark .navbar i, html.sn-dark .navbar span { color: var(--snd-muted) !important; }
html.sn-dark .navbar .nav-link:hover, html.sn-dark .navbar a:hover i { color: #fff !important; }
/* known white islands inside navbar/header area */
html.sn-dark .menu-title, html.sn-dark .menu-title *,
html.sn-dark .button-class { background: var(--snd-surface-2) !important; color: var(--snd-text) !important; border-color: var(--snd-line-2) !important; }
html.sn-dark .search-bar, html.sn-dark .search-bar input {
  background: var(--snd-surface) !important;
  color: var(--snd-text) !important;
  border-color: var(--snd-line-2) !important;
}
html.sn-dark .search-bar input::placeholder { color: var(--snd-dim) !important; }
/* filter chips / pills */
html.sn-dark .selected-filter-item, html.sn-dark .selected-filter-item *,
html.sn-dark .filter-item, html.sn-dark .pmql-filter-badge {
  background: var(--snd-surface-2) !important;
  color: var(--snd-text) !important;
  border-color: var(--snd-line-2) !important;
}

/* ---------- cards / panels / modals ---------- */
html.sn-dark .card, html.sn-dark .panel, html.sn-dark .list-group-item,
html.sn-dark .modal-content, html.sn-dark .popover, html.sn-dark .toast, html.sn-dark .b-sidebar {
  background: linear-gradient(170deg, var(--snd-surface-2), var(--snd-surface)) !important;
  -webkit-backdrop-filter: var(--snd-blur);
  backdrop-filter: var(--snd-blur);
  border: 1px solid var(--snd-line) !important;
  border-radius: var(--sn-r) !important;
  color: var(--snd-text);
  box-shadow: 0 18px 44px -22px rgba(0,0,0,.55);
}
html.sn-dark .card-header, html.sn-dark .modal-header,
html.sn-dark .card-footer, html.sn-dark .modal-footer {
  background: transparent !important;
  border-color: var(--snd-line) !important;
  color: var(--snd-text) !important;
}
html.sn-dark .close { color: var(--snd-text) !important; text-shadow: none; opacity: .75; }
html.sn-dark .dropdown-menu {
  background: rgba(14,18,32,.97) !important;
  border: 1px solid var(--snd-line-2) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.7);
}
html.sn-dark .dropdown-item { color: var(--snd-muted) !important; border-radius: 8px; }
html.sn-dark .dropdown-item:hover, html.sn-dark .dropdown-item:focus { color: #fff !important; background: var(--snd-surface-3) !important; }
html.sn-dark .dropdown-divider { border-color: var(--snd-line) !important; }

/* ---------- forms ---------- */
html.sn-dark .form-control, html.sn-dark .custom-select,
html.sn-dark select, html.sn-dark textarea,
html.sn-dark .multiselect__tags, html.sn-dark .input-group-text {
  background: rgba(255,255,255,.055) !important;
  border: 1px solid var(--snd-line-2) !important;
  color: var(--snd-text) !important;
}
html.sn-dark .form-control:focus, html.sn-dark textarea:focus {
  background: rgba(255,255,255,.085) !important;
  color: #fff !important;
}
html.sn-dark .form-control::placeholder, html.sn-dark input::placeholder, html.sn-dark textarea::placeholder { color: var(--snd-dim) !important; }
html.sn-dark .form-control:disabled, html.sn-dark .form-control[readonly] { background: rgba(255,255,255,.03) !important; color: var(--snd-muted) !important; }
html.sn-dark option { background: var(--snd-bg2); color: var(--snd-text); }
html.sn-dark .custom-control-label::before { background: rgba(255,255,255,.09); border-color: var(--snd-line-2); }
html.sn-dark .multiselect__content-wrapper { background: var(--snd-bg2) !important; border-color: var(--snd-line-2) !important; }
html.sn-dark .multiselect__option { color: var(--snd-muted); }
html.sn-dark .multiselect__option--highlight { background: rgba(59,130,246,.3) !important; color: #fff !important; }
html.sn-dark .multiselect__single, html.sn-dark .multiselect__input { background: transparent !important; color: var(--snd-text) !important; }
html.sn-dark .multiselect__tag { background: rgba(59,130,246,.35) !important; color: #fff; }

/* buttons that are light-styled by PM */
html.sn-dark .btn-secondary, html.sn-dark .btn-light, html.sn-dark .btn-outline-secondary,
html.sn-dark .btn-outline-primary, html.sn-dark .btn-outline-success, html.sn-dark .btn-white {
  background: var(--snd-surface-2) !important;
  border: 1px solid var(--snd-line-2) !important;
  color: var(--snd-text) !important;
}
html.sn-dark .btn-secondary:hover, html.sn-dark .btn-light:hover,
html.sn-dark .btn-outline-secondary:hover, html.sn-dark .btn-outline-primary:hover {
  background: var(--snd-surface-3) !important;
  border-color: rgba(96,165,250,.5) !important;
  color: #fff !important;
}
html.sn-dark .btn-link { color: #7DB5FA !important; }

/* ---------- tables ---------- */
html.sn-dark .table, html.sn-dark table.vuetable, html.sn-dark .b-table { color: var(--snd-text) !important; background: transparent !important; }
html.sn-dark thead, html.sn-dark thead tr, html.sn-dark thead th,
html.sn-dark .table thead th, html.sn-dark .vuetable thead th {
  background: rgba(255,255,255,.05) !important;
  color: var(--snd-muted) !important;
  border-color: var(--snd-line) !important;
}
html.sn-dark tbody tr { background: transparent !important; }
html.sn-dark .table td, html.sn-dark .table th,
html.sn-dark .vuetable td, html.sn-dark .vuetable th { border-color: var(--snd-line) !important; }
html.sn-dark .table-hover tbody tr:hover, html.sn-dark .vuetable tbody tr:hover td { background: rgba(96,165,250,.08) !important; color: #fff; }
html.sn-dark .table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.025) !important; }
html.sn-dark .page-link { background: var(--snd-surface) !important; border-color: var(--snd-line) !important; color: var(--snd-muted) !important; }
html.sn-dark .page-item.active .page-link { background: var(--sn-grad) !important; color: #fff !important; border-color: transparent !important; }
html.sn-dark .page-link:hover { color: #fff !important; background: var(--snd-surface-3) !important; }

/* ---------- tabs / pills / alerts / badges ---------- */
html.sn-dark .nav-tabs { border-color: var(--snd-line) !important; }
html.sn-dark .nav-tabs .nav-link { color: var(--snd-muted) !important; border: none !important; border-bottom: 2px solid transparent !important; }
html.sn-dark .nav-tabs .nav-link.active { background: transparent !important; color: #fff !important; border-bottom-color: #22D3EE !important; }
html.sn-dark .nav-pills .nav-link { color: var(--snd-muted); }
html.sn-dark .nav-pills .nav-link.active { background: var(--sn-grad) !important; color: #fff !important; }
html.sn-dark .alert-success { background: rgba(52,211,153,.13) !important; color: #6EE7B7 !important; border-color: rgba(52,211,153,.35) !important; }
html.sn-dark .alert-danger { background: rgba(248,113,113,.13) !important; color: #FCA5A5 !important; border-color: rgba(248,113,113,.35) !important; }
html.sn-dark .alert-warning { background: rgba(251,191,36,.13) !important; color: #FCD34D !important; border-color: rgba(251,191,36,.35) !important; }
html.sn-dark .alert-info { background: rgba(34,211,238,.11) !important; color: #67E8F9 !important; border-color: rgba(34,211,238,.35) !important; }
html.sn-dark .badge-success { background: rgba(52,211,153,.22) !important; color: #6EE7B7 !important; }
html.sn-dark .badge-danger { background: rgba(248,113,113,.22) !important; color: #FCA5A5 !important; }
html.sn-dark .badge-warning { background: rgba(251,191,36,.22) !important; color: #FCD34D !important; }
html.sn-dark .badge-info, html.sn-dark .badge-primary { background: rgba(59,130,246,.28) !important; color: #93C5FD !important; }
html.sn-dark .badge-secondary { background: var(--snd-surface-3) !important; color: var(--snd-muted) !important; }
html.sn-dark .breadcrumb { background: transparent !important; }
html.sn-dark .tooltip-inner { background: rgba(14,18,32,.97); border: 1px solid var(--snd-line-2); color: var(--snd-text); }
html.sn-dark .popover-body { color: var(--snd-text) !important; }
html.sn-dark .popover-header { background: transparent !important; color: var(--snd-text) !important; border-color: var(--snd-line) !important; }

/* ---------- light islands that must STAY light (design canvases) ---------- */
html.sn-dark .paper-container, html.sn-dark .modeler .paper,
html.sn-dark .monaco-editor, html.sn-dark .monaco-editor .margin,
html.sn-dark .screen-builder-canvas, html.sn-dark .editor-canvas {
  color-scheme: light;
}
html.sn-dark .paper-container, html.sn-dark .modeler .paper { background: #EDF1F7 !important; }
html.sn-dark .paper-container *, html.sn-dark .modeler .paper * { color: initial; }

/* ---------- login page (dark hero like servernet.cloud) ---------- */
html.sn-dark .background-cover {
  background:
    radial-gradient(1100px 520px at 80% -10%, rgba(59,130,246,.20), transparent 60%),
    radial-gradient(800px 480px at 15% 110%, rgba(139,92,246,.15), transparent 60%),
    #05070F !important;
}
html.sn-dark .login-container {
  background: linear-gradient(170deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
  -webkit-backdrop-filter: var(--snd-blur);
  backdrop-filter: var(--snd-blur);
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.75);
}
html.sn-dark .login-container label { color: var(--snd-muted); }
html.sn-dark .login-container .form-control-login {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: #fff !important;
}
html.sn-dark .slogan-panel .head-text { color: #22D3EE; }
html.sn-dark .slogan-panel .display-line { color: #fff; }
html.sn-dark .slogan-panel .display-complexity {
  background: var(--sn-grad-txt);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html.sn-dark .slogan-panel .subtext { color: var(--snd-muted); }
html.sn-dark .login-remember-text, html.sn-dark .forgot-password-link { color: var(--snd-muted); }
html.sn-dark .forgot-password-link:hover { color: #22D3EE; }