/**
 * ============================================================================
 * color_font.css - Styling Utilities (Colors, Fonts, Borders)
 * ============================================================================
 * 
 * PURPOSE:
 * This file contains ONLY color and font-related utility classes for the 
 * DocVionAI application. It provides a consistent color palette and 
 * typography utilities.
 * 
 * ALLOWED CLASSES:
 * - Background color classes (.bg-light-red, .bg-dark-blue, etc.)
 * - Text color classes (.text-red, .text-green, etc.)
 * - Border color classes (.border-red, .border-blue, etc.)
 * - Font size classes (.font-12, .font-14, etc.)
 * - Font weight classes (.fw-bold, .fw-light, etc.)
 * 
 * NOT ALLOWED:
 * - Layout/spacing CSS (use main.css)
 * - Animation CSS (use main.css)
 * - Component CSS (use main.css)
 * - Mobile/responsive CSS (use mobile.css or tablet.css)
 * 
 * NOTE FOR DEVELOPERS:
 * Keep this file focused on colors and fonts only. Any other styles 
 * should be placed in the appropriate file.
 * ============================================================================
 */

/* Primary Colors - Red */
.bg-light-red {
    background-color: mistyrose !important;
}

.bg-red {
    background-color: red !important;
}

.bg-dark-red {
    background-color: darkred !important;
}

.text-light-red {
    color: mistyrose !important;
}

.text-red {
    color: red !important;
}

.text-dark-red {
    color: darkred !important;
}

.border-light-red {
    border-color: mistyrose !important;
}

.border-red {
    border-color: red !important;
}

.border-dark-red {
    border-color: darkred !important;
}

/* Primary Colors - Black */
.bg-light-black {
    background-color: #444 !important;
    /* or use rgba(0,0,0,0.2) for lighter effect */
}

.bg-black {
    background-color: black !important;
}

.bg-dark-black {
    background-color: #000 !important;
    /* technically same as black, but you can tweak */
}

.text-light-black {
    color: #444 !important;
}

.text-black {
    color: black !important;
}

.text-dark-black {
    color: #000 !important;
}

.border-light-black {
    border-color: #444 !important;
}

.border-black {
    border-color: black !important;
}

.border-dark-black {
    border-color: #000 !important;
}


/* Primary Colors - Blue */
.bg-light-blue {
    background-color: #E3F2FD !important;
}

.bg-blue {
    background-color: blue !important;
}

.bg-dark-blue {
    background-color: darkblue !important;
}

.text-light-blue {
    color: #E3F2FD !important;
}

.text-blue {
    color: blue !important;
}

.text-dark-blue {
    color: darkblue !important;
}

.border-light-blue {
    border-color: #E3F2FD !important;
}

.border-blue {
    border-color: blue !important;
}

.border-dark-blue {
    border-color: darkblue !important;
}

.bg-light-grey {
    background-color: lightgrey !important;
}

.bg-grey {
    background-color: grey !important;
}

.bg-dark-grey {
    background-color: #676565 !important;
}

.text-light-grey {
    color: lightgrey !important;
}

.text-grey {
    color: grey !important;
}

.text-dark-grey {
    color: #676565 !important;
}

.border-light-grey {
    border-color: lightgrey !important;
}

.border-grey {
    border-color: grey !important;
}

.border-dark-grey {
    border-color: #676565 !important;
}

/* Primary Colors - Green */
.bg-light-green {
    background-color: #E8F5E9 !important;
}

.bg-green {
    background-color: green !important;
}

.bg-dark-green {
    background-color: darkgreen !important;
}

.text-light-green {
    color: honeydew !important;
}

.text-green {
    color: green !important;
}

.text-dark-green {
    color: darkgreen !important;
}

.border-light-green {
    border-color: honeydew !important;
}

.border-green {
    border-color: green !important;
}

.border-dark-green {
    border-color: darkgreen !important;
}

/* Secondary Colors - Purple */
.bg-light-purple {
    background-color: #F3E5F5 !important;
}

.bg-purple {
    background-color: mediumpurple !important;
}

