:root {
    --sah-primary: #0B3B8C;
    --sah-primary-light: #EEF4FF;
    --sah-accent: #FF6A00;
    --sah-accent-light: #FFF3E8;
    --sah-bg: #F8FAFD;
    --sah-card-bg: #FFFFFF;
    --sah-border: #E6ECF5;
    --sah-text: #1F2937;
    --sah-text-muted: #6B7280;
}


html {
    /*min-height: 100vh;*/
    color: var(--sah-text);
    background: radial-gradient( circle at top left, rgba(180,205,245,.65), transparent 45% ), radial-gradient( circle at bottom right, rgba(180,205,245,.55), transparent 40% ), linear-gradient( 180deg, #edf4ff 0%, #f7faff 35%, #ffffff 75% );
    background: radial-gradient( circle at top left, rgb(107 161 247 / 65%), transparent 45% ), radial-gradient( circle at bottom right, rgb(113 164 245 / 55%), transparent 40% ), linear-gradient( 180deg, #edf4ff 0%, #f7faff 35%, #ffffff 75% );
    /*background: radial-gradient( circle at top left, rgb(106 159 243 / 65%), transparent 45% ), radial-gradient( circle at bottom right, rgba(180,205,245,.55), transparent 40% ), linear-gradient( 180deg, #edf4ff 0%, #f7faff 35%, #ffffff 75% );*/
    position: relative;
    background-repeat: no-repeat;
    min-height: 100%;
}

body {
    background: transparent;
}

    body::after {
        content: '';
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: -1;
        width: 90px;
        height: 90px;
        /*border: 2px solid rgba(11,59,140,.05);*/
        border-radius: 14px;
        box-shadow:
        /* Top Left Window */
        150px 100px 0 rgba(11,59,140,.08), 260px 100px 0 rgba(11,59,140,.08), 150px 210px 0 rgba(11,59,140,.08), 260px 210px 0 rgba(11,59,140,.08),
        /* Middle Right Window */
        1250px 220px 0 rgba(11,59,140,.08), 1360px 220px 0 rgba(11,59,140,.08), 1250px 330px 0 rgba(11,59,140,.08), 1360px 330px 0 rgba(11,59,140,.08),
        /* Bottom Right Window */
        1700px 650px 0 rgba(11,59,140,.08), 1810px 650px 0 rgba(11,59,140,.08), 1700px 760px 0 rgba(11,59,140,.08), 1810px 760px 0 rgba(11,59,140,.08);
        transform: rotate(3deg);
    }

.page-content {
    padding-top: 100px;
}

@media (max-width: 768px) {

    body {
        background: radial-gradient( circle 800px at -20% -10%, rgba(107,161,247,.55), transparent 75% ), radial-gradient( circle 850px at 120% 110%, rgba(107,161,247,.45), transparent 75% ), linear-gradient( 180deg, #e8f2ff 0%, #f2f8ff 35%, #ffffff 100% ) !important;
    }

        body::after {
            content: '';
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: -1;
            width: 42px;
            height: 42px;
            border-radius: 10px;
            box-shadow:
            /* Top Left Window */
            24px 110px 0 rgba(11,59,140,.10), 80px 110px 0 rgba(11,59,140,.10), 24px 166px 0 rgba(11,59,140,.10), 80px 166px 0 rgba(11,59,140,.10),
            /* Bottom Right Window */
            270px 620px 0 rgba(11,59,140,.10), 326px 620px 0 rgba(11,59,140,.10), 270px 676px 0 rgba(11,59,140,.10), 326px 676px 0 rgba(11,59,140,.10);
            transform: rotate(3deg);
        }

    .portal-hero img, .main-logo-image img {
        max-width: 280px !important;
    }

    .page-content {
        padding-top: 90px;
    }
}

@media (max-width: 1199px) {

    #navbarSupportedContent {
        display: none !important;
    }
}

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



/*body {
            min-height: 100vh;
            color: var(--sah-text);
            background: radial-gradient( circle at top left, rgba(180,205,245,.65), transparent 45% ), radial-gradient( circle at bottom right, rgba(180,205,245,.55), transparent 40% ), linear-gradient( 180deg, #edf4ff 0%, #f7faff 35%, #ffffff 75% );
            position: relative;
        }

            body::before {
                content: '';
                position: fixed;
                inset: 0;
                pointer-events: none;
                z-index: -1;
                background: rgba(11,59,140,.05);
                width: 220px;
                height: 220px;
                border-radius: 36px;
                box-shadow:*/
/* Existing Top Area */
/*350px 80px 0 rgba(11,59,140,.04), 180px 260px 0 rgba(11,59,140,.03), 700px 140px 0 rgba(11,59,140,.03), 950px 50px 0 rgba(11,59,140,.04),*/
/* Subtle Bottom Right */
/* Bottom Right Cluster */
/*1100px 500px 0 rgba(11,59,140,.035), 1280px 620px 0 rgba(11,59,140,.03), 1020px 720px 0 rgba(11,59,140,.03);
                transform: rotate(-8deg);
            }*/
/*Inbox styles*/
/* On smaller screens, drop the separators so wrapping looks cleaner */
@media (max-width: 992px) {
    .toolbar-group + .toolbar-group {
        border-left: none;
        padding-left: 0;
        margin-left: .5rem;
    }
}

.claim-row {
    border-bottom: 1px solid #f3f3f3;
    transition: background 0.15s ease;
}

    .claim-row:hover {
        background-color: #fafafa;
    }

#claimsTable td {
    padding: 12px;
    vertical-align: middle;
}

#claimsTable thead th {
    font-size: 12px;
    text-transform: uppercase;
    color: #888;
    border-bottom: 1px solid #e5e5e5;
}

