/* =========================================
   Global
========================================= */
:root {
    --font-primary: 'Inter', 'Cairo', 'Tahoma', 'Arial', sans-serif;
    --selection-blue: #0B5DEB;
    --selection-blue-dark: #0847B8;
    --selection-blue-soft: #EAF2FF;
    --brand-primary: var(--selection-blue);
    --brand-dark: #0F172A;
    --brand-text: #111827;
    --brand-subtext: #6B7280;
    --brand-border: #E5E7EB;
    --brand-blue-50: var(--selection-blue-soft);
    --brand-blue-100: #DCEAFF;
    --brand-blue-200: #B9D4FF;
    --brand-blue-300: #8DB9FF;
    --brand-blue-500: var(--brand-primary);
    --brand-blue-600: var(--brand-primary);
    --brand-blue-700: var(--selection-blue);
    --brand-blue-800: var(--selection-blue-dark);
    --brand-gradient: linear-gradient(135deg, var(--selection-blue) 0%, var(--selection-blue) 100%);
    --royal-50: var(--brand-blue-50);
    --royal-100: var(--brand-blue-100);
    --royal-200: var(--brand-blue-200);
    --royal-500: var(--brand-blue-500);
    --royal-600: var(--brand-blue-600);
    --royal-700: var(--brand-blue-700);
    --surface: #F9FAFB;
    --surface-elevated: #ffffff;
    --surface-subtle: #F9FAFB;
    --surface-popover: #ffffff;
    --border-soft: var(--brand-border);
    --text-strong: var(--brand-text);
    --text-muted: var(--brand-subtext);
    --shadow-soft: 0 18px 40px -34px rgba(15, 23, 42, 0.35);
    --shadow-medium: 0 20px 50px -42px rgba(15, 23, 42, 0.32);
    --shadow-popover: 0 24px 55px -34px rgba(15, 23, 42, 0.45);
    --focus-ring: rgba(11, 93, 235, 0.16);
    --primary-sidebar-width: 5.75rem;
    --secondary-sidebar-width: 14rem;
    color-scheme: light;
}

:root[data-theme="dark"] {
    --selection-blue: #5B8DEE;
    --selection-blue-dark: #3E6FCB;
    --selection-blue-soft: rgba(91, 141, 238, 0.17);
    --brand-primary: #5B8DEE;
    --brand-dark: #020617;
    --brand-text: #E5EDFF;
    --brand-subtext: #B7C6DF;
    --brand-border: rgba(148, 163, 184, 0.3);
    --brand-blue-50: rgba(91, 141, 238, 0.17);
    --brand-blue-100: rgba(124, 167, 244, 0.25);
    --brand-blue-200: rgba(160, 195, 248, 0.32);
    --brand-blue-300: rgba(197, 221, 252, 0.43);
    --brand-blue-500: var(--brand-primary);
    --brand-blue-600: #78A8F4;
    --brand-blue-700: #5B8DEE;
    --brand-blue-800: #3E6FCB;
    --surface: #071120;
    --surface-elevated: #101B2E;
    --surface-subtle: #0C172A;
    --surface-popover: #132038;
    --border-soft: var(--brand-border);
    --text-strong: var(--brand-text);
    --text-muted: var(--brand-subtext);
    --shadow-soft: 0 26px 60px -42px rgba(2, 6, 23, 0.9);
    --shadow-medium: 0 28px 68px -48px rgba(2, 6, 23, 0.95);
    --shadow-popover: 0 28px 64px -36px rgba(2, 6, 23, 0.92);
    --focus-ring: rgba(96, 165, 250, 0.24);
    color-scheme: dark;
}

body {
    font-family: var(--font-primary);
    font-weight: 400;
    letter-spacing: 0;
    background-color: var(--surface);
    color: var(--text-strong);
    overflow: hidden;
}

button,
input,
select,
textarea {
    font-family: var(--font-primary);
}

:where(*, ::before, ::after) {
    --tw-ring-color: rgba(11, 93, 235, 0.5);
}

::placeholder {
    color: var(--text-muted);
    opacity: 0.72;
}

/* =========================================
   Chat Hub
========================================= */
.chat-hub-root {
    position: fixed;
    left: 1.25rem;
    bottom: 1.25rem;
    z-index: 210;
    direction: rtl;
    font-family: var(--font-primary);
}

.chat-hub-root.hidden {
    display: none;
}

.chat-hub-pip-body {
    margin: 0;
    overflow: hidden;
    background: #F8FAFC;
}

.chat-hub-root.picture-in-picture {
    position: static;
    inset: auto;
    width: 100vw;
    height: 100vh;
    z-index: auto;
    display: block;
}

.chat-hub-root.picture-in-picture .chat-hub-panel,
.chat-hub-root.picture-in-picture .chat-hub-panel.expanded {
    width: 100%;
    height: 100vh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.chat-hub-root.picture-in-picture .chat-hub-resize-handle {
    display: none;
}

.chat-hub-svg {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
}

.chat-hub-bubble {
    width: 3.75rem;
    height: 3.75rem;
    border: 0;
    border-radius: 50%;
    color: #ffffff;
    background: var(--selection-blue);
    box-shadow: 0 20px 42px -22px rgba(11, 93, 235, 0.72);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-weight: 900;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.chat-hub-bubble:hover {
    transform: translateY(-2px);
    background: var(--selection-blue-dark);
    box-shadow: 0 24px 48px -24px rgba(11, 93, 235, 0.78);
}

.chat-hub-bubble .chat-hub-svg {
    width: 1.45rem;
    height: 1.45rem;
}

.chat-hub-bubble b,
.chat-hub-header-actions b,
.chat-hub-tabs b {
    min-width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: #dc2626;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.35rem;
    font-size: 0.68rem;
    font-weight: 900;
}

.chat-hub-bubble b:empty,
.chat-hub-header-actions b:empty,
.chat-hub-tabs b:empty {
    display: none;
}

.chat-hub-panel {
    --chat-hub-panel-width: 25rem;
    --chat-hub-panel-height: 42rem;
    width: min(var(--chat-hub-panel-width), calc(100vw - 2rem));
    height: min(var(--chat-hub-panel-height), calc(100vh - 2.5rem));
    overflow: hidden;
    border: 1px solid #E5E7EB;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 26px 70px -36px rgba(15, 23, 42, 0.7);
    display: flex;
    flex-direction: column;
    position: relative;
}

.chat-hub-panel.expanded {
    --chat-hub-panel-width: 62rem;
    --chat-hub-panel-height: 48rem;
}

.chat-hub-resize-handle {
    position: absolute;
    z-index: 9;
    user-select: none;
    touch-action: none;
}

.chat-hub-resize-handle.top {
    top: -0.25rem;
    right: 1rem;
    left: 1rem;
    height: 0.75rem;
    cursor: ns-resize;
}

.chat-hub-resize-handle.left,
.chat-hub-resize-handle.right {
    top: 1rem;
    bottom: 1rem;
    width: 0.75rem;
    cursor: ew-resize;
}

.chat-hub-resize-handle.left {
    left: -0.25rem;
}

.chat-hub-resize-handle.right {
    right: -0.25rem;
}

.chat-hub-resize-handle.top-left,
.chat-hub-resize-handle.top-right {
    top: -0.3rem;
    width: 1rem;
    height: 1rem;
}

.chat-hub-resize-handle.top-left {
    left: -0.3rem;
    cursor: nwse-resize;
}

.chat-hub-resize-handle.top-right {
    right: -0.3rem;
    cursor: nesw-resize;
}

.chat-hub-resize-handle::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.22);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.chat-hub-panel:hover .chat-hub-resize-handle::after,
.chat-hub-panel.resizing .chat-hub-resize-handle::after {
    opacity: 1;
}

.chat-hub-resize-handle.top::after {
    right: 42%;
    left: 42%;
    top: 0.3rem;
    height: 0.2rem;
}

.chat-hub-resize-handle.left::after,
.chat-hub-resize-handle.right::after {
    top: 42%;
    bottom: 42%;
    width: 0.2rem;
}

.chat-hub-resize-handle.left::after {
    left: 0.28rem;
}

.chat-hub-resize-handle.right::after {
    right: 0.28rem;
}

.chat-hub-resize-handle.top-left::after,
.chat-hub-resize-handle.top-right::after {
    inset: 0.35rem;
}

.chat-hub-resizing {
    cursor: grabbing;
    user-select: none;
}

.chat-hub-header {
    min-height: 4rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #E5E7EB;
    background: #F9FAFB;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    position: relative;
}

.chat-hub-header strong {
    display: block;
    color: #0f172a;
    font-size: 0.98rem;
    line-height: 1.25;
}

.chat-hub-header span {
    display: block;
    color: #6B7280;
    font-size: 0.72rem;
    font-weight: 800;
}

.chat-hub-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.chat-hub-header-actions button,
.chat-hub-message-actions button,
.chat-hub-composer-row button,
.chat-hub-replying button,
.chat-hub-preview-close {
    border: 1px solid #E5E7EB;
    background: #ffffff;
    color: #111827;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.chat-hub-header-actions button:hover,
.chat-hub-message-actions button:hover,
.chat-hub-composer-row button:hover,
.chat-hub-replying button:hover {
    color: var(--brand-blue-700);
    border-color: var(--brand-blue-200);
    background: var(--brand-blue-50);
}

.chat-hub-header-actions button.active-pin {
    color: #ffffff;
    border-color: var(--brand-blue-700);
    background: var(--brand-blue-700);
}

.chat-hub-header-actions b {
    position: absolute;
    top: -0.45rem;
    right: -0.45rem;
}

.chat-hub-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.65rem;
    border-bottom: 1px solid #E5E7EB;
    background: #ffffff;
}

.chat-hub-tabs button {
    min-width: 0;
    min-height: 2.55rem;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    background: #F9FAFB;
    color: #6B7280;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 900;
    position: relative;
}

.chat-hub-tabs button.active {
    border-color: var(--selection-blue);
    background: var(--selection-blue);
    color: #ffffff;
    box-shadow: 0 12px 24px -18px rgba(11, 93, 235, 0.82);
}

.chat-hub-tabs button.active .chat-hub-svg {
    transform: scale(1.08);
}

.chat-hub-tabs b {
    position: absolute;
    top: -0.35rem;
    left: -0.25rem;
    background: #dc2626;
}

.chat-hub-loading {
    padding: 0.65rem 1rem;
    color: #6B7280;
    background: #F9FAFB;
    font-size: 0.8rem;
    font-weight: 800;
}

.chat-hub-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: #F9FAFB;
    padding: 0.85rem;
}

.chat-hub-messages {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.chat-hub-message {
    display: grid;
    grid-template-columns: 2.05rem minmax(0, 1fr);
    gap: 0.55rem;
    align-items: start;
}

.chat-hub-message.own {
    grid-template-columns: minmax(0, 1fr) 2.05rem;
}

.chat-hub-message.own .chat-hub-avatar {
    grid-column: 2;
}

.chat-hub-message.own .chat-hub-message-body {
    grid-column: 1;
    grid-row: 1;
    background: #EFF6FF;
    border-color: #93c5fd;
    border-right: 4px solid #2563eb;
}

.chat-hub-message.role-admin .chat-hub-avatar,
.chat-hub-message.role-admin .chat-hub-message-body {
    --chat-role-color: var(--brand-blue-600);
    --chat-role-bg: var(--brand-blue-50);
    --chat-role-border: var(--brand-blue-200);
}

.chat-hub-message.role-operations .chat-hub-avatar,
.chat-hub-message.role-operations .chat-hub-message-body {
    --chat-role-color: #0f766e;
    --chat-role-bg: #ccfbf1;
    --chat-role-border: #99f6e4;
}

.chat-hub-message.role-upgrades .chat-hub-avatar,
.chat-hub-message.role-upgrades .chat-hub-message-body {
    --chat-role-color: #2563EB;
    --chat-role-bg: #DBEAFE;
    --chat-role-border: #93c5fd;
}

.chat-hub-message.role-support .chat-hub-avatar,
.chat-hub-message.role-support .chat-hub-message-body {
    --chat-role-color: #c2410c;
    --chat-role-bg: #ffedd5;
    --chat-role-border: #fdba74;
}

.chat-hub-message.role-accountant .chat-hub-avatar,
.chat-hub-message.role-accountant .chat-hub-message-body {
    --chat-role-color: #6B7280;
    --chat-role-bg: #f1f5f9;
    --chat-role-border: #E5E7EB;
}

.chat-hub-message.role-employee .chat-hub-avatar,
.chat-hub-message.role-employee .chat-hub-message-body {
    --chat-role-color: #111827;
    --chat-role-bg: #F9FAFB;
    --chat-role-border: #E5E7EB;
}

.chat-hub-message .chat-hub-avatar {
    background: var(--chat-role-color, #0f766e);
}

.chat-hub-message .chat-hub-message-body {
    background: #ffffff;
    border-color: #E5E7EB;
}

.chat-hub-message.order-status-new .chat-hub-message-body {
    border-color: #16a34a;
    border-right: 5px solid #16a34a;
    background: #ecfdf5;
}

.chat-hub-message.order-status-in_progress .chat-hub-message-body {
    border-color: #7c3aed;
    border-right: 5px solid #7c3aed;
    background: #f5f3ff;
}

.chat-hub-message.order-status-activated .chat-hub-message-body {
    border-color: #0d9488;
    border-right: 5px solid #0d9488;
    background: #f0fdfa;
}

.chat-hub-message.order-status-problem .chat-hub-message-body {
    border-color: #dc2626;
    border-right: 5px solid #dc2626;
    background: #fef2f2;
}

.chat-hub-message.order-status-canceled .chat-hub-message-body {
    border-color: #64748b;
    border-right: 5px solid #64748b;
    background: #f8fafc;
}

.chat-hub-message.task-status-new .chat-hub-message-body,
.chat-hub-message.task-status-in_progress .chat-hub-message-body {
    border-color: #d97706;
    border-right: 5px solid #d97706;
    background: #fffbeb;
}

.chat-hub-message.task-status-completed .chat-hub-message-body {
    border-color: #059669;
    border-right: 5px solid #059669;
    background: #ecfdf5;
}

.chat-hub-message.instruction-message .chat-hub-message-body {
    border-color: #0891b2;
    border-right: 5px solid #0891b2;
    background: #ecfeff;
}

.chat-hub-message.highlight .chat-hub-message-body {
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.24);
}

.chat-hub-avatar {
    width: 2.05rem;
    height: 2.05rem;
    border-radius: 0.75rem;
    background: #0f766e;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    overflow: hidden;
    position: relative;
    border: 1px solid color-mix(in srgb, var(--chat-role-color, #0f766e) 18%, #ffffff);
}

.chat-hub-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}

.chat-hub-avatar span {
    position: relative;
    z-index: 1;
}

.chat-hub-message-body {
    min-width: 0;
    border: 1px solid #E5E7EB;
    border-radius: 0.9rem;
    background: #ffffff;
    padding: 0.65rem;
    position: relative;
}

.chat-hub-message.pinned .chat-hub-message-body {
    border-color: #f59e0b;
    background: #fffaf0;
}

.chat-hub-message-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.chat-hub-message-meta strong,
.chat-hub-order-owner strong {
    min-width: 0;
    color: #0f172a;
    font-size: 0.78rem;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-hub-message-meta span,
.chat-hub-order-card small,
.chat-hub-instruction-card small {
    color: #6B7280;
    font-size: 0.68rem;
    font-weight: 800;
    white-space: nowrap;
}

.chat-hub-message-text,
.chat-hub-order-text,
.chat-hub-instruction-text {
    color: #1f2937;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.chat-hub-inline-link {
    color: var(--selection-blue-dark);
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.chat-hub-inline-link:hover {
    color: var(--brand-blue-700);
}

.chat-hub-edited-link,
.chat-hub-inline-history {
    border: 0;
    background: transparent;
    color: #6B7280;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.35rem;
    padding: 0;
    font-size: 0.68rem;
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.chat-hub-edited-link:hover,
.chat-hub-inline-history:hover {
    color: #2563EB;
}

.chat-hub-inline-history {
    margin-top: 0.1rem;
    width: fit-content;
}

.chat-hub-inline-history .chat-hub-svg {
    width: 0.85rem;
    height: 0.85rem;
}

.chat-hub-reply-quote,
.chat-hub-modal-quote {
    width: 100%;
    border: 1px solid #DBEAFE;
    border-right: 3px solid #2563eb;
    border-radius: 0.75rem;
    background: #EFF6FF;
    color: #111827;
    display: block;
    margin-bottom: 0.45rem;
    padding: 0.45rem 0.55rem;
    text-align: right;
}

.chat-hub-reply-quote span,
.chat-hub-modal-quote span {
    display: block;
    color: #2563EB;
    font-size: 0.72rem;
    font-weight: 900;
}

.chat-hub-reply-quote small {
    display: block;
    color: #6B7280;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.55;
}

.chat-hub-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.55rem;
}

.chat-hub-image-attachment {
    width: 7.5rem;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid #E5E7EB;
    border-radius: 0.75rem;
    background: #F9FAFB;
    padding: 0;
}

.chat-hub-image-attachment img,
.chat-hub-composer-attachment img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.chat-hub-audio {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chat-hub-audio audio {
    width: min(16rem, 100%);
    height: 2.3rem;
}

.chat-hub-audio span {
    color: #6B7280;
    font-size: 0.72rem;
    font-weight: 900;
}

.chat-hub-message-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.55rem;
}

.chat-hub-badge {
    min-height: 1.45rem;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.68rem;
    font-weight: 900;
}

.chat-hub-badge.order {
    background: #ecfdf5;
    color: #047857;
}

.chat-hub-badge.order.status-in_progress {
    background: #ede9fe;
    color: #6d28d9;
}

.chat-hub-badge.order.status-activated {
    background: #dcfce7;
    color: #15803d;
}

.chat-hub-badge.order.status-problem {
    background: #fee2e2;
    color: #b91c1c;
}

.chat-hub-badge.order.status-canceled {
    background: #e2e8f0;
    color: #475569;
}

.chat-hub-badge.task {
    background: #EFF6FF;
    color: #2563EB;
}

.chat-hub-badge.instruction {
    background: #fff7ed;
    color: #c2410c;
}

.chat-hub-badge.pinned {
    background: #fef3c7;
    color: #92400e;
}

.chat-hub-badge.private {
    background: #eef2ff;
    color: #3730a3;
}

.chat-hub-badge.icon-only {
    width: 1.45rem;
    min-width: 1.45rem;
    padding: 0;
    justify-content: center;
}

.chat-hub-badge .chat-hub-svg {
    width: 0.78rem;
    height: 0.78rem;
}

.chat-hub-message-receipts {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    margin-top: 0.4rem;
    min-height: 1.05rem;
    color: #2563EB;
}

.chat-hub-delivery-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #2563EB;
    font-size: 0.66rem;
    font-weight: 900;
    line-height: 1;
}

.chat-hub-read-avatars {
    display: inline-flex;
    align-items: center;
}

.chat-hub-read-avatar {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 999px;
    background: #e0f2fe;
    color: #075985;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: -0.25rem;
    overflow: hidden;
    position: relative;
    border: 1px solid #ffffff;
    box-shadow: 0 0 0 1px #bfdbfe;
    font-size: 0.5rem;
    font-weight: 900;
}

.chat-hub-read-avatar:first-child {
    margin-inline-start: 0;
}

.chat-hub-read-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}

.chat-hub-read-avatar span {
    position: relative;
    z-index: 1;
}

.chat-hub-read-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    margin-inline-start: -0.25rem;
    border-radius: 999px;
    border: 1px solid #bfdbfe;
    background: #ffffff;
    color: #2563EB;
    font-size: 0.48rem;
    font-weight: 900;
}

.chat-hub-message-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.45rem;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.chat-hub-message:hover .chat-hub-message-actions,
.chat-hub-message:focus-within .chat-hub-message-actions {
    opacity: 1;
    transform: translateY(0);
}

.chat-hub-message-actions button {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.55rem;
}

.chat-hub-activity-slot {
    min-height: 0;
    background: #ffffff;
    border-top: 1px solid #E5E7EB;
}

.chat-hub-activity {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.7rem 0;
    color: #6B7280;
    font-size: 0.72rem;
    font-weight: 900;
}

.chat-hub-activity-avatars {
    display: flex;
    align-items: center;
}

.chat-hub-activity-avatars .chat-hub-avatar {
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 0.5rem;
    margin-inline-start: -0.35rem;
    box-shadow: 0 0 0 2px #ffffff;
}

.chat-hub-activity-avatars .chat-hub-avatar:first-child {
    margin-inline-start: 0;
}

.chat-hub-composer {
    background: #ffffff;
    padding: 0.7rem;
}

.chat-hub-composer-row {
    display: grid;
    grid-template-columns: 2.35rem 2.35rem minmax(0, 1fr) 2.55rem;
    gap: 0.35rem;
    align-items: end;
}

.chat-hub-composer-row > sider-quick-compose-btn {
    display: none !important;
    pointer-events: none !important;
}

.chat-hub-composer-input {
    position: relative;
    min-width: 0;
}

.chat-hub-composer-row textarea {
    width: 100%;
    min-height: 3.8rem;
    max-height: min(32vh, 12rem);
    resize: none;
    overflow-y: auto;
    border: 1px solid #E5E7EB;
    border-radius: 0.75rem;
    background: #F9FAFB;
    padding: 0.55rem 2.75rem 0.55rem 0.7rem;
    color: #0f172a;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.55;
    outline: none;
}

.chat-hub-composer-row textarea:focus {
    border-color: #93c5fd;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.22);
}

.chat-hub-private-picker {
    position: absolute;
    top: 0.35rem;
    right: 0.45rem;
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.55rem;
    background: #ffffff;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.chat-hub-private-picker:focus-within {
    border-color: #a5b4fc;
    box-shadow: 0 0 0 3px rgba(165, 180, 252, 0.22);
}

.chat-hub-private-picker.is-private {
    border-color: #c7d2fe;
    background: #eef2ff;
    color: #3730a3;
}

.chat-hub-private-arrow {
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
    transform: translateY(-0.1rem);
}

.chat-hub-private-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.chat-hub-composer-row button.send {
    background: var(--selection-blue);
    border-color: var(--selection-blue);
    color: #ffffff;
}

.chat-hub-composer-row button.send:hover {
    background: var(--selection-blue-dark);
    border-color: var(--selection-blue-dark);
    color: #ffffff;
}

.chat-hub-composer-row button.send.sending {
    background: #64748b;
    border-color: #64748b;
    cursor: progress;
}

.chat-hub-replying,
.chat-hub-recording,
.chat-hub-composer-attachments {
    margin-bottom: 0.55rem;
}

.chat-hub-replying {
    border: 1px solid #DBEAFE;
    border-radius: 0.75rem;
    background: #EFF6FF;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.chat-hub-replying span,
.chat-hub-replying small {
    display: block;
}

.chat-hub-replying span {
    color: #2563EB;
    font-size: 0.75rem;
    font-weight: 900;
}

.chat-hub-replying small {
    color: #6B7280;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.5;
}

.chat-hub-composer-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.chat-hub-composer-attachment {
    width: 5.5rem;
    height: 4.25rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.75rem;
    overflow: hidden;
    position: relative;
    background: #F9FAFB;
}

.chat-hub-composer-attachment span {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(15, 23, 42, 0.72);
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0.18rem 0.35rem;
    font-size: 0.62rem;
    font-weight: 900;
}

.chat-hub-composer-attachment audio {
    width: 100%;
    height: 100%;
}

.chat-hub-composer-attachment button {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    width: 1.55rem;
    height: 1.55rem;
    border: 0;
    border-radius: 0.5rem;
    background: rgba(15, 23, 42, 0.72);
    color: #ffffff;
}

.chat-hub-attachment-hint {
    margin: -0.2rem 0 0.55rem;
    color: #0f766e;
    font-size: 0.72rem;
    font-weight: 900;
}

.chat-hub-recording {
    min-height: 2.6rem;
    border: 1px solid #fecaca;
    border-radius: 0.75rem;
    background: #fef2f2;
    color: #991b1b;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.55rem;
}

.chat-hub-record-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 999px;
    background: #dc2626;
    animation: chatHubPulse 1s infinite;
}

@keyframes chatHubPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.chat-hub-soft-btn {
    width: auto !important;
    min-width: 4.7rem;
    padding: 0 0.65rem;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 900;
}

.chat-hub-soft-btn.danger {
    color: #b91c1c;
}

.chat-hub-mention-menu {
    display: none;
    max-height: 12rem;
    overflow-y: auto;
    border: 1px solid #E5E7EB;
    border-radius: 0.8rem;
    background: #ffffff;
    box-shadow: 0 18px 38px -26px rgba(15, 23, 42, 0.45);
    margin-bottom: 0.45rem;
}

.chat-hub-mention-menu.open {
    display: block;
}

.chat-hub-mention-menu button {
    width: 100%;
    border: 0;
    background: #ffffff;
    display: grid;
    grid-template-columns: 1.8rem minmax(0, 1fr) auto;
    gap: 0.45rem;
    align-items: center;
    padding: 0.45rem 0.55rem;
    text-align: right;
}

.chat-hub-mention-menu button:hover {
    background: #EFF6FF;
}

.chat-hub-mention-menu span {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0f766e;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 900;
}

.chat-hub-mention-menu strong {
    min-width: 0;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
}

.chat-hub-mention-menu small {
    color: #6B7280;
    font-size: 0.68rem;
    font-weight: 800;
}

.chat-hub-orders,
.chat-hub-instructions {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.chat-hub-orders {
    gap: 0.85rem;
    padding-bottom: 1.2rem;
    scroll-snap-type: y mandatory;
    scroll-padding-block: 3.75rem 1rem;
    overscroll-behavior-y: contain;
}

.chat-hub-order-card,
.chat-hub-instruction-card {
    border: 1px solid #E5E7EB;
    border-radius: 0.78rem;
    background: #ffffff;
    padding: 0.62rem;
    box-shadow: 0 10px 24px -28px rgba(15, 23, 42, 0.45);
}

.chat-hub-order-card {
    position: relative;
    border-width: 2px;
    padding: 0.76rem;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-top: 3.85rem;
    box-shadow: 0 16px 34px -28px rgba(15, 23, 42, 0.7);
}

.chat-hub-order-card::before {
    content: "";
    position: absolute;
    inset-block: 0.8rem;
    inset-inline-start: -0.12rem;
    width: 0.24rem;
    border-radius: 999px;
    background: #22c55e;
}

.chat-hub-orders-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    margin-bottom: 0.15rem;
}

.chat-hub-orders-summary button {
    border: 1px solid #E5E7EB;
    border-radius: 0.58rem;
    background: #ffffff;
    min-height: 2.2rem;
    padding: 0.3rem 0.25rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.32rem;
    cursor: pointer;
    transition: transform 0.14s ease, border-color 0.14s ease, background-color 0.14s ease;
}

.chat-hub-orders-summary button:hover,
.chat-hub-orders-summary button.active {
    transform: translateY(-1px);
    border-color: #2563EB;
    background: #EFF6FF;
}

.chat-hub-orders-summary strong {
    color: #0f172a;
    font-size: 0.86rem;
    line-height: 1;
    font-weight: 950;
}

.chat-hub-summary-icon {
    width: 1.15rem;
    height: 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
}

.chat-hub-summary-icon .chat-hub-svg {
    width: 0.95rem;
    height: 0.95rem;
}

.chat-hub-orders-summary .new {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.chat-hub-orders-summary .in-progress {
    border-color: #c4b5fd;
    background: #f5f3ff;
}

.chat-hub-orders-summary .problem {
    border-color: #fecaca;
    background: #fff7f7;
}

.chat-hub-orders-summary button.active {
    box-shadow: inset 0 -3px 0 currentColor;
}

.chat-hub-order-group {
    display: flex;
    flex-direction: column;
    gap: 0.72rem;
    padding-bottom: 0.35rem;
}

.chat-hub-order-group + .chat-hub-order-group {
    border-top: 1px dashed #cbd5e1;
    padding-top: 0.78rem;
}

.chat-hub-order-group-title {
    position: sticky;
    top: -0.75rem;
    z-index: 1;
    min-height: 1.95rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.7rem;
    background: rgba(249, 250, 251, 0.94);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.28rem 0.55rem;
    color: #334155;
    font-size: 0.72rem;
    font-weight: 950;
}

.chat-hub-order-group-title span {
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chat-hub-order-group-title .chat-hub-svg {
    width: 0.95rem;
    height: 0.95rem;
}

.chat-hub-order-group-title b {
    min-width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
}

.chat-hub-order-group.status-in_progress .chat-hub-order-group-title {
    border-color: #c4b5fd;
    color: #6d28d9;
}

.chat-hub-order-group.status-problem .chat-hub-order-group-title {
    border-color: #fecaca;
    color: #991b1b;
}

.chat-hub-order-card.status-problem {
    border-color: #fecaca;
    background: #fff7f7;
}

.chat-hub-order-card.status-problem::before {
    background: #dc2626;
}

.chat-hub-order-card.status-in_progress {
    border-color: #c4b5fd;
    background: #f5f3ff;
}

.chat-hub-order-card.status-in_progress::before {
    background: #7c3aed;
}

.chat-hub-order-card.status-activated {
    border-color: #bbf7d0;
    background: #f7fef9;
}

.chat-hub-order-card.status-activated::before {
    background: #0d9488;
}

.chat-hub-order-card.status-canceled {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.chat-hub-order-card.status-canceled::before {
    background: #64748b;
}

.chat-hub-task-card.status-new {
    border-color: #fde68a;
    background: #fffdf5;
}

.chat-hub-task-card.status-in_progress {
    border-color: #fcd34d;
    background: #fffbeb;
}

.chat-hub-task-card.status-new::before,
.chat-hub-task-card.status-in_progress::before {
    background: #f59e0b;
}

.chat-hub-task-card.status-completed {
    border-color: #bbf7d0;
    background: #f7fef9;
}

.chat-hub-task-card.status-completed::before {
    background: #16a34a;
}

.chat-hub-order-head,
.chat-hub-instruction-head,
.chat-hub-instruction-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.35rem;
}

.chat-hub-order-collapse-toggle {
    width: 1.9rem;
    min-width: 1.9rem;
    height: 1.9rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.58rem;
    background: rgba(255, 255, 255, 0.78);
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.14s ease, border-color 0.14s ease, background-color 0.14s ease;
}

.chat-hub-order-collapse-toggle:hover {
    transform: translateY(-1px);
    border-color: #93c5fd;
    background: #EFF6FF;
    color: #2563eb;
}

.chat-hub-order-collapse-toggle .chat-hub-svg {
    width: 0.9rem;
    height: 0.9rem;
}

.chat-hub-status-pill {
    min-height: 1.55rem;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.65rem;
    font-size: 0.68rem;
    font-weight: 900;
}

.chat-hub-status-pill.icon-only {
    width: 1.65rem;
    min-width: 1.65rem;
    padding: 0;
    border-radius: 0.55rem;
}

.chat-hub-status-pill.icon-only .chat-hub-svg {
    width: 0.95rem;
    height: 0.95rem;
}

.chat-hub-order-card.status-in_progress .chat-hub-status-pill {
    background: #ede9fe;
    color: #6d28d9;
}

.chat-hub-order-card.status-problem .chat-hub-status-pill {
    background: #fee2e2;
    color: #b91c1c;
}

.chat-hub-order-card.status-activated .chat-hub-status-pill {
    background: #dcfce7;
    color: #15803d;
}

.chat-hub-order-card.status-canceled .chat-hub-status-pill {
    background: #e2e8f0;
    color: #475569;
}

.chat-hub-order-details {
    display: block;
}

.chat-hub-order-collapsed-summary {
    display: none;
}

.chat-hub-order-card.is-collapsed {
    padding-block: 0.62rem;
}

.chat-hub-order-card.is-collapsed .chat-hub-order-head {
    margin-bottom: 0.35rem;
}

.chat-hub-order-card.is-collapsed .chat-hub-order-details {
    display: none;
}

.chat-hub-order-card.is-collapsed .chat-hub-order-collapsed-summary {
    display: grid;
    grid-template-columns: minmax(5rem, auto) minmax(0, 1fr);
    gap: 0.5rem;
    align-items: center;
}

.chat-hub-order-collapsed-summary strong {
    color: #0f172a;
    font-size: 0.76rem;
    font-weight: 950;
}

.chat-hub-order-collapsed-summary span {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-hub-order-owner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    margin-bottom: 0.3rem;
}

.chat-hub-audit-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.28rem;
}

.chat-hub-audit-chip {
    min-height: 1.35rem;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    color: #475569;
    padding: 0.12rem 0.42rem;
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    font-size: 0.68rem;
    font-weight: 850;
}

.chat-hub-audit-chip .chat-hub-svg {
    width: 0.72rem;
    height: 0.72rem;
}

.chat-hub-audit-chip em {
    font-style: normal;
}

.chat-hub-order-owner span,
.chat-hub-instruction-meta span {
    color: #6B7280;
    font-size: 0.72rem;
    font-weight: 800;
}

.chat-hub-order-owner .chat-hub-audit-chip {
    color: #475569;
    font-size: 0.68rem;
    font-weight: 850;
}

.chat-hub-order-text {
    display: block;
}

.chat-hub-problem-note {
    margin-top: 0.55rem;
    border: 1px solid #fecaca;
    border-radius: 0.75rem;
    background: #fef2f2;
    padding: 0.55rem;
    color: #991b1b;
}

.chat-hub-problem-note strong,
.chat-hub-problem-note span {
    display: block;
}

.chat-hub-problem-note strong {
    font-size: 0.76rem;
    font-weight: 900;
    margin-bottom: 0.25rem;
}

.chat-hub-problem-note span {
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.65;
}

.chat-hub-task-reply {
    margin-top: 0.55rem;
    border: 1px solid #BFDBFE;
    border-radius: 0.75rem;
    background: #EFF6FF;
    padding: 0.55rem;
    color: #0F172A;
}

.chat-hub-task-reply strong,
.chat-hub-task-reply span {
    display: block;
}

.chat-hub-task-reply strong {
    font-size: 0.76rem;
    font-weight: 900;
    margin-bottom: 0.25rem;
}

.chat-hub-task-reply span {
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.65;
}

.chat-hub-order-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.chat-hub-order-actions.compact-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.34rem;
}

.chat-hub-order-actions button {
    border: 1px solid #E5E7EB;
    border-radius: 0.7rem;
    background: #F9FAFB;
    color: #111827;
    min-height: 1.9rem;
    padding: 0.3rem 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 900;
}

.chat-hub-order-actions button.icon-only {
    width: 2.05rem;
    min-width: 2.05rem;
    min-height: 2.05rem;
    padding: 0;
    border-radius: 0.62rem;
}

.chat-hub-order-actions button.icon-only .chat-hub-svg {
    width: 0.95rem;
    height: 0.95rem;
}

.chat-hub-order-actions button:hover {
    border-color: #BFDBFE;
    color: #2563EB;
    background: #EFF6FF;
}

.chat-hub-order-actions button.danger {
    color: #b91c1c;
}

.chat-hub-order-actions button.warning {
    color: #475569;
}

.chat-hub-order-actions button.warning:hover {
    border-color: #cbd5e1;
    color: #334155;
    background: #f1f5f9;
}

.chat-hub-instruction-card.pinned {
    border-color: #f59e0b;
    background: #fffaf0;
}

.chat-hub-instruction-head span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #c2410c;
    font-size: 0.78rem;
    font-weight: 900;
}

