@keyframes spin { to { transform: rotate(360deg); } }
//#c9a969
* {margin:0; padding:0; box-sizing:border-box;}
body{
	background:#fff;
	color:#222;

font-family: 'roboto', 'Mulish','Montserrat', sans-serif;
//font-family: "Inter";
//font-family: "Roboto";
//font-family: sans-serif;
//font-family: 'Montserrat', sans-serif;
font-weight: 200;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

//body22{min-width:0;color:#3c434a;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:13px;line-height:1.4}	
		
/* Верхнее меню */
.topbar {
  position: fixed;
  top:0; left:0; right:0;
  height:100px;
  background:#f5f5f5;
  border-bottom:1px solid #ddd;
  display:flex;
  align-items:center;
  padding:0 20px;
  z-index:1000;
}
.logo { font-size:24px; font-weight:bold; color:#333; }



/* Левое меню */
.sidebar {
  position: fixed;
  top:100px; left:0;
  width:220px;
  height:calc(100% - 100px);
  background:#fafafa;
  border-right:1px solid #ddd;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition: transform 0.3s ease;
}
.sidebar ul {list-style:none; padding:10px 0;}
.sidebar li a {
  display:block;
  color:#333;
  text-decoration:none;
}
.sidebar li a:hover {background:#eee;}
.sidebar.hidden {transform: translateX(-100%);}


.sidebar.collapsed {
  width: 60px;
}
.sidebar .menu-text {
  display: inline-block;
  transition: opacity 0.3s;
}
.sidebar.collapsed .menu-text {
  opacity: 0;
  visibility: hidden;
  width: 0;
}


/* Кнопка снизу 
#toggleSidebar {
  margin:10px;
  padding:10px;
  border-size:1px;
  border-color:#d1b57b;
  background:#fff;
  cursor:pointer;
//  font-size:14px;
//  border-radius:3px;
  color:#d1b57b;
}
#toggleSidebar:hover {
	background:#d1b57b;
	color:#f5e5c6;
}
 */
 
 #toggleSidebar {
  margin:0px;
  padding:5px;
  color:#ccc;
  }
 #toggleSidebar:hover {
//	background:#fff;
	color:#bbb;
}
 




/* Убрать плашку яндекс 
img {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: auto;
}
img:not([src]) {
  pointer-events: none;
}
*/

/* Контент */
main {
//  margin-top:100px;
//  margin-left:220px;
//  padding:20px;
//  transition: margin-left 0.3s ease;
}
main.full {margin-left:0;}

#page {
  margin-top:100px;
//  padding:20px;
//  transition: margin-left 0.3s ease;
}






/* Лоадер */
.loaderold {
  backdrop-filter: blur(5px);           /* Тот самый эффект размытия */
  display:none;
  margin:20px auto;
  border:6px solid #f3f3f3;
  //background-color: #ffc400;
  background-color: #fff;
  opacity:1;
  border-top:6px solid #ffc400;//333;
  border-radius:50%;
  width:70px;
  height:70px;
  animation: spin 1s linear infinite;
 }
 








@keyframes spin {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}



.search-bar {
  margin-left: 10px;
  display: flex;
  gap: 10px;
}
.search-bar input {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
}
.search-bar select {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
}
.user-controls {
  margin-left: auto;
}

//.auth-container {
//  display: flex;
//  justify-content: center;
//  align-items: center;
//  height: 80vh;
//  margin-left: 0px;
// transform: translate(0%, 20%)
// transform: translate(-50%, -50%);
//	display: flex;
//	justify-content: center;
//	align-items: center;
//	height: 100vh; /* ВСЯ высота окна! */
//	width: 100vw;  /* ВСЯ ширина окна! */
//	width: 100vw;  /* ВСЯ ширина окна! */
//  position: fixed;
//  top: 50%;
//  left: 50%;
//  transform: translate(-50%, -50%); /* Сдвигает обратно на половину размеров */
//  width: 90%;
//  max-width: 500px;
//  /* НЕ нужно display: flex и т.д. для позиционирования */	
//}
//.auth-container form {
//  background: #fff;
//  padding: 30px;
//  border: 1px solid #ddd;
//  border-radius: 8px;
//  width: 360px;
//  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
//}



