*, *::before, *::after
        {
            margin: 0;
            padding: 0;
            box-sizing: border-box
        }

        :root
        {
            --sb-exp: 196px;
            --sb-col: 56px;
            --sb-bg: #2d3561;
            --sb-hov: rgba(255,255,255,.1);
            --sb-act: rgba(255,255,255,.15);
            --top-bg: #fff;
            --page-bg: #f0f2f7;
            --card-bg: #fff;
            --card-sh: 0 2px 14px rgba(0,0,0,.07);
            --border: #e4e8f0;
            --text-d: #1e2340;
            --text-m: #4a5568;
            --text-l: #8898aa;
            --p: #2e4f8b;
            --ph: #1e3a72;
            --ay: #5674a8;
            --ayh: #3d5a8e;
            --danger: #dc2626;
            --dangerh: #b91c1c;
            --success: #22c55e;
            --warn: #f59e0b;
            --tr: .22s ease;
        }

        body
        {
            font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
            background: var(--page-bg);
            color: var(--text-d);
            min-height: 100vh;
            display: flex
        }

        /* LOGIN */
        .login-view
        {
            position: fixed;
            inset: 0;
            background: linear-gradient(135deg,#2d3561,#1a2049);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999
        }

        .login-card
        {
            background: #fff;
            border-radius: 18px;
            box-shadow: 0 28px 70px rgba(0,0,0,.35);
            padding: 44px 42px;
            width: 100%;
            max-width: 420px
        }

        .login-logo
        {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            font-size: 21px;
            font-weight: 800;
            color: var(--p);
            margin-bottom: 26px
        }

            .login-logo i
            {
                font-size: 30px
            }

        .login-title
        {
            font-size: 22px;
            font-weight: 700;
            color: var(--text-d);
            text-align: center;
            margin-bottom: 5px
        }

        .login-sub
        {
            font-size: 13px;
            color: var(--text-l);
            text-align: center;
            margin-bottom: 26px
        }

        .login-err
        {
            background: rgba(220,38,38,.08);
            border: 1px solid rgba(220,38,38,.25);
            color: #dc2626;
            border-radius: 8px;
            padding: 10px 14px;
            font-size: 13px;
            margin-bottom: 14px;
            display: none
        }

        .login-field
        {
            display: flex;
            flex-direction: column;
            gap: 5px;
            margin-bottom: 14px
        }

            .login-field label
            {
                font-size: 12.5px;
                font-weight: 600;
                color: var(--text-m);
                text-transform: uppercase;
                letter-spacing: .4px
            }

        .pw-wrap
        {
            position: relative
        }

            .pw-wrap .fi
            {
                width: 100%;
                padding-right: 42px
            }

        .pw-eye
        {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: var(--text-l);
            cursor: pointer;
            font-size: 14px
        }

        .btn-login
        {
            width: 100%;
            padding: 13px;
            background: var(--p);
            color: #fff;
            border: none;
            border-radius: 9px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            margin-top: 8px;
            transition: background .15s
        }

            .btn-login:hover
            {
                background: var(--ph)
            }

            .btn-login:disabled
            {
                opacity: .6;
                cursor: not-allowed
            }

        /* SIDEBAR */
        .app-view
        {
            flex: 1;
            display: flex;
            min-height: 100vh
        }

        .sidebar
        {
            width: var(--sb-exp);
            min-height: 100vh;
            background: var(--sb-bg);
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            position: sticky;
            top: 0;
            height: 100vh;
            overflow: hidden;
            transition: width var(--tr)
        }

            .sidebar.col
            {
                width: var(--sb-col)
            }

        .sb-logo
        {
            padding: 18px 16px;
            color: #fff;
            font-size: 15px;
            font-weight: 700;
            border-bottom: 1px solid rgba(255,255,255,.08);
            white-space: nowrap;
            overflow: hidden;
            display: flex;
            align-items: center;
            gap: 10px
        }

            .sb-logo i
            {
                font-size: 17px;
                flex-shrink: 0;
                color: rgba(255,255,255,.75)
            }

        .sb-logo-txt
        {
            transition: opacity var(--tr);
            letter-spacing: 2px
        }

        .sidebar.col .sb-logo-txt
        {
            opacity: 0;
            pointer-events: none
        }

        .sb-nav
        {
            padding: 10px 0;
            flex: 1
        }

        .nav-item
        {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 11px 18px;
            color: rgba(255,255,255,.65);
            font-size: 13.5px;
            cursor: pointer;
            text-decoration: none;
            transition: background .15s,color .15s;
            white-space: nowrap;
            overflow: hidden
        }

            .nav-item:hover
            {
                background: var(--sb-hov);
                color: #fff
            }

            .nav-item.active
            {
                background: var(--sb-act);
                color: #fff
            }

            .nav-item i
            {
                font-size: 14px;
                width: 18px;
                text-align: center;
                flex-shrink: 0
            }

        .nav-lbl
        {
            transition: opacity var(--tr)
        }

        .sidebar.col .nav-lbl
        {
            opacity: 0;
            pointer-events: none
        }

        .sb-toggle
        {
            padding: 14px 0;
            display: flex;
            justify-content: center;
            border-top: 1px solid rgba(255,255,255,.08)
        }

        .btn-tog
        {
            background: rgba(255,255,255,.1);
            border: none;
            color: rgba(255,255,255,.65);
            width: 32px;
            height: 32px;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            transition: background .15s,color .15s
        }

            .btn-tog:hover
            {
                background: rgba(255,255,255,.2);
                color: #fff
            }

        /* PAGE */
        .page-wrap
        {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            overflow: hidden
        }

        .topbar
        {
            background: var(--top-bg);
            border-bottom: 1px solid var(--border);
            height: 56px;
            display: flex;
            align-items: center;
            padding: 0 24px;
            gap: 14px;
            flex-shrink: 0
        }

        .topbar-conn
        {
            display: flex;
            align-items: center;
            gap: 7px;
            font-size: 13px;
            color: var(--text-l);
            margin-right: auto
        }

        .conn-dot
        {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--danger);
            transition: background .3s,box-shadow .3s
        }

            .conn-dot.on
            {
                background: var(--success);
                box-shadow: 0 0 6px rgba(34,197,94,.5)
            }

        .btn-sim
        {
            background: var(--p);
            color: #fff;
            border: none;
            padding: 7px 15px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: background .15s
        }

            .btn-sim:hover
            {
                background: var(--ph)
            }

        .user-menu
        {
            position: relative
        }

        .user-trig
        {
            display: flex;
            align-items: center;
            gap: 9px;
            cursor: pointer;
            padding: 6px 8px;
            border-radius: 8px;
            transition: background .15s;
            -webkit-user-select: none;
            user-select: none
        }

            .user-trig:hover
            {
                background: #f1f3f7
            }

        .user-name
        {
            font-size: 13.5px;
            color: var(--text-m);
            font-weight: 500
        }

        .user-av
        {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: var(--p);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 700;
            flex-shrink: 0
        }

        .user-chev
        {
            font-size: 10px;
            color: var(--text-l);
            transition: transform .2s
        }

        .user-menu.open .user-chev
        {
            transform: rotate(180deg)
        }

        .user-dd
        {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 10px;
            box-shadow: 0 8px 30px rgba(0,0,0,.12);
            min-width: 180px;
            z-index: 500;
            overflow: hidden;
            opacity: 0;
            pointer-events: none;
            transform: translateY(-6px);
            transition: opacity .18s,transform .18s
        }

        .user-menu.open .user-dd
        {
            opacity: 1;
            pointer-events: all;
            transform: translateY(0)
        }

        .dd-head
        {
            padding: 12px 16px 10px;
            border-bottom: 1px solid var(--border)
        }

        .dd-name
        {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-d)
        }

        .dd-role
        {
            font-size: 11px;
            color: var(--text-l);
            margin-top: 2px
        }

        .dd-item
        {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            font-size: 13px;
            color: var(--text-m);
            cursor: pointer;
            transition: background .12s;
            border: none;
            width: 100%;
            background: none;
            text-align: left
        }

            .dd-item:hover
            {
                background: #f5f7fb;
                color: var(--text-d)
            }

            .dd-item i
            {
                width: 14px;
                text-align: center;
                color: var(--text-l)
            }

        .dd-div
        {
            height: 1px;
            background: var(--border);
            margin: 2px 0
        }

        .dd-item.red
        {
            color: var(--danger)
        }

            .dd-item.red i
            {
                color: var(--danger)
            }

            .dd-item.red:hover
            {
                background: rgba(220,38,38,.06)
            }

        /* CONTENT */
        .content
        {
            flex: 1;
            display: flex;
            padding: 26px;
            gap: 22px;
            overflow-y: auto;
            align-items: flex-start
        }

        .screen
        {
            display: flex;
            flex: 1;
            gap: 22px;
            min-width: 0
        }

            .screen.col-1
            {
                flex-direction: column
            }

        /* CALL PANEL */
        .call-panel
        {
            width: 460px;
            min-width: 360px;
            flex-shrink: 0
        }

        .call-card
        {
            background: var(--card-bg);
            border-radius: 14px;
            box-shadow: var(--card-sh);
            overflow: hidden
        }

        .call-empty
        {
            padding: 72px 28px;
            text-align: center;
            color: var(--text-l)
        }

            .call-empty i
            {
                font-size: 50px;
                opacity: .15;
                display: block;
                margin-bottom: 16px
            }

        .pt-info
        {
            padding: 32px 28px 24px;
            text-align: center
        }

        .pt-lbl
        {
            font-size: 17px;
            font-weight: 700;
            color: var(--text-d);
            margin-bottom: 8px
        }

        .pt-name
        {
            font-size: 22px;
            font-weight: 600;
            color: var(--text-d);
            margin-bottom: 20px
        }

        .pt-phone
        {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            font-size: 22px;
            font-weight: 700;
            color: var(--text-d);
            margin-bottom: 22px
        }

            .pt-phone i
            {
                color: var(--success);
                font-size: 26px
            }

        .med-box
        {
            background: #f5f7fb;
            border-radius: 10px;
            padding: 16px 18px;
            margin-bottom: 24px
        }

        .med-lbl
        {
            font-size: 14px;
            font-weight: 700;
            color: var(--text-d);
            margin-bottom: 5px
        }

        .med-name
        {
            font-size: 16px;
            color: #3b82f6;
            font-weight: 500
        }

        .pt-acts
        {
            display: flex;
            flex-direction: column;
            gap: 12px
        }

        .btn-act
        {
            width: 100%;
            padding: 15px 18px;
            background: var(--p);
            color: #fff;
            border: none;
            border-radius: 9px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: background .15s
        }

            .btn-act:hover
            {
                background: var(--ph)
            }

            .btn-act.sec
            {
                background: var(--ay)
            }

                .btn-act.sec:hover
                {
                    background: var(--ayh)
                }

        .pt-unk
        {
            font-size: 15px;
            color: var(--text-l);
            font-style: italic;
            margin-bottom: 16px
        }

        .pt-warn
        {
            background: #fef9c3;
            color: #92400e;
            border-radius: 9px;
            padding: 14px 16px;
            font-size: 13px;
            text-align: left;
            margin-bottom: 18px
        }

        .call-ts
        {
            padding: 10px 28px 18px;
            text-align: center;
            font-size: 12px;
            color: var(--text-l)
        }

        /* HISTORY */
        .hist-panel
        {
            flex: 1;
            min-width: 0
        }

        .hist-card
        {
            background: var(--card-bg);
            border-radius: 14px;
            box-shadow: var(--card-sh);
            overflow: hidden
        }

        .hist-head
        {
            padding: 22px 26px 0
        }

        .hist-title
        {
            font-size: 20px;
            font-weight: 700;
            color: var(--text-d);
            margin-bottom: 16px
        }

        .srch-wrap
        {
            position: relative;
            margin-bottom: 6px
        }

            .srch-wrap i
            {
                position: absolute;
                left: 13px;
                top: 50%;
                transform: translateY(-50%);
                color: var(--text-l);
                font-size: 14px;
                pointer-events: none
            }

            .srch-wrap input
            {
                width: 360px;
                padding: 10px 13px 10px 38px;
                border: 1px solid var(--border);
                border-radius: 9px;
                font-size: 14px;
                background: #f9fafb;
                color: var(--text-d);
                outline: none;
                transition: border-color .15s
            }

                .srch-wrap input:focus
                {
                    border-color: #93afd4;
                    background: #fff
                }

        .hist-empty
        {
            padding: 48px 26px;
            text-align: center;
            color: var(--text-l);
            font-size: 14px
        }

        .ht-wrap
        {
            overflow-x: auto
        }

        table.ht
        {
            width: 100%;
            border-collapse: collapse
        }

        .ht thead th
        {
            padding: 13px 18px;
            font-size: 13px;
            font-weight: 700;
            color: var(--text-d);
            text-align: left;
            border-bottom: 2px solid var(--border);
            white-space: nowrap
        }

            .ht thead th.r
            {
                text-align: right
            }

        .ht tbody tr
        {
            border-bottom: 1px solid #f0f2f7;
            transition: background .12s
        }

            .ht tbody tr:hover
            {
                background: #f8fafd
            }

            .ht tbody tr:last-child
            {
                border-bottom: none
            }

            .ht tbody tr.row-new
            {
                animation: rowFlash 1.5s ease-out
            }

        @keyframes rowFlash
        {
            from
            {
                background: rgba(34,197,94,.14)
            }

            to
            {
                background: transparent
            }
        }

        .ht td
        {
            padding: 14px 18px;
            font-size: 13.5px;
            color: var(--text-m);
            vertical-align: middle
        }

        .td-dt
        {
            white-space: nowrap;
            font-size: 12.5px
        }

        .td-pt
        {
            font-weight: 600;
            color: var(--text-d)
        }

        .td-ph
        {
            font-family: 'SF Mono',Consolas,monospace;
            font-size: 13px;
            white-space: nowrap
        }

        .td-act
        {
            text-align: right
        }

        .td-act-in
        {
            display: flex;
            gap: 6px;
            align-items: center;
            justify-content: flex-end;
            flex-wrap: wrap
        }

        .btn-h
        {
            padding: 7px 11px;
            border: none;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            transition: background .15s;
            display: flex;
            align-items: center;
            gap: 4px
        }

            .btn-h.blue
            {
                background: var(--p);
                color: #fff
            }

                .btn-h.blue:hover
                {
                    background: var(--ph)
                }

            .btn-h.teal
            {
                background: var(--ay);
                color: #fff
            }

                .btn-h.teal:hover
                {
                    background: var(--ayh)
                }

            .btn-h.green
            {
                background: #16a34a;
                color: #fff
            }

                .btn-h.green:hover
                {
                    background: #15803d
                }

            .btn-h:disabled
            {
                opacity: .4;
                cursor: not-allowed
            }

        /* CUSTOM DATEPICKER */
        .dp-popup
        {
            position: fixed;
            z-index: 9999;
            background: #fff;
            border: 1.5px solid var(--border);
            border-radius: 14px;
            box-shadow: 0 10px 40px rgba(0,0,0,.18);
            padding: 16px;
            width: 280px;
            display: none;
            -webkit-user-select: none;
            user-select: none
        }

        .dp-hdr
        {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px
        }

        .dp-nav
        {
            background: none;
            border: 1.5px solid var(--border);
            border-radius: 7px;
            width: 30px;
            height: 30px;
            cursor: pointer;
            font-size: 18px;
            color: var(--text-m);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .12s;
            padding: 0;
            line-height: 1
        }

            .dp-nav:hover
            {
                background: #f1f3f7
            }

        .dp-my
        {
            font-weight: 700;
            font-size: 14px;
            color: var(--text-d);
            cursor: pointer;
            padding: 3px 10px;
            border-radius: 6px;
            transition: background .12s
        }

            .dp-my:hover
            {
                background: #f1f3f7
            }

        .dp-manual
        {
            margin-bottom: 12px
        }

        .dp-manual-input
        {
            width: 100%;
            padding: 8px 10px;
            border: 1.5px solid var(--border);
            border-radius: 7px;
            font-size: 13px;
            text-align: center;
            letter-spacing: .5px;
            color: var(--text-d);
            font-family: inherit
        }

            .dp-manual-input:focus
            {
                outline: none;
                border-color: var(--p);
                box-shadow: 0 0 0 3px rgba(46,79,139,.1)
            }

            .dp-manual-input.err
            {
                border-color: var(--danger)
            }

        .dp-cell
        {
            width: 100%;
            padding: 11px 4px;
            border: none;
            border-radius: 7px;
            font-size: 12.5px;
            cursor: pointer;
            color: var(--text-d);
            background: none;
            transition: background .1s
        }

            .dp-cell:hover:not(.dp-dis)
            {
                background: #f0f4fb
            }

        .dp-grid.dp-grid-4
        {
            grid-template-columns: repeat(4,1fr);
            gap: 6px
        }

        .dp-wk
        {
            display: grid;
            grid-template-columns: repeat(7,1fr);
            text-align: center;
            margin-bottom: 6px
        }

            .dp-wk span
            {
                font-size: 11px;
                font-weight: 700;
                color: var(--text-l);
                padding: 4px 0
            }

        .dp-grid
        {
            display: grid;
            grid-template-columns: repeat(7,1fr);
            gap: 2px
        }

        .dp-day
        {
            width: 100%;
            aspect-ratio: 1;
            border: none;
            border-radius: 7px;
            font-size: 12.5px;
            cursor: pointer;
            color: var(--text-d);
            background: none;
            transition: background .1s;
            display: flex;
            align-items: center;
            justify-content: center
        }

            .dp-day:hover:not(.dp-dis)
            {
                background: #f0f4fb
            }

        .dp-today
        {
            color: var(--p);
            font-weight: 700
        }

        .dp-sel
        {
            background: var(--p) !important;
            color: #fff !important;
            font-weight: 700
        }

        .dp-dis
        {
            color: var(--text-l);
            opacity: .35;
            pointer-events: none
        }

        .dp-trigger
        {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            border: 1.5px solid var(--border);
            border-radius: 8px;
            background: #fff;
            cursor: pointer;
            transition: border-color .15s,box-shadow .15s
        }

            .dp-trigger:hover
            {
                border-color: #93afd4
            }

            .dp-trigger.dp-open
            {
                border-color: var(--p);
                box-shadow: 0 0 0 3px rgba(46,79,139,.1)
            }

            .dp-trigger.dp-trigger-dis
            {
                opacity: .5;
                cursor: not-allowed;
                background: #f5f7fb
            }

            .dp-trigger i
            {
                color: var(--p);
                font-size: 15px;
                flex-shrink: 0
            }

        .dp-display
        {
            font-size: 14px;
            color: var(--text-d);
            flex: 1
        }

            .dp-display.ph
            {
                color: var(--text-l)
            }

        /* MODALS */
        .mo
        {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,.44);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transition: opacity .2s
        }

            .mo.open
            {
                opacity: 1;
                pointer-events: all
            }

        .md
        {
            background: #fff;
            border-radius: 14px;
            box-shadow: 0 20px 60px rgba(0,0,0,.2);
            width: 94%;
            max-width: fit-content;
            max-height: 88vh;
            display: flex;
            flex-direction: column;
            transform: translateY(14px);
            transition: transform .2s
        }

        .mo.open .md
        {
            transform: translateY(0)
        }

        .md-hd
        {
            padding: 20px 26px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0
        }

            .md-hd h3
            {
                font-size: 17px;
                font-weight: 700;
                color: var(--text-d);
                margin: 0;
                display: flex;
                align-items: center;
                gap: 9px
            }

                .md-hd h3 i
                {
                    color: var(--p)
                }

        .md-cls
        {
            background: none;
            border: none;
            color: var(--text-l);
            cursor: pointer;
            font-size: 19px;
            padding: 4px;
            line-height: 1;
            transition: color .15s
        }

            .md-cls:hover
            {
                color: var(--text-d)
            }

        .md-bd
        {
            padding: 22px 26px;
            overflow-y: auto;
            flex: 1
        }

        .md-ft
        {
            padding: 16px 26px;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            flex-shrink: 0
        }

        /* FORMS */
        .fg
        {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px
        }

            .fg .full
            {
                grid-column: 1/-1
            }

        .ff
        {
            display: flex;
            flex-direction: column;
            gap: 5px
        }

            .ff label
            {
                font-size: 12.5px;
                font-weight: 600;
                color: var(--text-m);
                text-transform: uppercase;
                letter-spacing: .4px
            }

                .ff label .req
                {
                    color: var(--danger);
                    margin-left: 2px
                }

        .fi
        {
            padding: 10px 13px;
            border: 1.5px solid var(--border);
            border-radius: 8px;
            font-size: 14px;
            color: var(--text-d);
            background: #fff;
            outline: none;
            transition: border-color .15s,box-shadow .15s;
            font-family: inherit;
            width: 100%
        }

            .fi:focus
            {
                border-color: var(--p);
                box-shadow: 0 0 0 3px rgba(46,79,139,.1)
            }

        .fsel, .fta
        {
            padding: 10px 13px;
            border: 1.5px solid var(--border);
            border-radius: 8px;
            font-size: 14px;
            color: var(--text-d);
            background: #fff;
            outline: none;
            transition: border-color .15s,box-shadow .15s;
            font-family: inherit;
            width: 100%
        }

            .fsel:focus, .fta:focus
            {
                border-color: var(--p);
                box-shadow: 0 0 0 3px rgba(46,79,139,.1)
            }

            .fi.err, .fsel.err
            {
                border-color: var(--danger)
            }

        .ferr
        {
            font-size: 12px;
            color: var(--danger);
            margin-top: 2px;
            display: none
        }

            .ferr.show
            {
                display: block
            }

        .fta
        {
            min-height: 72px;
            resize: vertical
        }

        .btn-cancel
        {
            padding: 10px 22px;
            background: #f1f3f7;
            color: var(--text-m);
            border: 1px solid var(--border);
            border-radius: 7px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: background .15s
        }

            .btn-cancel:hover
            {
                background: #e4e8f0
            }

        .btn-submit
        {
            padding: 10px 24px;
            background: var(--p);
            color: #fff;
            border: none;
            border-radius: 7px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: background .15s
        }

            .btn-submit:hover
            {
                background: var(--ph)
            }

            .btn-submit:disabled
            {
                opacity: .5;
                cursor: not-allowed
            }

        .btn-danger-sm
        {
            padding: 10px 20px;
            background: var(--danger);
            color: #fff;
            border: none;
            border-radius: 7px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: background .15s
        }

            .btn-danger-sm:hover
            {
                background: var(--dangerh)
            }

        /* PATIENT BANNER */
        .pt-banner
        {
            background: linear-gradient(135deg,#2e4f8b,#3d6bb5);
            color: #fff;
            border-radius: 10px;
            padding: 14px 18px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 14px
        }

        .pt-banner-ico
        {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: rgba(255,255,255,.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 17px;
            flex-shrink: 0
        }

        .pt-banner-name
        {
            font-size: 16px;
            font-weight: 700
        }

        .pt-banner-ph
        {
            font-size: 13px;
            opacity: .8;
            margin-top: 2px
        }

        /* TIME SLOTS */
        .time-grid
        {
            display: grid;
            grid-template-columns: repeat(6,1fr);
            gap: 6px;
            margin-top: 4px
        }

        .ts
        {
            padding: 7px 4px;
            border: 1.5px solid var(--border);
            border-radius: 7px;
            font-size: 12.5px;
            font-weight: 500;
            text-align: center;
            cursor: pointer;
            color: var(--text-m);
            transition: border-color .15s,background .15s,color .15s
        }

            .ts:hover
            {
                border-color: var(--p);
                color: var(--p);
                background: #f0f4fb
            }

            .ts.sel
            {
                border-color: var(--p);
                background: var(--p);
                color: #fff
            }

            .ts:disabled
            {
                cursor: not-allowed;
                opacity: .4;
                text-decoration: line-through;
                background: #f5f7fb
            }

            .ts:disabled:hover
            {
                border-color: var(--border);
                color: var(--text-m);
                background: #f5f7fb
            }

        .rdv-slot-hint
        {
            grid-column: 1/-1;
            padding: 14px 4px;
            text-align: center;
            color: var(--text-l);
            font-size: 13px
        }

        .sec-lbl
        {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-l);
            text-transform: uppercase;
            letter-spacing: .5px;
            margin: 18px 0 10px
        }

        /* APPOINTMENTS TABLE */
        .appt-tbl
        {
            width: 100%;
            border-collapse: collapse
        }

            .appt-tbl th
            {
                padding: 8px 12px;
                font-size: 11.5px;
                font-weight: 700;
                color: var(--text-l);
                text-align: left;
                border-bottom: 1px solid var(--border);
                text-transform: uppercase;
                letter-spacing: .5px
            }

            .appt-tbl td
            {
                padding: 10px 12px;
                font-size: 13.5px;
                border-bottom: 1px solid #f0f2f7;
                color: var(--text-m);
                vertical-align: middle
            }

            .appt-tbl tr:last-child td
            {
                border-bottom: none
            }

        .badge
        {
            padding: 3px 9px;
            border-radius: 5px;
            font-size: 12px;
            font-weight: 600
        }

            .badge.effectue
            {
                background: rgba(34,197,94,.12);
                color: #16a34a
            }

            .badge.annule
            {
                background: rgba(239,68,68,.12);
                color: #dc2626
            }

            .badge.prevu
            {
                background: rgba(59,130,246,.12);
                color: #2563eb
            }

        .sel-st
        {
            padding: 5px 8px;
            border: 1.5px solid var(--border);
            border-radius: 6px;
            font-size: 12px;
            background: #fff;
            color: var(--text-d);
            cursor: pointer;
            outline: none
        }

            .sel-st:focus
            {
                border-color: var(--p)
            }

        .appt-acts
        {
            display: flex;
            gap: 6px;
            justify-content: flex-end
        }

        .btn-ico
        {
            width: 30px;
            height: 30px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            transition: background .15s
        }

            .btn-ico.edit
            {
                background: #eef4ff;
                color: var(--p)
            }

                .btn-ico.edit:hover
                {
                    background: #dce8ff
                }

            .btn-ico.del
            {
                background: #fef2f2;
                color: var(--danger)
            }

                .btn-ico.del:hover
                {
                    background: #fee2e2
                }

        /* FAMILY MEMBERS */
        .ay-row
        {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 11px 0;
            border-bottom: 1px solid #f0f2f7
        }

            .ay-row:last-child
            {
                border-bottom: none
            }

        .ay-av
        {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: var(--ay);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 700;
            flex-shrink: 0
        }

        .ay-info
        {
            flex: 1
        }

        .ay-name
        {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-d)
        }

        .ay-lien
        {
            font-size: 12px;
            color: var(--text-l);
            margin-top: 1px
        }

        .ay-ph
        {
            font-size: 13px;
            font-family: monospace;
            color: var(--text-m)
        }

        .ay-edit-row
        {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr auto auto;
            gap: 8px;
            align-items: center;
            padding: 10px;
            background: #f9fafb;
            border-radius: 9px;
            border: 1px solid var(--border);
            margin: 4px 0
        }

            .ay-edit-row input, .ay-edit-row select
            {
                padding: 7px 10px;
                border: 1.5px solid var(--border);
                border-radius: 6px;
                font-size: 13px;
                color: var(--text-d);
                background: #fff;
                outline: none;
                font-family: inherit
            }

                .ay-edit-row input:focus, .ay-edit-row select:focus
                {
                    border-color: var(--p)
                }

        .btn-ay-save
        {
            padding: 7px 14px;
            background: var(--p);
            color: #fff;
            border: none;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer
        }

        .btn-ay-cancel
        {
            padding: 7px 10px;
            background: #e5e7eb;
            color: var(--text-m);
            border: none;
            border-radius: 6px;
            font-size: 13px;
            cursor: pointer
        }

        /* FAMILY ROWS IN NEW PATIENT */
        .fam-sec
        {
            margin-top: 20px
        }

        .fam-sec-ttl
        {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-m);
            text-transform: uppercase;
            letter-spacing: .5px;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 10px
        }

            .fam-sec-ttl::after
            {
                content: '';
                flex: 1;
                height: 1px;
                background: var(--border)
            }

        .fam-row
        {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr auto;
            gap: 10px;
            align-items: end;
            margin-bottom: 10px;
            padding: 12px 14px;
            background: #f9fafb;
            border-radius: 9px;
            border: 1px solid var(--border)
        }

            .fam-row input, .fam-row select
            {
                padding: 9px 11px;
                border: 1.5px solid var(--border);
                border-radius: 7px;
                font-size: 13.5px;
                color: var(--text-d);
                background: #fff;
                outline: none;
                font-family: inherit
            }

                .fam-row input:focus, .fam-row select:focus
                {
                    border-color: var(--p)
                }

        .btn-del-fam
        {
            width: 34px;
            height: 34px;
            background: rgba(220,38,38,.08);
            color: var(--danger);
            border: 1px solid rgba(220,38,38,.2);
            border-radius: 7px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            transition: background .15s
        }

            .btn-del-fam:hover
            {
                background: rgba(220,38,38,.15)
            }

        .btn-add-fam
        {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 9px 15px;
            border: 1.5px dashed var(--border);
            border-radius: 8px;
            background: none;
            color: var(--text-l);
            font-size: 13.5px;
            cursor: pointer;
            transition: border-color .15s,color .15s
        }

            .btn-add-fam:hover
            {
                border-color: var(--p);
                color: var(--p)
            }

        /* EXPORTS SCREEN */
        .exp-card
        {
            border: 1.5px solid var(--border);
            border-radius: 12px;
            padding: 18px 20px;
            display: flex;
            flex-direction: column
        }

        .exp-card-title
        {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-d);
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px
        }

            .exp-card-title i
            {
                color: var(--p)
            }

        .exp-card-desc
        {
            font-size: 12.5px;
            color: var(--text-l);
            margin-bottom: 6px
        }

        .exp-card .btn-sim
        {
            margin-top: auto;
            align-self: flex-start
        }

        /* USERS SCREEN */
        .users-head
        {
            padding: 22px 26px 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            border-bottom: 1px solid var(--border)
        }

        .users-title
        {
            font-size: 20px;
            font-weight: 700;
            color: var(--text-d)
        }

        .users-tbl
        {
            width: 100%;
            border-collapse: collapse
        }

            .users-tbl th
            {
                padding: 12px 18px;
                font-size: 12.5px;
                font-weight: 700;
                color: var(--text-l);
                text-align: left;
                border-bottom: 2px solid var(--border);
                text-transform: uppercase;
                letter-spacing: .4px
            }

            .users-tbl td
            {
                padding: 13px 18px;
                font-size: 13.5px;
                border-bottom: 1px solid #f0f2f7;
                color: var(--text-m);
                vertical-align: middle
            }

            .users-tbl tr:hover td
            {
                background: #f8fafd
            }

        .user-cell
        {
            display: flex;
            align-items: center;
            gap: 10px
        }

        .user-av-sm
        {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: var(--p);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 700;
            flex-shrink: 0
        }

        .user-cell-name
        {
            font-weight: 600;
            color: var(--text-d);
            font-size: 13.5px
        }

        .user-cell-email
        {
            font-size: 12px;
            color: var(--text-l)
        }

        .badge-role
        {
            padding: 3px 9px;
            border-radius: 5px;
            font-size: 11.5px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .3px
        }

            .badge-role.super
            {
                background: #ede9fe;
                color: #7c3aed
            }

            .badge-role.admin
            {
                background: #dbeafe;
                color: #1d4ed8
            }

            .badge-role.user
            {
                background: #f3f4f6;
                color: #4b5563
            }

        .badge-stat
        {
            padding: 3px 9px;
            border-radius: 5px;
            font-size: 11.5px;
            font-weight: 700
        }

            .badge-stat.actif
            {
                background: rgba(34,197,94,.12);
                color: #16a34a
            }

            .badge-stat.lock
            {
                background: rgba(245,158,11,.12);
                color: #d97706
            }

        .u-acts
        {
            display: flex;
            gap: 6px
        }

        .btn-u
        {
            padding: 6px 12px;
            border: none;
            border-radius: 6px;
            font-size: 12.5px;
            font-weight: 600;
            cursor: pointer;
            transition: background .15s;
            display: flex;
            align-items: center;
            gap: 5px
        }

            .btn-u.edit
            {
                background: #eef4ff;
                color: var(--p)
            }

                .btn-u.edit:hover
                {
                    background: #dce8ff
                }

            .btn-u.lock
            {
                background: #fff7ed;
                color: #d97706
            }

                .btn-u.lock:hover
                {
                    background: #fef3c7
                }

            .btn-u.del
            {
                background: #fef2f2;
                color: var(--danger)
            }

                .btn-u.del:hover
                {
                    background: #fee2e2
                }

        /* CONFIRM */
        .confirm-md
        {
            max-width: 420px
        }

        .confirm-body
        {
            text-align: center;
            padding: 28px 26px
        }

        .confirm-ico
        {
            font-size: 44px;
            margin-bottom: 16px
        }

        .confirm-body h4
        {
            font-size: 17px;
            font-weight: 700;
            color: var(--text-d);
            margin-bottom: 8px
        }

        .confirm-body p
        {
            font-size: 14px;
            color: var(--text-m);
            line-height: 1.5
        }

        /* TOAST */
        .toast-wrap
        {
            position: fixed;
            top: 68px;
            right: 24px;
            z-index: 9998;
            display: flex;
            flex-direction: column;
            gap: 9px
        }

        .toast
        {
            background: var(--p);
            color: #fff;
            padding: 12px 18px;
            border-radius: 9px;
            font-size: 14px;
            font-weight: 500;
            box-shadow: 0 4px 20px rgba(0,0,0,.18);
            display: flex;
            align-items: center;
            gap: 10px;
            animation: toastIn .25s ease-out;
            max-width: 340px
        }

        @keyframes toastIn
        {
            from
            {
                opacity: 0;
                transform: translateX(18px)
            }

            to
            {
                opacity: 1;
                transform: translateX(0)
            }
        }

        .toast.ok
        {
            background: #16a34a
        }

        .toast.warn
        {
            background: #d97706
        }

        .toast.err
        {
            background: var(--danger)
        }

        .toast.info
        {
            background: var(--ay)
        }

        .spinner
        {
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255,255,255,.4);
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin .6s linear infinite;
            flex-shrink: 0
        }

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

        @media(max-width:960px)
        {
            .content
            {
                flex-direction: column
            }

            .call-panel
            {
                width: 100%;
                min-width: unset
            }

            .sidebar
            {
                display: none
            }

            .srch-wrap input
            {
                width: 100%
            }

            .fg
            {
                grid-template-columns: 1fr
            }
        }

        /* Pagination (U3) */
        .pager-wrap
        {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 14px;
            padding: 12px 0 4px
        }

            .pager-wrap:empty
            {
                display: none
            }

        .pager-btn
        {
            width: 32px;
            height: 32px;
            border: 1.5px solid var(--border);
            border-radius: 7px;
            background: #fff;
            cursor: pointer;
            color: var(--text-m);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background .12s
        }

            .pager-btn:hover:not(:disabled)
            {
                background: #f1f3f7
            }

            .pager-btn:disabled
            {
                opacity: .4;
                cursor: not-allowed
            }

            /* Section "Groupes" du formulaire utilisateur */
            .u-groups-list
            {
                display: flex;
                flex-direction: column;
                gap: 2px;
                max-height: 180px;
                overflow-y: auto;
                border: 1px solid var(--border);
                border-radius: 8px;
                padding: 6px 8px
            }

            .u-groups-item
            {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 5px 4px;
                cursor: pointer;
                font-size: 13.5px;
                border-radius: 6px
            }

            .u-groups-item:hover
            {
                background: rgba(127, 127, 127, .08)
            }

            .u-groups-item input
            {
                cursor: pointer
            }

            .u-groups-empty
            {
                color: var(--text-l);
                font-size: 13px;
                padding: 6px 2px
            }