@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');

@font-face {
  font-family: "Yekan Web";
  src: url("fonts/Yekan.1008c3b88ceb.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --nav: #17211d;
  --green: #237554;
  --green2: #dff4e9;
  --ink: #17211d;
  --muted: #718078;
  --line: #e5eae7;
  --bg: #f5f7f5;
  --white: #fff;
  --red: #b53a3a;
  --amber: #a66a15;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Vazirmatn", "Yekan Web", Yekan, "B Yekan", Tahoma, -apple-system, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
  color: inherit;
}

b, strong {
  font-weight: 700;
}

.layout {
  min-height: 100vh;
}

/* Sidebar & Navigation */
aside {
  position: fixed;
  right: 0;
  top: 0;
  width: 255px;
  height: 100vh;
  max-height: 100vh;
  padding: 20px 14px 14px 14px;
  background: var(--nav);
  color: #dce6e0;
  display: flex;
  flex-direction: column;
  z-index: 50;
  overflow: hidden;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 0 6px;
  font-weight: 800;
  font-size: 19px;
  flex-shrink: 0;
}

.brand > span, .login-logo {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #b59a62;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
}

.brand img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 10px;
}

.brand small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  opacity: 0.65;
}

nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
  padding-left: 2px;
  margin-bottom: 8px;
}

/* Scrollbar for Nav */
nav::-webkit-scrollbar {
  width: 4px;
}
nav::-webkit-scrollbar-track {
  background: transparent;
}
nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}
nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.nav-group-title {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(220, 230, 224, 0.45);
  margin-top: 14px;
  margin-bottom: 4px;
  padding: 0 8px;
  letter-spacing: 0.3px;
}

.nav-group-title:first-child {
  margin-top: 0;
}

nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(220, 230, 224, 0.85);
  transition: all 0.15s ease-in-out;
}

nav a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* Compact navigation */
.sidebar-nav { gap: 7px; }
.sidebar-nav .nav-home,
.sidebar-nav .nav-profile { font-weight: 700; padding: 10px 11px; }
.sidebar-nav .nav-home { background: rgba(255,255,255,.08); color: #fff; }
.nav-section { border: 1px solid rgba(255,255,255,.07); border-radius: 10px; overflow: hidden; }
.nav-section summary { list-style: none; cursor: pointer; padding: 10px 11px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.82); user-select: none; }
.nav-section summary::-webkit-details-marker { display: none; }
.nav-section summary i { font-style: normal; margin-right: auto; transition: transform .2s; opacity: .55; }
.nav-section[open] summary i { transform: rotate(180deg); }
.nav-section[open] { background: rgba(255,255,255,.025); }
.nav-section > div { padding: 0 8px 8px; }
.nav-section > div a { padding: 7px 28px 7px 8px; font-size: 12px; position: relative; }
.nav-section > div a::before { content: ''; position: absolute; right: 12px; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.24); transition: all .15s; }
.nav-section > div a:hover::before { background: #b59a62; }
.sidebar-nav a.active,
.nav-section > div a.active { background: rgba(35,117,84,.35) !important; color: #fff !important; font-weight: 700 !important; }
.nav-section > div a.active::before { background: var(--green, #237554) !important; box-shadow: 0 0 6px var(--green, #237554); transform: scale(1.3); }
.nav-profile { margin-top: auto; }

/* Admin experience */
.admin-page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:24px; }
.admin-page-head h1 { margin:3px 0 4px; font-size:28px; letter-spacing:-.4px; }
.admin-page-head p { margin:0; color:var(--muted); font-size:13px; }
.admin-kicker { color:var(--green); font-size:11px; font-weight:800; letter-spacing:.3px; }
.head-actions { display:flex; gap:8px; flex-wrap:wrap; }
.admin-toolbar { background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px; display:flex; align-items:center; gap:8px; margin-bottom:18px; box-shadow:0 4px 14px rgba(23,33,29,.03); }
.toolbar-search { flex:1; min-width:220px; display:flex; align-items:center; gap:8px; background:var(--bg); border-radius:9px; padding:0 11px; }
.toolbar-search input { border:0; background:transparent; width:100%; }
.text-action { color:var(--green); font-size:12.5px; font-weight:700; }
.admin-grid { display:grid; gap:14px; }.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}.span-all{grid-column:1/-1}
.entity-card { background:#fff; border:1px solid var(--line); border-radius:15px; padding:18px; transition:.18s; }
.entity-card:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(23,33,29,.07); border-color:#cfd8d3; }
.entity-card-top { display:flex; align-items:center; justify-content:space-between; }
.entity-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:10px; background:var(--green2); }
.entity-card h2 { font-size:18px; margin:16px 0 12px; }
.entity-meta { display:flex; gap:16px; color:var(--muted); font-size:12px; padding-bottom:15px; border-bottom:1px solid var(--line); }
.entity-meta b { color:var(--ink); }.entity-action{display:block;color:var(--green);font-size:12.5px;font-weight:700;margin-top:13px}
.admin-form-card { max-width:620px; }.toggle-row{display:flex;gap:10px;align-items:flex-start;background:var(--bg);padding:14px;border-radius:10px;margin:16px 0}.toggle-row input{width:auto;margin-top:4px}.toggle-row small{display:block;color:var(--muted);font-weight:400}.form-actions{display:flex;gap:8px;margin-top:22px}
.admin-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin-bottom:22px; }
.admin-stat-grid article { background:#fff; border:1px solid var(--line); border-radius:15px; padding:16px; display:flex; gap:13px; align-items:flex-start; }
.admin-stat-grid small,.admin-stat-grid a,.admin-stat-grid article div>span{display:block;color:var(--muted);font-size:11px}.admin-stat-grid strong{display:block;font-size:23px;margin:2px 0}.admin-stat-grid a{color:var(--green);font-weight:700}
.stat-icon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-weight:800}.stat-icon.green{background:#e3f5ec;color:#237554}.stat-icon.blue{background:#e8f1fb;color:#376f9f}.stat-icon.gold{background:#f6f0df;color:#947328}.stat-icon.rose{background:#faeaea;color:#a34a4a}
.quick-panel { margin-bottom:22px; }.section-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:12px}.section-heading h2{font-size:17px;margin:0}.section-heading p{font-size:11.5px;color:var(--muted);margin:2px 0 0}
.quick-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.quick-grid a{background:#fff;border:1px solid var(--line);border-radius:13px;padding:15px;transition:.15s}.quick-grid a:hover{border-color:var(--green);transform:translateY(-2px)}.quick-grid span{display:block;font-size:21px}.quick-grid b{display:block;font-size:13px;margin-top:7px}.quick-grid small{color:var(--muted);font-size:10.5px}.admin-table-card{padding:18px}.money-positive{color:var(--green)}
@media(max-width:1000px){.admin-stat-grid{grid-template-columns:repeat(2,1fr)}.quick-grid{grid-template-columns:repeat(3,1fr)}.cards-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.admin-page-head{align-items:flex-start;flex-direction:column}.admin-toolbar{align-items:stretch;flex-direction:column}.admin-stat-grid,.quick-grid,.cards-3{grid-template-columns:1fr}.toolbar-search{min-width:0}.dashboard-head .head-actions{width:100%}.dashboard-head .head-actions a{flex:1;text-align:center}}

/* Line control center */
.line-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.line-card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:18px;min-height:330px;display:flex;flex-direction:column;box-shadow:0 5px 18px rgba(23,33,29,.035);transition:.18s}.line-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(23,33,29,.08)}.line-card.is-inactive{opacity:.72}.line-card-head,.line-summary-row,.line-progress-block>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:10px}.line-card h2{font-size:20px;margin:17px 0}.line-summary-row{font-size:12px;padding:9px 0;border-top:1px solid var(--line)}.line-summary-row span,.line-progress-block span{color:var(--muted)}.line-progress-block{background:var(--bg);border-radius:11px;padding:12px;margin-top:9px}.line-progress-block small{display:block;color:var(--muted);font-size:10.5px;margin-top:7px}.progress-track{height:7px;background:#dfe6e2;border-radius:99px;overflow:hidden;margin-top:9px}.progress-track i{display:block;height:100%;background:var(--green);border-radius:99px}.line-card-action{margin-top:auto;color:var(--green);font-size:12.5px;font-weight:800;padding-top:14px}.control-tabs{position:sticky;top:8px;z-index:5;display:flex;flex-direction:row;gap:6px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:13px;padding:7px;margin-bottom:18px;box-shadow:0 6px 20px rgba(23,33,29,.05)}.control-tabs a{white-space:nowrap;color:var(--muted);padding:8px 11px}.control-tabs a:hover{background:var(--green2);color:var(--green)}.control-tabs a.active{background:var(--green,#237554);color:#fff !important;font-weight:700;border-radius:9px}.control-tabs a.active:hover{background:var(--green,#237554);color:#fff}.control-tabs a.active .tab-count{background:rgba(255,255,255,0.25);color:#fff}.control-section{margin-bottom:16px;scroll-margin-top:80px}.card-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:16px}.card-head h2{margin:0;font-size:18px}.card-head p{margin:3px 0 0;color:var(--muted);font-size:11.5px}.detail-pairs,.compact-fields,.target-level-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.detail-pairs>div{background:var(--bg);border-radius:10px;padding:13px}.detail-pairs small,.detail-pairs b{display:block}.detail-pairs small{color:var(--muted);font-size:11px}.target-level-grid fieldset{border:1px solid var(--line);border-radius:12px;padding:14px}.target-level-grid legend{font-weight:800;padding:0 7px}.target-level-grid label{display:block;font-size:11px;color:var(--muted);margin-top:8px}.target-level-grid input{margin-top:4px}.rule-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.rule-chips a{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px}.rule-chips b,.rule-chips small{display:block}.rule-chips small,.rule-scope{color:var(--muted);font-size:10.5px;margin-top:4px}.history-list>div{display:flex;justify-content:space-between;gap:15px;padding:10px 0;border-bottom:1px solid var(--line);font-size:12px}.history-list span{color:var(--muted)}
@media(max-width:1000px){.line-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.target-level-grid,.rule-chips{grid-template-columns:1fr}}
@media(max-width:640px){.line-card-grid,.detail-pairs,.compact-fields{grid-template-columns:1fr}.control-tabs{top:4px}.line-card{min-height:300px}}

aside form {
  margin-top: auto;
  flex-shrink: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.logout {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #dce6e0;
  padding: 8px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.logout:hover {
  background: rgba(181, 58, 58, 0.2);
  border-color: rgba(181, 58, 58, 0.4);
  color: #ff9b9b;
}

main {
  margin-right: 255px;
  min-height: 100vh;
}

header {
  height: 68px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 32px;
}

header div {
  text-align: left;
}

header strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
}

header small {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--muted);
}

.menu {
  display: none;
}

.content {
  padding: 30px;
  max-width: 1400px;
  margin: auto;
}

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}

