/* ════════════════════════════════════════════════════════════════
   BR Management — "Black Russia / Management System" theme
   Adapted from the Claude Design mock `BR Management.dc.html`.
   Loaded LAST so it overrides legacy style.css / desktop.css / admin.css.
   Strategy: remap the legacy CSS variables to the new palette (so all
   existing markup recolors with zero risk to functionality), restyle the
   shared component classes, and add the new responsive sidebar shell.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* New brand tokens */
  --br-accent:      #ff5a25;
  --br-accent2:     #e01e0f;
  --br-bg:          #0a0a0b;
  --br-bg-deep:     #080809;
  --br-sidebar:     #0c0c0d;
  --br-card:        rgba(255, 255, 255, .025);
  --br-card-2:      rgba(255, 255, 255, .04);
  --br-border:      rgba(255, 255, 255, .07);
  --br-border-2:    rgba(255, 255, 255, .09);
  --br-text:        #f4f2ef;
  --br-text-2:      #b8b5ad;
  --br-text-dim:    #9a978f;
  --br-text-muted:  #7d7a73;
  --br-text-faint:  #5c5852;
  --br-green:       #4cd964;
  --br-red:         #ff6b6b;
  --br-blue:        #2f9bf5;
  --br-purple:      #9b7bff;
  --br-spb:         #2f9bf5;
  --br-surgut:      #9b7bff;
  --br-black:       #ff5a25;
  --br-fire:        linear-gradient(135deg, var(--br-accent), var(--br-accent2));

  /* Remap legacy variables onto the new palette */
  --bg-color:        var(--br-bg);
  --surface:         #0c0c0d;
  --surface2:        #141216;
  --card-bg:         #111014;
  --accent-red:      var(--br-accent);
  --accent-gradient: var(--br-fire);
  --text-main:       var(--br-text);
  --text-dim:        var(--br-text-dim);
  --text-muted:      var(--br-text-muted);
  --border-glass:    var(--br-border);
}

/* ── Base ───────────────────────────────────────────────────────── */
body {
  background-color: var(--br-bg);
  background-image:
    radial-gradient(circle 700px at 12% -5%, rgba(255, 90, 37, .06), transparent 55%),
    linear-gradient(rgba(255, 255, 255, .014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .014) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--br-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .header-info h1 {
  font-family: 'Sora', 'Manrope', sans-serif;
  letter-spacing: -.3px;
}

/* Scrollbars */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .09); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
.br-scroll { overflow-y: auto; scrollbar-width: thin; }

/* Animations */
@keyframes brFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes brGlow { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }
@keyframes brSpin { to { transform: rotate(360deg); } }

/* ── Mono / type helpers ────────────────────────────────────────── */
.br-mono { font-family: 'JetBrains Mono', monospace; }
.br-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 1.5px;
  color: var(--br-text-dim); text-transform: uppercase;
}

/* ── Restyle shared legacy components to the new look ───────────── */
.card {
  background: var(--br-card);
  border: 1px solid var(--br-border);
  border-radius: 16px;
}

.badge {
  font-family: 'JetBrains Mono', monospace;
  background: rgba(255, 90, 37, .14);
  border: 1px solid rgba(255, 90, 37, .25);
  color: var(--br-accent);
}

.section-title {
  font-family: 'JetBrains Mono', monospace;
  color: var(--br-text-dim);
  letter-spacing: 1.5px;
}
.section-title::before { background: var(--br-accent); }

.stat-item {
  background: var(--br-card);
  border: 1px solid var(--br-border);
  border-radius: 16px;
}
.stat-num { color: var(--br-text); font-family: 'Sora', sans-serif; }

.value.red, .value.red * { color: var(--br-accent); }

.avatar-container {
  border-color: rgba(255, 90, 37, .35);
  box-shadow: 0 0 18px rgba(255, 90, 37, .18);
  border-radius: 16px;
}
.avatar-placeholder { background: var(--br-fire); }

.main-header {
  background: linear-gradient(to bottom, rgba(255, 90, 37, .08), transparent);
  border-bottom: 1px solid var(--br-border);
}

/* Inputs / textareas / selects everywhere */
.reason-textarea,
input[type="text"], input[type="number"], input[type="password"],
input[type="date"], input[inputmode], textarea, select {
  background: var(--br-card-2);
  border: 1px solid var(--br-border-2);
  border-radius: 12px;
  color: var(--br-text);
  font-family: 'Manrope', sans-serif;
}
.reason-textarea:focus,
input:focus, textarea:focus, select:focus {
  border-color: rgba(255, 90, 37, .45);
  outline: none;
}