.chat-hub-section-title {
    color: #6B7280;
    font-size: 0.78rem;
    font-weight: 900;
    padding: 0.35rem 0.15rem 0;
}

.chat-hub-empty,
.chat-hub-popover-empty {
    min-height: 12rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    color: #6B7280;
    text-align: center;
}

.chat-hub-empty .chat-hub-svg {
    width: 2.1rem;
    height: 2.1rem;
    color: #94a3b8;
}

.chat-hub-empty strong {
    color: #111827;
    font-size: 0.9rem;
    font-weight: 900;
}

.chat-hub-empty span {
    max-width: 18rem;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.7;
}

.chat-hub-popover {
    position: absolute;
    top: calc(100% - 0.25rem);
    left: 0.75rem;
    width: min(21rem, calc(100vw - 3rem));
    max-height: 28rem;
    overflow: hidden;
    border: 1px solid #E5E7EB;
    border-radius: 0.9rem;
    background: #ffffff;
    box-shadow: 0 22px 54px -32px rgba(15, 23, 42, 0.6);
    z-index: 3;
}

.chat-hub-popover-head {
    min-height: 3rem;
    border-bottom: 1px solid #E5E7EB;
    padding: 0.65rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.chat-hub-popover-head strong {
    font-size: 0.85rem;
    font-weight: 900;
}

.chat-hub-popover-head button {
    border: 0;
    background: #EFF6FF;
    color: #2563EB;
    border-radius: 0.65rem;
    min-height: 2rem;
    padding: 0.25rem 0.55rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 900;
}

.chat-hub-notification-list {
    max-height: 22rem;
    overflow-y: auto;
}

.chat-hub-notification-list button {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #E5E7EB;
    background: #ffffff;
    color: #111827;
    text-align: right;
    padding: 0.65rem 0.75rem;
    display: block;
}

.chat-hub-notification-list button.unread {
    background: #EFF6FF;
}

.chat-hub-notification-list span,
.chat-hub-notification-list strong,
.chat-hub-notification-list small {
    display: block;
}

.chat-hub-notification-list span {
    color: #2563EB;
    font-size: 0.68rem;
    font-weight: 900;
}

.chat-hub-notification-list strong {
    color: #0f172a;
    font-size: 0.78rem;
    font-weight: 900;
}

.chat-hub-notification-list small {
    color: #6B7280;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.55;
}

.chat-hub-toggle {
    min-height: 3rem;
    border-bottom: 1px solid #E5E7EB;
    padding: 0.65rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.chat-hub-toggle span {
    color: #111827;
    font-size: 0.8rem;
    font-weight: 900;
}

.chat-hub-toggle input {
    position: absolute;
    opacity: 0;
}

.chat-hub-toggle i {
    width: 2.65rem;
    height: 1.45rem;
    border-radius: 999px;
    background: #E5E7EB;
    position: relative;
    transition: background-color 0.15s ease;
}

.chat-hub-toggle i::after {
    content: '';
    position: absolute;
    top: 0.18rem;
    right: 0.2rem;
    width: 1.08rem;
    height: 1.08rem;
    border-radius: 999px;
    background: #ffffff;
    transition: transform 0.15s ease;
}

.chat-hub-toggle input:checked + i {
    background: #0f766e;
}

.chat-hub-toggle input:checked + i::after {
    transform: translateX(-1.15rem);
}

.chat-hub-sound-tests {
    border-bottom: 1px solid #E5E7EB;
    padding: 0.55rem 0.75rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.chat-hub-sound-tests button {
    border: 1px solid #BFDBFE;
    border-radius: 0.65rem;
    background: #EFF6FF;
    color: #2563EB;
    min-height: 2.1rem;
    padding: 0.3rem 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    font-size: 0.72rem;
    font-weight: 900;
    cursor: pointer;
}

.chat-hub-sound-tests button:hover {
    border-color: #93c5fd;
    background: #DBEAFE;
}

.chat-hub-sound-tests .chat-hub-svg {
    width: 0.9rem;
    height: 0.9rem;
}

.chat-hub-modal {
    position: fixed;
    inset: 0;
    z-index: 260;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(6px);
}

.chat-hub-modal-card {
    width: min(29rem, 100%);
    max-height: min(38rem, calc(100vh - 2rem));
    overflow: hidden;
    border: 1px solid #E5E7EB;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 28px 70px -36px rgba(15, 23, 42, 0.7);
    display: flex;
    flex-direction: column;
}

.chat-hub-history-card {
    width: min(34rem, 100%);
}

.chat-hub-modal-head,
.chat-hub-modal-actions {
    min-height: 3.6rem;
    padding: 0.8rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.chat-hub-modal-head {
    border-bottom: 1px solid #E5E7EB;
    background: #F9FAFB;
}

.chat-hub-modal-head strong {
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 900;
}

.chat-hub-modal-head button {
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.7rem;
    background: #ffffff;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chat-hub-modal-body {
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.chat-hub-modal-body label {
    color: #6B7280;
    font-size: 0.74rem;
    font-weight: 900;
}

.chat-hub-modal-body textarea,
.chat-hub-modal-body select,
.chat-hub-modal-body input[type="date"],
.chat-hub-modal-body input[type="file"] {
    width: 100%;
    border: 1px solid #E5E7EB;
    border-radius: 0.75rem;
    background: #F9FAFB;
    color: #0f172a;
    padding: 0.6rem 0.75rem;
    font-size: 0.86rem;
    font-weight: 700;
    outline: none;
}

.chat-hub-history-item {
    border: 1px solid #E5E7EB;
    border-radius: 0.85rem;
    background: #F9FAFB;
    padding: 0.75rem;
}

.chat-hub-history-item + .chat-hub-history-item {
    margin-top: 0.65rem;
}

.chat-hub-history-item div {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.chat-hub-history-item strong {
    color: #0f172a;
    font-size: 0.8rem;
    font-weight: 900;
}

.chat-hub-history-item span {
    color: #6B7280;
    font-size: 0.72rem;
    font-weight: 800;
}

.chat-hub-history-item p {
    border: 1px solid #E5E7EB;
    border-radius: 0.65rem;
    background: #ffffff;
    color: #111827;
    padding: 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.chat-hub-modal-body textarea:focus,
.chat-hub-modal-body select:focus,
.chat-hub-modal-body input[type="date"]:focus {
    border-color: #93c5fd;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.22);
}

.chat-hub-checkline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chat-hub-checkline input {
    width: 1rem;
    height: 1rem;
}

.chat-hub-modal-actions {
    border-top: 1px solid #E5E7EB;
    background: #F9FAFB;
    justify-content: flex-start;
}

.chat-hub-modal-actions button {
    min-height: 2.35rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.75rem;
    background: #ffffff;
    color: #111827;
    padding: 0.45rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 900;
}

.chat-hub-modal-actions button.primary {
    background: #2563EB;
    border-color: #2563EB;
    color: #ffffff;
}

.chat-hub-modal.image-preview {
    background: rgba(2, 6, 23, 0.82);
}

.chat-hub-modal.image-preview img {
    max-width: min(86vw, 64rem);
    max-height: 82vh;
    object-fit: contain;
    border-radius: 0.9rem;
    box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.85);
}

.chat-hub-preview-close {
    position: fixed;
    top: 1rem;
    left: 1rem;
    background: #ffffff;
    z-index: 2;
}

@media (max-width: 640px) {
    .chat-hub-root {
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
    }

    .chat-hub-root.picture-in-picture {
        left: auto;
        right: auto;
        bottom: auto;
        width: 100vw;
        height: 100vh;
    }

    .chat-hub-bubble {
        width: 3.75rem;
        height: 3.75rem;
    }

    .chat-hub-panel,
    .chat-hub-panel.expanded {
        width: 100%;
        height: min(44rem, calc(100vh - 1.5rem));
        border-radius: 0.95rem;
    }

    .chat-hub-resize-handle {
        display: none;
    }

    .chat-hub-tabs button {
        min-height: 2.45rem;
    }

    .chat-hub-composer-row {
        grid-template-columns: 2.25rem 2.25rem minmax(0, 1fr) 2.35rem;
    }

    .chat-hub-private-picker {
        right: 0.35rem;
    }

    .chat-hub-popover {
        left: 0.5rem;
        right: 0.5rem;
        width: auto;
    }
}

/* =========================================
   Cards
========================================= */
.clean-card {
    background: var(--surface-elevated);
    border-radius: 1rem;
    box-shadow: 0 18px 40px -34px rgba(15, 23, 42, 0.35);
    border: 1px solid var(--border-soft);
}

.erp-control,
.erp-outline-button,
.erp-columns-menu > summary {
    min-height: 2.25rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.5rem;
    background: #ffffff;
    color: #111827;
    padding: 0.45rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.2;
}

.erp-outline-button,
.erp-columns-menu > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.erp-outline-button:hover,
.erp-columns-menu > summary:hover {
    border-color: #b8c7da;
    background: #F9FAFB;
    color: #0f172a;
}

.erp-columns-menu {
    position: relative;
    z-index: 20;
}

.erp-columns-menu > summary {
    list-style: none;
}

.erp-columns-menu > summary::-webkit-details-marker {
    display: none;
}

.erp-columns-menu-panel {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    min-width: 13rem;
    max-width: min(18rem, calc(100vw - 2rem));
    padding: 0.65rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.5rem;
    background: #ffffff;
    box-shadow: 0 24px 44px -28px rgba(15, 23, 42, 0.35);
    display: grid;
    gap: 0.45rem;
}

.erp-check-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #111827;
    font-size: 0.75rem;
    font-weight: 800;
    cursor: pointer;
}

.erp-check-option input {
    accent-color: #2563eb;
}

.erp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.erp-legend span,
.erp-mini-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    background: #F9FAFB;
    color: #6B7280;
    border: 1px solid #E5E7EB;
    padding: 0.3rem 0.6rem;
    font-size: 0.68rem;
    font-weight: 900;
}

.erp-legend span::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: #94a3b8;
}

.erp-legend span[data-tone="success"]::before { background: #059669; }
.erp-legend span[data-tone="info"]::before { background: #0284c7; }
.erp-legend span[data-tone="warning"]::before { background: #d97706; }
.erp-legend span[data-tone="danger"]::before { background: #dc2626; }

.erp-metric-card,
.erp-category-card {
    position: relative;
    overflow: hidden;
    min-height: 9.5rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.5rem;
    background: #ffffff;
    padding: 1rem;
    box-shadow: 0 18px 34px -30px rgba(15, 23, 42, 0.32);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.erp-category-card {
    width: 100%;
    cursor: pointer;
}

.erp-metric-card:hover,
.erp-metric-card:focus,
.erp-category-card:hover,
.erp-category-card:focus {
    border-color: #c6d3e3;
    box-shadow: 0 20px 38px -30px rgba(15, 23, 42, 0.42);
    outline: none;
}

.erp-metric-accent {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 0.25rem;
    background: #6B7280;
}

.erp-metric-card[data-tone="success"] .erp-metric-accent { background: #059669; }
.erp-metric-card[data-tone="info"] .erp-metric-accent { background: #0284c7; }
.erp-metric-card[data-tone="focus"] .erp-metric-accent { background: var(--brand-primary); }
.erp-metric-card[data-tone="warning"] .erp-metric-accent { background: #d97706; }
.erp-metric-card[data-tone="danger"] .erp-metric-accent { background: #dc2626; }

.erp-metric-label {
    color: #6B7280;
    font-size: 0.75rem;
    font-weight: 900;
}

.erp-metric-value {
    margin-top: 0.45rem;
    color: #0f172a;
    font-size: 1.8rem;
    line-height: 1;
    font-weight: 900;
}

.erp-metric-note {
    margin-top: 0.8rem;
    color: #6B7280;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.6;
}

.erp-metric-help {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #6B7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.78rem;
}

.inventory-progress-track {
    height: 0.45rem;
    border-radius: 999px;
    background: #E5E7EB;
    overflow: hidden;
}

.inventory-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #059669;
}

.crm-table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 820px;
}

.crm-responsive-table th,
.crm-responsive-table td {
    white-space: normal;
    vertical-align: middle;
}

.crm-status-chip,
.crm-value-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 1.55rem;
    border-radius: 999px;
    border: 1px solid #E5E7EB;
    background: #F9FAFB;
    color: #111827;
    padding: 0.2rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 900;
}

.crm-status-chip > span:first-child {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: currentColor;
}

.crm-status-chip.is-success,
.crm-value-chip.is-success {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #047857;
}

.crm-status-chip.is-info {
    border-color: #bae6fd;
    background: #f0f9ff;
    color: #0369a1;
}

.crm-status-chip.is-muted,
.crm-value-chip.is-muted,
.crm-value-chip.is-neutral {
    border-color: #E5E7EB;
    background: #F9FAFB;
    color: #6B7280;
}

.crm-value-chip.is-warning {
    border-color: #fde68a;
    background: #fffbeb;
    color: #b45309;
}

.crm-value-chip.is-focus {
    border-color: #BFDBFE;
    background: #EFF6FF;
    color: #2563EB;
}

.customer-profile-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.35rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.5rem;
    background: #ffffff;
}

.customer-profile-tabs button {
    min-height: 2.2rem;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    background: #F9FAFB;
    color: #6B7280;
    padding: 0.45rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 900;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.customer-profile-tabs button.is-active {
    border-color: #BFDBFE;
    background: #EFF6FF;
    color: #2563EB;
}

.customer-profile-panel[hidden] {
    display: none !important;
}

@media (max-width: 760px) {
    .erp-columns-menu-panel {
        position: fixed;
        left: 1rem;
        right: 1rem;
        top: auto;
    }

    .crm-table {
        min-width: 680px;
    }

    .crm-responsive-table [data-crm-col="invoice"],
    .crm-responsive-table [data-crm-col="start"],
    .crm-responsive-table [data-crm-col="products"] {
        display: none;
    }

    .customer-profile-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================
   Scrollbar
========================================= */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9CA3AF;
}

.sidebar-scroll {
    scrollbar-width: thin;
    scrollbar-color: #D1D5DB transparent;
}

/* =========================================
   ERP Context Menu + Drag Scroll
========================================= */
.erp-context-menu {
    position: fixed;
    z-index: 360;
    width: min(18rem, calc(100vw - 1.25rem));
    max-height: min(72vh, 34rem);
    overflow-y: auto;
    padding: 0.42rem;
    border: 1px solid rgba(203, 213, 225, 0.85);
    border-radius: 0.78rem;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 26px 62px -34px rgba(15, 23, 42, 0.62);
    direction: rtl;
    backdrop-filter: blur(14px);
}

.erp-context-menu.hidden {
    display: none;
}

.erp-context-menu-item {
    width: 100%;
    min-height: 2.12rem;
    display: grid;
    grid-template-columns: 1.45rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    border: 0;
    border-radius: 0.52rem;
    background: transparent;
    color: #1f2937;
    padding: 0.38rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 850;
    text-align: right;
    cursor: pointer;
    transition: background-color 0.14s ease, color 0.14s ease;
}

.erp-context-menu-item:hover {
    background: #eef4ff;
    color: var(--selection-blue);
}

.erp-context-menu-item:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.erp-context-menu-item.tone-danger {
    color: #dc2626;
}

.erp-context-menu-item.tone-success {
    color: #047857;
}

.erp-context-menu-icon {
    width: 1.45rem;
    height: 1.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    font-size: 0.92rem;
}

.erp-context-menu-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.erp-context-menu-shortcut {
    color: #94a3b8;
    font-size: 0.7rem;
    font-weight: 800;
    direction: ltr;
}

.erp-context-menu-divider {
    height: 1px;
    margin: 0.34rem 0.25rem;
    background: #e5e7eb;
}

:root[data-theme="dark"] .erp-context-menu {
    border-color: rgba(148, 163, 184, 0.28);
    background: rgba(19, 32, 56, 0.98);
    box-shadow: 0 28px 64px -36px rgba(2, 6, 23, 0.92);
}

:root[data-theme="dark"] .erp-context-menu-item {
    color: #e5edff;
}

:root[data-theme="dark"] .erp-context-menu-item:hover {
    background: rgba(91, 141, 238, 0.18);
    color: #93c5fd;
}

:root[data-theme="dark"] .erp-context-menu-shortcut {
    color: #94a3b8;
}

:root[data-theme="dark"] .erp-context-menu-divider {
    background: rgba(148, 163, 184, 0.24);
}

.erp-drag-scrolling,
.erp-drag-scrolling * {
    cursor: grabbing !important;
    user-select: none !important;
}

body.erp-drag-scroll-active {
    cursor: grabbing;
}

.inventory-table-scroll,
.overflow-x-auto,
.erp-horizontal-drag-scroll {
    cursor: grab;
}

.inventory-table-scroll :is(button, a, input, textarea, select),
.overflow-x-auto :is(button, a, input, textarea, select),
.erp-horizontal-drag-scroll :is(button, a, input, textarea, select) {
    cursor: revert;
}

.primary-sidebar,
.primary-nav-group,
.primary-sidebar-footer {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.primary-sidebar::-webkit-scrollbar,
.primary-nav-group::-webkit-scrollbar,
.primary-sidebar-footer::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.primary-sidebar-scroll-progress {
    position: absolute;
    inset-inline-start: 0.18rem;
    top: 0;
    width: 0.16rem;
    border-radius: 999px;
    background: var(--selection-blue);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, height 0.18s ease, transform 0.08s linear;
}

.copy-on-dblclick {
    cursor: copy;
    user-select: text;
}

.copy-on-dblclick:hover {
    color: var(--selection-blue, #2563eb) !important;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 0.18rem;
}

/* =========================================
   Loader
========================================= */
.loader {
    border-top-color: var(--royal-600);
    animation: spinner 1s linear infinite;
}

@keyframes spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =========================================
   Sidebar Main
========================================= */
.primary-sidebar {
    width: var(--primary-sidebar-width);
    padding: 1rem 0.75rem;
    transition: width 0.28s ease, padding 0.28s ease, box-shadow 0.28s ease;
    background: linear-gradient(180deg, #ffffff 0%, #F9FAFB 100%);
    position: relative;
}

body.sidebar-expanded .primary-sidebar {
    width: var(--primary-sidebar-width);
    padding: 1rem;
}

#secondarySidebar {
    width: var(--secondary-sidebar-width) !important;
    min-width: var(--secondary-sidebar-width);
    transition: width 0.22s ease, min-width 0.22s ease, opacity 0.2s ease, transform 0.3s ease;
}

.sidebar-resize-handle {
    position: absolute;
    top: 0.65rem;
    bottom: 0.65rem;
    left: -0.42rem;
    width: 0.82rem;
    z-index: 44;
    cursor: ew-resize;
    touch-action: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sidebar-resize-handle::after {
    content: '';
    width: 0.18rem;
    height: clamp(2.4rem, 16%, 5.4rem);
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.44);
    opacity: 0;
    transition: opacity 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.primary-sidebar:hover .sidebar-resize-handle::after,
#secondarySidebar:hover .sidebar-resize-handle::after,
.primary-sidebar.resizing .sidebar-resize-handle::after,
#secondarySidebar.resizing .sidebar-resize-handle::after {
    opacity: 1;
    background: rgba(59, 130, 246, 0.84);
    box-shadow: 0 0 0 0.22rem rgba(59, 130, 246, 0.18);
}

.primary-sidebar.resizing,
#secondarySidebar.resizing {
    transition: none !important;
}

body.sidebar-resizing,
body.sidebar-resizing * {
    user-select: none !important;
    cursor: ew-resize !important;
}

body.secondary-sidebar-hidden #secondarySidebar .sidebar-resize-handle {
    display: none;
}

body.secondary-sidebar-hidden #secondarySidebar {
    width: 0 !important;
    min-width: 0 !important;
    opacity: 0;
    border-left-width: 0 !important;
    overflow: hidden;
    pointer-events: none;
    box-shadow: none !important;
}

.sidebar-toggle-btn-secondary {
    border-style: dashed;
}

.secondary-sidebar-controls {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.2rem 0.1rem 0.75rem;
    margin-bottom: 0.65rem;
    border-bottom: 1px solid #e5e7eb;
}

.secondary-sidebar-visibility-btn {
    width: 100%;
    min-height: 2.2rem;
    border-radius: 0.72rem;
    border: 1px solid #dbe3f0;
    background: #ffffff;
    color: #4b5563;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
}

.secondary-sidebar-visibility-btn:hover {
    border-color: #b9d4ff;
    background: #f8fbff;
    color: #0b5deb;
}

.secondary-sidebar-width-controls {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.secondary-sidebar-width-step {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.55rem;
    border: 1px solid #dbe3f0;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.88rem;
    font-weight: 900;
    line-height: 1;
}

.secondary-sidebar-width-step:hover {
    border-color: #b9d4ff;
    background: #f8fbff;
    color: #0b5deb;
}

.secondary-sidebar-width-range {
    flex: 1;
    accent-color: #0b5deb;
    cursor: pointer;
}

.secondary-sidebar-width-value {
    min-width: 3.15rem;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 800;
    color: #64748b;
}

.primary-sidebar-top {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.brand-lockup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 3rem;
}

.brand-mark {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid var(--royal-100);
    color: var(--royal-700);
    font-size: 1.125rem;
    font-weight: 900;
    flex-shrink: 0;
    overflow: hidden;
    padding: 0.25rem;
}

.brand-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-copy {
    display: none;
    min-width: 0;
}

body.sidebar-expanded .brand-copy {
    display: block;
}

.brand-title {
    font-size: 0.95rem;
    font-weight: 900;
    color: var(--text-strong);
    line-height: 1.2;
}

.brand-subtitle {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
}

.sidebar-toggle-btn {
    width: 100%;
    border-radius: 0.95rem;
    border: 1px solid var(--border-soft);
    background: var(--surface-elevated);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.6rem 0.75rem;
}

.sidebar-toggle-btn:hover {
    color: var(--royal-700);
    border-color: var(--royal-200);
    background: var(--royal-50);
}

.sidebar-toggle-btn span {
    display: none;
    font-size: 0.82rem;
    font-weight: 800;
}

body.sidebar-expanded .sidebar-toggle-btn span {
    display: inline;
}

.primary-nav-group {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-inline-end: 0.15rem;
}

#main-btn-finance {
    order: 1;
}

#main-btn-inventory {
    order: 2;
}

#main-btn-crm {
    order: 3;
}

#main-tasks-menu {
    order: 4;
}

#main-btn-alerts {
    order: 5;
}

#main-btn-tools {
    order: 6;
}

.nav-main-link {
    width: 100%;
    min-height: 4.5rem;
    padding: 0.8rem 0.45rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 1px solid transparent;
    border-radius: 1rem;
    color: var(--text-muted);
    background: transparent;
    transition: all 0.22s ease;
    position: relative;
}

.nav-main-link.active-main {
    color: #ffffff;
    background: var(--selection-blue);
    border-color: var(--selection-blue);
    box-shadow: 0 18px 34px -24px rgba(11, 93, 235, 0.9);
}

.nav-main-link.active-main:hover,
#main-btn-upgrades.active-main {
    color: #ffffff !important;
    background: var(--selection-blue) !important;
    border-color: var(--selection-blue) !important;
}

.nav-main-link:hover {
    color: var(--text-strong);
    background-color: #F9FAFB;
    border-color: #E5E7EB;
}

.nav-main-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    flex-shrink: 0;
}

.nav-main-label {
    display: none;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
}

@media (min-width: 769px) {
    body:not(.sidebar-expanded) #primarySidebar .nav-main-link[data-collapsed-tooltip]::after {
        content: attr(data-collapsed-tooltip);
        position: absolute;
        right: calc(100% + 0.55rem);
        top: 50%;
        transform: translateY(-50%) translateX(0.4rem);
        background: #0f172a;
        color: #ffffff;
        border-radius: 0.62rem;
        padding: 0.36rem 0.62rem;
        font-size: 0.72rem;
        font-weight: 800;
        line-height: 1.1;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        z-index: 82;
        box-shadow: 0 14px 28px -18px rgba(15, 23, 42, 0.9);
        transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
    }

    body:not(.sidebar-expanded) #primarySidebar .nav-main-link[data-collapsed-tooltip]:hover::after,
    body:not(.sidebar-expanded) #primarySidebar .nav-main-link[data-collapsed-tooltip]:focus-visible::after {
        opacity: 1;
        visibility: visible;
        transform: translateY(-50%) translateX(0);
    }
}