.page-head h1 {
  margin: 2px 0;
  font-size: 26px;
  font-weight: 800;
}

.page-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 400;
}

.eyebrow {
  font-size: 12px !important;
  color: var(--green) !important;
  font-weight: 700 !important;
  margin: 0 0 2px 0;
}

.primary {
  display: inline-block;
  background: var(--green);
  color: white;
  border: 0;
  border-radius: 10px;
  padding: 10px 18px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.primary:hover {
  opacity: 0.92;
}

.secondary {
  display: inline-block;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 10px;
  padding: 9px 15px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
}

.secondary:hover {
  background: #f8faf9;
}

.full {
  width: 100%;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(120deg, #1b6c4c, #2d8663);
  padding: 26px 30px;
  color: #fff;
  border-radius: 16px;
  margin-bottom: 18px;
  box-shadow: 0 10px 24px #23755420;
}

.hero span, .hero small {
  opacity: 0.85;
  font-weight: 400;
}

.hero strong {
  display: inline-block;
  font-size: 36px;
  font-weight: 900;
  margin: 0 8px;
}

.hero-meta {
  display: flex;
  gap: 32px;
}

.hero-meta p {
  margin: 0;
  font-size: 12px;
  opacity: 0.85;
  font-weight: 400;
}

.hero-meta b {
  display: block;
  font-size: 17px;
  font-weight: 700;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.stats article, .card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
}

.stats span, .stats small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.stats strong {
  display: block;
  font-size: 23px;
  font-weight: 800;
  margin-top: 6px;
}

.stats .danger strong, .danger-text {
  color: var(--red);
}

.stats .warning strong {
  color: var(--amber);
}

.card {
  margin-bottom: 18px;
}

.card-head, .target > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.card-head h2, .target h3 {
  margin: 0;
  font-size: 16.5px;
  font-weight: 700;
}

.card-head a {
  color: var(--green);
  font-size: 12.5px;
  font-weight: 600;
}

.progress {
  height: 8px;
  background: #e9eeeb;
  border-radius: 10px;
  overflow: hidden;
}

.progress i {
  display: block;
  height: 100%;
  background: var(--green);
  border-radius: 10px;
}

.table-wrap {
  overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}

th {
  text-align: right;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

td {
  padding: 12px 12px;
  border-bottom: 1px solid #eef1ef;
  font-size: 13px;
  font-weight: 400;
}

td small {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 400;
}

.status, .level, .badge {
  display: inline-block;
  border-radius: 20px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  background: #edf1ef;
}

.status.approved {
  background: #def5e8;
  color: #187048;
}

.status.pending {
  background: #fff1d8;
  color: #99610b;
}

.status.rejected {
  background: #fde5e5;
  color: #a72f2f;
}

.status.needs_revision, .status.needs_edit {
  background: #e8e9fb;
  color: #4e54a7;
}

.status.draft {
  background: #edf1ef;
  color: #56635c;
}

.form-card {
  max-width: 720px;
}

.field {
  margin-bottom: 16px;
}

.field label, label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 6px;
}

.field em {
  color: var(--red);
}

input, select, textarea {
  width: 100%;
  border: 1px solid #d9e0dc;
  border-radius: 8px;
  padding: 9px 12px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid #2375542a;
  border-color: var(--green);
}

.field-error {
  color: var(--red);
  font-size: 11px;
  font-weight: 500;
}

.review-grid, .employee-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.review-card h3 {
  margin-bottom: 4px;
  font-weight: 700;
}

.review-card > div {
  display: flex;
  justify-content: space-between;
}

.review-card p {
  color: var(--muted);
  font-size: 13px;
}

.employee-card {
  display: flex;
  gap: 14px;
  align-items: center;
}

.employee-card h3, .employee-card p {
  margin: 2px;
  font-weight: 600;
}

.employee-card small {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--green2);
  color: var(--green);
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 800;
}

.message {
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 16px;
  background: var(--green2);
  color: var(--green);
  font-weight: 500;
  font-size: 13.5px;
}

.message.error {
  background: #fde7e7;
  color: var(--red);
}

.empty {
  text-align: center;
  color: var(--muted);
  padding: 30px !important;
  font-weight: 500;
}

.auth-main {
  margin: 0;
}

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at top right, #d9eee3, transparent 40%), var(--bg);
}

