/* ==========================================================================
   Relox Virtual Lab - Modern Healthcare Design System & Tokens
   Version: 2.0.0 (2026) - Centre Portal professional refresh
   ========================================================================== */

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

:root {
    /* Primary Typography */
    --rx-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --rx-font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, Menlo, monospace;

    /* Brand Color Palette */
    --rx-primary-50: #f0f9ff;
    --rx-primary-100: #e0f2fe;
    --rx-primary-200: #bae6fd;
    --rx-primary-300: #7dd3fc;
    --rx-primary-400: #38bdf8;
    --rx-primary-500: #0ea5e9;
    --rx-primary-600: #0284c7;
    --rx-primary-700: #0369a1;
    --rx-primary-800: #075985;
    --rx-primary-900: #0c4a6e;

    /* Clinical Status Colors */
    --rx-success: #059669;
    --rx-success-hover: #047857;
    --rx-success-light: #ecfdf5;
    --rx-success-border: #a7f3d0;

    --rx-danger: #dc2626;
    --rx-danger-hover: #b91c1c;
    --rx-danger-light: #fef2f2;
    --rx-danger-border: #fecaca;

    --rx-warning: #d97706;
    --rx-warning-hover: #b45309;
    --rx-warning-light: #fffbeb;
    --rx-warning-border: #fde68a;

    --rx-info: #0284c7;
    --rx-info-light: #f0f9ff;
    --rx-info-border: #bae6fd;

    /* Surface & Background */
    --rx-bg-app: #f3f6fa;
    --rx-bg-surface: #ffffff;
    --rx-bg-subtle: #f8fafc;
    --rx-bg-muted: #f1f5f9;
    --rx-bg-sidebar: #0f172a;
    --rx-bg-sidebar-deep: #0b1120;
    --rx-bg-sidebar-hover: rgba(148, 163, 184, 0.10);
    --rx-bg-sidebar-open: rgba(148, 163, 184, 0.07);
    --rx-bg-sidebar-active: rgba(56, 189, 248, 0.14);

    /* Text Colors */
    --rx-text-main: #0f172a;
    --rx-text-secondary: #334155;
    --rx-text-label: #475569;
    --rx-text-muted: #64748b;
    --rx-text-light: #94a3b8;
    --rx-text-white: #ffffff;
    --rx-sidebar-text: #aab6c8;

    /* Borders & Dividers */
    --rx-border: #e2e8f0;
    --rx-border-input: #d3dbe5;
    --rx-border-input-hover: #b4c0cf;
    --rx-border-focus: #0284c7;
    --rx-border-dark: #cbd5e1;
    --rx-focus-ring: 0 0 0 3px rgba(2, 132, 199, 0.14);

    /* Shadows & Elevation */
    --rx-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
    --rx-shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.07), 0 1px 2px -1px rgba(15, 23, 42, 0.05);
    --rx-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
    --rx-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.10), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
    --rx-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.05);

    /* Radii */
    --rx-radius-sm: 6px;
    --rx-radius-md: 8px;
    --rx-radius-lg: 12px;
    --rx-radius-xl: 16px;
    --rx-radius-pill: 9999px;

    /* Layout */
    --rx-header-h: 60px;
}

/* ==========================================================================
   Global Base & Typography
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--rx-font-sans) !important;
    background-color: var(--rx-bg-app) !important;
    color: var(--rx-text-main) !important;
    font-size: 0.9rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ensure Font Awesome 5 Free icons ALWAYS render correctly with solid glyphs */
.fa,
.fas,
.far,
.fab,
i[class*="fa-"],
i[class^="fa-"],
span[class*="fa-"],
span[class^="fa-"] {
    font-family: "Font Awesome 5 Free" !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.fa,
.fas,
i.fa,
i.fas {
    font-weight: 900 !important;
}

.far,
i.far {
    font-weight: 400 !important;
}

.fab,
i.fab {
    font-family: "Font Awesome 5 Brands" !important;
    font-weight: 400 !important;
}

/* Tabular numbers for test values, money, and serial numbers */
.table td, .table th, .small-box h3, .lab-value, .currency-value, .dataTables_info, .dataTables_paginate {
    font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--rx-font-sans) !important;
    font-weight: 700;
    color: var(--rx-text-main);
    letter-spacing: -0.2px;
}

a {
    color: var(--rx-primary-600);
}

a:hover {
    color: var(--rx-primary-700);
}

::selection {
    background: var(--rx-primary-100);
    color: var(--rx-primary-900);
}

/* Thin, unobtrusive scrollbars */
.main-sidebar .sidebar::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.dataTables_scrollBody::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.main-sidebar .sidebar::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.25);
    border-radius: 6px;
}

.table-responsive::-webkit-scrollbar-thumb,
.dataTables_scrollBody::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 6px;
}

/* ==========================================================================
   Header Navbar (Top Bar)
   ========================================================================== */
.main-header.navbar {
    background: #ffffff !important;
    border-bottom: 1px solid var(--rx-border) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02) !important;
    min-height: var(--rx-header-h);
    padding: 0.5rem 1.25rem 0.5rem 0.75rem !important;
}

.main-header .nav-link {
    color: var(--rx-text-secondary) !important;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.4rem 0.75rem !important;
    border-radius: var(--rx-radius-md);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.main-header .nav-link:hover {
    color: var(--rx-primary-700) !important;
    background: var(--rx-bg-muted);
}

.main-header .rx-menu-toggle {
    width: 38px;
    height: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--rx-text-muted) !important;
    font-size: 1rem;
}

/* Centre identity chip */
.rx-centre-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 0.5rem;
    padding: 4px 14px 4px 4px;
    background: var(--rx-bg-subtle);
    border: 1px solid var(--rx-border);
    border-radius: var(--rx-radius-lg);
    max-width: 46vw;
}

.rx-centre-chip-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--rx-primary-600), var(--rx-primary-800));
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.rx-centre-chip-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.rx-centre-chip-text small {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rx-text-light);
}

.rx-centre-chip-text label,
#lblcentrename {
    margin: 0 !important;
    font-size: 0.925rem;
    font-weight: 700;
    color: var(--rx-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}

/* Low credit / account warning */
.rx-credit-alert {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 0.75rem;
    padding: 6px 12px;
    background: var(--rx-warning-light);
    border: 1px solid var(--rx-warning-border);
    color: var(--rx-warning-hover);
    border-radius: var(--rx-radius-pill);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 32vw;
}

.rx-credit-alert label {
    margin: 0 !important;
    font-weight: 600;
    cursor: default;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* User menu */
.main-header .rx-user-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    height: 44px !important;
    padding: 4px 10px 4px 4px !important;
    border: 1px solid transparent;
}

.main-header .rx-user-toggle:hover,
.main-header .show > .rx-user-toggle {
    background: var(--rx-bg-subtle);
    border-color: var(--rx-border);
}

.rx-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rx-primary-500), var(--rx-primary-700));
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px var(--rx-primary-100);
}

.rx-avatar-lg {
    width: 40px;
    height: 40px;
    font-size: 1rem;
}

.rx-user-name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--rx-text-main);
}

.dropdown-menu {
    border: 1px solid var(--rx-border) !important;
    border-radius: var(--rx-radius-lg) !important;
    box-shadow: var(--rx-shadow-lg) !important;
    padding: 0.4rem !important;
}

.rx-user-menu {
    min-width: 250px;
    margin-top: 8px !important;
}

.rx-user-menu-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0.6rem 0.75rem;
}

.rx-user-menu-head .rx-avatar {
    box-shadow: none;
}

.rx-user-menu-head strong {
    display: block;
    font-size: 0.9rem;
    color: var(--rx-text-main);
    line-height: 1.25;
}