body.sidebar-expanded .nav-main-link {
    min-height: 3.4rem;
    padding: 0.8rem 0.9rem;
    flex-direction: row;
    justify-content: flex-start;
}

body.sidebar-expanded .brand-lockup {
    justify-content: flex-start;
}

body.sidebar-expanded .nav-main-label {
    display: block;
    font-size: 0.88rem;
    text-align: right;
}

.nav-main-collapsible {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.nav-main-arrow {
    display: none;
    margin-right: auto;
    transition: transform 0.18s ease;
}

body.sidebar-expanded .nav-main-arrow {
    display: inline-flex;
}

.nav-main-collapsible.open .nav-main-arrow {
    transform: rotate(180deg);
}

.nav-main-submenu {
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.15rem 0.35rem 0.25rem;
}

.nav-main-collapsible.open .nav-main-submenu {
    display: flex;
}

body:not(.sidebar-expanded) .nav-main-collapsible.open .nav-main-submenu,
body:not(.sidebar-expanded) .nav-main-submenu {
    display: none !important;
}

.nav-main-subitem {
    width: 100%;
    min-height: 2.35rem;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    background: #F9FAFB;
    color: #6B7280;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
}

.nav-main-subitem + .nav-main-subitem {
    margin-top: 0.35rem;
}

body.sidebar-expanded .nav-main-subitem {
    justify-content: space-between;
    padding: 0.45rem 0.8rem;
    font-size: 0.78rem;
    text-align: right;
}

body.sidebar-expanded .nav-main-subitem + .nav-main-subitem {
    border-top-color: var(--brand-border);
    padding-top: 0.65rem;
}

.nav-main-subitem:hover {
    border-color: var(--royal-100);
    background: #ffffff;
    color: var(--royal-700);
}

.nav-main-subitem.active-submain {
    border-color: var(--selection-blue);
    background: var(--selection-blue);
    color: #ffffff;
    box-shadow: 0 12px 24px -18px rgba(11, 93, 235, 0.82);
}

body.sidebar-expanded .nav-main-subitem.active-submain {
    border-color: var(--selection-blue);
}

.nav-main-subitem small {
    color: #94a3b8;
    font-size: 0.62rem;
}

.nav-main-dot {
    position: absolute;
    top: 0.65rem;
    right: 0.85rem;
    display: inline-flex;
    width: 0.6rem;
    height: 0.6rem;
}

body.sidebar-expanded .nav-main-dot {
    right: auto;
    left: 0.9rem;
}

.primary-sidebar-footer {
    margin-top: auto;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-soft);
}

.primary-sidebar-footer-logout {
    margin-top: 0;
    padding-top: 0.55rem;
    border-top: none;
}

.nav-main-settings {
    min-height: 3.5rem;
}

.nav-main-logout {
    color: #dc2626;
}

.nav-main-logout:hover {
    background-color: #fff5f5;
    border-color: #fecaca;
    color: #b91c1c;
}

#main-btn-logout,
#sidebarLogoutButton,
#floatingLogoutButton {
    display: none !important;
}

.floating-logout-btn {
    width: 3.75rem;
    min-height: 3.75rem;
    padding: 0;
    justify-content: center;
    overflow: hidden;
    gap: 0;
    transition: width 0.26s ease, padding 0.26s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.floating-logout-btn:hover,
.floating-logout-btn:focus-visible {
    width: 10.5rem;
    padding: 0.75rem 0.95rem;
    justify-content: flex-start;
    background: #fff5f5;
    border-color: #fca5a5;
    color: #b91c1c;
}

#floatingLogoutButton > span:last-child {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    margin-inline-start: 0;
    color: #dc2626;
    transition: max-width 0.26s ease, opacity 0.18s ease, margin-inline-start 0.26s ease;
}

.floating-logout-btn:hover > span:last-child,
.floating-logout-btn:focus-visible > span:last-child {
    max-width: 7rem;
    opacity: 1;
    margin-inline-start: 0.45rem;
    color: #b91c1c;
}

.app-topbar {
    padding: 1rem 1rem 0;
}

body.app-focus-mode #primarySidebar,
body.app-focus-mode #secondarySidebar,
body.app-focus-mode #appTopbar,
body.app-focus-mode #mobileOverlay,
body.app-focus-mode #chatHubRoot {
    display: none !important;
}

body.app-focus-mode #appShell > main {
    width: 100vw;
    max-width: 100vw;
}

body.app-focus-mode [data-focus-hide="stats"],
body.app-focus-mode [data-focus-hide~="stats"] {
    display: none !important;
}

body.app-focus-mode .upgrade-task-list-wrap {
    padding: 0.8rem 1rem 1rem !important;
}

.topbar-icon-button.is-active {
    color: #ffffff;
    background: var(--selection-blue);
    border-color: var(--selection-blue);
}

.focus-mode-exit-button {
    display: none;
    position: fixed;
    top: auto !important;
    bottom: 1.25rem;
    left: 5.25rem;
    z-index: 260;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.95rem;
    border: 1px solid rgba(191, 219, 254, 0.9);
    background: #ffffff;
    padding: 0 1rem;
    color: var(--brand-primary);
    font-size: 0.8rem;
    font-weight: 900;
    box-shadow: 0 18px 45px -26px rgba(15, 23, 42, 0.45);
}

body.app-focus-mode .focus-mode-exit-button {
    display: inline-flex;
}

body.app-focus-mode:has(.whatsapp-inbox-shell) .focus-mode-exit-button {
    top: 0.75rem !important;
    bottom: auto !important;
    left: 0.75rem !important;
    z-index: 320;
}

body.focus-exit-guard #primarySidebar,
body.focus-exit-guard #secondarySidebar,
body.focus-exit-guard #appTopbar,
body.focus-exit-guard #floatingLogoutButton,
body.focus-exit-guard .nav-main-link,
body.focus-exit-guard .nav-sub-link,
body.focus-exit-guard .nav-main-subitem {
    pointer-events: none !important;
}

.shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 0.9rem;
}

.shortcut-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-height: 4.75rem;
    border: 1px solid var(--brand-border);
    border-radius: 0.9rem;
    background: #ffffff;
    padding: 1rem;
    box-shadow: 0 18px 40px -34px rgba(15, 23, 42, 0.35);
}

.shortcut-card kbd {
    min-width: 7.5rem;
    border-radius: 0.7rem;
    border: 1px solid #CBD5E1;
    background: #F8FAFC;
    padding: 0.55rem 0.7rem;
    direction: ltr;
    text-align: center;
    color: #0F172A;
    font-size: 0.78rem;
    font-weight: 900;
    box-shadow: inset 0 -2px 0 rgba(148, 163, 184, 0.22);
}

.shortcut-card span {
    color: var(--text-muted);
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.7;
}

.app-topbar-shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 4.25rem;
    padding: 0.65rem 0.75rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.92));
    box-shadow: 0 20px 50px -42px rgba(15, 23, 42, 0.32);
}

.topbar-sidebar-controls {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

.topbar-sidebar-toggle {
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 0.85rem;
}

.app-topbar-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-inline-start: auto;
}

.topbar-action-wrap {
    position: relative;
    display: inline-flex;
}

.topbar-icon-button,
.current-user-summary {
    position: relative;
    width: 2.8rem;
    height: 2.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(203, 213, 225, 0.8);
    background: rgba(255, 255, 255, 0.9);
    color: #111827;
    cursor: pointer;
    border-radius: 1rem;
    padding: 0;
    box-shadow: 0 14px 28px -24px rgba(15, 23, 42, 0.45);
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.topbar-icon-button:hover,
.topbar-icon-button:focus-visible,
.current-user-summary:hover,
.current-user-summary:focus-visible,
.topbar-icon-button.is-open,
.current-user-summary.is-open {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, 0.22);
    background: rgba(248, 251, 255, 0.98);
    box-shadow: 0 18px 34px -26px rgba(37, 99, 235, 0.55);
    outline: none;
}

.topbar-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.topbar-chat-button.is-open {
    border-color: rgba(37, 99, 235, 0.34);
    background: #eff6ff;
    color: #0b5deb;
    box-shadow: 0 18px 34px -26px rgba(37, 99, 235, 0.62);
}

.topbar-notification-badge {
    position: absolute;
    top: -0.35rem;
    inset-inline-start: -0.35rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.28rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 900;
    line-height: 1;
}

.topbar-notification-badge.hidden {
    display: none !important;
}

.current-user-summary:hover {
    transform: translateY(-1px);
}

.current-user-avatar {
    position: relative;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: visible;
    background: linear-gradient(135deg, var(--royal-600), var(--brand-dark));
    color: #fff;
    font-size: 0.9rem;
    font-weight: 900;
    border: 1px solid rgba(37, 99, 235, 0.15);
    box-shadow: 0 16px 30px -24px rgba(37, 99, 235, 0.8);
}

.current-user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.current-user-avatar::after {
    content: "";
    position: absolute;
    right: -0.05rem;
    bottom: -0.05rem;
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 999px;
    border: 2px solid #fff;
    background: #22c55e;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.current-user-avatar[data-status="busy"]::after {
    background: #f59e0b;
}

.current-user-avatar[data-status="offline"]::after {
    background: #ef4444;
}

.topbar-dropdown {
    position: absolute;
    top: calc(100% + 0.6rem);
    inset-inline-end: 0;
    z-index: 260;
    width: min(300px, calc(100vw - 2rem));
    max-width: 300px;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 55px -34px rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(14px);
    transform-origin: top left;
    animation: topbarDropdownIn 0.16s ease-out;
}

@keyframes topbarDropdownIn {
    from {
        opacity: 0;
        transform: translateY(-0.35rem) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.topbar-dropdown-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0.9rem;
    border-bottom: 1px solid #E5E7EB;
}

.topbar-dropdown-head strong,
.account-menu-head strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 900;
    color: var(--text-strong);
}

.topbar-dropdown-head span,
.account-menu-head span {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
}

.topbar-text-action {
    border: 0;
    background: transparent;
    color: var(--royal-700);
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.72rem;
    font-weight: 900;
    padding: 0.15rem 0;
    transition: color 0.18s ease, opacity 0.18s ease;
}

.topbar-text-action:hover,
.topbar-text-action:focus-visible {
    color: var(--royal-600);
    outline: none;
}

.topbar-text-action:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.account-menu-head {
    padding: 0.9rem 0.95rem 0.7rem;
    border-bottom: 1px solid #E5E7EB;
}

.account-status-control {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid #E5E7EB;
}

.account-status-chip {
    min-height: 2rem;
    border-radius: 999px;
    border: 1px solid #E5E7EB;
    background: #fff;
    color: #6B7280;
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 900;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.account-status-chip:hover,
.account-status-chip:focus-visible,
.account-status-chip.is-active {
    transform: translateY(-1px);
    border-color: #BFDBFE;
    background: #EFF6FF;
    color: var(--royal-700);
    outline: none;
}

.current-availability-summary {
    margin-top: 0.55rem;
    display: grid;
    gap: 0.25rem;
}

.current-availability-summary small {
    display: block;
    margin: 0;
    color: #6B7280;
    font-size: 0.68rem;
    font-weight: 800;
}

.account-status-duration {
    display: grid;
    gap: 0.35rem;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid #E5E7EB;
}

.account-status-duration label {
    color: #6B7280;
    font-size: 0.68rem;
    font-weight: 900;
}

.account-status-duration select {
    min-height: 2.15rem;
    border-radius: 0.7rem;
    font-size: 0.74rem;
}

.account-day-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid #E5E7EB;
    color: #111827;
    font-size: 0.78rem;
    font-weight: 900;
}

.account-day-toggle input {
    width: 1rem;
    height: 1rem;
    accent-color: #16a34a;
}