.login-card {
  width: min(430px, 92vw);
  background: white;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 36px;
  box-shadow: 0 16px 45px #17211d12;
}

.login-logo {
  margin: auto;
}

.login-card h1 {
  text-align: center;
  margin-bottom: 4px;
  font-weight: 800;
}

.login-card > p, .hint {
  text-align: center;
  color: var(--muted);
  display: block;
  font-size: 13px;
}

.login-card label {
  margin-top: 14px;
}

.login-card button {
  margin-top: 18px;
}

.hint {
  margin-top: 20px;
  font-size: 11px;
}

dl {
  display: grid;
  grid-template-columns: 140px 1fr;
}

dt, dd {
  padding: 8px;
  border-bottom: 1px solid var(--line);
}

dt {
  color: var(--muted);
  font-weight: 500;
}

dd {
  font-weight: 600;
}

.filters {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr) auto auto;
  gap: 10px;
  align-items: end;
}

.filter-card {
  padding: 14px;
}

.person-cell {
  display: flex;
  align-items: center;
  gap: 9px;
}

.person-cell img, .avatar.small {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  object-fit: cover;
}

.avatar.small {
  display: grid;
  font-size: 13px;
  font-weight: 700;
}

.table-link {
  color: var(--green);
  font-weight: 700;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
  font-weight: 500;
}

