@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

/* width */
::-webkit-scrollbar {
    width:4px;
    height: 6px;
}  
/* Track */
::-webkit-scrollbar-track {
    background: rgba(239, 243, 246, 0.04);
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: rgba(239, 243, 246, 0.15);
    border-radius: 5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgba(239, 243, 246, 0.25);
}
/* scrooling bar styles enf */

 


body{
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: #EFF3F6;
    background: #0B1524;
    font-size: 14px;
    overflow-x: hidden !important;
}
h1,
h2,
h3,
h4,
h5,
h6{
    color: #ffffff;
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
}

.more_summery .btn_vewmore{
    background: #00D4AA;
    font-size: 13px;
    padding: 2.5px 8px;
    color: #fff;
    font-weight: 500;
    border-radius: 30px;
    margin-top: 10px;
}
.more_summery .btn_vewmore:hover{
    background: #00b894;
}
.speaker_inner p{
    color: #EFF3F6;
}
.speaker_A .speaker_inner{
    background: rgba(239, 243, 246, 0.06);
    color: #EFF3F6;
}
.speaker_B .speaker_inner{
    background: rgba(239, 243, 246, 0.06);
    color: #EFF3F6;
}
.speaker_C {
    justify-content: flex-start!important;
}
.speaker_C .speaker_inner{
    background: rgba(251, 191, 36, 0.10);
    color: #EFF3F6;
}
.speaker_D .speaker_inner{
    background: rgba(239, 243, 246, 0.08);
    color: #EFF3F6;
}
.speaker_E {
    justify-content: flex-start!important;
}
.speaker_E .speaker_inner{
    background: rgba(167, 139, 250, 0.10);
    color: #EFF3F6;
}
.speaker_F .speaker_inner{
    background: rgba(78, 138, 230, 0.10);
    color: #EFF3F6;
}
.speaker_F {
    justify-content: flex-start!important;
}
.speaker_H .speaker_inner{
    background: rgba(244, 114, 182, 0.10);
    color: #EFF3F6;
}
.speaker_inner p{
    color: #EFF3F6 !important;
}

.grid_card_active{
    border:3px solid #00D4AA !important;

}

.side_menu ul li ul li a{
    padding-top: 2px;
    padding-bottom: 2px;
}

.label_highlighted{
 color: #00D4AA !important;
}

.select_highlighted{
 border: 1px solid #00D4AA !important;
}

.active_tab{
    background: #00D4AA !important;
    color: #fff !important;
}
.maindb_tabs ul li button.text-primary-600{
    background: #00D4AA;
    color: #0B1524;
}
.maindb_tabs ul li button{
    background: #15233a;
    color: #EFF3F6;
    padding: 0.68rem 2.5rem;
    font-size: 1rem;
    font-weight: 600;
}
.maindb_tabs [role="tabpanel"] {
    background: none!important;
    padding: 0px;
}


.top_navbar{
    padding:0px 0px!important;
}

.top_navbar .container{
    max-width: 100%!important;
}
.main_nav{
    background:#15233a;
    padding: 10px 8px;
    border-radius: 60px;
}
.main_nav ul {
    padding: 0px;
}
.main_nav ul li{
    margin: 0px 6px 0px 0px!important;
}
.main_nav ul li a,
.main_nav ul li [role="link"] {
    background: transparent;
    padding: 10px 20px;
    border-radius:60px;
    font-size: 14px;
    color: #B6BFCB;
}
.main_nav ul li a:hover,
.main_nav ul li [role="link"]:hover{
    background: #1f3052;
    color: #ffffff;
}
.main_nav ul li a[active="true"] {
    background:#00D4AA;
    color: #0B1524; /* navy text on mint */
    font-weight: 600;
}

