/* Small, separately maintained overrides for the shared cPanel stylesheet. */


/* =========================================================
   FORM ACTIONS
   ========================================================= */

.form-actions{
    display:flex;
    gap:10px;
    justify-content:flex-end;
    margin-top:24px;
}


/* =========================================================
   BUTTON SPINNER
   ========================================================= */

.button-spinner{
    display:inline-block;
    width:14px;
    height:14px;
    border:2px solid currentColor;
    border-right-color:transparent;
    border-radius:50%;
    animation:button-spin .7s linear infinite;
}

@keyframes button-spin{
    to{
        transform:rotate(360deg);
    }
}


/* =========================================================
   GENERIC HIDDEN
   ========================================================= */

.is-hidden{
    display:none!important;
}


/* =========================================================
   SIDEBAR SCROLL FIX
   ========================================================= */

.sidebar{
    height:100vh;
    max-height:100vh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.sidebar-top,
.profile-mini{
    flex:0 0 auto;
}

.side-nav{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;

    scrollbar-width:thin;
    scrollbar-color:rgba(13,71,161,.18) transparent;
}

.side-nav::-webkit-scrollbar{
    width:5px;
}

.side-nav::-webkit-scrollbar-track{
    background:transparent;
}

.side-nav::-webkit-scrollbar-thumb{
    background:rgba(13,71,161,.18);
    border-radius:999px;
}

.side-nav::-webkit-scrollbar-thumb:hover{
    background:rgba(13,71,161,.30);
}

.sidebar-bottom{
    flex:0 0 auto;
}


/* =========================================================
   DOSEDONE
   DAILY MEDICINE REMINDER MODULE
   ========================================================= */

.reminder-section{
    width:100%;
    margin:0 0 24px;
}

.reminder-section-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin:0 0 14px;
}

.reminder-section-heading .card-kicker{
    display:block;
    margin-bottom:5px;
}

.reminder-section-heading h2{
    margin:0 0 4px;
    color:var(--navy-deep);
    font-size:20px;
    line-height:1.25;
    font-weight:750;
    letter-spacing:-.55px;
}

.reminder-section-heading p{
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:1.5;
}


/* =========================================================
   REMINDER GRID
   ========================================================= */

.reminder-slots{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    width:100%;
}


/* =========================================================
   REMINDER CARD
   ========================================================= */

.reminder-slot{
    position:relative;
    min-width:0;
    overflow:hidden;

    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius);

    box-shadow:
        0 4px 16px rgba(23,57,93,.035);

    padding:17px;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease,
        background-color .18s ease;
}

.reminder-slot::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:3px;

    background:transparent;

    transition:
        background-color .18s ease;
}

.reminder-slot:hover{
    border-color:#d6e4ef;

    box-shadow:
        0 9px 26px rgba(23,57,93,.07);

    transform:translateY(-1px);
}

.reminder-slot.is-on{
    border-color:#c7e9ed;

    box-shadow:
        0 7px 22px rgba(0,188,212,.07);
}

.reminder-slot.is-on::before{
    background:var(--cyan);
}


/* =========================================================
   TOP ROW
   ========================================================= */

.reminder-slot-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    min-height:42px;
    margin-bottom:17px;
}


/* =========================================================
   SLOT ICON
   ========================================================= */

.reminder-slot-icon{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    flex:0 0 42px;

    background:var(--cyan-soft);
    color:var(--navy);

    border-radius:14px;

    transition:
        background-color .18s ease,
        color .18s ease,
        transform .18s ease;
}

.reminder-slot.is-on .reminder-slot-icon{
    background:
        linear-gradient(
            145deg,
            #e5f9fb,
            #d9f4f7
        );

    color:var(--navy);

    transform:scale(1.02);
}

.reminder-symbol{
    display:block;

    font-size:20px;
    line-height:1;

    font-weight:500;
}


/* =========================================================
   TOGGLE
   ========================================================= */

.reminder-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:flex-end;
    gap:7px;

    border:0;
    padding:0;

    background:transparent;

    color:var(--muted);

    font-size:10px;
    line-height:1;
    font-weight:800;

    letter-spacing:.55px;

    cursor:pointer;

    -webkit-tap-highlight-color:transparent;
}

.reminder-toggle:focus-visible{
    outline:3px solid rgba(0,188,212,.18);
    outline-offset:4px;
    border-radius:8px;
}