.rx-user-menu-head small {
    display: block;
    font-size: 0.75rem;
    color: var(--rx-text-muted);
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-divider {
    margin: 0.35rem 0 !important;
    border-top-color: var(--rx-border) !important;
}

.dropdown-item {
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.55rem 0.75rem !important;
    border-radius: var(--rx-radius-md);
    color: var(--rx-text-secondary) !important;
    display: flex;
    align-items: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dropdown-item i {
    width: 18px;
    margin-right: 10px;
    text-align: center;
    color: var(--rx-text-light);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--rx-bg-muted) !important;
    color: var(--rx-text-main) !important;
}

.dropdown-item.rx-logout:hover,
.dropdown-item.rx-logout:hover i {
    background-color: var(--rx-danger-light) !important;
    color: var(--rx-danger) !important;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */
.main-sidebar,
.main-sidebar::before {
    background-color: var(--rx-bg-sidebar) !important;
}

.main-sidebar {
    box-shadow: 1px 0 0 rgba(15, 23, 42, 0.9), 4px 0 18px rgba(15, 23, 42, 0.12) !important;
}

.main-sidebar .brand-link,
.brand-link {
    background: var(--rx-bg-sidebar-deep) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.10) !important;
    padding: 0 1rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    height: var(--rx-header-h) !important;
    text-decoration: none !important;
    overflow: hidden;
}

.main-sidebar .brand-link .brand-image,
.brand-link .brand-image {
    width: 34px !important;
    height: 34px !important;
    max-height: 34px !important;
    max-width: 34px !important;
    float: none !important;
    margin: 0 !important;
    object-fit: contain !important;
    border-radius: 50%;
    box-shadow: none !important;
    flex-shrink: 0;
}

.main-sidebar .brand-link img.img-fluid,
.brand-link img.img-fluid {
    max-height: 36px !important;
    width: auto !important;
    max-width: 180px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

.main-sidebar .brand-link .brand-text,
.brand-link .brand-text {
    display: flex;
    flex-direction: column;
    font-weight: 700 !important;
    font-size: 1rem !important;
    line-height: 1.15;
    color: #ffffff !important;
    letter-spacing: -0.2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.brand-link .brand-text small {
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rx-primary-300);
    margin-top: 2px;
}

.layout-fixed .wrapper .sidebar {
    height: calc(100vh - var(--rx-header-h)) !important;
}

.main-sidebar .sidebar {
    padding: 0 !important;
}

/* User panel */
.main-sidebar .user-panel {
    margin: 0.75rem 0.75rem 0.25rem !important;
    padding: 0.65rem 0.7rem !important;
    border: 1px solid rgba(148, 163, 184, 0.10) !important;
    border-radius: var(--rx-radius-lg);
    background: rgba(148, 163, 184, 0.06);
    overflow: hidden;
}

.main-sidebar .user-panel .image {
    padding-left: 0 !important;
    display: flex;
}

.main-sidebar .user-panel .rx-avatar {
    box-shadow: 0 0 0 2px var(--rx-bg-sidebar), 0 0 0 3px rgba(56, 189, 248, 0.45);
}

.main-sidebar .user-panel .info {
    padding: 0 0 0 0.7rem !important;
    min-width: 0;
    line-height: 1.2;
}

.main-sidebar .user-panel .info a,
.main-sidebar .user-panel a.d-block {
    color: #f1f5f9 !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    letter-spacing: 0 !important;
    text-shadow: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}

.rx-user-status {
    display: block;
    font-size: 0.72rem;
    color: #7c8ba1;
    margin-top: 2px;
}

.rx-user-status i {
    font-size: 0.45rem;
    color: #34d399;
    vertical-align: middle;
    margin-right: 3px;
}

/* Menu */
.nav-sidebar {
    padding: 0.25rem 0.75rem 1.5rem !important;
}

.nav-sidebar .nav-header {
    color: #64748b !important;
    font-size: 0.66rem !important;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 0.85rem 0.7rem 0.4rem !important;
    background: transparent !important;
}

.nav-sidebar .nav-item {
    margin-bottom: 2px;
}

.nav-sidebar .nav-link {
    position: relative;
    color: var(--rx-sidebar-text) !important;
    font-weight: 500 !important;
    font-size: 0.855rem !important;
    line-height: 1.3;
    border-radius: var(--rx-radius-md) !important;
    padding: 0.55rem 2rem 0.55rem 0.7rem !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    display: flex;
    align-items: center;
    white-space: normal;
    box-shadow: none !important;
    cursor: pointer;
}

.nav-sidebar .nav-link p {
    margin: 0 !important;
    white-space: nowrap;
}

.nav-sidebar .nav-icon {
    width: 1.35rem !important;
    min-width: 1.35rem;
    font-size: 0.95rem !important;
    margin-right: 0.7rem !important;
    margin-left: 0 !important;
    text-align: center;
    color: #7c8ba1;
    transition: color 0.15s ease;
}

.nav-sidebar .nav-link > .right,
.nav-sidebar .nav-link > p > .right {
    position: absolute !important;
    right: 0.75rem !important;
    top: 50% !important;
    margin-top: -0.4rem;
    font-size: 0.75rem;
    line-height: 0.8rem;
    color: #64748b;
    transition: transform 0.2s ease;
}

.nav-sidebar .nav-link:hover {
    color: #f8fafc !important;
    background-color: var(--rx-bg-sidebar-hover) !important;
}

.nav-sidebar .nav-link:hover .nav-icon {
    color: #e2e8f0;
}

/* Open group */
.nav-sidebar .nav-item.menu-open > .nav-link,
.nav-sidebar .nav-link.rx-parent-active {
    color: #f8fafc !important;
    background-color: var(--rx-bg-sidebar-open) !important;
    font-weight: 600 !important;
}

.nav-sidebar .nav-item.menu-open > .nav-link .nav-icon,
.nav-sidebar .nav-link.rx-parent-active .nav-icon {
    color: var(--rx-primary-400);
}

/* Active top-level item (e.g. Dashboard) */
.nav-sidebar > .nav-item > .nav-link.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--rx-primary-600), var(--rx-primary-700)) !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.28) !important;
}

.nav-sidebar > .nav-item > .nav-link.active .nav-icon,
.nav-sidebar > .nav-item > .nav-link.active .right {
    color: #ffffff;
}

/* Sub menus */
.nav-sidebar .nav-treeview {
    margin: 2px 0 6px 1.35rem !important;
    padding: 0 0 0 0.45rem !important;
    border-left: 1px solid rgba(148, 163, 184, 0.14);
    background: transparent !important;
}

.nav-sidebar .nav-treeview .nav-item {
    margin-bottom: 1px;
}

.nav-sidebar .nav-treeview .nav-link {
    font-size: 0.82rem !important;
    padding: 0.42rem 1.9rem 0.42rem 0.55rem !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

.nav-sidebar .nav-treeview .nav-icon {
    width: 1rem !important;
    min-width: 1rem;
    margin-right: 0.5rem !important;
    font-size: 0.8rem !important;
}

/* Bullet dots for leaf items */
.nav-sidebar .nav-treeview .nav-icon.fa-circle {
    font-size: 0.38rem !important;
    color: #475569;
}

.nav-sidebar .nav-treeview .nav-link:hover {
    color: #f1f5f9 !important;
    background-color: var(--rx-bg-sidebar-hover) !important;
}

.nav-sidebar .nav-treeview .nav-link:hover .nav-icon.fa-circle {
    color: #94a3b8;
}

/* Active leaf item */
.nav-sidebar .nav-treeview .nav-link.active,
.nav-sidebar .nav-treeview .nav-link.active:hover {
    color: #e0f2fe !important;
    background-color: var(--rx-bg-sidebar-active) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.nav-sidebar .nav-treeview .nav-link.active::before {
    content: "";
    position: absolute;
    left: calc(-0.45rem - 1px);
    top: 20%;
    bottom: 20%;
    width: 2px;
    border-radius: 2px;
    background: var(--rx-primary-400);
}

.nav-sidebar .nav-treeview .nav-link.active .nav-icon {
    color: var(--rx-primary-400);
}

/* Nested groups (Purchase / Inward / Reports) */
.nav-sidebar .nav-treeview .nav-treeview {
    margin-left: 0.75rem !important;
}

/* Collapsed (mini) sidebar */
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar {
    padding: 0.25rem 0.5rem !important;
}

.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-link {
    padding: 0.6rem 0 !important;
    justify-content: center;
}

.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-icon {
    margin-right: 0 !important;
}

.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-link p,
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-link > .right,
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-header,
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-treeview,
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .user-panel .info,
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .brand-text {
    display: none !important;
}

.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .user-panel {
    margin: 0.75rem 0.5rem 0.25rem !important;
    padding: 0.5rem 0 !important;
    justify-content: center;
    border-color: transparent !important;
    background: transparent;
}

.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .brand-link {
    justify-content: center;
    padding: 0 !important;
}

/* ==========================================================================
   Content Area, Page Header & Breadcrumb
   ========================================================================== */
.content-wrapper {
    background-color: var(--rx-bg-app) !important;
}

.content-header {
    padding: 1.25rem 1rem 0.9rem !important;
}

.content-header h1 {
    font-size: 1.3rem !important;
    font-weight: 700;
    color: var(--rx-text-main) !important;
    letter-spacing: -0.3px;
    line-height: 1.3;
    margin: 0;
}

.content-wrapper > .content {
    padding: 0 1rem 1.5rem !important;
}

.breadcrumb {
    background: transparent !important;
    padding: 0.25rem 0 !important;
    margin: 0 !important;
    font-size: 0.8rem;
    font-weight: 500;
    align-items: center;
}

.breadcrumb-item {
    color: var(--rx-text-muted) !important;
}

.breadcrumb-item:first-child::before {
    content: "\f015";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.72rem;
    margin-right: 6px;
    color: var(--rx-text-light);
}

.breadcrumb-item.active {
    color: var(--rx-text-main) !important;
    font-weight: 600;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--rx-text-light) !important;
    content: "\203A" !important;
    font-size: 1.05rem;
    line-height: 0.9;
    padding: 0 6px !important;
    float: none;
}

/* Footer */
.main-footer {
    background: #ffffff !important;
    border-top: 1px solid var(--rx-border) !important;
    color: var(--rx-text-muted) !important;
    font-size: 0.8rem;
    padding: 0.75rem 1.25rem !important;
}

.main-footer strong {
    color: var(--rx-text-secondary);
    font-weight: 600;
}

.rx-footer-tag {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rx-text-light);
}

/* ==========================================================================
   Card System
   ========================================================================== */
.card {
    background: var(--rx-bg-surface) !important;
    border: 1px solid var(--rx-border) !important;
    border-radius: var(--rx-radius-lg) !important;
    box-shadow: var(--rx-shadow-xs) !important;
    margin-bottom: 1.25rem !important;
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--rx-border) !important;
    padding: 0.85rem 1.25rem !important;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--rx-text-main);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    border-radius: var(--rx-radius-lg) var(--rx-radius-lg) 0 0 !important;
}

.card-header::after {
    display: none;
}

/* Filter rows placed inside a card header must span the full width */
.card-header > .row,
.card-header > form {
    flex: 1 1 100%;
    width: 100%;
    font-weight: 400;
}

.card-header > .row .form-group {
    margin-bottom: 0.25rem;
}

/* Legacy "margin-top:30px" filter buttons: align with 38px inputs below labels */
.card-header .form-group > .btn[style*="margin-top"],
.card-body .form-group > .btn[style*="margin-top"] {
    margin-top: 24px !important;
    height: 38px;
}

/* Colour legend rows on list pages */
#lablecolor:not(:empty) {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.85rem;
    gap: 4px 6px;
    align-items: center;
    background: var(--rx-bg-subtle);
    border: 1px solid var(--rx-border);
    border-radius: var(--rx-radius-md);
    font-size: 0.8rem;
    color: var(--rx-text-muted);
}

.card-title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--rx-text-main);
    margin: 0 !important;
}

.card-body {
    padding: 1.25rem 1.25rem 0.75rem !important;
}

.card-footer {
    background: var(--rx-bg-subtle) !important;
    border-top: 1px solid var(--rx-border) !important;
    padding: 0.8rem 1.25rem !important;
    border-radius: 0 0 var(--rx-radius-lg) var(--rx-radius-lg) !important;
}