.main_nav .menu_drop li a{
    background: #15233a;
    color: #EFF3F6;
    padding: 5px 20px;
    border-radius: 0px;
}
.main_nav .menu_drop li a:hover{
    background: #1f3052;
    color: #ffffff;
}
.leadstatus_rep{
    /* height: 3rem; */
    height: 2.5rem;
    border-radius: 0.5rem;
}
.lead_normal{    
    /* background: linear-gradient(0deg, #d0dbf9 0%, #c3d2f7 100%); */
    /* background: linear-gradient(0deg, #def7ec 0%, #7dd3b6 100%); */
    background: #d4edf3;
}
.lead_high{    
    background: linear-gradient(0deg, #b6c7f6 0%, #839cdd 100%);
}
.lead_heavy{
    /* background: linear-gradient(0deg, #b6c7f6 0%, #839cdd 100%); */
    /* background: linear-gradient(0deg, #80b4d3 0%, #67d0f2 100%); */
    /* background: linear-gradient(0deg, #fdf6b2 0%, #cac488 100%); */
    background: #9ad0dc;
}

.lead_peak{    
    /* background: linear-gradient(0deg, #4d77eb 0%, #2f5de7 100%); */
    /* background: linear-gradient(0deg, #fde8e8 0%, #fd5e5eb5 100%); */
    background: #4ca2b9;
}

.lead_peak_inner{    
    background: linear-gradient(0deg, #4d77eb 0%, #2f5de7 100%); 
    
}

/* table_tabs start */
.table_tabs ul li button.text-primary-600{
    color: #0B1524;
    font-weight: 600;
    border-bottom: 2px solid #00D4AA;
}
.table_tabs ul li button{
    background:transparent;
    padding: 0.68rem 1rem;
    font-size: 1rem;
    font-weight: 400; 
    border-bottom: 2px solid transparent;
}
/* .table_tabs .h-px{} */
.table_tabs [role="tabpanel"] {
    background: none!important;
    padding: 0px;
}

/* table_tabs end */



.statsbox_rep{
    padding:1rem;
    border-radius: 24px;
}
.statsbox_rep .stats_title{
    font-size: 14px;
}
.statsbox_rep .stats_icon{ 
    box-sizing: border-box;
    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    width: 40px;
    height: 32px; 
    /* Drop shadow 1 */
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
    border-radius: 80px;
    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
}
.statsbox_rep .stats_count{
    font-size: 18px;
    font-weight: 500;
}
.statsbox_rep .stats_percentage{
    font-size: 14px;
    font-weight: 400;
}


.main_title{
    font-size: 1.05rem;
    font-weight: 600;
}
.btn{
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius:60px;
    padding: 0.5rem 0.8rem;
    gap: 0.5rem;
    font-size:14px;
    line-height: 1.2;
}
.btn.btn_large{
    height:40px;
    padding:1rem 1.5rem;
}
.btn.btn_small{
    height: 24px;
    padding: 0.5rem 0.8rem;
}
.btn.btn_medium{
    height:30px;
    padding: 0.5rem 0.6rem;
}
.btn_default{
    background: transparent;
    border: 1px solid rgba(239, 243, 246, 0.12);
    color: #EFF3F6;
}
.btn_primary{background: #00D4AA!important; color: #fff;}
.btn_primary:hover{background:#00b894!important;}
.btn_secondary{background: #4E8AE6; color: #fff;}
.btn_secondary:hover{background:#3a73c9;}
.btn_gray{background: #3a3a3a; color: #fff;}
.btn_gray:hover{background:#24272b;}
.btn_red{background: #f3797e; color: #fff;}
.btn_red:hover{background:#dc2626;}

.bb_primary{
    border: 1px solid #0B1524;
    color: #0B1524;
}
.bb_primary:hover{
    background: #E5E7ED;
}
.bb_secondary{
    border: 1px solid #4E8AE6;
    color: #4E8AE6;
}
.bb_secondary:hover{
    background: #e1ecfb;
}
.bb_danger{
    border: 1px solid #dc2626;
    color: #dc2626;
}
.bb_danger:hover{
    background: #ffe0e0;
}
 
.card{
    width: 100%;
    min-width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    background: #15233a;
    border: 1px solid rgba(239, 243, 246, 0.05);
    border-radius:12px;
    color: #EFF3F6;
}
.card-body{
    flex: 1 1 auto;
    padding:1.5rem 1.5rem;
}
.card .card-title {
    text-transform: capitalize;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 0px;
    color: #ffffff;
}
.cart_fh{
    height: calc(100vh - 50px);
}
.card_maxh{
    max-height: 680px;
    overflow-y: auto;
}
.card.pagination_card{
    border-radius: 10px;
}




.table-responsive{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table {
	background-color: transparent;
	border-color: rgba(239, 243, 246, 0.08);
	width: 100%;
	margin-bottom: 1rem;
	vertical-align: top;
    caption-side: bottom;
    border-collapse: collapse;
    color: #B6BFCB;
    white-space: nowrap;
    font-size: 14px;
}
.table thead{
    background: transparent;
    border-radius: 6px;
    border-bottom: 1px solid rgba(239, 243, 246, 0.06);
}
.table thead th {
    border-top: 0;
    font-weight: 600;
    font-size: 15px;
    color: #ffffff;
    padding:0.85rem 0.85rem;
    text-align: left;
}
.table tbody tr{
    border-radius: 100%;
    border-bottom: 1px solid rgba(239, 243, 246, 0.06);
}
.table tbody td {
    padding:0.85rem 0.85rem;
    color: #EFF3F6;
}
.table tbody tr td:first-child {
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}
.table tbody tr td:last-child {
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}
.table.inner_table tbody tr, .table.inner_table thead, .table.inner_table thead tbody tr{ 
    border-bottom-width:2px!important;
}

.drop_downbx #dropdown_inbx{	
    width: 200px!important;
    left: inherit!important;
    right: 30px;
    top: 90px!important; 
}


.overview_tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.overview_tabs .tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
    border: 2px solid transparent;
}

.overview_tabs .tab:hover {
    background: rgba(239, 243, 246, 0.06);
}

.overview_tabs .tab.active {
    background: #15233a;
    color: #ffffff;
    border-color: rgba(239, 243, 246, 0.08);
}
.overviewtabs_content {
    width: 100%;
}


.topreasons_tabs {
    display: flex;
    gap:8px;
    margin-left: 5px;
    background: rgba(239, 243, 246, 0.04);
    border-radius: 60px;
    padding: 6px;
}
.topreasons_tabs .tab {
    padding:6px 10px;
    cursor: pointer;
    color: #B6BFCB;
}
.topreasons_tabs .active {
    color: #0B1524;
    border-bottom: 0;
    background: #00D4AA;
    border-radius: 60px;
    font-weight: 600;
}


.case_table{
    width: 100%;
    text-align: left;
}
.case_table tr{
    border-bottom: 1px solid rgba(239, 243, 246, 0.06);
}
.case_table th{
    background: rgba(239, 243, 246, 0.04);
    color: #ffffff;
    padding: 0.75rem 1rem;
    text-align: left;
}
.case_table td{
    padding: 0.75rem 1rem;
    color: #EFF3F6;
}

/* .df_list{
    list-style: disc;
} */
.df_list li{
    margin: 0px 0px 10px 0px;
    /* list-style: disc; */
}

/* ==========================================================================
   Operandi OS dark-mode overrides (scoped to .app-dark-shell)
   Intercepts the most-used Tailwind utilities so existing page markup picks
   up the dark theme without per-file edits. Auth/login pages are unaffected
   because they live outside .app-dark-shell.
   ========================================================================== */

.app-dark-shell { color: #EFF3F6; }

/* as-toast library theming — exposed via CSS custom properties.
   Toasts render via <Toasts /> inside the (app) layout so they inherit these. */
.app-dark-shell {
    --as-toast-color: #EFF3F6;
    --as-toast-border: 1px solid rgba(239, 243, 246, 0.15);
    --as-toast-border-radius: 0.75em;
    --as-toast-shadow:
        0 0.7px 2.5px rgba(0, 0, 0, 0.30),
        0 2.9px 14.6px rgba(0, 0, 0, 0.36),
        0 8px 28px rgba(0, 0, 0, 0.40);
    /* info → brand mint accent */
    --as-toast-info-color: #EFF3F6;
    --as-toast-info-border-color: rgba(0, 212, 170, 0.60);
    --as-toast-info-background: #15233a;
    /* warn → semantic danger red on dark surface */
    --as-toast-warn-color: #fca5a5;
    --as-toast-warn-border-color: rgba(248, 113, 113, 0.60);
    --as-toast-warn-background: #15233a;
    /* cancel button (the X) — translucent against dark toast */
    --as-toast-btn-border: 1px solid rgba(239, 243, 246, 0.20);
    --as-toast-btn-background: transparent;
    --as-toast-btn-border-radius: 999px;
}

/* Surface backgrounds → dark navy variants (covers all Tailwind gray-family scales: gray/slate/zinc/neutral/stone) */
.app-dark-shell .bg-white            { background-color: #15233a !important; }
.app-dark-shell .bg-gray-50,
.app-dark-shell .bg-slate-50,
.app-dark-shell .bg-zinc-50,
.app-dark-shell .bg-neutral-50,
.app-dark-shell .bg-stone-50         { background-color: #0F1B2E !important; }
.app-dark-shell .bg-gray-100,
.app-dark-shell .bg-slate-100,
.app-dark-shell .bg-zinc-100,
.app-dark-shell .bg-neutral-100,
.app-dark-shell .bg-stone-100        { background-color: #15233a !important; }
.app-dark-shell .bg-gray-200,
.app-dark-shell .bg-slate-200,
.app-dark-shell .bg-zinc-200,
.app-dark-shell .bg-neutral-200,
.app-dark-shell .bg-stone-200        { background-color: #1f3052 !important; }
.app-dark-shell .bg-gray-900,
.app-dark-shell .bg-slate-900,
.app-dark-shell .bg-zinc-900,
.app-dark-shell .bg-neutral-900,
.app-dark-shell .bg-stone-900        { background-color: #0B1524 !important; }
.app-dark-shell .bg-gray-950,
.app-dark-shell .bg-slate-950,
.app-dark-shell .bg-zinc-950,
.app-dark-shell .bg-neutral-950,
.app-dark-shell .bg-stone-950        { background-color: #0B1524 !important; }

/* Hover state surfaces */
.app-dark-shell .hover\:bg-gray-50:hover,
.app-dark-shell .hover\:bg-slate-50:hover,
.app-dark-shell .hover\:bg-zinc-50:hover,
.app-dark-shell .hover\:bg-neutral-50:hover  { background-color: #1f3052 !important; }
.app-dark-shell .hover\:bg-gray-100:hover,
.app-dark-shell .hover\:bg-slate-100:hover,
.app-dark-shell .hover\:bg-zinc-100:hover,
.app-dark-shell .hover\:bg-neutral-100:hover { background-color: #1f3052 !important; }
.app-dark-shell .hover\:bg-gray-200:hover,
.app-dark-shell .hover\:bg-slate-200:hover { background-color: #2a3c63 !important; }

/* Text colors → light variants for readability on dark surfaces (covers gray/slate/zinc/neutral/stone) */
.app-dark-shell .text-gray-950,
.app-dark-shell .text-slate-950,
.app-dark-shell .text-zinc-950,
.app-dark-shell .text-neutral-950 { color: #ffffff !important; }
.app-dark-shell .text-gray-900,
.app-dark-shell .text-slate-900,
.app-dark-shell .text-zinc-900,
.app-dark-shell .text-neutral-900,
.app-dark-shell .text-stone-900 { color: #ffffff !important; }
.app-dark-shell .text-gray-800,
.app-dark-shell .text-slate-800,
.app-dark-shell .text-zinc-800,
.app-dark-shell .text-neutral-800 { color: #EFF3F6 !important; }
.app-dark-shell .text-gray-700,
.app-dark-shell .text-slate-700,
.app-dark-shell .text-zinc-700,
.app-dark-shell .text-neutral-700 { color: #D8DEE6 !important; }
.app-dark-shell .text-gray-600,
.app-dark-shell .text-slate-600,
.app-dark-shell .text-zinc-600,
.app-dark-shell .text-neutral-600 { color: #B6BFCB !important; }
.app-dark-shell .text-gray-500,
.app-dark-shell .text-slate-500,
.app-dark-shell .text-zinc-500,
.app-dark-shell .text-neutral-500 { color: #8F9BAA !important; }
.app-dark-shell .text-gray-400,
.app-dark-shell .text-slate-400,
.app-dark-shell .text-zinc-400,
.app-dark-shell .text-neutral-400 { color: #6B7587 !important; }

/* Hover text */
.app-dark-shell .hover\:text-gray-950:hover,
.app-dark-shell .hover\:text-slate-950:hover { color: #ffffff !important; }
.app-dark-shell .hover\:text-gray-900:hover,
.app-dark-shell .hover\:text-slate-900:hover { color: #ffffff !important; }
.app-dark-shell .hover\:text-gray-700:hover,
.app-dark-shell .hover\:text-slate-700:hover { color: #D8DEE6 !important; }

/* Borders → very subtle light borders on dark (keep all under ~8% opacity to avoid harsh edges) */
.app-dark-shell { border-color: rgba(239, 243, 246, 0.06); }
.app-dark-shell *,
.app-dark-shell *::before,
.app-dark-shell *::after { border-color: rgba(239, 243, 246, 0.06); }
.app-dark-shell .border-gray-50,  .app-dark-shell .border-slate-50,  .app-dark-shell .border-zinc-50,  .app-dark-shell .border-neutral-50  { border-color: rgba(239, 243, 246, 0.04) !important; }
.app-dark-shell .border-gray-100, .app-dark-shell .border-slate-100, .app-dark-shell .border-zinc-100, .app-dark-shell .border-neutral-100 { border-color: rgba(239, 243, 246, 0.05) !important; }
.app-dark-shell .border-gray-200, .app-dark-shell .border-slate-200, .app-dark-shell .border-zinc-200, .app-dark-shell .border-neutral-200 { border-color: rgba(239, 243, 246, 0.06) !important; }
.app-dark-shell .border-gray-300, .app-dark-shell .border-slate-300, .app-dark-shell .border-zinc-300, .app-dark-shell .border-neutral-300 { border-color: rgba(239, 243, 246, 0.08) !important; }
.app-dark-shell .border-gray-400, .app-dark-shell .border-slate-400, .app-dark-shell .border-zinc-400 { border-color: rgba(239, 243, 246, 0.10) !important; }
.app-dark-shell .border-gray-500, .app-dark-shell .border-slate-500 { border-color: rgba(239, 243, 246, 0.12) !important; }
.app-dark-shell .border-gray-600, .app-dark-shell .border-slate-600 { border-color: rgba(239, 243, 246, 0.14) !important; }
.app-dark-shell .border-gray-700, .app-dark-shell .border-slate-700 { border-color: rgba(239, 243, 246, 0.16) !important; }
.app-dark-shell .border-white    { border-color: rgba(239, 243, 246, 0.06) !important; }

/* Directional border colors (Tailwind border-b-gray-*, border-t-gray-*, etc.) */
.app-dark-shell .border-b-gray-50,  .app-dark-shell .border-t-gray-50,
.app-dark-shell .border-l-gray-50,  .app-dark-shell .border-r-gray-50  { border-color: rgba(239, 243, 246, 0.04) !important; }
.app-dark-shell .border-b-gray-100, .app-dark-shell .border-t-gray-100,
.app-dark-shell .border-l-gray-100, .app-dark-shell .border-r-gray-100 { border-color: rgba(239, 243, 246, 0.05) !important; }
.app-dark-shell .border-b-gray-200, .app-dark-shell .border-t-gray-200,
.app-dark-shell .border-l-gray-200, .app-dark-shell .border-r-gray-200 { border-color: rgba(239, 243, 246, 0.06) !important; }
.app-dark-shell .border-b-gray-300, .app-dark-shell .border-t-gray-300,
.app-dark-shell .border-l-gray-300, .app-dark-shell .border-r-gray-300 { border-color: rgba(239, 243, 246, 0.08) !important; }

/* Divide (between flex/grid items) */
.app-dark-shell .divide-gray-50  > :not([hidden]) ~ :not([hidden]) { border-color: rgba(239, 243, 246, 0.04) !important; }
.app-dark-shell .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(239, 243, 246, 0.05) !important; }
.app-dark-shell .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(239, 243, 246, 0.06) !important; }
.app-dark-shell .divide-gray-300 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(239, 243, 246, 0.08) !important; }

/* Ring colors used for focus rings */
.app-dark-shell .ring-gray-200 { --tw-ring-color: rgba(239, 243, 246, 0.10) !important; }
.app-dark-shell .ring-black,
.app-dark-shell .focus\:ring-black:focus { --tw-ring-color: #00D4AA !important; }
.app-dark-shell .focus\:border-black:focus { border-color: #00D4AA !important; }

/* Form controls → dark variants while keeping text readable */
.app-dark-shell input[type="text"],
.app-dark-shell input[type="email"],
.app-dark-shell input[type="password"],
.app-dark-shell input[type="number"],
.app-dark-shell input[type="search"],
.app-dark-shell input[type="tel"],
.app-dark-shell input[type="url"],
.app-dark-shell input[type="date"],
.app-dark-shell input[type="datetime-local"],
.app-dark-shell select,
.app-dark-shell textarea {
    background-color: #0F1B2E;
    color: #EFF3F6;
    border-color: rgba(239, 243, 246, 0.08);
}
.app-dark-shell input::placeholder,
.app-dark-shell textarea::placeholder { color: #6B7587; }

/* Primary accent — legacy bg-black buttons → mint, BUT skip modal/drawer backdrops
   (those use bg-black with bg-opacity-* and shouldn't be tinted mint) */
.app-dark-shell .bg-black:not([class*="bg-opacity"]):not([class*="opacity-"]) {
    background-color: #00D4AA !important;
    color: #0B1524 !important;
}
.app-dark-shell .hover\:bg-gray-800:hover { background-color: #00b894 !important; }

/* Outlined "Cancel"-style buttons — use a clearer border than generic element borders */
.app-dark-shell button.border-gray-300,
.app-dark-shell a.border-gray-300,
.app-dark-shell button.border-slate-300,
.app-dark-shell a.border-slate-300 {
    border-color: rgba(239, 243, 246, 0.20) !important;
    color: #EFF3F6 !important;
}
.app-dark-shell button.border-gray-300:hover,
.app-dark-shell a.border-gray-300:hover,
.app-dark-shell button.border-slate-300:hover,
.app-dark-shell a.border-slate-300:hover {
    border-color: rgba(239, 243, 246, 0.35) !important;
    background-color: rgba(239, 243, 246, 0.06) !important;
}

/* Link-style accents — map default blue/indigo links to brand mint for visibility on dark */
.app-dark-shell .text-blue-300,
.app-dark-shell .text-blue-400,
.app-dark-shell .text-blue-500,
.app-dark-shell .text-blue-600,
.app-dark-shell .text-blue-700,
.app-dark-shell .text-blue-800,
.app-dark-shell .text-blue-900,
.app-dark-shell .text-indigo-300,
.app-dark-shell .text-indigo-400,
.app-dark-shell .text-indigo-500,
.app-dark-shell .text-indigo-600,
.app-dark-shell .text-indigo-700,
.app-dark-shell .text-indigo-800,
.app-dark-shell .text-indigo-900,
.app-dark-shell .text-sky-400,
.app-dark-shell .text-sky-500,
.app-dark-shell .text-sky-600,
.app-dark-shell .text-sky-700 { color: #00D4AA !important; }

.app-dark-shell .hover\:text-blue-400:hover,
.app-dark-shell .hover\:text-blue-500:hover,
.app-dark-shell .hover\:text-blue-600:hover,
.app-dark-shell .hover\:text-blue-700:hover,
.app-dark-shell .hover\:text-blue-800:hover,
.app-dark-shell .hover\:text-blue-900:hover,
.app-dark-shell .hover\:text-indigo-500:hover,
.app-dark-shell .hover\:text-indigo-600:hover,
.app-dark-shell .hover\:text-indigo-700:hover,
.app-dark-shell .hover\:text-indigo-800:hover,
.app-dark-shell .hover\:text-indigo-900:hover,
.app-dark-shell .hover\:text-sky-600:hover,
.app-dark-shell .hover\:text-sky-700:hover { color: #5eead4 !important; }

/* Bare <a> links inside cards/content default to mint as well */
.app-dark-shell a:not([class*="bg-"]):not([class*="text-"]) { color: #00D4AA; }
.app-dark-shell a:not([class*="bg-"]):not([class*="text-"]):hover { color: #00b894; }

/* Indigo bg → mint (PRIMARY action color) */
.app-dark-shell .bg-indigo-500,
.app-dark-shell .bg-indigo-600,
.app-dark-shell .bg-indigo-700 { background-color: #00D4AA !important; color: #0B1524 !important; }
.app-dark-shell .hover\:bg-indigo-600:hover,
.app-dark-shell .hover\:bg-indigo-700:hover,
.app-dark-shell .hover\:bg-indigo-800:hover { background-color: #00b894 !important; }

/* Blue bg → brand secondary #4E8AE6 (SECONDARY action color) */
.app-dark-shell .bg-blue-500,
.app-dark-shell .bg-blue-600,
.app-dark-shell .bg-blue-700 { background-color: #4E8AE6 !important; color: #ffffff !important; }
.app-dark-shell .hover\:bg-blue-600:hover,
.app-dark-shell .hover\:bg-blue-700:hover,
.app-dark-shell .hover\:bg-blue-800:hover { background-color: #3a73c9 !important; }

/* Soft blue/indigo tints (badges, row hover affordance) → translucent mint */
.app-dark-shell .bg-blue-50,
.app-dark-shell .bg-blue-100,
.app-dark-shell .bg-indigo-50,
.app-dark-shell .bg-indigo-100 { background-color: rgba(0, 212, 170, 0.12) !important; color: #00D4AA !important; }
.app-dark-shell .hover\:bg-blue-50:hover,
.app-dark-shell .hover\:bg-blue-100:hover,
.app-dark-shell .hover\:bg-indigo-50:hover,
.app-dark-shell .hover\:bg-indigo-100:hover { background-color: rgba(0, 212, 170, 0.18) !important; }
.app-dark-shell .ring-blue-500,
.app-dark-shell .ring-indigo-500 { --tw-ring-color: #00D4AA !important; }
.app-dark-shell .border-blue-500,
.app-dark-shell .border-indigo-500 { border-color: #00D4AA !important; }

/* ==========================================================================
   Status pill / semantic color palette (dark-mode friendly)
   Pattern: pastel bg (-50/-100) → translucent tint; mid text (-600/-700/-800)
   → brighter variant so the hue still reads on dark cards.
   ========================================================================== */

/* RED — danger / overdue / abandoned */
.app-dark-shell .bg-red-50,
.app-dark-shell .bg-red-100  { background-color: rgba(248, 113, 113, 0.15) !important; }
.app-dark-shell .bg-red-200  { background-color: rgba(248, 113, 113, 0.25) !important; }
.app-dark-shell .text-red-500 { color: #fca5a5 !important; }
.app-dark-shell .text-red-600,
.app-dark-shell .text-red-700,
.app-dark-shell .text-red-800,
.app-dark-shell .text-red-900 { color: #f87171 !important; }
.app-dark-shell .border-red-200,
.app-dark-shell .border-red-300 { border-color: rgba(248, 113, 113, 0.30) !important; }

/* ORANGE — warning / sandbox */
.app-dark-shell .bg-orange-50,
.app-dark-shell .bg-orange-100 { background-color: rgba(251, 146, 60, 0.15) !important; }
.app-dark-shell .text-orange-500 { color: #fdba74 !important; }
.app-dark-shell .text-orange-600,
.app-dark-shell .text-orange-700,
.app-dark-shell .text-orange-800 { color: #fb923c !important; }
.app-dark-shell .border-orange-200,
.app-dark-shell .border-orange-300,
.app-dark-shell .border-orange-400 { border-color: rgba(251, 146, 60, 0.30) !important; }

/* AMBER / YELLOW — pending / PNC / caution */
.app-dark-shell .bg-amber-50,
.app-dark-shell .bg-amber-100,
.app-dark-shell .bg-yellow-50,
.app-dark-shell .bg-yellow-100 { background-color: rgba(251, 191, 36, 0.15) !important; }
.app-dark-shell .text-amber-500,
.app-dark-shell .text-yellow-500 { color: #fcd34d !important; }
.app-dark-shell .text-amber-600,
.app-dark-shell .text-amber-700,
.app-dark-shell .text-amber-800,
.app-dark-shell .text-yellow-600,
.app-dark-shell .text-yellow-700,
.app-dark-shell .text-yellow-800 { color: #fbbf24 !important; }
.app-dark-shell .border-amber-200,
.app-dark-shell .border-yellow-200,
.app-dark-shell .border-amber-300,
.app-dark-shell .border-yellow-300 { border-color: rgba(251, 191, 36, 0.30) !important; }

/* GREEN / EMERALD / TEAL — success / hired / live */
.app-dark-shell .bg-green-50,
.app-dark-shell .bg-green-100,
.app-dark-shell .bg-emerald-50,
.app-dark-shell .bg-emerald-100,
.app-dark-shell .bg-teal-50,
.app-dark-shell .bg-teal-100  { background-color: rgba(0, 212, 170, 0.15) !important; }
/* Solid emerald/green/teal buttons → brand mint */
.app-dark-shell .bg-emerald-500,
.app-dark-shell .bg-emerald-600,
.app-dark-shell .bg-emerald-700,
.app-dark-shell .bg-green-500,
.app-dark-shell .bg-green-600,
.app-dark-shell .bg-green-700,
.app-dark-shell .bg-teal-500,
.app-dark-shell .bg-teal-600,
.app-dark-shell .bg-teal-700 { background-color: #00D4AA !important; color: #0B1524 !important; }
.app-dark-shell .hover\:bg-emerald-600:hover,
.app-dark-shell .hover\:bg-emerald-700:hover,
.app-dark-shell .hover\:bg-green-600:hover,
.app-dark-shell .hover\:bg-green-700:hover,
.app-dark-shell .hover\:bg-teal-600:hover,
.app-dark-shell .hover\:bg-teal-700:hover { background-color: #00b894 !important; }
.app-dark-shell .text-green-500,
.app-dark-shell .text-emerald-500,
.app-dark-shell .text-teal-500 { color: #6ee7b7 !important; }
.app-dark-shell .text-green-600,
.app-dark-shell .text-green-700,
.app-dark-shell .text-green-800,
.app-dark-shell .text-emerald-600,
.app-dark-shell .text-emerald-700,
.app-dark-shell .text-emerald-800,
.app-dark-shell .text-teal-600,
.app-dark-shell .text-teal-700,
.app-dark-shell .text-teal-800 { color: #34d399 !important; }
.app-dark-shell .border-green-200,
.app-dark-shell .border-emerald-200,
.app-dark-shell .border-teal-200,
.app-dark-shell .border-green-300,
.app-dark-shell .border-emerald-300,
.app-dark-shell .border-emerald-400,
.app-dark-shell .border-teal-300 { border-color: rgba(0, 212, 170, 0.30) !important; }

/* PINK / ROSE — info / accent */
.app-dark-shell .bg-pink-50,
.app-dark-shell .bg-pink-100,
.app-dark-shell .bg-rose-50,
.app-dark-shell .bg-rose-100 { background-color: rgba(244, 114, 182, 0.15) !important; }
.app-dark-shell .text-pink-600,
.app-dark-shell .text-pink-700,
.app-dark-shell .text-rose-600,
.app-dark-shell .text-rose-700 { color: #f472b6 !important; }

/* PURPLE / VIOLET / FUCHSIA — accent (legacy purple branding) */
.app-dark-shell .bg-purple-50,
.app-dark-shell .bg-purple-100,
.app-dark-shell .bg-violet-50,
.app-dark-shell .bg-violet-100,
.app-dark-shell .bg-fuchsia-50,
.app-dark-shell .bg-fuchsia-100 { background-color: rgba(167, 139, 250, 0.15) !important; }
.app-dark-shell .text-purple-600,
.app-dark-shell .text-purple-700,
.app-dark-shell .text-purple-800,
.app-dark-shell .text-violet-600,
.app-dark-shell .text-violet-700,
.app-dark-shell .text-fuchsia-600,
.app-dark-shell .text-fuchsia-700 { color: #a78bfa !important; }

/* CYAN / SKY — info / brand-adjacent */
.app-dark-shell .bg-cyan-50,
.app-dark-shell .bg-cyan-100,
.app-dark-shell .bg-sky-50,
.app-dark-shell .bg-sky-100 { background-color: rgba(0, 212, 170, 0.12) !important; }
.app-dark-shell .text-cyan-600,
.app-dark-shell .text-cyan-700,
.app-dark-shell .text-cyan-800,
.app-dark-shell .text-sky-800,
.app-dark-shell .text-sky-900 { color: #00D4AA !important; }
/* Solid cyan buttons → mint (legacy "Template Builder" used cyan-700 as its primary action) */
.app-dark-shell .bg-cyan-600,
.app-dark-shell .bg-cyan-700,
.app-dark-shell .bg-cyan-800 { background-color: #00D4AA !important; color: #0B1524 !important; }
.app-dark-shell .hover\:bg-cyan-700:hover,
.app-dark-shell .hover\:bg-cyan-800:hover { background-color: #00b894 !important; }
.app-dark-shell .border-cyan-500,
.app-dark-shell .border-cyan-600,
.app-dark-shell .focus\:border-cyan-600:focus { border-color: #00D4AA !important; }
.app-dark-shell .ring-cyan-500,
.app-dark-shell .ring-cyan-600,
.app-dark-shell .focus\:ring-cyan-600:focus { --tw-ring-color: #00D4AA !important; }
/* Hover state for cyan badges (e.g. token chips) */
.app-dark-shell .hover\:bg-cyan-100:hover { background-color: rgba(0, 212, 170, 0.20) !important; }
.app-dark-shell .hover\:text-cyan-800:hover { color: #00b894 !important; }

/* Hover variants for semantic backgrounds */
.app-dark-shell .hover\:bg-red-50:hover,
.app-dark-shell .hover\:bg-red-100:hover     { background-color: rgba(248, 113, 113, 0.20) !important; }
.app-dark-shell .hover\:bg-green-50:hover,
.app-dark-shell .hover\:bg-green-100:hover,
.app-dark-shell .hover\:bg-emerald-50:hover,
.app-dark-shell .hover\:bg-emerald-100:hover { background-color: rgba(0, 212, 170, 0.20) !important; }
.app-dark-shell .hover\:bg-orange-50:hover,
.app-dark-shell .hover\:bg-orange-100:hover  { background-color: rgba(251, 146, 60, 0.20) !important; }
.app-dark-shell .hover\:bg-amber-50:hover,
.app-dark-shell .hover\:bg-amber-100:hover,
.app-dark-shell .hover\:bg-yellow-50:hover,
.app-dark-shell .hover\:bg-yellow-100:hover  { background-color: rgba(251, 191, 36, 0.20) !important; }