/* ============================================
   BASE STYLES
   ============================================ */

body { 
  background: #0f172a; 
  font-family: 'Inter', sans-serif; 
  color: #e2e8f0; 
}

/* ============================================
   COMPONENTS
   ============================================ */

/* Cards */
.card { 
  background: #1e293b; 
  border: 1px solid #334155; 
  border-radius: 1rem; 
  transition: all 0.2s; 
}

/* Buttons */
.btn-primary { 
  background: #e94560; 
  transition: all 0.2s; 
  border-radius: 0.5rem; 
}
.btn-primary:hover { 
  background: #c23456; 
  transform: translateY(-1px); 
}

.btn-secondary { 
  background: #334155; 
  border: 1px solid #475569; 
  color: #e2e8f0; 
  border-radius: 0.5rem; 
  transition: all 0.2s; 
}
.btn-secondary:hover { 
  background: #475569; 
  border-color: #facc15; 
}

/* Notification Badge */
.notification-badge { 
  position: absolute; 
  top: -5px; 
  right: -5px; 
  background: #e94560; 
  color: white; 
  border-radius: 9999px; 
  width: 18px; 
  height: 18px; 
  font-size: 10px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}

/* Modal Overlay */
.modal-overlay { 
  background: rgba(0,0,0,0.7); 
  backdrop-filter: blur(4px); 
}

/* ============================================
   TABS
   ============================================ */

.tab-btn { 
  background: transparent; 
  border: none; 
  padding: 0.5rem 1rem; 
  cursor: pointer; 
  font-weight: 500; 
  color: #94a3b8; 
  border-bottom: 2px solid transparent; 
  border-radius: 0; 
}
.tab-btn.active { 
  color: #facc15; 
  border-bottom-color: #facc15; 
}

.tab-content { 
  display: none; 
}
.tab-content.active { 
  display: block; 
}

/* ============================================
   DATA TABLES
   ============================================ */

.data-table { 
  width: 100%; 
  border-collapse: collapse; 
}

.data-table th { 
  text-align: left; 
  padding: 0.75rem 0.5rem; 
  background: #0f172a; 
  color: #facc15; 
  border-bottom: 2px solid #334155; 
}

.data-table td { 
  padding: 0.75rem 0.5rem; 
  border-bottom: 1px solid #334155; 
}

.data-table tr:hover { 
  background: #334155; 
}

/* ============================================
   FORM INPUTS
   ============================================ */

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

input[type=number] { 
  -moz-appearance: textfield; 
}

/* ============================================
   PENAL CODE TABLE
   ============================================ */

.penal-code-table { 
  max-height: 70vh; 
  overflow-y: auto; 
  display: block; 
}

/* ============================================
   ACCORDION
   ============================================ */

.accordion-header { 
  cursor: pointer; 
  background: #0f172a; 
  border-radius: 0.5rem; 
  transition: background 0.2s; 
}

.accordion-header:hover { 
  background: #334155; 
}

.accordion-content { 
  display: none; 
  overflow-x: auto; 
}

.accordion-content.active { 
  display: block; 
}

/* ============================================
   SPLASH SCREEN
   ============================================ */

#splashScreen { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: #0f172a; 
  z-index: 1000; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  transition: opacity 0.5s; 
}

#mainContent { 
  display: none; 
}

/* ============================================
   STATUS COLORS
   ============================================ */

.status-active { 
  color: #22c55e; 
  font-weight: 600; 
}

.status-pending { 
  color: #eab308; 
  font-weight: 600; 
}

.status-dissolved { 
  color: #ef4444; 
  font-weight: 600; 
}

.status-separation { 
  color: #f97316; 
  font-weight: 600; 
}

.status-expired { 
  color: #ef4444; 
  font-weight: 600; 
}

/* ============================================
   PENAL CODE DESCRIPTION COLUMN
   ============================================ */

.data-table td.desc-col { 
  max-width: 250px; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #1e293b;
}

::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* 🔥 LOGIN OVERLAY STYLES 🔥 */
#loginOverlay {
  transition: opacity 0.3s ease;
}

#loginOverlay.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Loading animation for the scale icon */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.animate-pulse {
  animation: pulse 2s infinite;
}

/* Loading spinner animation */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin 1s linear infinite;
}