.card-footer .float-right,
.card-footer .float-left {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Nested cards inside forms (e.g. payment / transaction boxes) */
.card .card {
    background: var(--rx-bg-subtle) !important;
    box-shadow: none !important;
    border-color: var(--rx-border) !important;
    border-radius: var(--rx-radius-md) !important;
}

.card .card .card-body {
    padding: 1rem 1rem 0.25rem !important;
}

.card .card .dx-texteditor.dx-editor-outlined {
    background-color: #ffffff !important;
}

/* ==========================================================================
   Buttons (Bootstrap)
   ========================================================================== */
.btn {
    font-family: var(--rx-font-sans) !important;
    font-weight: 600 !important;
    border-radius: var(--rx-radius-md) !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
}

.btn {
    white-space: nowrap;
}

.btn:not(.btn-sm):not(.btn-xs):not(.btn-lg):not(.btn-tool):not(.btn-link) {
    font-size: 0.855rem;
    padding: 0.5rem 1rem;
    line-height: 1.35;
}

.btn:focus, .btn.focus {
    box-shadow: var(--rx-focus-ring) !important;
}

.btn-primary, .btn-info, .Addbtn {
    background-color: var(--rx-primary-600) !important;
    border-color: var(--rx-primary-600) !important;
    color: #ffffff !important;
    box-shadow: var(--rx-shadow-xs) !important;
}

.btn-primary:hover, .btn-info:hover, .Addbtn:hover {
    background-color: var(--rx-primary-700) !important;
    border-color: var(--rx-primary-700) !important;
}

.Addbtn::before {
    content: "\f067";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.75em;
    margin-right: 7px;
}

.card-header .Addbtn {
    margin-left: auto;
}

.btn-success {
    background-color: var(--rx-success) !important;
    border-color: var(--rx-success) !important;
    color: #ffffff !important;
}

.btn-success:hover {
    background-color: var(--rx-success-hover) !important;
    border-color: var(--rx-success-hover) !important;
}

.btn-danger {
    background-color: var(--rx-danger) !important;
    border-color: var(--rx-danger) !important;
    color: #ffffff !important;
}

.btn-danger:hover {
    background-color: var(--rx-danger-hover) !important;
    border-color: var(--rx-danger-hover) !important;
}

.btn-warning {
    background-color: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #ffffff !important;
}

.btn-secondary, .btn-default, .btn-light {
    background-color: #ffffff !important;
    border-color: var(--rx-border-input) !important;
    color: var(--rx-text-secondary) !important;
}

.btn-secondary:hover, .btn-default:hover, .btn-light:hover {
    background-color: var(--rx-bg-muted) !important;
    border-color: var(--rx-border-input-hover) !important;
    color: var(--rx-text-main) !important;
}

/* ==========================================================================
   Forms (Bootstrap controls)
   ========================================================================== */
.content-wrapper .form-group {
    margin-bottom: 1rem;
}

.content-wrapper .form-group > label,
.content-wrapper label.col-form-label,
.content-wrapper .form-group label[for] {
    display: inline-block;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: var(--rx-text-label) !important;
    margin-bottom: 0.35rem !important;
    letter-spacing: 0.01em;
}

.content-wrapper label.col-form-label {
    padding-top: calc(0.5rem + 1px);
    margin-bottom: 0 !important;
}

.form-control, .form-select, select.form-control {
    font-family: var(--rx-font-sans) !important;
    border: 1px solid var(--rx-border-input) !important;
    border-radius: var(--rx-radius-md) !important;
    font-size: 0.875rem !important;
    color: var(--rx-text-main) !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

input.form-control, select.form-control:not([multiple]) {
    height: 38px !important;
    padding: 0.4rem 0.75rem !important;
}

textarea.form-control {
    padding: 0.5rem 0.75rem !important;
}

.form-control:hover {
    border-color: var(--rx-border-input-hover) !important;
}

.form-control:focus, .form-select:focus {
    border-color: var(--rx-border-focus) !important;
    box-shadow: var(--rx-focus-ring) !important;
    outline: none !important;
}

.form-control:disabled, .form-control[readonly] {
    background-color: var(--rx-bg-muted) !important;
    color: var(--rx-text-muted) !important;
}

.form-control::placeholder {
    color: var(--rx-text-light) !important;
}

/* Select2 */
.select2-container--bootstrap4 .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--rx-border-input) !important;
    border-radius: var(--rx-radius-md) !important;
    min-height: 38px;
}

.select2-container--default.select2-container--focus .select2-selection,
.select2-container--bootstrap4.select2-container--focus .select2-selection {
    border-color: var(--rx-border-focus) !important;
    box-shadow: var(--rx-focus-ring) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--bootstrap4 .select2-results__option--highlighted {
    background-color: var(--rx-primary-600) !important;
}

/* ==========================================================================
   DevExtreme Editors
   ========================================================================== */
.dx-widget {
    font-family: var(--rx-font-sans) !important;
}

.dx-texteditor.dx-editor-outlined {
    background-color: #ffffff !important;
    border: 1px solid var(--rx-border-input) !important;
    border-radius: var(--rx-radius-md) !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dx-texteditor.dx-editor-outlined.dx-state-hover {
    border-color: var(--rx-border-input-hover) !important;
}

.dx-texteditor.dx-editor-outlined.dx-state-focused,
.dx-texteditor.dx-editor-outlined.dx-state-active {
    border-color: var(--rx-border-focus) !important;
    box-shadow: var(--rx-focus-ring) !important;
}

.dx-texteditor.dx-editor-outlined.dx-invalid {
    border-color: var(--rx-danger) !important;
}

.dx-texteditor.dx-editor-outlined.dx-invalid.dx-state-focused {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

.dx-texteditor-input {
    font-size: 0.875rem !important;
    color: var(--rx-text-main) !important;
    min-height: 36px;
    padding: 8px 11px !important;
}

.dx-placeholder {
    color: var(--rx-text-light) !important;
}

.dx-placeholder::before {
    padding: 8px 11px !important;
    font-size: 0.875rem;
}

.dx-textarea .dx-texteditor-input {
    line-height: 1.45;
}

/* Disabled & read-only editors read clearly instead of fading */
.dx-texteditor.dx-editor-outlined.dx-state-disabled,
.dx-texteditor.dx-editor-outlined.dx-state-readonly {
    background-color: var(--rx-bg-muted) !important;
    border-style: solid !important;
    border-color: var(--rx-border) !important;
    opacity: 1 !important;
}

.dx-texteditor.dx-state-disabled .dx-texteditor-input,
.dx-texteditor.dx-state-readonly .dx-texteditor-input {
    color: var(--rx-text-muted) !important;
    cursor: not-allowed;
}

.dx-texteditor.dx-state-readonly .dx-texteditor-input {
    cursor: default;
}

.dx-dropdowneditor-button .dx-button-content,
.dx-dropdowneditor-icon {
    background-color: transparent !important;
    border: none !important;
    color: var(--rx-text-muted) !important;
}

.dx-dropdowneditor.dx-state-hover .dx-dropdowneditor-icon,
.dx-dropdowneditor.dx-dropdowneditor-active .dx-dropdowneditor-icon {
    background-color: transparent !important;
    color: var(--rx-primary-600) !important;
}

.dx-clear-button-area .dx-icon-clear {
    color: var(--rx-text-light) !important;
}

/* Popups, lists & calendars */
.dx-overlay-content.dx-popup-normal,
.dx-dropdowneditor-overlay .dx-overlay-content {
    border-radius: var(--rx-radius-md) !important;
    border: 1px solid var(--rx-border) !important;
    box-shadow: var(--rx-shadow-lg) !important;
    overflow: hidden;
}

.dx-list-item {
    font-size: 0.86rem;
}

.dx-list-item.dx-state-hover {
    background-color: var(--rx-bg-muted) !important;
    color: var(--rx-text-main) !important;
}

.dx-list-item.dx-state-focused,
.dx-list-item.dx-list-item-selected {
    background-color: var(--rx-primary-600) !important;
    color: #ffffff !important;
}

.dx-calendar-cell.dx-calendar-selected-date span,
.dx-calendar-cell.dx-calendar-selected-date.dx-calendar-today span {
    background-color: var(--rx-primary-600) !important;
    box-shadow: none !important;
}

.dx-calendar-cell.dx-calendar-today span {
    border-color: var(--rx-primary-600) !important;
}

/* Checkbox & radio */
.dx-checkbox-icon {
    border-radius: 4px !important;
    border-color: var(--rx-border-dark) !important;
}

.dx-checkbox-checked .dx-checkbox-icon {
    background-color: var(--rx-primary-600) !important;
    border-color: var(--rx-primary-600) !important;
}

.dx-checkbox-checked .dx-checkbox-icon::before {
    color: #ffffff !important;
}

.dx-checkbox.dx-state-focused .dx-checkbox-icon {
    border-color: var(--rx-primary-600) !important;
    box-shadow: var(--rx-focus-ring);
}

.dx-checkbox-text {
    font-size: 0.85rem;
    color: var(--rx-text-secondary);
}

.dx-radiobutton-icon::before {
    border-color: var(--rx-border-dark) !important;
}

.dx-radiobutton-checked .dx-radiobutton-icon-dot {
    background: var(--rx-primary-600) !important;
}

.dx-radiobutton.dx-state-focused .dx-radiobutton-icon::before {
    border-color: var(--rx-primary-600) !important;
}

.dx-switch-on-value .dx-switch-handle::before {
    background-color: var(--rx-primary-600) !important;
}

/* Validation */
.dx-validationsummary-item {
    color: var(--rx-danger) !important;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 2px 0;
}

.dx-fieldset {
    margin: 0 !important;
    padding: 0 0 0.5rem !important;
}

.dx-invalid-message > .dx-overlay-content {
    background-color: var(--rx-danger) !important;
    border-radius: var(--rx-radius-sm) !important;
    font-size: 0.78rem;
}

/* ==========================================================================
   DevExtreme Buttons
   ========================================================================== */
.dx-button {
    border-radius: var(--rx-radius-md) !important;
    font-family: var(--rx-font-sans) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dx-button-has-text .dx-button-content {
    padding: 8px 18px;
}

.dx-button .dx-button-text {
    font-size: 0.855rem;
    text-transform: none;
    letter-spacing: 0;
}

.dx-button.dx-state-focused {
    box-shadow: var(--rx-focus-ring) !important;
}

.dx-button-mode-contained.dx-button-success {
    background-color: var(--rx-success) !important;
    border-color: var(--rx-success) !important;
}

.dx-button-mode-contained.dx-button-success.dx-state-hover,
.dx-button-mode-contained.dx-button-success.dx-state-active {
    background-color: var(--rx-success-hover) !important;
    border-color: var(--rx-success-hover) !important;
}

.dx-button-mode-contained.dx-button-default {
    background-color: var(--rx-primary-600) !important;
    border-color: var(--rx-primary-600) !important;
}

.dx-button-mode-contained.dx-button-default.dx-state-hover,
.dx-button-mode-contained.dx-button-default.dx-state-active {
    background-color: var(--rx-primary-700) !important;
    border-color: var(--rx-primary-700) !important;
}

.dx-button-mode-contained.dx-button-danger {
    background-color: var(--rx-danger) !important;
    border-color: var(--rx-danger) !important;
}

.dx-button-mode-contained.dx-button-danger.dx-state-hover,
.dx-button-mode-contained.dx-button-danger.dx-state-active {
    background-color: var(--rx-danger-hover) !important;
    border-color: var(--rx-danger-hover) !important;
}

.dx-button-mode-contained.dx-button-normal {
    background-color: #ffffff !important;
    border: 1px solid var(--rx-border-input) !important;
    color: var(--rx-text-secondary) !important;
}

.dx-button-mode-contained.dx-button-normal .dx-icon {
    color: var(--rx-text-muted) !important;
}

.dx-button-mode-contained.dx-button-normal.dx-state-hover,
.dx-button-mode-contained.dx-button-normal.dx-state-active {
    background-color: var(--rx-bg-muted) !important;
    border-color: var(--rx-border-input-hover) !important;
    color: var(--rx-text-main) !important;
}

/* Buttons inside dropdown editors stay borderless */
.dx-texteditor-buttons-container .dx-button-mode-contained.dx-button-normal,
.dx-dropdowneditor-button.dx-button-mode-contained {
    border: none !important;
    background-color: transparent !important;
}

.dx-button.dx-state-disabled {
    opacity: 0.55 !important;
}

/* ==========================================================================
   Tables & DataTables
   ========================================================================== */
.table {
    border-color: var(--rx-border) !important;
    color: var(--rx-text-main) !important;
    font-size: 0.855rem !important;
    margin-bottom: 0 !important;
    background: #ffffff;
}

.table th, .theadclr th,
.table.dataTable thead th {
    background-color: var(--rx-bg-subtle) !important;
    color: var(--rx-text-label) !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-top: none !important;
    border-bottom: 1px solid var(--rx-border) !important;
    padding: 0.7rem 0.85rem !important;
    vertical-align: middle !important;
    white-space: nowrap;
}

.table td,
.table.dataTable tbody td {
    padding: 0.62rem 0.85rem !important;
    vertical-align: middle !important;
    border-top: none !important;
    border-bottom: 1px solid #edf1f6 !important;
    font-size: 0.855rem;
    color: var(--rx-text-secondary);
}

.table-bordered,
.table-bordered td,
.table-bordered th {
    border-left: none !important;
    border-right: none !important;
}

.table-bordered {
    border: 1px solid var(--rx-border) !important;
    border-radius: var(--rx-radius-md);
}

/* Neutral zebra striping (overrides legacy per-page green rows) */
.content-wrapper .table tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

.content-wrapper .table tbody tr:nth-child(even) {
    background-color: #fafbfd;
}

.content-wrapper .table tbody tr:hover {
    background-color: #f0f7fd;
}

.table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

.table.dataTable thead .sorting::before, .table.dataTable thead .sorting::after,
.table.dataTable thead .sorting_asc::before, .table.dataTable thead .sorting_asc::after,
.table.dataTable thead .sorting_desc::before, .table.dataTable thead .sorting_desc::after {
    opacity: 0.35;
}

.table.dataTable thead .sorting,
.table.dataTable thead .sorting_asc,
.table.dataTable thead .sorting_desc {
    padding-right: 26px !important;
}

/* Legacy inline edit/delete icons become modern, compact icon buttons */
.table td i.fa-edit,
.table td i.fa-trash-alt,
.table td i.fa-trash,
.table td i.fa-eye,
.table td i.fa-print,
.table td i.fa-pencil-alt,
.table td i.fa-download,
.table td i.fa-search,
.table td i.fa-times,
.table td#colEditDelete i,
#colEditDelete i,
.table td:has(> i.fa-edit) i,
.table td:has(> i.fa-trash-alt) i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: var(--rx-radius-sm, 6px) !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
    vertical-align: middle !important;
    margin: 0 2px !important;
    text-decoration: none !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
}

/* Keep row action icons on a single line */
.table td#colEditDelete,
#colEditDelete,
.table td:has(> i.fa-edit),
.table td:has(> i.fa-trash-alt) {
    white-space: nowrap !important;
    width: 1% !important;
}

/* Edit action icon */
.table td i.fa-edit,
.table td i.fa-pencil-alt,
#colEditDelete i.fa-edit,
#colEditDelete i.fa-pencil-alt {
    background-color: #e0f2fe !important;
    color: #0284c7 !important;
    border: 1px solid #bae6fd !important;
}
.table td i.fa-edit:hover,
.table td i.fa-pencil-alt:hover,
#colEditDelete i.fa-edit:hover,
#colEditDelete i.fa-pencil-alt:hover {
    background-color: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35) !important;
}

/* Delete action icon */
.table td i.fa-trash-alt,
.table td i.fa-trash,
.table td i.fa-times,
#colEditDelete i.fa-trash-alt,
#colEditDelete i.fa-trash,
#colEditDelete i.fa-times {
    background-color: #fee2e2 !important;
    color: #ef4444 !important;
    border: 1px solid #fecaca !important;
}
.table td i.fa-trash-alt:hover,
.table td i.fa-trash:hover,
.table td i.fa-times:hover,
#colEditDelete i.fa-trash-alt:hover,
#colEditDelete i.fa-trash:hover,
#colEditDelete i.fa-times:hover {
    background-color: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35) !important;
}

/* View / Print action icons */
.table td i.fa-eye,
.table td i.fa-print,
#colEditDelete i.fa-eye,
#colEditDelete i.fa-print {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}
.table td i.fa-eye:hover,
.table td i.fa-print:hover,
#colEditDelete i.fa-eye:hover,
#colEditDelete i.fa-print:hover {
    background-color: #475569 !important;
    color: #ffffff !important;
    border-color: #475569 !important;
}

/* Ensure buttons with text or colored classes preserve visible icon colors */
.btn i,
button i,
.btn span[class*="fa-"],
button span[class*="fa-"] {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
}

.btn-primary i,
.btn-primary span:not(.text-danger):not(.text-success),
.btn-danger i,
.btn-danger span,
.btn-success i,
.btn-success span,
.btn-info i,
.btn-info span {
    color: #ffffff !important;
}

/* DataTables controls */
.dataTables_wrapper {
    font-size: 0.84rem;
    color: var(--rx-text-muted);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 0.75rem;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--rx-border-input) !important;
    border-radius: var(--rx-radius-md) !important;
    padding: 0.35rem 0.7rem !important;
    font-size: 0.84rem !important;
    color: var(--rx-text-main);
    background-color: #ffffff;
    outline: none !important;
    margin-left: 6px;
}

.dataTables_wrapper .dataTables_filter input {
    min-width: 220px;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--rx-border-focus) !important;
    box-shadow: var(--rx-focus-ring) !important;
}

.dataTables_wrapper .dataTables_info {
    padding-top: 1rem !important;
    color: var(--rx-text-muted);
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 0.75rem !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--rx-radius-sm) !important;
    padding: 4px 11px !important;
    margin-left: 3px !important;
    font-size: 0.82rem !important;
    border: 1px solid transparent !important;
    color: var(--rx-text-secondary) !important;
    background: transparent !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--rx-bg-muted) !important;
    border-color: var(--rx-border) !important;
    color: var(--rx-text-main) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--rx-primary-600) !important;
    color: #ffffff !important;
    border-color: var(--rx-primary-600) !important;
    font-weight: 700 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--rx-text-light) !important;
    background: transparent !important;
    border-color: transparent !important;
}

/* Toolbar: length | export buttons ........ search */
.dataTables_wrapper .dataTables_length {
    float: left;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 500 !important;
    color: var(--rx-text-muted) !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    height: 34px;
    margin-left: 0 !important;
}

.dataTables_wrapper .dt-buttons {
    float: left;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 0.75rem 1rem;
}

.dt-buttons .dt-button,
button.dt-button, div.dt-button, a.dt-button {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid var(--rx-border-input) !important;
    border-radius: var(--rx-radius-md) !important;
    box-shadow: none !important;
    color: var(--rx-text-secondary) !important;
    font-family: var(--rx-font-sans);
    font-size: 0.8rem !important;
    font-weight: 600;
    line-height: 1.2;
    height: 34px;
    padding: 0 0.9rem !important;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dt-buttons .dt-button::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.8rem;
}

.dt-buttons .buttons-excel::before { content: "\f1c3"; color: #16a34a; font-weight: 400; }
.dt-buttons .buttons-csv::before { content: "\f6dd"; color: #0891b2; }
.dt-buttons .buttons-copy::before { content: "\f0c5"; color: var(--rx-text-muted); font-weight: 400; }
.dt-buttons .buttons-print::before { content: "\f02f"; color: var(--rx-text-muted); }
.dt-buttons .buttons-pdf::before { content: "\f1c1"; color: #dc2626; font-weight: 400; }

.dt-buttons .dt-button:hover:not(.disabled),
button.dt-button:hover:not(.disabled),
button.dt-button:focus:not(.disabled) {
    background: var(--rx-bg-muted) !important;
    background-image: none !important;
    border-color: var(--rx-border-input-hover) !important;
    color: var(--rx-text-main) !important;
    text-shadow: none;
    outline: none;
}

.dataTables_wrapper .dataTables_filter {
    float: right;
}

.dataTables_wrapper::after {
    content: "";
    display: table;
    clear: both;
}

.dataTables_wrapper .dataTables_info {
    clear: left;
}

table.dataTable.no-footer {
    border-bottom: 1px solid var(--rx-border) !important;
}

.dataTables_empty {
    padding: 2rem 1rem !important;
    color: var(--rx-text-light) !important;
    text-align: center !important;
    background: #ffffff !important;
}

/* List page wrappers */
.card > .col-md-12 > .panel-content > .row > .modal-body {
    padding: 1rem 0.75rem 1.25rem;
}

/* DevExtreme DataGrid */
.dx-datagrid-headers {
    background-color: var(--rx-bg-subtle);
    color: var(--rx-text-label) !important;
    font-weight: 700;
}

.dx-datagrid-headers .dx-header-row > td {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dx-datagrid-rowsview .dx-row.dx-state-hover:not(.dx-row-focused) > td {
    background-color: #f0f7fd !important;
}

.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td {
    background-color: var(--rx-primary-50) !important;
}

/* ==========================================================================
   Modals & Nav Tabs
   ========================================================================== */
.modal-content {
    border: none !important;
    border-radius: var(--rx-radius-lg) !important;
    box-shadow: var(--rx-shadow-xl) !important;
    overflow: hidden;
}

.modal-content > .modal-header {
    border-bottom: 1px solid var(--rx-border) !important;
    padding: 0.9rem 1.25rem !important;
    background: #ffffff;
}

.modal-content > .modal-header .modal-title {
    font-size: 1rem;
    font-weight: 700;
}

.modal-content > .modal-footer {
    border-top: 1px solid var(--rx-border) !important;
    background: var(--rx-bg-subtle);
    padding: 0.75rem 1.25rem !important;
}

.content-wrapper .nav-tabs {
    border-bottom: 1px solid var(--rx-border);
}

.content-wrapper .nav-tabs .nav-link {
    color: var(--rx-text-muted);
    font-weight: 600;
    font-size: 0.855rem;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.6rem 1rem;
}

.content-wrapper .nav-tabs .nav-link:hover {
    color: var(--rx-text-main);
    border-bottom-color: var(--rx-border-dark);
}

.content-wrapper .nav-tabs .nav-link.active {
    color: var(--rx-primary-700);
    background: transparent;
    border-bottom-color: var(--rx-primary-600);
}

/* ==========================================================================
   Dashboard Small Boxes
   ========================================================================== */
.small-box {
    border-radius: var(--rx-radius-lg) !important;
    box-shadow: var(--rx-shadow-sm) !important;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s ease !important;
    border: none;
}

.small-box:hover {
    box-shadow: var(--rx-shadow-lg) !important;
}

.small-box .inner {
    padding: 1.1rem 1.35rem !important;
}

.small-box h3 {
    font-size: 1.85rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px;
    margin-bottom: 0.25rem !important;
    color: inherit;
}

.small-box p {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    opacity: 0.95;
    margin-bottom: 0 !important;
}

.small-box .icon {
    top: 15px !important;
    right: 15px !important;
    font-size: 42px !important;
    opacity: 0.22 !important;
}

.small-box:hover .icon {
    font-size: 42px !important;
}

.small-box-footer {
    background: rgba(0, 0, 0, 0.08) !important;
    padding: 0.4rem 0 !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
}

.small-box.bg-info {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
}

.small-box.bg-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

.small-box.bg-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}

.small-box.bg-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 767.98px) {
    .content-header .breadcrumb {
        margin-top: 0.35rem !important;
    }

    .main-header.navbar {
        padding: 0.5rem 0.75rem 0.5rem 0.5rem !important;
    }

    .dataTables_wrapper .dataTables_filter input {
        min-width: 0;
        width: 100%;
    }
}

/* ==========================================================================
   RELOX MODERN LOGIN PAGE STYLES
   ========================================================================== */
body.login-page-modern {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background: linear-gradient(135deg, #0b132b 0%, #1c2541 50%, #0b132b 100%) !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 24px;
    position: relative;
    overflow-x: hidden;
}

.ambient-glow-1 {
    position: absolute;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(2, 132, 199, 0.22) 0%, rgba(2, 132, 199, 0) 70%);
    top: -120px;
    left: -100px;
    pointer-events: none;
}

.ambient-glow-2 {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.18) 0%, rgba(16, 185, 129, 0) 70%);
    bottom: -100px;
    right: -100px;
    pointer-events: none;
}

