/* =========================
   BLOOMIX THEME COLORS
   ========================= */
:root {
    --color-primary: #3981B5;   /* Blue */
    --color-secondary: #F01085; /* Pink */
    --color-accent: #FD6765;    /* Red */
    --color-info: #25C6DD;      /* Cyan */
}

:root {
    --color-primary: #735085;   /* Blue */
    --color-primary-light: #9a6eb0;   /* Blue */
    --color-secondary: #f32a92; /* Pink */
    --color-secondary-light: #f53498; /* Pink */
    --color-accent: #FD6765;    /* Red */
    --color-info: #825085;      /* Cyan */
    --color-info-light: #a162a4;      /* Cyan */
    --color-header: #735085;      /* Cyan */
    --color-nav-title-light: #a088ac;      /* Cyan */
    --color-white: #ffffff;      /* Cyan */
}

/* =========================
   LOGIN
   ========================= */

/* If :root already exists in theme.css, remove/skip this block */
/* =========================
   Bloomix — Login page styles (with !important)
   ========================= */

/* Animated gradient background */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.login-page {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(-45deg, var(--color-primary), var(--color-secondary), var(--color-accent)) !important;
  background-size: 300% 300% !important;
  animation: gradientMove 15s ease infinite !important;
  padding: 20px !important;
}

/* Login card container */
.login-page .login-box {
  background: rgba(255, 255, 255, 0.92) !important;
  padding: 25px 20px !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  width: 360px !important;
  max-width: 92% !important;
  text-align: center !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  margin: 0 auto !important;
}

/* Remove extra AdminLTE spacing */
.login-page .login-box .card {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0 !important;
}

/* Inner login card */
.login-page .login-card-body {
  background: var(--color-white) !important;
  border-radius: 10px !important;
  padding: 18px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
}

/* Logo and heading */
.login-logo img {
  height: 60px !important;
  margin-bottom: 10px !important;
}

.login-logo h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: var(--color-primary) !important;
}

.login-logo h2 span {
  color: var(--color-secondary) !important;
}

.login-logo p {
  font-size: 13px !important;
  color: var(--color-nav-title-light) !important;
  margin-top: 4px !important;
  margin-bottom: 12px !important;
}

/* Buttons */
.login-page .btn-primary {
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
  box-shadow: none !important;
}

.login-page .btn-primary:hover {
  background-color: var(--color-secondary-light) !important;
  border-color: var(--color-secondary-light) !important;
}

/* Responsive tweaks */
@media (max-width: 480px) {
  .login-page .login-box { 
    padding: 20px 15px !important; 
    width: 90% !important; 
  }
  .login-logo h2 { 
    font-size: 18px !important; 
  }
}


#particles-js {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: -1 !important;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary), var(--color-accent)) !important;
}



/* =========================
   BUTTONS
   ========================= */

   /* Default button text */
.btn {
    color: #fff !important;   /* make all buttons have white text */
}
.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}
.btn-primary:hover {
    background-color: var(--color-primary-light) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

.btn-secondary {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    color: #fff !important;
}
.btn-secondary:hover {
    background-color: var(--color-secondary-light) !important;
    border-color: var(--color-secondary) !important;
    color: #fff !important;
}

.btn-accent {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #fff !important;
}
.btn-accent:hover {
    background-color: #d9504e !important;
    border-color: #d9504e !important;
}

.btn-info {
    background-color: var(--color-info) !important;
    border-color: var(--color-info) !important;
    color: #fff !important;
}
.btn-info:hover {
    background-color: var(--color-info-light) !important;
    border-color: var(--color-info) !important;
    color: #fff !important;
}
.btn-outline-success {
    color: #28a745 !important;   /* dark text */
    border-color: #28a745; /* keep green border */
}

.btn-outline-success:hover {
    background-color: #28a745 !important; 
    color: #fff !important; /* white on hover */
}

/* =========================
   RANGE SLIDERS
   ========================= */
input[type="range"].form-range {
    -webkit-appearance: none !important;
    width: 100% !important;
    height: 6px !important;
    background: #ddd !important;
    border-radius: 5px !important;
    outline: none !important;
}
input[type="range"].form-range::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    background: var(--color-primary) !important;
    border-radius: 50% !important;
    border: 2px solid #fff !important;
    cursor: pointer !important;
    margin-top: -6px !important;
}
input[type="range"].form-range::-moz-range-thumb {
    width: 18px !important;
    height: 18px !important;
    background: var(--color-primary) !important;
    border-radius: 50% !important;
    border: 2px solid #fff !important;
    cursor: pointer !important;
}
input[type="range"].form-range::-ms-thumb {
    width: 18px !important;
    height: 18px !important;
    background: var(--color-primary) !important;
    border-radius: 50% !important;
    border: 2px solid #fff !important;
}

/* =========================
   BADGES
   ========================= */
.badge-primary { background-color: var(--color-primary) !important; }
.badge-secondary { background-color: var(--color-secondary) !important; }
.badge-accent { background-color: var(--color-accent) !important; }
.badge-info { background-color: var(--color-info) !important; }

/* =========================
   ALERTS
   ========================= */
.alert-success { background-color: var(--color-primary) !important; color: #fff !important; border: none; }
.alert-danger { background-color: var(--color-accent) !important; color: #fff !important; border: none; }
.alert-info    { background-color: var(--color-info) !important; color: #fff !important; border: none; }
.alert-warning { background-color: var(--color-secondary) !important; color: #fff !important; border: none; }

/* =========================
   LINKS / HOVER
   ========================= */
a, a:hover, a:focus {
    color: var(--color-nav-title-light) !important;
    text-decoration: none;
}

/* =========================
   Dashboard styles
   ========================= */

.small-box.bg-warning,
.small-box.bg-warning .inner h3,
.small-box.bg-warning .inner p,
.small-box.bg-warning .small-box-footer {
    color: #fff !important;
}

.small-box.bg-info {
    background: linear-gradient(135deg, #36d1dc, #5b86e5);
    color: #fff;
}

.small-box.bg-success {
    background: linear-gradient(135deg, #56ab2f, #a8e063);
    color: #fff;
}

.small-box.bg-warning {
    background: linear-gradient(135deg, #f7971e, #ffd200);
    color: #fff;
}

.small-box {
    border-radius: 10px; /* makes it softer */
}

/* =========================
   SIDEBAR HIGHLIGHT (AdminLTE)
   ========================= */

.custom-nav {
    color: #6e4770 !important;   /* custom color */
    font-weight: 600;            /* optional bold */
}

.custom-nav:hover {
    color: #9c66a3 !important;   /* hover color */
}

.nav-sidebar .nav-item > .nav-link.active {
    background-color: var(--color-info) !important;
    color: #fff !important;
}
.nav-sidebar .nav-item > .nav-link:hover {
    background-color: var(--color-info) !important;
    color: #fff !important;
}

/* =========================
   PROGRESS BARS
   ========================= */
.progress-bar-primary { background-color: var(--color-primary) !important; }
.progress-bar-secondary { background-color: var(--color-secondary) !important; }
.progress-bar-accent { background-color: var(--color-accent) !important; }
.progress-bar-info { background-color: var(--color-info) !important; }

/* =========================
   FORM CHECKBOXES & RADIOS
   ========================= */
.form-check-input:checked {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* =========================
   CATEGORY HEADER / BOXES
   ========================= */
.category-header {
    background-color: var(--color-header) !important;
    color: #fff !important;
    padding: 8px 12px !important;
    border-radius: 5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}


/* =========================
   TABLE HEADER
   ========================= */
.table thead {
    background-color: var(--color-primary) !important;
    color: #fff !important;
}

/* =========================
   BADGES
   ========================= */
.badge-primary { background-color: var(--color-primary) !important; }
.badge-secondary { background-color: var(--color-secondary) !important; }
.badge-accent { background-color: var(--color-accent) !important; }
.badge-info { background-color: var(--color-info) !important; }


/* Card Titles */
.card .card-header {
    background-color: var(--color-primary) !important;; /* primary blue */
    color: #fff !important;
    font-weight: 600 !important;
    padding: 10px 15px !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
    border-top-left-radius: 0.25rem !important;
    border-top-right-radius: 0.25rem !important;
}

/* Optional: Different colors for info/warning/danger cards */
.card.card-info .card-header {
    background-color: var(--color-info) !important;;
}

.card.card-warning .card-header {
    background-color: var(--color-secondary) !important;;
}

.card.card-danger .card-header {
    background-color: var(--color-accent) !important;; /* F01085 */
}

/* Card body text color */
.card .card-body {
    color: #333 !important;
}

/* =========================
   SLIDERS
   ========================= */
input[type="range"].form-range {
    -webkit-appearance: none !important;
    width: 100% !important;
    height: 6px !important;
    background: #ddd !important;
    border-radius: 5px !important;
    outline: none !important;
}
input[type="range"].form-range::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    background: var(--color-primary) !important;
    border-radius: 50% !important;
    border: 2px solid #fff !important;
    cursor: pointer !important;
    margin-top: -6px !important;
}
input[type="range"].form-range::-moz-range-thumb {
    width: 18px !important;
    height: 18px !important;
    background: var(--color-primary) !important;
    border-radius: 50% !important;
    border: 2px solid #fff !important;
    cursor: pointer !important;
}
input[type="range"].form-range::-ms-thumb {
    width: 18px !important;
    height: 18px !important;
    background: var(--color-primary) !important;
    border-radius: 50% !important;
    border: 2px solid #fff !important;
    cursor: pointer !important;
}

/* Track styling for all browsers */
input[type="range"].form-range::-webkit-slider-runnable-track {
    height: 6px !important;
    border-radius: 5px !important;
    background: #ddd !important;
}
input[type="range"].form-range::-moz-range-track {
    height: 6px !important;
    border-radius: 5px !important;
    background: #ddd !important;
}
input[type="range"].form-range::-ms-track {
    height: 6px !important;
    border-radius: 5px !important;
    background: #ddd !important;
    border-color: transparent !important;
    color: transparent !important;
}

/* Focus and hover effects */
input[type="range"].form-range:focus {
    outline: none !important;
}
input[type="range"].form-range:hover::-webkit-slider-thumb {
    transform: scale(1.1) !important;
}
input[type="range"].form-range:hover::-moz-range-thumb {
    transform: scale(1.1) !important;
}
input[type="range"].form-range:hover::-ms-thumb {
    transform: scale(1.1) !important;
}

/* Optional: Add transition for smooth thumb movement */
input[type="range"].form-range::-webkit-slider-thumb,
input[type="range"].form-range::-moz-range-thumb,
input[type="range"].form-range::-ms-thumb {
    transition: transform 0.2s ease !important;
}

/* Full-width pagination background */
.pagination-bar {
    background: #f8f9fa !important;           /* light gray */
    border-radius: 0.25rem;
    border: 1px solid #dee2e6;            /* rounded corners */
    text-align: center !important;            /* center pagination */
    margin-top: 20px !important;
    width: 100% !important;                   /* full width */
}

/* Pagination list layout */
.pagination {
    display: inline-flex !important;  /* inline horizontal */
    padding-left: 0 !important;
    margin: 0 !important;
}

/* Page items */
.pagination li {
    margin: 0 3px !important;
}

.pagination li a,
.pagination li span {
    padding: 6px 12px !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 4px !important;
    color: #28a745 !important;
    background: #fff !important;
    text-decoration: none !important;
}

/* Hover effect */
.pagination li a:hover {
    background: #e9ecef !important;
}

/* Active page */
.pagination li.active a,
.pagination li.active span {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: #fff !important;
    font-weight: bold !important;
}