.availability-badge {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    background: #ffffff;
    padding: 0.28rem 0.55rem;
    color: #111827;
    font-size: 0.72rem;
    font-weight: 900;
    vertical-align: middle;
}

.availability-badge small {
    overflow: hidden;
    max-width: 9rem;
    color: #6B7280;
    font-size: 0.65rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.availability-badge.compact {
    padding: 0.2rem 0.45rem;
    font-size: 0.68rem;
}

.availability-dot {
    width: 0.55rem;
    height: 0.55rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 2px #dcfce7;
}

.availability-busy .availability-dot {
    background: #f59e0b;
    box-shadow: 0 0 0 2px #fef3c7;
}

.availability-offline .availability-dot {
    background: #ef4444;
    box-shadow: 0 0 0 2px #fee2e2;
}

.account-menu-list {
    padding: 0.45rem;
}

.account-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border: 0;
    border-radius: 0.75rem;
    background: transparent;
    color: #111827;
    cursor: pointer;
    padding: 0.72rem 0.75rem;
    text-align: right;
    font-size: 0.82rem;
    font-weight: 800;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.account-menu-item svg {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    color: #6B7280;
}

.account-menu-item:hover,
.account-menu-item:focus-visible {
    transform: translateX(-2px);
    background: #F9FAFB;
    color: #0f172a;
    outline: none;
}

.account-menu-item.danger {
    color: #dc2626;
}

.account-menu-item.danger svg {
    color: #ef4444;
}

.account-menu-item.danger:hover,
.account-menu-item.danger:focus-visible {
    background: #fef2f2;
}

.topbar-notifications-list {
    max-height: 19rem;
    overflow-y: auto;
    padding: 0.35rem;
}

.topbar-notification-item {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.65rem;
    border: 0;
    border-radius: 0.85rem;
    background: transparent;
    cursor: pointer;
    padding: 0.72rem 0.65rem;
    text-align: right;
    transition: background 0.18s ease, transform 0.18s ease;
}

.topbar-notification-item:hover,
.topbar-notification-item:focus-visible {
    transform: translateX(-2px);
    background: #F9FAFB;
    outline: none;
}

.topbar-notification-dot {
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.42rem;
    border-radius: 999px;
    background: #2563eb;
}

.topbar-notification-dot.review {
    background: #f59e0b;
}

.topbar-notification-dot.issue {
    background: #ef4444;
}

.topbar-notification-dot.message {
    background: #22c55e;
}

.topbar-notification-dot.read {
    background: #E5E7EB;
}

.topbar-notification-body {
    min-width: 0;
}

.topbar-notification-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.18rem;
}

.topbar-notification-type {
    color: #6B7280;
    font-size: 0.68rem;
    font-weight: 900;
}

.topbar-read-state {
    border-radius: 999px;
    background: #EFF6FF;
    color: #2563EB;
    padding: 0.15rem 0.45rem;
    font-size: 0.62rem;
    font-weight: 900;
    white-space: nowrap;
}

.topbar-read-state.read {
    background: #f1f5f9;
    color: #6B7280;
}

.topbar-notification-title {
    display: block;
    color: #0f172a;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-notification-desc {
    margin-top: 0.1rem;
    color: #6B7280;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.topbar-empty-state {
    padding: 1.3rem 0.85rem;
    color: #6B7280;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 800;
}

.topbar-dropdown-footer {
    width: 100%;
    border: 0;
    border-top: 1px solid #E5E7EB;
    background: #fff;
    color: var(--royal-700);
    cursor: pointer;
    padding: 0.78rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 900;
    transition: background 0.18s ease, color 0.18s ease;
}

.topbar-dropdown-footer:hover,
.topbar-dropdown-footer:focus-visible {
    background: #F9FAFB;
    color: var(--royal-600);
    outline: none;
}

.topbar-dropdown .hidden {
    display: none !important;
}

.topbar-theme-menu {
    width: min(250px, calc(100vw - 2rem));
}

.topbar-theme-options {
    display: grid;
    gap: 0.35rem;
    padding: 0.5rem;
}

.topbar-theme-option {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    background: transparent;
    color: var(--text-strong);
    cursor: pointer;
    text-align: right;
    padding: 0.62rem 0.7rem;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    display: grid;
    gap: 0.1rem;
}

.topbar-theme-option:hover,
.topbar-theme-option:focus-visible {
    transform: translateX(-2px);
    border-color: var(--brand-blue-100);
    background: var(--brand-blue-50);
    outline: none;
}

.topbar-theme-option.is-active {
    border-color: var(--brand-blue-200);
    background: var(--brand-blue-50);
}

.topbar-theme-option-title {
    font-size: 0.8rem;
    font-weight: 900;
    color: var(--text-strong);
    line-height: 1.45;
}

.topbar-theme-option small {
    font-size: 0.67rem;
    font-weight: 700;
    color: var(--text-muted);
    line-height: 1.45;
}

.topbar-account-menu {
    width: min(280px, calc(100vw - 2rem));
}

.current-user-copy {
    display: none;
}

.current-user-name {
    display: block;
    font-size: 0.92rem;
    font-weight: 900;
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.current-user-role {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.current-user-action {
    display: none;
}

.profile-avatar-uploader {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 1.25rem;
    border: 1px solid #E5E7EB;
    background: #F9FAFB;
}

.profile-avatar-preview {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--royal-600), var(--brand-dark));
    color: #fff;
    font-size: 1.3rem;
    font-weight: 900;
    border: 1px solid rgba(37, 99, 235, 0.12);
}

.profile-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar-actions {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 0.55rem;
}

.profile-avatar-actions input[type="file"] {
    width: 100%;
}

.profile-readonly-field {
    direction: ltr;
    background: #F9FAFB;
    color: #6B7280;
}

.profile-availability-panel,
.profile-working-hours-panel {
    border: 1px solid #E5E7EB;
    border-radius: 1.25rem;
    background: #ffffff;
    padding: 1rem;
}

.profile-working-hours-panel {
    background: #F9FAFB;
}

.profile-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.profile-section-head.compact {
    margin-top: 1rem;
    margin-bottom: 0.6rem;
}

.profile-section-head h4 {
    margin: 0;
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 900;
}

.profile-section-head p {
    margin: 0.2rem 0 0;
    color: #6B7280;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.6;
}

.availability-control-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: end;
}

.availability-control-grid label,
.profile-timezone-field {
    display: grid;
    gap: 0.35rem;
    color: #6B7280;
    font-size: 0.72rem;
    font-weight: 900;
}

.availability-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.availability-actions button,
.availability-exception-form button,
.availability-exception-row button,
.profile-save-schedule {
    min-height: 2.25rem;
    border: 0;
    border-radius: 0.8rem;
    background: #2563eb;
    color: #ffffff;
    cursor: pointer;
    padding: 0.45rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 900;
}

.availability-actions button.ghost,
.availability-exception-row button {
    border: 1px solid #E5E7EB;
    background: #ffffff;
    color: #111827;
}

.availability-day-toggle {
    margin-top: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #111827;
    font-size: 0.82rem;
    font-weight: 900;
}

.availability-day-toggle input {
    width: 1rem;
    height: 1rem;
    accent-color: #16a34a;
}

.availability-exception-form {
    display: grid;
    grid-template-columns: minmax(8rem, 0.8fr) minmax(9rem, 1fr) minmax(0, 1.2fr) auto;
    gap: 0.55rem;
    align-items: center;
}

.availability-exception-row {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.85rem;
    background: #F9FAFB;
    padding: 0.65rem 0.75rem;
}

.availability-exception-row strong,
.availability-exception-row span,
.availability-exception-row small {
    display: block;
}

.availability-exception-row strong {
    color: #0f172a;
    font-size: 0.78rem;
    font-weight: 900;
}

.availability-exception-row span,
.availability-exception-row small,
.availability-empty {
    color: #6B7280;
    font-size: 0.72rem;
    font-weight: 800;
}

.working-hours-editor {
    display: grid;
    gap: 0.5rem;
}

.working-hours-header {
    display: grid;
    grid-template-columns: minmax(4.5rem, 0.8fr) minmax(4.5rem, 0.7fr) minmax(6rem, 1fr) minmax(6rem, 1fr);
    gap: 0.5rem;
    padding: 0 0.2rem;
    color: #6B7280;
    font-size: 0.68rem;
    font-weight: 900;
}

.working-hours-row {
    display: grid;
    grid-template-columns: minmax(4.5rem, 0.8fr) minmax(4.5rem, 0.7fr) minmax(6rem, 1fr) minmax(6rem, 1fr);
    gap: 0.5rem;
    align-items: center;
}

.working-hours-day {
    color: #0f172a;
    font-size: 0.8rem;
    font-weight: 900;
}

.working-hours-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #111827;
    font-size: 0.75rem;
    font-weight: 900;
}

.working-hours-time {
    display: grid;
    gap: 0.25rem;
}

.working-hours-time span {
    color: #6B7280;
    font-size: 0.68rem;
    font-weight: 900;
}

.profile-save-schedule {
    margin-top: 0.85rem;
    background: #16a34a;
}

@media (max-width: 720px) {
    .availability-control-grid,
    .availability-exception-form,
    .working-hours-row {
        grid-template-columns: 1fr;
    }

    .working-hours-header {
        display: none;
    }
}

/* =========================================
   Sidebar Sub
========================================= */
.nav-sub-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.15rem 0 0.75rem;
}

.nav-sub-group + .nav-sub-group {
    margin-top: 0.65rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--brand-border);
}

.nav-sub-heading {
    padding: 0 0.45rem 0.25rem;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.4;
}

.nav-sub-link {
    display: flex;
    align-items: center;
    padding: 0.6rem 1rem;
    border-radius: 0.9rem;
    color: #6B7280;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 0.25rem;
    text-decoration: none;
    user-select: none;
    border: 1px solid transparent;
}

.nav-sub-link:hover {
    background-color: #F9FAFB;
    color: var(--text-strong);
    border-color: #E5E7EB;
}

.nav-sub-link.active-sub {
    background: var(--selection-blue);
    color: #ffffff;
    border-color: var(--selection-blue);
    box-shadow: 0 12px 24px -18px rgba(11, 93, 235, 0.82);
}

.nav-sub-link.active-sub:hover {
    background: var(--selection-blue);
    color: #ffffff;
    border-color: var(--selection-blue);
}

.nav-sub-link svg {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.75rem;
    opacity: 0.8;
    flex-shrink: 0;
}

.nav-sub-link-inventory {
    gap: 0.45rem;
    justify-content: flex-start;
}

.nav-sub-product-icon,
.settings-product-icon {
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(190, 212, 244, 0.9);
    background: rgba(234, 242, 255, 0.92);
    color: var(--selection-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
}

.nav-sub-product-icon.is-empty {
    background: transparent;
    border-color: transparent;
}

.nav-sub-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================
   Inputs
========================================= */
input.edit-input,
select.edit-input,
textarea.edit-input {
    width: 100%;
    padding: 0.5rem 0.7rem;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    color: var(--text-strong);
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    font-size: 0.85rem;
    outline: none;
}

input.edit-input:focus,
select.edit-input:focus,
textarea.edit-input:focus {
    background: #FFFFFF;
    border-color: var(--royal-600);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

textarea.edit-input {
    resize: vertical;
    min-height: 42px;
}

/* =========================================
   Enterprise Auth
========================================= */
.auth-page-modal {
    direction: rtl;
    align-items: stretch;
    justify-content: stretch;
    overflow: auto;
    background: #F9FAFB;
    color: #111827;
    font-family: var(--font-primary);
    letter-spacing: 0;
}

.auth-page-modal.flex {
    display: flex;
}

.auth-split-shell {
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 40fr 60fr;
    background: #ffffff;
}

.auth-context-panel {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #ffffff;
    background:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(135deg, #162033 0%, #101a2b 100%);
    background-size: 34px 34px, 34px 34px, auto;
    animation: authFadeIn 400ms ease both;
}

.auth-context-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.34));
    pointer-events: none;
}

.auth-context-content {
    position: relative;
    z-index: 1;
    width: min(76%, 28rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    direction: rtl;
    text-align: right;
}

.auth-context-line {
    margin: 0;
    letter-spacing: 0;
    text-shadow: 0 8px 20px rgba(2, 6, 23, 0.52);
}

.auth-context-welcome {
    font-size: 2rem;
    line-height: 1.35;
    font-weight: 700;
}

.auth-context-mood {
    font-size: 1.5rem;
    line-height: 1.45;
    font-weight: 500;
}

.auth-context-question {
    font-size: 1.125rem;
    line-height: 1.7;
    font-weight: 400;
    color: rgba(239, 245, 255, 0.95);
    opacity: 0.92;
}

#refundFilterSearch,
#refundFilterStatus,
#refundFilterPriority,
#refundFilterPayment,
#refundFilterDateFrom,
#refundFilterDateTo {
    min-height: 2.25rem;
    border: 1px solid #D4DCE8;
    border-radius: 0.5rem;
    background: #ffffff;
    color: #0f172a;
    padding: 0.45rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.2;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

#refundFilterSearch:focus,
#refundFilterStatus:focus,
#refundFilterPriority:focus,
#refundFilterPayment:focus,
#refundFilterDateFrom:focus,
#refundFilterDateTo:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--focus-ring);
    outline: none;
}

.auth-form-side {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    direction: rtl;
    padding: 3rem 1.5rem;
    background: #F9FAFB;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    padding: 32px;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.12);
    animation: authFormIn 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.auth-card-header {
    margin-bottom: 24px;
}

.auth-card-header h3 {
    margin: 0;
    color: #111827;
    font-size: 1.75rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0;
}

.auth-card-header p {
    margin: 8px 0 0;
    color: #6B7280;
    font-size: 0.95rem;
    line-height: 1.7;
    font-weight: 400;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-form.hidden {
    display: none;
}

.auth-form:not(.hidden) {
    animation: authSlideIn 300ms ease both;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auth-field label {
    color: #111827;
    font-size: 0.82rem;
    line-height: 1.4;
    font-weight: 600;
}

.auth-input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    outline: none;
    background: #ffffff;
    color: #111827;
    font-size: 0.95rem;
    font-weight: 500;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.auth-input::placeholder {
    color: #9CA3AF;
    font-weight: 400;
}

.auth-input:focus {
    border-color: #2563EB;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.auth-input.is-invalid {
    border-color: #DC2626;
    background: #fff7f7;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.08);
}

.auth-password-wrap {
    position: relative;
}

.auth-password-input {
    padding-left: 48px;
}

.auth-password-toggle {
    position: absolute;
    top: 50%;
    left: 6px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #6B7280;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.auth-password-toggle:hover,
.auth-password-toggle:focus-visible {
    color: #2563EB;
    background: #EFF6FF;
    outline: none;
}

.auth-password-toggle svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-form-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    direction: ltr;
}

.auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    direction: rtl;
    color: #6B7280;
    font-size: 0.86rem;
    font-weight: 500;
    cursor: pointer;
}

.auth-remember input {
    width: 16px;
    height: 16px;
    accent-color: #2563EB;
}

.auth-link-button,
.auth-secondary-button {
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.auth-link-button {
    color: #2563EB;
    font-size: 0.86rem;
    font-weight: 600;
}

.auth-link-button:hover,
.auth-link-button:focus-visible {
    text-decoration: underline;
    outline: none;
}

.auth-submit {
    position: relative;
    width: 100%;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 10px;
    background: #2563EB;
    color: #ffffff;
    font-size: 0.96rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.12s ease, opacity 0.18s ease;
}

.auth-submit:hover {
    background: #2563EB;
}

.auth-submit:active {
    transform: scale(0.98);
}

.auth-submit:disabled {
    cursor: not-allowed;
    opacity: 0.82;
}

.auth-button-spinner {
    width: 17px;
    height: 17px;
    display: none;
    border: 2px solid rgba(255, 255, 255, 0.44);
    border-top-color: #ffffff;
    border-radius: 999px;
    animation: authSpin 760ms linear infinite;
}

.auth-submit.is-loading .auth-button-spinner {
    display: inline-block;
}

.auth-submit.is-loading .auth-submit-label {
    opacity: 0.9;
}

.auth-secondary-button {
    width: 100%;
    min-height: 42px;
    border-radius: 10px;
    color: #6B7280;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.auth-secondary-button:hover,
.auth-secondary-button:focus-visible {
    color: #2563EB;
    background: #EFF6FF;
    outline: none;
}

.auth-feedback {
    min-height: 38px;
    display: flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.84rem;
    line-height: 1.55;
    font-weight: 600;
}

.auth-feedback.hidden {
    display: none;
}

.auth-feedback-error {
    color: #DC2626;
    border-color: #FECACA;
    background: #FEF2F2;
}

.auth-feedback-success {
    color: #047857;
    border-color: #A7F3D0;
    background: #ECFDF5;
}

.auth-feedback-info {
    color: #2563EB;
    border-color: #BFDBFE;
    background: #EFF6FF;
}

.auth-admin-help {
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    background: #F9FAFB;
    color: #6B7280;
    padding: 10px 12px;
    font-size: 0.82rem;
    line-height: 1.65;
    font-weight: 500;
}

.auth-card-shake {
    animation: authShake 300ms ease;
}

@keyframes authFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes authFormIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes authSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes authShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(7px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

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

@media (max-width: 768px) {
    .auth-split-shell {
        display: block;
        min-height: 100vh;
    }

    .auth-context-panel {
        display: none;
    }

    .auth-form-side {
        min-height: 100vh;
        align-items: stretch;
        padding: 24px;
        background: #ffffff;
    }

    .auth-card {
        max-width: none;
        min-height: calc(100vh - 48px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-context-panel,
    .auth-card,
    .auth-form:not(.hidden),
    .auth-card-shake,
    .auth-button-spinner {
        animation: none;
    }

    .auth-submit,
    .auth-input,
    .auth-password-toggle,
    .auth-secondary-button {
        transition: none;
    }
}

/* =========================================
   Bulk inputs
========================================= */
.bulk-input {
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 0.8rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bulk-input:focus {
    border-color: var(--royal-600);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08);
}

/* =========================================
   Status badges
========================================= */
.badge-success {
    background-color: #D1FAE5;
    color: #059669;
}

.badge-danger {
    background-color: #FEE2E2;
    color: #DC2626;
}

.badge-deleted {
    background-color: #FEE2E2;
    color: #B91C1C;
    border: 1px solid #FCA5A5;
}

.badge-warning {
    background-color: #FEF3C7;
    color: #D97706;
}

.badge-orange {
    background-color: #FFEDD5;
    color: #EA580C;
}

.badge-gray {
    background-color: #F3F4F6;
    color: #4B5563;
}

.badge-purple {
    background-color: #DBEAFE;
    color: #2563EB;
}

/* =========================================
   Icons
========================================= */
.action-icon {
    cursor: pointer;
    color: #9CA3AF;
    transition: color 0.2s ease;
}

.action-icon:hover {
    color: var(--royal-700);
}

/* =========================================
   Tables
========================================= */
table {
    border-collapse: separate;
    border-spacing: 0;
}

thead th {
    position: sticky;
    top: 0;
    z-index: 5;
}

tbody tr {
    transition: background-color 0.2s ease;
}

tbody tr:hover {
    background-color: #F9FAFB;
}

/* =========================================
   Buttons helpers
========================================= */
button {
    transition: all 0.2s ease;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#secondarySidebar {
    width: 17rem;
    background: var(--surface-subtle);
    border-color: var(--brand-border);
}

#secondarySidebar .p-4,
#secondarySidebar .menu-section {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#secondarySidebar .menu-section h2 {
    color: var(--text-muted);
    letter-spacing: 0.06em;
}

/* =========================================
   Brand palette compatibility
========================================= */
.bg-brandBg {
    background-color: var(--surface) !important;
}

.bg-sidebarMain,
.bg-sidebarSub {
    background-color: #ffffff !important;
}

.text-brandText {
    color: var(--text-strong) !important;
}

.text-textMuted,
.text-slate-500,
.text-slate-600,
.text-gray-500,
.text-gray-600 {
    color: var(--text-muted) !important;
}

.border-borderSoft,
.border-gray-100,
.border-gray-200,
.border-slate-100,
.border-slate-200 {
    border-color: var(--brand-border) !important;
}

.bg-primary,
.hover\:bg-primary:hover {
    background-color: var(--brand-primary) !important;
}

.hover\:bg-violet-700:hover {
    background-color: var(--royal-700) !important;
}

.hover\:bg-indigo-600:hover,
.hover\:bg-blue-600:hover,
.hover\:bg-blue-700:hover {
    background-color: var(--royal-700) !important;
}

.bg-primaryLight,
.bg-blue-50,
.bg-blue-50\/40,
.bg-blue-50\/70,
.bg-indigo-50,
.bg-violet-50,
.bg-violet-50\/70,
.bg-purple-50 {
    background-color: var(--brand-blue-50) !important;
}

.bg-blue-100,
.bg-indigo-100,
.bg-violet-100,
.bg-purple-100 {
    background-color: var(--brand-blue-100) !important;
}

.bg-blue-200,
.bg-indigo-200,
.bg-violet-200,
.bg-purple-200 {
    background-color: var(--brand-blue-200) !important;
}

.border-primary {
    border-color: var(--brand-primary) !important;
}

.border-blue-100,
.border-indigo-100,
.border-violet-100,
.border-purple-100 {
    border-color: var(--brand-blue-100) !important;
}

.border-blue-200,
.border-indigo-200,
.border-violet-200,
.border-purple-200 {
    border-color: var(--brand-blue-200) !important;
}

.text-primary,
.text-blue-600,
.text-blue-700,
.text-indigo-700,
.text-violet-700,
.text-purple-700 {
    color: var(--brand-primary) !important;
}

.text-blue-800,
.text-indigo-800,
.text-violet-800,
.text-purple-800 {
    color: var(--royal-700) !important;
}

/* =========================================
   Dark Theme
========================================= */
:root[data-theme="dark"] body {
    background:
        radial-gradient(1200px 520px at 100% -15%, rgba(63, 95, 148, 0.19), transparent 68%),
        radial-gradient(900px 420px at -10% 105%, rgba(56, 83, 128, 0.15), transparent 70%),
        linear-gradient(180deg, #050D19 0%, #071120 100%);
}

:root[data-theme="dark"] #loadingScreen {
    background: rgba(2, 6, 23, 0.86) !important;
}

:root[data-theme="dark"] #loadingText {
    color: var(--text-strong) !important;
}

:root[data-theme="dark"] .primary-sidebar,
:root[data-theme="dark"] .bg-sidebarMain,
:root[data-theme="dark"] .bg-sidebarSub {
    background: linear-gradient(180deg, #0F1A2D 0%, #0B1628 100%) !important;
}

:root[data-theme="dark"] #secondarySidebar {
    background: rgba(12, 24, 43, 0.96) !important;
    border-color: var(--brand-border) !important;
}

:root[data-theme="dark"] .app-topbar-shell {
    border-color: var(--brand-border);
    background: linear-gradient(135deg, rgba(15, 27, 46, 0.96), rgba(10, 20, 36, 0.92));
    box-shadow: 0 24px 56px -40px rgba(2, 6, 23, 0.92);
}

:root[data-theme="dark"] .topbar-icon-button,
:root[data-theme="dark"] .current-user-summary {
    border-color: var(--brand-border);
    background: rgba(14, 27, 47, 0.9);
    color: var(--text-strong);
    box-shadow: 0 18px 36px -30px rgba(2, 6, 23, 0.95);
}

:root[data-theme="dark"] .topbar-icon-button:hover,
:root[data-theme="dark"] .topbar-icon-button:focus-visible,
:root[data-theme="dark"] .topbar-icon-button.is-open,
:root[data-theme="dark"] .current-user-summary:hover,
:root[data-theme="dark"] .current-user-summary:focus-visible,
:root[data-theme="dark"] .current-user-summary.is-open {
    border-color: rgba(126, 165, 231, 0.5);
    background: rgba(21, 39, 66, 0.98);
    box-shadow: 0 20px 40px -28px rgba(91, 141, 238, 0.36);
}

:root[data-theme="dark"] #themeModeButton[data-theme-resolved="dark"] {
    border-color: rgba(96, 165, 250, 0.45);
    color: #BFDBFE;
}

:root[data-theme="dark"] .focus-mode-exit-button {
    border-color: rgba(148, 163, 184, 0.34);
    background: rgba(15, 27, 49, 0.98);
    color: #BFDBFE;
}

:root[data-theme="dark"] .current-user-avatar::after {
    border-color: #0F1B31;
}

:root[data-theme="dark"] .topbar-dropdown {
    border-color: var(--brand-border);
    background: rgba(15, 27, 49, 0.97);
    box-shadow: 0 30px 68px -34px rgba(2, 6, 23, 0.95);
}

:root[data-theme="dark"] .topbar-dropdown-head,
:root[data-theme="dark"] .account-menu-head,
:root[data-theme="dark"] .account-status-control,
:root[data-theme="dark"] .account-status-duration,
:root[data-theme="dark"] .topbar-dropdown-footer {
    border-color: var(--brand-border);
}

:root[data-theme="dark"] .topbar-dropdown-footer {
    background: rgba(10, 20, 36, 0.96);
}

:root[data-theme="dark"] .topbar-dropdown-footer:hover,
:root[data-theme="dark"] .topbar-dropdown-footer:focus-visible {
    background: rgba(16, 31, 52, 0.96);
}

:root[data-theme="dark"] .account-status-chip,
:root[data-theme="dark"] .secondary-sidebar-visibility-btn,
:root[data-theme="dark"] .secondary-sidebar-width-step {
    border-color: var(--brand-border);
    background: rgba(10, 20, 36, 0.95);
    color: var(--text-muted);
}

:root[data-theme="dark"] .account-status-chip:hover,
:root[data-theme="dark"] .account-status-chip:focus-visible,
:root[data-theme="dark"] .account-status-chip.is-active,
:root[data-theme="dark"] .secondary-sidebar-visibility-btn:hover,
:root[data-theme="dark"] .secondary-sidebar-width-step:hover,
:root[data-theme="dark"] .topbar-theme-option:hover,
:root[data-theme="dark"] .topbar-theme-option:focus-visible,
:root[data-theme="dark"] .topbar-theme-option.is-active {
    border-color: rgba(96, 165, 250, 0.45);
    background: rgba(37, 99, 235, 0.18);
    color: #DDE8FF;
}

:root[data-theme="dark"] .sidebar-resize-handle::after {
    background: rgba(148, 163, 184, 0.5);
}

:root[data-theme="dark"] .primary-sidebar:hover .sidebar-resize-handle::after,
:root[data-theme="dark"] #secondarySidebar:hover .sidebar-resize-handle::after,
:root[data-theme="dark"] .primary-sidebar.resizing .sidebar-resize-handle::after,
:root[data-theme="dark"] #secondarySidebar.resizing .sidebar-resize-handle::after {
    background: rgba(125, 173, 255, 0.88);
    box-shadow: 0 0 0 0.24rem rgba(96, 165, 250, 0.2);
}

:root[data-theme="dark"] .account-menu-item:hover,
:root[data-theme="dark"] .account-menu-item:focus-visible,
:root[data-theme="dark"] .topbar-notification-item:hover,
:root[data-theme="dark"] .topbar-notification-item:focus-visible,
:root[data-theme="dark"] .nav-main-link:hover,
:root[data-theme="dark"] .nav-sub-link:hover,
:root[data-theme="dark"] .nav-main-subitem:hover {
    background: rgba(17, 34, 57, 0.95);
    border-color: var(--brand-border);
}

:root[data-theme="dark"] .nav-main-collapsible.open .nav-main-submenu {
    background: rgba(6, 16, 30, 0.72);
    border: 1px solid rgba(94, 133, 187, 0.3);
    border-radius: 0.95rem;
    padding: 0.45rem;
}

:root[data-theme="dark"] .nav-main-subitem {
    background: rgba(10, 20, 36, 0.95);
    border-color: rgba(94, 133, 187, 0.34);
    color: #c7ddfb;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

:root[data-theme="dark"] body.sidebar-expanded .nav-main-subitem + .nav-main-subitem {
    border-top-color: rgba(94, 133, 187, 0.24);
}

:root[data-theme="dark"] .nav-main-subitem:hover {
    background: rgba(24, 46, 76, 0.95);
    border-color: rgba(125, 173, 255, 0.52);
    color: #e7f0ff;
}

:root[data-theme="dark"] .nav-main-subitem.active-submain {
    border-color: rgba(174, 206, 255, 0.95);
    background: linear-gradient(135deg, #5f92e6 0%, #4e7fd4 100%);
    color: #ffffff;
    box-shadow: 0 12px 24px -18px rgba(77, 132, 228, 0.85);
}

:root[data-theme="dark"] .nav-main-subitem small {
    color: #9ab8e2;
}

:root[data-theme="dark"] .topbar-notification-dot.read {
    background: rgba(148, 163, 184, 0.42);
}

:root[data-theme="dark"] .topbar-read-state.read {
    background: rgba(30, 41, 59, 0.9);
    color: var(--text-muted);
}

:root[data-theme="dark"] input.edit-input,
:root[data-theme="dark"] select.edit-input,
:root[data-theme="dark"] textarea.edit-input,
:root[data-theme="dark"] .erp-control,
:root[data-theme="dark"] .erp-outline-button,
:root[data-theme="dark"] .erp-columns-menu > summary,
:root[data-theme="dark"] .bulk-input {
    border-color: var(--brand-border);
    background: rgba(10, 20, 36, 0.94);
    color: var(--text-strong);
}

:root[data-theme="dark"] input.edit-input:focus,
:root[data-theme="dark"] select.edit-input:focus,
:root[data-theme="dark"] textarea.edit-input:focus,
:root[data-theme="dark"] .bulk-input:focus {
    background: rgba(14, 27, 48, 0.98);
}

:root[data-theme="dark"] #bulkAddModal > div,
:root[data-theme="dark"] #crmBulkAddModal > div {
    background: #0E1A2E;
    border: 1px solid var(--brand-border);
    color: var(--text-strong);
}

:root[data-theme="dark"] #bulkAddModal .bg-gray-50,
:root[data-theme="dark"] #crmBulkAddModal .bg-gray-50 {
    background: rgba(10, 20, 36, 0.95) !important;
}

:root[data-theme="dark"] #bulkAddModal .bg-primary\/10,
:root[data-theme="dark"] #crmBulkAddModal .bg-primary\/10 {
    background: rgba(37, 99, 235, 0.2) !important;
}

:root[data-theme="dark"] #bulkPasteArea,
:root[data-theme="dark"] #crmBulkPasteArea,
:root[data-theme="dark"] #bulkImportSampleText {
    background: rgba(6, 16, 30, 0.96) !important;
    border-color: var(--brand-border) !important;
    color: #DBE8FF !important;
}

:root[data-theme="dark"] #bulkCsvTriggerButton {
    background: rgba(10, 20, 36, 0.96);
    border-color: rgba(125, 173, 255, 0.5);
    color: #BFDBFE;
}