.bg-dark-purple {
    background-color: indigo !important;
}

.text-light-purple {
    color: lavender !important;
}

.text-purple {
    color: mediumpurple !important;
}

.text-dark-purple {
    color: indigo !important;
}

.border-light-purple {
    border-color: lavender !important;
}

.border-purple {
    border-color: mediumpurple !important;
}

.border-dark-purple {
    border-color: indigo !important;
}

/* Secondary Colors - Orange */
.bg-light-orange {
    background-color: seashell !important;
}

.bg-orange {
    background-color: orange !important;
}

.bg-dark-orange {
    background-color: darkorange !important;
}

.text-light-orange {
    color: seashell !important;
}

.text-orange {
    color: orange !important;
}

.text-dark-orange {
    color: darkorange !important;
}

.border-light-orange {
    border-color: seashell !important;
}

.border-orange {
    border-color: orange !important;
}

.border-dark-orange {
    border-color: darkorange !important;
}

/* Secondary Colors - Teal */
.bg-light-teal {
    background-color: #E0F2F1 !important;
}

.bg-teal {
    background-color: teal !important;
}

.bg-dark-teal {
    background-color: #004D40 !important;
}

.text-light-teal {
    color: #E0F2F1 !important;
}

.text-teal {
    color: teal !important;
}

.text-dark-teal {
    color: #004D40 !important;
}

.border-light-teal {
    border-color: #E0F2F1 !important;
}

.border-teal {
    border-color: teal !important;
}

.border-dark-teal {
    border-color: #004D40 !important;
}

/* Extended Palette - Cyan */
.bg-light-cyan {
    background-color: #E0F7FA !important;
}

.bg-cyan {
    background-color: cyan !important;
}

.bg-dark-cyan {
    background-color: #006064 !important;
}

.text-light-cyan {
    color: #E0F7FA !important;
}

.text-cyan {
    color: cyan !important;
}

.text-dark-cyan {
    color: #006064 !important;
}

.border-light-cyan {
    border-color: #E0F7FA !important;
}

.border-cyan {
    border-color: cyan !important;
}

.border-dark-cyan {
    border-color: #006064 !important;
}

/* Extended Palette - Indigo */
.bg-light-indigo {
    background-color: #E8EAF6 !important;
}

.bg-indigo {
    background-color: indigo !important;
}

.bg-dark-indigo {
    background-color: #1A237E !important;
}

.text-light-indigo {
    color: #E8EAF6 !important;
}

.text-indigo {
    color: indigo !important;
}

.text-dark-indigo {
    color: #1A237E !important;
}

.border-light-indigo {
    border-color: #E8EAF6 !important;
}

.border-indigo {
    border-color: indigo !important;
}

.border-dark-indigo {
    border-color: #1A237E !important;
}

/* Extended Palette - Pink */
.bg-light-pink {
    background-color: lightpink !important;
}

.bg-pink {
    background-color: pink !important;
}

.bg-dark-pink {
    background-color: deeppink !important;
}

.text-light-pink {
    color: lightpink !important;
}

.text-pink {
    color: pink !important;
}

.text-dark-pink {
    color: deeppink !important;
}

.border-light-pink {
    border-color: lightpink !important;
}

.border-pink {
    border-color: pink !important;
}

.border-dark-pink {
    border-color: deeppink !important;
}

/* Extended Palette - Amber */
.bg-light-amber {
    background-color: #FFF8E1 !important;
}

.bg-amber {
    background-color: #FFC107 !important;
}

.bg-dark-amber {
    background-color: #FF6F00 !important;
}

.text-light-amber {
    color: #FFF8E1 !important;
}

.text-amber {
    color: #FFC107 !important;
}

.text-dark-amber {
    color: #FF6F00 !important;
}

.border-light-amber {
    border-color: #FFF8E1 !important;
}

.border-amber {
    border-color: #FFC107 !important;
}

.border-dark-amber {
    border-color: #FF6F00 !important;
}

