/* ===== Dark Neon Admin Theme (Desktop only) ============================= */
:root{
  --bg:#0b1020; --bg-alt:#0f172a; --card:#121a33; --text:#e5e7eb; --muted:#94a3b8;
  --brand:#22d3ee; --brand-2:#38bdf8; --ok:#10b981; --danger:#ef4444;
  --ring:0 0 0 3px rgba(34,211,238,.2);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:16px;
  --grad:linear-gradient(135deg,var(--brand-2),var(--brand));

  --backdrop-alpha: .85;

  /* compact controls */
  --btn-font:13px; --btn-pad-y:6px; --btn-pad-x:12px; --btn-radius:10px;
  --field-pad-y:10px; --field-pad-x:12px; --field-radius:12px;
  --th-pad:10px 12px; --td-pad:10px 12px;

  /* layout */
  --side-w: 248px;       /* ширина левого меню */
  --rail-w: 320px;       /* правая рейка */
  --topbar-h: 28px;      /* высота header-bar */

  /* scrollbar */
  --scrollbar-size: 12px;
  --scrollbar-radius: 999px;
  --scrollbar-border: 3px;
  --scrollbar-border-hover: 1px;
  --scrollbar-track-solid: rgba(148,163,184,.14);
  --scrollbar-thumb-solid: #38bdf8;
  --scrollbar-thumb-grad: linear-gradient(180deg,var(--brand-2,#38bdf8),var(--brand,#22d3ee));
  --scrollbar-thumb-hover: linear-gradient(180deg,var(--brand,#22d3ee),#4f46e5);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%; overflow-x:hidden}
html{
  font-size:14px;
}
body{
  min-height:100vh; margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-size:.95rem;
  line-height:1.45;
  color:var(--text); background-color:var(--bg);
  background-image:
    radial-gradient(1200px 600px at 50% -200px, rgba(56,189,248,.10), transparent 60%),
    radial-gradient(800px 500px at 85% 10%, rgba(34,211,238,.08), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, #0b1226 35%, var(--bg-alt) 100%);
  background-repeat:no-repeat; background-attachment:fixed; background-size:cover;
}

html{
  scrollbar-width:thin;
  scrollbar-color:var(--scrollbar-thumb-solid) transparent;
}

body,
.modal,
.modal__body,
.modal-body,
.history,
.suggest{
  scrollbar-width:thin;
  scrollbar-color:var(--scrollbar-thumb-solid) transparent;
}

*::-webkit-scrollbar{
  width:var(--scrollbar-size);
  height:var(--scrollbar-size);
}

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

*::-webkit-scrollbar-thumb{
  border-radius:var(--scrollbar-radius);
  background:var(--scrollbar-thumb-grad);
  border:var(--scrollbar-border) solid transparent;
  background-clip:content-box;
  transition:border .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:0 0 0 1px rgba(15,23,42,0.12) inset;
}

*::-webkit-scrollbar-thumb:hover{
  background:var(--scrollbar-thumb-hover);
  border:var(--scrollbar-border-hover) solid transparent;
  box-shadow:0 0 0 1px rgba(15,23,42,0.18) inset;
}

*::-webkit-scrollbar-thumb:active{
  background:var(--brand);
  border:var(--scrollbar-border-hover) solid transparent;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.container{margin-inline:auto; padding:24px}

/* ===== Left sidenav (fixed) ============================================ */
.sidenav{
  position:fixed; inset:0 auto 0 0; z-index:80;
  width:var(--side-w);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border-right:1px solid rgba(255,255,255,.08);
  padding:14px 10px;
  display:grid;
  grid-template-rows:auto 1fr auto;
  height:100svh;          /* фиксируем на высоту вьюпорта */
  overflow:hidden;        /* внешний скролл не нужен */
}

/* центральная зона получает скролл */
.sn-scroll{
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;

  /* скрыть во всех движках */
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/старый Edge */
}
/* тонкая отделяющая линия сверху у «низа» (по желанию) */
.sn-footer{ border-top:1px solid rgba(255,255,255,.08); margin-top:8px; padding-top:8px }

/* БЫЛО: .side-nav … — надо заменить на .sidenav … */
.sidenav form,
.sn-form{
  display:block;
  margin:0;
}
.sidenav form .sn-link,
.sn-form .sn-link{
  width:100%;
}
/* ховер по форме подсвечивает кнопку логаута */
.sidenav form:hover .sn-link,
.sn-form:hover .sn-link{
  background:rgba(255,255,255,.06);
}
.sidenav .brand-mini{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px;
}
.sidenav .brand-mini .logo{ width:34px; height:34px; border-radius:10px; background:var(--grad); box-shadow:var(--shadow) }
.sidenav .brand-mini .title{ font-weight:800; letter-spacing:.2px; color:var(--text) }

.sn-section{ margin-top:6px }
.sn-title{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(229,231,235,.7); padding:8px 10px; opacity:.85;
}
.sn-list{ list-style:none; margin:0; padding:4px 6px; display:grid; gap:4px }
.sn-link{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:10px;
  color:var(--text); font-weight:600; text-decoration:none;

  /* reset для <button> */
  background:transparent; border:0; font:inherit;
  cursor:pointer; text-align:left; width:100%;
}
.side-nav form,
.sn-form{               /* оставил второй класс на всякий случай */
  display:block;
  margin:0;
}

/* кнопка занимает всю строку как и ссылки меню */
.side-nav form .sn-link,
.sn-form .sn-link{
  width:100%;
}

/* если навели мышь на форму, подсветить кнопку */
.side-nav form:hover .sn-link,
.sn-form:hover .sn-link{
  background: rgba(255,255,255,.06);
}

/* чтобы не было подчёркивания */
.sn-link,
.sn-link:hover,
.sn-link:focus,
.sn-link:focus-visible{
  text-decoration:none;
}
.sn-link:hover{
  background:rgba(255,255,255,.06);
}
.sn-link.is-active{
  background:rgba(0,200,255,.12);
  box-shadow:inset 0 0 0 1px rgba(0,200,255,.28);
}
.sn-link:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(34,211,238,.25);
}
.sn-link[disabled]{ opacity:.6; cursor:not-allowed; }
.sn-ico{
  width:20px; height:20px; flex:0 0 20px;
  color:#bfe9ff; opacity:.95; display:inline-block;
}
.sn-link.is-active .sn-ico{ color:var(--brand) }
.sn-link:hover .sn-ico{ opacity:1 }

/* Отступ контентной области от левого меню */
body:has(.sidenav) .header-bar,
body:has(.sidenav) .header-bar-company,
body:has(.sidenav) main.container.section,
body:has(.sidenav) footer{
  margin-left: var(--side-w);
}

/* ===== Header bar (topbar) ============================================= */
.header-bar{
  position:sticky; top:0; z-index:800;
  min-height:var(--topbar-h);
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  padding:4px 24px;
  background:rgba(11,16,32,.7); backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
  overflow:visible;
}

.header-bar .menu-wrap {
    margin-left: auto;
}

.brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none }
.logo{ width:40px; height:40px; border-radius:12px; background:var(--grad); box-shadow:var(--shadow) }
.brand-title{ font-weight:800; letter-spacing:.2px; font-size:16px; color:var(--text) }

.header-bar-company{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  padding:0 24px 16px;
  margin:0;
}

.company-panel{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  width:100%;
}

.header-company{
  flex:1 1 320px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:8px 12px;
  border-radius:12px;
  border:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.company-info {
    display: flex;
    align-items: center;
    gap: 8px;         /* расстояние между названием и бейджем */
}
/* при необходимости можно управлять отступом бейджа отдельно */
.company-info .badge {
    margin-left: 8px;
}
.company-current__name{
  font-weight:600;
  font-size:1.05rem;
}
.company-current__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.company-current__meta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  font-size:.78rem;
  color:var(--muted);
}
.company-contact{
  gap:12px 18px;
  font-size:.82rem;
  color:var(--muted);
}
.company-contact__item{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.company-contact__item svg{
  width:14px;
  height:14px;
  opacity:.85;
}
.company-contact__link{
  color:var(--text);
  text-decoration:none;
  transition:color .2s ease;
}
.company-contact__link:hover,
.company-contact__link:focus-visible{
  color:var(--brand);
  outline:none;
  text-decoration:underline;
}
.company-contact__link.is-disabled,
.company-contact__link[aria-disabled="true"]{
  color:var(--muted);
  pointer-events:none;
  cursor:default;
  text-decoration:none;
}
.company-current__meta .badge{ margin:0; }
.company-search{
  position:relative;
  max-width:360px;
}
.company-search input{
  width:100%;
  background:rgba(15,23,42,.7);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
  padding:var(--field-pad-y) var(--field-pad-x);
  border-radius:var(--field-radius);
  font-size:.85rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.company-search input:focus{
  outline:none;
  border-color:rgba(56,189,248,.6);
  box-shadow:0 0 0 2px rgba(56,189,248,.18);
}
.company-suggestions{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  background:var(--card);
  border:1px solid rgba(148,163,184,.22);
  border-radius:14px;
  box-shadow:0 20px 40px rgba(2,6,23,.45);
  max-height:280px;
  overflow-y:auto;
  padding:4px;
  z-index:220;
}
.company-suggestions[hidden]{ display:none; }
.company-suggestion{
  width:100%;
  background:transparent;
  border:0;
  color:inherit;
  padding:10px 12px;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  gap:4px;
  cursor:pointer;
  font:inherit;
  text-align:left;
}
.company-suggestion:hover,
.company-suggestion:focus-visible{
  background:rgba(56,189,248,.12);
  outline:none;
}
.company-suggestion__name{ font-weight:600; font-size:.95rem; }
.company-suggestion__meta{
  font-size:.75rem;
  color:var(--muted);
  display:flex;
  gap:10px;
  align-items:center;
}
.header-company.is-loading .company-search input{ cursor:progress; }


/* burger скрыт на desktop */
.nav-toggle{ position:absolute; opacity:0; pointer-events:none }
.nav-burger{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
  position:relative;
  z-index:150;
}
.nav-burger:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); }
.nav-burger span{
  position:relative;
  width:22px; height:2px;
  background:var(--text);
  border-radius:999px;
  transition:background .24s ease;
}
.nav-burger span::before,
.nav-burger span::after{
  content:"";
  position:absolute;
  left:0;
  width:22px; height:2px;
  background:var(--text);
  border-radius:999px;
  transition:transform .24s ease, opacity .24s ease;
}
.nav-burger span::before{ top:-6px; }
.nav-burger span::after{ top:6px; }
#nav-toggle:checked + .nav-burger span{ background:transparent; }
#nav-toggle:checked + .nav-burger span::before{ transform:translateY(6px) rotate(45deg); }
#nav-toggle:checked + .nav-burger span::after{ transform:translateY(-6px) rotate(-45deg); }

/* Menu (в шапке) */
.menu-wrap{ display:block }
.site-menu{ display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0 }
.menu-item{ position:relative }
.site-menu .menu-link{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:10px; color:var(--text); font-weight:700; letter-spacing:.1px;
}
.site-menu .menu-link:hover{ background:rgba(255,255,255,.06); text-decoration:none }
.site-menu .menu-link.is-active{ background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08) }

/* Dropdown (submenu) */
.site-menu .menu-item.has-sub > .menu-link::after{ content:"▾"; font-size:11px; opacity:.7; transform:translateY(1px) }
.submenu{
  position:absolute; left:0; top:100%; display:grid; gap:4px;
  width:max-content; min-width:200px; max-width:360px; padding:8px;
  background:rgba(15,23,42,.95); backdrop-filter:blur(6px) saturate(140%);
  border:1px solid rgba(255,255,255,.08); border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.5);
  opacity:0; transform:translateY(6px); pointer-events:none; transition:opacity .14s ease, transform .14s ease; z-index:70; white-space:nowrap;
}
.submenu::before{ content:""; position:absolute; left:0; right:0; top:-8px; height:8px }
.site-menu .menu-item.align-right .submenu{ right:0; left:auto }
.submenu li{ list-style:none; margin:0; padding:0 }
.submenu li a, .submenu-btn{
  display:block; width:100%; text-align:left; padding:9px 12px; border-radius:8px;
  color:var(--text); background:transparent; border:0; font:inherit; font-weight:600; cursor:pointer; text-decoration:none; line-height:1.25;
}
.submenu li a:hover, .submenu-btn:hover{ background:rgba(255,255,255,.06) }
.site-menu .menu-item.has-sub:hover > .submenu,
.site-menu .menu-item.has-sub:focus-within > .submenu,
.site-menu .menu-item.has-sub > .submenu:hover{ opacity:1; transform:translateY(0); pointer-events:auto }

/* ===== Content area ===================================================== */
main.container.section{
  display:flex; flex-direction:column; min-height:calc(100vh - var(--topbar-h)); overflow:visible;
  padding-top:20px; /* небольшой зазор под липкой шапкой */
}

/* Макет main + правая рейка, включается автоматически, если есть .rail */
main.container.section:has(.rail){
  display:grid; grid-template-columns: 1fr var(--rail-w); gap:16px; align-items:start;
}

/* Правая колонка */
.rail{
  position:sticky; top: calc(var(--topbar-h) + 12px);
  height:max-content;
  display:grid; gap:12px;
}
.rail .panel{ padding:12px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.03); box-shadow:var(--shadow) }

/* ===== Buttons ========================================================== */
.btn{
  border:0; cursor:pointer; padding:var(--btn-pad-y) var(--btn-pad-x);
  border-radius:var(--btn-radius); font-weight:700; font-size:var(--btn-font); line-height:1;
  display:inline-flex; align-items:center; justify-content:center; -webkit-appearance:none; appearance:none;
}
.btn-primary{background:var(--grad); color:#001018; box-shadow:var(--shadow)}
.btn-outline{background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.16)}
.btn-danger{background:linear-gradient(135deg,#f87171,#ef4444); color:#140606; box-shadow:var(--shadow)}
.btn-warning{background:linear-gradient(135deg,#fbbf24,#f59e0b); color:#1f1300; box-shadow:var(--shadow)}
.btn-sm{--btn-font:12px; --btn-pad-y:4px; --btn-pad-x:10px; --btn-radius:9px}
.btn-xs{--btn-font:11px; --btn-pad-y:3px; --btn-pad-x:8px; --btn-radius:8px}
.btn:hover:not(:disabled):not([aria-disabled="true"]){ filter:brightness(1.03) }
.btn:is(:disabled,[aria-disabled="true"]){ 
  pointer-events:none;
  cursor:not-allowed;
  filter:saturate(92%) brightness(.96);
}

/* ===== Sections / Cards ================================================= */
.section{padding:8px 24px 32px}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); box-shadow:var(--shadow);
}
.card-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.08);
  border-top-left-radius:var(--radius); border-top-right-radius:var(--radius);
}
.card-body{padding:0;}
.card-body-spaced{ padding:12px 14px 0 }
.card-body-tight{ padding:12px 16px 0 }
.card-body-padded{ padding:16px 16px 0 }
.card-body-spaced > :last-child,
.card-body-padded > :last-child{ margin-bottom:0; padding-bottom:0 }

/* ===== Zeitstrahl (Profile timeline) =================================== */
.timeline-card{
  margin-top:0;
  margin-bottom:28px;
  position:relative;
}
.timeline-card--tooltip-active{
  z-index:400;
}
.timeline-card .zeitstrahl-tooltip-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:500;
}
.timeline-card--tooltip-active .zeitstrahl-tooltip-layer{
  pointer-events:auto;
}
.timeline-card--calendar-open{
  z-index:300;
}
.timeline-card--calendar-open.timeline-card--tooltip-active{
  z-index:400;
}
.timeline-card--calendar-open .zeitstrahl-calendar{
  z-index:320;
}
.timeline-card .timeline-head{flex-wrap:wrap; gap:10px 16px}
.timeline-meta{
  display:flex;
  align-items:center;
  gap:12px;
}
.timeline-calendar-wrapper{
  position:relative;
  display:flex;
  align-items:center;
}
.timeline-calendar-btn{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(56,189,248,.35);
  background:rgba(11,27,45,.8);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:var(--brand);
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
  padding:0;
}
.timeline-calendar-btn svg{
  width:18px;
  height:18px;
}
.timeline-calendar-btn:hover{
  background:rgba(56,189,248,.18);
  border-color:rgba(125,211,252,.6);
  transform:translateY(-1px);
}
.timeline-calendar-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(56,189,248,.35);
}
.timeline-date-input{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  width:220px;
  height:32px;
  opacity:0;
  pointer-events:none;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
}
.zeitstrahl-calendar{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  width:268px;
  border-radius:12px;
  border:1px solid rgba(56,189,248,.35);
  background:rgba(8,14,28,.95);
  box-shadow:0 18px 40px rgba(6,12,26,.55);
  backdrop-filter:blur(14px);
  padding:14px;
  z-index:150;
  display:grid;
  gap:12px;
}
.zeitstrahl-calendar[hidden]{
  display:none !important;
}
.zeitstrahl-calendar__header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:600;
  font-size:.95rem;
  color:var(--text);
}
.zeitstrahl-calendar__nav{
  display:flex;
  gap:6px;
}
.zeitstrahl-calendar__nav button{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  border:1px solid rgba(56,189,248,.3);
  background:rgba(15,25,46,.85);
  color:var(--text);
  cursor:pointer;
  padding:0;
  transition:background .18s ease, border-color .18s ease;
}
.zeitstrahl-calendar__nav button:hover{
  background:rgba(56,189,248,.25);
  border-color:rgba(125,211,252,.55);
}
.zeitstrahl-calendar__grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:6px;
  font-size:.82rem;
}
.zeitstrahl-calendar__weekday{
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(229,231,235,.6);
  font-size:.7rem;
}
.zeitstrahl-calendar__day{
  width:100%;
  aspect-ratio:1 / 1;
  border-radius:8px;
  border:1px solid transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:var(--text);
  background:transparent;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.zeitstrahl-calendar__day:hover{
  background:rgba(56,189,248,.18);
  border-color:rgba(125,211,252,.45);
}
.zeitstrahl-calendar__day.is-outside{
  color:rgba(148,163,184,.4);
}
.zeitstrahl-calendar__day.is-today{
  border-color:rgba(56,189,248,.55);
}
.zeitstrahl-calendar__day.is-selected{
  background:linear-gradient(135deg,rgba(56,189,248,.88),rgba(14,165,233,.88));
  color:#02111f;
  border-color:transparent;
  box-shadow:0 8px 18px rgba(14,165,233,.45);
}
.zeitstrahl-calendar__day.is-disabled{
  opacity:.35;
  cursor:not-allowed;
  pointer-events:none;
}
.zeitstrahl-calendar__footer{
  display:flex;
  justify-content:space-between;
  font-size:.75rem;
}
.zeitstrahl-calendar__footer button{
  border:0;
  background:transparent;
  color:var(--brand);
  cursor:pointer;
  padding:0;
}
.timeline-meta__text{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.timeline-day{
  margin:0;
  font-size:1.1rem;
  font-weight:700;
  text-transform:capitalize;
  color:var(--text);
}
.timeline-date-label{
  font-size:.9rem;
  color:var(--muted);
}
.timeline-card .timeline-controls{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end;
}
.timeline-body{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-bottom:12px;
  margin-top:12px;
}
.zeitstrahl-grid{
  position:relative;
  min-height:128px;
  max-height:240px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(12,18,36,.65);
  overflow:visible;
  --zeitstrahl-offset:40px;
}
.zeitstrahl-hours{
  position:absolute;
  top:20px;
  bottom:2px;
  left:var(--zeitstrahl-offset);
  right:var(--zeitstrahl-offset);
  pointer-events:none;
}
.zeitstrahl-hour{
  position:absolute;
  font-size:12px;
  color:var(--muted);
  transform:translateX(-50%);
  left:calc(var(--zeitstrahl-pos, 0) * 1%);
}
.zeitstrahl-hour::before{
  content:'';
  position:absolute;
  top:4px;
  bottom:-98px;
  left:50%;
  transform:translateX(-50%);
  width:1px;
  background:rgba(255,255,255,.08);
}
.zeitstrahl-hour:first-child::before{
  background:rgba(255,255,255,.16);
}
.zeitstrahl-hour.is-first{
  transform:translateX(0);
}
.zeitstrahl-hour.is-first span,
.zeitstrahl-hour.is-last span {
  left:50%;
  transform:translateX(-50%);
}
.zeitstrahl-hour.is-last{
  transform:translateX(-100%);
}
.zeitstrahl-hour span{
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);
}
.zeitstrahl-events{
  position:absolute;
  top:28px;
  bottom:12px;
  left:var(--zeitstrahl-offset);
  right:var(--zeitstrahl-offset);
  overflow-y:auto;
  overflow-x:hidden;
  border-radius:12px;
  scrollbar-gutter:stable both-edges;
}
.timeline-card--selecting .zeitstrahl-events{
  cursor:crosshair;
}
.zeitstrahl-events-inner{
  position:relative;
  min-height:100%;
  padding:6px 0;
}
.zeitstrahl-selection{
  position:absolute;
  top:0;
  bottom:0;
  border:1px dashed rgba(56,189,248,.6);
  background:rgba(56,189,248,.18);
  border-radius:10px;
  pointer-events:none;
  z-index:250;
}
.zeitstrahl-event{
  position:absolute;
  height:20px;
  border-radius:7px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 4px;
  color:#02111f;
  box-shadow:0 8px 16px rgba(2,12,26,.28);
  cursor:pointer;
  overflow:visible;
  border:1px solid transparent;
}
body.zeitstrahl-dragging{
  user-select:none;
}
body.zeitstrahl-dragging .zeitstrahl-event,
.zeitstrahl-event.is-dragging{
  cursor:grabbing;
}
.zeitstrahl-event.is-dragging{
  opacity:0.9;
}
.zeitstrahl-event.is-saving{
  opacity:0.6;
  pointer-events:none;
}
.zeitstrahl-event--termin{
  background:linear-gradient(90deg,rgba(34,197,94,.95),rgba(16,185,129,.9));
  border-color:rgba(16,185,129,.7);
  color:#02110f;
}
.zeitstrahl-event--leistung{
  background:linear-gradient(90deg,rgba(14,165,233,.95),rgba(59,130,246,.95));
  border-color:rgba(37,99,235,.7);
  color:#041225;
}
.zeitstrahl-event--vormerkung{
  background:linear-gradient(90deg,rgba(249,115,22,.92),rgba(217,70,239,.9));
  border-color:rgba(249,115,22,.65);
  color:#140308;
}
.zeitstrahl-event--privater_termin{
  background:linear-gradient(90deg,rgba(192,132,252,.92),rgba(124,58,237,.9));
  border-color:rgba(124,58,237,.6);
  color:#120a1f;
}
.zeitstrahl-event__ico{
  width:16px;
  height:16px;
  color:currentColor;
}
.zeitstrahl-tooltip{
  position:absolute;
  min-width:240px;
  max-width:320px;
  background:rgba(9,14,32,.97);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  padding:14px 16px;
  color:var(--text);
  box-shadow:0 12px 28px rgba(2,10,24,.45);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:auto;
  will-change:top,left,transform,opacity;
  --tooltip-arrow-left: 50%;
}
.zeitstrahl-tooltip::after{
  content:'';
  position:absolute;
  top:100%;
  left:var(--tooltip-arrow-left, 50%);
  transform:translateX(-50%);
  border-width:8px;
  border-style:solid;
  border-color:rgba(9,14,32,.97) transparent transparent transparent;
}
.zeitstrahl-tooltip.is-below::after{
  top:auto;
  bottom:100%;
  border-color:transparent transparent rgba(9,14,32,.97) transparent;
}
.zeitstrahl-tooltip.is-visible{
  opacity:1;
  transform:translateY(0);
}
.zeitstrahl-tooltip h3{
  margin:0 0 6px;
  font-size:14px;
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.zeitstrahl-tooltip dl{
  margin:0;
  display:grid;
  grid-template-columns:max-content 1fr;
  gap:6px 12px;
  font-size:13px;
}
.zeitstrahl-tooltip dt{
  color:var(--muted);
  font-weight:600;
}
.zeitstrahl-tooltip dd{
  margin:0;
  color:var(--text);
}
.zeitstrahl-now{
  position:absolute;
  top:22px;
  bottom:26px;
  width:2px;
  border-radius:2px;
  background:var(--brand);
  box-shadow:0 0 0 2px rgba(34,211,238,.25);
  left:calc(var(--zeitstrahl-offset) + (100% - (var(--zeitstrahl-offset) * 2)) * (var(--zeitstrahl-now, 0) / 100));
}
.zeitstrahl-now::before{
  content:'';
  position:absolute;
  top:-6px;
  left:50%;
  transform:translateX(-50%);
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 12px rgba(34,211,238,.6);
}
.zeitstrahl-empty{
  display:none;
  text-align:center;
  font-size:13px;
}
.timeline-card .zeitstrahl-empty.is-visible{
  display:block;
}
.zeitstrahl-shift{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:30px;
  height:60px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(11,17,32,.65);
  color:var(--text);
  font-size:22px;
  display:flex;
  z-index:150;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
  backdrop-filter:blur(6px);
  padding:0;
}
.zeitstrahl-shift span{
  line-height:1;
  transform:translateY(-1px);
}
.zeitstrahl-shift--left{left:6px;}
.zeitstrahl-shift--right{right:6px;}
.zeitstrahl-shift:hover{background:rgba(56,189,248,.22); border-color:rgba(56,189,248,.4);}
.zeitstrahl-shift:disabled{
  opacity:.35;
  cursor:not-allowed;
  background:rgba(11,17,32,.45);
  border-color:rgba(255,255,255,.08);
}

/* ===== Typography helpers ============================================== */
.h1{font-size:clamp(24px,3.2vw,32px); margin:0 0 6px; line-height:1.2}
.subtle{color:var(--muted); font-size:14px; margin:0 0 12px}
.section-title{font-size:18px; margin:0 0 6px; font-weight:700}
.section-subtitle{margin:0 0 12px; color:var(--muted); font-size:14px}
.section-block{display:flex; flex-direction:column; gap:14px}
.section-block + .section-block{margin-top:16px}
.section-divider{height:1px; background:rgba(255,255,255,.08); margin:16px 0 0; border:0}
.mb-12{margin-bottom:12px}
.m-0{margin:0}
.mt-16{margin-top:16px}
.text-sm{font-size:.9rem}
.text-muted{color:var(--muted)}
.text-center{text-align:center}
.py-16{padding:16px 0}
.py-18{padding:18px 0}
.overflow-auto{overflow:auto}
.is-hidden{display:none !important}

/* ===== Tables =========================================================== */
.table{width:100%; border-collapse:separate; border-spacing:0}
.table thead th{
  text-align:left; font-weight:700; padding:var(--th-pad); font-size:14px;
  color:#cfe7ff; background:rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.10); position:sticky; top:0; z-index:1;
}
.table tbody td{
  padding:var(--td-pad); border-bottom:1px solid rgba(255,255,255,.06);
  vertical-align:top; font-size:14px; color:var(--text);
}
.table tbody tr:hover td{background:rgba(255,255,255,.03)}
.table-responsive{ width:100%; overflow:auto }
.table-responsive .table{ min-width:640px }
.workers-table td.actions{
  text-align:right;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
}
.workers-table td.actions .action-form{ margin:0; display:flex }
.workers-table td.actions .btn{ white-space:nowrap }
.workers-table .col-email{ word-break:break-all }
.table-responsive::-webkit-scrollbar{ height:10px }
.table-responsive::-webkit-scrollbar-track{ background:transparent }
.table-responsive::-webkit-scrollbar-thumb{
  background:rgba(56,189,248,.45);
  border-radius:999px;
}
.table-responsive::-webkit-scrollbar-thumb:hover{ background:rgba(56,189,248,.75) }
@media (max-width:760px){
  .workers-table .col-email{ display:none }
}
.text-right{text-align:right}
.nowrap{white-space:nowrap}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; font-size:12px}

/* ===== Badges =========================================================== */
.badge{
  display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px;
  font-size:12px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03); color:var(--muted);
}
.badge-role{border-color:rgba(56,189,248,.25); color:#bfe9ff; background:rgba(34,211,238,.08)}
.dot{
  display:inline-block;
  width:12px; height:12px;
  border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,.06) inset;
  background:rgba(148,163,184,.5);
  transition:background .2s ease;
}
.dot.on{ background:var(--ok,#10b981); }
.dot.off{ background:var(--danger,#ef4444); }
.badge-ok{border-color:rgba(16,185,129,.25); color:#c6f6e8; background:rgba(16,185,129,.14)}
.badge-no{border-color:rgba(239,68,68,.25); color:#ffd4d4; background:rgba(239,68,68,.14)}

/* ===== Forms (unified) ================================================== */
.form{max-width:100%}
.form-grid{ display:grid; gap:14px; grid-template-columns:1fr 1fr }
.form-row.col-span-2{ grid-column:1 / -1; }
.form-grid > :is(h1,h2,h3,h4,h5,h6){ grid-column:1 / -1; margin-top:6px }
.form-grid.one-column{ grid-template-columns:1fr }
.cta{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.form-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:12px; align-items:center}
.form-field{position:relative}
.field-control{position:relative; display:flex; align-items:center; gap:8px}
.submit-hint{display:none; margin-top:6px; margin-right:auto}
.submit-hint.is-visible{display:block}

/* единые label/inputs */
:where(label){ display:block; font-size:13px; color:var(--muted); margin-bottom:8px }
:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select, textarea){
  width:100%; padding:var(--field-pad-y) var(--field-pad-x);
  border-radius:var(--field-radius); border:1px solid rgba(255,255,255,.16);
  background:#0a1126; color:var(--text);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  -webkit-appearance:none; appearance:none; font:inherit; line-height:1.2;
}
:where(input::placeholder, textarea::placeholder){ color:#8aa0be; opacity:.85 }
:where(input:focus, select:focus, textarea:focus){ outline:none; box-shadow:var(--ring); border-color:var(--brand); background:#0b142c }
select{ background-image:none; padding-right:var(--field-pad-x) }
input[type="checkbox"], input[type="radio"]{ width:18px; height:18px; margin:0; accent-color:var(--brand) }
input[type="file"]{ padding:8px 10px; border-radius:var(--field-radius); border:1px solid rgba(255,255,255,.16); background:#0a1126; color:var(--text) }
:where(input:disabled, select:disabled, textarea:disabled){ opacity:.7; cursor:not-allowed }
:where(input[readonly], textarea[readonly]){ opacity:.9 }
:where(.has-error) :where(input,select,textarea),
:where(input.is-error, select.is-error, textarea.is-error){ border-color:rgba(239,68,68,.8); box-shadow:0 0 0 3px rgba(239,68,68,.20) }
:where(.is-valid) :where(input,select,textarea),
:where(input.is-valid, select.is-valid, textarea.is-valid){ border-color:var(--ok); box-shadow:0 0 0 3px rgba(16,185,129,.25) }

/* Tooltip-ошибки */
.with-tip{ position:relative }
.with-tip[data-tip]::after{
  content:attr(data-tip); position:absolute; left:0; top:100%; margin-top:8px;
  max-width:420px; width:max-content; padding:12px 14px; border-radius:12px;
  background:#111827; border:1px solid #ef4444; color:#fff;
  font-size:13px; line-height:1.4; box-shadow:0 10px 30px rgba(0,0,0,.45);
  opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity .15s ease, transform .15s ease; z-index:40; white-space:normal;
}
.with-tip[data-tip]::before{
  content:""; position:absolute; left:14px; top:100%;
  width:0; height:0; border:7px solid transparent; border-top-color:#ef4444;
  transform:translateY(1px); opacity:0; transition:opacity .15s ease;
}
.with-tip[data-tip]:hover::after, .with-tip[data-tip]:hover::before{ opacity:1; transform:translateY(0) }
.with-tip.info[data-tip]::after{ background:#0f172a; border-color:#22d3ee; color:#e6fbff }
.with-tip.info[data-tip]::before{ border-top-color:#22d3ee }

/* Password helper (optional) */
.pw-field .field-control{ position:relative }
.pw-tooltip{
  position:absolute; left:0; top:calc(100% + 8px);
  background:#111827; border:1px solid rgba(34,211,238,.35); color:#fff;
  border-radius:12px; padding:12px 14px; width:360px; max-width:min(420px,92vw);
  box-shadow:0 10px 30px rgba(0,0,0,.45); opacity:0; transform:translateY(-4px);
  pointer-events:none; transition:opacity .15s ease, transform .15s ease; z-index:50;
}
.pw-field .field-control:focus-within .pw-tooltip{ opacity:1; transform:translateY(0); pointer-events:auto }

/* Roles as chips */
.roles-row{ grid-column:1 / -1 }
.roles-wrap{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) }
.role-chip{
  position:relative; display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
  border-radius:999px; padding:8px 12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  transition:transform .06s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.role-chip:hover{ background:rgba(255,255,255,.06) }
.role-input{ appearance:none; position:absolute; inset:0; opacity:0; pointer-events:none }
.role-chip__label{ font-size:13px; color:var(--text); opacity:.9; letter-spacing:.1px }
.role-input:checked + .role-chip__label{ background:var(--grad); color:#001018; border-radius:999px; padding:4px 10px }
.role-input:disabled + .role-chip__label{ opacity:.45; filter:grayscale(.1) }

/* ===== Chat layout (как было) =========================================== */
.chat-app{ display:grid; grid-template-columns:320px 1fr; gap:16px; flex:1 1 auto; min-height:0; overflow:hidden }
.sidebar{
  border:1px solid rgba(255,255,255,.08); border-radius:14px; overflow:visible; position:relative;
  display:flex; flex-direction:column; background:rgba(14,18,32,.6)
}
.sidebar .head{ padding:12px 12px; border-bottom:1px solid rgba(255,255,255,.08); display:flex; gap:8px; align-items:center }
.sidebar .search{ width:100%; padding:8px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:#fff }
.list{ flex:1; min-height:0; overflow:auto }
.item{ display:flex; gap:10px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.06); cursor:pointer; text-decoration:none; color:inherit }
.item:hover{ background:rgba(255,255,255,.04) }
.item.active{ background:rgba(0,200,255,.08); border-left:3px solid rgba(0,200,255,.8); padding-left:9px }
.item .avatar{ width:36px; height:36px; border-radius:999px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; font-weight:700 }
.item .avatar.online{ box-shadow:0 0 0 2px rgba(16,185,129,.85), inset 0 0 0 1px rgba(255,255,255,.10) }
.item .avatar.offline{ box-shadow:0 0 0 2px rgba(239,68,68,.85), inset 0 0 0 1px rgba(255,255,255,.10) }
.item .meta{ flex:1; min-width:0 } .item .top{ display:flex; justify-content:space-between; gap:8px }
.item .name{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.item .time{ opacity:.7; font-size:.8rem } .item .last{ opacity:.8; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.item .actions{ display:flex; align-items:center; gap:6px; position:relative }
.kebab{ width:28px; height:28px; border-radius:6px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:#fff; cursor:pointer; line-height:0 }
.kebab:hover{ background:rgba(255,255,255,.08) }
.item .menu{ position:absolute; right:0; top:32px; z-index:1000; background:rgba(14,18,32,.98); border:1px solid rgba(255,255,255,.12); border-radius:10px; min-width:160px; box-shadow:0 10px 26px rgba(0,0,0,.35); display:none }
.item .menu.open{ display:block } .menu .mi{ display:block; width:100%; text-align:left; padding:8px 10px; background:transparent; border:0; color:#fff; cursor:pointer }
.menu .mi:hover{ background:rgba(255,255,255,.06) } .menu .danger{ color:#ff6b6b }

.main{ border:1px solid rgba(255,255,255,.08); border-radius:14px; display:flex; flex-direction:column; overflow:hidden; background:rgba(14,18,32,.6) }
.main .head{ padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:space-between; gap:10px }
.title{ display:flex; align-items:center; gap:10px; min-width:0 }
.title .name{ font-size:1.05rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.title .sub{ font-size:.85rem; opacity:.75 }
.members{ display:flex; flex-wrap:wrap; gap:6px }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.14); font-size:.78rem }
.badge .x{ cursor:pointer; opacity:.8 } .badge .x:hover{ opacity:1 }

.messages{
  flex:1; overflow:auto; padding:14px; display:flex; flex-direction:column; gap:10px;
  background: radial-gradient(1000px 400px at 20% 0%, rgba(255,255,255,.03), transparent 60%) no-repeat, rgba(20,26,44,.5);
  scrollbar-gutter:stable both-edges; scrollbar-width:thin; scrollbar-color:rgba(56,189,248,.65) transparent;
}
.messages::-webkit-scrollbar{ width:10px }
.messages::-webkit-scrollbar-track{ background:transparent }
.messages::-webkit-scrollbar-thumb{ background:rgba(56,189,248,.55); border-radius:999px; border:3px solid transparent; background-clip:content-box; min-height:44px }
.messages::-webkit-scrollbar-thumb:hover{ background:rgba(56,189,248,.85) }

.msg{ max-width:72%; align-self:flex-start; padding:0; border:0; background:transparent; border-radius:0 }
.msg.mine{ align-self:flex-end; background:transparent; border-color:transparent }
.msg .meta{ font-size:.78rem; opacity:.8; margin-bottom:4px; display:flex; gap:8px; flex-wrap:wrap }
.msg .content{ white-space:pre-wrap; word-break:break-word; font-size:.95rem }
.empty{ opacity:.7; text-align:center; margin-top:20% }

.composer{ flex:0 0 auto; padding:12px; border-top:1px solid rgba(255,255,255,.08); display:grid; grid-template-columns:1fr auto; gap:10px }
.composer textarea{
  grid-column:1 / span 2; min-height:68px; resize:vertical; padding:10px 12px;
  border-radius:12px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:#fff;
}

/* ===== Generic dropdown & modal (как было) ============================== */
.dropdown{
  background:rgba(14,18,32,.98); border:1px solid rgba(255,255,255,.12);
  border-radius:10px; box-shadow:0 10px 26px rgba(0,0,0,.35); max-height:380px; overflow:auto;
}
.dropdown .row{ display:flex; flex-direction:column; gap:4px; padding:8px 10px; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.06) }
.dropdown .row:last-child{ border-bottom:0 } .dropdown .row:hover{ background:rgba(255,255,255,.05) }
.row .line1{ display:flex; align-items:center; gap:8px } .row .name{ font-weight:600 } .row .email{ opacity:.85 }
.roles{ display:inline-flex; gap:6px; flex-wrap:wrap; margin-top:2px } .role{ font-size:.72rem; padding:2px 6px; border-radius:999px; border:1px solid rgba(255,255,255,.18) }

.cmodal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:1000}
.cmodal[aria-hidden="false"]{display:flex}
.cmodal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; transition:opacity .15s}
.cmodal[aria-hidden="false"] .cmodal__backdrop{opacity:1}
.cmodal__dialog{
  position:relative; max-width:420px; width:calc(100% - 32px);
  background:#111827; color:#e5e7eb; border:1px solid #374151; border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.35); transform:translateY(12px) scale(.98); opacity:.9; transition:all .18s;
}
.cmodal[aria-hidden="false"] .cmodal__dialog{ transform:translateY(0) scale(1); opacity:1 }
.cmodal__header{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #1f2937}
.cmodal__title{font-weight:600; font-size:16px}
.cmodal__x{border:0; background:transparent; color:#9ca3af; font-size:20px; line-height:1; cursor:pointer; padding:4px}
.cmodal__x:hover{color:#e5e7eb}
.cmodal__content{padding:16px}
.cmodal__actions{display:flex; gap:8px; justify-content:flex-end; padding:0 16px 16px}

/* ===== Compact add-on & Chat Card (оставил без изменений) =============== */
/* … (если нужны — оставь свои версии или этот блок выше из прежнего файла) */

/* ===== Footer =========================================================== */
footer{padding:30px 24px; border-top:1px solid rgba(255,255,255,.08); color:var(--muted); background:rgba(11,16,32,.7)}
.foot{display:grid; grid-template-columns:2fr 1fr 1fr; gap:20px}
.small{font-size:13px; color:var(--muted)}

/* === Login / Auth — вернуть иконки в полях, плотные ряды, аккуратный футер === */
.auth-card .field-control{ position:relative; }

/* Иконка поверх инпута слева */
.auth-card .field-control .icon{
  position:absolute; left:12px; top:50%;
  transform: translateY(-50%);
  width:18px; height:18px;
  opacity:.8; color:#9cc7ff; pointer-events:none;
}

/* Отступ под иконку */
.auth-card .field-control input,
.auth-card .field-control .form-control{
  padding-left:40px !important; /* важен, чтобы не перебился общими правилами */
}

/* Ряды/отступы вокруг элементов формы авторизации */
.auth-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.auth-submit{ width:100%; margin-top:8px; }

/* «Чистый» низ карточки: без фонов и рамок */
.auth-card footer,
.auth-card .auth-row,
.auth-card .auth-foot{
  background: transparent;
  border: 0;
}

/* чекбокс «запомнить меня» — кликабельная строка */
.auth-check{
  display:inline-flex; align-items:center; gap:8px;
  user-select:none; cursor:pointer;
}

/* Для единообразия цветов подписей/лейблов в auth */
.auth-card label{ font-size:14px; color:var(--muted); }

/* Чтобы сама auth-карточка выглядела как раньше (если нужно чуть больше акцента) */
.auth-page{
  display:grid;
  place-items:center;
  min-height:calc(100vh - 120px);
}
.auth-card{
  width:100%;
  max-width:520px;
  margin:0 auto;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.auth-card header,
.auth-card .auth-foot{
  border-top:0; border-bottom:1px solid rgba(255,255,255,.08);
}
.auth-card .auth-foot{ border-bottom:0; }

/* Мелочь: кнопка входа не превращается в «полосу» на всю ширину ряда */
.auth-card .auth-submit .btn,
.auth-submit .btn{
  display:inline-flex;
}

/* ——— Roles: compact look ——— */
.roles-row.compact .roles-toolbar{
  display:flex; gap:12px; align-items:center; margin:6px 0 10px;
}
.roles-row .role-group{
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);
  border-radius:14px; padding:8px 10px; margin-bottom:10px;
}
.roles-row .role-group summary{
  display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none;
}
.roles-row .role-group summary::-webkit-details-marker{ display:none; }
.roles-row .role-group .spacer{ flex:1; }

.roles-row .roles-wrap{
  display:grid; gap:8px;
  grid-template-columns:repeat(auto-fill, minmax(180px,1fr));
  padding-top:8px;
}

.roles-row .role-chip{
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  font-size:.9rem; line-height:1;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.roles-row .role-chip:hover{ transform:translateY(-1px); }

.roles-row .role-input{ position:absolute; opacity:0; width:1px; height:1px; }
.roles-row .role-chip:has(.role-input:checked){
  border-color: var(--brand, #38bdf8);
  box-shadow: 0 0 0 1px rgba(56,189,248,.35) inset;
}
.roles-row .role-input:checked + .role-chip__label{ font-weight:600; }

.roles-row .badge{
  font-size:.75rem; opacity:.85;
  padding:2px 6px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
}

.roles-row .mini{
  font-size:.75rem; padding:4px 8px; border-radius:999px;
  background:transparent; color:inherit;
  border:1px solid rgba(255,255,255,.12);
}
.roles-row .mini.subtle{ opacity:.7 }

/* ===== Ticket Show (scoped) ============================================= */
.compact-scope .card.compact .card-head{ padding:10px 14px }
.compact-scope .card.compact .card-body{ padding:0 }

.compact-scope .kicker{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(229,231,235,.75);
}

.compact-scope .meta{
  display:flex; flex-wrap:wrap; gap:6px 8px; margin-top:6px;
}

/* Chips (тоньше, чем badge) */
.compact-scope .chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 8px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  color:var(--muted); font-size:12px; line-height:1.2;
  white-space:nowrap;
}
.compact-scope .chip.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace }

/* Alias для .badge ok/no (в шаблоне используются .badge ok|no) */
.compact-scope .badge.ok{
  border-color: rgba(16,185,129,.25);
  color:#c6f6e8;
  background: rgba(16,185,129,.14);
}
.compact-scope .badge.no{
  border-color: rgba(239,68,68,.25);
  color:#ffd4d4;
  background: rgba(239,68,68,.14);
}

/* Горизонтальная линия */
.compact-scope .hr{
  height:1px; margin:14px 0;
  background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:0;
}

/* ===== Info grid ======================================================== */
.compact-scope .grid-3{
  display:grid; gap:12px 16px;
  grid-template-columns: repeat(3, 1fr);
  align-items:start;
}

.compact-scope .field{ min-width:0 }
.compact-scope .field .label{
  font-size:12px; letter-spacing:.02em; color:var(--muted);
  margin-bottom:6px;
}
.compact-scope .field .value{
  font-size:14px; color:var(--text);
  word-break:break-word; overflow-wrap:anywhere;
}
.compact-scope .discreet{ color:var(--muted); opacity:.8 }

/* ===== Messages card ==================================================== */
#messages-card.card.compact .card-body{ padding:10px 12px }

#messages-card .messages{
  min-height:180px; max-height:420px; overflow:auto;
  padding:10px; display:flex; flex-direction:column; gap:10px;
  background:
    radial-gradient(900px 360px at 15% 0%, rgba(255,255,255,.03), transparent 60%) no-repeat,
    rgba(14,18,32,.5);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  scrollbar-gutter:stable both-edges; scrollbar-width:thin; scrollbar-color:rgba(56,189,248,.65) transparent;
}
#messages-card .messages::-webkit-scrollbar{ width:10px }
#messages-card .messages::-webkit-scrollbar-track{ background:transparent }
#messages-card .messages::-webkit-scrollbar-thumb{
  background:rgba(56,189,248,.55); border-radius:999px; border:3px solid transparent; background-clip:content-box; min-height:44px
}
#messages-card .messages::-webkit-scrollbar-thumb:hover{ background:rgba(56,189,248,.85) }

#messages-card .messages-empty{
  text-align:center; opacity:.75; padding:20px 10px; font-size:.95rem;
  color:var(--muted);
}

/* Сообщения: компактный «чатовый» стиль */
#messages-card .msg{
  max-width:88%;
  align-self:flex-start;
  padding:0; border:0; background:transparent;
}
#messages-card .msg.mine{ align-self:flex-end }
#messages-card .msg.unread{
  position:relative;
}
#messages-card .msg.unread::before{
  content:""; position:absolute; left:-8px; top:0; bottom:0; width:3px;
  border-radius:2px; background:var(--brand);
  box-shadow:0 0 0 1px rgba(56,189,248,.35);
}

#messages-card .msg .meta{
  font-size:.78rem; opacity:.85; margin-bottom:4px; display:flex; gap:8px; flex-wrap:wrap;
}
#messages-card .msg .meta .badge{ padding:2px 6px; font-size:.72rem }

#messages-card .msg .content{
  white-space:pre-wrap; word-break:break-word; font-size:.95rem; line-height:1.35;
  color:var(--text);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:10px 12px;
}
#messages-card .msg.mine .content{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border-color:rgba(255,255,255,.12);
}

/* Форма отправки сообщений */
#messages-card form textarea{
  width:100%;
  min-height:84px; resize:vertical;
  padding:10px 12px; border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:#0a1126; color:var(--text);
}
#messages-card form textarea:focus{ outline:none; box-shadow:var(--ring); border-color:var(--brand); background:#0b142c }

/* ===== Minor utilities ================================================== */
.mt-6{ margin-top:6px }
.mt-12{ margin-top:12px }

/* ==== Полоска только в первой ячейке (#) ==== */
.tickets-compact td.col-num{ position: relative; }
.tickets-compact tr.sla--overdue td.col-num::before,
.tickets-compact tr.sla--soon    td.col-num::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px; border-radius:2px;
  vertical-align: middle;
}

/* Колонка # — центр и одинаковая высота со строкой */
.tickets-compact th.col-num,
.tickets-compact td.col-num{
  text-align: center;
}

.tickets-compact td.col-num{
  vertical-align: middle !important;
  padding: 12px 12px 12px 16px;
  position: relative;
}

@keyframes blinkBar { 0%,100%{ opacity:.2; } 50%{ opacity:1; } }
.tickets-compact tr.sla--overdue td.col-num::before{ background:#ff3b30; animation:blinkBar 1.2s linear infinite; }
.tickets-compact tr.sla--soon    td.col-num::before{ background:#ff9f0a; animation:blinkBar 1.8s linear infinite; }

• существующие стили таблицы */
.tickets-compact td, .tickets-compact th { vertical-align: top; }
.tickets-compact .col-num { width: 110px; white-space: nowrap; }
.tickets-compact td.details .line { line-height: 1.2; margin: 0 0 2px; }
.tickets-compact td.details .line:last-child { margin-bottom: 0; }
.tickets-compact td.details .subject a { font-weight: 600; text-decoration: none; }
.tickets-compact td.details .company { color: var(--muted, #777); }
.tickets-compact td.details .status .badge { display: inline-block; }
.tickets-compact td.assignee { white-space: nowrap; }
.tickets-compact td.desc { max-width: 520px; overflow: hidden; text-overflow: ellipsis; overflow-wrap: anywhere; }

/* ===== Верхняя сводка ===== */
.kv-board{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-bottom:14px; margin-top:14px }
.kv-col{ border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.02); overflow:hidden }
.kv-row{ display:grid; grid-template-columns: 200px 1fr; gap:10px; padding:8px 12px; border-bottom:1px solid rgba(255,255,255,.06) }
.kv-row:last-child{ border-bottom:0 }
.kv-k{ color:var(--muted); font-weight:600 }
.kv-v{ color:var(--text) }
.tags-wrap{ display:flex; flex-wrap:wrap; gap:6px }
.tag-chip{ display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); font-size:.78rem }

/* ===== ОДИН общий блок (3 строки) — лейбл тянется по высоте ===== */
.detail-block{
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  overflow:hidden;
  margin-bottom:14px;
}
.detail-block .drow{
  display:grid;
  grid-template-columns: 220px 1fr;
  align-items:stretch;         /* <<< растягиваем ячейки по высоте строки */
}
.detail-block .drow + .drow{ border-top:1px solid rgba(255,255,255,.08) }

.detail-block .dlabel{
  align-items:center;          /* вертикальный центр текста внутри лейбла */
  height:100%;                 /* <<< тянуться на всю высоту строки */
  padding:10px 12px;
  background:rgba(255,255,255,.05);
  border-right:1px solid rgba(255,255,255,.08);
  color:#cfe7ff; font-weight:300; letter-spacing:.02em;
}
.detail-block .dvalue{
  padding:10px 12px;
  white-space:pre-wrap;        /* аккуратные переносы длинных строк */
  word-break:break-word;
}
.detail-block .dvalue strong{ font-weight:700 }

/* ===== История ===== */
.history-head{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.history-head .filters{ display:flex; gap:6px; flex-wrap:wrap }
.history-head .mini{ font-size:.75rem; padding:4px 8px; border-radius:999px; background:transparent; color:inherit; border:1px solid rgba(255,255,255,.12) }
.history-head .mini.is-active{ box-shadow:0 0 0 1px rgba(56,189,248,.35) inset; border-color:rgba(56,189,248,.35) }

.history-empty{ text-align:center; opacity:.75; padding:18px 8px }

/* Карточка события */
.h-item{
  display:grid;
  grid-template-columns: 220px 1fr;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  overflow:hidden
}

/* Левая колонка */
.h-item .h-side{
  padding:12px;
  background:rgba(255,255,255,.02);
  border-right:1px solid rgba(255,255,255,.06);
  gap:10px;
  justify-content:flex-start
}
.h-item .h-side .badge{ width:max-content }

/* Плашка направления (Eingehend/Ausgehend) */
.dir-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px; font-size:.82rem;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04)
}
.dir-pill .arrow{ font-weight:700; opacity:.85 }
.dir-in{ box-shadow:0 0 0 9999px rgba(56,189,248,.06) inset; border-color:rgba(56,189,248,.35) }
.dir-out{ box-shadow:0 0 0 9999px rgba(34,197,94,.06) inset;  border-color:rgba(34,197,94,.35) }

/* Дата */
.h-item .time{ font-family:var(--mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); opacity:.9 }

/* Лейблы и значения (Absender/Empfänger) */
.h-item .label{ color:var(--muted); font-size:.85rem }
.who-line{ font-family:var(--mono, ui-monospace, Menlo, Consolas, monospace); line-height:1.25 }
.who-line a{ color:var(--link, #7dd3fc); text-decoration:none }
.who-line a:hover{ text-decoration:underline }

/* Правая колонка */
.h-item .h-main{
  padding:12px 14px;
  display:grid;
  gap:10px;
  align-content:flex-start;
  align-items:flex-start
}
.h-item.type-email.email-in .h-main{ gap:6px }
.h-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap }
.h-title{ margin:0; font-size:1rem; font-weight:700 }
.h-meta{ display:flex; align-items:center; gap:6px; color:var(--muted); font-size:.85rem }
.h-meta .sep{ opacity:.6 }

/* Кнопки действий (Antworten / Antworten alle) */
.reply-actions{ margin-left:auto; display:flex; gap:16px; align-items:center }
.reply-actions a{
  font-size:.9rem; color:#7dd3fc; text-decoration:none
}
.reply-actions a:hover{ text-decoration:underline }

/* Тело письма (plain) */
.h-body{
  white-space:pre-wrap; word-break:break-word; line-height:1.35; color:var(--text);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:10px 12px;
  max-height:500px; overflow:auto
}

.ticket-description{
  max-height:500px; overflow:auto
}

.files-placeholder{
  padding:12px; border:1px dashed rgba(255,255,255,.16); border-radius:8px;
  color:var(--muted); font-size:.92rem
}

/* Тело письма (HTML) */
.h-body.email-html{ white-space:normal }
.h-body.email-html img{ max-width:100%; height:auto }
.h-body.email-html table{ width:100%; border-collapse:collapse }
.h-body.email-html th, .h-body.email-html td{ border:1px solid rgba(255,255,255,.12); padding:6px 8px }

/* Доп. мета e-mail (если нужна) */
.kv{ display:grid; grid-template-columns:140px 1fr; gap:8px; align-items:flex-start; font-size:.92rem }
.kv > div:first-child{ color:var(--muted) }

/* Вложения */
.files{ display:flex; flex-wrap:wrap; gap:6px }
.file{
  display:inline-flex; align-items:center; gap:6px; padding:2px 8px;
  border-radius:999px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04); font-size:.78rem
}

/* Предупреждение "внешнее письмо" */
.callout.warn{
  background:linear-gradient(180deg,rgba(255,204,0,.08),rgba(255,204,0,.05));
  border:1px solid rgba(255,204,0,.35); color:#ffe9a6;
  padding:8px 10px; border-radius:10px; margin:2px 0 6px
}

/* Цветные индикаторы типа сообщения */
.h-item.type-email{   box-shadow: inset 4px 0 0 0 rgba(56,189,248,.7) }
.h-item.type-comment{ box-shadow: inset 4px 0 0 0 rgba(34,211,238,.7) }
.h-item.type-worklog{ box-shadow: inset 4px 0 0 0 rgba(16,185,129,.75) }
.h-item.type-system{  box-shadow: inset 4px 0 0 0 rgba(148,163,184,.6) }

/* ===== ОБНОВЛЕННЫЕ СТИЛИ ДЛЯ ФОРМЫ ОТВЕТА (COMPOSER) ===== */

/* Основная сетка формы: 2 колонки */
.composer {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Левая колонка в 2 раза шире правой */
    gap: 16px;
    margin-top: 14px;
    border: 1px dashed rgba(255, 255, 255, .15);
    border-radius: 10px;
    padding: 16px;
}

.is-hidden { display: none !important; }

/* Стили для колонок */
.composer__main,
.composer__side {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Вертикальный отступ между группами полей */
}

/* Общая группа для поля (label + input) */
.composer .field-group {
    display: flex;
    flex-direction: column;
    gap: 6px; /* Отступ между label и input */
}

/* Стилизация input и textarea */
.composer input[type="text"],
.composer textarea {
    width: 100%;
    padding: var(--field-pad-y, 10px) var(--field-pad-x, 12px);
    border-radius: var(--field-radius, 12px);
    border: 1px solid rgba(255, 255, 255, .16);
    background: #0a1126;
    color: var(--text, #e5e7eb);
    font: inherit;
}

.composer input[type="text"]:focus,
.composer textarea:focus {
    outline: none;
    box-shadow: var(--ring, 0 0 0 3px rgba(34, 211, 238, .2));
    border-color: var(--brand, #22d3ee);
}

/* Подсказка под полем */
.composer .hint {
    font-size: .85rem;
    color: var(--muted);
    margin-top: 2px;
}

/* Чекбоксы */
.composer .toggles {
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
.composer .toggles label {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    cursor: pointer;
}

/* Кнопки действий */
.composer .actions {
    flex-direction: row;
    gap: 10px;
    margin-top: auto; /* Прижимает кнопки к низу левой колонки */
    padding-top: 16px;
}

/* Основной контейнер для макета меню */
.menu-layout {
    margin: 10px 10px 10px 10px;
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: 16px;
    align-items: start;
}

/* Левая колонка с кнопками */
.menu-layout__actions {
    display: flex;
    flex-direction: column; /* Кнопки друг под другом */
    gap: 10px;
}

/* Стили кнопок внутри левой колонки */
.menu-layout__actions .btn {
    width: 100%;
    justify-content: flex-start; /* Выравнивание текста и иконки по левому краю */
}

/* Правая колонка: зона Drag & Drop */
.menu-layout__dropzone {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 84px; /* Минимальная высота, равная высоте двух кнопок */
    height: 100%;
    border: 2px dashed rgba(255, 255, 255, .25);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    text-align: center;
    color: var(--muted, #94a3b8);
    padding: 16px;
}

.menu-layout__dropzone p {
    margin: 0;
    font-weight: 600;
}

/* ===== Стили для Drag & Drop ===== */

/* Зона для перетаскивания файлов */
/* Старые стили для .composer__dropzone можно удалить */ 
.composer__dropzone {
    display: flex;
    flex-direction: column; /* Элементы теперь внутри колонки */
    gap: 16px; /* Отступ между списками файлов и зоной загрузки */ 
    min-height: 80px;
    padding: 16px;
    border: 2px dashed rgba(255, 255, 255, .25);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    color: var(--muted, #94a3b8);
}
.composer__dropzone.is-active {
    border-color: var(--brand, #22d3ee);
    background: rgba(34, 211, 238, .1);
}

.composer__dropzone-prompt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 8px; 
    width: 100%;
    flex-grow: 1; /* Занимает оставшееся место */
    min-height: 50px;
}
.composer__dropzone-prompt p {
    margin: 0;
    font-weight: 600;
}

/* Списки файлов */
.composer__dropzone ul {
    list-style: none;
    padding: 0;
    margin: 0; 
    font-size: 13px;
    text-align: left;
    width: 100%;
}
.composer__dropzone strong {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--muted);
    display: block;
    margin-bottom: 6px; 
}
.composer__dropzone li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    background: rgba(255, 255, 255, .05);
    border-radius: 6px; 
    margin-top: 4px;
}
.composer__dropzone li a {
    color: var(--text);
    text-decoration: none;
}
.composer__dropzone li a:hover {
    text-decoration: underline;
}

.composer__dropzone .remove-new-file,
.composer__dropzone .remove-existing-file {
    background: transparent;
   border: 0;
   color: var(--danger, #ef4444);
   cursor: pointer;
   font-size: 16px;
   line-height: 1;
   padding: 2px 4px;
}

/* ===== Responsive Layout (Tablet & Mobile) ============================= */
@media (max-width:1280px){
  :root{
    --side-w:220px;
    --rail-w:280px;
  }
  .header-bar{ padding-inline:14px; }
  .header-bar-company{ padding-inline:14px; }
  main.container.section{ padding-inline:20px; }
}

@media (max-width:1024px){
  :root{
    --side-w:200px;
    --rail-w:260px;
  }
  .header-bar{ padding-inline:14px; gap:14px; }
  .header-bar-company{ padding-inline:14px; }
  .company-panel{ gap:7px; }
  main.container.section{ padding-inline:18px; }
  main.container.section:has(.rail){
    grid-template-columns:minmax(0,1fr);
    gap:18px;
  }
  .rail{
    position:static;
    top:auto;
    width:100%;
    max-width:none;
  }
  .form-grid,
  .grid-2{ grid-template-columns:1fr; }
  .compact-scope .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kv-board{ grid-template-columns:1fr; }
  .kv-row{ grid-template-columns:minmax(0,150px) 1fr; }
  .menu-layout{ grid-template-columns:1fr; }
  .menu-layout__actions{ flex-direction:row; flex-wrap:wrap; gap:8px; }
  .composer{ grid-template-columns:1fr; }
  .composer textarea{ grid-column:1; min-height:120px; }
  .composer__side{ order:2; }
  .chat-app{ grid-template-columns:260px 1fr; }
  .chat-app .sidebar{ top:calc(var(--topbar-h) + 12px); }
}

@media (max-width:768px){
  :root{
    --side-w:clamp(240px, 72vw, 320px);
    --rail-w:100%;
  }
  body:has(.sidenav) .header-bar,
  body:has(.sidenav) .header-bar-company,
  body:has(.sidenav) main.container.section,
  body:has(.sidenav) footer{
    margin-left:0;
  }
  .header-bar{
    padding-inline:12px;
  }
  .header-bar-company{
    padding-inline:12px;
  }
  .nav-burger{ display:flex; }
  .menu-wrap{ margin-left:auto; }
  .site-menu{ gap:4px; justify-content:flex-end; }
  .site-menu .menu-link{ padding:8px 10px; font-size:.9rem; }
  .sidenav{
    width:var(--side-w);
    max-width:320px;
    transform:translateX(-110%);
    transition:transform .28s ease;
    box-shadow:0 25px 60px rgba(0,0,0,.55);
    z-index:140;
    height:100vh;
  }
  .sn-scroll{ padding-right:6px; }
  body:has(#nav-toggle:checked) .sidenav{ transform:translateX(0); }
  body:has(#nav-toggle:checked){
    overflow:hidden;
  }
  body:has(#nav-toggle:checked)::after{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(8,12,24,.72);
    z-index:80;
  }
  main.container.section{
    padding:18px 14px 36px;
    gap:18px;
  }
  main.container.section:has(.rail){
    gap:18px;
  }
  .rail{
    order:2;
    width:100%;
    position:static;
  }
  .compact-scope .grid-3,
  .form-grid,
  .menu-layout,
  .composer,
  .chat-app,
  .kv,
  .kv-board{
    grid-template-columns:1fr;
  }
  .menu-layout__actions{ flex-direction:column; align-items:stretch; }
  .menu-layout__dropzone{ min-height:120px; }
  .chat-app{ grid-template-columns:1fr; gap:14px; }
  .chat-app .sidebar{ position:static; height:auto; }
  .chat-app .messages{ max-height:none; }
  .composer textarea{ min-height:140px; }
  .kv-row{ grid-template-columns:1fr; gap:6px; }
  .detail-block .drow{ grid-template-columns:1fr; }
  .kv{ grid-template-columns:1fr; }
  .h-item{
    grid-template-columns:1fr;
  }
  .h-item .h-side{
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.08);
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
  .h-item .h-main{ padding:14px; }
  .card-body,
  .card-body-spaced{
    overflow-x:auto;
  }
  .table{
    width:100%;
    min-width:clamp(0px, 100%, 640px);
  }
  footer{ margin-left:0 !important; padding-inline:16px; }
}

@media (max-width:480px){
  :root{
    --btn-pad-x:10px;
    --field-pad-x:10px;
  }
  .header-bar{ gap:10px; }
  .header-bar-company{ padding-inline:12px; }
  .company-panel{ gap:5px; }
  .nav-burger{ width:40px; height:40px; }
  .nav-burger span,
  .nav-burger span::before,
  .nav-burger span::after{ width:20px; }
  main.container.section{ padding:16px 12px 32px; }
  .card-body-spaced{ padding:12px 12px 0; }
  .badge{ font-size:.72rem; }
  .table{ min-width:clamp(0px, 100%, 560px); }
}

/* ===== Ticket Dashboard ================================================= */
/* ===== Checklist Templates ============================================ */
.template-layout{
  display:grid;
  gap:16px;
  grid-template-columns:minmax(240px,280px) 1fr;
  align-items:start;
}
.template-layout__list,
.template-layout__editor{
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.04);
  box-shadow:var(--shadow);
  padding:16px;
}
.template-layout__editor{
  max-height:80vh;
  overflow:auto;
}
.template-list__head{
  justify-content:space-between;
  align-items:center;
}
.template-list__body{
  gap:10px;
  max-height:70vh;
  overflow:auto;
  padding-right:4px;
}
.template-list__item{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid transparent;
  cursor:pointer;
  background:rgba(255,255,255,.03);
  justify-content:space-between;
  align-items:center;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.template-list__item:hover{
  background:rgba(255,255,255,.06);
}
.template-list__item.is-active{
  border-color:rgba(56,189,248,.45);
  background:rgba(34,211,238,.12);
  box-shadow:0 0 0 1px rgba(34,211,238,.25);
}
.template-layout .form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-bottom:16px;
}
.template-items{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:12px;
}
.template-items__head{
  justify-content:space-between;
  align-items:center;
}
.template-items__list{
}
.template-items__foot{
  justify-content:flex-end;
}
.template-item{
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:14px;
  background:rgba(255,255,255,.02);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
  gap:10px;
}
.template-item__head{
  justify-content:space-between;
  align-items:center;
}
.template-item__actions{
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}
.template-actions-list{
  gap:10px;
}
.template-action{
  border:1px dashed rgba(255,255,255,.18);
  border-radius:12px;
  padding:10px 12px;
  background:rgba(255,255,255,.02);
  gap:8px;
}
.template-action__row{
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.template-action__fields{
  display:grid;
  gap:8px;
}
.template-action__field{
  gap:4px;
}
.template-action__field-inline{
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.template-actions{
  flex-wrap:wrap;
  align-items:center;
  margin-top:16px;
}
@media (max-width:960px){
  .template-layout{
    grid-template-columns:1fr;
  }
  .template-layout__list{
    order:1;
  }
  .template-layout__editor{
    order:2;
    max-height:none;
  }
}

/* ===== Ticket Checklists ============================================ */
#checklists-container{
}
#checklists-container .checklist-entry{
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:14px;
  background:rgba(255,255,255,.03);
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
#checklists-container .checklist-entry.is-completed{
  border-color:rgba(16,185,129,.45);
  box-shadow:0 0 0 1px rgba(16,185,129,.18);
}
#checklists-container .checklist-entry.is-collapsed{
  background:rgba(15,23,42,.72);
}
#checklists-container .checklist-entry__head{
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
#checklists-container .checklist-entry__head button.toggle{
  align-items:center;
  gap:8px;
  background:none;
  border:none;
  font:inherit;
  cursor:pointer;
  padding:0;
  color:var(--text);
  font-weight:600;
}
#checklists-container .checklist-entry__head button.toggle .caret{
  display:inline-block;
  transition:transform .2s ease;
}
#checklists-container .checklist-entry.is-collapsed .checklist-entry__content{
  display:none;
}
#checklists-container .checklist-entry.is-collapsed .checklist-entry__head button.toggle .caret{
  transform:rotate(-90deg);
}
#checklists-container .checklist-entry__title{
  align-items:center;
  gap:10px;
  font-weight:600;
}
#checklists-container .checklist-entry__content{
}
#checklists-container .checklist-entry__items{
  list-style:none;
  margin:0;
  padding:0;
  gap:6px;
}
#checklists-container .checklist-entry__items li{
  align-items:flex-start;
  gap:10px;
  padding:4px 0;
}
#checklists-container .checklist-entry__desc{
  color:var(--muted);
  margin-bottom:10px;
  font-size:.95rem;
}
#checklists-container .checklist-entry__badge{
  font-size:.75rem;
  padding:2px 8px;
  border-radius:10px;
  background:rgba(148,163,184,.24);
  color:var(--text);
}
#pinned-card.hidden{
  display:none;
}
#pinned-list .pinned-body{
  white-space:pre-wrap;
  font-size:.95rem;
  line-height:1.5;
  color:var(--text);
}

