/* PYT Liquid Glass — shared presentation for every business module.
   Layout and domain behavior remain in styles.css and the existing modules. */
:root {
  color-scheme: dark;
  --glass-bg: #060713;
  --glass-surface: rgba(23, 26, 49, .88);
  --glass-panel: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.045) 58%, rgba(255,255,255,.075));
  --glass-border: rgba(220,229,255,.19);
  --glass-line: rgba(220,229,255,.11);
  --glass-text: #f5f7ff;
  --glass-muted: #b4bed4;
  --glass-blue: #79bdff;
  --glass-gold: #ebc970;
  --glass-shadow: 0 18px 44px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.22);
}

body {
  background: var(--glass-bg);
  color: var(--glass-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Vazir, Tahoma, Arial, sans-serif;
  line-height: 1.85;
  isolation: isolate;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 94% 2%, rgba(10,132,255,.27), transparent 48%),
    radial-gradient(ellipse at 3% 92%, rgba(136,72,225,.25), transparent 48%),
    radial-gradient(ellipse at 42% 52%, rgba(255,45,85,.075), transparent 40%),
    radial-gradient(ellipse at 72% 95%, rgba(0,199,190,.07), transparent 38%),
    linear-gradient(155deg, #12162d, #060713 64%);
}
.ambient-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
/* The reference's colored light is rendered by static gradients above, avoiding
   continuous full-screen blur animation on office computers and mobile devices. */
.ambient-bg .orb { display: none; }
::selection { background: #286bb4; color: #fff; }
* { scrollbar-width: thin; scrollbar-color: rgba(190,204,239,.35) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(190,204,239,.35); border-radius: 999px; }
h1,h2,h3 { color: #fff; letter-spacing: 0; }
h1 { font-weight: 700; }
.muted,.date,.hint,.load,.footer-note,.page-heading p,.panel-head span,
.stat small,.module small,.role-card ul,.pager,.empty,.login-note,.boot span {
  color: var(--glass-muted);
}
a { color: #a6d2ff; text-underline-offset: 4px; }
button { touch-action: manipulation; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline: 3px solid #9bcfff;
  outline-offset: 3px;
}
button:disabled { opacity: .5; cursor: not-allowed; }

/* Heavier navigation, lighter working surfaces establish a consistent depth. */
.sidebar {
  background: rgba(10,13,29,.86);
  color: var(--glass-text);
  border-left: 1px solid var(--glass-border);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
}
.sidebar .brand,.sidebar-bottom { border-color: var(--glass-line); }
.brand strong { color: #fff; }
.brand small { color: var(--glass-gold); letter-spacing: 1.3px; }
.brand img { width: 56px; height: 100px; object-fit: contain; flex: 0 0 auto; }
.sidebar .brand { padding-bottom: 18px; }
.sidebar .brand strong { font-size: 16px; line-height: 1.7; white-space: nowrap; }
.sidebar .brand { padding-inline: 0; gap: 9px; }
.sidebar .brand img { width: 45px; height: 80px; }
.sidebar .brand small { font-size: 9px; letter-spacing: .8px; }
.login-aside .brand img { width: 76px; height: 135px; }
.brand-hero-logo { width: 88px; height: 156px; object-fit: contain; flex-shrink: 0; }
.boot-logo { width: 82px; height: 146px; object-fit: contain; justify-self: center; }
.nav-label { color: #9daccb; }
.nav button {
  color: #c5cfe5;
  border: 1px solid transparent;
  border-radius: 15px;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.nav button:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav button.active {
  color: #fff;
  background: linear-gradient(120deg, rgba(10,132,255,.33), rgba(94,92,230,.2));
  border-color: rgba(126,187,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.nav button.active:after { background: var(--glass-gold); box-shadow: 0 0 9px rgba(235,201,112,.3); }
.workspace small,.logout { color: #b4bed4; }
.logout:hover { color: #fff; }
.avatar,.sidebar .avatar {
  background: linear-gradient(145deg, rgba(105,168,255,.25), rgba(133,105,225,.17));
  color: #d9eaff;
  border: 1px solid var(--glass-border);
  border-radius: 13px;
}
.topbar {
  background: rgba(12,15,32,.66);
  border-color: var(--glass-line);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}
.breadcrumb { color: #aebbd5; }
.breadcrumb b { color: #fff; }
.mobile-menu { color: #d8e8ff; }
.panel,.stat,.role-card,.hero,.login-card {
  background: var(--glass-panel);
  border: 1px solid var(--glass-border);
  border-radius: 25px;
  box-shadow: var(--glass-shadow);
}
.hero { background: linear-gradient(120deg, rgba(34,101,188,.22), rgba(92,53,138,.15)), var(--glass-panel); }
.hero h2 { color: #fff; font-weight: 600; }
.hero small,.eyebrow { color: #a2caff; }
.hero p { color: #c2cce2; }
.hero-art { color: var(--glass-gold); }
.panel-head,.module,.pager,.modal-head,.modal-actions { border-color: var(--glass-line); }
.panel-head h3 { color: #f3f6ff; font-weight: 600; }
.stat strong { color: #fff; font-weight: 600; }
.stat-icon,.module .module-icon {
  background: linear-gradient(135deg, rgba(125,182,255,.17), rgba(140,112,230,.12));
  border: 1px solid var(--glass-border);
  color: #b9daff;
  border-radius: 15px;
}
.module strong { color: #edf2ff; }
.module.available small { color: #85e3bc; }
.role-card li:before { color: #85e3bc; }

/* Dense tables retain an opaque enough backing for numbers and status text. */
table { color: var(--glass-text); }
th { background: rgba(8,12,28,.52); color: #bdc9e4; font-weight: 600; }
td { color: #d7dff0; border-color: var(--glass-line); }
td strong { color: #fff; }
td .sub { color: #adbcd6; }
tbody tr:hover { background: rgba(133,176,255,.055); }
.table-wrap { scrollbar-color: rgba(190,204,239,.4) transparent; }
.empty .symbol { color: #a1b5d9; }
.empty strong { color: #d8e7ff; }

/* Reuse the reference's rounded inset glass fields and capsule actions. */
.field label,.check { color: #dce4f5; }
.field input,.field select,.field textarea,.search {
  color: #f6f8ff;
  background: rgba(8,12,29,.6);
  border: 1px solid rgba(215,229,255,.24);
  border-radius: 16px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.05);
  min-height: 44px;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.field input:hover,.field select:hover,.field textarea:hover,.search:hover {
  border-color: rgba(215,229,255,.4);
  background: rgba(28,36,65,.72);
}
.field input:focus,.field select:focus,.field textarea:focus,.search:focus {
  background: rgba(31,47,80,.8);
  border-color: #76baff;
  box-shadow: 0 0 0 3px rgba(10,132,255,.2), inset 0 1px 0 rgba(255,255,255,.13);
}
.field input::placeholder,.field textarea::placeholder,.search::placeholder { color: #9eabc6; opacity: 1; }
select option { background: #181d34; color: #fff; }
input[type=checkbox],input[type=radio] { accent-color: #329bff; }
.field input[type=checkbox],.field input[type=radio] { width: auto; min-height: auto; box-shadow: none; }
input[type=file] { max-width: 100%; }
input[type=file]::file-selector-button {
  font: inherit; border: 1px solid var(--glass-border); border-radius: 10px;
  background: #293c60; color: #fff; padding: 6px 12px; margin-inline-end: 12px;
}
.password-toggle { color: #b4d6ff; }
.btn {
  background: linear-gradient(180deg, #329bff 0%, #0a84ff 48%, #0666c4 100%);
  color: #fff;
  border: 1px solid rgba(211,234,255,.36);
  border-radius: 999px;
  min-height: 42px;
  font-weight: 600;
  box-shadow: 0 8px 22px -9px rgba(10,132,255,.55), inset 0 1px 0 rgba(255,255,255,.3);
  transition: background-color 160ms ease, filter 160ms ease, transform 100ms ease;
}
.btn:hover { background: linear-gradient(180deg, #55aeff, #0a79e8); filter: brightness(1.04); }
.btn:active:not(:disabled),.link-button:active:not(:disabled),.pager button:active:not(:disabled) { transform: scale(.98); }
.btn.secondary,.btn.ghost,.link-button,.pager button {
  color: #e4efff;
  background: rgba(173,200,255,.11);
  border: 1px solid rgba(215,229,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11);
}
.btn.secondary:hover,.btn.ghost:hover,.link-button:hover,.pager button:hover { background: rgba(173,200,255,.2); }
.link-button,.pager button { border-radius: 999px; min-height: 34px; }
.btn.danger { background: rgba(150,38,59,.3); border-color: rgba(255,140,160,.42); color: #ffd4dc; }
.btn.danger:hover { background: rgba(175,43,67,.45); }
.pill { background: rgba(30,118,89,.23); color: #9be9c9; border: 1px solid rgba(126,227,188,.25); }
.pill.inactive { background: rgba(133,96,32,.25); color: #f4d399; border-color: rgba(231,192,125,.3); }
.notice { background: rgba(110,78,26,.25); color: #f5d99f; border-color: rgba(237,199,121,.35); border-radius: 18px; }
.error { background: rgba(132,31,55,.3); color: #ffd0dc; border: 1px solid rgba(255,135,159,.32); border-radius: 16px; }
.tabs { background: rgba(7,12,28,.52); border: 1px solid var(--glass-border); border-radius: 999px; padding: 5px; }
.tab { color: #b9c6e0; border-radius: 999px; min-height: 40px; }
.tab.active { background: linear-gradient(135deg, rgba(10,132,255,.7), rgba(94,92,230,.55)); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }

dialog {
  color: var(--glass-text);
  background: rgba(18,23,43,.97);
  border: 1px solid rgba(211,227,255,.28);
  border-radius: 28px;
  box-shadow: 0 35px 100px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.22);
}
dialog::backdrop { background: rgba(2,5,16,.7); backdrop-filter: blur(8px); }
.close { color: #c7d4ee; min-width: 36px; min-height: 36px; border-radius: 999px; }
.close:hover { background: rgba(255,255,255,.08); color: #fff; }
#toast { background: rgba(27,45,77,.98); color: #fff; border: 1px solid rgba(184,215,255,.35); border-radius: 18px; box-shadow: 0 12px 35px rgba(0,0,0,.4); }
.loading-bar { background: linear-gradient(90deg, #329bff, #a48aff); border-radius: 999px; }

/* Sign-in, password/MFA setup and offline entry share the same visual system. */
.login { background: transparent; }
.login-aside { background: rgba(8,12,28,.48); border-left: 1px solid var(--glass-border); }
.login-aside:after { border-color: rgba(151,189,255,.1); box-shadow: 0 0 0 70px rgba(116,158,255,.025), 0 0 0 140px rgba(116,158,255,.02); }
.login-story h1 { color: #fff; }
.login-story h1 em { color: #a5ceff; }
.login-story p,.login-footer { color: #b9c7df; }
.story-line { background: linear-gradient(90deg, #7ebfff, #b498f3); }
.login-card { width: min(100%, 450px); padding: 32px; }
.login-main { padding: 36px; }
.boot { padding: 24px; gap: 14px; }
.boot .btn { justify-self: center; }

@media (max-width: 1100px) {
  .login-main { padding: 28px; }
  .login-card { padding: 28px; }
}
@media (max-width: 760px) {
  .sidebar { background: rgba(10,13,29,.97); width: min(285px, 88vw); }
  .sidebar.open { box-shadow: -100px 0 0 100vw rgba(2,5,16,.7); }
  .topbar { height: 68px; }
  .login-aside { min-height: 210px; border-left: 0; border-bottom: 1px solid var(--glass-border); }
  .login-aside .brand img { width: 52px; height: 92px; }
  .brand-hero-logo { width: 58px; height: 103px; }
  .login-main { padding: 22px 16px 36px; }
  .login-card { padding: 26px 22px; border-radius: 28px; }
  .panel,.hero,.stat,.role-card { border-radius: 20px; }
  .content { padding: 24px 16px 40px; }
  .panel-head { padding: 18px; flex-wrap: wrap; }
  .page-heading { gap: 12px; flex-wrap: wrap; }
  .toolbar { gap: 10px; }
  th,td { padding: 14px 16px; }
  .tabs { flex-wrap: wrap; border-radius: 20px; }
  .tab { flex: 1 0 auto; }
  .modal-head { padding: 18px 20px; }
  .modal-form { padding: 20px; }
  .modal-actions { flex-wrap: wrap; }
  #toast { inset-inline: 16px; bottom: 18px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .btn:active:not(:disabled),.link-button:active:not(:disabled),.pager button:active:not(:disabled) { transform: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .sidebar,.topbar,.login-aside { background: #0d1225; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .panel,.stat,.role-card,.hero,.login-card,dialog { background: #192139; border-color: #879abd; }
  .field input,.field select,.field textarea,.search,th { background: #0d1428; border-color: #879abd; }
  dialog::backdrop { backdrop-filter: none; background: rgba(0,0,0,.85); }
  body::before { background: #080b17; }
}
@media (forced-colors: active) {
  body::before { display: none; }
  .panel,.stat,.role-card,.hero,.login-card,.sidebar,.topbar,dialog { border: 1px solid CanvasText; background: Canvas; color: CanvasText; box-shadow: none; }
  .btn,.pill,.tab.active,.nav button.active { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; box-shadow: none; }
}