/* ============================================================
   StockFlow v4 — Custom CSS Overrides
   Only for effects that Tailwind can't handle natively
   ============================================================ */

/* ── Glass Panel Effect ────────────────────────────────── */
.glass-panel {
  background: rgba(23, 31, 51, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(58, 73, 74, 0.5);
}

/* ── Input Focus Glow ──────────────────────────────────── */
.input-glow:focus {
  box-shadow: 0 0 0 2px rgba(0, 220, 229, 0.2);
  border-color: #00dce5 !important;
  outline: none;
}

/* ── Button CTA Glow ───────────────────────────────────── */
.btn-glow {
  box-shadow: 0 0 15px rgba(0, 220, 229, 0.15);
  transition: box-shadow 0.2s ease;
}
.btn-glow:hover {
  box-shadow: 0 0 20px rgba(0, 220, 229, 0.4);
}

/* ── Toast Notifications ───────────────────────────────── */
.toast-item {
  animation: toast-in 0.3s ease forwards;
}
.toast-item.hide {
  animation: toast-out 0.3s ease forwards;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(100%); }
}

/* ── Modal Overlay ─────────────────────────────────────── */
.modal-overlay {
  display: none;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity 0.2s ease;
}
.modal-overlay.show {
  display: flex;
}

/* ── Custom Scrollbar ──────────────────────────────────── */
.custom-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.custom-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scroll::-webkit-scrollbar-thumb {
  background-color: #3a494a;
  border-radius: 10px;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #849495;
}

/* ── Modern Checkbox (User Management) ─────────────────── */
.modern-checkbox input[type="checkbox"] {
  display: none;
}
.modern-checkbox .cb-box {
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid #3a494a;
  border-radius: 0.25rem;
  background-color: #0b1326;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.modern-checkbox input[type="checkbox"]:checked + .cb-box {
  background-color: #00dce5;
  border-color: #00dce5;
}
.modern-checkbox .cb-icon {
  display: none;
  color: #0b1326;
  width: 0.875rem;
  height: 0.875rem;
}
.modern-checkbox input[type="checkbox"]:checked + .cb-box .cb-icon {
  display: block;
}

/* ── Table hover actions ───────────────────────────────── */
.table-actions {
  opacity: 0;
  transition: opacity 0.15s ease;
}
tr:hover .table-actions,
.group:hover .table-actions {
  opacity: 1;
}

/* ── Login overlay ─────────────────────────────────────── */
.login-overlay {
  display: none;
}
.login-overlay.show {
  display: flex;
}

/* ── Page sections ─────────────────────────────────────── */
/* Visibility controlled by Tailwind 'hidden' class toggling in app.js */


/* ── Sidebar mobile toggle ─────────────────────────────── */
@media (max-width: 767px) {
  .sidebar-open #app-sidebar {
    transform: translateX(0);
  }
}