.reminder-toggle-track{
    position:relative;

    display:block;

    width:40px;
    height:23px;

    padding:3px;

    box-sizing:border-box;

    background:#dce5ef;

    border-radius:999px;

    transition:
        background-color .18s ease,
        box-shadow .18s ease;
}

.reminder-toggle-thumb{
    display:block;

    width:17px;
    height:17px;

    background:#ffffff;

    border-radius:50%;

    box-shadow:
        0 2px 5px rgba(0,0,0,.14);

    transform:translateX(0);

    transition:
        transform .18s ease;
}

.reminder-toggle.is-on{
    color:var(--navy);
}

.reminder-toggle.is-on .reminder-toggle-track{
    background:var(--cyan);

    box-shadow:
        0 3px 9px rgba(0,188,212,.18);
}

.reminder-toggle.is-on .reminder-toggle-thumb{
    transform:translateX(17px);
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.reminder-slot-content{
    min-width:0;
}

.reminder-slot-title-row{
    min-width:0;
}

.reminder-slot-content h3{
    margin:0 0 4px;

    color:var(--navy-deep);

    font-size:16px;
    line-height:1.3;

    font-weight:750;

    letter-spacing:-.35px;
}

.reminder-description{
    min-height:20px;

    margin:0;

    color:var(--muted);

    font-size:11px;
    line-height:1.45;
}


/* =========================================================
   TIME PANEL
   ========================================================= */

.reminder-time-panel{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:8px;

    min-width:0;
    min-height:78px;

    margin-top:15px;
    padding:11px;

    border:1px solid #edf2f7;
    border-radius:13px;

    background:#f9fbfd;

    transition:
        background-color .18s ease,
        border-color .18s ease;
}

.reminder-slot.is-on .reminder-time-panel{
    background:#f4fcfd;
    border-color:#dff4f6;
}

.reminder-time-info{
    min-width:0;
    width:100%;
}

.reminder-time-label{
    display:block;

    margin-bottom:4px;

    color:var(--muted);

    font-size:9px;
    line-height:1.2;

    font-weight:700;

    letter-spacing:.06em;
    text-transform:uppercase;
}


/*
 * Reminder numbers.
 *
 * Roboto gives the time values a cleaner,
 * more open and highly readable appearance.
 */

.reminder-time{
    display:block;

    width:100%;
    max-width:100%;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:var(--navy);

    font-family:
        Roboto,
        Arial,
        sans-serif;

    font-size:11px;
    line-height:1.35;

    font-weight:700;

    letter-spacing:.05px;

    font-variant-numeric:tabular-nums;
    font-feature-settings:"tnum" 1;
}

.reminder-frequency{
    display:block;

    margin-top:4px;

    color:var(--muted);

    font-size:9px;
    line-height:1.3;
}


/* =========================================================
   CHANGE BUTTON
   ========================================================= */

.reminder-change{
    flex:0 0 auto;

    border:0;
    padding:5px 0;

    background:transparent;

    color:var(--navy);

    font-size:10px;
    line-height:1;

    font-weight:800;

    cursor:pointer;

    transition:
        color .15s ease;
}

.reminder-change:hover{
    color:var(--cyan);
}

.reminder-change:focus-visible{
    outline:2px solid rgba(0,188,212,.25);
    outline-offset:3px;
    border-radius:4px;
}

.reminder-change[hidden]{
    display:none;
}


/* =========================================================
   OFF CARD
   ========================================================= */

.reminder-slot:not(.is-on) .reminder-time{
    color:#a5b2c2;
}

.reminder-slot:not(.is-on) .reminder-slot-icon{
    opacity:.9;
}


/* =========================================================
   MODAL
   ========================================================= */

body.reminder-modal-open{
    overflow:hidden;
}

.reminder-modal{
    position:fixed;
    inset:0;
    z-index:1000;

    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

    padding:24px;

    box-sizing:border-box;

    visibility:hidden;
    opacity:0;

    pointer-events:none;

    transition:
        opacity .20s ease,
        visibility .20s ease;
}

.reminder-modal.open{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
}

.reminder-modal-backdrop{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    background:rgba(8,46,110,.34);

    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);

    cursor:pointer;
}

