/* ============================================================
   CUSTOM MODERN THEME — siycust Admin Panel
   ============================================================ */

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

:root {
  /* Brand Palette */
  --primary:        #6366f1;
  --primary-dark:   #4f46e5;
  --primary-light:  #818cf8;
  --primary-glow:   rgba(99,102,241,0.25);
  --accent:         #10b981;
  --accent-dark:    #059669;
  --danger:         #ef4444;
  --warning:        #f59e0b;
  --info:           #3b82f6;

  /* Sidebar */
  --sidebar-bg:         #0f172a;
  --sidebar-width:      260px;
  --sidebar-text:       #94a3b8;
  --sidebar-text-active:#ffffff;
  --sidebar-hover-bg:   rgba(99,102,241,0.12);
  --sidebar-active-bg:  rgba(99,102,241,0.18);
  --sidebar-border:     rgba(255,255,255,0.05);
  --sidebar-header-text:#475569;

  /* Navbar */
  --navbar-bg:      #ffffff;
  --navbar-border:  rgba(0,0,0,0.06);
  --navbar-height:  62px;
  --navbar-shadow:  0 1px 0 var(--navbar-border), 0 4px 20px rgba(0,0,0,0.04);

  /* Content */
  --body-bg:        #f1f5f9;
  --card-bg:        #ffffff;
  --card-radius:    12px;
  --card-shadow:    0 1px 3px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.04);
  --card-shadow-hover: 0 4px 16px rgba(0,0,0,0.10), 0 12px 32px rgba(0,0,0,0.06);

  /* Text */
  --text-primary:   #0f172a;
  --text-secondary: #64748b;
  --text-muted:     #94a3b8;

  /* Misc */
  --border-color:   #e2e8f0;
  --radius-sm:      6px;
  --radius-md:      10px;
  --radius-lg:      16px;
  --transition:     all 0.22s cubic-bezier(0.4,0,0.2,1);
  --font:           'Inter', system-ui, sans-serif;
}

/* ── Global ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font) !important;
  background-color: var(--body-bg) !important;
  color: var(--text-primary) !important;
  -webkit-font-smoothing: antialiased;
}

a { transition: var(--transition); }

/* ── Preloader ────────────────────────────────────────────── */
.preloader {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%) !important;
  z-index: 9999;
}
.preloader img {
  filter: drop-shadow(0 0 20px var(--primary-glow));
}
.animation__shake {
  animation: modernPulse 1.4s ease-in-out infinite;
}
@keyframes modernPulse {
  0%,100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.1); opacity: 0.7; }
}

/* ── Sidebar ──────────────────────────────────────────────── */
.main-sidebar,
.main-sidebar.sidebar-dark-primary {
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--sidebar-border) !important;
  box-shadow: 4px 0 24px rgba(0,0,0,0.15) !important;
  width: var(--sidebar-width) !important;
}

/* Brand / Logo */
.brand-link {
  background: rgba(255,255,255,0.03) !important;
  border-bottom: 1px solid var(--sidebar-border) !important;
  padding: 14px 16px !important;
  transition: var(--transition) !important;
}
.brand-link:hover { background: rgba(255,255,255,0.06) !important; }

.brand-text {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.3px;
}
.brand-image {
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 0 0 2px var(--primary-glow) !important;
  opacity: 1 !important;
}

/* Sidebar scroll area */
.sidebar {
  padding: 8px 0 !important;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }

/* Section headers */
.nav-header {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--sidebar-header-text) !important;
  padding: 18px 18px 6px !important;
}

/* Nav items */
.nav-sidebar > .nav-item > .nav-link,
.nav-sidebar .nav-treeview > .nav-item > .nav-link {
  color: var(--sidebar-text) !important;
  border-radius: var(--radius-sm) !important;
  margin: 1px 8px !important;
  padding: 9px 12px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: var(--transition) !important;
  position: relative;
  overflow: hidden;
}

.nav-sidebar > .nav-item > .nav-link:hover,
.nav-sidebar .nav-treeview > .nav-item > .nav-link:hover {
  background: var(--sidebar-hover-bg) !important;
  color: var(--sidebar-text-active) !important;
}

.nav-sidebar > .nav-item > .nav-link.active,
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px var(--primary-glow) !important;
}

/* Active left bar indicator */
.nav-sidebar > .nav-item > .nav-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: #fff;
  border-radius: 0 3px 3px 0;
  opacity: 0.8;
}

/* Icons */
.nav-link .nav-icon {
  width: 20px !important;
  font-size: 0.9rem !important;
  margin-right: 10px !important;
  opacity: 0.8;
  transition: var(--transition) !important;
}
.nav-link:hover .nav-icon,
.nav-link.active .nav-icon { opacity: 1; }

/* Treeview arrow */
.nav-sidebar .fas.fa-angle-left,
.nav-sidebar .fas.fa-angle-down { transition: var(--transition) !important; }