.rx-login-wrapper {
    width: 100%;
    max-width: 1060px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.1);
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
}

.rx-login-brand-pane {
    flex: 1 1 44%;
    background: linear-gradient(145deg, #0a192f 0%, #112240 100%);
    padding: 48px 40px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.rx-brand-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(2, 132, 199, 0.18);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #38bdf8;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    width: fit-content;
}

.rx-brand-title {
    font-size: 1.85rem;
    font-weight: 800;
    color: #ffffff;
    margin: 20px 0 8px 0;
    letter-spacing: -0.5px;
}

.rx-brand-subtitle {
    font-size: 0.95rem;
    color: #94a3b8;
    line-height: 1.5;
    margin-bottom: 24px;
}

.rx-feature-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rx-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.875rem;
    color: #cbd5e1;
}

.rx-feature-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(2, 132, 199, 0.2);
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.rx-support-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
    margin-top: 24px;
}

.rx-support-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #38bdf8;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rx-support-item {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
}

.rx-support-item strong {
    color: #e2e8f0;
}

.rx-login-form-pane {
    flex: 1 1 56%;
    padding: 48px 44px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rx-form-header {
    margin-bottom: 28px;
}

.rx-form-title {
    font-size: 1.65rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px 0;
    letter-spacing: -0.3px;
}

.rx-form-desc {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0;
}

.rx-input-group {
    margin-bottom: 20px;
}

.rx-input-label {
    display: block;
    font-size: 0.825rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
}

.rx-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.rx-input-icon {
    position: absolute;
    left: 14px;
    color: #94a3b8;
    font-size: 0.95rem;
    pointer-events: none;
    transition: color 0.2s;
}

.rx-form-control {
    width: 100%;
    height: 48px;
    padding: 10px 16px 10px 42px;
    font-size: 0.925rem;
    font-family: inherit;
    color: #0f172a;
    background-color: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.rx-form-control:focus {
    outline: none;
    background-color: #ffffff;
    border-color: #0284c7;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.12);
}

.rx-btn-submit {
    width: 100%;
    height: 48px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.rx-btn-submit:hover {
    background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.45);
    transform: translateY(-1px);
}

.rx-btn-submit:active {
    transform: translateY(0);
}

.rx-error-alert {
    min-height: 24px;
    margin-top: 14px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #dc2626;
}

.rx-forgot-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: #0284c7;
    text-decoration: none;
    transition: color 0.2s;
}

.rx-forgot-link:hover {
    color: #0369a1;
    text-decoration: underline;
}

.rx-footer-note {
    margin-top: 24px;
    text-align: center;
    font-size: 0.775rem;
    color: #94a3b8;
}

@media (max-width: 860px) {
    .rx-login-wrapper {
        flex-direction: column;
    }
    .rx-login-brand-pane {
        padding: 32px 24px;
    }
    .rx-login-form-pane {
        padding: 32px 24px;
    }
}
/* ==========================================================================
   Modern Action Buttons & Healthcare Toolbars
   ========================================================================== */
.rx-action-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    min-width: 120px !important;
}

.rx-action-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #475569 !important;
    font-size: 12px !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 1px !important;
}

.rx-action-btn i {
    font-size: 12px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    color: inherit !important;
}

.rx-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px -1px rgba(0,0,0,0.12);
}

