/* ═══════════════════════════════════════════════════════════════════════
       1. CSS Variables / Design Tokens
    ═══════════════════════════════════════════════════════════════════════ */
    html {
      background: var(--mr-surface);
      min-height: 100%;
      min-height: 100dvh;
      min-height: -webkit-fill-available
    }

    :root {
      /* iOS notch / شريط الحالة عند «إضافة إلى الشاشة الرئيسية» */
      --mr-safe-top: env(safe-area-inset-top, 0px);
      --mr-safe-bottom: env(safe-area-inset-bottom, 0px);
      --mr-safe-left: env(safe-area-inset-left, 0px);
      --mr-safe-right: env(safe-area-inset-right, 0px);
      --login-portal-bg: var(--mr-bg-2);
      /* Mirsad Design System — tokens (black primary, RTL) */
      --mr-primary: #0f1224;
      --mr-primary-hover: #2a2d3f;
      --mr-primary-soft: #dfe3eb;
      --mr-primary-softer: #ffffff;
      --mr-primary-text: #0f1224;
      --mr-surface: #ffffff;
      --mr-bg: #ffffff;
      --mr-bg-2: #f5f5f7;
      --mr-theme-chrome: var(--mr-bg-2);
      --mr-border: #e2e2e6;
      --mr-border-2: #cacace;
      --mr-text: #131316;
      --mr-text-2: #4b4b57;
      --mr-text-3: #87879a;
      --mr-text-muted: #a1a1aa;
      --mr-green: #48A111;
      --mr-success: var(--mr-green);
      --mr-amber: #FFC300;
      --mr-warning: var(--mr-amber);
      --mr-red: #FF0000;
      --mr-danger: var(--mr-red);
      /* حالات دلالية — OKLCH */
      --success: oklch(0.72 0.16 152);
      --warning: oklch(0.78 0.15 75);
      --info: oklch(0.7 0.16 250);
      --destructive: oklch(0.65 0.22 25);
      --mr-radius-pill: 34px;
      --mr-radius-card: 16px;
      --mr-radius-md: 12px;
      --mr-shadow-card: 0 1px 4px rgba(0, 0, 0, 0.08), 0 6px 20px rgba(0, 0, 0, 0.07), inset 0 0 0 1px rgba(0, 0, 0, 0.07);
      --mr-shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.07), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
      --mr-shadow-primary: 0 4px 14px rgba(108, 71, 255, 0.25);
      --mr-shadow-sidebar: -8px 0 24px rgba(15, 18, 36, 0.06);
      --mr-radius-sm: 8px;
      --mr-blue: var(--info);
      --b-blue-bg: color-mix(in oklch, var(--info) 14%, transparent);
      --b-blue-fg: var(--info);
      --b-blue-bd: color-mix(in oklch, var(--info) 30%, transparent);
      --b-green-bg: color-mix(in oklch, var(--success) 14%, transparent);
      --b-green-fg: var(--success);
      --b-green-bd: color-mix(in oklch, var(--success) 30%, transparent);
      --b-amber-bg: color-mix(in oklch, var(--warning) 16%, transparent);
      --b-amber-fg: var(--warning);
      --b-amber-bd: color-mix(in oklch, var(--warning) 32%, transparent);
      --b-red-bg: color-mix(in oklch, var(--destructive) 14%, transparent);
      --b-red-fg: var(--destructive);
      --b-red-bd: color-mix(in oklch, var(--destructive) 30%, transparent);
      --mr-purple: #6c47ff;
      --b-purple-bg: rgba(108, 71, 255, 0.08);
      --b-purple-fg: #6c47ff;
      --b-purple-bd: rgba(108, 71, 255, 0.2);
      /* Legacy aliases → Mirsad tokens (single source of truth) */
      --bg: #ffffff;
      --bg2: #f5f5f7;
      --bg3: #ffffff;
      --surface: #ffffff;
      --surface2: #f5f5f7;
      --border: #e2e2e6;
      --border2: #cacace;
      --text: #131316;
      --text2: #4b4b57;
      --text3: #87879a;
      --accent: var(--mr-primary);
      --accent2: var(--mr-primary-hover);
      --blue: var(--info);
      --blue-light: color-mix(in oklch, var(--info) 14%, transparent);
      --blue-text: var(--info);
      --blue-surface: color-mix(in oklch, var(--info) 10%, transparent);
      --green: var(--success);
      --green-light: color-mix(in oklch, var(--success) 14%, transparent);
      --green-text: var(--success);
      --green-surface: color-mix(in oklch, var(--success) 10%, transparent);
      --amber: var(--warning);
      --amber-light: color-mix(in oklch, var(--warning) 16%, transparent);
      --amber-text: var(--warning);
      --amber-surface: color-mix(in oklch, var(--warning) 12%, transparent);
      --red: var(--destructive);
      --red-light: color-mix(in oklch, var(--destructive) 14%, transparent);
      --red-text: var(--destructive);
      --red-surface: color-mix(in oklch, var(--destructive) 10%, transparent);
      --purple: #6c47ff;
      --purple-light: rgba(108, 71, 255, 0.08);
      --purple-text: #6c47ff;
      --purple-surface: rgba(108, 71, 255, 0.06);
      --sidebar-bg: #ffffff;
      --sidebar-text: #6b6b78;
      --sidebar-text2: #b0b0b8;
      --sidebar-hover: #f5f5f7;
      --sidebar-border: #e8e8ec;
      --sidebar-active: #131316;
      --sidebar-active-text: #ffffff;
      --radius: 14px;
      --radius-lg: 20px;
      --shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
      --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
      --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.1);
      --white-100: #ffffff;
      --fig-sidebar-bg: #ffffff;
      --fig-sidebar-accent: transparent;
      --fig-sidebar-active: #131316;
      --fig-sidebar-logout-bg: #ffffff;
      --fig-sidebar-logout-text: #6b6b78;
      --fig-sidebar-logout-hover: #f5f5f7;
      --fig-sidebar-radius: 20px;
      --fig-sidebar-w: 236px;
      --fig-sidebar-collapsed-w: 150px;
      --fig-sidebar-shadow: 0 8px 24px rgba(15, 18, 36, 0.06);
      --font: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
      --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
    }

    :root,
    [data-theme="light"] {
      --wefaq-logo-color: #000000
    }

    [data-theme="dark"] {
      --wefaq-logo-color: #ffffff;
      color-scheme: dark;
      --mr-primary: #52586b;
      --mr-primary-hover: #666d82;
      --mr-primary-text: #f8fafc;
      --mr-surface: #1c1c21;
      --mr-bg: #131316;
      --mr-bg-2: #1c1c21;
      --mr-theme-chrome: var(--mr-bg-2);
      --mr-border: rgba(255, 255, 255, 0.14);
      --mr-border-2: rgba(255, 255, 255, 0.22);
      --mr-text: #fafafa;
      --mr-text-2: #c8c8d0;
      --mr-text-3: #a1a1aa;
      --mr-text-muted: #808089;
      --mr-primary-soft: rgba(255, 255, 255, 0.16);
      --mr-primary-softer: rgba(255, 255, 255, 0.09);
      --mr-green: var(--success);
      --mr-success: var(--success);
      --mr-amber: var(--warning);
      --mr-warning: var(--warning);
      --mr-red: var(--destructive);
      --mr-danger: var(--destructive);
      --mr-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
      --mr-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
      --bg: var(--mr-bg);
      --bg2: var(--mr-bg-2);
      --bg3: var(--mr-surface);
      --surface: var(--mr-surface);
      --surface2: #1a1f2e;
      --white-100: var(--mr-surface);
      --border: var(--mr-border);
      --border2: var(--mr-border-2);
      --text: var(--mr-text);
      --text2: var(--mr-text-2);
      --text3: var(--mr-text-3);
      --accent: var(--mr-primary);
      --accent2: var(--mr-primary-hover);
      --red: var(--destructive);
      --red-text: var(--destructive);
      --mr-blue: var(--info);
      --blue: var(--info);
      --blue-text: var(--info);
      --blue-light: color-mix(in oklch, var(--info) 20%, transparent);
      --blue-surface: color-mix(in oklch, var(--info) 14%, transparent);
      --b-blue-bg: color-mix(in oklch, var(--info) 20%, transparent);
      --b-blue-bd: color-mix(in oklch, var(--info) 36%, transparent);
      --b-blue-fg: var(--info);
      --sidebar-active: var(--mr-primary);
      --green: var(--success);
      --green-text: var(--success);
      --green-light: color-mix(in oklch, var(--success) 20%, transparent);
      --green-surface: color-mix(in oklch, var(--success) 14%, transparent);
      --b-green-bg: color-mix(in oklch, var(--success) 20%, transparent);
      --b-green-bd: color-mix(in oklch, var(--success) 36%, transparent);
      --b-green-fg: var(--success);
      --amber: var(--warning);
      --amber-text: var(--warning);
      --amber-light: color-mix(in oklch, var(--warning) 22%, transparent);
      --amber-surface: color-mix(in oklch, var(--warning) 14%, transparent);
      --b-amber-bg: color-mix(in oklch, var(--warning) 22%, transparent);
      --b-amber-bd: color-mix(in oklch, var(--warning) 38%, transparent);
      --b-amber-fg: var(--warning);
      --red-light: color-mix(in oklch, var(--destructive) 20%, transparent);
      --red-surface: color-mix(in oklch, var(--destructive) 14%, transparent);
      --b-red-bg: color-mix(in oklch, var(--destructive) 20%, transparent);
      --b-red-bd: color-mix(in oklch, var(--destructive) 36%, transparent);
      --b-red-fg: var(--destructive);
      --mr-purple: #6c47ff;
      --purple: var(--mr-purple);
      --purple-text: var(--mr-purple);
      --purple-light: rgba(124, 0, 254, 0.16);
      --purple-surface: rgba(124, 0, 254, 0.12);
      --b-purple-bg: rgba(124, 0, 254, 0.14);
      --b-purple-bd: rgba(124, 0, 254, 0.32);
      --b-purple-fg: var(--mr-purple);
      --sidebar-bg: #0a0a0a;
      --sidebar-text: rgba(255, 255, 255, 0.84);
      --sidebar-text2: rgba(255, 255, 255, 0.55);
      --sidebar-hover: rgba(255, 255, 255, 0.09);
      --sidebar-border: rgba(255, 255, 255, 0.14);
      --sidebar-active: rgba(255, 255, 255, 0.24);
      --sidebar-active-text: #ffffff;
      --fig-sidebar-bg: #0a0a0a;
      --fig-sidebar-active: rgba(255, 255, 255, 0.16);
      --fig-sidebar-logout-bg: #0a0a0a;
      --fig-sidebar-logout-text: rgba(255, 255, 255, 0.68);
      --fig-sidebar-logout-hover: rgba(255, 255, 255, 0.09);
    }

    /* Dark mode — وضوح النصوص والأيقونات والحواف (بدون تغيير الخطوط) */
    [data-theme="dark"] .nav-icon-wrap {
      color: rgba(255, 255, 255, 0.52);
      background: rgba(255, 255, 255, 0.07);
    }

    [data-theme="dark"] .nav-item:hover:not(.active) .nav-icon-wrap {
      color: rgba(255, 255, 255, 0.82);
      background: rgba(255, 255, 255, 0.13);
    }

    [data-theme="dark"] .nav-item.active .nav-icon-wrap {
      background: rgba(255, 255, 255, 0.24);
      color: #ffffff;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
    }

    [data-theme="dark"] .nav-item.active .nav-icon-wrap i,
    [data-theme="dark"] .nav-item.active .nav-icon-wrap i::before {
      color: #ffffff !important;
    }

    [data-theme="dark"] .nav-item.active,
    [data-theme="dark"] .nav-item.active .nav-item-label {
      color: #ffffff;
      -webkit-text-fill-color: #ffffff;
    }

    [data-theme="dark"] .figma-search-btn {
      color: var(--mr-text-2);
    }

    [data-theme="dark"] .figma-search-btn:hover {
      background: var(--mr-primary-softer);
      color: var(--mr-text);
      filter: none;
    }

    [data-theme="dark"] .topbar-btn {
      border-color: var(--mr-border-2);
      color: var(--mr-text-2);
    }

    [data-theme="dark"] .topbar-btn:hover {
      color: var(--mr-text);
      border-color: rgba(255, 255, 255, 0.28);
      background: var(--mr-primary-softer);
    }

    [data-theme="dark"] .topbar-btn--theme {
      border-color: var(--mr-border-2);
      color: var(--mr-text);
    }

    [data-theme="dark"] .mr-topbar-user-chevron {
      color: var(--mr-text-2);
    }

    [data-theme="dark"] .mr-topbar-user-menu button i {
      color: var(--mr-text-2);
    }

    [data-theme="dark"] #appWrap .logout-btn {
      color: var(--mr-text);
      border-color: var(--mr-border-2);
    }

    [data-theme="dark"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-warning),
    [data-theme="dark"] .mk-btn:not(.mk-btn--primary) {
      color: var(--mr-text);
      border-color: var(--mr-border-2);
    }

    [data-theme="dark"] .btn-ghost,
    [data-theme="dark"] .mk-btn--ghost {
      color: var(--mr-text-2);
      border-color: transparent;
    }

    [data-theme="dark"] .btn-ghost:hover,
    [data-theme="dark"] .mk-btn--ghost:hover,
    [data-theme="dark"] .mk-link:hover {
      color: var(--mr-text);
    }

    [data-theme="dark"] .mk-link {
      color: var(--mr-text-2);
    }

    [data-theme="dark"] #appWrap .cmp-tab.active {
      color: var(--mr-text);
      border-bottom-color: var(--mr-text);
    }

    [data-theme="dark"] #appWrap .rp-tool-btn:not(.rp-tool-btn-primary):not(.active) {
      border-color: var(--mr-border-2);
      color: var(--mr-text-2);
    }

    [data-theme="dark"] #appWrap .panel,
    [data-theme="dark"] #appWrap .mk-form-panel,
    [data-theme="dark"] #appWrap .mk-card,
    [data-theme="dark"] #appWrap .mk-cmp-card,
    [data-theme="dark"] #appWrap .md-stat-card,
    [data-theme="dark"] #appWrap .rp-stat-card,
    [data-theme="dark"] #appWrap .stat-card-v2,
    [data-theme="dark"] #appWrap .cmp-neo-card,
    [data-theme="dark"] #appWrap .mk-cmp-emp-card,
    [data-theme="dark"] #appWrap .modal-box,
    [data-theme="dark"] #appWrap .filter-panel,
    [data-theme="dark"] #appWrap .date-picker-popup {
      border-color: var(--mr-border-2);
    }

    [data-theme="dark"] #appWrap input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    [data-theme="dark"] #appWrap select,
    [data-theme="dark"] #appWrap textarea,
    [data-theme="dark"] #appWrap .form-select,
    [data-theme="dark"] #appWrap .toolbar-input,
    [data-theme="dark"] #appWrap .figma-search-wrap {
      border-color: var(--mr-border-2);
    }

    [data-theme="dark"] .empty i,
    [data-theme="dark"] .mk-empty i,
    [data-theme="dark"] #tab-dashboard .md-empty i {
      opacity: 0.72;
      color: var(--mr-text-3);
    }

    [data-theme="dark"] .sidebar .logout-btn {
      border-color: var(--mr-border-2);
    }

    [data-theme="dark"] .wf-status-trigger {
      border-color: var(--mr-border-2);
      box-shadow: none;
    }

    [data-theme="dark"] .wf-status-trigger__ico {
      color: var(--mr-text);
    }

    [data-theme="dark"] .wf-status-trigger__chev {
      color: var(--mr-text-2);
    }

    [data-theme="dark"] .wf-status-trigger[aria-expanded="true"] .wf-status-trigger__chev {
      color: var(--mr-text);
    }

    [data-theme="dark"] .mk-attn__avatar {
      color: #ffffff;
      -webkit-text-fill-color: #ffffff;
    }

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

    html {
      font-size: 14px;
      background: var(--bg);
      color-scheme: light;
    }

    body {
      font-family: var(--font);
      font-weight: 400;
      background: var(--bg);
      color: var(--text);
      direction: rtl;
      min-height: 100vh;
      overflow-x: hidden;
      font-variant-numeric: lining-nums tabular-nums;
      -webkit-font-smoothing: antialiased;
    }

    /* Mirsad: keep numbers and dates in Latin/English even inside Arabic copy */
    .num,
    [data-numeric],
    .md-stat-value,
    .rp-stat-value,
    .stat-v2-value,
    .topbar-clock,
    .notif-bell-count,
    .nav-badge,
    .br-emp-num,
    .toolbar-input[type="number"],
    table td.num,
    .data-table td:first-child:not(.wf-ticket-cell) {
      font-variant-numeric: lining-nums tabular-nums;
      font-feature-settings: "tnum" 1, "lnum" 1;
      unicode-bidi: plaintext;
    }

    body.modal-open {
      overflow: hidden;
    }

    body.login-portal-open {
      overflow: hidden;
      overscroll-behavior: none
    }

    html.login-portal-open {
      overscroll-behavior: none
    }

    /* جوال / PWA: امتداد أسفل الشاشة — لون واحد مع الصفحة */
    #loginScreenFloor {
      display: none;
      position: absolute;
      z-index: 0;
      pointer-events: none;
      left: 0;
      right: 0;
      top: 0;
      bottom: calc(-1 * var(--login-safe-bleed));
      background: var(--login-portal-bg, var(--mr-bg-2))
    }

    html.mr-mobile-ui.login-portal-open,
    html.mr-mobile-ui body.login-portal-open {
      background: var(--login-portal-bg, var(--mr-bg-2)) !important;
      position: fixed !important;
      top: 0 !important;
      right: 0 !important;
      left: 0 !important;
      bottom: calc(-1 * var(--login-safe-bleed)) !important;
      width: 100% !important;
      height: auto !important;
      min-height: calc(100% + var(--login-safe-bleed)) !important;
      min-height: calc(100dvh + var(--login-safe-bleed)) !important;
      margin: 0 !important;
      overflow: hidden !important;
      overscroll-behavior: none !important;
      touch-action: none
    }

    @media (max-width: 992px), (hover: none) and (pointer: coarse) {
      html.mr-mobile-ui body.login-portal-open #loginPortalBackdrop.login-portal-backdrop {
        display: block;
        position: fixed;
        z-index: 0;
        pointer-events: none;
        background: var(--login-portal-bg, var(--mr-bg-2));
        top: 0;
        left: 0;
        right: 0;
        bottom: calc(-1 * var(--login-safe-bleed));
        width: 100%;
        height: auto;
        min-height: calc(100dvh + var(--login-safe-bleed))
      }

      html.mr-mobile-ui body.login-portal-open #loginScreen.lp-screen {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: calc(-1 * var(--login-safe-bleed)) !important;
        width: 100% !important;
        height: auto !important;
        min-height: calc(100% + var(--login-safe-bleed)) !important;
        min-height: calc(100dvh + var(--login-safe-bleed)) !important;
        max-height: none !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
        -webkit-overflow-scrolling: auto;
        touch-action: none;
        background: var(--login-portal-bg, var(--mr-bg-2)) !important;
        padding: 0 !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
        padding-left: env(safe-area-inset-left, 0px) !important;
        padding-right: env(safe-area-inset-right, 0px) !important;
        padding-bottom: var(--login-safe-bleed) !important;
        box-sizing: border-box
      }

      html.mr-mobile-ui body.login-keyboard-open.login-portal-open #loginScreen.lp-screen {
        top: var(--login-vp-top, 0) !important;
        bottom: auto !important;
        height: var(--login-vp-h, 50dvh) !important;
        min-height: 0 !important;
        max-height: var(--login-vp-h, 50dvh) !important;
        padding-bottom: 0 !important;
        justify-content: flex-start !important;
        padding-top: max(8px, env(safe-area-inset-top, 0px)) !important
      }

      html.mr-mobile-ui body.login-portal-open #loginScreen .lp-bg-blobs {
        z-index: 1;
        inset: 0;
        bottom: calc(-1 * var(--login-safe-bleed))
      }

      html.mr-mobile-ui body.login-portal-open #loginScreen .lp-center {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 28rem;
        margin-block: 0;
        flex: 0 1 auto;
        max-height: 100%;
        padding-block: clamp(12px, 3vh, 28px);
        padding-inline: max(clamp(20px, 5vw, 36px), env(safe-area-inset-left, 0px));
        padding-right: max(clamp(20px, 5vw, 36px), env(safe-area-inset-right, 0px));
        padding-bottom: max(clamp(12px, 3vw, 24px), env(safe-area-inset-bottom, 0px));
        transform: translate3d(0, var(--login-card-shift, 0px), 0);
        -webkit-transform: translate3d(0, var(--login-card-shift, 0px), 0);
        transition: transform 0.22s ease;
        will-change: transform
      }

      html.mr-mobile-ui body.login-portal-open #loginScreen input,
      html.mr-mobile-ui body.login-portal-open #loginScreen textarea,
      html.mr-mobile-ui body.login-portal-open #loginScreen select,
      html.mr-mobile-ui body.login-portal-open #loginScreen button,
      html.mr-mobile-ui body.login-portal-open #loginScreen a,
      html.mr-mobile-ui body.login-portal-open #loginScreen label {
        touch-action: manipulation
      }
    }

    html.mr-mobile-ui #loginScreen.lp-screen:not(.hidden) {
      overflow: hidden !important;
      overscroll-behavior: none !important;
      -webkit-overflow-scrolling: auto
    }

    /* شاشة تسجيل الدخول — نفس أسلوب الأرشيف (مرصاد) + انتقال التحميل */
    #loginScreen.hidden {
      display: none !important
    }

    #loginScreen.lp-screen {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      min-height: 100dvh;
      min-height: 100vh;
      padding-top: max(clamp(16px, 4vw, 32px), env(safe-area-inset-top, 0px));
      padding-bottom: max(clamp(16px, 4vw, 32px), env(safe-area-inset-bottom, 0px));
      padding-left: max(clamp(20px, 5vw, 36px), env(safe-area-inset-left, 0px));
      padding-right: max(clamp(20px, 5vw, 36px), env(safe-area-inset-right, 0px));
      background: var(--login-portal-bg);
      color: var(--mr-text);
      direction: rtl;
      touch-action: manipulation;
      -webkit-overflow-scrolling: touch;
      box-sizing: border-box
    }

    #loginScreen .lp-center {
      width: 100%;
      max-width: 28rem;
      margin-inline: auto;
      margin-block: auto;
      flex: 0 0 auto
    }

    #loginScreen #loginCard {
      width: 100%;
      max-width: 28rem;
      margin-inline: auto
    }

    /* iOS PWA: إيقاف حركات الدخول فقط (لا تغيير مقاس الشعار أو البطاقة) */
    @media (display-mode: standalone),
    (display-mode: fullscreen) {
      #loginScreen .lp-blob {
        animation: none;
        opacity: 0.32
      }

      #loginScreen .lp-card--in,
      #loginScreen .lp-f2,
      #loginScreen .lp-f3,
      #loginScreen .lp-f4,
      #loginScreen .lp-f5,
      #loginScreen #loginCard .lp-hd--wefaq .wefaq-logo-slot {
        animation: none !important
      }
    }

    #loginScreen.lp-standalone-pwa .lp-blob {
      animation: none;
      opacity: 0.32
    }

    #loginScreen.lp-standalone-pwa .lp-card--in,
    #loginScreen.lp-standalone-pwa .lp-f2,
    #loginScreen.lp-standalone-pwa .lp-f3,
    #loginScreen.lp-standalone-pwa .lp-f4,
    #loginScreen.lp-standalone-pwa .lp-f5,
    #loginScreen.lp-standalone-pwa #loginCard .lp-hd--wefaq .wefaq-logo-slot {
      animation: none !important
    }

    #loginScreen.lp-standalone-pwa .lp-card,
    #loginScreen.lp-standalone-pwa .lp-center {
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation
    }

    #loginScreen .lp-bg-blobs {
      display: none;
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      z-index: 1
    }

    #loginPortalBackdrop.login-portal-backdrop {
      display: none
    }

    #loginScreen .lp-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(48px);
      background: color-mix(in srgb, var(--mr-primary-soft) 75%, transparent);
      animation: lpBlobA 8s ease-in-out infinite
    }

    [data-theme="dark"] #loginScreen .lp-blob {
      opacity: 0.42
    }

    #loginScreen .lp-blob-a {
      width: 320px;
      height: 320px;
      top: -120px;
      right: -120px
    }

    #loginScreen .lp-blob-b {
      width: 320px;
      height: 320px;
      bottom: -120px;
      left: -120px;
      animation-name: lpBlobB
    }

    #loginScreen .lp-center {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 28rem
    }

    #loginScreen .lp-card {
      background: var(--mr-surface);
      border: 1px solid var(--mr-border);
      border-radius: var(--mr-radius-card);
      box-shadow: var(--mr-shadow-card);
      overflow: visible
    }

    #loginScreen .lp-card .lp-bd {
      overflow: hidden;
      border-radius: 0 0 var(--mr-radius-card) var(--mr-radius-card)
    }

    #loginScreen .lp-card .lp-hd--wefaq {
      overflow: visible;
      position: relative;
      z-index: 2
    }

    #loginScreen .lp-card--in {
      animation: lpCardRise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both
    }

    #loginScreen .lp-hd {
      text-align: center;
      padding: 2rem 1.25rem 1.25rem
    }

    #loginScreen .lp-brand-ico:not(.wefaq-logo-slot) {
      width: 4.5rem;
      height: 4.5rem;
      margin: 0 auto 1rem;
      border-radius: 999px;
      background: var(--mr-primary-soft);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--mr-primary);
      font-size: 1.85rem;
      box-shadow: none;
      animation: lpIconSpring 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s both
    }

    .wefaq-logo-slot,
    .wefaq-logo-host {
      background: transparent !important;
      box-shadow: none !important;
      border-radius: 0 !important;
      color: var(--wefaq-logo-color);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 !important;
      overflow: visible !important
    }

    .wefaq-logo-host .wefaq-app-logo,
    .wefaq-logo-slot .wefaq-app-logo {
      display: block;
      width: 100%;
      height: auto;
      flex-shrink: 0;
      color: inherit;
      overflow: visible
    }

    .wefaq-app-logo--athar {
      aspect-ratio: 3 / 1;
      width: 11rem;
      max-width: min(86vw, 11rem);
      height: 3.7rem
    }

    .wefaq-app-logo--athar-img {
      display: block;
      object-fit: cover;
      object-position: center 53%;
      border: 0;
      user-select: none;
      pointer-events: none
    }

    [data-theme="dark"] .wefaq-app-logo--athar-img {
      filter: invert(1) brightness(1.08) contrast(1.05);
    }

    [data-theme="light"] .wefaq-app-logo--athar-img {
      filter: none;
    }

    .wefaq-app-logo--athar .athar-logo-deco path {
      shape-rendering: geometricPrecision
    }

    #loginScreen #loginCard .lp-hd--wefaq .wefaq-logo-slot,
    #loginTransition .wefaq-logo-slot,
    .brand-area .brand-icon.wefaq-logo-slot {
      width: 11rem;
      height: auto;
      max-width: min(86vw, 11rem)
    }

    #loginScreen #loginCard.lp-card .lp-hd--wefaq {
      padding: 1.35rem 1.25rem 1.05rem
    }

    #loginScreen #loginCard .lp-hd--wefaq .wefaq-logo-slot {
      margin: 0 auto 0.65rem;
      animation: lpIconSpring 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s both
    }

    #loginScreen #loginCard .wefaq-app-logo--athar .athar-logo-deco,
    #loginTransition .wefaq-app-logo--athar .athar-logo-deco {
      transform: translate(4px, 150px);
      transform-origin: center top
    }

    @media (min-width: 993px), (hover: hover) and (pointer: fine) {
      #loginScreen #loginCard .wefaq-app-logo--athar,
      #loginTransition .wefaq-app-logo--athar {
        aspect-ratio: 903 / 370;
        width: 11rem;
        max-width: min(86vw, 11rem)
      }

      #loginScreen #loginCard .wefaq-app-logo--athar .athar-logo-deco,
      #loginTransition .wefaq-app-logo--athar .athar-logo-deco {
        transform: translate(4px, 170px) !important;
        transform-origin: center top
      }
    }

    #loginScreen #loginCard .lp-hd--wefaq .lp-sub {
      margin: 0
    }

    #loginTransition .wefaq-logo-slot {
      margin: 0;
      animation: none
    }

    .topbar.unified-banner,
    .topbar-brand-zone {
      overflow: visible
    }

    .topbar-brand-zone {
      padding-inline-start: 16px
    }

    .topbar-brand-zone .brand-area {
      margin-inline-start: 10px;
      margin-block-start: 2px
    }

    .brand-area .brand-icon.wefaq-logo-slot {
      width: auto;
      height: auto;
      min-width: 0;
      min-height: 0;
      font-size: 0 !important;
      flex-shrink: 0;
      overflow: visible;
      position: relative
    }

    .brand-area .brand-icon.wefaq-logo-slot .wefaq-app-logo--athar {
      position: static;
      transform: none;
      margin-block-start: 2px
    }

    /* الشريط العلوي — موضع الشعار (واجهة سطح المكتب) */
    html.mr-desktop-ui #brandArea .brand-icon.wefaq-logo-slot,
    html.mr-desktop-ui #brandArea .brand-icon.wefaq-logo-slot .wefaq-app-logo--athar {
      width: 9.5rem;
      max-width: 9.5rem
    }

    html.mr-desktop-ui #brandArea .brand-icon.wefaq-logo-slot .wefaq-app-logo--athar {
      position: static !important;
      left: auto !important;
      top: auto !important;
      transform: translate(24px, 8px) !important
    }

    html.mr-desktop-ui #brandArea .brand-icon.wefaq-logo-slot .wefaq-app-logo--athar .athar-logo-deco {
      transform: translate(-12px, 150px);
      transform-origin: center top
    }

    html.mr-desktop-ui #brandArea .brand-icon.wefaq-logo-slot {
      width: auto !important;
      height: auto !important;
      min-width: 0 !important;
      min-height: 0 !important
    }

    #brandArea.brand-area {
      gap: 0
    }

    /* Desktop topbar: slimmer height and vertically centered ATHAR logo */
    html.mr-desktop-ui {
      --unified-topbar-h: 40px;
    }

    html.mr-desktop-ui #appWrap .topbar.unified-banner,
    html.mr-desktop-ui .topbar.unified-banner {
      height: 40px !important;
      min-height: 40px !important;
      max-height: 40px !important;
      padding-block: 3px !important;
      padding-block-start: 3px !important;
      align-items: center !important;
    }

    html.mr-desktop-ui .topbar-brand-zone,
    html.mr-desktop-ui .topbar-actions-zone {
      height: 100%;
      align-items: center !important;
    }

    html.mr-desktop-ui .topbar-brand-zone .brand-area {
      margin-block-start: 0 !important;
      align-items: center !important;
    }

    html.mr-desktop-ui #brandArea .brand-icon.wefaq-logo-slot .wefaq-app-logo--athar {
      width: 7.8rem !important;
      max-width: 7.8rem !important;
      height: 2.1rem !important;
      transform: translate(18px, 0) !important;
      margin-block-start: 0 !important;
    }

    #loginScreen .lp-title {
      margin: 0;
      font-size: clamp(1.6rem, 4vw, 2.1rem);
      font-weight: 800;
      color: var(--mr-text);
      letter-spacing: -0.02em;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.35rem
    }

    #loginScreen .lp-title i {
      color: var(--mr-primary);
      font-size: 1.1rem
    }

    #loginScreen .lp-sub {
      margin: 0.75rem 0 0;
      font-size: 0.95rem;
      color: var(--mr-text-3)
    }

    #loginScreen .lp-bd {
      padding: 0 1.35rem 1.75rem
    }

    #loginScreen .lp-f1 {
      animation: lpFieldSlide 0.5s ease 0.2s both
    }

    #loginScreen .lp-f2 {
      animation: lpFieldSlide 0.5s ease 0.32s both
    }

    #loginScreen .lp-f3 {
      animation: lpFieldSlide 0.5s ease 0.44s both
    }

    #loginScreen .lp-f4 {
      animation: lpFieldSlide 0.5s ease 0.54s both
    }

    #loginScreen .lp-f5 {
      animation: lpFieldSlide 0.5s ease 0.64s both
    }

    #loginScreen .lp-label {
      display: block;
      font-size: 0.88rem;
      font-weight: 600;
      margin-bottom: 0.4rem;
      color: var(--mr-text)
    }

    #loginScreen .lp-input {
      width: 100%;
      height: 3rem;
      border-radius: 999px;
      border: 1px solid var(--mr-border);
      padding: 0 1.1rem;
      font-family: var(--font);
      font-size: 0.95rem;
      background: var(--mr-bg-2);
      color: var(--mr-text);
      transition: border-color 0.2s, box-shadow 0.2s, background 0.2s
    }

    #loginScreen .lp-input::placeholder {
      color: var(--mr-text-muted)
    }

    #loginScreen .lp-input:focus {
      outline: none;
      border-color: var(--mr-border-2);
      background: var(--mr-surface);
      box-shadow: 0 0 0 3px var(--mr-primary-soft);
      scroll-margin: 0
    }

    #loginScreen .lp-input--otp {
      direction: ltr;
      text-align: center;
      letter-spacing: 0.38em;
      font-size: 1.18rem;
      font-weight: 800;
      padding-inline: 1.25rem 0.87rem
    }

    #loginScreen .lp-reset-email-hint {
      direction: ltr;
      display: inline-block;
      color: var(--mr-text);
      font-weight: 700
    }

    #loginScreen .lp-otp-delivery-note {
      margin: -0.35rem 0 1rem;
      color: var(--mr-text-3);
      font-size: 0.8rem;
      line-height: 1.7;
      text-align: center
    }

    #loginScreen .lp-input-wrap {
      position: relative
    }

    #loginScreen .lp-pw-toggle {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      border: none;
      background: transparent;
      color: var(--mr-text-3);
      cursor: pointer;
      padding: 6px;
      border-radius: 8px;
      transition: color 0.15s, background 0.15s, transform 0.12s
    }

    #loginScreen .lp-pw-toggle:hover {
      color: var(--mr-text);
      background: var(--mr-primary-softer)
    }

    #loginScreen .lp-input--pw {
      padding-left: 2.75rem
    }

    #loginScreen .lp-ios-autofill-trap {
      position: fixed;
      left: -9999px;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none
    }

    #loginScreen .lp-row {
      margin-bottom: 1.1rem
    }

    #loginScreen .lp-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.65rem;
      font-size: 0.82rem
    }

    #loginScreen .lp-meta label {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      cursor: pointer;
      color: var(--mr-text-3)
    }

    #loginScreen .lp-meta input[type="checkbox"] {
      accent-color: var(--mr-primary)
    }

    [data-theme="dark"] #loginScreen .lp-meta input[type="checkbox"] {
      accent-color: var(--mr-text)
    }

    #loginScreen .lp-link {
      color: var(--mr-text-2);
      font-weight: 700;
      text-decoration: none;
      transition: color 0.15s, opacity 0.15s
    }

    #loginScreen .lp-link:hover {
      color: var(--mr-text);
      text-decoration: underline;
      opacity: 1
    }

    #loginScreen .lp-resend-wrap {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      vertical-align: middle
    }

    #loginScreen .lp-link--resend.lp-link--disabled {
      opacity: 0.42;
      pointer-events: none;
      cursor: not-allowed;
      text-decoration: none
    }

    #loginScreen .lp-resend-countdown {
      font-size: 0.82rem;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: var(--mr-text-2);
      direction: ltr;
      unicode-bidi: isolate
    }

    #loginScreen .lp-resend-countdown--blocked {
      direction: rtl;
      unicode-bidi: normal;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--mr-text-3)
    }

    #loginScreen .lp-f5 {
      position: relative;
      z-index: 3
    }

    #loginScreen .lp-btn-primary {
      position: relative;
      z-index: 3;
      pointer-events: auto;
      width: 100%;
      height: 3rem;
      margin-top: 0.35rem;
      border: none;
      border-radius: 999px;
      font-family: var(--font);
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      color: #fff;
      background: var(--mr-primary);
      box-shadow: var(--mr-shadow-soft);
      transition: transform 0.12s, background 0.15s, opacity 0.15s, box-shadow 0.15s
    }

    #loginScreen .lp-btn-primary:hover:not(:disabled) {
      background: var(--mr-primary-hover);
      transform: translateY(-1px)
    }

    [data-theme="dark"] #loginScreen .lp-btn-primary {
      color: var(--mr-bg);
      background: var(--mr-text);
      box-shadow: var(--mr-shadow-soft)
    }

    [data-theme="dark"] #loginScreen .lp-btn-primary:hover:not(:disabled) {
      background: var(--mr-text-2);
      color: var(--mr-bg)
    }

    #loginScreen .lp-btn-primary:disabled {
      opacity: 0.85;
      cursor: wait
    }

    #loginScreen .lp-btn-spin {
      width: 1.25rem;
      height: 1.25rem;
      border: 2px solid rgba(255, 255, 255, 0.35);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
      display: inline-block;
      vertical-align: middle
    }

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

    #loginScreen .lp-divider {
      margin-top: 1.25rem;
      padding-top: 1.25rem;
      border-top: 1px solid var(--mr-border);
      text-align: center;
      font-size: 0.86rem;
      color: var(--mr-text-3)
    }

    #loginScreen .lp-divider.lp-secure-note {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
      line-height: 1.45
    }

    #loginScreen .lp-divider.lp-secure-note i {
      color: var(--mr-text-3);
      font-size: 0.9rem;
      flex-shrink: 0
    }

    #loginScreen .lp-foot-out {
      margin-top: 1.25rem;
      text-align: center;
      font-size: 0.78rem;
      color: var(--mr-text-3)
    }

    #loginScreen .login-err {
      display: none;
      margin-bottom: 0.75rem;
      padding: 0.55rem 0.65rem;
      border-radius: 8px;
      font-size: 0.82rem;
      background: var(--b-red-bg);
      color: var(--b-red-fg);
      border: 1px solid var(--b-red-bd)
    }

    #loginScreen .login-err.show {
      display: block
    }

    #loginScreen .login-ok.show {
      display: block;
      margin-bottom: 0.75rem;
      padding: 0.55rem 0.65rem;
      border-radius: 8px;
      font-size: 0.82rem;
      background: var(--b-green-bg);
      color: var(--b-green-fg);
      border: 1px solid var(--b-green-bd)
    }

    #loginScreen .login-ok {
      display: none
    }

    /* طبقة انتقال بعد تسجيل الدخول (مثل PageTransition في الأرشيف) */
    #loginTransition {
      position: fixed;
      inset: 0;
      z-index: 10001;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100dvh;
      min-height: 100vh;
      padding: max(clamp(16px, 4vw, 32px), env(safe-area-inset-top, 0px)) max(clamp(20px, 5vw, 36px), env(safe-area-inset-right, 0px)) max(clamp(16px, 4vw, 32px), env(safe-area-inset-bottom, 0px)) max(clamp(20px, 5vw, 36px), env(safe-area-inset-left, 0px));
      box-sizing: border-box;
      background: var(--mr-bg-2);
      color: var(--mr-text);
      direction: rtl;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease
    }

    #loginTransition.is-visible {
      opacity: 1;
      pointer-events: auto
    }

    #loginTransition .lt-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 28rem;
      margin: auto;
      text-align: center;
      padding: 0;
      overflow: visible
    }

    #loginTransition .lt-shield:not(.wefaq-logo-slot) {
      width: 5rem;
      height: 5rem;
      margin: 0 auto 1.25rem;
      border-radius: 1rem;
      background: linear-gradient(135deg, var(--blue) 0%, color-mix(in srgb, var(--blue) 55%, #001a33) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 2rem;
      box-shadow: 0 20px 40px color-mix(in srgb, var(--blue) 35%, transparent);
      animation: ltShieldSpin 2s linear infinite
    }

    #loginTransition .lt-shield.wefaq-logo-slot {
      width: 11rem;
      height: auto;
      max-width: min(86vw, 11rem);
      margin: 0;
      padding-bottom: 148px;
      box-sizing: content-box;
      overflow: visible;
      animation: none !important;
      background: transparent !important;
      box-shadow: none !important;
      border-radius: 0 !important
    }

    #loginTransition .lt-title {
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--mr-text);
      margin: 0.35rem 0 0;
      animation: ltPulseText 2s ease-in-out infinite
    }

    #loginTransition .lt-sub {
      margin: 0;
      font-size: 0.88rem;
      color: var(--mr-text-3)
    }

    /* شاشة ترحيب — نفس شعار الشريط العلوي (athar-logo-v401.png) */
    #atharWelcomeSplash {
      position: fixed;
      inset: 0;
      z-index: 10002;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100dvh;
      min-height: 100vh;
      padding: max(12px, env(safe-area-inset-top, 0px)) max(6px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
      box-sizing: border-box;
      background: #000;
      color: #fff;
      opacity: 1;
      transform: scale(1);
      transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
      pointer-events: auto
    }

    #atharWelcomeSplash.aws-exiting {
      opacity: 0;
      transform: scale(1.04);
      pointer-events: none
    }

    #atharWelcomeSplash .aws-logo-frame {
      position: relative;
      width: min(86vw, 42dvh, 22rem);
      max-width: 86vw;
      line-height: 0;
      clip-path: inset(34.17% 0 31.09% 0);
      -webkit-clip-path: inset(34.17% 0 31.09% 0);
      transform: none;
      transform-origin: center center
    }

    #atharWelcomeSplash .aws-logo-shine-wrap {
      position: relative;
      display: block;
      width: 100%;
      aspect-ratio: 1 / 1;
      filter: drop-shadow(0 0 36px rgba(255, 255, 255, 0.2))
    }

    #atharWelcomeSplash .aws-brand-logo:not(.aws-brand-logo--gleam) {
      display: block;
      width: 100%;
      height: 100%;
      max-width: 100%;
      object-fit: contain;
      filter: brightness(0) invert(1);
      opacity: 0;
      transform: scale(0.94)
    }

    #atharWelcomeSplash.aws-active .aws-brand-logo:not(.aws-brand-logo--gleam) {
      opacity: 1;
      transform: scale(1);
      transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1)
    }

    #atharWelcomeSplash .aws-brand-logo--gleam {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      max-width: 100%;
      object-fit: contain;
      pointer-events: none;
      opacity: 0;
      transform: none;
      filter: brightness(0) invert(1) brightness(2.4) drop-shadow(0 0 18px rgba(255, 255, 255, 0.95));
      -webkit-mask-image: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, 0.15) 44%, #fff 50%, rgba(255, 255, 255, 0.15) 56%, transparent 64%);
      mask-image: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, 0.15) 44%, #fff 50%, rgba(255, 255, 255, 0.15) 56%, transparent 64%);
      -webkit-mask-size: 280% 100%;
      mask-size: 280% 100%;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: 150% center;
      mask-position: 150% center;
      will-change: -webkit-mask-position, mask-position
    }

    #atharWelcomeSplash.aws-active .aws-brand-logo--gleam {
      opacity: 1;
      transition: opacity 0.35s ease-out;
      animation: awsLogoGleam 2.3s cubic-bezier(0.45, 0, 0.25, 1) 0.45s 2
    }

    @keyframes awsLogoGleam {
      0% {
        -webkit-mask-position: 150% center;
        mask-position: 150% center
      }

      100% {
        -webkit-mask-position: -50% center;
        mask-position: -50% center
      }
    }

    @media (min-width: 993px) {
      #atharWelcomeSplash .aws-logo-frame {
        width: min(46vw, 36rem);
        max-width: min(46vw, 36rem)
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #atharWelcomeSplash .aws-brand-logo:not(.aws-brand-logo--gleam) {
        opacity: 1;
        transform: none
      }

      #atharWelcomeSplash .aws-brand-logo--gleam {
        display: none
      }
    }

    html.aws-booting #loginScreen,
    html.aws-booting #appWrap,
    html.aws-booting #loginTransition {
      visibility: hidden !important;
      pointer-events: none !important
    }

    html.aws-booting,
    html.aws-booting body {
      background: #000 !important
    }

    [data-theme="dark"] #loginScreen .lp-brand-ico:not(.wefaq-logo-slot) {
      background: var(--mr-primary-softer);
      color: var(--mr-text)
    }

    [data-theme="dark"] #loginScreen .lp-title i {
      color: var(--mr-text-2)
    }

    /* ═══════════════════════════════════════════════════════════════════════
       3. App Layout
    ═══════════════════════════════════════════════════════════════════════ */
    .app {
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow: hidden;
    }

    .app-shell {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: var(--bg)
    }

    .app-body {
      display: flex;
      flex: 1;
      min-height: 0;
      overflow: hidden;
      position: relative;
      align-items: stretch;
      gap: 0;
      padding: 0;
      box-sizing: border-box
    }

    .sidebar {
      width: var(--fig-sidebar-collapsed-w);
      flex: 0 0 var(--fig-sidebar-collapsed-w);
      max-width: var(--fig-sidebar-w);
      background: var(--sidebar-bg);
      color: var(--sidebar-text);
      padding: 16px 10px 14px;
      display: flex;
      flex-direction: column;
      height: 100%;
      align-self: stretch;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      z-index: 800;
      font-family: var(--font);
      transition: width 0.18s ease, flex-basis 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
      box-sizing: border-box;
      contain: style;
      overflow: hidden;
      overflow-x: hidden;
      position: relative
    }

    @media (min-width: 993px), (hover: hover) and (pointer: fine) {
      html.mr-desktop-ui .sidebar:hover {
        width: var(--fig-sidebar-w);
        flex-basis: var(--fig-sidebar-w);
      }

      [data-theme="dark"] html.mr-desktop-ui .sidebar:hover {
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.28);
      }
    }

    .main {
      flex: 1 1 auto;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      overflow-x: clip;
      overflow-y: auto;
      background: var(--bg);
      padding: clamp(12px, 1.8vw, 20px);
      box-sizing: border-box
    }

    .sidebar-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 2px 6px 24px;
      margin-bottom: 4px;
      border-bottom: none;
      min-height: 52px
    }

    .sidebar-brand-text {
      opacity: 1;
      max-width: 180px
    }

    .figma-sidebar-logo {
      position: relative;
      width: 40px;
      height: 40px;
      flex-shrink: 0;
      border-radius: 12px;
      background: var(--mr-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      color: #fff;
      box-shadow: 0 4px 14px rgba(15, 18, 36, 0.28)
    }

    .figma-sidebar-logo-dot {
      position: absolute;
      bottom: 2px;
      right: 2px;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--mr-success);
      border: 2px solid var(--mr-surface);
      box-sizing: border-box
    }

    .figma-sidebar-title {
      font-family: var(--font);
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--mr-text);
      letter-spacing: 0;
      line-height: 1.2;
      white-space: nowrap
    }

    .figma-sidebar-brand-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
      overflow: hidden
    }

    .figma-sidebar-subtitle {
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.12em;
      color: var(--mr-text-3);
      text-transform: uppercase;
      white-space: nowrap
    }

    .nav-item-label {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .nav-section-label,
    .nav-item-label,
    .sidebar .logout-btn span {
      opacity: 0;
      max-width: 0;
      overflow: hidden;
      white-space: nowrap;
      transition: opacity 0.14s ease, max-width 0.16s ease
    }

    @media (min-width: 993px), (hover: hover) and (pointer: fine) {
      html.mr-desktop-ui .sidebar .nav-item,
      html.mr-desktop-ui .sidebar .logout-btn {
        justify-content: flex-start;
      }

      html.mr-desktop-ui .sidebar:hover .nav-section-label,
      html.mr-desktop-ui .sidebar:hover .nav-item-label,
      html.mr-desktop-ui .sidebar:hover .logout-btn span {
        opacity: 1;
        max-width: 148px
      }

      /* Sidebar مطوي — أيقونات في المنتصف بدون قص */
      html.mr-desktop-ui .sidebar:not(:hover) .nav-item {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        justify-content: center;
        align-items: center;
        gap: 0;
        padding: 8px 4px;
        text-align: center;
        transform: none;
        box-sizing: border-box;
      }

      html.mr-desktop-ui .sidebar:not(:hover) .nav-item:hover {
        transform: none;
        background: var(--sidebar-hover);
      }

      html.mr-desktop-ui .sidebar:not(:hover) .nav-item-label {
        display: none !important;
        flex: 0 0 0 !important;
        width: 0 !important;
        max-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
      }

      html.mr-desktop-ui .sidebar:not(:hover) .nav-item.active,
      html.mr-desktop-ui .sidebar:not(:hover) #appWrap .nav-item.active {
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        color: var(--sidebar-text);
      }

      html.mr-desktop-ui .sidebar:not(:hover) .nav-item.active .nav-icon-wrap {
        background: var(--sidebar-active);
        color: var(--sidebar-active-text);
        box-shadow: none;
      }

      html.mr-desktop-ui .sidebar:not(:hover) .nav-item.active i {
        margin: 0;
        box-shadow: none;
      }

      html.mr-desktop-ui .sidebar:not(:hover) .nav-badge {
        position: absolute;
        top: 4px;
        inset-inline-start: 4px;
        inset-inline-end: auto;
        left: auto;
        right: auto;
        margin: 0;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
      }

      html.mr-desktop-ui .sidebar:not(:hover) .sidebar-user {
        border-top-color: transparent
      }

      html.mr-desktop-ui .sidebar:not(:hover) .logout-btn {
        width: 100%;
        min-width: 0;
        margin-inline: 0;
        padding: 10px 4px;
        justify-content: center;
        gap: 0;
      }

      /* Sidebar موسّع (hover) — خلفية الصف النشط كاملة */
      html.mr-desktop-ui .sidebar:hover .nav-item.active,
      html.mr-desktop-ui .sidebar:hover #appWrap .nav-item.active {
        background: var(--sidebar-hover);
        color: var(--sidebar-text);
        border-color: transparent;
      }
    }

    .brand-icon:not(.wefaq-logo-slot) {
      width: 44px;
      height: 44px;
      background: var(--mr-primary);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #fff;
      box-shadow: 0 4px 15px rgba(15, 18, 36, 0.22);
    }

    .brand-mono {
      font-family: var(--font);
      font-weight: 800;
      font-size: 22px;
      line-height: 1;
    }

    .brand-text strong {
      display: block;
      font-size: 16px;
      font-weight: 800;
      color: var(--mr-text);
      line-height: 1.2;
    }

    .brand-text span {
      display: block;
      font-size: 10px;
      color: var(--mr-text-3);
      font-family: var(--mono);
      letter-spacing: 0.18em;
      text-transform: uppercase;
      margin-top: 2px;
    }

    .sidebar-nav {
      flex: 1;
      min-height: 0;
      min-width: 0;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain
    }

    .sidebar-nav::-webkit-scrollbar {
      width: 4px;
      height: 0
    }

    .sidebar-nav::-webkit-scrollbar:horizontal {
      display: none;
      height: 0
    }

    .sidebar-nav::-webkit-scrollbar-thumb {
      background: var(--border2);
      border-radius: 10px;
    }

    .sidebar-nav::-webkit-scrollbar-thumb:hover {
      background: var(--text3);
    }

    .nav-section-label {
      font-size: 11px;
      color: var(--sidebar-text2);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 18px 8px 8px;
      font-weight: 700;
      font-family: var(--font)
    }

    .nav-item {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 14px;
      padding: 9px 11px;
      background: transparent;
      color: var(--sidebar-text);
      opacity: 1;
      border: 2px solid transparent;
      border-radius: 12px;
      font-family: var(--font);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      text-align: right;
      margin-bottom: 6px;
      position: relative;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .nav-icon-wrap {
      width: 36px;
      height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      background: #f0f0f3;
      color: #87879a;
      flex-shrink: 0;
      transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    }

    .nav-item i {
      width: auto;
      height: auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 0;
      text-align: center;
      font-size: 15px;
      color: inherit;
      background: transparent;
      border: none;
      flex-shrink: 0;
      transition: color 0.15s ease;
    }

    .nav-item i::before {
      color: inherit
    }

    .nav-item:hover:not(.active) {
      background: var(--sidebar-hover);
      color: var(--sidebar-text);
      transform: translateX(-2px);
    }

    .nav-item:hover:not(.active) .nav-icon-wrap {
      background: #e4e4ea;
      color: #131316;
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--sidebar-border) 70%, transparent);
    }

    .nav-item:hover:not(.active) i {
      color: inherit;
      background: transparent;
      border-color: transparent;
      transform: none;
    }

    .nav-item.active {
      background: transparent;
      color: #131316;
      border-color: transparent;
      box-shadow: none;
    }

    .nav-item.active .nav-icon-wrap {
      background: var(--sidebar-active);
      color: var(--sidebar-active-text);
      box-shadow: none;
    }

    .nav-item.active i {
      background: transparent;
      color: inherit;
      border-color: transparent;
      box-shadow: none;
      transform: none;
    }

    .nav-badge {
      margin-right: auto;
      background: var(--red);
      color: #fff;
      font-size: 11px;
      min-width: 20px;
      height: 20px;
      padding: 0 6px;
      border-radius: 999px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center
    }

    .sidebar-user {
      flex-shrink: 0;
      min-width: 0;
      overflow-x: hidden;
      padding: 18px 0 4px;
      border-top: 1px solid var(--mr-border);
      margin-top: auto
    }

    .user-btn {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 8px;
      background: var(--mr-primary-softer);
      border-radius: 12px;
      margin-bottom: 10px
    }

    .user-btn-av {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 700;
      flex-shrink: 0
    }

    .figma-user-av {
      background: var(--mr-primary)
    }

    .user-btn-info {
      flex: 1;
      min-width: 0;
      overflow: hidden
    }

    .user-btn-info strong {
      display: block;
      font-size: 12px;
      color: var(--mr-text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .user-status {
      font-size: 10px;
      color: var(--mr-text-3)
    }

    .role-badge-sidebar {
      display: inline-block;
      font-size: 9px;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: 600;
      margin: 2px 0
    }

    .rb-admin {
      background: var(--purple-light);
      color: var(--purple-text)
    }

    .rb-manager {
      background: var(--red-light);
      color: var(--red-text)
    }

    .rb-auditor {
      background: var(--blue-light);
      color: var(--blue-text)
    }

    .rb-supervisor {
      background: var(--amber-light);
      color: var(--amber-text)
    }

    .rb-employee {
      background: var(--bg2);
      color: var(--text3)
    }

    .rb-observer {
      background: var(--green-light);
      color: var(--green-text)
    }

    .sidebar .logout-btn {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      min-height: 46px;
      padding: 11px 18px;
      background: var(--fig-sidebar-logout-bg);
      color: var(--fig-sidebar-logout-text);
      border: 1.5px solid var(--sidebar-border);
      border-radius: 999px;
      font-family: var(--font);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
      box-shadow: none
    }

    .sidebar .logout-btn i {
      color: var(--fig-sidebar-logout-text);
      width: auto;
      height: auto;
      background: transparent;
      box-shadow: none;
      font-size: 14px
    }

    .sidebar .logout-btn:hover {
      background: var(--fig-sidebar-logout-hover);
      color: var(--sidebar-text);
      border-color: var(--sidebar-border);
    }

    .sidebar .logout-btn:hover i {
      color: var(--sidebar-text);
    }

    .sidebar #sbConnectionStatus {
      color: var(--mr-text-3);
      font-size: 10px;
      margin-top: 8px;
      text-align: center
    }

    .topbar {
      background: var(--mr-surface);
      padding: calc(14px + var(--mr-safe-top, 0px)) 24px 14px;
      border-bottom: 1px solid var(--mr-border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      gap: 18px;
      z-index: 900;
    }

    .topbar-left {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      flex: 1
    }

    .topbar-title {
      min-width: 0;
      flex: 1
    }

    .topbar-title h1 {
      font-size: 18px;
      font-weight: 700;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .topbar-title p {
      font-size: 11px;
      color: var(--text3);
      font-family: var(--mono);
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .topbar-right {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0
    }

    .topbar-actions-zone > .mr-topbar-user {
      order: 99
    }

    .topbar-actions-zone > .topbar-btn--notif {
      order: 1
    }

    .topbar-vdivider {
      width: 1px;
      height: 38px;
      background: var(--mr-border);
      opacity: 0.85;
      flex-shrink: 0;
      align-self: center;
    }

    .mr-topbar-user {
      position: relative;
      display: inline-flex;
      flex-shrink: 0;
      box-sizing: border-box
    }

    .mr-topbar-user-trigger--icon {
      width: 36px !important;
      height: 48px !important;
      min-height: 48px !important;
      max-width: 36px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 50% !important;
      background: transparent !important;
      box-shadow: none !important;
      gap: 0;
    }

    .mr-topbar-user-trigger--icon:hover {
      background: transparent !important;
      box-shadow: none !important;
    }

    .mr-topbar-user-trigger--icon:hover .mr-topbar-user-icon {
      background: #dcdce1;
    }

    .mr-topbar-user-trigger--icon[aria-expanded="true"] {
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    .mr-topbar-user-trigger--icon[aria-expanded="true"] .mr-topbar-user-icon {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mr-primary) 18%, transparent);
    }

    .mr-topbar-user-icon {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      box-sizing: border-box;
      background: #e8e8ed;
      color: #1c1c1e;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background 0.15s ease, box-shadow 0.15s ease;
    }

    .mr-topbar-user-icon svg {
      width: 18px;
      height: 18px;
      display: block;
    }

    [data-theme="dark"] .mr-topbar-user-trigger--icon:hover {
      background: transparent !important;
    }

    [data-theme="dark"] .mr-topbar-user-icon {
      background: #3a3a3c;
      color: #f2f2f7;
    }

    [data-theme="dark"] .mr-topbar-user-trigger--icon:hover .mr-topbar-user-icon {
      background: #48484a;
    }

    .mr-topbar-user-trigger {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      max-width: 100%;
      min-height: 40px;
      padding-block: 4px;
      padding-inline: 10px 8px;
      border: 1px solid color-mix(in srgb, var(--mr-border) 55%, transparent);
      border-radius: 999px;
      background: color-mix(in srgb, var(--mr-surface) 94%, var(--mr-bg));
      box-shadow: 0 1px 3px rgba(15, 18, 36, 0.05);
      cursor: pointer;
      font-family: var(--font);
      transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    }

    .mr-topbar-user-trigger:hover {
      border-color: var(--mr-border-2);
      background: var(--mr-surface);
      box-shadow: 0 2px 8px rgba(15, 18, 36, 0.06);
    }

    .mr-topbar-user-trigger[aria-expanded="true"] {
      border-color: color-mix(in srgb, var(--mr-primary) 35%, var(--mr-border));
      background: var(--mr-surface);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mr-primary) 12%, transparent);
    }

    .mr-topbar-user-trigger[aria-expanded="true"] .mr-topbar-user-chevron {
      transform: rotate(180deg);
      color: var(--mr-text);
    }

    [data-theme="dark"] .mr-topbar-user-trigger {
      background: rgba(255, 255, 255, 0.05);
      border-color: var(--mr-border-2);
      box-shadow: none;
    }

    [data-theme="dark"] .mr-topbar-user-trigger:hover,
    [data-theme="dark"] .mr-topbar-user-trigger[aria-expanded="true"] {
      background: rgba(255, 255, 255, 0.08);
      border-color: color-mix(in srgb, var(--mr-primary) 40%, var(--mr-border-2));
    }

    .mr-topbar-user-avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: linear-gradient(145deg, var(--mr-primary) 0%, color-mix(in srgb, var(--mr-primary) 76%, #0f1224) 100%);
      color: #fff;
      font-family: var(--font);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      user-select: none;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(15, 18, 36, 0.14)
    }

    .mr-topbar-user-chevron {
      font-size: 10px;
      color: var(--mr-text-3);
      flex-shrink: 0;
      margin-inline-start: 2px;
      transition: transform 0.18s ease, color 0.15s ease;
    }

    .mr-topbar-user-menu {
      position: absolute;
      top: calc(100% + 8px);
      left: auto;
      right: auto;
      inset-inline-start: auto;
      inset-inline-end: 0;
      width: max-content;
      min-width: 0;
      max-width: min(calc(100vw - 24px), 280px);
      padding: 4px;
      background: var(--mr-surface);
      border: 1px solid var(--mr-border);
      border-radius: 12px;
      box-shadow: var(--mr-shadow-card);
      z-index: 1100;
      display: none;
      flex-direction: column;
      gap: 2px;
      box-sizing: border-box
    }

    .mr-topbar-user-menu--profile {
      min-width: 248px;
      padding: 6px;
    }

    .mr-topbar-user-menu__profile {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 10px 12px;
    }

    .mr-topbar-user-menu__profile-av {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: linear-gradient(145deg, var(--mr-primary) 0%, color-mix(in srgb, var(--mr-primary) 76%, #0f1224) 100%);
      color: #fff;
      font-family: var(--font);
      font-size: 16px;
      font-weight: 700;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      user-select: none;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        0 1px 3px rgba(15, 18, 36, 0.12);
    }

    .mr-topbar-user-menu__profile-info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 3px;
      min-width: 0;
      line-height: 1.25;
    }

    .mr-topbar-user-menu__profile-info .mr-topbar-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--mr-text);
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .mr-topbar-user-menu__profile-info .mr-topbar-role {
      font-size: 12px;
      font-weight: 600;
      color: var(--mr-text-3);
    }

    .mr-topbar-user-menu.open {
      display: flex;
    }

    .mr-topbar-user-menu button:not(.theme-toggle) {
      width: auto;
      min-width: 100%;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      white-space: nowrap;
      border: 0;
      background: transparent;
      border-radius: 8px;
      font-family: var(--font);
      font-size: 13px;
      font-weight: 600;
      color: var(--mr-text);
      cursor: pointer;
      text-align: start;
      transition: background 0.15s ease, color 0.15s ease;
    }

    .mr-topbar-user-menu button:not(.theme-toggle):hover {
      background: var(--mr-primary-softer);
    }

    .mr-topbar-user-menu button:not(.theme-toggle) i {
      width: 18px;
      text-align: center;
      color: var(--mr-text-3);
      flex-shrink: 0;
    }

    .mr-topbar-user-menu__divider {
      height: 1px;
      margin: 4px 2px;
      background: var(--mr-border);
    }

    .mr-topbar-user-menu__theme {
      display: flex;
      justify-content: center;
      padding: 8px 10px;
    }

    .mr-topbar-user-menu__logout {
      color: var(--mr-danger);
    }

    .mr-topbar-user-menu__logout i {
      color: var(--mr-danger);
    }

    [data-theme="dark"] .mr-topbar-user-menu {
      background: var(--mr-surface);
      border-color: var(--mr-border);
      box-shadow: var(--mr-shadow-card);
    }

    .mr-topbar-user-info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 2px;
      line-height: 1.2;
      text-align: start;
      min-width: 0;
      flex: 1 1 auto;
      max-width: 132px;
    }

    .mr-topbar-name {
      font-size: 13px;
      color: var(--mr-text);
      font-weight: 700;
      white-space: nowrap;
      letter-spacing: 0;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.25;
    }

    .mr-topbar-role {
      display: inline-block;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 10px;
      font-weight: 600;
      line-height: 1.2;
      padding: 2px 7px;
      border-radius: 6px;
      color: var(--mr-text-2);
      background: color-mix(in srgb, var(--mr-primary) 8%, var(--mr-bg-2));
      border: 1px solid color-mix(in srgb, var(--mr-border) 70%, transparent);
    }

    .mr-topbar-user[data-role="admin"] .mr-topbar-role,
    .mr-topbar-user[data-role="manager"] .mr-topbar-role {
      color: #5b21b6;
      background: color-mix(in srgb, #7c00fe 10%, var(--mr-surface));
      border-color: color-mix(in srgb, #7c00fe 18%, var(--mr-border));
    }

    .mr-topbar-user[data-role="supervisor"] .mr-topbar-role,
    .mr-topbar-user[data-role="branch_manager"] .mr-topbar-role {
      color: #1d4ed8;
      background: color-mix(in srgb, #2f2fe4 10%, var(--mr-surface));
      border-color: color-mix(in srgb, #2f2fe4 16%, var(--mr-border));
    }

    .figma-search-field {
      height: 44px;
      border: 1px solid var(--mr-border);
      border-radius: 999px;
      background: var(--mr-bg);
      font-family: var(--font);
      font-size: 13px;
      color: var(--mr-text);
      padding-inline: 18px;
      box-sizing: border-box
    }

    .figma-search-field::placeholder {
      color: var(--mr-text-muted)
    }

    /* Mirsad search bar (input + soft icon, ref: Search Forms UI Kit) */
    .figma-search-wrap {
      flex: 1 1 280px;
      min-width: 200px;
      height: 44px;
      border: 1px solid var(--mr-border);
      border-radius: 999px;
      background: var(--mr-bg);
      display: flex;
      align-items: center;
      direction: rtl;
      padding: 0 16px 0 8px;
      box-sizing: border-box;
      gap: 14px;
      transition: border-color 0.2s ease, box-shadow 0.2s ease
    }

    .figma-search-wrap:focus-within {
      outline: none;
      border-color: var(--mr-primary);
      box-shadow: 0 0 0 4px var(--mr-primary-soft)
    }

    .figma-search-input {
      flex: 1;
      border: 0;
      outline: none;
      background: transparent;
      text-align: start;
      font-family: var(--font);
      font-size: 13px;
      color: var(--mr-text)
    }

    .figma-search-input::placeholder {
      color: var(--mr-text-muted)
    }

    .figma-search-btn {
      width: 32px;
      height: 32px;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: var(--mr-text-3);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      outline: none;
      transition: background 0.2s ease, color 0.2s ease
    }

    .figma-search-btn:hover {
      filter: brightness(0.95)
    }

    /* Topbar clock — digital stack (time + date), ref. design screenshot */
    .topbar-clock {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 2px;
      padding: 0 2px;
      min-width: 88px;
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      flex-shrink: 0;
    }

    .topbar-clock-time {
      display: flex;
      align-items: baseline;
      gap: 5px;
      line-height: 1;
    }

    .topbar-clock-hm {
      font-family: var(--mono);
      font-size: 16px;
      font-weight: 300;
      color: var(--mr-text);
      font-variant-numeric: lining-nums tabular-nums;
      font-feature-settings: "tnum" 1, "lnum" 1;
      letter-spacing: 0.02em;
    }

    .topbar-clock-ampm {
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 300;
      color: var(--mr-text-3);
      font-variant-numeric: lining-nums tabular-nums;
    }

    .topbar-clock-date {
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 300;
      color: var(--mr-text-3);
      line-height: 1.2;
      letter-spacing: 0.02em;
      font-variant-numeric: lining-nums tabular-nums;
    }

    .topbar-btn {
      width: 40px;
      height: 40px;
      border: 1px solid var(--mr-border);
      background: transparent;
      color: var(--mr-text);
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
      padding: 0;
    }

    .topbar-btn:hover {
      background: var(--mr-primary-softer);
      color: var(--mr-primary);
      border-color: var(--mr-border);
    }

    .notif-bell-count {
      position: absolute;
      top: -6px;
      inset-inline-end: -3px;
      inset-inline-start: auto;
      z-index: 5;
      background: color-mix(in srgb, var(--red) 14%, transparent);
      color: var(--red);
      font-family: var(--mono);
      font-size: 9px;
      font-weight: 700;
      line-height: 1;
      min-width: 17px;
      height: 17px;
      padding: 0 4px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid color-mix(in srgb, var(--red) 36%, transparent);
      box-shadow: 0 1px 3px color-mix(in srgb, var(--red) 10%, transparent);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      font-variant-numeric: lining-nums tabular-nums;
      pointer-events: none
    }

    .wf-panel .badge {
      padding: 6px 12px;
      border-radius: 999px;
      font-size: 11px
    }

    .topbar-btn--theme {
      background: var(--mr-surface);
      border: 1.5px solid var(--mr-text);
      color: var(--mr-text)
    }

    .topbar-btn--theme:hover {
      background: var(--mr-bg);
      color: var(--mr-text)
    }

    /* theme-toggle.tsx — نفس تصميم shadcn (LTR للمفتاح) */
    .theme-toggle {
      display: flex;
      width: 4rem;
      height: 2rem;
      padding: 0.25rem;
      border-radius: 9999px;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 1px solid;
      background: transparent;
      flex-shrink: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    .theme-toggle:focus-visible {
      outline: 2px solid color-mix(in srgb, var(--mr-primary) 55%, transparent);
      outline-offset: 2px;
    }

    .theme-toggle--dark {
      background: #09090b;
      border-color: #27272a;
    }

    .theme-toggle--light {
      background: #ffffff;
      border-color: #e4e4e7;
    }

    .theme-toggle__inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 100%;
    }

    .theme-toggle__knob,
    .theme-toggle__ghost {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 9999px;
      transition: transform 0.3s ease, background 0.3s ease;
      flex-shrink: 0;
    }

    .theme-toggle--dark .theme-toggle__knob {
      transform: translateX(0);
      background: #27272a;
    }

    .theme-toggle--light .theme-toggle__knob {
      transform: translateX(2rem);
      background: #e5e7eb;
    }

    .theme-toggle--dark .theme-toggle__ghost {
      background: transparent;
      transform: translateX(0);
    }

    .theme-toggle--light .theme-toggle__ghost {
      background: transparent;
      transform: translateX(-2rem);
    }

    .theme-toggle__icon {
      display: block;
      width: 1rem;
      height: 1rem;
    }

    .theme-toggle__icon--on-dark {
      color: #ffffff;
    }

    .theme-toggle__icon--on-light-knob {
      color: #374151;
    }

    .theme-toggle__icon--muted {
      color: #6b7280;
    }

    .theme-toggle__icon--on-light-ghost {
      color: #000000;
    }

    /* iOS-style Push Toggle */
    .push-toggle {
      display: flex;
      width: 3.2rem;
      height: 1.8rem;
      padding: 2px;
      border-radius: 999px;
      cursor: pointer;
      transition: background 0.25s ease;
      border: none;
      background: #e9e9ea;
      flex-shrink: 0;
      position: relative;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }
    .push-toggle--on {
      background: #34c759;
    }
    .push-toggle__knob {
      width: calc(1.8rem - 4px);
      height: calc(1.8rem - 4px);
      background: #ffffff;
      border-radius: 50%;
      box-shadow: 0 3px 8px rgba(0,0,0,0.15), 0 1px 1px rgba(0,0,0,0.16);
      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      transform: translateX(0);
    }
    .push-toggle--on .push-toggle__knob {
      transform: translateX(calc(-1.4rem));
    }
    [dir="ltr"] .push-toggle--on .push-toggle__knob {
      transform: translateX(calc(1.4rem));
    }

    .topbar-btn--notif {
      width: 36px;
      height: 36px;
      min-width: 36px;
      min-height: 36px;
      flex-shrink: 0;
      border: 1px solid color-mix(in srgb, var(--mr-border) 55%, transparent);
      border-radius: 50%;
      background: color-mix(in srgb, var(--mr-surface) 94%, var(--mr-bg));
      color: var(--mr-text-2);
      box-shadow: 0 1px 3px rgba(15, 18, 36, 0.05);
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
      transform: none;
      overflow: visible;
      user-select: none
    }

    .topbar-btn--notif i {
      font-size: 15px;
      line-height: 1
    }

    .topbar-btn--notif:hover {
      background: var(--mr-surface);
      border-color: var(--mr-border-2);
      color: var(--mr-text);
      box-shadow: 0 2px 8px rgba(15, 18, 36, 0.06)
    }

    .topbar-btn--notif[aria-expanded="true"] {
      border-color: color-mix(in srgb, var(--mr-primary) 35%, var(--mr-border));
      background: var(--mr-surface);
      color: var(--mr-primary);
      box-shadow: 0 1px 3px rgba(15, 18, 36, 0.05)
    }

    .topbar-btn--notif:focus {
      outline: none
    }

    .topbar-btn--notif:focus:not(:focus-visible) {
      background: transparent;
      border-color: var(--mr-border);
      color: var(--mr-text);
      box-shadow: none
    }

    .topbar-btn--notif[data-has-unread="1"] .notif-bell-count {
      display: inline-flex !important;
      visibility: visible !important;
      opacity: 1 !important
    }

    [data-theme="dark"] .topbar-btn--notif {
      background: rgba(255, 255, 255, 0.05);
      border-color: var(--mr-border-2);
      box-shadow: none;
      color: var(--mr-text-2)
    }

    [data-theme="dark"] .topbar-btn--notif:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: color-mix(in srgb, var(--mr-primary) 28%, var(--mr-border-2));
      color: var(--mr-text)
    }

    [data-theme="dark"] .topbar-btn--notif[aria-expanded="true"] {
      background: rgba(255, 255, 255, 0.08);
      border-color: color-mix(in srgb, var(--mr-primary) 40%, var(--mr-border-2));
      color: var(--mr-primary)
    }

    [data-theme="dark"] .notif-bell-count {
      background: color-mix(in srgb, var(--red) 22%, transparent);
      border-color: color-mix(in srgb, var(--red) 42%, transparent);
      color: #fca5a5;
      box-shadow: 0 1px 4px color-mix(in srgb, var(--red) 16%, transparent)
    }

    .content {
      width: 100%;
      max-width: min(1600px, 100%);
      margin: 0 auto;
      padding: clamp(12px, 2vw, 24px);
      box-sizing: border-box
    }

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

    .tab-content:not(.active),
    .tab-content[hidden] {
      display: none !important
    }

    .tab-content.active {
      display: block
    }

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

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

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(-4px)
      }

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

    @keyframes lpBlobA {

      0%,
      100% {
        transform: scale(1);
        opacity: 0.35
      }

      50% {
        transform: scale(1.2);
        opacity: 0.55
      }
    }

    @keyframes lpBlobB {

      0%,
      100% {
        transform: scale(1.12);
        opacity: 0.42
      }

      50% {
        transform: scale(0.95);
        opacity: 0.28
      }
    }

    @keyframes lpIconSpring {
      0% {
        transform: scale(0)
      }

      70% {
        transform: scale(1.06)
      }

      100% {
        transform: scale(1)
      }
    }

    @keyframes lpCardRise {
      from {
        opacity: 0;
        transform: translateY(22px)
      }

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

    @keyframes lpFieldSlide {
      from {
        opacity: 0;
        transform: translateX(-16px)
      }

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

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

    @keyframes ltPulseText {

      0%,
      100% {
        opacity: 0.55
      }

      50% {
        opacity: 1
      }
    }

    @keyframes mdHeroIn {
      from {
        opacity: 0;
        transform: translateY(16px)
      }

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

    @keyframes mdStatIn {
      from {
        opacity: 0;
        transform: translateY(20px)
      }

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

    @keyframes mdCardIn {
      from {
        opacity: 0;
        transform: translateY(14px)
      }

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

    @keyframes mdWave {
      0% {
        transform: rotate(0deg)
      }

      25% {
        transform: rotate(14deg)
      }

      75% {
        transform: rotate(-10deg)
      }

      100% {
        transform: rotate(0deg)
      }
    }

    @keyframes mdRowIn {
      from {
        opacity: 0;
        transform: translateX(12px)
      }

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

    @media (prefers-reduced-motion: reduce) {
.lp-blob,
      .lp-brand-ico,
      .lp-card--in,
      .lp-f1,
      .lp-f2,
      .lt-shield,
      .lt-title,
      #tab-dashboard .md-dash-play *,
      #tab-dashboard .md-wave {
        animation: none !important
      }
}

    /* ═══════════════════════════════════════════════════════════════════════
       4. Components
    ═══════════════════════════════════════════════════════════════════════ */
    .panel {
      background: var(--mr-surface);
      border: 1px solid var(--mr-border);
      border-radius: var(--mr-radius-card);
      padding: 22px;
      margin-bottom: 18px;
      box-shadow: var(--mr-shadow-card)
    }

    .panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 14px;
      margin-bottom: 16px;
      border-bottom: 1px solid var(--mr-border)
    }

    .panel-header h3 {
      font-size: 15px;
      font-weight: 700;
      color: var(--text)
    }

    .panel-header p {
      font-size: 11px;
      color: var(--text3);
      margin-top: 2px
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 14px;
      margin-bottom: 18px
    }

    .stats-grid-v2 {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr))
    }

    .stat-card-v2 {
      background: var(--mr-surface);
      border: 1px solid var(--mr-border);
      border-radius: var(--mr-radius-card);
      padding: 20px;
      position: relative;
      overflow: hidden;
      transition: 0.2s;
      box-shadow: var(--mr-shadow-soft)
    }

    .stat-card-v2:hover {
      transform: translateY(-2px);
      box-shadow: var(--mr-shadow-card)
    }

    .stat-v2-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px
    }

    .stat-v2-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px
    }

    .stat-v2-title {
      font-size: 13px;
      color: var(--text2);
      font-weight: 500
    }

    .stat-v2-value {
      font-size: 36px;
      font-weight: 700;
      line-height: 1;
      margin-bottom: 12px;
      color: var(--text)
    }

    .stat-v2-foot {
      font-size: 11px;
      display: flex;
      align-items: center;
      gap: 5px;
      font-weight: 500
    }

    .stat-v2-foot i {
      font-size: 10px
    }

    .stat-card-v2[data-color="blue"] .stat-v2-icon {
      background: var(--blue-light);
      color: var(--blue-text)
    }

    .stat-card-v2[data-color="blue"] .stat-v2-foot {
      color: var(--blue-text)
    }

    .stat-card-v2[data-color="green"] .stat-v2-icon {
      background: var(--green-light);
      color: var(--green-text)
    }

    .stat-card-v2[data-color="green"] .stat-v2-foot {
      color: var(--green-text)
    }

    .stat-card-v2[data-color="amber"] .stat-v2-icon {
      background: var(--amber-light);
      color: var(--amber-text)
    }

    .stat-card-v2[data-color="amber"] .stat-v2-foot {
      color: var(--amber-text)
    }

    .stat-card-v2[data-color="red"] .stat-v2-icon {
      background: var(--red-light);
      color: var(--red-text)
    }

    .stat-card-v2[data-color="red"] .stat-v2-foot {
      color: var(--red-text)
    }

    .dash-2col {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 14px
    }

    /* لوحة القيادة — تصميم مستوحى من مرصاد (محتوى التبويب فقط) */
    #tab-dashboard .md-dash {
      padding-bottom: 8px;
      max-width: 90rem;
      margin-inline: auto
    }

    #tab-dashboard .md-hero {
      margin-bottom: 1.5rem
    }

    #tab-dashboard .md-hero-title {
      font-size: clamp(1.35rem, 2.5vw, 2rem);
      font-weight: 700;
      color: var(--text);
      margin: 0 0 0.35rem;
      letter-spacing: -0.02em
    }

    #tab-dashboard .md-hero-sub {
      margin: 0;
      font-size: 0.9rem;
      color: var(--text3)
    }

    #tab-dashboard .md-stats-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(12px, 2vw, 22px);
      margin-bottom: clamp(16px, 3vw, 28px)
    }

    #tab-dashboard .md-stat-card {
      border-radius: var(--mr-radius-card);
      border: 1px solid var(--mr-border);
      background: var(--mr-surface);
      box-shadow: var(--mr-shadow-soft);
      transition: transform 0.2s, box-shadow 0.2s
    }

    #tab-dashboard .md-stat-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--mr-shadow-card)
    }

    #tab-dashboard .md-stat-card--click {
      cursor: pointer
    }

    #tab-dashboard .md-stat-inner {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding: 1rem 1.1rem 1.15rem;
      min-height: 108px
    }

    #tab-dashboard .md-stat-copy {
      flex: 1;
      min-width: 0
    }

    #tab-dashboard .md-stat-label {
      margin: 0 0 0.5rem;
      font-size: 0.78rem;
      color: var(--text3);
      font-weight: 500
    }

    #tab-dashboard .md-stat-value {
      font-size: clamp(1.5rem, 4vw, 2.1rem);
      font-weight: 700;
      color: var(--text);
      line-height: 1.1;
      margin-bottom: 0.45rem
    }

    #tab-dashboard .md-stat-foot {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.72rem;
      font-weight: 600
    }

    #tab-dashboard .md-foot-muted {
      color: var(--text3)
    }

    #tab-dashboard .md-foot-up {
      color: var(--green-text)
    }

    #tab-dashboard .md-foot-down {
      color: var(--red-text)
    }

    #tab-dashboard .md-stat-ico {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      color: #fff;
      flex-shrink: 0;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12)
    }

    #tab-dashboard .md-ico-blue {
      background: var(--mr-primary)
    }

    #tab-dashboard .md-ico-green {
      background: var(--mr-success)
    }

    #tab-dashboard .md-ico-amber {
      background: var(--mr-warning)
    }

    #tab-dashboard .md-ico-red {
      background: var(--mr-danger)
    }

    #tab-dashboard .md-split {
      display: grid;
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
      gap: clamp(14px, 2vw, 22px);
      margin-bottom: clamp(14px, 2vw, 22px)
    }

    #tab-dashboard .md-card {
      border-radius: var(--mr-radius-card);
      border: 1px solid var(--mr-border);
      background: var(--mr-surface);
      box-shadow: var(--mr-shadow-soft);
      overflow: hidden
    }

    #tab-dashboard .md-card-hd {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 1rem 1.15rem;
      border-bottom: 1px solid var(--border)
    }

    #tab-dashboard .md-card-hd--stack {
      flex-direction: column;
      gap: 4px
    }

    #tab-dashboard .md-card-hd-iconwrap {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: var(--blue-light);
      color: var(--blue-text);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    #tab-dashboard .md-card-hd-iconwrap.md-ico-purple {
      background: var(--purple-light);
      color: var(--purple-text)
    }

    #tab-dashboard .md-card-hd-text {
      flex: 1;
      min-width: 0
    }

    #tab-dashboard .md-card-title {
      margin: 0;
      font-size: 1rem;
      font-weight: 700;
      color: var(--text)
    }

    #tab-dashboard .md-card-desc {
      margin: 0.2rem 0 0;
      font-size: 0.78rem;
      color: var(--text3)
    }

    #tab-dashboard .md-link-all {
      border: 1px solid var(--mr-primary-soft);
      background: var(--mr-surface);
      color: var(--mr-primary);
      font-size: 0.78rem;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font);
      white-space: nowrap;
      padding: 7px 14px;
      border-radius: 999px;
      transition: background 0.15s, color 0.15s
    }

    #tab-dashboard .md-link-all:hover {
      background: var(--mr-primary);
      color: #fff
    }

    #tab-dashboard .md-card-bd {
      padding: 0.85rem 1rem 1rem
    }

    #tab-dashboard .md-quick-grid {
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    #tab-dashboard .md-quick-btn {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      text-align: right;
      padding: 12px 14px;
      border-radius: 999px;
      border: 1px solid var(--mr-border);
      background: var(--mr-surface);
      color: var(--mr-text);
      font-family: var(--font);
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, transform 0.12s
    }

    #tab-dashboard .md-quick-btn:hover {
      border-color: var(--mr-primary);
      background: var(--mr-primary-softer);
      color: var(--mr-primary)
    }

    #tab-dashboard .md-quick-btn i {
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: var(--mr-primary-soft);
      color: var(--mr-primary)
    }

    #tab-dashboard .md-recent-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px 4px;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      transition: background 0.15s, transform 0.2s ease
    }

    #tab-dashboard .md-recent-item:last-child {
      border-bottom: none
    }

    #tab-dashboard .md-recent-item:hover {
      background: var(--blue-light)
    }

    #tab-dashboard .md-recent-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 0.95rem;
      transition: background 0.2s, color 0.2s
    }

    #tab-dashboard .md-ri-success {
      background: color-mix(in srgb, #48A111 18%, var(--surface));
      color: #48A111
    }

    #tab-dashboard .md-ri-info {
      background: color-mix(in srgb, var(--blue) 18%, var(--surface));
      color: var(--blue-text)
    }

    #tab-dashboard .md-ri-warn {
      background: color-mix(in srgb, var(--amber) 22%, var(--surface));
      color: #a16207
    }

    #tab-dashboard .md-recent-body {
      flex: 1;
      min-width: 0
    }

    #tab-dashboard .md-recent-title {
      margin: 0 0 4px;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text)
    }

    #tab-dashboard .md-recent-desc {
      margin: 0;
      font-size: 0.72rem;
      color: var(--text3);
      line-height: 1.45
    }

    #tab-dashboard .md-recent-time {
      margin: 0.25rem 0 0;
      font-size: 0.68rem;
      color: var(--text3);
      opacity: 0.9
    }

    #tab-dashboard .md-recent-item .badge {
      flex-shrink: 0;
      align-self: center
    }

    #tab-dashboard .md-recent-chevron {
      color: var(--text3);
      opacity: 0;
      align-self: center;
      font-size: 0.75rem;
      transition: opacity 0.15s
    }

    #tab-dashboard .md-recent-item:hover .md-recent-chevron {
      opacity: 0.85
    }

    #tab-dashboard .md-empty {
      text-align: center;
      padding: 2rem 1rem;
      color: var(--text3)
    }

    #tab-dashboard .md-empty i {
      font-size: 2rem;
      opacity: 0.35;
      margin-bottom: 0.5rem;
      display: block
    }

    #tab-dashboard .md-hero-title .md-wave {
      display: inline-block;
      transform-origin: 70% 90%;
      animation: mdWave 0.85s ease-in-out 1s 2 both
    }

    #tab-dashboard .md-dash-play .md-hero {
      animation: mdHeroIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both
    }

    #tab-dashboard .md-dash-play .md-stats-grid .md-stat-card:nth-child(1) {
      animation: mdStatIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both
    }

    #tab-dashboard .md-dash-play .md-stats-grid .md-stat-card:nth-child(2) {
      animation: mdStatIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both
    }

    #tab-dashboard .md-dash-play .md-stats-grid .md-stat-card:nth-child(3) {
      animation: mdStatIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both
    }

    #tab-dashboard .md-dash-play .md-stats-grid .md-stat-card:nth-child(4) {
      animation: mdStatIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both
    }

    #tab-dashboard .md-dash-play .md-split>.md-card:nth-child(1) {
      animation: mdCardIn 0.58s ease 0.36s both
    }

    #tab-dashboard .md-dash-play .md-split>.md-card:nth-child(2) {
      animation: mdCardIn 0.58s ease 0.44s both
    }

    #tab-dashboard .md-dash-play .md-card--full {
      animation: mdCardIn 0.58s ease 0.52s both
    }

    #tab-dashboard .md-dash-play .md-recent-item {
      animation: mdRowIn 0.45s ease both
    }

    #tab-dashboard .md-dash-play .md-recent-item:nth-child(1) {
      animation-delay: 0.05s
    }

    #tab-dashboard .md-dash-play .md-recent-item:nth-child(2) {
      animation-delay: 0.1s
    }

    #tab-dashboard .md-dash-play .md-recent-item:nth-child(3) {
      animation-delay: 0.15s
    }

    #tab-dashboard .md-dash-play .md-recent-item:nth-child(4) {
      animation-delay: 0.2s
    }

    #tab-dashboard .md-dash-play .md-recent-item:nth-child(5) {
      animation-delay: 0.25s
    }

    #tab-dashboard .md-dash-play .md-recent-item:nth-child(6) {
      animation-delay: 0.3s
    }

    #tab-dashboard .md-quick-btn:hover {
      transform: translateX(-3px)
    }

    #tab-dashboard .md-recent-item:hover {
      transform: translateX(-2px)
    }

    /* Buttons — Mirsad pill style */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 22px;
      min-height: 40px;
      background: var(--mr-surface);
      color: var(--mr-primary);
      border: 1px solid var(--mr-primary-soft);
      border-radius: 999px;
      font-family: var(--font);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease
    }

    .btn:hover {
      background: var(--mr-primary-softer);
      color: var(--mr-primary)
    }

    .btn:disabled {
      opacity: 0.55;
      cursor: not-allowed;
      pointer-events: none
    }

    .btn-primary {
      background: var(--mr-primary);
      color: #fff;
      border-color: var(--mr-primary);
      box-shadow: 0 6px 16px rgba(15, 18, 36, 0.28)
    }

    .btn-primary:hover {
      background: var(--mr-primary-hover);
      color: #fff;
      border-color: var(--mr-primary-hover)
    }

    .btn-success {
      background: var(--mr-success);
      color: #fff;
      border-color: var(--mr-success)
    }

    .btn-success:hover {
      background: #3a8010
    }

    .btn-danger {
      background: var(--mr-danger);
      color: #fff;
      border-color: var(--mr-danger)
    }

    .btn-danger:hover {
      background: color-mix(in srgb, var(--mr-red) 88%, #000)
    }

    /* shadcn/ui Button — vanilla CSS (mirrors @/components/ui/button) */
    .ui-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.375rem;
      white-space: nowrap;
      border-radius: 0.5rem;
      border: 1px solid transparent;
      font-family: var(--font);
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1;
      transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
      outline-offset: 2px;
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }

    .ui-btn:focus-visible {
      outline: 2px solid color-mix(in oklch, var(--mr-primary) 70%, transparent);
    }

    .ui-btn:disabled {
      pointer-events: none;
      opacity: 0.5;
    }

    .ui-btn svg,
    .ui-btn > i {
      pointer-events: none;
      flex-shrink: 0;
    }

    .ui-btn--default {
      background: var(--mr-primary);
      color: #fff;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .ui-btn--default:hover {
      background: var(--mr-primary-hover);
    }

    .ui-btn--outline {
      background: var(--mr-bg);
      color: var(--mr-text);
      border-color: var(--mr-border);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .ui-btn--outline:hover {
      background: var(--mr-bg-2);
      color: var(--mr-text);
    }

    .ui-btn--secondary {
      background: var(--mr-bg-2);
      color: var(--mr-text);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .ui-btn--secondary:hover {
      background: color-mix(in oklch, var(--mr-bg-2) 80%, var(--mr-border));
    }

    .ui-btn--ghost {
      background: transparent;
      color: var(--mr-text);
    }

    .ui-btn--ghost:hover {
      background: var(--mr-bg-2);
      color: var(--mr-text);
    }

    .ui-btn--sm {
      height: 2rem;
      padding: 0 0.75rem;
      font-size: 0.75rem;
      border-radius: 0.5rem;
    }

    .ui-btn--default-size {
      height: 2.25rem;
      padding: 0.5rem 1rem;
    }

    .ui-btn--icon {
      height: 2.25rem;
      width: 2.25rem;
      padding: 0;
    }

    .ui-btn--icon.ui-btn--sm {
      height: 2rem;
      width: 2rem;
    }

    .btn-warning {
      background: var(--mr-warning);
      color: #2a2200;
      border-color: var(--mr-warning)
    }

    .btn-ghost {
      background: transparent;
      border-color: transparent;
      color: var(--mr-text-2)
    }

    .btn-ghost:hover {
      background: var(--mr-primary-softer);
      color: var(--mr-primary)
    }

    .btn-sm {
      padding: 7px 14px;
      min-height: 32px;
      font-size: 12px
    }

    /* Forms */
    .form-group {
      margin-bottom: 14px;
      position: relative;
    }

    .autocomplete-dropdown {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      z-index: 100;
      max-height: 250px;
      overflow-y: auto;
    }

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

    ::-webkit-scrollbar-track {
      background: transparent;
    }

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

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

    /* Page Title Bar */
    .page-title-bar {
      display: none;
      align-items: center;
      padding: 16px 24px;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
    }

    .page-title-bar.visible {
      display: flex;
    }

    .page-title-bar h1 {
      font-size: 18px;
      font-weight: 700;
      color: var(--text);
      margin: 0;
    }

    .page-title-bar p {
      font-size: 12px;
      color: var(--text3);
      margin: 0;
      margin-top: 2px;
    }

    /* Unified Global Banner */
    .topbar.unified-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      box-sizing: border-box;
      gap: 10px;
      height: 76px;
      min-height: calc(76px + var(--mr-safe-top, env(safe-area-inset-top, 0px)));
      padding-block: 10px;
      padding-block-start: calc(10px + var(--mr-safe-top, env(safe-area-inset-top, 0px)));
      padding-inline-start: 16px;
      padding-inline-end: 6px;
      background: color-mix(in srgb, var(--mr-surface) 94%, transparent);
      border-bottom: 1px solid var(--mr-border);
      border-inline-start: 0;
      position: sticky;
      top: 0;
      z-index: 950;
      flex-shrink: 0;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .topbar-brand-zone {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      flex: 0 1 auto;
      justify-content: flex-start
    }

    .topbar-brand-zone .brand-area {
      flex-shrink: 0
    }

    .topbar-brand-divider {
      flex-shrink: 0
    }

    .topbar-actions-zone {
      position: relative;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      margin-inline-start: auto;
      justify-content: flex-end
    }

    .topbar-tools,
    .topbar-right {
      display: contents
    }

    .brand-area {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0;
      cursor: pointer;
      flex-shrink: 0
    }

    .brand-area .brand-icon:not(.wefaq-logo-slot) {
      width: 44px;
      height: 44px;
      background: var(--mr-primary);
      color: #fff;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      box-shadow: 0 4px 15px rgba(15, 18, 36, 0.22);
    }

    .brand-area .brand-icon.wefaq-logo-slot {
      background: transparent !important;
      box-shadow: none !important;
      border-radius: 0 !important
    }

    .brand-mono {
      font-weight: 800;
      line-height: 1
    }

    .brand-area .brand-text {
      display: flex;
      flex-direction: column;
      line-height: 1.25;
    }

    .brand-area .brand-text strong {
      font-size: 18px;
      color: var(--text);
      font-weight: 800;
    }

    .brand-area .brand-text span {
      display: none;
    }

    .topbar-divider {
      width: 1px;
      height: 34px;
      background: var(--border2);
      margin: 0 4px;
      opacity: 0.75;
      flex-shrink: 0
    }

    /* Refined Compliance Tabs */
    .cmp-tabs-wrapper {
      margin: 20px 0;
      padding-bottom: 12px;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .cmp-tabs-wrapper::-webkit-scrollbar {
      display: none;
    }

    .cmp-tabs {
      display: flex;
      gap: 14px;
      min-width: max-content;
    }

    .cmp-tab {
      flex: 1;
      min-width: 120px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      padding: 18px 14px;
      background: var(--mr-surface);
      border: 1px solid var(--mr-border);
      border-radius: 18px;
      color: var(--mr-text-2);
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      cursor: pointer;
    }

    .cmp-tab i {
      font-size: 22px;
      transition: transform 0.3s ease;
    }

    .cmp-tab span {
      font-size: 13px;
      font-weight: 700;
    }

    .cmp-tab:hover {
      background: var(--mr-primary-softer);
      color: var(--mr-primary);
      transform: translateY(-2px);
      border-color: var(--mr-primary-soft)
    }

    .cmp-tab:hover i {
      transform: scale(1.06);
    }

    .cmp-tab.active {
      background: var(--mr-primary);
      color: #fff;
      border-color: var(--mr-primary);
      box-shadow: 0 12px 24px rgba(15, 18, 36, 0.28);
    }

    .sidebar-brand-minimal {
      padding: 20px;
      display: flex;
      justify-content: flex-end;
    }

    .autocomplete-item {
      padding: 10px 12px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 6px;
      border-bottom: 1px solid var(--border);
      transition: background 0.2s;
    }

    .autocomplete-item:last-child {
      border-bottom: none;
    }

    .autocomplete-item:hover {
      background: var(--surface);
    }

    .ac-name {
      font-weight: bold;
      font-size: 13px;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .ac-details {
      font-size: 11px;
      color: var(--text3);
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .ac-details span {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    /* سكرول بار مخصص لقوائم البحث */
    .autocomplete-dropdown::-webkit-scrollbar {
      width: 6px;
    }

    .autocomplete-dropdown::-webkit-scrollbar-track {
      background: transparent;
    }

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

    .autocomplete-dropdown::-webkit-scrollbar-thumb:hover {
      background: var(--text3);
    }

    .form-label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: var(--text2);
      margin-bottom: 6px
    }

    .required-mark {
      color: var(--red);
      margin-right: 4px
    }

    .form-input,
    .form-select,
    .form-textarea {
      width: 100%;
      padding: 11px 16px;
      background: var(--mr-surface);
      border: 1px solid var(--mr-border);
      border-radius: 999px;
      font-family: var(--font);
      font-size: 13px;
      color: var(--mr-text);
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease
    }

    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
      border-color: var(--mr-primary);
      box-shadow: 0 0 0 4px var(--mr-primary-soft)
    }

    .form-textarea {
      border-radius: 18px
    }

    .form-textarea {
      min-height: 80px;
      resize: vertical;
      font-family: var(--font)
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px
    }

    /* Badges */
    .badge {
      display: inline-block;
      padding: 3px 9px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 600;
      border: 1px solid transparent
    }

    .b-blue {
      background: var(--b-blue-bg);
      color: var(--blue-text);
      border: 1px solid var(--b-blue-bd);
    }

    .b-green {
      background: var(--b-green-bg);
      color: var(--green-text);
      border: 1px solid var(--b-green-bd);
    }

    .b-amber {
      background: var(--b-amber-bg);
      color: var(--amber-text);
      border: 1px solid var(--b-amber-bd);
    }

    .b-orange {
      background: #fff7ed;
      color: #c2410c;
      border: 1px solid #fdba74;
    }

    [data-theme="dark"] .b-orange {
      background: rgba(234, 88, 12, 0.2);
      color: #fdba74;
      border-color: rgba(251, 146, 60, 0.45);
    }

    .b-red {
      background: var(--b-red-bg);
      color: var(--red-text);
      border: 1px solid var(--b-red-bd);
    }

    .b-purple {
      background: var(--b-purple-bg);
      color: var(--purple-text);
      border: 1px solid var(--b-purple-bd);
    }

    .b-gray {
      background: var(--bg2);
      color: var(--text2);
      border: 1px solid var(--border);
    }

    /* Tables */
    .data-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px
    }

    .data-table thead {
      background: var(--mr-primary-softer)
    }

    .data-table th {
      text-align: right;
      padding: 14px 16px;
      font-weight: 700;
      font-size: 12px;
      color: var(--mr-text-2);
      border-bottom: 1px solid var(--mr-border)
    }

    .data-table td {
      padding: 14px 16px;
      border-bottom: 1px solid var(--mr-border);
      color: var(--mr-text)
    }

    .data-table tbody tr {
      cursor: pointer;
      transition: background 0.18s ease
    }

    .data-table tbody tr:hover {
      background: var(--mr-primary-softer)
    }

    .empty {
      text-align: center;
      padding: 40px;
      color: var(--text3)
    }

    .empty i {
      font-size: 36px;
      margin-bottom: 10px;
      display: block;
      opacity: 0.5
    }

    .empty p {
      font-size: 13px
    }

    /* Toolbar */
    .toolbar {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 16px
    }

    .wf-panel {
      padding: 28px 30px 24px;
      margin-bottom: 0
    }

    .wf-panel-intro {
      margin-bottom: 22px
    }

    .wf-panel-title {
      margin: 0;
      font-size: 22px;
      font-weight: 800;
      color: var(--mr-text);
      line-height: 1.25
    }

    .wf-panel-sub {
      margin: 6px 0 0;
      font-size: 12px;
      color: var(--mr-text-3);
      font-family: var(--mono);
      letter-spacing: 0.02em
    }

    .wf-toolbar {
      gap: 14px;
      margin-bottom: 12px;
      position: relative;
      z-index: 30;
    }

    .wf-toolbar.is-status-open,
    .users-toolbar.is-status-open {
      z-index: 500;
    }

    .wf-search {
      flex: 1 1 420px;
      min-width: 260px;
      height: 46px;
      padding-inline: 18px 10px
    }

    .wf-status-filter {
      position: relative;
      flex: 0 0 auto;
      min-width: 200px;
      z-index: 501;
    }

    .wf-status-select-native {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .wf-status-trigger {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      width: 100%;
      min-width: 200px;
      height: 46px;
      padding: 0 14px 0 12px;
      border: 1px solid var(--mr-border);
      border-radius: 999px;
      background: var(--mr-surface);
      color: var(--mr-text);
      font-family: var(--font);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
      box-shadow: 0 1px 2px rgba(15, 18, 36, 0.04);
      outline: none;
      -webkit-tap-highlight-color: transparent;
    }

    .wf-status-trigger:focus {
      outline: none;
    }

    .wf-status-trigger:focus-visible {
      border-color: var(--mr-primary);
      box-shadow: 0 0 0 4px var(--mr-primary-soft);
    }

    .wf-status-trigger:hover {
      border-color: var(--mr-primary-soft);
      background: var(--mr-primary-softer);
    }

    :root:not([data-theme="dark"]) .wf-status-trigger:hover {
      background: var(--mr-primary) !important;
      border-color: var(--mr-primary) !important;
      color: #fff !important;
      box-shadow: none !important
    }

    :root:not([data-theme="dark"]) .wf-status-trigger:hover .wf-status-trigger__label {
      color: #fff !important
    }

    :root:not([data-theme="dark"]) .wf-status-trigger:hover .wf-status-trigger__ico {
      background: rgba(255, 255, 255, 0.16) !important;
      color: #fff !important
    }

    :root:not([data-theme="dark"]) .wf-status-trigger:hover .wf-status-trigger__chev {
      color: #fff !important
    }

    .wf-status-trigger[aria-expanded="true"] {
      border-color: var(--mr-primary);
      box-shadow: 0 0 0 4px var(--mr-primary-soft);
    }

    .wf-status-trigger__ico {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--mr-primary-soft);
      color: var(--mr-primary);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      flex-shrink: 0;
    }

    .wf-status-trigger__label {
      flex: 1;
      text-align: start;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .wf-status-trigger__chev {
      font-size: 10px;
      color: var(--mr-text-3);
      transition: transform 0.2s ease;
      flex-shrink: 0;
    }

    .wf-status-trigger[aria-expanded="true"] .wf-status-trigger__chev {
      transform: rotate(180deg);
      color: var(--mr-primary);
    }

    .wf-status-menu {
      position: fixed;
      z-index: 9000;
      display: none;
      flex-direction: column;
      margin: 0;
      padding: 0;
      background: var(--mr-surface);
      border: 1px solid var(--mr-border);
      border-radius: 16px;
      box-shadow: 0 12px 40px rgba(15, 18, 36, 0.14), 0 4px 12px rgba(15, 18, 36, 0.08);
      max-height: min(360px, calc(100vh - 24px));
      overflow: hidden;
      box-sizing: border-box;
    }

    .wf-status-menu.open {
      display: flex;
    }

    .wf-status-menu__scroll {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 8px;
      max-height: min(360px, calc(100vh - 24px));
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: rgba(15, 18, 36, 0.28) transparent;
    }

    .wf-status-menu__scroll::-webkit-scrollbar {
      width: 5px;
    }

    .wf-status-menu__scroll::-webkit-scrollbar-track {
      background: transparent;
      margin-block: 8px;
    }

    .wf-status-menu__scroll::-webkit-scrollbar-thumb {
      background: rgba(15, 18, 36, 0.22);
      border-radius: 999px;
      min-height: 28px;
    }

    .wf-status-menu__scroll::-webkit-scrollbar-thumb:hover {
      background: rgba(15, 18, 36, 0.38);
    }

    [data-theme="dark"] .wf-status-menu__scroll {
      scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
    }

    [data-theme="dark"] .wf-status-menu__scroll::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.22);
    }

    [data-theme="dark"] .wf-status-menu__scroll::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.36);
    }

    .wf-status-opt {
      display: flex;
      align-items: center;
      gap: 14px;
      width: 100%;
      padding: 10px 12px;
      border: 0;
      border-radius: 12px;
      background: transparent;
      color: var(--mr-text);
      font-family: var(--font);
      font-size: 13px;
      font-weight: 500;
      text-align: start;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease;
      outline: none;
    }

    .wf-status-opt:focus-visible {
      box-shadow: inset 0 0 0 2px var(--mr-primary-soft);
    }

    .wf-status-opt:hover:not(.is-active) {
      background: var(--mr-primary-soft);
      color: var(--mr-text);
      font-weight: 500;
    }

    .wf-status-opt.is-active {
      background: var(--mr-primary);
      color: #fff;
      font-weight: 700;
    }

    .wf-status-opt.is-active::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #fff;
      flex-shrink: 0;
    }

    [data-theme="dark"] .wf-status-opt:hover:not(.is-active) {
      background: rgba(255, 255, 255, 0.09);
      color: #fff;
    }

    [data-theme="dark"] .wf-status-opt.is-active {
      background: rgba(255, 255, 255, 0.16);
      color: #fff;
    }

    [data-theme="dark"] .wf-status-opt.is-active::before {
      background: #fff;
    }

    [data-theme="dark"] .wf-status-menu {
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    }

    #wf-status-menu {
      width: max-content;
      min-width: 0
    }

    #wf-status-menu .wf-status-menu__scroll {
      width: max-content;
      min-width: 100%;
      padding: 6px;
      gap: 2px
    }

    #wf-status-menu .wf-status-opt {
      width: max-content;
      min-width: 100%;
      box-sizing: border-box;
      padding: 8px 10px;
      gap: 8px;
      white-space: nowrap
    }

    html.mr-mobile-ui #tab-workflow #wf-status-trigger .wf-status-trigger__chev {
      display: none !important;
    }

    html.mr-mobile-ui #tab-workflow #wf-status.wf-status-select-native {
      -webkit-appearance: none;
      appearance: none;
      background-image: none;
    }

    html.mr-mobile-ui #tab-compliance #cmp-filter-scope.wf-status-select-native {
      -webkit-appearance: none;
      appearance: none;
      background-image: none;
    }


.wf-count {
      font-size: 12px;
      color: var(--mr-text-3);
      margin-bottom: 14px
    }

.wf-count strong {
      color: var(--mr-text);
      font-weight: 700
    }

#tab-reports .wf-panel .rp-stats {
      margin-bottom: 18px
    }

#tab-reports {
      --rp-search-fs: clamp(8px, 2.4vw, 11px);
      --rp-search-icon-fs: clamp(10px, 3vw, 12px)
    }

    #tab-reports .wf-search .figma-search-input,
#tab-reports .wf-search .figma-search-input::placeholder {
      font-size: var(--rp-search-fs);
      line-height: 1.2
    }

#tab-reports .wf-search .figma-search-btn {
      font-size: var(--rp-search-icon-fs)
    }

#tab-reports .wf-toolbar #rp-filter-btn {
      flex: 0 0 auto;
      max-width: 140px;
      padding-inline: 12px
    }

    #tab-reports .wf-toolbar .rp-tool-btn,
#tab-reports .wf-toolbar .rp-date-wrap {
      flex: 0 0 auto
    }

#tab-reports .wf-toolbar .rp-date-wrap {
      flex: 0 0 auto;
      width: auto;
      max-width: none;
      min-width: 0
    }

#tab-reports .wf-toolbar .rp-date-btn {
      width: 46px;
      min-width: 46px;
      max-width: 46px;
      padding: 0;
      justify-content: center;
      gap: 0;
      flex-shrink: 0
    }

#tab-reports .wf-toolbar .rp-date-btn #rp-date-label {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0
    }

#tab-reports .wf-toolbar .rp-date-btn.active {
      padding-inline: 0
    }

#tab-reports .wf-toolbar .rp-tool-btn {
      min-height: 46px;
      border-radius: 999px;
      padding: 0 16px;
      font-size: 13px;
      font-weight: 600
    }

    html.mr-desktop-ui #tab-reports .wf-toolbar .rp-date-wrap {
      flex: 0 0 auto !important;
      width: auto !important;
      max-width: none !important;
    }

    html.mr-desktop-ui #tab-reports .wf-toolbar .rp-date-btn {
      width: 46px !important;
      min-width: 46px !important;
      max-width: 46px !important;
      padding: 0 !important;
      justify-content: center !important;
      gap: 0 !important;
    }

    html.mr-desktop-ui #tab-reports .wf-toolbar .rp-date-btn #rp-date-label {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }


#cmpDatePickerPopup .dp-popup-body {
      padding-bottom: 12px;
    }

#cmpDatePickerPopup .dp-day.in-range {
      background: transparent !important;
      color: var(--md2-dp-on-surface, var(--mr-text));
      border-radius: 50%;
    }

#cmpDatePickerPopup .dp-day.pending {
      border-radius: 50% !important;
      background: #e5e7eb !important;
      color: #374151 !important;
      border: none !important;
      box-shadow: none;
    }

#cmpDatePickerPopup .dp-day.selected {
      border-radius: 50% !important;
      background: #111827 !important;
      color: #fff !important;
      border: none !important;
    }

[data-theme="dark"] #cmpDatePickerPopup .dp-day.pending {
      background: rgba(148, 163, 184, 0.32) !important;
      color: #e8eeff !important;
    }

[data-theme="dark"] #cmpDatePickerPopup .dp-day.selected {
      background: #f4f7ff !important;
      color: #0a0f1c !important;
    }

#cmpDatePickerPopup .dp-day.today:not(.selected):not(.pending) {
      border: 1px solid var(--mr-border);
      border-radius: 50%;
    }

    #cmpDatePickerPopup .dp-day.disabled,
#cmpDatePickerPopup .dp-day:disabled {
      opacity: 0.28;
      cursor: not-allowed;
      pointer-events: none;
    }

#cmpDatePickerPopup .cmp-dp-today-only {
      display: flex;
      justify-content: center;
      padding-top: 10px;
      margin-top: 6px;
      border-top: 1px solid var(--mr-border);
    }

#cmpDatePickerPopup .cmp-dp-today-only .dp-btn-today {
      min-width: 88px;
    }

    #cmpDatePickerPopup.open,
#cmpDatePickerPopup.dp-is-floating {
      pointer-events: auto;
      z-index: 2500;
      flex-direction: column;
    }

#cmpDatePickerPopup .fig-dp1429428-top-spacer {
      pointer-events: none;
    }

#cmpDatePickerPopup .dp-popup-body {
      position: relative;
      z-index: 1;
      pointer-events: auto;
    }

    #cmpDatePickerPopup .dp-icon-btn--nav,
    #cmpDatePickerPopup .dp-month-label,
#cmpDatePickerPopup .dp-btn {
      cursor: pointer;
      pointer-events: auto;
    }

#cmpDatePickerPopup .dp-day:not(.disabled):not(:disabled):not(.other-month) {
      cursor: pointer;
      pointer-events: auto;
    }

    .cmp-neo-tools-anchor {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
      pointer-events: none;
    }

    #tab-reports .wf-count__period {
      margin-inline-start: 10px;
      font-size: 11px;
      color: var(--mr-text-3)
    }

    .wf-table-wrap {
      overflow-x: auto;
      border-radius: 12px;
      border: 1px solid var(--mr-border);
      background: var(--mr-surface, #fff)
    }

    .wf-panel .data-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0 6px
    }

    .wf-panel .data-table thead {
      background: var(--mr-primary-softer)
    }

    .wf-panel .data-table th {
      padding: 13px 16px;
      font-size: 12px;
      color: var(--mr-text-2);
      border-bottom: 1px solid var(--mr-border);
      background: var(--mr-primary-softer)
    }

    .wf-panel .data-table tbody td {
      padding: 14px 16px;
      font-size: 13px;
      vertical-align: middle;
      border-top: 1px solid transparent;
      border-bottom: 1px solid transparent;
      background: var(--mr-surface);
      transition: background .18s ease, border-color .18s ease, box-shadow .18s ease
    }

    .wf-panel .data-table tbody tr {
      cursor: pointer;
      transition: box-shadow .18s ease
    }

    .wf-panel .data-table tbody tr td:first-child {
      border-inline-end: 1px solid transparent;
      border-radius: 0 12px 12px 0
    }

    .wf-panel .data-table tbody tr td:last-child {
      border-inline-start: 1px solid transparent;
      border-radius: 12px 0 0 12px
    }

    .wf-panel .data-table tbody tr:nth-child(even) td {
      background: rgba(15, 18, 36, 0.02)
    }

    .wf-panel .data-table tbody tr:hover {
      box-shadow: 0 2px 8px rgba(15, 18, 36, 0.06)
    }

    .wf-panel .data-table tbody tr:hover td {
      background: var(--mr-primary-softer);
      border-top-color: var(--mr-border);
      border-bottom-color: var(--mr-border)
    }

    .wf-panel .data-table tbody tr:hover td:first-child {
      border-inline-end-color: var(--mr-border)
    }

    .wf-panel .data-table tbody tr:hover td:last-child {
      border-inline-start-color: var(--mr-border)
    }

    [data-theme="dark"] .wf-panel .data-table tbody tr:nth-child(even) td {
      background: rgba(255, 255, 255, 0.03)
    }

    [data-theme="dark"] .wf-panel .data-table tbody tr:hover {
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25)
    }

    [data-theme="dark"] .wf-panel .data-table tbody tr:hover td {
      background: rgba(255, 255, 255, 0.06)
    }

    #tab-workflow .wf-panel .data-table thead th,
    #tab-reports .wf-panel .data-table thead th {
      background: var(--mr-primary-soft) !important
    }

    #tab-reports .mr-users-thead,
    #tab-reports .wf-tickets-table thead,
    #tab-workflow .wf-tickets-table thead {
      position: static !important;
      min-width: 0 !important;
      width: 100% !important;
    }

    #tab-workflow .wf-panel .data-table tbody tr:hover td,
    #tab-reports .wf-panel .data-table tbody tr:hover td {
      background: var(--mr-primary-soft) !important
    }

    [data-theme="dark"] #tab-workflow .wf-panel .data-table tbody tr:hover td,
    [data-theme="dark"] #tab-reports .wf-panel .data-table tbody tr:hover td {
      background: var(--mr-primary-soft) !important
    }

    .wf-panel .badge.b-amber {
      background: var(--b-amber-bg);
      color: var(--b-amber-fg);
      border-color: var(--b-amber-bd);
    }

    .wf-panel .badge.b-blue {
      background: var(--b-blue-bg);
      color: var(--b-blue-fg);
      border-color: var(--b-blue-bd);
      border-color: var(--b-blue-bd)
    }

    .ticket-id-cell {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-wrap: nowrap;
      direction: rtl;
      justify-content: flex-start;
      max-width: 100%;
      white-space: nowrap
    }

    .ticket-id-cell--stacked,
    .ticket-id-cell--desk-auto {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 5px !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      direction: rtl !important;
      white-space: nowrap !important
    }

    .wf-ticket-id-line {
      display: block;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      text-align: center;
      line-height: 1.15
    }

    .wf-ticket-auto-line {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 100%;
      min-height: 14px;
      line-height: 1
    }

    .wf-ticket-auto-placeholder {
      display: block;
      height: 14px;
      min-height: 14px;
      width: 1px;
      overflow: hidden;
      visibility: hidden;
      pointer-events: none;
      flex-shrink: 0;
      margin: 0;
      padding: 0
    }

    .ticket-id-cell--stacked:not(.ticket-id-cell--auto) {
      justify-content: center !important;
      gap: 0 !important
    }

    .ticket-id-cell--stacked:not(.ticket-id-cell--auto) .wf-ticket-auto-line {
      display: none !important;
      min-height: 0 !important;
      height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important
    }

    .wf-ticket-id,
    .report-ticket-id {
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 800;
      direction: ltr;
      unicode-bidi: embed;
      font-variant-numeric: lining-nums tabular-nums;
      line-height: 1.15
    }

    .report-ticket-id {
      font-size: 13px;
    }

    .wf-emp-name {
      display: block;
      font-weight: 600;
      color: var(--mr-text)
    }

    .wf-emp-num {
      display: block;
      margin-top: 4px;
      font-size: 11px;
      color: var(--mr-text-3);
      font-family: var(--mono)
    }

    .wf-datetime {
      font-size: 12px;
      color: var(--mr-text);
      white-space: nowrap
    }

    .wf-panel .data-table th.wf-col-action,
    .wf-panel .data-table td.wf-col-action {
      text-align: center;
      width: 1%;
      white-space: nowrap;
    }

    .wf-view-only {
      color: var(--text3);
      font-size: 11px;
    }

    .wf-process-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 7px 14px;
      border: 0;
      border-radius: 999px;
      background: var(--blue-surface);
      color: var(--blue-text);
      font-family: var(--font);
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap
    }

    .toolbar-input {
      flex: 1;
      min-width: 200px;
      padding: 8px 12px;
      background: var(--surface);
      border: 1px solid var(--border2);
      border-radius: 8px;
      font-family: var(--font);
      font-size: 13px;
      color: var(--text)
    }

    .toolbar-input:focus {
      outline: none;
      border-color: var(--blue)
    }

    /* Modals */
    .modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      padding: 20px
    }

    .modal.open {
      display: flex
    }

    /* تذكرة فوق امتثال — الامتثال يبقى ظاهراً خلفها */
    body.ticket-over-cmp #cmpDetailModal.modal.open {
      z-index: 1000 !important;
      visibility: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important
    }

    body.ticket-over-cmp #ticketModal.modal.open {
      z-index: 1100 !important
    }

    .modal-card {
      background: var(--surface);
      border-radius: var(--radius-lg);
      width: 100%;
      max-width: min(420px, calc(100vw - 40px));
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: var(--shadow-lg)
    }

    #regionModal .modal-card,
    #branchModal .modal-card {
      max-width: min(400px, calc(100vw - 40px))
    }

    .modal-card.modal-lg {
      max-width: 700px
    }

    .modal-header {
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .modal-header h3 {
      font-size: 16px;
      font-weight: 700;
      color: var(--text)
    }

    .modal-body {
      padding: 20px
    }

    .modal-footer {
      padding: 14px 20px;
      border-top: 1px solid var(--border);
      display: flex;
      gap: 14px;
      justify-content: flex-end
    }

    /* Toast */
    .toast-container {
      position: fixed;
      top: 24px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9999;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 14px;
      width: min(420px, calc(100vw - 32px));
      pointer-events: none;
    }

    .toast {
      position: relative;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: start;
      gap: 12px;
      padding: 14px 14px 17px;
      background: color-mix(in srgb, var(--mr-surface) 94%, transparent);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--mr-border);
      border-radius: 16px;
      box-shadow: 0 4px 8px rgba(15, 18, 36, 0.05), 0 18px 44px rgba(15, 18, 36, 0.12);
      width: 100%;
      overflow: hidden;
      pointer-events: auto;
      animation: toastIn 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
    }

    .toast.is-leaving {
      animation: toastOut 0.24s ease forwards;
    }

    .toast__icon {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 16px;
    }

    .toast.success .toast__icon {
      background: rgba(72, 161, 17, 0.12);
      color: var(--mr-success);
    }

    .toast.error .toast__icon {
      background: rgba(255, 0, 0, 0.12);
      color: var(--mr-danger);
    }

    .toast.warning .toast__icon {
      background: rgba(255, 195, 0, 0.14);
      color: var(--mr-warning);
    }

    .toast.info .toast__icon {
      background: var(--blue-light);
      color: var(--blue);
    }

    .toast__body {
      min-width: 0;
      padding-top: 2px;
    }

    .toast__label {
      font-size: 11px;
      font-weight: 800;
      color: var(--mr-text-3);
      letter-spacing: 0.02em;
      margin-bottom: 3px;
    }

    .toast__msg {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: var(--mr-text);
      line-height: 1.55;
      word-break: break-word;
    }

    .toast__close {
      width: 28px;
      height: 28px;
      border: none;
      background: transparent;
      border-radius: 8px;
      color: var(--mr-text-3);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 12px;
      transition: background 0.15s, color 0.15s;
      margin-top: -2px;
    }

    .toast__close:hover {
      background: var(--mr-primary-softer);
      color: var(--mr-text);
    }

    .toast__progress {
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;
      height: 3px;
      background: color-mix(in srgb, var(--mr-border) 70%, transparent);
      overflow: hidden;
    }

    .toast__progress span {
      display: block;
      height: 100%;
      width: 100%;
      transform-origin: right center;
      animation: toastProgress 4.5s linear forwards;
    }

    .toast.success .toast__progress span {
      background: var(--mr-success);
    }

    .toast.error .toast__progress span {
      background: var(--mr-danger);
    }

    .toast.warning .toast__progress span {
      background: var(--mr-warning);
    }

    .toast.info .toast__progress span {
      background: var(--blue);
    }

    @keyframes toastIn {
      from {
        opacity: 0;
        transform: translateY(-14px) scale(0.96);
      }

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

    @keyframes toastOut {
      to {
        opacity: 0;
        transform: translateY(-10px) scale(0.96);
      }
    }

    @keyframes toastProgress {
      from {
        transform: scaleX(1);
      }

      to {
        transform: scaleX(0);
      }
    }

    /* Confirm Dialog */
    .confirm-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(4px);
      z-index: 10000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px
    }

    .confirm-overlay.open {
      display: flex;
      animation: cfFade 0.18s ease
    }

    @keyframes cfFade {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    .confirm-box {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      padding: 28px 24px 20px;
      max-width: 420px;
      width: 100%;
      text-align: center;
      animation: cfPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1)
    }

    @keyframes cfPop {
      from {
        opacity: 0;
        transform: scale(0.92)
      }

      to {
        opacity: 1;
        transform: scale(1)
      }
    }

    .confirm-icon {
      width: 56px;
      height: 56px;
      margin: 0 auto 16px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      background: var(--amber-light);
      color: var(--amber-text)
    }

    .confirm-icon.danger {
      background: var(--red-light);
      color: var(--red-text)
    }

    .confirm-icon.info {
      background: var(--blue-light);
      color: var(--blue-text)
    }

    .confirm-title {
      font-size: 17px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 8px
    }

    .confirm-msg {
      font-size: 14px;
      color: var(--text2);
      line-height: 1.6;
      margin-bottom: 22px
    }

    .confirm-actions {
      display: flex;
      gap: 14px;
      justify-content: center
    }

    .confirm-btn {
      padding: 10px 22px;
      border-radius: var(--radius);
      font-family: var(--font);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      border: 1px solid transparent;
      transition: all 0.15s ease;
      min-width: 100px
    }

    .confirm-cancel {
      background: var(--surface2);
      color: var(--text2);
      border-color: var(--border)
    }

    .confirm-cancel:hover {
      background: var(--bg2)
    }

    .confirm-ok {
      background: var(--red);
      color: white
    }

    .confirm-ok:hover {
      filter: brightness(0.92)
    }

    .confirm-ok.info {
      background: var(--blue)
    }

    .confirm-ok.warn {
      background: var(--amber);
      color: #2a2200
    }

    /* Workflow Steps */
    .wf-steps {
      --wf-circle-size: 32px;
      --wf-step-gap: 20px;
      --wf-step-pad-y: 15px;
      --wf-steps-pad-x: 24px;
      --wf-steps-pad-y: 24px;
      --wf-rail-x: calc(var(--wf-steps-pad-x) + (var(--wf-circle-size) / 2));
      --wf-rail-y1: calc(var(--wf-steps-pad-y) + var(--wf-step-pad-y) + (var(--wf-circle-size) / 2));
      --wf-rail-y2: var(--wf-rail-y1);
      --wf-rail-y-end: var(--wf-rail-y1);
      display: flex;
      flex-direction: column;
      gap: 0;
      padding: var(--wf-steps-pad-y) var(--wf-steps-pad-x);
      background: var(--surface2);
      border-radius: 16px;
      direction: rtl;
      position: relative;
      overflow: visible;
    }

    /* مسار عمودي واحد على يسار الدوائر (يُضبط ديناميكياً عبر syncWfStepsRail) */
    .wf-steps::before,
    .wf-steps::after {
      content: "";
      position: absolute;
      left: var(--wf-rail-x);
      right: auto;
      width: 2px;
      transform: translateX(-50%);
      border-radius: 1px;
      pointer-events: none;
      z-index: 0;
    }

    .wf-steps::before {
      top: var(--wf-rail-y1);
      height: max(2px, calc(var(--wf-rail-y-end) - var(--wf-rail-y1)));
      background: var(--border);
    }

    .wf-steps::after {
      top: var(--wf-rail-y1);
      height: max(2px, calc(var(--wf-rail-y2) - var(--wf-rail-y1) + 2px));
      background: var(--green);
    }

    .wf-step {
      display: flex;
      flex-direction: row;
      direction: ltr;
      align-items: stretch;
      gap: var(--wf-step-gap);
      padding: 0;
      color: var(--text3);
    }

    .wf-step-rail {
      position: relative;
      align-self: stretch;
      width: var(--wf-circle-size);
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 1;
    }

    .wf-step-circle {
      width: var(--wf-circle-size);
      height: var(--wf-circle-size);
      margin-top: var(--wf-step-pad-y);
      border-radius: 50%;
      background: var(--bg2);
      border: 2px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 14px;
      transition: all 0.3s ease;
      position: relative;
      z-index: 1;
      box-sizing: border-box;
    }

    .wf-step.done .wf-step-circle {
      background: var(--green);
      border-color: var(--green);
      color: #fff;
    }

    .wf-step.active .wf-step-circle {
      background: var(--surface2);
      border-color: var(--blue);
      color: var(--blue);
      box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
    }

    .wf-step-content {
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex: 1;
      min-width: 0;
      padding: var(--wf-step-pad-y) 0;
      direction: rtl;
      text-align: right;
    }

    .wf-step-label {
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
    }

    .wf-step-sub {
      font-size: 12px;
      color: var(--text3);
      opacity: 0.8;
    }

    .wf-step.active .wf-step-label {
      color: var(--blue);
    }

    .wf-step.done .wf-step-label {
      color: var(--green-text);
    }

    /* Pulse for active dot */
    .wf-step.active .wf-step-circle::after {
      content: "";
      position: absolute;
      width: 8px;
      height: 8px;
      background: var(--blue);
      border-radius: 50%;
      animation: wf-pulse 1.5s infinite;
    }

    @keyframes wf-pulse {
      0% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.7);
      }

      70% {
        transform: scale(1.1);
        opacity: 1;
        box-shadow: 0 0 0 10px rgba(0, 122, 255, 0);
      }

      100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(0, 122, 255, 0);
      }
    }

    .wf-arrow {
      display: none;
      /* Removed in favor of pseudo-line */
    }

    /* Workflow — تخطيط ثعبان (سير متعرج) */
    .wf-steps--snake {
      display: grid;
      grid-template-columns: repeat(var(--wf-snake-cols, 3), minmax(0, 1fr));
      grid-auto-rows: auto;
      gap: 14px 8px;
      padding: 18px 14px;
      direction: ltr;
    }

    .wf-steps--snake::before,
    .wf-steps--snake::after {
      display: none
    }

    .wf-snake-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      overflow: visible
    }

    .wf-snake-path {
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .wf-snake-path--track {
      stroke: var(--border)
    }

    .wf-snake-path--prog {
      stroke: var(--green);
      transition: d 0.25s ease
    }

    .wf-step--snake {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 6px;
      direction: rtl;
      text-align: center;
      padding: 10px 6px;
      border-radius: 12px;
      background: var(--surface);
      border: 1px solid var(--border2);
      position: relative;
      z-index: 1;
      min-width: 0
    }

    .wf-step--snake .wf-step-rail {
      width: auto;
      align-self: center
    }

    .wf-step--snake .wf-step-circle {
      margin-top: 0
    }

    .wf-step--snake .wf-step-content {
      padding: 0;
      align-items: center;
      text-align: center;
      width: 100%
    }

    .wf-step--snake .wf-step-label {
      font-size: 12px;
      line-height: 1.3
    }

    .wf-step--snake .wf-step-sub {
      font-size: 10px;
      line-height: 1.35;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden
    }

    .wf-step--snake.active {
      border-color: var(--blue);
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 18%, transparent);
      background: color-mix(in srgb, var(--blue) 6%, var(--surface))
    }

    .wf-step--snake.done {
      border-color: color-mix(in srgb, var(--green) 45%, var(--border2));
      background: color-mix(in srgb, var(--green) 5%, var(--surface))
    }

    .wf-snake-cell {
      display: flex;
      min-width: 0
    }

    .wf-snake-cell > .wf-step--snake {
      flex: 1 1 auto;
      width: 100%
    }

    /* Logs */
    .log-item {
      padding: 10px 12px;
      border: 1px solid var(--border2);
      margin-bottom: 8px;
      background: var(--surface2);
      border-radius: 8px;
      transition: all 0.2s ease;
    }

    .log-item:hover {
      transform: translateX(-4px);
      border-color: var(--blue);
    }

    .log-item--auto {
      border-color: var(--red);
      background: var(--red-light);
    }

    .log-item--auto:hover {
      border-color: var(--red);
    }

    .log-meta {
      font-size: 11px;
      color: var(--text3);
      margin-bottom: 4px
    }

    .log-action {
      font-weight: 600;
      font-size: 13px;
      color: var(--text)
    }

    .log-note {
      font-size: 12px;
      color: var(--text2);
      margin-top: 4px
    }

    .log-item--compose {
      padding: 8px 12px;
      border: 1px solid var(--border2);
      margin-bottom: 8px;
      background: var(--surface2);
      border-radius: 8px
    }

    .log-item--compose .log-compose-title {
      font-weight: 600;
      font-size: 13px;
      color: var(--text);
      margin-bottom: 4px
    }

    .log-item--compose .ticket-resp-input {
      width: 100%;
      height: 32px;
      min-height: 32px;
      max-height: 72px;
      resize: none;
      overflow-y: auto;
      box-sizing: border-box;
      border: 0;
      background: transparent;
      font-family: var(--font);
      font-size: 13px;
      line-height: 1.35;
      color: var(--text);
      padding: 0;
      box-shadow: none;
      outline: none
    }

    .log-item--compose .ticket-resp-input::placeholder {
      color: var(--text3)
    }

    .log-compose-files {
      margin-top: 6px !important
    }

    .log-compose-files .file-item {
      margin-bottom: 4px;
      font-size: 12px
    }

    .log-compose-actions {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 8px;
      direction: rtl
    }

    .log-compose-actions #responseButtons {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
      flex: 1 1 auto;
      min-width: 0;
      margin-top: 0 !important
    }

    .log-compose-actions .log-compose-attach {
      flex: 0 0 auto
    }

    .log-item--compose #responseButtons .td-resp-action {
      flex: 1 1 auto;
      min-height: 34px;
      font-size: 12px
    }

    .log-compose-attach {
      flex-shrink: 0;
      border: 1px dashed var(--border2);
      border-radius: 8px;
      background: var(--surface);
      color: var(--text2);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      cursor: pointer;
      touch-action: manipulation;
      transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease
    }

    .log-compose-attach--icon-only {
      width: 32px;
      height: 32px;
      padding: 0
    }

    .log-compose-attach--labeled {
      height: 34px;
      min-width: 34px;
      padding: 0 10px 0 8px;
      font-family: var(--font);
      font-size: 12px;
      font-weight: 500
    }

    .log-compose-attach-label {
      display: inline-block;
      color: var(--text2);
      line-height: 1;
      white-space: nowrap
    }

    .log-compose-attach:hover,
    .log-compose-attach:focus-visible {
      border-color: var(--blue);
      color: var(--blue);
      background: var(--blue-light)
    }

    /* Detail Tabs */
    .td-tabs {
      display: flex;
      gap: 6px;
      padding: 12px 16px 0;
      border-bottom: 1px solid var(--border)
    }

    .td-tab {
      background: transparent;
      border: none;
      padding: 8px 14px;
      cursor: pointer;
      color: var(--text3);
      font-family: var(--font);
      font-size: 13px;
      border-bottom: 2px solid transparent;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .td-tab.active {
      color: var(--blue);
      border-bottom-color: var(--blue);
      font-weight: 600
    }

    .td-tab.td-tab--needs-action:not(.active) {
      color: var(--orange, #e67e22);
      font-weight: 600
    }

    .td-pane {
      display: none;
      padding: 16px
    }

    .td-pane.active {
      display: block
    }

    .info-row {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0;
      padding: 9px 0;
      border-bottom: 1px dashed var(--border);
      direction: rtl;
      text-align: start
    }

    .info-label {
      flex: 0 0 auto;
      font-size: 12px;
      font-weight: 700;
      color: var(--text3);
      white-space: nowrap
    }

    .info-label::after {
      content: ' :';
      margin-inline: 2px 5px;
      font-weight: 400;
      color: var(--text3)
    }

    .info-value {
      flex: 1 1 auto;
      min-width: 0;
      font-size: 13px;
      color: var(--text);
      font-weight: 500;
      word-break: break-word;
      overflow-wrap: anywhere;
      white-space: pre-wrap;
      text-align: start
    }

    .info-value.no-reply {
      color: var(--red-text)
    }

    /* Attachment Grid */
    #ticketModal #tdInlineAttachments {
      margin-top: 0
    }

    .td-att-section-head {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-start;
      gap: 6px 10px;
      margin-top: 0;
      margin-bottom: 0;
      padding: 8px 0;
      border-bottom: 1px dashed var(--border);
      direction: rtl
    }

    .td-att-section-head h3 {
      margin: 0;
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      flex: 0 0 auto;
      white-space: nowrap
    }

    .td-att-section-head .td-att-hint,
    .td-att-section-head .td-att-loading {
      margin: 0;
      font-size: 11px;
      color: var(--text3);
      flex: 1 1 auto;
      min-width: 0;
      line-height: 1.35
    }

    .td-att-section-head .td-att-loading i {
      margin-inline-end: 4px
    }

    .att-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 14px;
      margin-top: 10px
    }

    .att-card {
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      transition: 0.2s;
      background: var(--surface);
      text-align: right;
      text-decoration: none;
      color: inherit;
      display: flex;
      flex-direction: column;
      gap: 6px;
      cursor: pointer
    }

    .att-card:hover {
      border-color: var(--blue);
      transform: translateY(-1px);
      box-shadow: var(--shadow-md)
    }

    .att-thumb {
      width: 100%;
      height: 90px;
      background: var(--surface2);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      margin-bottom: 4px
    }

    .att-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .att-thumb i {
      font-size: 32px;
      color: var(--blue)
    }

    .att-card .att-name {
      font-size: 11px;
      color: var(--text);
      font-weight: 500;
      word-break: break-all;
      line-height: 1.4;
      margin: 0
    }

    .att-uploader {
      font-size: 10px;
      color: var(--text3);
      display: flex;
      align-items: center;
      gap: 4px;
      padding-top: 4px;
      border-top: 1px dashed var(--border)
    }

    .att-uploader-role {
      padding: 1px 6px;
      border-radius: 8px;
      font-size: 9px;
      font-weight: 600
    }

    /* File Upload */
    .file-area {
      border: 2px dashed var(--border2);
      border-radius: 10px;
      padding: 16px;
      text-align: center;
      cursor: pointer;
      transition: 0.2s
    }

    .file-area:hover {
      border-color: var(--blue);
      background: var(--blue-light)
    }

    .file-area i {
      font-size: 24px;
      color: var(--text3);
      margin-bottom: 6px
    }

    .file-area p {
      font-size: 12px;
      color: var(--text3)
    }

    .file-list {
      margin-top: 10px
    }

    .file-item {
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0;
      background: var(--surface2);
      border-radius: 8px;
      margin-bottom: 6px;
      font-size: 13px;
      border: 1px solid var(--border);
    }

    .file-progress-bg {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 0%;
      background: rgba(0, 122, 255, 0.15);
      z-index: 0;
      transition: width 0.3s ease;
    }

    .file-item-content {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      width: 100%;
      gap: 14px;
      padding: 10px 12px;
    }

    .file-item button {
      margin-right: auto;
      background: rgba(255, 0, 0, 0.1);
      border: 1px solid rgba(255, 0, 0, 0.2);
      color: var(--red);
      cursor: pointer;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s;
    }

    .file-item button:hover {
      background: rgba(255, 0, 0, 0.2);
    }

    /* Branch / Region Cards */
    .viol-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 280px));
      gap: 14px;
      justify-content: start
    }

    .viol-card {
      background: var(--mr-surface);
      border: 1px solid var(--mr-border);
      border-radius: 18px;
      padding: 14px;
      position: relative;
      transition: 0.2s;
      box-shadow: var(--mr-shadow-soft);
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .viol-card:hover {
      box-shadow: var(--mr-shadow-card);
      transform: translateY(-2px);
      border-color: var(--mr-primary-soft)
    }

    .mr-viol-card .mr-viol-thumb {
      width: 100%;
      aspect-ratio: 16 / 9;
      background: var(--mr-bg);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 34px;
      margin-bottom: 0
    }

    .mr-viol-card .mr-viol-body {
      display: flex;
      align-items: flex-start;
      gap: 10px
    }

    .mr-viol-card .mr-viol-copy {
      flex: 1;
      min-width: 0
    }

    .mr-viol-card .br-actions {
      position: static;
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex-shrink: 0
    }

    .mr-viol-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--mr-text);
      letter-spacing: -0.01em
    }

    .mr-viol-desc {
      font-size: 11px;
      color: var(--mr-text-3);
      line-height: 1.45;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden
    }

    .mr-viol-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 2px
    }

    .mr-sev {
      font-size: 11px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 999px;
      letter-spacing: 0
    }

    .mr-sev-low {
      background: rgba(0, 122, 255, 0.12);
      color: #007aff
    }

    .mr-sev-mid {
      background: rgba(255, 195, 0, 0.16);
      color: #FFC300
    }

    .mr-sev-high {
      background: rgba(255, 0, 0, 0.12);
      color: #FF0000
    }

    .mr-sev-low {
      border: 1px solid rgba(0, 122, 255, 0.18)
    }

    .mr-sev-mid {
      border: 1px solid rgba(255, 204, 0, 0.28)
    }

    .mr-sev-high {
      border: 1px solid rgba(255, 0, 0, 0.2)
    }

    .mr-points {
      font-size: 12px;
      font-weight: 700;
      color: var(--mr-text);
      display: inline-flex;
      align-items: center;
      gap: 6px
    }

    .mr-points i {
      font-size: 11px;
      color: var(--mr-amber)
    }

    [data-theme="dark"] .mr-sev-low {
      background: rgba(0, 122, 255, 0.22);
      color: #5eb3ff;
      border-color: rgba(0, 122, 255, 0.38)
    }

    [data-theme="dark"] .mr-sev-mid {
      background: rgba(255, 195, 0, 0.2);
      color: #ffd54d;
      border-color: rgba(255, 195, 0, 0.38)
    }

    [data-theme="dark"] .mr-sev-high {
      background: rgba(255, 0, 0, 0.2);
      color: #ff6b6b;
      border-color: rgba(255, 0, 0, 0.38)
    }

    [data-theme="dark"] .mr-points i {
      color: var(--mr-amber)
    }

    .mr-viol-type-card.viol-card {
      width: 100%;
      max-width: 280px;
      padding: 12px;
      gap: 8px;
      border-radius: 16px
    }

    .mr-viol-type-card .mr-viol-thumb {
      aspect-ratio: 5 / 3;
      border-radius: 12px;
      font-size: 32px
    }

    .mr-viol-type-card .mr-viol-body {
      gap: 8px
    }

    .mr-viol-type-card .mr-viol-title {
      font-size: 14px;
      margin-bottom: 4px
    }

    .mr-viol-type-card .mr-viol-desc {
      font-size: 11px;
      color: var(--mr-text-3);
      line-height: 1.45;
      -webkit-line-clamp: 2;
      line-clamp: 2
    }

    .mr-viol-type-card .mr-viol-act {
      width: 28px;
      height: 28px
    }

    .mr-viol-type-card .mr-viol-more {
      font-size: 11px;
      gap: 6px
    }

    .mr-viol-type-card .mr-viol-more-ico {
      width: 22px;
      height: 22px;
      font-size: 9px
    }

    .mr-viol-type-card .mr-points {
      font-size: 11px
    }

    .mr-viol-type-card .mr-sev {
      font-size: 10px;
      padding: 3px 10px
    }

    .mr-viol-type-card .mr-viol-thumb-low i {
      color: #007aff
    }

    .mr-viol-type-card .mr-viol-thumb-mid i {
      color: #FFC300
    }

    .mr-viol-type-card .mr-viol-thumb-high i {
      color: #FF0000
    }

    .mr-viol-type-card .br-actions {
      gap: 6px
    }

    .mr-viol-type-card .mr-viol-act {
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--mr-text-2);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease
    }

    .mr-viol-type-card .mr-viol-act:hover {
      background: var(--mr-bg);
      color: var(--mr-text)
    }

    .mr-viol-type-card .mr-viol-foot {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 8px;
      margin-top: auto;
      padding-top: 10px;
      border-top: 1px solid var(--mr-border)
    }

    .mr-viol-type-card .mr-viol-foot .mr-sev {
      justify-self: start
    }

    .mr-viol-type-card .mr-viol-more {
      justify-self: center
    }

    .mr-viol-type-card .mr-viol-foot .mr-points {
      justify-self: end;
      color: var(--mr-text);
      font-weight: 600
    }

    .mr-viol-more {
      border: 0;
      background: transparent;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font);
      font-size: 12px;
      font-weight: 600;
      color: var(--mr-text-2);
      cursor: pointer;
      padding: 0;
      transition: color 0.2s ease
    }

    .mr-viol-more:hover {
      color: var(--mr-text)
    }

    .mr-viol-more-ico {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 1px solid var(--mr-border);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      color: var(--mr-text-2);
      transition: transform 0.2s ease, border-color 0.2s ease
    }

    .mr-viol-more.is-open .mr-viol-more-ico {
      transform: rotate(180deg);
      border-color: var(--mr-text-3)
    }

    /* مؤشرات الامتثال — خلفية Apple mesh على كامل الصفحة */
    #appWrap:has(#tab-compliance.active) {
      position: relative;
    }

    #appWrap:has(#tab-compliance.active)::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background: var(--bg);
    }

    #appWrap:has(#tab-compliance.active) .app-shell,
    #appWrap:has(#tab-compliance.active) .app-body,
    #appWrap:has(#tab-compliance.active) .main,
    #appWrap:has(#tab-compliance.active) .content {
      background: var(--bg);
    }

    #appWrap:has(#tab-compliance.active) .sidebar {
      background: color-mix(in srgb, var(--sidebar-bg) 78%, transparent);
      backdrop-filter: blur(16px) saturate(140%);
      -webkit-backdrop-filter: blur(16px) saturate(140%);
    }

    #appWrap:has(#tab-compliance.active) .topbar.unified-banner {
      background: rgba(255, 255, 255, 0.72);
      backdrop-filter: blur(16px) saturate(140%);
      -webkit-backdrop-filter: blur(16px) saturate(140%);
    }

    [data-theme="dark"] #appWrap:has(#tab-compliance.active)::before {
      background:
        radial-gradient(ellipse 72% 58% at 8% 10%, rgba(47, 47, 228, 0.38), transparent 74%),
        radial-gradient(ellipse 64% 50% at 94% 6%, rgba(72, 161, 17, 0.28), transparent 72%),
        radial-gradient(ellipse 70% 54% at 90% 94%, rgba(255, 195, 0, 0.22), transparent 70%),
        radial-gradient(ellipse 60% 48% at 6% 90%, rgba(100, 140, 255, 0.26), transparent 68%),
        radial-gradient(ellipse 80% 60% at 48% 42%, rgba(255, 255, 255, 0.04), transparent 80%),
        linear-gradient(165deg, #050810 0%, #080c14 42%, #0a1222 100%);
    }

    [data-theme="dark"] #appWrap:has(#tab-compliance.active) .sidebar {
      background: color-mix(in srgb, var(--sidebar-bg) 84%, transparent);
    }

    [data-theme="dark"] #appWrap:has(#tab-compliance.active) .topbar.unified-banner {
      background: rgba(19, 24, 38, 0.78);
    }

    #tab-compliance.tab-content {
      padding: 0;
      background: var(--bg);
      position: relative;
    }

    #tab-compliance #cmpBoard {
      position: relative;
      z-index: 1;
    }

    /* ── تبويب الامتثال: حواف وظل موحّدة مع باقي الصفحات ── */
    #tab-compliance .cmp-neo-toolbar .wf-status-trigger,
    #tab-compliance .cmp-neo-toolbar .rp-tool-btn,
    #tab-compliance .cmp-neo-toolbar .rp-date-btn,
    #tab-compliance .cmp-neo-back:not(.cmp-neo-back--combo),
    #tab-compliance .active-filters-bar,
    #tab-compliance .cmp-neo-empty:not(.cmp-neo-empty--loading),
    #cmp-filter-menu.wf-status-menu,
    #cmpDatePickerPopup.date-picker-popup {
      background: var(--mr-surface);
      border: 1px solid var(--mr-border);
      box-shadow: var(--mr-shadow-soft);
    }

    #tab-compliance .cmp-neo-toolbar .wf-status-trigger,
    #tab-compliance .cmp-neo-toolbar .rp-tool-btn,
    #tab-compliance .cmp-neo-toolbar .rp-date-btn,
    #tab-compliance .cmp-neo-back:not(.cmp-neo-back--combo) {
      border-radius: 999px;
    }

    #tab-compliance .active-filters-bar,
    #tab-compliance .cmp-neo-empty:not(.cmp-neo-empty--loading),
    #cmp-filter-menu.wf-status-menu,
    #cmpDatePickerPopup.date-picker-popup {
      border-radius: 16px;
    }

    #tab-compliance .cmp-neo-toolbar .wf-status-trigger:hover,
    #tab-compliance .cmp-neo-toolbar .rp-tool-btn:hover,
    #tab-compliance .cmp-neo-toolbar .rp-date-btn:hover,
    #tab-compliance .cmp-neo-back:not(.cmp-neo-back--combo):hover {
      background: var(--mr-primary-softer);
      border-color: var(--mr-primary-soft);
      box-shadow: var(--mr-shadow-soft);
    }

    :root:not([data-theme="dark"]) #tab-compliance .cmp-neo-toolbar .rp-tool-btn:not(.active):hover,
    :root:not([data-theme="dark"]) #tab-compliance .cmp-neo-toolbar .rp-date-btn:not(.active):hover {
      background: var(--mr-primary) !important;
      border-color: var(--mr-primary) !important;
      color: #fff !important;
      box-shadow: none !important
    }

    :root:not([data-theme="dark"]) #tab-compliance .cmp-neo-toolbar .rp-tool-btn:not(.active):hover i,
    :root:not([data-theme="dark"]) #tab-compliance .cmp-neo-toolbar .rp-date-btn:not(.active):hover i {
      color: #fff !important
    }

    :root:not([data-theme="dark"]) #tab-compliance .cmp-neo-toolbar .wf-status-trigger:hover {
      background: var(--mr-primary) !important;
      border-color: var(--mr-primary) !important;
      color: #fff !important;
      box-shadow: none !important
    }

    :root:not([data-theme="dark"]) #tab-compliance .cmp-neo-toolbar .wf-status-trigger:hover .wf-status-trigger__label {
      color: #fff !important
    }

    :root:not([data-theme="dark"]) #tab-compliance .cmp-neo-toolbar .wf-status-trigger:hover .wf-status-trigger__ico {
      background: rgba(255, 255, 255, 0.16) !important;
      color: #fff !important
    }

    :root:not([data-theme="dark"]) #tab-compliance .cmp-neo-toolbar .wf-status-trigger:hover .wf-status-trigger__chev {
      color: #fff !important
    }

    #tab-compliance .cmp-neo-toolbar .wf-status-trigger:focus-visible,
    #tab-compliance .cmp-neo-toolbar .wf-status-trigger[aria-expanded="true"],
    #tab-compliance .cmp-neo-back:not(.cmp-neo-back--combo):focus-visible {
      border-color: var(--mr-primary);
      box-shadow: 0 0 0 4px var(--mr-primary-soft);
    }

    #tab-compliance .cmp-neo-toolbar .rp-tool-btn.active,
    #tab-compliance .cmp-neo-toolbar .rp-date-btn.active {
      background: var(--mr-primary);
      border-color: var(--mr-primary);
      color: var(--mr-primary-text, #fff);
      box-shadow: var(--mr-shadow-soft);
    }

    #tab-compliance .cmp-neo-toolbar .wf-status-trigger__ico,
    #tab-compliance .cmp-neo-back:not(.cmp-neo-back--combo) .cmp-neo-back__ico {
      background: var(--mr-primary-soft);
      border: none;
    }


    #tab-compliance .af-tag {
      background: var(--mr-bg-2);
      border: 1px solid var(--mr-border);
    }

    #tab-compliance .panel {
      display: none !important;
    }

    .cmp-neo-board {
      background: transparent;
      border: 0;
      border-radius: 0;
      padding: 0;
      box-shadow: none;
      color: var(--mr-text);
      direction: rtl;
    }

    .cmp-neo-board-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }

    .cmp-neo-toolbar {
      margin-bottom: 10px;
      position: relative;
      z-index: 30;
    }

    .cmp-neo-search-combo {
      display: flex;
      align-items: stretch;
      flex: 1 1 320px;
      min-width: min(100%, 200px);
      min-height: 46px;
      border: 1px solid var(--mr-border);
      border-radius: 999px;
      background: var(--mr-surface);
      overflow: hidden;
      box-sizing: border-box;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
      box-shadow: var(--mr-shadow-soft);
    }

    #tab-compliance .cmp-neo-search-combo {
      align-items: center;
      min-height: 0;
      border: none;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      overflow: visible;
      gap: 8px;
    }

    #tab-compliance .cmp-neo-search-combo:focus-within {
      border-color: transparent;
      background: transparent;
      box-shadow: none;
    }

    .cmp-neo-search-combo:focus-within {
      border-color: var(--mr-primary);
      background: var(--mr-surface);
      box-shadow: 0 0 0 4px var(--mr-primary-soft);
    }

    #tab-compliance .cmp-neo-search-combo .cmp-neo-search-combo__field {
      flex: 1 1 auto;
      min-width: 0;
      height: auto;
      min-height: 44px;
      border: 1px solid var(--mr-border);
      border-radius: 999px;
      background: var(--mr-bg);
      box-shadow: none !important;
      padding: 0 16px 0 8px;
      gap: 14px;
    }

    #tab-compliance .cmp-neo-search-combo .cmp-neo-search-combo__field:focus-within {
      border-color: var(--mr-primary);
      box-shadow: 0 0 0 4px var(--mr-primary-soft) !important;
    }

    .cmp-neo-back--combo {
      align-self: center;
      height: auto;
      margin: 0;
      padding: 0 10px 0 8px;
      border: none;
      border-radius: 0;
      box-shadow: none;
      background: transparent;
      flex-shrink: 0;
      transition: color 0.15s ease, background 0.15s ease;
      gap: 6px;
    }

    .cmp-neo-back--combo:hover {
      background: transparent;
      border-color: transparent;
      box-shadow: none;
      transform: none;
      color: var(--mr-text);
    }

    .cmp-neo-back--combo:active {
      transform: none;
    }

    .cmp-neo-back--combo:focus-visible {
      outline: none;
      box-shadow: none;
    }

    .cmp-neo-back--combo .cmp-neo-back__ico {
      width: 26px;
      height: 26px;
      min-width: 26px;
      font-size: 11px;
      border: 1px solid color-mix(in srgb, var(--mr-border) 55%, transparent);
      border-radius: 50%;
      background: color-mix(in srgb, var(--mr-surface) 94%, var(--mr-bg));
      color: var(--mr-text-2);
      box-shadow: 0 1px 3px rgba(15, 18, 36, 0.05);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    }

    .cmp-neo-back--combo:hover .cmp-neo-back__ico {
      background: var(--mr-surface);
      border-color: var(--mr-border-2);
      color: var(--mr-text);
      box-shadow: 0 2px 8px rgba(15, 18, 36, 0.06);
      transform: none;
    }

    .cmp-neo-back--combo .cmp-neo-back__text {
      font-size: 13px;
      font-weight: 600;
      color: var(--mr-text-2);
    }

    #tab-compliance .cmp-neo-search-combo .figma-search-input {
      font-size: 13px;
      padding: 0;
    }

    #tab-compliance .cmp-neo-search-combo .figma-search-input::placeholder {
      color: var(--mr-text-muted);
      font-size: 13px;
    }

    #tab-compliance .cmp-neo-search-combo .figma-search-btn {
      width: 32px;
      height: 32px;
      min-width: 32px;
      margin: 0;
      flex-shrink: 0;
    }

    #tab-compliance .cmp-neo-toolbar .wf-status-filter {
      flex: 0 0 auto;
      display: inline-flex;
      width: fit-content;
      min-width: 0;
      max-width: none;
    }

    #tab-compliance .cmp-neo-toolbar #cmp-filter-trigger.wf-status-trigger {
      width: auto;
      min-width: 0;
      max-width: none;
      gap: 8px;
      padding: 0 12px 0 10px;
    }

    #tab-compliance .cmp-neo-toolbar #cmp-filter-trigger .wf-status-trigger__ico {
      width: 22px;
      height: 22px;
      font-size: 9px;
    }

    #tab-compliance .cmp-neo-toolbar #cmp-filter-trigger .wf-status-trigger__label {
      font-size: 12px;
      flex: 0 1 auto;
      min-width: 0;
      max-width: none;
      white-space: nowrap;
    }

    #tab-compliance .cmp-neo-toolbar #cmp-filter-trigger .wf-status-trigger__chev {
      font-size: 9px;
      margin-inline-start: -2px;
    }

    #cmp-filter-menu.wf-status-menu {
      border-radius: 12px;
      max-height: min(180px, calc(100vh - 24px));
    }

    #cmp-filter-menu .wf-status-menu__scroll {
      padding: 4px;
      gap: 2px;
      max-height: min(180px, calc(100vh - 24px));
    }

    #cmp-filter-menu .wf-status-opt {
      padding: 6px 8px;
      font-size: 12px;
      font-weight: 500;
      border-radius: 8px;
      gap: 6px;
      line-height: 1.3;
    }

    #cmp-filter-menu .wf-status-opt.is-active::before {
      width: 5px;
      height: 5px;
    }

    #tab-compliance .cmp-neo-toolbar .rp-tool-btn,
    #tab-compliance .cmp-neo-toolbar .rp-date-wrap {
      flex: 0 0 auto;
    }

    .wf-status-menu__grp {
      padding: 6px 12px 2px;
      font-size: 10px;
      font-weight: 700;
      color: var(--mr-text-3);
      line-height: 1.3;
    }

    .wf-status-menu__sep {
      height: 1px;
      margin: 4px 10px;
      background: var(--mr-border);
      flex-shrink: 0;
    }

    #tab-compliance .cmp-neo-toolbar .rp-date-wrap {
      flex: 0 1 auto;
      max-width: 100%;
      min-width: 0;
      position: relative;
    }

    #tab-compliance .cmp-neo-toolbar .rp-date-btn {
      max-width: 100%;
      min-width: 0;
      min-height: 46px;
      flex-shrink: 0;
    }

    #tab-compliance .cmp-neo-toolbar .rp-date-btn #cmp-date-label {
      overflow: visible;
      text-overflow: clip;
      white-space: nowrap;
      flex: 1 1 auto;
      min-width: 0;
    }

    html.mr-desktop-ui #tab-compliance .cmp-neo-toolbar .rp-date-wrap {
      flex: 0 0 auto !important;
      width: auto !important;
      max-width: none !important
    }

    html.mr-desktop-ui #tab-compliance .cmp-neo-toolbar .rp-date-btn {
      width: 46px !important;
      min-width: 46px !important;
      max-width: 46px !important;
      padding: 0 !important;
      justify-content: center !important;
      gap: 0 !important
    }

    html.mr-desktop-ui #tab-compliance .cmp-neo-toolbar .rp-date-btn #cmp-date-label {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important
    }

    html.mr-desktop-ui #tab-compliance .cmp-neo-toolbar .rp-date-btn i {
      margin: 0 !important
    }

    #tab-compliance .cmp-neo-toolbar .rp-tool-btn {
      min-height: 46px;
      padding-inline: 16px;
    }

    .cmp-neo-search-meta {
      margin: 0 0 14px;
      font-size: 13px;
      font-weight: 500;
      color: var(--mr-text-3);
      font-family: var(--font);
    }

    .cmp-neo-search-meta strong {
      color: var(--mr-text);
      font-weight: 700;
    }

    .cmp-neo-head-main {
      flex: 1;
      min-width: 0;
    }

    .cmp-neo-title-wrap h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 700;
      color: var(--mr-text);
      letter-spacing: -0.01em;
      line-height: 1.3;
    }

    .cmp-neo-head-context {
      margin: 4px 0 0;
      font-size: 13px;
      font-weight: 600;
      color: var(--mr-text-2);
      line-height: 1.45;
      max-width: min(100%, 640px);
      overflow-wrap: anywhere;
    }

    .cmp-neo-title-wrap .cmp-neo-head-desc {
      margin: 8px 0 0;
      color: var(--mr-text-3);
      font-size: 13px;
      line-height: 1.5;
      max-width: 520px;
    }

    .cmp-neo-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      flex-shrink: 0;
    }

    .cmp-neo-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 42px;
      padding: 10px 16px;
      border-radius: 12px;
      border: 1px solid var(--mr-border);
      background: var(--mr-surface);
      color: var(--mr-text);
      font-family: var(--font);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
      box-shadow: var(--mr-shadow-card);
    }

    .cmp-neo-btn:hover {
      border-color: var(--mr-border-2);
      background: var(--mr-primary-softer);
      color: var(--mr-primary);
    }

    .cmp-neo-btn i {
      font-size: 14px;
      opacity: 0.85;
    }

    .cmp-neo-btn.active {
      border-color: var(--mr-primary-soft);
      background: var(--mr-primary-softer);
      color: var(--mr-primary);
    }

    #tab-compliance .cmp-neo-actions .rp-date-wrap {
      position: relative;
    }

    .cmp-neo-back {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: auto;
      max-width: 100%;
      margin: 0;
      padding: 5px 12px 5px 8px;
      border: 1px solid var(--mr-border);
      border-radius: 999px;
      background: var(--mr-surface);
      font-family: var(--font);
      font-size: 12px;
      font-weight: 600;
      line-height: 1.35;
      color: var(--mr-text-2);
      cursor: pointer;
      box-shadow: var(--mr-shadow-soft);
      transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
    }

    .cmp-neo-back:hover {
      border-color: var(--mr-primary-soft);
      background: var(--mr-primary-softer);
      color: var(--mr-primary);
      box-shadow: var(--mr-shadow-soft);
    }

    .cmp-neo-back:active {
      transform: translateY(1px);
    }

    .cmp-neo-back:focus-visible {
      outline: none;
      border-color: var(--mr-primary);
      box-shadow: 0 0 0 4px var(--mr-primary-soft);
    }

    .cmp-neo-back__ico {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: var(--mr-primary-softer);
      color: var(--mr-primary);
      display: inline-grid;
      place-items: center;
      flex-shrink: 0;
      font-size: 10px;
      line-height: 1;
      transition: background 0.18s ease, color 0.18s ease;
    }

    .cmp-neo-back:hover .cmp-neo-back__ico {
      background: color-mix(in srgb, var(--mr-primary) 14%, transparent);
      color: var(--mr-primary);
    }

    .cmp-neo-back__text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .cmp-neo-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(272px, 320px));
      gap: 16px;
      align-items: stretch;
      grid-auto-rows: 1fr;
      justify-content: start;
    }

    .cmp-neo-grid > .cmp-neo-card {
      height: 100%;
      align-self: stretch;
    }

    #tab-compliance .active-filters-bar {
      display: none;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      width: 100%;
      margin-top: 16px;
      padding: 12px 14px;
      border-radius: 16px;
      box-sizing: border-box;
    }

    #tab-compliance .active-filters-bar.show {
      display: flex;
    }

    #tab-compliance .af-tag {
      color: var(--mr-text);
    }

    #tab-compliance .af-tag button {
      color: var(--mr-text);
    }

    #tab-compliance .af-clear-all {
      color: var(--mr-danger);
      font-weight: 600;
    }

    [data-theme="dark"] #tab-compliance .active-filters-bar {
      border-color: var(--mr-border);
    }

    .cmp-neo-card {
      background: var(--mr-surface);
      border: 1px solid var(--mr-border);
      border-radius: 22px;
      padding: 18px 20px 16px;
      position: relative;
      width: 100%;
      max-width: 320px;
      min-height: 168px;
      height: 100%;
      box-sizing: border-box;
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.25s ease;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      box-shadow: var(--mr-shadow-card);
      overflow: hidden;
    }

    .cmp-neo-card > *:not(.cmp-neo-rank):not(.cmp-neo-chip) {
      position: relative;
      z-index: 1;
    }

    .cmp-neo-card:hover {
      transform: translateY(-2px);
      border-color: color-mix(in srgb, var(--mr-primary) 18%, var(--mr-border));
      box-shadow: var(--mr-shadow-card);
    }

    .cmp-neo-card[data-static="true"] {
      cursor: default;
    }

    .cmp-neo-card[data-static="true"]:hover {
      transform: none;
    }

    .cmp-neo-chip {
      position: absolute;
      top: 14px;
      inset-inline-end: 14px;
      inset-inline-start: auto;
      border-radius: 999px;
      padding: 3px 8px;
      font-size: 10px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-family: var(--mono);
      line-height: 1.2;
      z-index: 3;
      max-width: calc(100% - 28px);
      white-space: nowrap;
    }

    .cmp-neo-chip i {
      font-size: 9px;
      line-height: 1;
    }

    .cmp-neo-chip-up {
      color: #48A111;
      background: #f4f9ef;
      border: 1px solid #c8e6a8;
    }

    .cmp-neo-chip-down {
      color: #FF0000;
      background: #fef2f2;
      border: 1px solid #fecaca;
    }

    .cmp-neo-chip-flat {
      color: var(--mr-text-2);
      background: var(--mr-primary-softer);
      border: 1px solid var(--mr-border);
    }

    .cmp-neo-head {
      text-align: start;
      width: 100%;
      box-sizing: border-box;
      overflow: hidden;
      padding-inline-end: 94px;
      padding-inline-start: 2px;
      margin-bottom: 0;
      min-height: 52px;
      flex-shrink: 0;
    }

    .cmp-neo-head h4 {
      margin: 0;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 1.35;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 6px;
      min-width: 0;
      max-width: 100%;
    }

    .cmp-neo-head h4 span.cmp-neo-head-text {
      display: block;
      flex: 1 1 auto;
      min-width: 0;
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #000;
      opacity: 1;
    }

    .cmp-neo-head span {
      margin-top: 3px;
      display: block;
      color: var(--mr-text-3);
      font-size: 12px;
      font-weight: 500;
      line-height: 1.3;
    }

    .cmp-neo-head__no-sup {
      color: var(--red) !important;
      font-weight: 600;
    }

    .cmp-neo-extreme__sub--no-sup {
      color: var(--red) !important;
      font-weight: 600;
    }

    .cmp-neo-body {
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      justify-content: space-between;
      gap: 12px;
      width: 100%;
      flex: 1;
      margin-top: auto;
      padding-top: 12px;
      border-top: 1px solid rgba(255, 255, 255, 0.38);
      flex-shrink: 0;
    }

    .cmp-neo-metrics {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-end;
      gap: 8px;
      flex: 1;
      min-width: 0;
      min-height: 80px;
      text-align: right;
      padding-inline-end: 12px;
      border-inline-end: 1px solid rgba(255, 255, 255, 0.32);
    }

    .cmp-neo-stat {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      justify-content: flex-start;
      gap: 6px;
      width: 100%;
      max-width: 100%;
      min-height: 20px;
      direction: rtl;
    }

    .cmp-neo-stat__lbl {
      font-size: 12px;
      font-weight: 500;
      color: var(--mr-text-3);
      line-height: 1.25;
      white-space: nowrap;
    }

    .cmp-neo-stat__val {
      color: var(--mr-text);
      font-size: 14px;
      font-family: var(--mono);
      font-weight: 600;
      letter-spacing: 0;
      line-height: 1.25;
      direction: ltr;
      unicode-bidi: plaintext;
      font-variant-numeric: tabular-nums lining-nums;
      flex-shrink: 0;
    }

    .cmp-neo-rate-val {
      font-size: 14px;
      font-weight: 600;
      font-family: var(--mono);
      font-variant-numeric: tabular-nums lining-nums;
      unicode-bidi: plaintext;
      transition: color 0.35s ease;
    }

    .cmp-neo-ring {
      --size: 80px;
      width: var(--size);
      height: var(--size);
      position: relative;
      flex-shrink: 0;
      justify-self: end;
      box-shadow: none;
    }

    .cmp-neo-ring svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .cmp-neo-ring__bg {
      stroke: var(--mr-border);
    }

    .cmp-neo-ring__fg {
      fill: none;
      stroke-linecap: round;
      transition: stroke 0.2s ease;
    }

    .cmp-neo-ring-core {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      max-width: 58px;
      margin: auto;
      font-size: 17px;
      font-weight: 600;
      color: var(--mr-text);
      z-index: 2;
      font-family: var(--mono);
      font-variant-numeric: tabular-nums lining-nums;
      line-height: 1;
      letter-spacing: 0;
      pointer-events: none;
      direction: ltr;
      unicode-bidi: plaintext;
      white-space: nowrap;
      transition: color 0.25s ease;
    }

    .cmp-neo-ring-core--sm {
      font-size: 14px;
      letter-spacing: -0.02em;
    }

    .cmp-neo-ring-core--xs {
      font-size: 11px;
      letter-spacing: -0.03em;
    }

    .cmp-neo-ring--alert svg {
      filter: none
    }

    .cmp-donut-ripple {
      position: absolute;
      inset: -8px;
      border: 2px solid #FF0000;
      border-radius: 50%;
      opacity: 0;
      pointer-events: none;
      z-index: 0
    }

    .cmp-neo-ring--alert .cmp-donut-ripple,
    .mk-donut--pulse-red .cmp-donut-ripple {
      animation: donut-ripple-anim 2s infinite
    }

    #tab-compliance .cmp-neo-ring,
    #tab-compliance .mk-donut,
    #tab-compliance .mk-cmp-donut-wrap {
      overflow: visible
    }

    #tab-compliance .cmp-neo-card,
    #tab-compliance .mk-cmp-emp-card {
      overflow: visible
    }

    .cmp-neo-ring-core--neg,
    .cmp-neo-ring--negative .cmp-neo-ring-core {
      color: #FF0000;
    }

    .cmp-neo-card--low {
      border-color: color-mix(in srgb, #FF0000 22%, var(--mr-border));
      box-shadow: var(--mr-shadow-card), 0 4px 16px rgba(255, 0, 0, 0.06);
    }

    .cmp-neo-extremes {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 16px;
    }

    .cmp-neo-extreme {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid var(--mr-border);
      background: var(--mr-surface);
      box-shadow: var(--mr-shadow-card);
      cursor: pointer;
      text-align: right;
      font-family: var(--font);
      transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.2s ease;
    }

    .cmp-neo-extreme:hover {
      transform: translateY(-1px);
      border-color: color-mix(in srgb, var(--mr-primary) 18%, var(--mr-border));
      box-shadow: var(--mr-shadow-card);
    }

    .cmp-neo-extreme:focus-visible {
      outline: 2px solid var(--mr-primary);
      outline-offset: 2px;
    }

    .cmp-neo-extreme__icon {
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      font-size: 14px;
    }

    .cmp-neo-extreme--top {
      border-color: color-mix(in srgb, #48A111 28%, var(--mr-border));
      background: color-mix(in srgb, #48A111 8%, var(--mr-surface));
    }

    .cmp-neo-extreme--top .cmp-neo-extreme__icon {
      color: #48A111;
      background: color-mix(in srgb, #48A111 14%, transparent);
    }

    .cmp-neo-extreme--bottom {
      border-color: color-mix(in srgb, #FF0000 24%, var(--mr-border));
      background: color-mix(in srgb, #FF0000 6%, var(--mr-surface));
    }

    .cmp-neo-extreme--bottom .cmp-neo-extreme__icon {
      color: #FF0000;
      background: color-mix(in srgb, #FF0000 12%, transparent);
    }

    .cmp-neo-extreme__body {
      flex: 1;
      min-width: 0;
    }

    .cmp-neo-extreme__lbl {
      display: block;
      font-size: 11px;
      font-weight: 700;
      color: var(--mr-text-3);
      line-height: 1.3;
      margin-bottom: 2px;
    }

    .cmp-neo-extreme__name {
      display: block;
      font-size: 14px;
      font-weight: 700;
      color: var(--mr-text);
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .cmp-neo-extreme__sub {
      display: block;
      font-size: 11px;
      font-weight: 500;
      color: var(--mr-text-3);
      line-height: 1.35;
      margin-top: 1px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .cmp-neo-extreme__score {
      flex-shrink: 0;
      font-size: 15px;
      font-weight: 800;
      font-family: var(--mono);
      line-height: 1;
      letter-spacing: -0.02em;
    }

    .cmp-neo-rank {
      position: absolute;
      top: 14px;
      inset-inline-end: 14px;
      inset-inline-start: auto;
      z-index: 4;
      width: 28px;
      height: 28px;
      border-radius: 999px;
      padding: 0;
      display: inline-grid;
      place-items: center;
      line-height: 1;
    }

    .cmp-neo-rank i {
      font-size: 11px;
      line-height: 1;
    }

    .cmp-neo-rank--top {
      color: #2d6a0a;
      background: #eef8e6;
      border: 1px solid #c8e6a8;
    }

    .cmp-neo-rank--bottom {
      color: #b80000;
      background: #fff0f0;
      border: 1px solid #ffc9c9;
    }

    .cmp-neo-card--top,
    #tab-compliance .mk-cmp-emp-card.cmp-neo-card--top {
      border-color: color-mix(in srgb, #48A111 26%, color-mix(in srgb, #fff 38%, var(--mr-border)));
      box-shadow:
        inset 0 1px 0 color-mix(in srgb, #48A111 18%, transparent),
        0 6px 28px rgba(72, 161, 17, 0.12);
    }

    .cmp-neo-card--bottom,
    #tab-compliance .mk-cmp-emp-card.cmp-neo-card--bottom {
      border-color: color-mix(in srgb, #FF0000 24%, color-mix(in srgb, #fff 38%, var(--mr-border)));
      box-shadow:
        inset 0 1px 0 color-mix(in srgb, #FF0000 14%, transparent),
        0 6px 28px rgba(255, 0, 0, 0.1);
    }

    [data-theme="dark"] .cmp-neo-extreme {
      background: var(--mr-surface);
      border-color: var(--mr-border);
      box-shadow: var(--mr-shadow-card);
    }

    [data-theme="dark"] .cmp-neo-body {
      border-top-color: rgba(255, 255, 255, 0.1);
    }

    [data-theme="dark"] .cmp-neo-metrics {
      border-inline-end-color: rgba(255, 255, 255, 0.1);
    }

    [data-theme="dark"] .cmp-neo-extreme--top {
      background: color-mix(in srgb, #48A111 12%, var(--mr-surface));
    }

    [data-theme="dark"] .cmp-neo-extreme--bottom {
      background: color-mix(in srgb, #FF0000 10%, var(--mr-surface));
    }

    [data-theme="dark"] .cmp-neo-rank--top {
      color: #9ae66b;
      background: rgba(72, 161, 17, 0.18);
      border-color: rgba(72, 161, 17, 0.35);
    }

    [data-theme="dark"] .cmp-neo-rank--bottom {
      color: #ff8a8a;
      background: rgba(255, 0, 0, 0.14);
      border-color: rgba(255, 0, 0, 0.3);
    }

    .cmp-neo-empty {
      grid-column: 1 / -1;
      border-radius: 22px;
      min-height: 180px;
      display: grid;
      place-items: center;
      text-align: center;
      color: var(--mr-text-3);
      gap: 8px;
    }

    .cmp-neo-empty.cmp-neo-empty--loading {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      min-height: 0;
      grid-column: unset;
      width: 100%;
    }

    .cmp-neo-pending-wrap {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      min-height: 0;
      padding: 48px 16px 24px;
    }

    html.mr-desktop-ui #tab-compliance .cmp-neo-pending-wrap {
      padding-top: 40px;
    }

    .cmp-legacy-dashboard {
      display: none !important;
    }

    [data-theme="dark"] .cmp-neo-title-wrap h3 {
      color: #f3f7ff;
    }

    [data-theme="dark"] .cmp-neo-head-context {
      color: #b8c4e6;
    }

    [data-theme="dark"] .cmp-neo-title-wrap .cmp-neo-head-desc {
      color: #9faccc;
    }

    [data-theme="dark"] .cmp-neo-btn {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.1);
      color: #e8eeff;
      box-shadow: none;
    }

    [data-theme="dark"] .cmp-neo-btn:hover,
    [data-theme="dark"] .cmp-neo-btn.active {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.18);
      color: #fff;
    }

    [data-theme="dark"] .cmp-neo-back {
      background: var(--mr-surface);
      border-color: var(--mr-border);
      color: var(--mr-text-2);
      box-shadow: var(--mr-shadow-soft);
    }

    [data-theme="dark"] .cmp-neo-back:hover {
      border-color: var(--mr-border-2);
      background: var(--mr-primary-softer);
      color: var(--mr-text);
    }

    [data-theme="dark"] .cmp-neo-back__ico {
      background: color-mix(in srgb, var(--mr-primary) 18%, transparent);
      color: color-mix(in srgb, var(--mr-primary) 75%, #fff);
    }

    [data-theme="dark"] .cmp-neo-card,
    [data-theme="dark"] #appWrap .cmp-neo-card {
      background: var(--mr-surface);
      border-color: var(--mr-border);
      box-shadow: var(--mr-shadow-card);
    }

    [data-theme="dark"] .cmp-neo-card:hover,
    [data-theme="dark"] #appWrap .cmp-neo-card:hover {
      border-color: var(--mr-border-2);
    }

    [data-theme="dark"] .cmp-neo-ring {
      box-shadow: none;
    }

    [data-theme="dark"] .cmp-neo-ring__bg {
      stroke: rgba(148, 163, 184, 0.28);
    }

    [data-theme="dark"] .cmp-neo-card--low {
      border-color: color-mix(in srgb, var(--mr-danger) 35%, rgba(255, 255, 255, 0.14));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 12px 40px rgba(255, 0, 0, 0.12);
    }

    [data-theme="dark"] .cmp-neo-ring--alert svg {
      filter: none
    }

    [data-theme="dark"] .cmp-neo-ring--alert:not(.cmp-neo-ring--negative) .cmp-neo-ring-core {
      color: #f4f7ff;
    }

    [data-theme="dark"] .cmp-neo-ring-core--neg,
    [data-theme="dark"] .cmp-neo-ring--negative .cmp-neo-ring-core {
      color: #FF0000;
    }

    [data-theme="dark"] .cmp-neo-head h4 span.cmp-neo-head-text {
      color: var(--mr-text);
      opacity: 1;
    }

    [data-theme="dark"] .cmp-neo-head span:not(.cmp-neo-head-text),
    [data-theme="dark"] .cmp-neo-metrics div {
      color: var(--mr-text-2);
    }

    [data-theme="dark"] .cmp-neo-stat__val {
      color: var(--mr-text);
    }

    [data-theme="dark"] .cmp-neo-ring-core {
      color: var(--mr-text);
      font-weight: 600;
    }

    [data-theme="dark"] .cmp-neo-ring-core--sm {
      font-size: 14px;
    }

    [data-theme="dark"] .cmp-neo-ring-core--xs {
      font-size: 11px;
    }

    [data-theme="dark"] .cmp-neo-chip-flat {
      color: #c7d2fe;
      background: rgba(148, 163, 184, 0.14);
      border-color: rgba(148, 163, 184, 0.24);
    }

    [data-theme="dark"] .cmp-neo-chip-down {
      color: #fca5a5;
      background: rgba(255, 0, 0, 0.14);
      border-color: rgba(255, 0, 0, 0.28);
    }

    [data-theme="dark"] .cmp-neo-stat__val,
    [data-theme="dark"] .cmp-neo-rate-val {
      font-size: 14px;
      font-weight: 600;
    }

    [data-theme="dark"] .mk-cmp-emp-card,
    [data-theme="dark"] #appWrap .mk-cmp-emp-card {
      background: var(--mr-surface);
      border-color: var(--mr-border);
      box-shadow: var(--mr-shadow-card);
    }

    [data-theme="dark"] .mk-cmp-emp-card:hover,
    [data-theme="dark"] #appWrap .mk-cmp-emp-card:hover {
      border-color: var(--mr-border-2);
      box-shadow: var(--mr-shadow-card);
    }

    [data-theme="dark"] .mk-cmp-emp-stat {
      background: color-mix(in srgb, var(--mr-bg-2) 92%, var(--mr-surface));
    }

    [data-theme="dark"] #tab-compliance .mk-cmp-emp-card__avatar {
      background: color-mix(in srgb, var(--mr-primary-softer) 65%, transparent);
      border-color: color-mix(in srgb, #fff 8%, var(--mr-border));
      color: var(--mr-text-2);
    }

    [data-theme="dark"] #tab-compliance .mk-cmp-emp-card__ft {
      color: var(--mr-text-2);
      background: transparent;
      border-top-color: color-mix(in srgb, var(--mr-border) 70%, transparent);
    }

    [data-theme="dark"] .mk-cmp-emp-card:hover .mk-cmp-emp-card__ft {
      color: var(--mr-primary);
    }

    @media (prefers-reduced-transparency: reduce) {
.mk-cmp-emp-card,
      .mk-cmp-emp-stat,
      .cmp-neo-card,
      .cmp-neo-extreme,
      .cmp-neo-search-combo,
      #tab-compliance .cmp-neo-toolbar .wf-status-trigger,
      #tab-compliance .cmp-neo-toolbar .rp-tool-btn,
      #tab-compliance .cmp-neo-toolbar .rp-date-btn,
      #tab-compliance .cmp-neo-back,
      #cmp-filter-menu.wf-status-menu,
      #cmpDatePickerPopup.date-picker-popup,
      #appWrap .mk-cmp-emp-card,
      #appWrap .cmp-neo-card,
      .modal-card.cmp-detail-card,
      .modal-card.cmp-detail-card .emp-new-card--fig,
      .modal-card.cmp-detail-card .cmp-detail-section--chart,
      .modal-card.cmp-detail-card .cmp-detail-section--violations,
      .modal-card.cmp-detail-card .score-viol-row {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--mr-surface);
      }

      #cmpDetailModal.modal.open {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(0, 0, 0, 0.5);
      }

      .mk-cmp-emp-card::before,
      .cmp-neo-card::before,
      #appWrap:has(#tab-compliance.active)::before {
        display: none;
      }

      #appWrap:has(#tab-compliance.active) .app-shell,
      #appWrap:has(#tab-compliance.active) .app-body,
      #appWrap:has(#tab-compliance.active) .main,
      #appWrap:has(#tab-compliance.active) .content {
        background: var(--mr-bg);
      }

      #appWrap:has(#tab-compliance.active) .sidebar,
      #appWrap:has(#tab-compliance.active) .topbar.unified-banner {
        background: var(--mr-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
}

    .viol-paper-sheet {
      max-width: min(520px, calc(100vw - 32px));
      width: 100%;
      background: var(--mr-surface);
      border: 1px solid var(--mr-border);
      box-shadow: 0 24px 60px rgba(15, 18, 36, 0.16)
    }

    [data-theme="dark"] .viol-paper-sheet {
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5)
    }

    .viol-paper-sheet-head {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 20px 14px;
      border-bottom: 1px solid var(--mr-border);
      background: var(--mr-surface)
    }

    .viol-sheet-grabber-wrap,
    .cmp-sheet-grabber-wrap,
    #ticketModal .td-sheet-grabber-wrap {
      display: none;
      justify-content: center;
      width: 100%;
      padding: 4px 0 2px;
      cursor: grab;
      touch-action: none
    }

    .viol-sheet-grabber {
      display: block;
      width: 42px;
      height: 4px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--mr-text-3) 70%, transparent)
    }

    .cmp-sheet-grabber {
      display: block;
      width: 40px;
      height: 4px;
      min-height: 4px;
      border: none;
      border-radius: 999px;
      background: #9ca3af;
      box-shadow: none;
      outline: none;
      flex-shrink: 0;
      line-height: 0
    }

    .viol-paper-sheet-head h3 {
      margin: 0;
      font-size: 15px;
      font-weight: 700;
      color: var(--mr-text);
      text-align: center
    }

    .viol-paper-sheet-body {
      padding: 24px 24px 18px
    }

    .viol-paper-kicker {
      font-size: 11px;
      font-weight: 700;
      color: var(--mr-text-3);
      letter-spacing: 0.02em;
      margin-bottom: 8px
    }

    .viol-paper-title {
      margin: 0 0 14px;
      font-size: 20px;
      font-weight: 800;
      color: var(--mr-text);
      line-height: 1.45
    }

    .viol-paper-desc {
      margin: 0;
      font-size: 14px;
      line-height: 1.85;
      color: var(--mr-text-2)
    }

    .viol-paper-meta {
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px dashed var(--mr-border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap
    }

    .viol-paper-meta .viol-paper-points,
    .viol-paper-meta .mr-sev {
      display: inline-flex;
      align-items: center;
      line-height: 1.2;
      margin: 0
    }

    .viol-paper-points {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 700;
      color: var(--mr-text)
    }

    .viol-paper-points i {
      color: var(--mr-text-2)
    }

    .viol-paper-note {
      margin-top: 18px;
      padding: 14px 16px;
      border-radius: 14px;
      background: var(--mr-bg);
      border: 1px solid var(--mr-border);
      font-size: 13px;
      line-height: 1.8;
      color: var(--mr-text-2)
    }

    .viol-paper-note strong {
      display: block;
      margin-bottom: 6px;
      color: var(--mr-text)
    }

    .viol-paper-sheet-foot {
      padding: 14px 20px 18px;
      border-top: 1px solid var(--mr-border);
      display: flex;
      justify-content: flex-end;
      background: var(--mr-surface)
    }

    .rb-view {
      animation: rbFadeIn 0.28s ease
    }

    #tab-locations .rb-search-combo {
      flex: 1 1 320px;
      min-width: min(100%, 200px);
    }

    #tab-locations .rb-search-combo .cmp-neo-search-combo__field {
      flex: 1 1 auto;
      min-width: 0;
      height: auto;
      min-height: 44px;
      border: none;
      border-radius: 0;
      background: transparent;
      box-shadow: none !important;
      padding-inline: 18px 10px;
    }

    #tab-locations .rb-search-combo .cmp-neo-search-combo__field:focus-within {
      border-color: transparent;
      box-shadow: none !important;
    }

    #tab-locations .rb-search-combo .figma-search-btn:hover {
      background: var(--mr-primary-softer);
      filter: none;
    }

    /* عرض أوسع لبطاقات المناطق/الفروع — أسماء أطول بدون تكديس */
    /* تقييد العرض الأقصى لضمان تناسق البطاقات بين وضعي القائمة الجانبية */
    .rb-view .viol-grid {
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 16px;
      max-width: 720px;
      margin-inline-start: 0;
      margin-inline-end: auto
    }

    @media (min-width: 900px) {
.rb-view .viol-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        max-width: 720px;
        margin-inline-start: 0;
        margin-inline-end: auto
      }
}

    .rb-view--branches .viol-grid {
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      align-items: stretch;
      max-width: none;
      gap: 14px
    }

    .rb-branch-card {
      min-width: 0;
      height: 100%;
      padding: 16px 18px;
      gap: 0;
      border-radius: 16px;
      display: flex;
      flex-direction: column
    }

    .rb-branch-card:hover {
      transform: translateY(-1px)
    }

    .rb-branch-card__head {
      display: flex;
      align-items: flex-start;
      gap: 0;
      flex-shrink: 0
    }

    .rb-branch-card__identity {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      min-width: 0;
      flex: 1 1 auto
    }

    .rb-branch-card__icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: color-mix(in srgb, var(--mr-blue) 11%, var(--mr-surface));
      color: var(--mr-blue);
      border: 1px solid color-mix(in srgb, var(--mr-blue) 18%, var(--mr-border));
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex-shrink: 0
    }

    .rb-branch-card__copy {
      min-width: 0;
      flex: 1 1 auto
    }

    .rb-branch-card__name {
      margin: 0;
      font-size: 12px;
      font-weight: 700;
      color: var(--mr-text);
      line-height: 1.35;
      letter-spacing: -0.02em;
      overflow-wrap: anywhere
    }

    .rb-branch-card__loc {
      margin: 3px 0 0;
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 500;
      color: var(--mr-text-3);
      line-height: 1.35;
      min-width: 0
    }

    .rb-branch-card__loc i {
      flex-shrink: 0;
      font-size: 11px;
      color: var(--mr-text-3);
      opacity: 0.9
    }

    .rb-branch-card__loc span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0
    }

    .rb-branch-card__foot {
      margin-top: auto;
      padding-top: 12px;
      border-top: 1px solid var(--mr-border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      flex-shrink: 0
    }

    .rb-branch-card__actions {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-inline-start: auto
    }

    .rb-branch-card__act {
      height: 28px;
      padding: 0 10px;
      border-radius: 999px;
      border: 1px solid var(--mr-border);
      background: var(--mr-surface);
      color: var(--mr-text-2);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      font-family: var(--font);
      font-size: 11px;
      font-weight: 600;
      line-height: 1;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease
    }

    .rb-branch-card__act i {
      font-size: 10px
    }

    .rb-branch-card__act--edit:hover,
    .rb-branch-card__act--edit:focus-visible {
      color: var(--blue-text);
      border-color: color-mix(in srgb, var(--blue) 35%, var(--mr-border));
      background: color-mix(in srgb, var(--blue) 8%, var(--mr-surface))
    }

    .rb-branch-card__act--delete:hover,
    .rb-branch-card__act--delete:focus-visible {
      color: var(--mr-danger);
      border-color: color-mix(in srgb, var(--mr-danger) 35%, var(--mr-border));
      background: color-mix(in srgb, var(--mr-danger) 8%, var(--mr-surface))
    }

    .rb-branch-card__act:focus-visible {
      outline: 2px solid var(--mr-primary);
      outline-offset: 2px
    }

    .rb-branch-card__stat {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 600;
      color: var(--mr-text);
      background: var(--mr-primary-softer);
      border: 1px solid var(--mr-border);
      white-space: nowrap;
      flex-shrink: 0
    }

    .rb-branch-card__stat i {
      font-size: 10px;
      color: var(--mr-text-2)
    }

    .rb-branch-card__staff {
      margin-top: 12px;
      padding: 12px 0;
      border-top: 1px solid var(--mr-border);
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex: 1 1 auto;
      min-height: 72px;
      max-height: 220px;
      overflow: auto;
      width: 100%
    }

    .rb-branch-card .rb-emp-row {
      min-height: 0;
      padding: 9px 11px;
      background: var(--mr-bg-2);
      border: 1px solid var(--mr-border);
      border-radius: 10px
    }

    .rb-branch-card .rb-emp-name {
      font-size: 13px
    }

    .rb-branch-card .rb-emp-empty {
      flex: 1 1 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 48px;
      padding: 12px 10px;
      font-size: 12px;
      border-radius: 10px;
      background: var(--mr-bg-2)
    }

    [data-theme="dark"] .rb-branch-card__icon {
      background: rgba(47, 47, 228, 0.14);
      border-color: rgba(47, 47, 228, 0.28);
      color: #a5b4fc
    }

    [data-theme="dark"] .rb-branch-card__act {
      background: rgba(255, 255, 255, 0.04);
      border-color: var(--mr-border-2);
      color: var(--mr-text-2)
    }

    [data-theme="dark"] .rb-branch-card__staff,
    [data-theme="dark"] .rb-branch-card__foot {
      border-top-color: var(--mr-border-2)
    }

    [data-theme="dark"] .rb-branch-card .rb-emp-row {
      background: rgba(255, 255, 255, 0.04);
      border-color: var(--mr-border-2)
    }

    @keyframes rbFadeIn {
      from {
        opacity: 0;
        transform: translateY(8px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .rb-drill-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 18px;
      padding: 14px 16px;
      background: var(--mr-surface);
      border: 1px solid var(--mr-border);
      border-radius: var(--mr-radius-card);
      box-shadow: var(--mr-shadow-soft)
    }

    .rb-drill-summary {
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px
    }

    .rb-drill-chips {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px
    }

    .rb-drill-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      color: var(--mr-text);
      background: var(--mr-primary-softer);
      border: 1px solid var(--mr-border);
      white-space: nowrap
    }

    .rb-drill-chip i {
      font-size: 10px;
      color: var(--mr-text-2)
    }

    .rb-drill-sup {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      font-size: 12px;
      line-height: 1.4
    }

    .rb-drill-sup__label {
      color: var(--mr-text-3);
      font-weight: 600
    }

    .rb-drill-sup__val {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--mr-text);
      font-weight: 600;
      min-width: 0
    }

    .rb-drill-sup__val i {
      font-size: 11px;
      color: var(--mr-text-2);
      flex-shrink: 0
    }

    .rb-drill-sup__num {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 500;
      color: var(--mr-text-3)
    }

    .rb-drill-sup--empty .rb-drill-sup__val {
      color: var(--mr-danger)
    }

    .rb-drill-sup--empty .rb-drill-sup__val i {
      color: var(--mr-danger)
    }

    #rbPanelIntro.rb-panel-intro--drill .wf-panel-sub {
      display: none
    }

    .rb-view--regions .viol-grid,
    .viol-grid.rb-view--regions {
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      align-items: stretch;
      max-width: none;
      width: 100%;
      gap: 14px;
      justify-content: stretch
    }

    /* ═══════════════ بطاقات المناطق — تصميم احترافي رسمي ═══════════════ */
    .rb-region-card {
      --rc-accent: var(--mr-green);
      cursor: pointer;
      min-width: 0;
      height: 100%;
      border-radius: 14px;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      border: 1px solid var(--mr-border);
      background: var(--mr-surface);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease
    }

    /* شريط لوني علوي رفيع — هوية بصرية */
    .rb-region-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--rc-accent), color-mix(in srgb, var(--rc-accent) 60%, var(--mr-blue)));
      border-radius: 14px 14px 0 0
    }

    .rb-region-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.08), 0 2px 8px -4px rgba(0, 0, 0, 0.04);
      border-color: color-mix(in srgb, var(--rc-accent) 30%, var(--mr-border))
    }

    [data-theme="dark"] .rb-region-card:hover {
      box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.3), 0 2px 8px -4px rgba(0, 0, 0, 0.15)
    }

    .rb-region-card__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 18px 18px 0;
      flex-shrink: 0
    }

    .rb-region-card__identity {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0
    }

    .rb-region-card__icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: color-mix(in srgb, var(--rc-accent) 10%, var(--mr-surface));
      color: var(--rc-accent);
      border: 1px solid color-mix(in srgb, var(--rc-accent) 18%, var(--mr-border));
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      flex-shrink: 0;
      transition: background .2s ease
    }

    .rb-region-card:hover .rb-region-card__icon {
      background: color-mix(in srgb, var(--rc-accent) 16%, var(--mr-surface))
    }

    [data-theme="dark"] .rb-region-card__icon {
      background: rgba(72, 161, 17, 0.12);
      border-color: rgba(72, 161, 17, 0.25);
      color: #9ae85a
    }

    .rb-region-card__copy {
      min-width: 0;
      flex: 1 1 auto
    }

    .rb-region-card__name {
      margin: 0;
      font-size: 14px;
      font-weight: 700;
      color: var(--mr-text);
      line-height: 1.4;
      letter-spacing: -0.01em;
      overflow-wrap: anywhere
    }

    .rb-region-card__sup {
      margin-top: 4px;
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
      font-weight: 500;
      color: var(--mr-text-2);
      line-height: 1.4;
      min-width: 0
    }

    .rb-region-card__sup i {
      font-size: 11px;
      color: var(--mr-text-3);
      flex-shrink: 0
    }

    .rb-region-card__sup span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0
    }

    .rb-region-card__sup--empty {
      color: var(--mr-danger)
    }

    .rb-region-card__sup--empty i {
      color: var(--mr-danger)
    }

    /* مؤشر الدخول — سهم أنيق */
    .rb-region-card__chevron {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: var(--mr-text-3);
      background: var(--mr-bg-2);
      border: 1px solid var(--mr-border);
      transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease
    }

    .rb-region-card:hover .rb-region-card__chevron,
    .rb-region-card:focus-visible .rb-region-card__chevron {
      color: var(--rc-accent);
      background: color-mix(in srgb, var(--rc-accent) 10%, var(--mr-surface));
      border-color: color-mix(in srgb, var(--rc-accent) 25%, var(--mr-border));
      transform: translateX(-3px)
    }

    [data-theme="dark"] .rb-region-card__chevron {
      background: rgba(255, 255, 255, 0.04);
      border-color: var(--mr-border-2)
    }

    /* ذيل البطاقة — إحصائيات منظمة */
    .rb-region-card__foot {
      margin-top: auto;
      padding: 14px 18px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      flex-shrink: 0;
      border-top: 1px solid var(--mr-border)
    }

    [data-theme="dark"] .rb-region-card__foot {
      border-top-color: var(--mr-border-2)
    }

    .rb-region-card__stats {
      display: flex;
      align-items: center;
      gap: 16px
    }

    .rb-region-card__stat {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 500;
      color: var(--mr-text-2);
      white-space: nowrap
    }

    .rb-region-card__stat i {
      font-size: 13px;
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 7px;
      background: var(--mr-bg-2)
    }

    .rb-region-card__stat--branches i {
      color: var(--mr-blue);
      background: color-mix(in srgb, var(--mr-blue) 10%, var(--mr-surface))
    }

    .rb-region-card__stat--emps i {
      color: var(--rc-accent);
      background: color-mix(in srgb, var(--rc-accent) 10%, var(--mr-surface))
    }

    .rb-region-card__stat strong {
      color: var(--mr-text);
      font-weight: 700;
      font-size: 13px;
      margin-inline-start: 1px
    }

    .rb-region-card__actions {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-inline-start: auto
    }

    /* ═══ المناطق والفروع — تحسينات الجوال ═══ */
    @media (max-width: 992px) and (pointer: coarse) {
      #tab-locations .rb-view--regions .viol-grid,
      #tab-locations .viol-grid.rb-view--regions {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        max-width: 100% !important;
        width: 100% !important;
        justify-content: stretch !important
      }

      #tab-locations .rb-view--branches .viol-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        max-width: 100% !important;
        width: 100% !important
      }

      .rb-branch-card {
        padding: 15px 16px 13px;
        border-radius: 16px;
        width: 100%;
        box-sizing: border-box
      }

      .rb-region-card {
        border-radius: 14px;
        width: 100%;
        box-sizing: border-box;
        min-height: 0
      }

      .rb-region-card__head {
        padding: 16px 16px 0;
        align-items: flex-end;
        gap: 10px
      }

      .rb-region-card__identity {
        align-items: center;
        gap: 10px
      }

      .rb-region-card__icon {
        width: 46px;
        height: 46px;
        font-size: 18px
      }

      .rb-region-card__foot {
        padding: 12px 16px 14px
      }

      .rb-region-card:active,
      .rb-branch-card:active {
        transform: scale(.99)
      }

      .rb-branch-card__icon {
        width: 40px;
        height: 40px;
        font-size: 15px
      }

      .rb-region-card__name {
        font-size: 15px;
        line-height: 1.35
      }

      .rb-branch-card__name {
        font-size: 11px;
        font-weight: 700;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        overflow-wrap: normal;
        word-break: normal
      }

      .rb-region-card__sup,
      .rb-branch-card__loc {
        font-size: 12px
      }

      .rb-region-card__chevron {
        width: 34px;
        height: 34px;
        font-size: 12px
      }

      .rb-region-card__stat,
      .rb-branch-card__stat {
        font-size: 12px
      }

      .rb-branch-card__staff {
        max-height: 240px
      }

      .rb-branch-card .rb-emp-name {
        font-size: 13px
      }

      .rb-emp-contact,
      .rb-emp-num {
        font-size: 11px
      }
    }


    .rb-card-body {
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .rb-card-columns {
      display: flex;
      align-items: stretch;
      justify-content: space-between;
      gap: 12px
    }

    .rb-card-col-meta {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 14px;
      flex: 1;
      min-width: 0;
      overflow: visible
    }

    .rb-card-col-tools {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
      min-width: 0;
      margin-inline-start: auto
    }

    .rb-card-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px
    }

    .rb-region-card .rb-card-body {
      gap: 8px
    }

    .rb-region-card .rb-card-side-right {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start
    }

    .rb-region-card .rb-card-row:first-child .rb-card-side-right {
      flex: 0 0 auto;
      justify-content: flex-start
    }

    .rb-region-card .rb-card-row:first-child .rb-card-title {
      text-align: start;
      width: auto
    }

    .rb-region-card .rb-card-side-left {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-inline-start: 0
    }

    .rb-card-row-stats {
      align-items: flex-end
    }

    .rb-card-side-left {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
      min-width: 0;
      margin-inline-start: auto
    }

    .rb-card-side-right {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      min-width: 0;
      text-align: start
    }

    .rb-card-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--mr-text);
      line-height: 1.35
    }

    .rb-card-stats {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 6px;
      direction: rtl
    }

    .rb-stat {
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      gap: 4px;
      direction: rtl;
      font-size: 13px;
      font-weight: 600;
      color: var(--mr-primary);
      white-space: nowrap
    }

    .rb-stat-label {
      display: inline-flex;
      align-items: center;
      gap: 4px
    }

    .rb-stat i {
      flex: 0 0 auto;
      font-size: 12px;
      line-height: 1
    }

    .rb-sup-badge {
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      gap: 5px;
      direction: rtl;
      padding: 0;
      margin: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      font-size: 12px;
      font-weight: 600;
      color: var(--mr-text-2);
      max-width: 100%;
      min-width: 0;
      flex-wrap: nowrap;
      white-space: nowrap;
      overflow: visible;
      line-height: 1.35;
      align-self: flex-start;
      box-sizing: border-box;
      width: auto;
      max-width: 100%
    }

    .rb-loc-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      background: rgba(255, 195, 0, 0.14);
      color: #a65d1f;
      max-width: 100%;
      min-width: 0;
      flex-wrap: nowrap;
      white-space: nowrap;
      overflow: hidden;
      line-height: 1.35
    }

    .rb-sup-badge i {
      flex: 0 0 auto;
      width: auto;
      font-size: 12px;
      line-height: 1;
      margin: 0;
      opacity: 1
    }

    .rb-sup-badge:not(.rb-sup-none) i {
      color: var(--mr-text)
    }

    .rb-loc-badge i {
      flex-shrink: 0;
      font-size: 11px
    }

    .rb-sup-text {
      flex: 0 1 auto;
      min-width: 0;
      white-space: nowrap;
      overflow: visible;
      text-overflow: clip;
      line-height: 1.35;
      color: var(--mr-text)
    }

    .rb-loc-text {
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
      white-space: nowrap
    }

    .rb-loc-badge .rb-loc-meta {
      color: var(--mr-text-3);
      font-weight: 600
    }

    .rb-sup-badge.rb-sup-none {
      background: transparent;
      color: #FF0000
    }

    .rb-sup-badge.rb-sup-none i,
    .rb-sup-badge.rb-sup-none .rb-sup-text {
      color: #FF0000;
      opacity: 1
    }

    [data-theme="dark"] .rb-sup-badge.rb-sup-none i,
    [data-theme="dark"] .rb-sup-badge.rb-sup-none .rb-sup-text {
      color: #FF0000
    }

    [data-theme="dark"] .rb-sup-text {
      color: var(--mr-text)
    }

    .rb-region-card:focus-visible {
      outline: 2px solid var(--mr-primary);
      outline-offset: 2px
    }

    .rb-emp-panel {
      margin-top: 10px;
      padding-top: 12px;
      border-top: 1px solid var(--mr-border);
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: 220px;
      overflow: auto;
      width: 100%
    }

    .rb-emp-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      min-height: 56px;
      padding: 10px 12px;
      background: rgba(15, 18, 36, 0.06);
      border: 1px solid rgba(15, 18, 36, 0.12);
      border-radius: 12px
    }

    .rb-emp-col-meta {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 3px;
      min-width: 0;
      flex: 0 1 auto;
      max-width: 55%
    }

    .rb-emp-col-contact {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: flex-start;
      gap: 4px;
      flex: 0 1 auto;
      min-width: 0;
      max-width: 55%;
      margin-inline-start: auto
    }

    .rb-emp-name {
      font-size: 12px;
      font-weight: 700;
      color: var(--mr-text);
      line-height: 1.35;
      min-width: 0;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .rb-emp-sub {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: 6px;
      min-height: 18px;
      width: 100%
    }

    .rb-emp-num {
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 500;
      color: var(--mr-text-3);
      line-height: 1.35
    }

    .rb-emp-role-tag {
      font-size: 10px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 999px;
      line-height: 1.3;
      white-space: nowrap;
      flex-shrink: 0
    }

    .rb-emp-role-tag--bm {
      color: #6b46c1;
      background: #e0d7f7;
      border: none
    }

    .rb-emp-contact {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
      font-size: 10px;
      color: var(--mr-text-3);
      width: 100%
    }

    .rb-emp-contact span {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      min-width: 0;
      max-width: 100%;
      direction: ltr;
      justify-content: flex-start;
      white-space: nowrap
    }

    .rb-emp-contact i {
      width: 12px;
      color: var(--mr-primary);
      flex-shrink: 0
    }

    .rb-emp-contact-txt {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
      flex: 1
    }

    .rb-emp-empty {
      padding: 14px 10px;
      text-align: center;
      font-size: 12px;
      color: var(--mr-text-3);
      border: 1px dashed var(--mr-border);
      border-radius: 12px;
      background: var(--mr-bg)
    }

    /* ─── Dark mode: employee rows in branch cards ─── */
    [data-theme="dark"] .rb-emp-row {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.1)
    }

    [data-theme="dark"] .rb-emp-contact i {
      color: #94a3b8
    }

    [data-theme="dark"] .rb-emp-role-tag--bm {
      background: rgba(107, 70, 193, 0.2);
      color: #c4b5fd
    }

    .rb-action-btn-dark {
      background-color: #0f1224 !important;
      color: #ffffff !important;
      border-radius: 999px !important;
      padding: 10px 18px !important;
      font-size: 13px !important;
      font-weight: 600 !important;
      border: none !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
      cursor: pointer !important;
      box-shadow: var(--mr-shadow-soft);
      transition: background-color 0.2s ease
    }

    .rb-action-btn-dark:hover {
      background-color: #1e293b !important;
      color: #ffffff !important
    }

    [data-theme="dark"] .rb-action-btn-dark {
      background-color: #334155 !important;
      color: #f8fafc !important
    }

    [data-theme="dark"] .rb-action-btn-dark:hover {
      background-color: #475569 !important;
      color: #ffffff !important
    }

    /* Users table — Mirsad cells */
    .mr-user-cell {
      display: block
    }

    .mr-user-cell-info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 3px;
      min-width: 0
    }

    .mr-user-cell-info strong,
    .mr-user-name {
      font-family: var(--font);
      font-size: 14px;
      color: var(--mr-text);
      font-weight: 500;
      letter-spacing: -0.02em;
      line-height: 1.35;
      display: block
    }

    .mr-user-empnum {
      display: block;
      margin-top: 2px;
      min-width: 0;
      max-width: 100%;
      line-height: 1.3
    }

    .mr-user-cell-info .mr-user-empnum-val {
      font-family: var(--font);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -0.02em;
      color: var(--mr-text-2);
      direction: ltr;
      unicode-bidi: plaintext;
      line-height: 1.35
    }

    .mr-empnum-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      max-width: 100%;
      padding: 0;
      border: none;
      background: none;
      box-shadow: none;
      border-radius: 0
    }

    .mr-empnum-chip i {
      color: var(--mr-text-3);
      font-size: 12px;
      width: 14px;
      flex-shrink: 0;
      text-align: center
    }

    .mr-empnum-chip .mr-user-empnum-val {
      font-family: var(--font);
      font-size: 14px;
      font-weight: 500;
      color: var(--mr-text);
      letter-spacing: -0.02em;
      direction: ltr;
      unicode-bidi: plaintext;
      line-height: 1.35
    }

    .mr-role-badge {
      border-radius: 999px !important;
      padding: 4px 12px !important;
      font-weight: 700
    }


    .mr-compliance-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 700;
      padding: 5px 12px;
      border-radius: 999px;
      border: 1px solid transparent
    }

    .mr-compliance-badge i {
      font-size: 8px
    }

    .mr-compliant {
      background: rgba(72, 161, 17, 0.12);
      color: #48A111;
      border-color: rgba(72, 161, 17, 0.25)
    }

    .mr-review {
      background: rgba(255, 195, 0, 0.14);
      color: #FFC300;
      border-color: rgba(255, 195, 0, 0.3)
    }

    .mr-noncompliant {
      background: rgba(255, 0, 0, 0.14);
      color: #FF0000;
      border-color: rgba(255, 0, 0, 0.3)
    }

    .br-actions {
      position: absolute;
      top: 12px;
      left: 12px;
      display: flex;
      gap: 4px;
      z-index: 1
    }

    /* Region Hierarchy */
    .region-card {
      background: var(--mr-surface);
      border: 1px solid var(--mr-border);
      border-radius: var(--mr-radius-card);
      margin-bottom: 16px;
      overflow: hidden;
      transition: all 0.3s ease;
      box-shadow: var(--mr-shadow-soft);
    }

    .region-card:hover {
      box-shadow: var(--mr-shadow-card);
      border-color: var(--mr-primary-soft);
    }

    .region-header {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 18px 20px;
      cursor: pointer;
      user-select: none;
      background: var(--mr-surface);
      transition: all 0.2s ease;
      position: relative;
      overflow: hidden;
    }

    .region-header::before {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: var(--mr-primary);
      border-radius: 0 4px 4px 0;
    }

    .region-header:hover {
      background: var(--mr-primary-softer);
    }

    .region-chevron {
      color: var(--text3);
      font-size: 12px;
      transition: transform 0.3s ease;
      width: 16px;
      text-align: center;
    }

    .region-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: var(--mr-primary);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
      box-shadow: 0 8px 18px rgba(15, 18, 36, 0.28);
    }

    .region-info {
      flex: 1;
      min-width: 0
    }

    .region-name {
      font-size: 16px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 6px;
      letter-spacing: -0.2px;
    }

    .region-meta {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      font-size: 12px;
      color: var(--text3)
    }

    .region-meta>span {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 3px 10px;
      background: var(--surface2);
      border-radius: 20px;
      font-weight: 500;
      border: 1px solid var(--border);
    }

    .region-meta i {
      font-size: 10px;
      color: var(--blue);
    }

    .region-sup-tag {
      padding: 3px 10px !important;
      background: var(--amber-light) !important;
      color: var(--amber-text) !important;
      border-radius: 20px;
      font-weight: 600;
      border: 1px solid transparent !important;
    }

    .region-sup-tag i {
      color: var(--amber-text) !important;
    }

    .region-sup-tag.region-sup-none {
      background: var(--red-light) !important;
      color: var(--red-text) !important;
    }

    .region-sup-tag.region-sup-none i {
      color: var(--red-text) !important;
    }

    .region-actions {
      display: flex;
      gap: 6px;
      flex-shrink: 0
    }

    .region-branches {
      padding: 12px 20px 18px;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 12px;
      background: var(--bg);
      border-top: 1px solid var(--border);
    }

    .region-empty {
      text-align: center;
      padding: 20px;
      color: var(--text3);
      font-size: 13px;
      background: var(--surface);
      border-radius: 10px;
      border: 1px dashed var(--border2);
      grid-column: 1 / -1;
    }

    .region-empty i {
      margin-left: 6px;
      font-size: 14px;
    }

    .add-branch-btn {
      width: 100%;
      justify-content: center;
      padding: 14px;
      border: 2px dashed var(--border2);
      background: transparent;
      color: var(--text3);
      transition: all 0.2s ease;
      border-radius: 12px;
      font-size: 13px;
      grid-column: 1 / -1;
    }

    .add-branch-btn:hover {
      border-color: var(--blue);
      color: var(--blue);
      background: var(--blue-light);
      transform: translateY(-1px);
    }

    .branch-card-inner {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      transition: all 0.2s ease;
      border-right: 3px solid var(--green);
    }

    .branch-card-inner:hover {
      box-shadow: var(--shadow);
      border-color: var(--green);
    }

    .branch-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      cursor: pointer;
      transition: 0.15s
    }

    .branch-row:hover {
      background: var(--surface2);
    }

    .branch-chevron {
      color: var(--text3);
      font-size: 11px;
      width: 14px;
      text-align: center;
      transition: transform 0.3s ease;
    }

    .branch-icon-mini {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      background: var(--green-light);
      color: var(--green-text);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex-shrink: 0
    }

    .branch-info {
      flex: 1;
      min-width: 0
    }

    .branch-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 3px
    }

    .branch-meta {
      display: flex;
      gap: 14px;
      font-size: 11px;
      color: var(--text3);
      flex-wrap: wrap
    }

    .branch-meta>span {
      display: flex;
      align-items: center;
      gap: 4px
    }

    .branch-meta i {
      font-size: 9px;
      color: var(--green);
    }

    .branch-actions {
      display: flex;
      gap: 4px;
      flex-shrink: 0
    }

    .branch-employees {
      padding: 8px 16px 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      border-top: 1px solid var(--border);
      background: var(--surface2);
    }

    .br-search-bar {
      margin-bottom: 16px;
      display: flex;
      justify-content: flex-start
    }

    .br-search-wrap {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      max-width: 360px
    }

    .br-search-icon {
      position: absolute;
      right: 14px;
      color: var(--text3);
      font-size: 13px;
      pointer-events: none
    }

    .br-search-input {
      width: 100%;
      padding: 12px 40px 12px 40px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      font-family: var(--font);
      font-size: 13px;
      color: var(--text);
      transition: all 0.2s ease;
    }

    .br-search-input:focus {
      outline: none;
      border-color: var(--blue);
      background: var(--surface);
      box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
    }

    .br-search-clear {
      position: absolute;
      left: 8px;
      background: transparent;
      border: none;
      width: 28px;
      height: 28px;
      border-radius: 6px;
      cursor: pointer;
      color: var(--text3);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 0.15s
    }

    .br-search-clear:hover {
      background: var(--bg2);
      color: var(--text)
    }

    .br-emp-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 10px 12px;
      background: var(--surface);
      border-radius: 10px;
      transition: all 0.2s ease;
      border: 1px solid transparent;
    }

    .br-emp-item:hover {
      border-color: var(--border);
      box-shadow: var(--shadow);
      transform: translateX(-2px);
    }

    .br-emp-avatar {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 14px;
      flex-shrink: 0
    }

    .br-emp-info {
      flex: 1;
      min-width: 0
    }

    .br-emp-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 3px
    }

    .br-emp-num {
      font-family: var(--mono);
      font-size: 10px;
      padding: 2px 8px;
      background: var(--blue-light);
      color: var(--blue-text);
      border-radius: 6px;
      font-weight: 600
    }

    .br-emp-contact {
      font-size: 10px;
      color: var(--text3);
      display: flex;
      flex-direction: column;
      gap: 2px;
      font-family: var(--mono)
    }

    .br-emp-contact span {
      display: flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .br-emp-contact i {
      font-size: 9px;
      width: 12px;
      color: var(--text3);
      opacity: 0.7
    }

    .br-employees {
      margin-top: 8px;
      padding-top: 12px;
      border-top: 1px dashed var(--border2)
    }

    .br-employees-header {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text2);
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.3px
    }

    .br-employees-header i {
      color: var(--blue);
      font-size: 11px
    }

    .br-employees-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: 300px;
      overflow-y: auto;
      padding-left: 2px
    }

    .br-employees-list::-webkit-scrollbar {
      width: 4px
    }

    .br-employees-list::-webkit-scrollbar-thumb {
      background: var(--border2);
      border-radius: 2px
    }

    .br-employees-empty {
      font-size: 11px;
      color: var(--text3);
      text-align: center;
      padding: 10px;
      font-style: italic
    }

    /* Report stat cards — نفس أسلوب mk-kpi (لوحة التحكم) */
    .rp-stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 18px;
      direction: rtl
    }

    .rp-stat-card {
      --rp-stat-accent: var(--mr-primary);
      background: var(--mr-surface);
      border: 1px solid var(--mr-border);
      border-radius: 14px;
      padding: 14px 14px 11px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      direction: rtl;
      min-width: 0;
      min-height: 0;
      transition: border-color .32s ease, box-shadow .32s ease, transform .32s cubic-bezier(.22, 1, .36, 1)
    }

    .rp-stat-card::before {
      content: none
    }

    .rp-stat-card:hover {
      border-color: color-mix(in srgb, var(--rp-stat-accent) 24%, var(--mr-border));
      box-shadow: 0 1px 2px rgba(15, 18, 36, .04)
    }

    .rp-stat-card[data-color="green"] {
      --rp-stat-accent: var(--green)
    }

    .rp-stat-card[data-color="red"] {
      --rp-stat-accent: var(--red)
    }

    .rp-stat-card[data-color="amber"] {
      --rp-stat-accent: var(--amber)
    }

    .rp-stat-card[data-color="blue"] {
      --rp-stat-accent: var(--blue)
    }

    .rp-stat-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      direction: rtl;
      min-width: 0
    }

    .rp-stat-title {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      flex: 1 1 auto
    }

    .rp-stat-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
      background: var(--rp-stat-accent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--rp-stat-accent) 16%, transparent)
    }

    .rp-stat-label {
      margin: 0;
      font-family: var(--font);
      font-size: 11px;
      font-weight: 500;
      line-height: 1.35;
      color: var(--mr-text-3);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .rp-stat-value {
      margin: 0;
      flex-shrink: 0;
      align-self: flex-start;
      font-family: var(--font);
      font-size: 26px;
      font-weight: 600;
      font-variant-numeric: lining-nums tabular-nums;
      font-feature-settings: "tnum" 1, "lnum" 1;
      letter-spacing: -.03em;
      line-height: 1;
      color: var(--mr-text);
      direction: ltr;
      unicode-bidi: isolate;
      transition: color .32s ease, transform .32s cubic-bezier(.22, 1, .36, 1), opacity .28s ease
    }

    .rp-stat-card .rp-stat-value.is-animating {
      color: var(--rp-stat-accent);
      transform: scale(1.045)
    }

    .rp-stat-card.is-stat-pulse {
      transform: translateY(-1px);
      border-color: color-mix(in srgb, var(--rp-stat-accent) 32%, var(--mr-border));
      box-shadow: 0 6px 18px color-mix(in srgb, var(--rp-stat-accent) 11%, transparent)
    }

    #tab-reports .rp-stats.is-refreshing .rp-stat-card {
      pointer-events: none
    }

    .rp-stat-card .rp-stat-chart {
      margin-top: auto;
      height: 34px;
      width: 100%;
      min-width: 0;
      padding-top: 0;
      color: var(--rp-stat-accent);
      border-top: none;
      overflow: visible;
      position: relative;
      cursor: crosshair
    }

    .rp-stat-card .rp-stat-chart__stage {
      position: relative;
      width: 100%;
      height: 100%
    }

    .rp-stat-card .rp-stat-chart__layer {
      position: absolute;
      inset: 0
    }

    .rp-stat-card .rp-stat-chart__layer.is-current {
      opacity: 1
    }

    .rp-stat-card .rp-stat-chart.is-chart-morphing .rp-stat-chart__area {
      opacity: .9;
      transition: opacity .45s cubic-bezier(.22, 1, .36, 1)
    }

    .rp-stat-card .rp-stat-chart.is-chart-morphing .rp-stat-chart__line {
      opacity: .96;
      transition: opacity .35s cubic-bezier(.22, 1, .36, 1)
    }

    .rp-stat-card .rp-stat-chart__svg {
      display: block;
      width: 100%;
      height: 100%;
      pointer-events: none
    }

    @media (prefers-reduced-motion: reduce) {
.rp-stat-value,
      .rp-stat-card,
      .rp-stat-card .rp-stat-chart__layer {
        transition: none !important
      }

      .rp-stat-card .rp-stat-value.is-animating {
        transform: none !important
      }

      .rp-stat-card.is-stat-pulse {
        transform: none !important
      }

      #tab-reports #reportList {
        transition: none !important
      }

      .rp-stat-card .rp-stat-chart__hover-dot,
      .rp-stat-chart__tooltip {
        transition: none !important
      }
}

    .rp-stat-card .rp-stat-chart__area {
      transition: opacity .4s cubic-bezier(.22, 1, .36, 1)
    }

    .rp-stat-card .rp-stat-chart__line {
      stroke: currentColor;
      stroke-width: 1.6;
      stroke-linecap: butt;
      stroke-linejoin: round;
      fill: none;
      opacity: .92;
      transition: opacity .35s cubic-bezier(.22, 1, .36, 1)
    }

    .rp-stat-card .rp-stat-chart__dot {
      display: none
    }

    .rp-stat-card .rp-stat-chart__hover-dot {
      position: absolute;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent), 0 1px 5px color-mix(in srgb, currentColor 38%, transparent);
      left: var(--tip-x, 50%);
      top: var(--tip-y, 100%);
      transform: translate(-50%, -50%);
      opacity: 0;
      pointer-events: none;
      z-index: 4;
      transition: left .07s cubic-bezier(.22, 1, .36, 1), top .07s cubic-bezier(.22, 1, .36, 1), opacity .12s ease
    }

    .rp-stat-chart__tooltip {
      position: fixed;
      left: var(--tip-fixed-x, 50%);
      top: var(--tip-fixed-y, 50%);
      transform: translate(-50%, calc(-100% - 8px));
      max-width: min(220px, 92vw);
      padding: 5px 9px;
      border-radius: 8px;
      font-family: var(--font);
      font-size: 10px;
      font-weight: 600;
      line-height: 1.35;
      letter-spacing: -.01em;
      text-align: center;
      white-space: nowrap;
      color: #fff;
      background: color-mix(in srgb, var(--mr-text) 90%, #000);
      box-shadow: 0 4px 16px rgba(15, 18, 36, .18);
      pointer-events: none;
      opacity: 0;
      z-index: 9500;
      transition: opacity .12s ease, left .07s cubic-bezier(.22, 1, .36, 1), top .07s cubic-bezier(.22, 1, .36, 1)
    }

    .rp-stat-card .rp-stat-chart.is-tip-on .rp-stat-chart__hover-dot,
    .rp-stat-chart__tooltip.is-visible {
      opacity: 1
    }

    [data-theme="dark"] .rp-stat-chart__tooltip {
      color: #f1f5f9;
      background: #1a2234;
      border: 1px solid var(--mr-border);
      box-shadow: 0 6px 20px rgba(0, 0, 0, .38)
    }

    .rp-stat-card:hover .rp-stat-chart__line {
      opacity: 1
    }

    .rp-toolbar {
      display: flex;
      gap: 14px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 14px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--border);
      position: relative
    }

    .rp-search-wrap {
      flex: 1 1 280px;
      min-width: 200px;
      height: 44px;
      border: 1px solid var(--mr-border);
      border-radius: 999px;
      background: var(--mr-bg);
      display: flex;
      align-items: center;
      direction: rtl;
      padding: 0 16px 0 8px;
      box-sizing: border-box;
      gap: 14px;
      transition: border-color 0.2s ease, box-shadow 0.2s ease
    }

    .rp-search-wrap:focus-within {
      outline: none;
      border-color: var(--mr-primary);
      box-shadow: 0 0 0 4px var(--mr-primary-soft)
    }

    .rp-search-input {
      flex: 1;
      border: 0;
      outline: none;
      background: transparent;
      text-align: start;
      font-family: var(--font);
      font-size: 13px;
      color: var(--mr-text)
    }

    .rp-search-input::placeholder {
      color: var(--mr-text-muted)
    }

    .rp-search-input:focus {
      outline: none
    }

    .rp-search-btn {
      width: 32px;
      height: 32px;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: var(--mr-text-3);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      outline: none;
      transition: background 0.2s ease, color 0.2s ease
    }

    .rp-search-btn:hover {
      background: var(--mr-primary);
      color: #fff
    }

    .rp-tool-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      background: var(--mr-surface);
      color: var(--mr-text-2);
      border: 1px solid var(--mr-primary-soft);
      border-radius: 999px;
      font-family: var(--font);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
      white-space: nowrap;
      flex-shrink: 0
    }

    .rp-tool-btn:hover {
      background: var(--mr-primary-softer);
      border-color: var(--mr-primary);
      color: var(--mr-text)
    }

    :root:not([data-theme="dark"]) .rp-tool-btn:not(.rp-tool-btn-primary):not(.active):hover {
      background: var(--mr-primary);
      border-color: var(--mr-primary);
      color: #fff;
      box-shadow: none
    }

    :root:not([data-theme="dark"]) .rp-tool-btn:not(.rp-tool-btn-primary):not(.active):hover i {
      color: #fff
    }

    .rp-tool-btn.active {
      background: var(--mr-primary);
      border-color: var(--mr-primary);
      color: var(--mr-primary-text, #fff)
    }

    .rp-tool-btn-primary {
      background: var(--mr-primary);
      color: #fff;
      border-color: var(--mr-primary);
      box-shadow: 0 6px 16px rgba(15, 18, 36, 0.28)
    }

    :root:not([data-theme="dark"]) .rp-tool-btn-primary {
      background: var(--mr-surface);
      color: var(--mr-text);
      border-color: var(--mr-border);
      box-shadow: 0 1px 2px rgba(15, 18, 36, 0.04)
    }

    .rp-tool-btn-primary:hover {
      background: var(--mr-primary-hover);
      color: #fff;
      border-color: var(--mr-primary-hover)
    }

    :root:not([data-theme="dark"]) .rp-tool-btn-primary:hover {
      background: var(--mr-primary);
      color: #fff;
      border-color: var(--mr-primary);
      box-shadow: none
    }

    :root:not([data-theme="dark"]) .rp-tool-btn-primary:hover i,
    :root:not([data-theme="dark"]) .rp-tool-btn-primary:hover span {
      color: #fff
    }

    .rp-tool-badge {
      background: var(--red);
      color: #fff;
      font-size: 10px;
      padding: 2px 7px;
      border-radius: 10px;
      font-weight: 700;
      font-family: var(--mono)
    }

    .rp-results-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 14px;
      font-size: 12px;
      color: var(--text2);
      padding: 10px 12px;
      background: var(--surface2);
      border-radius: 8px;
      margin-bottom: 14px
    }

    .rp-results-bar strong {
      color: var(--text);
      font-family: var(--mono)
    }

    .report-ticket-card {
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 16px;
      margin-bottom: 14px;
      background: var(--surface);
      transition: 0.2s;
      cursor: pointer
    }

    .report-ticket-card:hover {
      border-color: var(--blue);
      box-shadow: var(--shadow)
    }

    .report-ticket-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 14px;
      padding-bottom: 10px;
      margin-bottom: 12px;
      border-bottom: 1px solid var(--border)
    }

    .report-ticket-meta {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 14px;
      margin-bottom: 12px
    }

    .report-meta-item {
      font-size: 12px
    }

    .report-meta-item span {
      display: block;
      color: var(--text3);
      font-size: 10px;
      margin-bottom: 2px
    }

    .report-meta-item strong {
      color: var(--text);
      font-weight: 600
    }

    .report-attachments-count {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: var(--blue-light);
      color: var(--blue-text);
      padding: 3px 9px;
      border-radius: 10px;
      font-size: 11px;
      font-weight: 600
    }

    /* Filter Panel */
    .filter-panel-overlay {
      position: fixed;
      top: var(--unified-topbar-h, calc(76px + env(safe-area-inset-top, 0px)));
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: 2000;
      display: none
    }

    .filter-panel-overlay.open {
      display: block
    }

    .filter-panel {
      --fp-under-topbar: 10px;
      position: fixed;
      top: calc(var(--unified-topbar-h, calc(76px + env(safe-area-inset-top, 0px))) - var(--fp-under-topbar, 10px));
      left: -420px;
      width: 400px;
      height: calc(100vh - var(--unified-topbar-h, calc(76px + env(safe-area-inset-top, 0px))) + var(--fp-under-topbar, 10px));
      background: var(--surface);
      border-right: 1px solid var(--border);
      z-index: 2001;
      display: flex;
      flex-direction: column;
      transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 4px 0 16px rgba(0, 0, 0, 0.07);
      box-sizing: border-box
    }

    body.filter-panel-open #appWrap > .app-shell {
      isolation: isolate
    }

    .filter-panel:not(.score-help-panel) .filter-panel-header {
      padding-top: calc(16px + var(--fp-under-topbar, 10px))
    }

    .filter-panel:not(.score-help-panel):not(.open) {
      z-index: 900 !important;
      pointer-events: none
    }

    body.filter-panel-open #appWrap .filter-panel-overlay.open {
      z-index: 2700 !important
    }

    body.filter-panel-open #appWrap .filter-panel:not(.score-help-panel).open {
      z-index: 2800 !important
    }

    body.filter-panel-open #appWrap .topbar.unified-banner {
      z-index: 3100 !important;
      background: var(--mr-surface) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      opacity: 1 !important;
      border-bottom: 1px solid var(--mr-border) !important;
      box-shadow:
        0 4px 14px rgba(15, 18, 36, 0.07),
        0 1px 4px rgba(15, 18, 36, 0.04) !important
    }

    [data-theme="dark"] body.filter-panel-open #appWrap .topbar.unified-banner {
      box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.22),
        0 1px 5px rgba(0, 0, 0, 0.14) !important
    }

    .filter-panel.open {
      left: 0
    }

    .filter-panel-header {
      padding: 16px 20px;
      border-top: none;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0
    }

    .filter-panel-header h3 {
      font-size: 15px;
      font-weight: 700;
      color: var(--text)
    }

    .filter-panel-header h3 i {
      margin-inline-start: 8px;
      color: var(--mr-text);
    }

    .filter-panel-body {
      flex: 1;
      overflow-x: hidden;
      overflow-y: auto;
      padding: 16px 20px;
      padding-inline-end: 12px;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: color-mix(in srgb, var(--mr-text-3, var(--text3)) 62%, var(--mr-border, var(--border))) color-mix(in srgb, var(--mr-border, var(--border)) 24%, transparent)
    }

    .filter-panel-body::-webkit-scrollbar {
      width: 4px;
      height: 4px
    }

    .filter-panel-body::-webkit-scrollbar-track {
      background: color-mix(in srgb, var(--mr-border, var(--border)) 22%, transparent);
      border-radius: 999px;
      margin-block: 4px;
      margin-inline-end: 2px
    }

    .filter-panel-body::-webkit-scrollbar-thumb {
      background: color-mix(in srgb, var(--mr-text-3, var(--text3)) 55%, var(--mr-border-2, var(--border2)));
      border-radius: 999px;
      min-height: 28px
    }

    .filter-panel-body::-webkit-scrollbar-thumb:hover {
      background: color-mix(in srgb, var(--mr-blue, var(--blue)) 40%, var(--mr-text-3, var(--text3)))
    }

    [data-theme="dark"] .filter-panel-body {
      scrollbar-color: rgba(255, 255, 255, 0.28) rgba(255, 255, 255, 0.07)
    }

    [data-theme="dark"] .filter-panel-body::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.06)
    }

    [data-theme="dark"] .filter-panel-body::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.22)
    }

    [data-theme="dark"] .filter-panel-body::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.36)
    }

    .fp-dropdown.open .fp-checklist {
      scrollbar-width: thin;
      scrollbar-color: color-mix(in srgb, var(--mr-text-3, var(--text3)) 62%, var(--mr-border, var(--border))) color-mix(in srgb, var(--mr-border, var(--border)) 24%, transparent)
    }

    .fp-dropdown.open .fp-checklist::-webkit-scrollbar {
      width: 4px;
      height: 4px
    }

    .fp-dropdown.open .fp-checklist::-webkit-scrollbar-track {
      background: color-mix(in srgb, var(--mr-border, var(--border)) 22%, transparent);
      border-radius: 999px;
      margin-block: 2px 6px;
      margin-inline-end: 0
    }

    .fp-dropdown.open .fp-checklist::-webkit-scrollbar-thumb {
      background: color-mix(in srgb, var(--mr-text-3, var(--text3)) 55%, var(--mr-border-2, var(--border2)));
      border-radius: 999px;
      min-height: 24px
    }

    .fp-dropdown.open .fp-checklist::-webkit-scrollbar-thumb:hover {
      background: color-mix(in srgb, var(--mr-blue, var(--blue)) 40%, var(--mr-text-3, var(--text3)))
    }

    [data-theme="dark"] .fp-dropdown.open .fp-checklist {
      scrollbar-color: rgba(255, 255, 255, 0.28) rgba(255, 255, 255, 0.07)
    }

    [data-theme="dark"] .fp-dropdown.open .fp-checklist::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.06)
    }

    [data-theme="dark"] .fp-dropdown.open .fp-checklist::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.22)
    }

    [data-theme="dark"] .fp-dropdown.open .fp-checklist::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.36)
    }

    .filter-panel-footer {
      padding: 16px 20px;
      border-top: 1px solid var(--border);
      display: flex;
      gap: 14px;
      flex-shrink: 0;
      background: var(--surface)
    }

    /* شرح حساب الدرجة — ورقة مركزية */
    #scoreHelpOverlay.score-help-overlay {
      background: transparent !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important
    }

    #scoreHelpPanel.score-help-panel {
      left: 50% !important;
      top: 50% !important;
      bottom: auto !important;
      width: min(420px, calc(100vw - 28px)) !important;
      max-width: calc(100vw - 28px) !important;
      height: auto;
      max-height: min(82vh, calc(100dvh - 40px));
      padding: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      border: 1px solid color-mix(in srgb, var(--mr-border) 70%, transparent);
      border-radius: 22px;
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 24px 56px rgba(15, 18, 36, 0.28),
        0 8px 20px rgba(15, 18, 36, 0.12);
      transform: translate(-50%, -50%) scale(0.92);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition:
        transform 0.32s cubic-bezier(0.34, 1.2, 0.64, 1),
        opacity 0.24s ease,
        visibility 0.24s,
        left 0s
    }

    #scoreHelpPanel.score-help-panel.open {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
      visibility: visible;
      pointer-events: auto
    }

    .score-help-sheet {
      display: flex;
      flex-direction: column;
      min-height: 0;
      max-height: inherit
    }

    .score-help-sheet__hero {
      position: relative;
      padding: 20px 18px 16px;
      background: linear-gradient(145deg,
        color-mix(in srgb, var(--mr-amber) 18%, var(--mr-surface)) 0%,
        color-mix(in srgb, var(--mr-blue) 10%, var(--mr-surface)) 100%);
      border-bottom: 1px solid color-mix(in srgb, var(--mr-border) 55%, transparent)
    }

    .score-help-sheet__hero-row {
      display: flex;
      align-items: flex-start;
      gap: 12px
    }

    .score-help-sheet__headings {
      flex: 1;
      min-width: 0
    }

    .score-help-sheet__icon {
      width: 44px;
      height: 44px;
      flex-shrink: 0;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: var(--mr-amber);
      background: color-mix(in srgb, var(--mr-amber) 22%, var(--mr-surface));
      border: 1px solid color-mix(in srgb, var(--mr-amber) 35%, transparent);
      box-shadow: 0 4px 14px color-mix(in srgb, var(--mr-amber) 25%, transparent)
    }

    .score-help-sheet__icon--response {
      color: var(--mr-purple);
      background: color-mix(in srgb, var(--mr-purple) 18%, var(--mr-surface));
      border-color: color-mix(in srgb, var(--mr-purple) 32%, transparent);
      box-shadow: 0 4px 14px color-mix(in srgb, var(--mr-purple) 22%, transparent)
    }

    .score-help-sheet__title {
      margin: 0;
      font-size: 17px;
      font-weight: 700;
      line-height: 1.35;
      color: var(--mr-text);
      letter-spacing: -0.02em
    }

    .score-help-sheet__sub {
      margin: 6px 0 0;
      font-size: 12px;
      line-height: 1.5;
      color: var(--mr-text-2)
    }

    .score-help-sheet__body {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      padding: 14px 14px 10px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: var(--mr-border-2) transparent
    }

    .score-help-sheet__foot {
      flex-shrink: 0;
      padding: 12px 14px 16px;
      border-top: 1px solid var(--mr-border);
      background: var(--mr-surface)
    }

    .score-help-sheet__ok {
      width: 100%;
      height: 42px;
      border: none;
      border-radius: 14px;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 600;
      color: #fff;
      cursor: pointer;
      background: linear-gradient(135deg, var(--mr-primary) 0%, color-mix(in srgb, var(--mr-primary) 75%, var(--mr-blue)) 100%);
      box-shadow: 0 6px 18px color-mix(in srgb, var(--mr-primary) 32%, transparent);
      transition: transform 0.18s, box-shadow 0.18s
    }

    .score-help-sheet__ok:active {
      transform: scale(0.98)
    }

    .score-help-body-inner {
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .score-help-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 11px;
      border-radius: 12px;
      background: var(--mr-surface);
      border: 1px solid var(--mr-border);
      transition: border-color 0.18s, box-shadow 0.18s
    }

    .score-help-item:hover {
      border-color: var(--mr-border-2);
      box-shadow: 0 2px 8px rgba(15, 18, 36, 0.06)
    }

    .score-help-item__ico {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      color: var(--help-ico-fg, var(--mr-blue));
      background: var(--help-ico-bg, var(--blue-light));
      border: 1px solid color-mix(in srgb, var(--help-ico-fg, var(--mr-blue)) 22%, transparent)
    }

    .score-help-item__text {
      flex: 1;
      min-width: 0;
      font-size: 12px;
      line-height: 1.55;
      color: var(--mr-text-2)
    }

    .score-help-item__text strong {
      display: block;
      margin-bottom: 3px;
      font-size: 12px;
      font-weight: 700;
      color: var(--mr-text)
    }

    .score-help-body-inner--plain ul {
      margin: 0;
      padding: 0 1.1em 0 0;
      list-style: disc
    }

    .score-help-body-inner--plain li {
      margin-bottom: 8px;
      font-size: 11px;
      line-height: 1.5;
      color: var(--mr-text-2)
    }

    [data-theme="dark"] #scoreHelpPanel.score-help-panel {
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 24px 56px rgba(0, 0, 0, 0.55)
    }

    [data-theme="dark"] .score-help-sheet__hero {
      background: linear-gradient(145deg,
        color-mix(in srgb, var(--mr-amber) 14%, var(--mr-surface)) 0%,
        color-mix(in srgb, var(--mr-blue) 12%, #1a1d2e) 100%)
    }

    .fp-btn {
      flex: 1;
      padding: 12px 16px;
      border-radius: 10px;
      font-family: var(--font);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      transition: 0.2s;
      border: 1px solid transparent;
      letter-spacing: 0.2px
    }

    .fp-btn-clear {
      background: var(--surface);
      color: var(--text2);
      border-color: var(--border2)
    }

    .fp-btn-clear:hover {
      background: var(--red-light);
      color: var(--red-text);
      border-color: var(--red)
    }

    .fp-btn-apply {
      background: var(--accent);
      color: #fff;
      box-shadow: 0 4px 12px rgba(11, 15, 26, 0.18)
    }

    .fp-btn-apply:hover {
      filter: brightness(1.1);
      transform: translateY(-1px)
    }

    .fp-section {
      margin-bottom: 20px;
      position: relative;
      z-index: 1
    }

    .fp-section:has(.fp-dropdown.open) {
      z-index: 20
    }

    .fp-section-title {
      font-size: 12px;
      font-weight: 600;
      color: var(--text2);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .fp-section-title i {
      color: var(--mr-text);
      font-size: 11px
    }

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

    .fp-chips--scroll {
      max-height: 180px;
      overflow-x: hidden;
      overflow-y: auto;
      padding: 4px 2px 4px 4px;
      padding-inline-end: 6px;
      scrollbar-gutter: stable;
      overscroll-behavior: contain
    }

    .fp-dropdown {
      position: relative
    }

    .fp-dropdown-trigger {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      min-height: 42px;
      box-sizing: border-box;
      border: 1px solid var(--border2);
      border-radius: 10px;
      background: var(--surface);
      font-family: var(--font);
      font-size: 13px;
      color: var(--text2);
      cursor: pointer;
      text-align: start;
      transition: border-color 0.15s, color 0.15s, border-radius 0.15s, box-shadow 0.15s
    }

    .fp-dropdown-trigger:hover {
      border-color: color-mix(in srgb, var(--mr-text) 28%, var(--border2));
      color: var(--text)
    }

    .fp-dropdown.has-selection .fp-dropdown-trigger {
      color: var(--text);
      border-color: color-mix(in srgb, var(--mr-text) 35%, var(--border2))
    }

    .fp-dropdown.open .fp-dropdown-trigger {
      border-radius: 10px 10px 0 0;
      border-bottom-color: color-mix(in srgb, var(--border2) 55%, var(--border));
      color: var(--text);
      box-shadow: none
    }

    .fp-dropdown.open.has-selection .fp-dropdown-trigger {
      border-color: color-mix(in srgb, var(--mr-text) 35%, var(--border2))
    }

    .fp-dropdown-trigger__text {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .fp-dropdown-trigger__meta {
      font-size: 11px;
      color: var(--mr-text);
      font-weight: 600;
      flex-shrink: 0
    }

    .fp-dropdown-trigger__icon {
      font-size: 11px;
      color: var(--text3);
      transition: transform 0.2s;
      flex-shrink: 0
    }

    .fp-dropdown.open .fp-dropdown-trigger__icon {
      transform: rotate(180deg)
    }

    .fp-dropdown-panel {
      display: none;
      margin-top: 0;
      overflow: hidden;
      border: 1px solid var(--border2);
      border-top: none;
      border-radius: 0 0 10px 10px;
      background: var(--surface);
      box-sizing: border-box
    }

    .fp-dropdown.open .fp-dropdown-panel {
      display: block;
      border-color: color-mix(in srgb, var(--mr-text) 18%, var(--border2));
      box-shadow: 0 6px 14px rgba(15, 18, 36, 0.06)
    }

    .fp-dropdown.open.has-selection .fp-dropdown-panel {
      border-color: color-mix(in srgb, var(--mr-text) 35%, var(--border2))
    }

    .fp-checklist {
      display: flex;
      flex-direction: column;
      gap: 0;
      max-height: 220px;
      overflow: hidden;
      border: none;
      border-radius: 0;
      background: transparent;
      padding-block: 4px 8px;
      padding-inline: 2px 6px;
      overscroll-behavior: contain;
      box-sizing: border-box
    }

    .fp-dropdown.open .fp-checklist {
      overflow-x: hidden;
      overflow-y: auto
    }

    .fp-checklist-empty {
      padding: 14px 10px;
      font-size: 12px;
      color: var(--text3);
      text-align: center;
      line-height: 1.4
    }

    .fp-checklist-item {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 8px;
      width: 100%;
      min-height: 40px;
      padding-block: 8px;
      padding-inline: 2px 8px;
      border: none;
      border-radius: 8px;
      background: transparent;
      font-family: var(--font);
      font-size: 13px;
      line-height: 1.35;
      color: var(--text);
      cursor: pointer;
      text-align: start;
      box-sizing: border-box;
      transition: background 0.12s, color 0.12s
    }

    .fp-checklist-item + .fp-checklist-item {
      margin-top: 2px
    }

    .fp-checklist-item:hover {
      background: color-mix(in srgb, var(--mr-text) 7%, var(--surface))
    }

    .fp-checklist-item.selected {
      background: color-mix(in srgb, var(--mr-text) 10%, var(--surface));
      color: var(--mr-text);
      font-weight: 600
    }

    .fp-checklist-item__check {
      grid-column: 1;
      grid-row: 1;
      width: 18px;
      height: 18px;
      border-radius: 5px;
      border: 1.5px solid var(--border2);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: transparent;
      font-size: 9px;
      transition: background 0.12s, border-color 0.12s, color 0.12s
    }

    .fp-checklist-item__label {
      grid-column: 2;
      grid-row: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .fp-checklist-item.selected .fp-checklist-item__check {
      background: var(--mr-text);
      border-color: var(--mr-text);
      color: var(--mr-surface)
    }

    #fp-vtype-list .fp-checklist-item__label {
      white-space: normal;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.35
    }

    #fp-vtype-list .fp-checklist-item {
      min-height: 44px;
      align-items: start;
      padding-block: 10px;
      padding-inline-start: 2px
    }

    #fp-vtype-list .fp-checklist-item__check {
      margin-top: 2px
    }

    .fp-chip,
    .fp-dropdown-trigger,
    .fp-checklist-item,
    .af-tag,
    .fp-btn {
      -webkit-user-select: none;
      user-select: none
    }

    .fp-chip {
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      border: 1.5px solid var(--border2);
      background: var(--surface);
      color: var(--text2);
      transition: 0.15s
    }

    .fp-chip:hover {
      border-color: var(--mr-text);
      color: var(--mr-text)
    }

    .fp-chip.active {
      background: var(--mr-text);
      color: var(--mr-surface);
      border-color: var(--mr-text)
    }

    .fp-chip.active-red {
      background: var(--red);
      color: #fff;
      border-color: var(--red)
    }

    .fp-chip.active-green {
      background: var(--green);
      color: #fff;
      border-color: var(--green)
    }

    .fp-chip.active-amber {
      background: var(--amber);
      color: #2a2200;
      border-color: var(--amber)
    }

    .fp-select {
      width: 100%;
      padding: 9px 12px;
      background: var(--surface);
      border: 1px solid var(--border2);
      border-radius: 8px;
      font-family: var(--font);
      font-size: 13px;
      color: var(--text);
      outline: none
    }

    .fp-select:focus {
      border-color: var(--mr-text)
    }

    .active-filters-bar {
      display: none;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      padding: 12px 14px;
      margin-top: -4px;
      margin-bottom: 14px;
      background: var(--surface2);
      border: 1px dashed var(--border2);
      border-radius: 10px
    }

    .active-filters-bar.show {
      display: flex
    }

    .af-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      background: color-mix(in srgb, var(--mr-text) 10%, var(--surface));
      color: var(--mr-text);
      border-radius: 20px;
      font-size: 12px;
      font-weight: 500
    }

    .af-tag button {
      background: none;
      border: none;
      color: var(--mr-text);
      cursor: pointer;
      font-size: 11px;
      padding: 0;
      display: flex;
      align-items: center
    }

    .af-clear-all {
      background: none;
      border: none;
      color: var(--red-text);
      font-family: var(--font);
      font-size: 12px;
      cursor: pointer;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      border-radius: 8px;
      transition: 0.15s
    }

    .af-clear-all:hover {
      background: var(--red-light)
    }

    /* Date Picker — الموضع يُحسب من .rp-date-wrap تحت زر التاريخ */
    .rp-date-wrap {
      position: relative;
      display: inline-flex;
      flex-direction: column;
      align-items: stretch;
      flex-shrink: 0;
    }

    .date-picker-popup {
      /* Figma MD2 layout — ألوان مرصاد (--mr-primary) */
      --md2-dp-primary: var(--mr-primary);
      --md2-dp-on-primary: #ffffff;
      --md2-dp-primary-hover: var(--mr-primary-hover);
      --md2-dp-range-bg: var(--mr-primary-soft);
      --md2-dp-range-text: var(--mr-primary);
      --md2-dp-on-surface: rgba(0, 0, 0, 0.87);
      --md2-dp-on-surface-variant: rgba(0, 0, 0, 0.54);
      --md2-dp-on-surface-disabled: rgba(0, 0, 0, 0.38);
      --md2-dp-state-hover: rgba(0, 0, 0, 0.04);
      --md2-dp-state-focus: var(--mr-primary-soft);
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      right: auto;
      width: 280px;
      max-width: min(280px, calc(100vw - 24px));
      flex-direction: column;
      align-items: center;
      background: var(--white-100, #fff);
      border: none;
      border-radius: 8px;
      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 24px 48px 0 rgba(0, 0, 0, 0.2);
      padding: 0;
      overflow: hidden;
      z-index: 100;
      display: none;
      animation: dpFade 0.2s ease;
      box-sizing: border-box
    }

    [data-theme="dark"] .date-picker-popup {
      --md2-dp-primary: #ffffff;
      --md2-dp-primary-hover: rgba(255, 255, 255, 0.72);
      --md2-dp-on-primary: #0f1224;
      --md2-dp-range-bg: rgba(255, 255, 255, 0.12);
      --md2-dp-range-text: rgba(255, 255, 255, 0.92);
      --md2-dp-on-surface: rgba(255, 255, 255, 0.92);
      --md2-dp-on-surface-variant: rgba(255, 255, 255, 0.65);
      --md2-dp-on-surface-disabled: rgba(255, 255, 255, 0.38);
      --md2-dp-state-hover: rgba(255, 255, 255, 0.08);
      --md2-dp-state-focus: rgba(255, 255, 255, 0.14);
      background: var(--mr-surface);
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35), 0 24px 48px rgba(0, 0, 0, 0.5)
    }

    [data-theme="dark"] .date-picker-popup .dp-quick-btn {
      color: #ffffff;
      border-color: rgba(255, 255, 255, 0.28)
    }

    [data-theme="dark"] .date-picker-popup .dp-quick-btn:hover {
      color: #ffffff;
      border-color: rgba(255, 255, 255, 0.45)
    }

    [data-theme="dark"] .date-picker-popup .dp-btn-today,
    [data-theme="dark"] .date-picker-popup .dp-btn-clear {
      color: #ffffff
    }

    [data-theme="dark"] .date-picker-popup .dp-btn-clear:hover {
      color: rgba(255, 255, 255, 0.85)
    }

    [data-theme="dark"] .date-picker-popup .dp-btn-apply {
      background: #ffffff;
      color: #0f1224
    }

    [data-theme="dark"] .date-picker-popup .dp-btn-apply:hover {
      background: rgba(255, 255, 255, 0.9);
      color: #0f1224
    }

    [data-theme="dark"] .date-picker-popup .dp-pick-cell.selected {
      background: #ffffff;
      color: #0f1224
    }

    /*
     * Figma 142:9428 — «picker date» (سطح أبيض، شريط شهر 40px، شبكة 32px، خلية 28px، زر Today نصّي)
     * https://www.figma.com/design/rMc2ygI3yLkIdt3gqrsvyz/Material-Design-2-web-starter-kit--Community-?node-id=142-9428&m=dev
     */
    .fig-dp1429428-top-spacer {
      width: 100%;
      height: 8px;
      flex-shrink: 0;
      align-self: stretch
    }

    .date-picker-popup .dp-header-fig {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      width: 100%;
      max-width: 256px;
      min-height: 40px;
      height: 40px;
      align-self: center;
      padding: 0 4px 0 8px;
      margin-bottom: 0
    }

    .date-picker-popup .dp-month-trigger {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 4px;
      min-width: 0;
      margin: 0;
      padding: 0;
      border: none;
      background: transparent;
      font: inherit;
      cursor: pointer;
      border-radius: 4px;
      color: var(--mr-text)
    }

    .date-picker-popup .dp-month-trigger:focus-visible {
      outline: none;
      box-shadow: 0 0 0 2px var(--white-100, var(--surface)), 0 0 0 4px var(--md2-dp-primary)
    }

    .date-picker-popup .dp-month-trigger .dp-month-label {
      pointer-events: none
    }

    .date-picker-popup .dp-month-chevron {
      display: flex;
      width: 24px;
      height: 24px;
      align-items: center;
      justify-content: center;
      color: var(--mr-text-3);
      font-size: 10px;
      flex-shrink: 0;
      pointer-events: none
    }

    .date-picker-popup .dp-month-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      max-width: 256px;
      margin: 0 auto 8px;
      padding: 4px 0
    }

    .date-picker-popup .dp-pick-cell {
      padding: 10px 6px;
      border: none;
      border-radius: 8px;
      background: transparent;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 500;
      line-height: 1.35;
      color: var(--mr-text);
      cursor: pointer;
      transition: background 0.12s, color 0.12s
    }

    .date-picker-popup .dp-pick-cell:hover {
      background: var(--md2-dp-state-hover)
    }

    .date-picker-popup .dp-pick-cell.selected {
      background: var(--md2-dp-primary, var(--blue));
      color: var(--md2-dp-on-primary, #fff);
      font-weight: 600
    }

    .date-picker-popup .dp-days.dp-mode-pick {
      display: block;
      max-width: 256px
    }

    .date-picker-popup.dp-picker-months .dp-quick-actions,
    .date-picker-popup.dp-picker-months .dp-weekdays {
      display: none !important
    }

    .date-picker-popup .dp-month-arrows {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 2px
    }

    .date-picker-popup .dp-icon-btn--nav {
      width: 24px;
      height: 24px;
      padding: 0;
      border: none;
      background: transparent;
      border-radius: 50%;
      color: var(--md2-dp-on-surface-variant);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      transition: background 0.15s, color 0.15s
    }

    .date-picker-popup .dp-icon-btn--nav:hover {
      background: var(--md2-dp-state-hover);
      color: var(--md2-dp-on-surface)
    }

    .date-picker-popup .dp-icon-btn--nav:focus-visible {
      outline: none;
      box-shadow: 0 0 0 2px var(--white-100, var(--surface)), 0 0 0 4px var(--md2-dp-primary)
    }

    .dp-popup-body {
      width: 100%;
      align-self: stretch;
      box-sizing: border-box;
      padding: 0 12px 8px;
      color: var(--md2-dp-on-surface)
    }

    .date-picker-popup .dp-popup-body {
      font-family: 'Roboto', sans-serif
    }

    .date-picker-popup .dp-weekdays,
    .date-picker-popup .dp-days {
      max-width: 256px;
      margin-left: auto;
      margin-right: auto
    }

    .date-picker-popup.open {
      display: inline-flex
    }

    /* عند الفتح: يُنقل إلى body لتفادي قصّه داخل .main (overflow-y: auto) */
    .date-picker-popup.dp-is-floating {
      position: fixed;
      z-index: 1200;
      max-height: min(420px, calc(100vh - 16px));
      overflow-x: hidden;
      overflow-y: auto
    }

    @keyframes dpFade {
      from {
        opacity: 0;
        transform: translateY(-6px)
      }

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

    .dp-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
      min-height: 48px
    }

    .dp-nav-btn {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: transparent;
      border: 1px solid var(--border2);
      color: var(--text2);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      transition: 0.15s
    }

    .dp-nav-btn:hover {
      background: var(--bg2);
      color: var(--text)
    }

    .dp-month-label {
      flex: 1;
      text-align: center;
      background: transparent;
      border: none;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      cursor: pointer;
      padding: 6px 12px;
      border-radius: 8px;
      transition: 0.15s
    }

    .date-picker-popup .dp-header-fig .dp-month-label {
      font-family: var(--font);
      flex: 1 1 auto;
      min-width: 0;
      text-align: left;
      font-weight: 500;
      font-size: 14px;
      line-height: 1.35;
      letter-spacing: 0;
      color: var(--mr-text);
      border-radius: 4px;
      padding: 0 2px 0 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .date-picker-popup .dp-header-fig .dp-month-label:hover {
      background: var(--md2-dp-state-hover)
    }

    .dp-month-label:hover {
      background: var(--bg2)
    }

    .dp-quick-actions {
      display: flex;
      gap: 6px;
      margin-bottom: 12px;
      flex-wrap: wrap
    }

    .date-picker-popup .dp-quick-actions {
      gap: 4px;
      margin-top: 4px;
      margin-bottom: 8px
    }

    .dp-quick-btn {
      flex: 1;
      padding: 6px 10px;
      background: var(--surface2);
      border: 1px solid transparent;
      border-radius: 8px;
      font-family: var(--font);
      font-size: 11px;
      color: var(--text2);
      cursor: pointer;
      transition: 0.15s;
      white-space: nowrap
    }

    .date-picker-popup .dp-quick-btn {
      flex: 1 1 auto;
      min-width: 0;
      padding: 6px 8px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.5px;
      color: var(--md2-dp-primary);
      background: transparent;
      border: 1px solid color-mix(in srgb, var(--md2-dp-primary) 32%, transparent)
    }

    .dp-quick-btn:hover {
      background: var(--blue-light);
      color: var(--blue-text);
      border-color: var(--blue)
    }

    .date-picker-popup .dp-quick-btn:hover {
      background: var(--md2-dp-state-focus);
      color: var(--md2-dp-primary);
      border-color: var(--md2-dp-primary)
    }

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

    .date-picker-popup .dp-weekdays {
      gap: 0;
      margin-bottom: 0;
      grid-template-columns: repeat(7, 32px);
      justify-content: center
    }

    .dp-weekdays span {
      text-align: center;
      font-size: 11px;
      font-weight: 600;
      color: var(--text3);
      padding: 6px 0
    }

    .date-picker-popup .dp-weekdays span {
      font-family: 'Roboto', sans-serif;
      font-size: 12px;
      font-weight: 400;
      line-height: 16px;
      letter-spacing: 0;
      color: var(--md2-dp-on-surface-variant);
      padding: 0;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box
    }

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

    .date-picker-popup .dp-days {
      gap: 0;
      grid-template-columns: repeat(7, 32px);
      justify-content: center;
      touch-action: none;
      user-select: none;
      cursor: grab
    }

    #datePickerPopup .dp-days:not(.dp-mode-pick) {
      min-height: 192px
    }

    .date-picker-popup .dp-days.is-dragging {
      cursor: grabbing
    }

    .date-picker-popup .dp-days.is-dragging .dp-day[data-iso] {
      transition: background-color .16s cubic-bezier(.22, 1, .36, 1), color .16s ease, border-radius .16s cubic-bezier(.22, 1, .36, 1), border-color .16s ease
    }

    @media (prefers-reduced-motion: reduce) {
.date-picker-popup .dp-days.is-dragging .dp-day[data-iso] {
        transition: none !important
      }
}

    .dp-day {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: var(--text);
      cursor: pointer;
      border-radius: 8px;
      transition: 0.1s;
      font-family: var(--mono);
      background: transparent;
      border: none;
      font-weight: 500;
      position: relative
    }

    .date-picker-popup .dp-day {
      aspect-ratio: unset;
      box-sizing: border-box;
      width: 32px;
      height: 32px;
      min-width: 32px;
      min-height: 32px;
      max-width: 32px;
      max-height: 32px;
      margin: 0;
      padding: 0;
      justify-self: center;
      align-self: center;
      overflow: visible;
      border-radius: 50%;
      font-family: 'Roboto', sans-serif;
      font-size: 12px;
      font-weight: 400;
      line-height: 16px;
      letter-spacing: 0;
      color: var(--md2-dp-on-surface)
    }

    .date-picker-popup {
      --rp-dp-viol-dot: #e7000b;
      --rp-dp-viol-pulse: color-mix(in srgb, #e7000b 44%, transparent)
    }

    [data-theme="dark"] .date-picker-popup {
      --rp-dp-viol-dot: #ff1a1a;
      --rp-dp-viol-pulse: color-mix(in srgb, #ff1a1a 52%, transparent)
    }

    .date-picker-popup .dp-day.has-viol {
      display: grid;
      grid-template-rows: 17px 5px;
      align-content: center;
      justify-items: center;
      row-gap: 2px;
      padding: 0;
      line-height: 1
    }

    .date-picker-popup .dp-day__stack {
      display: contents;
      pointer-events: none
    }

    .date-picker-popup .dp-day__num {
      grid-row: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 17px;
      margin: 0;
      padding: 0;
      line-height: 1;
      font-size: 12px;
      font-weight: inherit;
      font-variant-numeric: tabular-nums;
      text-align: center
    }

    .date-picker-popup .dp-day__viol-dot {
      grid-row: 2;
      display: block;
      width: 3.5px;
      height: 3.5px;
      margin: 0;
      border-radius: 50%;
      background: var(--rp-dp-viol-dot);
      box-shadow: 0 0 0 0 var(--rp-dp-viol-pulse);
      justify-self: center;
      align-self: start;
      animation: rp-dp-dot-pulse 2.1s ease-in-out infinite
    }

    .date-picker-popup .dp-day.has-viol.start .dp-day__viol-dot,
    .date-picker-popup .dp-day.has-viol.end .dp-day__viol-dot {
      background: var(--rp-dp-viol-dot);
      box-shadow: 0 0 0 1px color-mix(in srgb, #fff 72%, var(--rp-dp-viol-dot));
      animation: rp-dp-dot-pulse 2.1s ease-in-out infinite
    }

    @keyframes rp-dp-dot-pulse {
      0%, 100% {
        transform: scale(1);
        opacity: .94;
        box-shadow: 0 0 0 0 var(--rp-dp-viol-pulse)
      }

      50% {
        transform: scale(1.22);
        opacity: 1;
        box-shadow: 0 0 0 4px var(--rp-dp-viol-pulse)
      }
    }

    @media (prefers-reduced-motion: reduce) {
.date-picker-popup .dp-day__viol-dot {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        box-shadow: none !important
      }
}

    .dp-day:hover:not(.disabled):not(.in-range):not(.start):not(.end) {
      background: var(--bg2)
    }

    .date-picker-popup .dp-day:hover:not(.disabled):not(.in-range):not(.start):not(.end) {
      background: var(--md2-dp-state-hover)
    }

    .dp-day.other-month {
      color: var(--text3);
      opacity: 0.4
    }

    .date-picker-popup .dp-day.other-month {
      color: var(--md2-dp-on-surface-disabled);
      opacity: 1
    }

    .dp-day.disabled {
      color: var(--text3);
      cursor: not-allowed;
      opacity: 0.3
    }

    .date-picker-popup .dp-day.disabled {
      color: var(--md2-dp-on-surface-disabled);
      opacity: 1
    }

    .date-picker-popup .dp-day.today:not(.start):not(.end):not(.in-range) {
      font-weight: 400;
      color: var(--md2-dp-on-surface);
      background: transparent;
      border: 1px solid rgba(0, 0, 0, 0.87);
      box-sizing: border-box
    }

    [data-theme="dark"] .date-picker-popup .dp-day.today:not(.start):not(.end):not(.in-range) {
      border-color: rgba(255, 255, 255, 0.87);
      color: var(--md2-dp-on-surface)
    }

    .date-picker-popup .dp-day.today.start,
    .date-picker-popup .dp-day.today.end {
      border: none
    }

    .date-picker-popup .dp-day.in-range {
      border-radius: 0;
      background: var(--md2-dp-range-bg);
      color: var(--md2-dp-range-text)
    }

    .date-picker-popup .dp-day.start,
    .date-picker-popup .dp-day.end {
      border-radius: 0;
      background: var(--md2-dp-primary);
      color: var(--md2-dp-on-primary);
      font-weight: 400
    }

    [data-theme="dark"] .date-picker-popup .dp-day.start,
    [data-theme="dark"] .date-picker-popup .dp-day.end {
      background: var(--md2-dp-primary);
      color: var(--md2-dp-on-primary)
    }

    .dp-day.start {
      border-radius: 8px 0 0 8px
    }

    .dp-day.end {
      border-radius: 0 8px 8px 0
    }

    .dp-day.start.end {
      border-radius: 8px
    }

    .date-picker-popup .dp-day.start.end {
      border-radius: 50%
    }

    .date-picker-popup .dp-day.start:not(.end) {
      border-radius: 16px 0 0 16px
    }

    .date-picker-popup .dp-day.end:not(.start) {
      border-radius: 0 16px 16px 0
    }

    html[dir="rtl"] .date-picker-popup .dp-day.start:not(.end) {
      border-radius: 0 16px 16px 0
    }

    html[dir="rtl"] .date-picker-popup .dp-day.end:not(.start) {
      border-radius: 16px 0 0 16px
    }

    .date-picker-popup.dp-range-pending .dp-day.start:not(.end) {
      border-radius: 50%
    }

    .dp-footer {
      display: flex;
      gap: 8px;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--border)
    }

    .date-picker-popup .dp-footer {
      margin-top: 4px;
      padding: 8px;
      max-width: 256px;
      margin-left: auto;
      margin-right: auto;
      width: 100%;
      box-sizing: border-box;
      border-top: 1px solid rgba(0, 0, 0, 0.12);
      justify-content: flex-end;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap
    }

    .date-picker-popup .dp-footer-spacer {
      flex: 1 1 auto;
      min-width: 8px
    }

    [data-theme="dark"] .date-picker-popup .dp-footer {
      border-top-color: rgba(255, 255, 255, 0.12)
    }

    .dp-btn {
      flex: 1;
      padding: 9px 14px;
      border-radius: 8px;
      font-family: var(--font);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid transparent;
      transition: 0.15s
    }

    .date-picker-popup .dp-btn {
      flex: 0 0 auto;
      min-width: 64px;
      padding: 0 8px;
      height: 36px;
      border-radius: 4px;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.25px
    }

    .date-picker-popup .dp-btn-today {
      min-width: 48px;
      padding: 0 8px;
      height: 36px;
      font-family: 'Roboto', sans-serif;
      font-weight: 500;
      font-size: 14px;
      line-height: 24px;
      letter-spacing: 0.14px;
      text-transform: none;
      color: var(--md2-dp-primary);
      background: transparent;
      border: none;
      cursor: pointer;
      transition: background 0.15s
    }

    .date-picker-popup .dp-btn-today:hover {
      background: var(--md2-dp-state-focus)
    }

    .dp-btn-clear {
      background: var(--surface);
      color: var(--text2);
      border-color: var(--border2)
    }

    .date-picker-popup .dp-btn-clear {
      background: transparent;
      color: var(--md2-dp-primary);
      border: none;
      box-shadow: none
    }

    .date-picker-popup .dp-btn-clear:hover {
      background: var(--md2-dp-state-focus);
      color: var(--md2-dp-primary-hover);
      border: none
    }

    .dp-btn-clear:hover {
      background: var(--red-light);
      color: var(--red-text);
      border-color: var(--red)
    }

    .date-picker-popup .dp-btn-apply {
      background: var(--md2-dp-primary);
      color: var(--md2-dp-on-primary);
      border: none;
      padding: 0 16px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.12)
    }

    .date-picker-popup .dp-btn-apply:hover {
      background: var(--md2-dp-primary-hover);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 3px 4px rgba(0, 0, 0, 0.12)
    }

    .dp-btn-apply {
      background: var(--blue);
      color: #fff
    }

    .dp-btn-apply:hover {
      background: var(--blue-text)
    }

    /* Notifications */
    .notif-panel {
      position: fixed;
      z-index: 1100;
      width: min(320px, calc(100vw - 20px));
      max-height: min(360px, calc(100dvh - 96px));
      background: var(--mr-surface);
      border: 1px solid var(--mr-border);
      border-radius: 14px;
      box-shadow: 0 10px 36px rgba(15, 18, 36, 0.12), 0 2px 8px rgba(15, 18, 36, 0.06);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      touch-action: pan-y;
      overscroll-behavior: contain
    }

    .notif-panel-backdrop {
      display: block;
      position: fixed;
      inset: 0;
      z-index: 1095;
      background: transparent;
      touch-action: none;
      visibility: hidden;
      opacity: 0;
      pointer-events: none
    }

    body.notif-panel-open .notif-panel-backdrop {
      visibility: visible;
      opacity: 1;
      pointer-events: auto
    }

    .notif-panel.open {
      visibility: visible;
      opacity: 1;
      pointer-events: auto
    }

    [data-theme="dark"] .notif-panel {
      background: var(--mr-surface);
      border-color: var(--mr-border-2);
      box-shadow: 0 14px 40px rgba(0, 0, 0, 0.34), 0 2px 8px rgba(0, 0, 0, 0.18)
    }

    .notif-header {
      padding: 10px 12px;
      border-bottom: 1px solid var(--mr-border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      background: var(--mr-surface);
      flex-shrink: 0
    }

    .notif-header h4 {
      margin: 0;
      font-size: 13px;
      font-weight: 700;
      color: var(--mr-text)
    }

    .notif-header .notif-count {
      font-size: 10px;
      color: var(--mr-text-3);
      margin-top: 1px
    }

    .notif-mark-all {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 5px 8px;
      border-radius: 8px;
      background: transparent;
      border: 1px solid transparent;
      color: var(--mr-primary);
      font-family: var(--font);
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.15s ease, border-color 0.15s ease;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation
    }

    .notif-mark-all:focus {
      outline: none
    }

    .notif-mark-all:focus-visible {
      outline: 2px solid var(--mr-primary-soft);
      outline-offset: 2px
    }

    .notif-page-actions {
      display: none !important
    }

    .notif-page-topbar__tools {
      display: flex;
      align-items: center;
      gap: 0;
      flex-shrink: 0
    }

    .notif-page-topbar .notif-mark-all {
      flex-shrink: 0
    }

    .notif-mark-all--danger {
      color: var(--red-text)
    }

    .notif-mark-all--danger:hover {
      background: color-mix(in srgb, var(--red-text) 8%, transparent);
      border-color: color-mix(in srgb, var(--red-text) 18%, transparent)
    }

    .notif-action-btn {
      display: none
    }

    .notif-mark-all:hover {
      background: var(--mr-primary-softer);
      border-color: color-mix(in srgb, var(--mr-primary) 18%, transparent);
      text-decoration: none
    }

    [data-theme="dark"] .notif-page-topbar .notif-mark-all:not(.notif-mark-all--danger),
    [data-theme="dark"] .notif-page-topbar .notif-mark-all:not(.notif-mark-all--danger) i {
      color: #fff
    }

    [data-theme="dark"] .notif-page-topbar .notif-mark-all:not(.notif-mark-all--danger):hover,
    [data-theme="dark"] .notif-page-topbar .notif-mark-all:not(.notif-mark-all--danger):active,
    [data-theme="dark"] .notif-page-topbar .notif-mark-all:not(.notif-mark-all--danger):focus,
    [data-theme="dark"] .notif-page-topbar .notif-mark-all:not(.notif-mark-all--danger):focus-visible {
      color: #fff;
      background: transparent;
      border-color: transparent
    }

    [data-theme="dark"] .notif-page-topbar .notif-mark-all:not(.notif-mark-all--danger):hover i,
    [data-theme="dark"] .notif-page-topbar .notif-mark-all:not(.notif-mark-all--danger):active i,
    [data-theme="dark"] .notif-page-topbar .notif-mark-all:not(.notif-mark-all--danger):focus i {
      color: #fff
    }

    .notif-list {
      overflow-y: auto;
      flex: 1 1 auto;
      min-height: 0;
      touch-action: pan-y;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch
    }

    .notif-list::-webkit-scrollbar {
      width: 5px
    }

    .notif-list::-webkit-scrollbar-thumb {
      background: var(--mr-border-2);
      border-radius: 999px
    }

    .notif-item {
      padding: 8px 10px;
      cursor: pointer;
      transition: background 0.15s ease, transform 0.2s ease;
      display: flex;
      gap: 10px;
      position: relative;
      z-index: 1;
      text-align: right;
      background: var(--mr-bg-2);
      transform: translateX(var(--notif-swipe-x, 0));
      touch-action: pan-y
    }

    .notif-swipe {
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid var(--mr-border)
    }

    .notif-swipe:last-child {
      border-bottom: 0
    }

    .notif-list.notif-list--swiping {
      overflow: hidden;
      touch-action: none;
      overscroll-behavior: contain
    }

    .notif-swipe.is-snap-back .notif-item {
      transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1)
    }

    .notif-swipe.is-snap-back .notif-swipe-delete__rail {
      transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1), background 0.18s ease
    }

    .notif-swipe.is-dragging .notif-item {
      transition: none;
      will-change: transform
    }

    .notif-swipe.is-dragging {
      touch-action: none
    }

    .notif-swipe.is-dragging .notif-swipe-delete__rail {
      transition: none;
      will-change: width
    }

    .notif-swipe.is-delete-ready .notif-swipe-delete__rail {
      background: color-mix(in srgb, var(--red-text) 16%, var(--red-light))
    }

    .notif-swipe.is-delete-ready .notif-swipe-delete__icon {
      transform: scale(1.1);
      background: color-mix(in srgb, var(--red-text) 18%, transparent);
      box-shadow: 0 2px 10px color-mix(in srgb, var(--red-text) 14%, transparent)
    }

    .notif-swipe.is-dismissing .notif-item {
      transition: transform 0.22s ease;
      opacity: 0.72
    }

    .notif-swipe.is-dismissing .notif-swipe-delete__rail {
      width: 100% !important;
      background: color-mix(in srgb, var(--red-text) 20%, var(--red-light))
    }

    .notif-swipe.is-open .notif-item {
      transform: translateX(-72px)
    }

    .notif-swipe-delete {
      position: absolute;
      inset: 0;
      border: 0;
      margin: 0;
      padding: 0;
      background: transparent;
      overflow: hidden;
      pointer-events: none
    }

    .notif-swipe-delete__rail {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: max(0px, calc(-1 * var(--notif-swipe-x, 0px)));
      min-width: 0;
      max-width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding-inline: 6px;
      box-sizing: border-box;
      background: var(--red-light);
      color: var(--red-text);
      overflow: hidden;
      transition: width 0.2s ease, background 0.18s ease
    }

    .notif-swipe:not(.is-dragging):not(.is-dismissing):not(.is-snap-back) .notif-swipe-delete__rail {
      width: 0 !important;
      background: var(--red-light)
    }

    .notif-swipe-delete__icon {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 14px;
      color: var(--red-text);
      background: color-mix(in srgb, var(--red-text) 12%, transparent);
      border: 1px solid color-mix(in srgb, var(--red-text) 14%, transparent);
      box-shadow: none;
      transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease
    }

    .notif-swipe-delete__label {
      font-family: var(--font);
      font-size: 10px;
      font-weight: 700;
      line-height: 1.1;
      color: var(--red-text);
      opacity: 0;
      transform: translateY(5px) scale(0.94);
      transition: opacity 0.16s ease, transform 0.16s ease;
      white-space: nowrap
    }

    .notif-swipe.is-past-delete .notif-swipe-delete__label {
      opacity: 1;
      transform: translateY(0) scale(1)
    }

    [data-theme="dark"] .notif-swipe.is-delete-ready .notif-swipe-delete__rail {
      background: color-mix(in srgb, var(--red-text) 22%, var(--red-light))
    }

    .notif-item:last-child {
      border-bottom: 0
    }

    .notif-item:hover {
      background: var(--mr-bg-2)
    }

    .notif-item.unread {
      background: var(--mr-surface)
    }

    .notif-item.unread::before {
      content: '';
      position: absolute;
      inset-inline-end: 8px;
      top: 50%;
      transform: translateY(-50%);
      width: 7px;
      height: 7px;
      background: #dc2626;
      border-radius: 50%;
      box-shadow: 0 0 0 2px color-mix(in srgb, #dc2626 18%, transparent)
    }

    .notif-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 13px
    }

    .notif-icon.blue {
      background: var(--blue-light);
      color: var(--blue-text)
    }

    .notif-icon.amber {
      background: var(--amber-light);
      color: var(--amber-text)
    }

    .notif-icon.red {
      background: var(--red-light);
      color: var(--red-text)
    }

    .notif-icon.green {
      background: var(--green-light);
      color: var(--green-text)
    }

    .notif-icon.purple {
      background: var(--purple-light);
      color: var(--purple-text)
    }

    .notif-body {
      flex: 1;
      min-width: 0
    }

    .notif-title {
      font-size: 12px;
      font-weight: 600;
      color: var(--mr-text);
      margin-bottom: 2px;
      line-height: 1.35
    }

    .notif-msg {
      font-size: 11px;
      color: var(--mr-text-2);
      line-height: 1.45;
      margin-bottom: 3px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden
    }

    .notif-item--broadcast {
      align-items: flex-start;
      padding: 12px 10px;
      gap: 12px
    }

    .notif-item--broadcast .notif-icon {
      width: 40px;
      height: 40px;
      font-size: 16px;
      margin-top: 2px;
      flex-shrink: 0
    }

    .notif-item--broadcast .notif-title {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 4px;
      line-height: 1.4
    }

    .notif-bc-tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 10px;
      font-weight: 700;
      padding: 3px 9px;
      border-radius: 999px;
      margin-bottom: 6px;
      line-height: 1.2
    }

    .notif-bc-tag--circular {
      background: color-mix(in srgb, var(--mr-blue) 14%, var(--mr-surface));
      color: var(--mr-blue)
    }

    .notif-bc-tag--motivational {
      background: color-mix(in srgb, var(--mk-success) 16%, var(--mr-surface));
      color: var(--green-text)
    }

    .notif-bc-tag--alert {
      background: color-mix(in srgb, var(--mk-warning) 18%, var(--mr-surface));
      color: var(--amber-text, #b45309)
    }

    .notif-msg--broadcast {
      display: block;
      overflow: visible;
      -webkit-line-clamp: unset;
      font-size: 12px;
      line-height: 1.55;
      color: var(--mr-text);
      white-space: pre-wrap;
      word-break: break-word;
      margin-bottom: 6px
    }

    .notif-item--broadcast .notif-time {
      font-size: 10px
    }

    .bc-notif-detail-card {
      max-width: min(520px, calc(100vw - 32px));
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 2px solid var(--mr-border);
      border-radius: 16px;
      box-shadow: 0 18px 48px rgba(15, 18, 36, 0.16);
      background: var(--mr-surface)
    }

    .bc-notif-detail-card--circular {
      border-color: color-mix(in srgb, var(--mr-blue) 72%, var(--mr-border));
      box-shadow: 0 18px 48px rgba(15, 18, 36, 0.14), 0 0 0 1px color-mix(in srgb, var(--mr-blue) 18%, transparent)
    }

    .bc-notif-detail-card--motivational {
      border-color: color-mix(in srgb, var(--mk-success) 72%, var(--mr-border));
      box-shadow: 0 18px 48px rgba(15, 18, 36, 0.14), 0 0 0 1px color-mix(in srgb, var(--mk-success) 18%, transparent)
    }

    .bc-notif-detail-card--alert {
      border-color: color-mix(in srgb, var(--mk-warning, #f59e0b) 72%, var(--mr-border));
      box-shadow: 0 18px 48px rgba(15, 18, 36, 0.14), 0 0 0 1px color-mix(in srgb, var(--mk-warning, #f59e0b) 18%, transparent)
    }

    .bc-notif-detail-head {
      padding: 16px 18px 12px;
      border-bottom: 1px solid color-mix(in srgb, var(--mr-border) 80%, transparent);
      background: var(--mr-surface)
    }

    .bc-notif-detail-head__top {
      margin-bottom: 10px
    }

    .bc-notif-detail-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 999px;
      line-height: 1.2
    }

    .bc-notif-detail-tag--circular {
      background: color-mix(in srgb, var(--mr-blue) 14%, var(--mr-surface));
      color: var(--mr-blue)
    }

    .bc-notif-detail-tag--motivational {
      background: color-mix(in srgb, var(--mk-success) 16%, var(--mr-surface));
      color: var(--green-text)
    }

    .bc-notif-detail-tag--alert {
      background: color-mix(in srgb, var(--mk-warning) 18%, var(--mr-surface));
      color: var(--amber-text, #b45309)
    }

    .bc-notif-detail-head h3 {
      margin: 0;
      font-size: 17px;
      font-weight: 700;
      color: var(--mr-text);
      line-height: 1.45
    }

    .bc-notif-detail-time {
      margin-top: 6px;
      font-size: 11px;
      color: var(--mr-text-3)
    }

    .bc-notif-detail-body {
      padding: 16px 18px;
      font-size: 14px;
      line-height: 1.7;
      color: var(--mr-text);
      white-space: pre-wrap;
      word-break: break-word;
      overflow-y: auto;
      max-height: min(52vh, 420px);
      background: var(--mr-surface)
    }

    .bc-notif-detail-foot {
      padding: 12px 18px 18px;
      border-top: 1px solid color-mix(in srgb, var(--mr-border) 80%, transparent);
      background: var(--mr-surface)
    }

    .bc-notif-detail-read-btn {
      width: 100%;
      min-height: 44px;
      padding: 10px 18px;
      border: 0;
      border-radius: 999px;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      cursor: pointer;
      transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
      box-shadow: 0 4px 14px rgba(15, 18, 36, 0.12)
    }

    .bc-notif-detail-read-btn i {
      font-size: 13px
    }

    .bc-notif-detail-read-btn:hover {
      filter: brightness(1.05);
      box-shadow: 0 6px 18px rgba(15, 18, 36, 0.16)
    }

    .bc-notif-detail-read-btn:active {
      transform: scale(0.98)
    }

    .bc-notif-detail-card--circular .bc-notif-detail-read-btn {
      background: linear-gradient(135deg, color-mix(in srgb, var(--mr-blue) 92%, #fff), var(--mr-blue));
      color: #fff
    }

    .bc-notif-detail-card--motivational .bc-notif-detail-read-btn {
      background: linear-gradient(135deg, color-mix(in srgb, var(--mk-success) 92%, #fff), var(--mk-success));
      color: #fff
    }

    .bc-notif-detail-card--alert .bc-notif-detail-read-btn {
      background: linear-gradient(135deg, color-mix(in srgb, var(--mk-warning, #f59e0b) 92%, #fff), var(--mk-warning, #f59e0b));
      color: #fff
    }

    @media (max-width: 992px) and (pointer: coarse) {
      #broadcastNotifModal.modal.open {
        align-items: center !important;
        justify-content: center !important;
        padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)) !important;
        box-sizing: border-box
      }

      #broadcastNotifModal .bc-notif-detail-card {
        width: min(520px, calc(100vw - 32px)) !important;
        max-width: min(520px, calc(100vw - 32px)) !important;
        max-height: min(85dvh, calc(100dvh - 32px)) !important;
        border-radius: 16px !important;
        margin: 0 auto !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important
      }

      #broadcastNotifModal .bc-notif-detail-body {
        max-height: min(45dvh, 360px)
      }
    }

    .notif-time {
      font-size: 9px;
      line-height: 1.2;
      color: var(--mk-text-3);
      font-family: var(--font);
      white-space: nowrap
    }

    .notif-empty {
      padding: 20px 12px;
      text-align: center;
      color: var(--mr-text-3)
    }

    .notif-empty i {
      font-size: 24px;
      margin-bottom: 8px;
      opacity: 0.45;
      display: block
    }

    .notif-empty p {
      margin: 0;
      font-size: 12px
    }

    #tab-notifications .notif-page-shell {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      min-height: 0;
      height: 100%;
      overflow: hidden;
      padding: 0 4px calc(env(safe-area-inset-bottom, 0px) + 8px);
      box-sizing: border-box
    }

    /* Notifications page — جوال: ملء الشاشة وإخفاء الشريط */
    html.mr-notif-page-active.mr-mobile-ui #appWrap .app-body {
      overflow: hidden;
      min-height: 0
    }

    html.mr-notif-page-active.mr-mobile-ui #appWrap .main {
      margin-inline-start: 0 !important;
      width: 100% !important;
      max-width: none !important;
      padding: 0 !important;
      min-height: 0 !important;
      height: 100dvh !important;
      overflow: hidden !important;
      display: flex !important;
      flex-direction: column !important
    }

    html.mr-notif-page-active.mr-mobile-ui #appWrap .content {
      padding: 0 !important;
      min-height: 0 !important;
      flex: 1 1 auto;
      overflow: hidden !important;
      display: flex !important;
      flex-direction: column !important;
      max-width: none !important
    }

    html.mr-notif-page-active.mr-mobile-ui #appWrap .topbar,
    html.mr-notif-page-active.mr-mobile-ui #appWrap .sidebar,
    html.mr-notif-page-active.mr-mobile-ui #appWrap .page-title-bar,
    html.mr-notif-page-active.mr-mobile-ui #mobileBottomNav,
    html.mr-notif-page-active.mr-mobile-ui #appWrap > .app-shell > #mobileBottomNav.mobile-bottom-nav,
    html.mr-notif-page-active.mr-mobile-ui #mobileBottomNav.mobile-bottom-nav {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important
    }

    html.mr-notif-page-active.mr-mobile-ui #appWrap > .app-shell {
      padding-top: 0 !important
    }

    html.mr-notif-page-active.mr-mobile-ui #tab-notifications.active {
      display: flex !important;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
      height: auto;
      overflow: hidden;
      background: var(--mr-bg)
    }

    html.mr-mobile-ui #tab-notifications .notif-page-shell {
      will-change: transform
    }

    html.mr-mobile-ui #tab-notifications .notif-page-shell.notif-page-slide-prep {
      transform: translate3d(-100%, 0, 0)
    }

    html.mr-mobile-ui #tab-notifications .notif-page-shell.notif-page-slide-in {
      animation: notifPageSlideIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) both
    }

    html.mr-mobile-ui #tab-notifications .notif-page-shell.notif-page-slide-out {
      animation: notifPageSlideOut 0.28s cubic-bezier(0.4, 0, 0.8, 0.5) both
    }

    @keyframes notifPageSlideIn {
      from { transform: translate3d(-100%, 0, 0) }
      to { transform: translate3d(0, 0, 0) }
    }

    @keyframes notifPageSlideOut {
      from { transform: translate3d(0, 0, 0) }
      to { transform: translate3d(-100%, 0, 0) }
    }

    @keyframes notifPlatformPushOut {
      from { transform: translate3d(0, 0, 0) }
      to { transform: translate3d(100%, 0, 0) }
    }

    @keyframes notifPlatformPushIn {
      from { transform: translate3d(100%, 0, 0) }
      to { transform: translate3d(0, 0, 0) }
    }

    html.mr-notif-push-prep.mr-mobile-ui,
    html.mr-notif-push-in.mr-mobile-ui,
    html.mr-notif-push-out.mr-mobile-ui,
    html.mr-notif-push-settled.mr-mobile-ui {
      overflow: hidden !important
    }

    html.mr-notif-push-prep.mr-mobile-ui #appWrap > .app-shell,
    html.mr-notif-push-in.mr-mobile-ui #appWrap > .app-shell,
    html.mr-notif-push-out.mr-mobile-ui #appWrap > .app-shell,
    html.mr-notif-push-settled.mr-mobile-ui #appWrap > .app-shell {
      will-change: transform;
      backface-visibility: hidden
    }

    html.mr-notif-push-in.mr-mobile-ui #appWrap > .app-shell {
      animation: notifPlatformPushOut 0.34s cubic-bezier(0.22, 1, 0.36, 1) both
    }

    html.mr-notif-push-out.mr-mobile-ui #appWrap > .app-shell {
      animation: notifPlatformPushIn 0.28s cubic-bezier(0.4, 0, 0.8, 0.5) both
    }

    html.mr-notif-push-settled.mr-mobile-ui #appWrap > .app-shell {
      transform: translate3d(100%, 0, 0);
      pointer-events: none
    }

    @media (prefers-reduced-motion: reduce) {
      html.mr-notif-push-in.mr-mobile-ui #appWrap > .app-shell,
      html.mr-notif-push-out.mr-mobile-ui #appWrap > .app-shell {
        animation: none !important;
        transform: none !important
      }

      html.mr-notif-push-settled.mr-mobile-ui #appWrap > .app-shell {
        transform: none !important;
        pointer-events: auto !important
      }

      html.mr-mobile-ui #tab-notifications .notif-page-shell.notif-page-slide-prep,
      html.mr-mobile-ui #tab-notifications .notif-page-shell.notif-page-slide-in,
      html.mr-mobile-ui #tab-notifications .notif-page-shell.notif-page-slide-out {
        animation: none !important;
        transform: none !important
      }
    }

    html.mr-mobile-ui #tab-notifications.notif-tab-overlay {
      position: fixed !important;
      inset: 0;
      z-index: 2900;
      display: flex !important;
      flex-direction: column;
      min-height: 0;
      overflow: visible;
      background: transparent !important;
      pointer-events: none;
      padding: 0;
      box-sizing: border-box
    }

    html.mr-mobile-ui #tab-notifications.notif-tab-overlay .notif-page-shell {
      height: 100%;
      min-height: 0;
      background: var(--mr-bg);
      pointer-events: auto;
      padding: 0 4px calc(env(safe-area-inset-bottom, 0px) + 8px);
      box-sizing: border-box
    }

    html.mr-mobile-ui #tab-notifications.notif-tab-overlay .notif-page-head {
      padding-top: max(2px, env(safe-area-inset-top, 0px))
    }

    html.mr-mobile-ui #tab-notifications.notif-tab-overlay .notif-page-topbar {
      padding: 0 4px 6px;
      min-height: 30px
    }

    html.mr-mobile-ui #tab-notifications.notif-tab-overlay .notif-page-filters {
      padding: 0 4px 4px;
      gap: 4px
    }

    html.mr-notif-slide-exiting.mr-mobile-ui .tab-content.active:not(.notif-tab-overlay) {
      display: flex !important;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
      height: auto;
      overflow: hidden;
      background: var(--mr-bg);
      visibility: visible !important
    }

    html.mr-notif-slide-exiting.mr-notif-page-active.mr-mobile-ui #appWrap .main,
    html.mr-notif-slide-exiting.mr-notif-page-active.mr-mobile-ui #appWrap .content {
      min-height: 0 !important;
      overflow: hidden !important
    }

    /* Notifications page — ديسكتوب: صفحة كاملة تحت الشريط العلوي مع سكرول داخلي */
    @media (min-width: 993px), (hover: hover) and (pointer: fine) {
      html.mr-notif-page-active.mr-desktop-ui #appWrap .main:has(#tab-notifications.active) {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden !important;
        padding: 4px 6px 6px !important
      }

      html.mr-notif-page-active.mr-desktop-ui #appWrap .content:has(#tab-notifications.active) {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        width: 100%;
        max-width: none;
        padding: 0 !important
      }

      html.mr-notif-page-active.mr-desktop-ui #tab-notifications.active {
        display: flex !important;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        overflow: hidden;
        background: var(--mr-bg)
      }

      html.mr-notif-page-active.mr-desktop-ui #tab-notifications .notif-page-shell {
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        overflow: hidden;
        padding: 0;
        display: flex;
        flex-direction: column
      }

      html.mr-notif-page-active.mr-desktop-ui #tab-notifications .notif-page-head {
        padding-top: 0;
        flex-shrink: 0
      }

      html.mr-notif-page-active.mr-desktop-ui #tab-notifications .notif-page-topbar {
        padding: 0 0 2px
      }

      html.mr-notif-page-active.mr-desktop-ui #tab-notifications .notif-page-filters {
        padding: 0 0 4px;
        gap: 4px
      }

      html.mr-notif-page-active.mr-desktop-ui #tab-notifications .notif-list--page {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        border-radius: 10px
      }
    }

    /* ── Profile page (full screen from topbar user icon) ── */
    #tab-profile .profile-page-shell {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      min-height: 0;
      height: 100%;
      overflow: hidden;
      padding: 0 4px calc(env(safe-area-inset-bottom, 0px) + 8px);
      box-sizing: border-box
    }

    html.mr-profile-page-active.mr-mobile-ui #appWrap .app-body {
      overflow: hidden;
      min-height: 0
    }

    html.mr-profile-page-active.mr-mobile-ui #appWrap .main {
      margin-inline-start: 0 !important;
      width: 100% !important;
      max-width: none !important;
      padding: 0 !important;
      min-height: 0 !important;
      height: 100dvh !important;
      overflow: hidden !important;
      display: flex !important;
      flex-direction: column !important
    }

    html.mr-profile-page-active.mr-mobile-ui #appWrap .content {
      padding: 0 !important;
      min-height: 0 !important;
      flex: 1 1 auto;
      overflow: hidden !important;
      display: flex !important;
      flex-direction: column !important;
      max-width: none !important
    }

    html.mr-profile-page-active.mr-mobile-ui #appWrap .topbar,
    html.mr-profile-page-active.mr-mobile-ui #appWrap .sidebar,
    html.mr-profile-page-active.mr-mobile-ui #appWrap .page-title-bar,
    html.mr-mobile-ui:has(#tab-profile.active) #mobileBottomNav,
    html.mr-mobile-ui:has(#tab-profile.active) #appWrap > .app-shell > #mobileBottomNav.mobile-bottom-nav,
    html.mr-mobile-ui:has(#tab-profile.active) #mobileBottomNav.mobile-bottom-nav,
    html.mr-profile-page-active.mr-mobile-ui #mobileBottomNav,
    html.mr-profile-page-active.mr-mobile-ui #appWrap > .app-shell > #mobileBottomNav.mobile-bottom-nav,
    html.mr-profile-page-active.mr-mobile-ui #mobileBottomNav.mobile-bottom-nav {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
      opacity: 0 !important;
      transition: none !important
    }

    html.mr-profile-page-active.mr-mobile-ui #appWrap > .app-shell {
      padding-top: 0 !important
    }

    html.mr-profile-page-active.mr-mobile-ui #tab-profile.active {
      display: flex !important;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
      height: auto;
      overflow: hidden;
      background: var(--mr-bg)
    }

    @media (min-width: 901px) {
      html.mr-profile-page-active.mr-desktop-ui #appWrap .main:has(#tab-profile.active) {
        margin-inline-start: 0 !important;
        width: 100% !important;
        max-width: none !important
      }

      html.mr-profile-page-active.mr-desktop-ui #appWrap .content:has(#tab-profile.active) {
        padding: 0 !important;
        max-width: none !important
      }

      html.mr-profile-page-active.mr-desktop-ui #tab-profile.active {
        display: flex !important;
        flex-direction: column;
        min-height: calc(100dvh - var(--unified-topbar-h, 56px));
        overflow: hidden
      }

      html.mr-profile-page-active.mr-desktop-ui #tab-profile .profile-page-shell {
        max-width: 560px;
        margin: 0 auto;
        width: 100%;
        padding-top: 8px
      }

      html.mr-profile-page-active.mr-desktop-ui .profile-hero {
        padding: 14px 16px 18px;
        margin-bottom: 12px
      }

      html.mr-profile-page-active.mr-desktop-ui .profile-hero__av-stack {
        gap: 8px
      }

      html.mr-profile-page-active.mr-desktop-ui .profile-hero__av {
        width: 80px;
        height: 80px;
        font-size: 30px
      }

      html.mr-profile-page-active.mr-desktop-ui .profile-hero__av.has-founding-frame {
        width: 88px;
        height: 88px
      }

      html.mr-profile-page-active.mr-desktop-ui .profile-hero__av-frame:has(.profile-hero__av.has-founding-frame) {
        width: 88px;
        height: 88px
      }

      html.mr-profile-page-active.mr-desktop-ui .profile-hero__av .profile-avatar-founding-ring {
        padding: 5px;
        box-shadow:
          0 0 0 2px #0a0a0a,
          0 0 0 3px #d4af37,
          0 8px 20px rgba(0, 0, 0, .22),
          inset 0 0 10px rgba(0, 0, 0, .16)
      }

      html.mr-profile-page-active.mr-desktop-ui .profile-hero__av-edit {
        width: 30px;
        height: 30px
      }

      html.mr-profile-page-active.mr-desktop-ui .profile-hero__av-edit i {
        font-size: 12px
      }
    }

    .profile-page-topbar {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 40px;
      padding: max(4px, env(safe-area-inset-top, 0px)) 4px 12px;
      flex-shrink: 0
    }

    .profile-page-topbar__title {
      flex: 1;
      min-width: 0;
      font-size: 15px;
      font-weight: 700;
      color: var(--mr-text);
      margin: 0
    }

    .profile-page-body {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 0 12px 24px
    }

    .profile-hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 20px 16px 24px;
      margin-bottom: 16px
    }

    .profile-hero__av {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 30px;
      font-weight: 700;
      background: var(--mr-primary);
      box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
      overflow: hidden;
      flex-shrink: 0;
    }

    .profile-hero__av-stack {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      width: 100%;
    }

    .profile-hero__av.has-avatar-photo {
      color: transparent;
      font-size: 0;
      padding: 0;
      background: transparent;
    }

    .profile-hero__av.has-founding-frame {
      overflow: visible;
      box-shadow: none;
      background: transparent;
      width: 88px;
      height: 88px;
    }

    .profile-hero__av.has-default-icon {
      color: var(--mr-text-2, #4b5563);
      font-size: 0;
      background: var(--mr-bg2, #f3f4f6);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mr-border, #d1d5db) 80%, transparent), 0 8px 24px rgba(0, 0, 0, .08);
    }

    .profile-hero__default-svg {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 52%;
      height: 52%;
    }

    .profile-hero__default-svg svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .profile-avatar-founding-ring {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      padding: 6px;
      background: conic-gradient(from 210deg, #083d28 0%, #c9a227 16%, #f7e7b0 28%, #d4af37 42%, #1a6b45 58%, #c9a227 72%, #f7e7b0 84%, #083d28 100%);
      box-shadow:
        0 0 0 2px #0a0a0a,
        0 0 0 4px #d4af37,
        0 10px 28px rgba(0, 0, 0, .24),
        inset 0 0 12px rgba(0, 0, 0, .18);
    }

    .profile-avatar-founding-ring::after {
      content: '';
      position: absolute;
      inset: 3px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, .35);
      pointer-events: none;
      z-index: 2;
    }

    .profile-avatar-founding-ring__inner {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
      background: #c9a66b;
      padding: 0;
      box-sizing: border-box;
      box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35);
    }

    .profile-avatar-photo--founding {
      object-fit: cover !important;
      object-position: center 18%;
      background: #c9a66b;
      border-radius: 50%;
    }

    .avatar-picker-opt__art .profile-avatar-founding-ring {
      width: 100%;
      height: 100%;
      aspect-ratio: 1;
    }

    .mr-topbar-user-icon.has-user-avatar .profile-avatar-founding-ring {
      width: 100%;
      height: 100%;
    }

    .profile-avatar-photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: 50%;
      image-rendering: auto;
      -webkit-user-drag: none;
      user-select: none;
    }

    .avatar-picker-opt__art .profile-avatar-photo,
    .mr-topbar-user-icon.has-user-avatar .profile-avatar-photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: 50%;
    }

    .profile-hero__av-edit {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 2px solid var(--mr-surface, #fff);
      background: var(--mr-primary);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0, 0, 0, .14);
      transition: transform .15s ease, background .15s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .profile-hero__av-edit i {
      font-size: 13px;
    }

    .profile-hero__av-edit:hover {
      transform: scale(1.05);
      background: color-mix(in srgb, var(--mr-primary) 88%, #000);
    }

    .avatar-picker-card {
      max-width: min(400px, calc(100vw - 28px));
    }

    #avatarPickerModal .avatar-picker-card {
      min-height: 50vh;
      max-height: 50vh;
      display: flex;
      flex-direction: column;
    }

    #avatarPickerModal .modal-body {
      flex: 1 1 auto;
      min-height: 0;
      max-height: none;
      height: auto;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      padding-top: 2px;
      padding-bottom: 4px;
    }

    .avatar-picker-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
      gap: 8px;
      padding: 2px 0;
    }

    .avatar-picker-opt {
      border: none;
      background: transparent;
      padding: 0;
      cursor: pointer;
      border-radius: 50%;
      position: relative;
      max-width: 76px;
      margin: 0 auto;
      width: 100%;
      -webkit-tap-highlight-color: transparent;
    }

    .avatar-picker-opt__art {
      display: block;
      width: 100%;
      max-width: 72px;
      margin: 0 auto;
      aspect-ratio: 1;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 0 0 2px transparent;
      transition: box-shadow .15s ease, transform .15s ease;
    }

    .avatar-picker-opt:hover .avatar-picker-opt__art,
    .avatar-picker-opt:focus-visible .avatar-picker-opt__art {
      transform: scale(1.05);
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--mr-primary) 45%, transparent);
    }

    .avatar-picker-opt.is-selected .avatar-picker-opt__art {
      box-shadow: 0 0 0 2px var(--mr-primary);
    }

    .avatar-picker-opt__art--default {
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--mr-bg2, #f3f4f6);
      color: var(--mr-text-2, #4b5563);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mr-border, #d1d5db) 80%, transparent);
    }

    .avatar-picker-opt__default-svg {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 58%;
      height: 58%;
    }

    .avatar-picker-opt__default-svg svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .avatar-picker-opt__new {
      position: absolute;
      top: 0;
      inset-inline-end: 0;
      z-index: 2;
      min-width: 18px;
      height: 18px;
      padding: 0 4px;
      border-radius: 999px;
      background: linear-gradient(145deg, #ef4444, #dc2626);
      color: #fff;
      font-size: 8px;
      font-weight: 800;
      line-height: 18px;
      text-align: center;
      box-shadow: 0 1px 5px rgba(220, 38, 38, .35);
      pointer-events: none;
    }

    .profile-hero__av-frame {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      line-height: 0;
    }

    .profile-hero__av-frame:has(.profile-hero__av.has-founding-frame) {
      width: 88px;
      height: 88px;
    }

    .profile-hero__av-edit-wrap {
      position: absolute;
      top: 4px;
      inset-inline-start: 4px;
      display: inline-flex;
      z-index: 3;
    }

    .profile-hero__av-new-dot {
      position: absolute;
      top: -2px;
      inset-inline-end: -2px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #ef4444;
      border: 2px solid var(--mr-surface, #fff);
      box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
      pointer-events: none;
    }

    .mr-avatar-admin-card.is-avatar-hidden {
      opacity: .58;
    }

    .mr-avatar-admin-card__status {
      font-size: 10px;
      font-weight: 700;
      line-height: 1.3;
    }

    .mr-avatar-admin-card__status.is-live {
      color: #48A111;
    }

    .mr-avatar-admin-card__status.is-hidden {
      color: var(--text3, #6b7280);
    }

    .mr-avatar-admin-panel {
      margin-top: 18px;
    }

    .mr-avatar-admin-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin: 12px 0;
    }

    .mr-avatar-admin-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
      gap: 12px;
    }

    .mr-avatar-admin-card {
      border: 1px solid var(--mr-border, #e5e7eb);
      border-radius: 14px;
      padding: 10px;
      background: var(--mr-surface, #fff);
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: center;
      text-align: center;
    }

    .mr-avatar-admin-card__art {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--mr-bg2, #f3f4f6);
    }

    .mr-avatar-admin-card__art img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .mr-avatar-admin-card__label {
      font-size: 12px;
      font-weight: 600;
      color: var(--mr-text, #111827);
      line-height: 1.35;
    }

    .mr-avatar-admin-card__meta {
      font-size: 10px;
      color: var(--text3, #6b7280);
      line-height: 1.4;
    }

    .mr-avatar-admin-card__actions {
      display: flex;
      gap: 6px;
      width: 100%;
      justify-content: center;
    }

    .mr-avatar-admin-card__actions .btn {
      min-height: 30px;
      padding: 4px 10px;
      font-size: 11px;
    }

    .mr-avatar-admin-form {
      display: grid;
      gap: 12px;
    }

    .mr-avatar-admin-roles {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 14px;
    }

    .mr-avatar-admin-roles label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      cursor: pointer;
    }

    .mr-avatar-admin-preview {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 auto;
      background: var(--mr-bg2, #f3f4f6);
      display: none;
    }

    .mr-avatar-admin-preview.is-visible {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .mr-avatar-admin-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .mr-avatar-pos-wrap {
      display: grid;
      gap: 10px;
    }

    .mr-avatar-pos-stage {
      width: 120px;
      height: 120px;
      margin: 0 auto;
      position: relative;
      touch-action: none;
    }

    .mr-avatar-pos-frame {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
      background: var(--mr-bg2, #f3f4f6);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mr-border, #d1d5db) 70%, transparent);
      cursor: grab;
      position: relative;
    }

    .mr-avatar-pos-frame.is-founding {
      box-shadow: none;
      background: transparent;
      overflow: visible;
    }

    .mr-avatar-pos-frame.is-founding .mr-avatar-pos-frame__inner {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
      display: block;
    }

    .mr-avatar-pos-frame.is-founding::before {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      background: conic-gradient(from 210deg, #006c35 0deg, #c9a227 72deg, #006c35 144deg, #1a1a1a 180deg, #c9a227 252deg, #006c35 324deg, #c9a227 360deg);
      z-index: 0;
      pointer-events: none;
    }

    .mr-avatar-pos-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      pointer-events: none;
      user-select: none;
    }

    .mr-avatar-pos-sliders {
      display: grid;
      gap: 8px;
    }

    .mr-avatar-pos-slider-row {
      display: grid;
      grid-template-columns: 52px 1fr 40px;
      gap: 8px;
      align-items: center;
      font-size: 12px;
      color: var(--text3, #6b7280);
    }

    .mr-avatar-pos-slider-row input[type="range"] {
      width: 100%;
    }

    .mr-topbar-user-icon.has-user-avatar {
      overflow: hidden;
      padding: 0;
      color: transparent;
    }

    .profile-hero__name {
      margin: 0;
      font-size: 20px;
      font-weight: 700;
      color: var(--mr-text)
    }

    .profile-hero__role {
      display: inline-flex;
      align-items: center;
      padding: 4px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      background: var(--mr-primary-softer);
      color: var(--mr-text-2)
    }

    .profile-info-card {
      background: var(--mr-surface, var(--mr-bg2, #fff));
      border: 1px solid var(--mr-border);
      border-radius: 16px;
      overflow: hidden;
      margin-bottom: 16px
    }

    .profile-info-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--mr-border)
    }

    .profile-info-row:last-child {
      border-bottom: none
    }

    .profile-info-row__lbl {
      font-size: 13px;
      color: var(--mr-text-3);
      flex-shrink: 0
    }

    .profile-info-row__val {
      font-size: 13px;
      font-weight: 600;
      color: var(--mr-text);
      text-align: end;
      word-break: break-word
    }

    .profile-actions-card {
      background: var(--mr-surface, var(--mr-bg2, #fff));
      border: 1px solid var(--mr-border);
      border-radius: 16px;
      overflow: hidden;
      margin-bottom: 16px
    }

    .profile-action-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 16px;
      border-bottom: 1px solid var(--mr-border)
    }

    .profile-action-row:last-child {
      border-bottom: none
    }

    .profile-action-row__lbl {
      font-size: 13px;
      font-weight: 600;
      color: var(--mr-text);
      display: flex;
      align-items: center;
      gap: 10px
    }

    .profile-action-row__lbl i {
      width: 18px;
      text-align: center;
      color: var(--mr-text-3);
      font-size: 14px
    }

    .profile-action-row .theme-toggle {
      width: 5rem;
      height: 2.5rem;
      padding: 0.25rem;
    }

    .profile-action-row .theme-toggle__knob,
    .profile-action-row .theme-toggle__ghost {
      width: 2rem;
      height: 2rem;
    }

    .profile-action-row .theme-toggle--light .theme-toggle__knob {
      transform: translateX(2.5rem);
    }

    .profile-action-row .theme-toggle--light .theme-toggle__ghost {
      transform: translateX(-2.5rem);
    }

    .profile-action-row .theme-toggle__icon {
      width: 1.25rem;
      height: 1.25rem;
    }

    .profile-action-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      width: 100%;
      padding: 14px 16px;
      border: none;
      border-bottom: 1px solid var(--mr-border);
      background: transparent;
      color: var(--mr-text);
      font: inherit;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      text-align: start
    }

    .profile-action-btn:last-child {
      border-bottom: none
    }

    .profile-action-btn:hover {
      background: var(--mr-primary-softer)
    }

    .profile-action-btn i.fa-chevron-left {
      color: var(--mr-text-3);
      font-size: 11px
    }

    .profile-action-btn--logout {
      color: var(--red-text, #dc2626)
    }

    .profile-action-btn--logout i:first-child {
      color: var(--red-text, #dc2626)
    }

    [data-theme="dark"] .profile-info-card,
    [data-theme="dark"] .profile-actions-card {
      background: var(--mr-bg2)
    }

    .notif-page-head {
      flex-shrink: 0;
      z-index: 30;
      background: var(--mr-bg);
      padding-top: max(4px, env(safe-area-inset-top, 0px))
    }

    .notif-page-topbar {
      --notif-topbar-h: 32px;
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: var(--notif-topbar-h);
      padding: 2px 4px 10px;
      flex-shrink: 0
    }

    .notif-page-back-group {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
      height: var(--notif-topbar-h);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation
    }

    .notif-page-back {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      padding: 0;
      margin: 0;
      border: none;
      border-radius: 50%;
      background: color-mix(in srgb, var(--mr-surface) 90%, var(--mr-primary) 10%);
      color: var(--mr-text);
      cursor: pointer;
      flex-shrink: 0;
      font-family: var(--font);
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      box-shadow: 0 1px 2px rgba(15, 23, 42, .06), inset 0 0 0 1px color-mix(in srgb, var(--mr-border) 88%, transparent);
      transition: transform .1s ease, box-shadow .12s ease, background .12s ease
    }

    .notif-page-back__ico {
      width: auto;
      height: auto;
      border-radius: 0;
      background: none;
      color: var(--mr-primary);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      line-height: 1;
      flex-shrink: 0
    }

    .notif-page-back__label {
      font-size: 14px;
      font-weight: 700;
      letter-spacing: -.01em;
      line-height: 1;
      color: var(--mr-text);
      display: inline-flex;
      align-items: center;
      height: var(--notif-topbar-h)
    }

    .notif-page-back:hover {
      background: color-mix(in srgb, var(--mr-bg-2) 82%, var(--mr-primary-softer) 18%);
      box-shadow: 0 2px 5px rgba(15, 23, 42, .07), inset 0 0 0 1px color-mix(in srgb, var(--mr-primary) 18%, var(--mr-border))
    }

    .notif-page-back:focus {
      outline: none
    }

    .notif-page-back:focus-visible {
      outline: 2px solid var(--mr-primary-soft);
      outline-offset: 2px
    }

    .notif-page-back:active {
      transform: scale(0.97);
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--mr-primary) 22%, var(--mr-border));
      transition: transform .05s ease, box-shadow .05s ease
    }

    .notif-page-back-group.is-pressed {
      opacity: .9
    }

    .notif-page-back-group.is-pressed .notif-page-back {
      transform: scale(0.94);
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--mr-primary) 22%, var(--mr-border))
    }

    .notif-page-topbar__title {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      align-items: center;
      min-height: var(--notif-topbar-h)
    }

    .notif-page-topbar__heading {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      min-height: var(--notif-topbar-h);
      flex-wrap: nowrap;
      min-width: 0
    }

    .notif-page-topbar__heading-title {
      font-size: 16px;
      font-weight: 700;
      line-height: 1;
      color: var(--mr-text);
      flex-shrink: 0
    }

    .notif-page-topbar__heading .notif-count {
      font-size: 11px;
      font-weight: 500;
      color: var(--mr-text-3);
      line-height: 1;
      display: inline-flex;
      align-items: center;
      height: var(--notif-topbar-h);
      padding-top: 1px;
      white-space: nowrap;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .notif-page-topbar .notif-mark-all {
      flex-shrink: 0
    }

    .notif-page-filters {
      display: flex;
      gap: 6px;
      padding: 0 4px 6px;
      flex-shrink: 0;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none
    }

    .notif-page-filters::-webkit-scrollbar {
      display: none
    }

    .notif-filter-btn {
      flex: 1 1 0;
      min-width: max-content;
      border: 1px solid var(--mr-border);
      border-radius: 999px;
      background: var(--mr-surface);
      color: var(--mr-text-2);
      font-family: var(--font);
      font-size: 12px;
      font-weight: 600;
      padding: 8px 14px;
      cursor: pointer;
      white-space: nowrap;
      transition: background .15s, color .15s, border-color .15s;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation
    }

    .notif-filter-btn:focus {
      outline: none
    }

    .notif-filter-btn:focus-visible {
      outline: 2px solid var(--mr-primary-soft);
      outline-offset: 2px
    }

    .notif-filter-btn.is-active {
      background: var(--mr-primary);
      border-color: var(--mr-primary);
      color: #fff
    }

    @media (hover: hover) {
      .notif-filter-btn:not(.is-active):hover {
        background: var(--mr-primary-softer);
        border-color: color-mix(in srgb, var(--mr-primary) 22%, var(--mr-border));
        color: var(--mr-text)
      }
    }

    @media (hover: none) {
      .notif-mark-all:hover,
      .notif-mark-all--danger:hover,
      .notif-filter-btn:not(.is-active):hover {
        background: transparent;
        border-color: transparent
      }

      .notif-page-back:hover {
        background: color-mix(in srgb, var(--mr-surface) 90%, var(--mr-primary) 10%);
        box-shadow: 0 1px 2px rgba(15, 23, 42, .06), inset 0 0 0 1px color-mix(in srgb, var(--mr-border) 88%, transparent)
      }

      .notif-mark-all:not(.notif-mark-all--danger):hover {
        color: var(--mr-primary)
      }

      .notif-mark-all--danger:hover {
        color: var(--red-text)
      }

      [data-theme="dark"] .notif-page-topbar .notif-mark-all:not(.notif-mark-all--danger):hover,
      [data-theme="dark"] .notif-page-topbar .notif-mark-all:not(.notif-mark-all--danger):hover i {
        color: #fff
      }

      .notif-filter-btn:not(.is-active):hover {
        background: var(--mr-surface);
        border-color: var(--mr-border);
        color: var(--mr-text-2)
      }
    }

    .notif-filter-btn[hidden] {
      display: none !important
    }

    #tab-notifications .notif-page-card {
      display: flex;
      flex-direction: column;
      min-height: calc(100dvh - var(--unified-topbar-h, 76px) - var(--mr-mob-bottom-nav-h, 56px) - 16px);
      border-radius: 11px;
      border: 1px solid var(--mr-border);
      background: var(--mr-surface);
      box-shadow: var(--mr-shadow-soft);
      overflow: hidden
    }

    #tab-notifications .notif-page-card .notif-header {
      flex-shrink: 0;
      border-bottom: 1px solid var(--mr-border)
    }

    #tab-notifications .notif-list--page .notif-swipe {
      contain-intrinsic-size: auto 76px
    }

    @media (hover: hover) and (pointer: fine) {
      #tab-notifications .notif-list--page .notif-swipe {
        content-visibility: auto
      }
    }

    #tab-notifications .notif-list--page {
      flex: 1 1 auto;
      min-height: 0;
      max-height: none;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      touch-action: pan-y;
      border-radius: 11px;
      border: 1px solid var(--mr-border);
      background: var(--mr-surface);
      box-shadow: var(--mr-shadow-soft);
      padding-bottom: 0;
      box-sizing: border-box
    }

    html.mr-notif-page-active #tab-notifications .notif-list--page {
      padding-bottom: 0 !important;
      overscroll-behavior-y: contain
    }

    #tab-notifications .notif-list--page .notif-swipe:last-child {
      border-bottom: 1px solid var(--mr-border)
    }

    /* Ticket Detail Modal */
    .modal-card.modal-detail {
      max-width: 900px !important;
      width: 100%;
      height: 88vh;
      max-height: 88vh;
      display: flex;
      flex-direction: column;
      overflow: hidden
    }

    .modal-card.modal-detail .modal-header {
      flex-shrink: 0
    }

    .modal-card.modal-detail .td-tabs {
      flex-shrink: 0
    }

    .td-content-area {
      flex: 1;
      overflow-y: auto;
      min-height: 0;
      --td-detail-pad-x: 16px;
      padding: 0 var(--td-detail-pad-x) 16px;
      box-sizing: border-box;
      scrollbar-width: none;
      -ms-overflow-style: none
    }

    #ticketModal #tdp-info.td-pane {
      padding: 0
    }

    #ticketModal #tdInfo {
      padding: 0
    }

    #ticketModal #tdInfo .overdue-banner,
    #ticketModal #tdInfo .countdown-card,
    #ticketModal #tdInfo .td-info-rows,
    #ticketModal #tdInfo .info-row {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      margin-inline: 0
    }

    #ticketModal #tdInfo .info-row {
      padding-inline: 0
    }

    #ticketModal #tdInfo .overdue-banner {
      margin-top: 6px;
      margin-bottom: 4px
    }

    .td-content-area::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0
    }

    .td-print-btn {
      flex-shrink: 0;
    }

    #ticketModal .td-print-btn {
      transform: translateY(-3px);
    }

    #ticketModal .ticket-resp-search {
      align-items: flex-start;
      min-height: 48px;
      height: auto;
      border-radius: 18px;
      padding: 4px 6px 4px 14px
    }

    #ticketModal .log-item--compose .ticket-resp-input {
      height: 32px !important;
      min-height: 32px !important;
      max-height: 72px !important;
      padding: 0 !important;
      line-height: 1.35 !important;
      resize: none !important;
      overflow-y: auto !important;
      box-sizing: border-box !important
    }

    #ticketModal .log-item--compose .log-compose-actions #responseButtons {
      margin-top: 0 !important
    }

    #ticketModal .ticket-resp-input:focus {
      border-color: transparent !important;
      box-shadow: none !important
    }

    #ticketModal .ticket-resp-search:focus-within {
      border-color: var(--mr-primary);
      box-shadow: 0 0 0 4px var(--mr-primary-soft)
    }

    #ticketModal .log-compose-actions #responseButtons {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: stretch;
      gap: 8px;
      margin-top: 0 !important;
      justify-content: flex-end
    }

    #ticketModal #responseButtons .td-resp-blocked-wrap {
      flex: 1 1 100%;
      width: 100%;
      min-width: 0
    }

    #ticketModal #responseButtons .td-resp-action {
      flex: 1 1 0;
      min-width: 0;
      width: auto;
      justify-content: center;
      text-align: center;
      border-radius: 10px;
      min-height: 34px;
      padding: 6px 10px;
      font-size: 11px;
      font-weight: 600;
      gap: 5px;
      background: transparent;
      color: var(--mr-text-2);
      border: 1px solid var(--mr-border);
      box-shadow: none;
      transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease
    }

    #ticketModal #responseButtons .td-resp-action span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    #ticketModal #responseButtons .td-resp-action i {
      font-size: 11px;
      flex-shrink: 0;
      line-height: 1
    }

    #ticketModal #responseButtons .td-resp-action:active:not(:disabled) {
      transform: scale(0.985)
    }

    #ticketModal #responseButtons .td-resp-action.btn-primary:hover {
      background: var(--mr-primary);
      border-color: var(--mr-primary);
      color: #fff;
      box-shadow: 0 2px 10px rgba(15, 18, 36, 0.16)
    }

    #ticketModal #responseButtons .td-resp-action.btn-success:hover {
      background: var(--mr-success);
      border-color: var(--mr-success);
      color: #fff;
      box-shadow: 0 2px 10px rgba(15, 18, 36, 0.12)
    }

    #ticketModal #responseButtons .td-resp-action.btn-danger:hover {
      background: var(--mr-danger);
      border-color: var(--mr-danger);
      color: #fff;
      box-shadow: 0 2px 10px rgba(180, 35, 24, 0.18)
    }

    #ticketModal #responseButtons .td-resp-action.btn-warning:hover {
      background: var(--mr-warning);
      border-color: var(--mr-warning);
      color: #2a2200;
      box-shadow: 0 2px 10px rgba(180, 130, 0, 0.16)
    }

    #ticketModal #responseButtons .td-resp-action.btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):hover {
      background: var(--mr-primary-softer);
      border-color: color-mix(in srgb, var(--mr-primary) 28%, var(--mr-border));
      color: var(--mr-primary)
    }

    .td-header-main {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
      flex-wrap: nowrap;
      min-width: 0;
      flex: 1 1 auto
    }

    .td-header-main h3 {
      margin: 0;
      flex: 0 0 auto
    }

    .td-header-main .badge {
      flex: 0 1 auto;
      max-width: min(58%, 220px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .td-header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0
    }

    #ticketModal .modal-header {
      align-items: flex-start
    }

    #ticketModal .td-header-main {
      padding-block-start: 1px
    }

    #ticketModal .td-header-actions {
      align-self: flex-start;
      margin-block-start: -1px
    }

    /* Overdue */
    .overdue-flag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: var(--red);
      color: #fff;
      padding: 3px 8px;
      border-radius: 10px;
      font-size: 10px;
      font-weight: 600;
      flex-shrink: 0;
      animation: pulseFlag 2s ease-in-out infinite
    }

    @keyframes pulseFlag {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.5)
      }

      50% {
        box-shadow: 0 0 0 6px rgba(255, 0, 0, 0)
      }
    }

    .overdue-banner {
      background: var(--red-light);
      border: 1px solid var(--red);
      padding: 8px 12px;
      border-radius: 8px;
      margin-bottom: 4px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      font-size: 12px;
      line-height: 1.25;
      color: var(--red-text);
      direction: rtl;
      width: 100%;
      box-sizing: border-box
    }

    .overdue-banner__head {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 700;
      line-height: 1.3
    }

    .overdue-banner__head i {
      font-size: 15px;
      flex-shrink: 0
    }

    .overdue-banner__reasons {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .overdue-banner__reason-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      line-height: 1.3
    }

    .overdue-banner__reason-item > span:last-child {
      flex: 1;
      min-width: 0;
      line-height: 1.3
    }

    .overdue-banner__reason-icon {
      width: 24px;
      height: 24px;
      border-radius: 7px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 11px;
      line-height: 1;
      background: color-mix(in srgb, var(--red-text) 12%, transparent);
      border: 1px solid color-mix(in srgb, var(--red-text) 18%, transparent)
    }

    .overdue-banner > div {
      line-height: 1.25
    }

    .overdue-banner strong {
      display: block;
      line-height: 1.25
    }

    .overdue-banner .overdue-banner__reason {
      font-size: 11px;
      margin-top: 1px;
      line-height: 1.25
    }

    .overdue-banner i {
      font-size: 16px
    }

    /* Countdown */
    .countdown-card {
      background: var(--mr-surface);
      border: 1px solid var(--mr-border);
      padding: 10px 12px;
      border-radius: 10px;
      margin-bottom: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      overflow: hidden;
    }

    .countdown-card.cd-ok {
      background: color-mix(in srgb, var(--green) 4%, var(--mr-surface));
    }

    .countdown-card.cd-warn {
      background: color-mix(in srgb, var(--amber) 5%, var(--mr-surface));
    }

    .countdown-card.cd-danger {
      background: color-mix(in srgb, var(--red) 5%, var(--mr-surface));
    }

    .countdown-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .countdown-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1;
      min-width: 0;
    }

    .countdown-icon-wrap {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      background: var(--mr-bg);
      color: var(--mr-text-3);
      border: 1px solid var(--mr-border);
      flex-shrink: 0;
    }

    .cd-ok .countdown-icon-wrap {
      color: var(--green);
    }

    .cd-warn .countdown-icon-wrap {
      color: var(--amber);
    }

    .cd-danger .countdown-icon-wrap {
      color: var(--red);
    }

    .countdown-titles {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .countdown-titles strong {
      font-size: 12.5px;
      font-weight: 700;
      color: var(--mr-text);
      line-height: 1.3;
    }

    .countdown-sub {
      font-size: 10.5px;
      color: var(--mr-text-3);
      line-height: 1.35;
    }

    .countdown-clock-wrapper {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
      flex-shrink: 0;
    }

    .countdown-clock {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      direction: ltr;
      font-family: var(--mono);
      background: var(--mr-bg);
      padding: 4px 10px;
      border-radius: 8px;
      border: 1px solid var(--mr-border);
    }

    .countdown-deadline {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 9.5px;
      font-weight: 500;
      color: var(--mr-text-3);
      text-align: end;
      max-width: 220px;
      line-height: 1.35;
    }

    .countdown-deadline i {
      flex-shrink: 0;
      font-size: 9px;
      opacity: 0.7;
    }

    .cd-num {
      font-size: 15px;
      font-weight: 700;
      line-height: 1;
      color: var(--red-text);
      font-variant-numeric: tabular-nums;
      min-width: 22px;
      text-align: center;
    }

    .cd-ok .cd-num {
      color: var(--green-text);
    }

    .cd-warn .cd-num {
      color: var(--amber-text);
    }

    .cd-danger .cd-num {
      color: var(--red-text);
    }

    .cd-sep {
      font-size: 13px;
      font-weight: 600;
      opacity: 0.35;
      user-select: none;
    }

    .cd-ok .cd-sep {
      color: var(--green-text);
    }

    .cd-warn .cd-sep {
      color: var(--amber-text);
    }

    .cd-danger .cd-sep {
      color: var(--red-text);
    }

    .countdown-progress {
      height: 3px;
      background: var(--mr-border);
      border-radius: 999px;
      overflow: hidden;
      position: relative;
    }

    .countdown-progress-bar {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      background: var(--red);
      width: 0%;
      transition: width 1s linear;
      border-radius: 999px;
    }

    .cd-ok .countdown-progress-bar {
      background: var(--green);
    }

    .cd-warn .countdown-progress-bar {
      background: var(--amber);
    }

    .cd-danger .countdown-progress-bar {
      background: var(--red);
    }

    /* Compliance */
    .cmp-tabs {
      display: flex;
      gap: 6px;
      margin-bottom: 16px;
      border-bottom: 1px solid var(--border);
      padding-bottom: 0;
      overflow-x: auto
    }

    .cmp-tab {
      background: transparent;
      border: none;
      padding: 10px 18px;
      cursor: pointer;
      color: var(--text3);
      font-family: var(--font);
      font-size: 13px;
      font-weight: 500;
      border-bottom: 2px solid transparent;
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      transition: 0.15s
    }

    .cmp-tab:hover {
      color: var(--text)
    }

    .cmp-tab.active {
      color: var(--blue);
      border-bottom-color: var(--blue);
      font-weight: 600
    }

    .cmp-kpis {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-bottom: 18px
    }

    .kpi-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 18px 20px;
      position: relative;
      overflow: hidden;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .kpi-card:hover {
      border-color: var(--blue);
      transform: translateY(-4px) translateX(-2px);
      box-shadow: var(--shadow-md);
    }

    .kpi-card::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 4px;
      height: 100%
    }

    .kpi-card[data-tone="blue"]::before {
      background: var(--blue)
    }

    .kpi-card[data-tone="green"]::before {
      background: var(--green)
    }

    .kpi-card[data-tone="amber"]::before {
      background: var(--amber)
    }

    .kpi-card[data-tone="red"]::before {
      background: var(--red)
    }

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

    .kpi-icon {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px
    }

    .kpi-card[data-tone="blue"] .kpi-icon {
      background: var(--blue-light);
      color: var(--blue-text)
    }

    .kpi-card[data-tone="green"] .kpi-icon {
      background: var(--green-light);
      color: var(--green-text)
    }

    .kpi-card[data-tone="amber"] .kpi-icon {
      background: var(--amber-light);
      color: var(--amber-text)
    }

    .kpi-card[data-tone="red"] .kpi-icon {
      background: var(--red-light);
      color: var(--red-text)
    }

    .kpi-title {
      font-size: 12px;
      color: var(--text2);
      font-weight: 500
    }

    .kpi-value {
      font-size: 32px;
      font-weight: 700;
      line-height: 1;
      margin-bottom: 8px;
      color: var(--text);
      font-family: var(--mono)
    }

    .kpi-foot {
      font-size: 11px;
      color: var(--text3);
      display: flex;
      align-items: center;
      gap: 6px
    }

    .kpi-trend {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 2px 7px;
      border-radius: 10px;
      font-weight: 600;
      font-size: 10px
    }

    .kpi-trend.up {
      background: var(--green-light);
      color: var(--green-text)
    }

    .kpi-trend.down {
      background: var(--red-light);
      color: var(--red-text)
    }

    .kpi-trend.flat {
      background: var(--bg2);
      color: var(--text2)
    }

    .cmp-dist-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 18px 20px;
      margin-bottom: 18px
    }

    .cmp-dist-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
      flex-wrap: wrap;
      gap: 10px
    }

    .cmp-dist-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 8px
    }

    .cmp-dist-title i {
      color: var(--blue);
      font-size: 13px
    }

    .cmp-dist-total {
      font-size: 12px;
      color: var(--text3)
    }

    .cmp-dist-total strong {
      color: var(--text);
      font-family: var(--mono);
      font-size: 14px
    }

    .cmp-dist-bar {
      display: flex;
      height: 32px;
      border-radius: 10px;
      overflow: hidden;
      background: var(--bg2);
      margin-bottom: 12px
    }

    .cmp-dist-segment {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 12px;
      font-weight: 600;
      font-family: var(--mono);
      transition: all 0.4s ease;
      cursor: pointer
    }

    .cmp-dist-segment:hover {
      filter: brightness(1.1)
    }

    .cmp-dist-segment[data-tone="green"] {
      background: var(--green)
    }

    .cmp-dist-segment[data-tone="blue"] {
      background: var(--blue)
    }

    .cmp-dist-segment[data-tone="amber"] {
      background: var(--amber)
    }

    .cmp-dist-segment[data-tone="red"] {
      background: var(--red)
    }

    .cmp-dist-legend {
      display: flex;
      gap: 18px;
      flex-wrap: wrap
    }

    .cmp-dist-legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--text2)
    }

    .cmp-dist-legend-dot {
      width: 10px;
      height: 10px;
      border-radius: 3px;
      flex-shrink: 0
    }

    .cmp-dist-legend-item .count {
      font-family: var(--mono);
      color: var(--text);
      font-weight: 600
    }

    .cmp-podium-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-bottom: 18px
    }

    .podium-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 16px 18px;
      position: relative;
      overflow: hidden
    }

    .podium-card.top {
      background: linear-gradient(135deg, var(--green-light) 0%, var(--surface) 60%);
      border-color: rgba(72, 161, 17, 0.3)
    }

    .podium-card.bottom {
      background: linear-gradient(135deg, var(--red-light) 0%, var(--surface) 60%);
      border-color: rgba(255, 0, 0, 0.3)
    }

    .podium-head {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 14px;
      padding-bottom: 12px;
      border-bottom: 1px dashed var(--border)
    }

    .podium-head-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px
    }

    .podium-card.top .podium-head-icon {
      background: var(--green);
      color: #fff
    }

    .podium-card.bottom .podium-head-icon {
      background: var(--red);
      color: #fff
    }

    .podium-head-text {
      flex: 1;
      min-width: 0
    }

    .podium-head-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 2px
    }

    .podium-head-sub {
      font-size: 11px;
      color: var(--text3)
    }

    .podium-list {
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .podium-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 10px 12px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      transition: 0.15s
    }

    .podium-item:hover {
      border-color: var(--border2);
      transform: translateX(-2px)
    }

    .podium-medal {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex-shrink: 0;
      font-weight: 700;
      font-family: var(--mono)
    }

    .podium-medal.gold {
      background: linear-gradient(135deg, #fff3b0, #FFCC00);
      color: #3c2f00;
      box-shadow: 0 2px 6px rgba(255, 204, 0, 0.4)
    }

    .podium-medal.silver {
      background: linear-gradient(135deg, #cbd5e1, #94a3b8);
      color: #fff
    }

    .podium-medal.bronze {
      background: linear-gradient(135deg, #FFC300, #FFC300);
      color: #fff
    }

    .podium-medal.warn {
      background: linear-gradient(135deg, rgba(255, 0, 0, 0.45), #FF0000);
      color: #fff
    }

    .podium-info {
      flex: 1;
      min-width: 0
    }

    .podium-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .podium-meta {
      font-size: 11px;
      color: var(--text3);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .podium-score {
      font-family: var(--mono);
      font-size: 20px;
      font-weight: 700;
      flex-shrink: 0;
      min-width: 40px;
      text-align: center
    }

    .podium-score.lvl-excellent {
      color: var(--green-text)
    }

    .podium-score.lvl-good {
      color: var(--blue-text)
    }

    .podium-score.lvl-warn {
      color: var(--amber-text)
    }

    .podium-score.lvl-danger {
      color: var(--red-text)
    }

    .podium-empty {
      text-align: center;
      padding: 20px;
      color: var(--text3);
      font-size: 12px;
      font-style: italic
    }

    /* Compliance Table */
    .cmp-table-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      margin-bottom: 18px
    }

    .cmp-table-head {
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 14px;
      background: var(--surface2)
    }

    .cmp-table-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 8px
    }

    .cmp-table-title i {
      color: var(--blue);
      font-size: 13px
    }

    .cmp-table-sub {
      font-size: 11px;
      color: var(--text3);
      margin-top: 2px
    }

    .cmp-table-wrap {
      overflow-x: auto
    }

    .cmp-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      min-width: 1200px;
      table-layout: fixed
    }

    .cmp-table thead {
      background: var(--surface2)
    }

    .cmp-table th {
      padding: 14px;
      font-weight: 600;
      font-size: 11px;
      color: var(--text2);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border-bottom: 1px solid var(--border);
      white-space: nowrap
    }

    .cmp-table td {
      padding: 14px;
      border-bottom: 1px solid var(--border);
      color: var(--text);
      vertical-align: middle
    }

    .cmp-table tbody tr {
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .cmp-table tbody tr:hover {
      background: var(--surface2);
      transform: translateX(-4px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .cmp-table tbody tr.action-required {
      background: rgba(255, 0, 0, 0.04)
    }

    .cmp-cell-rank {
      width: 60px;
      text-align: center
    }

    .cmp-rank-num {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: var(--bg2);
      color: var(--text2);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--mono);
      font-weight: 700;
      font-size: 13px
    }

    .cmp-rank-num.top1 {
      background: linear-gradient(135deg, #fff3b0, #FFCC00);
      color: #3c2f00;
      box-shadow: 0 2px 6px rgba(255, 204, 0, 0.4)
    }

    .cmp-rank-num.top2 {
      background: linear-gradient(135deg, #cbd5e1, #94a3b8);
      color: #fff
    }

    .cmp-rank-num.top3 {
      background: linear-gradient(135deg, #FFC300, #FFC300);
      color: #fff
    }

    .cmp-cell-entity {
      width: 250px;
      text-align: right
    }

    .cmp-entity-wrap {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .cmp-entity-avatar {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 14px;
      font-weight: 700
    }

    .cmp-entity-avatar[data-type="region"] {
      background: var(--blue-light);
      color: var(--blue-text)
    }

    .cmp-entity-avatar[data-type="branch"] {
      background: var(--green-light);
      color: var(--green-text)
    }

    .cmp-entity-avatar[data-type="employee"] {
      background: var(--purple-light);
      color: var(--purple-text)
    }

    .cmp-entity-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 240px;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .cmp-inactive-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      font-size: 10px;
      font-weight: 700;
      border-radius: 999px;
      background: rgba(107, 114, 128, 0.14);
      color: #4b5563;
      border: 1px solid rgba(107, 114, 128, 0.3);
      flex-shrink: 0
    }

    .cmp-inactive-badge i {
      font-size: 9px
    }

    .cmp-entity-wrap.is-inactive .cmp-entity-avatar {
      opacity: 0.55;
      filter: grayscale(0.35)
    }

    .cmp-entity-wrap.is-inactive .cmp-entity-name {
      color: var(--text2)
    }

    .cmp-entity-meta {
      font-size: 11px;
      color: var(--text3);
      font-family: var(--mono)
    }

    .cmp-cell-location {
      width: 200px;
      font-size: 12px;
      color: var(--text2);
      text-align: right
    }

    .cmp-location-line {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-bottom: 3px
    }

    .cmp-location-line i {
      font-size: 10px;
      color: var(--text3);
      width: 12px
    }

    .cmp-cell-score {
      width: 200px;
      text-align: center
    }

    .cmp-score-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px
    }

    .cmp-score-num {
      font-family: var(--mono);
      font-size: 22px;
      font-weight: 700;
      min-width: 50px;
      text-align: center;
      line-height: 1
    }

    .cmp-score-num.lvl-excellent {
      color: var(--green-text)
    }

    .cmp-score-num.lvl-good {
      color: var(--blue-text)
    }

    .cmp-score-num.lvl-warn {
      color: var(--amber-text)
    }

    .cmp-score-num.lvl-danger {
      color: var(--red-text)
    }

    .cmp-score-track {
      flex: 1;
      height: 8px;
      background: var(--bg2);
      border-radius: 4px;
      overflow: hidden
    }

    .cmp-score-fill {
      height: 100%;
      border-radius: 4px;
      transition: width 0.5s ease
    }

    .cmp-score-fill.lvl-excellent {
      background: linear-gradient(90deg, var(--green), #3a8010)
    }

    .cmp-score-fill.lvl-good {
      background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--blue) 85%, #fff))
    }

    .cmp-score-fill.lvl-warn {
      background: linear-gradient(90deg, var(--amber), color-mix(in srgb, var(--amber) 82%, #fff))
    }

    .cmp-score-fill.lvl-danger {
      background: linear-gradient(90deg, var(--red), color-mix(in srgb, var(--red) 88%, #fff))
    }

    .cmp-score-label {
      display: block;
      font-size: 10px;
      color: var(--text3);
      margin-top: 4px;
      font-family: var(--mono);
      letter-spacing: 0.3px
    }

    .cmp-cell-severity {
      width: 200px;
      text-align: center
    }

    .cmp-sev-bar {
      display: flex;
      height: 8px;
      border-radius: 4px;
      overflow: hidden;
      background: var(--bg2);
      margin-bottom: 4px
    }

    .cmp-sev-bar div {
      height: 100%
    }

    .cmp-sev-low {
      background: var(--blue)
    }

    .cmp-sev-mid {
      background: var(--amber)
    }

    .cmp-sev-high {
      background: #FF0000
    }

    .cmp-sev-crit {
      background: #FF0000
    }

    .cmp-sev-counts {
      display: flex;
      gap: 8px;
      font-size: 11px;
      color: var(--text2);
      font-family: var(--mono);
      flex-wrap: wrap;
      justify-content: center
    }

    .cmp-sev-counts span {
      display: inline-flex;
      align-items: center;
      gap: 3px
    }

    .cmp-sev-counts .dot {
      width: 7px;
      height: 7px;
      border-radius: 2px
    }

    .cmp-cell-trend {
      width: 110px;
      text-align: center
    }

    .cmp-trend-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 600;
      font-family: var(--mono)
    }

    .cmp-trend-badge.up {
      background: var(--green-light);
      color: var(--green-text)
    }

    .cmp-trend-badge.down {
      background: var(--red-light);
      color: var(--red-text)
    }

    .cmp-trend-badge.flat {
      background: var(--bg2);
      color: var(--text2)
    }

    .cmp-cell-status {
      width: 140px;
      text-align: center
    }

    .cmp-status-tags {
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-items: center
    }

    .cmp-status-tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px;
      border-radius: 10px;
      font-size: 10px;
      font-weight: 600;
      width: fit-content
    }

    .cmp-status-tag.ok {
      background: var(--green-light);
      color: var(--green-text)
    }

    .cmp-status-tag.action {
      background: var(--red-light);
      color: var(--red-text);
      animation: pulseFlag 2s ease-in-out infinite
    }

    .cmp-status-tag.outlier {
      background: var(--amber-light);
      color: var(--amber-text)
    }

    .cmp-status-tag.fresh {
      background: var(--blue-light);
      color: var(--blue-text)
    }

    .cmp-status-tag.streak {
      background: var(--green-light);
      color: var(--green-text)
    }

    .cmp-cell-action {
      width: 100px;
      text-align: center
    }

    .cmp-detail-btn {
      padding: 7px 12px;
      background: var(--surface);
      border: 1px solid var(--border2);
      border-radius: 8px;
      color: var(--text2);
      cursor: pointer;
      font-family: var(--font);
      font-size: 12px;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: 0.15s
    }

    .cmp-detail-btn:hover {
      background: var(--blue);
      color: #fff;
      border-color: var(--blue)
    }

    .cmp-table-empty {
      padding: 60px 20px;
      text-align: center;
      color: var(--text3)
    }

    .cmp-table-empty i {
      font-size: 48px;
      opacity: 0.4;
      display: block;
      margin-bottom: 12px
    }

    /* Compliance Detail Modal */
    #cmpDetailModal.modal {
      align-items: center;
      justify-content: center;
      padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
    }

    #cmpDetailModal.modal.open {
      align-items: center;
      justify-content: center;
      background: rgba(15, 18, 36, 0.26);
      backdrop-filter: blur(14px) saturate(165%);
      -webkit-backdrop-filter: blur(14px) saturate(165%);
    }

    [data-theme="dark"] #cmpDetailModal.modal.open {
      background: rgba(0, 0, 0, 0.42);
    }

    .modal-card.cmp-detail-card {
      max-width: 580px !important;
      width: min(580px, 100%);
      max-height: min(88vh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 32px));
      display: flex;
      flex-direction: column;
      margin: 0;
      border-radius: 22px;
      overflow: hidden;
      background: var(--mr-surface);
      border: 1px solid var(--mr-border);
      box-shadow: var(--mr-shadow-card), 0 24px 64px rgba(15, 18, 36, 0.12);
    }

    [data-theme="dark"] .modal-card.cmp-detail-card {
      background: var(--mr-surface);
      border-color: var(--mr-border);
      box-shadow: var(--mr-shadow-card), 0 24px 64px rgba(0, 0, 0, 0.35);
    }

    .modal-card.cmp-detail-card .modal-body {
      overflow-y: auto;
      flex: 1;
      min-height: 0;
      padding: 8px 14px 10px;
      background: var(--mr-bg);
      scrollbar-width: thin;
      scrollbar-color: var(--border2) transparent;
    }

    .modal-card.cmp-detail-card .cmp-detail-shell {
      --cmp-pair-gap: 8px;
    }

    .modal-card.cmp-detail-card .emp-new-grid,
    .modal-card.cmp-detail-card .emp-new-cards-wrap--single {
      margin-bottom: 8px;
    }

    .modal-card.cmp-detail-card .cmp-charts-grid {
      margin-bottom: 8px;
    }

    .modal-card.cmp-detail-card .cmp-detail-shell .cmp-detail-section {
      margin-bottom: 4px !important;
      padding: 10px 12px !important;
    }

    .modal-card.cmp-detail-card .cmp-charts-grid .cmp-detail-section {
      margin-bottom: 0 !important;
    }

    .modal-card.cmp-detail-card .cmp-detail-shell .cmp-detail-section--violations {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }

    .modal-card.cmp-detail-card .cmp-detail-shell .cmp-detail-section-head {
      margin-bottom: 6px !important;
    }

    .cmp-detail-shell {
      width: 100%;
      max-width: 100%;
      margin-inline: auto;
      box-sizing: border-box;
      --cmp-detail-w: 100%;
      --cmp-pair-gap: 12px;
      --cmp-card-pad: 10px 12px;
      --cmp-card-title: 12px;
      --cmp-card-text: 11px;
      --cmp-card-meter: 42px;
      --cmp-card-body-h: 96px;
      --cmp-card-slider-h: 88px;
      --cmp-card-slider-track: 62px;
      --cmp-card-slider-val: 17px;
      --cmp-chart-sev: clamp(188px, 42%, 236px)
    }

    .modal-card.cmp-detail-card .modal-body::-webkit-scrollbar {
      width: 6px;
    }

    .modal-card.cmp-detail-card .modal-body::-webkit-scrollbar-track {
      background: transparent;
    }

    .modal-card.cmp-detail-card .modal-body::-webkit-scrollbar-thumb {
      background: var(--border2);
      border-radius: 10px;
    }

    .modal-card.cmp-detail-card .modal-body::-webkit-scrollbar-thumb:hover {
      background: var(--text3);
    }

    .modal-card.cmp-detail-card .cmp-detail-modal-header {
      flex-shrink: 0;
      align-items: stretch;
      gap: 0;
      padding: 10px 18px 12px;
      direction: rtl;
      border-bottom: none;
      background: transparent;
      height: auto;
      min-height: 0
    }

    .modal-card.cmp-detail-card .cmp-sheet-drag-zone {
      background: var(--mr-surface);
      border-bottom: 1px solid var(--mr-border);
      border-radius: 22px 22px 0 0;
    }

    .modal-card.cmp-detail-card .cmp-sheet-grabber-wrap {
      display: none;
      background: transparent;
      line-height: 0;
      font-size: 0;
      padding: 0;
    }

    .modal-card.cmp-detail-card .cmp-sheet-grabber {
      background: var(--mr-border) !important;
    }

    .cmp-detail-modal-header__hero {
      flex: 1;
      min-width: 0;
      width: 100%;
    }

    .modal-card.cmp-detail-card .cmp-detail-hero-banner {
      margin-bottom: 0;
      padding: 0;
      border: none;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
    }

    .cmp-detail-hero-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      direction: rtl;
    }

    .modal-card.cmp-detail-card .cmp-detail-hero-score {
      align-self: flex-start;
      flex-shrink: 0;
      margin-inline-start: 0;
    }

    /* تفاصيل الامتثال — بنر الاسم في الهيدر */
    .cmp-detail-hero-banner {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      direction: rtl;
      width: 100%;
      min-height: 0;
      height: auto
    }

    .cmp-detail-hero-main {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      flex: 1;
      min-width: 0;
    }

    .cmp-detail-hero-avatar {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: linear-gradient(145deg, var(--blue), color-mix(in srgb, var(--blue) 72%, #0a0a2e));
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 800;
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(47, 47, 228, 0.22);
    }

    .cmp-detail-hero-text {
      flex: 1;
      min-width: 0;
      text-align: right;
    }

    .cmp-detail-hero-text h3 {
      margin: 0 0 2px;
      font-size: 15px;
      font-weight: 800;
      color: var(--text);
      line-height: 1.35;
      white-space: normal;
      overflow: visible;
      text-overflow: unset;
      word-break: break-word;
      overflow-wrap: anywhere;
      max-width: 100%
    }

    .cmp-detail-hero-sub {
      margin: 0 0 6px;
      font-size: 11px;
      color: var(--text3);
      font-family: var(--mono);
      font-weight: 500;
    }

    .cmp-detail-hero-badges {
      --cmp-hero-badge-fs: 10px;
      --cmp-hero-badge-pad-x: 8px;
      --cmp-hero-badge-pad-y: 2px;
      --cmp-hero-badge-gap: 5px;
      --cmp-hero-badge-icon: 8px;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: var(--cmp-hero-badge-gap);
      justify-content: flex-start;
      direction: rtl;
      width: 100%;
      min-width: 0;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-x;
      scrollbar-width: none;
      -ms-overflow-style: none
    }

    .cmp-detail-hero-badges::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0
    }

    .cmp-detail-hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      padding: var(--cmp-hero-badge-pad-y) var(--cmp-hero-badge-pad-x);
      border-radius: 999px;
      font-size: var(--cmp-hero-badge-fs);
      font-weight: 600;
      color: var(--text2);
      background: var(--surface);
      border: 1px solid var(--border);
      line-height: 1.2;
      max-width: min(100%, 200px);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex-shrink: 0;
      box-sizing: border-box
    }

    .cmp-detail-hero-badges--emp .cmp-detail-hero-badge--branch,
    .cmp-detail-hero-badges--emp .cmp-detail-hero-badge--supervisor {
      flex: 0 0 auto
    }

    .cmp-detail-hero-badge__lbl {
      flex-shrink: 0;
      color: var(--text3);
      font-weight: 600
    }

    .cmp-detail-hero-badge__lbl::after {
      content: ':';
      margin-inline-start: 2px
    }

    .cmp-detail-hero-badge__val {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .cmp-detail-hero-badge i {
      font-size: var(--cmp-hero-badge-icon);
      opacity: 0.75;
      flex-shrink: 0;
    }

    /* موظف — جنب بعض مع تمرير عند الحاجة */
    .cmp-detail-hero-badges--emp {
      flex-wrap: nowrap;
      overflow-x: auto;
      touch-action: pan-x
    }

    .cmp-detail-hero-badges--emp .cmp-detail-hero-badge {
      flex-shrink: 0;
      max-width: none
    }

    .cmp-detail-hero-badges--emp .cmp-detail-hero-badge--supervisor,
    .cmp-detail-hero-badges--emp .cmp-detail-hero-badge--branch {
      max-width: none
    }

    .cmp-detail-hero-score {
      display: flex;
      flex-direction: column;
      align-items: center;
      align-self: flex-start;
      gap: 2px;
      flex-shrink: 0;
      padding: 0;
      border: none;
      border-radius: 0;
      background: transparent;
      min-width: 56px;
      text-align: center;
    }

    .cmp-detail-hero-score--danger,
    .cmp-detail-hero-score--warn,
    .cmp-detail-hero-score--good,
    .cmp-detail-hero-score--excellent {
      background: transparent;
      border: none;
    }

    .cmp-detail-hero-score__lbl {
      font-size: 10px;
      font-weight: 600;
      color: var(--text3);
      margin-bottom: 0;
      white-space: nowrap;
      line-height: 1.2;
      width: 100%;
      text-align: center;
    }

    .cmp-detail-hero-score__val {
      font-size: 30px;
      font-weight: 900;
      line-height: 1;
      font-family: var(--mono);
      font-variant-numeric: tabular-nums;
    }

    .cmp-detail-hero-score__lvl {
      font-size: 11px;
      font-weight: 700;
      margin-top: 0;
      white-space: nowrap;
      line-height: 1.2;
      width: 100%;
      text-align: center;
    }

    .cmp-detail-hero-banner--fig {
      color: var(--mr-text);
    }

    .cmp-detail-hero-banner--fig .cmp-detail-hero-text h3 {
      margin: 0 0 4px;
      font-size: 17px;
      font-weight: 800;
      color: var(--mr-text);
      display: flex;
      align-items: center;
      gap: 8px;
      line-height: 1.35;
    }

    .cmp-detail-hero-banner--fig .cmp-detail-hero-text h3 i {
      font-size: 15px;
      opacity: 0.92;
      flex-shrink: 0;
    }

    .cmp-detail-hero-banner--fig .cmp-detail-hero-sub {
      margin: 6px 0 8px;
      font-size: 12px;
      color: var(--mr-text-2);
      font-family: var(--mono);
    }

    .cmp-detail-hero-banner--fig .cmp-detail-hero-meta {
      margin-top: 2px;
    }

    .cmp-detail-hero-meta {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 14px;
      font-size: 11px;
      color: var(--mr-text-2);
      line-height: 1.4;
    }

    .cmp-detail-hero-meta span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .cmp-detail-hero-meta i {
      font-size: 10px;
      opacity: 0.85;
      flex-shrink: 0;
    }

    .cmp-detail-hero-ring-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;
    }

    .cmp-detail-hero-ring {
      width: 76px;
      height: 76px;
      position: relative;
      flex-shrink: 0;
    }

    .cmp-detail-hero-ring svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .cmp-detail-hero-ring-lvl {
      font-size: 11px;
      font-weight: 700;
      color: var(--mr-text);
      line-height: 1.2;
      text-align: center;
    }

    .cmp-detail-hero-ring-lbl {
      font-size: 9px;
      font-weight: 700;
      color: var(--text3);
      line-height: 1.2;
      text-align: center;
      margin-top: 3px;
      white-space: nowrap;
    }

    .modal-card.cmp-detail-card .cmp-detail-hero-top {
      align-items: center;
      gap: 14px;
    }

    .emp-new-card--fig {
      background: #fff;
      border: 1px solid #e5eaf3;
      border-radius: 14px;
      box-shadow: 0 1px 4px rgba(15, 18, 36, 0.04);
      padding: 12px 12px 10px;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .modal-card.cmp-detail-card .emp-new-card--fig {
      background: var(--mr-surface);
      border: 1px solid var(--mr-border);
      box-shadow: var(--mr-shadow-card);
      padding: 10px 10px 8px;
    }

    .modal-card.cmp-detail-card .emp-new-card--fig .emp-new-list-item {
      border-bottom-color: var(--mr-border);
    }

    .modal-card.cmp-detail-card .emp-new-card--fig .emp-new-card-footer {
      border-top-color: var(--mr-border);
      padding-top: 6px;
    }

    .modal-card.cmp-detail-card .emp-new-card--fig .emp-new-card-header {
      margin-bottom: 4px;
    }

    [data-theme="dark"] .emp-new-card--fig {
      background: var(--mr-surface, var(--surface));
      border-color: var(--mr-border, var(--border));
    }

    [data-theme="dark"] .modal-card.cmp-detail-card .emp-new-card--fig {
      background: var(--mr-surface);
      border-color: var(--mr-border);
      box-shadow: var(--mr-shadow-card);
    }

    .emp-new-card--fig .emp-new-card-header {
      margin-bottom: 8px;
      font-size: 12px;
      font-weight: 700;
      color: var(--text);
    }

    .emp-new-card--fig .emp-new-card-header i {
      font-size: 13px;
      color: #f5b800;
    }

    .emp-new-card--fig .emp-new-list-item {
      font-size: 11px;
      gap: 8px;
      padding-bottom: 5px;
      border-bottom-color: #edf1f7;
    }

    .emp-new-card--fig .emp-new-list-item .lbl {
      color: var(--text3);
    }

    .emp-new-card--fig .emp-new-card-list {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    .emp-new-card-footer {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: auto;
      padding-top: 10px;
      border-top: 1px solid var(--mr-border, #e5eaf3);
      flex-shrink: 0;
    }

    .emp-new-card-footer__score {
      font-family: var(--mono);
      font-size: 22px;
      font-weight: 800;
      line-height: 1;
      flex-shrink: 0;
      min-width: 2.2em;
      text-align: center;
      font-variant-numeric: tabular-nums;
    }

    .cmp-h-bar {
      flex: 1;
      min-width: 0;
      height: 8px;
      border-radius: 999px;
      background: #e8edf5;
      overflow: hidden;
    }

    .modal-card.cmp-detail-card .cmp-h-bar {
      background: var(--mr-bg-2);
      border: 1px solid var(--mr-border);
      box-shadow: inset 0 1px 2px rgba(15, 18, 36, 0.04);
    }

    .cmp-h-bar__fill {
      height: 100%;
      border-radius: 999px;
      background: var(--mr-red, #FF0000);
      min-width: 4px;
      transition: width 0.45s ease, background 0.3s ease;
    }

    .modal-card.cmp-detail-card .cmp-charts-grid {
      grid-template-columns: 1fr 1fr;
    }

    .modal-card.cmp-detail-card .cmp-detail-section--chart {
      background: var(--mr-surface) !important;
      border: 1px solid var(--mr-border) !important;
      border-radius: 14px !important;
      box-shadow: var(--mr-shadow-card);
    }

    .modal-card.cmp-detail-card .cmp-detail-section--violations {
      background: var(--mr-surface);
      border: 1px solid var(--mr-border);
      border-radius: 14px;
      box-shadow: var(--mr-shadow-card);
      padding: 10px 12px;
    }

    [data-theme="dark"] .modal-card.cmp-detail-card .cmp-detail-section--chart,
    [data-theme="dark"] .modal-card.cmp-detail-card .cmp-detail-section--violations {
      background: var(--mr-surface) !important;
      border-color: var(--mr-border) !important;
      box-shadow: var(--mr-shadow-card);
    }

    .modal-card.cmp-detail-card .cmp-timeline-bar--current,
    .modal-card.cmp-detail-card .cmp-timeline-bar--muted {
      background: linear-gradient(180deg, #5b6fe8, #3f51b5) !important;
    }

    .modal-card.cmp-detail-card .cmp-timeline-bar--muted {
      opacity: 0.42;
    }

    .modal-card.cmp-detail-card .score-viol-row {
      background: var(--mr-surface);
      border: 1px solid var(--mr-border);
      border-radius: 12px;
      box-shadow: var(--mr-shadow-soft);
      padding: 8px 10px;
      gap: 10px;
    }

    [data-theme="dark"] .modal-card.cmp-detail-card .score-viol-row {
      background: var(--mr-bg-2);
      border-color: var(--mr-border);
      box-shadow: var(--mr-shadow-soft);
    }

    .modal-card.cmp-detail-card .score-viol-weight {
      font-size: 18px;
      font-weight: 800;
      color: #d32f2f;
    }

    .cmp-viol-pend-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 700;
      color: #c2410c;
      background: color-mix(in srgb, #ea580c 14%, #fff);
      border: 1px solid color-mix(in srgb, #ea580c 35%, #e5eaf3);
      flex-shrink: 0;
      white-space: nowrap;
    }

    .cmp-sev-legend-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .cmp-sev-legend-item--fig {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 4px 0;
      background: transparent;
      border: none;
      min-height: 0;
      font-size: 11px;
    }

    .cmp-sev-legend-item--fig .cmp-sev-legend-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text2);
    }

    .modal-card.cmp-detail-card .cmp-v-slider__track {
      width: 14px;
    }

    .modal-card.cmp-detail-card .cmp-v-slider {
      gap: 8px;
    }

    .modal-card.cmp-detail-card .cmp-v-slider--neg-val .cmp-v-slider__val {
      color: #FF0000;
    }

    .modal-card.cmp-detail-card .emp-new-card {
      border-radius: 14px;
    }

    .modal-card.cmp-detail-card .emp-new-card-header {
      margin-bottom: 8px;
    }

    .modal-card.cmp-detail-card .emp-new-list-item {
      gap: 8px;
      padding-bottom: 5px;
    }

    .modal-card.cmp-detail-card .cmp-detail-section-title {
      font-size: 13px;
    }

    .modal-card.cmp-detail-card .cmp-detail-section--violations .score-viol-row {
      padding: 8px 10px;
      font-size: 13px;
      border-radius: 10px;
    }

    .modal-card.cmp-detail-card .score-viol-name {
      font-size: 13px;
    }

    .modal-card.cmp-detail-card .score-viol-meta {
      font-size: 11px;
    }

    .modal-card.cmp-detail-card .score-viol-weight {
      font-size: 16px;
    }

    .modal-card.cmp-detail-card .cmp-detail-section--violations .cmp-viol-list.cmp-viol-list--scroll,
    .modal-card.cmp-detail-card .cmp-detail-section--violations .score-viol-list.cmp-viol-list--scroll {
      --cmp-viol-rows: 3;
      --cmp-viol-row-h: 62px;
      --cmp-viol-gap: 6px;
      display: flex !important;
      flex-direction: column !important;
      gap: var(--cmp-viol-gap) !important;
      max-height: calc(var(--cmp-viol-rows) * var(--cmp-viol-row-h) + (var(--cmp-viol-rows) - 1) * var(--cmp-viol-gap)) !important;
      height: auto !important;
      min-height: 0;
      overflow-y: auto !important;
      overflow-x: hidden;
      overscroll-behavior: contain;
      padding-inline-end: 8px;
      scrollbar-width: thin;
      scrollbar-color: var(--border2) transparent;
      -webkit-overflow-scrolling: touch;
    }

    .modal-card.cmp-detail-card .cmp-detail-section--violations .cmp-viol-list.cmp-viol-list--scroll .score-viol-row {
      min-height: var(--cmp-viol-row-h);
      flex-shrink: 0;
    }

    .modal-card.cmp-detail-card .cmp-detail-section--severity .cmp-severity-donut svg {
      width: clamp(100px, 24vw, 116px) !important;
      height: clamp(100px, 24vw, 116px) !important;
    }

    /* Refined Interactive Pulses (Subtle & Professional) */
    @keyframes pulse-excellent {

      0%,
      100% {
        transform: scale(1);
        filter: drop-shadow(0 0 3px rgba(154, 232, 90, 0.2));
      }

      50% {
        transform: scale(1.005);
        filter: drop-shadow(0 0 8px rgba(154, 232, 90, 0.4));
      }
    }

    @keyframes pulse-good {

      0%,
      100% {
        transform: scale(1);
        filter: drop-shadow(0 0 3px rgba(0, 122, 255, 0.2));
      }

      50% {
        transform: scale(1.005);
        filter: drop-shadow(0 0 8px rgba(0, 122, 255, 0.4));
      }
    }

    @keyframes pulse-warn {

      0%,
      100% {
        transform: scale(1);
        filter: drop-shadow(0 0 4px rgba(255, 204, 0, 0.3));
      }

      50% {
        transform: scale(1.01);
        filter: drop-shadow(0 0 10px rgba(255, 204, 0, 0.5));
      }
    }

    /* Enhanced Pulse Animations */
    @keyframes pulse-excellent {

      0%,
      100% {
        transform: scale(1);
        filter: drop-shadow(0 0 4px rgba(72, 161, 17, 0.4));
        opacity: 1;
      }

      50% {
        transform: scale(1.02);
        filter: drop-shadow(0 0 15px rgba(72, 161, 17, 0.7));
        opacity: 0.95;
      }
    }

    @keyframes pulse-good {

      0%,
      100% {
        transform: scale(1);
        filter: drop-shadow(0 0 4px rgba(0, 122, 255, 0.4));
        opacity: 1;
      }

      50% {
        transform: scale(1.025);
        filter: drop-shadow(0 0 18px rgba(0, 122, 255, 0.7));
        opacity: 0.95;
      }
    }

    @keyframes pulse-warn {

      0%,
      100% {
        transform: scale(1);
        filter: drop-shadow(0 0 4px rgba(255, 204, 0, 0.4));
        opacity: 1;
      }

      50% {
        transform: scale(1.03);
        filter: drop-shadow(0 0 20px rgba(255, 204, 0, 0.7));
        opacity: 0.9;
      }
    }

    @keyframes pulse-danger {

      0%,
      100% {
        transform: scale(1);
        filter: drop-shadow(0 0 6px rgba(255, 0, 0, 0.5));
        opacity: 1;
      }

      50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 25px rgba(255, 0, 0, 0.8));
        opacity: 0.85;
      }
    }

    @keyframes pulse-intense-negative {

      0%,
      100% {
        transform: scale(1);
        filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.6));
      }

      50% {
        transform: scale(1.08);
        filter: drop-shadow(0 0 30px rgba(255, 0, 0, 0.9));
      }
    }

    /* Interactive Donut Styles */
    .interactive-donut {
      cursor: pointer;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
    }

    .interactive-donut:hover {
      transform: scale(1.1);
      filter: brightness(1.1) drop-shadow(0 0 25px var(--ring-color));
      z-index: 10;
    }

    .interactive-donut:active {
      transform: scale(0.95);
    }

    .interactive-donut .donut-ripple {
      position: absolute;
      inset: -10px;
      border: 2px solid var(--ring-color);
      border-radius: 50%;
      opacity: 0;
      pointer-events: none;
      animation: donut-ripple-anim 2s infinite;
    }

    @keyframes donut-ripple-anim {
      0% {
        transform: scale(0.8);
        opacity: 0.5;
      }

      100% {
        transform: scale(1.4);
        opacity: 0;
      }
    }

    .lvl-excellent-pulse {
      animation: pulse-excellent 5s ease-in-out infinite;
    }

    .lvl-good-pulse {
      animation: pulse-good 4s ease-in-out infinite;
    }

    .lvl-warn-pulse {
      animation: pulse-warn 3s ease-in-out infinite;
    }

    .lvl-danger-pulse {
      animation: pulse-danger 2s ease-in-out infinite;
    }

    .is-negative-pulse {
      animation: pulse-intense-negative 1.5s ease-in-out infinite;
    }

    .cmp-detail-hero {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 24px;
      padding: 20px;
      background: linear-gradient(135deg, var(--surface2) 0%, var(--surface) 100%);
      border-radius: 14px;
      border: 1px solid var(--border);
      margin-bottom: 18px;
      align-items: center
    }

    .cmp-detail-score-ring {
      position: relative;
      width: 130px;
      height: 130px;
      flex-shrink: 0;
      border-radius: 50%;
    }

    .cmp-detail-score-ring.lvl-excellent {
      animation: pulse-excellent 5s ease-in-out infinite;
    }

    .cmp-detail-score-ring.lvl-good {
      animation: pulse-good 4s ease-in-out infinite;
    }

    .cmp-detail-score-ring.lvl-warn {
      animation: pulse-warn 3s ease-in-out infinite;
    }

    .cmp-detail-score-ring.lvl-danger {
      animation: pulse-danger 2s ease-in-out infinite;
    }

    .cmp-detail-score-ring.is-negative {
      animation: pulse-intense-negative 1.5s ease-in-out infinite;
    }

    .cmp-detail-score-ring svg {
      width: 100%;
      height: 100%;
    }

    .cmp-detail-ring-bg {
      fill: none;
      stroke: var(--bg2);
      stroke-width: 10
    }

    .cmp-detail-ring-fg {
      fill: none;
      stroke-width: 10;
      stroke-linecap: round
    }

    .cmp-detail-ring-fg.lvl-excellent {
      stroke: var(--green)
    }

    .cmp-detail-ring-fg.lvl-good {
      stroke: var(--blue)
    }

    .cmp-detail-ring-fg.lvl-warn {
      stroke: var(--amber)
    }

    .cmp-detail-ring-fg.lvl-danger {
      stroke: var(--red)
    }

    .cmp-detail-ring-text {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-family: var(--mono)
    }

    .cmp-detail-ring-num {
      font-size: 36px;
      font-weight: 700;
      line-height: 1;
      color: var(--text)
    }

    .cmp-detail-ring-num.lvl-excellent {
      color: var(--green-text)
    }

    .cmp-detail-ring-num.lvl-good {
      color: var(--blue-text)
    }

    .cmp-detail-ring-num.lvl-warn {
      color: var(--amber-text)
    }

    .cmp-detail-ring-num.lvl-danger {
      color: var(--red-text)
    }

    .cmp-detail-ring-label {
      font-size: 11px;
      color: var(--text3);
      margin-top: 4px;
      letter-spacing: 0.5px
    }

    .cmp-detail-info {
      flex: 1;
      min-width: 0
    }

    .cmp-detail-name {
      font-size: 22px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 6px
    }

    .cmp-detail-name-sub {
      font-size: 13px;
      color: var(--text2);
      font-family: var(--mono);
      margin-bottom: 14px
    }

    .cmp-detail-quick-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px
    }

    .cmp-quick-stat {
      padding: 10px 12px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px
    }

    .cmp-quick-stat-label {
      font-size: 10px;
      color: var(--text3);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 4px
    }

    .cmp-quick-stat-value {
      font-size: 18px;
      font-weight: 700;
      color: var(--text);
      font-family: var(--mono);
      line-height: 1
    }

    .cmp-detail-section {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px 18px;
      margin-bottom: 14px;
      overflow-x: hidden
    }

    .cmp-detail-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
      flex-wrap: wrap;
      gap: 8px
    }

    .cmp-detail-section-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 8px
    }

    .cmp-detail-section-title i {
      color: var(--blue);
      font-size: 12px
    }

    .emp-new-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-auto-rows: 1fr;
      align-items: stretch;
      gap: var(--cmp-pair-gap);
      margin: 0 auto 16px;
      direction: rtl;
      width: 100%;
      max-width: var(--cmp-detail-w);
      box-sizing: border-box
    }

    .emp-new-grid .emp-new-card--response,
    .emp-new-grid .emp-new-card--compliance {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      height: 100%
    }

    .emp-new-cards-wrap--single {
      width: 100%;
      max-width: min(200px, calc(var(--cmp-detail-w) * 0.5));
      margin: 0 auto 16px;
      box-sizing: border-box
    }

    .emp-new-card {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: var(--cmp-card-pad);
      display: flex;
      flex-direction: column;
      min-height: 0;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box
    }

    .emp-new-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: var(--cmp-card-title);
      font-weight: 700;
      color: var(--text);
      margin-bottom: 6px;
      gap: 4px
    }

    .emp-new-card-header span {
      min-width: 0;
      line-height: 1.25
    }

    .emp-new-card-header i {
      font-size: clamp(8px, 2.2vw, 10px);
      opacity: .85;
      flex-shrink: 0
    }

    .emp-new-card-body {
      display: flex;
      align-items: stretch;
      justify-content: space-between;
      gap: clamp(4px, 1.2vw, 8px);
      flex: 1;
      min-height: var(--cmp-card-body-h)
    }

    .emp-new-card-list {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
      justify-content: center
    }

    .emp-new-list-item {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 3px;
      font-size: var(--cmp-card-text);
      border-bottom: 1px dashed var(--border);
      padding-bottom: 3px;
      line-height: 1.25
    }

    .emp-new-list-item:last-child {
      border-bottom: none;
      padding-bottom: 0
    }

    .emp-new-list-item .lbl {
      color: var(--text3);
      flex: 1;
      min-width: 0;
      overflow-wrap: anywhere;
      word-break: break-word
    }

    .emp-new-list-item .val {
      font-weight: 700;
      font-family: var(--mono);
      flex-shrink: 0;
      font-size: var(--cmp-card-text);
      white-space: nowrap
    }

    .emp-new-card-meter {
      flex-shrink: 0;
      width: var(--cmp-card-meter);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2px 0
    }

    .cmp-v-slider {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      height: 100%;
      min-height: var(--cmp-card-slider-h);
      width: 100%
    }

    .cmp-v-slider__track {
      flex: 1;
      width: 12px;
      min-height: var(--cmp-card-slider-track);
      border-radius: 999px;
      background: var(--surface);
      border: 1px solid var(--border);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: flex-end
    }

    .cmp-v-slider__fill {
      width: 100%;
      border-radius: 999px;
      min-height: 4px;
      transition: height 0.45s ease, background 0.3s ease;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.06)
    }

    .cmp-v-slider__val {
      font-size: var(--cmp-card-slider-val);
      font-weight: 800;
      font-family: var(--mono);
      line-height: 1;
      font-variant-numeric: tabular-nums
    }

    .cmp-v-slider--pulse-warn .cmp-v-slider__fill {
      animation: cmp-v-slider-pulse 2s ease-in-out infinite
    }

    .cmp-v-slider--pulse-neg .cmp-v-slider__fill {
      animation: cmp-v-slider-pulse 1.5s ease-in-out infinite
    }

    @keyframes cmp-v-slider-pulse {

      0%,
      100% {
        opacity: 1;
        filter: brightness(1)
      }

      50% {
        opacity: 0.85;
        filter: brightness(1.15)
      }
    }

    .cmp-charts-grid {
      display: grid;
      grid-template-columns: minmax(0, var(--cmp-chart-sev)) minmax(0, 1fr);
      gap: var(--cmp-pair-gap);
      margin: 0 auto 8px;
      direction: rtl;
      align-items: stretch;
      width: 100%;
      max-width: var(--cmp-detail-w);
      box-sizing: border-box
    }

    .cmp-charts-grid .cmp-detail-section--timeline {
      margin-bottom: 0
    }

    .cmp-charts-grid .cmp-detail-section--severity {
      margin-bottom: 0;
      max-width: 100% !important;
      width: 100% !important;
      box-sizing: border-box;
      padding: var(--cmp-card-pad) !important
    }

    .cmp-detail-section--severity .cmp-severity-donut svg {
      width: clamp(92px, 22vw, 112px) !important;
      height: clamp(92px, 22vw, 112px) !important
    }

    .cmp-detail-section--severity .cmp-severity-legend {
      flex: 1 1 auto;
      min-width: 0;
      max-width: none
    }

    .cmp-detail-section--severity .cmp-sev-legend-item {
      flex-direction: column;
      align-items: stretch;
      gap: 3px;
      padding: 4px 6px;
      min-height: 0;
      overflow: visible
    }

    .cmp-detail-section--severity .cmp-sev-legend-label {
      width: 100%;
      text-align: start;
      line-height: 1.2
    }

    .cmp-detail-section--severity .cmp-sev-legend-meta {
      width: 100%;
      justify-content: space-between;
      gap: 4px;
      flex-shrink: 0
    }

    .cmp-detail-section--timeline {
      max-width: none;
      width: 100%;
      justify-self: stretch
    }

    .cmp-detail-section--timeline .cmp-timeline-wrap {
      display: flex;
      justify-content: center;
      width: 100%
    }

    .cmp-detail-section--timeline .cmp-timeline-wrap,
    .cmp-detail-section--timeline .cmp-timeline {
      direction: ltr
    }

    .cmp-breakdown {
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .cmp-breakdown-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      background: var(--surface2);
      border-radius: 8px;
      font-size: 13px
    }

    .cmp-breakdown-label {
      color: var(--text2);
      display: flex;
      align-items: center;
      gap: 8px
    }

    .cmp-breakdown-label i {
      color: var(--text3);
      font-size: 11px
    }

    .cmp-breakdown-value {
      font-family: var(--mono);
      font-weight: 700;
      font-size: 14px
    }

    .cmp-breakdown-value.positive {
      color: var(--green-text)
    }

    .cmp-breakdown-value.negative {
      color: var(--red-text)
    }

    .cmp-breakdown-value.neutral {
      color: var(--text)
    }

    .cmp-breakdown-final {
      background: var(--blue-light);
      border: 1.5px solid var(--blue);
      font-weight: 700
    }

    .cmp-breakdown-final .cmp-breakdown-label {
      color: var(--blue-text);
      font-weight: 700
    }

    .cmp-breakdown-final .cmp-breakdown-value {
      color: var(--blue-text);
      font-size: 18px
    }

    .cmp-severity-grid {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-direction: row-reverse
    }

    .cmp-severity-donut {
      flex-shrink: 0;
      line-height: 0
    }

    .cmp-severity-donut svg {
      width: 88px;
      height: 88px;
      display: block
    }

    .cmp-severity-legend {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
      max-width: 140px
    }

    .cmp-sev-legend-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      padding: 5px 8px;
      background: var(--surface);
      border-radius: 8px;
      border: 1px solid var(--border);
      direction: rtl;
      font-size: 10px;
      line-height: 1.3;
      min-height: 28px
    }

    .cmp-sev-legend-item--empty {
      opacity: 0.5
    }

    .cmp-sev-legend-item--high {
      background: color-mix(in srgb, #FF0000 10%, var(--surface));
      border-color: color-mix(in srgb, #FF0000 30%, var(--border))
    }

    .cmp-sev-legend-item--mid {
      background: color-mix(in srgb, var(--amber) 12%, var(--surface));
      border-color: color-mix(in srgb, var(--amber) 35%, var(--border))
    }

    .cmp-sev-legend-item--low {
      background: color-mix(in srgb, var(--blue) 12%, var(--surface));
      border-color: color-mix(in srgb, var(--blue) 35%, var(--border))
    }

    .cmp-sev-legend-label {
      font-size: 10px;
      font-weight: 700;
      color: var(--text2);
      flex-shrink: 0
    }

    .cmp-sev-legend-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 800;
      flex-shrink: 0
    }

    .cmp-sev-legend-item--high .cmp-sev-legend-count,
    .cmp-sev-legend-item--high .cmp-sev-legend-pct {
      color: #FF0000
    }

    .cmp-sev-legend-item--mid .cmp-sev-legend-count,
    .cmp-sev-legend-item--mid .cmp-sev-legend-pct {
      color: var(--amber)
    }

    .cmp-sev-legend-item--low .cmp-sev-legend-count,
    .cmp-sev-legend-item--low .cmp-sev-legend-pct {
      color: var(--blue)
    }

    .cmp-sev-legend-item--empty .cmp-sev-legend-count,
    .cmp-sev-legend-item--empty .cmp-sev-legend-pct {
      color: var(--text3)
    }

    .cmp-timeline-wrap {
      position: relative;
      width: 100%;
      max-width: 100%;
      direction: ltr;
      padding: 4px 2px 0
    }

    .cmp-timeline {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 6px;
      width: 100%;
      min-height: 0;
      padding: 0;
      position: relative;
      z-index: 1;
      direction: ltr
    }

    .cmp-timeline-slot,
    .cmp-timeline-track {
      background: none !important;
      border: none !important;
      box-shadow: none !important;
      padding: 0 !important;
      min-height: 0 !important
    }

    .cmp-timeline-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      gap: 5px;
      flex: 1 1 0;
      min-width: 28px;
      max-width: 44px;
      height: auto;
      padding-bottom: 0
    }

    .cmp-timeline-col--link {
      cursor: pointer;
      border-radius: 10px;
      transition: background .15s ease, transform .15s ease
    }

    .cmp-timeline-col--link:hover {
      background: color-mix(in srgb, var(--mr-primary) 6%, transparent)
    }

    .cmp-timeline-col--link:focus-visible {
      outline: 2px solid var(--mr-primary);
      outline-offset: 2px
    }

    .cmp-timeline-col--link:active {
      transform: translateY(1px)
    }

    .cmp-timeline-bar {
      width: 100%;
      max-width: 34px;
      border-radius: 8px 8px 3px 3px;
      transition: height .35s ease;
      min-height: 8px
    }

    .cmp-timeline-bar--current {
      background: var(--red)
    }

    .cmp-timeline-bar--muted {
      background: #b8c5d6
    }

    .cmp-timeline-count {
      font-size: 11px;
      font-weight: 700;
      font-family: var(--mono);
      color: var(--text2);
      text-align: center;
      line-height: 1;
      min-height: 14px
    }

    .cmp-timeline-count:empty {
      visibility: hidden
    }

    .cmp-timeline-axis {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      margin-top: 2px
    }

    .cmp-timeline-month {
      font-size: 11px;
      font-weight: 600;
      color: var(--text);
      line-height: 1.25;
      white-space: nowrap
    }

    .cmp-timeline-axis-line {
      display: block;
      width: 100%;
      border-bottom: 1px solid #d5dde8;
      margin: 5px 0 4px
    }

    .cmp-timeline-year {
      font-size: 10px;
      font-weight: 600;
      color: var(--text3);
      font-family: var(--mono);
      line-height: 1.2
    }

    .cmp-detail-section--violations .cmp-viol-list:not(.cmp-viol-list--scroll) {
      display: flex !important;
      flex-direction: column !important;
      gap: 10px;
      max-height: 280px !important;
      height: 280px;
      overflow-y: auto !important;
      overflow-x: hidden;
      overscroll-behavior: contain;
      padding-inline-end: 8px;
      scrollbar-width: thin;
      scrollbar-color: var(--border2) transparent;
      margin: 0 !important;
      -webkit-overflow-scrolling: touch
    }

    .cmp-detail-section--violations .cmp-viol-list.cmp-viol-list--scroll {
      --cmp-viol-rows: 3;
      --cmp-viol-row-h: 62px;
      --cmp-viol-gap: 6px;
      display: flex !important;
      flex-direction: column !important;
      gap: var(--cmp-viol-gap) !important;
      max-height: calc(var(--cmp-viol-rows) * var(--cmp-viol-row-h) + (var(--cmp-viol-rows) - 1) * var(--cmp-viol-gap)) !important;
      height: auto !important;
      min-height: 0;
      overflow-y: auto !important;
      overflow-x: hidden;
      overscroll-behavior: contain;
      padding-inline-end: 8px;
      scrollbar-width: thin;
      scrollbar-color: var(--border2) transparent;
      margin: 0 !important;
      -webkit-overflow-scrolling: touch
    }

    .cmp-detail-section--violations .cmp-viol-list.cmp-viol-list--scroll .score-viol-row {
      min-height: var(--cmp-viol-row-h);
      flex-shrink: 0
    }

    .cmp-detail-section--violations .score-viol-list {
      margin-bottom: 0 !important
    }

    .cmp-detail-section--violations .cmp-viol-list::-webkit-scrollbar {
      width: 5px
    }

    .cmp-detail-section--violations .cmp-viol-list::-webkit-scrollbar-thumb {
      background: var(--border2);
      border-radius: 10px
    }

    .cmp-detail-section--violations .cmp-viol-list::-webkit-scrollbar-thumb:hover {
      background: var(--text3)
    }

    .cmp-viol-list .score-viol-row {
      margin: 0;
      flex-shrink: 0
    }

    .cmp-violations-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: 320px;
      overflow-y: auto;
      overflow-x: hidden
    }

    .cmp-violations-list::-webkit-scrollbar {
      width: 5px
    }

    .cmp-violations-list::-webkit-scrollbar-thumb {
      background: var(--border2);
      border-radius: 3px
    }

    .cmp-viol-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 10px 12px;
      background: var(--surface2);
      border-radius: 8px;
      border-right: 3px solid var(--text3);
      cursor: pointer;
      transition: 0.15s
    }

    .cmp-viol-item:hover {
      background: var(--bg2);
      transform: translateX(-2px)
    }

    .cmp-viol-item.sev-low {
      border-right-color: var(--blue)
    }

    .cmp-viol-item.sev-mid {
      border-right-color: var(--amber)
    }

    .cmp-viol-item.sev-high {
      border-right-color: var(--red)
    }

    .cmp-viol-item.sev-crit {
      border-right-color: var(--red)
    }

    .cmp-viol-item.sev-warn {
      border-right-color: #ea580c;
      background: color-mix(in srgb, #ea580c 10%, var(--surface2))
    }

    .cmp-viol-info {
      flex: 1;
      min-width: 0
    }

    .cmp-viol-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 2px
    }

    .cmp-viol-meta {
      font-size: 11px;
      color: var(--text3);
      font-family: var(--mono)
    }

    .cmp-viol-impact {
      font-family: var(--mono);
      font-weight: 700;
      font-size: 13px;
      color: var(--red-text);
      flex-shrink: 0;
      min-width: 60px;
      text-align: center
    }

    .cmp-viol-decay {
      font-size: 9px;
      color: var(--text3);
      display: block;
      margin-top: 2px
    }

    .cmp-viol-empty {
      text-align: center;
      padding: 30px 20px;
      color: var(--text3);
      font-size: 13px
    }

    .cmp-viol-empty i {
      font-size: 32px;
      color: var(--green);
      display: block;
      margin-bottom: 8px;
      opacity: 0.6
    }

    /* Personal Indicators */
    .indicators-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 14px;
      margin-bottom: 18px;
      padding-bottom: 10px;
    }

    .indicators-row::-webkit-scrollbar {
      height: 6px;
    }

    .indicators-row::-webkit-scrollbar-track {
      background: transparent;
    }

    .indicators-row::-webkit-scrollbar-thumb {
      background: var(--border2);
      border-radius: 10px;
    }

    .indicator-card {
      background: var(--mr-surface);
      border: 1px solid var(--mr-border);
      border-radius: var(--mr-radius-card);
      box-shadow: var(--mr-shadow-card);
      padding: 18px;
      display: flex;
      align-items: center;
      gap: 16px
    }

    .indicator-ring {
      position: relative;
      width: 90px;
      height: 90px;
      flex-shrink: 0
    }

    .indicator-ring svg {
      width: 100%;
      height: 100%;
    }

    .indicator-ring-bg {
      fill: none;
      stroke: var(--bg2);
      stroke-width: 8
    }

    .indicator-ring-fg {
      fill: none;
      stroke-width: 8;
      stroke-linecap: round;
      transition: stroke 0.3s, d 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .indicator-ring-text {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-family: var(--mono)
    }

    .indicator-ring-num {
      font-size: 22px;
      font-weight: 700;
      line-height: 1;
      color: var(--text)
    }

    .indicator-ring-label {
      font-size: 9px;
      color: var(--text3);
      margin-top: 2px;
      letter-spacing: 0.5px
    }

    .indicator-info {
      flex: 1;
      min-width: 0
    }

    .indicator-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .indicator-desc {
      font-size: 11px;
      color: var(--text3);
      line-height: 1.5;
      margin-bottom: 8px
    }

    .indicator-stat {
      font-size: 12px;
      color: var(--text2);
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap
    }

    .indicator-stat .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      vertical-align: middle;
      line-height: 1;
      padding-block: 3px;
      box-sizing: border-box;
    }

    .indicator-stat .badge i {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 0.95em;
      width: 1.15em;
      height: 1.15em;
      line-height: 1;
    }

    .indicator-stat .badge i::before {
      line-height: 1;
    }

    .indicator-card--score {
      flex-direction: column;
      align-items: stretch
    }

    .indicator-card__head {
      display: flex;
      align-items: center;
      gap: 16px
    }

    .indicator-title__short {
      display: none
    }

    .indicator-ring.lvl-excellent .indicator-ring-fg {
      stroke: var(--green)
    }

    .indicator-ring.lvl-excellent .indicator-ring-num {
      color: var(--green-text)
    }

    .indicator-ring.lvl-good .indicator-ring-fg {
      stroke: var(--blue)
    }

    .indicator-ring.lvl-good .indicator-ring-num {
      color: var(--blue-text)
    }

    .indicator-ring.lvl-warn .indicator-ring-fg {
      stroke: var(--amber)
    }

    .indicator-ring.lvl-warn .indicator-ring-num {
      color: var(--amber-text)
    }

    .indicator-ring.lvl-danger .indicator-ring-fg {
      stroke: var(--red)
    }

    .indicator-ring.lvl-danger .indicator-ring-num {
      color: var(--red-text)
    }

    .indicator-ring.lvl-excellent {
      animation: pulse-excellent 5s ease-in-out infinite;
    }

    .indicator-ring.lvl-good {
      animation: pulse-good 4s ease-in-out infinite;
    }

    .indicator-ring.lvl-warn {
      animation: pulse-warn 3s ease-in-out infinite;
    }

    .indicator-ring.lvl-danger {
      animation: pulse-danger 2s ease-in-out infinite;
    }

    .indicator-ring.is-negative {
      animation: pulse-intense-negative 1.5s ease-in-out infinite;
    }

    @keyframes ringPulse {

      0%,
      100% {
        filter: drop-shadow(0 0 0 rgba(255, 0, 0, 0));
      }

      50% {
        filter: drop-shadow(0 0 6px rgba(255, 0, 0, 0.4));
      }
    }

    /* Score Breakdown Panel */
    .score-breakdown-toggle {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: var(--blue-light);
      color: var(--blue-text);
      border: 1px solid transparent;
      border-radius: 8px;
      padding: 5px 12px;
      font-family: var(--font);
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      transition: 0.2s;
      margin-top: 8px
    }

    .score-breakdown-toggle:hover {
      background: var(--blue);
      color: #fff
    }

    .score-breakdown-toggle i {
      font-size: 10px;
      transition: transform 0.3s
    }

    .score-breakdown-toggle.open i {
      transform: rotate(180deg)
    }

    .score-breakdown-panel {
      display: none;
      margin-top: 12px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px;
      animation: fadeIn 0.25s ease
    }

    .score-breakdown-panel.open {
      display: block
    }

    .score-equation {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      margin-bottom: 14px;
      flex-wrap: wrap;
      font-family: var(--mono);
      font-size: 14px;
      font-weight: 600
    }

    .eq-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px
    }

    .eq-num {
      font-size: 22px;
      font-weight: 700;
      line-height: 1
    }

    .eq-label {
      font-size: 9px;
      color: var(--text3);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-weight: 500
    }

    .eq-op {
      font-size: 20px;
      font-weight: 700;
      color: var(--text3);
      line-height: 1;
      padding: 0 2px
    }

    .eq-result {
      padding: 6px 14px;
      border-radius: 8px;
      background: var(--blue-light)
    }

    .score-section-title {
      font-size: 12px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .score-section-title i {
      font-size: 11px;
      color: var(--blue)
    }

    .score-viol-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 14px
    }

    /* لوحة الامتثال: 4 مخالفات ظاهرة ثم تمرير */
    .score-breakdown-panel .score-viol-list {
      --score-viol-list-rows: 4;
      --score-viol-list-row-h: 76px;
      --score-viol-list-gap: 6px;
      max-height: calc(var(--score-viol-list-rows) * var(--score-viol-list-row-h) + (var(--score-viol-list-rows) - 1) * var(--score-viol-list-gap));
      overflow-y: auto;
      overscroll-behavior: contain;
      padding-inline-end: 4px;
      scrollbar-width: thin;
      scrollbar-color: var(--border2) transparent
    }

    .score-breakdown-panel .score-viol-list::-webkit-scrollbar {
      width: 5px
    }

    .score-breakdown-panel .score-viol-list::-webkit-scrollbar-thumb {
      background: var(--border2);
      border-radius: 10px
    }

    .score-breakdown-panel .score-viol-list::-webkit-scrollbar-thumb:hover {
      background: var(--text3)
    }

    .score-viol-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 14px;
      align-items: center;
      padding: 8px 12px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 12px;
      transition: 0.15s
    }

    .score-viol-row:hover {
      border-color: var(--border2)
    }

    .score-viol-row.score-viol-row--admin-warn {
      background: color-mix(in srgb, #ea580c 12%, var(--surface));
      border: 1px solid #ea580c;
    }

    [data-theme="dark"] .score-viol-row.score-viol-row--admin-warn {
      border-color: #ea580c;
      background: color-mix(in srgb, #ea580c 14%, var(--surface));
    }

    .score-viol-tag {
      font-size: 10px;
      font-weight: 600;
      color: #c2410c;
      flex-shrink: 0;
      white-space: nowrap
    }

    .score-viol-tag--warn {
      padding: 1px 5px;
      border-radius: 4px;
      background: color-mix(in srgb, #ea580c 14%, var(--surface))
    }

    .score-viol-weight--zero {
      color: #c2410c;
      font-weight: 700
    }

    .score-viol-row.score-viol-row--on-time {
      background: color-mix(in srgb, var(--green) 10%, var(--surface));
      border: 1px solid color-mix(in srgb, var(--green) 40%, var(--border));
    }

    .score-viol-row.score-viol-row--on-time:hover {
      border-color: color-mix(in srgb, var(--green) 58%, var(--border));
    }

    .score-viol-name {
      font-weight: 600;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 6px
    }

    .score-viol-name .sev-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0
    }

    .score-viol-meta {
      font-size: 10px;
      color: var(--text3);
      margin-top: 2px;
      display: flex;
      gap: 14px;
      flex-wrap: wrap
    }

    .score-viol-meta span {
      display: inline-flex;
      align-items: center;
      gap: 3px
    }

    .score-viol-weight {
      text-align: left;
      font-family: var(--mono);
      font-weight: 700;
      font-size: 14px;
      color: var(--red-text);
      white-space: nowrap;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 2px
    }

    .score-viol-weight .raw-weight {
      font-size: 10px;
      color: var(--text3);
      font-weight: 500;
      text-decoration: line-through
    }

    .score-bonus-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      background: var(--green-light);
      border: 1px solid rgba(72, 161, 17, 0.2);
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: var(--green-text)
    }

    .score-bonus-row i {
      margin-left: 6px
    }

    .score-bonus-val {
      font-family: var(--mono);
      font-size: 18px;
      font-weight: 700
    }

    .score-no-viols {
      text-align: center;
      padding: 20px;
      color: var(--text3);
      font-size: 12px
    }

    .score-no-viols i {
      font-size: 28px;
      display: block;
      margin-bottom: 8px;
      opacity: 0.4
    }

    .score-decay-info {
      font-size: 10px;
      color: var(--text3);
      background: var(--surface);
      border: 1px dashed var(--border);
      border-radius: 8px;
      padding: 10px 12px;
      margin-top: 10px;
      line-height: 1.8
    }

    .score-decay-info strong {
      color: var(--text2)
    }

    .state-dist {
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 4px 0
    }

    .state-dist-item {
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .state-dist-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px
    }

    .state-dist-label {
      font-size: 13px;
      color: var(--text2);
      font-weight: 500
    }

    .state-dist-count {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      font-family: var(--mono)
    }

    .state-dist-bar {
      height: 6px;
      background: var(--bg2);
      border-radius: 3px;
      overflow: hidden
    }

    .state-dist-fill {
      height: 100%;
      border-radius: 3px;
      transition: width 0.4s ease
    }

    .state-dist-fill.b-amber {
      background: var(--amber)
    }

    .state-dist-fill.b-blue {
      background: var(--blue)
    }

    .state-dist-fill.b-purple {
      background: var(--purple)
    }

    .state-dist-fill.b-red {
      background: var(--red)
    }

    .state-dist-fill.b-gray {
      background: var(--text3)
    }

    .state-dist-fill.b-green {
      background: var(--green)
    }

    .recent-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 10px;
      border-radius: 8px;
      cursor: pointer;
      transition: 0.15s
    }

    .recent-item:hover {
      background: var(--surface2)
    }

    .recent-icon {
      width: 32px;
      height: 32px;
      background: var(--blue-light);
      color: var(--blue-text);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .recent-info {
      flex: 1;
      min-width: 0
    }

    .recent-info strong {
      font-size: 12px;
      color: var(--text);
      display: block
    }

    .recent-info span {
      font-size: 11px;
      color: var(--text3)
    }

    #sbConnectionStatus {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 10px;
      color: rgba(160, 168, 184, 0.5);
      margin-top: 6px;
      padding: 4px 8px;
      background: rgba(255, 255, 255, 0.02);
      border-radius: 6px;
      justify-content: center
    }

    /* Att Viewer */
    .att-viewer {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.92);
      z-index: 10000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 60px 24px
    }

    .att-viewer.open {
      display: flex;
      align-items: stretch;
      justify-content: stretch;
      box-sizing: border-box;
      animation: cfFade 0.2s ease
    }

    /* فوق بطاقة التذكرة (تنبيهات / امتثال) */
    #attViewer.att-over-ticket.open {
      z-index: 3500 !important
    }

    .att-viewer-content img,
    .att-viewer-content video {
      max-width: 100%;
      max-height: 85vh;
      border-radius: 8px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
      display: block
    }

    .att-viewer-content iframe {
      width: 90vw;
      height: 85vh;
      border: none;
      border-radius: 8px;
      background: #fff
    }

    .att-viewer-content .att-fallback {
      text-align: center;
      color: #fff;
      padding: 40px
    }

    .att-viewer-content .att-fallback i {
      font-size: 80px;
      opacity: 0.6;
      margin-bottom: 20px
    }

    .att-viewer-content .att-fallback a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 20px;
      background: var(--blue);
      color: #fff;
      border-radius: 8px;
      text-decoration: none;
      font-size: 13px;
      font-weight: 500
    }

    .att-viewer-close,
    .att-viewer-download {
      display: none !important
    }

    .att-viewer-main {
      position: relative;
      z-index: 0;
      flex: 0 1 auto;
      max-width: 100%;
      max-height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding-bottom: max(12px, env(safe-area-inset-bottom, 0px))
    }

    .att-viewer-media-frame {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      max-width: 100%;
      flex-shrink: 0
    }

    .att-viewer-media-frame .att-viewer-content {
      position: relative;
      z-index: 0
    }

    .att-viewer-close-btn {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-width: 128px;
      min-height: 44px;
      padding: 10px 26px;
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.14);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: #fff;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      z-index: 25;
      touch-action: manipulation;
      transition: background 0.18s ease, transform 0.15s ease
    }

    .att-viewer-close-btn:active {
      transform: scale(0.98);
      background: rgba(255, 255, 255, 0.22)
    }

    .att-viewer-stage {
      position: relative;
      flex: 1 1 auto;
      width: 100%;
      min-height: min(60vh, calc(100dvh - 140px));
      display: flex;
      align-items: center;
      justify-content: center;
      will-change: transform;
      transition: transform 0.22s ease
    }

    .att-viewer-content {
      position: relative;
      z-index: 0;
      flex: 0 1 auto;
      max-width: 100%;
      max-height: 100%;
      display: flex;
      align-items: center;
      justify-content: center
    }

    #attViewer .att-viewer-content:has(#att-loading),
    #attViewer .att-viewer-stage:has(#att-loading) .att-viewer-content,
    #attViewer .att-viewer-main:has(#att-loading) .att-viewer-content {
      flex: 1 1 auto;
      align-self: stretch;
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      min-height: inherit
    }

    .att-viewer-load-wrap {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: min(60vh, calc(100dvh - 180px));
      display: flex;
      align-items: center;
      justify-content: center
    }

    #attViewer #att-loading {
      position: absolute !important;
      inset: 0 !important;
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 10px !important;
      text-align: center;
      min-width: 0;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      pointer-events: none
    }

    #attViewer #att-loading.att-viewer-loading-panel {
      position: relative !important;
      inset: auto !important;
      min-height: min(60vh, calc(100dvh - 180px));
      width: 100%;
      padding: 40px;
      color: #fff
    }

    #attViewer #att-loading > i {
      margin: 0 !important;
      flex-shrink: 0
    }

    #attViewer #att-loading p {
      margin: 0 !important;
      white-space: nowrap !important;
      line-height: 1.35 !important
    }

    #attViewer .att-viewer-caption {
      display: none !important
    }

    .att-viewer-load-wrap video,
    .att-viewer-load-wrap img,
    .att-viewer-load-wrap iframe,
    #attViewerContent > video,
    #attViewerContent > img {
      position: relative;
      z-index: 20
    }

    .att-media-zoom-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      max-width: 100%;
      max-height: 85vh;
      touch-action: none;
      cursor: zoom-in;
      z-index: 20
    }

    .att-media-zoom-wrap.is-zoomed {
      cursor: grab;
      overflow: auto;
      -webkit-overflow-scrolling: touch
    }

    .att-media-zoom-wrap.is-zoomed.is-panning {
      cursor: grabbing
    }

    .att-media-zoom-inner {
      transform-origin: center center;
      transition: transform 0.1s ease-out;
      will-change: transform
    }

    .att-media-zoom-target {
      display: block;
      max-width: 100%;
      max-height: 85vh;
      width: auto;
      height: auto;
      object-fit: contain
    }

    .att-media-zoom-wrap video.att-media-zoom-target {
      max-height: 85vh;
      background: #000
    }

    .att-viewer-drag-zone {
      touch-action: pan-y
    }

    .att-viewer-load-wrap video,
    #attViewerContent > video {
      touch-action: none
    }

    .att-viewer.att-dragging .att-viewer-stage {
      transition: none !important
    }



    .att-viewer-counter {
      position: static;
      transform: none;
      flex-shrink: 0;
      color: rgba(255, 255, 255, 0.9);
      font-size: 12px;
      font-family: var(--mono);
      background: rgba(0, 0, 0, 0.45);
      padding: 5px 12px;
      border-radius: 12px;
      direction: ltr;
      line-height: 1.35;
      margin: 0
    }

    .att-viewer-caption {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      color: rgba(255, 255, 255, 0.85);
      font-size: 13px;
      background: rgba(0, 0, 0, 0.5);
      padding: 8px 16px;
      border-radius: 20px;
      max-width: 90%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    /* Mobile — زر فتح القائمة (يُخفى على الشاشات العريضة فقط) */
    .sidebar-toggle-btn {
      display: none;
      width: 40px;
      height: 40px;
      border-radius: 10px;
      border: 1px solid var(--mr-border);
      background: var(--mr-surface);
      color: var(--mr-text);
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
      font-size: 15px;
      flex-shrink: 0;
      padding: 0;
      box-shadow: var(--mr-shadow-soft);
      position: relative;
      z-index: 2
    }

    .sidebar-toggle-btn:hover {
      background: var(--mr-primary-softer);
      border-color: var(--mr-primary-soft);
      color: var(--mr-primary)
    }

    .sidebar-toggle-btn[aria-expanded="true"] {
      background: var(--mr-primary-soft);
      border-color: var(--mr-primary);
      color: var(--mr-primary)
    }

    /* صلاحيات المنصة — مدير النظام */
    .mr-perms-wrap {
      overflow: auto;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface);
      max-height: min(70vh, 640px)
    }

    .mr-perms-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      min-width: 720px
    }

    .mr-perms-table th,
    .mr-perms-table td {
      padding: 10px 12px;
      border-bottom: 1px solid var(--border);
      text-align: right;
      vertical-align: middle
    }

    .mr-perms-table thead th {
      position: sticky;
      top: 0;
      z-index: 2;
      background: var(--surface2);
      font-weight: 600;
      white-space: nowrap
    }

    .mr-perms-table .mr-perm-group td {
      background: var(--surface2);
      font-weight: 700;
      font-size: 12px;
      color: var(--text2);
      letter-spacing: .02em
    }

    .mr-perms-table .mr-perm-label {
      min-width: 200px;
      font-weight: 500
    }

    .mr-perm-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer
    }

    .mr-perm-toggle input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0
    }

    .mr-perm-toggle__track {
      width: 38px;
      height: 22px;
      border-radius: 999px;
      background: #9ca3af;
      position: relative;
      transition: background .2s, box-shadow .2s
    }

    .mr-perm-toggle__track::after {
      content: '';
      position: absolute;
      top: 3px;
      right: 3px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
      transition: transform .2s
    }

    .mr-perm-toggle input:checked+.mr-perm-toggle__track {
      background: #48A111;
      box-shadow: inset 0 0 0 1px rgba(72, 161, 17, .25)
    }

    .mr-perm-toggle input:checked+.mr-perm-toggle__track::after {
      transform: translateX(-16px)
    }

    .mr-perm-toggle input:disabled+.mr-perm-toggle__track {
      opacity: .45;
      cursor: not-allowed
    }

    .mr-perm-skip-global {
      text-align: start;
      vertical-align: middle
    }

    .mr-perm-skip-hint {
      display: block;
      margin-top: 6px;
      font-size: 12px;
      color: var(--text-muted, #6b7280);
      line-height: 1.4
    }

    .mr-settings-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin-top: 16px
    }

    #appWrap .main:has(#tab-broadcasts.active) {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-height: 0;
      padding-top: 6px;
      padding-inline-start: clamp(4px, 0.5vw, 8px);
      padding-inline-end: clamp(8px, 1vw, 14px)
    }

    #appWrap .content:has(#tab-broadcasts.active) {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
      padding-top: 0;
      padding-bottom: 0;
      padding-inline: clamp(2px, 0.35vw, 6px);
      max-width: none
    }

    #tab-broadcasts.tab-content.active {
      display: flex !important;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
      width: 100%;
      background: transparent;
      font-family: var(--font)
    }

    #tab-broadcasts :where(input, textarea, select, button, option) {
      font-family: inherit
    }

    #tab-broadcasts :where(.fas, .far, .fab, .fa) {
      font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands"
    }

    #bc-kind-menu,
    #bc-target-menu,
    #bc-kind-menu .wf-status-opt,
    #bc-target-menu .wf-status-opt {
      font-family: var(--font)
    }

    #tab-broadcasts .bc-page {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
      width: 100%;
      background: transparent;
      box-sizing: border-box
    }

    #tab-broadcasts .bc-page-head {
      flex: 0 0 auto;
      padding: 0 2px 6px;
      border-bottom: 1px solid var(--mr-border)
    }

    #tab-broadcasts .bc-page-title {
      margin: 0;
      font-size: 18px;
      font-weight: 800;
      color: var(--mr-text);
      line-height: 1.15
    }

    #tab-broadcasts .bc-page-sub {
      margin: 2px 0 0;
      font-size: 10px;
      color: var(--mr-text-3);
      font-family: var(--mono);
      letter-spacing: 0.02em
    }

    #tab-broadcasts .bc-page-note {
      margin: 4px 0 0;
      font-size: 10px;
      line-height: 1.35;
      color: var(--mr-text-3);
      display: flex;
      align-items: flex-start;
      gap: 5px
    }

    #tab-broadcasts .bc-page-note i {
      color: var(--mr-primary);
      margin-top: 1px;
      font-size: 10px
    }

    #tab-broadcasts .bc-page-form {
      flex: 0 0 auto;
      padding: 6px 2px 6px;
      border-bottom: 1px solid var(--mr-border);
      background: var(--mr-bg)
    }

    #tab-broadcasts .bc-form-wrap {
      padding: 0
    }

    #tab-broadcasts .bc-form-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr) minmax(0, 1fr);
      gap: 8px 10px;
      --bc-control-h: 34px;
      --bc-focus-border: #ffffff
    }

    [data-theme="light"] #tab-broadcasts .bc-form-grid {
      --bc-focus-border: var(--mr-text)
    }

    #tab-broadcasts .bc-form-grid.bc-form-grid--users,
    #tab-broadcasts .bc-form-grid.bc-form-grid--roles,
    #tab-broadcasts .bc-form-grid.bc-form-grid--branches {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.72fr) minmax(0, 0.88fr) minmax(0, 1fr)
    }

    #tab-broadcasts .bc-form-full {
      grid-column: 1 / -1
    }

    #tab-broadcasts .bc-form-expiry .mk-dt-pair {
      max-width: 480px;
    }

    #tab-broadcasts .bc-expiry-hint {
      margin: 8px 0 0;
      font-size: 11px;
      line-height: 1.45;
      color: var(--mr-text-3);
      display: flex;
      align-items: flex-start;
      gap: 6px;
    }

    #tab-broadcasts .bc-expiry-hint i {
      margin-top: 2px;
      opacity: 0.75;
      flex-shrink: 0;
    }

    #tab-broadcasts .bc-history-expiry {
      color: var(--amber-text);
      font-weight: 700;
    }

    #tab-broadcasts .form-group {
      margin-bottom: 0;
      position: relative
    }

    #tab-broadcasts .form-label {
      display: block;
      margin-bottom: 4px;
      font-size: 11px;
      font-weight: 700;
      color: var(--mr-text-2)
    }

    #tab-broadcasts .bc-field {
      width: 100%;
      box-sizing: border-box;
      background: var(--mr-surface);
      border: 1px solid color-mix(in srgb, var(--mr-border) 45%, var(--mr-text-3));
      color: var(--mr-text);
      font-family: var(--font);
      font-size: 13px;
      outline: none;
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
      box-shadow: 0 1px 2px rgba(15, 18, 36, 0.04)
    }

    #tab-broadcasts .bc-field:not(.bc-textarea) {
      height: var(--bc-control-h, 34px);
      padding: 0 12px;
      border-radius: 999px;
      font-size: 12px
    }

    #tab-broadcasts #bc-title.bc-field {
      border: 1px solid color-mix(in srgb, var(--mr-border) 45%, var(--mr-text-3));
      box-shadow: 0 1px 2px rgba(15, 18, 36, 0.04)
    }

    #appWrap #tab-broadcasts #bc-title.bc-field {
      border-color: color-mix(in srgb, var(--mr-border) 45%, var(--mr-text-3))
    }

    #tab-broadcasts .bc-field:hover {
      border-color: color-mix(in srgb, var(--mr-primary) 35%, var(--mr-border));
      background: color-mix(in srgb, var(--mr-primary-softer) 55%, var(--mr-surface))
    }

    #tab-broadcasts .bc-field:focus,
    #appWrap #tab-broadcasts .bc-field:focus {
      border-width: 1px;
      border-color: var(--bc-focus-border, #ffffff);
      box-shadow: none !important;
      outline: none;
      background: var(--mr-surface)
    }

    #tab-broadcasts .bc-textarea:focus,
    #appWrap #tab-broadcasts .bc-textarea:focus {
      border-width: 1px;
      border-color: var(--bc-focus-border, #ffffff);
      box-shadow: none !important;
      outline: none
    }

    #tab-broadcasts .bc-textarea {
      min-height: 68px;
      padding: 10px 14px;
      border-radius: 14px;
      line-height: 1.45;
      resize: vertical
    }

    #tab-broadcasts .bc-dd {
      position: relative;
      width: 100%;
      z-index: 20
    }

    #tab-broadcasts .bc-dd .wf-status-trigger {
      width: 100%;
      min-width: 0;
      height: var(--bc-control-h, 34px);
      padding: 0 10px 0 12px;
      border: 1px solid color-mix(in srgb, var(--mr-border) 45%, var(--mr-text-3));
      border-radius: 999px;
      background: var(--mr-surface);
      box-shadow: 0 1px 2px rgba(15, 18, 36, 0.04);
      font-size: 12px;
      font-weight: 600
    }

    #tab-broadcasts .bc-dd .wf-status-trigger:hover {
      border-color: color-mix(in srgb, var(--mr-primary) 35%, var(--mr-border));
      background: color-mix(in srgb, var(--mr-primary-softer) 55%, var(--mr-surface))
    }

    #tab-broadcasts .bc-dd .wf-status-trigger__label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0
    }

    #tab-broadcasts .bc-dd .wf-status-trigger[aria-expanded="true"] {
      border-width: 1px;
      border-color: var(--bc-focus-border, #ffffff);
      box-shadow: none
    }

    #tab-broadcasts .bc-dd-menu {
      border-radius: 14px
    }

    #tab-broadcasts .bc-user-pick {
      position: relative
    }

    #tab-broadcasts .bc-user-pick__search-wrap {
      display: flex;
      align-items: center;
      gap: 6px;
      height: var(--bc-control-h, 34px);
      padding: 0 10px 0 12px;
      border: 1px solid color-mix(in srgb, var(--mr-border) 45%, var(--mr-text-3));
      border-radius: 999px;
      background: var(--mr-surface);
      box-shadow: 0 1px 2px rgba(15, 18, 36, 0.04);
      transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
      overflow: hidden
    }

    #tab-broadcasts .bc-user-pick__search-wrap:hover {
      border-color: color-mix(in srgb, var(--mr-primary) 35%, var(--mr-border));
      background: color-mix(in srgb, var(--mr-primary-softer) 55%, var(--mr-surface))
    }

    #tab-broadcasts .bc-user-pick__search-wrap:focus-within {
      border-width: 1px;
      border-color: var(--bc-focus-border, #ffffff);
      box-shadow: none;
      outline: none;
      background: var(--mr-surface)
    }

    #tab-broadcasts .bc-user-pick__search-wrap i {
      color: var(--mr-text);
      font-size: 11px;
      flex-shrink: 0
    }

    #tab-broadcasts .bc-user-pick__search {
      flex: 1;
      min-width: 0;
      border: 0;
      background: transparent;
      font-family: var(--font);
      font-size: 12px;
      color: var(--mr-text);
      outline: none;
      padding: 0;
      margin: 0;
      box-shadow: none;
      -webkit-appearance: none;
      appearance: none;
      border-radius: 0
    }

    #tab-broadcasts .bc-user-pick__search,
    #appWrap #tab-broadcasts .bc-user-pick__search {
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important
    }

    #tab-broadcasts .bc-user-pick__search:focus,
    #tab-broadcasts .bc-user-pick__search:focus-visible,
    #appWrap #tab-broadcasts .bc-user-pick__search:focus,
    #appWrap #tab-broadcasts .bc-user-pick__search:focus-visible {
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      outline: none !important
    }

    #tab-broadcasts .bc-user-pick__search::-webkit-search-decoration,
    #tab-broadcasts .bc-user-pick__search::-webkit-search-cancel-button {
      -webkit-appearance: none;
      appearance: none;
      display: none
    }

    #tab-broadcasts .bc-user-pick__search:-webkit-autofill,
    #tab-broadcasts .bc-user-pick__search:-webkit-autofill:focus {
      -webkit-text-fill-color: var(--mr-text);
      box-shadow: 0 0 0 1000px var(--mr-surface) inset;
      -webkit-box-shadow: 0 0 0 1000px var(--mr-surface) inset;
      transition: background-color 9999s ease-out 0s
    }

    #tab-broadcasts .bc-user-pick__search::placeholder {
      color: var(--mr-text-3)
    }

    #tab-broadcasts .bc-user-pick__results {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      z-index: 50;
      display: flex;
      flex-direction: column;
      gap: 4px;
      background: var(--mr-surface);
      border: 1px solid var(--mr-border);
      border-radius: 14px;
      box-shadow: 0 12px 40px rgba(15, 18, 36, 0.14), 0 4px 12px rgba(15, 18, 36, 0.08);
      max-height: min(200px, calc(100vh - 24px));
      overflow-x: hidden;
      overflow-y: auto;
      padding: 8px;
      box-sizing: border-box
    }

    [data-theme="dark"] #tab-broadcasts .bc-user-pick__results {
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45)
    }

    #tab-broadcasts .bc-user-pick__results[hidden] {
      display: none !important
    }

    #tab-broadcasts .bc-user-pick__opt,
    #appWrap #tab-broadcasts .bc-user-pick__opt {
      display: flex;
      align-items: center;
      gap: 14px;
      width: 100%;
      padding: 10px 12px;
      border: 0;
      border-radius: 12px;
      background: transparent !important;
      box-shadow: none !important;
      text-align: start;
      cursor: pointer;
      font-family: var(--font);
      font-size: 13px;
      font-weight: 500;
      color: var(--mr-text);
      transition: background .15s ease, color .15s ease, transform .12s ease
    }

    @media (hover: hover) {
      #tab-broadcasts .bc-user-pick__opt:hover,
      #appWrap #tab-broadcasts .bc-user-pick__opt:hover {
        background: var(--mr-primary-soft) !important;
        color: var(--mr-text);
        font-weight: 500
      }

      #tab-broadcasts .bc-user-pick__opt:hover .bc-user-pick__opt-meta,
      #appWrap #tab-broadcasts .bc-user-pick__opt:hover .bc-user-pick__opt-meta {
        color: var(--mr-text-2)
      }

      [data-theme="dark"] #tab-broadcasts .bc-user-pick__opt:hover,
      [data-theme="dark"] #appWrap #tab-broadcasts .bc-user-pick__opt:hover {
        background: rgba(255, 255, 255, 0.09) !important;
        color: #fff
      }

      [data-theme="dark"] #tab-broadcasts .bc-user-pick__opt:hover .bc-user-pick__opt-meta,
      [data-theme="dark"] #appWrap #tab-broadcasts .bc-user-pick__opt:hover .bc-user-pick__opt-meta {
        color: rgba(255, 255, 255, 0.72)
      }

      #tab-broadcasts .bc-user-pick__results:has(.bc-user-pick__opt:hover) {
        border-color: color-mix(in srgb, var(--mr-primary) 28%, var(--mr-border))
      }
    }

    #tab-broadcasts .bc-user-pick__opt:focus-visible,
    #appWrap #tab-broadcasts .bc-user-pick__opt:focus-visible {
      outline: none;
      box-shadow: inset 0 0 0 2px var(--mr-primary-soft)
    }

    #tab-broadcasts .bc-user-pick__opt.is-selected {
      font-weight: 500
    }

    @media (hover: hover) {
      #tab-broadcasts .bc-user-pick__opt.is-selected:hover i,
      #appWrap #tab-broadcasts .bc-user-pick__opt.is-selected:hover i {
        color: var(--mr-primary)
      }
    }

    #tab-broadcasts .bc-user-pick__opt-name {
      flex: 1;
      min-width: 0;
      font-size: 13px;
      font-weight: inherit
    }

    #tab-broadcasts .bc-user-pick__opt-meta {
      font-size: 11px;
      color: var(--mr-text-3);
      white-space: nowrap
    }

    #tab-broadcasts .bc-user-pick__opt i {
      color: var(--mr-text);
      font-size: 11px
    }

    #tab-broadcasts .bc-user-pick__empty,
    #tab-broadcasts .bc-user-pick__hint {
      margin: 0;
      padding: 6px 8px;
      font-size: 12px;
      color: var(--mr-text-3);
      line-height: 1.45;
      background: transparent;
      box-shadow: none
    }

    #tab-broadcasts .bc-user-pick__chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      max-width: 100%;
      padding: 4px 6px 4px 10px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--mr-primary) 12%, var(--mr-surface));
      border: 1px solid color-mix(in srgb, var(--mr-primary) 22%, var(--mr-border));
      font-size: 12px;
      color: var(--mr-text);
      line-height: 1.3
    }

    #tab-broadcasts .bc-user-pick__chip small {
      color: var(--mr-text-3);
      font-size: 10px
    }

    #tab-broadcasts .bc-user-pick__chip-remove {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: var(--mr-text-3);
      cursor: pointer;
      padding: 0;
      flex-shrink: 0
    }

    #tab-broadcasts .bc-user-pick__chip-remove:hover {
      background: color-mix(in srgb, var(--red-text, #dc2626) 12%, transparent);
      color: var(--red-text, #dc2626)
    }

    #tab-broadcasts .bc-form-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 10px;
      padding-top: 8px;
      border-top: 1px solid var(--mr-border)
    }

    #tab-broadcasts .bc-preview {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 10px;
      flex: 1 1 auto;
      min-width: 0;
      font-size: 12px;
      color: var(--mr-text-2);
      line-height: 1.4
    }

    #tab-broadcasts .bc-preview__summary {
      flex: 0 0 auto
    }

    #tab-broadcasts .bc-preview__chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      min-width: 0
    }

    #tab-broadcasts .bc-preview.is-hint .bc-preview__summary {
      color: var(--mr-text-3)
    }

    #tab-broadcasts .bc-history {
      flex: 1 1 0;
      min-height: 42vh;
      display: flex;
      flex-direction: column;
      margin: 0;
      padding: 8px 2px 0;
      border: none;
      background: transparent;
      overflow: hidden
    }

    #tab-broadcasts .bc-history-head {
      flex: 0 0 auto;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 6px 10px;
      margin-bottom: 6px
    }

    #tab-broadcasts .bc-history-title {
      flex: 0 0 auto;
      margin: 0;
      font-size: 14px;
      font-weight: 700;
      color: var(--mr-text)
    }

    #tab-broadcasts .bc-history-stats {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: 5px;
      min-width: 0
    }

    #tab-broadcasts .bc-history-stat {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 10px;
      font-weight: 600;
      font-family: var(--font);
      color: var(--mr-text-2);
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid var(--mr-border);
      background: var(--mr-surface);
      white-space: nowrap;
      line-height: 1.2;
      cursor: pointer;
      transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
      -webkit-tap-highlight-color: transparent
    }

    #tab-broadcasts .bc-history-stat:hover {
      border-color: color-mix(in srgb, var(--mr-primary) 30%, var(--mr-border));
      background: color-mix(in srgb, var(--mr-primary-softer) 50%, var(--mr-surface))
    }

    #tab-broadcasts .bc-history-stat.is-active {
      font-weight: 700;
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--mr-primary) 22%, transparent)
    }

    #tab-broadcasts .bc-history-stat strong {
      font-size: 11px;
      font-weight: 800;
      color: var(--mr-text)
    }

    #tab-broadcasts .bc-history-stat--total {
      border-color: color-mix(in srgb, var(--mr-text-3) 35%, var(--mr-border));
      background: color-mix(in srgb, var(--mr-border) 25%, var(--mr-surface))
    }

    #tab-broadcasts .bc-history-stat--circular {
      border-color: color-mix(in srgb, var(--mr-blue) 28%, var(--mr-border));
      background: color-mix(in srgb, var(--mr-blue) 10%, var(--mr-surface));
      color: var(--mr-blue)
    }

    #tab-broadcasts .bc-history-stat--circular strong {
      color: var(--mr-blue)
    }

    #tab-broadcasts .bc-history-stat--motivational {
      border-color: color-mix(in srgb, var(--mk-success) 30%, var(--mr-border));
      background: color-mix(in srgb, var(--mk-success) 12%, var(--mr-surface));
      color: var(--green-text)
    }

    #tab-broadcasts .bc-history-stat--motivational strong {
      color: var(--green-text)
    }

    #tab-broadcasts .bc-history-stat--total.is-active {
      border-color: color-mix(in srgb, var(--mr-text) 25%, var(--mr-border));
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--mr-text-3) 20%, transparent)
    }

    #tab-broadcasts .bc-history-stat--circular.is-active {
      border-color: var(--mr-blue);
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--mr-blue) 22%, transparent)
    }

    #tab-broadcasts .bc-history-stat--motivational.is-active {
      border-color: var(--green-text);
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--mk-success) 22%, transparent)
    }

    #tab-broadcasts .bc-history-stat--alert {
      border-color: color-mix(in srgb, var(--red-text) 35%, var(--mr-border));
      background: color-mix(in srgb, var(--red-text) 10%, var(--mr-surface));
      color: var(--red-text)
    }

    #tab-broadcasts .bc-history-stat--alert strong {
      color: var(--red-text)
    }

    #tab-broadcasts .bc-history-stat--alert:hover {
      border-color: color-mix(in srgb, var(--red-text) 45%, var(--mr-border));
      background: color-mix(in srgb, var(--red-text) 14%, var(--mr-surface))
    }

    #tab-broadcasts .bc-history-stat--alert.is-active {
      border-color: var(--red-text);
      background: color-mix(in srgb, var(--red-text) 16%, var(--mr-surface));
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--red-text) 22%, transparent)
    }

    #tab-broadcasts .bc-history-list {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      padding: 2px 2px 8px;
      scrollbar-width: thin;
      scrollbar-color: var(--mr-border-2) transparent
    }

    #tab-broadcasts .bc-history-list::-webkit-scrollbar {
      width: 6px
    }

    #tab-broadcasts .bc-history-list::-webkit-scrollbar-thumb {
      background: var(--mr-border-2);
      border-radius: 999px
    }

    #tab-broadcasts .bc-history-item {
      padding: 14px 16px;
      border: 1px solid color-mix(in srgb, var(--mr-border) 70%, var(--mr-text-3));
      border-radius: 14px;
      background: var(--mr-surface);
      margin-bottom: 10px;
      box-shadow: 0 1px 2px rgba(15, 18, 36, 0.03)
    }

    #tab-broadcasts .bc-history-item h4 {
      margin: 0 0 8px;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.4;
      color: var(--mr-text)
    }

    #tab-broadcasts .bc-history-item p {
      margin: 0 0 10px;
      font-size: 13px;
      line-height: 1.5;
      color: var(--mr-text-2);
      white-space: pre-wrap;
      word-break: break-word
    }

    #tab-broadcasts .bc-history-meta {
      font-size: 11px;
      color: var(--mr-text-3);
      display: flex;
      flex-wrap: wrap;
      gap: 8px 12px
    }

    #tab-broadcasts .bc-history-meta span {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--mr-border) 40%, transparent)
    }

    #tab-broadcasts .bc-history-kind {
      font-weight: 700;
      border: 1px solid transparent
    }

    #tab-broadcasts .bc-history-kind i {
      font-size: 10px
    }

    #tab-broadcasts .bc-history-kind--circular {
      border-color: color-mix(in srgb, var(--mr-blue) 28%, var(--mr-border));
      background: color-mix(in srgb, var(--mr-blue) 10%, var(--mr-surface));
      color: var(--mr-blue)
    }

    #tab-broadcasts .bc-history-kind--circular i {
      color: var(--mr-blue)
    }

    #tab-broadcasts .bc-history-kind--motivational {
      border-color: color-mix(in srgb, var(--mk-success) 30%, var(--mr-border));
      background: color-mix(in srgb, var(--mk-success) 12%, var(--mr-surface));
      color: var(--green-text)
    }

    #tab-broadcasts .bc-history-kind--motivational i {
      color: var(--green-text)
    }

    #tab-broadcasts .bc-history-kind--alert {
      border-color: color-mix(in srgb, var(--red-text) 35%, var(--mr-border));
      background: color-mix(in srgb, var(--red-text) 10%, var(--mr-surface));
      color: var(--red-text)
    }

    #tab-broadcasts .bc-history-kind--alert i {
      color: var(--red-text)
    }

    #tab-broadcasts .bc-history-stat i {
      font-size: 9px;
      opacity: 0.92
    }

    @media (max-width: 720px) and (pointer: coarse) {
      #tab-broadcasts .bc-form-grid,
      #tab-broadcasts .bc-form-grid.bc-form-grid--users,
      #tab-broadcasts .bc-form-grid.bc-form-grid--roles,
      #tab-broadcasts .bc-form-grid.bc-form-grid--branches {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
      }

      #tab-broadcasts .bc-form-title,
      #tab-broadcasts .bc-form-users,
      #tab-broadcasts .bc-form-roles,
      #tab-broadcasts .bc-form-branches {
        grid-column: 1 / -1
      }

      #tab-broadcasts .bc-page-head {
        padding-inline: 10px
      }

      #tab-broadcasts .bc-page-form,
      #tab-broadcasts .bc-history {
        padding-inline: 10px
      }

      #tab-broadcasts .bc-history {
        min-height: 38vh
      }

      #tab-broadcasts .bc-textarea {
        min-height: 60px
      }

      #tab-broadcasts .bc-form-actions {
        flex-direction: column;
        align-items: stretch
      }

      #tab-broadcasts .bc-form-actions .btn {
        width: 100%;
        justify-content: center
      }
    }

    .mr-settings-seg {
      display: inline-flex;
      gap: 4px;
      padding: 4px;
      border-radius: 10px;
      background: var(--surface2);
      border: 1px solid var(--border);
      margin-bottom: 14px
    }

    .mr-settings-seg button {
      border: none;
      background: transparent;
      padding: 8px 14px;
      border-radius: 8px;
      font-size: 13px;
      cursor: pointer;
      color: var(--text2);
      font-family: inherit
    }

    .mr-settings-seg button.is-active {
      background: var(--surface);
      color: var(--text);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
      font-weight: 600
    }

    .mr-user-perm-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      align-items: center;
      margin-bottom: 12px
    }

    .mr-user-perm-bar[hidden] {
      display: none !important
    }

    #tab-settings .settings-user-dd {
      position: relative;
      flex: 0 1 260px;
      min-width: 200px;
      max-width: min(300px, 100%);
      z-index: 502
    }

    #tab-settings .settings-user-dd .wf-status-trigger {
      min-width: 0;
      width: 100%;
      height: 40px;
      padding: 0 12px;
      font-size: 12px;
      font-weight: 600
    }

    #tab-settings .settings-user-dd .wf-status-trigger__ico {
      width: 26px;
      height: 26px;
      font-size: 10px
    }

    .settings-user-dd__search {
      padding: 8px 8px 4px;
      flex-shrink: 0;
      border-bottom: 1px solid var(--mr-border)
    }

    .settings-user-dd__search-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      height: 36px;
      padding: 0 10px;
      border-radius: 10px;
      border: 1px solid var(--mr-border);
      background: var(--mr-surface-2, var(--surface2))
    }

    .settings-user-dd__search-wrap:focus-within {
      outline: none;
      border-color: var(--mr-primary, var(--primary));
      box-shadow: 0 0 0 3px var(--mr-primary-soft, rgba(99, 102, 241, .15))
    }

    .settings-user-dd__search-wrap i {
      font-size: 12px;
      color: var(--mr-text-3, var(--text3));
      flex-shrink: 0
    }

    .settings-user-dd__search-input {
      flex: 1;
      min-width: 0;
      border: none;
      background: transparent;
      font-family: var(--font);
      font-size: 12px;
      color: var(--mr-text, var(--text));
      outline: none
    }

    .settings-user-dd__search-input::placeholder {
      color: var(--mr-text-3, var(--text3))
    }

    #settings-user-dd-menu .wf-status-menu__scroll {
      max-height: min(240px, 42vh)
    }

    .settings-user-dd__opt {
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
      padding: 8px 10px
    }

    .settings-user-dd__opt-name {
      font-weight: 600;
      font-size: 13px;
      line-height: 1.3
    }

    .settings-user-dd__opt-role {
      font-size: 11px;
      color: var(--mr-text-3, var(--text3));
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap
    }

    .settings-user-dd__empty {
      margin: 0;
      padding: 14px 12px;
      text-align: center;
      font-size: 12px;
      color: var(--mr-text-3, var(--text3))
    }

    .mr-perm-custom-tag {
      display: inline-block;
      font-size: 10px;
      padding: 1px 6px;
      border-radius: 6px;
      background: rgba(255, 195, 0, .15);
      color: #FFC300;
      margin-inline-start: 6px;
      vertical-align: middle
    }

    .mr-perm-role-tag {
      display: inline-block;
      font-size: 10px;
      padding: 1px 6px;
      border-radius: 6px;
      background: rgba(72, 161, 17, .12);
      color: #48A111;
      margin-inline-start: 6px;
      vertical-align: middle
    }

    .mr-perms-table--user .mr-perm-label {
      min-width: 240px
    }

    .mr-settings-note {
      font-size: 12px;
      color: var(--text3);
      margin-top: 10px;
      line-height: 1.6
    }

  /* إخفاء القائمة والتبويبات حتى اكتمال تطبيق الصلاحيات (تفادي وميض كل الأقسام) */
    #appWrap:not(.rbac-ready) .sidebar-nav .nav-item,
    #appWrap:not(.rbac-ready) .sidebar-nav .nav-section-label {
      display: none !important
    }

    #appWrap:not(.rbac-ready) .content > .tab-content {
      display: none !important
    }

    [data-role-hide] {
      display: none !important
    }

    .mr-no-access-panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: min(72vh, 640px);
      padding: 48px 24px;
      text-align: center;
      gap: 16px
    }

    .mr-no-access-panel__ico {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      color: var(--amber, #FFC300);
      background: color-mix(in srgb, var(--amber, #FFC300) 12%, transparent);
      border: 1px solid color-mix(in srgb, var(--amber, #FFC300) 28%, transparent)
    }

    .mr-no-access-panel h2 {
      margin: 0;
      font-size: 1.35rem;
      font-weight: 800;
      color: var(--text, #111827)
    }

    .mr-no-access-panel p {
      margin: 0;
      max-width: 420px;
      line-height: 1.7;
      color: var(--text2, #6b7280);
      font-size: 15px
    }

    /* Print */
    @media print {
      body * {
        visibility: hidden !important
      }

      #printArea,
      #printArea * {
        visibility: visible !important
      }

      #printArea {
        display: block !important;
        position: absolute;
        right: 0;
        top: 0;
        left: 0;
        width: 100%;
        padding: 20px;
        background: #fff !important;
        color: #000 !important
      }

      .no-print {
        display: none !important
      }

      @page {
        size: A4;
        margin: 14mm
      }
    }

    #printArea {
      display: none
    }

    .print-header {
      text-align: center;
      padding-bottom: 14px;
      border-bottom: 2px solid #000;
      margin-bottom: 18px
    }

    .print-header h1 {
      font-size: 20px;
      margin-bottom: 4px;
      color: #000
    }

    .print-header p {
      font-size: 12px;
      color: #555
    }

    .print-section {
      margin-bottom: 18px
    }

    .print-section h3 {
      font-size: 14px;
      background: #f0f0f0;
      padding: 6px 10px;
      color: #000;
      margin-bottom: 8px
    }

    .print-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px 16px
    }

    .print-row {
      display: flex;
      gap: 6px;
      padding: 4px 0;
      border-bottom: 1px dotted #ccc;
      font-size: 12px;
      align-items: baseline
    }

    .print-row strong {
      flex: 0 0 auto;
      color: #555;
      white-space: nowrap
    }

    .print-row span {
      flex: 0 1 auto;
      color: #000;
      word-break: break-word
    }

    .print-foot {
      margin-top: 30px;
      padding-top: 14px;
      border-top: 1px solid #000;
      font-size: 10px;
      color: #555;
      display: flex;
      justify-content: space-between
    }
  
    /* ═══ MOBILE UI (user source) ═══ */

    @media (max-width: 576px) and (pointer: coarse) {
      #loginScreen #loginCard.lp-card .lp-hd--wefaq {
        padding-top: 1.55rem
      }

      #loginScreen #loginCard .lp-hd--wefaq .wefaq-logo-slot {
        margin-top: 0.35rem
      }
    }

    @media (max-width: 992px) and (pointer: coarse) {
      .mr-topbar-user {
        width: auto;
        max-width: none;
        padding: 0;
        gap: 0;
        flex-shrink: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
      }

      [data-theme="dark"] .mr-topbar-user {
        background: transparent;
        border-color: transparent;
      }

      .mr-topbar-user-info {
        display: none !important;
      }

      .mr-topbar-user-trigger--icon {
        min-height: 0;
        padding: 0;
      }

      html.mr-mobile-ui .topbar-clock,
      html.mr-mobile-ui #topbarClock {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important
      }

      .mr-topbar-user-menu {
        left: auto;
        right: auto;
        inset-inline-start: auto;
        inset-inline-end: 0
      }
    }

    @media (max-width: 992px) and (pointer: coarse) {
      .topbar-clock,
      html.mr-mobile-ui .topbar-clock,
      html.mr-mobile-ui #topbarClock {
        display: none !important;
      }
    }

    @media(max-width:1024px) {
      .stats-grid-v2 {
        grid-template-columns: repeat(2, 1fr)
      }

      .dash-2col {
        grid-template-columns: 1fr
      }
    }

    @media(max-width:480px) and (pointer: coarse) {
      .stats-grid-v2 {
        grid-template-columns: 1fr
      }

      .stat-v2-value {
        font-size: 32px
      }
    }

    @media(max-width:1024px) {
      #tab-dashboard .md-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }
    }

    @media(max-width:520px) and (pointer: coarse) {
      #tab-dashboard .md-stats-grid {
        grid-template-columns: 1fr
      }
    }

    @media(max-width:1024px) {
      #tab-dashboard .md-split {
        grid-template-columns: 1fr
      }
    }

    .mobile-bottom-nav {
      display: none
    }

    @media(max-width:992px) and (pointer: coarse) {
      html {
        touch-action: manipulation;
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent
      }

      /* وضع تطبيق: لا تكبير باللمس مرتين — القفل على html/#appWrap وليس body (إصلاح فراغ iOS) */
      .mob-portrait-lock {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 100000;
        align-items: center;
        justify-content: center;
        padding: max(20px, env(safe-area-inset-top, 0px)) 24px max(20px, env(safe-area-inset-bottom, 0px));
        background: #0f1218;
        color: #fff;
        text-align: center;
        direction: rtl;
        box-sizing: border-box;
        touch-action: none
      }

      .mob-portrait-lock__card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        max-width: 280px
      }

      .mob-portrait-lock__icon {
        font-size: 42px;
        color: var(--mr-primary, #2f2fe4);
        transform: rotate(90deg);
        margin-bottom: 4px
      }

      .mob-portrait-lock__title {
        margin: 0;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.45
      }

      .mob-portrait-lock__hint {
        margin: 0;
        font-size: 13px;
        line-height: 1.55;
        color: rgba(255, 255, 255, 0.72)
      }

      html.mob-landscape-locked .mob-portrait-lock {
        display: flex !important
      }

      html.mob-landscape-locked,
      html.mob-landscape-locked body {
        overflow: hidden !important;
        touch-action: none !important
      }

      html.mirsad-app-shell-lock {
        overflow: hidden;
        width: 100%;
        height: 100%;
        height: 100svh;
        height: 100dvh;
        height: -webkit-fill-available;
        touch-action: manipulation
      }

      body.mirsad-app-active {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        touch-action: manipulation;
        background: var(--mr-bg)
      }

      body.mirsad-app-active #appWrap.app {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        height: 100svh;
        height: 100dvh;
        height: -webkit-fill-available;
        max-height: none;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-sizing: border-box
      }

      body.mirsad-app-active #appWrap > .app-shell {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
        padding-top: var(--unified-topbar-h, 76px);
        padding-bottom: 0;
        box-sizing: border-box
      }

      body.mirsad-app-active #appWrap .topbar.unified-banner {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 3000 !important;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        -webkit-user-drag: none
      }

      body.mirsad-app-active #appWrap .app-body {
        flex: 1 1 auto;
        min-height: 0;
        margin-top: 0 !important;
        overflow: hidden !important;
        display: flex;
        flex-direction: column
      }

      body.mirsad-app-active #appWrap .main {
        flex: 1 1 auto;
        min-height: 0;
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: clip;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch
      }

      /* إخفاء أشرطة التمرير — التمرير باللمس فقط */
      html,
      body,
      #appWrap,
      #appWrap * {
        scrollbar-width: none !important;
        -ms-overflow-style: none
      }

      html::-webkit-scrollbar,
      body::-webkit-scrollbar,
      #appWrap::-webkit-scrollbar,
      #appWrap *::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent
      }

      .main,
      .content,
      .sidebar-nav,
      .modal-body,
      .notif-list,
      .td-content-area,
      .table-wrap,
      .cmp-tabs-wrapper,
      .autocomplete-dropdown,
      .wf-status-menu__scroll,
      .filter-panel-body,
      .br-employees-list,
      #tab-violations .viol-grid--mob-list,
      #tab-violations #violGrid.viol-grid--mob-list,
      #tab-departments .users-grid--mob-list,
      #tab-departments #usersList.users-grid--mob-list {
        -webkit-overflow-scrolling: touch
      }

      :root {
        --unified-topbar-h: calc(76px + var(--mr-safe-top, env(safe-area-inset-top, 0px)));
        --mr-mob-ref-w: 430px;
        --mr-mob-base-scale: 0.90;
        --mr-mob-scale-min: 0.78;
        --mr-mob-scale: max(
          var(--mr-mob-scale-min),
          min(
            var(--mr-mob-base-scale),
            calc(var(--mr-mob-base-scale) * 100vw / var(--mr-mob-ref-w))
          )
        );
        --mr-mob-bottom-nav-h: calc(56px + env(safe-area-inset-bottom, 0px));
        --mr-mob-view-h: calc(100dvh - var(--unified-topbar-h, 76px) - var(--mr-mob-bottom-nav-h, 56px))
      }

      .sidebar {
        --sb-drawer-w: min(228px, 76vw);
        --sb-top: var(--unified-topbar-h, 76px);
        position: fixed;
        right: calc(-1 * var(--sb-drawer-w));
        left: auto;
        top: var(--sb-top);
        width: var(--sb-drawer-w);
        max-width: var(--sb-drawer-w);
        flex: none;
        flex-basis: auto;
        height: calc(100dvh - var(--sb-top));
        max-height: calc(100dvh - var(--sb-top));
        z-index: 2000;
        transition: right 0.22s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -8px 0 32px rgba(15, 18, 36, 0.18);
        border-radius: 14px 0 0 14px;
        border-right: 0;
        border-left: 1px solid var(--mr-border);
        padding: 16px 12px 18px;
        overflow: visible;
        visibility: visible
      }

      .sidebar.open {
        right: 0;
        left: auto
      }

      /* زر حافة القائمة — نمط Jisr (دائرة على الحد بين القائمة والمحتوى) */
      .sidebar-drawer-toggle.sidebar-toggle-btn {
        display: inline-flex !important;
        position: fixed;
        right: 0;
        left: auto;
        top: calc(var(--unified-topbar-h, 76px) + 28px);
        z-index: 2210;
        width: 30px;
        height: 30px;
        margin: 0;
        padding: 0;
        border-radius: 50%;
        background: #fff;
        border: 1px solid color-mix(in srgb, var(--mr-border) 70%, #c4c9d4);
        color: #6b7280;
        font-size: 11px;
        box-shadow: 0 2px 8px rgba(15, 18, 36, 0.1);
        transform: translateX(calc(50% - 8px));
        transition: right 0.22s cubic-bezier(0.4, 0, 0.2, 1),
          transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
          background 0.15s ease,
          box-shadow 0.15s ease,
          color 0.15s ease
      }

      .sidebar.open .sidebar-drawer-toggle.sidebar-toggle-btn {
        right: var(--sb-drawer-w)
      }

      [data-theme="dark"] .sidebar-drawer-toggle.sidebar-toggle-btn {
        background: var(--mr-surface);
        border-color: var(--mr-border);
        color: var(--mr-text-3);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35)
      }

      .sidebar-nav {
        padding-top: 4px
      }

      .sidebar .nav-section-label,
      .sidebar.open .nav-section-label,
      .sidebar .nav-item-label,
      .sidebar.open .nav-item-label,
      .sidebar .logout-btn span,
      .sidebar.open .logout-btn span {
        opacity: 1 !important;
        max-width: none !important;
        overflow: visible;
        white-space: nowrap
      }

      .sidebar .nav-section-label {
        display: block;
        padding: 14px 10px 6px
      }

      .sidebar .nav-item {
        justify-content: flex-start;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        margin-bottom: 4px;
        transform: none
      }

      .sidebar .nav-item:hover {
        transform: none
      }

      .sidebar .nav-item-label {
        display: block !important;
        flex: 1 1 auto;
        min-width: 0;
        text-align: start
      }

      .sidebar .nav-item i {
        width: 36px;
        height: 36px;
        font-size: 15px;
        border-radius: 12px;
        background: var(--mr-primary-softer);
        border: 1px solid color-mix(in srgb, var(--mr-border) 80%, transparent);
        color: var(--mr-text-2)
      }

      .sidebar .nav-item:hover i {
        background: var(--mr-primary-soft);
        border-color: color-mix(in srgb, var(--mr-blue) 28%, var(--mr-border));
        color: var(--mr-blue)
      }

      .sidebar .nav-item.active,
      .sidebar.open .nav-item.active,
      #appWrap .sidebar .nav-item.active {
        background: var(--mr-primary-soft) !important;
        color: var(--mr-primary) !important;
        border-color: transparent !important;
        box-shadow: none !important
      }

      .sidebar .nav-item.active i,
      .sidebar.open .nav-item.active i {
        background: var(--mr-blue) !important;
        color: #fff !important;
        border-color: transparent !important;
        box-shadow: 0 6px 16px color-mix(in srgb, var(--mr-blue) 38%, transparent) !important;
        width: 36px;
        height: 36px
      }

      .sidebar .nav-badge {
        position: static;
        margin: 0;
        margin-inline-start: 6px;
        flex-shrink: 0
      }

      .topbar.unified-banner {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 2200;
        align-items: center;
        touch-action: none;
        user-select: none;
        height: calc(56px + var(--mr-safe-top, env(safe-area-inset-top, 0px))) !important;
        min-height: calc(56px + var(--mr-safe-top, env(safe-area-inset-top, 0px))) !important;
        max-height: calc(56px + var(--mr-safe-top, env(safe-area-inset-top, 0px))) !important;
        padding-block-start: calc(8px + var(--mr-safe-top, env(safe-area-inset-top, 0px))) !important
      }

      #appWrap.app {
        display: flex;
        flex-direction: column;
        height: 100%;
        height: 100svh;
        height: 100dvh;
        height: -webkit-fill-available;
        max-height: none;
        overflow: hidden
      }

      #appWrap > .app-shell {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        width: 100%;
        min-height: 0;
        max-height: 100%;
        padding-top: var(--unified-topbar-h, 76px);
        padding-bottom: 0;
        box-sizing: border-box;
        overflow: hidden
      }

      #appWrap .app-body {
        flex: 1 1 auto;
        min-height: 0;
        margin-top: 0 !important;
        overflow: hidden !important;
        display: flex;
        flex-direction: column
      }

      .sidebar-overlay.open {
        top: var(--unified-topbar-h, 76px);
        z-index: 1990
      }

      .app-body {
        overflow: visible
      }

      #appWrap .app-body .sidebar {
        display: none !important
      }

      #appWrap > .app-shell > #mobileBottomNav.mobile-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0 !important;
        left: 0;
        right: 0;
        z-index: 2800;
        min-height: 56px;
        padding-top: 6px;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-sizing: border-box;
        padding-inline: 8px;
        background: var(--mr-surface);
        border-top: 1px solid var(--mr-border);
        box-shadow: 0 -6px 24px rgba(15, 18, 36, 0.08);
        align-items: stretch;
        justify-content: space-evenly;
        gap: 4px;
        overflow-x: hidden;
        overflow-y: hidden;
        overscroll-behavior: none;
        touch-action: pan-x;
        user-select: none;
        -webkit-user-select: none;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        will-change: auto;
        transform: none !important;
        transition: opacity 0.22s ease, visibility 0.22s ease
      }

      #appWrap > .app-shell > #mobileBottomNav.mobile-bottom-nav::-webkit-scrollbar {
        display: none;
        height: 0
      }

      #appWrap > .app-shell > #mobileBottomNav.mobile-bottom-nav.mobile-bottom-nav--spread {
        justify-content: space-evenly;
        overflow-x: hidden;
        padding-inline: 10px;
        gap: 6px
      }

      #appWrap > .app-shell > #mobileBottomNav.mobile-bottom-nav.mobile-bottom-nav--spread .mob-nav-item {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        padding-inline: 6px
      }

      #appWrap > .app-shell > #mobileBottomNav.mobile-bottom-nav.mobile-bottom-nav--spread .mob-nav-item span {
        max-width: none
      }

      #appWrap > .app-shell > #mobileBottomNav.mobile-bottom-nav.mobile-bottom-nav--scroll {
        justify-content: flex-start;
        overflow-x: auto
      }

      #appWrap > .app-shell > #mobileBottomNav.mobile-bottom-nav.mobile-bottom-nav--scroll .mob-nav-item {
        flex: 0 0 auto;
        min-width: 62px
      }

      .mob-nav-item {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 4px;
        margin: 0;
        border: 0;
        background: transparent;
        color: var(--mr-text-2);
        font-family: var(--font);
        font-size: 10px;
        font-weight: 600;
        line-height: 1.2;
        cursor: pointer;
        border-radius: 12px;
        position: relative;
        transition: color 0.15s ease
      }

      .mob-nav-item > i {
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 11px;
        font-size: 15px;
        line-height: 1;
        color: var(--mr-text-2);
        background: var(--mr-primary-softer);
        border: none;
        transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease
      }

      .mob-nav-item > i::before {
        color: inherit
      }

      .mob-nav-item.active > i {
        color: #fff;
        background: var(--mr-blue);
        border: none;
        box-shadow: 0 4px 12px color-mix(in srgb, var(--mr-blue) 38%, transparent);
        transform: translateY(-1px)
      }

      .mob-nav-item span {
        max-width: 68px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
      }

      .mob-nav-item.active {
        color: var(--mr-text);
        background: transparent
      }

      .mob-nav-badge {
        position: absolute;
        top: 2px;
        inset-inline-start: 50%;
        margin-inline-start: 6px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 999px;
        background: var(--red);
        color: #fff;
        font-size: 9px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1
      }

      #appWrap .main {
        flex: 1 1 auto;
        min-height: 0;
        padding-bottom: calc(var(--mr-mob-bottom-nav-h, 56px) + 32px) !important
      }

      #appWrap input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
      #appWrap select,
      #appWrap textarea,
      .lp-input {
        font-size: 16px
      }

      .sidebar-drawer-toggle.sidebar-toggle-btn {
        display: none !important
      }
    }

    @media (max-width: 640px) and (pointer: coarse) {
      .wf-status-filter {
        flex: 1 1 100%;
        min-width: 0;
      }

      .wf-status-trigger {
        min-width: 0;
      }

      #tab-departments .wf-status-filter.user-role-dd {
        max-width: none;
      }
    }

    @media (max-width: 992px) and (pointer: coarse) {
      #tab-compliance .cmp-neo-btn--pdf-export {
        display: none !important;
      }
    }

    @media (max-width: 1180px) {
      .cmp-neo-grid {
        grid-template-columns: repeat(auto-fill, minmax(272px, 320px));
      }
    }

    @media (max-width: 760px) and (pointer: coarse) {
      .cmp-neo-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .cmp-neo-card {
        max-width: none;
      }
    }

    @media(max-width:1024px) {
      .rp-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      #tab-reports .rp-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important
      }
    }

    @media(max-width:640px) and (pointer: coarse) {
      .rp-stat-card {
        height: auto;
        min-height: 88px;
        padding: 16px 18px
      }

      .rp-stat-value {
        left: 16px
      }

      .rp-stat-icon {
        top: 14px;
        right: 14px
      }

      .rp-stat-label {
        right: 14px;
        bottom: 14px;
        white-space: normal
      }
    }

    @media(max-width:480px) and (pointer: coarse) {
      .rp-stats {
        grid-template-columns: 1fr
      }

      #tab-reports .rp-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important
      }
    }

    @media (max-width: 992px) and (pointer: coarse) {
      :root {
        --fp-peek: clamp(44px, 12vw, 80px);
        --fp-z-overlay: 2100;
        --fp-z-panel: 2101;
        --fp-w: clamp(
          228px,
          68vw,
          min(304px, calc(100vw - var(--fp-peek)))
        )
      }

      .filter-panel-overlay {
        top: var(--unified-topbar-h, calc(76px + env(safe-area-inset-top, 0px)));
        bottom: var(--mr-mob-bottom-nav-h, calc(56px + env(safe-area-inset-bottom, 0px)));
        left: 0;
        right: 0;
        z-index: var(--fp-z-overlay) !important
      }

      body.filter-panel-open #appWrap .topbar.unified-banner {
        z-index: 3100 !important;
        background: var(--mr-surface) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        opacity: 1 !important;
        border-bottom-color: var(--mr-border) !important
      }

      body.filter-panel-open #appWrap > .app-shell > #mobileBottomNav.mobile-bottom-nav {
        z-index: 2900 !important;
        background: var(--mr-surface) !important;
        opacity: 1 !important
      }

      .filter-panel {
        --fp-slide-gap: 16px;
        width: var(--fp-w);
        max-width: calc(100vw - var(--fp-peek));
        top: var(--unified-topbar-h, calc(76px + env(safe-area-inset-top, 0px)));
        bottom: var(--mr-mob-bottom-nav-h, calc(56px + env(safe-area-inset-bottom, 0px)));
        left: calc(-1 * var(--fp-w) - var(--fp-slide-gap));
        height: auto;
        max-height: none;
        border-top: none !important;
        z-index: var(--fp-z-panel) !important;
        box-sizing: border-box;
        padding-left: env(safe-area-inset-left, 0px);
        box-shadow: 4px 0 28px rgba(0, 0, 0, 0.16)
      }

      .filter-panel.open {
        left: 0 !important
      }
      
      .filter-panel-header {
        padding: clamp(10px, 2.8vw, 14px) clamp(12px, 3.5vw, 16px);
        border-top: none !important
      }

      .filter-panel-header h3 {
        font-size: clamp(13px, 3.6vw, 15px)
      }

      .filter-panel-body {
        padding: clamp(10px, 2.8vw, 14px) clamp(12px, 3.5vw, 16px)
      }

      .filter-panel-footer {
        padding: clamp(10px, 2.8vw, 14px) clamp(12px, 3.5vw, 16px);
        gap: clamp(8px, 2.2vw, 12px)
      }

      #scoreHelpPanel.score-help-panel {
        width: min(380px, calc(100vw - 20px)) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: min(78vh, calc(100dvh - var(--unified-topbar-h, 76px) - var(--mr-mob-bottom-nav-h, 56px) - 24px));
        border-radius: 18px
      }

      .score-help-sheet__hero {
        padding: 16px 14px 12px
      }

      .score-help-sheet__title {
        font-size: 15px
      }

      .score-help-sheet__sub {
        font-size: 11px
      }

      .score-help-sheet__body {
        padding: 10px 10px 8px
      }

      .score-help-item {
        padding: 8px 9px;
        gap: 8px
      }

      .score-help-item__ico {
        width: 28px;
        height: 28px;
        font-size: 11px
      }

      .score-help-item__text,
      .score-help-item__text strong {
        font-size: 11px
      }

      .fp-section {
        margin-bottom: clamp(14px, 4vw, 20px)
      }

      .fp-chip {
        font-size: clamp(11px, 3vw, 12px);
        padding: clamp(5px, 1.5vw, 6px) clamp(10px, 2.8vw, 12px)
      }

      .fp-dropdown-trigger {
        font-size: clamp(12px, 3.2vw, 13px);
        padding: clamp(8px, 2.2vw, 9px) clamp(10px, 2.8vw, 12px)
      }

      #fp-vtype-list .fp-checklist-item {
        font-size: clamp(11px, 2.9vw, 12px);
        padding: clamp(7px, 2vw, 8px) clamp(8px, 2.4vw, 10px)
      }

      .fp-btn {
        font-size: clamp(12px, 3.2vw, 13px);
        padding: clamp(10px, 2.8vw, 12px) clamp(12px, 3.2vw, 16px)
      }
    }

    @media (max-width: 992px) and (orientation: landscape) and (pointer: coarse) {
      :root {
        --fp-peek: clamp(72px, 22vw, 120px);
        --fp-w: clamp(
          220px,
          52vw,
          min(280px, calc(100vw - var(--fp-peek)))
        )
      }
    }

    @media (max-width: 520px) and (pointer: coarse) {
      .countdown-head {
        flex-wrap: wrap
      }

      .countdown-clock-wrapper {
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between
      }

      .countdown-deadline {
        max-width: none;
        flex: 1;
        min-width: 0
      }

      #ticketModal .countdown-clock-wrapper {
        display: contents;
        width: auto
      }
    }

    @media(max-width:1024px) {
      .cmp-kpis {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media(max-width:480px) and (pointer: coarse) {
      .cmp-kpis {
        grid-template-columns: 1fr
      }
    }

    @media(max-width:1024px) {
      .cmp-podium-row {
        grid-template-columns: 1fr
      }
    }

    @media(max-width:768px) and (pointer: coarse) {
      .cmp-table thead {
        display: none
      }

      .cmp-table,
      .cmp-table tbody,
      .cmp-table tr,
      .cmp-table td {
        display: block;
        width: 100%
      }

      .cmp-table {
        min-width: 0
      }

      .cmp-table tbody tr {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 12px;
        margin-bottom: 10px;
        padding: 12px
      }

      .cmp-table td {
        border: none;
        padding: 6px 0
      }

      .cmp-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 10px;
        color: var(--text3);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 3px;
        font-weight: 600
      }

      .cmp-cell-rank::before {
        display: none
      }

      .cmp-cell-entity::before {
        display: none
      }
    }

    @media (max-width: 768px) and (pointer: coarse) {
      #cmpDetailModal.modal.open {
        align-items: flex-end !important;
        justify-content: flex-end !important;
        padding: 0 !important;
        box-sizing: border-box !important
      }

      #cmpDetailModal.modal.open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: var(--mob-chrome-bottom, var(--mr-mob-bottom-nav-h, calc(56px + env(safe-area-inset-bottom, 0px))));
        pointer-events: none;
        z-index: 0
      }

      .modal-card.cmp-detail-card {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: var(--mob-chrome-bottom, var(--mr-mob-bottom-nav-h, calc(56px + env(safe-area-inset-bottom, 0px)))) !important;
        z-index: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: min(
          72dvh,
          calc(
            100dvh
            - var(--unified-topbar-h, 76px)
            - var(--mob-chrome-bottom, var(--mr-mob-bottom-nav-h, calc(56px + env(safe-area-inset-bottom, 0px))))
            - 12px
          )
        ) !important;
        height: min(
          72dvh,
          calc(
            100dvh
            - var(--unified-topbar-h, 76px)
            - var(--mob-chrome-bottom, var(--mr-mob-bottom-nav-h, calc(56px + env(safe-area-inset-bottom, 0px))))
            - 12px
          )
        ) !important;
        min-height: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        will-change: transform
      }

      #cmpDetailModal.modal.sheet-dragging .modal-card.cmp-detail-card {
        transition: none !important
      }

      .modal-card.cmp-detail-card .cmp-sheet-grabber-wrap {
        display: flex !important;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        padding: 4px 0 2px;
        margin: 0;
        cursor: grab;
        touch-action: none;
        background: var(--bg) !important;
        border: none !important
      }

      .modal-card.cmp-detail-card .cmp-sheet-grabber {
        width: 40px;
        height: 4px;
        min-height: 4px;
        background: #9ca3af !important;
        border: none !important;
        box-shadow: none !important
      }

      .modal-card.cmp-detail-card .cmp-sheet-drag-zone {
        flex-shrink: 0;
        cursor: grab;
        touch-action: none;
        background: var(--bg) !important;
        border-bottom: none !important
      }

      .modal-card.cmp-detail-card .cmp-sheet-drag-zone:active {
        cursor: grabbing
      }

      .modal-card.cmp-detail-card .cmp-detail-modal-header {
        padding-top: 0 !important;
        padding-bottom: 4px !important;
        border-bottom: 1px solid var(--border) !important;
        background: var(--bg) !important
      }

      .modal-card.cmp-detail-card .modal-header.cmp-detail-modal-header {
        border-bottom: 1px solid var(--border) !important
      }

      #cmpDetailModal.modal.open {
        touch-action: none
      }

      .modal-card.cmp-detail-card .modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        padding: 6px 12px 12px;
        display: flex;
        flex-direction: column;
        overflow: hidden !important;
        overscroll-behavior: none;
        touch-action: none
      }

      .modal-card.cmp-detail-card .emp-new-grid,
      .modal-card.cmp-detail-card .emp-new-cards-wrap--single,
      .modal-card.cmp-detail-card .cmp-charts-grid,
      .modal-card.cmp-detail-card .cmp-detail-section--severity,
      .modal-card.cmp-detail-card .cmp-detail-section--timeline {
        touch-action: none
      }

      .modal-card.cmp-detail-card .cmp-detail-shell {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        max-width: none;
        width: 100%;
        --cmp-detail-w: 100%;
        --cmp-pair-gap: clamp(5px, 1.5vw, 8px);
        --cmp-card-pad: clamp(5px, 1.4vw, 8px) clamp(6px, 1.6vw, 9px);
        --cmp-card-title: clamp(8px, 2.4vw, 10px);
        --cmp-card-text: clamp(7px, 2vw, 9px);
        --cmp-card-meter: clamp(22px, 6.5vw, 28px);
        --cmp-card-body-h: clamp(60px, 17vw, 76px);
        --cmp-card-slider-h: clamp(56px, 16vw, 72px);
        --cmp-card-slider-track: clamp(40px, 11vw, 52px);
        --cmp-card-slider-val: clamp(11px, 3.2vw, 14px);
        --cmp-chart-sev: clamp(118px, 36vw, 160px)
      }

      .modal-card.cmp-detail-card .emp-new-grid,
      .modal-card.cmp-detail-card .emp-new-cards-wrap--single,
      .modal-card.cmp-detail-card .cmp-charts-grid {
        flex-shrink: 0;
        max-width: 100%;
        width: 100%;
        margin-inline: 0
      }

      .modal-card.cmp-detail-card .cmp-detail-section--violations {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        margin-bottom: 0 !important
      }

      .modal-card.cmp-detail-card .cmp-detail-section--violations .cmp-detail-section-head {
        flex-shrink: 0
      }

      .modal-card.cmp-detail-card .cmp-detail-section--severity {
        padding: 5px 4px 6px 5px !important
      }

      .modal-card.cmp-detail-card .cmp-detail-section--severity .cmp-detail-section-title {
        margin-bottom: 4px !important;
        padding-inline: 0 !important
      }

      .modal-card.cmp-detail-card .cmp-detail-section--severity .cmp-severity-grid {
        flex-direction: row-reverse !important;
        align-items: center !important;
        gap: 6px !important;
        text-align: start !important
      }

      .modal-card.cmp-detail-card .cmp-detail-section--severity .cmp-severity-donut {
        margin: 0 !important
      }

      .modal-card.cmp-detail-card .cmp-detail-section--severity .cmp-severity-legend {
        gap: 2px !important;
        max-width: none !important
      }

      .modal-card.cmp-detail-card .cmp-detail-section--severity .cmp-sev-legend-item {
        padding: 3px 4px !important;
        min-height: 0 !important
      }

      .modal-card.cmp-detail-card .cmp-detail-section--timeline {
        padding: 5px 4px 6px 5px !important
      }

      .modal-card.cmp-detail-card .cmp-detail-section--timeline .cmp-detail-section-title {
        margin-bottom: 4px !important;
        padding-inline: 0 !important
      }

      .modal-card.cmp-detail-card .cmp-detail-section--timeline .cmp-timeline-wrap {
        padding: 0 !important;
        margin: 0 !important
      }

      .modal-card.cmp-detail-card .cmp-detail-section--timeline .cmp-timeline {
        gap: 4px !important;
        padding: 0 !important
      }

      .modal-card.cmp-detail-card .cmp-detail-section--timeline .cmp-timeline-axis {
        padding-inline: 0 !important;
        margin-top: 2px !important
      }

      /* التفاصيل ثابتة — التمرير داخل قائمة المخالفات المؤثرة فقط */
      .modal-card.cmp-detail-card .cmp-detail-section--violations .cmp-viol-list,
      .modal-card.cmp-detail-card .cmp-detail-section--violations .cmp-viol-list.cmp-viol-list--scroll,
      .modal-card.cmp-detail-card .cmp-detail-section--violations .score-viol-list.cmp-viol-list--scroll {
        --cmp-viol-row-h: 56px;
        --cmp-viol-gap: 6px;
        flex: 1 1 auto;
        display: flex !important;
        flex-direction: column !important;
        gap: var(--cmp-viol-gap) !important;
        max-height: none !important;
        height: auto !important;
        min-height: 0;
        overflow-y: auto !important;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
        padding-inline-end: 0 !important;
        margin: 0 !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }

      .modal-card.cmp-detail-card .cmp-detail-section--violations .cmp-viol-list::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
      }

      .modal-card.cmp-detail-card .cmp-viol-list .score-viol-row {
        padding: 6px 10px;
        gap: 8px;
        font-size: 11px;
        min-height: var(--cmp-viol-row-h);
        flex-shrink: 0;
        align-items: center;
      }

      .modal-card.cmp-detail-card .score-viol-name {
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .modal-card.cmp-detail-card .score-viol-meta {
        font-size: 9px;
        gap: 6px 10px;
        margin-top: 2px;
        flex-wrap: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .modal-card.cmp-detail-card .score-viol-meta span:nth-child(n+3) {
        display: none;
      }

      .modal-card.cmp-detail-card .score-viol-weight {
        font-size: 12px;
      }

      .modal-card.cmp-detail-card .score-viol-weight .raw-weight {
        font-size: 9px;
      }

      .modal-card.cmp-detail-card .cmp-detail-modal-header {
        padding: 4px 12px 2px;
      }

      .cmp-detail-hero-top {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto !important;
        align-items: start !important;
        gap: 8px !important;
        direction: rtl !important
      }

      .modal-card.cmp-detail-card .cmp-detail-hero-main {
        grid-column: 1 !important;
        grid-row: 1 !important;
        flex: none !important;
        min-width: 0 !important;
        max-width: none !important;
        width: 100% !important
      }

      .modal-card.cmp-detail-card .cmp-detail-hero-ring-wrap {
        grid-column: 2 !important;
        grid-row: 1 !important;
        flex: 0 0 auto !important;
        align-self: start !important;
        justify-self: end !important
      }

      .modal-card.cmp-detail-card .cmp-detail-hero-ring {
        width: 64px !important;
        height: 64px !important
      }

      .modal-card.cmp-detail-card .cmp-detail-hero-ring-lbl {
        font-size: 8px !important;
        margin-top: 2px !important
      }

      .modal-card.cmp-detail-card .cmp-detail-hero-banner {
        gap: 4px !important
      }

      .modal-card.cmp-detail-card .cmp-detail-hero-meta {
        gap: 4px 8px !important;
        font-size: 10px !important;
        margin-top: 0 !important
      }

      .modal-card.cmp-detail-card .emp-new-grid {
        margin-bottom: 10px !important
      }

      .modal-card.cmp-detail-card .cmp-detail-hero-text {
        width: 100%;
        min-width: 0
      }

      .modal-card.cmp-detail-card .cmp-detail-hero-text h3 {
        font-size: 14px
      }

      .modal-card.cmp-detail-card .cmp-detail-hero-sub {
        margin-bottom: 4px;
        font-size: 10px
      }

      .modal-card.cmp-detail-card .cmp-detail-hero-badges {
        --cmp-hero-badge-fs: clamp(7px, 2.1vw, 8px);
        --cmp-hero-badge-pad-x: clamp(4px, 1.2vw, 6px);
        --cmp-hero-badge-gap: 3px;
        --cmp-hero-badge-icon: clamp(5.5px, 1.6vw, 7px);
        width: 100%;
        max-width: 100%;
        margin-top: 1px
      }

      /* موظف: مشرف وفرع جنب بعض — تمرير أفقي إن طال النص (بدون قص إجباري) */
      .modal-card.cmp-detail-card .cmp-detail-hero-badges--emp {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        scroll-snap-type: x proximity
      }

      .modal-card.cmp-detail-card .cmp-detail-hero-badges--emp .cmp-detail-hero-badge {
        width: auto;
        max-width: none;
        flex: 0 0 auto;
        flex-shrink: 0;
        scroll-snap-align: start
      }

      .modal-card.cmp-detail-card .cmp-detail-hero-badges--emp .cmp-detail-hero-badge__val {
        flex: 0 1 auto;
        white-space: nowrap
      }

      .cmp-detail-hero-score {
        align-self: flex-start;
        flex: 0 0 auto
      }

      .cmp-detail-hero-score__val {
        font-size: 24px
      }
    }

    @media (max-width: 400px) and (pointer: coarse) {
      .modal-card.cmp-detail-card .cmp-detail-modal-header {
        padding: 10px 12px 8px
      }

      .modal-card.cmp-detail-card .cmp-detail-hero-text h3 {
        font-size: 13px
      }

      .modal-card.cmp-detail-card .cmp-detail-hero-badges {
        --cmp-hero-badge-fs: 7px;
        --cmp-hero-badge-pad-x: 4px
      }

      .cmp-detail-hero-score__val {
        font-size: 22px
      }

      .modal-card.cmp-detail-card .cmp-detail-shell {
        --cmp-card-title: clamp(7px, 2.2vw, 9px);
        --cmp-card-text: clamp(7px, 1.9vw, 8px);
        --cmp-card-meter: clamp(20px, 6vw, 26px);
        --cmp-card-body-h: clamp(56px, 16vw, 72px);
        --cmp-card-slider-h: clamp(52px, 15vw, 68px);
        --cmp-card-slider-track: clamp(36px, 10vw, 48px);
        --cmp-card-slider-val: clamp(10px, 3vw, 13px);
        --cmp-chart-sev: clamp(108px, 34vw, 140px)
      }
    }

    @media (max-width: 340px) and (pointer: coarse) {
      .modal-card.cmp-detail-card .cmp-detail-hero-badges:not(:has(.cmp-detail-hero-badge--branch)) {
        flex-wrap: wrap;
        overflow: visible;
        touch-action: auto
      }

      .modal-card.cmp-detail-card .cmp-detail-hero-badges:not(:has(.cmp-detail-hero-badge--branch)) .cmp-detail-hero-badge {
        flex: 1 1 calc(50% - 2px);
        max-width: calc(50% - 2px)
      }

      .modal-card.cmp-detail-card .cmp-detail-shell {
        --cmp-pair-gap: 4px;
        --cmp-card-pad: 4px 5px;
        --cmp-card-title: 7px;
        --cmp-card-text: 7px;
        --cmp-card-meter: 20px;
        --cmp-card-body-h: 52px;
        --cmp-card-slider-h: 48px;
        --cmp-card-slider-track: 34px;
        --cmp-card-slider-val: 10px;
        --cmp-chart-sev: clamp(100px, 32vw, 128px)
      }

      .modal-card.cmp-detail-card .cmp-detail-section--severity .cmp-severity-donut svg {
        width: clamp(52px, 15vw, 64px) !important;
        height: clamp(52px, 15vw, 64px) !important
      }
    }

    @media(max-width:600px) and (pointer: coarse) {
      .cmp-detail-hero {
        grid-template-columns: 1fr;
        text-align: center
      }

      .cmp-detail-score-ring {
        margin: 0 auto
      }

      .cmp-detail-quick-stats {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:600px) and (pointer: coarse) {
      .cmp-severity-grid {
        flex-direction: column-reverse;
        text-align: center
      }

      .cmp-severity-donut {
        margin: 0 auto
      }

      .modal-card.cmp-detail-card .cmp-detail-section--severity .cmp-severity-grid {
        flex-direction: row-reverse !important;
        text-align: start !important
      }

      .modal-card.cmp-detail-card .cmp-detail-section--severity .cmp-severity-donut {
        margin: 0 !important
      }
    }

    @media (max-width: 992px) and (pointer: coarse) {
      .sidebar-drawer-toggle.sidebar-toggle-btn:hover {
        background: #f8f9fb;
        border-color: color-mix(in srgb, var(--mr-border) 70%, #c4c9d4);
        color: #4b5563;
        box-shadow: 0 3px 12px rgba(15, 18, 36, 0.14)
      }

      .sidebar-drawer-toggle.sidebar-toggle-btn[aria-expanded="true"],
      .sidebar-drawer-toggle.sidebar-toggle-btn[aria-expanded="false"] {
        background: #fff;
        border-color: color-mix(in srgb, var(--mr-border) 70%, #c4c9d4);
        color: #6b7280
      }

      [data-theme="dark"] .sidebar-drawer-toggle.sidebar-toggle-btn:hover,
      [data-theme="dark"] .sidebar-drawer-toggle.sidebar-toggle-btn[aria-expanded="true"],
      [data-theme="dark"] .sidebar-drawer-toggle.sidebar-toggle-btn[aria-expanded="false"] {
        background: var(--mr-surface);
        border-color: var(--mr-border);
        color: var(--mr-text-2)
      }
    }

    .hamburger-btn {
      display: none !important
    }

    .sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(2px);
      z-index: 99;
      opacity: 0;
      transition: opacity 0.25s ease
    }

    .sidebar-overlay.open {
      display: block;
      opacity: 1;
      z-index: 1950
    }

    @media(max-width:1024px) {
      .content {
        padding: 18px;
      }
      .content:has(#tab-dashboard.active),
      .main:has(#tab-dashboard.active) {
        padding-inline: 1px !important;
      }
      .app-body:has(#tab-dashboard.active) {
        padding-inline: 1px !important;
      }

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

    @media(max-width:768px) and (pointer: coarse) {
      html {
        font-size: 13px
      }

      .topbar {
        padding: 10px 14px
      }

      .topbar-title h1 {
        font-size: 15px
      }

      .topbar-title p {
        display: none
      }

      .content {
        padding: 14px 12px;
      }
      .content:has(#tab-dashboard.active),
      .main:has(#tab-dashboard.active) {
        padding-inline: 1px !important;
      }
      .app-body:has(#tab-dashboard.active) {
        padding-inline: 1px !important;
      }

      .form-grid {
        grid-template-columns: 1fr;
        gap: 12px
      }

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

      .modal-card {
        max-width: 100%;
        width: 100%;
        max-height: 92vh;
        border-radius: 16px 16px 0 0;
        margin: 0
      }

      .modal-card.modal-detail {
        height: 95vh;
        max-height: 95vh
      }

      .modal-header,
      .modal-body,
      .modal-footer {
        padding: 14px 16px
      }

      .modal-footer {
        flex-direction: column-reverse;
        gap: 8px
      }

      .modal-footer .btn {
        width: 100%;
        justify-content: center
      }

      .data-table {
        font-size: 12px
      }

      .data-table th,
      .data-table td {
        padding: 8px 10px;
        white-space: nowrap
      }

      .col-hide-mobile {
        display: none !important
      }

      .notif-panel {
        width: min(300px, calc(100vw - 16px));
        max-height: min(280px, calc(100dvh - var(--unified-topbar-h, 76px) - var(--mr-mob-bottom-nav-h, 56px) - 20px));
        border-radius: 12px;
        z-index: 3060
      }

      body.notif-panel-open #appWrap > .app-shell > #mobileBottomNav.mobile-bottom-nav {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 2900 !important
      }

      body.notif-panel-open #appWrap .main,
      body.notif-panel-open #appWrap .content {
        overflow: hidden !important;
        overscroll-behavior: none !important;
        touch-action: none !important
      }

      .notif-header {
        padding: 9px 10px
      }

      .notif-item {
        padding: 9px 10px
      }

      .btn {
        min-height: 40px;
        padding: 9px 14px
      }

      .form-input,
      input[type="text"],
      input[type="email"],
      input[type="password"],
      input[type="tel"],
      input[type="number"],
      input[type="search"],
      input[type="date"],
      select,
      textarea {
        font-size: 16px !important
      }

      .confirm-overlay {
        align-items: flex-start !important;
        padding: max(10px, env(safe-area-inset-top, 0px)) 12px max(10px, env(safe-area-inset-bottom, 0px)) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch
      }

      .confirm-box {
        width: min(100%, 380px) !important;
        max-height: calc(100dvh - max(20px, env(safe-area-inset-top, 0px)) - max(20px, env(safe-area-inset-bottom, 0px))) !important;
        overflow-y: auto !important;
        padding: 18px 16px 12px !important;
        margin: auto 0 !important;
        display: flex !important;
        flex-direction: column !important
      }

      .confirm-icon {
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 10px !important;
        font-size: 22px !important;
        flex: 0 0 auto !important
      }

      .confirm-title {
        font-size: 16px !important;
        margin-bottom: 6px !important;
        flex: 0 0 auto !important
      }

      .confirm-msg {
        font-size: 13px !important;
        line-height: 1.45 !important;
        margin-bottom: 12px !important;
        flex: 1 1 auto !important;
        min-height: 0 !important
      }

      .confirm-actions {
        flex: 0 0 auto !important;
        flex-direction: column !important;
        gap: 8px !important;
        position: sticky !important;
        bottom: 0 !important;
        padding-top: 8px !important;
        background: var(--surface) !important
      }

      .confirm-btn {
        width: 100% !important;
        min-height: 40px !important;
        padding: 9px 14px !important
      }

      .toast-container {
        top: 14px;
        left: 14px;
        right: 14px;
        transform: none;
        width: auto;
      }
    }

    @media(max-width:480px) and (pointer: coarse) {
      .topbar-title h1 {
        font-size: 14px
      }

      .content {
        padding: 0 !important;
      }
    }

@media (max-width:1024px){ .mk-kpi-grid{ grid-template-columns:repeat(2,1fr); } }
    @media (max-width:992px) and (pointer: coarse) {
      .mk-kpi-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; }
      .mk-kpi {
        padding:12px 0px;
        gap:8px;
        min-height:0;
        border-radius:14px;
      }
    }
    @media (max-width:1100px){ .mk-dash__split{ grid-template-columns:1fr; } }

@media (max-width: 720px) and (pointer: coarse) {
      #tab-newTicket .mk-form-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 520px) and (pointer: coarse) {
      #tab-newTicket .mk-dt-pair,
      #tab-broadcasts .mk-dt-pair {
        grid-template-columns: 1fr;
        max-width: none;
      }
    }

  @media (min-width: 993px) and (max-width: 1320px) {
      html.mr-desktop-ui .topbar.unified-banner {
        height: auto;
        min-height: 64px;
        flex-wrap: wrap;
        align-items: center;
        padding: 10px 16px;
        gap: 10px 12px
      }

      html.mr-desktop-ui .topbar.unified-banner .brand-area {
        flex: 0 1 auto;
        min-width: 0
      }

      html.mr-desktop-ui .brand-area .brand-text strong {
        font-size: clamp(15px, 2vw, 18px)
      }

      html.mr-desktop-ui .topbar-actions-zone {
        flex: 0 0 auto;
        min-width: 0;
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 8px;
        margin-inline-start: auto
      }

      html.mr-desktop-ui .figma-search-wrap {
        flex: 1 1 200px;
        min-width: 0
      }

      html.mr-desktop-ui .topbar-divider,
      html.mr-desktop-ui .topbar-vdivider:not(.topbar-brand-divider) {
        display: none
      }

      html.mr-desktop-ui .mr-topbar-user {
        flex-shrink: 0;
        min-width: 0;
        max-width: none
      }
    }

    @media (max-width: 992px) and (pointer: coarse) {
      /* تحسين المساحة العامة وحواف الجسم */
      .main {
        max-width: 100% !important
      }

      .content {
        max-width: 100% !important
      }

      .topbar.unified-banner {
        height: calc(56px + var(--mr-safe-top, env(safe-area-inset-top, 0px))) !important;
        max-height: calc(56px + var(--mr-safe-top, env(safe-area-inset-top, 0px))) !important;
        min-height: calc(56px + var(--mr-safe-top, env(safe-area-inset-top, 0px))) !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        padding-block-end: 8px !important;
        padding-block-start: calc(8px + var(--mr-safe-top, env(safe-area-inset-top, 0px))) !important;
        padding-inline-start: max(12px, var(--mr-safe-left, env(safe-area-inset-left, 0px))) !important;
        padding-inline-end: max(4px, var(--mr-safe-right, env(safe-area-inset-right, 0px))) !important;
        gap: 8px !important
      }

      /* شعار الشريط على الجوال — أصغر دون توسيع ارتفاع الشريط */
      .topbar-brand-zone .brand-area {
        margin-block-start: 0
      }

      .brand-area .brand-icon.wefaq-logo-slot {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible
      }

      .brand-area .brand-icon.wefaq-logo-slot .wefaq-app-logo--athar {
        position: static;
        width: 9.5rem;
        max-width: 9.5rem;
        height: auto;
        margin: 0;
        transform: none
      }

      .topbar-brand-zone {
        flex: 1 1 auto;
        min-width: 0;
        gap: 10px !important
      }

      .topbar-brand-zone .brand-area {
        min-width: 0;
        overflow: visible
      }

      .brand-area .brand-text {
        min-width: 0;
        overflow: hidden
      }

      .brand-area .brand-text strong {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
      }

      .topbar-brand-divider {
        display: none
      }

      .topbar-actions-zone {
        flex: 0 0 auto !important;
        gap: 6px !important;
        margin-inline-start: auto !important;
        margin-inline-end: 0 !important
      }

      .topbar-actions-zone > .mr-topbar-user {
        order: 99;
        margin-inline-end: 0
      }

      .topbar-actions-zone > .topbar-btn--notif {
        order: 1;
        flex-shrink: 0
      }

      .figma-search-wrap {
        flex: 1 1 auto;
        min-width: 0 !important;
        max-width: 100% !important
      }
      /* الترويسة الرئيسية وشريط البحث */
      .panel-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
      }
      .panel-header > div {
        width: 100%;
      }
      .panel-header .btn, 
      .panel-header .rb-action-btn-dark,
      .panel-header .mr-users-io-actions {
        width: 100% !important;
        justify-content: center !important;
      }
      .mr-users-io-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
      }
      .mr-users-io-actions .btn {
        flex: 1 1 120px; /* جعل الأزرار تتوزع بمرونة على شاشات الجوال */
      }
      /* شريط البحث في الفروع والمناطق */
      .br-search-bar {
        max-width: 100% !important;
        width: 100% !important;
        margin-inline-start: 0 !important;
      }
      .br-search-wrap {
        width: 100% !important;
        max-width: 100% !important;
      }
      /* بطاقات الفروع لتناسب العرض الأصغر */
      .rb-view .viol-grid,
      .viol-grid.rb-view--regions {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)) !important;
        max-width: 100% !important;
        width: 100% !important
      }

      .stats-grid-v2,
      .rp-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important
      }
    }

    @media (max-width: 768px) and (pointer: coarse) {
      .stats-grid-v2,
      .rp-stats {
        grid-template-columns: 1fr !important
      }
    }

    @media (max-width: 576px) and (pointer: coarse) {
      /* تحسين حجم الخطوط والعناوين على الشاشات الصغيرة جداً */
      .topbar.unified-banner {
        padding-block-end: 8px !important;
        padding-block-start: calc(8px + var(--mr-safe-top, env(safe-area-inset-top, 0px))) !important;
        padding-inline-start: max(10px, var(--mr-safe-left, env(safe-area-inset-left, 0px))) !important;
        padding-inline-end: max(2px, var(--mr-safe-right, env(safe-area-inset-right, 0px))) !important;
        gap: 8px !important;
      }
      .brand-area .brand-text strong {
        font-size: 15px !important;
      }
      .brand-area {
        gap: 8px !important;
      }
      .brand-area .brand-icon:not(.wefaq-logo-slot) {
        width: 32px !important;
        height: 32px !important;
        font-size: 16px !important;
      }
      /* تحسين أزرار شريط الأدوات */
      .topbar-tools {
        gap: 8px !important;
      }
      .topbar-btn {
        width: 34px !important;
        height: 34px !important;
      }

      .topbar-btn--notif {
        width: 36px !important;
        height: 36px !important
      }
      .sidebar-toggle-btn {
        width: 34px !important;
        height: 34px !important;
        font-size: 14px !important;
      }
      /* الجداول - التأكد من إمكانية التمرير الأفقي دون سحق الأعمدة */
      .mr-users-table-wrap, 
      .wf-table-wrap, 
      .cmp-table-wrap {
        width: 100% !important;
        overflow-x: auto !important;
        display: block !important;
        -webkit-overflow-scrolling: touch;
      }
      .data-table:not(.wf-tickets-table):not(.mr-users-table), .cmp-table, .mr-perms-table {
        min-width: min(600px, 100%) !important;
        width: max-content;
        max-width: none
      }
      /* أزرار لوحة التحكم */
      .mk-dash__hero {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px !important;
      }
      .mk-dash__hero-actions {
        width: 100% !important;
      }
      .mk-dash__hero-actions .mk-btn {
        flex: 1 1 auto;
        justify-content: center;
      }
      /* الفلاتر وعناصر البحث */
      .toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
      }
      .toolbar > * {
        width: 100% !important;
        flex: 1 1 auto !important;
      }
      .wf-status-trigger {
        width: 100% !important;
        justify-content: space-between;
      }
    }

    @media (max-width: 375px) and (pointer: coarse) {
      html.mr-mobile-ui {
        --mr-mob-bottom-nav-h: calc(52px + env(safe-area-inset-bottom, 0px));
        --unified-topbar-h: calc(52px + var(--mr-safe-top, env(safe-area-inset-top, 0px)))
      }

      html.mr-mobile-ui .topbar.unified-banner,
      html.mr-mobile-ui #appWrap .topbar.unified-banner {
        height: calc(52px + var(--mr-safe-top, env(safe-area-inset-top, 0px))) !important;
        min-height: calc(52px + var(--mr-safe-top, env(safe-area-inset-top, 0px))) !important;
        max-height: calc(52px + var(--mr-safe-top, env(safe-area-inset-top, 0px))) !important;
        padding-block-start: calc(7px + var(--mr-safe-top, env(safe-area-inset-top, 0px))) !important;
        padding-block-end: 7px !important;
        padding-inline-start: max(8px, var(--mr-safe-left, env(safe-area-inset-left, 0px))) !important;
        padding-inline-end: max(2px, var(--mr-safe-right, env(safe-area-inset-right, 0px))) !important;
        gap: 4px !important
      }

      html.mr-mobile-ui .topbar-brand-zone {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: calc(100% - 74px) !important;
        gap: 4px !important
      }

      html.mr-mobile-ui .topbar-actions-zone {
        gap: 3px !important
      }

      html.mr-mobile-ui .brand-area .brand-icon.wefaq-logo-slot {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important
      }

      html.mr-mobile-ui .brand-area .brand-icon.wefaq-logo-slot .wefaq-app-logo--athar {
        width: 7.4rem !important;
        max-width: 7.4rem !important
      }

      html.mr-mobile-ui .topbar-btn--notif,
      html.mr-mobile-ui .mr-topbar-user-trigger--icon {
        width: 32px !important;
        max-width: 32px !important;
        height: 38px !important;
        min-height: 38px !important
      }

      html.mr-mobile-ui .mr-topbar-user-icon {
        width: 32px !important;
        height: 32px !important
      }

      html.mr-mobile-ui #mobileBottomNav.mobile-bottom-nav,
      html.mr-mobile-ui #appWrap > .app-shell > #mobileBottomNav.mobile-bottom-nav {
        min-height: 52px !important;
        padding-inline: 4px !important;
        gap: 2px !important
      }

      html.mr-mobile-ui .mob-nav-item {
        padding-inline: 2px !important;
        gap: 1px !important;
        font-size: 9px !important
      }

      html.mr-mobile-ui .mob-nav-item > i {
        width: 26px !important;
        height: 26px !important;
        font-size: 13px !important
      }

      html.mr-mobile-ui .mob-nav-item span {
        max-width: 52px !important;
        font-size: 9px !important
      }

      html.mr-mobile-ui .modal-card {
        max-width: calc(100vw - 16px) !important;
        border-radius: 14px !important
      }

      html.mr-mobile-ui .form-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important
      }

      html.mr-mobile-ui .modal-footer {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px 12px !important
      }

      html.mr-mobile-ui .modal-footer .btn {
        flex: 1 1 140px !important;
        min-width: 0 !important;
        justify-content: center !important
      }

      html.mr-profile-page-active.mr-mobile-ui #tab-profile .profile-page-shell {
        padding-inline: 2px !important;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px) !important
      }

      html.mr-profile-page-active.mr-mobile-ui .profile-page-topbar {
        min-height: 34px !important;
        padding: max(3px, env(safe-area-inset-top, 0px)) 4px 8px !important
      }

      html.mr-profile-page-active.mr-mobile-ui .profile-page-body {
        padding: 0 8px calc(env(safe-area-inset-bottom, 0px) + 30px) !important
      }

      html.mr-profile-page-active.mr-mobile-ui .profile-hero {
        padding: 10px 8px 12px !important;
        margin-bottom: 8px !important
      }

      html.mr-profile-page-active.mr-mobile-ui .profile-hero__av {
        width: 76px !important;
        height: 76px !important;
        font-size: 28px !important
      }

      html.mr-profile-page-active.mr-mobile-ui .profile-hero__av.has-founding-frame {
        width: 84px !important;
        height: 84px !important
      }

      html.mr-profile-page-active.mr-mobile-ui .profile-hero__av-frame:has(.profile-hero__av.has-founding-frame) {
        width: 84px !important;
        height: 84px !important
      }

      html.mr-profile-page-active.mr-mobile-ui .profile-hero__av-stack {
        gap: 6px !important
      }

      html.mr-profile-page-active.mr-mobile-ui .profile-hero__name {
        font-size: 17px !important;
        margin-bottom: 0 !important
      }

      html.mr-profile-page-active.mr-mobile-ui .profile-hero__role {
        font-size: 11px !important;
        padding: 3px 10px !important
      }

      html.mr-profile-page-active.mr-mobile-ui .profile-info-card,
      html.mr-profile-page-active.mr-mobile-ui .profile-actions-card {
        border-radius: 12px !important;
        margin-bottom: 10px !important
      }

      html.mr-profile-page-active.mr-mobile-ui .profile-info-row,
      html.mr-profile-page-active.mr-mobile-ui .profile-action-row,
      html.mr-profile-page-active.mr-mobile-ui .profile-action-btn {
        min-height: 42px !important;
        padding: 10px 12px !important;
        gap: 8px !important
      }

      html.mr-profile-page-active.mr-mobile-ui .profile-info-row__lbl,
      html.mr-profile-page-active.mr-mobile-ui .profile-info-row__val,
      html.mr-profile-page-active.mr-mobile-ui .profile-action-row__lbl,
      html.mr-profile-page-active.mr-mobile-ui .profile-action-btn {
        font-size: 12px !important
      }

      html.mr-profile-page-active.mr-mobile-ui .profile-action-row__lbl {
        min-width: 0;
        gap: 8px !important
      }

      html.mr-profile-page-active.mr-mobile-ui .profile-action-row__lbl i {
        width: 16px !important;
        font-size: 13px !important
      }

      html.mr-profile-page-active.mr-mobile-ui .profile-action-row .theme-toggle {
        width: 4.4rem !important;
        height: 2.2rem !important;
        padding: 0.2rem !important
      }

      html.mr-profile-page-active.mr-mobile-ui .profile-action-row .theme-toggle__knob,
      html.mr-profile-page-active.mr-mobile-ui .profile-action-row .theme-toggle__ghost {
        width: 1.8rem !important;
        height: 1.8rem !important
      }

      html.mr-profile-page-active.mr-mobile-ui .profile-action-row .theme-toggle--light .theme-toggle__knob {
        transform: translateX(2.2rem) !important
      }

      html.mr-profile-page-active.mr-mobile-ui .profile-action-row .theme-toggle--light .theme-toggle__ghost {
        transform: translateX(-2.2rem) !important
      }
    }

    @media (max-height: 670px) and (max-width: 430px) and (pointer: coarse) {
      html.mr-profile-page-active.mr-mobile-ui .profile-hero {
        padding-block: 8px 10px !important
      }

      html.mr-profile-page-active.mr-mobile-ui .profile-hero__av {
        width: 68px !important;
        height: 68px !important;
        font-size: 25px !important
      }

      html.mr-profile-page-active.mr-mobile-ui .profile-hero__av.has-founding-frame {
        width: 76px !important;
        height: 76px !important
      }

      html.mr-profile-page-active.mr-mobile-ui .profile-hero__av-frame:has(.profile-hero__av.has-founding-frame) {
        width: 76px !important;
        height: 76px !important
      }

      html.mr-profile-page-active.mr-mobile-ui .profile-info-row,
      html.mr-profile-page-active.mr-mobile-ui .profile-action-row,
      html.mr-profile-page-active.mr-mobile-ui .profile-action-btn {
        min-height: 40px !important;
        padding-block: 9px !important
      }
    }

    @media (max-width: 992px) and (pointer: coarse) {
      /* معالجة التذاكر — تنسيق الجوال */
      html.mr-mobile-ui #appWrap .main:has(#tab-workflow.active) {
        padding-inline: 0 !important;
        padding-block: 2px 0 !important;
        padding-bottom: 0 !important;
        background: var(--mr-bg) !important;
        overflow-y: hidden !important;
        overflow-x: hidden !important;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0
      }

      html.mr-mobile-ui #appWrap .content:has(#tab-workflow.active) {
        padding: 0 !important;
        max-width: 100% !important;
        background: var(--mr-bg) !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column
      }

      #tab-workflow.tab-content {
        margin-inline: 0;
        max-width: none;
        width: 100%;
        background: var(--mr-bg);
        box-sizing: border-box
      }

      #tab-workflow.tab-content.active {
        display: flex !important;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden
      }

      #tab-broadcasts.tab-content {
        margin-inline: 0;
        max-width: none;
        width: 100%;
        background: var(--mr-bg);
        box-sizing: border-box
      }

      #tab-broadcasts.tab-content.active {
        display: flex !important;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        touch-action: pan-y
      }

      html.mr-mobile-ui #appWrap .main:has(#tab-broadcasts.active) {
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding-bottom: 0 !important
      }

      html.mr-mobile-ui #appWrap .content:has(#tab-broadcasts.active) {
        display: flex !important;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden !important
      }

      #tab-broadcasts .bc-page {
        flex: 1 1 auto;
        min-height: 0;
        height: 100%
      }

      #tab-broadcasts .bc-page-head {
        padding: 4px 10px 5px
      }

      #tab-broadcasts .bc-page-form {
        padding: 5px 10px 5px
      }

      #tab-broadcasts .bc-history {
        padding: 6px 10px 0
      }

      #tab-broadcasts .bc-history-list {
        min-height: 0;
        padding-bottom: calc(var(--mr-mob-bottom-nav-h, 56px) + 12px)
      }

      #tab-broadcasts .bc-textarea {
        min-height: 96px
      }

      #tab-workflow {
        font-size: 9px
      }

      #tab-workflow .wf-panel {
        padding: 0 !important;
        margin-bottom: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        width: 100%;
        max-width: 100%;
        box-shadow: none !important;
        background: var(--mr-bg) !important;
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column
      }

      #tab-workflow .wf-panel-banner {
        padding: 10px 8px 0;
        margin-bottom: 0;
        background: var(--mr-bg) !important;
        flex-shrink: 0;
        flex-grow: 0;
        border: none !important;
        border-bottom: none !important;
        position: relative;
        z-index: 100;
        overflow: hidden
      }

      #tab-workflow #wfMobTicketsHead:empty {
        display: none
      }

      #tab-workflow #ticketList > #wfMobTicketsHead:not(:empty) {
        display: block;
        flex-shrink: 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
        padding: 0;
        box-sizing: border-box;
        line-height: 0;
        background: var(--mr-bg);
        overflow: visible
      }

      #tab-workflow #ticketList > #wfMobTicketsHead .wf-tickets-table--mob-head thead th:first-child {
        border-radius: 0 12px 12px 0 !important
      }

      #tab-workflow #ticketList > #wfMobTicketsHead .wf-tickets-table--mob-head thead th:last-child {
        border-radius: 12px 0 0 12px !important
      }

      #tab-workflow #ticketList > #wfMobTicketsHead .wf-table-wrap--head {
        margin: 0;
        padding: 0;
        line-height: 0;
        overflow: hidden;
        box-sizing: border-box;
        width: 100%;
        scrollbar-width: none
      }

      #tab-workflow #ticketList > #wfMobTicketsHead .wf-table-wrap--head::-webkit-scrollbar {
        display: none
      }

      #tab-workflow #ticketList > #wfMobTicketsHead .wf-tickets-table--mob-head {
        display: table;
        margin: 0 !important;
        font-size: 13px;
        line-height: normal;
        vertical-align: top;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        width: 100% !important
      }

      #tab-workflow #ticketList > #wfMobTicketsHead .wf-tickets-table--mob-head thead th {
        background: var(--mr-surface) !important;
        opacity: 1 !important;
        height: 34px !important;
        padding: 2px 6px !important;
        border: 1px solid color-mix(in srgb, var(--mr-border) 88%, transparent) !important;
        border-bottom: 1px solid color-mix(in srgb, var(--mr-border) 88%, transparent) !important;
        box-shadow: 0 2px 10px rgba(15, 18, 36, 0.06) !important;
        box-sizing: border-box !important
      }

      #tab-workflow #ticketList > #wfMobTicketsHead .wf-tickets-table--mob-head thead th + th {
        border-inline-start: 1px solid color-mix(in srgb, var(--mr-border) 55%, transparent) !important
      }

      #tab-workflow #ticketList > #wfMobTicketsHead .wf-tickets-table--mob-head thead th:first-child {
        border-inline-end-color: color-mix(in srgb, var(--mr-border) 55%, transparent) !important
      }

      #tab-workflow #ticketList > #wfMobTicketsHead .wf-tickets-table--mob-head thead th:last-child {
        border-inline-start-color: color-mix(in srgb, var(--mr-border) 55%, transparent) !important
      }

      #tab-workflow .wf-tickets-table--mob-head,
      #tab-workflow .wf-tickets-table--mob-body {
        table-layout: fixed !important;
        width: 100% !important
      }

      #tab-workflow .wf-tickets-table--mob-body {
        border-collapse: separate !important;
        border-spacing: 0 10px !important
      }

      #tab-workflow #ticketList > #wfMobTicketsHead:not(:empty) + .wf-mob-tickets-body {
        margin-top: 0 !important;
        padding-top: 0 !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-head thead th {
        border-bottom: 1px solid var(--mr-border) !important
      }

      #tab-workflow #ticketList {
        flex: 1 1 auto;
        background: var(--mr-bg);
        min-height: 0;
        border: none !important;
        overflow: visible;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding-inline: 4px
      }

      #tab-workflow #ticketList > .wf-mob-tickets-body {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        box-sizing: border-box;
        padding-inline: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-x pan-y;
        padding-bottom: calc(var(--mr-mob-bottom-nav-h, 56px) + 16px);
        scrollbar-width: none;
        scrollbar-gutter: stable
      }

      #tab-workflow #ticketList > .wf-mob-tickets-body::-webkit-scrollbar {
        display: none
      }

      #tab-workflow #ticketList > .wf-mob-tickets-body .wf-table-wrap--body {
        margin: 0 !important;
        padding: 0 !important
      }

      #tab-workflow #ticketList .wf-table-wrap {
        overflow-x: auto !important;
        overflow-y: visible !important
      }

      #tab-workflow .wf-tickets-table--mob-head th.wf-col-ticket,
      #tab-workflow .wf-tickets-table--mob-head th.wf-col-emp,
      #tab-workflow .wf-tickets-table--mob-body td.wf-ticket-cell,
      #tab-workflow .wf-tickets-table--mob-body td.wf-col-emp {
        padding: 2px 4px 2px 2px !important;
        box-sizing: border-box !important
      }

      #tab-workflow .wf-tickets-table--mob-head th.wf-col-ticket,
      #tab-workflow .wf-tickets-table--mob-body td.wf-ticket-cell {
        width: 14% !important;
        min-width: 0 !important;
        max-width: 14% !important
      }

      #tab-workflow .wf-tickets-table--mob-body tr.wf-ticket-row--auto td.wf-ticket-cell {
        max-width: none !important;
        height: auto !important;
        min-height: 32px !important;
        max-height: none !important
      }

      #tab-workflow .wf-tickets-table--mob-body tbody tr.wf-ticket-row:first-child > td {
        height: auto !important;
        min-height: 32px !important;
        max-height: none !important
      }

      #tab-workflow .wf-tickets-table--mob-body .ticket-id-cell,
      #tab-workflow .wf-tickets-table--mob-body .ticket-id-cell--auto {
        max-height: none !important;
        overflow: visible !important;
        flex-direction: column !important;
        align-items: center !important
      }

      #tab-workflow .wf-table-wrap {
        border-inline: none;
        border-radius: 0;
        background: transparent !important;
        border: none !important
      }

      #tab-workflow .wf-panel-intro {
        margin-bottom: 10px
      }

      #tab-workflow .wf-panel-title {
        font-size: 15px !important;
        font-weight: 800 !important;
        line-height: 1.25
      }

      #tab-workflow .wf-panel-sub {
        display: none
      }

      #tab-workflow .toolbar.wf-toolbar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
        margin-bottom: 8px !important
      }

      #tab-workflow .wf-toolbar > * {
        width: auto !important;
        flex: none !important
      }

      #tab-workflow .wf-search.figma-search-wrap {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        height: 38px !important;
        padding: 0 10px 0 6px !important;
        gap: 8px !important;
        border-radius: 999px !important;
        background: var(--mr-surface) !important;
        border: 1px solid var(--mr-border) !important;
        box-shadow: 0 1px 2px rgba(15, 18, 36, 0.04)
      }

      #tab-workflow .figma-search-input {
        font-size: 11px !important;
        min-width: 0
      }

      #tab-workflow .figma-search-input::placeholder {
        font-size: 11px !important;
        color: var(--mr-text-2) !important;
        opacity: 1 !important
      }

      #tab-workflow .figma-search-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
        min-width: 28px !important;
        flex-shrink: 0;
        color: var(--mr-text-2) !important;
        opacity: 1 !important
      }

      #tab-workflow .wf-status-filter {
        flex: 0 0 36% !important;
        min-width: 118px !important;
        max-width: 44% !important;
        width: auto !important
      }

      #tab-workflow .wf-status-trigger {
        min-width: 0 !important;
        width: 100% !important;
        height: 38px !important;
        font-size: 11px !important;
        gap: 6px !important;
        padding: 0 10px !important;
        justify-content: flex-start !important;
        border-radius: 999px !important;
        background: var(--mr-surface) !important;
        border: 1px solid var(--mr-border) !important;
        box-shadow: 0 1px 2px rgba(15, 18, 36, 0.04)
      }

      #tab-workflow .wf-status-trigger__label {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px !important;
        text-align: start
      }

      #tab-workflow .wf-status-trigger__ico {
        width: 24px !important;
        height: 24px !important;
        font-size: 9px !important;
        flex-shrink: 0
      }

      #tab-workflow #wf-status-trigger .wf-status-trigger__chev {
        display: none !important;
      }

      /* الجوال: منتقي النظام الأصلي (نفس قائمة الدور في إضافة مستخدم) */
      #tab-workflow .wf-status-filter {
        position: relative;
      }

      #tab-workflow .wf-status-trigger {
        pointer-events: none;
      }

      #tab-workflow #wf-status.wf-status-select-native {
        position: absolute;
        inset: 0;
        z-index: 3;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        opacity: 0;
        clip: auto;
        overflow: visible;
        white-space: normal;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        -webkit-appearance: none;
        appearance: none;
        background: transparent;
        background-image: none;
        font-size: 16px;
      }

      #tab-workflow #wf-status-menu {
        display: none !important;
      }

      #tab-workflow .wf-count {
        font-size: 11px !important;
        margin: 0 0 6px !important;
        color: var(--mr-text) !important;
        opacity: 1 !important;
        line-height: 1.3
      }

      #tab-workflow .wf-count strong {
        color: var(--mr-text);
        font-weight: 700
      }

      #tab-workflow #wf-status-menu {
        border-radius: 12px;
        max-width: min(220px, 60vw) !important;
        min-width: 0 !important
      }

      #tab-workflow #wf-status-menu .wf-status-menu__scroll {
        padding: 5px;
        gap: 2px;
        min-width: 0 !important
      }

      #tab-workflow #wf-status-menu .wf-status-opt {
        padding: 7px 10px;
        font-size: 11px !important;
        border-radius: 10px;
        gap: 6px
      }

      #tab-workflow #wf-status-menu .wf-status-opt.is-active::before {
        width: 5px;
        height: 5px
      }

      #tab-workflow .wf-table-wrap {
        border-radius: 0;
        margin-top: 4px;
        padding-bottom: 4px
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
        border-collapse: separate !important;
        border-spacing: 0 10px !important;
        font-size: 10px !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-head thead th,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob thead th {
        height: 34px;
        padding: 2px 3px !important;
        font-size: 13px !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em;
        color: var(--mr-text) !important;
        background: var(--mr-surface) !important;
        background-color: var(--mr-surface) !important;
        opacity: 1 !important;
        border: 1px solid var(--mr-border) !important;
        border-bottom: none !important;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle !important;
        text-align: center !important;
        box-sizing: border-box;
        min-width: 0 !important;
        box-shadow: none !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob thead th+th {
        border-inline-start: 1px solid color-mix(in srgb, var(--mr-border) 52%, transparent) !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob thead th:first-child {
        border-inline-end-color: color-mix(in srgb, var(--mr-border) 52%, transparent) !important;
        border-radius: 0 12px 12px 0 !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob thead th:last-child {
        border-radius: 12px 0 0 12px !important;
        color: var(--mr-text) !important;
        opacity: 1 !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob thead tr > th.wf-col-violation {
        text-align: center !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob thead tr > th.wf-col-ticket,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob thead tr > th.wf-col-emp,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob thead tr > th.wf-col-violation,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob thead tr > th.wf-col-datetime,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob thead tr > th.wf-col-status,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob thead tr > th.wf-col-action {
        text-align: center !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob tbody tr.wf-ticket-row {
        height: auto
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob tbody tr.wf-ticket-row > td {
        height: auto !important;
        min-height: 44px !important;
        max-height: none !important;
        padding: 8px 6px !important;
        line-height: 1.45 !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        vertical-align: middle !important;
        background: var(--mr-surface) !important;
        border: 1px solid color-mix(in srgb, var(--mr-border) 88%, transparent) !important;
        border-top: 1px solid color-mix(in srgb, var(--mr-border) 88%, transparent) !important;
        border-bottom: 1px solid color-mix(in srgb, var(--mr-border) 88%, transparent) !important;
        box-shadow: 0 2px 10px rgba(15, 18, 36, 0.06)
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob tbody tr.wf-ticket-row > td.wf-ticket-cell {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        overflow: hidden !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob tbody tr.wf-ticket-row > td.wf-col-datetime {
        white-space: nowrap !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table tbody tr.wf-ticket-row {
        height: 40px
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table col.wf-col-emp-c,
      #tab-workflow .wf-panel .data-table.wf-tickets-table col.wf-col-viol-c {
        width: 0 !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob col.wf-col-emp-c {
        width: 26% !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob col.wf-col-viol-c {
        width: 22% !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob col.wf-col-branch-c,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob .wf-col-branch {
        display: none !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table col.wf-col-datetime-c {
        width: 0 !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob col.wf-col-datetime-c {
        width: 18% !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table col.wf-col-status-c {
        width: 22% !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob col.wf-col-status-c,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-head col.wf-col-status-c,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-body col.wf-col-status-c {
        width: 20% !important;
        max-width: 20% !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob col.wf-col-action-c,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-head col.wf-col-action-c,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-body col.wf-col-action-c {
        width: 8% !important;
        max-width: 8% !important
      }

      /* عرض موحّد: عناوين الجوال = صفوف المخالفات */
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-head col.wf-col-emp-c,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-body col.wf-col-emp-c,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-head th.wf-col-emp,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-body td.wf-col-emp {
        width: 26% !important;
        min-width: 0 !important;
        max-width: 26% !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-head col.wf-col-viol-c,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-body col.wf-col-viol-c,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-head th.wf-col-violation,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-body td.wf-col-violation {
        width: 22% !important;
        min-width: 0 !important;
        max-width: 22% !important;
        text-align: center !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-head col.wf-col-datetime-c,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-body col.wf-col-datetime-c,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-head th.wf-col-datetime,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-body td.wf-col-datetime {
        width: 18% !important;
        min-width: 0 !important;
        max-width: 18% !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-head col.wf-col-status-c,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-body col.wf-col-status-c {
        width: 20% !important;
        min-width: 0 !important;
        max-width: 20% !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-head th.wf-col-status {
        width: 20% !important;
        min-width: 0 !important;
        max-width: 20% !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table:not(.wf-tickets-table--mob):not(.wf-tickets-table--mob-head):not(.wf-tickets-table--mob-body) col.wf-col-action-c {
        width: 9% !important
      }

      #tab-workflow .wf-panel .data-table th,
      #tab-workflow .wf-panel .data-table td {
        white-space: normal !important;
        word-break: break-word;
        overflow-wrap: anywhere;
        vertical-align: middle !important;
        hyphens: auto;
        box-sizing: border-box;
        isolation: isolate
      }

      #tab-workflow .wf-panel .data-table thead th {
        padding: 3px 2px !important;
        font-size: 7px !important;
        line-height: 1.2;
        font-weight: 700;
        color: var(--mr-text) !important;
        opacity: 1 !important;
        background: var(--mr-primary-softer) !important;
        border-bottom: none !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-head thead th {
        font-size: 13px !important;
        line-height: 1.15 !important
      }

      #tab-workflow .wf-panel .data-table tbody td {
        font-size: 10px !important;
        font-weight: 600 !important;
        color: var(--mr-text) !important;
        opacity: 1 !important;
        background: var(--mr-surface) !important;
        border-top: 1px solid var(--mr-border) !important;
        border-bottom: 1px solid var(--mr-border) !important
      }

      #tab-workflow .wf-panel .data-table tbody tr td+td {
        border-inline-start: 1px solid color-mix(in srgb, var(--mr-border) 55%, transparent) !important
      }

      #tab-workflow .wf-panel .data-table tbody tr td:first-child {
        border-inline-end: 1px solid color-mix(in srgb, var(--mr-border) 55%, transparent) !important;
        border-radius: 0 12px 12px 0 !important
      }

      #tab-workflow .wf-panel .data-table tbody tr td:last-child {
        border-inline-start: 1px solid color-mix(in srgb, var(--mr-border) 55%, transparent) !important;
        border-radius: 12px 0 0 12px !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-body tbody tr.wf-ticket-row:active > td {
        background: color-mix(in srgb, var(--mr-primary) 5%, var(--mr-surface)) !important
      }

      #tab-workflow .wf-panel .data-table th:nth-child(1),
      #tab-workflow .wf-panel .data-table th.wf-col-ticket {
        width: 8% !important;
        padding: 2px 3px !important;
        text-align: center !important
      }

      #tab-workflow .wf-panel .data-table td.wf-ticket-cell {
        width: auto !important;
        min-width: 0 !important;
        max-width: 30% !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        text-align: start !important;
        vertical-align: middle !important;
        padding: 3px 4px !important;
        line-height: 1.2 !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob col.wf-col-ticket-c,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-head col.wf-col-ticket-c,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-body col.wf-col-ticket-c {
        width: 14% !important;
        max-width: 14% !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-head th.wf-col-ticket,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-body td.wf-ticket-cell,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob th.wf-col-ticket {
        width: 14% !important;
        min-width: 0 !important;
        max-width: 14% !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        line-height: 1.2 !important;
        overflow: visible !important;
        text-overflow: clip !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-head th.wf-col-emp {
        text-align: center !important;
        padding: 0 3px !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob td.wf-ticket-cell {
        width: 14% !important;
        min-width: 0 !important;
        max-width: 14% !important;
        overflow: hidden !important;
        padding: 2px 2px !important;
        text-align: center !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob tr.wf-ticket-row--auto td.wf-ticket-cell {
        min-width: 0 !important;
        max-width: 14% !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob .ticket-id-cell {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        direction: rtl !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob .ticket-id-cell--auto {
        gap: 5px !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob .wf-ticket-id {
        flex: 0 1 auto !important;
        min-width: 0;
        max-width: 100%;
        overflow: hidden !important;
        text-overflow: ellipsis;
        direction: ltr;
        unicode-bidi: embed;
        text-align: end
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob .ticket-id-cell--auto .wf-ticket-id {
        display: inline-block !important;
        font-size: 9px !important;
        line-height: 1.1
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob .ticket-id-cell--auto .wf-auto-flag {
        padding: 1px 2px 3px !important;
        min-width: 0 !important;
        font-size: 7px !important;
        line-height: 1 !important;
        gap: 2px;
        flex-shrink: 0;
        overflow: visible !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob .ticket-id-cell--auto .wf-auto-flag i {
        font-size: 7px !important
      }

      #tab-workflow .wf-panel .data-table:not(.wf-tickets-table--mob-head):not(.wf-tickets-table--mob-body) th:nth-child(2),
      #tab-workflow .wf-panel .data-table:not(.wf-tickets-table--mob-head):not(.wf-tickets-table--mob-body) th.wf-col-emp {
        width: 0 !important;
        white-space: nowrap !important;
        padding: 2px 3px !important;
        text-align: start !important
      }

      #tab-workflow .wf-panel .data-table td.wf-col-emp {
        width: 1px !important;
        min-width: 0 !important;
        max-width: min(30vw, 19ch) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis;
        text-align: right !important;
        vertical-align: middle !important;
        padding: 2px 3px !important;
        line-height: 1.1 !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-body td.wf-col-emp,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-head th.wf-col-emp {
        text-align: center !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-body td.wf-col-emp {
        padding: 2px 4px 2px 2px !important;
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        max-width: none !important;
        width: 28% !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob .wf-emp-cell {
        display: block !important;
        direction: rtl;
        width: 100%;
        max-width: 100%;
        text-align: center;
        overflow: hidden
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob .wf-emp-name {
        display: block;
        max-width: 100%;
        font-size: 10px !important;
        font-weight: 600;
        text-align: center;
        line-height: 1.25 !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob .wf-viol-cell {
        display: block;
        width: 100%;
        max-width: 100%;
        text-align: center !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob .wf-viol-name {
        font-size: 10px !important;
        font-weight: 700;
        text-align: center !important;
        line-height: 1.25 !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-body td.wf-col-violation {
        text-align: center !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        max-width: none !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob .wf-process-btn,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob .wf-process-btn--emp-reply,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob .wf-view-only {
        font-size: 9px !important
      }

      #tab-workflow .wf-panel .data-table:not(.wf-tickets-table--mob-head):not(.wf-tickets-table--mob-body) th:nth-child(3),
      #tab-workflow .wf-panel .data-table:not(.wf-tickets-table--mob-head):not(.wf-tickets-table--mob-body) th.wf-col-violation {
        width: 1px !important;
        white-space: nowrap !important;
        padding: 1px 2px !important;
        text-align: right !important
      }

      #tab-workflow .wf-panel .data-table:not(.wf-tickets-table--mob-body) td.wf-col-violation {
        width: 1px !important;
        min-width: 0 !important;
        max-width: min(26vw, 14ch) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis;
        text-align: right !important;
        vertical-align: middle !important;
        padding: 2px 3px !important;
        line-height: 1.1 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: manual !important
      }

      #tab-workflow .wf-panel .data-table th:nth-child(4),
      #tab-workflow .wf-panel .data-table th.wf-col-branch {
        width: 1px !important;
        white-space: nowrap !important;
        padding: 1px 2px !important;
        text-align: right !important
      }

      #tab-workflow .wf-panel .data-table td.wf-col-branch {
        width: 1px !important;
        min-width: min(18vw, 10ch) !important;
        max-width: min(42vw, 30ch) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis;
        text-align: right !important;
        vertical-align: middle !important;
        padding: 2px 4px !important;
        line-height: 1.1 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: manual !important
      }

      #tab-workflow .wf-panel .data-table:not(.wf-tickets-table--mob-head):not(.wf-tickets-table--mob-body) th:nth-child(5),
      #tab-workflow .wf-panel .data-table:not(.wf-tickets-table--mob-head) th.wf-col-datetime {
        width: 1px !important;
        min-width: 0 !important;
        max-width: min(34vw, 20ch) !important;
        white-space: nowrap !important;
        padding: 2px 3px !important;
        text-align: center !important
      }

      #tab-workflow .wf-panel .data-table:not(.wf-tickets-table--mob-body) td.wf-col-datetime {
        width: 1px !important;
        min-width: 0 !important;
        max-width: min(34vw, 20ch) !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip;
        text-align: center !important;
        vertical-align: middle !important;
        padding: 3px 4px !important;
        line-height: 1.15 !important;
        word-break: normal !important;
        overflow-wrap: normal !important
      }

      #tab-workflow .wf-datetime-stack {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        width: 100%;
        max-width: 100%;
        line-height: 1.2;
        white-space: nowrap;
        text-align: center;
        font-family: var(--font);
        font-size: 10px !important;
        color: var(--mr-text)
      }

      #tab-workflow .wf-datetime-stack__time {
        order: 1;
        display: inline-flex;
        flex-direction: row;
        direction: ltr;
        align-items: baseline;
        justify-content: center;
        gap: 3px;
        unicode-bidi: isolate;
        font-family: var(--font);
        font-size: 10px !important;
        line-height: 1.2;
        white-space: nowrap;
        color: var(--mr-text)
      }

      #tab-workflow .wf-time-hm {
        direction: ltr;
        unicode-bidi: embed;
        font-size: 10px !important;
        font-weight: 400;
        font-family: var(--font);
        color: var(--mr-text) !important;
        opacity: 1 !important;
        letter-spacing: 0
      }

      #tab-workflow .wf-time-ampm {
        font-size: 10px !important;
        font-weight: 400;
        font-family: var(--font);
        color: var(--mr-text) !important;
        opacity: 1 !important;
        line-height: 1.2
      }

      #tab-workflow .wf-datetime-stack__date {
        order: 2;
        display: block;
        width: 100%;
        text-align: center;
        font-family: var(--font);
        font-weight: 400;
        color: var(--mr-text) !important;
        opacity: 1 !important;
        font-size: 10px !important;
        line-height: 1.2;
        letter-spacing: 0
      }


      #tab-reports #reportList:not(.rp-mob-cols-ready) .rp-tickets-table--mob col.wf-col-ticket-c,
      #tab-reports #reportList:not(.rp-mob-cols-ready) > #rpMobTicketsHead .rp-tickets-table--mob col.wf-col-ticket-c {
        width: 12% !important;
        min-width: 0 !important;
        max-width: none !important
      }

      #tab-reports #reportList:not(.rp-mob-cols-ready) .rp-tickets-table--mob col.wf-col-emp-c,
      #tab-reports #reportList:not(.rp-mob-cols-ready) > #rpMobTicketsHead .rp-tickets-table--mob col.wf-col-emp-c {
        width: 18% !important;
        min-width: 0 !important;
        max-width: none !important
      }

      #tab-reports #reportList:not(.rp-mob-cols-ready) .rp-tickets-table--mob col.wf-col-viol-c,
      #tab-reports #reportList:not(.rp-mob-cols-ready) > #rpMobTicketsHead .rp-tickets-table--mob col.wf-col-viol-c {
        width: 22% !important;
        min-width: 0 !important;
        max-width: none !important
      }

      #tab-reports #reportList:not(.rp-mob-cols-ready) .rp-tickets-table--mob col.wf-col-branch-c,
      #tab-reports #reportList:not(.rp-mob-cols-ready) > #rpMobTicketsHead .rp-tickets-table--mob col.wf-col-branch-c {
        width: 20% !important;
        min-width: 0 !important;
        max-width: none !important
      }

      #tab-reports #reportList:not(.rp-mob-cols-ready) .rp-tickets-table--mob col.wf-col-datetime-c,
      #tab-reports #reportList:not(.rp-mob-cols-ready) > #rpMobTicketsHead .rp-tickets-table--mob col.wf-col-datetime-c {
        width: 16% !important;
        min-width: 0 !important;
        max-width: none !important
      }

      #tab-reports #reportList:not(.rp-mob-cols-ready) .rp-tickets-table--mob col.wf-col-status-c,
      #tab-reports #reportList:not(.rp-mob-cols-ready) > #rpMobTicketsHead .rp-tickets-table--mob col.wf-col-status-c {
        width: 12% !important;
        min-width: 0 !important;
        max-width: none !important
      }

      #tab-reports #reportList > #rpMobTicketsHead .wf-tickets-table--mob-head thead th.wf-col-datetime {
        padding: 2px 2px !important
      }

      #tab-reports #reportList .rp-tickets-table--mob td.wf-col-datetime {
        font-size: 8px !important;
        padding: 2px 2px !important;
        text-align: center !important;
        vertical-align: middle !important;
        white-space: nowrap !important
      }

      #tab-reports #reportList .rp-tickets-table--mob .wf-datetime-stack {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 38px !important;
        margin: 0 auto !important;
        padding: 0;
        font-size: 8px !important;
        line-height: 1.15 !important;
        font-family: var(--font) !important;
        white-space: nowrap;
        text-align: center !important;
        color: var(--mr-text)
      }

      #tab-reports #reportList .rp-tickets-table--mob .wf-datetime-stack__time {
        order: 1;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1px;
        width: 100% !important;
        max-width: 100%;
        margin: 0 auto;
        text-align: center !important;
        font-size: 8px !important;
        line-height: 1.15 !important;
        color: var(--mr-text);
        white-space: nowrap
      }

      #tab-reports #reportList .rp-tickets-table--mob .wf-datetime-stack__date,
      #tab-reports #reportList .rp-tickets-table--mob .wf-time-hm,
      #tab-reports #reportList .rp-tickets-table--mob .wf-time-ampm {
        font-size: 8px !important;
        font-family: var(--font) !important;
        font-weight: 400 !important;
        line-height: 1.15 !important;
        text-align: center !important
      }

      #tab-reports #reportList .rp-tickets-table--mob .wf-datetime-stack__date {
        order: 2;
        display: block !important;
        width: 100% !important;
        max-width: 100%;
        margin: 0 auto;
        text-align: center !important;
        direction: ltr;
        unicode-bidi: embed;
        color: var(--mr-text);
        white-space: nowrap
      }

      #tab-reports #reportList .rp-tickets-table--mob .wf-time-hm,
      #tab-reports #reportList .rp-tickets-table--mob .wf-time-ampm {
        display: inline-block;
        vertical-align: middle;
        text-align: center !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-head th.wf-col-datetime,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-body td.wf-col-datetime {
        padding: 2px 2px !important;
        text-align: center !important;
        overflow: hidden !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob .wf-datetime-stack {
        gap: 2px !important;
        max-width: 100%;
        font-size: 10px !important;
        line-height: 1.2 !important;
        font-family: var(--font) !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob .wf-datetime-stack__date {
        font-size: 10px !important;
        font-family: var(--font) !important;
        line-height: 1.2 !important;
        overflow: hidden;
        text-overflow: ellipsis
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob .wf-time-hm,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob .wf-time-ampm,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob .wf-datetime-stack__date {
        font-size: 10px !important;
        font-family: var(--font) !important;
        font-weight: 400 !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-head th.wf-col-status {
        padding: 4px 5px !important;
        text-align: center !important;
        overflow: visible !important;
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.3 !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-body td.wf-col-status {
        width: 20% !important;
        min-width: 0 !important;
        max-width: 20% !important;
        padding: 0 !important;
        text-align: center !important;
        overflow: hidden !important;
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.3 !important;
        vertical-align: middle !important;
        position: relative !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-body tbody tr.wf-ticket-row > td.wf-col-status {
        padding: 0 !important;
        overflow: hidden !important;
        position: relative !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-head th.wf-col-action,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-body td.wf-col-action,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob th.wf-col-action,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob td.wf-col-action {
        width: 8% !important;
        min-width: 0 !important;
        max-width: 8% !important;
        padding-inline: 2px !important
      }

      #tab-workflow .wf-panel .data-table:not(.wf-tickets-table--mob) th:nth-child(6),
      #tab-workflow .wf-panel .data-table:not(.wf-tickets-table--mob) td:nth-child(6) {
        width: 22% !important;
        min-width: 22% !important
      }

      #tab-workflow .wf-panel .data-table th.wf-col-action,
      #tab-workflow .wf-panel .data-table td.wf-col-action {
        width: 8% !important;
        max-width: 8% !important;
        padding-inline: 2px !important;
        text-align: center !important
      }

      #tab-workflow .wf-col-datetime,
      #tab-workflow .wf-datetime {
        font-size: 9px !important;
        line-height: 1.15;
        white-space: normal !important
      }

      #tab-workflow .wf-col-branch {
        font-size: 7px !important;
        line-height: 1.1
      }

      #tab-workflow .wf-branch-cell {
        display: inline-block;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        white-space: nowrap;
        line-height: 1.1;
        word-break: normal;
        overflow-wrap: normal;
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis
      }

      #tab-workflow .wf-emp-cell,
      #tab-workflow .wf-viol-cell {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        line-height: 1.6;
        vertical-align: middle;
        overflow: visible
      }

      #tab-workflow .wf-branch-name {
        display: block;
        max-width: 100%;
        margin: 0;
        padding: 0;
        font-size: 7px !important;
        font-weight: 700;
        color: var(--mr-text) !important;
        opacity: 1 !important;
        line-height: 1.6;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        overflow: visible;
        vertical-align: middle
      }

      #tab-workflow .wf-viol-name {
        display: block;
        max-width: 100%;
        margin: 0;
        padding: 0;
        font-size: 9px !important;
        font-weight: 700;
        color: var(--mr-text) !important;
        opacity: 1 !important;
        line-height: 1.6;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        overflow: visible;
        vertical-align: middle
      }

      #tab-workflow .wf-emp-name {
        display: block;
        max-width: 100%;
        margin: 0;
        padding: 0;
        font-size: 9px !important;
        font-weight: 700;
        color: var(--mr-text) !important;
        opacity: 1 !important;
        line-height: 1.6;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        overflow: visible;
        vertical-align: middle
      }

      #tab-workflow .wf-emp-num {
        display: none !important
      }

      #tab-workflow .wf-process-btn {
        padding: 1px 2px;
        font-size: 9px;
        font-weight: 700;
        line-height: 1.1;
        white-space: nowrap;
        max-width: 100%;
        border-radius: 4px;
        min-height: 0
      }

      #tab-workflow .wf-process-btn--emp-reply {
        font-size: 9px;
        line-height: 1.15;
        white-space: normal;
        word-break: break-word;
        hyphens: none;
        padding: 0;
        background: transparent !important;
        color: var(--mr-red) !important;
        border: none !important;
        border-radius: 0;
        font-weight: 700;
        width: 100%;
        height: 100%
      }

      #tab-workflow .wf-panel .data-table tbody tr.wf-ticket-row > td.wf-col-action:has(.wf-process-btn--emp-reply) {
        background: var(--mr-surface) !important;
        border: 1px solid var(--mr-border) !important;
        animation: empCellPulse 2s ease-in-out infinite
      }

      @keyframes empCellPulse {
        0%, 100% { box-shadow: inset 0 0 0 0 rgba(255, 0, 0, 0); }
        50% { box-shadow: inset 0 0 14px 4px rgba(255, 0, 0, 0.3); }
      }

      #tab-workflow .wf-view-only {
        font-size: 9px;
        font-weight: 600;
        color: var(--mr-text-2) !important;
        opacity: 1 !important
      }

      #tab-workflow .wf-ticket-cell {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-align: start !important;
        color: var(--mr-text) !important;
        width: 1%;
        max-width: min(28vw, 14ch)
      }

      #tab-workflow .ticket-id-cell {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: center;
        gap: 5px;
        direction: rtl;
        white-space: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0;
        padding: 0;
        vertical-align: middle;
        color: var(--mr-text);
        line-height: 1.4
      }

      #tab-workflow .wf-ticket-id {
        display: block !important;
        flex: none;
        margin: 0;
        padding: 0;
        font-size: 11px !important;
        line-height: 1.1;
        font-weight: 800;
        color: var(--mr-text) !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        direction: ltr;
        unicode-bidi: embed;
        text-align: center;
        visibility: visible;
        opacity: 1
      }

      #tab-workflow .wf-ticket-cell .overdue-flag {
        margin: 0;
        padding: 1px 2px 3px !important;
        font-size: 7px !important;
        line-height: 1 !important;
        gap: 3px;
        border-radius: 4px;
        flex-shrink: 0;
        color: #fff !important;
        background: var(--mr-red) !important;
        display: inline-flex !important;
        align-items: center;
        visibility: visible !important;
        opacity: 1 !important;
        min-width: max-content;
        white-space: nowrap
      }

      #tab-workflow .wf-ticket-cell .overdue-flag__txt {
        display: inline !important;
        visibility: visible !important;
        color: #fff !important;
        font-size: inherit !important;
        font-weight: 700
      }

      #tab-workflow .badge {
        font-size: 9px !important;
        padding: 1px 3px !important;
        line-height: 1.2;
        white-space: nowrap !important;
        border-radius: 4px;
        display: inline-block;
        margin: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob .badge {
        font-size: 9px !important;
        line-height: 1.35;
        white-space: normal !important;
        word-break: break-word !important;
        font-weight: 700
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob-body td.wf-col-status .badge {
        padding: 2px 3px !important;
        overflow: hidden;
        max-width: none;
        border-radius: 12px 0 0 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        text-align: center !important;
        vertical-align: middle
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob .ticket-id-cell,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob .ticket-id-cell--auto {
        max-height: none;
        overflow: visible;
        flex-direction: column !important;
        align-items: center !important
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob .wf-emp-cell,
      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob .wf-viol-cell {
        max-height: none;
        overflow: visible
      }

      #tab-workflow .wf-panel .data-table.wf-tickets-table--mob .wf-datetime-stack {
        max-height: none;
        overflow: hidden
      }

      #tab-workflow .overdue-flag {
        font-size: 7px;
        padding: 1px 2px 3px;
        border-radius: 4px;
        line-height: 1;
        display: inline-flex;
        flex-shrink: 0;
        white-space: nowrap
      }

      #tab-workflow .overdue-flag i {
        display: inline-block !important;
        font-size: 7px !important;
        flex-shrink: 0;
        opacity: 1 !important
      }

      /* مودال التذكرة — جوال */
      #ticketModal .modal-header {
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 10px;
        padding-block: 0 2px !important;
        padding-inline: 12px 10px !important;
        overflow: visible !important
      }

      #ticketModal .td-header-main {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        max-width: calc(100% - 44px) !important;
        overflow: visible !important
      }

      #ticketModal .td-header-actions {
        margin-inline-start: auto !important;
        flex-shrink: 0 !important;
        align-self: flex-start !important;
        margin-block-start: -1px !important
      }

      #ticketModal .td-print-btn {
        transform: translateY(-5px) !important
      }

      #ticketModal .modal-header h3,
      #ticketModal .td-header-main h3 {
        font-size: 15px !important;
        margin: 0 !important;
        flex: 0 0 auto !important
      }

      #ticketModal .td-header-main .badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        font-size: 11px !important;
        padding-block: 4px !important;
        padding-inline: 10px 9px !important;
        line-height: 1.25 !important;
        box-sizing: border-box !important
      }

      #ticketModal .td-header-actions .td-close-btn {
        display: none !important
      }

      #ticketModal .modal-card.modal-detail.td-mob-sheet {
        overflow: hidden !important
      }

      #ticketModal .td-content-area {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y
      }

      #ticketModal .td-sheet-grabber-wrap {
        display: flex !important;
        justify-content: center;
        width: 100%;
        padding: 8px 0 4px;
        cursor: grab;
        touch-action: none
      }

      #ticketModal .td-sheet-drag-zone {
        flex-shrink: 0;
        cursor: grab;
        touch-action: none
      }

      #ticketModal .td-sheet-drag-zone:active {
        cursor: grabbing
      }

      #ticketModal .td-tabs {
        flex-shrink: 0
      }

      #ticketModal .td-pane.active {
        display: block;
        width: 100%;
        box-sizing: border-box
      }

      #violDetailModal .viol-paper-sheet-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y
      }

      #ticketModal .td-content-area {
        --td-detail-pad-x: 14px;
        padding: 10px var(--td-detail-pad-x) 14px
      }

      #ticketModal #tdp-workflow.td-pane,
      #ticketModal #tdp-logs.td-pane {
        padding: 10px 0
      }

      #ticketModal .log-item--compose {
        margin-inline: 0
      }

      #ticketModal .log-item--compose .ticket-resp-input {
        height: 38px !important;
        min-height: 38px !important;
        max-height: 64px !important;
        font-size: 16px !important;
        padding: 0 !important;
        line-height: 1.35 !important;
        resize: none !important;
        overflow-y: auto !important
      }

      #ticketModal .log-item--compose .log-compose-attach-label {
        font-size: 13px !important
      }

      #ticketModal .info-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: baseline !important;
        gap: 0 !important;
        padding: 8px 0 !important
      }

      #ticketModal #tdInlineAttachments {
        margin-top: 0 !important
      }

      #ticketModal .td-att-section-head {
        margin-top: 0 !important;
        padding: 8px 0 !important;
        border-bottom: 1px dashed var(--border) !important
      }

      #ticketModal .info-label {
        font-size: 12px !important;
        font-weight: 700 !important;
        white-space: nowrap !important
      }

      #ticketModal .info-label::after {
        content: ' :';
        margin-inline: 2px 4px
      }

      #ticketModal .info-value {
        font-size: 12px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        text-align: start !important
      }

      #ticketModal .td-tabs {
        padding: 6px 10px;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
      }

      #ticketModal .td-tab {
        font-size: 11px;
        padding: 7px 10px;
        flex-shrink: 0;
        white-space: nowrap
      }

      #ticketModal .wf-steps {
        --wf-circle-size: 28px;
        --wf-step-gap: 12px;
        --wf-step-pad-y: 10px;
        --wf-steps-pad-x: 10px;
        --wf-steps-pad-y: 12px
      }

      #ticketModal .wf-steps--snake {
        --wf-snake-cols: 2;
        gap: 10px 6px;
        padding: 12px 8px
      }

      #ticketModal .wf-step--snake .wf-step-label {
        font-size: 11px
      }

      #ticketModal .wf-step--snake .wf-step-sub {
        font-size: 9px
      }

      #ticketModal .wf-step-circle {
        font-size: 12px
      }

      #ticketModal .countdown-card {
        padding: 10px 12px 8px;
        margin-top: 0;
        margin-bottom: 6px;
        gap: 6px;
        border-radius: 12px
      }

      #ticketModal .countdown-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 10px;
        row-gap: 5px;
        align-items: start
      }

      #ticketModal .countdown-meta {
        grid-column: 1;
        grid-row: 1;
        align-items: flex-start
      }

      #ticketModal .countdown-clock-wrapper {
        display: contents
      }

      #ticketModal .countdown-clock {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: start;
        padding: 5px 9px;
        border-radius: 10px;
        gap: 2px;
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mr-border) 80%, transparent)
      }

      #ticketModal .cd-ok .countdown-clock {
        background: color-mix(in srgb, var(--green) 11%, var(--mr-bg));
        border-color: color-mix(in srgb, var(--green) 24%, var(--mr-border))
      }

      #ticketModal .cd-warn .countdown-clock {
        background: color-mix(in srgb, var(--amber) 11%, var(--mr-bg));
        border-color: color-mix(in srgb, var(--amber) 24%, var(--mr-border))
      }

      #ticketModal .cd-danger .countdown-clock {
        background: color-mix(in srgb, var(--red) 11%, var(--mr-bg));
        border-color: color-mix(in srgb, var(--red) 24%, var(--mr-border))
      }

      #ticketModal .countdown-clock .cd-num {
        font-size: 16px;
        font-weight: 800;
        min-width: 20px
      }

      #ticketModal .countdown-clock .cd-sep {
        font-size: 12px;
        opacity: 0.42
      }

      #ticketModal .countdown-deadline {
        display: none !important
      }

      #ticketModal .countdown-titles strong {
        font-size: 11.5px;
        line-height: 1.35
      }

      #ticketModal .countdown-sub {
        font-size: 9.5px;
        line-height: 1.3
      }

      #ticketModal .countdown-icon-wrap {
        width: 30px;
        height: 30px;
        font-size: 12px;
        border-radius: 9px
      }

      #ticketModal #tdInfo .countdown-card + .td-info-rows .info-row:first-child {
        padding-top: 2px !important
      }

      #ticketModal .countdown-progress {
        margin-top: 2px
      }

      #ticketModal .att-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px
      }

      #ticketModal .att-card .att-name {
        display: none !important
      }

      #ticketModal .att-thumb {
        margin-bottom: 0
      }

      /* أنواع المخالفات — جوال: خلفية موحّدة + قائمة */
      .main:has(#tab-violations.active) {
        padding-inline: 0 !important;
        padding-block: 2px !important;
        background: var(--mr-bg) !important
      }

      .content:has(#tab-violations.active) {
        padding: 0 !important;
        background: var(--mr-bg) !important;
        overflow: hidden !important;
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column
      }

      #appWrap .main:has(#tab-violations.active) {
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0
      }

      #tab-violations.tab-content,
      #tab-violations .panel,
      #tab-violations .viol-grid--mob-list {
        background: var(--mr-bg) !important
      }

      #tab-violations.tab-content.active {
        display: flex !important;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden
      }

      #tab-violations .panel {
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden
      }

      #tab-violations .panel-header {
        padding: 12px 14px 10px !important;
        margin: 0 !important;
        background: var(--mr-bg) !important;
        border: none !important;
        border-bottom: 1px solid var(--mr-border) !important;
        border-radius: 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        flex-shrink: 0
      }

      #tab-violations .wf-panel-banner {
        padding: 18px 14px 0 !important;
        margin: 0 !important;
        background: var(--mr-bg) !important;
        border: none !important;
        border-bottom: none !important;
        border-radius: 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        flex-shrink: 0
      }

      #tab-violations .wf-panel-banner .wf-panel-intro {
        margin-bottom: 0 !important
      }

      #tab-violations .wf-panel-banner .wf-panel-sub {
        margin-top: 6px !important;
        margin-bottom: 0 !important;
        font-family: var(--font);
        font-size: 13px;
        font-weight: 500;
        color: var(--mr-text-2);
        letter-spacing: 0;
        line-height: 1.45
      }

      #tab-violations .viol-types-meta-row {
        flex-shrink: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 4px 14px 10px;
        margin: 0;
        background: var(--mr-bg);
        border-bottom: 1px solid var(--mr-border)
      }

      #tab-violations .viol-types-meta-row .wf-count {
        margin: 0;
        font-size: 12px;
        line-height: 1.35
      }

      #tab-violations .viol-types-toolbar {
        margin: 0;
        margin-inline-start: auto
      }

      #tab-violations .viol-types-toolbar:has(#violTypesAddBtn[data-role-hide]) {
        display: none
      }

      #tab-violations .wf-desk-tickets-host {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden
      }

      #tab-violations .mr-users-list-wrap:has(.viol-grid--mob-list) {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: var(--mr-bg) !important
      }

      #tab-violations .panel-header .btn {
        width: 100% !important;
        justify-content: center !important
      }

      #tab-violations .viol-grid--mob-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: none !important;
        flex: 1 1 auto;
        min-height: 0;
        height: 0;
        overflow-y: auto !important;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        overscroll-behavior-y: contain;
        align-items: stretch
      }

      #tab-violations .viol-grid--mob-list > .viol-type-list-item,
      #tab-violations .viol-grid--mob-list > .empty,
      #tab-violations #violGrid.viol-grid--mob-list > .viol-type-list-item,
      #tab-violations #violGrid.viol-grid--mob-list > .empty {
        flex: 0 0 auto;
        flex-shrink: 0;
        min-height: min-content
      }

      #tab-violations .viol-grid--mob-list .viol-type-list-item {
        touch-action: pan-y
      }

      html.mr-mobile-ui.mr-viol-tab-active body.mirsad-app-active #appWrap .main {
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        padding: 0 !important
      }

      html.mr-mobile-ui.mr-viol-tab-active body.mirsad-app-active #appWrap .main .content {
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        max-width: none !important;
        margin: 0 !important
      }

      html.mr-mobile-ui.mr-viol-tab-active #tab-violations.tab-content.active {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 0 !important;
        overflow: hidden !important
      }

      html.mr-mobile-ui.mr-viol-tab-active #tab-violations .panel.wf-panel {
        padding: 0 !important;
        margin: 0 !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important
      }

      html.mr-mobile-ui.mr-viol-tab-active #tab-violations #violDeskHost {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important
      }

      html.mr-mobile-ui.mr-viol-tab-active #tab-violations #violDeskHost > .mr-users-list-wrap {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: var(--mr-bg) !important
      }

      html.mr-mobile-ui.mr-viol-tab-active #tab-violations #violGrid.viol-grid--mob-list {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior-y: contain;
        padding-bottom: 0 !important
      }

      #tab-violations .viol-type-list-item {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 12px 14px;
        border: none;
        border-bottom: 1px solid var(--mr-border);
        border-radius: 0;
        background: var(--mr-bg);
        box-shadow: none;
        box-sizing: border-box;
        cursor: pointer;
        transition: background 0.15s ease
      }

      #tab-violations .viol-type-list-item:active {
        background: var(--mr-primary-softer)
      }

      #tab-violations .viol-grid--mob-list .viol-type-list-item:first-child {
        border-top: 1px solid var(--mr-border)
      }

      #tab-violations .viol-grid--mob-list .viol-type-list-item:last-child {
        border-bottom: 1px solid var(--mr-border)
      }

      #tab-violations .viol-type-list-ico {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 17px
      }

      #tab-violations .viol-type-list-ico.mr-viol-thumb-low {
        background: rgba(0, 122, 255, 0.12);
        color: #007aff
      }

      #tab-violations .viol-type-list-ico.mr-viol-thumb-mid {
        background: rgba(255, 195, 0, 0.16);
        color: #c9a000
      }

      #tab-violations .viol-type-list-ico.mr-viol-thumb-high {
        background: rgba(255, 0, 0, 0.12);
        color: #e00000
      }

      #tab-violations .viol-type-list-content {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px
      }

      #tab-violations .viol-type-list-title {
        font-size: 14px;
        font-weight: 700;
        color: var(--mr-text);
        line-height: 1.3
      }

      #tab-violations .viol-type-list-desc {
        font-size: 11px;
        color: var(--mr-text-3);
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden
      }

      #tab-violations .viol-type-list-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-top: 2px
      }

      #tab-violations .viol-type-list-meta .mr-sev {
        font-size: 10px;
        padding: 3px 9px
      }

      #tab-violations .viol-type-list-meta .mr-points {
        font-size: 11px;
        color: var(--mr-text) !important
      }

      #tab-violations .viol-type-list-meta .mr-points i {
        color: var(--mr-amber) !important
      }

      #tab-violations .mr-viol-type-card .mr-points,
      #tab-violations .mr-viol-foot .mr-points {
        color: var(--mr-text) !important
      }

      #tab-violations .mr-points i {
        color: var(--mr-amber) !important
      }

      #tab-violations .viol-type-list-end {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px
      }

      #tab-violations .viol-type-list-admin {
        display: flex;
        gap: 4px
      }

      #tab-violations .viol-type-list-admin .mr-viol-act {
        width: 30px;
        height: 30px;
        border: 0;
        border-radius: 8px;
        background: var(--mr-surface);
        color: var(--mr-text-2);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer
      }

      #tab-violations .viol-type-list-chev {
        width: 28px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--mr-text-3);
        font-size: 12px
      }

      #tab-violations .viol-types-empty {
        padding: 40px 16px;
        background: var(--mr-bg);
        grid-column: unset !important
      }

      /* ── المستخدمون — جوال (مثل أنواع المخالفات) ── */
      #tab-departments .users-io-mob-wrap,
      #tab-departments .users-add-btn {
        display: none
      }

      #tab-departments .users-meta-row {
        display: none
      }

      @media (min-width: 993px), (hover: hover) and (pointer: fine) {
        html.mr-desktop-ui #tab-departments .users-meta-row {
          display: block;
          padding: 0 clamp(14px, 1.6vw, 18px) 12px;
          margin: 0
        }

        html.mr-desktop-ui #tab-departments .users-meta-row .wf-count {
          margin: 0
        }
      }

      @media (max-width: 992px) and (pointer: coarse) {
        .content:has(#tab-departments.active) {
          padding: 0 !important;
          background: var(--mr-bg) !important;
          overflow: hidden !important;
          flex: 1 1 auto;
          min-height: 0;
          display: flex;
          flex-direction: column
        }

        #appWrap .main:has(#tab-departments.active) {
          overflow: hidden !important;
          display: flex;
          flex-direction: column;
          flex: 1 1 auto;
          min-height: 0
        }

        #tab-departments.tab-content.active {
          display: flex !important;
          flex-direction: column;
          flex: 1 1 auto;
          min-height: 0;
          overflow: hidden
        }

        #tab-departments .panel.wf-panel {
          padding: 0 !important;
          margin: 0 !important;
          border: none !important;
          border-radius: 0 !important;
          box-shadow: none !important;
          background: var(--mr-bg) !important;
          flex: 1 1 auto;
          min-height: 0;
          display: flex;
          flex-direction: column;
          overflow: hidden
        }

        #tab-departments .users-panel-banner {
          padding: 18px 14px 0 !important;
          margin: 0 !important;
          background: var(--mr-bg) !important;
          border: none !important;
          border-radius: 0 !important;
          flex-shrink: 0
        }

        #tab-departments .users-panel-banner .wf-panel-sub {
          margin-top: 6px !important;
          margin-bottom: 0 !important
        }

        #tab-departments #usersDeskHost {
          flex: 1 1 auto;
          min-height: 0;
          display: flex;
          flex-direction: column;
          overflow: hidden
        }

        #tab-departments .users-controls {
          flex-shrink: 0;
          background: var(--mr-bg)
        }

        #tab-departments .users-filters-row {
          padding: 4px 14px 6px;
          border-bottom: none
        }

        #tab-departments .users-filters-toolbar {
          flex-direction: row !important;
          flex-wrap: nowrap !important;
          align-items: center !important;
          gap: 6px !important;
          margin-bottom: 0 !important;
          width: 100% !important
        }

        #tab-departments .users-filters-toolbar.toolbar > * {
          width: auto !important;
          flex: 0 0 auto !important
        }

        #tab-departments .users-filters-toolbar .wf-search,
        #tab-departments .users-filters-toolbar .figma-search-wrap {
          flex: 1 1 0 !important;
          min-width: 0 !important;
          width: auto !important;
          max-width: none !important
        }

        #tab-departments .users-filters-toolbar .figma-search-wrap {
          height: 38px;
          padding: 0 8px 0 4px;
          gap: 6px
        }

        #tab-departments .users-filters-toolbar .figma-search-input {
          min-height: 38px;
          font-size: 11px;
          min-width: 0
        }

        #tab-departments .users-filters-toolbar .figma-search-input::placeholder {
          font-size: 9px;
          opacity: 1;
          letter-spacing: -0.01em
        }

        #tab-departments .users-filters-toolbar .figma-search-btn {
          width: 32px;
          min-width: 32px;
          height: 32px;
          flex-shrink: 0
        }

        #tab-departments .users-filters-toolbar .user-role-dd {
          flex: 0 0 auto !important;
          width: auto !important;
          min-width: 0 !important;
          max-width: none !important
        }

        #tab-departments .users-filters-toolbar .user-role-dd .wf-status-trigger {
          width: var(--user-role-dd-fixed-w, 128px) !important;
          min-width: var(--user-role-dd-fixed-w, 128px);
          max-width: var(--user-role-dd-fixed-w, 128px);
          height: 38px;
          gap: 3px;
          padding-block: 0;
          padding-inline-start: 3px;
          padding-inline-end: 5px;
          justify-content: center;
          align-items: center;
          box-sizing: border-box
        }

        #tab-departments .users-filters-toolbar .user-role-dd .wf-status-trigger__ico {
          width: 20px;
          height: 20px;
          font-size: 9px;
          flex: 0 0 20px;
          margin: 0
        }

        #tab-departments .users-filters-toolbar .user-role-dd .wf-status-trigger__label {
          display: block;
          font-size: 10px;
          flex: 1 1 auto;
          min-width: 0;
          max-width: none;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: center;
          line-height: 1.2
        }

        #tab-departments .users-filters-toolbar .user-role-dd .wf-status-trigger__chev {
          display: none
        }

        #user-role-dd-menu.open .wf-status-menu__scroll {
          width: 100% !important;
          min-width: 0 !important;
          max-width: none !important;
          box-sizing: border-box
        }

        #user-role-dd-menu.open .wf-status-opt {
          white-space: normal;
          text-align: center;
          font-size: 10px;
          line-height: 1.25;
          padding: 7px 4px;
          justify-content: center
        }

        #tab-departments .users-io-mob-wrap {
          flex: 0 0 auto !important;
          width: auto !important;
          display: block;
          position: relative;
          z-index: 620
        }

        #tab-departments .users-filters-toolbar .users-io-mob-wrap {
          flex: 0 0 auto !important;
          width: auto !important;
          display: block;
          position: relative;
          z-index: 620
        }

        #tab-departments .users-filters-toolbar .users-io-more-btn {
          min-height: 38px;
          height: 38px;
          width: 38px;
          padding: 0;
          font-size: 12px;
          white-space: nowrap;
          justify-content: center
        }

        #tab-departments .users-filters-toolbar .users-io-more-btn span {
          display: none
        }

        #tab-departments .users-io-group--desk {
          display: none !important
        }

        #tab-departments .users-meta-row {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          padding: 4px 14px 10px;
          margin: 0;
          border-bottom: 1px solid var(--mr-border);
          background: var(--mr-bg)
        }

        #tab-departments .users-meta-row .wf-count {
          margin: 0;
          font-size: 12px;
          line-height: 1.35
        }

        #tab-departments .users-meta-actions {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-inline-start: auto
        }

        #tab-departments .users-add-btn {
          display: inline-flex;
          min-height: 38px;
          white-space: nowrap
        }

        #tab-departments .users-io-menu,
        #usersIoMenu {
          position: fixed;
          z-index: 9000;
          width: max-content;
          min-width: 0;
          max-width: min(168px, calc(100vw - 16px));
          padding: 4px;
          background: var(--mr-surface);
          border: 1px solid var(--mr-border);
          border-radius: 12px;
          box-shadow: var(--mr-shadow-card);
          display: none;
          flex-direction: column;
          gap: 2px
        }

        #tab-departments .users-io-menu:not([hidden]),
        #usersIoMenu:not([hidden]) {
          display: flex
        }

        #tab-departments .users-io-menu-item,
        #usersIoMenu .users-io-menu-item {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          width: auto;
          min-width: 0;
          padding: 8px 10px;
          border: 0;
          border-radius: 8px;
          background: transparent;
          color: var(--mr-text);
          font-family: var(--font);
          font-size: 12px;
          font-weight: 600;
          cursor: pointer;
          text-align: right;
          white-space: nowrap
        }

        #tab-departments .users-io-menu-item:active,
        #usersIoMenu .users-io-menu-item:active {
          background: var(--mr-primary-softer)
        }

        #tab-departments .mr-users-list-wrap:has(.users-grid--mob-list) {
          flex: 1 1 auto;
          min-height: 0;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          border: none !important;
          box-shadow: none !important;
          padding: 0 !important;
          margin: 0 !important;
          background: var(--mr-bg) !important
        }

        #tab-departments .users-grid--mob-list {
          display: flex !important;
          flex-direction: column !important;
          gap: 12px !important;
          padding: 12px 14px !important;
          padding-bottom: calc(var(--mr-mob-bottom-nav-h, 56px) + 12px) !important;
          margin: 0 !important;
          width: 100% !important;
          max-width: none !important;
          flex: 1 1 auto;
          min-height: 0;
          height: 0;
          overflow-y: auto !important;
          overflow-x: hidden;
          -webkit-overflow-scrolling: touch;
          touch-action: pan-y;
          overscroll-behavior-y: contain;
          background: var(--mr-bg);
          align-items: stretch
        }

        #tab-departments .users-grid--mob-list > .user-mob-card,
        #tab-departments .users-grid--mob-list > .empty {
          flex: 0 0 auto;
          flex-shrink: 0;
          min-height: min-content
        }

        #tab-departments .user-mob-card {
          position: relative;
          width: 100%;
          padding: 14px;
          border: 1px solid var(--mr-border);
          border-radius: 16px;
          background: var(--mr-surface);
          box-shadow: var(--mr-shadow-soft);
          box-sizing: border-box;
          text-align: right;
          overflow: hidden;
          height: auto
        }

        #tab-departments .user-mob-card:active {
          background: color-mix(in srgb, var(--mr-primary) 6%, var(--mr-surface))
        }

        #tab-departments .user-mob-card__role {
          position: absolute;
          top: 0;
          inset-inline-start: 0;
          display: inline-flex;
          align-items: center;
          padding: 6px 12px;
          border-radius: 0;
          border-end-end-radius: 14px;
          font-size: 12px;
          font-weight: 700;
          line-height: 1.2;
          color: var(--rc, var(--mr-primary));
          background: color-mix(in srgb, var(--rc, var(--mr-primary)) 16%, transparent);
          border: none;
          border-bottom: 1px solid color-mix(in srgb, var(--rc, var(--mr-primary)) 24%, transparent);
          border-inline-end: 1px solid color-mix(in srgb, var(--rc, var(--mr-primary)) 24%, transparent);
          max-width: 75%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          z-index: 1
        }

        #tab-departments .user-mob-card__head {
          min-width: 0;
          padding-inline-start: 0;
          padding-inline-end: 82px;
          padding-top: 20px
        }

        #tab-departments .user-mob-card__main {
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 8px
        }

        #tab-departments .user-mob-card__name {
          margin: 0;
          font-size: 16px;
          font-weight: 700;
          color: var(--mr-text);
          line-height: 1.35;
          letter-spacing: -0.02em;
          overflow-wrap: anywhere
        }

        #tab-departments .user-mob-card__rows {
          list-style: none;
          margin: 0;
          padding: 0;
          display: flex;
          flex-direction: column;
          gap: 7px
        }

        #tab-departments .user-mob-card__row {
          display: flex;
          align-items: flex-start;
          gap: 10px;
          font-size: 12px;
          font-weight: 500;
          color: var(--mr-text-2);
          line-height: 1.4
        }

        #tab-departments .user-mob-card__row i {
          flex: 0 0 16px;
          width: 16px;
          margin-top: 2px;
          text-align: center;
          color: var(--mr-text-3);
          font-size: 13px
        }

        #tab-departments .user-mob-card__row span {
          min-width: 0;
          overflow-wrap: anywhere
        }

        #tab-departments .user-mob-card__row--plain {
          gap: 0
        }

        #tab-departments .user-mob-card__actions {
          display: flex;
          justify-content: flex-end;
          gap: 6px;
          margin-top: 12px;
          padding-top: 10px;
          border-top: 1px solid var(--mr-border)
        }

        #tab-departments .user-list-admin {
          display: flex;
          gap: 4px
        }

        #tab-departments .user-list-admin .mr-viol-act {
          width: 30px;
          height: 30px;
          border: 0;
          border-radius: 8px;
          background: var(--mr-bg-2);
          color: var(--mr-text-2);
          display: inline-flex;
          align-items: center;
          justify-content: center;
          cursor: pointer
        }

        #tab-departments .users-empty-mob {
          padding: 40px 16px;
          background: var(--mr-bg);
          text-align: center
        }
      }

      html.mr-mobile-ui.mr-users-tab-active body.mirsad-app-active #appWrap .main {
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        padding: 0 !important
      }

      html.mr-mobile-ui.mr-users-tab-active body.mirsad-app-active #appWrap .main .content {
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        max-width: none !important;
        margin: 0 !important
      }

      html.mr-mobile-ui.mr-users-tab-active #tab-departments.tab-content.active {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 0 !important;
        overflow: hidden !important
      }

      html.mr-mobile-ui.mr-users-tab-active #tab-departments .panel.wf-panel {
        padding: 0 !important;
        margin: 0 !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important
      }

      html.mr-mobile-ui.mr-users-tab-active #tab-departments #usersDeskHost {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important
      }

      html.mr-mobile-ui.mr-users-tab-active #tab-departments #usersDeskHost > .mr-users-list-wrap {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: var(--mr-bg) !important
      }

      html.mr-mobile-ui.mr-users-tab-active #tab-departments #usersList.users-grid--mob-list {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior-y: contain
      }

      /* المناطق والفروع — جوال: صفحة كاملة + بطاقات للمناطق/الفروع */
      @media (max-width: 992px) and (pointer: coarse) {
        .content:has(#tab-locations.active) {
          padding: 0 !important;
          background: var(--mr-bg) !important;
          overflow: hidden !important;
          flex: 1 1 auto;
          min-height: 0;
          display: flex;
          flex-direction: column
        }

        #appWrap .main:has(#tab-locations.active) {
          overflow: hidden !important;
          display: flex;
          flex-direction: column;
          flex: 1 1 auto;
          min-height: 0
        }

        #tab-locations.tab-content.active {
          display: flex !important;
          flex-direction: column;
          flex: 1 1 auto;
          min-height: 0;
          overflow: hidden;
          background: var(--mr-bg) !important
        }

        #tab-locations .panel.wf-panel {
          padding: 0 !important;
          margin: 0 !important;
          border: none !important;
          border-radius: 0 !important;
          box-shadow: none !important;
          background: var(--mr-bg) !important;
          flex: 1 1 auto;
          min-height: 0;
          display: flex;
          flex-direction: column;
          overflow: hidden
        }

        #tab-locations .rb-locations-page-banner {
          padding: 18px 14px 0 !important;
          margin: 0 !important;
          background: var(--mr-bg) !important;
          border: none !important;
          border-radius: 0 !important;
          flex-shrink: 0
        }

        #tab-locations .rb-locations-page-banner .wf-panel-sub {
          margin-top: 6px !important;
          margin-bottom: 0 !important;
          font-size: 13px;
          color: var(--mr-text-2)
        }

        #tab-locations .rb-locations-page-banner .rb-drill-summary {
          margin-top: 10px !important
        }

        #tab-locations .toolbar.wf-toolbar.rb-toolbar {
          padding: 8px 14px 6px !important;
          margin: 0 !important;
          flex-direction: column !important;
          align-items: stretch !important;
          gap: 8px !important
        }

        #tab-locations .rb-search-combo.cmp-neo-search-combo {
          width: 100% !important;
          min-height: 42px !important
        }

        #tab-locations .rb-search-combo .cmp-neo-search-combo__field {
          min-height: 40px !important;
          padding-inline: 12px 8px !important
        }

        #tab-locations .rb-toolbar .rp-tool-btn {
          width: 100% !important;
          min-height: 48px !important;
          justify-content: center
        }

        #tab-locations .wf-count {
          padding: 0 14px 10px !important;
          margin: 0 !important;
          font-size: 12px !important;
          color: var(--mr-text-2) !important;
          flex-shrink: 0
        }

        #tab-locations #regionsDeskHost {
          flex: 1 1 auto;
          min-height: 0;
          display: flex;
          flex-direction: column;
          overflow: hidden
        }

        #tab-locations .mr-users-list-wrap.wf-table-wrap {
          flex: 1 1 auto;
          min-height: 0;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          border: none !important;
          border-radius: 0 !important;
          box-shadow: none !important;
          background: var(--mr-bg) !important;
          padding: 0 !important
        }

        #tab-locations .rb-regions-scroll {
          flex: 1 1 auto;
          min-height: 0;
          overflow-y: auto !important;
          overflow-x: hidden !important;
          -webkit-overflow-scrolling: touch !important;
          touch-action: pan-y !important;
          overscroll-behavior-y: contain;
          padding: 4px 14px calc(var(--mr-mob-bottom-nav-h, 56px) + 20px) !important;
          background: var(--mr-bg) !important
        }

        #tab-locations .rb-regions-scroll > .empty {
          min-height: 160px;
          border: none !important;
          box-shadow: none !important;
          background: transparent !important
        }
      }

      html.mr-mobile-ui.mr-locations-tab-active body.mirsad-app-active #appWrap .main {
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        padding: 0 !important
      }

      html.mr-mobile-ui.mr-locations-tab-active body.mirsad-app-active #appWrap .main .content {
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        max-width: none !important;
        margin: 0 !important
      }

      html.mr-mobile-ui.mr-locations-tab-active #tab-locations.tab-content.active {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 0 !important;
        overflow: hidden !important
      }

      html.mr-mobile-ui.mr-locations-tab-active #tab-locations .panel.wf-panel {
        padding: 0 !important;
        margin: 0 !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important
      }

      html.mr-mobile-ui.mr-locations-tab-active #tab-locations #regionsDeskHost {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important
      }

      html.mr-mobile-ui.mr-locations-tab-active #tab-locations .mr-users-list-wrap.wf-table-wrap {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: var(--mr-bg) !important
      }

      html.mr-mobile-ui.mr-locations-tab-active #tab-locations .rb-regions-scroll {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior-y: contain
      }

      /* تقييم الموظفين / الامتثال — جوال: تمرير داخلي + مسافة فوق الشريط السفلي */
      .main:has(#tab-compliance.active) {
        padding-inline: 0 !important;
        padding-block: 0 !important;
        background: var(--mr-bg) !important
      }

      .content:has(#tab-compliance.active) {
        padding: 0 !important;
        background: var(--mr-bg) !important;
        overflow: hidden !important;
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column
      }

      #appWrap .main:has(#tab-compliance.active) {
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        padding-bottom: 0 !important
      }

      #tab-compliance.tab-content,
      #tab-compliance .cmp-neo-board,
      #tab-compliance .mk-cmp-grid--emp,
      #tab-compliance .cmp-neo-grid {
        background: var(--mr-bg) !important
      }

      #tab-compliance.tab-content.active {
        display: flex !important;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden
      }

      #tab-compliance #cmpBoard {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden
      }

      #tab-compliance .cmp-neo-board {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding-inline: 12px;
        padding-top: 12px;
        box-sizing: border-box
      }

      #tab-compliance .cmp-neo-board-head,
      #tab-compliance .cmp-neo-toolbar,
      #tab-compliance .cmp-neo-search-meta,
      #tab-compliance .cmp-neo-extremes,
      #tab-compliance .active-filters-bar {
        flex-shrink: 0
      }

      #tab-compliance .cmp-neo-board-head {
        margin-bottom: 8px !important
      }

      #tab-compliance .cmp-neo-title-wrap h3 {
        font-size: 16px !important;
        line-height: 1.3 !important
      }

      #tab-compliance .cmp-neo-toolbar.toolbar.wf-toolbar,
      html.mr-mobile-ui #tab-compliance .cmp-neo-toolbar.toolbar.wf-toolbar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
        box-sizing: border-box !important
      }

      #tab-compliance .cmp-neo-toolbar.toolbar.wf-toolbar > * {
        width: auto !important;
        flex: none !important;
        min-width: 0 !important
      }

      #tab-compliance .cmp-neo-search-combo {
        flex: 1 1 0 !important;
        grid-column: unset !important;
        grid-row: unset !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        gap: 6px !important;
        align-items: center !important
      }

      #tab-compliance .cmp-neo-search-combo:focus-within {
        border-color: transparent !important;
        box-shadow: none !important
      }

      #tab-compliance .cmp-neo-search-combo .cmp-neo-search-combo__field,
      html.mr-mobile-ui #tab-compliance .cmp-neo-search-combo .cmp-neo-search-combo__field {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100% !important;
        min-height: 42px !important;
        height: 42px !important;
        border: 1px solid var(--mr-border) !important;
        border-radius: 14px !important;
        background: var(--mr-bg) !important;
        padding: 0 14px !important;
        gap: 10px !important;
        box-shadow: 0 1px 2px rgba(15, 18, 36, 0.04) !important
      }

      #tab-compliance .cmp-neo-search-combo .cmp-neo-search-combo__field:focus-within {
        border-color: var(--mr-primary) !important;
        box-shadow: 0 0 0 4px var(--mr-primary-soft) !important
      }

      #tab-compliance .cmp-neo-search-combo .figma-search-input,
      html.mr-mobile-ui #tab-compliance .cmp-neo-search-combo .figma-search-input {
        min-height: 42px !important;
        font-size: 14px !important;
        min-width: 0 !important;
        flex: 1 1 auto !important
      }

      #tab-compliance .cmp-neo-search-combo .figma-search-input::placeholder {
        font-size: 11px !important;
        opacity: 0.6 !important;
        letter-spacing: -0.01em !important
      }

      #tab-compliance .cmp-neo-search-combo .figma-search-btn {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        flex-shrink: 0 !important
      }

      #tab-compliance .cmp-neo-back--combo,
      html.mr-mobile-ui #tab-compliance .cmp-neo-back--combo {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 1px solid var(--mr-border) !important;
        border-radius: 12px !important;
        background: var(--mr-surface) !important;
        box-shadow: 0 1px 3px rgba(15, 18, 36, 0.05) !important;
        justify-content: center !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        gap: 0 !important
      }

      #tab-compliance .cmp-neo-back--combo:hover {
        background: var(--mr-surface) !important;
        border-color: var(--mr-border-2) !important;
        color: var(--mr-text) !important;
        box-shadow: 0 2px 8px rgba(15, 18, 36, 0.06) !important
      }

      #tab-compliance .cmp-neo-back--combo .cmp-neo-back__text {
        display: none !important
      }

      #tab-compliance .cmp-neo-back--combo .cmp-neo-back__ico {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        border: none !important;
        border-radius: 50% !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--mr-text-2) !important;
        font-size: 14px !important
      }

      #tab-compliance .cmp-neo-back--combo:hover .cmp-neo-back__ico {
        background: transparent !important;
        color: var(--mr-text) !important;
        box-shadow: none !important
      }

      [data-theme="dark"] #tab-compliance .cmp-neo-back--combo {
        background: rgba(255, 255, 255, 0.05) !important;
        border-color: var(--mr-border-2) !important;
        box-shadow: none !important
      }

      [data-theme="dark"] #tab-compliance .cmp-neo-back--combo:hover {
        background: rgba(255, 255, 255, 0.08) !important;
        border-color: color-mix(in srgb, var(--mr-primary) 28%, var(--mr-border-2)) !important
      }

      #tab-compliance .cmp-neo-toolbar #cmpNeoDateWrap,
      #tab-compliance .cmp-neo-toolbar .rp-date-wrap {
        grid-column: unset !important;
        grid-row: unset !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important
      }

      #tab-compliance .cmp-neo-toolbar .wf-status-filter,
      html.mr-mobile-ui #tab-compliance .cmp-neo-toolbar .wf-status-filter {
        grid-column: unset !important;
        grid-row: unset !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: min(32vw, 120px) !important
      }

      #tab-compliance .cmp-neo-toolbar #cmp-filter-trigger.wf-status-trigger,
      html.mr-mobile-ui #tab-compliance .cmp-neo-toolbar #cmp-filter-trigger.wf-status-trigger {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 42px !important;
        min-height: 42px !important;
        gap: 8px !important;
        padding: 0 10px !important;
        justify-content: flex-start !important;
        border-radius: 12px !important;
        background: var(--mr-surface) !important;
        border: 1px solid var(--mr-border) !important;
        box-shadow: 0 1px 2px rgba(15, 18, 36, 0.04) !important
      }

      #tab-compliance .cmp-neo-toolbar #cmp-filter-trigger .wf-status-trigger__label {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 10px !important;
        text-align: start !important
      }

      #tab-compliance .cmp-neo-toolbar #cmp-filter-trigger .wf-status-trigger__ico {
        width: 20px !important;
        height: 20px !important;
        font-size: 9px !important;
        flex: 0 0 20px !important
      }

      #tab-compliance .cmp-neo-toolbar #cmp-filter-trigger .wf-status-trigger__chev {
        display: none !important
      }

      #tab-compliance #cmp-filter-dd.wf-status-filter {
        position: relative
      }

      #tab-compliance #cmp-filter-trigger.wf-status-trigger {
        pointer-events: none
      }

      #tab-compliance #cmp-filter-scope.wf-status-select-native {
        position: absolute;
        inset: 0;
        z-index: 3;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        opacity: 0;
        clip: auto;
        overflow: visible;
        white-space: normal;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        -webkit-appearance: none;
        appearance: none;
        background: transparent;
        background-image: none;
        font-size: 16px
      }

      #tab-compliance #cmp-filter-menu.wf-status-menu {
        display: none !important
      }

      #tab-compliance .cmp-neo-toolbar .rp-tool-btn.cmp-neo-btn--pdf-export {
        display: none !important
      }

      #tab-compliance .cmp-neo-toolbar .rp-date-btn,
      html.mr-mobile-ui #tab-compliance .cmp-neo-toolbar .rp-date-btn {
        min-height: 42px !important;
        height: 42px !important;
        width: 42px !important;
        min-width: 42px !important;
        padding: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 12px !important;
        border: 1px solid var(--mr-border) !important;
        background: var(--mr-surface) !important;
        color: var(--mr-text-2) !important;
        box-shadow: 0 1px 3px rgba(15, 18, 36, 0.05) !important
      }

      #tab-compliance .cmp-neo-toolbar .rp-date-btn:hover {
        background: var(--mr-surface) !important;
        border-color: var(--mr-border-2) !important;
        color: var(--mr-text) !important;
        box-shadow: 0 2px 8px rgba(15, 18, 36, 0.06) !important
      }

      [data-theme="dark"] #tab-compliance .cmp-neo-toolbar .rp-date-btn {
        background: rgba(255, 255, 255, 0.05) !important;
        border-color: var(--mr-border-2) !important;
        box-shadow: none !important;
        color: var(--mr-text-2) !important
      }

      [data-theme="dark"] #tab-compliance .cmp-neo-toolbar .rp-date-btn:hover {
        background: rgba(255, 255, 255, 0.08) !important;
        border-color: color-mix(in srgb, var(--mr-primary) 28%, var(--mr-border-2)) !important;
        color: var(--mr-text) !important
      }

      #tab-compliance .cmp-neo-toolbar .rp-date-btn #cmp-date-label {
        display: none !important
      }

      #tab-compliance .cmp-neo-toolbar .rp-date-btn i {
        margin: 0 !important
      }

      #tab-compliance .cmp-neo-search-meta {
        margin: 0 0 8px !important;
        font-size: 12px !important
      }

      #tab-compliance .cmp-neo-extremes {
        margin-bottom: 14px !important;
        gap: 8px !important
      }

      #tab-compliance .cmp-neo-extreme {
        padding: 8px 9px !important;
        gap: 6px !important;
        min-width: 0 !important;
        border-radius: 14px !important
      }

      #tab-compliance .cmp-neo-extreme__icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important
      }

      #tab-compliance .cmp-neo-extreme__body {
        min-width: 0 !important
      }

      #tab-compliance .cmp-neo-extreme__lbl {
        font-size: 9px !important;
        margin-bottom: 1px !important;
        line-height: 1.2 !important
      }

      #tab-compliance .cmp-neo-extreme__name {
        font-size: 10px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important
      }

      #tab-compliance .cmp-neo-extreme__sub {
        display: none !important
      }

      #tab-compliance .cmp-neo-extreme__score {
        font-size: 11px !important;
        flex-shrink: 0 !important
      }

      #tab-compliance .mk-cmp-grid--emp,
      #tab-compliance .cmp-neo-grid,
      #tab-compliance .cmp-neo-pending-wrap {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        grid-template-columns: none !important;
        flex: 1 1 auto;
        min-height: 0;
        height: 0;
        overflow-y: auto !important;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        overscroll-behavior-y: contain;
        padding-top: 8px !important;
        padding-bottom: calc(var(--mr-mob-bottom-nav-h, calc(56px + env(safe-area-inset-bottom, 0px))) + 24px) !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: none !important
      }

      #tab-compliance .mk-cmp-grid--emp > .mk-cmp-emp-card,
      #tab-compliance .cmp-neo-grid > .cmp-neo-card {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: unset !important;
        flex: 0 0 auto !important;
        overflow: hidden !important;
        border-radius: 22px !important
      }

      #tab-compliance .mk-cmp-emp-card__chips {
        flex: 0 0 auto !important;
        min-height: unset !important
      }

      #tab-compliance .mk-cmp-emp-card__stats {
        flex-shrink: 0 !important;
        margin: 0 10px 10px !important;
      }

      #tab-compliance .mk-cmp-emp-card__ft {
        flex-shrink: 0 !important;
        border-bottom-left-radius: 21px !important;
        border-bottom-right-radius: 21px !important;
        padding: 9px 14px 11px !important;
        font-size: 10px !important
      }

      html.mr-mobile-ui.mr-cmp-tab-active body.mirsad-app-active #appWrap .main {
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        padding: 0 !important
      }

      html.mr-mobile-ui.mr-cmp-tab-active body.mirsad-app-active #appWrap .main .content {
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        max-width: none !important;
        margin: 0 !important
      }

      html.mr-mobile-ui.mr-cmp-tab-active #tab-compliance.tab-content.active {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 0 !important;
        overflow: hidden !important
      }

      html.mr-mobile-ui.mr-cmp-tab-active #tab-compliance #cmpBoard {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important
      }

      html.mr-mobile-ui.mr-cmp-tab-active #tab-compliance .cmp-neo-board {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important
      }

      html.mr-mobile-ui.mr-cmp-tab-active #tab-compliance .mk-cmp-grid--emp,
      html.mr-mobile-ui.mr-cmp-tab-active #tab-compliance .cmp-neo-grid,
      html.mr-mobile-ui.mr-cmp-tab-active #tab-compliance .cmp-neo-pending-wrap {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior-y: contain;
        padding-top: 8px !important;
        padding-bottom: calc(var(--mr-mob-bottom-nav-h, calc(56px + env(safe-area-inset-bottom, 0px))) + 24px) !important
      }

      /* تعريف المخالفة — bottom sheet ينزلق خلف شريط التنقل ويلتصق بحافته السفلية */
      #violDetailModal.modal {
        z-index: 2400 !important;
        display: none;
        padding: 0 !important;
        padding-bottom: var(--viol-sheet-bottom, var(--mr-mob-bottom-nav-h, 56px)) !important;
        box-sizing: border-box;
        background: transparent !important;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.28s ease
      }

      #violDetailModal.modal.open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: var(--viol-sheet-bottom, var(--mr-mob-bottom-nav-h, 56px));
        background: color-mix(in srgb, var(--mr-primary) 42%, transparent);
        pointer-events: none;
        z-index: 0
      }

      [data-theme="dark"] #violDetailModal.modal.open::before {
        background: rgba(0, 0, 0, 0.62)
      }

      #appWrap > .app-shell > #violDetailModal.modal {
        z-index: 2400 !important
      }

      #appWrap > .app-shell > #mobileBottomNav.mobile-bottom-nav {
        z-index: 2900 !important
      }

      #violDetailModal.modal.open {
        display: block !important;
        opacity: 1;
        pointer-events: auto
      }

      #violDetailModal.modal.sheet-closing {
        opacity: 0
      }

      #violDetailModal .viol-paper-sheet {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: var(--mob-chrome-bottom, var(--viol-sheet-bottom, var(--mr-mob-bottom-nav-h, calc(56px + env(safe-area-inset-bottom, 0px))))) !important;
        pointer-events: auto;
        z-index: 1;
        width: 100% !important;
        max-width: 100% !important;
        max-height: min(
          82dvh,
          calc(
            100dvh - var(--unified-topbar-h, 76px) - var(--mob-chrome-bottom, var(--viol-sheet-bottom, var(--mr-mob-bottom-nav-h, 56px))) - 8px
          )
        ) !important;
        height: auto !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        border-bottom: none !important;
        background: var(--mr-surface) !important;
        color: var(--mr-text);
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        box-sizing: border-box;
        padding-bottom: 0;
        transform: translateY(100%);
        transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1), bottom 0.22s ease, max-height 0.22s ease;
        will-change: transform;
        box-shadow: none
      }

      #violDetailModal .viol-paper-sheet-head {
        background: var(--mr-surface) !important;
        border-bottom-color: var(--mr-border) !important
      }

      #violDetailModal .viol-paper-sheet-body {
        background: var(--mr-surface);
        color: var(--mr-text)
      }

      #violDetailModal .viol-paper-note {
        background: var(--mr-bg) !important;
        border-color: var(--mr-border) !important;
        color: var(--mr-text-2) !important
      }

      #violDetailModal .viol-paper-note strong {
        color: var(--mr-text) !important
      }

      #violDetailModal.modal.sheet-ready .viol-paper-sheet {
        transform: translateY(0)
      }

      #violDetailModal.modal.sheet-dragging .viol-paper-sheet {
        transition: none !important
      }

      #violDetailModal .viol-sheet-grabber-wrap {
        display: flex
      }

      #violDetailModal .viol-paper-sheet-head {
        flex-shrink: 0;
        cursor: grab;
        touch-action: none
      }

      #violDetailModal .viol-paper-sheet-head:active {
        cursor: grabbing
      }

      #violDetailModal .viol-paper-sheet-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y
      }

      #violDetailModal .viol-paper-meta {
        align-items: center !important
      }

      /* تفاصيل التذكرة — bottom sheet ملء الشاشة (تغطي الشريط السفلي) */
      body.ticket-sheet-open #ticketModal.modal {
        padding-bottom: 0 !important
      }

      body.ticket-sheet-open #ticketModal.modal.open::before {
        bottom: 0 !important
      }

      body.ticket-sheet-open #ticketModal .td-mob-sheet {
        bottom: 0 !important
      }

      #ticketModal.modal {
        z-index: 3200 !important;
        display: none;
        padding: 0 !important;
        padding-bottom: 0 !important;
        box-sizing: border-box;
        background: transparent !important;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.28s ease
      }

      #ticketModal.modal.open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: color-mix(in srgb, var(--mr-primary) 42%, transparent);
        pointer-events: none;
        z-index: 0
      }

      [data-theme="dark"] #ticketModal.modal.open::before {
        background: rgba(0, 0, 0, 0.62)
      }

      #appWrap > .app-shell > #ticketModal.modal {
        z-index: 3200 !important
      }

      body.ticket-over-cmp #ticketModal.modal.open {
        z-index: 3100 !important
      }

      body.ticket-over-cmp #cmpDetailModal.modal.open {
        z-index: 1050 !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important
      }

      /* فوق الامتثال: الورقة فوق الشريط السفلي — والشريط يبقى ظاهراً */
      body.ticket-over-cmp #ticketModal.modal {
        padding-bottom: 0 !important
      }

      body.ticket-over-cmp #ticketModal.modal.open::before {
        bottom: 0 !important;
        background: rgba(15, 23, 42, 0.38) !important
      }

      body.ticket-over-cmp #ticketModal .td-mob-sheet {
        top: var(--ticket-sheet-top, var(--unified-topbar-h, calc(76px + env(safe-area-inset-top, 0px)))) !important;
        bottom: 0 !important;
        padding-bottom: 0;
        max-height: none !important;
        height: auto !important
      }

      /* تذكرة من صفحة التنبيهات — الشريط السفلي مخفي: الورقة تمتد لأسفل الشاشة */
      html.mr-notif-page-active.mr-mobile-ui #ticketModal.modal,
      body.ticket-over-notif #ticketModal.modal {
        padding-bottom: 0 !important;
        z-index: 3100 !important
      }

      html.mr-notif-page-active.mr-mobile-ui #ticketModal.modal.open::before,
      body.ticket-over-notif #ticketModal.modal.open::before {
        bottom: 0 !important;
        background: rgba(15, 23, 42, 0.42) !important
      }

      [data-theme="dark"] html.mr-notif-page-active.mr-mobile-ui #ticketModal.modal.open::before,
      [data-theme="dark"] body.ticket-over-notif #ticketModal.modal.open::before {
        background: rgba(0, 0, 0, 0.58) !important
      }

      html.mr-notif-page-active.mr-mobile-ui #ticketModal .td-mob-sheet,
      body.ticket-over-notif #ticketModal .td-mob-sheet {
        top: var(--notif-ticket-sheet-top, calc(env(safe-area-inset-top, 0px) + 112px)) !important;
        bottom: 0 !important;
        max-height: none !important;
        height: auto !important;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-radius: 16px 16px 0 0 !important
      }

      body.ticket-over-notif.ticket-keyboard-open #ticketModal .td-mob-sheet {
        top: auto !important;
        max-height: var(--ticket-kb-max-h, 82dvh) !important
      }

      html.mr-notif-page-active.mr-mobile-ui #ticketModal .td-content-area,
      body.ticket-over-notif #ticketModal .td-content-area {
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px))
      }

      body.ticket-scroll-locked {
        overflow: hidden !important
      }

      body.cmp-detail-open html.mr-mobile-ui.mr-cmp-tab-active #tab-compliance .mk-cmp-grid--emp,
      body.cmp-detail-open html.mr-mobile-ui.mr-cmp-tab-active #tab-compliance .cmp-neo-grid,
      body.cmp-detail-open html.mr-mobile-ui.mr-cmp-tab-active #tab-compliance .cmp-neo-pending-wrap {
        overflow: hidden !important;
        touch-action: none !important;
        overscroll-behavior: none !important;
        pointer-events: none !important
      }

      body.mob-resp-keyboard-open #appWrap > .app-shell > #mobileBottomNav.mobile-bottom-nav {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.22s ease, visibility 0.22s ease !important
      }

      body.ticket-keyboard-open #ticketModal .td-mob-sheet {
        top: var(--ticket-sheet-top, var(--unified-topbar-h, calc(76px + env(safe-area-inset-top, 0px)))) !important;
        bottom: 0 !important;
        max-height: var(--ticket-kb-max-h, min(
          82dvh,
          calc(100dvh - var(--unified-topbar-h, 76px) - 8px)
        )) !important;
        height: auto !important
      }

      body.viol-keyboard-open #violDetailModal .viol-paper-sheet {
        max-height: var(--viol-kb-max-h, min(
          82dvh,
          calc(100dvh - var(--unified-topbar-h, 76px) - var(--mob-chrome-bottom, var(--mr-mob-bottom-nav-h, 56px)) - 8px)
        )) !important
      }

      #ticketModal .ticket-resp-search {
        align-items: flex-start;
        min-height: 48px;
        height: auto;
        border-radius: 18px;
        padding: 4px 6px 4px 14px
      }

      #ticketModal .log-item--compose .ticket-resp-input {
        height: 38px !important;
        min-height: 38px !important;
        max-height: 64px !important;
        font-size: 16px !important;
        padding: 0 !important;
        line-height: 1.35 !important;
        resize: none !important;
        overflow-y: auto !important
      }

      #ticketModal .log-item--compose .log-compose-attach-label {
        font-size: 13px !important
      }

      #ticketModal .ticket-resp-input:focus {
        border-color: transparent !important;
        box-shadow: none !important
      }

      #ticketModal .ticket-resp-search:focus-within {
        border-color: var(--mr-primary) !important;
        box-shadow: 0 0 0 4px var(--mr-primary-soft) !important
      }

      [data-theme="dark"] body.ticket-over-cmp #ticketModal.modal.open::before {
        background: rgba(0, 0, 0, 0.48) !important
      }

      body.ticket-over-cmp #cmpDetailModal .modal-card.cmp-detail-card .modal-body {
        overflow: hidden !important;
        touch-action: none
      }

      #ticketModal .td-content-area {
        scrollbar-width: none;
        -ms-overflow-style: none
      }

      #ticketModal .td-content-area::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0
      }

      #ticketModal.modal.open {
        display: block !important;
        opacity: 1;
        pointer-events: auto
      }

      #ticketModal.modal.sheet-closing {
        opacity: 0
      }

      #ticketModal .td-mob-sheet {
        position: fixed !important;
        top: var(--ticket-sheet-top, var(--unified-topbar-h, calc(76px + env(safe-area-inset-top, 0px)))) !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        pointer-events: auto;
        z-index: 1;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        border-bottom: none !important;
        background: var(--mr-surface) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        box-sizing: border-box;
        transform: translateY(100%);
        transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1);
        will-change: transform;
        box-shadow: 0 -8px 32px rgba(15, 18, 36, 0.12)
      }

      #ticketModal.modal.sheet-ready .td-mob-sheet {
        transform: translateY(0)
      }

      #ticketModal.modal.sheet-dragging .td-mob-sheet {
        transition: none !important
      }

      #ticketModal .td-sheet-drag-zone .modal-header {
        border-bottom: 1px solid var(--mr-border);
        padding-top: 0 !important;
        padding-bottom: 2px !important;
        justify-content: flex-start !important
      }

      /* التقارير — بطاقات الإحصاء والبحث والفلتر من يمين ويسار إلى الحافة */
      .main:has(#tab-reports.active) {
        padding-inline: 0 !important;
        padding-block: 2px !important;
        background: var(--mr-bg) !important
      }

      .content:has(#tab-reports.active) {
        padding-inline: 0 !important;
        padding-block: 0 !important;
        max-width: 100% !important;
        background: var(--mr-bg) !important;
        overflow: hidden !important;
        overflow-x: hidden !important;
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column
      }

      #appWrap:has(#tab-reports.active),
      #appWrap .app-body:has(#tab-reports.active) {
        overflow-x: hidden !important;
        max-width: 100% !important
      }

      #appWrap .main:has(#tab-reports.active) {
        overflow: hidden !important;
        overflow-x: hidden !important;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important
      }

      #tab-reports.tab-content {
        margin-inline: 0;
        max-width: none;
        width: 100%;
        background: var(--mr-bg);
        box-sizing: border-box;
        --rp-scroll-pad-bottom: calc(var(--mr-mob-bottom-nav-h, calc(56px + env(safe-area-inset-bottom, 0px))) + 4px)
      }

      #tab-reports.tab-content.active {
        display: flex !important;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        overflow-x: hidden !important;
        max-width: 100% !important;
        touch-action: pan-y
      }

      #tab-reports .wf-panel {
        padding: 0 !important;
        margin-bottom: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        width: 100%;
        max-width: 100%;
        box-shadow: none !important;
        background: var(--mr-bg) !important;
        flex: 1 1 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow-x: hidden !important
      }

      #tab-reports .wf-panel-banner {
        padding: 10px 12px 6px;
        margin-bottom: 0;
        background: var(--mr-bg) !important;
        flex-shrink: 0;
        flex-grow: 0;
        border: none !important;
        position: relative;
        z-index: 100;
        overflow-x: hidden;
        overflow-y: visible
      }

      #tab-reports .wf-panel-banner:has(+ #reportList > #rpMobTicketsHead:not(:empty)) {
        padding-bottom: 0;
        overflow: visible
      }

      #tab-reports .wf-panel-banner:has(+ #reportList > #rpMobTicketsHead:not(:empty)) .wf-count {
        margin-bottom: 6px !important
      }

      #tab-reports #reportList > #rpMobTicketsHead:empty {
        display: none
      }

      #tab-reports #reportList > #rpMobTicketsHead:not(:empty) {
        display: block;
        flex-shrink: 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
        padding: 0;
        box-sizing: border-box;
        line-height: 0;
        background: var(--mr-bg);
        overflow: visible
      }

      #tab-reports #reportList > #rpMobTicketsHead .wf-tickets-table--mob-head thead th:first-child {
        border-radius: 0 12px 12px 0 !important
      }

      #tab-reports #reportList > #rpMobTicketsHead .wf-tickets-table--mob-head thead th:last-child {
        border-radius: 12px 0 0 12px !important
      }

      #tab-reports #reportList > #rpMobTicketsHead .wf-table-wrap--head {
        margin: 0;
        padding: 0;
        line-height: 0;
        overflow: hidden;
        box-sizing: border-box;
        width: 100%;
        scrollbar-width: none
      }

      #tab-reports #reportList > #rpMobTicketsHead .wf-table-wrap--head::-webkit-scrollbar {
        display: none
      }

      #tab-reports #reportList > #rpMobTicketsHead .wf-tickets-table--mob-head {
        display: table;
        margin: 0 !important;
        font-size: 10px;
        line-height: 1.25;
        vertical-align: top;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        width: 100% !important;
        table-layout: fixed !important
      }

      #tab-reports #reportList > #rpMobTicketsHead .wf-tickets-table--mob-head thead th {
        background: var(--mr-surface) !important;
        opacity: 1 !important;
        height: 34px !important;
        padding: 2px 6px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        color: var(--mr-text) !important;
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        text-align: center !important;
        vertical-align: middle !important;
        border: 1px solid color-mix(in srgb, var(--mr-border) 88%, transparent) !important;
        border-bottom: 1px solid color-mix(in srgb, var(--mr-border) 88%, transparent) !important;
        box-shadow: 0 2px 10px rgba(15, 18, 36, 0.06) !important;
        box-sizing: border-box !important
      }

      #tab-reports #reportList > #rpMobTicketsHead .wf-tickets-table--mob-head thead th + th {
        border-inline-start: 1px solid color-mix(in srgb, var(--mr-border) 55%, transparent) !important
      }

      #tab-reports #reportList > #rpMobTicketsHead .wf-tickets-table--mob-head thead th:first-child {
        border-inline-end: 1px solid color-mix(in srgb, var(--mr-border) 55%, transparent) !important
      }

      #tab-reports #reportList > #rpMobTicketsHead .wf-tickets-table--mob-head thead th:last-child {
        border-inline-start: 1px solid color-mix(in srgb, var(--mr-border) 55%, transparent) !important
      }

      #tab-reports #reportList > #rpMobTicketsHead:not(:empty) + .wf-mob-tickets-body {
        margin-top: 0 !important;
        padding-top: 0 !important
      }

      #tab-reports #reportList {
        flex: 1 1 0;
        background: var(--mr-bg);
        min-height: 0;
        border: none !important;
        margin-bottom: 0 !important;
        padding: 0 4px !important;
        overflow: hidden;
        overflow-x: hidden !important;
        max-width: 100% !important;
        display: flex;
        flex-direction: column;
        box-sizing: border-box
      }

      #tab-reports #reportList > .wf-mob-tickets-body {
        flex: 1 1 0;
        min-height: 0;
        height: auto;
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
        margin-bottom: 0 !important;
        box-sizing: border-box;
        padding-inline: 0;
        overflow-x: hidden !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: none;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
        padding-bottom: var(--rp-scroll-pad-bottom) !important;
        scroll-padding-bottom: var(--rp-scroll-pad-bottom);
        scrollbar-gutter: stable
      }

      #tab-reports #reportList .wf-table-wrap,
      #tab-reports #reportList > .wf-mob-tickets-body .wf-table-wrap--body,
      #tab-reports #reportList > #rpMobTicketsHead .wf-table-wrap--head {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow-x: hidden !important
      }

      #tab-reports #reportList .wf-table-wrap {
        overflow: visible !important
      }

      #tab-reports #reportList > #rpMobTicketsHead .wf-table-wrap--head {
        overflow: hidden !important
      }

      #tab-reports #reportList .rp-tickets-table--mob.wf-tickets-table--mob-body {
        border-collapse: separate !important;
        border-spacing: 0 10px !important;
        table-layout: fixed !important;
        width: 100% !important
      }

      #tab-reports #reportList .rp-tickets-table--mob tbody tr.wf-ticket-row > td {
        height: auto !important;
        min-height: 44px !important;
        max-height: none !important;
        padding: 8px 6px !important;
        line-height: 1.45 !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        overflow: visible !important;
        vertical-align: middle !important;
        background: var(--mr-surface) !important;
        border: 1px solid color-mix(in srgb, var(--mr-border) 88%, transparent) !important;
        border-top: 1px solid color-mix(in srgb, var(--mr-border) 88%, transparent) !important;
        border-bottom: 1px solid color-mix(in srgb, var(--mr-border) 88%, transparent) !important;
        box-sizing: border-box !important;
        box-shadow: 0 2px 10px rgba(15, 18, 36, 0.06)
      }

      #tab-reports #reportList .rp-tickets-table--mob tbody tr.wf-ticket-row > td.wf-ticket-cell,
      #tab-reports #reportList .rp-tickets-table--mob tbody tr.wf-ticket-row > td.wf-col-emp,
      #tab-reports #reportList .rp-tickets-table--mob tbody tr.wf-ticket-row > td.wf-col-datetime {
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important
      }

      #tab-reports #reportList .rp-tickets-table--mob tbody tr.wf-ticket-row:active > td {
        background: color-mix(in srgb, var(--mr-primary) 5%, var(--mr-surface)) !important
      }

      #tab-reports #reportList .rp-tickets-table--mob tbody tr.wf-ticket-row > td + td {
        border-inline-start: 1px solid color-mix(in srgb, var(--mr-border) 55%, transparent) !important
      }

      #tab-reports #reportList .rp-tickets-table--mob tbody tr.wf-ticket-row > td:first-child {
        border-inline-end: 1px solid color-mix(in srgb, var(--mr-border) 55%, transparent) !important
      }

      #tab-reports #reportList .rp-tickets-table--mob tbody tr.wf-ticket-row > td:last-child {
        border-inline-start: 1px solid color-mix(in srgb, var(--mr-border) 55%, transparent) !important
      }

      #tab-reports #reportList .rp-tickets-table--mob tbody tr.wf-ticket-row:last-child > td {
        padding-block-end: 0 !important;
        margin-bottom: 0 !important
      }

      #tab-reports #reportList .rp-tickets-table--mob tbody tr.wf-ticket-row:hover > td {
        background: var(--mr-surface) !important
      }

      #tab-reports #reportList .rp-tickets-table--mob tbody tr.wf-ticket-row > td.wf-col-status {
        padding: 0 !important;
        text-align: center !important;
        overflow: hidden !important;
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.3 !important;
        vertical-align: middle !important;
        position: relative !important
      }

      [data-theme="light"] #tab-reports #reportList .rp-tickets-table--mob tbody tr.wf-ticket-row > td {
        --rp-card-outer-edge: color-mix(in srgb, #000 30%, var(--mr-border));
        border: none !important;
        border-top: 1px solid var(--rp-card-outer-edge) !important;
        border-bottom: 1px solid var(--rp-card-outer-edge) !important;
        box-shadow: none !important
      }

      [data-theme="light"] #tab-reports #reportList .rp-tickets-table--mob tbody tr.wf-ticket-row > td + td {
        border-inline-start: 1px solid color-mix(in srgb, var(--mr-border) 55%, transparent) !important
      }

      [data-theme="light"] #tab-reports #reportList .rp-tickets-table--mob tbody tr.wf-ticket-row > td:first-child {
        border-inline-start: 1px solid var(--rp-card-outer-edge) !important;
        border-inline-end: 1px solid color-mix(in srgb, var(--mr-border) 55%, transparent) !important
      }

      [data-theme="light"] #tab-reports #reportList .rp-tickets-table--mob tbody tr.wf-ticket-row > td:last-child {
        border-inline-end: 1px solid var(--rp-card-outer-edge) !important;
        border-inline-start: 1px solid color-mix(in srgb, var(--mr-border) 55%, transparent) !important
      }

      [data-theme="light"] #tab-reports #reportList > #rpMobTicketsHead .wf-tickets-table--mob-head thead th {
        --rp-card-outer-edge: color-mix(in srgb, #000 30%, var(--mr-border));
        border: none !important;
        border-top: 1px solid var(--rp-card-outer-edge) !important;
        border-bottom: 1px solid var(--rp-card-outer-edge) !important;
        box-shadow: none !important
      }

      [data-theme="light"] #tab-reports #reportList > #rpMobTicketsHead .wf-tickets-table--mob-head thead th + th {
        border-inline-start: 1px solid color-mix(in srgb, var(--mr-border) 55%, transparent) !important
      }

      [data-theme="light"] #tab-reports #reportList > #rpMobTicketsHead .wf-tickets-table--mob-head thead th:first-child {
        border-inline-start: 1px solid var(--rp-card-outer-edge) !important;
        border-inline-end: 1px solid color-mix(in srgb, var(--mr-border) 55%, transparent) !important
      }

      [data-theme="light"] #tab-reports #reportList > #rpMobTicketsHead .wf-tickets-table--mob-head thead th:last-child {
        border-inline-end: 1px solid var(--rp-card-outer-edge) !important;
        border-inline-start: 1px solid color-mix(in srgb, var(--mr-border) 55%, transparent) !important
      }

      [data-theme="light"] #tab-workflow .wf-panel .data-table.wf-tickets-table--mob tbody tr.wf-ticket-row > td {
        --wf-card-outer-edge: color-mix(in srgb, #000 30%, var(--mr-border));
        border: none !important;
        border-top: 1px solid var(--wf-card-outer-edge) !important;
        border-bottom: 1px solid var(--wf-card-outer-edge) !important;
        box-shadow: none !important
      }

      [data-theme="light"] #tab-workflow .wf-panel .data-table.wf-tickets-table--mob tbody tr.wf-ticket-row > td + td {
        border-inline-start: 1px solid color-mix(in srgb, var(--mr-border) 55%, transparent) !important
      }

      [data-theme="light"] #tab-workflow .wf-panel .data-table.wf-tickets-table--mob tbody tr.wf-ticket-row > td:first-child {
        border-inline-start: 1px solid var(--wf-card-outer-edge) !important;
        border-inline-end: 1px solid color-mix(in srgb, var(--mr-border) 55%, transparent) !important
      }

      [data-theme="light"] #tab-workflow .wf-panel .data-table.wf-tickets-table--mob tbody tr.wf-ticket-row > td:last-child {
        border-inline-end: 1px solid var(--wf-card-outer-edge) !important;
        border-inline-start: 1px solid color-mix(in srgb, var(--mr-border) 55%, transparent) !important
      }

      #tab-reports .wf-panel-intro {
        padding: 0;
        margin-bottom: 10px
      }

      #tab-reports .wf-panel-title {
        font-size: 15px !important;
        font-weight: 800 !important
      }

      #tab-reports .wf-panel-sub {
        display: none
      }

      #tab-reports .rp-stats {
        margin: 0 0 8px !important;
        padding: 0;
        gap: 4px;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        width: 100%;
        box-sizing: border-box
      }

      #tab-reports .rp-stat-card {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        min-height: 72px;
        height: auto;
        padding: 5px 4px 4px;
        border-radius: 10px;
        overflow: hidden;
        gap: 2px
      }

      #tab-reports .rp-stat-top {
        flex-shrink: 0;
        gap: 4px;
        align-items: center;
        min-height: 0
      }

      #tab-reports .rp-stat-title {
        min-width: 0;
        flex: 1 1 auto
      }

      #tab-reports .rp-stat-value {
        left: auto !important;
        font-size: clamp(12px, 3.6vw, 16px) !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        flex-shrink: 0
      }

      #tab-reports .rp-stat-card[data-color="blue"] .rp-stat-value,
      #tab-reports .rp-stat-card[data-color="amber"] .rp-stat-value,
      #tab-reports .rp-stat-card[data-color="green"] .rp-stat-value,
      #tab-reports .rp-stat-card[data-color="red"] .rp-stat-value {
        color: var(--rp-stat-accent) !important
      }

      #tab-reports .rp-stat-icon {
        right: 4px !important;
        top: 4px !important;
        width: 18px !important;
        height: 18px !important;
        font-size: 9px !important;
        border-radius: 6px !important
      }

      #tab-reports .rp-stat-label {
        right: auto !important;
        bottom: auto !important;
        font-family: var(--font) !important;
        font-size: clamp(8px, 2.2vw, 9px) !important;
        font-weight: 500 !important;
        letter-spacing: -0.02em !important;
        line-height: 1 !important;
        color: var(--mr-text) !important;
        max-width: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
      }

      #tab-reports .rp-stat-chart {
        flex: 0 0 auto;
        min-height: 14px;
        height: 14px;
        max-height: 14px;
        margin-top: auto !important;
        margin-bottom: 3px;
        overflow: hidden !important;
        width: 100%;
        cursor: default;
        pointer-events: none
      }

      #tab-reports .rp-stat-chart__stage,
      #tab-reports .rp-stat-chart__layer,
      #tab-reports .rp-stat-chart__svg {
        width: 100%;
        height: 100%;
        overflow: hidden
      }

      #tab-reports .rp-stat-chart__hover-dot {
        display: none !important
      }

      #tab-reports .toolbar.wf-toolbar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
        border-bottom: none !important
      }

      #tab-reports .toolbar.wf-toolbar > * {
        width: auto !important;
        flex: none !important;
        min-width: 0 !important
      }

      #tab-reports .wf-search.figma-search-wrap {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        height: 38px !important;
        padding: 0 10px 0 6px !important;
        gap: 8px !important;
        border-radius: 999px !important;
        background: var(--mr-surface) !important;
        border: 1px solid var(--mr-border) !important;
        box-shadow: 0 1px 2px rgba(15, 18, 36, 0.04) !important
      }

      #tab-reports {
        --rp-search-fs: clamp(8px, 2.5vw, 10px);
        --rp-search-icon-fs: clamp(10px, 3.1vw, 12px)
      }

      #appWrap #tab-reports .wf-search .figma-search-input,
      #appWrap #tab-reports .wf-search .figma-search-input::placeholder {
        font-size: var(--rp-search-fs) !important;
        line-height: 1.2 !important;
        min-width: 0
      }

      #appWrap #tab-reports .wf-search .figma-search-input::placeholder {
        color: var(--mr-text-2) !important;
        opacity: 1 !important
      }

      #tab-reports .figma-search-btn {
        width: clamp(24px, 7.5vw, 28px) !important;
        height: clamp(24px, 7.5vw, 28px) !important;
        font-size: var(--rp-search-icon-fs) !important;
        min-width: clamp(24px, 7.5vw, 28px) !important;
        flex-shrink: 0;
        color: var(--mr-text-2) !important;
        opacity: 1 !important
      }

      #tab-reports #rp-filter-btn {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: min(28vw, 104px) !important;
        min-width: 0 !important;
        padding: 0 8px !important
      }

      #tab-reports .rp-date-wrap {
        flex: 0 0 auto !important;
        max-width: none !important;
        min-width: 0 !important;
        width: auto !important
      }

      #tab-reports .rp-date-wrap .rp-date-btn {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        font-size: 11px !important;
        gap: 0 !important;
        border-radius: 999px !important;
        background: var(--mr-surface) !important;
        border: 1px solid var(--mr-border) !important;
        box-shadow: 0 1px 2px rgba(15, 18, 36, 0.04) !important;
        justify-content: center !important;
        box-sizing: border-box;
        color: var(--mr-text-2) !important
      }

      #tab-reports .rp-date-wrap .rp-date-btn i {
        font-size: 12px !important;
        margin: 0 !important
      }

      #tab-reports .rp-tool-btn:not(.rp-tool-btn-primary):not(.rp-date-btn) {
        width: 100% !important;
        min-width: 0 !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
        gap: 6px !important;
        border-radius: 999px !important;
        background: var(--mr-surface) !important;
        border: 1px solid var(--mr-border) !important;
        box-shadow: 0 1px 2px rgba(15, 18, 36, 0.04) !important;
        justify-content: flex-start !important;
        box-sizing: border-box;
        color: var(--mr-text-2) !important
      }

      [data-theme="dark"] #tab-reports .rp-date-wrap .rp-date-btn,
      [data-theme="dark"] #tab-reports .rp-tool-btn:not(.rp-tool-btn-primary) {
        color: var(--mr-text) !important;
        box-shadow: none !important
      }

      [data-theme="dark"] #tab-reports .rp-date-btn.active,
      [data-theme="dark"] #tab-reports .rp-tool-btn.active {
        background: var(--mr-primary-hover) !important;
        border-color: var(--mr-border-2) !important;
        color: var(--mr-text) !important
      }

      #tab-reports .rp-date-btn #rp-date-label {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important
      }

      #tab-reports #rp-filter-btn span:not(.rp-tool-badge) {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 4.5em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 10px !important;
        text-align: start
      }

      #tab-reports #rp-filter-btn i {
        font-size: 11px !important;
        flex-shrink: 0
      }

      #tab-reports .rp-tool-btn-primary {
        display: none !important
      }

      #tab-reports .active-filters-bar,
      #tab-reports .wf-count {
        padding-inline: 0
      }

      #tab-reports #reportList {
        padding-inline: 4px !important
      }

      #tab-reports #reportList .ticket-id-cell--under-id {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        direction: rtl;
        width: 100% !important;
        min-width: 0;
        max-width: 100%;
        white-space: nowrap
      }

      #tab-reports #reportList .ticket-id-cell--under-id .wf-ticket-id {
        order: 1;
        display: block !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        margin: 0;
        padding: 0;
        font-size: 9px !important;
        line-height: 1.1 !important;
        font-weight: 800 !important;
        text-align: center !important;
        direction: ltr;
        unicode-bidi: embed;
        max-width: 100%;
        overflow: visible;
        text-overflow: clip;
        white-space: nowrap
      }

      #tab-reports #reportList .wf-auto-flag--under-id {
        order: 2;
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center;
        width: max-content !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 1px 2px 3px !important;
        gap: 2px !important;
        border-radius: 4px !important;
        font-size: 7px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important
      }

      #tab-reports #reportList .wf-auto-flag--under-id i {
        font-size: 7px !important;
        line-height: 1 !important
      }

      #tab-reports #reportList .wf-auto-flag--under-id .overdue-flag__txt {
        font-size: 7px !important;
        line-height: 1 !important;
        font-weight: 700 !important
      }

      #tab-reports #reportList tr.wf-ticket-row--auto td.wf-ticket-cell {
        vertical-align: middle;
        text-align: center
      }

      #tab-reports #reportList .rp-tickets-table--mob col.wf-col-ticket-c {
        min-width: 0 !important;
        max-width: none !important
      }

      #tab-reports #reportList .rp-tickets-table--mob th.wf-col-ticket,
      #tab-reports #reportList .rp-tickets-table--mob td.wf-ticket-cell,
      #tab-reports #reportList > #rpMobTicketsHead .rp-tickets-table--mob th.wf-col-ticket {
        min-width: 0 !important;
        max-width: none !important;
        padding: 8px 6px !important;
        text-align: center !important;
        vertical-align: middle !important;
        overflow: visible !important
      }

      #tab-reports #reportList .rp-tickets-table--mob .ticket-id-cell,
      #tab-reports #reportList .rp-tickets-table--mob .ticket-id-cell--under-id,
      #tab-reports #reportList .rp-tickets-table--mob .ticket-id-cell--auto {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
        direction: rtl
      }

      #tab-reports #reportList .rp-tickets-table--mob .wf-ticket-id {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0;
        font-family: var(--mono) !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        line-height: 1.1 !important;
        text-align: center !important;
        direction: ltr;
        unicode-bidi: embed;
        color: var(--mr-text) !important;
        overflow: visible;
        text-overflow: clip;
        white-space: nowrap !important
      }

      #tab-reports #reportList .rp-tickets-table--mob {
        width: 100% !important;
        max-width: 100% !important
      }

      #tab-reports #reportList .rp-tickets-table--mob.wf-tickets-table--mob-head {
        table-layout: fixed !important
      }

      #tab-reports #reportList .rp-tickets-table--mob thead th {
        padding: 2px 3px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        color: var(--mr-text) !important;
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        text-align: center !important;
        vertical-align: middle !important
      }

      #tab-reports #reportList .rp-tickets-table--mob tbody td {
        font-size: 10px !important;
        font-weight: 600 !important;
        color: var(--mr-text) !important;
        vertical-align: middle !important
      }

      #tab-reports #reportList .rp-tickets-table--mob tbody td.wf-ticket-cell,
      #tab-reports #reportList .rp-tickets-table--mob tbody td.wf-col-emp,
      #tab-reports #reportList .rp-tickets-table--mob tbody td.wf-col-datetime {
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important
      }

      #tab-reports #reportList .rp-tickets-table--mob tbody td.wf-col-emp .wf-emp-name {
        display: block;
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
        font-size: 7px !important;
        font-weight: 700;
        line-height: 1.6 !important;
        color: var(--mr-text) !important;
        overflow: visible !important;
        text-overflow: clip;
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        text-align: center !important
      }

      #tab-reports #reportList .rp-tickets-table--mob .wf-emp-cell,
      #tab-reports #reportList .rp-tickets-table--mob .wf-viol-cell {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        line-height: 1.6;
        vertical-align: middle;
        overflow: visible
      }

      #tab-reports #reportList .rp-tickets-table--mob .wf-emp-num {
        display: none !important
      }

      #tab-reports #reportList .rp-tickets-table--mob tbody td.wf-col-emp,
      #tab-reports #reportList > #rpMobTicketsHead .rp-tickets-table--mob th.wf-col-emp {
        padding: 8px 6px !important;
        text-align: center !important;
        min-width: 0 !important;
        max-width: none !important
      }

      #tab-reports #reportList .rp-tickets-table--mob col.wf-col-emp-c {
        min-width: 0 !important;
        max-width: none !important
      }

      #tab-reports #reportList .rp-tickets-table--mob tbody td.wf-col-branch .wf-branch-cell {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        text-align: center !important
      }

      #tab-reports #reportList .rp-tickets-table--mob tbody td.wf-col-branch .wf-branch-name {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        font-size: 7px !important;
        font-weight: 700;
        overflow: visible !important;
        text-overflow: clip;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        line-height: 1.6 !important;
        text-align: center !important;
        color: var(--mr-text) !important
      }

      #tab-reports #reportList .rp-tickets-table--mob th.wf-col-branch,
      #tab-reports #reportList .rp-tickets-table--mob td.wf-col-branch,
      #tab-reports #reportList > #rpMobTicketsHead .rp-tickets-table--mob th.wf-col-branch {
        padding: 4px 2px !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        vertical-align: middle !important;
        text-align: center !important;
        overflow: visible !important
      }

      #tab-reports #reportList .rp-tickets-table--mob th.wf-col-violation,
      #tab-reports #reportList .rp-tickets-table--mob td.wf-col-violation,
      #tab-reports #reportList > #rpMobTicketsHead .rp-tickets-table--mob th.wf-col-violation {
        padding: 4px 2px !important;
        white-space: normal !important;
        vertical-align: middle !important;
        text-align: center !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important
      }

      #tab-reports #reportList > #rpMobTicketsHead .wf-tickets-table--mob-head thead th.wf-col-status {
        padding: 0 !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        vertical-align: middle !important;
        text-align: center !important
      }

      #tab-reports #reportList .rp-tickets-table--mob td.wf-col-status {
        padding: 0 !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        vertical-align: middle !important;
        text-align: center !important;
        overflow: hidden !important;
        position: relative !important
      }

      #tab-reports #reportList .rp-tickets-table--mob tbody tr.wf-ticket-row > td.wf-col-ticket,
      #tab-reports #reportList .rp-tickets-table--mob tbody tr.wf-ticket-row > td.wf-ticket-cell {
        border-radius: 0 12px 12px 0 !important
      }

      #tab-reports #reportList .rp-tickets-table--mob tbody tr.wf-ticket-row > td.wf-col-status {
        border-radius: 12px 0 0 12px !important
      }

      #tab-reports #reportList .rp-tickets-table--mob td.wf-col-datetime {
        padding: 2px 2px !important;
        text-align: center !important;
        vertical-align: middle !important;
        overflow: visible !important
      }

      #tab-reports #reportList .rp-tickets-table--mob td.wf-col-status .badge {
        font-size: 9px !important;
        padding: 2px 3px !important;
        line-height: 1.35;
        white-space: normal !important;
        word-break: break-word !important;
        overflow: hidden;
        max-width: none;
        border-radius: 12px 0 0 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-weight: 700;
        border: none !important;
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        box-sizing: border-box !important
      }

      #tab-reports #reportList .rp-tickets-table--mob .wf-viol-cell,
      #tab-reports #reportList .rp-tickets-table--mob .wf-viol-name {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        line-height: 1.6 !important;
        text-align: center !important;
        overflow: visible
      }

      #tab-reports #reportList .rp-tickets-table--mob .wf-viol-name {
        font-size: 7px !important;
        font-weight: 700;
        line-height: 1.6 !important;
        color: var(--mr-text) !important
      }

      /* أداء الجوال — إيقاف حركة md-dash-play فقط (إيموجي الترحيب يبقى يعمل) */
      #tab-dashboard .md-dash.md-dash-play * {
        animation: none !important
      }

      #tab-dashboard .md-dash-play {
        animation: none !important
      }

    }

@media (max-width: 992px) and (pointer: coarse) {
      #mobileBottomNav.mobile-bottom-nav {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        max-width: 100% !important;
        align-self: stretch !important;
        justify-content: space-evenly !important;
        overflow-x: hidden !important;
      }

      #mobileBottomNav.mobile-bottom-nav.mobile-bottom-nav--scroll {
        justify-content: flex-start !important;
        overflow-x: auto !important;
      }

      #mobileBottomNav.mobile-bottom-nav:not(.mobile-bottom-nav--scroll) .mob-nav-item {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: none !important;
      }

      #mobileBottomNav.mobile-bottom-nav--scroll .mob-nav-item {
        flex: 0 0 auto !important;
        min-width: 62px !important;
      }
    }

@media (max-width: 768px) and (pointer: coarse) {
            .modal-card.cmp-detail-card .cmp-detail-section--violations .cmp-viol-list,
            .modal-card.cmp-detail-card .cmp-detail-section--violations .cmp-viol-list.cmp-viol-list--scroll {
              --cmp-viol-row-h: 56px;
              --cmp-viol-gap: 6px;
              gap: var(--cmp-viol-gap) !important;
              max-height: none !important;
              flex: 1 1 auto;
              min-height: 0;
              height: auto !important;
              overflow-y: auto !important;
              padding-inline-end: 0 !important;
              scrollbar-width: none;
              -webkit-overflow-scrolling: touch;
            }
            .cmp-detail-section--violations .cmp-viol-list::-webkit-scrollbar { display: none; width: 0; }
            .cmp-viol-list .score-viol-row { padding: 6px 10px; min-height: var(--cmp-viol-row-h); font-size: 11px; }
            .cmp-viol-list .score-viol-name { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            .cmp-viol-list .score-viol-meta { font-size: 9px; flex-wrap: nowrap; overflow: hidden; }
            .cmp-viol-list .score-viol-meta span:nth-child(n+3) { display: none; }
          }