.reminder-modal-dialog{
    position:relative;
    z-index:2;

    width:min(100%,540px);

    max-height:
        min(
            720px,
            calc(100vh - 48px)
        );

    margin:auto;

    padding:27px;

    overflow:hidden;

    box-sizing:border-box;

    background:rgba(255,255,255,.98);

    border:1px solid rgba(255,255,255,.85);

    border-radius:24px;

    box-shadow:
        0 28px 80px rgba(8,46,110,.22),
        0 8px 24px rgba(23,57,93,.10);

    transform:
        translateY(12px)
        scale(.97);

    opacity:0;

    transition:
        transform .24s cubic-bezier(.22,.8,.25,1),
        opacity .18s ease;
}

.reminder-modal.open .reminder-modal-dialog{
    transform:
        translateY(0)
        scale(1);

    opacity:1;
}


/* =========================================================
   MODAL CLOSE
   ========================================================= */

.reminder-modal-close{
    position:absolute;

    top:15px;
    right:15px;

    width:34px;
    height:34px;

    display:grid;
    place-items:center;

    border:0;
    border-radius:10px;

    background:#f2f6fa;

    color:var(--muted);

    font-size:22px;
    font-weight:300;
    line-height:1;

    cursor:pointer;

    transition:
        background-color .15s ease,
        color .15s ease,
        transform .15s ease;
}

.reminder-modal-close:hover{
    background:var(--cyan-soft);
    color:var(--navy);

    transform:rotate(4deg);
}

.reminder-modal-close:focus-visible{
    outline:3px solid rgba(0,188,212,.16);
    outline-offset:2px;
}


/* =========================================================
   MODAL ICON
   ========================================================= */

.reminder-modal-icon{
    width:48px;
    height:48px;

    display:grid;
    place-items:center;

    margin-bottom:16px;

    background:var(--cyan-soft);
    color:var(--navy);

    border-radius:15px;
}

.reminder-modal-icon .icon{
    width:21px;
    height:21px;
}


/* =========================================================
   MODAL HEADING
   ========================================================= */

.reminder-modal-dialog .card-kicker{
    display:block;
    margin-bottom:5px;
}

.reminder-modal-dialog h2{
    margin:0 45px 6px 0;

    color:var(--navy-deep);

    font-size:24px;
    line-height:1.2;

    font-weight:800;

    letter-spacing:-.65px;
}

.reminder-modal-description{
    margin:0;

    color:var(--muted);

    font-size:13px;
    line-height:1.55;
}


/* =========================================================
   SLOT SELECTOR
   ========================================================= */

.reminder-slot-selector{
    margin-top:20px;
}

.reminder-selector-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:10px;

    margin-bottom:9px;
}

.reminder-selector-heading span{
    color:var(--ink);

    font-size:12px;
    line-height:1.3;

    font-weight:800;
}

.reminder-selector-heading small{
    color:var(--muted);

    font-size:10px;
    line-height:1.3;
}


/* =========================================================
   TIME GRID
   ========================================================= */

.reminder-time-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:8px;

    max-height:300px;

    padding:2px;

    overflow-y:auto;
    overflow-x:hidden;

    scrollbar-width:thin;

    scrollbar-color:
        rgba(13,71,161,.18)
        transparent;
}

.reminder-time-grid::-webkit-scrollbar{
    width:5px;
}

.reminder-time-grid::-webkit-scrollbar-track{
    background:transparent;
}

.reminder-time-grid::-webkit-scrollbar-thumb{
    background:
        rgba(13,71,161,.18);

    border-radius:999px;
}

.reminder-time-grid::-webkit-scrollbar-thumb:hover{
    background:
        rgba(13,71,161,.30);
}


/* =========================================================
   TIME OPTION
   ========================================================= */

.reminder-time-option{
    position:relative;

    width:100%;
    min-width:0;

    box-sizing:border-box;

    display:flex !important;
    flex-direction:column !important;

    align-items:flex-start !important;
    justify-content:center !important;

    gap:3px !important;

    padding:11px 12px !important;

    appearance:none;
    -webkit-appearance:none;

    border:1px solid var(--line) !important;
    border-radius:12px !important;

    background:#ffffff !important;
    color:var(--ink) !important;

    font-family:
        Roboto,
        Arial,
        sans-serif !important;

    text-align:left !important;

    cursor:pointer;

    transition:
        border-color .16s ease,
        background-color .16s ease,
        transform .16s ease,
        box-shadow .16s ease;
}

.reminder-time-option:hover{
    border-color:#bfe8ed !important;
    background:#fbfeff !important;

    transform:translateY(-1px);
}

.reminder-time-option:focus-visible{
    outline:3px solid rgba(0,188,212,.15);
    outline-offset:1px;
}

