/*
 * Berg Server Panel — Design System
 * Расширяет Bootstrap 5.3. Не переписывает — только дополняет.
 */

/* ══════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ══════════════════════════════════════════════════════════════ */
:root {
  /* Status colors */
  --status-online:   #3fb950;
  --status-warning:  #d29922;
  --status-critical: #f85149;
  --status-offline:  #8b949e;
  --status-pending:  #f0883e;
  --status-running:  #58a6ff;
  --status-stopped:  #8b949e;
  --status-enabled:  #3fb950;
  --status-disabled: #8b949e;

  /* Typography */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* Animation */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;

  /* Component tokens */
  --table-row-hover: rgba(88, 166, 255, 0.05);
  --skeleton-base:   rgba(110, 118, 129, 0.12);
  --skeleton-shine:  rgba(110, 118, 129, 0.22);
}

[data-bs-theme="light"] {
  --table-row-hover: rgba(31, 111, 235, 0.05);
  --skeleton-base:   rgba(0, 0, 0, 0.07);
  --skeleton-shine:  rgba(0, 0, 0, 0.13);
}

/* ══════════════════════════════════════════════════════════════
   2. BASE TYPOGRAPHY
   ══════════════════════════════════════════════════════════════ */
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code, pre, .font-monospace, .mono {
  font-family: var(--font-mono) !important;
}

