/* ===== Base theme variables ===== */
:root{
  --layout-side-w: clamp(300px, 32vw, 380px);
  /* ===== Calendar role colors ===== */
  --role-red:    #C62828;
  --role-orange: #E07A1F;
  --role-yellow: #D6A600;
  --role-violet: #6D3CEB;
  --role-green:  #1B9A50;
  --role-pink:   #DB2777;
  --role-blue:   #159BD3;

  /* mapping roles -> colors */
  --role-admin:    var(--role-green);
  --role-director: var(--role-red);
  --role-zavuch:   var(--role-violet);
  --role-teacher:  var(--role-blue);
  --role-zamvr:    var(--role-yellow);

  /* Layout */
  --bg0: #e4ecfd;
  --bg1: #eef6ff;

  /* Text */
  --text: #0b1a2b;
  --muted: rgba(11,26,43,.65);

  /* Panel */
  --panel: #ffffff;

  /* Accent */
  --primary: #0d4cd3;
  --primary-hover: #1d5deb;
  --scrolth: #777;
  --scrolth-hover: #999;

  /* ===== Primary tokens (АДЕКВАТНО, без лесенки 0.08/0.10/0.12) ===== */
  --primary-focus: rgba(13,76,211,.85);   /* focus outline */
  --primary-border: rgba(13,76,211,.60);  /* active border */
  --primary-soft: rgba(13,76,211,.18);    /* soft fill + focus ring */
  --primary-ring: rgba(13,76,211,.10);    /* inner ring (старый “инсет”) */

  /* добавили (для каркаса, без магии по файлам) */
  --primary-stroke: rgba(13,76,211,.90);  /* чёткая рамка (круглые кнопки/иконки) */
  --primary-glow: rgba(13,76,211,.28);    /* фоновые подсветки (radial glow) */

  /* ===== Danger tokens ===== */
  --danger: #810505;                 /* основная заливка */
  --danger-hover: #650101;           /* hover */
  --danger-focus: rgba(129,5,5,.85); /* focus outline */
  --danger-border: rgba(129,5,5,.60);/* active border */
  --danger-soft: rgba(129,5,5,.18);  /* soft fill + focus ring */
  --danger-ring: rgba(129,5,5,.10);  /* inner ring */
  --danger-text: #fff;               /* текст на danger */

  /* ===== Surfaces (единые подложки UI) ===== */
  --surface-1: rgba(255,255,255,.06);     /* обычная плашка */
  --surface-2: rgba(255,255,255,.18);     /* hover/усиление */
  --border-1: rgba(11,26,43,.14);         /* мягкая рамка */
  --overlay: rgba(0,0,0,.45);             /* backdrop для модалок/меню */

  /* ===== Shadows (единые тени UI) ===== */
  --shadow-panel: 0 18px 45px rgba(0,0,0,.20);  /* модалки/инфо-панели */
  --shadow-card:  0 18px 45px rgba(0,0,0,.35);  /* крупные карточки (календарь) */
  --shadow-sheet: 0 -22px 60px rgba(0,0,0,.55); /* bottom-sheet */

  /* ===== Tabs / surfaces (light defaults) ===== */
  --tab: var(--surface-1);
  --tab2: var(--surface-2);
  --tabBorder: var(--border-1);

  /* Controls */
  --field-bg: #f5f7fa;
  --field-border: transparent;
  --field-border-focus: #99b1e6;

  --placeholder: rgba(11,26,43,0.4);
  --placeholder-focus: rgba(11,26,43,0.1);

  /* Outline button */
  --outline: var(--primary);
  --outline-text: var(--primary);
  --outline-hover-bg: var(--primary-soft);

  /* ===== Radius scale (единая шкала) ===== */
  --r-6: 6px;
  --r-8: 8px;
  --r-10: 10px;
  --r-12: 12px;
  --r-14: 14px;
  --r-18: 18px;
  --r-pill: 999px;

  /* ===== Семантика радиусов ===== */
  --modal-radius: var(--r-12);
  --field-radius: 4px;
  --btn-radius: var(--r-8);

  --card-radius: var(--r-14);
  --tab-radius: var(--r-6);
  --sheet-radius: var(--r-18);
  --pill-radius: var(--r-pill);

  /* App layout */
  --shell: 1180px;

  /* Sizes */
  --control-h: 54px;

  /* ===== Scrollbar tokens ===== */
  --scrollbar-size: 10px;                 /* общий размер (тонкий) */
  --scrollbar-pad: 2px;                   /* “внутр. отступ” через border */
  --scrollbar-radius: var(--pill-radius);

  --scrollbar-track: transparent;
  --scrollbar-thumb: var(--scrolth);
  --scrollbar-thumb-hover: var(--scrolth-hover);
  --scrollbar-thumb-active: var(--overlay);
}