/* Professional Colors - Slate */
.bg-light-slate {
    background-color: #F8FAFC !important;
}

.bg-slate {
    background-color: slategray !important;
}

.bg-dark-slate {
    background-color: darkslategray !important;
}

.text-light-slate {
    color: #F8FAFC !important;
}

.text-slate {
    color: slategray !important;
}

.text-dark-slate {
    color: darkslategray !important;
}

.border-light-slate {
    border-color: #F8FAFC !important;
}

.border-slate {
    border-color: slategray !important;
}

.border-dark-slate {
    border-color: darkslategray !important;
}

/* Professional Colors - Graphite */
.bg-light-graphite {
    background-color: #F5F5F5 !important;
}

.bg-graphite {
    background-color: #616161 !important;
}

.bg-dark-graphite {
    background-color: #212121 !important;
}

.text-light-graphite {
    color: #F5F5F5 !important;
}

.text-graphite {
    color: #616161 !important;
}

.text-dark-graphite {
    color: #212121 !important;
}

.border-light-graphite {
    border-color: #F5F5F5 !important;
}

.border-graphite {
    border-color: #616161 !important;
}

.border-dark-graphite {
    border-color: #212121 !important;
}

/* Professional Colors - Steel */
.bg-light-steel {
    background-color: #F1F5F9 !important;
}

.bg-steel {
    background-color: steelblue !important;
}

.bg-dark-steel {
    background-color: #0F172A !important;
}

.text-light-steel {
    color: #F1F5F9 !important;
}

.text-steel {
    color: steelblue !important;
}

.text-dark-steel {
    color: #0F172A !important;
}

.border-light-steel {
    border-color: #F1F5F9 !important;
}

.border-steel {
    border-color: steelblue !important;
}

.border-dark-steel {
    border-color: #0F172A !important;
}

/* Vibrant Colors - Lime */
.bg-light-lime {
    background-color: #F9FBE7 !important;
}

.bg-lime {
    background-color: lime !important;
}

.bg-dark-lime {
    background-color: #827717 !important;
}

.text-light-lime {
    color: #F9FBE7 !important;
}

.text-lime {
    color: lime !important;
}

.text-dark-lime {
    color: #827717 !important;
}

.border-light-lime {
    border-color: #F9FBE7 !important;
}

.border-lime {
    border-color: lime !important;
}

.border-dark-lime {
    border-color: #827717 !important;
}

/* Vibrant Colors - Deep Orange */
.bg-light-deep-orange {
    background-color: #FBE9E7 !important;
}

.bg-deep-orange {
    background-color: orangered !important;
}

.bg-dark-deep-orange {
    background-color: #BF360C !important;
}

.text-light-deep-orange {
    color: #FBE9E7 !important;
}

.text-deep-orange {
    color: orangered !important;
}

.text-dark-deep-orange {
    color: #BF360C !important;
}

.border-light-deep-orange {
    border-color: #FBE9E7 !important;
}

.border-deep-orange {
    border-color: orangered !important;
}

.border-dark-deep-orange {
    border-color: #BF360C !important;
}

/* Vibrant Colors - Brown */
.bg-light-brown {
    background-color: #EFEBE9 !important;
}

.bg-brown {
    background-color: brown !important;
}

.bg-dark-brown {
    background-color: #3E2723 !important;
}

.text-light-brown {
    color: #EFEBE9 !important;
}

.text-brown {
    color: brown !important;
}

.text-dark-brown {
    color: #3E2723 !important;
}

.border-light-brown {
    border-color: #EFEBE9 !important;
}

.border-brown {
    border-color: brown !important;
}

.border-dark-brown {
    border-color: #3E2723 !important;
}

/* Additional Professional Colors - Aqua */
.bg-light-aqua {
    background-color: aqua !important;
}

.bg-aqua {
    background-color: aquamarine !important;
}

.bg-dark-aqua {
    background-color: darkcyan !important;
}

.text-light-aqua {
    color: aqua !important;
}

.text-aqua {
    color: aquamarine !important;
}

.text-dark-aqua {
    color: darkcyan !important;
}