.form-card.wide {
  max-width: 950px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}

.span-2 {
  grid-column: 1 / -1;
}

.field ul {
  list-style: none;
  margin: 5px 0;
  padding: 0;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.field ul label {
  font-weight: 500;
}

.field ul input {
  width: auto;
}

.help {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.profile-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.profile-main, .profile-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-photo {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  object-fit: cover;
}

.profile-photo.fallback {
  display: grid;
  place-items: center;
  background: var(--green2);
  color: var(--green);
  font-size: 30px;
  font-weight: 800;
}

.profile-main h1 {
  margin: 0;
  font-weight: 800;
}

.profile-main p {
  margin: 4px 0;
  color: var(--muted);
  font-weight: 500;
}

.tabs {
  display: flex;
  overflow: auto;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  margin-bottom: 18px;
}

.tabs a {
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
}

.tabs a.active {
  background: var(--green);
  color: #fff;
  font-weight: 700;
}

.file-hero {
  margin-bottom: 14px;
}

.file-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.file-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 800;
}

.file-status.is-active {
  background: var(--green2);
  color: var(--green);
}

.file-status.is-inactive {
  background: #faeaea;
  color: var(--red);
}

.file-tabs {
  position: sticky;
  top: 8px;
  z-index: 5;
  scrollbar-width: thin;
  box-shadow: 0 6px 20px rgba(23, 33, 29, 0.05);
}

.file-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
}

.file-tabs a:hover {
  background: var(--green2);
  color: var(--green);
}

.file-tabs a.active:hover {
  background: var(--green);
  color: #fff;
}

.tab-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--bg);
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 800;
  display: inline-grid;
  place-items: center;
}

.file-tabs a.active .tab-count {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.file-period {
  margin: -6px 0 14px;
  color: var(--muted);
  font-size: 12.5px;
}

.file-target-card {
  margin-bottom: 18px;
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
}

.file-target-card.is-gold {
  border-color: #f5c451;
}

.file-target-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.file-target-card h2 {
  margin: 8px 0 4px;
  font-size: 16.5px;
}

.file-target-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}

.file-target-score {
  text-align: left;
}

.file-target-score b {
  display: block;
  font-size: 24px;
  color: var(--green);
}

.file-target-score small,
.file-target-levels {
  display: block;
  margin-top: 6px;
  color: #166534;
  font-size: 12px;
}

.file-target-empty {
  margin-bottom: 18px;
}

.file-target-empty h2 {
  margin: 0 0 6px;
  font-size: 16px;
}

.file-target-empty p {
  margin: 0;
  color: var(--muted);
}

.file-identity-stats strong {
  font-size: 18px;
}

.file-edit-card {
  max-width: none;
}

.file-danger {
  margin-top: 18px;
  border: 1px solid #fecaca;
  background: #fffafa;
}

.file-danger h2 {
  color: #b42318;
  margin-top: 0;
}

.danger-action {
  color: #b42318;
  border-color: #ef4444;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.info-grid div {
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.info-grid span, .info-grid b {
  display: block;
}

.info-grid span {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
}

.info-grid b {
  font-weight: 700;
}

.placeholder {
  text-align: center;
  padding: 50px;
}

.placeholder p {
  color: var(--muted);
}

.score-preview {
  background: var(--green2);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 6px;
}

.score-preview span, .score-preview small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.score-preview strong {
  display: block;
  color: var(--green);
  font-size: 24px;
  font-weight: 800;
}

.detail-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.compact {
  padding: 6px 10px;
}

.timeline > div {
  display: flex;
  gap: 12px;
  position: relative;
  padding-bottom: 14px;
}

.timeline i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  margin-top: 6px;
  flex: none;
}

.timeline p {
  margin: 0;
}

.timeline small, .timeline span {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.timeline span {
  color: var(--ink);
  margin-top: 3px;
}

@media (max-width: 900px) {
  aside {
    transform: translateX(100%);
    transition: transform 0.2s ease-in-out;
  }
  .nav-open aside {
    transform: none;
  }
  main {
    margin-right: 0;
  }
  .menu {
    display: block;
    margin-left: auto;
    background: none;
    border: 0;
    font-size: 22px;
    cursor: pointer;
  }
  .content {
    padding: 18px;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .review-grid, .employee-grid {
    grid-template-columns: 1fr 1fr;
  }
  .hero-meta {
    display: none;
  }
  .page-head {
    align-items: flex-start;
    gap: 14px;
  }
  .page-head h1 {
    font-size: 22px;
  }
}

@media (max-width: 560px) {
  .review-grid, .employee-grid {
    grid-template-columns: 1fr;
  }
  .page-head {
    display: block;
  }
  .page-head .primary {
    margin-top: 12px;
  }
  .hero strong {
    font-size: 26px;
  }
  .stats {
    gap: 8px;
  }
  .stats article {
    padding: 12px;
  }
  .content {
    padding: 14px;
  }
  header {
    padding: 0 14px;
  }
}

@media (max-width: 1050px) {
  .filters {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .filters input {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .filters, .form-grid, .info-grid {
    grid-template-columns: 1fr;
  }
  .filters input, .span-2 {
    grid-column: auto;
  }
  .profile-hero, .profile-main {
    align-items: flex-start;
  }
  .profile-hero {
    display: block;
  }
  .profile-actions {
    margin-top: 14px;
  }
  .profile-photo {
    width: 60px;
    height: 60px;
  }
  .detail-columns {
    grid-template-columns: 1fr;
  }
  .form-actions {
    flex-direction: column;
  }
}

/* Modern Department Selection Chips */
.field-departments-chips ul,
.field ul.checkbox-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 10px 0 !important;
}

.field-departments-chips ul li,
.field ul.checkbox-chips li {
  margin: 0 !important;
}

.field-departments-chips ul li label,
.field ul.checkbox-chips li label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 10px 18px !important;
  background: #fff !important;
  border: 1.5px solid var(--line, #e5eae7) !important;
  border-radius: 12px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--ink, #17211d) !important;
  cursor: pointer !important;
  transition: all 0.15s ease-in-out !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
  user-select: none !important;
}

.field-departments-chips ul li label:hover,
.field ul.checkbox-chips li label:hover {
  border-color: var(--green, #237554) !important;
  background: #f0fdf4 !important;
  transform: translateY(-1px);
}

.field-departments-chips ul li input[type="checkbox"],
.field ul.checkbox-chips li input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--green, #237554) !important;
  cursor: pointer !important;
  margin: 0 !important;
}

.field-departments-chips ul li label:has(input:checked),
.field ul.checkbox-chips li label:has(input:checked) {
  background: #e9f7ef !important;
  border-color: var(--green, #237554) !important;
  color: var(--green, #237554) !important;
  box-shadow: 0 4px 14px rgba(35, 117, 84, 0.16) !important;
  font-weight: 700 !important;
}

/* Modern Switch Toggle Card */
.switch-field-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #f8faf9 !important;
  border: 1.5px solid var(--line, #e5eae7) !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  margin: 14px 0 20px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
}

.switch-field-card .switch-info label {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ink, #17211d) !important;
  margin: 0 !important;
  cursor: pointer !important;
}

.switch-field-card .switch-info small {
  color: var(--muted, #718078) !important;
  display: block !important;
  margin-top: 4px !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
}

.toggle-switch {
  position: relative !important;
  display: inline-block !important;
  width: 52px !important;
  height: 28px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
}

.toggle-switch input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

.toggle-slider {
  position: absolute !important;
  cursor: pointer !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: #cbd5e1 !important;
  transition: 0.25s ease-in-out !important;
  border-radius: 34px !important;
}

.toggle-slider:before {
  position: absolute !important;
  content: "" !important;
  height: 22px !important;
  width: 22px !important;
  left: 3px !important;
  bottom: 3px !important;
  background-color: white !important;
  transition: 0.25s ease-in-out !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22) !important;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--green, #237554) !important;
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(24px) !important;
}

/* Multi-Select Dropdown Component */
.multiselect-container {
  position: relative;
  width: 100%;
}

.multiselect-trigger {
  width: 100%;
  min-height: 44px;
  background: #fff;
  border: 1px solid #d9e0dc;
  border-radius: 9px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  user-select: none;
}

.multiselect-trigger:focus,
.multiselect-container.open .multiselect-trigger {
  border-color: var(--green, #237554);
  box-shadow: 0 0 0 3px rgba(35, 117, 84, 0.15);
  outline: none;
}

.multiselect-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}

.multiselect-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e8f5ee;
  color: var(--green, #237554);
  border: 1px solid #bce6d0;
  border-radius: 7px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 700;
}

.multiselect-badge .badge-remove {
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  color: var(--green, #237554);
  transition: background 0.1s;
}

.multiselect-badge .badge-remove:hover {
  background: rgba(35, 117, 84, 0.2);
}

.multiselect-placeholder {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 400;
}

.multiselect-arrow {
  color: var(--muted, #718078);
  font-size: 11px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.multiselect-container.open .multiselect-arrow {
  transform: rotate(180deg);
}

.multiselect-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  background: #fff;
  border: 1px solid var(--line, #e5eae7);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(23, 33, 29, 0.12);
  z-index: 100;
  overflow: hidden;
  animation: dropdownFade 0.15s ease-out;
}

@keyframes dropdownFade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.multiselect-container.open .multiselect-menu {
  display: block;
}

.multiselect-search-wrap {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line, #e5eae7);
  background: #fbfdfc;
}

.multiselect-search {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 12.5px;
  background: #fff;
}

.multiselect-options {
  max-height: 200px;
  overflow-y: auto;
  padding: 4px;
}

.multiselect-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink, #17211d);
  transition: background 0.12s;
  user-select: none;
}

.multiselect-option:hover {
  background: #f1f8f4;
  color: var(--green, #237554);
}

.multiselect-option.selected {
  background: #edf7f2;
  color: var(--green, #237554);
  font-weight: 700;
}

.option-checkbox {
  width: 17px;
  height: 17px;
  border: 1.5px solid #cbd5e1;
  border-radius: 5px;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: #fff;
  transition: all 0.15s;
  flex-shrink: 0;
}

.multiselect-option.selected .option-checkbox {
  background: var(--green, #237554);
  border-color: var(--green, #237554);
}

.multiselect-option.selected .option-checkbox:after {
  content: "✓";
  font-weight: 900;
  line-height: 1;
}