/* === GLOBAL LAYOUT RESET (КРИТИЧНО) === */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}


.app {
    width: 100%;
    max-width: 100%;
    margin: 0;
}


 :root{
      /* Brand palette (from brandbook) */
      --allur-soft-rose: #FFF5F5;
      --allur-soft-gray: #F8F8F7;
      --allur-rose: #FFB8B2;
      --allur-gray-300: #CCCCCC;
      --allur-accent: #FF7066;   /* bright coral */
      --allur-gray-500: #A1A1A1;
      --allur-danger: #F22E1F;   /* rich red */
      --allur-gray-600: #787878;
      --allur-danger-700: #CC000E;/* deep red */
      --allur-danger-800: #7F0011;/* darkest red */
      --allur-gray-700: #4F4F4F;
      --allur-gray-800: #282828;

      /* Semantic tokens */
      --bg: var(--allur-soft-gray);
      --surface: #fff;
      --surface-alt: var(--allur-soft-rose);
      --text: var(--allur-gray-800);
      --muted: var(--allur-gray-600);
      --border: var(--allur-gray-300);
      --primary: var(--allur-accent);
      --primary-strong: var(--allur-danger);
      --primary-deep: var(--allur-danger-700);
      --ok: #27ae60;
      --warn: #f39c12;
      --bad: var(--allur-danger);
      --chip: var(--allur-rose);
    }

    html, body { height: 100%; }
    body{
      background: var(--bg);
      color: var(--text);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Inter, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    }

    /* App shell */
    .app{
      display: grid;
      grid-template-columns: 280px 1fr;
      grid-template-rows: 64px 1fr;
      grid-template-areas:
        "sidebar header"
        "sidebar main";
      min-height: 100vh;
    }
    @media (max-width: 992px){
      .app{ grid-template-columns: 1fr; grid-template-rows: 56px auto 1fr; grid-template-areas: "header" "sidebar" "main"; }
    }

    .app-header{
      grid-area: header;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between;
      padding: .5rem 1rem;
      position: sticky; top: 0; z-index: 1000;
    }
    .brand{
      display: flex; align-items: center; gap: .75rem;
      font-weight: 700; letter-spacing: .3px;
    }
    .brand-badge{ width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: var(--primary); color: #fff; font-weight: 800; }

    .app-sidebar{
      grid-area: sidebar;
      background: var(--surface);
      border-right: 1px solid var(--border);
      padding: 1rem;
    }
    .sidebar-section-title{ font-size: .8rem; text-transform: uppercase; color: var(--muted); margin: .75rem 1rem; letter-spacing: .06em; }
    .nav-link{ border-radius: 12px; padding:.6rem .8rem; color: var(--text); font-weight: 600; display: flex; align-items: center; gap: .6rem; }
    .nav-link:hover{ background: var(--surface-alt); color: var(--primary-deep); }
    .nav-link.active{ background: var(--primary); color: #fff; }

    .app-main{ grid-area: main; padding: 1rem; }

    /* Cards */
    .kpi-card{ border: 1px solid var(--border); background: var(--surface); border-radius: 16px; padding: 1rem; height: 100%; }
    .kpi-title{ color: var(--muted); font-size:.85rem; }
    .kpi-value{ font-size: 1.8rem; font-weight: 800; letter-spacing: .3px; }
    .kpi-trend{ font-size:.9rem; }
    .trend-up{ color: var(--ok); }
    .trend-down{ color: var(--bad); }

    /* Chips */
    .chip{ display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; padding:.2rem .55rem; border-radius:999px; background: var(--chip); color: var(--allur-gray-800); border: 1px solid var(--border); }

    /* Tables */
    .table thead th{ color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--border); }
    .table tbody tr + tr td{ border-top: 1px solid var(--border); }
    .table-hover tbody tr:hover{ background: var(--surface-alt); }

    /* Lift status grid */
    .lift{
      border: 1px solid var(--border); border-radius: 14px; padding: .9rem; background: var(--surface);
    }
    .lift .status-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:.4rem; }
    .dot-free{ background: var(--ok); }
    .dot-busy{ background: var(--warn); }
    .dot-off{ background: var(--bad); }

    /* Search/filter bar */
    .filter-bar{ border: 1px solid var(--border); background: var(--surface); border-radius: 14px; padding: .9rem; }
    .btn-primary{ background: var(--primary); border-color: var(--primary); }
    .btn-primary:hover{ background: var(--primary-strong); border-color: var(--primary-strong); }
    .btn-outline-danger{ color: var(--primary-deep); border-color: var(--primary-deep); }
    .btn-outline-danger:hover{ color: #fff; background: var(--primary-deep); }

    /* Badges for events */
    .badge-in{ background: var(--ok); }
    .badge-out{ background: var(--bad); }
    .badge-service{ background: var(--warn); color: #000; }

    /* Footer */
    .app-footer{ color: var(--muted); font-size:.85rem; padding: .5rem 1rem; }

    /* Small helpers */
    .icon{ width: 18px; height:18px; display:inline-block; }

.thumb-zoom { cursor: zoom-in; }
  .thumb-zoom:hover { opacity: .9; }
  
  
.nav-link::before{
  font-family: 'IcoMoon';
  font-size: 16px;
  line-height: 1;
  margin-right: .6rem;
  display: inline-block;
}

/* Dashboard */
.nav-link.icon-dashboard::before{
  content: "\e900"; /* dashboard */
}

/* Архив */
.nav-link.icon-archive::before{
  content: "\e95c"; /* folder */
}

/* Инциденты */
.nav-link.icon-incident::before{
  content: "\ea0f"; /* warning */
}

/* Логи */
.nav-link.icon-logs::before{
  content: "\e9a8"; /* file-text */
}
a.nav-link,
a.nav-link:hover,
a.nav-link:focus,
a.nav-link:active{
  text-decoration: none !important;
}


.app-main > .row_mod {
    margin-top: 1rem; /* или 1.5rem */
}

/* =========================
   LOGIN PAGE
   ========================= */

.login-center {
  max-width: 380px;
  margin: 0 auto;
  padding: 2rem 2.2rem;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* Заголовок */
.login-center h1,
.login-center h2,
.login-center h3 {
  text-align: center;
  margin-bottom: 1.5rem;
  font-weight: 800;
}

/* Поля */
.login-center .control-group,
.login-center .form-group {
  margin-bottom: 1.1rem;
}

.login-center label {
  display: block;
  margin-bottom: .35rem;
  font-size: .85rem;
  color: var(--muted);
  font-weight: 600;
}

.login-center input[type="text"],
.login-center input[type="password"] {
  width: 100%;
  padding: .65rem .75rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: .95rem;
}

.login-center input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(255,112,102,.15);
}

/* Кнопка */
.login-center button[type="submit"],
.login-center .btn-primary {
  width: 100%;
  margin-top: .8rem;
  padding: .7rem;
  border-radius: 14px;
  font-size: .95rem;
  font-weight: 700;
  background: var(--primary);
  border: none;
}

.login-center button:hover {
  background: var(--primary-strong);
}

/* Запомнить меня */
.login-center .remember {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  margin-top: .4rem;
}

/* Ссылки */
.login-center ul {
  margin-top: 1.2rem;
  padding-left: 0;
  list-style: none;
  text-align: center;
}

.login-center ul li {
  margin-bottom: .4rem;
}

.login-center ul a {
  font-size: .8rem;
  color: var(--muted);
  text-decoration: none;
}

.login-center ul a:hover {
  color: var(--primary);
}

/* WebAuthn */
.login-center .webauthn-button {
  width: 100%;
  margin-top: .6rem;
  border-radius: 12px;
}

.row_sid{
  margin-top: 4rem;
}