.border-light-aqua {
    border-color: aqua !important;
}

.border-aqua {
    border-color: aquamarine !important;
}

.border-dark-aqua {
    border-color: darkcyan !important;
}

/* Additional Professional Colors - Mint */
.bg-light-mint {
    background-color: mintcream !important;
}

.bg-mint {
    background-color: mediumseagreen !important;
}

.bg-dark-mint {
    background-color: seagreen !important;
}

.text-light-mint {
    color: mintcream !important;
}

.text-mint {
    color: mediumseagreen !important;
}

.text-dark-mint {
    color: seagreen !important;
}

.border-light-mint {
    border-color: mintcream !important;
}

.border-mint {
    border-color: mediumseagreen !important;
}

.border-dark-mint {
    border-color: seagreen !important;
}

/* Additional Professional Colors - Lavender */
.bg-light-lavender {
    background-color: lavender !important;
}

.bg-lavender {
    background-color: mediumpurple !important;
}

.bg-dark-lavender {
    background-color: darkslateblue !important;
}

.text-light-lavender {
    color: lavender !important;
}

.text-lavender {
    color: mediumpurple !important;
}

.text-dark-lavender {
    color: darkslateblue !important;
}

.border-light-lavender {
    border-color: lavender !important;
}

.border-lavender {
    border-color: mediumpurple !important;
}

.border-dark-lavender {
    border-color: darkslateblue !important;
}

/* Modern Colors - Coral */
.bg-light-coral {
    background-color: lightcoral !important;
}

.bg-coral {
    background-color: coral !important;
}

.bg-dark-coral {
    background-color: #C73E3E !important;
}

.text-light-coral {
    color: lightcoral !important;
}

.text-coral {
    color: coral !important;
}

.text-dark-coral {
    color: #C73E3E !important;
}

.border-light-coral {
    border-color: lightcoral !important;
}

.border-coral {
    border-color: coral !important;
}

.border-dark-coral {
    border-color: #C73E3E !important;
}

/* Modern Colors - Peach */
.bg-light-peach {
    background-color: peachpuff !important;
}

.bg-peach {
    background-color: #FFA07A !important;
}

.bg-dark-peach {
    background-color: #CC7B59 !important;
}

.text-light-peach {
    color: peachpuff !important;
}

.text-peach {
    color: #FFA07A !important;
}

.text-dark-peach {
    color: #CC7B59 !important;
}

.border-light-peach {
    border-color: peachpuff !important;
}

.border-peach {
    border-color: #FFA07A !important;
}

.border-dark-peach {
    border-color: #CC7B59 !important;
}

/* Modern Colors - Sky */
.bg-light-sky {
    background-color: lightskyblue !important;
}

.bg-sky {
    background-color: skyblue !important;
}

.bg-dark-sky {
    background-color: deepskyblue !important;
}

.text-light-sky {
    color: lightskyblue !important;
}

.text-sky {
    color: skyblue !important;
}

.text-dark-sky {
    color: deepskyblue !important;
}

.border-light-sky {
    border-color: lightskyblue !important;
}

.border-sky {
    border-color: skyblue !important;
}

.border-dark-sky {
    border-color: deepskyblue !important;
}

/* Additional Colors - Olive */
.bg-light-olive {
    background-color: #F0F4C3 !important;
}

.bg-olive {
    background-color: olive !important;
}

.bg-dark-olive {
    background-color: #5C6B00 !important;
}

.text-light-olive {
    color: #F0F4C3 !important;
}

.text-olive {
    color: olive !important;
}

.text-dark-olive {
    color: #5C6B00 !important;
}

.border-light-olive {
    border-color: #F0F4C3 !important;
}

.border-olive {
    border-color: olive !important;
}

.border-dark-olive {
    border-color: #5C6B00 !important;
}

/* Additional Colors - Maroon */
.bg-light-maroon {
    background-color: #FFEBEE !important;
}

.bg-maroon {
    background-color: maroon !important;
}

.bg-dark-maroon {
    background-color: #890a01 !important;
}