:root[data-theme="dark"] #bulkCsvTriggerButton:hover {
    background: rgba(37, 99, 235, 0.24);
    border-color: rgba(147, 197, 253, 0.7);
    color: #DBEAFE;
}

:root[data-theme="dark"] #bulkAddModal textarea::placeholder,
:root[data-theme="dark"] #crmBulkAddModal textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.82;
}

.inventory-bulk-modal-panel,
.crm-bulk-modal-panel {
    width: min(1180px, calc(100vw - 48px));
    max-width: min(1180px, calc(100vw - 48px)) !important;
}

.inventory-bulk-modal-body,
.crm-bulk-modal-body {
    min-height: 0;
}

.crm-bulk-import-layout {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: 16px;
    min-height: 0;
}

.crm-bulk-import-side,
.crm-bulk-import-sheet,
.inventory-bulk-import-sheet {
    min-width: 0;
}

.crm-bulk-import-sheet .bg-sheet-shell,
.inventory-bulk-import-sheet .bg-sheet-shell {
    display: flex;
    min-height: 0;
    flex-direction: column;
}

.crm-bulk-import-sheet .bg-sheet-scroll {
    max-height: none;
    min-height: 440px;
    flex: 1 1 auto;
}

.inventory-bulk-import-sheet .bg-sheet-scroll {
    max-height: min(58vh, 620px);
}

.crm-bulk-file-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border: 1px dashed #93c5fd;
    border-radius: 12px;
    background: #eff6ff;
    color: #1d4ed8;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.crm-bulk-file-button:hover {
    background: #dbeafe;
}

.crm-bulk-file-button input {
    position: absolute;
    inset: 0;
    cursor: pointer;
    opacity: 0;
}

@media (max-width: 1024px) {
    .inventory-bulk-modal-panel,
    .crm-bulk-modal-panel {
        width: calc(100vw - 24px);
    }

    .crm-bulk-import-layout {
        grid-template-columns: 1fr;
    }

    .crm-bulk-import-sheet .bg-sheet-scroll {
        min-height: 360px;
    }
}

:root[data-theme="dark"] .clean-card,
:root[data-theme="dark"] .erp-columns-menu-panel,
:root[data-theme="dark"] .profile-availability-panel,
:root[data-theme="dark"] .profile-working-hours-panel,
:root[data-theme="dark"] .profile-avatar-uploader,
:root[data-theme="dark"] .availability-exception-row {
    background: var(--surface-elevated);
    border-color: var(--brand-border);
    box-shadow: 0 20px 50px -40px rgba(2, 6, 23, 0.96);
}

:root[data-theme="dark"] .profile-readonly-field,
:root[data-theme="dark"] .profile-working-hours-panel,
:root[data-theme="dark"] .erp-legend span,
:root[data-theme="dark"] .erp-mini-pill {
    background: rgba(10, 20, 36, 0.92);
    border-color: var(--brand-border);
}

:root[data-theme="dark"] .chat-hub-panel,
:root[data-theme="dark"] .chat-hub-header,
:root[data-theme="dark"] .chat-hub-tabs,
:root[data-theme="dark"] .chat-hub-content,
:root[data-theme="dark"] .chat-hub-loading {
    background: #0D182C;
    border-color: var(--brand-border);
}

:root[data-theme="dark"] .chat-hub-tabs button {
    background: rgba(10, 20, 36, 0.95);
    color: var(--text-muted);
}

:root[data-theme="dark"] .chat-hub-header strong,
:root[data-theme="dark"] .chat-hub-message-body strong,
:root[data-theme="dark"] .topbar-notification-title,
:root[data-theme="dark"] .profile-section-head h4 {
    color: var(--text-strong);
}

:root[data-theme="dark"] .chat-hub-header span,
:root[data-theme="dark"] .topbar-notification-type,
:root[data-theme="dark"] .topbar-notification-desc,
:root[data-theme="dark"] .topbar-empty-state,
:root[data-theme="dark"] .account-status-duration label,
:root[data-theme="dark"] .current-availability-summary small,
:root[data-theme="dark"] .profile-section-head p {
    color: var(--text-muted);
}

:root[data-theme="dark"] .chat-hub-panel {
    background: linear-gradient(180deg, #0a1a31 0%, #081426 100%);
    border-color: rgba(125, 173, 255, 0.35);
    box-shadow: 0 28px 72px -34px rgba(2, 6, 23, 0.9);
}

:root[data-theme="dark"] .chat-hub-header,
:root[data-theme="dark"] .chat-hub-tabs,
:root[data-theme="dark"] .chat-hub-loading {
    background: rgba(8, 20, 38, 0.92);
    border-color: rgba(94, 133, 187, 0.35);
}

:root[data-theme="dark"] .chat-hub-content {
    background: rgba(6, 16, 30, 0.96);
}

:root[data-theme="dark"] .chat-hub-bubble {
    background: linear-gradient(145deg, #3b82f6 0%, #2563eb 70%);
    box-shadow: 0 24px 54px -24px rgba(37, 99, 235, 0.8);
}

:root[data-theme="dark"] .chat-hub-bubble:hover {
    background: linear-gradient(145deg, #60a5fa 0%, #2563eb 72%);
    box-shadow: 0 28px 58px -24px rgba(37, 99, 235, 0.86);
}

:root[data-theme="dark"] .chat-hub-header-actions button,
:root[data-theme="dark"] .chat-hub-message-actions button,
:root[data-theme="dark"] .chat-hub-composer-row button,
:root[data-theme="dark"] .chat-hub-replying button,
:root[data-theme="dark"] .chat-hub-preview-close,
:root[data-theme="dark"] .chat-hub-order-collapse-toggle,
:root[data-theme="dark"] .chat-hub-order-actions button,
:root[data-theme="dark"] .chat-hub-modal-head button,
:root[data-theme="dark"] .chat-hub-modal-actions button {
    background: rgba(12, 28, 52, 0.96);
    border-color: rgba(94, 133, 187, 0.42);
    color: #dbeafe;
}

:root[data-theme="dark"] .chat-hub-header-actions button:hover,
:root[data-theme="dark"] .chat-hub-message-actions button:hover,
:root[data-theme="dark"] .chat-hub-composer-row button:hover,
:root[data-theme="dark"] .chat-hub-replying button:hover,
:root[data-theme="dark"] .chat-hub-order-collapse-toggle:hover,
:root[data-theme="dark"] .chat-hub-order-actions button:hover {
    background: rgba(37, 99, 235, 0.25);
    border-color: rgba(147, 197, 253, 0.72);
    color: #eff6ff;
}

:root[data-theme="dark"] .chat-hub-tabs button {
    background: rgba(9, 22, 42, 0.95);
    border-color: rgba(94, 133, 187, 0.28);
    color: #c3dafc;
}

:root[data-theme="dark"] .chat-hub-tabs button.active {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-color: rgba(191, 219, 254, 0.9);
    color: #ffffff;
}

:root[data-theme="dark"] .chat-hub-composer,
:root[data-theme="dark"] .chat-hub-replying,
:root[data-theme="dark"] .chat-hub-recording,
:root[data-theme="dark"] .chat-hub-composer-attachments,
:root[data-theme="dark"] .chat-hub-mention-menu,
:root[data-theme="dark"] .chat-hub-popover,
:root[data-theme="dark"] .chat-hub-modal-card,
:root[data-theme="dark"] .chat-hub-history-item,
:root[data-theme="dark"] .chat-hub-orders-summary button,
:root[data-theme="dark"] .chat-hub-order-group-title {
    background: rgba(9, 21, 40, 0.96);
    border-color: rgba(94, 133, 187, 0.34);
}

:root[data-theme="dark"] .chat-hub-order-group + .chat-hub-order-group {
    border-top-color: rgba(125, 173, 255, 0.28);
}

:root[data-theme="dark"] .chat-hub-audit-chip {
    background: rgba(9, 21, 40, 0.72);
    border-color: rgba(125, 173, 255, 0.28);
    color: #bfd7fb;
}

:root[data-theme="dark"] .chat-hub-sound-tests {
    border-bottom-color: rgba(94, 133, 187, 0.34);
}

:root[data-theme="dark"] .chat-hub-sound-tests button {
    background: rgba(37, 99, 235, 0.2);
    border-color: rgba(147, 197, 253, 0.45);
    color: #dbeafe;
}

:root[data-theme="dark"] .chat-hub-sound-tests button:hover {
    background: rgba(37, 99, 235, 0.32);
    border-color: rgba(191, 219, 254, 0.72);
}

:root[data-theme="dark"] .chat-hub-order-collapsed-summary strong {
    color: #e2edff;
}

:root[data-theme="dark"] .chat-hub-order-collapsed-summary span {
    color: #9fbbe5;
}

:root[data-theme="dark"] .chat-hub-composer-row textarea,
:root[data-theme="dark"] .chat-hub-private-picker,
:root[data-theme="dark"] .chat-hub-private-select,
:root[data-theme="dark"] .chat-hub-modal-body textarea,
:root[data-theme="dark"] .chat-hub-modal-body select,
:root[data-theme="dark"] .chat-hub-modal-body input[type="date"],
:root[data-theme="dark"] .chat-hub-modal-body input[type="file"] {
    background: rgba(5, 15, 29, 0.95);
    border-color: rgba(94, 133, 187, 0.4);
    color: #e2edff;
}

:root[data-theme="dark"] .chat-hub-composer-row textarea::placeholder {
    color: #8fb3e6;
}

:root[data-theme="dark"] .chat-hub-message .chat-hub-message-body {
    background: rgba(10, 24, 45, 0.94);
    border-color: rgba(106, 142, 191, 0.42);
}

:root[data-theme="dark"] .chat-hub-message.own .chat-hub-message-body {
    background: rgba(30, 64, 175, 0.28);
    border-color: rgba(96, 165, 250, 0.7);
    border-right-color: #60a5fa;
}

:root[data-theme="dark"] .chat-hub-message.role-admin .chat-hub-avatar,
:root[data-theme="dark"] .chat-hub-message.role-admin .chat-hub-message-body {
    --chat-role-color: #60a5fa;
    --chat-role-bg: rgba(9, 29, 54, 0.96);
    --chat-role-border: rgba(96, 165, 250, 0.45);
}

:root[data-theme="dark"] .chat-hub-message.role-operations .chat-hub-avatar,
:root[data-theme="dark"] .chat-hub-message.role-operations .chat-hub-message-body {
    --chat-role-color: #2dd4bf;
    --chat-role-bg: rgba(8, 42, 44, 0.95);
    --chat-role-border: rgba(45, 212, 191, 0.42);
}

:root[data-theme="dark"] .chat-hub-message.role-upgrades .chat-hub-avatar,
:root[data-theme="dark"] .chat-hub-message.role-upgrades .chat-hub-message-body {
    --chat-role-color: #93c5fd;
    --chat-role-bg: rgba(11, 30, 56, 0.96);
    --chat-role-border: rgba(147, 197, 253, 0.42);
}

:root[data-theme="dark"] .chat-hub-message.role-support .chat-hub-avatar,
:root[data-theme="dark"] .chat-hub-message.role-support .chat-hub-message-body {
    --chat-role-color: #fb923c;
    --chat-role-bg: rgba(52, 27, 10, 0.96);
    --chat-role-border: rgba(251, 146, 60, 0.44);
}

:root[data-theme="dark"] .chat-hub-message.role-accountant .chat-hub-avatar,
:root[data-theme="dark"] .chat-hub-message.role-accountant .chat-hub-message-body {
    --chat-role-color: #cbd5e1;
    --chat-role-bg: rgba(22, 30, 45, 0.96);
    --chat-role-border: rgba(148, 163, 184, 0.4);
}

:root[data-theme="dark"] .chat-hub-message.role-employee .chat-hub-avatar,
:root[data-theme="dark"] .chat-hub-message.role-employee .chat-hub-message-body {
    --chat-role-color: #dbeafe;
    --chat-role-bg: rgba(14, 24, 42, 0.96);
    --chat-role-border: rgba(125, 173, 255, 0.38);
}

:root[data-theme="dark"] .chat-hub-order-card,
:root[data-theme="dark"] .chat-hub-instruction-card,
:root[data-theme="dark"] .chat-hub-notification-list button,
:root[data-theme="dark"] .chat-hub-popover-head,
:root[data-theme="dark"] .chat-hub-toggle {
    background: rgba(10, 23, 43, 0.96);
    border-color: rgba(94, 133, 187, 0.34);
    color: #dbeafe;
}

:root[data-theme="dark"] .chat-hub-notification-list button.unread {
    background: rgba(30, 64, 175, 0.28);
}

:root[data-theme="dark"] .chat-hub-order-card.status-new,
:root[data-theme="dark"] .chat-hub-message.order-status-new .chat-hub-message-body {
    background: rgba(12, 60, 38, 0.94);
    border-color: rgba(34, 197, 94, 0.55);
    border-right-color: #22c55e;
}

:root[data-theme="dark"] .chat-hub-order-card.status-problem,
:root[data-theme="dark"] .chat-hub-message.order-status-problem .chat-hub-message-body {
    background: rgba(76, 24, 33, 0.94);
    border-color: rgba(239, 68, 68, 0.5);
    border-right-color: #ef4444;
}

:root[data-theme="dark"] .chat-hub-order-card.status-in_progress,
:root[data-theme="dark"] .chat-hub-message.order-status-in_progress .chat-hub-message-body {
    background: rgba(46, 31, 92, 0.95);
    border-color: rgba(167, 139, 250, 0.58);
    border-right-color: #a78bfa;
}

:root[data-theme="dark"] .chat-hub-order-card.status-activated,
:root[data-theme="dark"] .chat-hub-message.order-status-activated .chat-hub-message-body {
    background: rgba(14, 56, 38, 0.95);
    border-color: rgba(74, 222, 128, 0.5);
    border-right-color: #2dd4bf;
}

:root[data-theme="dark"] .chat-hub-order-card.status-canceled,
:root[data-theme="dark"] .chat-hub-message.order-status-canceled .chat-hub-message-body {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(148, 163, 184, 0.5);
    border-right-color: #94a3b8;
}

:root[data-theme="dark"] .chat-hub-task-card.status-new,
:root[data-theme="dark"] .chat-hub-task-card.status-in_progress {
    background: rgba(69, 45, 12, 0.95);
    border-color: rgba(245, 158, 11, 0.58);
}

:root[data-theme="dark"] .chat-hub-task-card.status-completed {
    background: rgba(13, 58, 42, 0.95);
    border-color: rgba(16, 185, 129, 0.5);
}

:root[data-theme="dark"] .chat-hub-message.task-status-new .chat-hub-message-body,
:root[data-theme="dark"] .chat-hub-message.task-status-in_progress .chat-hub-message-body {
    background: rgba(69, 45, 12, 0.95);
    border-color: rgba(245, 158, 11, 0.58);
    border-right-color: #f59e0b;
}

:root[data-theme="dark"] .chat-hub-message.task-status-completed .chat-hub-message-body {
    background: rgba(13, 58, 42, 0.95);
    border-color: rgba(16, 185, 129, 0.5);
    border-right-color: #10b981;
}

:root[data-theme="dark"] .chat-hub-message.instruction-message .chat-hub-message-body {
    background: rgba(14, 55, 69, 0.95);
    border-color: rgba(34, 211, 238, 0.48);
    border-right-color: #22d3ee;
}

:root[data-theme="dark"] .chat-hub-empty strong,
:root[data-theme="dark"] .chat-hub-order-owner strong,
:root[data-theme="dark"] .chat-hub-modal-head strong,
:root[data-theme="dark"] .chat-hub-history-item strong {
    color: #e2edff;
}

:root[data-theme="dark"] .chat-hub-message-text,
:root[data-theme="dark"] .chat-hub-order-text,
:root[data-theme="dark"] .chat-hub-instruction-text,
:root[data-theme="dark"] .chat-hub-problem-note span,
:root[data-theme="dark"] .chat-hub-task-reply span {
    color: #d3e5ff;
}

:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-white\/90,
:root[data-theme="dark"] .bg-white\/95,
:root[data-theme="dark"] .bg-gray-50,
:root[data-theme="dark"] .bg-gray-100,
:root[data-theme="dark"] .bg-slate-50,
:root[data-theme="dark"] .bg-slate-100 {
    background-color: var(--surface-elevated) !important;
}

:root[data-theme="dark"] .auth-page-modal {
    background: linear-gradient(180deg, #08101c 0%, #0b1628 100%);
    color: var(--text-strong);
}

:root[data-theme="dark"] .auth-split-shell {
    background: #0b1628;
}

:root[data-theme="dark"] .auth-context-panel {
    background:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(140deg, #1a2740 0%, #0f1a2c 55%, #101c30 100%);
}

:root[data-theme="dark"] .auth-context-panel::after {
    background: linear-gradient(180deg, rgba(3, 9, 20, 0.14), rgba(3, 9, 20, 0.42));
}

:root[data-theme="dark"] .auth-context-welcome,
:root[data-theme="dark"] .auth-context-mood {
    color: #f2f7ff;
}

:root[data-theme="dark"] .auth-context-question {
    color: #d5e3fb;
    opacity: 1;
}

:root[data-theme="dark"] .auth-form-side {
    background: #0a1323;
}

:root[data-theme="dark"] .auth-card {
    background: rgba(15, 27, 44, 0.96);
    border-color: var(--brand-border);
    box-shadow: 0 34px 72px -42px rgba(2, 6, 23, 0.94);
}

:root[data-theme="dark"] .auth-card-header h3,
:root[data-theme="dark"] .auth-field label {
    color: var(--text-strong);
}

:root[data-theme="dark"] .auth-card-header p,
:root[data-theme="dark"] .auth-remember,
:root[data-theme="dark"] .auth-secondary-button {
    color: var(--text-muted);
}

:root[data-theme="dark"] .auth-input {
    border-color: var(--brand-border);
    background: rgba(9, 19, 35, 0.95);
    color: var(--text-strong);
}

:root[data-theme="dark"] .auth-input::placeholder {
    color: var(--text-muted);
}

:root[data-theme="dark"] .auth-input:focus {
    border-color: rgba(126, 165, 231, 0.75);
    box-shadow: 0 0 0 4px rgba(91, 141, 238, 0.2);
}

:root[data-theme="dark"] .auth-input.is-invalid {
    border-color: rgba(248, 113, 113, 0.72);
    background: rgba(127, 29, 29, 0.18);
    box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.16);
}

:root[data-theme="dark"] .auth-password-toggle {
    color: var(--text-muted);
}

:root[data-theme="dark"] .auth-password-toggle:hover,
:root[data-theme="dark"] .auth-password-toggle:focus-visible {
    color: #dce9ff;
    background: rgba(91, 141, 238, 0.18);
}

:root[data-theme="dark"] .auth-link-button {
    color: #8fb8ff;
}

:root[data-theme="dark"] .auth-submit {
    background: var(--brand-primary);
}

:root[data-theme="dark"] .auth-submit:hover {
    background: var(--selection-blue-dark);
}

:root[data-theme="dark"] .auth-secondary-button:hover,
:root[data-theme="dark"] .auth-secondary-button:focus-visible {
    color: #dce9ff;
    background: rgba(91, 141, 238, 0.16);
}

:root[data-theme="dark"] .auth-admin-help {
    border-color: var(--brand-border);
    background: rgba(9, 19, 35, 0.95);
    color: var(--text-muted);
}

:root[data-theme="dark"] #refundFilterSearch,
:root[data-theme="dark"] #refundFilterStatus,
:root[data-theme="dark"] #refundFilterPriority,
:root[data-theme="dark"] #refundFilterPayment,
:root[data-theme="dark"] #refundFilterDateFrom,
:root[data-theme="dark"] #refundFilterDateTo {
    border-color: var(--brand-border);
    background: rgba(10, 20, 36, 0.94);
    color: var(--text-strong);
}

:root[data-theme="dark"] #refundFilterSearch::placeholder {
    color: var(--text-muted);
    opacity: 0.86;
}

:root[data-theme="dark"] #refundFilterSearch:focus,
:root[data-theme="dark"] #refundFilterStatus:focus,
:root[data-theme="dark"] #refundFilterPriority:focus,
:root[data-theme="dark"] #refundFilterPayment:focus,
:root[data-theme="dark"] #refundFilterDateFrom:focus,
:root[data-theme="dark"] #refundFilterDateTo:focus {
    background: rgba(14, 27, 48, 0.98);
}

:root[data-theme="dark"] .welcome-hero-card {
    border-color: rgba(124, 156, 208, 0.3);
    background: linear-gradient(145deg, rgba(21, 34, 54, 0.95), rgba(13, 24, 42, 0.95) 52%, rgba(12, 32, 47, 0.94));
    box-shadow: 0 28px 48px -40px rgba(2, 6, 23, 0.92);
}

:root[data-theme="dark"] .welcome-hero-icon {
    background: linear-gradient(145deg, #4F82DB, #6EA0F4);
    box-shadow: 0 14px 30px -18px rgba(79, 130, 219, 0.7);
}

:root[data-theme="dark"] .welcome-hero-kicker {
    color: #BFD2F4;
}

:root[data-theme="dark"] .welcome-hero-title {
    color: #F1F6FF;
}

:root[data-theme="dark"] .welcome-hero-subtitle {
    color: #D7E3F9;
}

:root[data-theme="dark"] .welcome-motivation-card,
:root[data-theme="dark"] .welcome-progress-card,
:root[data-theme="dark"] .welcome-quick-links-card {
    border-color: rgba(132, 151, 180, 0.34);
    background: rgba(12, 23, 39, 0.95);
}

:root[data-theme="dark"] .welcome-motivation-card h2,
:root[data-theme="dark"] .welcome-progress-card h2,
:root[data-theme="dark"] .welcome-quick-links-head h2,
:root[data-theme="dark"] .welcome-quick-link-content strong {
    color: var(--text-strong);
}

:root[data-theme="dark"] .welcome-motivation-card li,
:root[data-theme="dark"] .welcome-progress-item,
:root[data-theme="dark"] .welcome-empty-links,
:root[data-theme="dark"] .welcome-quick-link-btn {
    border-color: rgba(132, 151, 180, 0.3);
    background: rgba(10, 20, 35, 0.94);
    color: #D1DDF2;
}

:root[data-theme="dark"] .welcome-motivation-quote,
:root[data-theme="dark"] .welcome-quick-link-arrow {
    color: #8EB5FF;
}

:root[data-theme="dark"] .welcome-progress-item strong {
    color: #9FC0FF;
}

:root[data-theme="dark"] .welcome-progress-intro,
:root[data-theme="dark"] .welcome-progress-item span,
:root[data-theme="dark"] .welcome-progress-item small,
:root[data-theme="dark"] .welcome-quick-links-head p,
:root[data-theme="dark"] .welcome-quick-link-content small,
:root[data-theme="dark"] .welcome-empty-links {
    color: var(--text-muted);
}

:root[data-theme="dark"] .welcome-quick-link-btn:hover {
    background: rgba(15, 28, 47, 0.98);
    border-color: rgba(148, 186, 246, 0.45);
}

:root[data-theme="dark"] #passwordTaskSheetContainer .odd\:bg-white:nth-child(odd),
:root[data-theme="dark"] #passwordTaskTableBody tr[data-password-task-id]:nth-child(odd) {
    background-color: rgba(12, 24, 42, 0.98) !important;
}

:root[data-theme="dark"] #passwordTaskSheetContainer .even\:bg-slate-50\/60:nth-child(even),
:root[data-theme="dark"] #passwordTaskTableBody tr[data-password-task-id]:nth-child(even) {
    background-color: rgba(15, 29, 49, 0.96) !important;
}