.rx-action-edit { background: #e0f2fe !important; color: #0284c7 !important; border-color: #bae6fd !important; }
.rx-action-edit:hover { background: #0284c7 !important; color: #ffffff !important; border-color: #0284c7 !important; }

.rx-action-print { background: #d1fae5 !important; color: #059669 !important; border-color: #a7f3d0 !important; }
.rx-action-print:hover { background: #059669 !important; color: #ffffff !important; border-color: #059669 !important; }

.rx-action-barcode { background: #ede9fe !important; color: #7c3aed !important; border-color: #ddd6fe !important; }
.rx-action-barcode:hover { background: #7c3aed !important; color: #ffffff !important; border-color: #7c3aed !important; }

.rx-action-receipt { background: #fef3c7 !important; color: #d97706 !important; border-color: #fde68a !important; }
.rx-action-receipt:hover { background: #d97706 !important; color: #ffffff !important; border-color: #d97706 !important; }

.rx-action-image { background: #fee2e2 !important; color: #dc2626 !important; border-color: #fecaca !important; }
.rx-action-image:hover { background: #dc2626 !important; color: #ffffff !important; border-color: #dc2626 !important; }

.rx-action-email { background: #dbeafe !important; color: #2563eb !important; border-color: #bfdbfe !important; }
.rx-action-email:hover { background: #2563eb !important; color: #ffffff !important; border-color: #2563eb !important; }

.rx-action-whatsapp { background: #dcfce7 !important; color: #16a34a !important; border-color: #bbf7d0 !important; }
.rx-action-whatsapp:hover { background: #16a34a !important; color: #ffffff !important; border-color: #16a34a !important; }

.rx-action-view { background: #e0e7ff !important; color: #6366f1 !important; border-color: #c7d2fe !important; }
.rx-action-view:hover { background: #6366f1 !important; color: #ffffff !important; border-color: #6366f1 !important; }

.rx-action-pdf { background: #ffe4e6 !important; color: #e11d48 !important; border-color: #fecdd3 !important; }
.rx-action-pdf:hover { background: #e11d48 !important; color: #ffffff !important; border-color: #e11d48 !important; }

.rx-action-pdf-green { background: #ccfbf1 !important; color: #0d9488 !important; border-color: #99f6e4 !important; }
.rx-action-pdf-green:hover { background: #0d9488 !important; color: #ffffff !important; border-color: #0d9488 !important; }

.rx-action-delete, .rx-action-trash { background: #fee2e2 !important; color: #dc2626 !important; border-color: #fecaca !important; }
.rx-action-delete:hover, .rx-action-trash:hover { background: #dc2626 !important; color: #ffffff !important; border-color: #dc2626 !important; }

.rx-action-refresh { background: #f1f5f9 !important; color: #475569 !important; border-color: #cbd5e1 !important; }
.rx-action-refresh:hover { background: #475569 !important; color: #ffffff !important; border-color: #475569 !important; }

/* Universal Table Action Column Styling for all Views & Lists */
td#colEditDelete, th#colEditDelete,
td[id*="colEditDelete"], th[id*="colEditDelete"],
td.action-cell, th.action-cell,
td:has(> .rx-action-group),
td:has(> i[onclick]),
td:has(> button[onclick*="OnEdit"]),
td:has(> button[onclick*="OnDelete"]) {
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    padding: 6px 8px !important;
}

td#colEditDelete > i,
td[id*="colEditDelete"] > i,
td.action-cell > i,
td > i[onclick*="OnEdit"],
td > i[onclick*="OnDelete"],
td > i[onclick*="Print"],
td > i[onclick*="Status"],
td > i[onclick*="Popup"],
td > i[onclick*="Setup"],
td > i[onclick*="Link"],
td > i[onclick*="Check"] {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    cursor: pointer !important;
    margin: 1px 2px !important;
    transition: all 0.15s ease-in-out !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    text-decoration: none !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #475569 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

td#colEditDelete > i:hover,
td[id*="colEditDelete"] > i:hover,
td.action-cell > i:hover,
td > i[onclick]:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 6px -1px rgba(0,0,0,0.12) !important;
}

/* Edit action */
td#colEditDelete > i.fa-edit,
td[id*="colEditDelete"] > i.fa-edit,
td.action-cell > i.fa-edit,
td > i[onclick*="OnEdit"],
td > i[onclick*="Edit"] {
    background: #e0f2fe !important;
    color: #0284c7 !important;
    border-color: #bae6fd !important;
}
td#colEditDelete > i.fa-edit:hover,
td[id*="colEditDelete"] > i.fa-edit:hover,
td.action-cell > i.fa-edit:hover,
td > i[onclick*="OnEdit"]:hover,
td > i[onclick*="Edit"]:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
}

/* Delete / Trash action */
td#colEditDelete > i.fa-trash,
td#colEditDelete > i.fa-trash-alt,
td#colEditDelete > i.fa-times,
td[id*="colEditDelete"] > i.fa-trash,
td[id*="colEditDelete"] > i.fa-trash-alt,
td[id*="colEditDelete"] > i.fa-times,
td.action-cell > i.fa-trash,
td.action-cell > i.fa-trash-alt,
td > i[onclick*="OnDelete"],
td > i[onclick*="Delete"] {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    border-color: #fecaca !important;
}
td#colEditDelete > i.fa-trash:hover,
td#colEditDelete > i.fa-trash-alt:hover,
td#colEditDelete > i.fa-times:hover,
td[id*="colEditDelete"] > i.fa-trash:hover,
td[id*="colEditDelete"] > i.fa-trash-alt:hover,
td[id*="colEditDelete"] > i.fa-times:hover,
td.action-cell > i.fa-trash:hover,
td.action-cell > i.fa-trash-alt:hover,
td > i[onclick*="OnDelete"]:hover,
td > i[onclick*="Delete"]:hover {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}

/* Print action */
td#colEditDelete > i.fa-print,
td#colEditDelete > i.fa-file-alt,
td[id*="colEditDelete"] > i.fa-print,
td[id*="colEditDelete"] > i.fa-file-alt,
td.action-cell > i.fa-print,
td.action-cell > i.fa-file-alt,
td > i[onclick*="Print"],
td > i[onclick*="SingleReport"] {
    background: #d1fae5 !important;
    color: #059669 !important;
    border-color: #a7f3d0 !important;
}
td#colEditDelete > i.fa-print:hover,
td#colEditDelete > i.fa-file-alt:hover,
td[id*="colEditDelete"] > i.fa-print:hover,
td[id*="colEditDelete"] > i.fa-file-alt:hover,
td.action-cell > i.fa-print:hover,
td.action-cell > i.fa-file-alt:hover,
td > i[onclick*="Print"]:hover,
td > i[onclick*="SingleReport"]:hover {
    background: #059669 !important;
    color: #ffffff !important;
    border-color: #059669 !important;
}

/* Barcode action */
td#colEditDelete > i.fa-barcode,
td[id*="colEditDelete"] > i.fa-barcode,
td.action-cell > i.fa-barcode,
td > i[onclick*="Barcode"] {
    background: #ede9fe !important;
    color: #7c3aed !important;
    border-color: #ddd6fe !important;
}
td#colEditDelete > i.fa-barcode:hover,
td[id*="colEditDelete"] > i.fa-barcode:hover,
td.action-cell > i.fa-barcode:hover,
td > i[onclick*="Barcode"]:hover {
    background: #7c3aed !important;
    color: #ffffff !important;
    border-color: #7c3aed !important;
}

/* Receipt action */
td#colEditDelete > i.fa-receipt,
td[id*="colEditDelete"] > i.fa-receipt,
td.action-cell > i.fa-receipt,
td > i[onclick*="Receipt"],
td > i[onclick*="RecPrint"] {
    background: #fef3c7 !important;
    color: #d97706 !important;
    border-color: #fde68a !important;
}
td#colEditDelete > i.fa-receipt:hover,
td[id*="colEditDelete"] > i.fa-receipt:hover,
td.action-cell > i.fa-receipt:hover,
td > i[onclick*="Receipt"]:hover,
td > i[onclick*="RecPrint"]:hover {
    background: #d97706 !important;
    color: #ffffff !important;
    border-color: #d97706 !important;
}

/* View / Eye action */
td#colEditDelete > i.fa-eye,
td[id*="colEditDelete"] > i.fa-eye,
td.action-cell > i.fa-eye,
td > i[onclick*="Status"],
td > i[onclick*="View"] {
    background: #e0e7ff !important;
    color: #6366f1 !important;
    border-color: #c7d2fe !important;
}
td#colEditDelete > i.fa-eye:hover,
td[id*="colEditDelete"] > i.fa-eye:hover,
td.action-cell > i.fa-eye:hover,
td > i[onclick*="Status"]:hover,
td > i[onclick*="View"]:hover {
    background: #6366f1 !important;
    color: #ffffff !important;
    border-color: #6366f1 !important;
}

/* Refresh action */
td#colEditDelete > i.fa-sync,
td#colEditDelete > i.fa-sync-alt,
td[id*="colEditDelete"] > i.fa-sync,
td[id*="colEditDelete"] > i.fa-sync-alt,
td.action-cell > i.fa-sync,
td.action-cell > i.fa-sync-alt,
td > i[onclick*="Refresh"],
td > i[onclick*="GenerateReportPDF"] {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border-color: #cbd5e1 !important;
}
td#colEditDelete > i.fa-sync:hover,
td#colEditDelete > i.fa-sync-alt:hover,
td[id*="colEditDelete"] > i.fa-sync:hover,
td[id*="colEditDelete"] > i.fa-sync-alt:hover,
td.action-cell > i.fa-sync:hover,
td.action-cell > i.fa-sync-alt:hover,
td > i[onclick*="Refresh"]:hover,
td > i[onclick*="GenerateReportPDF"]:hover {
    background: #475569 !important;
    color: #ffffff !important;
    border-color: #475569 !important;
}


/* ==========================================================================
   Lab Invoice & Data Grid Specific Enhancements
   ========================================================================== */
.rx-test-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
}

.rx-test-item {
    font-size: 0.84rem;
    line-height: 1.35;
}

.rx-test-link {
    color: var(--rx-text-main, #1e293b);
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.rx-test-link:hover .rx-test-name {
    color: var(--rx-primary-600, #0284c7);
    text-decoration: underline;
}

.rx-test-name {
    font-weight: 500;
    color: #1e293b;
}

.rx-status-badge {
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    letter-spacing: 0.2px;
}

.rx-patient-cell {
    min-width: 170px;
    line-height: 1.35;
}

.rx-inv-cell {
    line-height: 1.3;
}


/* ==========================================================================
   Entry Forms - sections, sub-panels, summaries & action bar
   (used by Lab Invoice; reusable by any Centre Portal form)
   ========================================================================== */
.rx-form-page {
    display: block;
}

.card.rx-section {
    overflow: visible;
}

.card.rx-section-accent {
    border-top: 3px solid var(--rx-primary-600) !important;
}

.card.rx-section-accent > .card-body {
    padding-top: 1rem !important;
}

.rx-section-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--rx-border);
}

.rx-section-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--rx-primary-50);
    color: var(--rx-primary-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.rx-section-title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    color: var(--rx-text-main);
    line-height: 1.25;
}

.rx-section-sub {
    margin: 2px 0 0;
    font-size: 0.76rem;
    color: var(--rx-text-muted);
}

.rx-section-actions {
    margin-left: auto;
}

.rx-section-actions-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rx-label-hint {
    font-weight: 500;
    color: var(--rx-text-light);
}

/* Years / Months / Days compact group */
.rx-age-group {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 6px;
}

/* Sub-panels (payment, bill summary) */
.card.rx-subpanel {
    background: var(--rx-bg-subtle) !important;
    border: 1px solid var(--rx-border) !important;
    border-radius: var(--rx-radius-md) !important;
    box-shadow: none !important;
}

.rx-subpanel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--rx-border);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rx-text-label);
}

.rx-subpanel-title i {
    color: var(--rx-primary-600);
}

.card.rx-subpanel #divtransaction,
.card.rx-subpanel .card {
    background: #ffffff !important;
}

/* Bill summary: label | value rows */
.rx-bill-summary .form-group.row {
    align-items: center;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed var(--rx-border);
}

.rx-bill-summary .form-group.row label {
    margin: 0 !important;
    padding-top: 0 !important;
    font-size: 0.82rem !important;
    color: var(--rx-text-secondary) !important;
}

.rx-bill-summary .col-form-label {
    padding: 0 !important;
    text-align: center;
    color: var(--rx-text-muted) !important;
}

.rx-bill-summary .form-group.row.rx-net-total {
    margin: 0.25rem -0.5rem 0.25rem;
    padding: 0.65rem 0.5rem;
    background: var(--rx-primary-50);
    border: 1px solid var(--rx-primary-100);
    border-radius: var(--rx-radius-md);
}

.rx-net-total label {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: var(--rx-primary-800) !important;
}

.rx-net-total .dx-texteditor.dx-editor-outlined {
    background: #ffffff !important;
    border-color: var(--rx-primary-200) !important;
}

.rx-net-total .dx-texteditor-input {
    font-size: 1.05rem !important;
    font-weight: 800;
    color: var(--rx-primary-800) !important;
}

/* Right aligned numeric editors */
.textrightalign input[type=text],
.textrightalign .dx-texteditor-input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Selected tests grid */
.rx-items-table {
    border: 1px solid var(--rx-border);
    border-radius: var(--rx-radius-md);
    margin-bottom: 1.25rem;
    background: #ffffff;
}

.content-wrapper .table td input[type=number],
.content-wrapper .table td input[type=text] {
    width: 110px;
    max-width: 100%;
    height: 32px;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--rx-border-input);
    border-radius: var(--rx-radius-sm);
    text-align: right;
    font-variant-numeric: tabular-nums;
    background: #ffffff;
}

.content-wrapper .table td input[type=number]:focus,
.content-wrapper .table td input[type=text]:focus {
    outline: none;
    border-color: var(--rx-border-focus);
    box-shadow: var(--rx-focus-ring);
}

.content-wrapper .table td .btn[id="DeleteButton"] {
    width: 30px;
    height: 30px;
    padding: 0 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
}

.content-wrapper .table td .btn[id="DeleteButton"]:hover {
    background: var(--rx-danger-light) !important;
    border-color: var(--rx-danger-border) !important;
}

/* Legacy bootstrap classes applied to DevExtreme buttons */
.dx-button.btn-info {
    background-color: var(--rx-primary-600) !important;
    border-color: var(--rx-primary-600) !important;
    color: #ffffff !important;
}

.dx-button.btn-warning {
    background-color: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #ffffff !important;
}

.dx-button.btn-info .dx-icon,
.dx-button.btn-warning .dx-icon,
.dx-button.btn-info .dx-button-text,
.dx-button.btn-warning .dx-button-text {
    color: #ffffff !important;
}

.dx-button.btn-info.dx-state-hover { background-color: var(--rx-primary-700) !important; border-color: var(--rx-primary-700) !important; }
.dx-button.btn-warning.dx-state-hover { background-color: #d97706 !important; border-color: #d97706 !important; }

.dx-button.btn-dangerv {
    background: #ffffff !important;
    border: 1px solid var(--rx-danger-border) !important;
}

.dx-button.btn-dangerv .dx-icon,
.dx-button.btn-dangerv .dx-button-text { color: var(--rx-danger) !important; }
.dx-button.btn-dangerv.dx-state-hover { background: var(--rx-danger-light) !important; }

.dx-button-has-icon.dx-button-has-text .dx-button-content {
    padding: 7px 16px 7px 12px;
}

/* Sticky Save / Cancel bar for long entry forms */
.card.rx-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    box-shadow: 0 -6px 16px rgba(15, 23, 42, 0.06) !important;
}

.card.rx-action-bar > .card-footer {
    border-top: none !important;
    border-radius: var(--rx-radius-lg) !important;
    background: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.rx-action-hint {
    font-size: 0.8rem;
    color: var(--rx-text-muted);
}

.rx-action-hint i {
    color: var(--rx-primary-500);
    margin-right: 4px;
}

/* Generic polish for every other Centre Portal entry form */
.card > form > .card-footer:last-child,
.card > .card-footer:last-child {
    position: sticky;
    bottom: 0;
    z-index: 4;
}

.content-wrapper .form-group.row > [class*="col-"] > label {
    margin-bottom: 0 !important;
    padding-top: 0.55rem;
}

/* ==========================================================================
   Modern DataTables
   ========================================================================== */
.dataTables_wrapper {
    position: relative;
}

.dataTables_wrapper table.dataTable {
    border: 1px solid var(--rx-border) !important;
    border-radius: var(--rx-radius-lg) !important;
    box-shadow: var(--rx-shadow-xs);
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
    clear: both;
}

/* Rounded corners without clipping dropdowns inside cells */
.dataTables_wrapper table.dataTable thead tr:first-child th:first-child { border-top-left-radius: var(--rx-radius-lg); }
.dataTables_wrapper table.dataTable thead tr:first-child th:last-child { border-top-right-radius: var(--rx-radius-lg); }

.dataTables_wrapper table.dataTable thead th {
    background: linear-gradient(180deg, #f9fbfd 0%, #f1f5f9 100%) !important;
    color: var(--rx-text-label) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.06em !important;
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
    border-bottom: 1px solid var(--rx-border) !important;
}

.dataTables_wrapper table.dataTable thead th.sorting_asc,
.dataTables_wrapper table.dataTable thead th.sorting_desc {
    color: var(--rx-primary-700) !important;
    background: linear-gradient(180deg, #f3f9fe 0%, #e8f3fc 100%) !important;
}

.dataTables_wrapper table.dataTable tbody td {
    padding-top: 0.72rem !important;
    padding-bottom: 0.72rem !important;
    border-bottom: 1px solid #eef2f7 !important;
    color: var(--rx-text-secondary);
}

.dataTables_wrapper table.dataTable tbody tr:last-child td {
    border-bottom: none !important;
}

.content-wrapper .dataTables_wrapper table.dataTable tbody tr {
    transition: background-color 0.12s ease;
}

.content-wrapper .dataTables_wrapper table.dataTable tbody tr:nth-child(even) {
    background-color: #fbfcfe;
}

.content-wrapper .dataTables_wrapper table.dataTable tbody tr:hover {
    background-color: #eff6fc;
}

.content-wrapper .dataTables_wrapper table.dataTable tbody tr:hover > td:not([style*="none"]) {
    color: var(--rx-text-main);
}

.content-wrapper .dataTables_wrapper table.dataTable tbody tr.selected,
.content-wrapper .dataTables_wrapper table.dataTable tbody tr.shown {
    background-color: var(--rx-primary-50) !important;
}

.dataTables_wrapper table.dataTable td.text-right,
.dataTables_wrapper table.dataTable th.text-right {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

/* Search box with icon */
.dataTables_wrapper .dataTables_filter label {
    font-size: 0 !important;
    position: relative;
}

.dataTables_wrapper .dataTables_filter label::before {
    content: "\f002";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.8rem;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--rx-text-light);
    pointer-events: none;
}

.dataTables_wrapper .dataTables_filter input {
    font-size: 0.84rem !important;
    padding-left: 34px !important;
    min-width: 260px;
    background: #ffffff;
}

.dataTables_wrapper .dataTables_length select {
    cursor: pointer;
}

/* Footer: info + pagination */
.dataTables_wrapper .dataTables_info {
    font-size: 0.8rem;
    color: var(--rx-text-muted) !important;
    padding-top: 0.95rem !important;
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 0.7rem !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 34px;
    height: 34px;
    line-height: 24px !important;
    text-align: center;
    border: 1px solid var(--rx-border) !important;
    background: #ffffff !important;
    border-radius: var(--rx-radius-md) !important;
    margin-left: 4px !important;
    font-weight: 600;
    color: var(--rx-text-secondary) !important;
    box-shadow: var(--rx-shadow-xs);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    padding: 4px 12px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
}

.dataTables_wrapper .dataTables_paginate .ellipsis {
    padding: 0 6px;
    color: var(--rx-text-light);
}

/* Empty & processing states */
.dataTables_wrapper .dataTables_empty::before {
    content: "\f15b";
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    display: block;
    font-size: 1.6rem;
    margin-bottom: 0.4rem;
    color: #cbd5e1;
}

.dataTables_wrapper .dataTables_processing {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid var(--rx-border) !important;
    border-radius: var(--rx-radius-md) !important;
    box-shadow: var(--rx-shadow-md) !important;
    color: var(--rx-text-secondary) !important;
    font-weight: 600;
    height: auto !important;
    padding: 0.75rem 1rem !important;
}

@media (max-width: 767.98px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dt-buttons {
        float: none !important;
        margin-left: 0;
    }

    .dataTables_wrapper .dataTables_filter input {
        min-width: 0;
        width: 100%;
    }

    .rx-section-actions {
        margin-left: 0;
        width: 100%;
    }
}

/* ==========================================================================
   Portal-wide section headers (forms, lists, reports)
   ========================================================================== */

/* Section head placed at the top of a page's main card */
.card > .rx-section-head {
    border-radius: var(--rx-radius-lg) var(--rx-radius-lg) 0 0;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}

.card > .rx-section-head + .card-header,
.card > .rx-section-head + form > .card-header {
    border-radius: 0 !important;
    background: var(--rx-bg-subtle) !important;
}

/* Title placed inside an existing list header (next to the New button) */
.card-header > .card-title.rx-list-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 !important;
    float: none;
}

.card-header > .card-title.rx-list-title + .card-tools,
.card-header > .card-title.rx-list-title ~ .Addbtn {
    margin-left: auto;
}

.card-header .card-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 0 auto;
    float: none;
}

.card-header .card-tools .float-right {
    float: none !important;
}

/* Nested cards with plain-text headers become neat sub-panels */
.card .card > .card-header {
    padding: 0.6rem 1rem !important;
    background: transparent !important;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rx-text-label);
    border-radius: var(--rx-radius-md) var(--rx-radius-md) 0 0 !important;
}

.card .card > .card-header .card-title {
    font-size: 0.72rem !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rx-text-label);
}

/* ==========================================================================
   Lab Result Entry
   ========================================================================== */
.rx-patient-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.rx-patient-banner small {
    display: block;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rx-text-light);
}

.rx-patient-banner .rx-patient-name {
    margin: 0 !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--rx-text-main) !important;
}

.rx-status-pill {
    margin-left: auto;
    padding: 5px 12px;
    border-radius: var(--rx-radius-pill);
    background: var(--rx-warning-light);
    border: 1px solid var(--rx-warning-border);
    color: var(--rx-warning-hover);
    font-size: 0.75rem;
    font-weight: 700;
}

.rx-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.7rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: var(--rx-radius-md);
    font-size: 0.85rem;
    font-weight: 600;
}

.rx-alert label {
    margin: 0 !important;
    color: inherit !important;
    font-weight: 600;
}

.rx-alert-danger {
    background: var(--rx-danger-light);
    border: 1px solid var(--rx-danger-border);
    color: var(--rx-danger-hover);
}

.rx-row-label {
    display: inline-block;
    padding-top: 1.9rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--rx-text-main);
}

.rx-divider {
    height: 1px;
    background: var(--rx-border);
    margin: 0.5rem 0 1rem;
}

/* Result grid: left-aligned wide inputs */
.content-wrapper .rx-result-table td input[type=text] {
    width: calc(100% - 40px) !important;
    text-align: left;
    height: 34px;
    vertical-align: middle;
}

.rx-result-table td input[type=text]:disabled {
    background: var(--rx-bg-muted);
    color: var(--rx-text-muted);
}

.rx-result-table td input.textlowbold,
.rx-result-table td input.texthighbold {
    color: var(--rx-danger) !important;
    font-weight: 700;
    background: var(--rx-danger-light);
    border-color: var(--rx-danger-border);
}

.rx-result-table td select {
    height: 34px;
    min-width: 90px;
    padding: 0 0.5rem;
    border: 1px solid var(--rx-border-input);
    border-radius: var(--rx-radius-sm);
    background: #ffffff;
    color: var(--rx-text-main);
}

.rx-result-table td select:focus {
    outline: none;
    border-color: var(--rx-border-focus);
    box-shadow: var(--rx-focus-ring);
}

.rx-result-table td > button:not(.btn) {
    width: 28px;
    height: 28px;
    margin-left: 4px;
    border: 1px solid var(--rx-border-input);
    border-radius: var(--rx-radius-sm);
    background: #ffffff;
    color: var(--rx-primary-600);
    font-weight: 700;
    line-height: 1;
}

.rx-result-table td > button:not(.btn):hover {
    background: var(--rx-primary-50);
}

/* ==========================================================================
   Lab Receipt
   ========================================================================== */
.rx-input-with-button {
    display: flex;
    gap: 6px;
}

.rx-input-with-button > .dx-texteditor {
    flex: 1 1 auto;
}

.rx-input-with-button > .dx-button {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
}

.rx-receipt-items td:nth-child(5),
.rx-receipt-items td:nth-child(6),
.rx-receipt-items td:nth-child(7),
.rx-receipt-items th:nth-child(5),
.rx-receipt-items th:nth-child(6),
.rx-receipt-items th:nth-child(7) {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

.rx-total-field label {
    color: var(--rx-primary-800) !important;
}

.rx-total-field .dx-texteditor.dx-editor-outlined {
    background: var(--rx-primary-50) !important;
    border-color: var(--rx-primary-200) !important;
}

.rx-total-field .dx-texteditor-input {
    font-size: 1.05rem !important;
    font-weight: 800;
    color: var(--rx-primary-800) !important;
    -webkit-text-fill-color: var(--rx-primary-800);
}

/* Labels placed directly in grid columns (without a form-group) */
.content-wrapper .rx-section .card-body [class*="col-"] > label {
    display: inline-block;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: var(--rx-text-label) !important;
    margin-bottom: 0.35rem !important;
}

.content-wrapper .rx-section .card-body [class*="col-"] > .dx-widget {
    margin-bottom: 1rem;
}

/* ==========================================================================
   Admin - Centre Master (branding images, inline "Apply All" buttons)
   ========================================================================== */
.rx-input-with-button > .btn {
    flex-shrink: 0;
    height: 38px;
    white-space: nowrap;
}

.rx-image-panel .card-body {
    padding: 1rem !important;
}

.rx-image-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    margin-bottom: 0.75rem;
    background: #ffffff;
    border: 1px dashed var(--rx-border-dark);
    border-radius: var(--rx-radius-md);
    overflow: hidden;
}

.rx-image-preview img {
    max-height: 120px;
    width: auto;
    border: none !important;
    margin: 0 !important;
}

.rx-image-panel .custom-file-label {
    border-radius: var(--rx-radius-md) !important;
    border-color: var(--rx-border-input) !important;
    font-size: 0.82rem;
    color: var(--rx-text-muted);
}

.rx-image-panel > .card-footer {
    position: static !important;
    background: transparent !important;
    padding: 0.6rem 1rem !important;
}

/* ==========================================================================
   Admin - Lab Test configuration accordion & Pathologist documents
   ========================================================================== */
.rx-accordion > .card {
    border: 1px solid var(--rx-border) !important;
    border-radius: var(--rx-radius-md) !important;
    box-shadow: none !important;
    margin-bottom: 0.75rem !important;
    overflow: hidden;
}

.rx-accordion > .card > .card-header {
    padding: 0 !important;
    background: var(--rx-bg-subtle) !important;
    border-bottom: 1px solid var(--rx-border) !important;
    text-transform: none;
    letter-spacing: 0;
}

.rx-accordion > .card > .card-header .btn-header-link {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.8rem 1.1rem !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--rx-text-main) !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    text-align: left;
    text-decoration: none !important;
}

.rx-accordion > .card > .card-header .btn-header-link::after {
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.75rem;
    color: var(--rx-text-muted);
    transition: transform 0.2s ease;
}

.rx-accordion > .card > .card-header .btn-header-link.collapsed::after {
    transform: rotate(-90deg);
}

.rx-accordion > .card > .card-header .btn-header-link:not(.collapsed) {
    color: var(--rx-primary-700) !important;
}

.rx-accordion > .card > .collapse > .card-body,
.rx-accordion > .card > .collapsing > .card-body {
    padding: 1.1rem !important;
    background: #ffffff;
}

/* Option 1 / Option 2 panels inside the result range */
.rx-accordion .card .card.mb-4 {
    margin-bottom: 1rem !important;
}

.rx-accordion .card .card > .card-header.border {
    border: none !important;
    border-bottom: 1px solid var(--rx-border) !important;
}

.rx-accordion .table {
    border: 1px solid var(--rx-border);
    border-radius: var(--rx-radius-md);
}

.rx-doc-preview label {
    margin: 0 !important;
    padding: 0 0.75rem;
    font-size: 0.82rem !important;
    color: var(--rx-text-secondary) !important;
    word-break: break-all;
    text-align: center;
}

/* ==========================================================================
   Admin - User Master & Lab Test Price List
   ========================================================================== */
.rx-check-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 38px;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--rx-border-input);
    border-radius: var(--rx-radius-md);
    background: var(--rx-bg-subtle);
}

.rx-check-card .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 0;
    margin: 0;
}

.rx-check-card .form-check-input {
    position: static;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--rx-primary-600);
    cursor: pointer;
}

.content-wrapper .rx-check-card .form-check-label {
    margin: 0 !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--rx-text-main) !important;
    cursor: pointer;
}

.rx-check-card small {
    margin-top: 2px;
    padding-left: 24px;
    font-size: 0.74rem;
    color: var(--rx-text-muted);
}

/* Scrollable item table with a sticky header */
.rx-scroll-table {
    max-height: 520px;
    overflow: auto;
}

.rx-scroll-table .table {
    margin: 0 !important;
}

.rx-scroll-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.rx-scroll-table td input[type=number] {
    width: 120px;
}

/* ==========================================================================
   Centre - Preferences colour tiles, profile photo, row action icons
   ========================================================================== */
.rx-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.rx-color-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--rx-border);
    border-radius: var(--rx-radius-md);
    background: var(--rx-bg-subtle);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rx-color-tile:hover {
    border-color: var(--rx-border-input-hover);
    box-shadow: var(--rx-shadow-xs);
}

.rx-color-tile input[type=color] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 2px;
    border: 1px solid var(--rx-border-input);
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
}

.rx-color-tile span {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--rx-text-secondary);
    line-height: 1.25;
}

.rx-profile-card .card-body {
    text-align: center;
}

.rx-profile-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    margin-bottom: 1rem;
    border: 1px dashed var(--rx-border-dark);
    border-radius: var(--rx-radius-md);
    background: var(--rx-bg-subtle);
    overflow: hidden;
}

.rx-profile-photo input[type=image] {
    border-radius: var(--rx-radius-md);
    object-fit: cover;
    margin: 0 !important;
}

.rx-file-label {
    display: inline-flex !important;
    align-items: center;
    padding: 0.45rem 1rem;
    margin-bottom: 0.5rem !important;
    border: 1px solid var(--rx-border-input);
    border-radius: var(--rx-radius-md);
    background: #ffffff;
    color: var(--rx-text-secondary) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    cursor: pointer;
}

.rx-file-label:hover {
    background: var(--rx-bg-muted);
}

.rx-profile-card .file-upload-btn input[type=file] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.rx-items-table td i.rx-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--rx-radius-sm);
    color: var(--rx-primary-600);
    cursor: pointer;
}

.rx-items-table td i.rx-row-action:hover {
    background: var(--rx-primary-50);
}

.rx-qc-items td .form-control {
    height: 34px !important;
    min-width: 110px;
}

/* ---- Admin forms: input suffix, contact rows, variable list, code input ---- */
.rx-input-suffix .input-group-text {
    background: var(--rx-bg-muted);
    border-color: var(--rx-border-input);
    color: var(--rx-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.rx-row-label,
.rx-row-label label {
    display: block;
    margin-bottom: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--rx-text-label);
}

.rx-contact-rows .rx-contact-row {
    margin-left: 0;
    margin-right: 0;
    padding: 10px 4px 0;
    border-bottom: 1px dashed var(--rx-border);
}

.rx-contact-rows .rx-contact-row:last-child {
    border-bottom: 0;
}

.rx-contact-rows .rx-contact-row .form-group {
    margin-bottom: 10px;
}

@media (max-width: 991.98px) {
    .rx-row-label { padding-bottom: 6px; }
}

.card.rx-variable-panel {
    height: 100%;
}

.rx-variable-list {
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid var(--rx-border);
    border-radius: var(--rx-radius-md);
    background: var(--rx-bg-surface);
}

.rx-variable-list table {
    margin-bottom: 0 !important;
    border: 0 !important;
}

.rx-variable-list thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.rx-variable-list tbody td {
    cursor: pointer;
    font-family: var(--rx-font-mono);
    font-size: 0.78rem;
    color: var(--rx-primary-600);
    word-break: break-all;
}

.rx-variable-list tbody td:hover {
    background: var(--rx-primary-50) !important;
}

.form-control.rx-code-input {
    font-family: var(--rx-font-mono);
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* ==========================================================================
   Relox Global Progress Bar, Button Spinners & Loading States
   ========================================================================== */

/* Top Animated Progress Bar */
#rx-top-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3.5px;
    background: linear-gradient(90deg, #0284c7, #38bdf8, #0ea5e9, #06b6d4, #0284c7);
    background-size: 200% 100%;
    z-index: 9999999;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.7), 0 0 5px rgba(56, 189, 248, 0.5);
    transition: width 0.25s ease, opacity 0.35s ease;
    opacity: 0;
    pointer-events: none;
}

#rx-top-progress-bar.rx-active {
    opacity: 1;
    animation: rx-progress-glow 1.5s infinite linear;
}

@keyframes rx-progress-glow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Floating Status Indicator / Toast */
#rx-search-loading-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 9999998;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

#rx-search-loading-toast.show {
    transform: translateY(0);
    opacity: 1;
}