.text-light-maroon {
    color: #FFEBEE !important;
}

.text-maroon {
    color: maroon !important;
}

.text-dark-maroon {
    color: #890a01 !important;
}

.border-light-maroon {
    border-color: #FFEBEE !important;
}

.border-maroon {
    border-color: maroon !important;
}

.border-dark-maroon {
    border-color: #890a01 !important;
}

/* Additional Colors - Gold */
.bg-light-gold {
    background-color: #FFF8E1 !important;
}

.bg-gold {
    background-color: gold !important;
}

.bg-dark-gold {
    background-color: goldenrod !important;
}

.text-light-gold {
    color: #FFF8E1 !important;
}

.text-gold {
    color: gold !important;
}

.text-dark-gold {
    color: goldenrod !important;
}

.border-light-gold {
    border-color: #FFF8E1 !important;
}

.border-gold {
    border-color: gold !important;
}

.border-dark-gold {
    border-color: goldenrod !important;
}

/* Additional Colors - Rust */
.bg-light-rust {
    background-color: #FFEBEE !important;
}

.bg-rust {
    background-color: #D84315 !important;
}

.bg-dark-rust {
    background-color: #BF360C !important;
}

.text-light-rust {
    color: #FFEBEE !important;
}

.text-rust {
    color: #D84315 !important;
}

.text-dark-rust {
    color: #BF360C !important;
}

.border-light-rust {
    border-color: #FFEBEE !important;
}

.border-rust {
    border-color: #D84315 !important;
}

.border-dark-rust {
    border-color: #BF360C !important;
}

/* Additional Colors - Wine */
.bg-light-wine {
    background-color: #FCE4EC !important;
}

.bg-wine {
    background-color: #AD1457 !important;
}

.bg-dark-wine {
    background-color: #6A1B9A !important;
}

.text-light-wine {
    color: #FCE4EC !important;
}

.text-wine {
    color: #AD1457 !important;
}

.text-dark-wine {
    color: #6A1B9A !important;
}

.border-light-wine {
    border-color: #FCE4EC !important;
}

.border-wine {
    border-color: #AD1457 !important;
}

.border-dark-wine {
    border-color: #6A1B9A !important;
}

.font-1 {
    font-size: 1px !important;
}

.font-2 {
    font-size: 2px !important;
}

.font-3 {
    font-size: 3px !important;
}

.font-4 {
    font-size: 4px !important;
}

.font-5 {
    font-size: 5px !important;
}

.font-6 {
    font-size: 6px !important;
}

.font-7 {
    font-size: 7px !important;
}

.font-8 {
    font-size: 8px !important;
}

.font-9 {
    font-size: 9px !important;
}

.font-10 {
    font-size: 10px !important;
}

.font-11 {
    font-size: 11px !important;
}

.font-12 {
    font-size: 12px !important;
}

.font-13 {
    font-size: 13px !important;
}

.font-14 {
    font-size: 14px !important;
}

.font-15 {
    font-size: 15px !important;
}

.font-16 {
    font-size: 16px !important;
}

.font-17 {
    font-size: 17px !important;
}

.font-18 {
    font-size: 18px !important;
}

.font-19 {
    font-size: 19px !important;
}

.font-20 {
    font-size: 20px !important;
}

.font-21 {
    font-size: 21px !important;
}

.font-22 {
    font-size: 22px !important;
}

.font-23 {
    font-size: 23px !important;
}

.font-24 {
    font-size: 24px !important;
}

.font-25 {
    font-size: 25px !important;
}

.font-26 {
    font-size: 26px !important;
}

.font-27 {
    font-size: 27px !important;
}

.font-28 {
    font-size: 28px !important;
}

.font-29 {
    font-size: 29px !important;
}

.font-30 {
    font-size: 30px !important;
}

.font-31 {
    font-size: 31px !important;
}

.font-32 {
    font-size: 32px !important;
}

.font-33 {
    font-size: 33px !important;
}

.font-34 {
    font-size: 34px !important;
}