/* Submenu indent */
.nav-treeview { padding-left: 4px !important; }
.nav-treeview > .nav-item > .nav-link {
  padding-left: 36px !important;
  font-size: 0.83rem !important;
}

/* ── Navbar (top bar) ─────────────────────────────────────── */
.main-header.navbar {
  background: var(--navbar-bg) !important;
  border-bottom: none !important;
  box-shadow: var(--navbar-shadow) !important;
  min-height: var(--navbar-height) !important;
  padding: 0 20px !important;
  backdrop-filter: blur(12px);
  transition: var(--transition) !important;
}

.main-header .navbar-nav .nav-link {
  color: var(--text-secondary) !important;
  border-radius: var(--radius-sm);
  padding: 7px 10px !important;
  font-size: 0.875rem;
  font-weight: 500;
  transition: var(--transition) !important;
}
.main-header .navbar-nav .nav-link:hover {
  color: var(--primary) !important;
  background: rgba(99,102,241,0.07) !important;
}

/* Hamburger toggler */
.main-header .nav-link[data-widget="pushmenu"] {
  color: var(--text-secondary) !important;
  font-size: 1.1rem;
  padding: 7px 12px !important;
}
.main-header .nav-link[data-widget="pushmenu"]:hover {
  color: var(--primary) !important;
  background: rgba(99,102,241,0.07) !important;
}

/* User dropdown toggler */
.main-header .user-menu > .nav-link {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  padding: 6px 12px !important;
  border-radius: var(--radius-md) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  background: rgba(99,102,241,0.06) !important;
}
.main-header .user-menu > .nav-link:hover {
  background: rgba(99,102,241,0.12) !important;
}
.main-header .user-menu .user-image {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  border: 2px solid var(--primary-light) !important;
}

/* Dropdown menus (navbar) */
.main-header .dropdown-menu {
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
  padding: 6px !important;
  animation: dropIn 0.18s ease-out forwards;
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* User dropdown header */
.user-header {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
  border-radius: var(--radius-sm) !important;
  padding: 16px !important;
  margin-bottom: 4px;
}
.user-footer {
  border-top: 1px solid var(--border-color) !important;
  padding: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: transparent !important;
}
.user-footer .btn {
  border-radius: var(--radius-sm) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  padding: 5px 12px !important;
  transition: var(--transition) !important;
}

/* ── Content Wrapper ──────────────────────────────────────── */
.content-wrapper {
  background: var(--body-bg) !important;
}

.content-header {
  padding: 20px 24px 8px !important;
}
.content-header h1,
.content-header .content-header h1 {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
}

.content {
  padding: 8px 24px 24px !important;
}

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  transition: var(--transition) !important;
  overflow: hidden;
}
.card:hover {
  box-shadow: var(--card-shadow-hover) !important;
  transform: translateY(-1px);
}
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 16px 20px !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  color: var(--text-primary) !important;
}
.card-body { padding: 20px !important; }
.card-footer {
  background: #f8fafc !important;
  border-top: 1px solid var(--border-color) !important;
  padding: 12px 20px !important;
}

/* Colored card variations */
.card-primary  { border-top: 3px solid var(--primary) !important; }
.card-success  { border-top: 3px solid var(--accent) !important; }
.card-warning  { border-top: 3px solid var(--warning) !important; }
.card-danger   { border-top: 3px solid var(--danger) !important; }
.card-info     { border-top: 3px solid var(--info) !important; }

/* Small stat/info boxes */
.small-box {
  border-radius: var(--card-radius) !important;
  border: none !important;
  box-shadow: var(--card-shadow) !important;
  overflow: hidden;
  transition: var(--transition) !important;
}
.small-box:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover) !important; }
.small-box > .inner { padding: 18px 20px !important; }
.small-box h3 { font-size: 2rem !important; font-weight: 700 !important; }
.small-box p  { font-size: 0.875rem !important; font-weight: 500 !important; opacity: 0.9; }
.small-box .icon i { font-size: 4.5rem !important; opacity: 0.25; }
.small-box-footer {
  padding: 8px 14px !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  backdrop-filter: brightness(0.9);
}

/* ── Badges ───────────────────────────────────────────────── */
.badge {
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 0.7rem !important;
  padding: 3px 8px !important;
  letter-spacing: 0.03em;
}
.badge-primary { background: var(--primary) !important; }
.badge-success { background: var(--accent) !important; }
.badge-warning { background: var(--warning) !important; color: #fff !important; }
.badge-danger  { background: var(--danger) !important; }
.badge-info    { background: var(--info) !important; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  border-radius: var(--radius-sm) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  transition: var(--transition) !important;
  letter-spacing: 0.01em;
}
.btn-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-primary:hover {
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  box-shadow: 0 4px 12px var(--primary-glow) !important;
  transform: translateY(-1px);
}
.btn-success {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}
.btn-success:hover {
  background: var(--accent-dark) !important;
  border-color: var(--accent-dark) !important;
  transform: translateY(-1px);
}
.btn-flat { box-shadow: none !important; }

/* ── Forms ────────────────────────────────────────────────── */
.form-control {
  border-radius: var(--radius-sm) !important;
  border-color: var(--border-color) !important;
  font-size: 0.875rem !important;
  font-family: var(--font) !important;
  transition: var(--transition) !important;
  color: var(--text-primary) !important;
}
.form-control:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-glow) !important;
}
.input-group-text {
  border-color: var(--border-color) !important;
  background: #f8fafc !important;
  color: var(--text-secondary) !important;
  font-size: 0.875rem !important;
}