/* ══════════════════════════════════════════════════════════════
   3. STATUS BADGES
   ══════════════════════════════════════════════════════════════ */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.badge-status::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.badge-online    { background: rgba(63,185,80,.15);  color: #3fb950; }
.badge-online::before    { background: #3fb950; box-shadow: 0 0 0 2px rgba(63,185,80,.25); }

.badge-offline   { background: rgba(139,148,158,.12); color: #8b949e; }
.badge-offline::before   { background: #8b949e; }

.badge-warning   { background: rgba(210,153,34,.15);  color: #d29922; }
.badge-warning::before   { background: #d29922; }

.badge-critical  { background: rgba(248,81,73,.15);   color: #f85149; }
.badge-critical::before  { background: #f85149; box-shadow: 0 0 0 2px rgba(248,81,73,.25); }

.badge-pending   { background: rgba(240,136,62,.15);  color: #f0883e; }
.badge-pending::before   { background: #f0883e; animation: badge-blink 1.4s ease-in-out infinite; }

.badge-running   { background: rgba(88,166,255,.15);  color: #58a6ff; }
.badge-running::before   { background: #58a6ff; animation: badge-blink 1.2s ease-in-out infinite; }

.badge-stopped   { background: rgba(139,148,158,.12); color: #8b949e; }
.badge-stopped::before   { background: #8b949e; }

.badge-enabled   { background: rgba(63,185,80,.12);   color: #3fb950; }
.badge-enabled::before   { background: #3fb950; }

.badge-disabled  { background: rgba(139,148,158,.12); color: #8b949e; }
.badge-disabled::before  { background: #8b949e; }

.badge-upgradable { background: rgba(210,153,34,.15); color: #d29922; }
.badge-upgradable::before { background: #d29922; }

.badge-reboot    { background: rgba(248,81,73,.12);   color: #f85149; }
.badge-reboot::before    { background: #f85149; }

.badge-failed    { background: rgba(248,81,73,.15);   color: #f85149; }
.badge-failed::before    { background: #f85149; }

.badge-success   { background: rgba(63,185,80,.15);   color: #3fb950; }
.badge-success::before   { background: #3fb950; }

@keyframes badge-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .35; }
}

/* Light theme badge fixes */
[data-bs-theme="light"] .badge-online    { color: #1a7f37; background: rgba(63,185,80,.12); }
[data-bs-theme="light"] .badge-warning   { color: #9a6700; background: rgba(210,153,34,.12); }
[data-bs-theme="light"] .badge-critical,
[data-bs-theme="light"] .badge-failed    { color: #cf222e; background: rgba(248,81,73,.10); }
[data-bs-theme="light"] .badge-pending   { color: #bc4c00; background: rgba(240,136,62,.12); }
[data-bs-theme="light"] .badge-running   { color: #0550ae; background: rgba(88,166,255,.12); }
[data-bs-theme="light"] .badge-enabled,
[data-bs-theme="light"] .badge-success   { color: #1a7f37; background: rgba(63,185,80,.12); }
[data-bs-theme="light"] .badge-upgradable { color: #9a6700; background: rgba(210,153,34,.10); }

/* ══════════════════════════════════════════════════════════════
   4. TABLES
   ══════════════════════════════════════════════════════════════ */
.table-panel {
  border-collapse: separate;
  border-spacing: 0;
}

.table-panel thead th {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom-width: 1px;
  padding: 10px 12px;
  white-space: nowrap;
}

.table-panel tbody td {
  padding: 10px 12px;
  vertical-align: middle;
  border-bottom: 1px solid var(--bs-card-border-color, #30363d);
  transition: background .1s;
}

.table-panel tbody tr:last-child td {
  border-bottom: none;
}

.table-panel tbody tr:hover td {
  background: var(--table-row-hover);
}

/* Actions column — always flush right */
.table-panel .col-actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

/* ══════════════════════════════════════════════════════════════
   5. BUTTONS
   ══════════════════════════════════════════════════════════════ */

/* Loading state — добавляется через JS через btn.classList.add('btn-loading') */
.btn-loading {
  position: relative;
  pointer-events: none;
  opacity: .75;
}

.btn-loading .btn-text { visibility: hidden; }

.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin .6s linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* Icon-only button */
.btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  flex-shrink: 0;
}

.btn-icon.btn-sm {
  width: 26px;
  height: 26px;
  font-size: .8rem;
}

/* Danger button confirmation glow */
.btn-danger-confirm:focus-visible {
  box-shadow: 0 0 0 3px rgba(248,81,73,.3);
}

/* Button press micro-animation */
.btn:not(:disabled):active {
  transform: scale(0.97);
  transition: transform .08s;
}

/* ══════════════════════════════════════════════════════════════
   6. CARDS
   ══════════════════════════════════════════════════════════════ */

/* Stat / overview card */
.stat-card-v2 {
  border: 1px solid var(--bs-card-border-color, #30363d);
  border-radius: 10px;
  padding: var(--sp-5);
  transition: border-color .15s, box-shadow .15s;
}

.stat-card-v2:hover {
  border-color: rgba(var(--accent-rgb, 88,166,255), .4);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb, 88,166,255), .15);
}

.stat-card-v2 .stat-label {
  font-size: .72rem;
  font-weight: 500;
  color: var(--bs-secondary-color, #8b949e);
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.stat-card-v2 .stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stat-card-v2 .stat-footer {
  margin-top: 8px;
  font-size: .78rem;
  color: var(--bs-secondary-color, #8b949e);
}

/* Server info card */
.server-header-card {
  border: 1px solid var(--bs-card-border-color, #30363d);
  border-radius: 12px;
  padding: var(--sp-6);
  margin-bottom: var(--sp-6);
}

/* ══════════════════════════════════════════════════════════════
   7. SKELETON LOADING
   ══════════════════════════════════════════════════════════════ */
.skeleton {
  background: var(--skeleton-base);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--skeleton-shine) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: skeleton-sweep 1.5s ease-in-out infinite;
}

@keyframes skeleton-sweep {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-text {
  height: 14px;
  margin-bottom: 8px;
  border-radius: 3px;
}

.skeleton-text.short  { width: 40%; }
.skeleton-text.medium { width: 65%; }
.skeleton-text.full   { width: 100%; }

.skeleton-title {
  height: 20px;
  width: 55%;
  margin-bottom: 12px;
  border-radius: 4px;
}

.skeleton-badge {
  height: 22px;
  width: 70px;
  border-radius: 20px;
  display: inline-block;
}

.skeleton-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bs-card-border-color, #30363d);
}

/* Skeleton table */
.skeleton-table .skeleton-row:last-child {
  border-bottom: none;
}

/* ══════════════════════════════════════════════════════════════
   8. EMPTY / ERROR / LOADING STATES
   ══════════════════════════════════════════════════════════════ */
.state-empty, .state-error, .state-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.state-icon {
  font-size: 2.5rem;
  opacity: .25;
  margin-bottom: 12px;
}

.state-title {
  font-size: .95rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.state-desc {
  font-size: .82rem;
  color: var(--bs-secondary-color, #8b949e);
  max-width: 320px;
  margin-bottom: 16px;
}

.state-error .state-icon {
  color: #f85149;
  opacity: .6;
}

/* Inline error block */
.error-block {
  border: 1px solid rgba(248,81,73,.3);
  border-left: 3px solid #f85149;
  border-radius: 6px;
  padding: 12px 16px;
  background: rgba(248,81,73,.06);
  font-size: .85rem;
}

.error-block .error-title {
  font-weight: 600;
  color: #f85149;
  margin-bottom: 4px;
}

.error-block .error-detail {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--bs-secondary-color, #8b949e);
  margin-top: 6px;
}

[data-bs-theme="light"] .error-block {
  background: rgba(248,81,73,.04);
  color: #cf222e;
}

/* Warning block */
.warning-block {
  border: 1px solid rgba(210,153,34,.3);
  border-left: 3px solid #d29922;
  border-radius: 6px;
  padding: 12px 16px;
  background: rgba(210,153,34,.07);
  font-size: .85rem;
}

.warning-block .warning-title {
  font-weight: 600;
  color: #d29922;
  margin-bottom: 4px;
}

[data-bs-theme="light"] .warning-block {
  background: rgba(210,153,34,.06);
  color: #9a6700;
}

/* Info block */
.info-block {
  border: 1px solid rgba(88,166,255,.2);
  border-left: 3px solid var(--accent, #58a6ff);
  border-radius: 6px;
  padding: 12px 16px;
  background: rgba(88,166,255,.06);
  font-size: .85rem;
}

/* ══════════════════════════════════════════════════════════════
   9. FORMS
   ══════════════════════════════════════════════════════════════ */

/* Required field marker */
.label-required::after {
  content: ' *';
  color: #f85149;
}

/* Inline field validation */
.field-error .form-control,
.field-error .form-select {
  border-color: #f85149;
}

.field-error-msg {
  font-size: .78rem;
  color: #f85149;
  margin-top: 4px;
}

/* Focus ring — more prominent */
.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 88,166,255), .2);
  border-color: var(--accent, #58a6ff);
  outline: none;
}

/* ══════════════════════════════════════════════════════════════
   10. SYSCONFIG INFO GRID
   ══════════════════════════════════════════════════════════════ */
.sysinfo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.sysinfo-cell {
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(110,118,129,.07);
  border: 1px solid var(--bs-card-border-color, #30363d);
  transition: border-color .12s;
}

.sysinfo-cell:hover {
  border-color: rgba(var(--accent-rgb, 88,166,255), .3);
}

.sysinfo-cell .sc-label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bs-secondary-color, #8b949e);
  margin-bottom: 4px;
}

.sysinfo-cell .sc-value {
  font-family: var(--font-mono);
  font-size: .82rem;
  word-break: break-all;
  line-height: 1.4;
}

.sysinfo-cell.sc-warn {
  border-color: rgba(210,153,34,.4);
  background: rgba(210,153,34,.06);
}

.sysinfo-cell.sc-warn .sc-value {
  color: #d29922;
}

[data-bs-theme="light"] .sysinfo-cell {
  background: rgba(0,0,0,.03);
}

/* Package kept-back card */
.kept-back-card {
  border: 1px solid rgba(240,136,62,.35);
  border-left: 3px solid #f0883e;
  border-radius: 8px;
  background: rgba(240,136,62,.07);
  padding: 14px 16px;
}

.kept-back-card .kb-title {
  font-weight: 600;
  color: #f0883e;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.kept-back-card .kb-packages {
  font-family: var(--font-mono);
  font-size: .8rem;
  background: rgba(0,0,0,.15);
  border-radius: 4px;
  padding: 6px 10px;
  margin: 6px 0;
  word-break: break-all;
}

[data-bs-theme="light"] .kept-back-card {
  background: rgba(240,136,62,.06);
}

[data-bs-theme="light"] .kept-back-card .kb-packages {
  background: rgba(0,0,0,.05);
}

/* ══════════════════════════════════════════════════════════════
   11. PROGRESS BARS
   ══════════════════════════════════════════════════════════════ */
.resource-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(110,118,129,.15);
  overflow: hidden;
}

.resource-bar .fill {
  height: 100%;
  border-radius: 3px;
  transition: width .4s var(--ease-out);
}

.resource-bar .fill.ok       { background: var(--status-online); }
.resource-bar .fill.warn     { background: var(--status-warning); }
.resource-bar .fill.critical { background: var(--status-critical); }

/* ══════════════════════════════════════════════════════════════
   12. MICRO-ANIMATIONS
   ══════════════════════════════════════════════════════════════ */

/* Card hover lift */
.card-hover {
  transition: box-shadow .15s var(--ease-out), transform .15s var(--ease-out);
}
.card-hover:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  transform: translateY(-1px);
}

/* Fade-in for dynamic content */
.fade-in {
  animation: fadeIn .18s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Slide-in from right (modal/toast) */
.slide-in-right {
  animation: slideInRight .2s var(--ease-out) forwards;
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Status update flash */
.status-flash {
  animation: statusFlash .5s ease-out;
}

@keyframes statusFlash {
  0%, 100% { background: transparent; }
  30%      { background: rgba(var(--accent-rgb, 88,166,255), .12); }
}

/* Sidebar item active indicator */
.nav-link {
  position: relative;
  transition: background .12s, color .12s;
}

/* Smooth modal transitions */
.modal.fade .modal-dialog {
  transition: transform .2s var(--ease-out), opacity .15s;
}

.modal.fade .modal-dialog {
  transform: translateY(-8px) scale(0.98);
}

.modal.show .modal-dialog {
  transform: none;
}

/* Dropdown smooth */
.dropdown-menu {
  animation: dropdownIn .14s var(--ease-out) forwards;
}

@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════
   13. TOASTS — improved
   ══════════════════════════════════════════════════════════════ */
#toast-area .toast {
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.25) !important;
  animation: slideInRight .18s var(--ease-out);
}

/* ══════════════════════════════════════════════════════════════
   14. TOPBAR IMPROVEMENTS
   ══════════════════════════════════════════════════════════════ */
.topbar {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ══════════════════════════════════════════════════════════════
   15. SERVER STATUS DOT — improved
   ══════════════════════════════════════════════════════════════ */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.status-dot.online  { background: var(--status-online);  box-shadow: 0 0 0 2px rgba(63,185,80,.25); }
.status-dot.offline,
.status-dot.error   { background: var(--status-critical); }
.status-dot.warning { background: var(--status-warning); }
.status-dot.unknown { background: var(--status-offline); }
.status-dot.running { background: var(--accent, #58a6ff); animation: status-pulse 1.2s ease-in-out infinite; }

@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(var(--accent-rgb, 88,166,255), .5); }
  50%       { box-shadow: 0 0 0 4px rgba(var(--accent-rgb, 88,166,255), 0); }
}

/* ══════════════════════════════════════════════════════════════
   16. SIDEBAR IMPROVEMENTS
   ══════════════════════════════════════════════════════════════ */

/* Active nav item — left accent bar */
.nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--accent, #58a6ff);
}

/* Sidebar collapse transition on mobile */
@media (max-width: 767px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1040;
    transition: transform .22s var(--ease-out);
  }

  .sidebar.collapsed {
    transform: translateX(-100%);
  }
}

/* ══════════════════════════════════════════════════════════════
   17. RESPONSIVE TABLE WRAPPER
   ══════════════════════════════════════════════════════════════ */
.table-responsive {
  border-radius: inherit;
}

/* Prevent table from breaking layout on mobile */
@media (max-width: 575px) {
  .table-panel thead { display: none; }
  .table-panel tbody tr {
    display: block;
    border-bottom: 1px solid var(--bs-card-border-color, #30363d);
    padding: 8px 0;
  }
  .table-panel tbody td {
    display: flex;
    justify-content: space-between;
    border-bottom: none;
    padding: 4px 12px;
    font-size: .85rem;
  }
  .table-panel tbody td::before {
    content: attr(data-label);
    font-size: .72rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #8b949e);
    text-transform: uppercase;
    letter-spacing: .06em;
    flex-shrink: 0;
    margin-right: 8px;
  }
}

/* ══════════════════════════════════════════════════════════════
   18. ACCESSIBILITY — focus-visible
   ══════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--accent, #58a6ff);
  outline-offset: 2px;
}

a:focus-visible,
button:focus-visible {
  border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════
   19. REDUCED MOTION
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   20. MISC UTILITIES
   ══════════════════════════════════════════════════════════════ */
.text-mono { font-family: var(--font-mono); }
.text-xs   { font-size: .72rem; }
.text-11   { font-size: .7rem; }

/* Danger zone visual separator */
.danger-zone {
  border-top: 1px solid rgba(248,81,73,.25);
  padding-top: 12px;
  margin-top: 12px;
}

/* Card header compact */
.card-header-compact {
  padding: 8px 14px;
  font-size: .82rem;
  font-weight: 600;
}

/* Job status colors */
.job-status-pending  { color: var(--status-pending); }
.job-status-running  { color: var(--status-running); }
.job-status-done     { color: var(--status-online); }
.job-status-failed   { color: var(--status-critical); }

/* Truncated path with title tooltip */
.path-truncate {
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: bottom;
}

/* Copy-to-clipboard button */
.btn-copy {
  border: none;
  background: transparent;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  opacity: .5;
  transition: opacity .12s;
  font-size: .8rem;
}

.btn-copy:hover { opacity: 1; }
.btn-copy.copied { color: var(--status-online); opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   21. UI POLISH — SECOND PASS
   ══════════════════════════════════════════════════════════════ */

/* ── Button transitions & hover feel ─────────────────────────── */
.btn {
  transition:
    background-color .12s ease,
    border-color     .12s ease,
    color            .12s ease,
    box-shadow       .12s ease,
    transform        .08s ease;
}

/* Tighter outline button focus rings per semantic color */
.btn-outline-primary:focus-visible  { box-shadow: 0 0 0 3px rgba(var(--accent-rgb,88,166,255),.28); }
.btn-outline-danger:focus-visible   { box-shadow: 0 0 0 3px rgba(248,81,73,.28); }
.btn-outline-warning:focus-visible  { box-shadow: 0 0 0 3px rgba(210,153,34,.28); }
.btn-outline-success:focus-visible  { box-shadow: 0 0 0 3px rgba(63,185,80,.28); }
.btn-outline-info:focus-visible     { box-shadow: 0 0 0 3px rgba(57,208,216,.28); }
.btn-outline-secondary:focus-visible { box-shadow: 0 0 0 3px rgba(110,118,129,.28); }

/* Solid button focus rings */
.btn-primary:focus-visible  { box-shadow: 0 0 0 3px rgba(var(--accent-rgb,88,166,255),.35); }
.btn-danger:focus-visible   { box-shadow: 0 0 0 3px rgba(248,81,73,.35); }
.btn-success:focus-visible  { box-shadow: 0 0 0 3px rgba(63,185,80,.35); }

/* Disabled state — more clearly inactive */
.btn:disabled,
.btn.disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Info-block light theme fix ───────────────────────────────── */
[data-bs-theme="light"] .info-block {
  background: rgba(88,166,255,.05);
  border-color: rgba(88,166,255,.35);
  color: #0550ae;
}

/* ── Inline code ─────────────────────────────────────────────── */
code:not([class]) {
  padding: 1px 5px;
  border-radius: 4px;
  font-size: .85em;
  font-family: var(--font-mono);
  background: rgba(110,118,129,.15);
  color: var(--bs-body-color);
}

[data-bs-theme="light"] code:not([class]) {
  background: rgba(175,184,193,.22);
  color: #1f2328;
}

/* Pre / log block */
pre {
  border-radius: 6px;
  font-size: .82rem;
  line-height: 1.6;
}

/* ── Card header consistency ──────────────────────────────────── */
.card-header {
  font-size: .875rem;
  padding: 10px 16px;
}

/* ── Table th typography ──────────────────────────────────────── */
.table thead th {
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}

/* ── Main-content scrollbar ───────────────────────────────────── */
.main-content::-webkit-scrollbar { width: 6px; }
.main-content::-webkit-scrollbar-track { background: transparent; }
.main-content::-webkit-scrollbar-thumb { background: rgba(110,118,129,.18); border-radius: 3px; }
.main-content::-webkit-scrollbar-thumb:hover { background: rgba(110,118,129,.38); }

/* ── Topbar: hairline shadow for depth ────────────────────────── */
.topbar {
  box-shadow: 0 1px 0 var(--sidebar-border);
}

/* ── Form label consistency ───────────────────────────────────── */
.form-label {
  font-size: .8125rem;
  font-weight: 500;
  margin-bottom: .3rem;
}

.form-text {
  font-size: .76rem;
}

/* ── Badge typography ─────────────────────────────────────────── */
.badge {
  font-weight: 600;
  letter-spacing: .02em;
}

/* ── Dropdown item consistency ────────────────────────────────── */
.dropdown-item {
  font-size: .875rem;
  padding: .375rem .875rem;
  transition: background .1s;
}

/* ── Table action column spacing ──────────────────────────────── */
.text-end .btn + .btn,
.col-actions .btn + .btn {
  margin-left: 3px;
}

/* ── Light theme table-dark header fix ────────────────────────── */
[data-bs-theme="light"] .table-dark thead {
  --bs-table-bg: #f0f2f5;
  --bs-table-color: #1f2328;
  --bs-table-border-color: #d0d7de;
}

/* ── Status dot light theme ───────────────────────────────────── */
[data-bs-theme="light"] .status-dot.online  {
  background: #1a7f37;
  box-shadow: 0 0 0 2px rgba(26,127,55,.25);
}

/* ── Sidebar active item — stronger indicator ─────────────────── */
.nav-link.active {
  font-weight: 500;
}

/* ── Card subtle hover for server/stat cards ──────────────────── */
.card-interactive {
  transition: border-color .15s, box-shadow .15s;
  cursor: pointer;
}
.card-interactive:hover {
  border-color: rgba(var(--accent-rgb,88,166,255),.4) !important;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb,88,166,255),.12);
}

/* ── Select — consistent with form-control ────────────────────── */
.form-select {
  transition: border-color .12s, box-shadow .12s;
}

/* ── Input group separation ───────────────────────────────────── */
.input-group .btn {
  z-index: 1;
}

/* ── Toast area: stacking and width cap ───────────────────────── */
#toast-area {
  max-width: 400px;
}

/* ── Empty state — action button spacing ─────────────────────── */
.state-empty .state-action {
  margin-top: 14px;
}

/* ── Breadcrumb consistent sizing ─────────────────────────────── */
.breadcrumb {
  font-size: .82rem;
  margin-bottom: 0;
}

/* ── Page content vertical rhythm ─────────────────────────────── */
.page-content > .card + .card,
.page-content > .row + .card,
.page-content > .card + .row {
  margin-top: 1rem;
}

/* ── Card body comfortable padding ───────────────────────────── */
.card-body {
  padding: 1rem 1.125rem;
}

/* ── Progress bar — smoother ─────────────────────────────────── */
.progress {
  border-radius: 20px;
  overflow: hidden;
}

.progress-bar {
  transition: width .45s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

/* ── Table: last-col text-end shorthand ───────────────────────── */
.table .text-end { vertical-align: middle; }

/* ── Monospace in tables ──────────────────────────────────────── */
.table .font-monospace { font-size: .82em; }

/* ── Spinner sizes ────────────────────────────────────────────── */
.spinner-border-xs {
  width: 1rem;
  height: 1rem;
  border-width: .15em;
}

/* ── Pre-block inside cards ───────────────────────────────────── */
.card pre {
  margin-bottom: 0;
  background: transparent;
}

/* ── Light theme card border and bg ──────────────────────────── */
[data-bs-theme="light"] .card {
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}

/* ── Light theme: thead.table-dark stays readable ─────────────── */
[data-bs-theme="light"] .table-dark {
  --bs-table-bg:         #24292f;
  --bs-table-color:      #e6edf3;
  --bs-table-border-color: #30363d;
}

/* ── h3 page titles: consistent weight ───────────────────────── */
h1.h3, .h3 { font-weight: 700; letter-spacing: -.01em; }

/* ── Responsive page-content bottom padding ──────────────────── */
@media (max-width: 767px) {
  .page-content { padding: 1rem; }
}

/* ── Visible separator between form sections ──────────────────── */
.form-section + .form-section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bs-card-border-color, #30363d);
}

/* ── Action bar (save/cancel row) consistent bottom ──────────── */
.action-bar {
  display: flex;
  gap: .5rem;
  align-items: center;
  padding-top: 1rem;
  margin-top: .5rem;
  border-top: 1px solid var(--bs-card-border-color, #30363d);
}

/* ── Nav badge (count pill in sidebar) ───────────────────────── */
.nav-badge {
  font-size: .65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb,88,166,255),.18);
  color: var(--accent, #58a6ff);
  line-height: 1.5;
  letter-spacing: 0;
}

/* ── Card footer ─────────────────────────────────────────────── */
.card-footer {
  font-size: .82rem;
  padding: 8px 16px;
}

/* ── kbd element ─────────────────────────────────────────────── */
kbd {
  font-family: var(--font-mono);
  font-size: .78em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(110,118,129,.15);
  border: 1px solid rgba(110,118,129,.25);
  color: var(--bs-body-color);
  box-shadow: 0 1px 0 rgba(0,0,0,.2);
}

[data-bs-theme="light"] kbd {
  background: #f6f8fa;
  border-color: #d0d7de;
  color: #1f2328;
}

/* ── Pill counter on stat cards ──────────────────────────────── */
.stat-count {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* ── Table-sm row padding ─────────────────────────────────────── */
.table-sm td, .table-sm th {
  padding: .45rem .75rem;
}

/* ── Muted footer text ────────────────────────────────────────── */
.text-footer {
  font-size: .75rem;
  color: var(--bs-secondary-color, #8b949e);
}

/* ── Server name mono + truncate ─────────────────────────────── */
.server-name-cell {
  font-weight: 600;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Numeric column alignment ─────────────────────────────────── */
.col-num { font-variant-numeric: tabular-nums; text-align: right; }

/* ── Error inline in tables ───────────────────────────────────── */
.td-error {
  color: #f85149;
  font-size: .82rem;
}

[data-bs-theme="light"] .td-error { color: #cf222e; }

/* ── Success inline ───────────────────────────────────────────── */
.td-success { color: var(--status-online); font-size: .82rem; }

/* ══════════════════════════════════════════════════════════════
   22. DEPTH / 3D — объёмные кнопки и секции
   Отдельный слой поверх базовых стилей: глубина через многослойные
   тени, лёгкий градиентный блик и тактильный подъём при наведении.
   Параметры вынесены в переменные и адаптированы под тёмную/светлую тему.
   ══════════════════════════════════════════════════════════════ */

:root {
  --elev-1: 0 1px 2px rgba(15,23,42,.07), 0 2px 8px rgba(15,23,42,.06);
  --elev-2: 0 3px 6px rgba(15,23,42,.10), 0 10px 26px rgba(15,23,42,.12);
  --btn-sheen: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 48%, rgba(0,0,0,.07));
  --btn-depth: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.14), 0 2px 5px rgba(15,23,42,.18), 0 4px 12px rgba(15,23,42,.12);
  --btn-depth-hover: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.16), 0 5px 12px rgba(15,23,42,.24), 0 9px 22px rgba(15,23,42,.16);
  --btn-depth-active: inset 0 2px 4px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(15,23,42,.18);
}
[data-bs-theme="dark"] {
  --elev-1: 0 1px 2px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.38);
  --elev-2: 0 4px 12px rgba(0,0,0,.5), 0 14px 32px rgba(0,0,0,.42);
}

/* Solid-кнопки — приподнятые, с мягким бликом */
.btn-primary, .btn-secondary, .btn-success, .btn-danger,
.btn-warning, .btn-info, .btn-dark, .btn-light {
  background-image: var(--btn-sheen);
  box-shadow: var(--btn-depth);
}
.btn-primary:hover, .btn-secondary:hover, .btn-success:hover, .btn-danger:hover,
.btn-warning:hover, .btn-info:hover, .btn-dark:hover, .btn-light:hover {
  transform: translateY(-1px);
  box-shadow: var(--btn-depth-hover);
}
.btn-primary:not(:disabled):active, .btn-secondary:not(:disabled):active,
.btn-success:not(:disabled):active, .btn-danger:not(:disabled):active,
.btn-warning:not(:disabled):active, .btn-info:not(:disabled):active,
.btn-dark:not(:disabled):active, .btn-light:not(:disabled):active {
  transform: translateY(1px) scale(.99);
  box-shadow: var(--btn-depth-active);
}

/* Outline-кнопки — лёгкая тактильность без тяжёлой тени (кроме иконочных) */
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
.btn-outline-danger, .btn-outline-warning, .btn-outline-info {
  box-shadow: var(--elev-1);
}
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-success:hover,
.btn-outline-danger:hover, .btn-outline-warning:hover, .btn-outline-info:hover {
  transform: translateY(-1px);
  box-shadow: var(--elev-2);
}
/* Иконочные кнопки в таблицах оставляем чистыми, только подъём при наведении */
.btn-icon { box-shadow: none !important; }
.btn-icon:hover { transform: translateY(-1px); }

/* Секции/карточки — объёмные с мягкой тенью и верхним бликом */
.card {
  box-shadow: var(--elev-1);
  background-image: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 110px);
  transition: box-shadow .18s var(--ease-out, ease);
}
.card:hover { box-shadow: var(--elev-2); }
[data-bs-theme="dark"] .card { background-image: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 110px); }

/* Stat-карточки дашборда — заметный подъём при наведении (они кликабельны) */
.stat-card-v2 { box-shadow: var(--elev-1); }
.stat-card-v2:hover { transform: translateY(-2px); box-shadow: var(--elev-2); }

/* Уважение к настройке «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover, .btn-secondary:hover, .btn-success:hover, .btn-danger:hover,
  .btn-warning:hover, .btn-info:hover, .btn-dark:hover, .btn-light:hover,
  .btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-success:hover,
  .btn-outline-danger:hover, .btn-outline-warning:hover, .btn-outline-info:hover,
  .btn-icon:hover, .stat-card-v2:hover { transform: none; }
}