.claim-row {
    transition: background-color 0.15s ease;
}

    .claim-row:hover {
        cursor: pointer;
        background-color: rgba(0,0,0,0.03);
    }

.datatable tbody tr.claim-row {
    cursor: pointer !important;
}

    .datatable tbody tr.claim-row:hover {
        background-color: rgba(0,0,0,0.04);
    }


#claimsTable tbody tr {
    cursor: pointer !important;
}


body.SmallView {
    padding-top: 40px;
}

body.MyMinLayOutBody {
    padding-top: inherit;
    padding-bottom: inherit;
    transition: all 0.8s ease 0.2s;
}


@media (min-width: 1200px) {
    .MyMainNav {
        top: 0px;
        height: 50px;
        transition: 0.8s ease 0.2s;
    }
}


#externalLinkFullscreenIframe {
    width: 100%;
    height: calc(100vh - 56px); /* subtract header height */
    border: 0;
}
/*Drag and Drop*/
.sortable-item .card-header {
    cursor: move;
}
/*small th col class*/
.th-icon-col {
    width: 1%;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center;
}
/*styles for lookup button inputs*/
.lookup-btn {
    line-height: inherit !important;
    padding-top: 6px !important;
}
/*styles for radio button / buttons*/
.no-border {
    border: none !important;
}


.btn-check:checked + .half-border {
    border-color: #e2eaf7 !important;
}


.no-boxshadow {
    box-shadow: none !important;
}

.round-radius {
    border-radius: 20px !important;
}

.updated-padding {
    padding-right: 15px !important;
    padding-left: 15px !important;
    margin: unset !important;
}

.btn-check:checked + .updated-bg {
    background-color: #dce7f7 !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
    margin: unset !important;
}

.btn-check + .update-hover:hover {
    border-color: #dce7f7 !important;
}
/*.update-hover:hover {
    border: #dce7f7 !important;
}*/
/*fix "entries per page" on bootstrap datatable*/
div.dt-container select.dt-input {
    padding: 4px !important;
    margin-right: 5px !important;
}
/* Adjust the form-outline container and input */
.form-outline {
    flex-grow: 1; /* Allow the input to take up remaining space */
}

/*.form-control {
            width: calc(100% - 3rem);*/ /* Adjust input width to make space for the button */
/*}*/

.email-btn, .phone-btn {
    /*margin-left: -0.08rem;*/ /* Optional: space between input and button */
    /*border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;*/
}
    /* Optional: Keep button size consistent */
    .email-btn i {
        pointer-events: none; /* Ensure clicking on icon doesn't interfere with button click */
    }



.custom-icon {
    color: #5f669b; /* Change to your desired color */
}