//исправления ! hus

.auth-container {
    display: flex;
    justify-content: center; /* Центр по горизонтали */
    align-items: center;     /* Центр по вертикали */
    min-height: calc(100vh - 100px); /* Высота экрана минус шапка */
    margin-top: 100px;       /* Отступ, чтобы не залезло под topbar */
    padding: 20px;
    box-sizing: border-box;
}

/* Если форма всё равно слишком высокая для экрана, 
   align-items: center может обрезать верх. 
   На этот случай добавим небольшую страховку: */
@media (max-height: 700px) {
    .auth-container {
        align-items: flex-start; 
        padding-top: 50px;
    }
}

.auth-container form {
    background: #fff;
    padding: 30px;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 360px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    /* УБЕРИТЕ ОТСЮДА position: fixed или absolute, если они были */
}




.auth-container h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 40px;
    margin-bottom: 20px;
    font-size: 17px;
    text-align: left;
    position: relative;
    padding: 0 30px;
}
.auth-container h2::after {
    content: '';
    display: inline-block;
    width: 36px;
    height: 36px;
    background-image: url("/logo_icon/logoexpert_small.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    flex-shrink: 0;
}
.auth-container input, 
.auth-container button {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 6px;
}
.auth-container button {
  background: #333;
  color: #fff;
  cursor: pointer;
}
.auth-container button:hover {
  background: #555;
}

/* Sidebar collapsed behavior */
#sidebar{ transition: width .3s ease; }
#sidebar.collapsed{ width:60px; }
#sidebar.collapsed ul li a .label{ display:none; }
#sidebar.collapsed ul li a{ justify-content:center; }
#content{ transition: margin-left .3s ease; }
#sidebar + #content{ margin-left:250px; }
#sidebar_top + #content{ margin-left:250px; }
#sidebar.collapsed + #content{ margin-left:60px; }




/* --- Active menu style: slim dark bar --- */
//.btn ul li a{ position: relative; display:flex; align-items:center; gap:3px; }

#sidebar ul li a { position: relative; }  /* display и gap убраны — мешают xm- */

//#sidebar ul li a.active::before{
//  content:""; position:absolute; right:0; top:6px; bottom:6px; width:3px;
//  background: rgb(100%, 58%, 0%, 1); border-radius:2px;
//            display: flex;
//            align-items: center;
//            padding: 2px;
//            border-radius: 12px;
//            color: #fff;
//            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
//            background: #fff;
//			border-left: 4px solid #ff9800;
//}
//#sidebar.collapsed ul li a.active::before{ right:0; width:3px; }
//#sidebar ul li a.active{ z-index:1; }

/* --- Sidebar logo control --- */
#sidebar_top .logo{ height:80px; display:flex; align-items:center; justify-content:center; padding:8px 10px; position:relative; border-bottom:0px solid var(--topbar-border, #e8e8e8); }
#sidebar_top .logo img{ display:block; width:70%; height:auto; object-fit:contain; }
#sidebar_top .logo img.full{ opacity:1; transition:opacity .2s ease; }
#sidebar_top .logo img.mini{ position:absolute; opacity:0; width:100%; transition:opacity .2s ease; }
#sidebar_top.collapsed .logo img.full{ opacity:0; }
#sidebar_top.collapsed .logo img.mini{ opacity:1;}





/* --- Buttons --- */
.btn { padding:8px 12px;     border-radius: 50%;border:1px solid #ccc; background:#f7f7f7; cursor:pointer;    transition: all 0.3s ease;}
.btn:hover {
background:#eee;
border-color:#c9a969;
//transform: scale(1.25);
}
.btn-primary { border-color: var(--primary, #1f6feb); background: var(--primary, #1f6feb); color:#fff; }
.btn-secondary { background:#e9e9e9; }
.btn-light { background:#fff; }
.btn-ghost { background:transparent; border-color:transparent; }




/* --- Modal --- */
.modal { position: fixed; inset: 0; display:none; z-index: 2000; }
.modal.open { display:block; }
.modal-backdrop { position:absolute; inset:0; background: rgba(0,0,0,.45); }
.modal-dialog { position:relative; width:min(860px, 92vw); max-height: 86vh; margin: 7vh auto; background:#fff; border-radius:16px; box-shadow: 0 10px 30px rgba(0,0,0,.2); display:flex; flex-direction:column; overflow:hidden; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #eee; }
.modal-close { background:transparent; border:none; font-size:24px; cursor:pointer; line-height:1; }
.modal-body { padding: 16px 20px; overflow:auto; }
.modal-footer { display:flex; gap:8px; justify-content:flex-end; padding:16px 20px; border-top:1px solid #eee; }

/* grid for fields */
.modal .grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.modal label { display:flex; flex-direction:column; gap:6px; font-size:14px; color:#333; }
.modal input, .modal select { padding:8px 10px; border:1px solid #ccc; border-radius:8px; }

/* accessibility helper */
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }


/* --- Topbar logo sizing/swap based on sidebar state --- */
.topbar .logo{ width:250px; min-width:60px; position:relative; display:flex; align-items:center; justify-content:center; padding:8px 10px; }
.topbar .logo img{ display:block; width:100%; height:auto; object-fit:contain; }
.topbar .logo img.full{ opacity:1; transition:opacity .2s ease; }
.topbar .logo img.mini{ position:absolute; opacity:0; width:100%; transition:opacity .2s ease; }
body.sidebar-collapsed .topbar .logo{ width:60px; }
body.sidebar-collapsed .topbar .logo img.full{ opacity:0; }
body.sidebar-collapsed .topbar .logo img.mini{ opacity:1; }


/* === Theme variables === */
:root{
  --bg:#ffffff; --fg:#111111; --muted:#666; --border:#e5e5e5;
  --topbar-bg:#ffffff; --topbar-fg:#111; --sidebar-bg:#f7f7f7; --primary:#1f6feb;
}
body.theme-dark{
  --bg:#0f1115; --fg:#e5e7eb; --muted:#9aa1ac; --border:#252a35;
  --topbar-bg:#111418; --topbar-fg:#e5e7eb; --sidebar-bg:#0c0e12; --primary:#7aa2ff;
}
body{ background:var(--bg); color:var(--fg); }
.topbar{ background:var(--topbar-bg); color:var(--topbar-fg); border-bottom:1px solid var(--border); }
.sidebar{ background:var(--sidebar-bg); }
.btn{ color:var(--fg); }

.user-name{ margin-left:12px; font-weight:600; color:var(--fg);}
/* theme additions */

/* === THEME PALETTE === */
:root{
  --bg: #ffffff;
  --text: #111111;
  --muted: #6b7280;
  --border: #e5e7eb;
  --primary: #1f6feb;
  --surface: #f8fafc;
  --sidebar-bg: #ffffff;
  --topbar-bg: #ffffff;
}
body.theme-dark{
  --bg: #0b1020;
  --text: #e5e7eb;
  --muted: #9aa3b2;
  --border: #1f2937;
  --primary: #7aa2ff;
  --surface: #131a2e;
  --sidebar-bg: #0e1426;
  --topbar-bg: #0e1426;
}
body{ background: var(--bg); color: var(--text); }
.topbar{ background: var(--topbar-bg); border-bottom: 1px solid var(--border); }
.sidebar, #sidebar{ background: var(--sidebar-bg); border-right: 1px solid var(--border); }

//#sidebar ul li a{ color: var(--text); }
#sidebar ul li a:hover{ background: rgba(125,125,125,.08); }

.modal-dialog{ background: var(--bg); color: var(--text); }
.modal-header, .modal-footer{ border-color: var(--border); }
.btn{ border-color: var(--border); }
.btn-primary{ background: var(--primary); border-color: var(--primary); color:#fff; }
//.menu i{ color: var(--primary); }

.user-name{ margin-left:10px; font-weight:600; color: var(--text); }
.btn-ghost{ background: transparent; border-color: transparent; color: var(--text); }





/* === LOGO crossfade & smooth resize === */
.topbar .logo{
  position: relative;
  width: 240px; min-width: 60px; height: 44px;
  display:flex; align-items:center; justify-content:center;
  padding: 6px 8px; transition: width .25s ease;
}
.topbar .logo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  transition: opacity .25s ease, transform .25s ease; will-change: opacity, transform;
}
.topbar .logo .logo-full{ opacity:1; transform:scale(1); }
.topbar .logo .logo-mini{ opacity:0; transform:scale(0.98); }
body.sidebar-collapsed .topbar .logo{ width: 80px; }
body.sidebar-collapsed .topbar .logo .logo-full{ opacity:0; transform:scale(1.02); }
body.sidebar-collapsed .topbar .logo .logo-mini{ opacity:1; transform:scale(1); }





/* === Логотип — ссылка со скользящей тенью === */
/* Логотип-ссылка: наследует размеры от .logo, не ломает раскладку */

.logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    border-radius: 8px;
}

/* Реалистичный блик с паузой */
.logo-link::after {
    content: '';
    position: absolute;
    top: -20%;
    left: -120%;
    width: 60%;
    height: 140%;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255,255,255,0.08) 35%,
        rgba(255,255,255,0.35) 48%,
        rgba(255,255,255,0.55) 50%,
        rgba(255,255,255,0.35) 52%,
        rgba(255,255,255,0.08) 65%,
        transparent 80%
    );
    transform: skewX(-12deg);
    pointer-events: none;
    animation: logo-sheen 6s ease-in-out infinite;
}

@keyframes logo-sheen {
    0%   { left: -120%; opacity: 0; }
    2%   { opacity: 1; }
    18%  { left: 130%; opacity: 1; }
    20%  { opacity: 0; }
    100% { left: 130%; opacity: 0; }
}

.logo-link:hover::after {
    left: 130%;
    transition: left 0.6s ease;
}
/* Тень на логотип */
.logo-link img {
    transition: filter 0.3s ease;
    filter: drop-shadow(0 0 0 transparent);
}
.logo-link:hover img {
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
}







/* Переопределяем размеры картинок — они теперь внутри flex-ссылки */
#sidebar_top .logo .logo-link img { width: 80%; height: auto; object-fit: contain; }
.topbar .logo .logo-link img { width: 100%; height: auto; object-fit: contain; }

/* === THEME tokens === */
:root{
  --bg:#ffffff; --text:#111111; --muted:#6b7280; --border:#e5e7eb;
  --primary:#1f6feb; --surface:#f8fafc; --sidebar-bg:#ffffff; --topbar-bg:#ffffff;
}
body.theme-dark{
  --bg:#0b1020; --text:#e5e7eb; --muted:#9aa3b2; --border:#1f2937;
  --primary:#7aa2ff; --surface:#131a2e; --sidebar-bg:#0e1426; --topbar-bg:#0e1426;
}
body{ background:var(--bg); color:var(--text); }
.topbar{ background:var(--topbar-bg); border-bottom:1px solid var(--border); }
#sidebar{ background:var(--sidebar-bg); border-right:1px solid var(--border); }

/* === THEME BUTTON (iconic) === */
.theme-toggle {
  border:none; background:transparent; cursor:pointer; font-size:1.4rem;
  display:flex; align-items:center; justify-content:center;
  padding:6px; border-radius:50%;
  transition:background-color .3s ease, transform .3s ease, box-shadow .3s ease;
  color:var(--text);
}
.theme-toggle:hover { background-color:rgba(127,127,127,.1); transform:scale(1.1); box-shadow:0 0 8px rgba(100,100,255,.4); }
body.theme-dark .theme-toggle:hover { background-color:rgba(255,255,255,.1); box-shadow:0 0 8px rgba(255,255,255,.3); }
.theme-toggle:focus { outline:none; box-shadow:0 0 0 3px rgba(31,111,235,.4); }


/* Базовые размеры */
:root{
  --sb-w: 240px;   /* ширина раскрытого сайдбара */
  --sb-w-c: 60px;  /* ширина свёрнутого (иконки) */
}

/* Сайдбар: по умолчанию раскрыт */
#sidebar{
  width: var(--sb-w);
  transition: width .25s ease, transform .25s ease;
  will-change: width, transform;
  overflow: hidden;
}

/* Контент сдвинут на ширину сайдбара (если у вас не grid/flex-лейаут) */
.content{
  margin-left: var(--sb-w);
  transition: margin-left .25s ease;
}

/* СВЁРНУТОЕ состояние (десктоп): менюшка сужается до иконок */
#sidebar.collapsed{
  width: var(--sb-w-c);
}
body.sidebar-collapsed .content{
  margin-left: var(--sb-w-c);
}

/* Мобилки: вместо сужения уезжает за экран, поверх — затемнение */
@media (max-width: 991.98px){
  #sidebar{
    position: fixed; top: 0; bottom: 0; left: 0;
    transform: translateX(0);
    z-index: 1000;
  }
  #sidebar.collapsed{
    transform: translateX(-100%);
    width: var(--sb-w); /* чтобы при выезде обратно была норм ширина */
  }
  /* Бэкдроп (если используете) */
  .sidebar-backdrop{
    content: ""; position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
    z-index: 999;
  }
  body.sidebar-open .sidebar-backdrop{
    opacity: 1; pointer-events: auto;
  }
  /* На мобилках контент не двигаем, его прикрывает бэкдроп */
  .content{ margin-left: 0; }
}

/* Чтобы мини-логотип включался: мы уже вешаем на <body> мод-класс */
//body.sidebar-collapsed .topbar .logo{ width: 60px; }
//body.sidebar-collapsed .topbar .logo .logo-full{ opacity: 0; transform: scale(1.02); }
//body.sidebar-collapsed .topbar .logo .logo-mini{ opacity: 1; transform: scale(1); }









//изменено

/* ===== Sidebar Toggle Button ===== */
.sidebar-toggle {
  position: absolute;
  top: 1rem;
  right: -1.5rem;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: var(--bg-toggle, #fff);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  z-index: 1200;
}

.sidebar-toggle:hover {
  background: var(--hover-bg, #f0f0f0);
  transform: scale(1.05);
}

.sidebar-toggle .icon {
  position: relative;
  width: 18px;
  height: 2px;
  background: var(--toggle-color, #333);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.sidebar-toggle .icon::before,
.sidebar-toggle .icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--toggle-color, #333);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.sidebar-toggle .icon::before {
  top: -6px;
}

.sidebar-toggle .icon::after {
  top: 6px;
}

/* ===== Активное (открытое) состояние ===== */
.sidebar-collapsed .sidebar-toggle .icon {
  background: transparent;
}

.sidebar-collapsed .sidebar-toggle .icon::before {
  transform: rotate(45deg) translate(4px, 4px);
}

.sidebar-collapsed .sidebar-toggle .icon::after {
  transform: rotate(-45deg) translate(4px, -4px);
}

/* ===== Dark theme support ===== */
body.theme-dark .sidebar-toggle {
  background: #2a2a2a;
  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.05);
}

body.theme-dark .sidebar-toggle .icon,
body.theme-dark .sidebar-toggle .icon::before,
body.theme-dark .sidebar-toggle .icon::after {
  background: #ddd;
}

body.theme-dark .sidebar-toggle:hover {
  background: #3a3a3a;
}



/* Если на <body> есть класс страницы регистрации (рекомендуется добавить его через JS или PHP) */
body.auth-page #page, 
body.auth-page .content,
body.auth-page main {
    margin-left: 0 !important;
    width: 100% !important;
}

/* Если класса на body нет, просто форсируем центр для контейнера */
.auth-container {
    position: relative;
    left: 0;
    width: 100vw; /* Занимаем всю ширину вьюпорта */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 100px);
 //   margin-top: 100px;
    z-index: 5;
}
/* 1. Сбрасываем лишние вылеты за границы */
.auth-container * {
    box-sizing: border-box;
}

/* 2. Гарантируем, что форма не шире экрана */
.auth-container {
    overflow-x: hidden; /* Запрещаем горизонтальный скролл на уровне контейнера */
    max-width: 100%;
}

/* 3. Исправляем ширину инпутов */
.auth-container input, 
.auth-container button {
    width: 100%;      /* Теперь border-box сделает её честной */
    max-width: 100%;  /* На всякий случай */
    display: block;
}

/* 4. Проблема с чекбоксами (могут вытеснять текст) */
#userRegistrationBlock div {
    max-width: 100%;
}




/* ============ MOBILE ============ */
@media (max-width: 480px) {
  .auth-card {
    padding: 30px 20px;
  }
  .auth-title {
    font-size: 1.4rem;
  }
}