/**
 * Custom Light Theme Override
 * Overrides DaisyUI light theme with Green & Yellow color scheme
 */

[data-theme="light"] {
    /* Primary colors - Green */
    --fallback-p: #1ba74a;
    --p: #1ba74a;
    --fallback-pf: rgb(9, 139, 57);
    --pf: rgb(9, 139, 57);          /* Primary Focus - Green-600 */
    --fallback-pc: rgb(255 255 255);
    --pc: rgb(255 255 255);        /* Primary Content - White text */
    
    /* Secondary colors - Yellow */
    --s: rgb(234 179 8);           /* Secondary - Yellow-500 */
    --sf: rgb(202 138 4);          /* Secondary Focus - Yellow-600 */
    --sc: rgb(255 255 255);        /* Secondary Content - White text */
    
    /* Accent colors - Sky Blue */
    --a: rgb(14 165 233);          /* Accent - Sky-500 */
    --af: rgb(2 132 199);          /* Accent Focus - Sky-600 */
    --ac: rgb(255 255 255);        /* Accent Content - White text */
    
    /* Neutral colors - Cyan/Dark */
    --n: rgb(22 78 99);            /* Neutral - Cyan-900 */
    --nf: rgb(14 116 144);         /* Neutral Focus - Cyan-700 */
    --nc: rgb(255 255 255);        /* Neutral Content - White text */
    
    /* Base colors - Background */
    --fallback-b1: rgb(255 255 255);
    --b1: rgb(255 255 255);        /* Base 100 - White background */
    --fallback-b2: rgb(249 250 251);
    --b2: rgb(249 250 251);        /* Base 200 - Gray-50 */
    --fallback-b3: rgb(243 244 246);
    --b3: rgb(243 244 246);        /* Base 300 - Gray-100 */
    --fallback-bc: rgb(49, 77, 67);
    --bc: rgb(49, 77, 67);           /* Base Content - Gray-800 text */
    
    /* State colors */
    --in: rgb(59 130 246);         /* Info - Blue-500 */
    --inc: rgb(255 255 255);       /* Info Content - White */
    --su: rgb(34 197 94);          /* Success - Green-500 */
    --suc: rgb(255 255 255);       /* Success Content - White */
    --wa: rgb(234 179 8);          /* Warning - Yellow-500 */
    --wac: rgb(255 255 255);       /* Warning Content - White */
    --er: rgb(239 68 68);          /* Error - Red-500 */
    --erc: rgb(255 255 255);       /* Error Content - White */
    
    /* Border and rounded */
    --rounded-box: 1rem;      /* Border radius for cards */
    --rounded-btn: 0.5rem;    /* Border radius for buttons */
    --rounded-badge: 1.9rem;  /* Border radius for badges */
    --animation-btn: 0.25s;   /* Button animation duration */
    --animation-input: 0.2s;  /* Input animation duration */
    --btn-focus-scale: 0.95;  /* Button scale on focus */
    --border-btn: 1px;        /* Border width for buttons */
    --tab-border: 1px;        /* Border width for tabs */
    --tab-radius: 0.5rem;     /* Border radius for tabs */
}


/* ============================================
   CUSTOM GRADIENT UTILITIES
   ============================================ */

   
.gradient-gray-100 {
    background: linear-gradient(135deg, #e7e7e7 0%, #d4d4d4 100%);
}
  
.gradient-gray-300 {
    background: linear-gradient(135deg, #dbdbdb 0%, #b4b4b4 100%);
}


/* Solid Green Gradients */
.gradient-green {
    background: linear-gradient(135deg, #22c55e 0%, #059669 100%);
}

.gradient-green-dark {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.gradient-green-light {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
}

.gradient-yellow-light {
    background: linear-gradient(135deg, #e6d85d 0%, #cecb30 100%);
}

.gradient-yellow-theme {
    background: linear-gradient(135deg, #ffe553 0%, #ffe553 100%);
}

.gradient-green-theme {
    background: linear-gradient(135deg, #1ba74a 0%, #1ba74a 100%);
}

.gradient-green-emerald {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* Transparent/Overlay Green Gradients */
.gradient-green-overlay {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.9) 0%, rgba(5, 150, 105, 0.9) 100%);
}

.gradient-green-overlay-light {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.8) 0%, rgba(5, 150, 105, 0.8) 100%);
}

.gradient-green-overlay-dark {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.95) 0%, rgba(4, 120, 87, 0.95) 100%);
}

.gradient-green-overlay-soft {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.7) 0%, rgba(5, 150, 105, 0.7) 100%);
}