.reminder-time-option.selected{
    border-color:var(--cyan) !important;
    background:var(--cyan-soft) !important;

    box-shadow:
        0 0 0 2px rgba(0,188,212,.10);
}

.reminder-time-option.selected::after{
    content:"✓";

    position:absolute;

    top:9px;
    right:10px;

    color:var(--navy);

    font-size:12px;
    line-height:1;

    font-weight:900;
}


/* =========================================================
   TIME OPTION NUMBERS
   ========================================================= */

.option-start{
    display:block !important;

    width:auto !important;
    max-width:calc(100% - 18px) !important;

    margin:0 !important;
    padding:0 !important;

    color:var(--navy) !important;

    font-family:
        Roboto,
        Arial,
        sans-serif !important;

    font-size:13px !important;
    line-height:1.25 !important;

    font-weight:700 !important;

    white-space:nowrap !important;

    font-variant-numeric:tabular-nums;
    font-feature-settings:"tnum" 1;
}

.option-end{
    display:block !important;

    margin:0 !important;
    padding:0 !important;

    color:var(--muted) !important;

    font-family:
        Roboto,
        Arial,
        sans-serif !important;

    font-size:10px !important;
    line-height:1.3 !important;

    font-weight:500 !important;

    white-space:nowrap !important;

    font-variant-numeric:tabular-nums;
    font-feature-settings:"tnum" 1;
}


/* =========================================================
   STICKY MODAL BOTTOM AREA
   ========================================================= */

.reminder-modal-bottom{
    position:relative;
    z-index:5;

    margin-top:12px;

    padding-top:12px;

    border-top:1px solid #edf2f7;

    background:rgba(255,255,255,.98);
}


/* =========================================================
   SELECTED PREVIEW
   ========================================================= */

.reminder-selected-preview{
    display:flex;
    align-items:center;

    gap:10px;

    padding:10px 12px;

    border:1px solid #e6f3f5;
    border-radius:12px;

    background:#f8fcfd;

    box-shadow:
        0 -4px 14px rgba(23,57,93,.025);
}

.selected-preview-icon{
    width:30px;
    height:30px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 30px;

    border-radius:9px;

    background:var(--cyan-soft);
    color:var(--navy);
}

.selected-preview-icon .icon{
    width:15px;
    height:15px;
}

.reminder-selected-preview span{
    display:block;

    margin-bottom:2px;

    color:var(--muted);

    font-size:9px;
    line-height:1.2;

    font-weight:700;

    text-transform:uppercase;
    letter-spacing:.05em;
}

.reminder-selected-preview strong{
    display:block;

    color:var(--navy);

    font-family:
        Roboto,
        Arial,
        sans-serif;

    font-size:12px;
    line-height:1.3;

    font-weight:700;

    font-variant-numeric:tabular-nums;
    font-feature-settings:"tnum" 1;
}


/* =========================================================
   MODAL ACTIONS
   ========================================================= */

.reminder-modal-actions{
    display:flex;

    align-items:center;
    justify-content:flex-end;

    gap:12px;

    min-height:44px;

    margin-top:9px;
}

.reminder-auto-save{
    margin-right:auto;

    color:var(--muted);

    font-size:10px;
    line-height:1.3;

    font-weight:600;
}

.reminder-modal-actions .button{
    min-height:40px;
}

.reminder-modal-actions .button:disabled{
    opacity:.45;
    cursor:not-allowed;
    transform:none;
}


/* =========================================================
   DASHBOARD TOAST
   ========================================================= */

.dashboard-toast{
    position:fixed;

    top:20px;
    right:22px;

    z-index:1200;

    display:flex;
    align-items:center;

    gap:11px;

    min-width:250px;
    max-width:370px;

    padding:12px 14px;

    box-sizing:border-box;

    border:1px solid rgba(255,255,255,.85);
    border-radius:13px;

    background:rgba(255,255,255,.97);

    box-shadow:
        0 16px 40px rgba(8,46,110,.16),
        0 3px 10px rgba(23,57,93,.08);

    color:var(--ink);

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    transform:
        translateY(-10px)
        translateX(8px);

    transition:
        opacity .22s ease,
        transform .22s cubic-bezier(.22,.8,.25,1),
        visibility 0s linear .22s;
}

.dashboard-toast.show{
    opacity:1;

    visibility:visible;

    transform:
        translateY(0)
        translateX(0);

    transition:
        opacity .22s ease,
        transform .22s cubic-bezier(.22,.8,.25,1),
        visibility 0s linear 0s;
}

