/*RESET START — your existing reset*/
:root{ scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html{ font-size: 100%; }
body {
  font-family: Roboto, system-ui, sans-serif;
  font-size: 1rem; font-weight: 400; line-height: 1.55;
  color: #222; min-height: 100svh;
}
h1, h2, h3, h4, h5, h6{ margin: 0 0 0.75rem; font-weight: 600; }
p{ margin: 0 0 1rem; }
img, video{ max-width: 100%; height: auto; display: block; }
a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover{ color:#FFA500; text-decoration-thickness: 2px; }
a:focus-visible{ outline: 2px solid currentColor; outline-offset: 2px; }
button { cursor: pointer; }
[hidden] { display: none; }
table { border-collapse: collapse; }
input, button, textarea, select { font: inherit; line-height: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
h1, h2, h3, h4 { text-wrap: balance; }
ul[class], ol[class], ul[role="list"], ol[role="list"] { list-style: none; padding-left: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}
/*RESET END*/

:root {
  --navy:#1a2b4a; --navy-700:#22376b; --blue:#2E75B6; --blue-lt:#4A90D9;
  --orange:#FFA500; --green:#1D6A35; --green-bg:#E6F4EC; --red:#B91C1C; --red-bg:#FEE2E2;
  --amber:#92400E; --amber-bg:#FEF3C7;
  --g50:#F8FAFC; --g100:#F1F5F9; --g200:#E2E8F0; --g300:#CBD5E1;
  --g400:#94A3B8; --g500:#64748B; --g600:#475569; --g700:#334155; --g900:#0F172A;
  --radius:8px; --shadow-sm:0 1px 3px rgba(0,0,0,.08); --shadow:0 4px 16px rgba(0,0,0,.1);
  --shadow-lg:0 10px 40px rgba(0,0,0,.16);
}
body.app-bg { background:var(--g100); }

/* Login */
#login-screen{ min-height:100svh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--navy) 0%,var(--blue) 100%); padding:1rem; }
.login-card{ background:#fff; border-radius:16px; padding:2.5rem; width:100%; max-width:400px; box-shadow:var(--shadow-lg); }
.login-logo{ text-align:center; margin-bottom:2rem; }
.login-logo .mark{ width:56px; height:56px; background:var(--navy); border-radius:14px; display:inline-flex; align-items:center; justify-content:center; margin-bottom:.75rem; }
.login-logo .mark svg{ width:28px; height:28px; fill:#fff; }
.login-logo h1{ font-size:1.2rem; font-weight:700; color:var(--navy); margin:0; }
.login-logo p{ font-size:.8rem; color:var(--g500); margin:.2rem 0 0; }

.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-size:.75rem; font-weight:600; color:var(--g600); margin-bottom:.35rem; letter-spacing:.02em; text-transform:uppercase; }
.field input, .field select, .field textarea{ width:100%; padding:.65rem .85rem; border:1.5px solid var(--g200); border-radius:var(--radius); font-size:.9rem; color:var(--g700); background:#fff; transition:border-color .18s, box-shadow .18s; outline:none; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(46,117,182,.12); }
.field input.error, .field select.error{ border-color:var(--red); box-shadow:0 0 0 3px rgba(185,28,28,.1); }
.field .err{ font-size:.75rem; color:var(--red); margin:.3rem 0 0; display:none; }
.field .err.show{ display:block; }
.field select{ cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%2364748B' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .85rem center; padding-right:2.2rem; }
.field textarea{ resize:vertical; min-height:70px; }

/* ===== Password field with show/hide (eye) toggle =====
   Markup:  <div class="pw-wrap"><input type="password" ...><button class="pw-toggle">…</button></div>
   The wrapper goes INSIDE .field, around the input only — .err stays outside. */
.pw-wrap{ position:relative; display:block; }
.pw-wrap input{ display:block; padding-right:2.85rem; }
.pw-toggle{ position:absolute; top:0; right:0; height:100%; width:2.7rem; display:flex; align-items:center; justify-content:center;
  background:none; border:none; padding:0; margin:0; color:var(--g400); border-radius:0 var(--radius) var(--radius) 0; transition:color .15s; }
.pw-toggle:hover{ color:var(--g600); }
.pw-toggle:focus-visible{ outline:2px solid var(--blue); outline-offset:-2px; }
.pw-toggle svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.pw-toggle .pw-off{ display:none; }
.pw-toggle.is-on{ color:var(--blue); }
.pw-toggle.is-on .pw-on{ display:none; }
.pw-toggle.is-on .pw-off{ display:block; }

/* Helper line under the login button (forgot-password guidance) */
.login-help{ margin:1.1rem 0 0; font-size:.75rem; line-height:1.6; color:var(--g400); text-align:center; }
.login-help b{ color:var(--g500); font-weight:600; }

/* Inline result banner (e.g. password changed) */
.flash{ border-radius:var(--radius); padding:.7rem .95rem; font-size:.83rem; margin:0 0 1rem; border:1px solid transparent; }
.flash.ok{ background:var(--green-bg); border-color:#A7D8BC; color:var(--green); }
.flash.bad{ background:var(--red-bg); border-color:#FCA5A5; color:var(--red); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.65rem 1.2rem; border-radius:var(--radius); font-size:.875rem; font-weight:600; cursor:pointer; border:none; transition:all .18s; text-decoration:none; white-space:nowrap; }
.btn-primary{ background:var(--blue); color:#fff; width:100%; padding:.8rem; font-size:.95rem; }
.btn-primary:hover{ background:var(--navy); }
.btn-success{ background:var(--green); color:#fff; }
.btn-success:hover{ background:#155228; }
.btn-danger{ background:var(--red-bg); color:var(--red); }
.btn-danger:hover{ background:#FECACA; }
.btn-ghost{ background:transparent; color:var(--g600); border:1.5px solid var(--g200); }
.btn-ghost:hover{ background:var(--g100); }
.btn-sm{ padding:.4rem .7rem; font-size:.8rem; }
.btn-icon{ padding:.4rem; border-radius:6px; }

/* App shell */
#app{ display:none; min-height:100svh; flex-direction:column; }
#app.visible{ display:flex; }
.topbar{ background:var(--navy); color:#fff; padding:0 1.5rem; height:56px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; box-shadow:0 2px 8px rgba(0,0,0,.2); }
.topbar a{ color:inherit; text-decoration:none; }
.topbar a:hover{ color:var(--orange); }
.tb-left{ display:flex; align-items:center; gap:.85rem; }
.tb-logo{ width:32px; height:32px; background:rgba(255,255,255,.15); border-radius:8px; display:flex; align-items:center; justify-content:center; }
.tb-logo svg{ width:18px; height:18px; fill:#fff; }
.topbar h1{ font-size:.95rem; font-weight:700; margin:0; }
.tb-right{ display:flex; align-items:center; gap:.75rem; }
.user-pill{ display:flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.1); padding:.3rem .7rem .3rem .3rem; border-radius:999px; font-size:.8rem; }
.avatar{ width:26px; height:26px; background:var(--blue-lt); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; }
.role-badge{ font-size:.62rem; padding:.15rem .4rem; border-radius:4px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; }
.role-badge.admin{ background:rgba(255,255,255,.2); }
.role-badge.hr{ background:rgba(74,144,217,.35); color:#bfe0ff; }
.role-badge.view{ background:rgba(255,255,255,.1); color:rgba(255,255,255,.7); }

/* Tabs nav */
.tabs{ background:#fff; border-bottom:1px solid var(--g200); padding:0 1.5rem; display:flex; gap:.25rem; position:sticky; top:56px; z-index:90; overflow-x:auto; }
.tab{ padding:.85rem 1rem; font-size:.85rem; font-weight:600; color:var(--g500); border:none; background:none; border-bottom:2.5px solid transparent; cursor:pointer; white-space:nowrap; transition:color .15s; }
.tab:hover{ color:var(--navy); }
.tab.active{ color:var(--navy); border-bottom-color:var(--blue); }

.main{ flex:1; max-width:1200px; width:100%; margin:0 auto; padding:1.5rem 1rem; overflow-x:hidden; box-sizing:border-box; }
.view{ display:none; }
.view.active{ display:block; }
.page-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.5rem; gap:1rem; flex-wrap:wrap; }
.page-head h2{ font-size:1.35rem; font-weight:700; color:var(--navy); margin:0; }
.page-head p{ font-size:.85rem; color:var(--g500); margin:.15rem 0 0; }

.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.75rem; margin-bottom:1.5rem; }
.stat{ background:#fff; border-radius:var(--radius); padding:.85rem 1rem; box-shadow:var(--shadow-sm); border-left:3px solid var(--blue); }
.stat.green{ border-left-color:var(--green); } .stat.amber{ border-left-color:#D97706; } .stat.navy{ border-left-color:var(--navy); }
.stat .num{ font-size:1.6rem; font-weight:700; color:var(--navy); line-height:1; }
.stat .lbl{ font-size:.75rem; color:var(--g500); margin-top:.2rem; }

.card{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; max-width:100%; }
.card-head{ padding:.85rem 1.1rem; border-bottom:1px solid var(--g100); display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
.card-head h3{ font-size:.9rem; font-weight:700; color:var(--navy); margin:0; }
.search{ position:relative; flex:1; max-width:280px; }
.search input{ padding:.5rem .75rem .5rem 2.1rem; border:1.5px solid var(--g200); border-radius:var(--radius); font-size:.85rem; width:100%; color:var(--g700); outline:none; }
.search input:focus{ border-color:var(--blue); }
.search svg{ position:absolute; left:.65rem; top:50%; transform:translateY(-50%); width:14px; height:14px; stroke:var(--g400); fill:none; }
.filter-sel{ padding:.5rem .75rem; border:1.5px solid var(--g200); border-radius:var(--radius); font-size:.82rem; color:var(--g700); background:#fff; outline:none; cursor:pointer; max-width:240px; }

/* ===== TABLE — fits all 8 columns, no horizontal scroll ===== */
.table-wrap{ overflow-x:hidden; max-width:100%; }
table{ width:100%; border-collapse:collapse; font-size:.85rem; table-layout:fixed; }
thead th{ background:var(--g50); padding:.55rem .4rem; text-align:left; font-size:.65rem; font-weight:700; color:var(--g500); text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--g200); white-space:normal; overflow:hidden; }
tbody tr{ border-bottom:1px solid var(--g100); transition:background .15s; }
tbody tr:hover{ background:#EEF4FB; }
tbody td{ padding:.55rem .4rem; color:var(--g700); vertical-align:middle; font-size:.8rem; word-wrap:break-word; overflow-wrap:break-word; overflow:hidden; }

/* proportional column widths — sum = 100% */
thead th:nth-child(1){ width:20%; }  /* Ажилтан */
thead th:nth-child(2){ width:13%; }  /* Регистр */
thead th:nth-child(3){ width:19%; }  /* Хэлтэс, тасаг */
thead th:nth-child(4){ width:13%; }  /* Албан тушаал */
thead th:nth-child(5){ width:9%;  }  /* Утас */
thead th:nth-child(6){ width:11%; }  /* Цалин */
thead th:nth-child(7){ width:9%;  }  /* Төлөв */
thead th:nth-child(8){ width:6%;  }  /* Үйлдэл */

.emp-name{ display:flex; align-items:center; gap:.4rem; min-width:0; }
.emp-name > div{ min-width:0; overflow:hidden; }
.emp-name div div{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.emp-av{ width:28px; height:28px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.66rem; font-weight:700; flex-shrink:0; }
.dept-badge{ display:inline-block; padding:.2rem .5rem; border-radius:4px; font-size:.68rem; font-weight:600; background:var(--g100); color:var(--g600); white-space:normal; }
.status-dot{ display:inline-flex; align-items:center; gap:.35rem; font-size:.76rem; white-space:normal; }
.status-dot::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--g300); flex-shrink:0; }
.status-dot.active::before{ background:#22C55E; }
.actions{ display:flex; gap:.2rem; align-items:center; }
.btn-icon{ padding:.3rem; border-radius:6px; }
.count-pill{ display:inline-block; background:var(--g100); color:var(--g600); font-size:.72rem; font-weight:600; padding:.15rem .5rem; border-radius:999px; }

.modal-ov{ position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:200; display:flex; align-items:center; justify-content:center; padding:1rem; opacity:0; pointer-events:none; transition:opacity .2s; }
.modal-ov.open{ opacity:1; pointer-events:all; }
.modal{ background:#fff; border-radius:14px; width:100%; max-width:640px; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg); transform:translateY(12px) scale(.98); transition:transform .2s; }
.modal.sm{ max-width:440px; }
.modal-ov.open .modal{ transform:none; }
.modal-head{ padding:1.2rem 1.4rem; border-bottom:1px solid var(--g100); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:#fff; z-index:1; }
.modal-head h3{ font-size:1rem; font-weight:700; color:var(--navy); margin:0; }
.modal-close{ width:30px; height:30px; border-radius:6px; border:none; background:var(--g100); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--g500); font-size:1.1rem; }
.modal-close:hover{ background:var(--g200); }
.modal-body{ padding:1.4rem; }
.modal-foot{ padding:1rem 1.4rem; border-top:1px solid var(--g100); display:flex; justify-content:flex-end; gap:.6rem; position:sticky; bottom:0; background:#fff; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem 1rem; }
.form-grid .full{ grid-column:1/-1; }
.divider{ grid-column:1/-1; display:flex; align-items:center; gap:.6rem; margin:.4rem 0 .2rem; }
.divider span{ font-size:.7rem; font-weight:700; color:var(--g400); text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; }
.divider::after{ content:''; flex:1; height:1px; background:var(--g200); }

/* Monospaced one-time secret box (temporary password handover) */
.secret-box{ font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; font-size:1.15rem; font-weight:700;
  letter-spacing:.06em; color:var(--navy); background:var(--g50); border:1.5px dashed var(--g300); border-radius:var(--radius);
  padding:.75rem .5rem; text-align:center; user-select:all; word-break:break-all; margin:0 0 1rem; }

.toasts{ position:fixed; bottom:1.2rem; right:1.2rem; z-index:999; display:flex; flex-direction:column; gap:.5rem; }
.toast{ background:#fff; border-radius:var(--radius); padding:.7rem 1rem; box-shadow:var(--shadow-lg); font-size:.85rem; display:flex; align-items:center; gap:.6rem; min-width:240px; border-left:3px solid var(--blue); }
.toast.success{ border-left-color:var(--green); } .toast.error{ border-left-color:var(--red); }
.confirm{ background:#fff; border-radius:12px; padding:1.5rem; max-width:380px; width:100%; box-shadow:var(--shadow-lg); text-align:center; }
.confirm .ic{ width:48px; height:48px; background:var(--red-bg); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto .85rem; font-size:1.3rem; }
.confirm h4{ font-size:.95rem; font-weight:700; color:var(--g900); margin:0 0 .4rem; }
.confirm p{ font-size:.85rem; color:var(--g500); margin:0 0 1.2rem; }
.confirm .row{ display:flex; gap:.6rem; justify-content:center; }
.empty{ text-align:center; padding:3rem 1rem; color:var(--g400); }
.empty p{ font-size:.9rem; margin:0; }
.notice{ background:var(--amber-bg); border:1px solid #FCD34D; border-radius:var(--radius); padding:.75rem 1rem; font-size:.82rem; color:var(--amber); display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; }
.perm-grid{ display:grid; grid-template-columns:1fr auto auto auto; gap:.5rem 1rem; align-items:center; margin-top:.5rem; }
.perm-grid .ph{ font-size:.68rem; font-weight:700; color:var(--g400); text-transform:uppercase; text-align:center; }
.perm-grid .pl{ font-size:.85rem; color:var(--g700); }
.chk{ width:18px; height:18px; accent-color:var(--blue); cursor:pointer; }

@media (max-width:600px){
  .form-grid{ grid-template-columns:1fr; } .form-grid .full{ grid-column:1; }
  .stats{ grid-template-columns:1fr 1fr; } .page-head{ flex-direction:column; }
  thead th, tbody td{ font-size:.7rem; padding:.45rem .3rem; }
}