.gradient-green-overlay-subtle {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.5) 0%, rgba(5, 150, 105, 0.5) 100%);
}

/* Radial Green Gradients */
.gradient-green-radial {
    background: radial-gradient(circle at top left, #22c55e 0%, #059669 100%);
}

.gradient-green-radial-center {
    background: radial-gradient(circle at center, #4ade80 0%, #22c55e 50%, #059669 100%);
}

.gradient-yellow-radial-center {
    background: radial-gradient(circle at center, #fff3ab 0%, #ffec80 50%, #ffe553 100%)
}

/* Directional Green Gradients */
.gradient-green-to-right {
    background: linear-gradient(to right, #22c55e 0%, #059669 100%);
}

.gradient-green-to-bottom {
    background: linear-gradient(to bottom, #22c55e 0%, #059669 100%);
}

.gradient-green-to-top {
    background: linear-gradient(to top, #059669 0%, #22c55e 100%);
}

.gradient-green-diagonal {
    background: linear-gradient(45deg, #22c55e 0%, #059669 100%);
}

/* Three-Color Green Gradients */
.gradient-green-triple {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 50%, #059669 100%);
}

.gradient-green-triple-dark {
    background: linear-gradient(135deg, #22c55e 0%, #059669 50%, #047857 100%);
}

.gradient-yellow-triple-dark {
    background: linear-gradient(135deg, #c5c222 0%, #8c9605 50%, #707804 100%);
}

.gradient-yellow-triple-light {
    background: linear-gradient(135deg, #e6e5c1 0%, #dce0a2 50%, #aaad82 100%);
}

/* Green + Teal Combinations */
.gradient-green-teal {
    background: linear-gradient(135deg, #22c55e 0%, #14b8a6 100%);
}

.gradient-green-cyan {
    background: linear-gradient(135deg, #22c55e 0%, #06b6d4 100%);
}

.gradient-teal-green {
    background: linear-gradient(135deg, #14b8a6 0%, #22c55e 100%);
}

/* Green + Blue Combinations */
.gradient-green-blue {
    background: linear-gradient(135deg, #22c55e 0%, #3b82f6 100%);
}

.gradient-green-sky {
    background: linear-gradient(135deg, #22c55e 0%, #0ea5e9 100%);
}

/* Green Mesh Gradients (Complex) */
.gradient-green-mesh {
    background: linear-gradient(135deg, #22c55e 0%, #059669 25%, #10b981 50%, #047857 75%, #065f46 100%);
}

.gradient-green-mesh-light {
    background: linear-gradient(135deg, #86efac 0%, #4ade80 25%, #22c55e 50%, #16a34a 75%, #15803d 100%);
}

/* Animated Green Gradients */
.gradient-green-animated {
    background: linear-gradient(135deg, #22c55e, #059669, #10b981, #047857);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Green with Pattern Overlay */
.gradient-green-pattern {
    background: 
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(135deg, #22c55e 0%, #059669 100%);
}

/* Home Class */

.btn-logo {
    display: inline-flex;
    height: 45px;
    min-height: 45px;
    flex-shrink: 0;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    border-radius: var(--rounded-btn, .5rem);
    border-color: transparent;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
    font-size: .875rem;
    line-height: 1em;
    font-weight: 600;
    text-decoration-line: none;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    background-color: transparent;
    vertical-align: middle;
}

.btn-logo img{
    height: 42px;
}


/* ============================================
   ISLAMIC PATTERN OVERLAYS
   ============================================ */

.hero-overlay-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.pattern-islamic-star {
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2322c55e' fill-opacity='0.03'%3E%3Cpath d='M40 40l10-10-10-10-10 10z M40 0l10 10-10 10-10-10z M0 40l10-10-10-10-10 10z M80 40l-10-10 10-10 10 10z M40 80l-10-10 10-10 10 10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ============================================
   CARD ENHANCEMENTS
   ============================================ */

.card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.card-bordered-green {
    border-top: 4px solid rgb(34, 197, 94);
}

.card-bordered-yellow {
    border-top: 4px solid rgb(234, 179, 8);
}

.card-bordered-blue {
    border-top: 4px solid rgb(59, 130, 246);
}

.card-bordered-red {
    border-top: 4px solid rgb(239, 68, 68);
}

/* ============================================
   BUTTON ENHANCEMENTS
   ============================================ */

.btn {
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.btn-primary {
    background: linear-gradient(135deg, rgb(34, 197, 94) 0%, rgb(22, 163, 74) 100%);
    border: none;
}

.btn-primary:hover {
    background: linear-gradient(135deg, rgb(22, 163, 74) 0%, rgb(21, 128, 61) 100%);
}

.btn-secondary {
    background: linear-gradient(135deg, rgb(234, 179, 8) 0%, rgb(202, 138, 4) 100%);
    border: none;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, rgb(202, 138, 4) 0%, rgb(161, 98, 7) 100%);
}

/* ============================================
   BADGE COLORS
   ============================================ */

.badge-primary {
    background-color: rgb(34, 197, 94);
    color: white;
    border: none;
}

.badge-secondary {
    background-color: rgb(234, 179, 8);
    color: white;
    border: none;
}

.badge-success {
    background-color: rgb(34, 197, 94);
    color: white;
}

.badge-info {
    background-color: rgb(59, 130, 246);
    color: white;
}

.badge-warning {
    background-color: rgb(234, 179, 8);
    color: white;
}

.badge-error {
    background-color: rgb(239, 68, 68);
    color: white;
}

/* ============================================
   PROGRESS BAR COLORS
   ============================================ */

.progress-primary {
    background-color: rgba(34, 197, 94, 0.2);
}

.progress-primary::-moz-progress-bar {
    background-color: rgb(34, 197, 94);
}

.progress-primary::-webkit-progress-value {
    background-color: rgb(34, 197, 94);
}

.progress-secondary {
    background-color: rgba(234, 179, 8, 0.2);
}

.progress-secondary::-moz-progress-bar {
    background-color: rgb(234, 179, 8);
}

.progress-secondary::-webkit-progress-value {
    background-color: rgb(234, 179, 8);
}

.progress-success {
    background-color: rgba(34, 197, 94, 0.2);
}

.progress-success::-moz-progress-bar {
    background-color: rgb(34, 197, 94);
}

.progress-success::-webkit-progress-value {
    background-color: rgb(34, 197, 94);
}

/* ============================================
   TAB ACTIVE STATES
   ============================================ */

.tab-active.bg-primary {
    background-color: rgb(34, 197, 94) !important;
    color: white !important;
}

.tab-active.bg-error {
    background-color: rgb(239, 68, 68) !important;
    color: white !important;
}

.tab-active.bg-info {
    background-color: rgb(59, 130, 246) !important;
    color: white !important;
}

.tab-active.bg-success {
    background-color: rgb(34, 197, 94) !important;
    color: white !important;
}

/* ============================================
   AVATAR RING COLORS
   ============================================ */

.ring-primary {
    --tw-ring-color: rgb(34, 197, 94);
}

.ring-secondary {
    --tw-ring-color: rgb(234, 179, 8);
}

/* ============================================
   RATING STARS - Yellow
   ============================================ */

.rating input.mask-star-2:checked,
.rating input.mask-star-2.bg-secondary {
    background-color: rgb(234, 179, 8);
}

/* ============================================
   SHADOW UTILITIES
   ============================================ */

.tx-white-shadow {
    text-shadow: 1px 1px 2px #efefef;
}

.shadow-primary {
    box-shadow: 0 10px 15px -3px rgba(34, 197, 94, 0.3);
}

.shadow-secondary {
    box-shadow: 0 10px 15px -3px rgba(234, 179, 8, 0.3);
}

/* ============================================
   TEXT UTILITIES
   ============================================ */

.text-white {
    color: rgb(227, 238, 231);
}

.text-white-90n {
    color: rgb(214, 223, 217);
}

.text-white-80n {
    color: rgb(198, 209, 202);
}

.text-primary-focus {
    color: rgb(22, 163, 74);
}

.text-secondary-focus {
    color: rgb(202, 138, 4);
}

/* ============================================
   NAVBAR ENHANCEMENTS
   ============================================ */

.navbar {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.95);
}

.navbar.sticky {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero-content.hero-home {
    display: grid;
}

.hero-overlay {
    backdrop-filter: blur(2px);
}

.hero-img-bg {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hero-img-home {
    max-height: 530px; overflow: hidden;
    border: 3px solid rgba(32, 124, 66, 0.75);
    border-radius: 15px;
}

.hero-img-side {
    max-height: 360px; overflow: hidden;
    border: 3px solid rgba(32, 124, 66, 0.75);
    border-radius: 15px;
}

/* ============================================
   MORE
   ============================================ */

.card figure.fig-top {
    padding-top: 25px;
    padding-right: 25px;
    align-items: flex-start;
    justify-content: flex-end;
    font-size: 35px;
    color: rgba(150, 150, 150, 0.5);
}


/* ============================================
   PAGINATION
   ============================================ */

/* Main pagination container */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style-type: none;
    gap: 0.25rem; /* space-x-1 */
}

/* Pagination list items */
.pagination li {
    border-radius: 0.5rem; /* rounded */
}

/* Links and the disabled/active span elements */
.pagination li a,
.pagination li span {
    display: block;
    padding: 0.5rem 0.75rem; /* py-2 px-3 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 400; /* font-normal */
    text-align: center;
    text-decoration: none;
    color: hsl(var(--bc)); /* text-base-content */
    background-color: hsl(var(--b2)); /* bg-base-200 */
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Hover effect for links */
.pagination li a:hover {
    background-color: hsl(var(--p)); /* bg-primary */
    color: hsl(var(--pc)); /* text-primary-content */
}

/* Active page */
.pagination li.active span {
    background-color: hsl(var(--p)); /* bg-primary */
    color: hsl(var(--pc)); /* text-primary-content */
}

/* Disabled link (e.g., "Previous" on page 1) */
.pagination li.disabled span {
    background-color: hsl(var(--b3)); /* bg-base-300 */
    color: hsl(var(--bc) / 0.2); /* text-base-content/20 (or 40) */
    cursor: not-allowed;
}

/* ============================================
   FOOTER
   ============================================ */

footer.footer {
    background: linear-gradient(135deg, #1ba74a 0%, #2d9550 100%);
    color: #f3f3f3;
}

div.footer {
    background: linear-gradient(0deg, #105527 0%, #1ba74a 100%);
    color: #cfcfcf;
}

.footer-title {
    color: #f3f3f3;
    opacity: 0.9;
}

.link {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.link:focus-visible {
  outline: 2px solid #10cc27;
  outline-offset: 2px;
}

.link-hover {
  transition: color 0.2s;
}

.link-hover:hover {
  color: hsl(var(--p));
}

.link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 7px;
  margin: 0px 3px 3px 0px;
  border-radius: 9px;
  font-weight: 600;
  color: inherit;
  background-color: rgba(35, 125, 40, 0.75);
  border: 1px solid rgba(125, 125, 125, 0.35);
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
}

.link-btn:hover {
  background-color: rgba(35, 75, 125, 0.85);
  color: hsl(var(--pc));
  border-color: hsl(var(--p));
}

/* ============================================
   WHATSAPP FLOAT BUTTON
   ============================================ */

.btn-success {
    background-color: rgb(37, 211, 102) !important;
    border: none;
}

.btn-success:hover {
    background-color: rgb(16, 185, 129) !important;
    transform: scale(1.1);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .hero h1 {
        font-size: 2rem !important;
    }
    
    .hero p {
        font-size: 1rem !important;
    }
    
    .hero-content.hero-home {
        display: inline-block;
    }

    .card-title {
        font-size: 1.25rem !important;
    }
}

/* ============================================
   ANIMATION UTILITIES
   ============================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.6s ease-out;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slide-in-left {
    animation: slideInLeft 0.6s ease-out;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slide-in-right {
    animation: slideInRight 0.6s ease-out;
}

/* ============================================
   SCROLL BEHAVIOR
   ============================================ */

html {
    scroll-behavior: smooth;
}

/* ============================================
   DROPDOWN MENU
   ============================================ */

.dropdown:hover {
    color: white;
}

.dropdown-content {
    background-color: rgb(51, 92, 13);
    border: 1px solid rgb(2, 54, 18);
}

.menu li > a:hover {
    background-color: rgb(11, 116, 50);
    color: white;
}

.menu li:where(.menu li:not(.menu-title,.disabled) > :not(ul,details,.menu-title)):not(.active,.btn):hover, :where(.menu li:not(.menu-title,.disabled) > details > summary:not(.menu-title)):not(.active,.btn):hover {
    background-color: var(--fallback-bc, oklch(var(--bc) / .1));
    color: white;
}

/* ============================================
   STAT CARD BACKGROUNDS
   ============================================ */

.stat {
    transition: all 0.3s ease;
}

.stat:hover {
    transform: scale(1.05);
}

.bg-gradient-green-light {
    background: linear-gradient(135deg, rgb(240, 253, 244) 0%, rgb(209, 250, 229) 100%);
}

.bg-gradient-yellow-light {
    background: linear-gradient(135deg, rgb(254, 252, 232) 0%, rgb(254, 243, 199) 100%);
}

.bg-gradient-blue-light {
    background: linear-gradient(135deg, rgb(239, 246, 255) 0%, rgb(219, 234, 254) 100%);
}

/* ============================================
   CUSTOM LOADING SPINNER (Optional)
   ============================================ */

.loading-spinner {
    border: 3px solid rgba(34, 197, 94, 0.3);
    border-radius: 50%;
    border-top-color: rgb(34, 197, 94);
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}