body {
            font-family: 'Tajawal', sans-serif;
        }

        .tab-content {
            display: none;
            animation: fadeIn 0.3s ease;
        }

        .tab-content.active {
            display: block;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(5px);
            }

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

        #toast-container {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
            width: max-content;
            max-width: 90vw;
            pointer-events: none;
        }

        .toast {
            background: var(--p950);
            color: white;
            padding: 18px 32px;
            border-radius: 20px;
            box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.45);
            border: 3px solid rgba(255, 255, 255, .25);
            margin-bottom: 10px;
            display: none;
            font-weight: 800;
            font-size: 20px;
            line-height: 1.6;
            text-align: center;
            pointer-events: auto;
            cursor: pointer;
        }

        .toast.t-err {
            background: #B91C1C;
        }

        .toast.t-ok {
            background: #15803D;
        }

        .toast.t-warn {
            background: #B45309;
        }

        .modal {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .modal.active {
            display: flex;
        }

        #cancel-alert-modal {
            z-index: 1100;
        }

        /* تنبيه الإلغاء فوق أي نافذة أخرى */
        /* ===== فاصل واضح بين كل مريض ومريض في القوائم (مع ألوان الحالات الخاصة كما هي) ===== */
        #reception-table-body>tr,
        #tech-table-body>tr,
        #doc-patients-list>tr,
        #er-patients-list>tr,
        #inpatient-patients-list>tr,
        #vital-patients-list>tr {
            border-bottom: 2px solid #E4E0EC !important;
        }

        #reception-table-body>tr:nth-child(even):not([class*="bg-red"]):not([class*="bg-yellow"]):not([class*="bg-green"]):not([class*="bg-orange"]),
        #tech-table-body>tr:nth-child(even):not([class*="bg-red"]):not([class*="bg-yellow"]):not([class*="bg-green"]):not([class*="bg-orange"]),
        #doc-patients-list>tr.doc-tr:nth-child(even):not([class*="bg-red"]):not([class*="bg-yellow"]):not([class*="bg-green"]):not([class*="bg-orange"]),
        #vital-patients-list>tr:nth-child(even):not([class*="bg-red"]):not([class*="bg-yellow"]):not([class*="bg-green"]):not([class*="bg-orange"]),
        #er-patients-list>tr:nth-child(even):not(.emergency-row):not([class*="bg-yellow"]),
        #inpatient-patients-list>tr:nth-child(even):not(.inpatient-row):not([class*="bg-yellow"]) {
            background-color: #F6F4FA !important;
        }

        @media (max-width: 768px) {

            .tech-tr,
            .doc-tr {
                border: 2px solid #E4E0EC !important;
            }
        }

        /* ===== تنبيه الإلغاء (تصميم هادئ) ===== */
        .ca-card {
            width: calc(100% - 32px);
            max-width: 420px;
            background: #fff;
            border-radius: 24px;
            padding: 24px 20px 20px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: 16px;
            color: #1E1B2E;
            text-align: right;
        }

        .ca-head {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .ca-icon {
            width: 48px;
            height: 48px;
            flex-shrink: 0;
            border-radius: 14px;
            background: #FEF3E2;
            color: #B45309;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .ca-title {
            margin: 0;
            font-size: 20px;
            font-weight: 800;
        }

        .ca-meta {
            font-size: 13px;
            color: #57534E;
        }

        .ca-box {
            background: #F5F5F4;
            border-radius: 16px;
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .ca-row {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 10px;
        }

        .ca-lbl {
            font-size: 14px;
            color: #57534E;
            flex-shrink: 0;
        }

        .ca-note {
            font-size: 15px;
            font-weight: 700;
            color: #92400E;
            background: #FEF3E2;
            border-radius: 12px;
            padding: 10px 12px;
            line-height: 1.6;
        }

        .ca-ok {
            height: 56px;
            border: 0;
            border-radius: 16px;
            background: var(--v700);
            color: #fff;
            font-family: inherit;
            font-size: 18px;
            font-weight: 800;
            cursor: pointer;
        }

        .ca-ok:hover {
            background: var(--v800);
        }

        .ca-foot {
            text-align: center;
            font-size: 12px;
            color: #57534E;
        }

        /* ===== شاشة الفاحص على الجوال (التصميم المعتمد) ===== */
        #tech-mobile {
            display: none;
        }

        @media (max-width: 768px) {

            body.tm-on #main-header,
            body.tm-on #location-header {
                display: none !important;
            }

            body.tm-on #tab-technician> :not(#tech-mobile) {
                display: none !important;
            }

            body.tm-on #main-content {
                padding: 0 !important;
                margin: 0 !important;
                max-width: none !important;
            }

            body.tm-on #tech-mobile {
                display: flex;
            }
        }

        .tm-root {
            position: fixed;
            inset: 0;
            z-index: 900;
            flex-direction: column;
            background: #F4F2F8;
            color: #1E1B2E;
            font-family: 'Tajawal', sans-serif;
        }

        .tm-root button,
        .tm-root select {
            font-family: inherit;
            cursor: pointer;
        }

        .tm-header {
            height: 64px;
            flex-shrink: 0;
            background: var(--v950);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 12px 0 16px;
            box-sizing: border-box;
        }

        .tm-title {
            font-size: 18px;
            font-weight: 800;
        }

        .tm-sub {
            font-size: 12px;
            color: var(--v200);
        }

        .tm-icon-btn {
            width: 44px;
            height: 44px;
            border: 0;
            border-radius: 12px;
            background: var(--v900);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .tm-icon-btn.tm-plain {
            background: transparent;
        }

        .tm-icon-btn.tm-on {
            background: #15803D;
        }

        .tm-dot {
            position: absolute;
            top: 9px;
            left: 9px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        .tm-main {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 14px 14px 18px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .tm-current {
            background: #FFF8E6;
            border: 2px solid #F59E0B;
            border-radius: 18px;
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .tm-badge-now {
            font-size: 12px;
            font-weight: 800;
            color: #92400E;
            background: #FDE68A;
            padding: 4px 10px;
            border-radius: 999px;
        }

        .tm-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
        }

        .tm-name-lg {
            font-size: 22px;
            font-weight: 800;
        }

        .tm-ticket-lg {
            font-size: 16px;
            font-weight: 800;
            color: var(--v800);
        }

        .tm-exam {
            font-size: 14px;
            font-weight: 700;
            background: #fff;
            border: 1px solid var(--p200);
            color: var(--v900);
            padding: 5px 10px;
            border-radius: 10px;
        }

        .tm-note {
            font-size: 12px;
            font-weight: 700;
            color: #9A3412;
            background: #FFEDD5;
            padding: 5px 10px;
            border-radius: 10px;
        }

        .tm-wrap {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
        }

        .tm-btn-done {
            flex: 1;
            height: 52px;
            border: 0;
            border-radius: 14px;
            background: #15803D;
            color: #fff;
            font-size: 17px;
            font-weight: 800;
        }

        .tm-btn-out {
            height: 52px;
            padding: 0 14px;
            border: 1.5px solid #D6D3D1;
            border-radius: 14px;
            background: #fff;
            color: #44403C;
            font-size: 14px;
            font-weight: 700;
        }

        .tm-sec {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 2px 2px 0;
        }

        .tm-sec h2 {
            margin: 0;
            font-size: 17px;
            font-weight: 800;
        }

        .tm-select {
            height: 36px;
            padding: 0 10px;
            border: 1px solid var(--v200);
            border-radius: 10px;
            background: #fff;
            color: var(--v900);
            font-size: 13px;
            font-weight: 700;
            max-width: 170px;
        }

        .tm-card {
            background: #fff;
            border-radius: 16px;
            padding: 12px 14px;
            display: flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 1px 2px rgba(30, 27, 46, 0.08);
            width: 100%;
            border: 0;
            text-align: right;
            color: inherit;
            box-sizing: border-box;
        }

        .tm-card-body {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .tm-name {
            font-size: 17px;
            font-weight: 800;
        }

        .tm-ticket {
            font-size: 13px;
            font-weight: 700;
            color: var(--v800);
        }

        .tm-meta {
            font-size: 12px;
            color: #57534E;
        }

        .tm-exam-sm {
            font-size: 13px;
            font-weight: 700;
            color: var(--v900);
        }

        .tm-chip {
            font-size: 12px;
            font-weight: 800;
            padding: 3px 8px;
            border-radius: 8px;
        }

        .tm-chip-er {
            color: #fff;
            background: #B91C1C;
        }

        .tm-chip-inp {
            color: #14532D;
            background: #BBF7D0;
        }

        .tm-chip-man {
            color: #7C2D12;
            background: #FFEDD5;
        }

        .tm-chip-doc {
            color: #1E3A8A;
            background: #DBEAFE;
            font-weight: 700;
        }

        .tm-chip-warn {
            color: #991B1B;
            background: #FEE2E2;
        }

        .tm-call {
            width: 72px;
            height: 44px;
            flex-shrink: 0;
            border: 0;
            border-radius: 12px;
            background: var(--v100);
            color: var(--v900);
            font-size: 15px;
            font-weight: 800;
        }

        .tm-hold {
            flex-shrink: 0;
            font-size: 12px;
            font-weight: 800;
            color: #9A3412;
            background: #FFEDD5;
            padding: 6px 8px;
            border-radius: 10px;
        }

        .tm-nr-card {
            background: #fff;
            border-radius: 16px;
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            box-shadow: 0 1px 2px rgba(30, 27, 46, 0.08);
        }

        .tm-nr-card.tm-nr-hold {
            background: #FEF2F2;
            border: 1.5px solid #FCA5A5;
            box-shadow: none;
        }

        .tm-empty {
            text-align: center;
            color: #78716C;
            font-weight: 700;
            padding: 40px 10px;
        }

        .tm-callbar {
            flex-shrink: 0;
            padding: 10px 14px;
            background: #F4F2F8;
            display: flex;
            gap: 8px;
            box-shadow: 0 -6px 12px rgba(244, 242, 248, 0.9);
        }

        .tm-callnext {
            flex: 1;
            height: 56px;
            border: 0;
            border-radius: 16px;
            background: var(--v700);
            color: #fff;
            font-size: 19px;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .tm-silent {
            width: 56px;
            height: 56px;
            border: 1.5px solid var(--v200);
            border-radius: 16px;
            background: #fff;
            color: var(--v900);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .tm-tabs {
            height: 64px;
            flex-shrink: 0;
            background: #fff;
            border-top: 1px solid #E7E5E4;
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .tm-tab {
            border: 0;
            background: transparent;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            color: #57534E;
            font-size: 12px;
            font-weight: 700;
        }

        .tm-tab .tm-n {
            font-size: 16px;
        }

        .tm-tab.tm-active {
            color: var(--v900);
            font-weight: 800;
        }

        .tm-tab .tm-bar {
            width: 24px;
            height: 3px;
            border-radius: 3px;
            background: transparent;
        }

        .tm-tab.tm-active .tm-bar {
            background: var(--v700);
        }

        .tm-overlay {
            position: fixed;
            inset: 0;
            z-index: 950;
            background: rgba(20, 14, 40, 0.55);
            display: none;
        }

        .tm-overlay.tm-show {
            display: block;
        }

        .tm-sheet {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            max-height: 88vh;
            overflow-y: auto;
            background: #fff;
            border-radius: 24px 24px 0 0;
            padding: 10px 18px 22px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: 14px;
            font-family: 'Tajawal', sans-serif;
            color: #1E1B2E;
        }

        .tm-grab {
            align-self: center;
            width: 44px;
            height: 5px;
            border-radius: 5px;
            background: #D6D3D1;
        }

        .tm-kv {
            background: #F5F5F4;
            border-radius: 12px;
            padding: 10px 12px;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .tm-kv .k {
            font-size: 12px;
            color: #57534E;
        }

        .tm-kv .v {
            font-size: 15px;
            font-weight: 800;
        }

        .tm-sheet {
            padding: 8px 14px 16px;
            gap: 8px;
            max-height: 78vh;
        }

        .tm-info {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
        }

        .tm-chip-file {
            display: inline-flex;
            gap: 6px;
            align-items: center;
            background: var(--v50);
            border: 1.5px solid var(--v200);
            color: var(--v900);
            border-radius: 999px;
            padding: 5px 12px;
            font-size: 14px;
            font-weight: 800;
            font-family: inherit;
            cursor: pointer;
        }

        .tm-chip-file svg {
            width: 15px;
            height: 15px;
        }

        .tm-who {
            font-size: 13px;
            font-weight: 700;
            color: #44403C;
            background: #F5F5F4;
            border-radius: 999px;
            padding: 5px 12px;
        }

        .tm-h3 {
            margin: 0;
            font-size: 14px;
            font-weight: 800;
            color: #57534E;
        }

        .tm-primary {
            flex: 1;
            height: 56px;
            border: 0;
            border-radius: 16px;
            background: var(--v700);
            color: #fff;
            font-size: 18px;
            font-weight: 800;
        }

        .tm-secondary {
            height: 56px;
            padding: 0 16px;
            border: 1.5px solid var(--v200);
            border-radius: 16px;
            background: #fff;
            color: var(--v900);
            font-size: 15px;
            font-weight: 700;
        }

        .tm-danger {
            height: 48px;
            border: 1.5px solid #FCA5A5;
            border-radius: 14px;
            background: #fff;
            color: #991B1B;
            font-size: 15px;
            font-weight: 700;
        }

        .tm-link {
            align-self: center;
            border: 0;
            background: transparent;
            color: var(--v800);
            font-size: 15px;
            font-weight: 700;
            padding: 8px 16px;
        }

        .tm-menu-item {
            height: 52px;
            border: 0;
            border-radius: 14px;
            background: var(--v50);
            color: var(--v950);
            font-size: 16px;
            font-weight: 700;
            text-align: right;
            padding: 0 16px;
        }

        .tm-menu-item.tm-logout {
            background: #FEF2F2;
            color: #991B1B;
        }

        /* ===== شاشتا الطبيب والفرز على الجوال ===== */
        #doc-mobile,
        #vital-mobile {
            display: none;
        }

        @media (max-width: 768px) {

            body.dm-on #main-header,
            body.dm-on #location-header,
            body.vm-on #main-header,
            body.vm-on #location-header {
                display: none !important;
            }

            body.dm-on #tab-doctor> :not(#doc-mobile),
            body.vm-on #tab-vital> :not(#vital-mobile) {
                display: none !important;
            }

            body.dm-on #main-content,
            body.vm-on #main-content {
                padding: 0 !important;
                margin: 0 !important;
                max-width: none !important;
            }

            body.dm-on #doc-mobile,
            body.vm-on #vital-mobile {
                display: flex;
            }
        }

        .tm-card.dm-ready {
            background: #F0FDF4;
            border: 1.5px solid #86EFAC;
            box-shadow: none;
        }

        .dm-time {
            font-size: 15px;
            font-weight: 800;
            color: var(--v800);
        }

        .gm-list {
            display: flex;
            flex-direction: column;
            background: #fff;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 1px 2px rgba(30, 27, 46, 0.08);
        }

        .gm-row {
            padding: 12px 14px;
            display: flex;
            align-items: center;
            gap: 12px;
            border-bottom: 1px solid #E7E5E4;
            cursor: pointer;
        }

        .gm-row:last-child {
            border-bottom: 0;
        }

        .gm-row:nth-child(even) {
            background: #FAFAF9;
        }

        .gm-status {
            font-size: 12px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 8px;
            color: #44403C;
            background: #F5F5F4;
        }

        /* ===== شاشة الاستقبال على الجوال ===== */
        #rec-mobile {
            display: none;
        }

        @media (max-width: 768px) {

            body.rm-on #main-header,
            body.rm-on #location-header {
                display: none !important;
            }

            body.rm-on #tab-reception> :not(#rec-mobile) {
                display: none !important;
            }

            body.rm-on #main-content {
                padding: 0 !important;
                margin: 0 !important;
                max-width: none !important;
            }

            body.rm-on #rec-mobile {
                display: flex;
            }

            /* حركة ظهور التبويب تطوي شاشة الجوال الكاملة لجزء من الثانية: نلغيها في شاشات الجوال */
            body.rm-on #tab-reception,
            body.tm-on #tab-technician,
            body.dm-on #tab-doctor,
            body.vm-on #tab-vital {
                animation: none;
            }
        }

        .rm-search {
            flex-shrink: 0;
            padding: 12px 14px 0;
            box-sizing: border-box;
        }

        .rm-search label {
            display: flex;
            align-items: center;
            gap: 8px;
            height: 48px;
            background: #fff;
            border: 1.5px solid var(--v200);
            border-radius: 14px;
            padding: 0 14px;
            box-sizing: border-box;
        }

        .rm-search input {
            flex: 1;
            min-width: 0;
            border: 0;
            outline: none;
            background: transparent;
            font-family: inherit;
            font-size: 16px;
            color: #1E1B2E;
        }

        .rm-btn {
            height: 48px;
            border: 0;
            border-radius: 14px;
            font-size: 16px;
            font-weight: 800;
            color: #fff;
            width: 100%;
        }

        .rm-btn-sm {
            flex: 1;
            height: 44px;
            border: 1.5px solid #D6D3D1;
            border-radius: 12px;
            background: #fff;
            color: #44403C;
            font-size: 14px;
            font-weight: 700;
        }

        .rm-ret {
            font-size: 12px;
            font-weight: 800;
            color: #92400E;
            background: #FEF3C7;
            border: 1px solid #FCD34D;
            padding: 4px 8px;
            border-radius: 8px;
            align-self: flex-start;
        }

        .rm-add {
            flex: 1;
            height: 52px;
            border: 1.5px dashed var(--v500);
            border-radius: 16px;
            background: #fff;
            color: var(--v900);
            font-size: 16px;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .rm-st {
            font-size: 12px;
            font-weight: 800;
            padding: 3px 8px;
            border-radius: 8px;
        }

        /* ===== إضافة مريض يدوي على الجوال (شاشتان) ===== */
        #ma-mobile {
            display: none;
            z-index: 960;
            background: #fff;
        }

        #ma-mobile.tm-show {
            display: flex;
        }

        .ma-head {
            height: 60px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 0 8px 0 16px;
            border-bottom: 1px solid #E7E5E4;
            box-sizing: border-box;
        }

        .ma-head h1 {
            margin: 0;
            font-size: 18px;
            font-weight: 800;
            flex: 1;
        }

        .ma-x {
            width: 44px;
            height: 44px;
            border: 0;
            border-radius: 12px;
            background: transparent;
            color: #44403C;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .ma-main {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 14px 16px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .ma-lbl {
            font-size: 13px;
            font-weight: 800;
            color: #44403C;
        }

        .ma-input {
            height: 48px;
            border: 1.5px solid #D6D3D1;
            border-radius: 12px;
            padding: 0 12px;
            font-family: inherit;
            font-size: 16px;
            color: #1E1B2E;
            outline: none;
            width: 100%;
            box-sizing: border-box;
            background: #fff;
        }

        .ma-input:focus {
            border-color: var(--v500);
        }

        .ma-reason {
            height: 44px;
            border: 1.5px solid #D6D3D1;
            border-radius: 12px;
            background: #fff;
            color: #44403C;
            font-size: 14px;
            font-weight: 700;
        }

        .ma-reason.on {
            border: 2px solid var(--v700);
            background: var(--v50);
            color: var(--v900);
            font-weight: 800;
        }

        .ma-chip {
            height: 38px;
            padding: 0 12px;
            border: 1.5px solid var(--v200);
            border-radius: 10px;
            background: #fff;
            color: var(--v900);
            font-size: 13px;
            font-weight: 700;
        }

        .ma-chip.on {
            border-color: var(--v700);
            background: var(--v700);
            color: #fff;
            font-weight: 800;
        }

        .ma-chip.done {
            border-color: #BBF7D0;
            background: #F0FDF4;
            color: #166534;
            cursor: default;
        }

        .ma-grp {
            font-size: 12px;
            font-weight: 800;
            color: #57534E;
        }

        .ma-foot {
            flex-shrink: 0;
            padding: 10px 16px 14px;
            border-top: 1px solid #E7E5E4;
            display: flex;
            flex-direction: column;
            gap: 6px;
            background: #fff;
        }

        .ma-card {
            border: 1.5px solid var(--v200);
            border-radius: 16px;
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .ma-seg {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            background: #F5F5F4;
            border-radius: 12px;
            padding: 4px;
            gap: 4px;
        }

        .ma-seg button {
            height: 40px;
            border: 0;
            border-radius: 9px;
            background: transparent;
            color: #44403C;
            font-size: 15px;
            font-weight: 800;
        }

        .ma-seg button.on {
            background: #fff;
            color: var(--v900);
            box-shadow: 0 1px 3px rgba(30, 27, 46, 0.15);
        }

        .ma-opt {
            height: 36px;
            padding: 0 12px;
            border: 1.5px solid var(--v200);
            border-radius: 10px;
            background: #fff;
            color: var(--v900);
            font-size: 13px;
            font-weight: 700;
        }

        .ma-opt.on {
            border-color: var(--v700);
            background: var(--v700);
            color: #fff;
            font-weight: 800;
        }

        /* ===== نافذة الفحوصات الموحّدة (التصميم المعتمد) ===== */
        .xp-wrap {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 1000;
            background: rgba(31, 41, 55, 0.62);
            align-items: center;
            justify-content: center;
            padding: 20px;
            box-sizing: border-box;
            font-family: 'Tajawal', sans-serif;
        }

        .xp-wrap.xp-show {
            display: flex;
        }

        .xp-card {
            width: 100%;
            max-width: 1220px;
            height: min(92vh, 940px);
            background: #F9FAFB;
            border-radius: 24px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
            color: #1F2937;
        }

        .xp-card button,
        .xp-card select,
        .xp-card input,
        .xp-card textarea {
            font-family: inherit;
        }

        .xp-head {
            background: #fff;
            padding: 14px 20px;
            border-bottom: 1px solid #E5E7EB;
            display: flex;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
            flex-shrink: 0;
        }

        .xp-title {
            font-size: 20px;
            font-weight: 800;
            color: var(--p900);
        }

        .xp-title.er {
            color: #B91C1C;
        }

        .xp-title.inp {
            color: #15803D;
        }

        .xp-sub {
            margin-top: 3px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 700;
            color: #4B5563;
        }

        .xp-pill {
            padding: 2px 10px;
            border-radius: 999px;
            border: 1px solid;
            font-size: 12px;
            font-weight: 800;
        }

        .xp-search {
            display: flex;
            align-items: center;
            gap: 8px;
            background: #F3F4F6;
            border: 1px solid #E5E7EB;
            border-radius: 12px;
            padding: 0 12px;
            height: 44px;
            width: 300px;
            max-width: 100%;
            box-sizing: border-box;
        }

        .xp-search input {
            border: none;
            background: transparent;
            outline: none;
            flex: 1;
            min-width: 0;
            font-size: 14px;
        }

        .xp-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            border: 1px solid #E5E7EB;
            background: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
        }

        .xp-extra {
            padding: 12px 20px;
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            align-items: flex-end;
            border-bottom: 1px solid;
            flex-shrink: 0;
        }

        .xp-extra.er {
            background: #FEF2F2;
            border-color: #FECACA;
        }

        .xp-extra.inp {
            background: #F0FDF4;
            border-color: #BBF7D0;
        }

        .xp-extra.add {
            background: var(--p50);
            border-color: var(--v100);
        }

        .xp-field {
            display: flex;
            flex-direction: column;
            gap: 6px;
            min-width: 200px;
            flex: 1;
        }

        .xp-field>span {
            font-size: 13px;
            font-weight: 800;
            color: #374151;
        }

        .xp-input {
            height: 46px;
            border: 2px solid #D1D5DB;
            border-radius: 12px;
            background: #fff;
            padding: 0 12px;
            font-size: 15px;
            font-weight: 700;
            outline: none;
            box-sizing: border-box;
            width: 100%;
        }

        .xp-input:focus {
            border-color: var(--p700);
        }

        .xp-input.bad {
            border-color: #DC2626;
            background: #FEF2F2;
        }

        .xp-segs {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }

        .xp-seg {
            height: 46px;
            padding: 0 16px;
            border-radius: 12px;
            border: 2px solid #D1D5DB;
            background: #fff;
            color: #374151;
            font-weight: 800;
            font-size: 15px;
            cursor: pointer;
        }

        .xp-seg.on {
            background: var(--p700);
            border-color: var(--p700);
            color: #fff;
        }

        .xp-seg.top.on {
            background: #DC2626;
            border-color: #DC2626;
        }

        .xp-seg.er.on {
            background: #FEE2E2;
            border-color: #DC2626;
            color: #991B1B;
        }

        .xp-freq {
            padding: 10px 20px;
            background: var(--p50);
            border-bottom: 1px solid var(--v100);
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            flex-shrink: 0;
        }

        .xp-freq b {
            font-size: 13px;
            color: var(--p800);
        }

        .xp-fq {
            height: 36px;
            padding: 0 14px;
            border-radius: 999px;
            border: 1px solid var(--p300);
            background: #fff;
            color: var(--p800);
            font-weight: 800;
            font-size: 13px;
            cursor: pointer;
        }

        .xp-fq.on {
            background: var(--p700);
            border-color: var(--p700);
            color: #fff;
        }

        .xp-legend {
            margin-inline-start: auto;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            font-size: 11px;
            font-weight: 700;
            color: #4B5563;
        }

        .xp-legend i {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 3px;
            margin-inline-end: 4px;
            vertical-align: -1px;
        }

        .xp-body {
            flex: 1;
            min-height: 0;
            display: flex;
        }

        .xp-grid {
            flex: 1;
            min-width: 0;
            overflow-y: auto;
            padding: 16px 20px;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
            align-content: start;
        }

        .xp-card-g {
            background: #fff;
            border: 1px solid #E5E7EB;
            border-radius: 16px;
            padding: 14px;
            display: flex;
            gap: 14px;
        }

        .xp-part {
            flex: 1;
            min-width: 0;
        }

        .xp-part+.xp-part {
            border-inline-start: 1px dashed #D1D5DB;
            padding-inline-start: 14px;
        }

        .xp-gh {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            margin-bottom: 10px;
        }

        .xp-gn {
            font-size: 15px;
            font-weight: 800;
            color: #111827;
        }

        .xp-gd {
            font-size: 11px;
            color: #6B7280;
            font-weight: 700;
        }

        .xp-cnt {
            background: var(--p700);
            color: #fff;
            font-size: 12px;
            font-weight: 800;
            padding: 3px 10px;
            border-radius: 999px;
            white-space: nowrap;
        }

        .xp-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .xp-chip {
            display: inline-flex;
            align-items: center;
            border-radius: 10px;
            min-height: 44px;
            border: 1px solid #D1D5DB;
            background: #fff;
            color: #1F2937;
        }

        .xp-chip-main {
            display: inline-flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            gap: 1px;
            min-height: 42px;
            padding: 4px 12px;
            border: 0;
            background: transparent;
            color: inherit;
            font-size: 14px;
            font-weight: 800;
            cursor: pointer;
            text-align: right;
        }

        .xp-chip-meta {
            font-size: 11px;
            font-weight: 700;
        }

        .xp-chip.sel {
            background: var(--p700);
            border-color: var(--p700);
            color: #fff;
        }

        .xp-chip.wait {
            background: #FFF7ED;
            border-color: #FDBA74;
            color: #9A3412;
        }

        .xp-chip.draft {
            background: #F3F4F6;
            border-color: #9CA3AF;
            color: #374151;
        }

        .xp-chip.room {
            background: #EFF6FF;
            border-color: #93C5FD;
            color: #1E40AF;
        }

        .xp-chip.done {
            background: #F0FDF4;
            border-color: #86EFAC;
            color: #166534;
        }

        .xp-chip.cancel {
            background: #FEE2E2;
            border: 2px solid #DC2626;
            color: #991B1B;
        }

        .xp-chip.cancel .xp-chip-label {
            text-decoration: line-through;
        }

        .xp-chip.off {
            background: #F3F4F6;
            border-color: #E5E7EB;
            color: #6B7280;
        }

        .xp-chip.off .xp-chip-main {
            cursor: not-allowed;
        }

        .xp-chip.bad {
            box-shadow: 0 0 0 3px #FCA5A5;
        }

        .xp-cbtn {
            height: 30px;
            margin-inline-end: 6px;
            padding: 0 10px;
            border-radius: 8px;
            border: 0;
            background: #DC2626;
            color: #fff;
            font-weight: 800;
            font-size: 12px;
            cursor: pointer;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .xp-cbtn.sm {
            height: 24px;
            padding: 0 8px;
            font-size: 11px;
            margin-inline-end: 4px;
        }

        .xp-chip.open {
            outline: 3px dashed var(--p500);
            outline-offset: 2px;
        }

        .xp-opts {
            margin-top: 10px;
            background: var(--p50);
            border: 2px solid var(--p400);
            border-radius: 12px;
            padding: 10px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .xp-opts-h {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            font-size: 13px;
            font-weight: 800;
            color: var(--p900);
        }

        .xp-opt {
            height: 40px;
            padding: 0 14px;
            border-radius: 10px;
            border: 1px dashed #9CA3AF;
            background: #fff;
            color: #374151;
            font-weight: 800;
            font-size: 14px;
            cursor: pointer;
        }

        .xp-opt.on {
            border: 2px solid var(--p700);
            background: var(--p700);
            color: #fff;
        }

        .xp-done {
            height: 34px;
            padding: 0 16px;
            border-radius: 10px;
            border: 0;
            background: var(--p700);
            color: #fff;
            font-weight: 800;
            cursor: pointer;
        }

        .xp-x {
            width: 28px;
            height: 28px;
            margin-inline-end: 6px;
            border-radius: 8px;
            border: 0;
            background: #DC2626;
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
        }

        .xp-chip.sel .xp-x {
            border: 2px solid #fff;
        }

        .xp-mini {
            height: 30px;
            margin-inline-end: 6px;
            padding: 0 10px;
            border-radius: 8px;
            background: #fff;
            font-weight: 800;
            font-size: 12px;
            cursor: pointer;
            white-space: nowrap;
        }

        .xp-mini.undo {
            border: 1px solid #DC2626;
            color: #B91C1C;
        }

        .xp-mini.rep {
            border: 1px solid #16A34A;
            color: #166534;
        }

        .xp-side {
            width: 410px;
            flex-shrink: 0;
            border-inline-start: 1px solid #E5E7EB;
            background: #fff;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        .xp-side-h {
            padding: 12px 16px;
            border-bottom: 1px solid #F3F4F6;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: 800;
            flex-shrink: 0;
        }

        .xp-side-b {
            flex: 1;
            overflow-y: auto;
            padding: 12px 14px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .xp-cbox {
            border: 2px solid #DC2626;
            background: #FEF2F2;
            border-radius: 14px;
            padding: 10px 12px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .xp-cbox-h {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 800;
            color: #991B1B;
        }

        .xp-crow {
            background: #fff;
            border: 1px solid #FCA5A5;
            border-radius: 10px;
            padding: 8px 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            font-weight: 800;
            color: #991B1B;
        }

        .xp-item {
            border: 2px solid var(--p700);
            border-radius: 14px;
            padding: 10px 12px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            background: #fff;
        }

        .xp-item.wait {
            border: 1px solid #FDBA74;
            background: #FFF7ED;
        }

        .xp-item.room {
            border: 1px solid #93C5FD;
            background: #EFF6FF;
        }

        .xp-item.draft {
            border: 1px solid #9CA3AF;
            background: #F9FAFB;
        }

        .xp-item.bad {
            border-color: #DC2626;
            box-shadow: 0 0 0 3px #FECACA;
        }

        .xp-ih {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        .xp-in {
            font-weight: 800;
            font-size: 15px;
        }

        .xp-badge {
            font-size: 11px;
            font-weight: 800;
            padding: 1px 8px;
            border-radius: 999px;
            margin-inline-start: 4px;
            white-space: nowrap;
        }

        .xp-eye {
            display: flex;
            border: 1px solid #D1D5DB;
            border-radius: 10px;
            overflow: hidden;
            flex-shrink: 0;
        }

        .xp-eye button {
            height: 34px;
            width: 46px;
            border: 0;
            background: #fff;
            color: #374151;
            font-weight: 800;
            cursor: pointer;
        }

        .xp-eye button+button {
            border-inline-start: 1px solid #D1D5DB;
        }

        .xp-eye button.on {
            background: var(--p700);
            color: #fff;
        }

        .xp-row {
            display: flex;
            gap: 6px;
            align-items: center;
            flex-wrap: wrap;
        }

        .xp-sel {
            flex: 1;
            min-width: 120px;
            height: 34px;
            border: 1px solid #D1D5DB;
            border-radius: 10px;
            background: #F9FAFB;
            font-weight: 700;
            font-size: 13px;
            padding: 0 8px;
        }

        .xp-note {
            flex: 1;
            min-width: 0;
            height: 34px;
            border: 1px solid #E5E7EB;
            border-radius: 10px;
            background: #F9FAFB;
            padding: 0 10px;
            font-size: 13px;
            box-sizing: border-box;
        }

        .xp-sub-on {
            display: inline-flex;
            align-items: center;
            height: 34px;
            border-radius: 8px;
            background: var(--p100);
            border: 2px solid var(--p700);
            color: var(--p900);
            font-weight: 800;
        }

        .xp-sub-on span {
            padding: 0 8px;
        }

        .xp-sub-on .xp-x {
            width: 24px;
            height: 24px;
            margin-inline-end: 4px;
            border: 0;
        }

        .xp-sub-off {
            height: 34px;
            padding: 0 10px;
            border-radius: 8px;
            border: 1px dashed #9CA3AF;
            background: #fff;
            color: #374151;
            font-weight: 800;
            cursor: pointer;
        }

        .xp-err {
            font-size: 12px;
            font-weight: 800;
            color: #B91C1C;
        }

        .xp-info {
            font-size: 12px;
            font-weight: 700;
        }

        .xp-foot {
            background: #fff;
            border-top: 1px solid #E5E7EB;
            padding: 12px 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            flex-shrink: 0;
        }

        .xp-sum {
            flex: 1;
            min-width: 220px;
        }

        .xp-tags {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            font-size: 13px;
            font-weight: 800;
        }

        .xp-tags span {
            padding: 4px 10px;
            border-radius: 8px;
        }

        .xp-btn {
            height: 48px;
            padding: 0 18px;
            border-radius: 12px;
            font-weight: 800;
            font-size: 14px;
            cursor: pointer;
            border: 1px solid #D1D5DB;
            background: #F3F4F6;
            color: #1F2937;
        }

        .xp-btn.close {
            border-color: #FECACA;
            background: #FEF2F2;
            color: #B91C1C;
        }

        .xp-btn.go {
            border: 0;
            background: var(--p700);
            color: #fff;
            font-size: 15px;
            padding: 0 22px;
        }

        .xp-btn.go.er {
            background: #B91C1C;
        }

        .xp-btn.go.inp {
            background: #15803D;
        }

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

        .xp-empty {
            text-align: center;
            color: #6B7280;
            font-weight: 700;
            padding: 30px 10px;
        }

        .xp-dlg-wrap {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 1150;
            background: rgba(17, 24, 39, 0.6);
            align-items: center;
            justify-content: center;
            padding: 16px;
            box-sizing: border-box;
            font-family: 'Tajawal', sans-serif;
        }

        .xp-dlg-wrap.xp-show {
            display: flex;
        }

        .xp-dlg {
            width: 100%;
            max-width: 520px;
            max-height: 90vh;
            overflow-y: auto;
            background: #fff;
            border-radius: 22px;
            border-top: 6px solid var(--p700);
            padding: 22px;
            box-sizing: border-box;
            color: #1F2937;
        }

        .xp-dlg.red {
            border-top-color: #DC2626;
        }

        .xp-dlg.amber {
            border-top-color: #D97706;
        }

        .xp-dlg.green {
            border-top-color: #16A34A;
        }

        .xp-dlg h3 {
            margin: 0 0 4px;
            font-size: 19px;
            font-weight: 800;
        }

        .xp-dlg-btns {
            margin-top: 16px;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .xp-dlg-btns button {
            flex: 1;
            min-width: 120px;
            height: 50px;
            border-radius: 12px;
            font-weight: 800;
            font-size: 15px;
            cursor: pointer;
            font-family: inherit;
            border: 1px solid #D1D5DB;
            background: #F3F4F6;
            color: #1F2937;
        }

        .xp-dlg-btns button.ok {
            border: 0;
            background: var(--p700);
            color: #fff;
        }

        .xp-dlg.red .xp-dlg-btns button.ok {
            background: #DC2626;
        }

        .xp-rr {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }

        .xp-rr label {
            display: flex;
            align-items: center;
            gap: 8px;
            min-height: 44px;
            padding: 0 12px;
            border: 1px solid #D1D5DB;
            border-radius: 10px;
            font-weight: 800;
            font-size: 14px;
            cursor: pointer;
        }

        .xp-rr label:has(input:checked) {
            border: 2px solid var(--p700);
            background: var(--p50);
        }

        @media (max-width: 768px) {
            .xp-wrap {
                padding: 0;
                align-items: stretch;
            }

            .xp-card {
                height: 100%;
                max-width: none;
                border-radius: 0;
            }

            .xp-head {
                padding: 10px 12px;
                gap: 8px;
            }

            .xp-title {
                font-size: 17px;
            }

            .xp-search {
                width: 100%;
                order: 3;
            }

            .xp-extra,
            .xp-freq {
                padding: 10px 12px;
            }

            .xp-legend {
                display: none;
            }

            .xp-body {
                flex-direction: column;
                overflow-y: auto;
            }

            .xp-grid {
                overflow: visible;
                grid-template-columns: minmax(0, 1fr);
                padding: 10px 12px;
            }

            .xp-side {
                width: auto;
                border-inline-start: 0;
                border-top: 1px solid #E5E7EB;
            }

            .xp-side-b {
                overflow: visible;
            }

            .xp-foot {
                padding: 10px 12px 14px;
            }

            .xp-foot .xp-btn.close {
                display: none;
            }

            .xp-btn.go {
                flex: 1;
            }

            .xp-rr {
                grid-template-columns: minmax(0, 1fr);
            }

            .xp-card-g {
                flex-direction: column;
            }

            .xp-part+.xp-part {
                border-inline-start: 0;
                padding-inline-start: 0;
                border-top: 1px dashed #D1D5DB;
                padding-top: 12px;
            }
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--p300);
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--p500);
        }

        .emergency-row {
            background-color: #fee2e2 !important;
            border-right: 4px solid #ef4444 !important;
        }

        .inpatient-row {
            background-color: #ecfdf5 !important;
            border-right: 4px solid #10b981 !important;
        }

        .single-line-row td {
            white-space: nowrap;
        }

        .tech-side {
            width: 300px;
            flex-shrink: 0;
            position: sticky;
            top: 8px;
            background: #fff;
            border: 2px solid var(--v200);
            border-radius: 20px;
            padding: 18px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .tech-side .ts-name {
            font-size: 24px;
            font-weight: 800;
            color: #1C1917;
            line-height: 1.25;
        }

        .tech-side .ts-file {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 20px;
            font-weight: 800;
            color: #374151;
        }

        .tech-side .ts-exams {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            font-size: 14px;
        }

        .tech-side .ts-btns {
            display: flex;
            gap: 8px;
        }

        .tech-side .ts-btns button {
            flex: 1;
            min-height: 44px;
            border: 0;
            border-radius: 12px;
            font-weight: 800;
            font-size: 14px;
            cursor: pointer;
        }

        .tech-side .ts-icon {
            width: 44px;
            min-height: 44px;
            flex: 0 0 44px !important;
            background: #F5F5F4;
            color: #44403C;
            font-size: 18px !important;
        }

        .tech-side .ts-icon.warn {
            background: #FEF3C7;
            border: 1.5px solid #F59E0B;
        }

        .tech-kpi {
            background: #fff;
            border: 1px solid #E7E5E4;
            border-radius: 12px;
            padding: 4px 16px;
            font-size: 12px;
            font-weight: 800;
            color: #57534E;
            text-align: center;
            min-width: 84px;
        }

        .tech-kpi b {
            display: block;
            font-size: 22px;
            color: #1C1917;
            line-height: 1.2;
        }

        .tech-more {
            width: 34px;
            height: 34px;
            flex: none;
            border: 0;
            border-radius: 10px;
            background: #F5F5F4;
            color: #44403C;
            font-size: 18px;
            font-weight: 800;
            cursor: pointer;
        }

        .tech-det td {
            background: #FAFAF9;
            padding: 2px 14px 8px !important;
        }

        .tech-det.mine td {
            background: #FEF9C3 !important;
            box-shadow: inset -4px 0 0 #CA8A04;
        }

        #tech-table-body>tr.tech-tr-open,
        .tech-tr-open>td {
            border-bottom: 0 !important;
        }

        @media (min-width: 769px) {
            .tech-tr>td {
                padding-top: 4px !important;
                padding-bottom: 4px !important;
            }

            .tech-td-exams .inline-block {
                margin: 0 0 0 8px;
            }

            .tech-td-timer>div {
                display: inline-block;
                margin-inline-end: 6px;
            }
        }

        @media (max-width: 768px) {
            .tech-det {
                display: none;
            }
        }

        .tech-tr.ts-sel {
            box-shadow: inset -4px 0 0 var(--v800);
        }

        @media (max-width: 1100px) {
            .tech-side {
                display: none !important;
            }
        }

        @media (min-width: 769px) {
            #tab-technician .tech-split {
                flex: 1;
                min-height: 0;
            }

            #tab-technician .tech-split>.overflow-x-auto {
                align-self: stretch;
            }
        }

        @media (min-width: 769px) {

            /* الطبيب والفرز: القائمة بكامل الصفحة (سكرول الصفحة) وعناوين ثابتة بخلفية معتمة بلا تداخل */
            #tab-doctor.active,
            #tab-vital.active,
            #tab-technician.active {
                height: auto !important;
            }

            #tab-doctor .overflow-x-auto,
            #tab-vital .overflow-x-auto,
            #tab-technician .overflow-x-auto {
                overflow: visible !important;
                flex: none !important;
            }

            #tab-doctor thead th {
                background-color: #f3f4f6 !important;
            }

            #tab-vital thead th {
                background-color: #f0fdf4 !important;
            }

            #tab-reception thead th {
                background-color: var(--p50) !important;
            }

            #tab-technician thead th {
                background-color: #f3f4f6 !important;
            }

            #tab-doctor thead th,
            #tab-vital thead th,
            #tab-technician thead th {
                top: 0;
                z-index: 40 !important;
            }

            #tab-technician .tech-split {
                display: block !important;
                width: 100%;
            }

            #tab-technician .tech-split>.overflow-x-auto {
                width: 100% !important;
                flex: 1 1 100% !important;
            }

            #tab-technician .responsive-table {
                width: 100%;
            }
        }

        @media (min-width: 769px) {

            #tab-technician.active,
            #tab-doctor.active,
            #tab-reception.active,
            #tab-vital.active {
                display: flex;
                flex-direction: column;
                height: calc(100vh - 11rem);
                min-height: 420px;
            }

            #tab-doctor>div:not(.tm-root),
            #tab-reception>div:not(.tm-root),
            #tab-vital>div:not(.tm-root),
            #tab-technician>div.bg-white.p-6 {
                flex: 1;
                min-height: 0;
                display: flex;
                flex-direction: column;
            }

            #tab-doctor .overflow-x-auto,
            #tab-reception .overflow-x-auto,
            #tab-vital .overflow-x-auto,
            #tab-technician .overflow-x-auto {
                flex: 1;
                min-height: 0;
                overflow: auto;
            }

            #tab-doctor thead th,
            #tab-reception thead th,
            #tab-vital thead th,
            #tab-technician thead th {
                position: sticky;
                top: 0;
                z-index: 30;
                background: inherit;
            }

            #supervisor-panel {
                flex-shrink: 0;
                max-height: 38vh;
                overflow-y: auto;
            }

            #clinic-tabs-container {
                flex-shrink: 0;
            }
        }

        @media (max-width: 768px) {
            .responsive-table thead {
                display: none;
            }

            .responsive-table tbody {
                display: block;
                padding: 0;
                background: transparent;
            }

            .tech-tr,
            .doc-tr {
                display: flex !important;
                flex-wrap: wrap;
                padding: 16px;
                border: 1px solid #e5e7eb !important;
                background: #fff;
                border-radius: 16px;
                margin-bottom: 12px;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
            }

            .tech-tr td,
            .doc-tr td {
                display: block;
                border: none !important;
                padding: 0 !important;
                box-shadow: none !important;
                position: static !important;
                width: 100%;
                text-align: right !important;
            }

            .tech-td-file,
            .tech-td-ticket {
                display: none !important;
            }

            .tech-td-patient,
            .doc-td-patient {
                order: 1;
                border-bottom: 1px solid #f3f4f6 !important;
                padding-bottom: 12px !important;
                margin-bottom: 8px;
            }

            .tech-td-exams,
            .doc-td-exams {
                order: 2;
                margin-bottom: 12px;
            }

            .tech-td-timer,
            .doc-td-timer {
                order: 3;
                width: 50%;
                font-size: 13px;
                font-weight: bold;
                color: #4b5563;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
            }

            .tech-td-actions,
            .doc-td-actions {
                order: 4;
                width: 50%;
                display: flex;
                justify-content: flex-end;
                align-items: center;
            }

            .tech-td-actions button,
            .doc-td-actions button {
                padding: 12px 18px !important;
                font-size: 15px !important;
                border-radius: 12px !important;
                font-weight: bold !important;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
                margin-right: 6px;
            }

            .doc-td-actions .file-text,
            .doc-td-actions .file-copy-btn,
            .doc-td-actions .flags-container {
                display: none !important;
            }
        }

        html[dir="ltr"] .text-right {
            text-align: left;
        }

        html[dir="ltr"] .dir-chev {
            transform: scaleX(-1);
        }

        .prio-badge {
            display: block;
            width: fit-content;
            margin-top: 4px;
            font-size: 11px;
            font-weight: 800;
            color: #7C2D12;
            background: #FEF3C7;
            border: 1px solid #F59E0B;
            border-radius: 6px;
            padding: 2px 8px;
            animation: prioPulse 2s ease-in-out infinite;
        }

        .prio-alert {
            margin: 8px 0;
            font-size: 14px;
            font-weight: 800;
            color: #7C2D12;
            background: #FEF3C7;
            border: 2px solid #F59E0B;
            border-radius: 12px;
            padding: 10px 12px;
        }

        .tm-card.tm-prio {
            border: 2px solid #F59E0B !important;
        }

        @keyframes prioPulse {
            50% {
                background: #FDE68A;
            }
        }

        /* ===== شاشة الخدمة الذاتية ===== */
        body.kiosk-on #main-header,
        body.kiosk-on #main-content,
        body.kiosk-on #location-header {
            display: none !important;
        }

        #kiosk-root {
            position: fixed;
            inset: 0;
            z-index: 800;
            background: var(--k);
            color: #fff;
            font-family: 'Tajawal', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 24px 16px;
            overflow-y: auto;
            user-select: none;
            -webkit-user-select: none;
        }

        .k-brand {
            position: absolute;
            top: 18px;
            inset-inline-start: 22px;
            font-size: 22px;
            font-weight: 800;
            opacity: .9;
            cursor: default;
        }

        .k-card {
            width: 100%;
            max-width: 460px;
            background: #fff;
            color: #1F2937;
            border-radius: 28px;
            padding: 28px 24px;
            box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
            display: flex;
            flex-direction: column;
            gap: 18px;
            text-align: center;
        }

        .k-title {
            font-size: 26px;
            font-weight: 800;
            color: var(--ki);
            line-height: 1.3;
        }

        .k-title small {
            display: block;
            font-size: 18px;
            color: #6B7280;
            font-weight: 700;
            margin-top: 2px;
        }

        .k-input {
            height: 76px;
            border-radius: 18px;
            border: 3px solid var(--km);
            background: var(--kf);
            font-size: 40px;
            font-weight: 800;
            letter-spacing: 6px;
            color: var(--ki);
            display: flex;
            align-items: center;
            justify-content: center;
            direction: ltr;
            font-variant-numeric: tabular-nums;
        }

        .k-input.empty {
            color: var(--v400);
            font-size: 20px;
            letter-spacing: 0;
            font-weight: 700;
        }

        .k-pad {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            direction: ltr;
        }

        .k-key {
            height: 72px;
            border-radius: 18px;
            background: #F3F4F6;
            font-size: 30px;
            font-weight: 800;
            color: #1F2937;
            border: 0;
            touch-action: manipulation;
        }

        .k-key:active {
            background: var(--v200);
            transform: scale(.97);
        }

        .k-key.k-del {
            font-size: 22px;
            color: var(--k2);
            background: var(--kl);
        }

        .k-go {
            height: 72px;
            border-radius: 18px;
            background: var(--k2);
            color: #fff;
            font-size: 24px;
            font-weight: 800;
            border: 0;
            width: 100%;
            touch-action: manipulation;
        }

        .k-go:disabled {
            background: var(--p300);
        }

        .k-go.k-green {
            background: #15803D;
        }

        .k-back {
            height: 56px;
            border-radius: 16px;
            background: #fff;
            color: var(--k2);
            border: 2px solid var(--kb);
            font-size: 18px;
            font-weight: 800;
            width: 100%;
        }

        .k-name {
            font-size: 34px;
            font-weight: 800;
            color: #111827;
            line-height: 1.25;
        }

        .k-file {
            font-size: 18px;
            font-weight: 700;
            color: #6B7280;
        }

        .k-msg-icon {
            font-size: 64px;
            line-height: 1;
        }

        .k-msg {
            font-size: 28px;
            font-weight: 800;
            color: #14532D;
            line-height: 1.35;
        }

        .k-msg.k-warn {
            color: #9A3412;
        }

        .k-msg small {
            display: block;
            font-size: 19px;
            font-weight: 700;
            color: #4B5563;
            margin-top: 6px;
        }

        .k-foot {
            margin-top: 16px;
            font-size: 14px;
            font-weight: 700;
            opacity: .75;
            text-align: center;
        }

        .st-controls {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
            margin-bottom: 12px;
        }

        .st-seg {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            background: #F3F4F6;
            padding: 4px;
            border-radius: 12px;
        }

        .st-seg button {
            padding: 7px 12px;
            border-radius: 9px;
            font-size: 13px;
            font-weight: 700;
            color: #4B5563;
        }

        .st-seg button.on {
            background: var(--p700);
            color: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
        }

        .st-custom {
            display: flex;
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;
            font-size: 13px;
            font-weight: 700;
            color: #374151;
        }

        .st-custom input {
            border: 1px solid #D1D5DB;
            border-radius: 8px;
            padding: 5px 8px;
            font-weight: 700;
        }

        .st-actions {
            display: flex;
            gap: 8px;
            margin-inline-start: auto;
        }

        .st-btn {
            padding: 8px 14px;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 800;
            background: var(--v50);
            color: var(--p800);
            border: 1px solid var(--v200);
        }

        .st-btn.st-xl {
            background: #15803D;
            color: #fff;
            border-color: #15803D;
        }

        .st-btn:disabled {
            opacity: .5;
        }

        .st-period {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: baseline;
            font-size: 14px;
            color: #374151;
            margin-bottom: 10px;
        }

        .st-period span {
            color: #6B7280;
            font-size: 12px;
            font-weight: 700;
        }

        .st-period .st-upd {
            margin-inline-start: auto;
        }

        .st-cards {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
            gap: 10px;
        }

        .st-card {
            border: 1px solid #E5E7EB;
            border-radius: 14px;
            padding: 12px;
            background: #FCFCFD;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .st-label {
            font-size: 12px;
            font-weight: 700;
            color: #6B7280;
            min-height: 30px;
        }

        .st-val {
            font-size: 26px;
            font-weight: 800;
            color: var(--p950);
            font-variant-numeric: tabular-nums;
        }

        .st-val small {
            font-size: 13px;
            color: #6B7280;
        }

        .st-prev {
            font-size: 11px;
            font-weight: 700;
            color: #9CA3AF;
        }

        .st-diff {
            font-size: 12px;
            font-weight: 800;
            width: fit-content;
            padding: 2px 8px;
            border-radius: 999px;
        }

        .st-good {
            color: #166534;
            background: #DCFCE7;
        }

        .st-bad {
            color: #991B1B;
            background: #FEE2E2;
        }

        .st-eq {
            color: #4B5563;
            background: #F3F4F6;
        }

        .st-mini {
            font-size: 10px;
            font-weight: 800;
            padding: 1px 5px;
            border-radius: 6px;
        }

        .st-h {
            font-size: 15px;
            font-weight: 800;
            color: var(--p900);
            margin: 18px 0 8px;
        }

        .st-note {
            font-size: 11px;
            color: #6B7280;
            font-weight: 600;
            margin-top: 6px;
        }

        .st-tbl-wrap {
            overflow-x: auto;
            border: 1px solid #E5E7EB;
            border-radius: 12px;
        }

        .st-tbl {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }

        .st-tbl th {
            background: #F9FAFB;
            color: #4B5563;
            font-weight: 800;
            text-align: start;
            padding: 8px 10px;
            white-space: nowrap;
            border-bottom: 1px solid #E5E7EB;
        }

        .st-tbl td {
            padding: 7px 10px;
            border-bottom: 1px solid #F3F4F6;
            font-weight: 600;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
        }

        .st-tbl tr:last-child td {
            border-bottom: 0;
        }

        .st-empty {
            padding: 14px;
            text-align: center;
            color: #9CA3AF;
            font-weight: 700;
            font-size: 13px;
        }

        .st-two {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 0 14px;
        }

        .st-legend {
            display: flex;
            gap: 14px;
            font-size: 12px;
            font-weight: 700;
            color: #4B5563;
            margin-bottom: 6px;
        }

        .st-sw {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 3px;
            background: var(--p500);
            margin-inline-end: 5px;
            vertical-align: middle;
        }

        .st-sw-prev {
            background: #E5E7EB;
        }

        .st-sw-peak {
            background: #EA580C;
        }

        .st-bars {
            display: flex;
            align-items: flex-end;
            gap: 4px;
            height: 170px;
            padding: 8px;
            border: 1px solid #E5E7EB;
            border-radius: 12px;
            direction: ltr;
            overflow-x: auto;
        }

        .st-bar-col {
            flex: 1;
            min-width: 22px;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .st-bar-num {
            font-size: 10px;
            font-weight: 800;
            color: #4B5563;
            height: 14px;
        }

        .st-bar-area {
            flex: 1;
            width: 100%;
            position: relative;
        }

        .st-bar {
            position: absolute;
            bottom: 0;
            left: 15%;
            width: 70%;
            background: var(--p500);
            border-radius: 4px 4px 0 0;
        }

        .st-bar-prev {
            left: 0;
            width: 100%;
            background: var(--v100);
            opacity: .9;
        }

        .st-bar-peak {
            background: #EA580C;
        }

        .st-bar-lbl {
            font-size: 10px;
            font-weight: 700;
            color: #6B7280;
            margin-top: 3px;
        }

        html[dir="ltr"] .text-left {
            text-align: right;
        }

        /* المرحلة 1: لوحة الفحوصات */
        .ex-card {
            border: 1px solid #E5E7EB;
            border-radius: 12px;
            background: #FAFAFB;
            padding: 10px;
            font-size: 12px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .ex-card.ex-hidden {
            opacity: .6;
            background: #F3F4F6;
        }

        .ex-card.ex-off {
            border-color: #FCA5A5;
            background: #FEF2F2;
        }

        .ex-oos {
            display: inline-block;
            font-size: 10px;
            font-weight: 800;
            color: #fff;
            background: #DC2626;
            border-radius: 6px;
            padding: 1px 6px;
            letter-spacing: .3px;
        }

        .ex-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 6px;
        }

        .ex-grid label {
            display: flex;
            flex-direction: column;
            gap: 2px;
            font-size: 11px;
            font-weight: 700;
            color: #4B5563;
        }

        .ex-grid select,
        .ex-grid input {
            border: 1px solid #D1D5DB;
            border-radius: 8px;
            padding: 4px 6px;
            font-weight: 700;
            background: #fff;
            font-size: 12px;
        }

        .ex-subs {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            align-items: center;
        }

        .ex-sub {
            background: var(--p100);
            color: var(--p800);
            border-radius: 6px;
            padding: 2px 6px;
            font-weight: 700;
        }

        .ex-sub button {
            color: #DC2626;
            font-weight: 800;
        }

        .ex-addsub {
            display: inline-flex;
            gap: 2px;
        }

        .ex-addsub input {
            width: 90px;
            border: 1px solid #D1D5DB;
            border-radius: 6px;
            padding: 2px 5px;
            font-size: 11px;
            background: #fff;
        }

        .ex-addsub button {
            background: var(--p700);
            color: #fff;
            border-radius: 6px;
            padding: 0 7px;
            font-weight: 800;
        }

        .xp-chip.oos {
            border-color: #FCA5A5 !important;
            background: #FEF2F2 !important;
        }

        .xp-chip.oos .xp-chip-label {
            color: #B91C1C;
            text-decoration: line-through;
        }

        .xp-chip.oos .xp-chip-meta {
            color: #fff;
            background: #DC2626;
            border-radius: 6px;
            padding: 0 6px;
            font-weight: 800;
        }

        .xp-eye.bad {
            outline: 2px solid #DC2626;
            outline-offset: 2px;
            border-radius: 10px;
        }

        .xp-eye-req {
            align-self: center;
            font-size: 12px;
            font-weight: 800;
            color: #B91C1C;
            padding: 0 6px;
        }

        /* المرحلة 2 */
        .tv-recall {
            animation: tvRecall 1s ease-in-out infinite;
            border-color: #DC2626 !important;
        }

        @keyframes tvRecall {
            50% {
                background: #FECACA;
                transform: scale(1.02);
            }
        }

        /* المرحلة 3 */
        .xp-note-row {
            flex-direction: column-reverse;
            align-items: stretch;
        }

        .xp-note-row .xp-note {
            width: 100%;
            flex: none;
            height: 38px;
            font-size: 14px;
        }

        .xp-note-row .xp-sel {
            align-self: flex-start;
            font-size: 12px;
            height: 30px;
        }

        #stuck-bar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1200;
            display: none;
            background: #B91C1C;
            color: #fff;
            font-weight: 800;
            font-size: 14px;
            padding: 8px 14px;
            box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
        }

        #stuck-bar.show {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
            animation: stuckPulse 1.6s ease-in-out infinite;
        }

        #stuck-bar.info {
            background: #C2410C;
            animation: none;
        }

        #stuck-bar .sb-item button {
            margin: 0 4px;
            padding: 1px 8px;
            font-size: 12px;
            border-radius: 6px;
        }

        #stuck-bar .sb-item {
            background: rgba(255, 255, 255, .18);
            border-radius: 8px;
            padding: 3px 8px;
            font-size: 13px;
        }

        #stuck-bar button {
            margin-inline-start: auto;
            background: #fff;
            color: #991B1B;
            border-radius: 8px;
            padding: 3px 10px;
            font-weight: 800;
        }

        @keyframes stuckPulse {
            50% {
                background: #DC2626;
            }
        }

        #kiosk-root,
        #kiosk-root * {
            touch-action: manipulation;
        }

        .k-brand {
            padding: 10px 14px;
            -webkit-touch-callout: none;
        }

        /* المرحلة 4–6 */
        .login-scroll {
            overflow-y: auto;
            align-items: flex-start !important;
            padding: 24px 12px;
        }

        .login-scroll>div {
            margin: auto;
        }

        .cl-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 8px;
            margin-bottom: 10px;
        }

        .cl-card {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 3px;
            text-align: start;
            padding: 10px 12px;
            border: 2px solid #E5E7EB;
            border-radius: 14px;
            background: #fff;
            transition: .15s;
            min-height: 64px;
        }

        .cl-card:hover {
            border-color: var(--v300);
            background: var(--p50);
        }

        .cl-card.on {
            border-color: var(--p700);
            background: var(--p100);
            box-shadow: 0 0 0 3px var(--p200);
        }

        .cl-card.sup {
            border-style: dashed;
        }

        .cl-card-n {
            font-weight: 800;
            color: var(--p950);
            font-size: 15px;
        }

        .cl-card-m {
            font-size: 11px;
            font-weight: 700;
            color: #6B7280;
        }

        .cl-card-p {
            font-size: 11px;
            font-weight: 700;
            color: #166534;
            line-height: 1.3;
        }

        .cl-no {
            font-size: 11px;
            font-weight: 800;
            color: var(--p700);
            background: var(--p100);
            border-radius: 6px;
            padding: 0 5px;
        }

        .cl-tab {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 700;
            background: #F3F4F6;
            color: #374151;
            box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
        }

        .cl-tab.on {
            background: var(--p600);
            color: #fff;
        }

        .cl-tab.on .cl-no {
            background: rgba(255, 255, 255, .2);
            color: #fff;
        }

        .cl-meta {
            font-size: 11px;
            opacity: .8;
        }

        .rmg-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 8px;
        }

        .rmg-btn {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
            padding: 10px 12px;
            border: 2px solid #E5E7EB;
            border-radius: 12px;
            background: #fff;
            text-align: start;
            font-size: 12px;
            color: #166534;
            font-weight: 700;
        }

        .rmg-btn b {
            font-size: 15px;
            color: #111827;
        }

        .rmg-btn.on {
            border-color: #16A34A;
            background: #F0FDF4;
            box-shadow: 0 0 0 3px #BBF7D0;
        }

        .rmg-btn.busy {
            background: #F9FAFB;
            color: #9CA3AF;
            cursor: not-allowed;
        }

        .rmg-btn.busy b {
            color: #9CA3AF;
        }

        .rs-wrap {
            position: fixed;
            inset: 0;
            z-index: 1300;
            background: rgba(17, 24, 39, .5);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 16px;
        }

        .rs-wrap.show {
            display: flex;
        }

        .rs-box {
            background: #fff;
            border-radius: 20px;
            width: 100%;
            max-width: 640px;
            max-height: 92vh;
            overflow-y: auto;
            padding: 18px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
        }

        .rs-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 18px;
            color: var(--p950);
            margin-bottom: 8px;
        }

        .rs-x {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: #F3F4F6;
            font-weight: 800;
        }

        .rs-sub {
            font-size: 13px;
            font-weight: 800;
            color: #6B7280;
            margin: 12px 0 6px;
        }

        .rs-go {
            width: 100%;
            margin-top: 14px;
            background: var(--p700);
            color: #fff;
            font-weight: 800;
            padding: 12px;
            border-radius: 12px;
            font-size: 15px;
        }

        .rs-go:disabled {
            background: #D1D5DB;
            color: #6B7280;
        }

        .qr-box {
            max-width: 420px;
            text-align: center;
        }

        .qr-img {
            width: 230px;
            height: 230px;
            margin: 6px auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .qr-img svg {
            width: 100%;
            height: 100%;
        }

        .qr-code {
            font-size: 40px;
            font-weight: 900;
            letter-spacing: 6px;
            color: var(--p950);
            direction: ltr;
        }

        .qr-meta {
            font-size: 13px;
            font-weight: 700;
            color: #B45309;
        }

        .qr-help {
            margin-top: 10px;
            font-size: 13px;
            font-weight: 600;
            color: #4B5563;
            background: #F9FAFB;
            border-radius: 12px;
            padding: 10px;
            text-align: start;
            line-height: 1.8;
        }

        .qr-wait {
            color: #6B7280;
            font-weight: 700;
            padding: 20px;
        }

        .rc-bar {
            position: fixed;
            bottom: 12px;
            left: 12px;
            right: 12px;
            z-index: 1250;
            background: #92400E;
            color: #fff;
            font-weight: 800;
            padding: 10px 14px;
            border-radius: 14px;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
            box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
        }

        .rc-bar button {
            margin-inline-start: auto;
            background: #fff;
            color: #92400E;
            padding: 6px 12px;
            border-radius: 10px;
            font-weight: 800;
        }

        .pr-strip {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
            margin: 6px 0 10px;
            font-size: 12px;
        }

        .pr-lbl {
            font-weight: 800;
            color: #4B5563;
        }

        .pr-chip {
            border: 1px solid #E5E7EB;
            background: #fff;
            border-radius: 999px;
            padding: 3px 10px;
            font-weight: 700;
            color: #374151;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            flex-wrap: wrap;
        }

        .pr-chip.on {
            border-color: #86EFAC;
            background: #F0FDF4;
            color: #166534;
        }

        .pr-chip.me {
            border-color: var(--p700);
            background: var(--p100);
            color: var(--p900);
        }

        .pr-chip.off {
            color: #9CA3AF;
            border-style: dashed;
        }

        .pr-off {
            font-weight: 600;
        }

        .pr-in {
            background: #FEF3C7;
            color: #92400E;
            border-radius: 8px;
            padding: 0 6px;
        }

        .pr-free {
            background: #FEE2E2;
            color: #B91C1C;
            border-radius: 8px;
            padding: 0 6px;
            font-size: 11px;
        }

        .mm-pres .pr-strip {
            margin: 4px 0;
        }

        .vm-docs {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 6px;
        }

        .vm-doc {
            border: 2px solid #E5E7EB;
            background: #fff;
            border-radius: 999px;
            padding: 6px 12px;
            font-size: 13px;
            font-weight: 700;
            color: #6B7280;
        }

        .vm-doc.on {
            border-color: #16A34A;
            background: #F0FDF4;
            color: #166534;
        }

        .vm-doc.all {
            border-style: dashed;
            color: var(--v900);
        }

        .tv-opts {
            display: flex;
            flex-direction: column;
            gap: 6px;
            font-size: 14px;
            font-weight: 700;
            background: #F9FAFB;
            border: 1px solid #E5E7EB;
            border-radius: 12px;
            padding: 10px;
        }

        .tv-opts label {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .tv-cls {
            display: flex;
            flex-wrap: wrap;
            gap: 6px 12px;
            padding: 4px 22px 6px;
            font-size: 13px;
        }

        .tv-cls small {
            width: 100%;
            color: #6B7280;
            font-weight: 600;
        }

        .pg-wrap {
            position: fixed;
            inset: 0;
            z-index: 2000;
            background: var(--p950);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 18px;
        }

        .pg-card {
            background: #fff;
            border-radius: 24px;
            padding: 24px 20px;
            width: 100%;
            max-width: 380px;
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .pg-logo {
            font-size: 30px;
            font-weight: 900;
            color: var(--p700);
        }

        .pg-title {
            font-size: 20px;
            font-weight: 800;
            color: var(--p950);
        }

        .pg-text {
            font-size: 15px;
            font-weight: 600;
            color: #374151;
            line-height: 1.7;
        }

        .pg-msg {
            font-size: 14px;
            font-weight: 800;
            color: #B45309;
            background: #FFFBEB;
            border-radius: 10px;
            padding: 8px;
        }

        .pg-or {
            font-size: 13px;
            color: #6B7280;
            font-weight: 700;
            margin-top: 6px;
        }

        .pg-code {
            font-size: 28px;
            letter-spacing: 8px;
            text-align: center;
            font-weight: 800;
            border: 2px solid var(--v200);
            border-radius: 14px;
            padding: 10px;
            direction: ltr;
        }

        .pg-go {
            background: var(--p700);
            color: #fff;
            font-weight: 800;
            padding: 12px;
            border-radius: 14px;
            font-size: 16px;
        }

        .sup-head {
            background: linear-gradient(135deg, var(--p950), var(--p800));
            color: #fff;
            border-radius: 20px;
            padding: 14px 18px;
            margin-bottom: 10px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .sup-title {
            font-size: 20px;
            font-weight: 800;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .sup-who {
            font-size: 13px;
            background: rgba(255, 255, 255, .15);
            border-radius: 8px;
            padding: 2px 8px;
        }

        .sup-warn {
            background: #FEF3C7;
            color: #92400E;
            border-radius: 10px;
            padding: 6px 10px;
            font-size: 13px;
            font-weight: 800;
        }

        .sup-deleg {
            background: #DBEAFE;
            color: #1E3A8A;
            border-radius: 10px;
            padding: 6px 10px;
            font-size: 13px;
            font-weight: 800;
        }

        .sup-nav {
            display: flex;
            gap: 6px;
            overflow-x: auto;
            padding: 4px 2px 10px;
            margin-bottom: 10px;
        }

        .sup-tab {
            white-space: nowrap;
            padding: 9px 14px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 800;
            background: #fff;
            color: #4B5563;
            border: 1px solid #E5E7EB;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .sup-tab.on {
            background: var(--p700);
            color: #fff;
            border-color: var(--p700);
            box-shadow: 0 4px 12px rgba(126, 34, 206, .25);
        }

        .sup-b {
            background: var(--p700);
            color: #fff;
            border-radius: 999px;
            font-size: 11px;
            padding: 0 7px;
        }

        .sup-tab.on .sup-b {
            background: #fff;
            color: var(--p700);
        }

        .sup-b.red {
            background: #DC2626;
            color: #fff;
        }

        .lv-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 10px;
        }

        .lv-card {
            border: 1px solid #E5E7EB;
            border-radius: 14px;
            padding: 10px 12px;
            background: #FCFCFD;
        }

        .lv-h {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            flex-wrap: wrap;
            font-size: 14px;
            color: var(--p950);
        }

        .lv-h span {
            font-size: 12px;
            font-weight: 700;
            color: #6B7280;
        }

        .rmg-card {
            border: 1px solid #E5E7EB;
            border-radius: 14px;
            padding: 12px;
            margin-bottom: 10px;
            background: #FCFCFD;
        }

        .rmg-card-h {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
            margin-bottom: 8px;
            font-size: 13px;
            font-weight: 700;
            color: #4B5563;
        }

        .rmg-card-h input {
            border: 1px solid #D1D5DB;
            border-radius: 8px;
            padding: 4px 8px;
            background: #fff;
            font-weight: 800;
            color: var(--p950);
        }

        .rmg-in {
            width: 180px;
        }

        .rmg-no {
            width: 70px;
            text-align: center;
        }

        .rmg-key {
            font-size: 11px;
            color: #9CA3AF;
            background: #F3F4F6;
            border-radius: 6px;
            padding: 1px 6px;
        }

        .rmg-rooms {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .rmg-room {
            border: 1px solid #E5E7EB;
            background: #fff;
            border-radius: 10px;
            padding: 4px 8px;
            font-size: 12px;
            font-weight: 700;
            display: inline-flex;
            gap: 4px;
            align-items: center;
            flex-wrap: wrap;
        }

        .rmg-room.busy {
            border-color: #86EFAC;
            background: #F0FDF4;
            color: #166534;
        }

        .rmg-room button {
            font-size: 11px;
            padding: 0 5px;
            border-radius: 6px;
            background: #F3F4F6;
        }

        .rmg-add,
        .sf-add {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 10px;
        }

        .rmg-add input,
        .sf-add input,
        .sf-add select {
            border: 1px solid #D1D5DB;
            border-radius: 8px;
            padding: 5px 8px;
            font-size: 13px;
            background: #fff;
        }

        .rmg-add button,
        .sf-add button,
        .dg-go {
            background: var(--p700);
            color: #fff;
            font-weight: 800;
            border-radius: 8px;
            padding: 5px 12px;
            font-size: 13px;
        }

        .sf-top {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-bottom: 6px;
            flex-wrap: wrap;
        }

        .sf-top input {
            border: 1px solid #D1D5DB;
            border-radius: 8px;
            padding: 5px 8px;
            font-size: 13px;
            width: 240px;
            max-width: 100%;
        }

        .sf-note {
            font-size: 12px;
            font-weight: 600;
            color: #4B5563;
            background: var(--v50);
            border-radius: 10px;
            padding: 8px 10px;
            margin-bottom: 8px;
            line-height: 1.7;
        }

        .sf-tbl {
            width: 100%;
            font-size: 13px;
            border-collapse: collapse;
        }

        .sf-tbl th {
            text-align: start;
            background: #F9FAFB;
            padding: 6px;
            font-size: 12px;
            color: #6B7280;
            border-bottom: 1px solid #E5E7EB;
        }

        .sf-tbl td {
            padding: 5px 6px;
            border-bottom: 1px solid #F3F4F6;
            vertical-align: middle;
        }

        .sf-tbl input,
        .sf-tbl select {
            border: 1px solid #E5E7EB;
            border-radius: 6px;
            padding: 3px 6px;
            background: #fff;
            font-size: 12px;
            max-width: 220px;
        }

        .sf-tbl button {
            font-size: 12px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 6px;
            background: #F3F4F6;
            margin-inline-end: 4px;
        }

        .sf-tbl tr.off {
            opacity: .5;
        }

        .sf-sw {
            display: inline-block;
            width: 18px;
            height: 18px;
            border-radius: 5px;
            vertical-align: middle;
        }

        .sf-dg {
            font-size: 12px;
        }

        #sup-staff-list {
            max-height: 460px;
            overflow-y: auto;
        }

        .set-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            padding: 10px 0;
            border-bottom: 1px solid #F3F4F6;
            flex-wrap: wrap;
        }

        .set-d {
            font-size: 12px;
            color: #6B7280;
            font-weight: 600;
            max-width: 640px;
            line-height: 1.6;
        }

        .set-row select,
        .set-row button {
            border: 1px solid #D1D5DB;
            border-radius: 8px;
            padding: 4px 10px;
            font-weight: 700;
            font-size: 13px;
            background: #fff;
        }

        .set-sw {
            font-weight: 800;
            display: flex;
            gap: 6px;
            align-items: center;
        }

        .set-on {
            color: #166534;
            font-weight: 800;
            font-size: 13px;
            padding: 4px 8px;
        }

        .set-off {
            color: #9CA3AF;
            font-weight: 800;
            font-size: 13px;
            padding: 4px 8px;
        }

        .dg-form {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: flex-end;
            background: var(--p50);
            border: 1px solid var(--p200);
            border-radius: 14px;
            padding: 12px;
            font-size: 13px;
            font-weight: 700;
        }

        .dg-form label {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .dg-form select {
            border: 1px solid #D1D5DB;
            border-radius: 8px;
            padding: 5px 8px;
            background: #fff;
        }

        .dg-scr {
            display: flex;
            flex-wrap: wrap;
            gap: 6px 14px;
            width: 100%;
        }

        .dg-scr label {
            flex-direction: row;
            align-items: center;
            gap: 4px;
        }

        .dg-go {
            padding: 8px 16px;
        }

        .dg-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            border: 1px solid #E5E7EB;
            border-radius: 12px;
            padding: 8px 12px;
            margin-bottom: 6px;
            font-size: 13px;
        }

        .dg-item button {
            background: #FEE2E2;
            color: #B91C1C;
            font-weight: 800;
            border-radius: 8px;
            padding: 4px 10px;
            font-size: 12px;
        }

        .dg-item.old {
            color: #9CA3AF;
            border-style: dashed;
        }

        #tech-presence,
        #doc-presence,
        #vital-presence {
            margin-bottom: 4px;
        }

        @media (min-width: 769px) {
            #tech-area {
                flex: 1;
                min-height: 0;
                display: flex;
                flex-direction: column;
            }

            #tech-area>div.bg-white.p-6 {
                flex: 1;
                min-height: 0;
                display: flex;
                flex-direction: column;
            }

            #tab-technician.active.sup-mode {
                height: auto;
                min-height: calc(100vh - 11rem);
            }

            #tab-technician.sup-mode #supervisor-panel {
                max-height: none;
                overflow: visible;
            }

            #tab-technician.sup-mode #tech-area {
                min-height: 72vh;
            }
        }

        #vm-main .tm-sec {
            flex-wrap: wrap;
        }

        .vm-docs {
            flex-basis: 100%;
            width: 100%;
        }

        /* ثبات الاتصال */
        #live-bar {
            position: fixed;
            top: 8px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1400;
            display: none;
            align-items: center;
            gap: 10px;
            background: #7C2D12;
            color: #fff;
            font-weight: 800;
            font-size: 13px;
            padding: 7px 8px 7px 14px;
            border-radius: 999px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
            max-width: calc(100vw - 24px);
        }

        #live-bar button {
            background: #fff;
            color: #7C2D12;
            border-radius: 999px;
            padding: 3px 12px;
            font-weight: 800;
            white-space: nowrap;
        }

        .live-dot {
            width: 10px;
            height: 10px;
            border-radius: 999px;
            display: inline-block;
            background: #F59E0B;
            box-shadow: 0 0 0 3px rgba(245, 158, 11, .25);
        }

        .live-dot.on {
            background: #22C55E;
            box-shadow: 0 0 0 3px rgba(34, 197, 94, .25);
        }

        /* ===== هوية جامعة الملك سعود: أزرق الشعار + أبيض (الدخول، الشريط العلوي، شاشة الانتظار، الخدمة الذاتية) ===== */
        #login-overlay {
            background: var(--k) !important;
            overflow: auto;
            padding: 16px;
        }

        .login-shell {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            max-width: 980px;
            background: #fff;
            border-radius: 28px;
            overflow: hidden;
            box-shadow: 0 30px 80px rgba(0, 40, 70, .35);
            border: 2px solid #fff;
            margin: auto;
        }

        .ksu-brand {
            flex: 1 1 320px;
            background: var(--k);
            color: #fff;
            padding: 36px 32px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            justify-content: center;
            text-align: start;
        }

        .ksu-brand img {
            width: 270px;
            max-width: 100%;
            height: auto;
            display: block;
            margin-bottom: 14px;
        }

        .kb-dept {
            font-size: 20px;
            font-weight: 800;
        }

        .kb-unit {
            font-size: 30px;
            font-weight: 800;
            line-height: 1.3;
        }

        .kb-en {
            font-size: 19px;
            font-weight: 800;
        }

        .kb-sep {
            height: 2px;
            background: rgba(255, 255, 255, .55);
            margin: 14px 0 6px;
        }

        .kb-app {
            font-size: 19px;
            font-weight: 800;
        }

        .login-form {
            flex: 1 1 380px;
        }

        @media (max-width: 720px) {
            .ksu-brand {
                padding: 22px 20px;
                align-items: center;
                text-align: center;
            }

            .ksu-brand img {
                width: 200px;
                margin: 0 auto 8px;
            }

            .kb-unit {
                font-size: 24px;
            }

            .kb-sep,
            .kb-app,
            .kb-en {
                display: none;
            }
        }

        #login-overlay .bg-purple-600 {
            background: var(--k2) !important;
        }

        #login-overlay .hover\:bg-purple-700:hover {
            background: var(--k3) !important;
        }

        #login-overlay .text-purple-900,
        #login-overlay .text-purple-800 {
            color: var(--ki) !important;
        }

        #login-overlay .bg-purple-50 {
            background: var(--kl) !important;
        }

        #login-overlay .border-purple-200 {
            border-color: var(--kb) !important;
        }

        #login-overlay .login-form>.ph-heartbeat {
            display: none;
        }

        #login-overlay .cl-card:hover {
            border-color: var(--km);
            background: var(--kf);
        }

        #login-overlay .cl-card.on {
            border-color: var(--k2);
            background: var(--k);
            box-shadow: 0 0 0 3px var(--kb);
        }

        #login-overlay .cl-card.on .cl-card-n,
        #login-overlay .cl-card.on .cl-card-m {
            color: #fff;
        }

        #login-overlay .cl-card-n {
            color: var(--ki);
        }

        #main-header {
            background: var(--k) !important;
            border-bottom: 3px solid #fff !important;
        }

        #main-header .bg-purple-800,
        #main-header .bg-red-600 {
            background: #fff !important;
            color: var(--k2) !important;
        }

        #main-header .hover\:bg-purple-700:hover,
        #main-header .hover\:bg-red-700:hover {
            background: var(--kl) !important;
        }

        #main-header .bg-purple-900 {
            background: var(--k3) !important;
        }

        #main-header .text-purple-900 {
            color: var(--ki) !important;
        }

        #main-header .text-purple-200,
        #main-header .text-purple-100 {
            color: #fff !important;
        }

        #location-header {
            background: var(--k3) !important;
            color: #fff !important;
        }

        .hdr-logo {
            height: 48px;
            width: auto;
            display: block;
        }

        .hdr-sep {
            width: 2px;
            align-self: stretch;
            background: rgba(255, 255, 255, .6);
        }

        .hdr-t {
            font-size: 22px;
            font-weight: 800;
            color: #fff;
            margin: 0;
            line-height: 1.15;
        }

        .hdr-s {
            display: block;
            font-size: 14px;
            font-weight: 700;
        }

        @media (max-width: 640px) {
            .hdr-logo {
                height: 36px;
            }

            .hdr-s {
                display: none;
            }
        }

        body:has(#tab-tv.active) {
            background: var(--k);
        }

        #tab-tv .tv-head {
            background: var(--k) !important;
            border: 2px solid #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 24px;
            flex-wrap: wrap;
        }

        #tab-tv .tv-head img {
            height: 84px;
            width: auto;
        }

        #tab-tv .tv-head .hdr-sep {
            height: 60px;
        }

        #tab-tv .border-red-500,
        #tab-tv .border-purple-500 {
            border-color: var(--k2) !important;
        }

        #tab-tv .text-red-600,
        #tab-tv .text-purple-700 {
            color: var(--k2) !important;
        }

        #tab-tv .bg-red-50 {
            background: var(--kl) !important;
        }

        #tab-tv .border-red-200 {
            border-color: var(--km) !important;
        }

        #tab-tv .text-red-900 {
            color: var(--ki) !important;
        }

        #tab-tv .bg-red-600 {
            background: var(--k) !important;
        }

        #tab-tv .bg-purple-100 {
            background: var(--kl) !important;
        }

        .k-brand img {
            height: 64px;
            width: auto;
            display: block;
        }

        html[dir="ltr"] .kb-en {
            display: none;
        }

        #main-header .bg-purple-800,
        #main-header .bg-purple-800.text-purple-100,
        #main-header .bg-purple-800.text-purple-200,
        #main-header .bg-red-600.text-white {
            color: var(--k2) !important;
        }

        #tab-tv .tv-head,
        #tab-tv .tv-head * {
            color: #fff !important;
        }

        .k-go:disabled {
            background: var(--km) !important;
        }

        .k-input.empty {
            color: var(--ki2) !important;
        }

        .tm-header {
            background: var(--k) !important;
        }

        .tm-sub {
            color: #fff !important;
        }

        .tm-icon-btn:not(.tm-plain):not(.tm-on) {
            background: var(--k3) !important;
        }

        .tm-tab.tm-active .tm-bar {
            background: var(--k2) !important;
        }

        @media (max-width: 720px) {
            #login-overlay .login-form h2 {
                margin-top: 40px;
            }
        }

        /* fixy88: ملاحظة الطبيب بالأحمر + زر الخروج أحمر وآخر الشريط + الزر العائم بجانب الغرفة */
        .note-chip {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: 11px;
            font-weight: 800;
            color: #B91C1C;
            background: #FEF2F2;
            border: 1px solid #FCA5A5;
            border-radius: 6px;
            padding: 1px 6px;
            line-height: 1.5;
        }

        .note-chip.long {
            cursor: pointer;
            text-decoration: underline dotted;
            text-underline-offset: 3px;
        }

        .note-chip.long:hover {
            background: #FEE2E2;
        }

        .tm-current .note-chip,
        .tm-sheet .note-chip {
            font-size: 13px;
            padding: 5px 10px;
            border-radius: 10px;
        }

        #main-header #logout-btn {
            background: #DC2626 !important;
            color: #fff !important;
            order: 99;
        }

        #main-header #logout-btn:hover {
            background: #B91C1C !important;
        }

        #mini-pin {
            font-size: 12px;
            font-weight: 800;
            color: #fff;
            background: var(--k);
            border: 0;
            border-radius: 6px;
            padding: 4px 10px;
            cursor: pointer;
            white-space: nowrap;
        }

        #mini-pin:hover {
            background: var(--k2);
        }

        body.call-busy button[onclick*="callNextPatient"],
        body.call-busy button[onclick*="techInitiateCall"],
        body.call-busy .tm-callnext,
        body.call-busy .tm-call {
            opacity: .55;
            pointer-events: none;
        }

        .tm-file-now {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            min-height: 48px;
            border: 1.5px solid var(--kb);
            border-radius: 14px;
            background: #fff;
            color: var(--ki);
            padding: 0 14px;
            font-family: inherit;
            cursor: pointer;
        }

        .tm-file-now span {
            font-size: 13px;
            font-weight: 700;
            color: var(--ki2);
        }

        .tm-file-now b {
            font-size: 24px;
            font-weight: 800;
            letter-spacing: 1px;
            direction: ltr;
            margin-inline-start: auto;
        }

        .tm-file-now:active {
            background: var(--kl);
        }

        /* fixy89: شاشة الطبيب على التابلت/الشاشات الصغيرة (769–1100px): الجدول يتحرك داخل إطاره بدل ما تتحرك الصفحة كلها */
        @media (min-width: 769px) and (max-width: 1100px) {
            #tab-doctor .overflow-x-auto {
                overflow-x: auto !important;
                overflow-y: visible !important;
                max-width: 100%;
                -webkit-overflow-scrolling: touch;
            }
        }

        /* ===== fixy90: ألوان النظام من الشعار (بدون شعار = البنفسجي الأصلي) ===== */
        :root {
            --p50: #faf5ff;
            --p100: #f3e8ff;
            --p200: #e9d5ff;
            --p300: #d8b4fe;
            --p400: #c084fc;
            --p500: #a855f7;
            --p600: #9333ea;
            --p700: #7e22ce;
            --p800: #6b21a8;
            --p900: #581c87;
            --p950: #3b0764;
            --v50: #f5f3ff;
            --v100: #ede9fe;
            --v200: #ddd6fe;
            --v300: #c4b5fd;
            --v400: #a78bfa;
            --v500: #8b5cf6;
            --v600: #7c3aed;
            --v700: #6d28d9;
            --v800: #5b21b6;
            --v900: #4c1d95;
            --v950: #2e1065;
            --k: #4C1D95;
            --k2: #6D28D9;
            --k3: #2E1065;
            --kl: #F5F3FF;
            --kb: #DDD6FE;
            --km: #C4B5FD;
            --kf: #FAF5FF;
            --ki: #2E1065;
            --ki2: #6B21A8;
        }

        .bg-purple-50 {
            background-color: var(--p50) !important
        }

        .text-purple-50 {
            color: var(--p50) !important
        }

        .border-purple-50 {
            border-color: var(--p50) !important
        }

        .hover\:bg-purple-50:hover {
            background-color: var(--p50) !important
        }

        .hover\:text-purple-50:hover {
            color: var(--p50) !important
        }

        .hover\:border-purple-50:hover {
            border-color: var(--p50) !important
        }

        .focus\:border-purple-50:focus {
            border-color: var(--p50) !important
        }

        .ring-purple-50,
        .focus\:ring-purple-50:focus {
            --tw-ring-color: var(--p50) !important
        }

        .border-l-purple-50 {
            border-left-color: var(--p50) !important
        }

        .border-r-purple-50 {
            border-right-color: var(--p50) !important
        }

        .border-t-purple-50 {
            border-top-color: var(--p50) !important
        }

        .border-b-purple-50 {
            border-bottom-color: var(--p50) !important
        }

        .from-purple-50 {
            --tw-gradient-from: var(--p50) !important;
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important
        }

        .to-purple-50 {
            --tw-gradient-to: var(--p50) !important
        }

        .bg-purple-100 {
            background-color: var(--p100) !important
        }

        .text-purple-100 {
            color: var(--p100) !important
        }

        .border-purple-100 {
            border-color: var(--p100) !important
        }

        .hover\:bg-purple-100:hover {
            background-color: var(--p100) !important
        }

        .hover\:text-purple-100:hover {
            color: var(--p100) !important
        }

        .hover\:border-purple-100:hover {
            border-color: var(--p100) !important
        }

        .focus\:border-purple-100:focus {
            border-color: var(--p100) !important
        }

        .ring-purple-100,
        .focus\:ring-purple-100:focus {
            --tw-ring-color: var(--p100) !important
        }

        .border-l-purple-100 {
            border-left-color: var(--p100) !important
        }

        .border-r-purple-100 {
            border-right-color: var(--p100) !important
        }

        .border-t-purple-100 {
            border-top-color: var(--p100) !important
        }

        .border-b-purple-100 {
            border-bottom-color: var(--p100) !important
        }

        .from-purple-100 {
            --tw-gradient-from: var(--p100) !important;
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important
        }

        .to-purple-100 {
            --tw-gradient-to: var(--p100) !important
        }

        .bg-purple-200 {
            background-color: var(--p200) !important
        }

        .text-purple-200 {
            color: var(--p200) !important
        }

        .border-purple-200 {
            border-color: var(--p200) !important
        }

        .hover\:bg-purple-200:hover {
            background-color: var(--p200) !important
        }

        .hover\:text-purple-200:hover {
            color: var(--p200) !important
        }

        .hover\:border-purple-200:hover {
            border-color: var(--p200) !important
        }

        .focus\:border-purple-200:focus {
            border-color: var(--p200) !important
        }

        .ring-purple-200,
        .focus\:ring-purple-200:focus {
            --tw-ring-color: var(--p200) !important
        }

        .border-l-purple-200 {
            border-left-color: var(--p200) !important
        }

        .border-r-purple-200 {
            border-right-color: var(--p200) !important
        }

        .border-t-purple-200 {
            border-top-color: var(--p200) !important
        }

        .border-b-purple-200 {
            border-bottom-color: var(--p200) !important
        }

        .from-purple-200 {
            --tw-gradient-from: var(--p200) !important;
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important
        }

        .to-purple-200 {
            --tw-gradient-to: var(--p200) !important
        }

        .bg-purple-300 {
            background-color: var(--p300) !important
        }

        .text-purple-300 {
            color: var(--p300) !important
        }

        .border-purple-300 {
            border-color: var(--p300) !important
        }

        .hover\:bg-purple-300:hover {
            background-color: var(--p300) !important
        }

        .hover\:text-purple-300:hover {
            color: var(--p300) !important
        }

        .hover\:border-purple-300:hover {
            border-color: var(--p300) !important
        }

        .focus\:border-purple-300:focus {
            border-color: var(--p300) !important
        }

        .ring-purple-300,
        .focus\:ring-purple-300:focus {
            --tw-ring-color: var(--p300) !important
        }

        .border-l-purple-300 {
            border-left-color: var(--p300) !important
        }

        .border-r-purple-300 {
            border-right-color: var(--p300) !important
        }

        .border-t-purple-300 {
            border-top-color: var(--p300) !important
        }

        .border-b-purple-300 {
            border-bottom-color: var(--p300) !important
        }

        .from-purple-300 {
            --tw-gradient-from: var(--p300) !important;
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important
        }

        .to-purple-300 {
            --tw-gradient-to: var(--p300) !important
        }

        .bg-purple-400 {
            background-color: var(--p400) !important
        }

        .text-purple-400 {
            color: var(--p400) !important
        }

        .border-purple-400 {
            border-color: var(--p400) !important
        }

        .hover\:bg-purple-400:hover {
            background-color: var(--p400) !important
        }

        .hover\:text-purple-400:hover {
            color: var(--p400) !important
        }

        .hover\:border-purple-400:hover {
            border-color: var(--p400) !important
        }

        .focus\:border-purple-400:focus {
            border-color: var(--p400) !important
        }

        .ring-purple-400,
        .focus\:ring-purple-400:focus {
            --tw-ring-color: var(--p400) !important
        }

        .border-l-purple-400 {
            border-left-color: var(--p400) !important
        }

        .border-r-purple-400 {
            border-right-color: var(--p400) !important
        }

        .border-t-purple-400 {
            border-top-color: var(--p400) !important
        }

        .border-b-purple-400 {
            border-bottom-color: var(--p400) !important
        }

        .from-purple-400 {
            --tw-gradient-from: var(--p400) !important;
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important
        }

        .to-purple-400 {
            --tw-gradient-to: var(--p400) !important
        }

        .bg-purple-500 {
            background-color: var(--p500) !important
        }

        .text-purple-500 {
            color: var(--p500) !important
        }

        .border-purple-500 {
            border-color: var(--p500) !important
        }

        .hover\:bg-purple-500:hover {
            background-color: var(--p500) !important
        }

        .hover\:text-purple-500:hover {
            color: var(--p500) !important
        }

        .hover\:border-purple-500:hover {
            border-color: var(--p500) !important
        }

        .focus\:border-purple-500:focus {
            border-color: var(--p500) !important
        }

        .ring-purple-500,
        .focus\:ring-purple-500:focus {
            --tw-ring-color: var(--p500) !important
        }

        .border-l-purple-500 {
            border-left-color: var(--p500) !important
        }

        .border-r-purple-500 {
            border-right-color: var(--p500) !important
        }

        .border-t-purple-500 {
            border-top-color: var(--p500) !important
        }

        .border-b-purple-500 {
            border-bottom-color: var(--p500) !important
        }

        .from-purple-500 {
            --tw-gradient-from: var(--p500) !important;
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important
        }

        .to-purple-500 {
            --tw-gradient-to: var(--p500) !important
        }

        .bg-purple-600 {
            background-color: var(--p600) !important
        }

        .text-purple-600 {
            color: var(--p600) !important
        }

        .border-purple-600 {
            border-color: var(--p600) !important
        }

        .hover\:bg-purple-600:hover {
            background-color: var(--p600) !important
        }

        .hover\:text-purple-600:hover {
            color: var(--p600) !important
        }

        .hover\:border-purple-600:hover {
            border-color: var(--p600) !important
        }

        .focus\:border-purple-600:focus {
            border-color: var(--p600) !important
        }

        .ring-purple-600,
        .focus\:ring-purple-600:focus {
            --tw-ring-color: var(--p600) !important
        }

        .border-l-purple-600 {
            border-left-color: var(--p600) !important
        }

        .border-r-purple-600 {
            border-right-color: var(--p600) !important
        }

        .border-t-purple-600 {
            border-top-color: var(--p600) !important
        }

        .border-b-purple-600 {
            border-bottom-color: var(--p600) !important
        }

        .from-purple-600 {
            --tw-gradient-from: var(--p600) !important;
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important
        }

        .to-purple-600 {
            --tw-gradient-to: var(--p600) !important
        }

        .bg-purple-700 {
            background-color: var(--p700) !important
        }

        .text-purple-700 {
            color: var(--p700) !important
        }

        .border-purple-700 {
            border-color: var(--p700) !important
        }

        .hover\:bg-purple-700:hover {
            background-color: var(--p700) !important
        }

        .hover\:text-purple-700:hover {
            color: var(--p700) !important
        }

        .hover\:border-purple-700:hover {
            border-color: var(--p700) !important
        }

        .focus\:border-purple-700:focus {
            border-color: var(--p700) !important
        }

        .ring-purple-700,
        .focus\:ring-purple-700:focus {
            --tw-ring-color: var(--p700) !important
        }

        .border-l-purple-700 {
            border-left-color: var(--p700) !important
        }

        .border-r-purple-700 {
            border-right-color: var(--p700) !important
        }

        .border-t-purple-700 {
            border-top-color: var(--p700) !important
        }

        .border-b-purple-700 {
            border-bottom-color: var(--p700) !important
        }

        .from-purple-700 {
            --tw-gradient-from: var(--p700) !important;
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important
        }

        .to-purple-700 {
            --tw-gradient-to: var(--p700) !important
        }

        .bg-purple-800 {
            background-color: var(--p800) !important
        }

        .text-purple-800 {
            color: var(--p800) !important
        }

        .border-purple-800 {
            border-color: var(--p800) !important
        }

        .hover\:bg-purple-800:hover {
            background-color: var(--p800) !important
        }

        .hover\:text-purple-800:hover {
            color: var(--p800) !important
        }

        .hover\:border-purple-800:hover {
            border-color: var(--p800) !important
        }

        .focus\:border-purple-800:focus {
            border-color: var(--p800) !important
        }

        .ring-purple-800,
        .focus\:ring-purple-800:focus {
            --tw-ring-color: var(--p800) !important
        }

        .border-l-purple-800 {
            border-left-color: var(--p800) !important
        }

        .border-r-purple-800 {
            border-right-color: var(--p800) !important
        }

        .border-t-purple-800 {
            border-top-color: var(--p800) !important
        }

        .border-b-purple-800 {
            border-bottom-color: var(--p800) !important
        }

        .from-purple-800 {
            --tw-gradient-from: var(--p800) !important;
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important
        }

        .to-purple-800 {
            --tw-gradient-to: var(--p800) !important
        }

        .bg-purple-900 {
            background-color: var(--p900) !important
        }

        .text-purple-900 {
            color: var(--p900) !important
        }

        .border-purple-900 {
            border-color: var(--p900) !important
        }

        .hover\:bg-purple-900:hover {
            background-color: var(--p900) !important
        }

        .hover\:text-purple-900:hover {
            color: var(--p900) !important
        }

        .hover\:border-purple-900:hover {
            border-color: var(--p900) !important
        }

        .focus\:border-purple-900:focus {
            border-color: var(--p900) !important
        }

        .ring-purple-900,
        .focus\:ring-purple-900:focus {
            --tw-ring-color: var(--p900) !important
        }

        .border-l-purple-900 {
            border-left-color: var(--p900) !important
        }

        .border-r-purple-900 {
            border-right-color: var(--p900) !important
        }

        .border-t-purple-900 {
            border-top-color: var(--p900) !important
        }

        .border-b-purple-900 {
            border-bottom-color: var(--p900) !important
        }

        .from-purple-900 {
            --tw-gradient-from: var(--p900) !important;
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important
        }

        .to-purple-900 {
            --tw-gradient-to: var(--p900) !important
        }

        .bg-purple-950 {
            background-color: var(--p950) !important
        }

        .text-purple-950 {
            color: var(--p950) !important
        }

        .border-purple-950 {
            border-color: var(--p950) !important
        }

        .hover\:bg-purple-950:hover {
            background-color: var(--p950) !important
        }

        .hover\:text-purple-950:hover {
            color: var(--p950) !important
        }

        .hover\:border-purple-950:hover {
            border-color: var(--p950) !important
        }

        .focus\:border-purple-950:focus {
            border-color: var(--p950) !important
        }

        .ring-purple-950,
        .focus\:ring-purple-950:focus {
            --tw-ring-color: var(--p950) !important
        }

        .border-l-purple-950 {
            border-left-color: var(--p950) !important
        }

        .border-r-purple-950 {
            border-right-color: var(--p950) !important
        }

        .border-t-purple-950 {
            border-top-color: var(--p950) !important
        }

        .border-b-purple-950 {
            border-bottom-color: var(--p950) !important
        }

        .from-purple-950 {
            --tw-gradient-from: var(--p950) !important;
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important
        }

        .to-purple-950 {
            --tw-gradient-to: var(--p950) !important
        }

        .bg-violet-50 {
            background-color: var(--v50) !important
        }

        .text-violet-50 {
            color: var(--v50) !important
        }

        .border-violet-50 {
            border-color: var(--v50) !important
        }

        .hover\:bg-violet-50:hover {
            background-color: var(--v50) !important
        }

        .hover\:text-violet-50:hover {
            color: var(--v50) !important
        }

        .hover\:border-violet-50:hover {
            border-color: var(--v50) !important
        }

        .focus\:border-violet-50:focus {
            border-color: var(--v50) !important
        }

        .ring-violet-50,
        .focus\:ring-violet-50:focus {
            --tw-ring-color: var(--v50) !important
        }

        .border-l-violet-50 {
            border-left-color: var(--v50) !important
        }

        .border-r-violet-50 {
            border-right-color: var(--v50) !important
        }

        .border-t-violet-50 {
            border-top-color: var(--v50) !important
        }

        .border-b-violet-50 {
            border-bottom-color: var(--v50) !important
        }

        .from-violet-50 {
            --tw-gradient-from: var(--v50) !important;
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important
        }

        .to-violet-50 {
            --tw-gradient-to: var(--v50) !important
        }

        .bg-violet-100 {
            background-color: var(--v100) !important
        }

        .text-violet-100 {
            color: var(--v100) !important
        }

        .border-violet-100 {
            border-color: var(--v100) !important
        }

        .hover\:bg-violet-100:hover {
            background-color: var(--v100) !important
        }

        .hover\:text-violet-100:hover {
            color: var(--v100) !important
        }

        .hover\:border-violet-100:hover {
            border-color: var(--v100) !important
        }

        .focus\:border-violet-100:focus {
            border-color: var(--v100) !important
        }

        .ring-violet-100,
        .focus\:ring-violet-100:focus {
            --tw-ring-color: var(--v100) !important
        }

        .border-l-violet-100 {
            border-left-color: var(--v100) !important
        }

        .border-r-violet-100 {
            border-right-color: var(--v100) !important
        }

        .border-t-violet-100 {
            border-top-color: var(--v100) !important
        }

        .border-b-violet-100 {
            border-bottom-color: var(--v100) !important
        }

        .from-violet-100 {
            --tw-gradient-from: var(--v100) !important;
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important
        }

        .to-violet-100 {
            --tw-gradient-to: var(--v100) !important
        }

        .bg-violet-200 {
            background-color: var(--v200) !important
        }

        .text-violet-200 {
            color: var(--v200) !important
        }

        .border-violet-200 {
            border-color: var(--v200) !important
        }

        .hover\:bg-violet-200:hover {
            background-color: var(--v200) !important
        }

        .hover\:text-violet-200:hover {
            color: var(--v200) !important
        }

        .hover\:border-violet-200:hover {
            border-color: var(--v200) !important
        }

        .focus\:border-violet-200:focus {
            border-color: var(--v200) !important
        }

        .ring-violet-200,
        .focus\:ring-violet-200:focus {
            --tw-ring-color: var(--v200) !important
        }

        .border-l-violet-200 {
            border-left-color: var(--v200) !important
        }

        .border-r-violet-200 {
            border-right-color: var(--v200) !important
        }

        .border-t-violet-200 {
            border-top-color: var(--v200) !important
        }

        .border-b-violet-200 {
            border-bottom-color: var(--v200) !important
        }

        .from-violet-200 {
            --tw-gradient-from: var(--v200) !important;
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important
        }

        .to-violet-200 {
            --tw-gradient-to: var(--v200) !important
        }

        .bg-violet-300 {
            background-color: var(--v300) !important
        }

        .text-violet-300 {
            color: var(--v300) !important
        }

        .border-violet-300 {
            border-color: var(--v300) !important
        }

        .hover\:bg-violet-300:hover {
            background-color: var(--v300) !important
        }

        .hover\:text-violet-300:hover {
            color: var(--v300) !important
        }

        .hover\:border-violet-300:hover {
            border-color: var(--v300) !important
        }

        .focus\:border-violet-300:focus {
            border-color: var(--v300) !important
        }

        .ring-violet-300,
        .focus\:ring-violet-300:focus {
            --tw-ring-color: var(--v300) !important
        }

        .border-l-violet-300 {
            border-left-color: var(--v300) !important
        }

        .border-r-violet-300 {
            border-right-color: var(--v300) !important
        }

        .border-t-violet-300 {
            border-top-color: var(--v300) !important
        }

        .border-b-violet-300 {
            border-bottom-color: var(--v300) !important
        }

        .from-violet-300 {
            --tw-gradient-from: var(--v300) !important;
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important
        }

        .to-violet-300 {
            --tw-gradient-to: var(--v300) !important
        }

        .bg-violet-400 {
            background-color: var(--v400) !important
        }

        .text-violet-400 {
            color: var(--v400) !important
        }

        .border-violet-400 {
            border-color: var(--v400) !important
        }

        .hover\:bg-violet-400:hover {
            background-color: var(--v400) !important
        }

        .hover\:text-violet-400:hover {
            color: var(--v400) !important
        }

        .hover\:border-violet-400:hover {
            border-color: var(--v400) !important
        }

        .focus\:border-violet-400:focus {
            border-color: var(--v400) !important
        }

        .ring-violet-400,
        .focus\:ring-violet-400:focus {
            --tw-ring-color: var(--v400) !important
        }

        .border-l-violet-400 {
            border-left-color: var(--v400) !important
        }

        .border-r-violet-400 {
            border-right-color: var(--v400) !important
        }

        .border-t-violet-400 {
            border-top-color: var(--v400) !important
        }

        .border-b-violet-400 {
            border-bottom-color: var(--v400) !important
        }

        .from-violet-400 {
            --tw-gradient-from: var(--v400) !important;
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important
        }

        .to-violet-400 {
            --tw-gradient-to: var(--v400) !important
        }

        .bg-violet-500 {
            background-color: var(--v500) !important
        }

        .text-violet-500 {
            color: var(--v500) !important
        }

        .border-violet-500 {
            border-color: var(--v500) !important
        }

        .hover\:bg-violet-500:hover {
            background-color: var(--v500) !important
        }

        .hover\:text-violet-500:hover {
            color: var(--v500) !important
        }

        .hover\:border-violet-500:hover {
            border-color: var(--v500) !important
        }

        .focus\:border-violet-500:focus {
            border-color: var(--v500) !important
        }

        .ring-violet-500,
        .focus\:ring-violet-500:focus {
            --tw-ring-color: var(--v500) !important
        }

        .border-l-violet-500 {
            border-left-color: var(--v500) !important
        }

        .border-r-violet-500 {
            border-right-color: var(--v500) !important
        }

        .border-t-violet-500 {
            border-top-color: var(--v500) !important
        }

        .border-b-violet-500 {
            border-bottom-color: var(--v500) !important
        }

        .from-violet-500 {
            --tw-gradient-from: var(--v500) !important;
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important
        }

        .to-violet-500 {
            --tw-gradient-to: var(--v500) !important
        }

        .bg-violet-600 {
            background-color: var(--v600) !important
        }

        .text-violet-600 {
            color: var(--v600) !important
        }

        .border-violet-600 {
            border-color: var(--v600) !important
        }

        .hover\:bg-violet-600:hover {
            background-color: var(--v600) !important
        }

        .hover\:text-violet-600:hover {
            color: var(--v600) !important
        }

        .hover\:border-violet-600:hover {
            border-color: var(--v600) !important
        }

        .focus\:border-violet-600:focus {
            border-color: var(--v600) !important
        }

        .ring-violet-600,
        .focus\:ring-violet-600:focus {
            --tw-ring-color: var(--v600) !important
        }

        .border-l-violet-600 {
            border-left-color: var(--v600) !important
        }

        .border-r-violet-600 {
            border-right-color: var(--v600) !important
        }

        .border-t-violet-600 {
            border-top-color: var(--v600) !important
        }

        .border-b-violet-600 {
            border-bottom-color: var(--v600) !important
        }

        .from-violet-600 {
            --tw-gradient-from: var(--v600) !important;
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important
        }

        .to-violet-600 {
            --tw-gradient-to: var(--v600) !important
        }

        .bg-violet-700 {
            background-color: var(--v700) !important
        }

        .text-violet-700 {
            color: var(--v700) !important
        }

        .border-violet-700 {
            border-color: var(--v700) !important
        }

        .hover\:bg-violet-700:hover {
            background-color: var(--v700) !important
        }

        .hover\:text-violet-700:hover {
            color: var(--v700) !important
        }

        .hover\:border-violet-700:hover {
            border-color: var(--v700) !important
        }

        .focus\:border-violet-700:focus {
            border-color: var(--v700) !important
        }

        .ring-violet-700,
        .focus\:ring-violet-700:focus {
            --tw-ring-color: var(--v700) !important
        }

        .border-l-violet-700 {
            border-left-color: var(--v700) !important
        }

        .border-r-violet-700 {
            border-right-color: var(--v700) !important
        }

        .border-t-violet-700 {
            border-top-color: var(--v700) !important
        }

        .border-b-violet-700 {
            border-bottom-color: var(--v700) !important
        }

        .from-violet-700 {
            --tw-gradient-from: var(--v700) !important;
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important
        }

        .to-violet-700 {
            --tw-gradient-to: var(--v700) !important
        }

        .bg-violet-800 {
            background-color: var(--v800) !important
        }

        .text-violet-800 {
            color: var(--v800) !important
        }

        .border-violet-800 {
            border-color: var(--v800) !important
        }

        .hover\:bg-violet-800:hover {
            background-color: var(--v800) !important
        }

        .hover\:text-violet-800:hover {
            color: var(--v800) !important
        }

        .hover\:border-violet-800:hover {
            border-color: var(--v800) !important
        }

        .focus\:border-violet-800:focus {
            border-color: var(--v800) !important
        }

        .ring-violet-800,
        .focus\:ring-violet-800:focus {
            --tw-ring-color: var(--v800) !important
        }

        .border-l-violet-800 {
            border-left-color: var(--v800) !important
        }

        .border-r-violet-800 {
            border-right-color: var(--v800) !important
        }

        .border-t-violet-800 {
            border-top-color: var(--v800) !important
        }

        .border-b-violet-800 {
            border-bottom-color: var(--v800) !important
        }

        .from-violet-800 {
            --tw-gradient-from: var(--v800) !important;
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important
        }

        .to-violet-800 {
            --tw-gradient-to: var(--v800) !important
        }

        .bg-violet-900 {
            background-color: var(--v900) !important
        }

        .text-violet-900 {
            color: var(--v900) !important
        }

        .border-violet-900 {
            border-color: var(--v900) !important
        }

        .hover\:bg-violet-900:hover {
            background-color: var(--v900) !important
        }

        .hover\:text-violet-900:hover {
            color: var(--v900) !important
        }

        .hover\:border-violet-900:hover {
            border-color: var(--v900) !important
        }

        .focus\:border-violet-900:focus {
            border-color: var(--v900) !important
        }

        .ring-violet-900,
        .focus\:ring-violet-900:focus {
            --tw-ring-color: var(--v900) !important
        }

        .border-l-violet-900 {
            border-left-color: var(--v900) !important
        }

        .border-r-violet-900 {
            border-right-color: var(--v900) !important
        }

        .border-t-violet-900 {
            border-top-color: var(--v900) !important
        }

        .border-b-violet-900 {
            border-bottom-color: var(--v900) !important
        }

        .from-violet-900 {
            --tw-gradient-from: var(--v900) !important;
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important
        }

        .to-violet-900 {
            --tw-gradient-to: var(--v900) !important
        }

        .bg-violet-950 {
            background-color: var(--v950) !important
        }

        .text-violet-950 {
            color: var(--v950) !important
        }

        .border-violet-950 {
            border-color: var(--v950) !important
        }

        .hover\:bg-violet-950:hover {
            background-color: var(--v950) !important
        }

        .hover\:text-violet-950:hover {
            color: var(--v950) !important
        }

        .hover\:border-violet-950:hover {
            border-color: var(--v950) !important
        }

        .focus\:border-violet-950:focus {
            border-color: var(--v950) !important
        }

        .ring-violet-950,
        .focus\:ring-violet-950:focus {
            --tw-ring-color: var(--v950) !important
        }

        .border-l-violet-950 {
            border-left-color: var(--v950) !important
        }

        .border-r-violet-950 {
            border-right-color: var(--v950) !important
        }

        .border-t-violet-950 {
            border-top-color: var(--v950) !important
        }

        .border-b-violet-950 {
            border-bottom-color: var(--v950) !important
        }

        .from-violet-950 {
            --tw-gradient-from: var(--v950) !important;
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important
        }

        .to-violet-950 {
            --tw-gradient-to: var(--v950) !important
        }

        body.no-logo .ksu-logo,
        body.no-logo .hdr-sep,
        body.no-logo .wl {
            display: none !important;
        }

        body:not(.no-logo) .nl {
            display: none !important;
        }

        .kb-viq {
            font-size: 64px;
            font-weight: 800;
            line-height: 1;
            letter-spacing: 1px;
            direction: ltr;
        }

        .k-brand .k-viq {
            font-size: 34px;
            font-weight: 800;
            color: #fff;
        }

        .brand-card .sw {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            border: 2px solid #e5e7eb;
        }

        .brand-card .lg {
            max-width: 220px;
            max-height: 90px;
            background: repeating-conic-gradient(#f3f4f6 0% 25%, #fff 0% 50%) 50%/16px 16px;
            border-radius: 10px;
            padding: 6px;
        }

        .set-row .brand-up {
            display: inline-block;
            border: 1px solid #D1D5DB;
            border-radius: 8px;
            padding: 4px 10px;
            font-weight: 700;
            font-size: 13px;
            background: #fff;
        }

        /* fixy91: إشعار أولوية مريض الطبيب */
        .doc-prio {
            margin: 6px 0;
            font-size: 14px;
            font-weight: 700;
            color: #7C2D12;
            background: #FEF3C7;
            border: 2px solid #F59E0B;
            border-radius: 12px;
            padding: 8px 12px;
        }

        .doc-prio b {
            font-weight: 800;
        }

        .tm-prio-doc {
            margin: 8px 4px 0;
            font-size: 15px;
        }

        /* fixy94: شرح زر «إبقاء الشاشة تعمل» */
        .hint-i {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fff;
            color: var(--k2);
            font-size: 13px;
            font-weight: 800;
            cursor: help;
            margin-inline-start: -4px;
            flex: none;
        }

        .hint-i .hint-t {
            display: none;
            position: absolute;
            top: calc(100% + 8px);
            inset-inline-end: -8px;
            width: 260px;
            background: #1F2937;
            color: #fff;
            font-size: 13px;
            font-weight: 600;
            line-height: 1.6;
            padding: 10px 12px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
            z-index: 60;
            text-align: start;
            white-space: normal;
        }

        .hint-i:hover .hint-t,
        .hint-i:focus .hint-t {
            display: block;
        }

        .tm-hint {
            display: block;
            font-size: 12px;
            font-weight: 600;
            color: #6B7280;
            line-height: 1.5;
            margin-top: 2px;
        }

        /* fixy95: الجولة التعريفية */
        #tour {
            position: fixed;
            inset: 0;
            z-index: 100500;
            font-family: inherit;
        }

        #tour .tr-shade {
            position: absolute;
            inset: 0;
        }

        #tour .tr-spot {
            position: fixed;
            border-radius: 12px;
            box-shadow: 0 0 0 9999px rgba(15, 10, 30, .6), 0 0 0 3px #fff, 0 0 0 7px var(--k2);
            pointer-events: none;
            transition: all .25s ease;
        }

        #tour .tr-bub {
            position: fixed;
            background: #fff;
            color: #1F2937;
            border-radius: 16px;
            padding: 14px 16px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
            display: flex;
            flex-direction: column;
            gap: 8px;
            transition: top .25s ease, left .25s ease;
        }

        #tour .tr-h {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
        }

        #tour .tr-h b {
            font-size: 16px;
            font-weight: 800;
            color: var(--ki);
        }

        #tour .tr-n {
            font-size: 12px;
            font-weight: 800;
            color: #6B7280;
            background: #F3F4F6;
            border-radius: 999px;
            padding: 2px 8px;
            white-space: nowrap;
        }

        #tour .tr-d {
            font-size: 14px;
            font-weight: 600;
            line-height: 1.7;
            color: #374151;
        }

        #tour .tr-a {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
            margin-top: 4px;
        }

        #tour .tr-g {
            display: flex;
            gap: 6px;
        }

        #tour button {
            border-radius: 10px;
            font-size: 14px;
            font-weight: 800;
            padding: 8px 14px;
            border: 0;
            cursor: pointer;
            font-family: inherit;
        }

        #tour .tr-skip {
            background: transparent;
            color: #6B7280;
            padding-inline: 4px;
        }

        #tour .tr-prev {
            background: #F3F4F6;
            color: #374151;
        }

        #tour .tr-next {
            background: var(--k2);
            color: #fff;
        }

        /* fixy98: تنبيه انتهاء الجلسة */
        #sess-bar {
            position: fixed;
            bottom: 16px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1500;
            display: flex;
            align-items: center;
            gap: 12px;
            background: #7C2D12;
            color: #fff;
            font-weight: 800;
            font-size: 14px;
            padding: 10px 12px 10px 18px;
            border-radius: 999px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
            max-width: calc(100vw - 24px);
        }

        #sess-bar button {
            background: #fff;
            color: #7C2D12;
            border-radius: 999px;
            padding: 6px 14px;
            font-weight: 800;
            white-space: nowrap;
            border: 0;
            cursor: pointer;
        }

/* fixy107: «يسمح بإعادة المريض بعد: N أيام» — النص فوق الخانة */
.ex-card label.ex-rep { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ex-card .ex-rep-t { font-size: 11px; font-weight: 800; color: #57534E; }
.ex-card .ex-rep-r { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }