@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --accent: #7c3aed;
  --accent-dark: #5b21b6;
  --accent-soft: #f3e8ff;
  --pink: #ec4899;
  --teal: #06b6d4;
  --amber: #f59e0b;
  --bg-page: #f4f2fb;
  --text-main: #1e1b2e;
  --text-muted: #6b7280;
  --border-soft: #e5e7eb;
  --radius: 12px;
}

body {
  font-family: 'Inter', 'PT Sans', sans-serif !important;
  background: var(--bg-page) !important;
  color: var(--text-main);
}

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

a { color: var(--accent); }
a:hover { color: var(--accent-dark); }

/* ---- Navbar ---- */
.navbar,
.navbar-default,
.navbar-inverse {
  background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%) !important;
  border: none !important;
  box-shadow: 0 6px 0 #5b21b6, 0 12px 24px rgba(124,58,237,0.3);
}

.navbar .navbar-brand,
.navbar-default .navbar-brand,
.navbar-inverse .navbar-brand,
.navbar .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a,
.navbar-inverse .navbar-nav > li > a {
  color: #fff !important;
  font-weight: 600;
}

.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > .active > a {
  background: rgba(255, 255, 255, 0.18) !important;
  border-radius: 8px;
}

/* ---- Panels / cards (3D + colorful) ---- */
.panel,
.well,
.box,
.smp-card,
.smp-row,
.smp-form-card,
.smp-filter-card,
.smp-table-card,
.loginForm {
  background: #fff;
  border: none;
  border-radius: var(--radius) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 6px 0 #ddd6fe,
    0 14px 26px rgba(124, 58, 237, 0.16) !important;
  transform: translateY(0);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.panel:hover,
.smp-card:hover,
.smp-row:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 8px 0 #ddd6fe,
    0 22px 36px rgba(124, 58, 237, 0.22) !important;
}

.panel-heading {
  background: linear-gradient(135deg, var(--accent-soft), #fce7f3) !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  color: var(--accent-dark);
  font-weight: 700;
  border: none !important;
}

/* ---- Buttons (colorful 3D press effect) ---- */
.btn {
  border-radius: 8px;
  font-weight: 600;
  padding: 8px 22px;
  border: none;
  transform: translateY(0);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn:active { transform: translateY(4px); box-shadow: none !important; }

.btn-primary,
.btn-info {
  background: linear-gradient(135deg, #7c3aed, #ec4899) !important;
  box-shadow: 0 4px 0 #5b21b6;
  color: #fff !important;
}

.btn-default {
  background: #fff !important;
  border: 1px solid var(--border-soft) !important;
  color: var(--text-main) !important;
  box-shadow: 0 4px 0 #d1d5db;
}

.btn-success { background: #10b981 !important; box-shadow: 0 4px 0 #047857; color: #fff !important; }
.btn-danger  { background: #f43f5e !important; box-shadow: 0 4px 0 #be123c; color: #fff !important; }
.btn-warning { background: var(--amber) !important; box-shadow: 0 4px 0 #b45309; color: #fff !important; }

/* ---- Tables ---- */
.table {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
}

.table thead th {
  background: linear-gradient(135deg, var(--accent-soft), #fce7f3);
  color: var(--accent-dark);
  border: none !important;
  font-weight: 700;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background: #faf8ff;
}

.table > tbody > tr:hover {
  background: var(--accent-soft) !important;
}

/* ---- Forms ---- */
.form-control {
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.04);
}

.form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}

/* ---- Alerts / badges (colorful) ---- */
.alert { border-radius: 10px; border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.alert-success { background: #d1fae5; color: #065f46; }
.alert-danger  { background: #ffe4e6; color: #9f1239; }
.alert-warning { background: #fef3c7; color: #92400e; }
.alert-info    { background: var(--accent-soft); color: var(--accent-dark); }

.label,
.badge {
  border-radius: 999px;
  font-weight: 600;
}

/* ---- Modals ---- */
.modal-content {
  border-radius: var(--radius);
  border: none;
  box-shadow: 0 20px 50px rgba(124,58,237,0.25);
}

.modal-header {
  background: linear-gradient(135deg, var(--accent-soft), #fce7f3);
  border-radius: var(--radius) var(--radius) 0 0;
  border: none;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #7c3aed, #ec4899); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }