/*
 * REWRITTEN html.css - FINAL ROBUST VERSION
 * Focus: High specificity for BOLD GOLD GRADIENT BACKGROUND, Bootstrap 5 & AdminLTE.
 */

:root {
  /* Core Gold/Accent Gradients */
  --gold-text-gradient: linear-gradient(90deg, #FFD700 0%, #FF8C00 100%); /* New: Gold Text Gradient */
  --gold-gradient-bg: linear-gradient(135deg, #FFD700 0%, #FFA500 100%); /* Bold Gold Card Header */
  --gold-gradient-button: linear-gradient(90deg, #FFC720 0%, #FF9A00 100%); /* Bold Gold Primary Button */
  
  /* Colorful Contextual Gradients */
  --grad-primary: linear-gradient(45deg, #007bff 0%, #0056b3 100%);      /* Blue */
  --grad-success: linear-gradient(45deg, #28a745 0%, #1e7e34 100%);      /* Green */
  --grad-info: linear-gradient(45deg, #17a2b8 0%, #117a8b 100%);         /* Cyan */
  --grad-warning: linear-gradient(45deg, #ffc107 0%, #d39e00 100%);      /* Yellow/Orange */
  --grad-danger: linear-gradient(45deg, #dc3545 0%, #bd2130 100%);       /* Red */
  
  /* Light Gradient Backgrounds (Nice Light Colorful Gradient) */
  --colorful-light-gradient: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%); /* Subtle Blue/White */
  --light-primary-gradient: linear-gradient(45deg, #dceeff 0%, #ffffff 100%); /* Very Light Primary */
  
  /* Focus/Shadows */
  --input-focus-shadow: rgba(0, 123, 255, 0.25);
  --gold-shadow: rgba(255, 165, 0, 0.4);
  --light-shadow: rgba(0, 123, 255, 0.15);
}

/* Base Body Style */
body {
  background-color: #ffffff !important;
}

/* ------------------------------------------------------------------- */
/* I. BOLD GOLD CARD HEADER BACKGROUND (FIXED SPECIFICITY) */
/* ------------------------------------------------------------------- */

/* Apply the gold gradient background with high priority to Bootstrap/AdminLTE headers */
.card .card-header.bg-gold-card,
.box .box-header.bg-gold-card,
.card-header.bg-gold-gradient { /* Fallback for legacy class */
  background: var(--gold-gradient-bg) !important;
  color: #fff !important; 
  border-bottom: none !important;
  padding: 1.25rem 1.5rem !important;
  border-radius: 9px 9px 0 0 !important;
  box-shadow: 0 5px 15px rgba(255, 165, 0, 0.3);
}

/* Ensure text and icons are white and bold inside the gold header */
.card-header.bg-gold-card .card-title,
.box-header.bg-gold-card .box-title,
.card-header.bg-gold-card *,
.box-header.bg-gold-card * {
  font-weight: 900 !important; 
  font-size: 1.5rem !important;
  color: #fff !important;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  margin: 0;
}
.card-header.bg-gold-card .btn, /* Ensure any buttons/icons inside the header are also white */
.box-header.bg-gold-card .btn {
  color: #fff !important;
  opacity: 0.8;
}

/* Standard Card/Box Styling (Nice Light Colorful Gradient Body) */
.card,
.box { 
    /* Apply the light gradient to the card body */
    background: var(--colorful-light-gradient);
    border: 1px solid #e9ecef;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

/* Standard Card/Box Header (for non-gold cards) */
.card-header,
.box-header {
  background-color: #f8f9fa !important;
  border-bottom: 1px solid #e9ecef !important;
  padding: 1rem 1.25rem;
}

/* ------------------------------------------------------------------- */
/* II. GRADIENT BUTTONS & UI */
/* ------------------------------------------------------------------- */

/* Primary Button: BOLD GOLD GRADIENT BUTTON */
.btn-primary {
  background: var(--gold-gradient-button) !important;
  border-color: #FF9A00 !important;
  color: white !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 20px var(--gold-shadow) !important;
  transition: all 0.2s ease;
}
.btn-primary:hover {
  background: linear-gradient(90deg, #FFD700 0%, #FF9000 100%) !important;
  box-shadow: 0 10px 25px rgba(255, 165, 0, 0.6) !important;
  transform: translateY(-2px);
}

/* New: Button with Nice Light Colorful Gradient (e.g., btn-light-gradient) */
.btn-light-gradient {
  background: var(--light-primary-gradient) !important;
  border: 1px solid #cce5ff !important;
  color: #007bff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 8px var(--light-shadow) !important;
}

.btn-light-gradient:hover {
  background: linear-gradient(45deg, #e0f0ff 0%, #f0f7ff 100%) !important;
  box-shadow: 0 6px 12px var(--light-shadow) !important;
  transform: translateY(-1px);
}


/* Contextual Gradient Buttons */
.btn-success { background: var(--grad-success) !important; border-color: #1e7e34 !important; }
.btn-info    { background: var(--grad-info) !important; border-color: #117a8b !important; }
.btn-warning { background: var(--grad-warning) !important; border-color: #d39e00 !important; color: #212529 !important; }
.btn-danger  { background: var(--grad-danger) !important; border-color: #bd2130 !important; }
.btn-secondary { background: var(--grad-primary) !important; border-color: #0056b3 !important; }

/* Global Button Styling */
.btn:not(.btn-outline-*) {
    transition: transform 0.2s, box-shadow 0.2s;
    font-weight: 600;
    border-radius: 8px;
    /* Only apply white color to dark gradient buttons */
    &:not(.btn-light-gradient) {
      color: white !important;
    }
}
.btn-warning { color: #212529 !important; } /* Exception for warning text */


/* --- III. AdminLTE & Utility Components --- */

/* AdminLTE Info Boxes (Small Boxes/Info Boxes) */
.info-box,
.small-box {
    background: var(--colorful-light-gradient) !important;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Nav-Tabs Active Link (Blue Gradient) */
.nav-tabs .nav-link.active {
  background: var(--grad-primary) !important;
  color: #fff !important;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -2px 10px rgba(0, 123, 255, 0.4);
}

/* Alerts: Light Gradient Background */
.alert {
    border-left: 5px solid;
    border-radius: 8px;
    background: var(--colorful-light-gradient) !important;
}

/* Input Focus (Nice Light Colorful Gradient Focus) */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 0.25rem var(--input-focus-shadow);
  outline: none;
}
/* --- V. Nice Light Colorful Gradient for Plugin/Library Containers --- */

.bg-nice-gradient {
  /* A subtle, refreshing gradient (e.g., light blue/green) */
  background: linear-gradient(135deg, #e0f7fa 0%, #ffffff 100%) !important;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  padding: 15px;
  /* Add some default padding */
}

/* ------------------------------------------------------------------- */
/* VI. PAGINATION STYLING WITH NICE LIGHT COLORFUL GRADIENT */
/* ------------------------------------------------------------------- */

.pagination .page-btn {
  /* Use light gradient for default page buttons */
  background: var(--light-primary-gradient) !important;
  border: 1px solid #cce5ff !important;
  color: #007bff !important;
  font-weight: 600;
  padding: 8px 15px;
  border-radius: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px var(--light-shadow);
}

.pagination .page-btn:hover:not(:disabled) {
  /* Darker on hover */
  background: linear-gradient(45deg, #e0f0ff 0%, #f0f7ff 100%) !important;
  border-color: #99ccff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px var(--light-shadow);
}

.pagination .page-btn.active {
  /* Active button uses the main primary gradient for clear contrast */
  background: var(--grad-primary) !important;
  color: white !important;
  border-color: #0056b3 !important;
  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.4);
  transform: none; /* Reset transform for active state */
}

.pagination .page-btn:disabled {
  /* Disabled state remains subtle */
  background: #f8f9fa !important;
  color: #adb5bd !important;
  border-color: #dee2e6 !important;
  cursor: not-allowed;
  box-shadow: none;
}
/* ------------------------------------------------------------------- */
/* II. GRADIENT BUTTONS & UI (FINAL AGGRESSIVE FIXES) */
/* ------------------------------------------------------------------- */

/* Primary Button: BOLD GOLD GRADIENT BUTTON (Re-enforced) */
.btn-primary {
  background: var(--gold-gradient-button) !important;
  border-color: #FF9A00 !important;
  color: white !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 20px var(--gold-shadow) !important;
  transition: all 0.2s ease;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { 
  background: linear-gradient(90deg, #FFD700 0%, #FF9000 100%) !important;
  box-shadow: 0 10px 25px rgba(255, 165, 0, 0.6) !important;
  transform: translateY(-2px);
  color: white !important;
}

/* Nice Light Colorful Gradient Button (ULTIMATE FIX) */
/* Targeting element names (button, a) combined with the class for maximum specificity */
button.btn-light-gradient, a.btn-light-gradient, .btn-light-gradient {
  background: var(--light-primary-gradient) !important;
  border: 1px solid #cce5ff !important;
  color: #007bff !important; /* FORCED BLUE TEXT */
  font-weight: 600 !important;
  box-shadow: 0 4px 8px var(--light-shadow) !important;
  padding: 8px 15px;
}

button.btn-light-gradient:hover, button.btn-light-gradient:focus, button.btn-light-gradient:active,
a.btn-light-gradient:hover, a.btn-light-gradient:focus, a.btn-light-gradient:active,
.btn-light-gradient:hover, .btn-light-gradient:focus, .btn-light-gradient:active {
  background: linear-gradient(45deg, #e0f0ff 0%, #f0f7ff 100%) !important;
  box-shadow: 0 6px 12px var(--light-shadow) !important;
  transform: translateY(-1px) !important;
  color: #007bff !important; /* FORCED BLUE TEXT ON HOVER/FOCUS */
  border-color: #99ccff !important;
}

/* ------------------------------------------------------------------- */
/* IV. TEXT GRADIENT (ULTIMATE AGGRESSIVE FIX) */
/* ------------------------------------------------------------------- */

/* Using 'body' and explicit element selectors to achieve maximum specificity, 
   defeating any framework overrides on text color properties. */
body [class*="text-gold-gradient"],
body .text-gold-gradient,
body h1.text-gold-gradient,
body h2.text-gold-gradient,
body h3.text-gold-gradient,
body h4.text-gold-gradient,
body h5.text-gold-gradient,
body h6.text-gold-gradient {
    /* CRITICAL FIXES - Use !important on every line */
    background: var(--gold-text-gradient) !important;
    
    /* Apply clip properties with all relevant vendor prefixes */
    -webkit-background-clip: text !important;
    -moz-background-clip: text !important;
    background-clip: text !important;
    
    /* Make text transparent for the background to show through - THE CORE FIX */
    -webkit-text-fill-color: transparent !important;
    -moz-text-fill-color: transparent !important;
    text-fill-color: transparent !important;
    
    /* Fallback color for browsers that don't support text clipping */
    color: #FF6F00 !important;
    
    /* Ensure it is inline-block to define boundaries for the background */
    display: inline-block !important;
    
    /* Ensure no conflicting properties interfere */
    line-height: 1.2 !important; 
    -webkit-text-decoration: none !important;
    text-decoration: none !important;

    /* Optional: Add a subtle text shadow for better contrast */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}


/* ------------------------------------------------------------------- */
/* V. PAGINATION STYLING WITH NICE LIGHT COLORFUL GRADIENT */
/* ------------------------------------------------------------------- */

.pagination .page-btn {
  /* Use light gradient for default page buttons */
  background: var(--light-primary-gradient) !important;
  border: 1px solid #cce5ff !important;
  color: #007bff !important;
  font-weight: 600;
  padding: 8px 15px;
  border-radius: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px var(--light-shadow);
}

.pagination .page-btn:hover:not(:disabled) {
  /* Darker on hover */
  background: linear-gradient(45deg, #e0f0ff 0%, #f0f7ff 100%) !important;
  border-color: #99ccff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px var(--light-shadow);
}

.pagination .page-btn.active {
  /* Active button uses the main primary gradient for clear contrast */
  background: var(--grad-primary) !important;
  color: white !important;
  border-color: #0056b3 !important;
  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.4);
  transform: none; /* Reset transform for active state */
}

.pagination .page-btn:disabled {
  /* Disabled state remains subtle */
  background: #f8f9fa !important;
  color: #adb5bd !important;
  border-color: #dee2e6 !important;
  cursor: not-allowed;
  box-shadow: none;
}

/* ------------------------------------------------------------------- */
/* VI. FORM CONTROLS (COMBOBOX/INPUT) STYLING */
/* ------------------------------------------------------------------- */

/* Input/Combobox Base styling */
.form-control, 
.form-select, 
input[type="text"], 
input[type="search"], 
select {
  background-color: #ffffff;
  border: 1px solid #ced4da;
  border-radius: 8px;
  padding: 10px 15px;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Combobox (Select) Specific Styling */
.form-select, 
select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23007bff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 12px 12px !important;
    padding-right: 35px !important;
}

/* Input/Combobox Focus: Nice Light Colorful Gradient Focus */
.form-control:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="search"]:focus,
select:focus {
  border-color: #007bff; /* Primary Blue border */
  box-shadow: 0 0 0 0.25rem var(--input-focus-shadow); /* Soft Blue shadow from :root */
  outline: none;
  background-color: var(--light-primary-gradient); /* Very light gradient in the background on focus */
}

/* Disabled State */
.form-control:disabled,
.form-select:disabled,
input:disabled,
select:disabled {
  background-color: #e9ecef;
  opacity: 0.6;
}