#rx-search-loading-toast .rx-spinner-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2.5px solid rgba(255, 255, 255, 0.25);
    border-top-color: #38bdf8;
    border-radius: 50%;
    animation: rx-spin 0.7s infinite linear;
}

@keyframes rx-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Button Loading State */
.rx-btn-loading,
button.rx-btn-loading,
a.btn.rx-btn-loading {
    position: relative !important;
    pointer-events: none !important;
    opacity: 0.85 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

.rx-btn-loading i.fa-spinner,
.rx-btn-loading i.fa-circle-notch {
    animation: rx-spin 0.7s infinite linear;
}

/* Table Loading Placeholder */
.rx-table-loading-row td {
    padding: 36px 16px !important;
    text-align: center !important;
    background: var(--rx-bg-subtle, #f8fafc) !important;
    color: var(--rx-text-muted, #64748b) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
}

.rx-table-loading-row .rx-table-spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid rgba(2, 132, 199, 0.2);
    border-top-color: var(--rx-primary-600, #0284c7);
    border-radius: 50%;
    animation: rx-spin 0.8s infinite linear;
    margin-bottom: 8px;
}


/* ===================================================================
   Admin Portal login — Update Database
   ===================================================================
   The entry point for applying the script folder. Deliberately quiet:
   it is for whoever is installing or upgrading and must not compete
   with the sign-in button.

   It must NOT be styled for the dark pane alone. The first version was
   white-on-transparent, which vanished entirely whenever this
   stylesheet failed to load and the page fell back to a white
   background — present in the DOM, invisible on screen, and
   indistinguishable from "the feature isn't there". So it carries its
   own background and border and reads on either backdrop. */

.rx-db-update { margin-top: 18px; text-align: center; }

.rx-db-update-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid rgba(125, 140, 160, .45);
    border-radius: 18px;
    background: rgba(125, 140, 160, .12);
    font-size: 12.5px;
    color: #5b6b80;
    cursor: pointer;
}

.rx-db-update-link:hover {
    border-color: #0d6efd;
    background: rgba(13, 110, 253, .1);
    color: #0d6efd;
}

/* The script list inside the confirmation dialog. */
.rx-db-scripts { text-align: left; max-height: 260px; overflow: auto; font-size: 13px; }
.rx-db-scripts table { width: 100%; border-collapse: collapse; }
.rx-db-scripts td { padding: 4px 6px; border-bottom: 1px solid #eee; vertical-align: top; }
.rx-db-scripts .f { font-family: ui-monospace, Consolas, monospace; }
.rx-db-pending { color: #b45309; font-weight: 600; }
.rx-db-done    { color: #15803d; }
.rx-db-changed { color: #b91c1c; font-weight: 600; }