/* assets/css/app.css */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #2a2a3a;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #3a3a4a;
}

.glass-card {
    background: rgba(17, 17, 24, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(42, 42, 58, 0.5);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.auth-blob {
    position: absolute;
    filter: blur(100px);
    z-index: 0;
    opacity: 0.3;
    animation: pulseBlob 8s infinite alternate;
}

@keyframes pulseBlob {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.1) translate(20px, -20px); }
}

.error-shake {
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

.toast {
    transition: all 0.3s ease;
    transform: translateX(100%);
    opacity: 0;
}

.toast.show {
    transform: translateX(0);
    opacity: 1;
}

.sidebar-scroll {
    scrollbar-width: none; /* Firefox */
}
.sidebar-scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

/* ===== MAIN LAYOUT ===== */
.app-wrapper {
  display: flex;
  height: 100vh;
  overflow: hidden;
}
.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}
@media (max-width: 1023px) {
  .app-wrapper { display: block; height: auto; }
  .main-content {
    padding: 16px;
    padding-bottom: 90px;
  }
}

/* ===== SIDEBAR NAV ACTIVE STATE ===== */
.sidebar-text { transition: color 0.15s ease; }
.nav-item {
  color: var(--text-secondary, #8888aa);
  transition: all 0.15s ease;
}
.nav-item:hover {
  background: rgba(108,99,255,0.1);
  color: #fff;
}
.nav-item.active {
  background: rgba(108,99,255,0.15);
  color: #6c63ff;
  font-weight: 600;
}

/* ===== TABLES ===== */
@media (max-width: 640px) {
  .data-table { font-size: 12px; }
  .data-table td, .data-table th { padding: 8px 10px; }
  .hide-mobile { display: none; }
}

/* ===== CARDS ===== */
.kpi-card {
  transition: transform 0.2s, box-shadow 0.2s;
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(108,99,255,0.15);
}

/* ===== INPUTS ===== */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  background: #1a1a24 !important;
  border: 1px solid #2a2a3a !important;
  color: #f0f0ff !important;
  border-radius: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #6c63ff !important;
  box-shadow: 0 0 0 3px rgba(108,99,255,0.15);
}

/* ===== SAFE AREA (iPhone notch) ===== */
.main-content {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
nav.fixed.bottom-0 {
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

/* ===== TOAST NOTIFICATIONS ===== */
.toast {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  animation: slideIn 0.3s ease forwards;
  max-width: 360px;
}
.toast.success { background: rgba(0,212,170,0.9); }
.toast.error { background: rgba(255,71,87,0.9); }
.toast.info { background: rgba(108,99,255,0.9); }
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ===== BOTTOM NAV ITEM ===== */
.bottom-nav-item span.text-xs { color: #555570; font-size: 11px; }
.bottom-nav-item i { color: #555570; }
.bottom-nav-item.active i { color: #6c63ff; }
.bottom-nav-item.active span.text-xs { color: #6c63ff; }