/* ===== Dark theme (навешиваем на body class="theme-dark") ===== */
body.theme-dark{
  --bg0:#071528;
  --bg1:#0b1a2b;

  --text:#e4ecfd;
  --muted: rgba(234,242,255,.65);

  --panel: rgba(255,255,255,.10);

  /* Surfaces in dark: чуть плотнее, чтобы было видно */
  --surface-1: rgba(255,255,255,.06);
  --surface-2: rgba(255,255,255,.20);
  --border-1: rgba(255,255,255,.12);
  --overlay: rgba(0,0,0,.45);

  --tab: var(--surface-1);
  --tab2: var(--surface-2);
  --tabBorder: var(--border-1);

  --field-bg: rgba(245,247,250,.20);
  --field-border: transparent;
  --field-border-focus: rgba(153,177,230,0.85);

  --placeholder: rgba(255,255,255,0.4);
  --placeholder-focus: rgba(255,255,255,0.1);

  --primary: #0d4cd3;
  --primary-hover: #1d5deb;

  /* primary tokens в dark можно оставить такими же */
  --primary-focus: rgba(13,76,211,.85);
  --primary-border: rgba(13,76,211,.60);
  --primary-soft: rgba(13,76,211,.22);  /* в dark чуть плотнее */
  --primary-ring: rgba(13,76,211,.10);

  /* добавили */
  --primary-stroke: rgba(13,76,211,.90);
  --primary-glow: rgba(13,76,211,.28);

  /* danger tokens (dark) */
  --danger: #810505;
  --danger-hover: #650101;
  --danger-focus: rgba(129,5,5,.85);
  --danger-border: rgba(129,5,5,.60);
  --danger-soft: rgba(129,5,5,.22);  /* в dark чуть плотнее */
  --danger-ring: rgba(129,5,5,.10);
  --danger-text: #fff;

  /* shadows */
  --shadow-panel: 0 18px 45px rgba(0,0,0,.20);
  --shadow-card:  0 18px 45px rgba(0,0,0,.35);
  --shadow-sheet: 0 -22px 60px rgba(0,0,0,.55);

  --outline: var(--primary);
  --outline-text: #fff;
  --outline-hover-bg: var(--primary-soft);

}

/* ===== Reset / base ===== */
*,
*::before,
*::after{
  box-sizing: border-box;
}

html, body{ height: 100%; }

body{
  margin: 0;
  color: var(--text);
  background: var(--bg1);

  font-family:"Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-optical-sizing: auto;

  overflow: hidden; /* <-- глобально как ты хочешь */
}

input, button, textarea, select{ font: inherit; color: inherit; }

#um_edit {
padding-right: 13px;
padding-bottom: 10vh;
}
/* ===== Shared controls ===== */
.field{
  width: 100%;
  height: var(--control-h);
  border-radius: var(--field-radius);
  border: 2px solid var(--field-border);
  background: var(--field-bg);
  color: var(--text);
  padding: 0 18px;
  font-size: 0.8rem;
  line-height: 18px;
  outline: none;
}

.field::placeholder{
  color: var(--placeholder);
  transition: color .15s ease;
}

.field:focus{ border-color: var(--field-border-focus); }
.field:focus::placeholder{ color: var(--placeholder-focus); }

.row{
  display: flex;
  gap: 16px;
  margin-top: 18px;
  margin-bottom: 14px;
}

.btn{
  flex: 1;
  height: var(--control-h);
  border-radius: var(--btn-radius);
  border: 0;
  background: var(--primary);
  color: #fff;
  font-size: 18px;
  font-weight: 400;
padding: 10px 16px;
  cursor: pointer;
  transition: transform .05s ease, background .15s ease;
}

.btn:hover{ background: var(--primary-hover); }
.btn:active{ transform: translateY(1px); }

.btn-outline{
  width: 100%;
  height: var(--control-h);
  border-radius: var(--btn-radius);
  border: 2px solid var(--outline);
  background: transparent;
  color: var(--outline-text);
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  transition: background .15s ease;
}

.btn-outline:hover{ background: var(--outline-hover-bg); }

/* ===== Danger button ===== */
#um_edit div.users-actions.users-actions--danger {position:relative;}
.btn-danger{
position:absolute;
  border: 2px solid #848484;
  background: #810505c2;
  color: #FFF;
  height: auto;
  max-width: 200px;
  font-weight: bold;
font-size: .8rem;
  padding: 4px;
  right: 0;
  display: block;
}

.btn-danger:hover{
  border: 1px solid #000;
  background: #650101c2;
}
.btn-danger:active{ transform: translateY(1px); }

/* ===== Универсальная карточка ===== */
.card{
  background: var(--panel);
  border: 1px solid var(--border-1);
  border-radius: var(--card-radius);
  padding: 14px;
}
body.theme-dark .card{
  background: var(--surface-1);
}

/* ===== Utility: скролл-область при overflow:hidden на body ===== */
.scroll-y{
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  scrollbar-gutter: stable; /* FIX для Firefox: резервируем место под скролл */
}

/* ====================================================================== */
/*  SCROLLBARS                                                            */
/* ====================================================================== */

/* Firefox (НЕ через *, а на реальных скролл-контейнерах) */
:where(html, .scroll-y){
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* WebKit (Chrome/Edge/Safari) */
*::-webkit-scrollbar{
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track{
  background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb{
  background: var(--scrollbar-thumb);
  border-radius: var(--scrollbar-radius);
  border: var(--scrollbar-pad) solid var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb:hover{
  background: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-thumb:active{
  background: var(--scrollbar-thumb-active);
}

*::-webkit-scrollbar-corner{
  background: transparent;
}

/* ===== Госуслуги ===== */
.btn-outline.gos{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.goslogosvg{ height: 22px; width: auto; display: block; flex: 0 0 auto; }
.goslogosvg svg{ height: 100%; width: auto; display: block; }

body.theme-dark select.field option{
 color: #222;
}