/* ── App shell (desktop sidebar + topbar) ───────────────────────── */
.br-shell { position: fixed; inset: 0; display: flex; background: var(--br-bg); }
.br-shell::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle 700px at 12% -5%, rgba(255, 90, 37, .06), transparent 55%);
}

.br-sidebar {
  position: relative; z-index: 2;
  width: 256px; flex: 0 0 256px;
  background: var(--br-sidebar);
  border-right: 1px solid var(--br-border);
  display: flex; flex-direction: column;
  padding: 22px 16px;
}
.br-brand { display: flex; align-items: center; gap: 12px; padding: 6px 8px 22px; color: var(--br-text); }
.br-brand, .br-brand:visited, .br-brand:hover { color: var(--br-text); text-decoration: none; }
.br-brand img { height: 38px; width: 38px; object-fit: cover; border-radius: 11px; box-shadow: 0 4px 14px rgba(255, 90, 37, .35); }
/* The brand logo (br-logo.jpg) ships with a solid orange field — render it as a
   rounded badge anywhere it appears so it reads as an emblem on the dark UI. */
.br-logo { object-fit: cover; border-radius: 14px; box-shadow: 0 6px 20px rgba(255, 90, 37, .3); }
.br-brand .name { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 15px; line-height: 1; color: var(--br-text); }
.br-brand .sub  { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 2px; color: var(--br-accent); margin-top: 4px; }

.br-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.br-navitem {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 12px;
  background: none; border: none; cursor: pointer;
  color: var(--br-text-dim); font-family: 'Manrope', sans-serif;
  font-size: 14px; font-weight: 600; text-align: left;
  transition: background .18s, color .18s; text-decoration: none;
}
.br-navitem i { width: 20px; text-align: center; font-size: 15px; }
.br-navitem span { flex: 1; }
.br-navitem:hover { background: rgba(255, 255, 255, .04); color: var(--br-text); }
.br-navitem.active {
  background: rgba(255, 90, 37, .12);
  color: var(--br-text);
  box-shadow: inset 0 0 0 1px rgba(255, 90, 37, .22);
}
.br-navitem.active i { color: var(--br-accent); }
.br-navbadge {
  background: var(--br-accent2); color: #fff;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  padding: 1px 7px; border-radius: 20px;
}
/* Don't let `.br-navitem span { flex:1 }` stretch the count badge */
.br-navitem .br-navbadge { flex: 0 0 auto; min-width: 0; text-align: center; }

.br-usercard {
  margin-top: auto;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--br-border);
  border-radius: 14px; padding: 13px 14px;
  display: flex; align-items: center; gap: 11px;
}
.br-usercard .av {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; overflow: hidden;
  background: #16131a;
}
.br-usercard .av .avatar-placeholder {
  width: 100%; height: 100%; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Sora', sans-serif; font-weight: 800; font-size: 15px; color: #fff;
  background: transparent;
}
.br-usercard .meta { min-width: 0; flex: 1; }
.br-usercard .meta .nm { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-usercard .meta .rl { font-size: 11px; color: var(--br-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-usercard .out { background: none; border: none; color: var(--br-text-faint); cursor: pointer; font-size: 15px; padding: 5px; }
.br-usercard .out:hover { color: var(--br-accent); }

/* Main column (position:relative so the manage-overlay is confined here, never over the sidebar) */
.br-main { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.br-topbar {
  height: 66px; flex-shrink: 0;
  border-bottom: 1px solid var(--br-border);
  background: rgba(10, 10, 11, .7); backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 30px;
}
.br-topbar .ttl { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 18px; }
.br-topbar .sub { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1px; color: var(--br-text-faint); margin-top: 2px; }
.br-topbar .right { display: flex; align-items: center; gap: 14px; }

.br-online {
  display: flex; align-items: center; gap: 7px;
  background: rgba(76, 217, 100, .1); border: 1px solid rgba(76, 217, 100, .2);
  border-radius: 20px; padding: 6px 13px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--br-green);
}
.br-online .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--br-green); box-shadow: 0 0 8px var(--br-green); }

.br-bell {
  position: relative; width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--br-border);
  color: var(--br-text-dim); cursor: pointer; font-size: 15px;
}
.br-bell:hover { color: var(--br-text); }
.br-bell.active { background: rgba(255, 90, 37, .12); border-color: rgba(255, 90, 37, .3); color: var(--br-accent); }
.br-bell .cnt {
  position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--br-accent2); color: #fff;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--br-bg);
}

