/*
 * QTS Dashboard Modern CSS
 * Dibuat ulang 2026-04-15
 * Simple, responsive, fast, and clean. 
 * Palet warna utama: oranye, biru, hijau, abu, putih, hitam
 * Gunakan bersama Bootstrap 5.3+
 */

:root {
  --primary: #f97316;
  --secondary: #0ea5e9;
  --success: #22c55e;
  --warning: #eab308;
  --danger: #ef4444;
  --info: #38bdf8;
  --light: #f4f4f5;
  --dark: #18181b;
  --white: #fff;
  --gray: #71717a;
  --radius: 0.75rem;
  --shadow: 0 2px 8px 0 rgba(0,0,0,0.07);
  --transition: all 0.2s cubic-bezier(.4,0,.2,1);
}

body {
  font-family: 'Inter', Arial, sans-serif;
  background: var(--light);
  color: var(--dark);
  margin: 0;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: var(--dark);
}

.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border: none;
  transition: var(--transition);
}

.btn-primary {
  background: var(--primary);
  border: none;
  color: var(--white);
  border-radius: var(--radius);
  transition: var(--transition);
}
.btn-primary:hover {
  background: #ea580c;
}

.btn-secondary {
  background: var(--secondary);
  border: none;
  color: var(--white);
  border-radius: var(--radius);
  transition: var(--transition);
}
.btn-secondary:hover {
  background: #0284c7;
}

.table {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.table th, .table td {
  padding: 0.75rem 1rem;
  border: none;
}

.navbar {
  background: var(--white);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  margin-bottom: 2rem;
}

.sidenav {
  background: var(--white);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  min-height: 100vh;
  padding: 1rem 0;
}

.sidenav .nav-link.active {
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius);
}

/* Responsive helpers */
@media (max-width: 991.98px) {
  .sidenav {
    min-height: auto;
    border-radius: 0;
    box-shadow: none;
  }
  .navbar {
    border-radius: 0;
    box-shadow: none;
  }
  .card {
    border-radius: 0.5rem;
  }
}

/* Utility classes */
.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }
.text-info { color: var(--info) !important; }
.text-light { color: var(--light) !important; }
.text-dark { color: var(--dark) !important; }
.bg-primary { background: var(--primary) !important; }
.bg-secondary { background: var(--secondary) !important; }
.bg-success { background: var(--success) !important; }
.bg-warning { background: var(--warning) !important; }
.bg-danger { background: var(--danger) !important; }
.bg-info { background: var(--info) !important; }
.bg-light { background: var(--light) !important; }
.bg-dark { background: var(--dark) !important; }

/* Add more as needed for forms, alerts, modals, etc. */