/* ── Perquisites & Benefits — page-specific styles ── */

/* Law reference box */
.law-box {
  background: linear-gradient(135deg, #f8f6ff, #f0f9ff);
  border: 1px solid #d4cafe;
  border-radius: 10px;
  padding: 14px 18px;
}
.law-box-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.law-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.law-item {
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(34,86,232,.12);
  border-radius: 7px;
  padding: 10px 12px;
}
.law-item-hd {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
}
.law-item-body {
  font-size: 11.5px;
  color: var(--ink2);
  line-height: 1.5;
}

/* SBI PLR banner */
.sbi-plr-banner {
  background: var(--acc2);
  border: 1px solid rgba(34,86,232,.2);
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 12.5px;
  color: var(--accent);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.sbi-plr-banner .btn { margin-left: auto; }

/* Perk category dot */
.perk-cat-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

/* Alert strip */
.alert-strip {
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.alert-strip.warn {
  background: var(--amb2);
  border: 1px solid rgba(140,81,0,.2);
  color: var(--amber);
}
.alert-strip.err {
  background: var(--red2);
  border: 1px solid rgba(194,44,44,.2);
  color: var(--red);
}

/* Flag items */
.flag-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.flag-item:last-child { border-bottom: none; }
.flag-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}
.flag-title { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.flag-sub   { font-size: 11.5px; color: var(--ink3); margin-top: 2px; }

/* KV grid */
.kv-grid { display: flex; flex-direction: column; gap: 8px; }
.kv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.kv:last-child { border-bottom: none; }
.kv-k { color: var(--ink3); }
.kv-v { font-weight: 500; color: var(--ink); }

/* Computed box */
.computed-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
}
.cb-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 8px;
}
.cb-formula {
  font-size: 12.5px;
  color: var(--ink);
}
.cb-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}
.cb-row:last-child { border-bottom: none; }

/* Form grid */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.fg { display: flex; flex-direction: column; gap: 4px; }
.fl { font-size: 11.5px; font-weight: 600; color: var(--ink2); }
.fi {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--ink);
  background: var(--white);
  outline: none;
  transition: border-color .12s;
}
.fi:focus { border-color: var(--accent); }

/* Search input */
.search-inp {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--ink);
  background: var(--white);
  outline: none;
}
.search-inp:focus { border-color: var(--accent); }

/* Bar chart */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 100px;
}
.bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  transition: height .3s;
}
.bar-lbl {
  font-size: 10px;
  color: var(--ink3);
  text-align: center;
  line-height: 1.3;
}

/* Gift alert */
.gift-alert {
  background: var(--amb2);
  border: 1px solid rgba(140,81,0,.2);
  border-radius: 7px;
  padding: 9px 14px;
  font-size: 12.5px;
  color: var(--amber);
}

/* Form 12BA preview */
.form12ba-preview {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  background: #fdfdfd;
}
.f12ba-header { text-align: center; margin-bottom: 16px; }
.f12ba-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.f12ba-sub { font-size: 11.5px; color: var(--ink2); margin-top: 3px; }
.f12ba-ref { font-size: 11px; color: var(--ink3); margin-top: 2px; }
.f12ba-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.f12ba-k { font-size: 12px; color: var(--ink2); padding: 5px 8px 5px 0; width: 45%; vertical-align: top; font-weight: 500; }
.f12ba-v { font-size: 12px; color: var(--ink); padding: 5px 0; }

/* Employee cell */
.emp-cell { display: flex; align-items: center; gap: 8px; }
.emp-av {
  width: 30px; height: 30px; border-radius: 50%;
  color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.emp-name { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.emp-id { font-size: 11px; color: var(--ink3); }

/* Mono */
.mono { font-family: var(--mono); font-size: 12px; }

/* Link */
.link-a { color: var(--accent); font-size: 12px; text-decoration: underline; }

/* Tables */
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th {
  background: var(--surface2);
  padding: 9px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tbl td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  vertical-align: middle;
}
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: var(--surface2); }