.dashboard-columns{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch }
.section-card{ height:600px; display:flex; flex-direction:column; padding:12px }
.section-head{ padding:0 0 8px; border:none; display:flex; justify-content:space-between; align-items:center; flex-shrink:0 }
.section-head .filters{ display:flex; gap:8px; align-items:center }
.tickets-compact{ display:block; flex-grow:1; overflow-y:auto; min-height:0 }
.tickets-compact thead{ position:sticky; top:0; z-index:1 }
.tickets-compact thead th{ background:var(--card,#121a33) }
.tickets-compact thead,
.tickets-compact tbody tr{ display:table; width:100%; table-layout:fixed }
.tickets-compact td.col-num{ position:relative; text-align:center }
.tickets-compact th.col-num{ text-align:center }
.tickets-compact td.col-num{
  vertical-align:middle !important;
  padding:12px 12px 12px 16px;
  position:relative;
}
.tickets-compact tr.sla--overdue td.col-num::before,
.tickets-compact tr.sla--soon td.col-num::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px; border-radius:2px;
}
.tickets-compact td.tags{ max-width:520px; overflow-wrap:anywhere }
.tag-chip{
  display:inline-block; padding:2px 8px; margin:0 6px 4px 0;
  border-radius:999px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06); font-size:.68rem; line-height:1.6; white-space:nowrap;
}
.tickets-compact td, .tickets-compact th{ vertical-align:top }
.tickets-compact .col-num{ width:110px; white-space:nowrap }
.tickets-compact td.details .line{ line-height:1.2; margin:0 0 2px }
.tickets-compact td.details .line:last-child{ margin-bottom:0 }
.tickets-compact td.details .subject a{ font-weight:600; text-decoration:none }
.tickets-compact td.details .company{ color:var(--muted,#777) }
.tickets-compact td.details .status .badge{ display:inline-block }
.tickets-compact td.assignee{ white-space:nowrap }
.tickets-compact td.desc{ max-width:520px; overflow:hidden; text-overflow:ellipsis; overflow-wrap:anywhere }
.department-sections{ padding:12px 16px; margin-top:16px; display:grid; gap:16px }
.department-card summary{
  display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; list-style:none;
}
.department-card summary::-webkit-details-marker{ display:none }
.department-card summary:hover{ background:rgba(255,255,255,.03) }
.department-card summary::after{
  content:'\25BE';
  font-size:1.2em;
  transition:transform .2s;
  margin-left:8px;
}
.department-card[open] > summary::after{ transform:rotate(180deg) }
.department-card.is-empty .tickets-compact thead{ display:none }
.department-card .ticket-count-badge{
  font-size:.8em; padding:4px 8px; border-radius:999px;
  background:rgba(255,255,255,.06); color:var(--muted);
}
@keyframes blinkBar{ 0%,100%{ opacity:.2 } 50%{ opacity:1 } }
.tickets-compact tr.sla--overdue td.col-num::before{ background:#ff3b30; animation:blinkBar 1.2s linear infinite }
.tickets-compact tr.sla--soon td.col-num::before{ background:#ff9f0a; animation:blinkBar 1.8s linear infinite }
@media (max-width:980px){
  .dashboard-columns{ grid-template-columns:1fr }
  .tickets-compact td.desc{ max-width:360px }
}
@media (max-width:780px){
  .tickets-compact td.desc{ display:none }
}

/* ===== Registration Verify Success ===================================== */
.verify-layout{ display:grid; place-items:center; min-height:calc(100vh - 120px); padding:24px }
.verify-card{
  width:100%; max-width:620px; text-align:center;
  padding:32px 24px; border-radius:var(--radius);
  background:
    radial-gradient(1200px 500px at 50% -120px, rgba(56,189,248,.10), transparent 60%),
    radial-gradient(800px 400px at 85% 10%, rgba(34,211,238,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:var(--shadow);
}
.verify-icon-wrap{ display:grid; place-items:center; margin:0 auto 16px; }
.verify-icon{
  width:72px; height:72px; border-radius:22px;
  display:grid; place-items:center;
  background:var(--grad); color:#001018;
  box-shadow:0 12px 30px rgba(0,0,0,.45), 0 0 0 6px rgba(34,211,238,.18);
  transform:scale(1);
  animation:verify-pop .38s ease-out both;
}
.verify-heading{ margin:0 0 8px; font-size:24px; font-weight:900 }
.verify-text{ margin:0 0 18px; font-size:15px; color:var(--muted) }
.btn-wide{ min-width:200px }

@keyframes verify-pop{
  0%{ transform:scale(.86); opacity:0 }
  60%{ transform:scale(1.04); opacity:1 }
  100%{ transform:scale(1) }
}

/* ===== Marketing / Site Layer (scoped, non-breaking) ==================== */
/* Variable aliases to reuse existing admin tokens when possible */
:root{
  /* tokens for site layer (kept separate via class scoping below) */
  --color-shadow-dark: rgba(0, 0, 0, .35);
  --color-shadow-light: rgba(0, 0, 0, .15);
}

/* Scope all "site" styles under .site to avoid collisions with admin UI */
.site{
  /* --- Variables (scoped) --- */
  --color-bg-dark: var(--bg);
  --color-bg-medium: var(--card);
  --color-bg-light: #1A2440;
  --color-accent-blue: var(--brand-2);
  --color-accent-neon: var(--brand);
  --color-text-light: var(--text);
  --color-text-medium: var(--muted);
  --color-text-dark: #001018;
  --color-border-light: rgba(255,255,255,.08);

  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 48px;
  --spacing-xl: 80px;

  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 20px;
  --border-radius-full: 9999px;

  --font-family-primary: Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;

  --transition-speed: .3s;
  --transition-ease: ease-in-out;
}

/* Light Theme Variables (overrides) */
.site.theme-light{
  --color-bg-dark: #F0F2F5;
  --color-bg-medium: #FFFFFF;
  --color-bg-light: #F8F9FA;
  --color-text-light: #333333;
  --color-text-medium: #666666;
  --color-text-dark: #FFFFFF;
  --color-border-light: rgba(0, 0, 0, .1);
  --color-shadow-dark: rgba(0, 0, 0, .15);
  --color-shadow-light: rgba(0, 0, 0, .05);
}

/* --- Base Styles --- */
.site html{ scroll-behavior:smooth; }
.site{
  margin:0; padding:0;
  font-family:var(--font-family-primary);
  background-color:var(--color-bg-dark);
  color:var(--color-text-light);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition: background-color var(--transition-speed) var(--transition-ease), color var(--transition-speed) var(--transition-ease);
}
.site *, .site *::before, .site *::after{ box-sizing:border-box; }
.site a{ color:var(--color-accent-blue); text-decoration:none; transition: color var(--transition-speed) var(--transition-ease); }
.site a:hover{ color:var(--color-accent-neon); }
.site h1,.site h2,.site h3,.site h4,.site h5,.site h6{ font-weight:900; line-height:1.3; margin-top:0; color:var(--color-text-light) }
.site h1{ font-size:2.5rem } .site h2{ font-size:2rem } .site h3{ font-size:1.5rem }
@media (min-width:768px){ .site h1{ font-size:3.5rem } .site h2{ font-size:2.5rem } .site h3{ font-size:1.8rem } }
.site p{ margin-bottom:1em }
.site img{ max-width:100%; height:auto; display:block }

/* Visually hidden for accessibility */
.site .sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0;
}

/* --- Layout --- */
.site .container{ max-width:1200px; margin:0 auto; padding:0 var(--spacing-md) }
.site .section{ padding:var(--spacing-xl) 0; text-align:center }
.site .section-title{ margin-bottom:var(--spacing-sm) }
.site .section-subtitle{ font-size:1.1rem; color:var(--color-text-medium); margin-bottom:var(--spacing-lg) }
.site .content-center{ display:flex; flex-direction:column; align-items:center; justify-content:center }

/* Grid */
.site .grid{ display:grid; gap:var(--spacing-md); grid-template-columns:repeat(1,1fr) }
@media (min-width:600px){ .site .grid.grid-2-col{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:992px){
  .site .grid.grid-3-col{ grid-template-columns:repeat(3,1fr) }
  .site .grid.grid-4-col{ grid-template-columns:repeat(4,1fr) }
}

/* --- Buttons --- */
.site .button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 24px; border-radius:var(--border-radius-full);
  font-weight:800; font-size:1rem; cursor:pointer; border:none;
  transition:all var(--transition-speed) var(--transition-ease); text-align:center;
}
.site .button.primary{
  background-color:var(--color-accent-blue); color:var(--color-text-dark);
  box-shadow:0 4px 15px rgba(56,189,248,.4);
}
.site .button.primary:hover{
  background-color:var(--color-accent-neon);
  box-shadow:0 6px 20px rgba(34,211,238,.6);
  transform:translateY(-2px);
}
.site .button.secondary{
  background:transparent; color:var(--color-accent-blue);
  border:2px solid var(--color-accent-blue);
}
.site .button.secondary:hover{
  border-color:var(--color-accent-neon); color:var(--color-accent-neon); transform:translateY(-2px);
}
.site .button.small{ padding:8px 16px; font-size:.9rem }
.site .icon-button{
  background:none; border:none; color:var(--color-text-light); cursor:pointer; padding:var(--spacing-xs);
  border-radius:var(--border-radius-sm);
  transition: background-color var(--transition-speed) var(--transition-ease), color var(--transition-speed) var(--transition-ease);
}
.site .icon-button svg{ width:24px; height:24px; display:block }
.site .icon-button:hover{ background-color:rgba(255,255,255,.1); color:var(--color-accent-neon) }
.site .button-link{ color:var(--color-accent-blue); font-weight:600; display:inline-block; margin-top:var(--spacing-sm) }
.site .button-link:hover{ color:var(--color-accent-neon); text-decoration:underline }

/* --- Glassmorphism Effect --- */
.site .glassmorphism{
  background:rgba(18,26,51,.6);
  backdrop-filter:blur(10px);
  border:1px solid var(--color-border-light);
  border-radius:var(--border-radius-lg);
  box-shadow:0 10px 30px var(--color-shadow-dark);
  transition:all var(--transition-speed) var(--transition-ease);
}
.site.theme-light .glassmorphism{
  background:rgba(255,255,255,.7);
  box-shadow:0 10px 30px var(--color-shadow-light);
}

/* --- Header --- */
.site .main-header{
  position:fixed; top:0; left:0; width:100%;
  background-color:rgba(18,26,51,.8); backdrop-filter:blur(8px);
  z-index:1000; padding:var(--spacing-sm) 0;
  border-bottom:1px solid var(--color-border-light);
  transition:background-color var(--transition-speed) var(--transition-ease), border-color var(--transition-speed) var(--transition-ease);
}
.site .main-header .container{ display:flex; justify-content:space-between; align-items:center }
.site .main-header .logo img{ height:40px; width:auto }
.site .header-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:var(--spacing-md) }
.site .header-nav a{
  color:var(--color-text-light); font-weight:600; padding:var(--spacing-xs) 0; position:relative;
}
.site .header-nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
  background-color:var(--color-accent-neon);
  transition:width var(--transition-speed) var(--transition-ease);
}
.site .header-nav a:hover::after{ width:100% }
.site .header-right{ display:flex; align-items:center; gap:var(--spacing-sm) }
.site .theme-switcher{ display:flex; gap:var(--spacing-xs) }
@media (max-width:991px){ .site .header-nav{ display:none } }

/* --- Hero Section --- */
.site .hero-section{
  position:relative; height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; padding-top:80px;
}
.site .hero-background{
  position:absolute; inset:0; background:linear-gradient(45deg,var(--color-bg-dark) 0%, var(--color-bg-medium) 50%, var(--color-bg-dark) 100%);
  background-size:200% 200%; animation:gradient-shift 20s ease infinite; z-index:-1;
}
@keyframes gradient-shift{
  0%{ background-position:0% 50% }
  50%{ background-position:100% 50% }
  100%{ background-position:0% 50% }
}
@media (prefers-reduced-motion:reduce){
  .site .hero-background{ animation:none; background:var(--color-bg-dark) }
}
.site .hero-section .container{ text-align:center; z-index:1 }
.site .hero-section h1{ font-size:3.5rem; margin-bottom:var(--spacing-sm); max-width:800px }
.site .hero-section h2{ font-size:1.5rem; color:var(--color-text-medium); margin-bottom:var(--spacing-lg); max-width:700px }
.site .hero-buttons{ display:flex; gap:var(--spacing-md); margin-top:var(--spacing-md) }
.site .hero-image{ margin-top:var(--spacing-xl); max-width:600px; opacity:0; transform:translateY(20px) }
@media (max-width:768px){
  .site .hero-section h1{ font-size:2.5rem }
  .site .hero-section h2{ font-size:1.2rem }
  .site .hero-buttons{ flex-direction:column }
}

/* --- Services Section --- */
.site .services-section .service-cards{ grid-template-columns:repeat(1,1fr) }
@media (min-width:600px){ .site .services-section .service-cards{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:992px){ .site .services-section .service-cards{ grid-template-columns:repeat(4,1fr) } }
.site .service-card{
  padding:var(--spacing-md); text-align:left; display:flex; flex-direction:column; justify-content:space-between; height:100%;
}
.site .service-card h3{ color:var(--color-accent-neon); margin-bottom:var(--spacing-xs) }
.site .service-card p{ color:var(--color-text-medium); flex-grow:1 }
.site .service-card:hover{
  transform:translateY(-5px) rotateZ(1deg);
  box-shadow:0 15px 40px var(--color-shadow-dark), 0 0 20px var(--color-accent-neon);
  border-color:var(--color-accent-neon);
}

/* --- Pricing Section --- */
.site .pricing-section .pricing-cards{ grid-template-columns:repeat(1,1fr) }
@media (min-width:600px){ .site .pricing-section .pricing-cards{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:992px){ .site .pricing-section .pricing-cards{ grid-template-columns:repeat(3,1fr) } }
.site .pricing-card{
  padding:var(--spacing-md); text-align:center; display:flex; flex-direction:column; position:relative; height:100%;
  border:1px solid var(--color-border-light); border-radius:var(--border-radius-lg); background:rgba(255,255,255,.03);
}
.site .pricing-card.featured{
  border-color:var(--color-accent-neon);
  box-shadow:0 10px 30px var(--color-shadow-dark), 0 0 25px var(--color-accent-neon);
  transform:scale(1.03);
}
.site .pricing-card.featured .badge{
  position:absolute; top:-15px; right:-15px; background-color:var(--color-accent-neon); color:var(--color-text-dark);
  padding:5px 15px; border-radius:var(--border-radius-full); font-weight:700; font-size:.85rem; box-shadow:0 2px 10px rgba(34,211,238,.5);
}
.site .pricing-card .card-header h3{ color:var(--color-accent-blue); margin-bottom:var(--spacing-xs) }
.site .pricing-card .card-header .description{ color:var(--color-text-medium); font-size:.95rem; margin-bottom:var(--spacing-md) }
.site .pricing-card .card-price{ margin-bottom:var(--spacing-md); font-size:2.5rem; font-weight:900; color:var(--color-text-light) }
.site .pricing-card .card-price .period{ font-size:1rem; color:var(--color-text-medium); font-weight:normal }
.site .pricing-card ul.features{ list-style:none; padding:0; margin:0 0 var(--spacing-md) 0; text-align:left; flex-grow:1 }
.site .pricing-card ul.features li{
  margin-bottom:var(--spacing-xs); color:var(--color-text-light); display:flex; align-items:flex-start;
}
.site .pricing-card ul.features li::before{
  content:'✓'; color:var(--color-accent-neon); margin-right:var(--spacing-xs); font-weight:700;
}
.site .pricing-card .card-footer{ margin-top:auto; padding-top:var(--spacing-md) }
.site .pricing-notes{ margin-top:var(--spacing-lg); color:var(--color-text-medium); font-size:.9rem }
.site .pricing-card:hover{
  transform:translateY(-5px);
  box-shadow:0 15px 40px var(--color-shadow-dark), 0 0 20px var(--color-accent-neon);
  border-color:var(--color-accent-neon);
}
.site .pricing-card.featured:hover{
  transform:translateY(-8px) scale(1.04);
  box-shadow:0 15px 40px var(--color-shadow-dark), 0 0 30px var(--color-accent-neon);
}

/* --- Trust Section --- */
.site .partner-logos{
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--spacing-lg); margin-bottom:var(--spacing-xl);
}
.site .partner-logos img{
  height:40px; width:auto; filter:grayscale(100%) opacity(.6);
  transition:filter var(--transition-speed) var(--transition-ease);
}
.site .partner-logos img:hover{ filter:grayscale(0%) opacity(1) }
.site .testimonials{ margin-bottom:var(--spacing-xl) }
.site .testimonial-card{ padding:var(--spacing-md); text-align:center }
.site .testimonial-card p{ font-style:italic; color:var(--color-text-light); margin-bottom:var(--spacing-sm) }
.site .testimonial-card .author{ font-weight:600; color:var(--color-accent-blue) }
.site .kpis{ grid-template-columns:repeat(1,1fr) }
@media (min-width:600px){ .site .kpis{ grid-template-columns:repeat(3,1fr) } }
.site .kpi-item{ padding:var(--spacing-md); display:flex; flex-direction:column; align-items:center; justify-content:center }
.site .kpi-value{ font-size:3rem; font-weight:900; color:var(--color-accent-neon); margin-bottom:var(--spacing-xs) }
.site .kpi-label{ font-size:1.1rem; color:var(--color-text-medium) }

/* --- FAQ Section (Accordion) --- */
.site .accordion{ max-width:800px; margin:0 auto; text-align:left }
.site .accordion-item{ margin-bottom:var(--spacing-sm); overflow:hidden; border:1px solid var(--color-border-light); border-radius:var(--border-radius-md) }
.site .accordion-header{
  width:100%; background:none; border:none; padding:var(--spacing-md);
  color:var(--color-text-light); font-size:1.1rem; font-weight:600; text-align:left; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  transition:background-color var(--transition-speed) var(--transition-ease), color var(--transition-speed) var(--transition-ease);
}
.site .accordion-header:hover{ color:var(--color-accent-neon) }
.site .accordion-icon{ display:inline-block; width:24px; height:24px; position:relative }
.site .accordion-icon::before,
.site .accordion-icon::after{
  content:""; position:absolute; background-color:var(--color-accent-blue);
  transition:transform var(--transition-speed) var(--transition-ease);
}
.site .accordion-icon::before{ top:50%; left:0; width:100%; height:2px; transform:translateY(-50%) }
.site .accordion-icon::after{ top:0; left:50%; width:2px; height:100%; transform:translateX(-50%) }
.site .accordion-header[aria-expanded="true"] .accordion-icon::after{ transform:translateX(-50%) rotate(90deg) }
.site .accordion-panel{
  max-height:0; overflow:hidden; transition:max-height var(--transition-speed) var(--transition-ease), padding var(--transition-speed) var(--transition-ease);
  padding:0 var(--spacing-md); color:var(--color-text-medium);
}
.site .accordion-panel[aria-hidden="false"]{ max-height:500px; padding:var(--spacing-sm) var(--spacing-md) var(--spacing-md) }

/* --- Final CTA Section --- */
.site .final-cta-section{ background-color:var(--color-bg-medium); padding:var(--spacing-xl) 0 }
.site .final-cta-section .cta-buttons{ display:flex; gap:var(--spacing-md); margin-top:var(--spacing-md) }
@media (max-width:600px){ .site .final-cta-section .cta-buttons{ flex-direction:column } }

/* --- Footer --- */
.site .main-footer{
  background-color:var(--color-bg-medium);
  padding:var(--spacing-lg) 0 var(--spacing-md) 0;
  border-top:1px solid var(--color-border-light);
  color:var(--color-text-medium);
  font-size:.9rem; text-align:left;
}
.site .main-footer .container.grid{ grid-template-columns:repeat(1,1fr); gap:var(--spacing-lg); margin-bottom:var(--spacing-md) }
@media (min-width:600px){ .site .main-footer .container.grid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:992px){ .site .main-footer .container.grid{ grid-template-columns:repeat(4,1fr) } }
.site .footer-column .logo img{ height:30px; margin-bottom:var(--spacing-sm) }
.site .footer-column h4{ color:var(--color-text-light); margin-bottom:var(--spacing-sm); font-size:1rem }
.site .footer-column ul{ list-style:none; padding:0; margin:0 }
.site .footer-column ul li{ margin-bottom:var(--spacing-xs) }
.site .footer-column ul a{ color:var(--color-text-medium) }
.site .footer-column ul a:hover{ color:var(--color-accent-blue) }
.site .social-links{ display:flex; gap:var(--spacing-sm); margin-top:var(--spacing-sm) }
.site .social-links a{ color:var(--color-text-medium) }
.site .social-links a:hover{ color:var(--color-accent-neon) }
.site .social-links svg{ width:20px; height:20px }
.site .main-footer .copyright{
  text-align:center; padding-top:var(--spacing-md); border-top:1px solid var(--color-border-light); margin-top:var(--spacing-md);
}

/* --- Overlays (Search & Inquiry) --- */
.site .overlay{
  position:fixed; inset:0; background-color:rgba(0,0,0,.9); backdrop-filter:blur(15px); z-index:2000;
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden;
  transition:opacity var(--transition-speed) var(--transition-ease), visibility var(--transition-speed) var(--transition-ease);
}
.site .overlay.active{ opacity:1; visibility:visible }
.site .overlay-content{
  background-color:var(--color-bg-medium); padding:var(--spacing-lg); border-radius:var(--border-radius-lg);
  max-width:600px; width:90%; position:relative; box-shadow:0 10px 50px var(--color-shadow-dark); text-align:center;
}
.site .overlay-content .close-button{
  position:absolute; top:var(--spacing-sm); right:var(--spacing-sm);
  background:none; border:none; font-size:2rem; color:var(--color-text-light); cursor:pointer; line-height:1; padding:0;
}
.site .overlay-content input[type="search"],
.site .overlay-content input[type="text"],
.site .overlay-content input[type="email"],
.site .overlay-content textarea{
  width:100%; padding:var(--spacing-sm); margin-bottom:var(--spacing-md);
  border:1px solid var(--color-border-light); border-radius:var(--border-radius-sm);
  background-color:var(--color-bg-light); color:var(--color-text-light); font-size:1rem;
}
.site .overlay-content input::placeholder,
.site .overlay-content textarea::placeholder{ color:var(--color-text-medium) }
.site .overlay-content .form-group{ margin-bottom:var(--spacing-md); text-align:left }
.site .overlay-content label{
  display:block; margin-bottom:var(--spacing-xs); color:var(--color-text-light); font-weight:600;
}

/* --- Fade-in-up animation for sections/elements --- */
.site .fade-in-up{ opacity:0; transform:translateY(20px); transition:opacity .6s var(--transition-ease), transform .6s var(--transition-ease) }
.site .fade-in-up.visible{ opacity:1; transform:translateY(0) }
.site .fade-in-up.delay-1{ transition-delay:.1s }
.site .fade-in-up.delay-2{ transition-delay:.2s }
.site .fade-in-up.delay-3{ transition-delay:.3s }
.site .fade-in-up.delay-4{ transition-delay:.4s }

/* Focus styles for accessibility (scoped) */
.site :focus-visible{
  outline:2px solid var(--color-accent-neon);
  outline-offset:3px;
  border-radius:var(--border-radius-sm);
}

.is-hidden { display: none !important; }
  /* === Quick Edit Modal — styled to match Dark Neon Admin Theme === */

  .modal.hidden{display:none}
  .modal{
    position:fixed; inset:0;
    z-index:1200; /* higher than header/rail and default cmodal */
  }
  /* Keep the quick-edit modal fully within viewport with balanced spacing */
  #ticket-quick-edit{
    padding:5vh 16px;
  }
  #ticket-quick-edit:not(.hidden){
    align-items:center;
    justify-content:center;
  }
  .modal__backdrop{
    position:absolute; inset:0;
  background: rgba(0,0,0,var(--backdrop-alpha));
    -webkit-backdrop-filter:saturate(140%) blur(2px);
    backdrop-filter:saturate(140%) blur(2px);
  }
  .modal__dialog{
    position:relative;
    margin:0 auto;
    max-width:760px; width:calc(100% - 32px);
    max-height:calc(100vh - 10vh);

    /* card look from theme */
    background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
    color:var(--text,#e5e7eb);
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius,16px);
    box-shadow:var(--shadow,0 10px 30px rgba(0,0,0,.35));

    display: flex;
    flex-direction: column;
    overflow:hidden;
  }
  .modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .modal__head h3 {
    margin: 0;
  }
  .modal__head,.modal__foot{
    padding:12px 16px;
    border-bottom:1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
  }
  .modal__foot{
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:0;
    display:flex; gap:8px; justify-content:flex-end;
    background:transparent;
  }
  .modal__body{
    padding:16px;
    flex:1 1 auto;
    overflow:auto;
  }
  .modal__close{
    background:transparent; border:0; color:var(--muted,#94a3b8);
    font-size:20px; line-height:1; cursor:pointer;
  }
  .modal__close:hover{ color:var(--text,#e5e7eb) }

  /* Layout */
  .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
  .field{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px }
  .modal label{ font-size:13px; color:var(--muted,#94a3b8) }

  /* Inputs look like global theme controls (scoped to modal to avoid surprises) */
  .modal .form-control{
    width:100%;
    padding:var(--field-pad-y,10px) var(--field-pad-x,12px);
    border-radius:var(--field-radius,12px);
    border:1px solid rgba(255,255,255,.16);
    background:#0a1126;
    color:var(--text,#e5e7eb);
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
    -webkit-appearance:none; appearance:none; line-height:1.2; font:inherit;
  }
  .modal .form-control::placeholder{ color:#8aa0be; opacity:.85 }
  .modal .form-control:focus{
    outline:none;
    box-shadow:var(--ring,0 0 0 3px rgba(34,211,238,.2));
    border-color:var(--brand,#22d3ee);
    background:#0b142c;
  }

  /* Buttons reuse global .btn styles, no overrides needed */

  /* Suggest dropdown (scrolls inside, dark theme) */
  .suggest{
    position:absolute; left:0; right:0; top:100%; margin-top:2px;
    background:rgba(14,18,32,.98);
    color:var(--text,#e5e7eb);
    border:1px solid rgba(255,255,255,.12);
    border-radius:8px;
    box-shadow:0 12px 30px rgba(0,0,0,.5);
    max-height:240px; overflow:auto;
    z-index:2001;  /* above inputs/shadows */
  }
  .suggest.hidden{ display:none }
  .sg-item{
    padding:8px 10px; cursor:pointer;
    display:flex; gap:8px; align-items:center;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .sg-item:last-child{ border-bottom:0 }
  .sg-item:hover{ background:rgba(255,255,255,.06) }
  .sg-item.is-active{
    background:rgba(0,200,255,.10);
    box-shadow:inset 0 0 0 1px rgba(0,200,255,.28);
  }
  .sg-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

  /* Scrollbar inherits global styling */

  /* Small helper */
  .hint{ color:var(--muted,#94a3b8) }
/* ===== Company Contracts ================================================ */
.contracts-table td, .contracts-table th,
.inner-table td, .inner-table th{ vertical-align:middle; }
.contracts-table td.actions{ text-align:right; }
.contracts-table td.actions .actions-inline{
  display:inline-flex; gap:6px; align-items:center; justify-content:flex-end; white-space:nowrap;
}
.contracts-table td.actions .action-form{ margin:0; display:inline-flex; align-items:center; }
.contracts-table td.actions .btn{ white-space:nowrap; line-height:1; }
.contracts-table td.col-default{ text-align:center; }
.contracts-table td.col-default .action-form{ display:inline-flex; align-items:center; justify-content:center; }
.contracts-table td.col-default .btn,
.contracts-table td.col-default .badge{ line-height:1; vertical-align:middle; }
.contracts-table .col-code{ width:120px; }
.contracts-table .nowrap{ white-space:nowrap; }
.inner-table td.actions{ text-align:right; }
.inner-table td.actions .actions-inline{ display:inline-flex; gap:6px; align-items:center; justify-content:flex-end; white-space:nowrap; }
.inner-table .action-form{ margin:0; display:inline-flex; align-items:center; }
@media (max-width:900px){
  .contracts-wide .col-sla,
  .contracts-wide .col-cal{ display:none; }
}
@media (max-width:760px){
  .contracts-wide .col-hrs,
  .contracts-wide .col-default,
  .contracts-wide .col-code{ display:none; }
}
.domains-table td.actions{
  text-align:right;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
}
.domains-table td.actions .action-form{ margin:0; display:flex }
.domains-table td.actions .btn{ white-space:nowrap }
/* ===== Ticket Tag Picker =============================================== */
.tag-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:.4rem 0 }
.tag-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border:1px solid rgba(255,255,255,.12); border-radius:999px; font-size:.75rem }
.tag-chip button{ background:transparent; border:0; color:inherit; cursor:pointer; font-size:1rem; line-height:1 }
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:200; display:flex; align-items:center; justify-content:center; }
.modal-dialog{
  width:min(560px, 94vw);
  height:clamp(420px, 70vh, 560px);
  background:rgba(11,16,32,.96);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.4);
  display:flex; flex-direction:column; overflow:hidden;
}
.modal-head{ padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.06); display:flex; align-items:center; gap:12px; justify-content:space-between; flex:0 0 auto }
.modal-title{ font-weight:700 }
.modal-body{ padding:12px 14px; display:flex; flex-direction:column; gap:8px; flex:1 1 auto; overflow:auto }
.tag-list{ flex:1 1 auto; overflow:auto; border:1px solid rgba(255,255,255,.06); border-radius:10px }
.modal-foot{ border-top:1px solid rgba(255,255,255,.06); padding:12px 14px; display:flex; gap:8px; justify-content:flex-end; flex:0 0 auto; position:sticky; bottom:0; background:rgba(11,16,32,.96) }
.tag-list .tag-item{ padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.04); cursor:pointer; display:flex; align-items:center; gap:10px }
.tag-list .tag-item:hover{ background:rgba(255,255,255,.03) }
.modal[aria-hidden="true"]{ display:none }
.table-wrap{ overflow:auto; border:1px solid rgba(255,255,255,.08); border-radius:12px }
.tools{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.th-col-id{ width:90px }
.th-col-actions{ width:220px }
/* Ticket history and attachments layout */
.history {
  display:grid;
  gap:0;
  position:relative;
}
.history .h-item {
  border-radius:0;
}
.history .h-item:last-child {
  border-bottom-left-radius:12px;
  border-bottom-right-radius:12px;
}

#pinned-list {
  display:flex;
  flex-direction:column;
  gap:0;
}
#pinned-list .h-item {
  border-radius:0;
}
#pinned-list .h-item:last-child {
  border-bottom-left-radius:12px;
  border-bottom-right-radius:12px;
}

#attachments-card .card-body {
  display:flex;
  flex-direction:column;
  gap:0;
}
#attachments-card .card-body > * {
  border-radius:0;
}
#attachments-card .card-body > *:last-child {
  border-bottom-left-radius:12px;
  border-bottom-right-radius:12px;
}

/* Drag & drop dropzone enhancements */
.menu-layout__dropzone {
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-color: rgba(148, 163, 184, .35);
  background: rgba(15, 23, 42, .28);
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.menu-layout__dropzone .dropzone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.menu-layout__dropzone span {
  font-size: .85rem;
  color: rgba(148, 163, 184, .7);
}
.menu-layout__dropzone .dropzone-hint {
  font-size: .78rem;
  color: rgba(148, 163, 184, .65);
}
.menu-layout__dropzone.is-active {
  border-color: rgba(59, 130, 246, .65);
  background: rgba(59, 130, 246, .18);
  color: #e2e8f0;
}
.menu-layout__dropzone.is-uploading {
  border-color: rgba(96, 165, 250, .8);
  background: rgba(30, 64, 175, .25);
  color: #e2e8f0;
  cursor: progress;
}

/* Ticket attachments */
.attachments-empty {
  color: var(--muted, #94a3b8);
  font-style: italic;
  padding: 8px 0;
}
.attachments-list {
  display: flex;
  flex-direction: column;
}
.attachment-item {
  display: flex;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius:0;
  overflow: hidden;
  background: rgba(15, 23, 42, .35);
}
.attachment-item:last-child {
  border-bottom-left-radius:12px;
  border-bottom-right-radius:12px;
}
.attachment-side {
  min-width: 220px;
  max-width: 260px;
  padding: 14px;
  border-right: 1px solid rgba(148, 163, 184, .15);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  background: rgba(15, 23, 42, .5);
}
.attachment-meta {
  display: grid;
  gap: 6px;
  font-size: .85rem;
}
.attachment-meta div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.attachment-meta .meta-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(148, 163, 184, .7);
}
.attachment-meta .meta-value {
  font-weight: 600;
  color: #e2e8f0;
}
.attachment-main {
  flex: 1;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.attachment-name {
  font-weight: 600;
  color: #f1f5f9;
  text-decoration: none;
  word-break: break-word;
}
.attachment-name:hover,
.attachment-name:focus {
  text-decoration: underline;
}
.attachment-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: .85rem;
  color: rgba(148, 163, 184, .8);
}
.attachment-delete{
  --sz: 18px;

  width: var(--sz);
  height: var(--sz);
  border-radius: 50%;
  padding: 0;

  display: inline-grid;
  place-items: center;

  line-height: 1;
  font-size: 11px;
  font-weight: 600;

  border: 1px solid rgba(248,113,113,.35);
  background: rgba(248,113,113,.10);
  color: #fca5a5;

  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .12s;
}

.attachment-delete:hover,
.attachment-delete:focus{
  background: rgba(248,113,113,.18);
  color: #f87171;
  border-color: rgba(248,113,113,.55);
}

.attachment-delete:active{
  transform: scale(.96);
} 
.attachment-delete--xs{ --sz: 16px; font-size: 10px; }
/* контейнер для первой секции */
.attachment-meta .meta-row{
  display: grid;
  grid-template-columns: 1fr auto; /* слева label, справа крестик */
  align-items: center;
  column-gap: 8px;
  row-gap: 4px;
}
.attachment-meta .meta-row .meta-label{ grid-column: 1; }
.attachment-meta .meta-row .attachment-delete{
  grid-column: 2;
  justify-self: end;
}
.attachment-meta .meta-row .meta-value{
  grid-column: 1 / -1;  /* имя на всю ширину нижней строкой */
}

@media (max-width: 900px) {
  .attachment-item {
    flex-direction: column;
  }
  .attachment-side {
    max-width: none;
    min-width: 100%;
    border-right: 0;
    border-bottom: 1px solid rgba(148, 163, 184, .15);
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  .attachment-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }
  .attachment-meta div {
    align-items: flex-start;
  }
}
/* Upload modal */
.upload-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}
.upload-modal.is-open {
  display: flex;
}
.upload-modal-open {
  overflow: hidden;
}
.upload-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
}
.upload-modal__dialog {
  position: relative;
  max-width: 420px;
  width: calc(100% - 32px);
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.35);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.upload-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.upload-modal__header h3 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.upload-modal__summary {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: rgba(148, 163, 184, 0.85);
}
.upload-modal__close {
  border: none;
  background: rgba(148, 163, 184, 0.12);
  color: #f8fafc;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
}
.upload-modal__close:disabled {
  cursor: wait;
  opacity: 0.5;
}
.upload-modal__close:not(:disabled):hover,
.upload-modal__close:not(:disabled):focus-visible {
  background: rgba(59, 130, 246, 0.25);
}
.upload-modal__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 4px;
}
.upload-modal__item {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(15, 23, 42, 0.65);
}
.upload-modal__ext {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}
.upload-modal__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.upload-modal__name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upload-modal__status {
  font-size: 0.8rem;
  color: rgba(148, 163, 184, 0.9);
}
.upload-modal__progress {
  height: 5px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.2);
  overflow: hidden;
}
.upload-modal__progress-bar {
  height: 100%;
  border-radius: inherit;
  width: 0%;
  transition: width 0.2s ease;
}
.upload-modal__progress-bar.is-uploading {
  background: rgba(59, 130, 246, 0.8);
}
.upload-modal__progress-bar.is-success {
  background: rgba(34, 197, 94, 0.85);
}
.upload-modal__progress-bar.is-error {
  background: rgba(239, 68, 68, 0.85);
}
.upload-modal__progress-bar.is-cancelled {
  background: rgba(214, 158, 46, 0.8);
}
.upload-modal__action {
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: transparent;
  color: rgba(226, 232, 240, 0.9);
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 0.95rem;
  cursor: pointer;
}
.upload-modal__action:hover,
.upload-modal__action:focus-visible {
  border-color: rgba(59, 130, 246, 0.7);
  color: #60a5fa;
}
.upload-modal__action--cancel:hover,
.upload-modal__action--cancel:focus-visible {
  border-color: rgba(239, 68, 68, 0.7);
  color: #f87171;
}
.upload-modal__item.is-error .upload-modal__status {
  color: rgba(239, 68, 68, 0.9);
}
.upload-modal__item.is-cancelled .upload-modal__status {
  color: rgba(214, 158, 46, 0.9);
}

.peripherals-table .col-serial { width: 190px; }
.peripherals-table .actions { display:flex; gap:6px; justify-content:flex-end; align-items:center; }
.peripheral-list { list-style:none; margin:0; padding:0; }
.peripheral-item { margin-bottom:10px; }
.peripheral-item strong { display:block; }
.peripheral-link { font-size:0.85rem; display:inline-block; margin-top:4px; }

.form-section { margin-bottom:24px; }
.form-section h3 { font-size:1rem; margin-bottom:10px; }
.form-inline { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }

.ip-entry { border:1px solid var(--border-color,#d0d5dd); border-radius:6px; padding:12px; margin-bottom:12px; }
.ip-entry .form-grid { display:grid; gap:8px; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); }
.ip-entry button[data-ip-remove] { margin-top:8px; }
.is-selected-row { background: rgba(13, 110, 253, 0.08); }
.actions-cell .btn.is-active { background: var(--primary,#0d6efd); color:#fff; border-color: var(--primary,#0d6efd); }
.sn-sub { font-size: 0.75rem; color: var(--text-subtle,#6c757d); margin-left: 32px; margin-top: 2px; }


.company-current__meta span{display:flex;align-items:center;gap:6px;}
.company-current__actions{display:flex;gap:12px;align-items:center;font-size:.78rem;}
.company-current__link{color:var(--brand);font-weight:500;text-decoration:none;}
.company-current__link:hover,
.company-current__link:focus-visible{text-decoration:underline;outline:none;}
.company-current__link.is-disabled{color:rgba(148,163,184,.6);pointer-events:none;text-decoration:none;}
.company-suggestion--empty{cursor:default;padding:12px;color:var(--muted);font-style:italic;}
.company-select-inline{display:inline;}
.company-select-inline input[type="hidden"]{display:none;}
.company-select-link{background:none;border:0;color:var(--brand);cursor:pointer;font:inherit;padding:0;}
.company-select-link:hover,
.company-select-link:focus-visible{text-decoration:underline;outline:none;}
.sn-link.is-disabled,
.sn-link--action.is-disabled{pointer-events:none;opacity:.6;}
/* ===== Chat Widget Styles ===== */
.chat-toggle-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--color-text-dark);
  border: none;
  cursor: pointer;
  z-index: 1000;
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
 transition: all var(--transition-speed) var(--transition-ease);
}

.chat-toggle-button:hover {
  background: var(--color-accent-neon);
  box-shadow: 0 6px 20px rgba(34, 211, 238, 0.6);
  transform: translateY(-2px);
}

.chat-widget {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 350px;
  height: 500px;
 background: var(--color-bg-medium);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 10px 30px var(--color-shadow-dark);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  transition: transform var(--transition-speed) var(--transition-ease);
}

.chat-widget.hidden {
  display: none;
}

.chat-header {
 background: var(--color-accent-blue);
  color: var(--color-text-dark);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.chat-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.chat-close {
  background: none;
  border: none;
  color: inherit;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-light);
}

.chat-status {
  padding: 8px 16px;
  background: rgba(148, 163, 184, 0.1);
  font-size: 0.85rem;
  color: var(--color-text-medium);
}

.chat-messages {
 flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 18px;
  position: relative;
  animation: fadeInUp 0.3s ease-out;
}

.message.from-agent {
  align-self: flex-start;
  background: rgba(148, 163, 184, 0.15);
  border-bottom-left-radius: 4px;
  color: var(--color-text-light);
}

.message.from-client {
  align-self: flex-end;
  background: var(--color-accent-blue);
 color: var(--color-text-dark);
  border-bottom-right-radius: 4px;
}

.message.from-system {
  align-self: center;
  background: rgba(245, 158, 11, 0.2);
  color: #fed7aa;
  max-width: 90%;
  text-align: center;
  font-style: italic;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

.message.from-agent .message-header {
  color: var(--color-text-light);
}

.message.from-client .message-header {
  color: rgba(0, 16, 24, 0.8);
}

.message.from-system .message-header {
  color: #fed7aa;
}

.timestamp {
  font-weight: normal;
 opacity: 0.8;
}

.message-body {
  word-wrap: break-word;
  line-height: 1.4;
}

.chat-input-area {
  padding: 12px 16px;
  background: var(--color-bg-medium);
  border-top: 1px solid var(--color-border-light);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-input-area textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-sm);
  resize: vertical;
  font-family: inherit;
  font-size: 0.9rem;
  background: var(--color-bg-light);
  color: var(--color-text-light);
  min-height: 60px;
  max-height: 120px;
}

.chat-input-area textarea:focus {
  outline: none;
  border-color: var(--color-accent-blue);
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}

.chat-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.chat-actions .button {
  flex: 1;
}

.chat-actions .button.primary {
  flex: 2;
}

/* Animation for showing messages */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Modal Overlay Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-overlay.hidden {
  display: none;
}

.chat-modal {
  width: 90%;
  max-width: 500px;
  height: 70vh;
  max-height: 600px;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-medium);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 10px 30px var(--color-shadow-dark);
  border: 1px solid var(--color-border-light);
  overflow: hidden;
}

.chat-modal .chat-header {
  background: var(--color-accent-blue);
  color: var(--color-text-dark);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-modal .chat-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  color: inherit;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-modal .chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-light);
}

.chat-modal .chat-status {
  padding: 8px 16px;
  background: rgba(148, 163, 184, 0.1);
  font-size: 0.85rem;
  color: var(--color-text-medium);
}

.chat-modal .chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-modal .message {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 18px;
  position: relative;
  animation: fadeInUp 0.3s ease-out;
}

.chat-modal .message.from-agent {
  align-self: flex-start;
  background: rgba(148, 163, 184, 0.15);
  border-bottom-left-radius: 4px;
  color: var(--color-text-light);
}

.chat-modal .message.from-client {
  align-self: flex-end;
  background: var(--color-accent-blue);
  color: var(--color-text-dark);
  border-bottom-right-radius: 4px;
}

.chat-modal .message.from-system {
  align-self: center;
  background: rgba(245, 158, 11, 0.2);
  color: #fed7aa;
  max-width: 90%;
  text-align: center;
  font-style: italic;
}

.chat-modal .message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

.chat-modal .message.from-agent .message-header {
  color: var(--color-text-light);
}

.chat-modal .message.from-client .message-header {
  color: rgba(0, 16, 24, 0.8);
}

.chat-modal .message.from-system .message-header {
  color: #fed7aa;
}

.chat-modal .message-body {
  word-wrap: break-word;
  line-height: 1.4;
}

.chat-modal .chat-input-area {
  padding: 12px 16px;
  background: var(--color-bg-medium);
  border-top: 1px solid var(--color-border-light);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-modal .chat-input-area textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-sm);
  resize: vertical;
  font-family: inherit;
  font-size: 0.9rem;
  background: var(--color-bg-light);
  color: var(--color-text-light);
  min-height: 60px;
  max-height: 120px;
}