:root[data-theme="dark"] #passwordTaskSheetContainer .hover\:bg-blue-50\/40:hover,
:root[data-theme="dark"] #passwordTaskTableBody tr[data-password-task-id]:hover {
    background-color: rgba(24, 45, 74, 0.96) !important;
}

:root[data-theme="dark"] #passwordTaskSheetContainer .bg-slate-100\/95,
:root[data-theme="dark"] #passwordTaskSheetContainer thead,
:root[data-theme="dark"] #passwordTaskSheetContainer thead th {
    background-color: rgba(11, 22, 39, 0.98) !important;
}

:root[data-theme="dark"] #passwordTaskSheetContainer th {
    color: #C3D2ED !important;
    border-color: var(--brand-border) !important;
}

:root[data-theme="dark"] #passwordTaskTableBody td {
    border-color: var(--brand-border) !important;
}

:root[data-theme="dark"] #passwordTaskTableBody td.text-slate-700,
:root[data-theme="dark"] #passwordTaskTableBody td.text-slate-600 {
    color: #D8E4F8 !important;
}

:root[data-theme="dark"] #passwordTaskViewport .bg-slate-50\/60,
:root[data-theme="dark"] #passwordTaskViewport .bg-slate-50\/70,
:root[data-theme="dark"] #passwordTaskViewport .bg-slate-100\/95 {
    background-color: rgba(13, 25, 44, 0.95) !important;
}

:root[data-theme="dark"] #upgradeTaskViewport .bg-blue-50\/70,
:root[data-theme="dark"] #upgradeTaskViewport .bg-blue-50\/40,
:root[data-theme="dark"] #upgradeTaskViewport .bg-slate-50\/70 {
    background-color: rgba(13, 25, 44, 0.95) !important;
}

:root[data-theme="dark"] #upgradeTaskViewport .text-blue-800 {
    color: #C9DBFA !important;
}

:root[data-theme="dark"] .rounded-full.bg-slate-100 {
    background-color: rgba(148, 163, 184, 0.16) !important;
    border-color: rgba(148, 163, 184, 0.34) !important;
    color: #c8d3e7 !important;
}

:root[data-theme="dark"] .rounded-full.bg-blue-100,
:root[data-theme="dark"] .rounded-full.bg-indigo-100,
:root[data-theme="dark"] .rounded-full.bg-sky-100 {
    background-color: rgba(102, 145, 211, 0.22) !important;
    border-color: rgba(130, 170, 230, 0.38) !important;
}

:root[data-theme="dark"] .rounded-full.bg-blue-100.text-blue-700,
:root[data-theme="dark"] .rounded-full.bg-indigo-100.text-indigo-700,
:root[data-theme="dark"] .rounded-full.bg-sky-100.text-sky-700 {
    color: #c6dcff !important;
}

:root[data-theme="dark"] .rounded-full.bg-violet-100,
:root[data-theme="dark"] .rounded-full.bg-fuchsia-100,
:root[data-theme="dark"] .rounded-full.bg-purple-100 {
    background-color: rgba(134, 112, 188, 0.24) !important;
    border-color: rgba(161, 134, 219, 0.4) !important;
}

:root[data-theme="dark"] .rounded-full.bg-violet-100.text-violet-700,
:root[data-theme="dark"] .rounded-full.bg-fuchsia-100.text-fuchsia-700,
:root[data-theme="dark"] .rounded-full.bg-purple-100.text-purple-700 {
    color: #ddccff !important;
}

:root[data-theme="dark"] .rounded-full.bg-emerald-100 {
    background-color: rgba(62, 129, 107, 0.24) !important;
    border-color: rgba(98, 170, 145, 0.4) !important;
}

:root[data-theme="dark"] .rounded-full.bg-emerald-100.text-emerald-700 {
    color: #c5eddc !important;
}

:root[data-theme="dark"] .rounded-full.bg-amber-100,
:root[data-theme="dark"] .rounded-full.bg-orange-100 {
    background-color: rgba(163, 119, 68, 0.24) !important;
    border-color: rgba(206, 154, 92, 0.4) !important;
}

:root[data-theme="dark"] .rounded-full.bg-amber-100.text-amber-800,
:root[data-theme="dark"] .rounded-full.bg-amber-100.text-amber-700,
:root[data-theme="dark"] .rounded-full.bg-orange-100.text-orange-800,
:root[data-theme="dark"] .rounded-full.bg-orange-100.text-orange-700 {
    color: #f2d8b6 !important;
}

:root[data-theme="dark"] .rounded-full.bg-rose-100,
:root[data-theme="dark"] .rounded-full.bg-red-100 {
    background-color: rgba(152, 74, 86, 0.24) !important;
    border-color: rgba(197, 102, 118, 0.42) !important;
}

:root[data-theme="dark"] .rounded-full.bg-rose-100.text-rose-700,
:root[data-theme="dark"] .rounded-full.bg-red-100.text-red-700 {
    color: #f0c3cb !important;
}

:root[data-theme="dark"] .inventory-overview .erp-metric-card,
:root[data-theme="dark"] .inventory-overview .erp-category-card {
    background: rgba(12, 23, 39, 0.95);
    border-color: rgba(130, 149, 176, 0.34);
    box-shadow: 0 22px 40px -34px rgba(2, 6, 23, 0.93);
}

:root[data-theme="dark"] .inventory-overview .erp-metric-card:hover,
:root[data-theme="dark"] .inventory-overview .erp-metric-card:focus,
:root[data-theme="dark"] .inventory-overview .erp-category-card:hover,
:root[data-theme="dark"] .inventory-overview .erp-category-card:focus {
    border-color: rgba(157, 188, 241, 0.44);
    box-shadow: 0 26px 44px -30px rgba(2, 6, 23, 0.95);
}

:root[data-theme="dark"] .inventory-overview .erp-metric-label,
:root[data-theme="dark"] .inventory-overview .erp-metric-note {
    color: var(--text-muted);
}

:root[data-theme="dark"] .inventory-overview .erp-metric-value,
:root[data-theme="dark"] .inventory-overview .erp-check-option {
    color: var(--text-strong);
}

:root[data-theme="dark"] .inventory-overview .erp-metric-help {
    background: rgba(22, 38, 61, 0.92);
    color: #C8D7F2;
}

:root[data-theme="dark"] .inventory-overview .inventory-progress-track {
    background: rgba(148, 163, 184, 0.2);
}

:root[data-theme="dark"] .inventory-overview .erp-metric-card[data-tone="info"] .erp-metric-accent {
    background: #4B95D8;
}

:root[data-theme="dark"] .inventory-overview .erp-metric-card[data-tone="focus"] .erp-metric-accent {
    background: #7EA7EE;
}

:root[data-theme="dark"] .inventory-overview .erp-metric-card[data-tone="warning"] .erp-metric-accent {
    background: #D49A58;
}

:root[data-theme="dark"] .text-gray-900,
:root[data-theme="dark"] .text-gray-800,
:root[data-theme="dark"] .text-slate-900,
:root[data-theme="dark"] .text-slate-800 {
    color: var(--text-strong) !important;
}

:root[data-theme="dark"] .text-gray-700,
:root[data-theme="dark"] .text-slate-700,
:root[data-theme="dark"] .text-gray-600,
:root[data-theme="dark"] .text-gray-500,
:root[data-theme="dark"] .text-slate-600,
:root[data-theme="dark"] .text-slate-500 {
    color: var(--text-muted) !important;
}

:root[data-theme="dark"] .border-gray-100,
:root[data-theme="dark"] .border-gray-200,
:root[data-theme="dark"] .border-gray-300,
:root[data-theme="dark"] .border-slate-100,
:root[data-theme="dark"] .border-slate-200,
:root[data-theme="dark"] .border-slate-300 {
    border-color: var(--brand-border) !important;
}

:root[data-theme="dark"] tbody tr:hover {
    background-color: rgba(15, 27, 49, 0.86);
}

@media (max-width: 1023px) {
    body:not(.sidebar-expanded) #secondarySidebar {
        right: 5.75rem !important;
    }

    body.sidebar-expanded #secondarySidebar {
        right: 14.5rem !important;
    }

    .app-topbar {
        padding: 0.75rem 0.75rem 0;
    }

    .app-topbar-shell {
        min-height: auto;
        padding: 0.7rem;
    }

    .app-topbar-actions {
        gap: 0.45rem;
    }

    .topbar-icon-button,
    .current-user-summary {
        width: 2.65rem;
        height: 2.65rem;
        border-radius: 0.9rem;
    }

    .profile-avatar-uploader {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 768px) {
    #appShell {
        padding-bottom: 4.9rem;
    }

    body.app-focus-mode #appShell {
        padding-bottom: 0;
    }

    .primary-sidebar {
        position: fixed;
        inset-inline: 0;
        top: auto;
        bottom: 0;
        width: 100% !important;
        height: 4.9rem;
        padding: 0.35rem 0.5rem;
        z-index: 80;
        flex-direction: row !important;
        align-items: center;
        gap: 0.35rem;
        overflow-x: auto;
        border-top: 1px solid var(--brand-border);
        border-left: 0 !important;
        box-shadow: 0 -18px 42px -32px rgba(15, 23, 42, 0.45);
    }

    .primary-sidebar-top,
    .primary-sidebar-footer-logout,
    .brand-lockup,
    .sidebar-toggle-btn {
        display: none !important;
    }

    .primary-nav-group {
        flex: 1 1 auto;
        flex-direction: row;
        align-items: center;
        gap: 0.35rem;
        min-width: 0;
        overflow-x: auto;
        padding: 0 0.15rem;
    }

    .primary-sidebar-footer {
        display: flex;
        flex: 0 0 auto;
        gap: 0.35rem;
        margin: 0;
        padding: 0;
        border-top: 0;
    }

    .nav-main-collapsible {
        flex: 0 0 auto;
    }

    .nav-main-link,
    .nav-main-settings,
    body.sidebar-expanded .nav-main-link {
        width: 4.85rem;
        min-width: 4.85rem;
        min-height: 4rem;
        flex-direction: column;
        justify-content: center;
        gap: 0.22rem;
        border-radius: 0.9rem;
        padding: 0.35rem 0.25rem;
    }

    .nav-main-label,
    body.sidebar-expanded .nav-main-label {
        display: block;
        font-size: 0.62rem;
        line-height: 1.15;
        text-align: center;
    }

    .nav-main-icon svg {
        width: 1.22rem;
        height: 1.22rem;
    }

    .nav-main-arrow,
    .nav-main-submenu,
    body.sidebar-expanded .nav-main-arrow {
        display: none !important;
    }

    #secondarySidebar {
        position: fixed !important;
        top: 0.75rem;
        right: 0.75rem !important;
        left: 0.75rem;
        bottom: 5.65rem;
        width: auto !important;
        height: auto !important;
        border-radius: 1rem;
        z-index: 70;
        overflow: hidden;
        box-shadow: 0 30px 70px -34px rgba(15, 23, 42, 0.55);
        transform: translateX(120vw) !important;
    }

    body.secondary-sidebar-hidden #secondarySidebar {
        width: auto !important;
        min-width: 0 !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        border-left-width: 1px !important;
    }

    #secondarySidebar:not(.translate-x-full) {
        transform: translateX(0) !important;
    }

    #secondarySidebar .p-4 {
        padding: 0.85rem;
    }

    .sidebar-resize-handle {
        display: none !important;
    }

    #mobileOverlay {
        z-index: 65;
    }

    .secondary-sidebar-controls {
        display: none !important;
    }

    #appShell > main {
        min-width: 0;
        width: 100%;
    }

    .app-topbar {
        padding: 0.5rem 0.5rem 0;
    }

    .app-topbar-shell {
        min-height: 3.45rem;
        border-radius: 1rem;
        padding: 0.45rem;
    }

    .topbar-icon-button,
    .current-user-summary {
        width: 2.45rem;
        height: 2.45rem;
        border-radius: 0.8rem;
    }

    #mainContentContainer .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    #mainContentContainer .py-4 {
        padding-top: 0.8rem !important;
        padding-bottom: 0.8rem !important;
    }

    #mainContentContainer h2 {
        font-size: 1rem;
        line-height: 1.55;
    }

    #mainContentContainer .clean-card {
        border-radius: 0.75rem;
        box-shadow: none;
    }

    .shortcuts-grid {
        grid-template-columns: 1fr;
    }

    .shortcut-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .shortcut-card kbd {
        min-width: 0;
    }
}

/* =========================================
   Modals
========================================= */
#modalsContainer .fixed,
#crmModalsInjected .fixed {
    animation: fadeInModal 0.15s ease;
}

@keyframes fadeInModal {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* =========================================
   Toast container support
========================================= */
#toast-container {
    z-index: 360 !important;
}

#toast-container > div {
    min-width: 220px;
    max-width: 360px;
    word-break: break-word;
}

/* =========================================
   Tools / Invoice Generator
========================================= */
.invoice-tools-header,
.invoice-page-title {
    border: 1px solid #DBEAFE;
    border-radius: 1rem;
    background: linear-gradient(135deg, #2563EB 0%, #0f766e 100%);
    color: #ffffff;
    padding: 1.25rem;
    box-shadow: 0 20px 50px -34px rgba(15, 23, 42, 0.8);
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
}

.invoice-tools-header h1,
.invoice-page-title h1 {
    margin: 0.2rem 0;
    font-size: clamp(1.35rem, 2vw, 2rem);
    font-weight: 900;
    letter-spacing: 0;
}

.invoice-tools-header p,
.invoice-page-title p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.8;
}

.invoice-page-subtitle {
    display: block;
    margin-top: 0.25rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.8;
}

.invoice-history-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
}

.invoice-history-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.invoice-history-head p {
    margin: 0;
    color: #6B7280;
    font-size: 0.78rem;
    font-weight: 900;
}

.invoice-history-head h1 {
    margin: 0.15rem 0 0;
    color: #0f172a;
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: 0;
}

.invoice-floating-create-btn {
    min-height: 2.65rem;
    border: 1px solid #2563EB;
    border-radius: 0.8rem;
    background: #2563eb;
    color: #ffffff;
    padding: 0.55rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-size: 0.84rem;
    font-weight: 900;
    box-shadow: 0 18px 35px -25px rgba(37, 99, 235, 0.9);
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.invoice-floating-create-btn:hover {
    background: #2563EB;
    transform: translateY(-1px);
    box-shadow: 0 22px 40px -25px rgba(37, 99, 235, 1);
}

.invoice-history-row {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.invoice-history-row:hover {
    background: #F9FAFB;
}

.invoice-history-customer {
    display: grid;
    gap: 0.16rem;
}

.invoice-history-customer strong {
    color: #0f172a;
    font-size: 0.86rem;
    font-weight: 900;
}

.invoice-history-customer span {
    color: #6B7280;
    font-size: 0.72rem;
    font-weight: 800;
}

.invoice-tools-header-metrics {
    display: grid;
    min-width: min(24rem, 100%);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.invoice-tools-header-metrics div {
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.12);
    padding: 0.85rem;
}

.invoice-tools-header-metrics span {
    display: block;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.72rem;
    font-weight: 900;
}

.invoice-tools-header-metrics strong {
    display: block;
    margin-top: 0.35rem;
    direction: ltr;
    font-size: 1.05rem;
    font-weight: 900;
    unicode-bidi: plaintext;
}

.invoice-generator-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    gap: 1rem;
    align-items: start;
}

.invoice-panel {
    border: 1px solid #E5E7EB;
    border-radius: 1rem;
    background: #ffffff;
    padding: 1rem;
    box-shadow: 0 18px 42px -34px rgba(15, 23, 42, 0.75);
}

.invoice-panel-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.invoice-panel-title h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 900;
}

.invoice-panel-title span {
    color: #6B7280;
    font-size: 0.72rem;
    font-weight: 800;
}

.invoice-source-box {
    border: 1px dashed #E5E7EB;
    border-radius: 0.75rem;
    background: #F9FAFB;
    padding: 0.85rem;
}

.invoice-source-segments {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
}

.invoice-source-segment {
    min-height: 2.45rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.75rem;
    background: #ffffff;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 900;
    text-align: center;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.invoice-source-segment:hover {
    transform: translateY(-1px);
}

.invoice-source-segment.active {
    border-color: #2563eb;
    background: #EFF6FF;
    color: #2563EB;
}

.invoice-source-segment input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.invoice-source-chips {
    display: flex;
    min-height: 2.5rem;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.invoice-source-chip,
.invoice-source-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid #BFDBFE;
    border-radius: 999px;
    background: #EFF6FF;
    color: #2563EB;
    font-size: 0.72rem;
    font-weight: 900;
}

.invoice-source-chip {
    padding: 0.3rem 0.55rem;
}

.invoice-source-pill {
    padding: 0.25rem 0.5rem;
}

.invoice-subscription-picker {
    margin-top: 1rem;
}

.invoice-subscription-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: end;
}

.invoice-subscription-results {
    max-height: 20rem;
    margin-top: 0.75rem;
    display: grid;
    gap: 0.55rem;
    overflow-y: auto;
    padding-left: 0.25rem;
}

