/* ============================================================
   DMARC+ Custom CSS — Bootstrap 5 Bridge
   Replaces Tailwind CSS utilities with custom classes
   ============================================================ */

/* ---- CSS Custom Properties ---- */
:root {
    /* Brand Colors (Indigo palette) */
    --brand-50:  #eef2ff;
    --brand-100: #e0e7ff;
    --brand-200: #c7d2fe;
    --brand-300: #a5b4fc;
    --brand-400: #818cf8;
    --brand-500: #6366f1;
    --brand-600: #4f46e5;
    --brand-700: #4338ca;
    --brand-800: #3730a3;
    --brand-900: #312e81;
    --brand-950: #1e1b4b;

    /* Admin Colors (Red palette) */
    --admin-50:  #fff1f1;
    --admin-100: #ffe1e1;
    --admin-200: #ffc7c7;
    --admin-300: #ffa0a0;
    --admin-400: #ff6b6b;
    --admin-500: #f83b3b;
    --admin-600: #e51d1d;
    --admin-700: #c11414;
    --admin-800: #9f1414;
    --admin-900: #831818;
    --admin-950: #470707;

    /* Gray Scale */
    --gray-50:  #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --gray-950: #030712;

    /* Slate Scale */
    --slate-50:  #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;

    /* Status Colors */
    --emerald-400: #34d399;
    --emerald-500: #10b981;
    --amber-100: #fef3c7;
    --amber-500: #f59e0b;
    --red-400: #f87171;
    --red-500: #ef4444;
    --red-600: #dc2626;
    --red-700: #b91c1c;
    --green-50:  #f0fdf4;
    --green-400: #4ade80;
    --green-800: #166534;
    --red-50:  #fef2f2;
    --red-800: #991b1b;
    --blue-50: #eff6ff;
    --blue-400: #60a5fa;
    --blue-600: #2563eb;
    --yellow-50:  #fefce8;
    --yellow-400: #facc15;
    --yellow-800: #854d0e;
    --yellow-900: #713f12;
    --green-300: #86efac;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --green-900: #14532d;
    --red-900: #7f1d1d;
    --indigo-300: #a5b4fc;
    --indigo-400: #818cf8;
    --indigo-500: #6366f1;
    --indigo-600: #4f46e5;
    --purple-600: #9333ea;
}

/* ---- Alpine.js ---- */
[x-cloak] { display: none !important; }

