/* ===== GALIXITE MAIL – Galaxy Theme ===== */

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

:root {
  --galaxy-bg:        #0a0b1a;
  --galaxy-surface:   #111228;
  --galaxy-card:      #161830;
  --galaxy-border:    #2a2d5a;
  --galaxy-purple:    #7c3aed;
  --galaxy-purple2:   #9d5cf6;
  --galaxy-blue:      #3b82f6;
  --galaxy-cyan:      #06b6d4;
  --galaxy-text:      #e2e8ff;
  --galaxy-muted:     #8892b0;
  --galaxy-accent:    #a78bfa;
}

/* ── Body / Background ── */
body {
  background-color: var(--galaxy-bg) !important;
  background-image:
    radial-gradient(ellipse at 20% 20%, rgba(124, 58, 237, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(59, 130, 246, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(6, 182, 212, 0.04) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Ccircle cx='40' cy='30' r='1' fill='white' opacity='0.5'/%3E%3Ccircle cx='120' cy='90' r='1.5' fill='white' opacity='0.4'/%3E%3Ccircle cx='200' cy='20' r='1' fill='white' opacity='0.6'/%3E%3Ccircle cx='280' cy='110' r='1' fill='white' opacity='0.3'/%3E%3Ccircle cx='350' cy='50' r='1.5' fill='white' opacity='0.5'/%3E%3Ccircle cx='70' cy='180' r='1' fill='white' opacity='0.4'/%3E%3Ccircle cx='160' cy='240' r='1.5' fill='white' opacity='0.3'/%3E%3Ccircle cx='320' cy='200' r='1' fill='white' opacity='0.5'/%3E%3Ccircle cx='390' cy='300' r='1' fill='white' opacity='0.4'/%3E%3Ccircle cx='50' cy='350' r='1.5' fill='white' opacity='0.3'/%3E%3Ccircle cx='230' cy='370' r='1' fill='white' opacity='0.5'/%3E%3Ccircle cx='310' cy='340' r='1' fill='white' opacity='0.4'/%3E%3Ccircle cx='100' cy='310' r='1' fill='white' opacity='0.6'/%3E%3C/svg%3E");
  background-size: auto, auto, auto, 400px 400px;
  color: var(--galaxy-text) !important;
  font-family: 'Inter', sans-serif !important;
  min-height: 100vh;
}

/* ── Navbar ── */
.navbar, nav.navbar {
  background: linear-gradient(135deg, #0d0e22 0%, #131432 100%) !important;
  border-bottom: 1px solid var(--galaxy-border) !important;
  box-shadow: 0 2px 20px rgba(124, 58, 237, 0.15) !important;
}

.navbar-brand img.main-logo,
.navbar-brand img.main-logo-dark {
  height: 38px !important;
  filter: drop-shadow(0 0 8px rgba(124, 58, 237, 0.5));
}

.nav-link, .navbar-nav .nav-link {
  color: var(--galaxy-text) !important;
  transition: color 0.2s, text-shadow 0.2s;
}

.nav-link:hover, .navbar-nav .nav-link:hover {
  color: var(--galaxy-accent) !important;
  text-shadow: 0 0 10px rgba(167, 139, 250, 0.5);
}

/* ── Cards ── */
.card {
  background-color: var(--galaxy-card) !important;
  border: 1px solid var(--galaxy-border) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.03) !important;
  border-radius: 12px !important;
}

.card-header {
  background: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(59,130,246,0.1)) !important;
  border-bottom: 1px solid var(--galaxy-border) !important;
  color: var(--galaxy-accent) !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
}

.card-body {
  color: var(--galaxy-text) !important;
}

/* ── Tables ── */
table, .table {
  color: var(--galaxy-text) !important;
}

.table thead th {
  background: rgba(124, 58, 237, 0.15) !important;
  border-bottom: 2px solid var(--galaxy-purple) !important;
  color: var(--galaxy-accent) !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.8px;
}

.table tbody tr {
  border-color: var(--galaxy-border) !important;
  transition: background 0.15s;
}

.table tbody tr:hover {
  background: rgba(124, 58, 237, 0.08) !important;
}

.table td, .table th {
  border-color: var(--galaxy-border) !important;
  color: var(--galaxy-text) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

/* ── Buttons ── */
.btn-primary {
  background: linear-gradient(135deg, var(--galaxy-purple), var(--galaxy-blue)) !important;
  border: none !important;
  box-shadow: 0 2px 12px rgba(124, 58, 237, 0.4) !important;
  font-weight: 500;
  transition: all 0.2s;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--galaxy-purple2), #60a5fa) !important;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.6) !important;
  transform: translateY(-1px);
}

.btn-secondary, .paginate_button, .page-link, .btn-light {
  color: var(--galaxy-text) !important;
  background-color: rgba(42, 45, 90, 0.8) !important;
  border-color: var(--galaxy-border) !important;
}

.btn-secondary:hover, .paginate_button:hover {
  background-color: rgba(124, 58, 237, 0.3) !important;
  border-color: var(--galaxy-purple) !important;
  color: white !important;
}

.btn-danger {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  border: none !important;
}

.btn-success {
  background: linear-gradient(135deg, #059669, #047857) !important;
  border: none !important;
}

.btn-warning {
  background: linear-gradient(135deg, #d97706, #b45309) !important;
  border: none !important;
  color: white !important;
}

/* ── Forms ── */
.form-control, .form-select, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], select, textarea {
  background-color: rgba(10, 11, 26, 0.8) !important;
  border: 1px solid var(--galaxy-border) !important;
  color: var(--galaxy-text) !important;
  border-radius: 8px !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
  background-color: rgba(10, 11, 26, 0.9) !important;
  border-color: var(--galaxy-purple) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2) !important;
  color: var(--galaxy-text) !important;
}

.form-control::placeholder { color: var(--galaxy-muted) !important; }
.form-label, label { color: var(--galaxy-muted) !important; font-size: 0.85rem; font-weight: 500; }

/* ── Modals ── */
.modal-content {
  background-color: var(--galaxy-surface) !important;
  border: 1px solid var(--galaxy-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(124, 58, 237, 0.1) !important;
}

.modal-header {
  background: linear-gradient(135deg, rgba(124,58,237,0.2), rgba(59,130,246,0.1)) !important;
  border-bottom: 1px solid var(--galaxy-border) !important;
  color: var(--galaxy-text) !important;
}

.modal-title { color: var(--galaxy-accent) !important; font-weight: 600; }
.modal-body { color: var(--galaxy-text) !important; }
.modal-footer { border-top: 1px solid var(--galaxy-border) !important; }

.btn-close { filter: invert(1); }

/* ── Dropdowns ── */
.dropdown-menu {
  background-color: var(--galaxy-surface) !important;
  border: 1px solid var(--galaxy-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
}

.dropdown-item {
  color: var(--galaxy-text) !important;
  transition: background 0.15s;
}

.dropdown-item:hover, .dropdown-item:focus {
  background-color: rgba(124, 58, 237, 0.2) !important;
  color: var(--galaxy-accent) !important;
}

.dropdown-item.active {
  background-color: rgba(124, 58, 237, 0.3) !important;
  color: white !important;
}

.dropdown-divider { border-color: var(--galaxy-border) !important; }

/* ── Alerts ── */
.alert-info {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  color: #93c5fd !important;
}

.alert-success {
  background: rgba(5, 150, 105, 0.15) !important;
  border-color: rgba(5, 150, 105, 0.3) !important;
  color: #6ee7b7 !important;
}

.alert-danger {
  background: rgba(220, 38, 38, 0.15) !important;
  border-color: rgba(220, 38, 38, 0.3) !important;
  color: #fca5a5 !important;
}

.alert-warning {
  background: rgba(217, 119, 6, 0.15) !important;
  border-color: rgba(217, 119, 6, 0.3) !important;
  color: #fcd34d !important;
}

/* ── Badges ── */
.badge.bg-primary, .badge.bg-info {
  background: linear-gradient(135deg, var(--galaxy-purple), var(--galaxy-blue)) !important;
}

.badge.bg-success { background: #059669 !important; }
.badge.bg-danger  { background: #dc2626 !important; }
.badge.bg-warning { background: #d97706 !important; color: white !important; }

/* ── Sidebar / Nav pills ── */
.nav-pills .nav-link {
  color: var(--galaxy-muted) !important;
  border-radius: 8px;
  transition: all 0.2s;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background: linear-gradient(135deg, var(--galaxy-purple), var(--galaxy-blue)) !important;
  color: white !important;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
}

.nav-pills .nav-link:hover:not(.active) {
  background: rgba(124, 58, 237, 0.15) !important;
  color: var(--galaxy-accent) !important;
}

/* ── Tabs ── */
.nav-tabs {
  border-bottom: 1px solid var(--galaxy-border) !important;
}

.nav-tabs .nav-link {
  color: var(--galaxy-muted) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding-bottom: 8px;
  transition: all 0.2s;
}

.nav-tabs .nav-link:hover {
  color: var(--galaxy-accent) !important;
  border-bottom-color: var(--galaxy-purple) !important;
}

.nav-tabs .nav-link.active {
  background: transparent !important;
  color: var(--galaxy-accent) !important;
  border-bottom: 2px solid var(--galaxy-purple) !important;
}

/* ── Pagination ── */
.pagination .page-item .page-link {
  background: var(--galaxy-surface) !important;
  border-color: var(--galaxy-border) !important;
  color: var(--galaxy-text) !important;
}

.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, var(--galaxy-purple), var(--galaxy-blue)) !important;
  border-color: var(--galaxy-purple) !important;
}

/* ── Input groups ── */
.input-group-text {
  background-color: rgba(42, 45, 90, 0.6) !important;
  border-color: var(--galaxy-border) !important;
  color: var(--galaxy-muted) !important;
}

/* ── Misc text colors ── */
h1, h2, h3, h4, h5, h6 { color: var(--galaxy-text) !important; }
.text-muted { color: var(--galaxy-muted) !important; }
a { color: var(--galaxy-accent) !important; }
a:hover { color: var(--galaxy-purple2) !important; }

/* ── Login page ── */
.card.login-card, .login-logo {
  background: rgba(17, 18, 40, 0.95) !important;
  backdrop-filter: blur(20px);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--galaxy-bg); }
::-webkit-scrollbar-thumb { background: var(--galaxy-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--galaxy-purple); }

/* ── Legend / HR ── */
legend, .legend { color: var(--galaxy-accent) !important; font-weight: 600; }
hr { border-color: var(--galaxy-border) !important; opacity: 0.5; }

/* ── DataTables ── */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: var(--galaxy-surface) !important;
  border-color: var(--galaxy-border) !important;
  color: var(--galaxy-text) !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
  color: var(--galaxy-muted) !important;
}

/* ── Overlay ── */
.overlay { background: rgba(10, 11, 26, 0.85) !important; }

/* ── Progress bars ── */
.progress { background-color: var(--galaxy-border) !important; border-radius: 8px; }
.progress-bar { background: linear-gradient(90deg, var(--galaxy-purple), var(--galaxy-blue)) !important; }

/* ── List groups ── */
.list-group-item {
  background-color: var(--galaxy-card) !important;
  border-color: var(--galaxy-border) !important;
  color: var(--galaxy-text) !important;
}

.list-group-item:hover { background-color: rgba(124, 58, 237, 0.1) !important; }
.list-group-item.active {
  background: linear-gradient(135deg, var(--galaxy-purple), var(--galaxy-blue)) !important;
  border-color: var(--galaxy-purple) !important;
}