.dashboard-toast-icon{
    width:32px;
    height:32px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 32px;

    border-radius:10px;

    background:var(--cyan-soft);
    color:var(--navy);
}

.dashboard-toast-icon .icon{
    width:16px;
    height:16px;
}

.dashboard-toast-content{
    min-width:0;
}

.dashboard-toast-title{
    display:block;

    margin-bottom:2px;

    color:var(--ink);

    font-size:12px;
    line-height:1.25;

    font-weight:800;
}

.dashboard-toast-message{
    display:block;

    color:var(--muted);

    font-size:11px;
    line-height:1.35;
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media(max-width:1100px){

    .reminder-slots{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media(max-width:620px){

    .reminder-section{
        margin-bottom:18px;
    }

    .reminder-section-heading{
        margin-bottom:12px;
    }

    .reminder-section-heading h2{
        font-size:18px;
    }

    .reminder-section-heading p{
        font-size:12px;
    }

    .reminder-slots{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:10px;
    }

    .reminder-slot{
        padding:13px;
        border-radius:16px;
    }

    .reminder-slot-top{
        min-height:36px;
        margin-bottom:13px;
    }

    .reminder-slot-icon{
        width:36px;
        height:36px;
        flex-basis:36px;
        border-radius:12px;
    }

    .reminder-symbol{
        font-size:17px;
    }

    .reminder-toggle{
        gap:4px;
        font-size:8px;
        letter-spacing:.35px;
    }

    .reminder-toggle-track{
        width:34px;
        height:20px;
        padding:3px;
    }

    .reminder-toggle-thumb{
        width:14px;
        height:14px;
    }

    .reminder-toggle.is-on .reminder-toggle-thumb{
        transform:translateX(14px);
    }

    .reminder-slot-content h3{
        font-size:14px;
    }

    .reminder-description{
        min-height:28px;
        font-size:10px;
        line-height:1.4;
    }

    .reminder-time-panel{
        min-height:72px;
        margin-top:11px;
        padding:9px;
    }

    .reminder-time-label{
        font-size:8px;
    }

    .reminder-time{
        font-size:10px;
        letter-spacing:0;
    }

    .reminder-frequency{
        margin-top:3px;
        font-size:8px;
    }

    .reminder-change{
        padding:4px 0;
        font-size:9px;
    }


    /* Bottom-sheet modal */

    .reminder-modal{
        align-items:flex-end;
        padding:0;
    }

    .reminder-modal-dialog{
        width:100%;

        max-height:90vh;

        padding:23px 18px 0;

        border-radius:
            24px 24px 0 0;

        transform:
            translateY(30px)
            scale(1);
    }

    .reminder-modal.open .reminder-modal-dialog{
        transform:
            translateY(0)
            scale(1);
    }

    .reminder-modal-icon{
        width:44px;
        height:44px;
        margin-bottom:15px;
        border-radius:13px;
    }

    .reminder-modal-dialog h2{
        font-size:22px;
    }

    .reminder-modal-description{
        margin-bottom:20px;
    }

    .reminder-time-grid{
        max-height:270px;
    }

    .reminder-time-option{
        padding:10px !important;
    }

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

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

    .reminder-modal-bottom{
        margin-left:-18px;
        margin-right:-18px;

        padding:
            10px 18px
            calc(18px + env(safe-area-inset-bottom));

        box-shadow:
            0 -8px 24px rgba(23,57,93,.06);
    }

    .reminder-auto-save{
        font-size:9px;
    }

    .dashboard-toast{
        top:12px;
        right:12px;
        left:12px;

        min-width:0;
        max-width:none;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media(max-width:360px){

    .reminder-slots{
        gap:8px;
    }

    .reminder-slot{
        padding:11px;
    }

    .reminder-slot-top{
        gap:5px;
    }

    .reminder-slot-content h3{
        font-size:13px;
    }

    .reminder-time{
        font-size:9px;
    }

    .reminder-frequency{
        font-size:8px;
    }

    .reminder-toggle-label{
        display:none;
    }

    .reminder-time-panel{
        padding:8px;
    }

    .reminder-auto-save{
        font-size:8px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    .reminder-slot,
    .reminder-slot-icon,
    .reminder-toggle-track,
    .reminder-toggle-thumb,
    .reminder-modal,
    .reminder-modal-dialog,
    .reminder-time-option,
    .dashboard-toast{
        transition:none!important;
    }

}