.custom-card {
    position: relative;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.custom-card-header {
    position: absolute;
    top: -0.80rem; /* Moves the header above the border */
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    /* padding: 0 1.25rem; */
    padding-right: .2rem;
    padding-left: .2rem;
    font-size: 1.125rem;
    border-bottom: 1px solid #dee2e6; /* Optional: adds a border under the title */
    border-radius: 0.25rem;
    z-index: 1; /* Ensure the title is above the border */
    border-bottom: 0 !important;
}

.custom-card-body {
    padding-top: 1.5rem; /* Ensures content does not overlap the header */
}

.custom-card-header2 {
    left: 85px !important;
}
/*table header color*/
.custom-thead > tr > th {
    background: hsl(132.14deg 52.27% 41.98% / 79%);
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
}
/*breadcrumb styles*/
.breadcrumb-item a:hover {
    background-color: #f8f9fa; /* Light gray background */
    text-decoration: none; /* Prevents underline on hover */
}
/* ============================================================
   ADDRESS AUTOCOMPLETE DROPDOWN — shared across all pages
   ============================================================ */
.sah-autocomplete-results {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(11, 59, 140, .12);
    box-shadow:
        0 4px 6px -1px rgba(15, 23, 42, .06),
        0 12px 32px -4px rgba(11, 59, 140, .14),
        0 0 0 1px rgba(11, 59, 140, .04);
    overflow: hidden;
    max-height: 240px;
    overflow-y: auto;
    margin-top: 4px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    /* slim top accent bar */
    .sah-autocomplete-results::before {
        content: '';
        display: block;
        height: 3px;
        background: linear-gradient(90deg, var(--sah-primary), #4f8ef7);
    }

    .sah-autocomplete-results li {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: .62rem 1rem;
        font-size: .865rem;
        color: #1e293b;
        cursor: pointer;
        border-bottom: 1px solid #f1f5f9;
        transition: background .12s ease, color .12s ease, padding-left .12s ease;
        position: relative;
    }

        .sah-autocomplete-results li:last-child {
            border-bottom: none;
        }

        /* map pin icon */
        .sah-autocomplete-results li::before {
            content: "\f3c5";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            font-size: .7rem;
            color: #94a3b8;
            background: #f1f5f9;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: background .12s ease, color .12s ease;
        }

        .sah-autocomplete-results li:hover {
            background: var(--sah-primary-light, #EEF4FF);
            color: var(--sah-primary);
            padding-left: 1.15rem;
        }

            .sah-autocomplete-results li:hover::before {
                background: rgba(11, 59, 140, .1);
                color: var(--sah-primary);
            }



.stg-card.ignored {
    opacity: 0.5;
    position: relative;
    transition: opacity 0.3s ease;
}

    .stg-card.ignored::after {
        content: "Ignored";
        position: absolute;
        top: 8px;
        left: 8px;
        background: rgb(247 210 136);
        color: #000;
        font-size: 0.8rem;
        font-weight: 600;
        padding: 2px 6px;
        border-radius: 4px;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    }

.list-group-item.ignored {
    opacity: 0.6;
    position: relative;
    transition: opacity 0.3s ease;
}
/* Task card hover effect */
#taskCardGrid .p-3.rounded.shadow-2-strong {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border 0.25s ease;
    will-change: transform, box-shadow, border;
    border: 1px solid transparent;
}

    #taskCardGrid .p-3.rounded.shadow-2-strong:hover {
        transform: translateY(-4px) scale(1.01);
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
        border: 1px solid rgba(59, 113, 202, 0.3); /* soft blue highlight */
        cursor: pointer;
    }
/* Base style for flags in cards */
.task-card .fa-flag {
    transition: opacity 0.2s ease;
}
/* Hide only unflagged (outlined) flags */
.task-card .far.fa-flag {
    opacity: 0;
}
/* Show unflagged flag when hovering */
.task-card:hover .far.fa-flag {
    opacity: 1;
}
/* Keep red flagged icons always visible */
.task-card .fas.fa-flag {
    opacity: 1;
}

.taskcard-priority-indicator {
    display: flex;
    align-items: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

    .taskcard-priority-indicator:hover {
        transform: translateY(-2px);
        opacity: 0.85;
    }

    .taskcard-priority-indicator i {
        font-size: 0.85rem;
    }
/* Child task visual styling */
.child-task-card .task-card {
    transform: scale(0.90);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 0 0 4px rgba(120, 120, 120, 0.25) !important;
}
/* Connector line between parent and child tasks */
.child-task-card {
    position: relative;
}

    .child-task-card::before {
        content: '';
        position: absolute;
        top: 50%;
        left: -20px; /* adjust for gap between cards */
        width: 20px;
        height: 4px;
        background-color: rgba(120, 120, 120, 0.25);
        transform: translateY(-50%);
        z-index: 0;
        border-radius: 2px;
    }
/* Outer card for child tasks */
.outer-task-card {
    background-color: #fff;
    border: 1px solid rgba(120, 120, 120, 0.25);
}
/* Inner child task (the actual task card inside) */
.inner-task-card {
    background-color: #f7f8fb;
    transform: scale(0.96);
    box-shadow: 0 0 0 3px rgba(120, 120, 120, 0.25);
}

.folder-spacer-claim {
    display: inline-block;
    width: 10px; /* adjust until it lines up with your existing arrow width */
}

.folder-spacer {
    display: inline-block;
    width: 16px; /* adjust until it lines up with your existing arrow width */
}
/* Base glow animation for all new notes */
.note-new {
    animation: newNoteGlow 0.4s ease-out;
    position: relative;
    z-index: 2;
}

@keyframes newNoteGlow {
    0% {
        transform: scale(0.97);
        box-shadow: 0 0 0px rgba(0,0,0,0);
    }

    100% {
        transform: scale(1);
    }
}

.note-block.note-new.note-new-blue {
    box-shadow: 0 0 12px 3px rgba(41, 79, 141, 0.45), 0 0 20px 8px rgba(41, 79, 141, 0.25) !important;
}
/* Yellow notes (Resolved Tasks) */
.note-block.note-new.note-new-yellow {
    box-shadow: 0 0 12px 3px rgba(217, 164, 6, 0.45), 0 0 20px 8px rgba(217, 164, 6, 0.25) !important;
}
/* Green notes (Regular Notes) */
.note-block.note-new.note-new-green {
    box-shadow: 0 0 12px 3px rgba(25, 135, 84, 0.45), 0 0 20px 8px rgba(25, 135, 84, 0.25) !important;
}


.note-new-dot-inline {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-left: 6px;
    margin-top: 1px;
}

.note-new-blue-dot {
    background-color: #294f8d;
}

.note-new-green-dot {
    background-color: #198754;
}

.note-new-yellow-dot {
    background-color: #d9a406;
}
/* Blue glow for unread tasks */
.task-new {
    position: relative;
    /*background-color: rgba(13, 110, 253, 0.06) !important;*/ /* subtle blue tint */
    /*box-shadow: 0 0 10px rgba(13, 110, 253, 0.25) !important;*/
    /*z-index: 1;*/
}
    /* The left-side unread dot */
    .task-new::before {
        content: "";
        position: absolute;
        left: 4px;
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
        height: 8px;
        background: #0d6efd;
        border-radius: 50%;
    }
/* Short description (1 line) */
.task-desc-short {
    max-width: 260px; /* Adjust to fit your table layout */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Long description (2–3 lines) */
.task-desc-long {
    max-width: 260px; /* Match the width above */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* show 2 lines max */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Highlight NEW task cards */
.task-card.task-new {
    box-shadow: 0 0 12px rgba(59, 113, 202, 0.45), 0 0 3px rgba(59,113,202,0.25);
    border: 2px solid rgba(59,113,202,0.4);
    border-radius: 8px;
}
/* NEW — Highlight new task cards */
.taskcard-new .task-card,
.taskcard-new .outer-task-card,
.taskcard-new .inner-task-card {
    box-shadow: 0 0 12px rgba(59, 113, 202, 0.45) !important;
    /*border: 2px solid rgba(59, 113, 202, 0.6) !important;*/
    border-radius: 10px;
}
    /* Optional: softer glow (if you prefer) */
    .taskcard-new .task-card:hover,
    .taskcard-new .inner-task-card:hover {
        box-shadow: 0 0 16px rgba(59, 113, 202, 0.55) !important;
    }


.task-tab-indicator {
    width: 8px;
    height: 8px;
    background-color: #0d6efd; /* Bootstrap primary blue */
    border-radius: 50%;
    display: inline-block;
    margin-left: 6px;
    margin-bottom: 2px;
}


#TasksTabDot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #0d6efd; /* blue */
    border-radius: 50%;
    margin-left: 6px;
    margin-bottom: 2px;
}


/* ==========================================================
   SHOP AT HOME - SHARED ADMIN PAGE COMPONENTS
   ========================================================== */

/* ---------- Search Bar ---------- */

.sah-search-container {
    display: flex;
    align-items: center;
    gap: .65rem;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: .55rem .95rem;
    transition: all .2s ease;
}

.sah-search-container:hover {
    background: #ffffff;
    border-color: #d1d5db;
}

.sah-search-container:focus-within {
    background: #ffffff;
    border-color: rgba(37,99,235,.15);
    box-shadow: 0 0 0 3px rgba(37,99,235,.06);
}

.sah-search-icon {
    color: #9ca3af;
    font-size: .95rem;
}

.sah-search-input {
    width: 100%;
    border: none;
    background: transparent;
    outline: none;
    box-shadow: none;
    font-size: 1rem;
    color: #111827;
}

    .sah-search-input::placeholder {
        color: #9ca3af;
    }

/* ---------- Search Button ---------- */

.sah-search-btn {
    background: #ff8c2f;
    color: white;
    border: none;
    border-radius: 12px;
    padding: .75rem 1.25rem;
    font-weight: 600;
    font-size: 1rem;
    text-transform: none;
    transition: all .2s ease;
    cursor: pointer;
}

    .sah-search-btn:hover,
    .sah-search-btn:focus,
    .sah-search-btn:focus-visible,
    .sah-search-btn:active,
    .sah-search-btn.show {
        background: #f97316 !important;
        color: white !important;
        border: none !important;
        box-shadow: 0 8px 20px rgba(249,115,22,.18) !important;
    }

    .sah-search-btn:hover {
        transform: translateY(-1px);
    }

    .sah-search-btn:active {
        transform: translateY(1px);
    }

/* ---------- Primary Action Button ---------- */

.sah-primary-btn {
    background: var(--sah-primary);
    color: white;
    border: none;
    border-radius: 12px;
    padding: .75rem 1.25rem;
    font-weight: 600;
    font-size: 1rem;
    text-transform: none;
    transition: all .2s ease;
    cursor: pointer;
}

    .sah-primary-btn:hover,
    .sah-primary-btn:focus,
    .sah-primary-btn:focus-visible,
    .sah-primary-btn:active {
        background: #0a3277 !important;
        color: white !important;
        border: none !important;
        box-shadow: 0 8px 20px rgba(11, 59, 140, .18) !important;
    }

    .sah-primary-btn:hover {
        transform: translateY(-1px);
    }

    .sah-primary-btn:active {
        transform: translateY(1px);
    }

/* ---------- Results Count Badge ---------- */

.sah-results-count-pill {
    background: #eef4ff;
    color: var(--sah-primary);
    font-size: .75rem;
    font-weight: 600;
    padding: .35rem .75rem;
    border-radius: 999px;
}
/* ============================================================
   SHARED FILTER POPOVER
   Usage: .sah-filter-wrapper > .sah-filter-trigger + .sah-filter-popover
   ============================================================ */

.sah-filter-wrapper {
    position: relative;
}

.sah-filter-trigger {
    position: relative;
    width: 44px;
    height: 44px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    color: #475569;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all .2s ease;
    cursor: pointer;
}

    .sah-filter-trigger:hover {
        background: #eef2f7;
        color: #1f2937;
    }

    .sah-filter-trigger.active {
        background: var(--sah-primary-light);
        color: var(--sah-primary);
        border-color: rgba(11,59,140,.15);
    }

.sah-filter-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--sah-accent);
    color: white;
    font-size: .65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.sah-filter-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 400px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 12px 28px rgba(15,23,42,.12);
    z-index: 1050;
}

    .sah-filter-popover.wide {
        width: 560px;
        max-width: 90vw;
    }

.sah-filter-popover-header {
    font-weight: 700;
    color: #0f172a;
    font-size: .95rem;
    margin-bottom: 1rem;
}

.sah-filter-popover-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid #eef2f7;
}

.filter-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94a3b8;
    margin-bottom: .35rem;
    display: block;
}

.filter-clear-btn {
    background: transparent;
    border: none;
    color: #64748b;
    font-weight: 600;
    padding: .5rem .25rem;
    cursor: pointer;
}

    .filter-clear-btn:hover {
        color: #1f2937;
    }

.filter-apply-btn {
    background: var(--sah-primary);
    color: white;
    border: none;
    border-radius: 10px;
    padding: .6rem 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
}

    .filter-apply-btn:hover,
    .filter-apply-btn:focus,
    .filter-apply-btn:active {
        background: #0a3277 !important;
        color: white !important;
        box-shadow: 0 8px 20px rgba(11,59,140,.18) !important;
    }

@media (max-width: 768px) {
    .sah-filter-popover,
    .sah-filter-popover.wide {
        width: 92vw;
    }
}