.invoice-subscription-result {
    border: 1px solid #E5E7EB;
    border-radius: 0.85rem;
    background: #ffffff;
    padding: 0.75rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.invoice-subscription-result:hover {
    border-color: #93c5fd;
    transform: translateY(-1px);
}

.invoice-subscription-result.selected {
    border-color: #2563eb;
    background: #EFF6FF;
}

.invoice-subscription-result input {
    width: 1rem;
    height: 1rem;
    accent-color: #2563eb;
}

.invoice-subscription-result-main {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.invoice-subscription-result-main strong {
    overflow: hidden;
    color: #0f172a;
    font-size: 0.86rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-subscription-result-main span,
.invoice-subscription-result-main small {
    overflow: hidden;
    color: #6B7280;
    font-size: 0.72rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-subscription-result-side {
    min-width: 8rem;
    display: grid;
    gap: 0.2rem;
    justify-items: end;
    text-align: left;
}

.invoice-subscription-result-side strong {
    color: #2563EB;
    font-size: 0.84rem;
    font-weight: 900;
    unicode-bidi: plaintext;
}

.invoice-subscription-result-side span {
    color: #6B7280;
    font-size: 0.7rem;
    font-weight: 900;
}

.invoice-subscription-empty {
    border: 1px dashed #E5E7EB;
    border-radius: 0.75rem;
    background: #ffffff;
    padding: 1rem;
    color: #6B7280;
    font-size: 0.8rem;
    font-weight: 800;
    text-align: center;
}

.invoice-subscription-empty.compact {
    padding: 0.65rem;
    font-size: 0.72rem;
}

.invoice-subscription-actions {
    margin-top: 0.75rem;
    display: flex;
    justify-content: flex-end;
}

.invoice-linked-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.65rem;
    background: #ffffff;
    padding: 0.65rem;
}

.invoice-label {
    display: block;
    margin-bottom: 0.35rem;
    color: #6B7280;
    font-size: 0.74rem;
    font-weight: 900;
}

.invoice-label b {
    color: #dc2626;
}

.invoice-summary-panel {
    position: sticky;
    top: 1rem;
}

.invoice-summary-lines {
    display: grid;
    gap: 0.55rem;
}

.invoice-summary-lines div {
    min-height: 2.45rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.75rem;
    background: #F9FAFB;
    padding: 0.55rem 0.7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.invoice-summary-lines span {
    color: #6B7280;
    font-size: 0.78rem;
    font-weight: 900;
}

.invoice-summary-lines strong {
    direction: ltr;
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 900;
    unicode-bidi: plaintext;
}

.invoice-summary-lines .grand {
    border-color: #BFDBFE;
    background: #EFF6FF;
}

.invoice-summary-lines .grand strong {
    color: #2563EB;
    font-size: 1rem;
}

.invoice-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(15, 23, 42, 0.42);
    animation: invoiceOverlayIn 0.3s ease-out both;
}

.invoice-drawer,
.invoice-preview-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 71;
    height: 100vh;
    width: min(64rem, calc(100vw - 1.5rem));
    background: #F9FAFB;
    color: #111827;
    box-shadow: -28px 0 60px -38px rgba(15, 23, 42, 0.75);
    display: flex;
    flex-direction: column;
    animation: invoiceDrawerIn 0.3s ease-out both;
}

.invoice-preview-drawer {
    width: min(58rem, calc(100vw - 1.5rem));
}

.invoice-drawer-header {
    min-height: 5rem;
    border-bottom: 1px solid #E5E7EB;
    background: #ffffff;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.invoice-drawer-header span {
    display: block;
    color: #6B7280;
    font-size: 0.72rem;
    font-weight: 900;
}

.invoice-drawer-header h2 {
    margin: 0.2rem 0 0;
    color: #0f172a;
    font-size: 1.2rem;
    font-weight: 900;
}

.invoice-drawer-close {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.75rem;
    background: #ffffff;
    color: #6B7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.invoice-drawer-close:hover {
    background: #fee2e2;
    color: #dc2626;
    transform: translateY(-1px);
}

.invoice-drawer-close:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
}

.invoice-drawer-close svg {
    width: 1.1rem;
    height: 1.1rem;
}

.invoice-drawer-body {
    min-height: 0;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
    gap: 1rem;
    overflow-y: auto;
    padding: 1rem 1.25rem 6.5rem;
}

.invoice-drawer-main {
    display: grid;
    align-content: start;
    gap: 1rem;
}

.invoice-drawer-section {
    border: 1px solid #E5E7EB;
    border-radius: 0.95rem;
    background: #ffffff;
    padding: 1rem;
}

.invoice-drawer-section-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
}

.invoice-drawer-section-title span {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 999px;
    background: #EFF6FF;
    color: #2563EB;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 900;
}

.invoice-drawer-section-title h3 {
    margin: 0;
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 900;
}

.invoice-drawer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.invoice-drawer-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.invoice-drawer-wide {
    grid-column: 1 / -1;
}

.invoice-items-list {
    display: grid;
    gap: 0.75rem;
}

.invoice-item-card {
    border: 1px solid #E5E7EB;
    border-radius: 0.9rem;
    background: #F9FAFB;
    padding: 0.85rem;
    animation: invoiceItemIn 0.22s ease-out both;
}

.invoice-item-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: end;
}

.invoice-item-card-grid {
    margin-top: 0.75rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: end;
}

.invoice-item-total {
    min-height: 2.75rem;
    border: 1px solid #BFDBFE;
    border-radius: 0.75rem;
    background: #EFF6FF;
    padding: 0.45rem 0.65rem;
    display: grid;
    align-content: center;
    gap: 0.1rem;
}

.invoice-item-total span {
    color: #6B7280;
    font-size: 0.68rem;
    font-weight: 900;
}

.invoice-item-total strong {
    color: #2563EB;
    font-size: 0.86rem;
    font-weight: 900;
    unicode-bidi: plaintext;
}

.invoice-drawer-actions-row {
    margin-top: 0.85rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.invoice-drawer-summary {
    position: sticky;
    top: 0;
    align-self: start;
    border: 1px solid #DBEAFE;
    border-radius: 1rem;
    background: #ffffff;
    padding: 1rem;
    box-shadow: 0 18px 42px -34px rgba(15, 23, 42, 0.75);
}

.invoice-drawer-adjustments {
    margin-top: 1rem;
    display: grid;
    gap: 0.75rem;
}

.invoice-adjustment-block {
    border: 1px solid #E5E7EB;
    border-radius: 0.85rem;
    background: #F9FAFB;
    padding: 0.75rem;
}

.invoice-adjustment-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.invoice-adjustment-head strong {
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 900;
}

.invoice-adjustment-grid {
    margin-top: 0.75rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.invoice-switch.compact {
    width: 2.55rem;
    height: 1.45rem;
}

.invoice-switch.compact span::before {
    width: 1.02rem;
    height: 1.02rem;
}

.invoice-switch.compact input:checked + span::before {
    transform: translateX(-1.1rem);
}

.invoice-drawer-footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 4.75rem;
    border-top: 1px solid #E5E7EB;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    padding: 0.9rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.invoice-primary-action.compact.solid {
    background: #2563EB;
    color: #ffffff;
}

.invoice-button-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    border-radius: 999px;
    animation: invoiceSpin 0.75s linear infinite;
}

.invoice-preview-body {
    min-height: 0;
    flex: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.85rem;
    overflow: hidden;
    padding: 1rem 1.25rem 6.5rem;
}

.invoice-preview-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
}

.invoice-preview-meta div {
    border: 1px solid #E5E7EB;
    border-radius: 0.8rem;
    background: #ffffff;
    padding: 0.7rem;
}

.invoice-preview-meta span {
    display: block;
    color: #6B7280;
    font-size: 0.7rem;
    font-weight: 900;
}

.invoice-preview-meta strong {
    display: block;
    margin-top: 0.25rem;
    overflow: hidden;
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-preview-frame {
    min-height: 0;
    border: 1px solid #E5E7EB;
    border-radius: 1rem;
    overflow: hidden;
    background: #ffffff;
}

.invoice-preview-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #ffffff;
}

.invoice-preview-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

@keyframes invoiceOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes invoiceDrawerIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes invoiceItemIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.invoice-primary-action,
.invoice-secondary-action,
.invoice-muted-action,
.invoice-table-action {
    min-height: 2.5rem;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    padding: 0.55rem 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 900;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.invoice-primary-action {
    width: 100%;
    margin-top: 1rem;
    background: #2563EB;
    color: #ffffff;
}

.invoice-primary-action.compact {
    width: auto;
    margin-top: 0;
    background: #ffffff;
    color: #2563EB;
}

.invoice-primary-action:hover,
.invoice-secondary-action:hover,
.invoice-muted-action:hover,
.invoice-table-action:hover {
    transform: translateY(-1px);
}

.invoice-primary-action:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    transform: none;
}

.invoice-secondary-action {
    background: #EFF6FF;
    border-color: #BFDBFE;
    color: #2563EB;
}

.invoice-muted-action,
.invoice-table-action {
    background: #ffffff;
    border-color: #E5E7EB;
    color: #111827;
}

.invoice-table-action {
    min-height: 2rem;
    border-radius: 0.55rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.72rem;
}

.invoice-table-action.danger {
    border-color: #fecaca;
    color: #dc2626;
}

.invoice-icon-btn {
    width: 2.15rem;
    height: 2.15rem;
    border: 1px solid #fecaca;
    border-radius: 0.65rem;
    background: #fff7f7;
    color: #dc2626;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.invoice-icon-btn svg {
    width: 1rem;
    height: 1rem;
}

.invoice-toggle-row {
    min-height: 4.75rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.85rem;
    background: #F9FAFB;
    padding: 0.9rem;
    margin-bottom: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.invoice-toggle-row h3 {
    margin: 0;
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 900;
}

.invoice-toggle-row p {
    margin: 0.25rem 0 0;
    color: #6B7280;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.7;
}

.invoice-switch {
    position: relative;
    width: 3rem;
    height: 1.65rem;
    flex: 0 0 auto;
}

.invoice-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.invoice-switch span {
    position: absolute;
    inset: 0;
    cursor: pointer;
    border-radius: 999px;
    background: #E5E7EB;
    transition: background-color 0.16s ease;
}

.invoice-switch span::before {
    content: "";
    position: absolute;
    top: 0.22rem;
    right: 0.22rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 6px 14px -8px rgba(15, 23, 42, 0.7);
    transition: transform 0.16s ease;
}

.invoice-switch input:checked + span {
    background: #2563EB;
}

.invoice-switch input:checked + span::before {
    transform: translateX(-1.35rem);
}

.invoice-paid-pill,
.invoice-remaining-pill {
    display: inline-flex;
    min-height: 1.8rem;
    align-items: center;
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 900;
}

.invoice-paid-pill {
    background: #dcfce7;
    color: #047857;
}

.invoice-remaining-pill {
    direction: ltr;
    background: #fff7ed;
    color: #c2410c;
    unicode-bidi: plaintext;
}

@media (max-width: 1024px) {
    .invoice-generator-layout,
    .invoice-tools-header,
    .invoice-page-title {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .invoice-summary-panel {
        position: static;
    }

    .invoice-tools-header-metrics {
        min-width: 0;
    }

    .invoice-drawer-body {
        grid-template-columns: 1fr;
    }

    .invoice-drawer-summary {
        position: static;
    }

    .invoice-drawer-grid.three,
    .invoice-preview-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .invoice-drawer,
    .invoice-preview-drawer {
        width: 100vw;
    }

    .invoice-history-actions,
    .invoice-drawer-footer {
        justify-content: stretch;
    }

    .invoice-history-actions > *,
    .invoice-drawer-footer > * {
        flex: 1 1 auto;
    }

    .invoice-source-segments,
    .invoice-drawer-grid,
    .invoice-drawer-grid.three,
    .invoice-item-card-grid,
    .invoice-adjustment-grid,
    .invoice-preview-meta {
        grid-template-columns: 1fr;
    }

    .invoice-subscription-toolbar {
        grid-template-columns: 1fr;
    }

    .invoice-subscription-result {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .invoice-subscription-result-side {
        grid-column: 2;
        min-width: 0;
        justify-items: start;
        text-align: right;
    }
}

@media (prefers-reduced-motion: reduce) {
    .invoice-drawer-overlay,
    .invoice-drawer,
    .invoice-preview-drawer,
    .invoice-item-card {
        animation: none;
    }
}

/* =========================================
   Utility helpers
========================================= */
.font-mono {
    direction: ltr;
    unicode-bidi: plaintext;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================
   RBAC UI Guards
========================================= */
body[data-role="employee"] #main-btn-finance,
body[data-role="employee"] #main-btn-settings,
body[data-role="employee"] #set-btn-users,
body[data-role="employee"] #crm-btn-customers,
body[data-role="employee"] #editSubCostContainer,
body[data-role="employee"] #dsCostContainer,
body[data-role="employee"] #invSupplierName,
body[data-role="employee"] #invPurchaseCost,
body[data-role="employee"] #renewCost {
    display: none !important;
}

/* =========================================
   Welcome View
========================================= */
.welcome-hero-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #dbeafe;
    border-radius: 1.25rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 45%, #f0f9ff 100%);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    box-shadow: 0 24px 40px -34px rgba(15, 23, 42, 0.45);
}

.welcome-hero-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    background: linear-gradient(145deg, #0b5deb, #3b82f6);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 28px -16px rgba(11, 93, 235, 0.7);
}

.welcome-hero-icon svg {
    width: 1.8rem;
    height: 1.8rem;
}

.welcome-hero-kicker {
    color: #2563eb;
    font-size: 0.75rem;
    font-weight: 900;
}

.welcome-hero-title {
    color: #0f172a;
    font-size: 1.42rem;
    line-height: 1.7;
    font-weight: 900;
}

.welcome-hero-subtitle {
    color: #1e3a8a;
    font-size: 0.95rem;
    line-height: 1.9;
    font-weight: 700;
}

.welcome-motivation-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.welcome-motivation-card,
.welcome-progress-card,
.welcome-quick-links-card {
    border: 1px solid #e2e8f0;
    border-radius: 1.15rem;
    background: #ffffff;
    padding: 1rem 1.05rem;
}

.welcome-motivation-card h2,
.welcome-progress-card h2,
.welcome-quick-links-head h2 {
    color: #0f172a;
    font-size: 1rem;
    font-weight: 900;
    margin: 0;
}

.welcome-motivation-card ul {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.55rem;
}

.welcome-motivation-card li {
    border: 1px solid #e2e8f0;
    border-radius: 0.8rem;
    background: #f8fafc;
    padding: 0.6rem 0.75rem;
    font-size: 0.84rem;
    line-height: 1.75;
    color: #334155;
    font-weight: 800;
}

.welcome-motivation-quote {
    margin: 0.8rem 0 0;
    font-size: 0.84rem;
    line-height: 1.8;
    color: #1d4ed8;
    font-weight: 900;
}

.welcome-progress-intro {
    margin: 0.55rem 0 0;
    font-size: 0.82rem;
    line-height: 1.75;
    color: #64748b;
    font-weight: 700;
}

.welcome-progress-grid {
    margin-top: 0.8rem;
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.welcome-progress-item {
    border-radius: 0.9rem;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    padding: 0.65rem;
    display: grid;
    gap: 0.18rem;
}

.welcome-progress-item span {
    font-size: 0.7rem;
    color: #475569;
    font-weight: 900;
}

.welcome-progress-item strong {
    font-size: 1.2rem;
    color: #0b5deb;
    line-height: 1.2;
    font-weight: 900;
}

.welcome-progress-item small {
    font-size: 0.68rem;
    line-height: 1.55;
    color: #64748b;
    font-weight: 700;
}

.welcome-quick-links-head {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.welcome-quick-links-head p {
    margin: 0;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 700;
}

.welcome-quick-links-grid {
    margin-top: 0.85rem;
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.welcome-quick-link-btn {
    width: 100%;
    border: 1px solid #dbeafe;
    background: #f8fbff;
    border-radius: 0.95rem;
    padding: 0.68rem 0.75rem;
    text-align: right;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.6rem;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.welcome-quick-link-btn:hover {
    background: #ffffff;
    border-color: #93c5fd;
    transform: translateY(-1px);
}

.welcome-quick-link-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.welcome-quick-link-content {
    display: grid;
    gap: 0.15rem;
}

.welcome-quick-link-content strong {
    color: #0f172a;
    font-size: 0.86rem;
    font-weight: 900;
}

.welcome-quick-link-content small {
    color: #64748b;
    font-size: 0.73rem;
    line-height: 1.6;
    font-weight: 700;
}

.welcome-quick-link-arrow {
    color: #2563eb;
    font-size: 0.95rem;
    font-weight: 900;
}

.welcome-empty-links {
    border: 1px dashed #cbd5e1;
    border-radius: 0.9rem;
    background: #f8fafc;
    color: #64748b;
    padding: 1rem;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 800;
}

@media (max-width: 1024px) {
    .welcome-motivation-grid {
        grid-template-columns: 1fr;
    }

    .welcome-quick-links-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .welcome-hero-card {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .welcome-hero-icon {
        width: 2.9rem;
        height: 2.9rem;
    }

    .welcome-hero-title {
        font-size: 1.18rem;
    }

    .welcome-progress-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   Operational Consistency System
========================================= */
:root {
    --ops-bg: #f3f5f7;
    --ops-surface: #ffffff;
    --ops-surface-soft: #f8fafc;
    --ops-border: #dbe2ea;
    --ops-text: #0f172a;
    --ops-muted: #64748b;
    --ops-primary: #0b5deb;
    --ops-primary-soft: #eaf2ff;
    --ops-radius-sm: 0.5rem;
    --ops-radius-md: 0.65rem;
    --ops-control-h: 2.35rem;
    --shadow-soft: none;
    --shadow-medium: none;
    --shadow-popover: none;
}

:root[data-theme="dark"] {
    --ops-bg: #0a1220;
    --ops-surface: #101a2c;
    --ops-surface-soft: #111f34;
    --ops-border: rgba(148, 163, 184, 0.24);
    --ops-text: #e5edff;
    --ops-muted: #b4c2da;
    --ops-primary: #78a8f4;
    --ops-primary-soft: rgba(120, 168, 244, 0.22);
}

body {
    font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
    color: var(--ops-text);
    background: var(--ops-bg);
    font-size: 0.9rem;
    line-height: 1.5;
}

#appShell > main,
#mainContentContainer,
.auth-page-modal {
    background: var(--ops-bg) !important;
}

#loadingScreen {
    background: rgba(248, 250, 252, 0.9) !important;
    backdrop-filter: none !important;
}

#mobileOverlay,
.topbar-dropdown,
.floating-logout-btn,
#modalsContainer .fixed,
#crmModalsInjected .fixed {
    backdrop-filter: none !important;
}

.clean-card,
.shortcut-card,
.chat-hub-panel,
.chat-hub-modal-card,
.topbar-dropdown,
.floating-logout-btn,
.welcome-hero-card,
.welcome-motivation-card,
.auth-card,
.app-topbar-shell {
    box-shadow: none !important;
    border: 1px solid var(--ops-border) !important;
    background: var(--ops-surface) !important;
}

#modalsContainer .fixed > div,
#crmModalsInjected .fixed > div {
    border: 1px solid var(--ops-border) !important;
    border-radius: var(--ops-radius-md) !important;
    box-shadow: none !important;
    background: var(--ops-surface) !important;
}

#mainContentContainer .rounded-3xl,
#mainContentContainer .rounded-2xl,
#mainContentContainer .rounded-xl,
#modalsContainer .rounded-3xl,
#modalsContainer .rounded-2xl,
#modalsContainer .rounded-xl,
#crmModalsInjected .rounded-3xl,
#crmModalsInjected .rounded-2xl,
#crmModalsInjected .rounded-xl {
    border-radius: var(--ops-radius-md) !important;
}

#mainContentContainer .shadow,
#mainContentContainer .shadow-sm,
#mainContentContainer .shadow-md,
#mainContentContainer .shadow-lg,
#mainContentContainer .shadow-xl,
#mainContentContainer [class*="shadow-"] {
    box-shadow: none !important;
}

#mainContentContainer .p-6,
#mainContentContainer .px-6 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}

#mainContentContainer .py-4,
#mainContentContainer .p-4 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

#mainContentContainer h1,
#mainContentContainer h2,
#mainContentContainer h3 {
    color: var(--ops-text) !important;
}

#mainContentContainer p,
#mainContentContainer small,
#mainContentContainer .text-textMuted {
    color: var(--ops-muted) !important;
}

.app-topbar {
    padding: 0.55rem 0.55rem 0 !important;
}

.app-topbar-shell {
    min-height: 3.2rem !important;
    border-radius: var(--ops-radius-md) !important;
    padding: 0.45rem 0.55rem !important;
    background: var(--ops-surface) !important;
}

.topbar-icon-button,
.current-user-summary {
    width: 2.4rem !important;
    height: 2.4rem !important;
    border-radius: var(--ops-radius-sm) !important;
    border-color: var(--ops-border) !important;
    background: var(--ops-surface) !important;
    box-shadow: none !important;
}

.topbar-icon-button:hover,
.topbar-icon-button:focus-visible,
.current-user-summary:hover,
.current-user-summary:focus-visible,
.topbar-icon-button.is-open,
.current-user-summary.is-open {
    transform: none !important;
    border-color: #c3d4ea !important;
    background: var(--ops-surface-soft) !important;
}

.topbar-dropdown {
    border-radius: var(--ops-radius-md) !important;
    border-color: var(--ops-border) !important;
    background: var(--ops-surface) !important;
    animation: none !important;
}

.nav-main-link,
.nav-sub-link,
.nav-main-subitem,
.topbar-icon-button,
.current-user-summary,
.edit-input,
.auth-input,
.auth-submit,
.auth-secondary-button,
.btn-action,
.invoice-table-action,
button {
    transition: background-color 0.12s linear, border-color 0.12s linear, color 0.12s linear !important;
}

.nav-main-link {
    min-height: 3.55rem !important;
    padding: 0.48rem 0.34rem !important;
    gap: 0.25rem !important;
    border-radius: var(--ops-radius-md) !important;
}

body.sidebar-expanded .nav-main-link {
    min-height: 2.75rem !important;
    padding: 0.48rem 0.65rem !important;
}

.nav-main-icon svg {
    width: 1.15rem !important;
    height: 1.15rem !important;
}

.nav-main-label {
    font-size: 0.64rem !important;
}

body.sidebar-expanded .nav-main-label {
    font-size: 0.78rem !important;
}

.nav-main-subitem {
    min-height: 2rem !important;
    font-size: 0.65rem !important;
}

body.sidebar-expanded .nav-main-subitem {
    font-size: 0.72rem !important;
}

.nav-main-link.active-main {
    color: var(--ops-primary) !important;
    background: var(--ops-primary-soft) !important;
    border-color: #bed4f4 !important;
    box-shadow: none !important;
}

.nav-main-link:hover {
    color: var(--ops-text) !important;
    background: var(--ops-surface-soft) !important;
    border-color: var(--ops-border) !important;
    transform: none !important;
}

.nav-main-subitem,
.nav-sub-link {
    border-radius: var(--ops-radius-sm) !important;
}

.nav-sub-heading {
    font-size: 0.66rem !important;
}

.nav-sub-link {
    min-height: 2.35rem;
    padding: 0.48rem 0.7rem !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    margin-bottom: 0.18rem !important;
}

.nav-main-subitem.active-submain,
.nav-sub-link.active-sub {
    color: var(--ops-primary) !important;
    background: var(--ops-primary-soft) !important;
    border-color: #bed4f4 !important;
    box-shadow: none !important;
}

.nav-main-subitem:hover,
.nav-sub-link:hover {
    transform: none !important;
    border-color: var(--ops-border) !important;
    background: var(--ops-surface-soft) !important;
}

input.edit-input,
select.edit-input,
textarea.edit-input,
.auth-input,
.chat-hub-private-select,
#refundFilterSearch,
#refundFilterStatus,
#refundFilterPriority,
#refundFilterPayment,
#refundFilterDateFrom,
#refundFilterDateTo {
    min-height: var(--ops-control-h) !important;
    border-radius: var(--ops-radius-sm) !important;
    border: 1px solid var(--ops-border) !important;
    background: var(--ops-surface) !important;
    color: var(--ops-text) !important;
    box-shadow: none !important;
}