/* Notifications dropdown */
.br-notif-overlay { position: fixed; inset: 0; z-index: 40; }
.br-notif {
  position: absolute; top: 60px; right: 22px; width: 368px; max-height: 520px;
  background: #121214; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6); z-index: 50;
  display: flex; flex-direction: column; overflow: hidden; animation: brFade .2s ease;
}
.br-notif .head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--br-border); }
.br-notif .head .t { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 15px; }
.br-notif .head button { background: none; border: none; color: var(--br-accent); font-size: 12px; font-weight: 600; cursor: pointer; }
.br-notif .row { display: flex; gap: 13px; padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, .04); }
.br-notif .row .ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.br-notif .row .t { font-weight: 700; font-size: 13px; line-height: 1.4; }
.br-notif .row .b { font-size: 12px; color: var(--br-text-muted); margin-top: 2px; line-height: 1.45; }
.br-notif .row .tm { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--br-text-faint); margin-top: 5px; }
.br-notif .empty { padding: 40px 18px; text-align: center; color: var(--br-text-muted); font-size: 13px; }

/* Content host */
.br-content { flex: 1; overflow-y: auto; padding: 30px; }
/* #app spans a wide working area; readability-sensitive views (profile/stats)
   re-cap themselves with .br-wrap. Admin uses the full width to fit the table. */
.br-content > #app { max-width: 1360px; margin: 0 auto; }
.br-content .br-wrap { max-width: 1080px; margin: 0 auto; }
.admin-page-container { max-width: 100% !important; margin: 0 !important; padding: 0 !important; }

/* Generic design cards/buttons used by rewritten views */
.br-card { background: var(--br-card); border: 1px solid var(--br-border); border-radius: 16px; }
.br-btn-primary {
  background: var(--br-fire); border: none; border-radius: 12px; color: #fff;
  font-family: 'Sora', sans-serif; font-weight: 700; cursor: pointer;
  box-shadow: 0 8px 24px rgba(224, 30, 15, .3);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.br-btn-ghost {
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px; color: var(--br-text-dim);
  font-family: 'Sora', sans-serif; font-weight: 600; cursor: pointer;
}
.br-chip {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 1px;
  padding: 4px 11px; border-radius: 8px; border: 1px solid transparent;
}
.br-chip.spb    { background: rgba(47,155,245,.12);  color: var(--br-spb);    border-color: rgba(47,155,245,.22); }
.br-chip.surgut { background: rgba(155,123,255,.12); color: var(--br-surgut); border-color: rgba(155,123,255,.22); }
.br-chip.black  { background: rgba(255,90,37,.12);   color: var(--br-black);  border-color: rgba(255,90,37,.22); }

/* ── Body when running the app shell ────────────────────────────── */
body.br-app { overflow: hidden; padding: 0 !important; margin: 0; background: var(--br-bg); }
/* #app is the content host inside .br-content */
.br-content > #app { display: block; width: 100%; }

/* ── Mobile bottom nav (real shell) ─────────────────────────────── */
/* NOTE: this element also carries the legacy `.bottom-nav` class (some JS shows/
   hides it). desktop.css turns `.bottom-nav` into a 240px left rail at ≥768px, so
   the responsive rules below override that transform with !important. */
.br-mnav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  height: calc(env(safe-area-inset-bottom, 0px) + 62px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(10, 10, 11, .97); border-top: 1px solid var(--br-border);
  backdrop-filter: blur(18px);
  justify-content: space-around; align-items: center;
}
.br-mnav::before, .br-mnav::after { content: none !important; display: none !important; }
.br-mnav .nav-item {
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex: 1; padding: 8px 0; font-size: 10px;
  color: var(--br-text-faint); font-family: 'Manrope', sans-serif; text-decoration: none;
}
.br-mnav .nav-item i { font-size: 19px; }
.br-mnav .nav-item.active { color: var(--br-accent); }
.br-mnav .nav-item.active i { filter: drop-shadow(0 0 8px rgba(255, 90, 37, .6)); }

/* Design grid helpers — minmax(0,1fr) so wide content can't push columns over each other */
.br-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.br-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.br-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

/* ── Forms menu cards (restyle .form-grid-modern / .modern-card) ── */
.dept-info { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--br-text-muted); margin: 0 0 16px; }
.dept-info span { color: var(--br-accent); font-weight: 700; }
.form-grid-modern { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.modern-card {
  text-align: left;
  background: var(--br-card); border: 1px solid var(--br-border); border-radius: 16px;
  padding: 22px; cursor: pointer; transition: border-color .2s, transform .2s;
  animation: brFade .4s ease both; animation-delay: var(--delay, 0s);
}
.modern-card:hover { border-color: rgba(255, 90, 37, .4); transform: translateY(-3px); }
.modern-card .card-icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; margin-bottom: 16px;
}
.modern-card .card-label { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 16px; color: var(--br-text); display: block; }
.modern-card .card-desc { font-size: 12px; color: var(--br-text-muted); margin-top: 5px; line-height: 1.5; display: block; }