/* ── Tables ───────────────────────────────────────────────── */
.table {
  font-size: 0.875rem !important;
  color: var(--text-primary) !important;
}
.table thead th {
  background: #f8fafc !important;
  border-bottom: 2px solid var(--border-color) !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: var(--text-secondary) !important;
  padding: 12px 16px !important;
}
.table tbody td {
  border-color: var(--border-color) !important;
  padding: 12px 16px !important;
  vertical-align: middle !important;
}
.table-hover tbody tr:hover {
  background: rgba(99,102,241,0.04) !important;
}

/* ── Footer ───────────────────────────────────────────────── */
.main-footer {
  background: var(--navbar-bg) !important;
  border-top: 1px solid var(--border-color) !important;
  color: var(--text-muted) !important;
  font-size: 0.8rem !important;
  padding: 14px 24px !important;
}

/* ── Breadcrumb ───────────────────────────────────────────── */
.breadcrumb {
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.8rem !important;
}
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted) !important; }
.breadcrumb-item.active { color: var(--text-secondary) !important; }
.breadcrumb-item a { color: var(--primary) !important; text-decoration: none !important; }
.breadcrumb-item a:hover { color: var(--primary-dark) !important; }

/* ── Alerts ───────────────────────────────────────────────── */
.alert {
  border-radius: var(--radius-md) !important;
  border: none !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}
.alert-success { background: rgba(16,185,129,0.1) !important; color: #065f46 !important; border-left: 4px solid var(--accent) !important; }
.alert-danger  { background: rgba(239,68,68,0.1)  !important; color: #991b1b !important; border-left: 4px solid var(--danger) !important; }
.alert-warning { background: rgba(245,158,11,0.1) !important; color: #92400e !important; border-left: 4px solid var(--warning) !important; }
.alert-info    { background: rgba(59,130,246,0.1) !important; color: #1e40af !important; border-left: 4px solid var(--info) !important; }

/* ── Modals ───────────────────────────────────────────────── */
.modal-content {
  border-radius: var(--radius-lg) !important;
  border: none !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.18) !important;
  overflow: hidden;
}
.modal-header {
  border-bottom: 1px solid var(--border-color) !important;
  padding: 20px 24px !important;
  background: #f8fafc !important;
}
.modal-footer {
  border-top: 1px solid var(--border-color) !important;
  padding: 14px 24px !important;
}
.modal-body { padding: 24px !important; }

/* ── Pagination ───────────────────────────────────────────── */
.page-link {
  border-radius: var(--radius-sm) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
  font-size: 0.85rem !important;
  transition: var(--transition) !important;
}
.page-link:hover { background: rgba(99,102,241,0.07) !important; color: var(--primary) !important; border-color: var(--primary) !important; }
.page-item.active .page-link { background: var(--primary) !important; border-color: var(--primary) !important; }

/* ── Utility: Alpine cloak ────────────────────────────────── */
[x-cloak] { display: none !important; }

/* ── Scrollbar global ─────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Toast notifications (Alpine-powered) ─────────────────── */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast-item {
  pointer-events: all;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  min-width: 280px;
  max-width: 380px;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.toast-item.toast-success { border-left: 4px solid var(--accent); }
.toast-item.toast-error   { border-left: 4px solid var(--danger); }
.toast-item.toast-warning { border-left: 4px solid var(--warning); }
.toast-item.toast-info    { border-left: 4px solid var(--info); }

/* ── Back to top button ───────────────────────────────────── */
#back-to-top {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  width: 40px;
  height: 40px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: var(--transition);
  box-shadow: 0 4px 12px var(--primary-glow);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#back-to-top.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#back-to-top:hover { background: var(--primary-dark); transform: translateX(-50%) translateY(-2px); }

/* ── Sidebar collapsed state fixes ───────────────────────── */
.sidebar-mini.sidebar-collapse .main-sidebar { width: 4.6rem !important; }
.sidebar-mini.sidebar-collapse .brand-text,
.sidebar-mini.sidebar-collapse .nav-header,
.sidebar-mini.sidebar-collapse .nav-link p { opacity: 0; }

/* ── Page transition fade ─────────────────────────────────── */
.content-wrapper {
  animation: pageFadeIn 0.3s ease-out;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .content { padding: 8px 14px 20px !important; }
  .content-header { padding: 16px 14px 8px !important; }
}