.font-35 {
    font-size: 35px !important;
}

.font-36 {
    font-size: 36px !important;
}

.font-37 {
    font-size: 37px !important;
}

.font-38 {
    font-size: 38px !important;
}

.font-39 {
    font-size: 39px !important;
}

.font-40 {
    font-size: 40px !important;
}

.font-41 {
    font-size: 41px !important;
}

.font-42 {
    font-size: 42px !important;
}

.font-43 {
    font-size: 43px !important;
}

.font-44 {
    font-size: 44px !important;
}

.font-45 {
    font-size: 45px !important;
}

.font-46 {
    font-size: 46px !important;
}

.font-47 {
    font-size: 47px !important;
}

.font-48 {
    font-size: 48px !important;
}

.font-49 {
    font-size: 49px !important;
}

.font-50 {
    font-size: 50px !important;
}

.font-51 {
    font-size: 51px !important;
}

.font-52 {
    font-size: 52px !important;
}

.font-53 {
    font-size: 53px !important;
}

.font-54 {
    font-size: 54px !important;
}

.font-55 {
    font-size: 55px !important;
}

.font-56 {
    font-size: 56px !important;
}

.font-57 {
    font-size: 57px !important;
}

.font-58 {
    font-size: 58px !important;
}

.font-59 {
    font-size: 59px !important;
}

.font-60 {
    font-size: 60px !important;
}

.font-61 {
    font-size: 61px !important;
}

.font-62 {
    font-size: 62px !important;
}

.font-63 {
    font-size: 63px !important;
}

.font-64 {
    font-size: 64px !important;
}

.font-65 {
    font-size: 65px !important;
}

.font-66 {
    font-size: 66px !important;
}

.font-67 {
    font-size: 67px !important;
}

.font-68 {
    font-size: 68px !important;
}

.font-69 {
    font-size: 69px !important;
}

.font-70 {
    font-size: 70px !important;
}

.font-71 {
    font-size: 71px !important;
}

.font-72 {
    font-size: 72px !important;
}

.font-73 {
    font-size: 73px !important;
}

.font-74 {
    font-size: 74px !important;
}

.font-75 {
    font-size: 75px !important;
}

.font-76 {
    font-size: 76px !important;
}

.font-77 {
    font-size: 77px !important;
}

.font-78 {
    font-size: 78px !important;
}

.font-79 {
    font-size: 79px !important;
}

.font-80 {
    font-size: 80px !important;
}

.font-81 {
    font-size: 81px !important;
}

.font-82 {
    font-size: 82px !important;
}

.font-83 {
    font-size: 83px !important;
}

.font-84 {
    font-size: 84px !important;
}

.font-85 {
    font-size: 85px !important;
}

.font-86 {
    font-size: 86px !important;
}

.font-87 {
    font-size: 87px !important;
}

.font-88 {
    font-size: 88px !important;
}

.font-89 {
    font-size: 89px !important;
}

.font-90 {
    font-size: 90px !important;
}

.font-91 {
    font-size: 91px !important;
}

.font-92 {
    font-size: 92px !important;
}

.font-93 {
    font-size: 93px !important;
}

.font-94 {
    font-size: 94px !important;
}

.font-95 {
    font-size: 95px !important;
}

.font-96 {
    font-size: 96px !important;
}

.font-97 {
    font-size: 97px !important;
}

.font-98 {
    font-size: 98px !important;
}

.font-99 {
    font-size: 99px !important;
}

.font-100 {
    font-size: 100px !important;
}

/* ===== Dashboard Counter Tile Colors ===== */

/* Counter 1 – Total Credits (Royal Blue) */
.bg-counter-1 {
    background: linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%) !important;
}