/* ── Responsive: real shell — sidebar ≥900px, mobile nav <900px ──── */
@media (max-width: 899px) {
  .br-shell { position: fixed; inset: 0; display: block; }
  .br-sidebar { display: none; }
  .br-main { display: flex; height: 100%; }
  .br-topbar { padding: 0 16px; height: 58px; }
  .br-content { padding: 18px 14px calc(80px + env(safe-area-inset-bottom, 0px)); }
  .br-content > #app, .br-content .br-wrap { max-width: 100%; }
  .br-notif { right: 10px; left: 10px; width: auto; top: 56px; }
  .br-grid-3, .br-grid-4, .br-grid-2 { grid-template-columns: 1fr !important; }
  .form-grid-modern { grid-template-columns: 1fr; }
  .br-online { display: none; }
  /* Force the mobile nav to the bottom (defeat desktop.css's 240px-rail transform) */
  .br-mnav {
    display: flex !important;
    position: fixed !important; top: auto !important; bottom: 0 !important;
    left: 0 !important; right: 0 !important;
    width: auto !important; min-width: 0 !important; max-width: none !important;
    height: calc(env(safe-area-inset-bottom, 0px) + 62px) !important;
    flex-direction: row !important; align-items: center !important;
    justify-content: space-around !important;
    padding: 0 0 env(safe-area-inset-bottom, 0px) !important;
    border-top: 1px solid var(--br-border) !important; border-right: none !important;
    z-index: 60 !important;
  }
}
@media (min-width: 900px) {
  .br-mnav { display: none !important; }
}

/* ── Admin center tiles (replaces .admin-menu-grid look) ────────── */
.br-admin-tiles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px;
}
.br-tile {
  background: var(--br-card); border: 1px solid var(--br-border); border-radius: 16px;
  padding: 20px; cursor: pointer; transition: border-color .2s, transform .2s;
}
.br-tile:hover { border-color: rgba(255, 90, 37, .4); transform: translateY(-3px); }
.br-tile-top { display: flex; justify-content: space-between; align-items: flex-start; }
.br-tile-ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.br-tile-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 15px; margin-top: 14px; color: var(--br-text); }
.br-tile-desc { font-size: 12px; color: var(--br-text-muted); margin-top: 3px; }
@media (max-width: 1024px) { .br-admin-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .br-admin-tiles { grid-template-columns: 1fr; } }

