/* ===== App Shell (светлая тема в стиле material) ===== */

:root{
  --ng-primary:#4594D9;
  --ng-primary-600:#3b86c7;
  --ng-bg:#f7f9fc;
  --ng-surface:#ffffff;
  --ng-text:#1e293b;
  --ng-muted:#64748b;
  --ng-border:#e5eef6;
  --ng-shadow:0 12px 28px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.06);
}

html,body{height:100%}
body.app-shell{
  background:
    radial-gradient(40rem 40rem at 10% 10%, rgba(69,148,217,0.10), transparent 60%),
    radial-gradient(50rem 50rem at 90% 20%, rgba(69,148,217,0.07), transparent 60%),
    var(--ng-bg);
  color: var(--ng-text);
}

/* Topbar */
.ng-topbar{
  background: var(--ng-surface);
  box-shadow: var(--ng-shadow);
  border: 0;
  min-height:60px;
}
.ng-topbar .navbar-brand{ display:flex; align-items:center; gap:.6rem; }
.ng-logo{ height:40px; width:auto; }
.ng-appbar-accent{ height:4px; background: linear-gradient(90deg, var(--ng-primary), #66b3ff); }

/* Layout */
.ng-container{ display:flex; min-height: calc(100vh - 64px); }

/* Sidebar */
.ng-sidebar{
  width: 280px; flex: 0 0 280px;
  background: var(--ng-surface);
  border-right: 1px solid var(--ng-border);
  display:flex; flex-direction:column;
}
.ng-sidebar__user{ padding: 16px; border-bottom: 1px solid var(--ng-border); }
.ng-usercard{ display:flex; align-items:center; gap:12px; }
.ng-avatar{
  height:48px; width:48px; border-radius:50%; object-fit:cover;
  background:#eef3f8; border:1px solid #e6eef7;
}
.ng-username{ display:block; color:var(--ng-text); font-weight:700; text-decoration:none; }
.ng-username:hover{ text-decoration:underline; }
.ng-usernick{ color: var(--ng-muted); font-size:.85rem; }

.ng-sidebar__section{ padding: 12px; color: var(--ng-muted); font-size:.85rem; font-weight:600; }
.ng-nav{ padding: 8px; overflow:auto; }

/* Пункты меню: без "подпрыгивания" */
.ng-nav a{
  position:relative;
  display:flex; align-items:center; gap:.75rem;
  padding: .65rem .8rem;
  border-radius: 12px;
  color: var(--ng-text); text-decoration:none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
  border: 1px solid transparent;          /* постоянная рамка фиксирует размер */
  overflow: hidden;                        /* чтобы ripple (если будет) не вылезал */
  min-height: 44px;                        /* стабильная высота для клика иконки/текста */
}
.ng-nav a:hover{ background:#f1f6fb; }
.ng-nav a:focus,
.ng-nav a:active{
  outline: none !important;
  box-shadow: none !important;             /* убираем фокус-тень браузера */
}
.ng-nav a.active{
  background:#e7f2fd;
  border-color: rgba(69,148,217,.35);
  box-shadow: inset 0 0 0 1px rgba(69,148,217,.15);
}
.ng-nav i{ font-size: 1.1rem; color: var(--ng-primary); }

.ng-sidebar__bottom{ margin-top:auto; padding:12px; border-top:1px solid var(--ng-border); }

/* Sidebar toggle (мобилка) */
.ng-sidebar-toggle{ display:none; }
@media (max-width: 991.98px){
  .ng-sidebar{ position: fixed; left:-300px; top:64px; bottom:0; z-index:1030; transition:left .2s ease; }
  .ng-sidebar.open{ left:0; }
  .ng-container{ flex-direction:column; }
  .ng-sidebar-toggle{ display:inline-flex; align-items:center; gap:.5rem; }
}

/* Content */
.ng-content{ flex:1 1 auto; padding: 20px; }

/* Cards */
.card{ border:0; border-radius: 16px; box-shadow: var(--ng-shadow); }

/* Buttons + ripple (только для .btn) */
.btn-primary{ background:var(--ng-primary); border-color:var(--ng-primary); }
.btn-primary:hover{ background:var(--ng-primary-600); border-color:var(--ng-primary-600); }
.btn{ position:relative; overflow:hidden; }
.btn .ripple{
  position:absolute;border-radius:50%;transform:scale(0);
  animation:ripple .6s linear;background:rgba(255,255,255,.35);pointer-events:none;
}
@keyframes ripple{ to{transform:scale(4);opacity:0;} }

/* Module cards (home) */
.module-card{ text-decoration:none; color:inherit; }
.module-card .card-body{ display:flex; align-items:center; gap:14px; }
.module-icon{
  display:flex; align-items:center; justify-content:center;
  height:48px; width:48px; border-radius:14px; background:#e8f3ff; color:var(--ng-primary);
  font-size:1.3rem;
}
.module-title{ margin:0; font-weight:700; }
.module-sub{ margin:0; color:var(--ng-muted); font-size:.9rem; }

/* Большой переключатель */
.switch-lg .form-check-input {
  width: 3.25rem;
  height: 1.8rem;
}
.switch-lg .form-check-input:checked {
  background-color: var(--ng-primary);
  border-color: var(--ng-primary);
}
.switch-lg .form-check-input:focus {
  box-shadow: 0 0 0 .2rem rgba(69,148,217,.18);
}