/* Counter 2 – Used Credits (Crimson Red) */
.bg-counter-2 {
    background: linear-gradient(135deg, #dc2626 0%, #7f1d1d 100%) !important;
}

/* Counter 3 – Left Credits (Emerald Green) */
.bg-counter-3 {
    background: linear-gradient(135deg, #16a34a 0%, #14532d 100%) !important;
}

/* Counter 4 – Total Extractions (Teal / Aqua) */
.bg-counter-4 {
    background: linear-gradient(135deg, #0d9488 0%, #134e4a 100%) !important;
}

/* Counter 5 – Overall Activity (Burnt Orange) */
.bg-counter-5 {
    background: linear-gradient(135deg, #ea580c 0%, #7c2d12 100%) !important;
}

/* Counter 6 – Total Revenue (Deep Plum) */
.bg-counter-6 {
    background: linear-gradient(135deg, #7c3aed 0%, #3b0764 100%) !important;
}

/* Counter 7 – Average Rate (Charcoal / Graphite) */
.bg-counter-7 {
    background: linear-gradient(135deg, #545454 0%, #121212 100%) !important;
}

/* Counter 8 – Total Credit Issued (Cyan Sky) */
.bg-counter-8 {
    background: linear-gradient(135deg, #06b6d4 0%, #083344 100%) !important;
}

/* Counter 9 – Credit Used (Rose / Magenta) */
.bg-counter-9 {
    background: linear-gradient(135deg, #db2777 0%, #831843 100%) !important;
}

/* Counter 10 – Credit Left (Chocolate Brown) */
.bg-counter-10 {
    background: linear-gradient(135deg, #7c2d12 0%, #3f1d0b 100%) !important;
}


/* Dashboard Counter Card Styles - 3D Effect */
.dashboard-counter {
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease, border-color 0.3s ease !important;
    overflow: hidden;
    padding: 1rem 1.25rem !important;
    position: relative;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.dashboard-counter::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.dashboard-counter:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    z-index: 10;
}

.dashboard-counter .counter-icon {
    font-size: 1.6rem !important;
    opacity: 0.9;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    transform: translateZ(20px);
}

.dashboard-counter .counter-value {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    text-align: right !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateZ(20px);
}

.dashboard-counter .counter-label {
    font-size: 0.8rem !important;
    opacity: 0.95;
    text-align: right !important;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transform: translateZ(10px);
}

/* Text Decorations */
.text-underline {
    text-decoration: underline !important;
}

/* Dark Text Colors */
.text-dark-teal {
    color: #004d40 !important;
}

/* Background Colors */
.bg-teal-dark {
    background-color: #004d40 !important;
}

/* ===== DARK BADGE COLORS (White Text) ===== */

/* Dark Teal - For Before, Active states */
.bg-dark-teal {
    background-color: #124965 !important;
    color: #fff !important;
}

/* Dark Maroon - For After, Expired, Danger states */
.bg-dark-maroon {
    background-color: #8B1E3F !important;
    color: #fff !important;
}

/* Dark Purple - For Current, Primary states */
.bg-dark-purple {
    background-color: #7B1FA2 !important;
    color: #fff !important;
}

/* Dark Green - For Success states */
.bg-dark-green {
    background-color: #1B5E20 !important;
    color: #fff !important;
}

/* Dark Blue - For Info, Primary states */
.bg-dark-blue {
    background-color: #0D47A1 !important;
    color: #fff !important;
}

/* Dark Orange - For Warning states */
.bg-dark-orange {
    background-color: #E65100 !important;
    color: #fff !important;
}

/* Dark Gray - For Secondary, Inactive states */
.bg-dark-gray {
    background-color: #37474F !important;
    color: #fff !important;
}



/* Analytics 3D Title */
.analytics-title {
    color: var(--primary);
    font-weight: 800;
    text-shadow:
        0 1px 0 #ccc,
        0 2px 0 #c9c9c9,
        0 3px 0 #bbb,
        0 4px 0 #b9b9b9,
        0 5px 0 #aaa,
        0 6px 1px rgba(0, 0, 0, .1),
        0 0 5px rgba(0, 0, 0, .1),
        0 1px 3px rgba(0, 0, 0, .3),
        0 3px 5px rgba(0, 0, 0, .2),
        0 5px 10px rgba(0, 0, 0, .25);
    letter-spacing: 1px;
}