@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/* ================== ПЕРЕМЕННЫЕ (меняй под вкус) ================== */
:root{
  --sidebar-expanded: 270px;
  --sidebar-collapsed: 76px;

  /* отступы внутри основного контента */
  --content-pad-x: 16px;   /* слева/справа */
  --content-pad-top: 16px; /* сверху */
  --content-pad-bot: 24px; /* снизу */

  /* цвета */
  --sidebar-bg: #1a1a1a;
  --text-on-dark: #e0e0e0;
  --text-on-dark-hover: #ffffff;
  --nav-hover: rgba(255,255,255,.06);
  --nav-active: rgba(255,255,255,.10);
}

/* ================== БАЗА ================== */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #f5f7fa;
  font-family: 'Inter','Roboto','Helvetica Neue',Helvetica,Arial,sans-serif;
}

a, .btn-link { color:#0052cc; }
.btn-primary{ color:#fff; background:#0052cc; border-color:#0041a3; }
.btn:focus,.btn:active:focus,.btn-link.nav-link:focus,.form-control:focus,.form-check-input:focus{
  box-shadow:0 0 0 .1rem #fff, 0 0 0 .25rem #4d94ff;
}

.valid.modified:not([type=checkbox]){ outline:1px solid #28a745; }
.invalid{ outline:1px solid #dc3545; }
.validation-message{ color:#dc3545; }

/* ================== ОБЩИЙ КАРКАС ================== */
.page{
  display:flex;
  height:100vh;      /* весь экран */
  overflow:hidden;   /* скролл только у main */
}

/* ================== САЙДБАР ================== */
.sidebar{
  position:fixed; left:0; top:0; bottom:0;
  width:var(--sidebar-expanded);
  background:var(--sidebar-bg);
  display:flex; flex-direction:column;
  z-index:1001;
}

.side-header{
  display:flex; align-items:center; justify-content:space-between;
  height:56px; padding:.5rem .75rem; box-sizing:border-box;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.navbar-brand{
  font-weight:600; color:var(--text-on-dark);
  padding:.5rem; cursor:pointer; display:inline-block;
}
.navbar-brand:hover{ color:var(--text-on-dark-hover); }

.navbar-toggler{ border:none; display:none; }
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(224,224,224,0.85)' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* область прокрутки меню */
.sidebar .nav-scrollable{ flex:1 1 auto; height:calc(100% - 56px); overflow-y:auto; }
.nav-scrollable nav{ display:flex; flex-direction:column; min-height:100%; }

.nav-item{ padding:.125rem .5rem; }
.nav-item + .nav-item{ margin-top:.125rem; }

/* пункт меню */
.nav-link{
  display:flex; align-items:center; gap:.75rem;
  padding:.5rem .625rem; min-height:42px;
  color:var(--text-on-dark); border-radius:8px; font-weight:500;
}
.nav-link:hover{ color:var(--text-on-dark-hover); background:var(--nav-hover); }
.nav-link.active{ color:var(--text-on-dark-hover); background:var(--nav-active); }

/* иконка: фиксированная колонка — и всё ровно */
.nav-link i.fa-fw{
  flex:0 0 24px; width:24px; height:24px; line-height:24px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.2rem; margin-right:0;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* подписи */
.nav-link span{ font-size:1.05rem; line-height:1.5; }

/* панель пользователя снизу */
.user-panel{ margin-top:auto; }
.user-panel .nav-link{ padding:.5rem .625rem; }
.user-name{ max-width:140px; }

/* свёрнутое состояние */
.sidebar.collapsed{ width:var(--sidebar-collapsed); }
.sidebar.collapsed .nav-link{ justify-content:center; padding:.5rem 0; }
.sidebar.collapsed .nav-link span{ display:none; }
.sidebar.collapsed .user-panel .logout-text,
.sidebar.collapsed .user-panel .user-name span{ display:none; }
.sidebar.collapsed #ToggleNavMenuTextMainLink{ display:none; }
.sidebar.collapsed #ToggleNavMenuHamburger{ display:block; }
.sidebar.active   #ToggleNavMenuTextMainLink{ display:inline-block; }
.sidebar.active   #ToggleNavMenuHamburger{ display:none; }

/* ================== ОСНОВНОЙ КОНТЕНТ ================== */
.main-content{
  flex:1 1 auto; min-width:0; height:100%;
  overflow-y:auto; display:flex; flex-direction:column;

  /* симметричные внутренние отступы */
  padding: var(--content-pad-top) var(--content-pad-x) var(--content-pad-bot);
}

/* смещение под ширину сайдбара (не путать с паддингами!) */
.sidebar.active   ~ .main-content{ margin-left:var(--sidebar-expanded); }
.sidebar.collapsed~ .main-content{ margin-left:var(--sidebar-collapsed); }

/* ================== УВЕДОМЛЕНИЯ ================== */
.notifications-container{
  position:fixed; top:0; right:0; pointer-events:none; z-index:2147483647;
}
.summary-popup{
  pointer-events:auto; background:#fff; border:1px solid #ccc; border-radius:6px;
  padding:1rem; width:300px; box-shadow:0 2px 6px rgba(0,0,0,.2); font-size:.9rem;
}
.summary-popup .popup-header{ cursor:move; }
.summary-popup h4{ margin-top:0; font-size:18px; color:#333; }
.summary-popup p{ word-wrap:break-word; white-space:normal; max-width:100%; }
.summary-popup .error{ color:#dc3545; }

/* сетка внутри всплывашки */
.custom-popup-content{
  display:grid; grid-template-columns:1fr auto; gap:12px; align-items:start; margin:0;
}
.custom-popup-content .popup-text{ font-size:13px; line-height:1.4; color:#333; }
.custom-popup-content .popup-image{
  width:160px; height:120px; background:#f0f0f0; border:1px solid #ccc; border-radius:4px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.custom-popup-content .popup-img{ width:100%; height:100%; object-fit:cover; display:block; }
.custom-popup-content .popup-noimg{ font-style:italic; color:#777; text-align:center; padding:0 4px; }
@media (max-width:400px){
  .custom-popup-content{ grid-template-columns:1fr; }
  .custom-popup-content .popup-image{ width:100%; margin-top:8px; }
}

/* ================== КНОПКИ/УТИЛИТЫ ================== */
.btn-action{
  display:flex; align-items:center; gap:.25rem;
  font-weight:500; padding:.375rem .75rem;
  border:none; border-radius:.25rem;
  transition: background-color .08s ease-in, box-shadow .08s ease-in, transform .08s ease-in;
}
.btn-action .oi{ font-size:.9em; }
.btn-add{ background:#0d6efd; color:#fff; }
.btn-edit{ background:#ffc107; color:#212529; }
.btn-delete{ background:#dc3545; color:#fff; }
.btn-action:not(:disabled):hover,
.btn-action:not(:disabled):focus{ transform:translateY(-1px); box-shadow:0 .25rem .5rem rgba(0,0,0,.2); }
.btn-add:not(:disabled):hover,.btn-add:not(:disabled):focus{ background:#0b5ed7; }
.btn-edit:not(:disabled):hover,.btn-edit:not(:disabled):focus{ background:#ffcd39; }
.btn-delete:not(:disabled):hover,.btn-delete:not(:disabled):focus{ background:#c82333; }
.btn-action:disabled,.btn-action.disabled{ opacity:.45; cursor:not-allowed; box-shadow:none!important; transform:none!important; }

.action-buttons{ display:inline-flex; flex-wrap:wrap; gap:.25rem; }
.btn-remove-picked{ line-height:1; padding:.25rem .5rem; margin-left:auto; }
.progress{ width:180px; height:8px; background:#e9ecef; }
.progress .progress-bar{ background:#0d6efd; }

body{ overflow-x:hidden; }

/* ================== ОШИБКИ BLAZOR ================== */
#blazor-error-ui{
  position:fixed; left:0; bottom:0; z-index:1000;
  display:none; width:100%; padding:.6rem 1.25rem .7rem 1.25rem;
  background:#fff3cd; box-shadow:0 -1px 2px rgba(0,0,0,.1);
}
#blazor-error-ui .dismiss{ position:absolute; top:.5rem; right:.75rem; cursor:pointer; }
.blazor-error-boundary{
  background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA5NC4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMzNyAyNjcuODc5IDY3LjIxODIgMjY2LjQ4IDY2LjAxODMgMjYzLjU4NiA2Ni4wMTgzWk0yNjMuNTc2IDg2LjA1NDdDMjYxLjA0OSA4Ni4wNTQ3IDI1OS43ODYgODcuMzAwNSAyNTkuNzg2IDg5Ljc5MjEgMjU5Ljc4NiA5Mi4yODM3IDI2MS4wNDkgOTMuNTI5NSAyNjMuNTc2IDkzLjUyOTUgMjY2LjExNiA5My41Mjk1IDI2Ny4zODcgOTIuMjgzNyAyNjcuMzg3IDg5Ljc5MjEgMjY3LjM4NyA4Ny4zMDA1IDI2Ni4xMTYgODYuMDU0NyAyNjMuNTc2IDg2LjA1NDdaIiBmaWxsPSIjRkZFNDc3Ii8+PC9nPjwvc3Zn>") no-repeat 1rem/1.8rem, #b32121;
  padding:1rem 1rem 1rem 3.7rem; color:#fff;
}
.blazor-error-boundary::after{ content:"An error has occurred."; }

/* ================== МОБИЛЬНЫЕ ================== */
@media (max-width: 767.98px){
  /* сайдбар поверх контента */
  .sidebar{
    width:var(--sidebar-expanded);
    transform:translateX(-100%);
    transition:transform .3s ease, width .3s ease;
  }
  .sidebar.active{ transform:translateX(0); }
  .sidebar.collapsed{ width:var(--sidebar-collapsed); transform:translateX(0); }

  /* контент на всю ширину */
  .sidebar.active ~ .main-content,
  .sidebar.collapsed ~ .main-content{ margin-left:0; }
}

.sidebar.collapsed .side-header {
    display: grid;
    place-items: center;
    padding: 12px 0;
    gap: 0;
}

/* ── user-panel: в свёрнутом сайдбаре не подсвечиваем контейнер ── */
.sidebar-shell.collapsed .user-panel .nav-link:hover,
.sidebar-shell.collapsed .user-panel .nav-link:focus,
.sidebar-shell.collapsed .user-panel .nav-link:focus-within {
    background: transparent !important;
}

/* курсор обычный у контейнера, чтобы не казалось, что это кнопка */
.sidebar-shell.collapsed .user-panel .nav-link {
    cursor: default;
}

/* при этом у самой кнопки выхода ховер остаётся квадратом 48x48 */
.sidebar-shell.collapsed .logout-btn:hover,
.sidebar-shell.collapsed .logout-btn:focus-visible {
    background: var(--side-hover);
}