input.edit-input:focus,
select.edit-input:focus,
textarea.edit-input:focus,
.auth-input:focus,
.chat-hub-private-select:focus,
#refundFilterSearch:focus,
#refundFilterStatus:focus,
#refundFilterPriority:focus,
#refundFilterPayment:focus,
#refundFilterDateFrom:focus,
#refundFilterDateTo:focus {
    border-color: #98b5de !important;
    box-shadow: 0 0 0 2px rgba(11, 93, 235, 0.12) !important;
    outline: none !important;
}

.btn-action,
.auth-submit,
.auth-secondary-button,
.invoice-table-action,
button.bg-primary,
a.bg-primary {
    border-radius: var(--ops-radius-sm) !important;
    box-shadow: none !important;
    transform: none !important;
}

.auth-submit {
    height: var(--ops-control-h) !important;
    font-size: 0.86rem !important;
    font-weight: 800 !important;
    background: var(--ops-primary) !important;
}

.auth-secondary-button {
    min-height: var(--ops-control-h) !important;
}

.auth-split-shell {
    grid-template-columns: 1fr !important;
    background: var(--ops-bg) !important;
}

.auth-context-panel {
    display: none !important;
}

.auth-form-side {
    min-height: 100vh !important;
    background: var(--ops-bg) !important;
    padding: 1.25rem 0.9rem !important;
}

.auth-card {
    max-width: 430px !important;
    border-radius: var(--ops-radius-md) !important;
    padding: 1.15rem !important;
    box-shadow: none !important;
}

.auth-card-header {
    margin-bottom: 0.9rem !important;
}

.auth-card-header h3 {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
}

.auth-card-header p {
    margin-top: 0.35rem !important;
    font-size: 0.8rem !important;
}

.chat-hub-panel,
.chat-hub-header,
.chat-hub-tabs,
.chat-hub-content,
.chat-hub-composer,
.chat-hub-activity-slot {
    background: var(--ops-surface) !important;
}

.chat-hub-tabs button.active,
.chat-hub-bubble,
.focus-mode-exit-button {
    box-shadow: none !important;
}

.chat-hub-header,
.chat-hub-tabs,
.chat-hub-activity-slot {
    border-color: var(--ops-border) !important;
}

table {
    border: 1px solid var(--ops-border);
    border-radius: var(--ops-radius-md);
    overflow: hidden;
    background: var(--ops-surface);
}

thead th {
    background: var(--ops-surface-soft);
    color: var(--ops-muted);
    border-bottom: 1px solid var(--ops-border);
    font-weight: 800;
    font-size: 0.72rem;
}

tbody td {
    border-bottom: 1px solid var(--ops-border);
    color: var(--ops-text);
}

tbody tr:hover {
    background: rgba(148, 163, 184, 0.08);
}

tbody tr:last-child td {
    border-bottom: none;
}

.focus-mode-exit-button {
    border: 1px solid var(--ops-border) !important;
    background: var(--ops-surface) !important;
    border-radius: var(--ops-radius-sm) !important;
}

@media (max-width: 1024px) {
    .app-topbar {
        padding: 0.45rem 0.45rem 0 !important;
    }

    #mainContentContainer .p-6,
    #mainContentContainer .px-6 {
        padding-right: 0.75rem !important;
        padding-left: 0.75rem !important;
    }
}

/* =========================================
   Final Screen Tuning Pass
========================================= */
#mainContentContainer .inventory-screen,
#mainContentContainer .crm-subscriptions-view,
#mainContentContainer .crm-customers-view,
#mainContentContainer .upgrade-tasks-view,
#mainContentContainer .upgrade-dashboard-view,
#mainContentContainer .settings-screen,
#mainContentContainer .tools-history-view {
    background: var(--ops-bg) !important;
}

#mainContentContainer .inventory-category-view > div:first-child,
#mainContentContainer .crm-subscriptions-view > div:first-child,
#mainContentContainer .crm-customers-view > div:first-child,
#mainContentContainer .settings-screen > div:first-child,
#mainContentContainer .upgrade-dashboard-view > div:first-child,
#mainContentContainer .upgrade-tasks-view #upgradeTaskViewport > div:first-child {
    padding: 0.8rem 1rem !important;
    border-bottom: 1px solid var(--ops-border) !important;
    background: var(--ops-surface-soft) !important;
}

#mainContentContainer .inventory-overview .erp-metric-card,
#mainContentContainer .inventory-overview .erp-category-card {
    border-color: var(--ops-border) !important;
    border-radius: var(--ops-radius-md) !important;
    padding: 0.75rem !important;
}

#mainContentContainer .inventory-overview .erp-metric-value {
    font-size: 1.45rem !important;
}

#mainContentContainer .inventory-overview .erp-metric-note {
    font-size: 0.72rem !important;
    line-height: 1.45 !important;
}

#mainContentContainer .inventory-category-view #filtersContainer {
    padding: 0.7rem !important;
    background: var(--ops-surface) !important;
    border-color: var(--ops-border) !important;
    box-shadow: none !important;
}

#mainContentContainer .inventory-visible-search-strip,
#mainContentContainer .crm-visible-search-strip {
    padding: 0.65rem 0.75rem !important;
    background: var(--ops-surface) !important;
    border-color: var(--ops-border) !important;
}

#mainContentContainer .inventory-visible-search-strip input,
#mainContentContainer .crm-visible-search-strip input {
    min-height: 2.15rem !important;
    border-radius: var(--ops-radius-sm) !important;
}

#mainContentContainer .inventory-category-view,
#mainContentContainer .crm-subscriptions-view {
    min-height: 0;
}

#inventoryTableScrollArea,
#crmSubscriptionsScrollArea {
    min-height: 0;
    overflow: auto !important;
    overscroll-behavior: contain;
}

#inventoryTableScrollArea .clean-card,
#crmSubscriptionsScrollArea .clean-card {
    min-width: max-content;
}

#mainContentContainer .inventory-category-view #filtersContainer .grid {
    gap: 0.55rem !important;
}

#mainContentContainer .inventory-category-view #filtersContainer input,
#mainContentContainer .inventory-category-view #filtersContainer select,
#mainContentContainer .inventory-category-view #filtersContainer button,
#mainContentContainer .inventory-category-view #bulkActionBar select,
#mainContentContainer .inventory-category-view #bulkActionBar button {
    min-height: 2.1rem !important;
    border-radius: var(--ops-radius-sm) !important;
}

#mainContentContainer .inventory-category-view #bulkActionBar {
    margin-top: 0.55rem !important;
    padding: 0.65rem !important;
    border-color: #bfd2f1 !important;
    background: var(--ops-primary-soft) !important;
}

#mainContentContainer .inventory-category-view .clean-card {
    border: 1px solid var(--ops-border) !important;
    border-radius: var(--ops-radius-md) !important;
}

#mainContentContainer .inventory-category-view table th,
#mainContentContainer .inventory-category-view table td {
    padding: 0.55rem 0.65rem !important;
}

#crmFiltersContainer {
    padding: 0.65rem 0.75rem !important;
    gap: 0.45rem !important;
    background: var(--ops-surface) !important;
    border-color: var(--ops-border) !important;
    box-shadow: none !important;
}

#crmFiltersContainer input,
#crmFiltersContainer select,
#crmFiltersContainer button,
#mainContentContainer .crm-customers-view #custSearch,
#mainContentContainer .crm-customers-view [id^="custFilter"] {
    min-height: 2.1rem !important;
    border-radius: var(--ops-radius-sm) !important;
}

#mainContentContainer .crm-subscriptions-view table th,
#mainContentContainer .crm-subscriptions-view table td,
#mainContentContainer .crm-customers-view table th,
#mainContentContainer .crm-customers-view table td {
    padding: 0.55rem 0.65rem !important;
}

#mainContentContainer .crm-subscriptions-view .clean-card,
#mainContentContainer .crm-customers-view .clean-card {
    border: 1px solid var(--ops-border) !important;
    border-radius: var(--ops-radius-md) !important;
}

@media (max-width: 1536px), (max-height: 900px) {
    #mainContentContainer .inventory-category-view > div:first-child,
    #mainContentContainer .crm-subscriptions-view > div:first-child {
        padding: 0.6rem 0.75rem !important;
    }

    #mainContentContainer .inventory-category-view .text-xl,
    #mainContentContainer .crm-subscriptions-view .text-xl {
        font-size: 1.05rem !important;
    }

    #mainContentContainer .inventory-category-view #filtersContainer .grid {
        gap: 0.45rem !important;
    }

    #mainContentContainer .inventory-category-view #filtersContainer input,
    #mainContentContainer .inventory-category-view #filtersContainer select,
    #mainContentContainer .inventory-category-view #filtersContainer button,
    #crmFiltersContainer input,
    #crmFiltersContainer select,
    #crmFiltersContainer button {
        min-height: 1.95rem !important;
        font-size: 0.7rem !important;
    }

    #mainContentContainer .inventory-category-view table th,
    #mainContentContainer .inventory-category-view table td,
    #mainContentContainer .crm-subscriptions-view table th,
    #mainContentContainer .crm-subscriptions-view table td {
        padding: 0.42rem 0.5rem !important;
        font-size: 0.72rem !important;
    }
}

#crmBulkSelectionBanner {
    border-radius: var(--ops-radius-sm) !important;
    border-color: #f5d195 !important;
    background: #fff9ec !important;
}

#upgradeTaskViewport {
    background: var(--ops-bg) !important;
}

#upgradeTaskViewport .upgrade-task-list-wrap {
    padding: 0.85rem 1rem !important;
}

#upgradeTaskViewport [data-upgrade-metric],
#upgradeTaskViewport [data-upgrade-task-id],
#upgradeTaskViewport .rounded-3xl,
#upgradeTaskViewport .rounded-2xl {
    border-radius: var(--ops-radius-md) !important;
    border-color: var(--ops-border) !important;
    box-shadow: none !important;
}

#upgradeTaskViewport [data-upgrade-action],
#upgradeTaskViewport #upgradeBulkClaimButton {
    border-radius: var(--ops-radius-sm) !important;
    box-shadow: none !important;
}

#upgradeTaskViewport #upgradeLoadMoreSentinel {
    border-color: var(--ops-border) !important;
    background: var(--ops-surface-soft) !important;
}

#mainContentContainer .tools-history-view {
    background: var(--ops-bg) !important;
}

#mainContentContainer .tools-history-view .mx-auto {
    max-width: 100% !important;
}

#mainContentContainer .tools-history-view .invoice-history-head {
    margin-bottom: 0.5rem !important;
    padding: 0.8rem 1rem !important;
    border: 1px solid var(--ops-border) !important;
    border-radius: var(--ops-radius-md) !important;
    background: var(--ops-surface) !important;
}

#mainContentContainer .tools-history-view .invoice-panel {
    border-color: var(--ops-border) !important;
    border-radius: var(--ops-radius-md) !important;
    box-shadow: none !important;
    padding: 0.65rem !important;
}

#mainContentContainer .tools-history-view .invoice-history-table th,
#mainContentContainer .tools-history-view .invoice-history-table td {
    padding: 0.55rem 0.65rem !important;
}

.invoice-floating-create-btn,
.invoice-primary-action,
.invoice-secondary-action,
.invoice-muted-action,
.invoice-table-action {
    border-radius: var(--ops-radius-sm) !important;
    box-shadow: none !important;
}

.invoice-drawer-overlay,
.invoice-drawer,
.invoice-preview-drawer,
.invoice-item-card {
    animation: none !important;
}

.invoice-drawer-overlay {
    background: rgba(15, 23, 42, 0.28) !important;
}

.invoice-drawer,
.invoice-preview-drawer {
    width: min(54rem, calc(100vw - 0.5rem)) !important;
    background: var(--ops-bg) !important;
    border-left: 1px solid var(--ops-border) !important;
    box-shadow: none !important;
}

.invoice-drawer-header,
.invoice-drawer-footer,
.invoice-drawer-summary,
.invoice-subscription-result,
.invoice-source-box {
    box-shadow: none !important;
}

.invoice-drawer-header {
    min-height: 4rem !important;
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid var(--ops-border) !important;
}

.invoice-drawer-body {
    padding: 0.75rem !important;
    gap: 0.75rem !important;
}

#mainContentContainer .settings-screen .clean-card {
    border: 1px solid var(--ops-border) !important;
    border-radius: var(--ops-radius-md) !important;
    background: var(--ops-surface) !important;
}

#mainContentContainer .settings-screen .clean-card > div:first-child {
    padding: 0.65rem 0.85rem !important;
    background: var(--ops-surface-soft) !important;
    border-bottom: 1px solid var(--ops-border) !important;
}

#mainContentContainer .settings-screen table th,
#mainContentContainer .settings-screen table td {
    padding: 0.6rem 0.7rem !important;
}

#mainContentContainer .settings-screen article,
#mainContentContainer .settings-screen details,
#mainContentContainer .settings-screen .rounded-3xl,
#mainContentContainer .settings-screen .rounded-2xl,
#mainContentContainer .settings-screen .rounded-xl {
    border-radius: var(--ops-radius-md) !important;
    border-color: var(--ops-border) !important;
    box-shadow: none !important;
}

@media (max-width: 1024px) {
    #mainContentContainer .inventory-category-view #filtersContainer,
    #crmFiltersContainer {
        padding: 0.55rem !important;
    }

    .invoice-drawer,
    .invoice-preview-drawer {
        width: 100vw !important;
    }
}

/* =========================================
   Dark Mode Contrast Fixes
========================================= */
:root[data-theme="dark"] .topbar-account-menu,
:root[data-theme="dark"] .topbar-account-menu.topbar-dropdown {
    background: var(--ops-surface) !important;
    border-color: rgba(148, 163, 184, 0.34) !important;
    color: var(--ops-text) !important;
}

:root[data-theme="dark"] .topbar-account-menu .account-menu-head,
:root[data-theme="dark"] .topbar-account-menu .account-status-control,
:root[data-theme="dark"] .topbar-account-menu .account-status-duration,
:root[data-theme="dark"] .topbar-account-menu .account-day-toggle {
    border-color: rgba(148, 163, 184, 0.28) !important;
}

:root[data-theme="dark"] .topbar-account-menu .account-menu-head strong,
:root[data-theme="dark"] .topbar-account-menu .account-day-toggle,
:root[data-theme="dark"] .topbar-account-menu .account-menu-item {
    color: var(--ops-text) !important;
}

:root[data-theme="dark"] .topbar-account-menu .account-menu-head span,
:root[data-theme="dark"] .topbar-account-menu .current-availability-summary small,
:root[data-theme="dark"] .topbar-account-menu .account-status-duration label {
    color: var(--ops-muted) !important;
}

:root[data-theme="dark"] .topbar-account-menu .availability-badge {
    background: rgba(8, 16, 30, 0.98) !important;
    border-color: rgba(120, 168, 244, 0.42) !important;
    color: #eef5ff !important;
}

:root[data-theme="dark"] .topbar-account-menu .account-menu-head .availability-badge {
    color: #eef5ff !important;
}

:root[data-theme="dark"] .topbar-account-menu .availability-badge small {
    color: #b7c8e3 !important;
}

:root[data-theme="dark"] .topbar-account-menu .availability-dot {
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2) !important;
}

:root[data-theme="dark"] .topbar-account-menu .availability-busy .availability-dot {
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2) !important;
}

:root[data-theme="dark"] .topbar-account-menu .availability-offline .availability-dot {
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}

:root[data-theme="dark"] .topbar-account-menu .account-status-chip {
    background: rgba(8, 16, 30, 0.95) !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
    color: #c8d7ee !important;
}

:root[data-theme="dark"] .topbar-account-menu .account-status-chip:hover,
:root[data-theme="dark"] .topbar-account-menu .account-status-chip:focus-visible,
:root[data-theme="dark"] .topbar-account-menu .account-status-chip.is-active {
    background: rgba(120, 168, 244, 0.24) !important;
    border-color: rgba(147, 197, 253, 0.62) !important;
    color: #ffffff !important;
}

:root[data-theme="dark"] .topbar-account-menu .account-menu-item svg {
    color: #9fb4d2 !important;
}

:root[data-theme="dark"] .topbar-account-menu .account-menu-item:hover,
:root[data-theme="dark"] .topbar-account-menu .account-menu-item:focus-visible {
    background: rgba(120, 168, 244, 0.16) !important;
    color: #ffffff !important;
}

:root[data-theme="dark"] .topbar-account-menu .account-menu-item:hover svg,
:root[data-theme="dark"] .topbar-account-menu .account-menu-item:focus-visible svg {
    color: #dbeafe !important;
}

:root[data-theme="dark"] .topbar-account-menu .account-menu-item.danger,
:root[data-theme="dark"] .topbar-account-menu .account-menu-item.danger svg {
    color: #f87171 !important;
}

:root[data-theme="dark"] .topbar-account-menu .account-menu-item.danger:hover,
:root[data-theme="dark"] .topbar-account-menu .account-menu-item.danger:focus-visible {
    background: rgba(127, 29, 29, 0.26) !important;
}

:root[data-theme="dark"] #mainContentContainer .finance-screen {
    background: var(--ops-bg) !important;
    color: var(--ops-text) !important;
}

:root[data-theme="dark"] #mainContentContainer .finance-screen > .border-b,
:root[data-theme="dark"] #mainContentContainer .finance-screen .bg-brandBg,
:root[data-theme="dark"] #mainContentContainer .finance-screen [data-focus-hide="stats"].grid {
    background: var(--ops-bg) !important;
    border-color: var(--ops-border) !important;
}

:root[data-theme="dark"] #mainContentContainer .finance-screen > .border-b,
:root[data-theme="dark"] #mainContentContainer .finance-screen .clean-card > .border-b,
:root[data-theme="dark"] #mainContentContainer .finance-screen table thead {
    background: var(--ops-surface-soft) !important;
}

:root[data-theme="dark"] #mainContentContainer .finance-screen .clean-card,
:root[data-theme="dark"] #mainContentContainer .finance-screen .rounded-xl.bg-white,
:root[data-theme="dark"] #mainContentContainer .finance-screen .rounded-2xl.bg-white,
:root[data-theme="dark"] #mainContentContainer .finance-screen #financeSyncSummaryCard {
    background: var(--ops-surface) !important;
    border-color: var(--ops-border) !important;
    color: var(--ops-text) !important;
}

:root[data-theme="dark"] #mainContentContainer .finance-screen [data-focus-hide="stats"].rounded-2xl,
:root[data-theme="dark"] #mainContentContainer .finance-screen #financeSyncSummaryCard {
    background: linear-gradient(180deg, rgba(16, 29, 49, 0.98), rgba(12, 24, 43, 0.98)) !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
    color: var(--ops-text) !important;
}

:root[data-theme="dark"] #mainContentContainer .finance-screen [class*="bg-emerald-50"],
:root[data-theme="dark"] #mainContentContainer .finance-screen [class*="bg-green-100"],
:root[data-theme="dark"] #mainContentContainer .finance-screen [class*="bg-emerald-100"] {
    background-color: rgba(6, 95, 70, 0.24) !important;
    border-color: rgba(52, 211, 153, 0.38) !important;
}

:root[data-theme="dark"] #mainContentContainer .finance-screen [class*="bg-red-50"],
:root[data-theme="dark"] #mainContentContainer .finance-screen [class*="bg-red-100"],
:root[data-theme="dark"] #mainContentContainer .finance-screen [class*="bg-rose-100"] {
    background-color: rgba(127, 29, 29, 0.24) !important;
    border-color: rgba(248, 113, 113, 0.34) !important;
}

:root[data-theme="dark"] #mainContentContainer .finance-screen [class*="bg-amber-50"],
:root[data-theme="dark"] #mainContentContainer .finance-screen [class*="bg-amber-100"],
:root[data-theme="dark"] #mainContentContainer .finance-screen [class*="bg-orange-100"] {
    background-color: rgba(120, 53, 15, 0.26) !important;
    border-color: rgba(251, 191, 36, 0.38) !important;
}

:root[data-theme="dark"] #mainContentContainer .finance-screen [class*="bg-blue-50"],
:root[data-theme="dark"] #mainContentContainer .finance-screen [class*="bg-blue-100"] {
    background-color: rgba(30, 64, 175, 0.24) !important;
    border-color: rgba(96, 165, 250, 0.38) !important;
}

:root[data-theme="dark"] #mainContentContainer .finance-screen [class*="bg-violet-50"],
:root[data-theme="dark"] #mainContentContainer .finance-screen [class*="bg-violet-100"] {
    background-color: rgba(91, 33, 182, 0.24) !important;
    border-color: rgba(167, 139, 250, 0.38) !important;
}

:root[data-theme="dark"] #mainContentContainer .finance-screen .text-success,
:root[data-theme="dark"] #mainContentContainer .finance-screen [class*="text-emerald"],
:root[data-theme="dark"] #mainContentContainer .finance-screen [class*="text-green"] {
    color: #34d399 !important;
}

:root[data-theme="dark"] #mainContentContainer .finance-screen .text-danger,
:root[data-theme="dark"] #mainContentContainer .finance-screen [class*="text-red"],
:root[data-theme="dark"] #mainContentContainer .finance-screen [class*="text-rose"] {
    color: #fb7185 !important;
}

:root[data-theme="dark"] #mainContentContainer .finance-screen [class*="text-amber"],
:root[data-theme="dark"] #mainContentContainer .finance-screen [class*="text-orange"] {
    color: #fbbf24 !important;
}

:root[data-theme="dark"] #mainContentContainer .finance-screen [class*="text-blue"] {
    color: #93c5fd !important;
}

:root[data-theme="dark"] #mainContentContainer .finance-screen [class*="text-violet"] {
    color: #c4b5fd !important;
}

:root[data-theme="dark"] #mainContentContainer .finance-screen .text-slate-500,
:root[data-theme="dark"] #mainContentContainer .finance-screen .text-slate-600,
:root[data-theme="dark"] #mainContentContainer .finance-screen .text-gray-400,
:root[data-theme="dark"] #mainContentContainer .finance-screen .text-gray-500,
:root[data-theme="dark"] #mainContentContainer .finance-screen .text-gray-600 {
    color: var(--ops-muted) !important;
}

:root[data-theme="dark"] #mainContentContainer .finance-screen button.bg-white,
:root[data-theme="dark"] #mainContentContainer .finance-screen .rounded-lg.bg-white {
    background: var(--ops-surface) !important;
    border-color: var(--ops-border) !important;
    color: var(--ops-text) !important;
}

:root[data-theme="dark"] #mainContentContainer .finance-screen button.bg-white:hover,
:root[data-theme="dark"] #mainContentContainer .finance-screen .rounded-lg.bg-white:hover {
    background: var(--ops-surface-soft) !important;
    border-color: rgba(120, 168, 244, 0.46) !important;
}

:root[data-theme="dark"] #mainContentContainer .finance-screen input[type="date"],
:root[data-theme="dark"] #mainContentContainer .finance-screen input[type="month"],
:root[data-theme="dark"] #mainContentContainer .finance-screen input[type="text"],
:root[data-theme="dark"] #mainContentContainer .finance-screen select {
    background: rgba(8, 16, 30, 0.95) !important;
    border-color: var(--ops-border) !important;
    color: var(--ops-text) !important;
}

:root[data-theme="dark"] #mainContentContainer .finance-screen input::placeholder {
    color: var(--ops-muted) !important;
}

:root[data-theme="dark"] #mainContentContainer .finance-screen .bg-primary,
:root[data-theme="dark"] #mainContentContainer .finance-screen .text-white {
    color: #ffffff !important;
}