.chat-modal .chat-input-area textarea:focus {
  outline: none;
  border-color: var(--color-accent-blue);
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}

.chat-modal .chat-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.chat-modal .chat-actions .button {
  flex: 1;
}

.chat-modal .chat-actions .button.primary {
  flex: 2;
}

/* Responsive adjustments for modal chat */
@media (max-width: 768px) {
  .chat-modal {
    width: 95%;
    height: 80vh;
  }
}

@media (max-width: 480px) {
  .chat-modal {
    width: 98%;
    height: 90vh;
    max-height: none;
  }
  
  .chat-toggle-button {
    width: 50px;
    height: 50px;
    bottom: 15px;
    right: 15px;
  }
}


/* Chat Toggle Button Styles */
.chat-toggle-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    transition: all 0.3s ease;
}

.chat-toggle-button:hover {
    background-color: #0056b3;
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.chat-toggle-button:focus {
    outline: 2px solid #0056b3;
    outline-offset: 2px;
}

.chat-toggle-button svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: white;
    stroke-width: 2;
}

/* Modal Overlay Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    opacity: 1;
    visibility: visible;
    transition: all 0.3s ease;
}

.modal-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Chat Modal Styles */
.chat-modal {
    width: 400px;
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transform: translateY(0);
    transition: transform 0.3s ease;
}

.chat-header {
    background: #007bff;
    color: white;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-header h3 {
    margin: 0;
    font-size: 1.2em;
}

.modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chat-status {
    padding: 12px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.9em;
    color: #6c757d;
}

.chat-messages {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    max-height: 400px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.message {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 0.95em;
    line-height: 1.4;
}

.message.from-client {
    align-self: flex-end;
    background-color: #007bff;
    color: white;
    border-bottom-right-radius: 4px;
}

.message.from-agent {
    align-self: flex-start;
    background-color: #e9ecef;
    color: #333;
    border-bottom-left-radius: 4px;
}

.message.from-system {
    align-self: center;
    background-color: #6c757d;
    color: white;
    text-align: center;
    border-radius: 18px;
    font-size: 0.85em;
    padding: 6px 12px;
}

.message-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 0.8em;
}

.sender-name {
    font-weight: bold;
    color: inherit;
}

.timestamp {
    color: #6c757d;
}

.chat-input-area {
    padding: 16px;
    border-top: 1px solid #e9ecef;
    background: white;
}

.chat-input-area textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    resize: vertical;
    min-height: 80px;
    margin-bottom: 10px;
    font-family: inherit;
}

.chat-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.chat-actions .button {
    margin: 0;
}