@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

td {
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.emaillow {
    text-transform: lowercase !important;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    cursor: help;
}
.table-ellipsis {
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    cursor: help;
}
.table-responsive {
    overflow-x: auto;
    max-height: 300px;
    overflow-y: auto;
}
:root {
    --app-font-family: 'Plus Jakarta Sans', sans-serif;
}

html,
body{
    font-family: var(--app-font-family) !important;
}

body :where(
    div, main, section, article, aside, header, footer, nav,
    h1, h2, h3, h4, h5, h6, p, span, a, strong, small,
    label, input, textarea, select, option, button,
    table, thead, tbody, tfoot, tr, th, td,
    ul, ol, li, dl, dt, dd
) {
    font-family: var(--app-font-family) !important;
}

/* Date fields: calendar icon stays at the right edge. */
:is(
    #dob,
    #Call_Date,
    #Next_Follow,
    #closure,
    #followup_date,
    #edit_followup,
    #discussionDate,
    #nextMeeting,
    #closureDate,
    #discussiondate,
    #nextmeeting,
    #closuredate
) {
    padding-right: 42px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7ea8' d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h.5A1.5 1.5 0 0 1 15 2.5v11a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 13.5v-11A1.5 1.5 0 0 1 2.5 1H3V.5a.5.5 0 0 1 .5-.5M2 4v9.5a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5V4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px 18px;
}

/* Native date controls keep their browser calendar button at the right edge. */
input[type="date"],
input[type="datetime-local"] {
    padding-right: 12px;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    margin-left: auto;
    cursor: pointer;
}
td {
    font-size: 14px;
    max-width: 200px;
    white-space: nowrap;
}

.dashboard-topbar-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-left: auto;
    }

    @media (min-width: 768px) {
        .dashboard-topbar-actions .circle-avatar {
            display: none;
        }
    }
    @media (max-width: 768px) {
        .dashboard-welcome {
            display: none !important;
        }
    }


    .dashboard-welcome {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 15px;
        padding: 8px 14px;
        border: 1px solid #dbeafe;
        border-radius: 14px;
        background: linear-gradient(180deg, #f8fbff 0%, #edf4ff 100%);
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.08);
        text-align: right;
    }

    .dashboard-welcome .dashboard-welcome-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
        text-align: left;
    }

    .dashboard-welcome .dashboard-welcome-text small {
        color: #6b7ea8;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .dashboard-welcome .dashboard-welcome-text strong {
        color: #0f2044;
        font-size: .92rem;
        font-weight: 800;
        line-height: 1.2;
    }
.smooth-status-select {
    position: relative;
    width: 100%;
}

.smooth-status-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    opacity: 0;
    pointer-events: none;
}

.smooth-status-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 0 13px;
    border: 1.5px solid #d7e1f2;
    border-radius: 10px;
    background: #f8fbff;
    color: #172554;
    font: inherit;
    font-size: .88rem;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, border-radius .22s ease;
}

.smooth-status-trigger:hover {
    border-color: #aebfda;
    background: #fff;
}

.smooth-status-trigger:focus-visible,
.smooth-status-select.is-open .smooth-status-trigger {
    outline: none;
    border-color: #2563eb;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.smooth-status-select.is-open .smooth-status-trigger {
    border-radius: 10px 10px 7px 7px;
}

.smooth-status-label {
    color: #8290aa;
    font-weight: 600;
}

.smooth-status-label.has-value {
    color: #172554;
}

.smooth-status-trigger > i {
    color: #2563eb;
    transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}

.smooth-status-select.is-open .smooth-status-trigger > i {
    transform: rotate(180deg);
}

.smooth-status-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 10060;
    display: grid;
    padding: 6px;
    border: 1px solid rgba(37, 99, 235, .18);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.98);
    transform-origin: top;
    pointer-events: none;
    transition: opacity .2s ease, transform .24s cubic-bezier(.4, 0, .2, 1), visibility .2s ease;
}

.smooth-status-select.is-open .smooth-status-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.smooth-status-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #334155;
    font: inherit;
    font-size: .86rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: color .16s ease, background .16s ease, transform .16s ease;
}

.smooth-status-option:hover {
    background: #eff6ff;
    color: #1d4ed8;
    transform: translateX(2px);
}

.smooth-status-option i {
    color: #2563eb;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .16s ease, transform .16s ease;
}

.smooth-status-option.is-selected {
    background: #eef2ff;
    color: #1d4ed8;
}

.smooth-status-option.is-selected i {
    opacity: 1;
    transform: scale(1);
}

.followup-completion-fields:has(.smooth-status-select.is-open),
.course-followup-completion:has(.smooth-status-select.is-open) {
    max-height: 360px;
    overflow: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: capitalize;
}

/* Keep date-field text cursors unchanged; use a hand only inside date pickers. */
.ui-datepicker a,
.ui-datepicker button,
.ui-datepicker select,
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    cursor: pointer;
}