/* ---- Base / Reset ---- */
body {
    font-family: 'Figtree', 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---- Font Size Utilities ---- */
.fs-xs   { font-size: 0.75rem !important; line-height: 1rem; }
.fs-sm   { font-size: 0.875rem !important; line-height: 1.25rem; }
.fs-base { font-size: 1rem !important; line-height: 1.5rem; }
.fs-lg   { font-size: 1.125rem !important; line-height: 1.75rem; }
.fs-xl   { font-size: 1.25rem !important; line-height: 1.75rem; }
.fs-2xl  { font-size: 1.5rem !important; line-height: 2rem; }
.fs-3xl  { font-size: 1.875rem !important; line-height: 2.25rem; }
.fs-4xl  { font-size: 2.25rem !important; line-height: 2.5rem; }
.fs-5xl  { font-size: 3rem !important; line-height: 1; }
.text-10 { font-size: 10px !important; }

/* ---- Tracking (Letter Spacing) ---- */
.tracking-wide   { letter-spacing: 0.025em; }
.tracking-wider  { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }

/* ---- Leading (Line Height) ---- */
.leading-tight   { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }

/* ---- Color Utilities ---- */
/* Background colors */
.bg-gray-50  { background-color: var(--gray-50) !important; }
.bg-gray-100 { background-color: var(--gray-100) !important; }
.bg-gray-200 { background-color: var(--gray-200) !important; }
.bg-gray-300 { background-color: var(--gray-300) !important; }
.bg-gray-400 { background-color: var(--gray-400) !important; }
.bg-gray-500 { background-color: var(--gray-500) !important; }
.bg-gray-600 { background-color: var(--gray-600) !important; }
.bg-gray-700 { background-color: var(--gray-700) !important; }
.bg-gray-800 { background-color: var(--gray-800) !important; }
.bg-gray-900 { background-color: var(--gray-900) !important; }
.bg-gray-950 { background-color: var(--gray-950) !important; }

.bg-slate-50  { background-color: var(--slate-50) !important; }
.bg-slate-100 { background-color: var(--slate-100) !important; }

.bg-brand-50  { background-color: var(--brand-50) !important; }
.bg-brand-100 { background-color: var(--brand-100) !important; }
.bg-brand-500 { background-color: var(--brand-500) !important; }
.bg-brand-600 { background-color: var(--brand-600) !important; }
.bg-brand-950 { background-color: var(--brand-950) !important; }

.bg-admin-500 { background-color: var(--admin-500) !important; }
.bg-admin-600 { background-color: var(--admin-600) !important; }
.bg-admin-700 { background-color: var(--admin-700) !important; }
.bg-admin-800 { background-color: var(--admin-800) !important; }
.bg-admin-950 { background-color: var(--admin-950) !important; }

.bg-indigo-500   { background-color: var(--indigo-500) !important; }
.bg-indigo-600   { background-color: var(--indigo-600) !important; }
.bg-red-50       { background-color: var(--red-50) !important; }
.bg-red-600      { background-color: var(--red-600) !important; }
.bg-red-700      { background-color: var(--red-700) !important; }
.bg-green-50     { background-color: var(--green-50) !important; }
.bg-blue-50      { background-color: var(--blue-50) !important; }
.bg-yellow-50    { background-color: var(--yellow-50) !important; }
.bg-emerald-50   { background-color: #ecfdf5 !important; }
.bg-emerald-400  { background-color: var(--emerald-400) !important; }
.bg-amber-100    { background-color: var(--amber-100) !important; }

/* Semi-transparent backgrounds */
.bg-black-50     { background-color: rgba(0, 0, 0, 0.5) !important; }
.bg-indigo-500-10 { background-color: rgba(99, 102, 241, 0.1) !important; }
.bg-indigo-500-15 { background-color: rgba(99, 102, 241, 0.15) !important; }
.bg-red-900-40   { background-color: rgba(131, 24, 24, 0.4) !important; }

/* Text colors */
.text-gray-300 { color: var(--gray-300) !important; }
.text-gray-400 { color: var(--gray-400) !important; }
.text-gray-500 { color: var(--gray-500) !important; }
.text-gray-600 { color: var(--gray-600) !important; }
.text-gray-700 { color: var(--gray-700) !important; }
.text-gray-800 { color: var(--gray-800) !important; }
.text-gray-900 { color: var(--gray-900) !important; }

.text-slate-300 { color: var(--slate-300) !important; }
.text-slate-400 { color: var(--slate-400) !important; }
.text-slate-500 { color: var(--slate-500) !important; }
.text-slate-600 { color: var(--slate-600) !important; }
.text-slate-700 { color: var(--slate-700) !important; }
.text-slate-900 { color: var(--slate-900) !important; }

.text-indigo-300 { color: var(--indigo-300) !important; }
.text-indigo-400 { color: var(--indigo-400) !important; }
.text-indigo-600 { color: var(--indigo-600) !important; }
.text-indigo-800 { color: #3730a3 !important; }

.text-admin-300 { color: var(--admin-300) !important; }
.text-admin-400 { color: var(--admin-400) !important; }
.bg-admin-900   { background-color: var(--admin-900) !important; }
.text-admin-600 { color: var(--admin-600) !important; }
.border-admin-800 { border-color: var(--admin-800) !important; }
.hover\:text-admin-300:hover { color: var(--admin-300) !important; }
.hover\:bg-admin-600:hover { background-color: var(--admin-600) !important; }
.hover\:bg-admin-800:hover { background-color: var(--admin-800) !important; }

.text-red-400 { color: var(--red-400) !important; }
.text-red-500 { color: var(--red-500) !important; }
.text-red-700 { color: var(--red-700) !important; }
.text-red-800 { color: var(--red-800) !important; }
.text-green-400 { color: var(--green-400) !important; }
.text-green-700 { color: #15803d !important; }
.text-green-800 { color: var(--green-800) !important; }
.text-blue-400  { color: var(--blue-400) !important; }
.text-blue-600  { color: var(--blue-600) !important; }
.text-yellow-400 { color: var(--yellow-400) !important; }
.text-yellow-800 { color: var(--yellow-800) !important; }
.text-amber-500 { color: var(--amber-500) !important; }
.text-emerald-400 { color: var(--emerald-400) !important; }
.text-emerald-700 { color: #047857 !important; }

/* Border colors */
.border-gray-200 { border-color: var(--gray-200) !important; }
.border-gray-300 { border-color: var(--gray-300) !important; }
.border-gray-700 { border-color: var(--gray-700) !important; }
.border-gray-800 { border-color: var(--gray-800) !important; }
.border-slate-200 { border-color: var(--slate-200) !important; }
.border-slate-300 { border-color: var(--slate-300) !important; }
.border-indigo-500-20 { border-color: rgba(99, 102, 241, 0.2) !important; }
.border-emerald-200 { border-color: #a7f3d0 !important; }
.border-red-200 { border-color: #fecaca !important; }
.border-red-400 { border-color: var(--red-400) !important; }

/* ---- Gradient Utilities ---- */
.bg-gradient-brand {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
}
.bg-gradient-brand-r {
    background: linear-gradient(90deg, #6366f1, #9333ea) !important;
}
.bg-gradient-text-brand {
    background-image: linear-gradient(90deg, #a5b4fc, #818cf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.bg-gradient-dark {
    background: linear-gradient(135deg, #1e1b4b 0%, #1e1b4b 30%, #0f172a 100%) !important;
}
body
{
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: #040406;
    scroll-behavior: smooth;
    /* overflow: hidden; */
}
 ::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-thumb {
    background-color: #9c9ea36c;
    border-radius: 6px;
    border: 1px solid transparent;
    background-clip: content-box;
}
.nav-sidebar::-webkit-scrollbar {
    /* width: 6.5px; */
    display: none;
}
.table>:not(caption)>*>* {
    background-color: #11182780;
    border-color: #3741515c;
    font-size: 0.875rem;
    font-weight: 400;
    color: #e7ebef;
    padding: 14px;
}
.table th {
    font-weight: 500;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #d1d5db !important;
    padding: 12px;
    border-bottom-width: 1px;
    border-color: #3741515c;
    background-color: #111827;
}
/* ---- Sidebar Styles ---- */
.sidebar {
    width: 3.9rem;
    height: 100%;
    /* border-radius: 7px; */
    border-top-left-radius: 0%;
    border-bottom-left-radius: 0%;
    background-color: #04040680;
    position: fixed;
    border-right: 1px solid #e1e2e314;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    z-index: 100;
    cursor: pointer;
    z-index: 999999 !important;
    transition: width 0.3s ease-in-out;
    overflow: hidden;
    margin: 0px 0px 2px 0px !important;
}
.sidebar:hover {
    width: 16rem;
    background-color: #0d0d116a!important;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(10px);
}
.sidebar.collapsed {
    transform: translateX(-100%);
}
.nav-sidebar-sub
{
    opacity: 0;
    transition: opacity 0.18s 0.08s , display 0.18s 0.08s;
    display: none;
    white-space: nowrap;
}
.sidebar:hover .nav-sidebar-sub
{
    opacity: 1;
    display: block;
}
.nav-label
{
    opacity: 0;
    transition: opacity 0.18s 0.08s;
    pointer-events: none;
    white-space: nowrap;
}
.sidebar:hover .nav-label
{
    opacity: 1;
}
.white-devider-line {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
}
.top-left-img {
    width: 42%;
    position: fixed;
    z-index: -22;
    left: 0;
    top: 0;
}
.gradiant-box-2 {
    width: 100%;
    height: 35px;
    /* background: rgba(45, 119, 238, 0.216); */
    background-image: linear-gradient(#00afef23, #ffffff00);
}
@media (min-width: 992px) {
    .sidebar {
        transform: translateX(0) !important;
        /* position: static !important; */
    }
}

.sidebar-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s linear;
}
.fw-medium {
    font-weight: 400 !important;
}
/* Sidebar Nav Links */
.nav-sidebar .nav-link {
    color: #e7ebef;
    font-size: 13.5px;
    font-weight: 400;
    padding: 7px 13px;
    border-radius: 0.375rem;
    transition: all 0.15s ease;
    gap: 10px;
    display: flex;
    align-items: center;
}
.nav-sidebar .nav-link:hover {
    background-color: #20242c;
    color: #fff;
}
.nav-sidebar .nav-link.active {
    background-color: #3c8cdd40;
    color: #fff;
}
.nav-sidebar .nav-link .nav-icon {
    width: 16px;
    height: 16px;
    /* margin-right: 0.75rem; */
    flex-shrink: 0;
}
.bg-box-black
{
    background-color: #04040680;
        border: 1px solid rgba(225, 226, 227, 0.08);
    border-radius: 8px;
    border-top: 2px solid rgba(225, 226, 227, 0.305);
    padding: .75rem 1.1rem !important;
    margin-top: 7px;
}
.bg-light-icon
{
    background-color: #161e2ed6;
    padding: 10px;
    border-radius: 8px;
}
.border-bottom
{
    border-bottom: 1px solid #e1e2e314 !important;
}
.read-bg
{
    background-color: #11182780 !important;
    border: 1px solid #e1e2e314 !important;
    border-radius: 8px !important;
}
.read-bg-quick
{
    background-color: #11182780 !important;
    border: 1px solid #e1e2e314 !important;
    border-radius: 8px !important;
}
.read-bg-quick:hover
{
    background-color: #1c263b61 !important;
}
.unread-bg
{
    background-color: #00c6ff12 !important;
    border: 1px solid #00c6ff36 !important;
    border-radius: 8px !important;
}
.border-gray-100
{
    border-color: #3741515c !important;
}
.pagination .page-link
{
    color: #fff !important;
    background-color: #090f1b !important;
    border: 1px solid #262f40 !important;
    box-shadow: none;
}
.pagination .page-item.active .page-link
{
    color: #00c6ff !important;
    background-color: #0f1a30 !important;
    border: 1px solid #262f40 !important;
}
a
{
    text-decoration: none;
}
.text-green
{
    color: #00a33d !important;
}
.text-yellow
{
    color: #ffab31 !important;
}
.text-red
{
    color: #ef4343 !important;
}
.text-gray
{
    color: #00c6ff !important;
}
.text-unknow-gray
{
    color: #728197 !important;
}
.bg-green
{
    background-color: #00a33d !important;
}
.bg-gray {
    background-color: #728197 !important;
}
.bg-yellow
{
    background-color: #ffab31 !important;
}
.bg-red
{
    background-color: #ef4343 !important;
}
.bg-blue
{
    background-color: #00c6ff !important;
}
.w-2 
{
    width: 0.5rem;
}
.green-badge
{
    color: #0fe65f;
    background-color: #3cfc7712;
    font-size: 12.5px;
    padding: 4px 8px;
    border-radius: 800px;
    border: 1px solid #16a34a33;
    line-height: 16px;
}
.red-badge
{
    color: #ef4343;
    background-color: #ef43431a;
    font-size: 12.5px;
    padding: 4px 8px;
    border-radius: 800px;
    border: 1px solid #ef434370;
    line-height: 16px;
}
.gray-badge
{
    color: #7e8fa7;
    background-color: #c5abab08;
    font-size: 12.5px;
    padding: 4px 8px;
    border-radius: 800px;
    border: 1px solid #7e8fa738;
    line-height: 16px;
}
.yellow-badge
{
    color: #ffab31;
    background-color: #d2c86221;
    font-size: 12.5px;
    padding: 4px 8px;
    border-radius: 800px;
    border: 1px solid #ca8a0433;
    line-height: 16px;
}
.blue-badge
{
    color: #1f73ff;
    background-color: #0000ff12;
    font-size: 12.5px;
    padding: 4px 8px;
    border-radius: 800px;
    border: 1px solid #5e5ea236;
    line-height: 16px;
}
.text-primary {
    color: #00c6ff !important;
}
.text-primary-bg {
    background-color: #00c6ff !important;
}
.bg-light-gray
{
    background-color: #161e2ed6;
}
.bg-black-badge
{
    background-color: #0b0b0b00;
    border-radius: 6px;
    font-size: 13px !important;
    font-weight: 500 !important;
    border: 1px solid #ffffff0d;
    padding: 5px 15px !important;
}
.bg-red-50\/30 {
    background-color: rgb(116 17 17 / 37%) !important;
}
/* .bg-white
{
    background-color: #11182780 !important;
    border: 1px solid #e1e2e314;;
} */
/* .text-gray-900
{
    color: #e7ebef !important;
} */
.bg-gray-active
{
    background-color: #3c8cdd40 !important;
}
.nav-sidebar
{
    display: flex;
    flex-direction: column;
    gap: 5.6px;
}
svg
{
    display: block;
}
/* Sidebar Sub-Nav */
.nav-sidebar-sub .nav-link {
    font-size: 12px;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    color: #ffffffae;
    transition: all 0.15s ease;
    display: block;
}
.nav-sidebar-sub .nav-link:hover {
    background-color: #20242c;
    color: #fff;
}
.nav-sidebar-sub .nav-link.active {
    background-color: #20242c;
    color: #fff;
    margin: 3px 0px;
}
.nav-headding-label
{
    color: #e1e2e3cc !important;
    font-size: 12px;
}
.blue-bg
{
    background-color: #11182780 !important;
    border: 1px solid #e1e2e314;
    border-radius: 12px;
}
.text-gray-900
{
    color: #e7ebef !important;
}
.text-gray-600
{
    color: #e1e2e3cc !important;
}
.fs-3xl
{
    font-size: 18px !important;
}
.fw-bold
{
    font-weight: 600 !important;
}
.active-btn
{
    background-color: #3c8cdd40 !important;
    background-image: none !important;
    border-radius: 5px !important;
    color: #fff !important;
    border: none;
}
.btn-bordered {
    color: #fff;
    font-weight: 400;
    font-size: .875rem;
    border: 1px solid #e1e2e314;
    background-color: #36333347;
    border-radius: 6px;
    padding: .5rem 1rem;
}
.btn-bordered:hover {
    color: #e1e2e3cc !important;
}
.btn-green-1 {
    color: #02bb46;
    font-weight: 400;
    font-size: .875rem;
    background-color: #16a34a26;
    border-radius: 6px;
    padding: .5rem 1rem;
    border: 1px solid #00732a6e;
}
.btn-green-1:hover {
    filter: brightness(1.1);
}
.btn-primary-1 {
    color: #e7ebef;
    font-weight: 400;
    font-size: .875rem;
    background-color: #3c8cdd40;
    border-radius: 6px;
    padding: .5rem 1rem;
    border: 1px solid transparent;
}
.btn-primary-1:hover {
    filter: brightness(1.1);
}
.bg-indigo-600 {
    background-color: #3c8cdd40 !important;
}
.border-indigo-600
{
    border-color: #00c6ff !important;
    color: #00c6ff !important;
}
.text-indigo-600
{
    color: #00c6ff !important;
}
.bg-light-round {
    background-color: #d9dff70d;
    border-color: #0284c700 !important;
    color: #ffffffa6;
}
.form-control {
    background-color: #111827cc !important;
    border-color: #3741515c !important;
    box-shadow: none !important;
    color: #e7ebef !important;
    font-size: 14px !important;
    font-weight: 400;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
.form-select {
    box-shadow: none !important;
    color: #e7ebef;
    font-size: 14px !important;
    font-weight: 400;
    padding: 6px 30px 6px 10px !important;
    background-color: #111827cc !important;
    border-color: #3741515c !important;
}
.form-select option {
    background-color: #0a101c;
}
label {
    color: #6b7280 !important;
    margin-bottom: 4px;
}
input::placeholder
{
    color:#e7ebef70 !important;
}
.bg-gray-500\/75 {
    background-color: rgb(11 11 12 / 83%) !important;
}
.active-bg
{
    background-color: #00bdd60d !important;
    border: 2px solid #00bdd6  !important;
}
.bg-white-1
{
    border: 2px solid #e1e2e314 !important;
}
.bg-green-alert
{
    border: 1px solid #4a9d2b5e;
    background-color: #11ae412b !important;
    color: #00a03f !important;
}
.bg-yellow-alert
{
    border: 1px solid #776c1b;
    background-color: #b3a61129 !important;
    color: #c0af33 !important;
}
.bg-blue-alert
{
    border: 1px solid #6c84de3d;
    background-color: #17338e21 !important;
    color: #5e94f0  !important;
}
.bg-red-50
{
    background-color: #96000033 !important;
    color: #ff3d3d !important;
    border: 1px solid #ff000033;
}
.bg-red-alert
{
    background-color: #96000033 !important;
    color: #ff3d3d !important;
    border: 1px solid #ff000033;
}
.check-box-form
{
    border: 1px solid #e1e2e314;
    background-color: #11182780 !important;
    border-radius: 8px;
}
.form-check-input:checked
{
     border-color: #00c6ff;
     background-color: #00c6ff;
}
.form-check-input
{
    box-shadow: none !important;
    background-color: #191d2c;
    border-color: #e1e2e314;
}
.check-box-form:hover
{
    border-color: #3c8cdd47;
}
.font-heading
{
    font-size: 14px;
    color: #e7ebef;
    text-transform: capitalize;
    font-weight: 600;
}
table thead th:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
table thead th:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
.font-heading-1
{
    font-size: 17px;
    color: #e7ebef;
    text-transform: capitalize;
    font-weight: 600;
}
.bg-white
{
    background-color: #11182780 !important;
    border: 1px solid #e1e2e314 !important;
    border-radius: 8px !important;
}
.text-white
{
     color: #e7ebef !important;
}
.text-muted {
    color: #e1e2e3cc !important;
}
.dns-btn
{
    color: #00c6ff;
    background-color: #090f1b;
    border: 1px solid #262f40;
    padding: 4px 7px;
    border-radius: 6px;
    transition: background-color 0.4s , color 0.4s;
}
.dns-btn:hover
{
    background-color: #111a2ece;
}
.view-btn
{
    color: #fff;
    background-color: #090f1b;
    border: 1px solid #262f40;
    padding: 4px 7px;
    border-radius: 6px;
    transition: background-color 0.4s;
}
.view-btn:hover
{
    background-color: #111a2ece;
}
.delete-btn
{
    color: #ef4343;
    background-color: #090f1b;
    border: 1px solid #262f40;
    padding: 4px 7px;
    border-radius: 6px;
    transition: background-color 0.4s , color 0.4s;
}
.delete-btn:hover
{
    background-color: #ef4343;
    color: #fff;
}
.text-gray-500
{
    color: #e1e2e3cc !important;
}
.nav-tabs
{
    background-color: #111827cc;
    border: 1px solid #3741515c !important;
    padding: 6px;
    border-radius: 7px;
    width: fit-content;
    margin: 0 0 0 auto;
}
.nav-tabs.border-0 .nav-link.active
{
    background-color: #3c8cdd40 !important;
    background-image: none !important;
    border-radius: 5px !important;
    color: #fff !important;
}
.bg-gray-100
{
    background-color: #161e2ed6 !important;
}

/* ---- Admin Sidebar Styles ---- */
.nav-admin .nav-link {
    color: var(--gray-400);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    transition: color 0.15s ease, background-color 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.nav-admin .nav-link:hover {
    background-color: var(--gray-800);
    color: #fff;
}
.nav-admin .nav-link.active {
    background-color: var(--admin-700);
    color: #fff;
}
.nav-admin .nav-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/* ---- Dropdown (Alpine.js driven) ---- */
.dropdown-dark {
    background-color: var(--gray-800);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.dropdown-dark .dropdown-item {
    color: var(--gray-300);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
}
.dropdown-dark .dropdown-item:hover {
    background-color: var(--gray-700);
    color: #fff;
}

/* ---- Card Styles ---- */
.card-custom {
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    border: 1px solid rgba(17, 24, 39, 0.05);
}
.card-custom .card-body {
    padding: 1.5rem;
}

/* ---- Badge Utilities ---- */
.badge-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    display: inline-block;
}

/* ---- Form Utilities ---- */
.form-input-custom {
    border: 1px solid var(--slate-200);
    border-radius: 0.75rem;
    background-color: var(--slate-50);
    font-size: 0.875rem;
    color: var(--slate-900);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-input-custom::placeholder {
    color: var(--slate-400);
}
.form-input-custom:hover {
    border-color: var(--slate-300);
}
.form-input-custom:focus {
    outline: none;
    border-color: var(--brand-600);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

/* ---- Button Utilities ---- */
/* Reset default browser button chrome for custom-styled buttons */
button.bg-indigo-600,
button.bg-red-600,
button.bg-white,
button.bg-gray-50 {
    border: none;
}
/* Buttons styled only with text color (no bg class) should be transparent */
button.text-gray-500:not(.btn):not(.nav-link):not(.dropdown-item),
button.text-gray-700:not(.btn):not(.nav-link):not(.dropdown-item),
button.text-indigo-600:not(.btn):not(.nav-link):not(.dropdown-item),
button.text-red-500:not(.btn):not(.nav-link):not(.dropdown-item) {
    background-color: transparent;
    border: none;
}

.btn-brand {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    border: none;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}
.btn-brand:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.4);
}
.btn-brand:active {
    transform: translateY(0);
}

/* ---- Alert / Flash Messages ---- */
.alert-success-custom {
    background-color: var(--green-50);
    border-radius: 0.375rem;
    padding: 1rem;
}
.alert-error-custom {
    background-color: var(--red-50);
    border-radius: 0.375rem;
    padding: 1rem;
}

/* ---- Transition Utilities ---- */
.transition-all {
    transition: all 0.15s ease;
}
.transition-colors {
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.transition-opacity {
    transition: opacity 0.15s ease;
}
.transition-transform {
    transition: transform 0.15s ease;
}
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }

/* ---- Transform Utilities ---- */
.rotate-90  { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }
.translate-x-0 { transform: translateX(0); }
/* .-translate-x-full { transform: translateX(-100%); } */
.scale-95  { transform: scale(0.95); }
.scale-100 { transform: scale(1); }

/* ---- Z-Index Utilities ---- */
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-100 { z-index: 100; }

/* ---- Size Utilities ---- */
.w-4  { width: 1rem !important; }
.w-5  { width: 1.25rem !important; }
.w-6  { width: 1.5rem !important; }
.w-8  { width: 2rem !important; }
.w-9  { width: 2.25rem !important; }
.w-10 { width: 2.5rem !important; }
.w-12 { width: 3rem !important; }
.w-16 { width: 4rem !important; }
.w-64 { width: 16rem !important; }
.w-72 { width: 18rem !important; }
.w-80 { width: 20rem !important; }
.w-96 { width: 24rem !important; }
.h-0\.5 { height: 0.125rem !important; }
.h-3\.5 { height: 0.875rem !important; }
.w-3\.5 { width: 0.875rem !important; }
.w-1\.5 { width: 0.375rem !important; }
.h-1\.5 { height: 0.375rem !important; }
.h-4  { height: 1rem !important; }
.h-5  { height: 1.25rem !important; }
.h-6  { height: 1.5rem !important; }
.h-8  { height: 2rem !important; }
.h-9  { height: 2.25rem !important; }
.h-10 { height: 2.5rem !important; }
.h-12 { height: 3rem !important; }
.h-16 { height: 4rem !important; }
.h-3  { height: 0.75rem !important; }
.h-7  { height: 1.75rem !important; }
.w-7  { width: 1.75rem !important; }
.w-20 { width: 5rem !important; }
.h-56 { height: 14rem !important; }
.min-w-0 { min-width: 0 !important; }
.max-w-sm { max-width: 24rem !important; }
.max-w-md { max-width: 28rem !important; }

/* ---- Inset Utilities ---- */
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.inset-y-0 { top: 0; bottom: 0; }

/* ---- Flex Shrink ---- */
.shrink-0 { flex-shrink: 0 !important; }

/* ---- Ring Utilities (Tailwind-compatible) ---- */
.ring-1 {
    --ring-color: rgba(17, 24, 39, 0.05);
    --ring-shadow: 0 0 0 1px var(--ring-color);
    box-shadow: var(--ring-shadow) !important;
}
.ring-1.ring-inset {
    --ring-shadow: inset 0 0 0 1px var(--ring-color);
    box-shadow: var(--ring-shadow) !important;
}
/* Combine ring with Bootstrap shadow-sm */
.ring-1.shadow-sm {
    box-shadow: var(--ring-shadow), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}
.ring-1.ring-inset.shadow-sm {
    box-shadow: var(--ring-shadow), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}
/* Reset default button borders when ring provides the outline */
button.ring-1 {
    border: none;
}
/* Ring colors */
.ring-gray-300 { --ring-color: var(--gray-300) !important; }
.ring-gray-900\/5 { --ring-color: rgba(17, 24, 39, 0.05) !important; }
.ring-green-200 { --ring-color: #a7f3d0 !important; }
.ring-green-600\/20 { --ring-color: rgba(22, 163, 74, 0.2) !important; }
.ring-red-200 { --ring-color: #fecaca !important; }
.ring-red-600\/20 { --ring-color: rgba(220, 38, 38, 0.2) !important; }
.ring-gray-500\/10 { --ring-color: rgba(107, 114, 128, 0.1) !important; }
.ring-black-20 {
    --ring-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 0 1px var(--ring-color);
}

/* ---- Opacity ---- */
.opacity-0   { opacity: 0 !important; }
.opacity-15  { opacity: 0.15 !important; }
.opacity-20  { opacity: 0.2 !important; }
.opacity-50  { opacity: 0.5 !important; }
.opacity-100 { opacity: 1 !important; }

/* ---- Backdrop ---- */
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.backdrop-blur-lg { backdrop-filter: blur(16px); }

/* ---- Cursor ---- */
.cursor-pointer { cursor: pointer; }

/* ---- Object Fit ---- */
.object-cover { object-fit: cover; }

/* ---- Whitespace/Overflow ---- */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.truncate-120 { max-width: 120px; }

/* ---- Pulse Animation ---- */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* ---- Guest Layout Animations ---- */
@keyframes float {
    0%, 100% { transform: translateY(0px) scale(1); }
    50%      { transform: translateY(-20px) scale(1.05); }
}
@keyframes float2 {
    0%, 100% { transform: translateY(0px) scale(1); }
    50%      { transform: translateY(20px) scale(0.95); }
}
.orb-1 { animation: float  8s ease-in-out infinite; }
.orb-2 { animation: float2 10s ease-in-out infinite; }
.orb-3 { animation: float  12s ease-in-out infinite 2s; }

.dot-pattern {
    background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 28px 28px;
}

/* ---- Hover Utilities ---- */
.hover-bg-gray-700:hover { background-color: var(--gray-700) !important; }
.hover-bg-gray-800:hover { background-color: var(--gray-800) !important; }
.hover-text-white:hover  { color: #fff !important; }
.hover-text-indigo-300:hover { color: var(--indigo-300) !important; }
.hover-text-indigo-800:hover { color: #3730a3 !important; }
.hover-text-gray-600:hover  { color: var(--gray-600) !important; }
.hover-text-gray-700:hover  { color: var(--gray-700) !important; }
.hover-border-slate-300:hover { border-color: var(--slate-300) !important; }

/* ---- Pointer Events ---- */
.pe-none { pointer-events: none; }

/* ---- Misc ---- */
.outline-none:focus { outline: none; }

/* ---- Responsive helpers beyond Bootstrap ---- */
@media (min-width: 992px) {
    .lg-static { position: static !important; }
    .lg-inset-auto { top: auto; right: auto; bottom: auto; left: auto; }
    .lg-z-auto { z-index: auto; }
    .lg-translate-x-0 { transform: translateX(0) !important; }
    .lg-ms-0 { margin-left: 0 !important; }
    .lg-px-5 { padding-left: 2rem !important; padding-right: 2rem !important; }
    .lg-p-5  { padding: 2rem !important; }
}
@media (min-width: 576px) {
    .sm-px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    .sm-p-4  { padding: 1.5rem !important; }
}

/* ---- Table Utilities ---- */
.table-custom {
    font-size: 0.875rem;
}
.table-custom th {
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--gray-200);
}
.table-custom td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--gray-100);
    color: var(--gray-700);
    vertical-align: middle;
}
.table-custom tbody tr:hover {
    background-color: var(--gray-50);
}

/* ---- Pagination Styles ---- */
.pagination-custom .page-link {
    font-size: 0.875rem;
    border-radius: 0.375rem;
}

/* Custom Pagination (Bootstrap 5 override for DMARC+ theme) */
.pagination {
    gap: 0.35rem;
    margin-bottom: 0;
}
.pagination .page-link {
    border: 1px solid var(--gray-200);
    color: var(--gray-700);
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem !important;
    min-width: 2.25rem;
    text-align: center;
    line-height: 1.5;
    background-color: #fff;
    transition: all 0.15s ease;
}
.pagination .page-item {
    margin: 0;
}
.pagination .page-item + .page-item {
    margin-left: 0;
}
.pagination .page-item.active .page-link {
    background-color: var(--indigo-600);
    border-color: var(--indigo-600);
    color: #fff;
}
.pagination .page-link:hover {
    background-color: var(--gray-50);
    border-color: var(--gray-300);
    color: var(--gray-900);
}
.pagination .page-item.active .page-link:hover {
    background-color: var(--indigo-500);
    border-color: var(--indigo-500);
    color: #fff;
}
.pagination .page-item.disabled .page-link {
    color: var(--gray-400);
    background-color: transparent;
    border-color: var(--gray-200);
}

/* ---- Hover Pseudo-class Utilities (Tailwind colon syntax) ---- */
.hover\:bg-indigo-500:hover { background-color: #6366f1 !important; }
.hover\:bg-gray-50:hover { background-color: var(--gray-50) !important; }
.hover\:bg-red-50:hover { background-color: var(--red-50) !important; }
.hover\:bg-red-500:hover { background-color: #ef4444 !important; }
.hover\:text-indigo-500:hover { color: #6366f1 !important; }
.hover\:text-indigo-600:hover { color: #4f46e5 !important; }
.hover\:text-gray-700:hover { color: var(--gray-700) !important; }
.hover\:border-gray-300:hover { border-color: var(--gray-300) !important; }

/* ---- Background Opacity Variants (Tailwind slash syntax) ---- */
/* .bg-gray-500\/75 { background-color: rgba(107, 114, 128, 0.75) !important; } */
/* .bg-red-50\/30 { background-color: rgba(254, 242, 242, 0.3) !important; } */
.bg-indigo-50\/30 { background-color: rgba(238, 242, 255, 0.3) !important; }

/* ---- Additional Color Utilities ---- */
/* Backgrounds */
.bg-indigo-50  { background-color: #eef2ff !important; }
.bg-indigo-100 { background-color: #e0e7ff !important; }
.bg-purple-50  { background-color: #faf5ff !important; }
.bg-red-100    { background-color: #fee2e2 !important; }
.bg-blue-500   { background-color: #3b82f6 !important; }
.bg-purple-500 { background-color: #a855f7 !important; }
.bg-green-500  { background-color: #00a33d !important; }
.bg-green-600  { background-color: #00a33d !important; }
.bg-yellow-500 { background-color: #eab308 !important; }
.bg-red-500    { background-color: #ef4444 !important; }

/* Text */
.text-red-600    { color: #dc2626 !important; }
.text-green-500  { color: #00a33d !important; }
.text-green-600  { color: #00a33d !important; }
.text-yellow-600 { color: #ca8a04 !important; }
.text-yellow-700 { color: #a16207 !important; }
.text-indigo-700 { color: #4338ca !important; }
.text-blue-700   { color: #1d4ed8 !important; }
.text-purple-600 { color: #9333ea !important; }

/* Borders */
.border-gray-50    { border-color: var(--gray-50) !important; }
/* .border-gray-100   { border-color: var(--gray-100) !important; } */
.border-indigo-500 { border-color: #6366f1 !important; }
.border-yellow-200 { border-color: #fef08a !important; }

/* ---- Additional Ring Colors ---- */
.ring-yellow-600\/20 { --ring-color: rgba(202, 138, 4, 0.2) !important; }
.ring-blue-600\/20   { --ring-color: rgba(37, 99, 235, 0.2) !important; }
.ring-indigo-200     { --ring-color: #c7d2fe !important; }
.ring-gray-200       { --ring-color: var(--gray-200) !important; }
.ring-gray-500\/20   { --ring-color: rgba(107, 114, 128, 0.2) !important; }

/* ---- Additional Spacing Utilities ---- */
.py-0\.5 { padding-top: 0.125rem !important; padding-bottom: 0.125rem !important; }
.mt-0\.5 { margin-top: 0.125rem !important; }
.gap-1\.5 { gap: 0.375rem !important; }

/* ---- Pointer Events ---- */
.pointer-events-none { pointer-events: none !important; }

/* ---- Max Width Utilities ---- */
.mw-lg { max-width: 32rem !important; }

/* ---- Responsive Width ---- */
@media (min-width: 576px) {
    .w-sm-48 { width: 12rem !important; }
}

/* ---- Tab Navigation (bottom-border indicator style) ---- */
.nav-tabs.border-0 {
    gap: 0.2rem;
}
.nav-tabs.border-0 .nav-link {
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding: 5px 15px !important;
}
.nav-tabs.border-0 .nav-link:hover {
    border: none !important;
    color: #fff !important;
}
.text-black
{
    color: #000 !important;
}
.in-progress-color
{
    border:2px solid #262f4097 !important;
    color: #728197;
}
.in-progress-border-color
{
    background-color: #262f4097 !important;
}


/* ---- Mark Read / text-only ring buttons ---- */
button.ring-1:not(.bg-white):not(.bg-indigo-600):not(.bg-red-600) {
    background-color: transparent;
    border: none;
}

/* ---- Progress bar custom ---- */
.progress-thin {
    height: 0.5rem;
    border-radius: 9999px;
}

/* ---- Scrollbar ---- */
.sidebar::-webkit-scrollbar {
    width: 4px;
}
.sidebar::-webkit-scrollbar-thumb {
    background: var(--gray-700);
    border-radius: 2px;
}

/* ================================================================
   Policy Progression Page — Additional Utilities
   ================================================================ */

/* ---- Additional Size Utilities ---- */
.w-3    { width: 0.75rem !important; }
.w-0\.5 { width: 0.125rem !important; }
.w-24   { width: 6rem !important; }
.w-32   { width: 8rem !important; }
.w-36   { width: 9rem !important; }
.h-1    { height: 0.25rem !important; }
.h-2    { height: 0.5rem !important; }
.h-32   { height: 8rem !important; }
.h-36   { height: 9rem !important; }

/* ---- Additional Spacing Utilities ---- */
.px-16   { padding-left: 4rem !important; padding-right: 4rem !important; }
.px-1\.5 { padding-left: 0.375rem !important; padding-right: 0.375rem !important; }
.-mt-0\.5 { margin-top: -0.125rem !important; }

/* ---- Position Utilities ---- */
.top-6 { top: 1.5rem !important; }
.top-1 { top: 0.25rem !important; }
.end-1 { right: 0.25rem !important; }

/* ---- Ring-4 System (uses outline to avoid box-shadow conflicts) ---- */
.ring-4 {
    --ring-color: rgba(17, 24, 39, 0.05);
    outline: 4px solid var(--ring-color);
    outline-offset: 0;
}
.ring-4.ring-offset-2 {
    outline-offset: 2px;
}

/* Ring-4 color variants (slash-opacity syntax) */
.ring-blue-500\/30   { --ring-color: rgba(59, 130, 246, 0.3) !important; }
.ring-amber-500\/30  { --ring-color: rgba(245, 158, 11, 0.3) !important; }
.ring-green-500\/30  { --ring-color: rgba(34, 197, 94, 0.3) !important; }
.ring-green-500\/20  { --ring-color: rgba(34, 197, 94, 0.2) !important; }
.ring-indigo-500\/20 { --ring-color: rgba(99, 102, 241, 0.2) !important; }

/* Named ring colors */
.ring-blue-500  { --ring-color: #3b82f6 !important; }
.ring-amber-500 { --ring-color: #f59e0b !important; }
.ring-green-500 { --ring-color: #22c55e !important; }

/* ---- SVG Stroke Utilities ---- */
.stroke-green-500 { stroke: #22c55e; }
.stroke-amber-500 { stroke: #f59e0b; }
.stroke-red-500   { stroke: #ef4444; }
.stroke-gray-200  { stroke: #e5e7eb; }

/* ---- Colored Shadow Utilities ---- */
.shadow-lg.shadow-green-500\/25 {
    box-shadow: 0 10px 15px -3px rgba(34, 197, 94, 0.25), 0 4px 6px -4px rgba(34, 197, 94, 0.25) !important;
}
.shadow-lg.shadow-blue-500\/25 {
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.25), 0 4px 6px -4px rgba(59, 130, 246, 0.25) !important;
}
.shadow-lg.shadow-amber-500\/25 {
    box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.25), 0 4px 6px -4px rgba(245, 158, 11, 0.25) !important;
}

/* ---- Additional Background Colors ---- */
.bg-amber-50  { background-color: #fffbeb !important; }
.bg-amber-500 { background-color: #f59e0b !important; }
.bg-blue-100  { background-color: #dbeafe !important; }
.bg-green-100 { background-color: #dcfce7 !important; }
.bg-green-300 { background-color: #86efac !important; }
.bg-green-400 { background-color: #4ade80 !important; }
.bg-red-400   { background-color: #f87171 !important; }

/* Semi-transparent backgrounds (slash-opacity syntax) */
.bg-green-50\/50 { background-color: rgba(240, 253, 244, 0.5) !important; }
.bg-red-50\/50   { background-color: rgba(254, 242, 242, 0.5) !important; }

/* ---- Additional Text Colors ---- */
.text-amber-600  { color: #d97706 !important; }
.text-amber-700  { color: #b45309 !important; }
.text-amber-800  { color: #92400e !important; }
.text-indigo-900 { color: #312e81 !important; }
.text-green-900  { color: #14532d !important; }

/* ---- Additional Border Colors ---- */
.border-amber-200  { border-color: #fde68a !important; }
.border-green-200  { border-color: #bbf7d0 !important; }
.border-indigo-200 { border-color: #c7d2fe !important; }

/* ---- List Utilities ---- */
.list-disc   { list-style-type: disc !important; }
.list-inside { list-style-position: inside !important; }

/* ---- Cursor Utilities ---- */
.cursor-not-allowed { cursor: not-allowed !important; }

/* ---- Disabled State Utilities (Tailwind pseudo-class syntax) ---- */
.disabled\:opacity-50:disabled { opacity: 0.5 !important; }

/* ---- Transform Utilities ---- */
.-rotate-90 { transform: rotate(-90deg); }

/* ---- Animation Utilities ---- */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.animate-spin { animation: spin 1s linear infinite; }

/* ---- Additional Opacity Utilities ---- */
.opacity-25 { opacity: 0.25 !important; }
.opacity-75 { opacity: 0.75 !important; }

/* ---- Duration Utilities ---- */
.duration-500 { transition-duration: 500ms; }

/* ---- Button Reset Additions ---- */
button.bg-gray-300 {
    border: none;
}

/* ================================================================
   DMARC Wizard / Record Generator — Additional Utilities
   ================================================================ */

/* ---- Screen Reader Only (visually hide radio inputs) ---- */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
}

/* ---- Tailwind-style border base (ensures border-style is solid for border-2 with color) ---- */
.border-2[class*="border-gray"],
.border-2[class*="border-indigo"],
.border-2[class*="border-amber"],
.border-2[class*="border-green"],
.border-2[class*="border-red"],
.border-2[class*="border-blue"],
.border-2[class*="border-yellow"],
.border-2.border-transparent {
    border-style: solid;
}

/* ---- Card-style button reset (match Tailwind's compact rendering) ---- */
button.text-start.rounded-4 {
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.75rem !important;
}

/* ---- Ensure SVG checkmark icons render at proper size ---- */
svg.w-5, svg.w-6 {
    /* display: inline-block; */
    flex-shrink: 0;
}
svg.w-6 {
    min-width: 1.5rem;
    min-height: 1.5rem;
}

/* ---- Ring-2 System ---- */
.ring-2 {
    --ring-color: rgba(17, 24, 39, 0.05);
    outline: 2px solid var(--ring-color);
    outline-offset: 0;
}
.ring-0 {
    outline: 0 !important;
    box-shadow: none;
}

/* ---- Toggle Switch Utilities ---- */
.w-11 { width: 2.75rem !important; }
.translate-x-5 { transform: translateX(1.25rem); }

/* ---- Additional Border Colors ---- */
/* .border-indigo-600  { border-color: #4f46e5 !important; } */
.border-amber-400   { border-color: #fbbf24 !important; }
.border-blue-200    { border-color: #bfdbfe !important; }
.border-transparent { border-color: transparent !important; }

/* ---- Additional Background Colors ---- */
.bg-yellow-100 { background-color: #fef9c3 !important; }
.bg-indigo-700 { background-color: #4338ca !important; }
.bg-blue-600   { background-color: #2563eb !important; }
.bg-sky-600    { background-color: #0284c7 !important; }
.bg-violet-600 { background-color: #7c3aed !important; }

/* ---- Tailwind bg-white/10 opacity modifier ---- */
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1) !important; }

/* ---- Report Center: light text colors for card header subtitles ---- */
.text-indigo-200  { color: #c7d2fe !important; }
.text-blue-200    { color: #bfdbfe !important; }
.text-red-200     { color: #fecaca !important; }
.text-sky-200     { color: #bae6fd !important; }
.text-violet-200  { color: #ddd6fe !important; }

/* ---- Small icon sizes (h-3.5, w-3.5 = 0.875rem) ---- */
.h-3\.5 { height: 0.875rem !important; }
.w-3\.5 { width: 0.875rem !important; }

/* ---- Additional Hover Utilities ---- */
.hover\:border-indigo-300:hover { border-color: #a5b4fc !important; }
.hover\:text-red-700:hover { color: #b91c1c !important; }
.hover\:text-indigo-800:hover { color: #3730a3 !important; }
.hover\:bg-gray-600:hover { background-color: #4b5563 !important; }
.hover\:bg-indigo-50:hover { background-color: #eef2ff !important; }
.hover\:bg-indigo-700:hover { background-color: #4338ca !important; }
.hover\:bg-green-500:hover { background-color: #22c55e !important; }
.hover\:text-indigo-700:hover { color: #4338ca !important; }

/* ---- Focus Ring Utilities (Tailwind focus:ring-* / focus:outline-none) ---- */
.focus\:outline-none:focus { outline: none !important; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--ring-color, rgba(99,102,241,0.5)) !important; }
.focus\:ring-admin-600:focus { --ring-color: var(--admin-600); }
.focus\:ring-indigo-500:focus { --ring-color: rgba(99,102,241,0.5); }
.focus\:border-indigo-500:focus { border-color: #6366f1 !important; }
.focus\:border-none:focus { border: none !important; }
.focus\:z-10:focus { z-index: 10 !important; }

/* ---- Placeholder Color Utilities ---- */
.placeholder-gray-500::placeholder { color: var(--gray-500) !important; opacity: 1; }
.placeholder-gray-400::placeholder { color: var(--gray-400) !important; opacity: 1; }

/* ---- Admin Page Colors (bg-*-900 dark backgrounds for badges/alerts) ---- */
.bg-red-900    { background-color: var(--red-900) !important; }
.bg-green-900  { background-color: var(--green-900) !important; }
.bg-yellow-900 { background-color: var(--yellow-900) !important; }
.bg-gray-750   { background-color: #293548 !important; }

/* ---- Admin Page Text Colors ---- */
.text-green-300 { color: var(--green-300) !important; }
.text-red-300   { color: #fca5a5 !important; }

/* ---- Admin Page Border Colors ---- */
.border-green-800 { border-color: var(--green-800) !important; }
.border-red-800   { border-color: var(--red-800) !important; }
.border-gray-600  { border-color: var(--gray-600) !important; }

/* ---- Admin Page Hover Backgrounds ---- */
.hover\:bg-green-800:hover  { background-color: var(--green-800) !important; }
.hover\:bg-yellow-800:hover { background-color: var(--yellow-800) !important; }
.hover\:bg-red-800:hover    { background-color: var(--red-800) !important; }
.hover\:bg-gray-750:hover   { background-color: #293548 !important; }
.hover\:text-white:hover    { color: #fff !important; }

/* ---- Dark-themed Bootstrap form controls ---- */
.form-select.bg-gray-800,
.form-select.bg-gray-700 {
    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='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-control.bg-gray-700:focus,
.form-control.bg-gray-800:focus,
.form-select.bg-gray-700:focus,
.form-select.bg-gray-800:focus {
    border-color: var(--gray-600) !important;
    box-shadow: 0 0 0 2px var(--ring-color, var(--admin-600)) !important;
}

/* ---- Text Nowrap Utility ---- */
.text-nowrap { white-space: nowrap !important; }

/* ---- List Utilities Addition ---- */
.list-decimal { list-style-type: decimal !important; }