/* ── Staff table (design look) ──────────────────────────────────── */
.br-staff-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 6px 0 14px; flex-wrap: wrap;
}
.br-staff-head .ttl { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1.5px; color: var(--br-text-dim); text-transform: uppercase; }
.br-table { background: var(--br-card); border: 1px solid var(--br-border); border-radius: 16px; overflow: hidden; }
.br-trow {
  display: grid; grid-template-columns: minmax(220px, 2.6fr) minmax(190px, 2.2fr) 110px 40px; gap: 16px; align-items: center;
  padding: 15px 22px; border-top: 1px solid rgba(255, 255, 255, .05);
  cursor: pointer; transition: background .15s;
}
.br-trow:hover { background: rgba(255, 255, 255, .03); }
.br-thead {
  display: grid; grid-template-columns: minmax(220px, 2.6fr) minmax(190px, 2.2fr) 110px 40px; gap: 16px;
  padding: 13px 22px; background: rgba(255, 255, 255, .02);
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1px;
  color: var(--br-text-muted); text-transform: uppercase; border-top: none;
}
.br-trow .nick { display: flex; align-items: center; gap: 12px; min-width: 0; }
.br-trow .av { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 13px; color: #fff; flex-shrink: 0; }
.br-trow .nm { min-width: 0; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-trow .role { font-size: 13px; color: var(--br-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-trow .srv { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; }
.br-trow .pts { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: var(--br-text); }
.br-trow .st  { display: flex; justify-content: flex-end; }
.br-trow .st i { width: 8px; height: 8px; border-radius: 50%; display: block; }
@media (max-width: 640px) {
  .br-thead { display: none; }
  .br-trow { grid-template-columns: 1fr auto; grid-auto-rows: auto; row-gap: 4px; }
  .br-trow .role { grid-column: 1; font-size: 12px; }
  .br-trow .srv  { grid-column: 2; grid-row: 1; text-align: right; }
  .br-trow .pts  { grid-column: 2; grid-row: 2; text-align: right; }
  .br-trow .st   { display: none; }
}

/* Form fields (design look) — used by add-user, norms, etc. */
.br-flabel { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1.5px; color: var(--br-text-dim); text-transform: uppercase; margin-bottom: 8px; }
.br-finput {
  width: 100%; background: var(--br-card-2); border: 1px solid var(--br-border-2) !important;
  border-radius: 12px; padding: 12px 14px; color: var(--br-text);
  font-family: 'Manrope', sans-serif; font-size: 14px; outline: none; box-sizing: border-box;
}
.br-finput:focus { border-color: rgba(255, 90, 37, .45) !important; }
.br-fselect {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237d7a73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.br-fselect option { background: #16131a; color: var(--br-text); }

/* Back link + full-width action buttons (staff detail / sub-views) */
.br-back { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; color: var(--br-text-dim); cursor: pointer; font-family: 'Manrope', sans-serif; font-size: 13px; padding: 0; }
.br-back:hover { color: var(--br-text); }
.br-act {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 13px 15px; border-radius: 12px; cursor: pointer;
  font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 13px; border: 1px solid transparent;
}
.br-act i { width: 16px; text-align: center; }
.br-act.accent { background: rgba(255,90,37,.13); border-color: rgba(255,90,37,.28); color: var(--br-accent); }
.br-act.blue   { background: rgba(47,155,245,.12); border-color: rgba(47,155,245,.28); color: #2f9bf5; }
.br-act.red    { background: rgba(255,77,77,.10); border-color: rgba(255,77,77,.25); color: #ff6b6b; }
.br-act.warn   { background: rgba(255,204,0,.10); border-color: rgba(255,204,0,.25); color: #ffcc00; }
.br-act:hover { filter: brightness(1.12); }

/* Staff search field (design look) */
.search-wrapper { position: relative; margin: 0 0 12px; max-width: 460px; }
.search-wrapper i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--br-text-faint); font-size: 13px; }
.search-input {
  width: 100%; background: var(--br-card-2); border: 1px solid var(--br-border) !important;
  border-radius: 12px; padding: 10px 14px 10px 38px; color: var(--br-text);
  font-family: 'Manrope', sans-serif; font-size: 13px; outline: none;
}
.search-input:focus { border-color: rgba(255, 90, 37, .45) !important; }

/* Admin section headers / back buttons inherit the new palette */
#staff-section .section-title, #add-user-section .section-title,
#requests-section .section-title, #upload-norma-section .section-title { color: var(--br-text-dim); }

/* ── Stats KPI tiles ────────────────────────────────────────────── */
.br-kpi {
  background: var(--br-card); border: 1px solid var(--br-border); border-radius: 16px; padding: 20px;
}
.br-kpi .lab { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1px; color: var(--br-text-muted); text-transform: uppercase; }
.br-kpi .val { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 30px; letter-spacing: -1px; margin-top: 10px; }
.br-kpi .delta { font-size: 12px; margin-top: 5px; }
.br-kpi-click { cursor: pointer; transition: border-color .15s, transform .15s; }
.br-kpi-click:hover { border-color: rgba(255, 90, 37, .35); transform: translateY(-2px); }
.br-kpi-click.active { border-color: rgba(255, 90, 37, .5); box-shadow: inset 0 0 0 1px rgba(255, 90, 37, .22); }

/* ── АЦ → Состав: list + composition summary side panel ─────────── */
.br-staff-layout { display: flex; gap: 24px; align-items: flex-start; }
.br-staff-main { flex: 1; min-width: 0; }
.br-staff-aside { width: 300px; flex: 0 0 300px; position: sticky; top: 6px; }
@media (max-width: 1100px) {
  /* Stack the summary on top (visible on mobile/tablet) */
  .br-staff-layout { display: flex; flex-direction: column; }
  .br-staff-aside { width: 100%; flex: none; position: static; order: -1; margin-bottom: 16px; }
}

/* ── Staff list as a card grid (АЦ → Состав) ────────────────────── */
/* desktop.css forces #staff-list into a 2-col grid; neutralise it so our own
   grid (the direct child) can lay out the cards across the full width. */
#staff-list { display: block !important; grid-template-columns: none !important; max-width: none !important; }
.br-staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }

/* Успеваемость (perf-edit-container) — keep the legacy .grid-stats inside its
   card; minmax(0,1fr) + min-width:0 stop the wide «Баллы» number from
   overflowing into the next column. */
#perf-edit-container.grid-stats,
.br-card .grid-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin: 0 !important; gap: 10px !important;
}
#perf-edit-container .stat-item,
.br-card .grid-stats .stat-item { min-width: 0 !important; overflow: hidden !important; padding: 14px 6px !important; }
#perf-edit-container .stat-num,
.br-card .grid-stats .stat-num { font-size: 21px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
#perf-edit-container .stat-lab,
.br-card .grid-stats .stat-lab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* Square icon button (staff-detail header: edit / logs / refresh) */
.br-iconbtn {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--br-border);
  color: var(--br-text-dim); cursor: pointer; font-size: 15px; transition: color .15s, border-color .15s, background .15s;
}
.br-iconbtn:hover { color: var(--br-text); border-color: rgba(255, 90, 37, .35); }
.br-iconbtn.is-editing { background: rgba(255, 77, 77, .12); border-color: rgba(255, 77, 77, .3); color: #ff6b6b; }

/* Edit-mode buttons in the staff-detail header */
.edit-toggle-btn, .edit-save-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 12px; cursor: pointer;
  font-family: 'Sora', sans-serif; font-weight: 600; font-size: 13px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); color: var(--br-text-dim);
}
.edit-toggle-btn:hover { color: var(--br-text); border-color: rgba(255, 90, 37, .35); }
.edit-toggle-btn.is-editing { background: rgba(255, 77, 77, .1); border-color: rgba(255, 77, 77, .3); color: #ff6b6b; }
.edit-save-btn { display: none; background: var(--br-fire); border: none; color: #fff; box-shadow: 0 8px 24px rgba(224, 30, 15, .3); }
.edit-save-btn.visible { display: inline-flex; }
/* In edit mode, stack label over a full-width input/select */
.editable-line.edit-mode { flex-direction: column !important; align-items: stretch !important; gap: 7px; }
.editable-line.edit-mode .value { text-align: left !important; width: 100%; }
.editable-line.edit-mode .value input,
.editable-line.edit-mode .value select { width: 100%; box-sizing: border-box; }
.br-ucard {
  display: flex; align-items: center; gap: 12px;
  background: var(--br-card); border: 1px solid var(--br-border); border-radius: 14px;
  padding: 12px 14px; cursor: pointer; transition: border-color .15s, background .15s, transform .15s;
  min-width: 0;
}
.br-ucard:hover { border-color: rgba(255, 90, 37, .35); background: rgba(255, 255, 255, .04); transform: translateY(-2px); }
.br-ucard .av { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 14px; color: #fff; }
.br-ucard .meta { flex: 1; min-width: 0; }
.br-ucard .nm { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-ucard .rl { font-size: 12px; color: var(--br-text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-ucard .srv { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.br-ucard .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: block; }

/* ── Masonry (auto-balanced cards) — used by the staff-detail view ─ */
.br-masonry { column-count: 2; column-gap: 20px; }
.br-masonry > .br-card {
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  display: block; width: 100%; margin: 0 0 20px;
}
@media (max-width: 899px) { .br-masonry { column-count: 1; } }

/* ── Admin "manage user" overlay ────────────────────────────────── */
/* openManage moves this into .br-main, where it lives as an ABSOLUTE element
   confined to the content column — so it can never cover the sidebar. */
#user-manage-overlay {
  position: absolute !important; inset: 0 !important;
  left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
  width: auto !important; background: #0a0a0b !important;
}