/* /Components/EC/ECComboBox.razor.rz.scp.css */
.ec-combo-root[b-dru57hr5bq] { position: relative; border-radius: 4px; }
.ec-combo-fullwidth[b-dru57hr5bq] { width: 100%; }

.ec-combo-list-wrap[b-dru57hr5bq] { max-height: 240px; overflow-y: auto; }

.ec-combo-disabled[b-dru57hr5bq] { opacity: 0.65; cursor: not-allowed; }
.ec-combo-disabled input[b-dru57hr5bq] { cursor: not-allowed !important; }

[b-dru57hr5bq] .ec-combo-highlighted { background-color: var(--panel-tab-active-color) !important; color: #fff !important; }
[b-dru57hr5bq] .ec-combo-selected    { background-color: var(--panel-hdr-bg) !important; color: var(--panel-text-strong) !important; font-weight: 600; }
[b-dru57hr5bq] .ec-combo-empty       { color: var(--panel-text-muted); font-style: italic; }
/* /Components/EC/ECDialog.razor.rz.scp.css */
/* ─── ECDialog ───────────────────────────────────────────────────────────── */

.ec-dlg-wrap[b-rulytqm4of] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.ec-dlg-card[b-rulytqm4of] {
    pointer-events: auto;
    background: var(--mud-palette-surface, #fff);
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ec-dlg-header[b-rulytqm4of] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 14px;
    border-bottom: 1px solid var(--mud-palette-divider, #e2e8f0);
    flex-shrink: 0;
}

.ec-dlg-title[b-rulytqm4of] {
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary, #1e293b);
}

.ec-dlg-header-content[b-rulytqm4of] {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 12px;
}

.ec-dlg-close[b-rulytqm4of] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--mud-palette-text-secondary, #64748b);
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.ec-dlg-close:hover[b-rulytqm4of] {
    background: var(--mud-palette-action-hover, rgba(0,0,0,.06));
}

.ec-dlg-body[b-rulytqm4of] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 8px;
}

.ec-dlg-footer[b-rulytqm4of] {
    padding: 6px 12px;
    border-top: 1px solid var(--mud-palette-divider, #e2e8f0);
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
}
/* /Components/EC/ECDocumentFooter.razor.rz.scp.css */
.ec-doc-footer[b-hpcb1bxefc] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 12px;
    border-top: 1px solid var(--panel-border);
    background: var(--panel-subtle-bg);
    font-size: 10px;
    color: var(--panel-text-muted);
    line-height: 1.4;
}

.ec-doc-footer-chip[b-hpcb1bxefc] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.ec-doc-footer-lbl[b-hpcb1bxefc] {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--panel-text-muted);
}

.ec-doc-footer-val[b-hpcb1bxefc] {
    color: var(--panel-text-secondary);
}

.ec-doc-footer-date[b-hpcb1bxefc] {
    color: var(--panel-text-muted);
}

.ec-doc-footer-sep[b-hpcb1bxefc] {
    color: var(--panel-sep);
    padding: 0 2px;
}
/* /Components/EC/ECFormToolbar.razor.rz.scp.css */
/* ─── ECFormToolbar ──────────────────────────────────────────── */

.ec-toolbar[b-197nzkby8y] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px 10px;
    background: var(--toolbar-bg);
    color: var(--toolbar-text);
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.10);
    border-bottom: 1px solid var(--toolbar-border);
}

.ec-vsep[b-197nzkby8y]          { width: 1px; height: 20px; background: var(--toolbar-separator); margin: 0 3px; flex-shrink: 0; }
.ec-toolbar-spacer[b-197nzkby8y] { flex: 1; }
.ec-pos[b-197nzkby8y]           { color: var(--toolbar-counter); font-size: 11px; min-width: 42px; text-align: center; font-weight: 600; }
.ec-msg[b-197nzkby8y]           { font-size: 11px; white-space: nowrap; }
.ec-msg-err[b-197nzkby8y]       { color: var(--toolbar-delete); }
.ec-msg-ok[b-197nzkby8y]        { color: #16a34a; }

/* Button colour overrides — cascade into ECButton / ECIconButton child components */
.ec-toolbar[b-197nzkby8y]  button                                                 { color: var(--toolbar-text) !important; background: transparent !important; }
.ec-toolbar[b-197nzkby8y]  button:hover:not(:disabled)                            { color: var(--toolbar-text-hover) !important; background: var(--toolbar-hover-bg) !important; }
.ec-toolbar[b-197nzkby8y]  button:disabled                                        { opacity: .45 !important; box-shadow: none !important; background: transparent !important; }
.ec-toolbar[b-197nzkby8y]  .mud-button-root.mud-button-filled                     { color: #fff !important; background-color: var(--toolbar-save-bg) !important; }
.ec-toolbar[b-197nzkby8y]  .mud-button-root.mud-button-filled:hover:not(:disabled){ color: #fff !important; background-color: var(--toolbar-save-hover-bg) !important; }
.ec-toolbar[b-197nzkby8y]  .mud-button-root.mud-error-text                        { color: var(--toolbar-delete) !important; }
.ec-toolbar[b-197nzkby8y]  .mud-button-root.mud-error-text:hover:not(:disabled)   { color: var(--toolbar-delete) !important; background: var(--toolbar-delete-hover-bg) !important; }

/* ec-tbtn is passed as Class into ECButton → rendered by MudBlazor child, needs ::deep */
[b-197nzkby8y] .ec-tbtn {
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 12px !important;
    height: 28px !important;
    min-width: 0 !important;
    padding: 0 8px !important;
}
/* /Components/EC/ECSubToolbar.razor.rz.scp.css */
/* ─── ECSubToolbar — compact inline section CRUD bar ─────────────────────── */

.ec-sub-toolbar[b-emimr7only] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: var(--panel-hdr-bg);
    border-top: 1px solid var(--panel-border);
    border-radius: 0 0 6px 6px;
}

.ec-sub-toolbar-spacer[b-emimr7only] {
    flex: 1;
}

.ec-sub-toolbar .ec-msg[b-emimr7only] { font-size: 11px; white-space: nowrap; }
.ec-sub-toolbar .ec-msg-err[b-emimr7only] { color: var(--toolbar-delete); }
.ec-sub-toolbar .ec-msg-ok[b-emimr7only]  { color: #16a34a; }

/* Inherit button styles — same as ECFormToolbar but scoped to this component */
.ec-sub-toolbar[b-emimr7only]  button                                                  { color: var(--panel-hdr-text) !important; background: transparent !important; }
.ec-sub-toolbar[b-emimr7only]  button:hover:not(:disabled)                             { color: var(--panel-text-strong) !important; background: var(--panel-divider) !important; }
.ec-sub-toolbar[b-emimr7only]  button:disabled                                         { opacity: .45 !important; box-shadow: none !important; background: transparent !important; }
.ec-sub-toolbar[b-emimr7only]  .mud-button-root.mud-button-filled                      { color: #fff !important; background-color: var(--toolbar-save-bg) !important; }
.ec-sub-toolbar[b-emimr7only]  .mud-button-root.mud-button-filled:hover:not(:disabled) { color: #fff !important; background-color: var(--toolbar-save-hover-bg) !important; }
.ec-sub-toolbar[b-emimr7only]  .mud-button-root.mud-error-text                         { color: var(--toolbar-delete) !important; }
.ec-sub-toolbar[b-emimr7only]  .mud-button-root.mud-error-text:hover:not(:disabled)    { color: var(--toolbar-delete) !important; background: var(--toolbar-delete-hover-bg) !important; }

/* ec-tbtn — same compact sizing as ECFormToolbar */
[b-emimr7only] .ec-tbtn {
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 12px !important;
    height: 28px !important;
    min-width: 0 !important;
    padding: 0 8px !important;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ── Theme Variables ─────────────────────────────────────────── */

/* Pearl — default fallback (no class required) */
.app-shell[b-piadrq1qls] {
    --navbar-bg:               linear-gradient(to bottom, #f8f8f8, #D3D3D3);
    --navbar-border:           #009efa;
    --nav-separator:           rgba(0,0,0,.10);
    --nav-text:                #374151;
    --nav-text-hover:          #111827;
    --nav-hover-bg:            rgba(0,0,0,.07);
    --nav-active-bg:           #009efa;
    --nav-active-text:         #fff;
    --nav-icon-bg:             rgba(0,0,0,.08);
    --nav-icon-color:          #4b5568;
    --nav-chevron:             #9ca3af;
    --dropdown-bg:             #ffffff;
    --dropdown-border:         rgba(0,0,0,.12);
    --dropdown-border-top:     #009efa;
    --dropdown-submenu-top:    #2c73d2;
    --dropdown-shadow:         0 8px 30px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.07);
    --dropdown-header:         #9ca3af;
    --user-name:               #1e293b;
    --user-id:                 #6b7280;
    --user-hover-bg:           rgba(0,0,0,.07);
    --user-hover-border:       rgba(0,0,0,.12);
    --udrop-bg:                #fff;
    --udrop-border:            #e2e8f0;
    --udrop-shadow:            0 20px 50px rgba(15,23,42,.2), 0 4px 16px rgba(15,23,42,.1);
    --udrop-head-bg:           #f8fafc;
    --udrop-divider:           #f1f5f9;
    --udrop-name:              #0f172a;
    --udrop-id:                #64748b;
    --udrop-label:             #94a3b8;
    --udrop-value:             #334155;
    --udrop-signout-text:      #64748b;
    --udrop-signout-hover-bg:  #fef2f2;
    --toolbar-bg:              #ebebeb;
    --toolbar-border:          #d4d4d4;
    --toolbar-text:            #374151;
    --toolbar-text-hover:      #111827;
    --toolbar-hover-bg:        rgba(0,0,0,.07);
    --toolbar-separator:       rgba(0,0,0,.15);
    --toolbar-counter:         #2c73d2;
    --toolbar-save-bg:         #2c73d2;
    --toolbar-save-hover-bg:   #1d5cad;
    --toolbar-delete:          #dc2626;
    --toolbar-delete-hover-bg: rgba(239,68,68,.12);
    --content-bg:              #f1f5f9;
    /* Panel (form cards) */
    --panel-bg:                #ffffff;
    --panel-border:            #e2e8f0;
    --panel-hdr-bg:            #f1f5f9;
    --panel-hdr-text:          #475569;
    --panel-divider:           #f1f5f9;
    --panel-text:              #475569;
    --panel-text-muted:        #94a3b8;
    --panel-text-strong:       #334155;
    --panel-text-secondary:    #64748b;
    --panel-subtle-bg:         #f8fafc;
    --panel-tab-strip-bg:      #f1f5f9;
    --panel-tab-text:          #64748b;
    --panel-tab-active-color:  #1d4ed8;
    --panel-tab-active-bg:     #ffffff;
    --panel-sep:               #d1d5db;
}

/* Azure */
.app-shell.theme-azure[b-piadrq1qls] {
    --navbar-bg:               linear-gradient(to bottom, #ffffff, #e8f4fd);
    --navbar-border:           #0284c7;
    --nav-separator:           rgba(2,132,199,.15);
    --nav-text:                #334155;
    --nav-text-hover:          #0c2d48;
    --nav-hover-bg:            rgba(2,132,199,.08);
    --nav-active-bg:           #0284c7;
    --nav-active-text:         #fff;
    --nav-icon-bg:             rgba(2,132,199,.10);
    --nav-icon-color:          #0369a1;
    --nav-chevron:             #93c5fd;
    --dropdown-bg:             #ffffff;
    --dropdown-border:         rgba(2,132,199,.15);
    --dropdown-border-top:     #0284c7;
    --dropdown-submenu-top:    #0369a1;
    --dropdown-shadow:         0 8px 30px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
    --dropdown-header:         #93c5fd;
    --user-name:               #0c2d48;
    --user-id:                 #0369a1;
    --user-hover-bg:           rgba(2,132,199,.08);
    --user-hover-border:       rgba(2,132,199,.15);
    --udrop-bg:                #fff;
    --udrop-border:            #bae6fd;
    --udrop-shadow:            0 20px 50px rgba(12,45,72,.15), 0 4px 16px rgba(12,45,72,.08);
    --udrop-head-bg:           #f0f9ff;
    --udrop-divider:           #e0f2fe;
    --udrop-name:              #0c2d48;
    --udrop-id:                #0369a1;
    --udrop-label:             #0284c7;
    --udrop-value:             #0c4a6e;
    --udrop-signout-text:      #64748b;
    --udrop-signout-hover-bg:  #fef2f2;
    --toolbar-bg:              #f0f9ff;
    --toolbar-border:          #bae6fd;
    --toolbar-text:            #0c4a6e;
    --toolbar-text-hover:      #0c2d48;
    --toolbar-hover-bg:        rgba(2,132,199,.08);
    --toolbar-separator:       rgba(2,132,199,.20);
    --toolbar-counter:         #0284c7;
    --toolbar-save-bg:         #0284c7;
    --toolbar-save-hover-bg:   #0369a1;
    --toolbar-delete:          #dc2626;
    --toolbar-delete-hover-bg: rgba(239,68,68,.10);
    --content-bg:              #f8fcff;
    /* Panel (form cards) */
    --panel-bg:                #ffffff;
    --panel-border:            #bae6fd;
    --panel-hdr-bg:            #f0f9ff;
    --panel-hdr-text:          #0c4a6e;
    --panel-divider:           #e0f2fe;
    --panel-text:              #0c4a6e;
    --panel-text-muted:        #0284c7;
    --panel-text-strong:       #0c2d48;
    --panel-text-secondary:    #0369a1;
    --panel-subtle-bg:         #f0f9ff;
    --panel-tab-strip-bg:      #f0f9ff;
    --panel-tab-text:          #0369a1;
    --panel-tab-active-color:  #0284c7;
    --panel-tab-active-bg:     #ffffff;
    --panel-sep:               #bae6fd;
}

/* Midnight */
.app-shell.theme-midnight[b-piadrq1qls] {
    color-scheme:              dark;
    --bs-body-color:           #c8cfe0;
    --bs-body-bg:              #1a1f2e;
    --bs-secondary-color:      #94a3b8;
    --bs-secondary-color-rgb:  148, 163, 184;
    --bs-tertiary-color:       #8b95a8;
    --bs-border-color:         rgba(255,255,255,.12);
    --bs-border-color-translucent: rgba(255,255,255,.12);
    --navbar-bg:               linear-gradient(to bottom, #1a1f2e, #0f1117);
    --navbar-border:           #4f6ef7;
    --nav-separator:           rgba(255,255,255,.08);
    --nav-text:                #c8cfe0;
    --nav-text-hover:          #fff;
    --nav-hover-bg:            rgba(255,255,255,.08);
    --nav-active-bg:           #4f6ef7;
    --nav-active-text:         #fff;
    --nav-icon-bg:             rgba(255,255,255,.10);
    --nav-icon-color:          #94a3b8;
    --nav-chevron:             #8b95a8;
    --dropdown-bg:             #1c2333;
    --dropdown-border:         rgba(255,255,255,.10);
    --dropdown-border-top:     #4f6ef7;
    --dropdown-submenu-top:    #818cf8;
    --dropdown-shadow:         0 20px 50px rgba(0,0,0,.6), 0 4px 16px rgba(0,0,0,.35);
    --dropdown-header:         #8b95a8;
    --user-name:               #d1d9e6;
    --user-id:                 #94a3b8;
    --user-hover-bg:           rgba(255,255,255,.08);
    --user-hover-border:       rgba(255,255,255,.10);
    --udrop-bg:                #1c2333;
    --udrop-border:            rgba(255,255,255,.12);
    --udrop-shadow:            0 20px 50px rgba(0,0,0,.6), 0 4px 16px rgba(0,0,0,.35);
    --udrop-head-bg:           rgba(255,255,255,.04);
    --udrop-divider:           rgba(255,255,255,.08);
    --udrop-name:              #d1d9e6;
    --udrop-id:                #94a3b8;
    --udrop-label:             #8b95a8;
    --udrop-value:             #d1d9e6;
    --udrop-signout-text:      #94a3b8;
    --udrop-signout-hover-bg:  rgba(239,68,68,.18);
    --toolbar-bg:              #1a1d2c;
    --toolbar-border:          #2e3248;
    --toolbar-text:            #c8cfe0;
    --toolbar-text-hover:      #fff;
    --toolbar-hover-bg:        rgba(255,255,255,.10);
    --toolbar-separator:       rgba(255,255,255,.15);
    --toolbar-counter:         #818cf8;
    --toolbar-save-bg:         #4f6ef7;
    --toolbar-save-hover-bg:   #3d5de5;
    --toolbar-delete:          #fca5a5;
    --toolbar-delete-hover-bg: rgba(239,68,68,.35);
    --content-bg:              #0f1117;
    /* Panel (form cards) */
    --panel-bg:                #1a1f2e;
    --panel-border:            rgba(255,255,255,.12);
    --panel-hdr-bg:            rgba(255,255,255,.05);
    --panel-hdr-text:          #c8cfe0;
    --panel-divider:           rgba(255,255,255,.06);
    --panel-text:              #c8cfe0;
    --panel-text-muted:        #94a3b8;
    --panel-text-strong:       #f1f5f9;
    --panel-text-secondary:    #8b95a8;
    --panel-subtle-bg:         rgba(255,255,255,.03);
    --panel-tab-strip-bg:      rgba(255,255,255,.04);
    --panel-tab-text:          #8b95a8;
    --panel-tab-active-color:  #818cf8;
    --panel-tab-active-bg:     #1a1f2e;
    --panel-sep:               rgba(255,255,255,.12);
}

/* Sapphire (Dark Ocean Blue) */
.app-shell.theme-sapphire[b-piadrq1qls] {
    color-scheme:              dark;
    --bs-body-color:           #e2e8f0;
    --bs-body-bg:              #13203c;
    --bs-secondary-color:      #93c5fd;
    --bs-secondary-color-rgb:  147, 197, 253;
    --bs-tertiary-color:       #7dd3fc;
    --bs-border-color:         rgba(56,189,248,.18);
    --bs-border-color-translucent: rgba(56,189,248,.18);
    --navbar-bg:               linear-gradient(to bottom, #13203c, #0b1329);
    --navbar-border:           #38bdf8;
    --nav-separator:           rgba(56,189,248,.15);
    --nav-text:                #e2e8f0;
    --nav-text-hover:          #fff;
    --nav-hover-bg:            rgba(56,189,248,.10);
    --nav-active-bg:           #0284c7;
    --nav-active-text:         #fff;
    --nav-icon-bg:             rgba(56,189,248,.12);
    --nav-icon-color:          #93c5fd;
    --nav-chevron:             #7dd3fc;
    --dropdown-bg:             #0e1830;
    --dropdown-border:         rgba(56,189,248,.20);
    --dropdown-border-top:     #38bdf8;
    --dropdown-submenu-top:    #60a5fa;
    --dropdown-shadow:         0 20px 50px rgba(0,0,0,.65), 0 4px 16px rgba(0,0,0,.4);
    --dropdown-header:         #93c5fd;
    --user-name:               #e2e8f0;
    --user-id:                 #93c5fd;
    --user-hover-bg:           rgba(56,189,248,.10);
    --user-hover-border:       rgba(56,189,248,.20);
    --udrop-bg:                #0e1830;
    --udrop-border:            rgba(56,189,248,.25);
    --udrop-shadow:            0 20px 50px rgba(0,0,0,.65), 0 4px 16px rgba(0,0,0,.4);
    --udrop-head-bg:           rgba(56,189,248,.06);
    --udrop-divider:           rgba(56,189,248,.12);
    --udrop-name:              #e2e8f0;
    --udrop-id:                #93c5fd;
    --udrop-label:             #7dd3fc;
    --udrop-value:             #e2e8f0;
    --udrop-signout-text:      #93c5fd;
    --udrop-signout-hover-bg:  rgba(239,68,68,.20);
    --toolbar-bg:              #0f1a30;
    --toolbar-border:          #1d3055;
    --toolbar-text:            #e2e8f0;
    --toolbar-text-hover:      #fff;
    --toolbar-hover-bg:        rgba(56,189,248,.12);
    --toolbar-separator:       rgba(56,189,248,.20);
    --toolbar-counter:         #38bdf8;
    --toolbar-save-bg:         #0284c7;
    --toolbar-save-hover-bg:   #0369a1;
    --toolbar-delete:          #fca5a5;
    --toolbar-delete-hover-bg: rgba(239,68,68,.35);
    --content-bg:              #0b1329;
    /* Panel (form cards) */
    --panel-bg:                #13203c;
    --panel-border:            rgba(56,189,248,.18);
    --panel-hdr-bg:            rgba(56,189,248,.07);
    --panel-hdr-text:          #cbd5e1;
    --panel-divider:           rgba(56,189,248,.10);
    --panel-text:              #cbd5e1;
    --panel-text-muted:        #7dd3fc;
    --panel-text-strong:       #f0f9ff;
    --panel-text-secondary:    #93c5fd;
    --panel-subtle-bg:         rgba(56,189,248,.04);
    --panel-tab-strip-bg:      rgba(56,189,248,.05);
    --panel-tab-text:          #93c5fd;
    --panel-tab-active-color:  #38bdf8;
    --panel-tab-active-bg:     #13203c;
    --panel-sep:               rgba(56,189,248,.18);
}

/* Crimson (Dark Wine / Ruby Red) */
.app-shell.theme-crimson[b-piadrq1qls] {
    color-scheme:              dark;
    --bs-body-color:           #fce7f3;
    --bs-body-bg:              #250f18;
    --bs-secondary-color:      #fda4af;
    --bs-secondary-color-rgb:  253, 164, 175;
    --bs-tertiary-color:       #fb7185;
    --bs-border-color:         rgba(244,63,94,.18);
    --bs-border-color-translucent: rgba(244,63,94,.18);
    --navbar-bg:               linear-gradient(to bottom, #250f18, #16080e);
    --navbar-border:           #f43f5e;
    --nav-separator:           rgba(244,63,94,.15);
    --nav-text:                #fce7f3;
    --nav-text-hover:          #fff;
    --nav-hover-bg:            rgba(244,63,94,.10);
    --nav-active-bg:           #e11d48;
    --nav-active-text:         #fff;
    --nav-icon-bg:             rgba(244,63,94,.12);
    --nav-icon-color:          #fda4af;
    --nav-chevron:             #fb7185;
    --dropdown-bg:             #1d0b13;
    --dropdown-border:         rgba(244,63,94,.20);
    --dropdown-border-top:     #f43f5e;
    --dropdown-submenu-top:    #fb7185;
    --dropdown-shadow:         0 20px 50px rgba(0,0,0,.65), 0 4px 16px rgba(0,0,0,.4);
    --dropdown-header:         #fda4af;
    --user-name:               #fce7f3;
    --user-id:                 #fda4af;
    --user-hover-bg:           rgba(244,63,94,.10);
    --user-hover-border:       rgba(244,63,94,.20);
    --udrop-bg:                #1d0b13;
    --udrop-border:            rgba(244,63,94,.25);
    --udrop-shadow:            0 20px 50px rgba(0,0,0,.65), 0 4px 16px rgba(0,0,0,.4);
    --udrop-head-bg:           rgba(244,63,94,.06);
    --udrop-divider:           rgba(244,63,94,.12);
    --udrop-name:              #fce7f3;
    --udrop-id:                #fda4af;
    --udrop-label:             #fb7185;
    --udrop-value:             #fce7f3;
    --udrop-signout-text:      #fda4af;
    --udrop-signout-hover-bg:  rgba(239,68,68,.25);
    --toolbar-bg:              #1f0c14;
    --toolbar-border:          #3d1624;
    --toolbar-text:            #fce7f3;
    --toolbar-text-hover:      #fff;
    --toolbar-hover-bg:        rgba(244,63,94,.12);
    --toolbar-separator:       rgba(244,63,94,.20);
    --toolbar-counter:         #f43f5e;
    --toolbar-save-bg:         #e11d48;
    --toolbar-save-hover-bg:   #be123c;
    --toolbar-delete:          #fca5a5;
    --toolbar-delete-hover-bg: rgba(239,68,68,.35);
    --content-bg:              #16080e;
    /* Panel (form cards) */
    --panel-bg:                #250f18;
    --panel-border:            rgba(244,63,94,.18);
    --panel-hdr-bg:            rgba(244,63,94,.07);
    --panel-hdr-text:          #e2d5da;
    --panel-divider:           rgba(244,63,94,.10);
    --panel-text:              #e2d5da;
    --panel-text-muted:        #fb7185;
    --panel-text-strong:       #fff1f2;
    --panel-text-secondary:    #fda4af;
    --panel-subtle-bg:         rgba(244,63,94,.04);
    --panel-tab-strip-bg:      rgba(244,63,94,.05);
    --panel-tab-text:          #fda4af;
    --panel-tab-active-color:  #f43f5e;
    --panel-tab-active-bg:     #250f18;
    --panel-sep:               rgba(244,63,94,.18);
}

/* Titanium (Eye Comfort Light) */
.app-shell.theme-titanium[b-piadrq1qls] {
    --navbar-bg:               linear-gradient(to bottom, #f1f5f9, #e2e8f0);
    --navbar-border:           #2563eb;
    --nav-separator:           rgba(37,99,235,.15);
    --nav-text:                #334155;
    --nav-text-hover:          #0f172a;
    --nav-hover-bg:            rgba(37,99,235,.08);
    --nav-active-bg:           #2563eb;
    --nav-active-text:         #fff;
    --nav-icon-bg:             rgba(37,99,235,.10);
    --nav-icon-color:          #1d4ed8;
    --nav-chevron:             #64748b;
    --dropdown-bg:             #ffffff;
    --dropdown-border:         #cbd5e1;
    --dropdown-border-top:     #2563eb;
    --dropdown-submenu-top:    #3b82f6;
    --dropdown-shadow:         0 8px 30px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
    --dropdown-header:         #64748b;
    --user-name:               #0f172a;
    --user-id:                 #475569;
    --user-hover-bg:           rgba(37,99,235,.08);
    --user-hover-border:       #cbd5e1;
    --udrop-bg:                #ffffff;
    --udrop-border:            #cbd5e1;
    --udrop-shadow:            0 20px 50px rgba(15,23,42,.15), 0 4px 16px rgba(15,23,42,.08);
    --udrop-head-bg:           #f8fafc;
    --udrop-divider:           #e2e8f0;
    --udrop-name:              #0f172a;
    --udrop-id:                #475569;
    --udrop-label:             #2563eb;
    --udrop-value:             #1e293b;
    --udrop-signout-text:      #64748b;
    --udrop-signout-hover-bg:  #fef2f2;
    --toolbar-bg:              #e2e8f0;
    --toolbar-border:          #cbd5e1;
    --toolbar-text:            #1e293b;
    --toolbar-text-hover:      #0f172a;
    --toolbar-hover-bg:        rgba(37,99,235,.08);
    --toolbar-separator:       rgba(37,99,235,.18);
    --toolbar-counter:         #2563eb;
    --toolbar-save-bg:         #2563eb;
    --toolbar-save-hover-bg:   #1d4ed8;
    --toolbar-delete:          #dc2626;
    --toolbar-delete-hover-bg: rgba(239,68,68,.12);
    --content-bg:              #eef2f6;
    /* Panel (form cards) */
    --panel-bg:                #ffffff;
    --panel-border:            #cbd5e1;
    --panel-hdr-bg:            #f1f5f9;
    --panel-hdr-text:          #1e293b;
    --panel-divider:           #e2e8f0;
    --panel-text:              #334155;
    --panel-text-muted:        #64748b;
    --panel-text-strong:       #0f172a;
    --panel-text-secondary:    #475569;
    --panel-subtle-bg:         #f8fafc;
    --panel-tab-strip-bg:      #f1f5f9;
    --panel-tab-text:          #475569;
    --panel-tab-active-color:  #2563eb;
    --panel-tab-active-bg:     #ffffff;
    --panel-sep:               #cbd5e1;
}

/* Emerald (Sage & Mint Light) */
.app-shell.theme-emerald[b-piadrq1qls] {
    --navbar-bg:               linear-gradient(to bottom, #f0fdf4, #dcfce7);
    --navbar-border:           #059669;
    --nav-separator:           rgba(5,150,105,.18);
    --nav-text:                #166534;
    --nav-text-hover:          #064e3b;
    --nav-hover-bg:            rgba(5,150,105,.10);
    --nav-active-bg:           #059669;
    --nav-active-text:         #fff;
    --nav-icon-bg:             rgba(5,150,105,.12);
    --nav-icon-color:          #047857;
    --nav-chevron:             #34d399;
    --dropdown-bg:             #ffffff;
    --dropdown-border:         #a7f3d0;
    --dropdown-border-top:     #059669;
    --dropdown-submenu-top:    #10b981;
    --dropdown-shadow:         0 8px 30px rgba(6,78,59,.10), 0 2px 8px rgba(6,78,59,.06);
    --dropdown-header:         #047857;
    --user-name:               #064e3b;
    --user-id:                 #047857;
    --user-hover-bg:           rgba(5,150,105,.10);
    --user-hover-border:       #a7f3d0;
    --udrop-bg:                #ffffff;
    --udrop-border:            #a7f3d0;
    --udrop-shadow:            0 20px 50px rgba(6,78,59,.15), 0 4px 16px rgba(6,78,59,.08);
    --udrop-head-bg:           #f0fdf4;
    --udrop-divider:           #d1fae5;
    --udrop-name:              #064e3b;
    --udrop-id:                #047857;
    --udrop-label:             #059669;
    --udrop-value:             #064e3b;
    --udrop-signout-text:      #64748b;
    --udrop-signout-hover-bg:  #fef2f2;
    --toolbar-bg:              #dcfce7;
    --toolbar-border:          #a7f3d0;
    --toolbar-text:            #064e3b;
    --toolbar-text-hover:      #022c22;
    --toolbar-hover-bg:        rgba(5,150,105,.10);
    --toolbar-separator:       rgba(5,150,105,.22);
    --toolbar-counter:         #059669;
    --toolbar-save-bg:         #059669;
    --toolbar-save-hover-bg:   #047857;
    --toolbar-delete:          #dc2626;
    --toolbar-delete-hover-bg: rgba(239,68,68,.12);
    --content-bg:              #f0fdf4;
    /* Panel (form cards) */
    --panel-bg:                #ffffff;
    --panel-border:            #a7f3d0;
    --panel-hdr-bg:            #ecfdf5;
    --panel-hdr-text:          #064e3b;
    --panel-divider:           #d1fae5;
    --panel-text:              #065f46;
    --panel-text-muted:        #059669;
    --panel-text-strong:       #064e3b;
    --panel-text-secondary:    #047857;
    --panel-subtle-bg:         #f0fdf4;
    --panel-tab-strip-bg:      #ecfdf5;
    --panel-tab-text:          #047857;
    --panel-tab-active-color:  #059669;
    --panel-tab-active-bg:     #ffffff;
    --panel-sep:               #a7f3d0;
}

/* Amber (Warm Stone Light) */
.app-shell.theme-amber[b-piadrq1qls] {
    --navbar-bg:               linear-gradient(to bottom, #fafaf9, #f5f5f4);
    --navbar-border:           #d97706;
    --nav-separator:           rgba(217,119,6,.18);
    --nav-text:                #44403c;
    --nav-text-hover:          #1c1917;
    --nav-hover-bg:            rgba(217,119,6,.08);
    --nav-active-bg:           #d97706;
    --nav-active-text:         #fff;
    --nav-icon-bg:             rgba(217,119,6,.10);
    --nav-icon-color:          #b45309;
    --nav-chevron:             #a8a29e;
    --dropdown-bg:             #ffffff;
    --dropdown-border:         #e7e5e4;
    --dropdown-border-top:     #d97706;
    --dropdown-submenu-top:    #f59e0b;
    --dropdown-shadow:         0 8px 30px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
    --dropdown-header:         #78716c;
    --user-name:               #1c1917;
    --user-id:                 #78716c;
    --user-hover-bg:           rgba(217,119,6,.08);
    --user-hover-border:       #e7e5e4;
    --udrop-bg:                #ffffff;
    --udrop-border:            #e7e5e4;
    --udrop-shadow:            0 20px 50px rgba(28,25,23,.15), 0 4px 16px rgba(28,25,23,.08);
    --udrop-head-bg:           #fafaf9;
    --udrop-divider:           #f5f5f4;
    --udrop-name:              #1c1917;
    --udrop-id:                #78716c;
    --udrop-label:             #d97706;
    --udrop-value:             #292524;
    --udrop-signout-text:      #78716c;
    --udrop-signout-hover-bg:  #fef2f2;
    --toolbar-bg:              #f5f5f4;
    --toolbar-border:          #e7e5e4;
    --toolbar-text:            #292524;
    --toolbar-text-hover:      #1c1917;
    --toolbar-hover-bg:        rgba(217,119,6,.08);
    --toolbar-separator:       rgba(217,119,6,.20);
    --toolbar-counter:         #d97706;
    --toolbar-save-bg:         #d97706;
    --toolbar-save-hover-bg:   #b45309;
    --toolbar-delete:          #dc2626;
    --toolbar-delete-hover-bg: rgba(239,68,68,.12);
    --content-bg:              #fafaf9;
    /* Panel (form cards) */
    --panel-bg:                #ffffff;
    --panel-border:            #e7e5e4;
    --panel-hdr-bg:            #f5f5f4;
    --panel-hdr-text:          #292524;
    --panel-divider:           #f5f5f4;
    --panel-text:              #44403c;
    --panel-text-muted:        #78716c;
    --panel-text-strong:       #1c1917;
    --panel-text-secondary:    #78716c;
    --panel-subtle-bg:         #fafaf9;
    --panel-tab-strip-bg:      #f5f5f4;
    --panel-tab-text:          #78716c;
    --panel-tab-active-color:  #d97706;
    --panel-tab-active-bg:     #ffffff;
    --panel-sep:               #e7e5e4;
}

/* Nordic (Aurora Teal Dark) */
.app-shell.theme-nordic[b-piadrq1qls] {
    color-scheme:              dark;
    --bs-body-color:           #f0fdfa;
    --bs-body-bg:              #0f202b;
    --bs-secondary-color:      #5eead4;
    --bs-secondary-color-rgb:  94, 234, 212;
    --bs-tertiary-color:       #2dd4bf;
    --bs-border-color:         rgba(20,184,166,.18);
    --bs-border-color-translucent: rgba(20,184,166,.18);
    --navbar-bg:               linear-gradient(to bottom, #0f202b, #08131a);
    --navbar-border:           #14b8a6;
    --nav-separator:           rgba(20,184,166,.15);
    --nav-text:                #ccfbf1;
    --nav-text-hover:          #fff;
    --nav-hover-bg:            rgba(20,184,166,.10);
    --nav-active-bg:           #0d9488;
    --nav-active-text:         #fff;
    --nav-icon-bg:             rgba(20,184,166,.12);
    --nav-icon-color:          #5eead4;
    --nav-chevron:             #2dd4bf;
    --dropdown-bg:             #0a1822;
    --dropdown-border:         rgba(20,184,166,.20);
    --dropdown-border-top:     #14b8a6;
    --dropdown-submenu-top:    #2dd4bf;
    --dropdown-shadow:         0 20px 50px rgba(0,0,0,.65), 0 4px 16px rgba(0,0,0,.4);
    --dropdown-header:         #5eead4;
    --user-name:               #f0fdfa;
    --user-id:                 #5eead4;
    --user-hover-bg:           rgba(20,184,166,.10);
    --user-hover-border:       rgba(20,184,166,.20);
    --udrop-bg:                #0a1822;
    --udrop-border:            rgba(20,184,166,.25);
    --udrop-shadow:            0 20px 50px rgba(0,0,0,.65), 0 4px 16px rgba(0,0,0,.4);
    --udrop-head-bg:           rgba(20,184,166,.06);
    --udrop-divider:           rgba(20,184,166,.12);
    --udrop-name:              #f0fdfa;
    --udrop-id:                #5eead4;
    --udrop-label:             #2dd4bf;
    --udrop-value:             #f0fdfa;
    --udrop-signout-text:      #5eead4;
    --udrop-signout-hover-bg:  rgba(239,68,68,.20);
    --toolbar-bg:              #0c1b24;
    --toolbar-border:          #163242;
    --toolbar-text:            #f0fdfa;
    --toolbar-text-hover:      #fff;
    --toolbar-hover-bg:        rgba(20,184,166,.12);
    --toolbar-separator:       rgba(20,184,166,.20);
    --toolbar-counter:         #14b8a6;
    --toolbar-save-bg:         #0d9488;
    --toolbar-save-hover-bg:   #0f766e;
    --toolbar-delete:          #fca5a5;
    --toolbar-delete-hover-bg: rgba(239,68,68,.35);
    --content-bg:              #08131a;
    /* Panel (form cards) */
    --panel-bg:                #0f202b;
    --panel-border:            rgba(20,184,166,.18);
    --panel-hdr-bg:            rgba(20,184,166,.07);
    --panel-hdr-text:          #ccfbf1;
    --panel-divider:           rgba(20,184,166,.10);
    --panel-text:              #ccfbf1;
    --panel-text-muted:        #2dd4bf;
    --panel-text-strong:       #f0fdfa;
    --panel-text-secondary:    #5eead4;
    --panel-subtle-bg:         rgba(20,184,166,.04);
    --panel-tab-strip-bg:      rgba(20,184,166,.05);
    --panel-tab-text:          #5eead4;
    --panel-tab-active-color:  #14b8a6;
    --panel-tab-active-bg:     #0f202b;
    --panel-sep:               rgba(20,184,166,.18);
}

/* Amethyst (Violet Carbon Dark) */
.app-shell.theme-amethyst[b-piadrq1qls] {
    color-scheme:              dark;
    --bs-body-color:           #faf5ff;
    --bs-body-bg:              #181424;
    --bs-secondary-color:      #d8b4fe;
    --bs-secondary-color-rgb:  216, 180, 254;
    --bs-tertiary-color:       #c084fc;
    --bs-border-color:         rgba(168,85,247,.18);
    --bs-border-color-translucent: rgba(168,85,247,.18);
    --navbar-bg:               linear-gradient(to bottom, #181424, #0f0d17);
    --navbar-border:           #a855f7;
    --nav-separator:           rgba(168,85,247,.15);
    --nav-text:                #faf5ff;
    --nav-text-hover:          #fff;
    --nav-hover-bg:            rgba(168,85,247,.10);
    --nav-active-bg:           #9333ea;
    --nav-active-text:         #fff;
    --nav-icon-bg:             rgba(168,85,247,.12);
    --nav-icon-color:          #d8b4fe;
    --nav-chevron:             #c084fc;
    --dropdown-bg:             #130f1d;
    --dropdown-border:         rgba(168,85,247,.20);
    --dropdown-border-top:     #a855f7;
    --dropdown-submenu-top:    #c084fc;
    --dropdown-shadow:         0 20px 50px rgba(0,0,0,.65), 0 4px 16px rgba(0,0,0,.4);
    --dropdown-header:         #d8b4fe;
    --user-name:               #faf5ff;
    --user-id:                 #d8b4fe;
    --user-hover-bg:           rgba(168,85,247,.10);
    --user-hover-border:       rgba(168,85,247,.20);
    --udrop-bg:                #130f1d;
    --udrop-border:            rgba(168,85,247,.25);
    --udrop-shadow:            0 20px 50px rgba(0,0,0,.65), 0 4px 16px rgba(0,0,0,.4);
    --udrop-head-bg:           rgba(168,85,247,.06);
    --udrop-divider:           rgba(168,85,247,.12);
    --udrop-name:              #faf5ff;
    --udrop-id:                #d8b4fe;
    --udrop-label:             #c084fc;
    --udrop-value:             #faf5ff;
    --udrop-signout-text:      #d8b4fe;
    --udrop-signout-hover-bg:  rgba(239,68,68,.25);
    --toolbar-bg:              #151120;
    --toolbar-border:          #2a1f3d;
    --toolbar-text:            #faf5ff;
    --toolbar-text-hover:      #fff;
    --toolbar-hover-bg:        rgba(168,85,247,.12);
    --toolbar-separator:       rgba(168,85,247,.20);
    --toolbar-counter:         #a855f7;
    --toolbar-save-bg:         #9333ea;
    --toolbar-save-hover-bg:   #7e22ce;
    --toolbar-delete:          #fca5a5;
    --toolbar-delete-hover-bg: rgba(239,68,68,.35);
    --content-bg:              #0f0d17;
    /* Panel (form cards) */
    --panel-bg:                #181424;
    --panel-border:            rgba(168,85,247,.18);
    --panel-hdr-bg:            rgba(168,85,247,.07);
    --panel-hdr-text:          #e9d5ff;
    --panel-divider:           rgba(168,85,247,.10);
    --panel-text:              #e9d5ff;
    --panel-text-muted:        #c084fc;
    --panel-text-strong:       #faf5ff;
    --panel-text-secondary:    #d8b4fe;
    --panel-subtle-bg:         rgba(168,85,247,.04);
    --panel-tab-strip-bg:      rgba(168,85,247,.05);
    --panel-tab-text:          #d8b4fe;
    --panel-tab-active-color:  #a855f7;
    --panel-tab-active-bg:     #181424;
    --panel-sep:               rgba(168,85,247,.18);
}

/* ── Shell ──────────────────────────────────────────────────── */
.app-shell[b-piadrq1qls] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ── App Bar ─────────────────────────────────────────────────── */
.app-bar[b-piadrq1qls] {
    display: flex;
    align-items: stretch;
    height: 52px;
    background: var(--navbar-bg);
    flex-shrink: 0;
    position: relative;
    z-index: 200;
    border-bottom: 2px solid var(--navbar-border);
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
}

/* ── LEFT: brand block ──────────────────────────────────────── */
.ab-left[b-piadrq1qls] {
    display: flex;
    align-items: center;
    padding: 0 1.1rem 0 1.25rem;
    flex-shrink: 0;
    border-right: 1px solid var(--nav-separator);
}

.brand-logo[b-piadrq1qls] {
    height: 28px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

/* ── MIDDLE: module navigation ──────────────────────────────── */
.ab-nav.nav-hidden[b-piadrq1qls] { display: none; }

.ab-nav[b-piadrq1qls] {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: visible;
    padding: 0 .4rem;
    gap: .1rem;
    min-width: 0;
}

/* ── Module tabs — pill style ────────────────────────────────── */
.mod-tab[b-piadrq1qls] {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    padding: .3rem .82rem;
    border-radius: 6px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--nav-text);
    text-decoration: none;
    white-space: nowrap;
    transition: color .12s, background .12s;
    cursor: pointer;
    background: transparent;
    border: none;
}

.mod-tab:hover[b-piadrq1qls] {
    color: var(--nav-text-hover);
    background: var(--nav-hover-bg);
    text-decoration: none;
}

.mod-tab.mod-active[b-piadrq1qls] {
    color: var(--nav-active-text);
    background: var(--nav-active-bg);
    font-weight: 600;
}

.mod-tab-icon[b-piadrq1qls] {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    background: var(--nav-icon-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    color: var(--nav-icon-color);
    transition: background .12s, color .12s;
    flex-shrink: 0;
}

.mod-tab:hover .mod-tab-icon[b-piadrq1qls] {
    background: var(--nav-hover-bg);
    color: var(--nav-text-hover);
}

.mod-tab.mod-active .mod-tab-icon[b-piadrq1qls] {
    background: rgba(255,255,255,.25);
    color: var(--nav-active-text);
}

.mod-tab-text[b-piadrq1qls] {
    font-size: .82rem;
    letter-spacing: .01em;
}

/* Parent group (has dropdown) */
.mod-group[b-piadrq1qls] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.mod-parent-tab[b-piadrq1qls] {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    padding: .3rem .82rem;
    border-radius: 6px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--nav-text);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition: color .12s, background .12s;
}

.mod-group:hover .mod-parent-tab[b-piadrq1qls] {
    color: var(--nav-text-hover);
    background: var(--nav-hover-bg);
}

.mod-group.mod-active .mod-parent-tab[b-piadrq1qls] {
    color: var(--nav-active-text);
    background: var(--nav-active-bg);
    font-weight: 600;
}

.mod-group:hover .mod-tab-icon[b-piadrq1qls] {
    background: var(--nav-hover-bg);
    color: var(--nav-text-hover);
}

.mod-group.mod-active .mod-tab-icon[b-piadrq1qls] {
    background: rgba(255,255,255,.25);
    color: var(--nav-active-text);
}

.mod-chevron[b-piadrq1qls] {
    font-size: .5rem;
    color: var(--nav-chevron);
    transition: transform .18s;
    margin-left: .1rem;
}

.mod-group:hover .mod-chevron[b-piadrq1qls] {
    transform: rotate(180deg);
    color: var(--nav-text);
}

/* Dropdown panel */
.mod-dropdown[b-piadrq1qls] {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--dropdown-bg);
    border: 1px solid var(--dropdown-border);
    border-top: 2px solid var(--dropdown-border-top);
    border-radius: 10px;
    box-shadow: var(--dropdown-shadow);
    min-width: 226px;
    padding: .35rem 0;
    z-index: 500;
}

.mod-dropdown[b-piadrq1qls]::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

.mod-group:hover .mod-dropdown[b-piadrq1qls] { display: block; }

.mod-dropdown-header[b-piadrq1qls] {
    font-size: .61rem;
    font-weight: 700;
    color: var(--dropdown-header);
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: .3rem 1rem .5rem;
}

.mod-pending[b-piadrq1qls] {
    display: inline-flex;
    align-items: center;
    font-size: .75rem;
    color: var(--nav-chevron);
    font-style: italic;
    padding: 0 .75rem;
}

/* ── Hamburger slot — always at far right when nav collapses ── */
.ab-hamburger[b-piadrq1qls] {
    margin-left: auto;
    display: flex;
    align-items: center;
    padding: 0 .75rem;
    flex-shrink: 0;
}

/* ── RIGHT: user panel ──────────────────────────────────────── */
.ab-right-hidden[b-piadrq1qls] { display: none !important; }

.ab-right[b-piadrq1qls] {
    display: flex;
    align-items: center;
    padding: 0 .9rem 0 .5rem;
    gap: .5rem;
    flex-shrink: 0;
    position: relative;
    border-left: 1px solid var(--nav-separator);
}

.header-icon-btn[b-piadrq1qls] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: var(--nav-text);
    background: transparent;
    text-decoration: none;
    position: relative;
    transition: background .15s, color .15s;
    font-size: .95rem;
}

.header-icon-btn:hover[b-piadrq1qls] {
    color: var(--nav-text-hover);
    background: var(--nav-hover-bg);
}

.header-icon-badge[b-piadrq1qls] {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.user-panel[b-piadrq1qls] {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: .28rem .55rem;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    color: inherit;
    text-align: left;
}

.user-panel:hover[b-piadrq1qls],
.user-panel.open[b-piadrq1qls] {
    background: var(--user-hover-bg);
    border-color: var(--user-hover-border);
}

.user-avatar[b-piadrq1qls] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: .02em;
}

.user-info[b-piadrq1qls] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.user-name[b-piadrq1qls] {
    font-size: .8rem;
    font-weight: 600;
    color: var(--user-name);
    white-space: nowrap;
}

.user-id[b-piadrq1qls] {
    font-size: .64rem;
    color: var(--user-id);
    white-space: nowrap;
}

.user-chevron[b-piadrq1qls] {
    font-size: .5rem;
    color: var(--nav-chevron);
    transition: transform .18s;
    margin-left: .04rem;
    flex-shrink: 0;
}

.user-chevron.rotated[b-piadrq1qls] {
    transform: rotate(180deg);
    color: var(--user-id);
}

/* ── User dropdown panel ─────────────────────────────────────── */
.user-dropdown[b-piadrq1qls] {
    position: absolute;
    top: calc(100% + 8px);
    right: .9rem;
    background: var(--udrop-bg);
    border: 1px solid var(--udrop-border);
    border-radius: 12px;
    box-shadow: var(--udrop-shadow);
    min-width: 252px;
    z-index: 500;
    overflow: hidden;
}

.udrop-head[b-piadrq1qls] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1rem;
    background: var(--udrop-head-bg);
    border-bottom: 1px solid var(--udrop-divider);
}

.udrop-avatar[b-piadrq1qls] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.udrop-name[b-piadrq1qls] {
    font-size: .86rem;
    font-weight: 600;
    color: var(--udrop-name);
    line-height: 1.3;
}

.udrop-id[b-piadrq1qls] {
    font-size: .72rem;
    color: var(--udrop-id);
    margin-top: .1rem;
}

.udrop-divider[b-piadrq1qls] {
    height: 1px;
    background: var(--udrop-divider);
}

.udrop-section[b-piadrq1qls] { padding: .45rem 0; }

.udrop-row[b-piadrq1qls] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .26rem 1rem;
    gap: 1rem;
}

.udrop-label[b-piadrq1qls] {
    font-size: .67rem;
    font-weight: 700;
    color: var(--udrop-label);
    text-transform: uppercase;
    letter-spacing: .07em;
    flex-shrink: 0;
}

.udrop-value[b-piadrq1qls] {
    font-size: .78rem;
    color: var(--udrop-value);
    font-weight: 500;
    text-align: right;
}

.udrop-footer[b-piadrq1qls] {
    padding: .4rem .5rem .5rem;
    border-top: 1px solid var(--udrop-divider);
}

/* ── Theme swatches ─────────────────────────────────────────── */
.udrop-themes[b-piadrq1qls] {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
    max-width: 150px;
    justify-content: flex-end;
}

.theme-swatch[b-piadrq1qls] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color .12s, transform .12s;
    padding: 0;
    outline: none;
    flex-shrink: 0;
}

.theme-swatch:hover[b-piadrq1qls]       { transform: scale(1.18); }
.theme-swatch.selected[b-piadrq1qls]    { border-color: var(--nav-active-bg); transform: scale(1.18); }

.theme-swatch-pearl[b-piadrq1qls]   { background: linear-gradient(135deg, #f8f8f8, #b0b0b0); }
.theme-swatch-azure[b-piadrq1qls]   { background: linear-gradient(135deg, #e0f2fe, #0284c7); }
.theme-swatch-titanium[b-piadrq1qls]{ background: linear-gradient(135deg, #e2e8f0, #2563eb); }
.theme-swatch-emerald[b-piadrq1qls] { background: linear-gradient(135deg, #d1fae5, #059669); }
.theme-swatch-amber[b-piadrq1qls]   { background: linear-gradient(135deg, #fef3c7, #d97706); }
.theme-swatch-midnight[b-piadrq1qls]{ background: linear-gradient(135deg, #1a1f2e, #4f6ef7); }
.theme-swatch-sapphire[b-piadrq1qls]{ background: linear-gradient(135deg, #0b1329, #0284c7, #38bdf8); }
.theme-swatch-crimson[b-piadrq1qls] { background: linear-gradient(135deg, #16080e, #be123c, #f43f5e); }
.theme-swatch-nordic[b-piadrq1qls]  { background: linear-gradient(135deg, #08131a, #0d9488, #2dd4bf); }
.theme-swatch-amethyst[b-piadrq1qls]{ background: linear-gradient(135deg, #0f0d17, #7e22ce, #c084fc); }

[b-piadrq1qls] .udrop-section {
    padding: .35rem .45rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

[b-piadrq1qls] .udrop-footer {
    padding: .35rem .45rem;
    border-top: 1px solid var(--udrop-divider);
}

[b-piadrq1qls] .udrop-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: .75rem !important;
    width: 100% !important;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: .5rem .65rem !important;
    font-size: .82rem;
    font-weight: 500;
    color: var(--udrop-name, #e2e8f0);
    text-decoration: none !important;
    cursor: pointer;
    transition: all .15s ease-in-out;
    text-align: left;
    outline: none;
    box-sizing: border-box;
}

[b-piadrq1qls] .udrop-item:hover {
    background: var(--user-hover-bg, rgba(59, 130, 246, 0.12));
    border-color: var(--user-hover-border, rgba(59, 130, 246, 0.25));
    color: var(--nav-text-hover, #ffffff) !important;
    transform: translateX(2px);
}

[b-piadrq1qls] .udrop-item:hover .udrop-arrow {
    opacity: 1;
    transform: translateX(2px);
    color: var(--bs-primary, #38bdf8);
}

[b-piadrq1qls] .udrop-item.active {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.35);
    font-weight: 600;
}

[b-piadrq1qls] .udrop-icon-box {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    border-radius: 8px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .95rem !important;
    flex-shrink: 0 !important;
    transition: transform .15s ease;
}

[b-piadrq1qls] .udrop-item:hover .udrop-icon-box {
    transform: scale(1.08);
}

[b-piadrq1qls] .udrop-icon-theme {
    background: rgba(59, 130, 246, 0.18) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(56, 189, 248, 0.25);
}

[b-piadrq1qls] .udrop-icon-pwd {
    background: rgba(245, 158, 11, 0.18) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

[b-piadrq1qls] .udrop-icon-signout {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

[b-piadrq1qls] .udrop-text-block {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    min-width: 0 !important;
}

[b-piadrq1qls] .udrop-title {
    font-size: .83rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    color: var(--udrop-name, #e2e8f0) !important;
}

[b-piadrq1qls] .udrop-subtitle {
    font-size: .70rem !important;
    color: var(--udrop-id, #94a3b8) !important;
    line-height: 1.2 !important;
    margin-top: 1px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

[b-piadrq1qls] .udrop-arrow {
    font-size: .72rem !important;
    color: var(--udrop-id, #94a3b8) !important;
    opacity: 0.45;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    transition: all .15s ease;
}

[b-piadrq1qls] .udrop-item-signout:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #ef4444 !important;
}

[b-piadrq1qls] .udrop-item-signout:hover:not(:disabled) .udrop-title {
    color: #ef4444 !important;
}

[b-piadrq1qls] .udrop-item-signout:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ── Overlay: click-outside closes user dropdown ────────────── */
.dropdown-overlay[b-piadrq1qls] {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: transparent;
}

/* ── Mobile sign-out (inside nav drawer — always dark) ──────── */
.btn-signout[b-piadrq1qls] {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    color: #94a3b8;
    font-size: .73rem;
    font-weight: 500;
    padding: .25rem .8rem;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}

.btn-signout:hover:not(:disabled)[b-piadrq1qls] {
    background: rgba(255,255,255,.12);
    color: #f1f5f9;
}

.btn-signout:disabled[b-piadrq1qls] {
    opacity: .45;
    cursor: not-allowed;
}

/* ── Content ─────────────────────────────────────────────────── */
.app-content[b-piadrq1qls] {
    flex: 1;
    overflow-y: auto;
    background: var(--content-bg);
    padding: 0;
}

.app-content-dock[b-piadrq1qls] {
    padding-bottom: 3.5rem !important;
}

/* ── Blazor Error UI ─────────────────────────────────────────── */
#blazor-error-ui[b-piadrq1qls] {
    color-scheme: light only;
    background: #fef9c3;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.15);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: .85rem;
}

#blazor-error-ui .dismiss[b-piadrq1qls] {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
}
/* /Components/Layout/ModuleMenuItem.razor.rz.scp.css */
/* ── Menu item (all levels) ─────────────────────────────────── */
.mod-item[b-6cxfi2xpid] {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .85rem;
    margin: .04rem .35rem;
    border-radius: 6px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--nav-text);
    text-decoration: none;
    transition: background .1s, color .1s;
    white-space: nowrap;
}

a.mod-item[b-6cxfi2xpid] { cursor: pointer; }
div.mod-item[b-6cxfi2xpid] { cursor: default; user-select: none; }

.mod-item:hover[b-6cxfi2xpid] {
    background: var(--nav-hover-bg);
    color: var(--nav-text-hover);
    text-decoration: none;
}

/* Active leaf item */
a.mod-item.mod-item-active[b-6cxfi2xpid] {
    color: var(--nav-active-text);
    background: var(--nav-active-bg);
    font-weight: 600;
}

/* Active parent item (when a child route is active) */
div.mod-item.has-submenu.mod-item-parent-active[b-6cxfi2xpid] {
    color: var(--nav-text-hover);
    background: var(--nav-hover-bg);
    font-weight: 600;
}

.mod-item-icon[b-6cxfi2xpid] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--nav-icon-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .76rem;
    color: var(--nav-icon-color);
    flex-shrink: 0;
    transition: background .1s, color .1s;
}

.mod-item:hover > .mod-item-icon[b-6cxfi2xpid] {
    background: var(--nav-hover-bg);
    color: var(--nav-text-hover);
}

a.mod-item.mod-item-active > .mod-item-icon[b-6cxfi2xpid] {
    background: rgba(255, 255, 255, .25);
    color: var(--nav-active-text);
}

div.mod-item.has-submenu.mod-item-parent-active > .mod-item-icon[b-6cxfi2xpid] {
    background: var(--nav-hover-bg);
    color: var(--nav-text-hover);
}

.mod-item-text[b-6cxfi2xpid] {
    flex: 1;
    font-size: .82rem;
    line-height: 1;
}

.mod-item-chevron[b-6cxfi2xpid] {
    font-size: .5rem;
    color: var(--nav-chevron);
    margin-left: .15rem;
    flex-shrink: 0;
    transition: color .1s;
}

.mod-item:hover > .mod-item-chevron[b-6cxfi2xpid],
div.mod-item.has-submenu.mod-item-parent-active > .mod-item-chevron[b-6cxfi2xpid] {
    color: var(--nav-text-hover);
}

/* ── Flyout submenu panel ────────────────────────────────────── */
.mod-submenu[b-6cxfi2xpid] {
    display: none;
    position: absolute;
    left: calc(100% + 4px);
    top: -5px;
    background: var(--dropdown-bg);
    border: 1px solid var(--dropdown-border);
    border-top: 2px solid var(--dropdown-submenu-top);
    border-radius: 10px;
    box-shadow: var(--dropdown-shadow);
    min-width: 210px;
    padding: .35rem 0;
    z-index: 600;
    color: var(--nav-text);
    font-weight: 500;
}

/* Invisible bridge that fills the 4px gap between item and submenu panel. */
.mod-submenu[b-6cxfi2xpid]::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 0;
    bottom: 0;
    width: 6px;
}

.mod-item.has-submenu:hover > .mod-submenu[b-6cxfi2xpid] { display: block; }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-5rglwa3mzs],
.components-reconnect-repeated-attempt-visible[b-5rglwa3mzs],
.components-reconnect-failed-visible[b-5rglwa3mzs],
.components-pause-visible[b-5rglwa3mzs],
.components-resume-failed-visible[b-5rglwa3mzs],
.components-rejoining-animation[b-5rglwa3mzs] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-5rglwa3mzs],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-5rglwa3mzs],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-5rglwa3mzs],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-5rglwa3mzs],
#components-reconnect-modal.components-reconnect-retrying[b-5rglwa3mzs],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-5rglwa3mzs],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-5rglwa3mzs],
#components-reconnect-modal.components-reconnect-failed[b-5rglwa3mzs],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-5rglwa3mzs] {
    display: block;
}


#components-reconnect-modal[b-5rglwa3mzs] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-5rglwa3mzs 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-5rglwa3mzs 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-5rglwa3mzs 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-5rglwa3mzs]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-5rglwa3mzs 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-5rglwa3mzs {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-5rglwa3mzs {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-5rglwa3mzs {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-5rglwa3mzs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-5rglwa3mzs] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-5rglwa3mzs] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-5rglwa3mzs] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-5rglwa3mzs] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-5rglwa3mzs] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-5rglwa3mzs] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-5rglwa3mzs 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-5rglwa3mzs] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-5rglwa3mzs {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/AccessDenied.razor.rz.scp.css */
.ad-wrapper[b-h4fpv2iync] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 2rem;
}

.ad-card[b-h4fpv2iync] {
    text-align: center;
    max-width: 420px;
    width: 100%;
    padding: 2.5rem 2rem;
    background: var(--ec-surface);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-lg, 12px);
    box-shadow: var(--ec-shadow-sm);
}

.ad-icon[b-h4fpv2iync] {
    font-size: 3rem;
    color: var(--ec-color-error, #ef4444);
    margin-bottom: 1rem;
}

.ad-heading[b-h4fpv2iync] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ec-text-primary);
    margin: 0 0 0.5rem;
}

.ad-module[b-h4fpv2iync] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ec-text-secondary);
    background: var(--ec-bg-subtle);
    border-radius: 4px;
    padding: 0.25rem 0.75rem;
    display: inline-block;
    margin-bottom: 0.75rem;
}

.ad-message[b-h4fpv2iync] {
    font-size: 0.875rem;
    color: var(--ec-text-muted);
    margin-bottom: 1.75rem;
    line-height: 1.5;
}

.ad-actions[b-h4fpv2iync] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}
/* /Components/Pages/Chat/ChatWorkspace.razor.rz.scp.css */
/* ── Team Chat & Collaboration Workspace ── */

.cw-page-wrapper[b-l4ry3r18ay] {
    padding: 12px 18px 14px;
    height: calc(100vh - 140px);
    max-height: calc(100vh - 140px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cw-container[b-l4ry3r18ay] {
    display: flex;
    flex: 1;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    background: var(--panel-bg, #ffffff);
    color: var(--panel-text, #1e293b);
    font-family: inherit;
    overflow: hidden;
    position: relative;
    border-radius: 14px;
    border: 1px solid var(--panel-border, #e2e8f0);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

@media (max-width: 768px) {
    .cw-page-wrapper[b-l4ry3r18ay] {
        padding: 6px 8px 8px;
        height: calc(100vh - 140px);
        max-height: calc(100vh - 140px);
    }

    .cw-container[b-l4ry3r18ay] {
        border-radius: 10px;
    }
}

/* ── SIDEBAR: Channel & DM List ── */
.cw-sidebar[b-l4ry3r18ay] {
    width: 320px;
    min-width: 280px;
    max-width: 340px;
    background: var(--panel-bg, #ffffff);
    border-right: 1px solid var(--panel-border, #e2e8f0);
    display: flex;
    flex-direction: column;
    height: 100%;
    flex-shrink: 0;
    box-shadow: 2px 0 10px rgba(0,0,0,0.02);
    z-index: 10;
}

.cw-sidebar-header[b-l4ry3r18ay] {
    padding: 16px 18px;
    border-bottom: 1px solid var(--panel-border, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--panel-bg, #ffffff);
}

.cw-title-wrap[b-l4ry3r18ay] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cw-title-icon[b-l4ry3r18ay] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--nav-active-bg, linear-gradient(135deg, #0284c7, #0ea5e9));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 4px 10px rgba(2, 132, 199, 0.25);
}

.cw-title-text[b-l4ry3r18ay] {
    font-size: 15px;
    font-weight: 700;
    color: var(--panel-text-strong, #0f172a);
    letter-spacing: -0.01em;
}

.cw-header-actions[b-l4ry3r18ay] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cw-icon-btn[b-l4ry3r18ay] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--panel-border, #e2e8f0);
    background: var(--panel-subtle-bg, #f8fafc);
    color: var(--panel-text, #475569);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 13px;
}

.cw-icon-btn:hover[b-l4ry3r18ay] {
    background: var(--nav-active-bg, #0284c7);
    color: #ffffff;
    border-color: var(--nav-active-bg, #0284c7);
    transform: translateY(-1px);
}

.cw-search-wrap[b-l4ry3r18ay] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--panel-border, #f1f5f9);
    background: var(--panel-subtle-bg, #fafafa);
}

.cw-search-input-box[b-l4ry3r18ay] {
    position: relative;
    display: flex;
    align-items: center;
}

.cw-search-icon[b-l4ry3r18ay] {
    position: absolute;
    left: 12px;
    color: var(--panel-text-muted, #94a3b8);
    font-size: 13px;
    pointer-events: none;
}

.cw-search-input[b-l4ry3r18ay] {
    width: 100%;
    padding: 8px 12px 8px 34px;
    font-size: 13px;
    border-radius: 8px;
    border: 1px solid var(--panel-border, #e2e8f0);
    background: var(--panel-bg, #ffffff);
    color: var(--panel-text-strong, #1e293b);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.cw-search-input:focus[b-l4ry3r18ay] {
    border-color: var(--nav-active-bg, #0284c7);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.cw-rooms-list[b-l4ry3r18ay] {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.cw-section-heading[b-l4ry3r18ay] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--panel-text-muted, #94a3b8);
    letter-spacing: 0.05em;
    padding: 12px 10px 6px;
}

.cw-room-item[b-l4ry3r18ay] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 4px;
    position: relative;
    border: 1px solid transparent;
}

.cw-room-item:hover[b-l4ry3r18ay] {
    background: var(--panel-subtle-bg, #f1f5f9);
}

.cw-room-item.cw-room-active[b-l4ry3r18ay] {
    background: var(--panel-subtle-bg, #e0f2fe);
    border-left: 3px solid var(--nav-active-bg, #0284c7);
}

.cw-avatar[b-l4ry3r18ay] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    position: relative;
}

.cw-avatar.cw-avatar-group[b-l4ry3r18ay] {
    background: rgba(124, 58, 237, 0.15);
    color: #7c3aed;
}

.cw-avatar.cw-avatar-user[b-l4ry3r18ay] {
    background: rgba(2, 132, 199, 0.15);
    color: var(--nav-active-bg, #0284c7);
}

.cw-avatar.cw-avatar-context[b-l4ry3r18ay] {
    background: rgba(217, 119, 6, 0.15);
    color: #d97706;
}

.cw-presence-dot[b-l4ry3r18ay] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--panel-bg, #ffffff);
}

.cw-presence-active[b-l4ry3r18ay] {
    background: #10b981;
}

.cw-presence-away[b-l4ry3r18ay] {
    background: #f59e0b;
}

.cw-presence-offline[b-l4ry3r18ay] {
    background: #94a3b8;
}

.cw-online-dot[b-l4ry3r18ay] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #10b981;
    border: 2px solid var(--panel-bg, #ffffff);
}

.cw-away-dot[b-l4ry3r18ay] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #f59e0b;
    border: 2px solid var(--panel-bg, #ffffff);
}

.cw-offline-dot[b-l4ry3r18ay] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #94a3b8;
    border: 2px solid var(--panel-bg, #ffffff);
}

.cw-room-details[b-l4ry3r18ay] {
    flex: 1;
    min-width: 0;
}

.cw-room-top[b-l4ry3r18ay] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
}

.cw-room-name[b-l4ry3r18ay] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--panel-text-strong, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cw-room-time[b-l4ry3r18ay] {
    font-size: 11px;
    color: var(--panel-text-muted, #94a3b8);
}

.cw-room-sub[b-l4ry3r18ay] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cw-room-preview[b-l4ry3r18ay] {
    font-size: 12px;
    color: var(--panel-text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px;
}

.cw-unread-pill[b-l4ry3r18ay] {
    background: #ef4444;
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 12px;
    line-height: 1;
    box-shadow: 0 2px 5px rgba(239, 68, 68, 0.35);
}

/* ── MAIN STREAM AREA ── */
.cw-main[b-l4ry3r18ay] {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--panel-bg, #ffffff);
    overflow: hidden;
}

.cw-main-header[b-l4ry3r18ay] {
    height: 64px;
    padding: 0 20px;
    border-bottom: 1px solid var(--panel-border, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--panel-bg, #ffffff);
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    z-index: 5;
    flex-shrink: 0;
}

.cw-active-info[b-l4ry3r18ay] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cw-active-title[b-l4ry3r18ay] {
    font-size: 15px;
    font-weight: 700;
    color: var(--panel-text-strong, #0f172a);
    line-height: 1.2;
}

.cw-active-subtitle[b-l4ry3r18ay] {
    font-size: 12px;
    color: var(--panel-text-muted, #64748b);
    display: flex;
    align-items: center;
    gap: 6px;
}

.cw-online-badge[b-l4ry3r18ay] {
    color: #10b981;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.cw-online-badge[b-l4ry3r18ay]::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
}

.cw-away-badge[b-l4ry3r18ay] {
    color: #d97706;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.cw-away-badge[b-l4ry3r18ay]::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f59e0b;
}

.cw-offline-badge[b-l4ry3r18ay] {
    color: var(--panel-text-muted, #94a3b8);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.cw-offline-badge[b-l4ry3r18ay]::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #94a3b8;
}

.cw-messages-timeline[b-l4ry3r18ay] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: var(--content-bg, #f8fafc);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cw-load-more-btn[b-l4ry3r18ay] {
    align-self: center;
    padding: 6px 16px;
    border-radius: 20px;
    background: var(--panel-bg, #ffffff);
    border: 1px solid var(--panel-border, #cbd5e1);
    color: var(--panel-text, #475569);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: all 0.15s;
    margin-bottom: 8px;
}

.cw-load-more-btn:hover[b-l4ry3r18ay] {
    background: var(--panel-subtle-bg, #f1f5f9);
    color: var(--panel-text-strong, #1e293b);
}

.cw-msg-row[b-l4ry3r18ay] {
    display: flex;
    flex-direction: column;
    max-width: 72%;
}

.cw-msg-row.cw-msg-self[b-l4ry3r18ay] {
    align-self: flex-end;
    align-items: flex-end;
}

.cw-msg-row.cw-msg-other[b-l4ry3r18ay] {
    align-self: flex-start;
    align-items: flex-start;
}

.cw-msg-meta[b-l4ry3r18ay] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    padding: 0 4px;
}

.cw-msg-sender[b-l4ry3r18ay] {
    font-size: 12px;
    font-weight: 700;
    color: var(--panel-text, #334155);
}

.cw-msg-meta-right[b-l4ry3r18ay] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cw-msg-time[b-l4ry3r18ay] {
    font-size: 11px;
    color: var(--panel-text-muted, #94a3b8);
}

.cw-tick[b-l4ry3r18ay] {
    font-size: 11.5px;
    cursor: default;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease;
}

.cw-tick-grey[b-l4ry3r18ay] {
    color: var(--panel-text-muted, #94a3b8);
}

.cw-tick-blue[b-l4ry3r18ay] {
    color: #0284c7;
}

.cw-msg-self .cw-tick-blue[b-l4ry3r18ay] {
    color: #38bdf8;
}

.cw-bubble[b-l4ry3r18ay] {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 13.5px;
    line-height: 1.5;
    position: relative;
    word-break: break-word;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.cw-msg-self .cw-bubble[b-l4ry3r18ay] {
    background: var(--nav-active-bg, linear-gradient(135deg, #0284c7, #0369a1));
    color: #ffffff;
    border-bottom-right-radius: 4px;
}

.cw-msg-other .cw-bubble[b-l4ry3r18ay] {
    background: var(--panel-bg, #ffffff);
    color: var(--panel-text-strong, #1e293b);
    border: 1px solid var(--panel-border, #e2e8f0);
    border-bottom-left-radius: 4px;
}

.cw-attachment-item[b-l4ry3r18ay] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 12.5px;
    transition: opacity 0.15s;
}

.cw-msg-self .cw-attachment-item[b-l4ry3r18ay] {
    background: rgba(255,255,255,0.18);
    color: #ffffff;
}

.cw-msg-other .cw-attachment-item[b-l4ry3r18ay] {
    background: var(--panel-subtle-bg, #f1f5f9);
    border: 1px solid var(--panel-border, #e2e8f0);
    color: var(--panel-text-strong, #1e293b);
}

.cw-att-download[b-l4ry3r18ay] {
    cursor: pointer;
    background: transparent;
    border: none;
    color: inherit;
    font-size: 14px;
    padding: 4px;
    opacity: 0.85;
}

.cw-att-download:hover[b-l4ry3r18ay] {
    opacity: 1;
}

/* ── COMPOSER ── */
.cw-composer[b-l4ry3r18ay] {
    padding: 14px 20px;
    background: var(--panel-bg, #ffffff);
    border-top: 1px solid var(--panel-border, #e2e8f0);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.cw-pending-bar[b-l4ry3r18ay] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 10px;
    background: var(--panel-subtle-bg, #eef2ff);
    border: 1px dashed var(--panel-border, #c7d2fe);
    border-radius: 8px;
}

.cw-pending-tag[b-l4ry3r18ay] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    background: var(--panel-bg, #ffffff);
    border: 1px solid var(--panel-border, #c7d2fe);
    border-radius: 6px;
    font-size: 12px;
    color: var(--panel-text-strong, #3730a3);
}

.cw-composer-row[b-l4ry3r18ay] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.cw-textarea[b-l4ry3r18ay] {
    flex: 1;
    min-height: 42px;
    max-height: 120px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--panel-border, #cbd5e1);
    background: var(--panel-subtle-bg, #f8fafc);
    color: var(--panel-text-strong, #0f172a);
    font-size: 13.5px;
    outline: none;
    resize: none;
    line-height: 1.4;
    transition: all 0.15s ease;
}

.cw-textarea:focus[b-l4ry3r18ay] {
    background: var(--panel-bg, #ffffff);
    border-color: var(--nav-active-bg, #0284c7);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.cw-send-btn[b-l4ry3r18ay] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--nav-active-bg, #0284c7);
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.15s ease;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
}

.cw-send-btn:hover:not(:disabled)[b-l4ry3r18ay] {
    transform: translateY(-1px);
    opacity: 0.92;
}

.cw-send-btn:disabled[b-l4ry3r18ay] {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

/* ── RIGHT DRAWER ── */
.cw-drawer[b-l4ry3r18ay] {
    width: 280px;
    background: var(--panel-bg, #ffffff);
    border-left: 1px solid var(--panel-border, #e2e8f0);
    display: flex;
    flex-direction: column;
    height: 100%;
    flex-shrink: 0;
}

.cw-drawer-header[b-l4ry3r18ay] {
    padding: 18px;
    border-bottom: 1px solid var(--panel-border, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cw-drawer-body[b-l4ry3r18ay] {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
}

.cw-drawer-section[b-l4ry3r18ay] {
    margin-bottom: 20px;
}

.cw-drawer-label[b-l4ry3r18ay] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--panel-text-muted, #94a3b8);
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.cw-member-row[b-l4ry3r18ay] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
}

/* ── MODALS ── */
.cw-modal-overlay[b-l4ry3r18ay] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.cw-modal-card[b-l4ry3r18ay] {
    background: var(--panel-bg, #ffffff);
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    border: 1px solid var(--panel-border, #e2e8f0);
    overflow: hidden;
    animation: cwFadeIn-b-l4ry3r18ay 0.2s ease-out;
    color: var(--panel-text, #1e293b);
}

@keyframes cwFadeIn-b-l4ry3r18ay {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.cw-modal-head[b-l4ry3r18ay] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--panel-border, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cw-modal-body[b-l4ry3r18ay] {
    padding: 20px;
}

.cw-modal-foot[b-l4ry3r18ay] {
    padding: 14px 20px;
    border-top: 1px solid var(--panel-border, #f1f5f9);
    background: var(--panel-subtle-bg, #f8fafc);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* ── DELETED MESSAGE & ACTION STYLES ── */
.cw-msg-body-wrap[b-l4ry3r18ay] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cw-msg-self .cw-msg-body-wrap[b-l4ry3r18ay] {
    flex-direction: row-reverse;
}

.cw-msg-actions[b-l4ry3r18ay] {
    opacity: 0;
    transition: opacity 0.15s ease;
    display: flex;
    align-items: center;
}

.cw-msg-row:hover .cw-msg-actions[b-l4ry3r18ay] {
    opacity: 1;
}

.cw-msg-action-btn[b-l4ry3r18ay] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--panel-border, #e2e8f0);
    background: var(--panel-bg, #ffffff);
    color: var(--panel-text-muted, #94a3b8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11.5px;
    transition: all 0.15s ease;
}

.cw-msg-action-btn:hover[b-l4ry3r18ay] {
    color: #ef4444;
    border-color: #fca5a5;
    background: #fef2f2;
}

.cw-bubble-deleted[b-l4ry3r18ay] {
    background: var(--panel-subtle-bg, #f1f5f9) !important;
    color: var(--panel-text-muted, #94a3b8) !important;
    border: 1px dashed var(--panel-border, #cbd5e1) !important;
    box-shadow: none !important;
    font-size: 12.5px !important;
    font-style: italic;
    display: inline-flex;
    align-items: center;
}

.cw-delete-opt-card[b-l4ry3r18ay] {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--panel-border, #e2e8f0);
    background: var(--panel-bg, #ffffff);
    cursor: pointer;
    transition: all 0.15s ease;
}

.cw-delete-opt-card:hover[b-l4ry3r18ay] {
    background: var(--panel-subtle-bg, #f8fafc);
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.cw-delete-opt-danger[b-l4ry3r18ay] {
    border-color: #fee2e2;
    background: #fffafa;
}

.cw-delete-opt-danger:hover[b-l4ry3r18ay] {
    border-color: #fca5a5;
    background: #fef2f2;
}

/* /Components/Pages/Tasks/TasksPage.razor.rz.scp.css */
/* ── Work & Tasks Workspace ── */

.tw-container[b-6agnnslder] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 58px);
    background: var(--content-bg, #f4f6fa);
    padding: 20px 24px;
    color: var(--panel-text, #1e293b);
    font-family: inherit;
    overflow: hidden;
}

/* ── HEADER BANNER ── */
.tw-header-card[b-6agnnslder] {
    background: var(--panel-bg, #ffffff);
    border-radius: 16px;
    border: 1px solid var(--panel-border, #e2e8f0);
    padding: 16px 22px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    flex-shrink: 0;
}

.tw-title-section[b-6agnnslder] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tw-header-icon[b-6agnnslder] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--nav-active-bg, linear-gradient(135deg, #0284c7, #0ea5e9));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}

.tw-header-title[b-6agnnslder] {
    font-size: 18px;
    font-weight: 700;
    color: var(--panel-text-strong, #0f172a);
    line-height: 1.2;
}

.tw-header-subtitle[b-6agnnslder] {
    font-size: 12.5px;
    color: var(--panel-text-muted, #64748b);
    margin-top: 2px;
}

.tw-header-controls[b-6agnnslder] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tw-view-toggle[b-6agnnslder] {
    display: flex;
    background: var(--panel-subtle-bg, #f1f5f9);
    padding: 3px;
    border-radius: 10px;
    border: 1px solid var(--panel-border, #e2e8f0);
}

.tw-toggle-btn[b-6agnnslder] {
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--panel-text-muted, #64748b);
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tw-toggle-btn.active[b-6agnnslder] {
    background: var(--panel-bg, #ffffff);
    color: var(--nav-active-bg, #0284c7);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.tw-btn-primary[b-6agnnslder] {
    padding: 8px 18px;
    background: var(--nav-active-bg, #0284c7);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
    transition: all 0.15s ease;
}

.tw-btn-primary:hover[b-6agnnslder] {
    opacity: 0.92;
    transform: translateY(-1px);
}

/* ── QUICK STATS STRIP ── */
.tw-stats-grid[b-6agnnslder] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.tw-stat-card[b-6agnnslder] {
    background: var(--panel-bg, #ffffff);
    border: 1px solid var(--panel-border, #e2e8f0);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.18s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.tw-stat-card:hover[b-6agnnslder] {
    border-color: #0284c7;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}

.tw-stat-card.active[b-6agnnslder] {
    border-color: #0284c7;
    background: #f0f9ff;
    box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2);
}

.tw-stat-icon[b-6agnnslder] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.icon-total[b-6agnnslder] { background: #e0f2fe; color: #0369a1; }
.icon-mine[b-6agnnslder] { background: #dbeafe; color: #1d4ed8; }
.icon-delegated[b-6agnnslder] { background: #f3e8ff; color: #7e22ce; }
.icon-overdue[b-6agnnslder] { background: #fee2e2; color: #dc2626; }
.icon-today[b-6agnnslder] { background: #fef3c7; color: #d97706; }
.icon-done[b-6agnnslder] { background: #d1fae5; color: #047857; }

.icon-overdue.pulse[b-6agnnslder] {
    animation: twPulse-b-6agnnslder 1.8s infinite;
}

@keyframes twPulse-b-6agnnslder {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
    100% { transform: scale(1); }
}

.tw-stat-info[b-6agnnslder] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tw-stat-label[b-6agnnslder] {
    font-size: 11px;
    color: var(--panel-text-muted, #64748b);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tw-stat-val[b-6agnnslder] {
    font-size: 15px;
    font-weight: 800;
    color: var(--panel-text-strong, #0f172a);
    line-height: 1.2;
}

.tw-stat-val.text-danger[b-6agnnslder] {
    color: #dc2626;
}

/* ── FILTER TOOLBAR & QUICK PILLS ── */
.tw-filter-bar[b-6agnnslder] {
    background: var(--panel-bg, #ffffff);
    border-radius: 12px;
    border: 1px solid var(--panel-border, #e2e8f0);
    padding: 10px 14px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    flex-shrink: 0;
}

.tw-quick-pills[b-6agnnslder] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 8px;
}

.tw-pill-btn[b-6agnnslder] {
    padding: 4px 11px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
}

.tw-pill-btn:hover[b-6agnnslder] {
    background: #e2e8f0;
    color: #1e293b;
}

.tw-pill-btn.active[b-6agnnslder] {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
    box-shadow: 0 2px 5px rgba(2, 132, 199, 0.25);
}

.tw-pill-btn.active.pill-danger[b-6agnnslder] {
    background: #dc2626;
    border-color: #dc2626;
    box-shadow: 0 2px 5px rgba(220, 38, 38, 0.25);
}

.tw-counter-badge[b-6agnnslder] {
    background: #ef4444;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 5px;
}

.tw-filter-inputs[b-6agnnslder] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tw-search-box[b-6agnnslder] {
    position: relative;
    flex: 1;
    min-width: 220px;
}

.tw-search-icon[b-6agnnslder] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--panel-text-muted, #94a3b8);
    font-size: 13px;
}

.tw-search-input[b-6agnnslder] {
    width: 100%;
    padding: 7px 12px 7px 34px;
    font-size: 13px;
    border-radius: 8px;
    border: 1px solid var(--panel-border, #cbd5e1);
    background: var(--panel-subtle-bg, #f8fafc);
    color: var(--panel-text-strong, #1e293b);
    outline: none;
    transition: all 0.15s;
}

.tw-search-input:focus[b-6agnnslder] {
    border-color: var(--nav-active-bg, #0284c7);
    background: var(--panel-bg, #ffffff);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
}

.tw-select[b-6agnnslder] {
    padding: 7px 12px;
    font-size: 12.5px;
    border-radius: 8px;
    border: 1px solid var(--panel-border, #cbd5e1);
    background: var(--panel-subtle-bg, #f8fafc);
    color: var(--panel-text-strong, #1e293b);
    outline: none;
    cursor: pointer;
    transition: all 0.15s;
}

.tw-select:focus[b-6agnnslder] {
    border-color: var(--nav-active-bg, #0284c7);
    background: var(--panel-bg, #ffffff);
}

.tw-btn-reset[b-6agnnslder] {
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 12px;
    cursor: pointer;
    font-weight: 600;
    padding: 6px 10px;
}

.tw-btn-reset:hover[b-6agnnslder] {
    color: #0f172a;
}

.tw-toggle-archived-btn[b-6agnnslder] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--panel-border, #cbd5e1);
    background: var(--panel-bg, #ffffff);
    color: var(--panel-text, #475569);
    cursor: pointer;
    transition: all 0.15s ease;
}

.tw-toggle-archived-btn:hover[b-6agnnslder] {
    border-color: #94a3b8;
    background: #f8fafc;
    color: #1e293b;
}

.tw-toggle-archived-btn.active[b-6agnnslder] {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
}

.tw-archived-badge[b-6agnnslder] {
    background: #e2e8f0;
    color: #334155;
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
}

.tw-toggle-archived-btn.active .tw-archived-badge[b-6agnnslder] {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* ── BATCH ACTION BAR ── */
.tw-batch-bar[b-6agnnslder] {
    background: #0f172a;
    color: #ffffff;
    border-radius: 12px;
    padding: 10px 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.25);
    animation: twSlideDown-b-6agnnslder 0.2s ease-out;
    flex-shrink: 0;
}

@keyframes twSlideDown-b-6agnnslder {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.tw-batch-info[b-6agnnslder] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.tw-batch-actions[b-6agnnslder] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tw-batch-btn[b-6agnnslder] {
    border: none;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s;
}

.tw-batch-btn.btn-success[b-6agnnslder] { background: #10b981; color: #ffffff; }
.tw-batch-btn.btn-success:hover[b-6agnnslder] { background: #059669; }

.tw-batch-btn.btn-primary[b-6agnnslder] { background: #0284c7; color: #ffffff; }
.tw-batch-btn.btn-primary:hover[b-6agnnslder] { background: #0369a1; }

.tw-batch-btn.btn-danger[b-6agnnslder] { background: #ef4444; color: #ffffff; }
.tw-batch-btn.btn-danger:hover[b-6agnnslder] { background: #dc2626; }

.tw-batch-btn.btn-outline[b-6agnnslder] { background: rgba(255,255,255,0.15); color: #ffffff; }
.tw-batch-btn.btn-outline:hover[b-6agnnslder] { background: rgba(255,255,255,0.25); }

/* ── KANBAN BOARD ── */
.tw-kanban-board[b-6agnnslder] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    flex: 1;
    overflow-y: hidden;
    min-height: 0;
}

.tw-kanban-board.cols-3[b-6agnnslder] {
    grid-template-columns: repeat(3, 1fr);
}

.tw-kanban-board.cols-4[b-6agnnslder] {
    grid-template-columns: repeat(4, 1fr);
}

.tw-kanban-drop-archive-zone[b-6agnnslder] {
    margin-top: 10px;
    padding: 12px 20px;
    background: #f0fdf4;
    border: 2px dashed #86efac;
    border-radius: 12px;
    color: #166534;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
    animation: fadeIn 0.2s ease;
    cursor: default;
    flex-shrink: 0;
}

.tw-kanban-drop-archive-zone.is-drag-over[b-6agnnslder] {
    background: #dcfce7;
    border-color: #16a34a;
    color: #15803d;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
    transform: scale(1.008);
}

.tw-card-quick-check[b-6agnnslder] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid #cbd5e1;
    background: transparent;
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.tw-card:hover .tw-card-quick-check[b-6agnnslder] {
    border-color: #94a3b8;
    color: #94a3b8;
}

.tw-card-quick-check:hover[b-6agnnslder] {
    border-color: #10b981 !important;
    background: #10b981 !important;
    color: #ffffff !important;
    transform: scale(1.15);
}

.tw-btn-card-close[b-6agnnslder] {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1px solid var(--panel-border, #cbd5e1);
    background: var(--panel-bg, #ffffff);
    color: var(--panel-text-muted, #64748b);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.tw-btn-card-close:hover[b-6agnnslder] {
    background: #334155 !important;
    border-color: #334155 !important;
    color: #ffffff !important;
    transform: scale(1.15);
}

.tw-completed-time-tag[b-6agnnslder] {
    display: inline-flex;
    align-items: center;
    font-size: 10.5px;
    font-weight: 600;
    color: #059669;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    padding: 2px 7px;
    border-radius: 6px;
}

.tw-kanban-col[b-6agnnslder] {
    background: var(--panel-subtle-bg, #ebf0f7);
    border-radius: 14px;
    border: 2px solid var(--panel-border, #dce4ef);
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.tw-kanban-col.is-drag-over[b-6agnnslder] {
    background: rgba(2, 132, 199, 0.08);
    border-color: #0284c7;
    border-style: dashed;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2), 0 8px 24px rgba(2, 132, 199, 0.12);
    transform: scale(1.01);
}

.tw-kanban-col-head[b-6agnnslder] {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--panel-bg, rgba(255,255,255,0.6));
    border-bottom: 1px solid var(--panel-border, #dce4ef);
}

.tw-col-title-group[b-6agnnslder] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tw-col-dot[b-6agnnslder] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.tw-col-dot.dot-pending[b-6agnnslder] { background: #f59e0b; }
.tw-col-dot.dot-inprogress[b-6agnnslder] { background: #0284c7; }
.tw-col-dot.dot-inreview[b-6agnnslder] { background: #8b5cf6; }
.tw-col-dot.dot-completed[b-6agnnslder] { background: #10b981; }

.tw-col-title[b-6agnnslder] {
    font-size: 12px;
    font-weight: 700;
    color: var(--panel-text, #334155);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tw-col-count[b-6agnnslder] {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--panel-bg, #ffffff);
    color: var(--panel-text, #475569);
    border: 1px solid var(--panel-border, #cbd5e1);
}

.tw-kanban-cards-container[b-6agnnslder] {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tw-card[b-6agnnslder] {
    background: var(--panel-bg, #ffffff);
    border-radius: 12px;
    padding: 12px 14px;
    border: 1px solid var(--panel-border, #e2e8f0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
    user-select: none;
}

.tw-card:active[b-6agnnslder] {
    cursor: grabbing;
}

.tw-card:hover[b-6agnnslder] {
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
    transform: translateY(-2px);
    border-color: var(--nav-active-bg, #cbd5e1);
}

.tw-card.is-dragging[b-6agnnslder] {
    opacity: 0.4;
    border: 2px dashed #0284c7;
    background: #f0f9ff;
    transform: scale(0.97);
    box-shadow: none;
}

.tw-drag-handle[b-6agnnslder] {
    color: #94a3b8;
    font-size: 11px;
    cursor: grab;
    opacity: 0.7;
    transition: opacity 0.15s, color 0.15s;
}

.tw-card:hover .tw-drag-handle[b-6agnnslder] {
    color: #475569;
    opacity: 1;
}

.tw-card-top[b-6agnnslder] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tw-task-no[b-6agnnslder] {
    font-size: 11px;
    font-weight: 700;
    color: var(--nav-active-bg, #0284c7);
}

.tw-priority-pill[b-6agnnslder] {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tw-priority-urgent[b-6agnnslder] { background: rgba(220, 38, 38, 0.15); color: #dc2626; }
.tw-priority-high[b-6agnnslder] { background: rgba(217, 119, 6, 0.15); color: #d97706; }
.tw-priority-normal[b-6agnnslder] { background: rgba(2, 132, 199, 0.15); color: #0284c7; }
.tw-priority-low[b-6agnnslder] { background: rgba(100, 116, 139, 0.15); color: #64748b; }

.tw-card-title[b-6agnnslder] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--panel-text-strong, #0f172a);
    line-height: 1.35;
}

.tw-card-desc[b-6agnnslder] {
    font-size: 12px;
    color: var(--panel-text-muted, #64748b);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tw-card-source[b-6agnnslder] {
    display: flex;
    align-items: center;
}

.tw-source-badge[b-6agnnslder] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 600;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tw-card-foot[b-6agnnslder] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid var(--panel-border, #f1f5f9);
    font-size: 11.5px;
    color: var(--panel-text-muted, #64748b);
}

.tw-assignee-tag[b-6agnnslder] {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tw-assignee-avatar[b-6agnnslder] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--panel-subtle-bg, #e0e7ff);
    color: var(--nav-active-bg, #4338ca);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
}

.tw-checklist-tag[b-6agnnslder] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    font-weight: 700;
    color: #475569;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 5px;
}

.tw-due-date[b-6agnnslder] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tw-due-date.overdue[b-6agnnslder] {
    color: #dc2626;
    font-weight: 700;
}

.tw-due-date.due-today[b-6agnnslder] {
    color: #d97706;
    font-weight: 700;
}

/* ── LIST VIEW TABLE ── */
.tw-table-card[b-6agnnslder] {
    background: var(--panel-bg, #ffffff);
    border-radius: 14px;
    border: 1px solid var(--panel-border, #e2e8f0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.tw-table-scroll[b-6agnnslder] {
    flex: 1;
    overflow-y: auto;
}

.tw-table[b-6agnnslder] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    text-align: left;
}

.tw-table th[b-6agnnslder] {
    background: var(--panel-subtle-bg, #f8fafc);
    color: var(--panel-text, #475569);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 12px 14px;
    border-bottom: 1px solid var(--panel-border, #e2e8f0);
    position: sticky;
    top: 0;
    z-index: 2;
}

.tw-table td[b-6agnnslder] {
    padding: 10px 14px;
    border-bottom: 1px solid var(--panel-border, #f1f5f9);
    color: var(--panel-text-strong, #1e293b);
}

.tw-table tr:hover td[b-6agnnslder] {
    background: var(--panel-subtle-bg, #f8fafc);
    cursor: pointer;
}

.tw-table tr.row-selected td[b-6agnnslder] {
    background: #f0f9ff;
}

/* ── DETAIL MODAL & TABS ── */
.tw-modal-overlay[b-6agnnslder] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.tw-modal-card[b-6agnnslder] {
    background: var(--panel-bg, #ffffff);
    border-radius: 18px;
    width: 100%;
    max-width: 600px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    border: 1px solid var(--panel-border, #e2e8f0);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: twFadeIn-b-6agnnslder 0.2s ease-out;
    color: var(--panel-text, #1e293b);
}

.tw-modal-card.tw-detail-modal[b-6agnnslder] {
    max-width: 680px;
    height: 600px;
}

.tw-modal-card.tw-modal-lg[b-6agnnslder] {
    max-width: 680px;
}

@keyframes twFadeIn-b-6agnnslder {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.tw-modal-head[b-6agnnslder] {
    padding: 14px 20px;
    border-bottom: 1px solid var(--panel-border, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--panel-subtle-bg, #fafafa);
}

.tw-modal-tabs[b-6agnnslder] {
    display: flex;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 14px;
    gap: 4px;
}

.tw-modal-tab[b-6agnnslder] {
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
}

.tw-modal-tab:hover[b-6agnnslder] {
    color: #0f172a;
}

.tw-modal-tab.active[b-6agnnslder] {
    color: #0284c7;
    border-bottom-color: #0284c7;
    background: #ffffff;
    font-weight: 700;
}

.tw-tab-count[b-6agnnslder] {
    background: #e0f2fe;
    color: #0369a1;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 6px;
}

.tw-modal-body[b-6agnnslder] {
    padding: 18px 20px;
    overflow-y: auto;
    flex: 1;
}

.tw-modal-foot[b-6agnnslder] {
    padding: 12px 20px;
    border-top: 1px solid var(--panel-border, #f1f5f9);
    background: var(--panel-subtle-bg, #f8fafc);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── COMMENTS / DISCUSSION ── */
.tw-comment-item[b-6agnnslder] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tw-comment-item.mine[b-6agnnslder] {
    background: #eff6ff;
    border-color: #bfdbfe;
    margin-left: 20px;
}

.tw-comment-header[b-6agnnslder] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
}

.tw-comment-user[b-6agnnslder] {
    font-weight: 700;
    color: #1e293b;
}

.tw-comment-time[b-6agnnslder] {
    color: #94a3b8;
}

.tw-comment-body[b-6agnnslder] {
    font-size: 12.5px;
    color: #334155;
    line-height: 1.45;
    white-space: pre-wrap;
}

/* ── ATTACHMENTS ── */
.tw-attachment-card[b-6agnnslder] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.15s;
}

.tw-attachment-card:hover[b-6agnnslder] {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.tw-att-icon[b-6agnnslder] {
    font-size: 20px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.tw-att-info[b-6agnnslder] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.tw-att-name[b-6agnnslder] {
    font-weight: 600;
    font-size: 12.5px;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tw-att-meta[b-6agnnslder] {
    font-size: 11px;
    color: #64748b;
}

.tw-att-actions[b-6agnnslder] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
}

.tw-att-btn[b-6agnnslder] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.tw-att-btn.download[b-6agnnslder] { background: #e0f2fe; color: #0284c7; }
.tw-att-btn.download:hover[b-6agnnslder] { background: #0284c7; color: #ffffff; }

.tw-att-btn.delete[b-6agnnslder] { background: #fee2e2; color: #dc2626; }
.tw-att-btn.delete:hover[b-6agnnslder] { background: #dc2626; color: #ffffff; }

/* ── ACTIVITY TIMELINE ── */
.tw-act-dot-wrapper[b-6agnnslder] {
    margin-top: 4px;
}

.tw-act-dot[b-6agnnslder] {
    font-size: 6px;
    color: #0284c7;
}

/* ── BUTTON OUTLINE ── */
.tw-btn-outline[b-6agnnslder] {
    padding: 7px 14px;
    background: transparent;
    color: #0284c7;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.tw-btn-outline:hover[b-6agnnslder] {
    background: #f0f9ff;
    border-color: #0284c7;
}

/* ── PROGRESS TRACK & FILL ── */
.tw-progress-track[b-6agnnslder] {
    width: 100%;
    height: 5px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.tw-progress-fill[b-6agnnslder] {
    height: 100%;
    background: linear-gradient(90deg, #0284c7, #10b981);
    border-radius: 999px;
    transition: width 0.3s ease;
}

/* ── SLA BADGES ── */
.tw-sla-overdue[b-6agnnslder] {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 6px;
    background: #fee2e2;
    color: #dc2626;
    font-weight: 700;
    font-size: 10.5px;
}

.tw-sla-today[b-6agnnslder] {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 6px;
    background: #fef3c7;
    color: #b45309;
    font-weight: 700;
    font-size: 10.5px;
}

.tw-sla-soon[b-6agnnslder] {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 6px;
    background: #e0f2fe;
    color: #0369a1;
    font-weight: 600;
    font-size: 10.5px;
}

.tw-sla-normal[b-6agnnslder] {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #475569;
    font-weight: 500;
    font-size: 10.5px;
}

.tw-sla-done[b-6agnnslder] {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 6px;
    background: #d1fae5;
    color: #047857;
    font-weight: 600;
    font-size: 10.5px;
}

.tw-sla-none[b-6agnnslder], .tw-sla-cancelled[b-6agnnslder] {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 6px;
    background: #f8fafc;
    color: #94a3b8;
    font-size: 10.5px;
}

/* ── CALENDAR VIEW ── */
.tw-calendar-card[b-6agnnslder] {
    background: var(--panel-bg, #ffffff);
    border: 1px solid var(--panel-border, #e2e8f0);
    border-radius: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.tw-cal-header[b-6agnnslder] {
    padding: 12px 18px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fafbfc;
    flex-shrink: 0;
}

.tw-cal-nav[b-6agnnslder] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tw-cal-btn[b-6agnnslder] {
    padding: 5px 10px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    color: #475569;
    transition: all 0.15s ease;
}

.tw-cal-btn:hover[b-6agnnslder] {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.tw-cal-btn.today[b-6agnnslder] {
    font-weight: 600;
    color: #0284c7;
}

.tw-cal-title[b-6agnnslder] {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin-left: 8px;
}

.tw-cal-meta[b-6agnnslder] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tw-cal-count-tag[b-6agnnslder] {
    font-size: 12px;
    font-weight: 600;
    color: #0284c7;
    background: #e0f2fe;
    padding: 3px 10px;
    border-radius: 8px;
}

.tw-cal-grid-head[b-6agnnslder] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
    padding: 8px 0;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.tw-cal-grid[b-6agnnslder] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(6, 1fr);
    flex: 1;
    background: #e2e8f0;
    gap: 1px;
    overflow-y: auto;
}

.tw-cal-cell[b-6agnnslder] {
    background: #ffffff;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    min-height: 85px;
    transition: background 0.15s ease;
    overflow: hidden;
}

.tw-cal-cell:hover[b-6agnnslder] {
    background: #fafbfc;
}

.tw-cal-cell.other-month[b-6agnnslder] {
    background: #f8fafc;
    opacity: 0.55;
}

.tw-cal-cell.today-cell[b-6agnnslder] {
    background: #f0f9ff;
}

.tw-cal-cell-top[b-6agnnslder] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.tw-cal-day-num[b-6agnnslder] {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.tw-cal-day-num.today-badge[b-6agnnslder] {
    background: #0284c7;
    color: #ffffff;
}

.tw-cal-add-btn[b-6agnnslder] {
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 10px;
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    opacity: 0;
    transition: all 0.15s ease;
}

.tw-cal-cell:hover .tw-cal-add-btn[b-6agnnslder] {
    opacity: 1;
}

.tw-cal-add-btn:hover[b-6agnnslder] {
    background: #e0f2fe;
    color: #0284c7;
}

.tw-cal-task-list[b-6agnnslder] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
    flex: 1;
}

.tw-cal-task-chip[b-6agnnslder] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    border-radius: 5px;
    font-size: 11px;
    background: #f1f5f9;
    border-left: 3px solid #64748b;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.15s ease;
}

.tw-cal-task-chip:hover[b-6agnnslder] {
    filter: brightness(0.95);
    transform: translateX(1px);
}

.tw-cal-task-chip.tw-priority-urgent[b-6agnnslder] {
    border-left-color: #ef4444;
    background: #fee2e2;
    color: #991b1b;
}

.tw-cal-task-chip.tw-priority-high[b-6agnnslder] {
    border-left-color: #f97316;
    background: #ffedd5;
    color: #9a3412;
}

.tw-cal-task-chip.tw-priority-normal[b-6agnnslder] {
    border-left-color: #0284c7;
    background: #e0f2fe;
    color: #075985;
}

.tw-cal-task-chip.tw-priority-low[b-6agnnslder] {
    border-left-color: #64748b;
    background: #f1f5f9;
    color: #334155;
}

.tw-cal-task-chip.completed[b-6agnnslder] {
    border-left-color: #10b981;
    background: #d1fae5;
    color: #065f46;
    text-decoration: line-through;
    opacity: 0.8;
}

.tw-cal-chip-status[b-6agnnslder] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #0284c7;
    flex-shrink: 0;
}

.tw-cal-chip-text[b-6agnnslder] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.tw-cal-chip-chk[b-6agnnslder] {
    font-size: 9.5px;
    color: #64748b;
    font-weight: 600;
}

.tw-cal-more-chip[b-6agnnslder] {
    font-size: 10px;
    font-weight: 600;
    color: #0284c7;
    padding: 1px 4px;
    cursor: pointer;
    text-align: right;
}

.tw-cal-more-chip:hover[b-6agnnslder] {
    text-decoration: underline;
}

/* ── SOP TEMPLATES MANAGER ── */
.tw-tpl-card[b-6agnnslder] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    transition: all 0.15s ease;
}

.tw-tpl-card:hover[b-6agnnslder] {
    border-color: #0284c7;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

/* ── REFERENCE COMBOBOX / AUTOCOMPLETE ── */
.tw-ref-combobox-wrapper[b-6agnnslder] {
    position: relative;
}

.tw-ref-dropdown-list[b-6agnnslder] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    padding: 4px;
}

.tw-ref-item[b-6agnnslder] {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.12s ease;
    border-bottom: 1px solid #f1f5f9;
}

.tw-ref-item:last-child[b-6agnnslder] {
    border-bottom: none;
}

.tw-ref-item:hover[b-6agnnslder] {
    background: #f0f9ff;
}

.tw-ref-item.selected[b-6agnnslder] {
    background: #e0f2fe;
    border-left: 3px solid #0284c7;
}



/* /Components/Pages/Yearly/Accounting/VoucherEntryPage.razor.rz.scp.css */
/* ─── VoucherEntryPage ───────────────────────────────────────────────────── */

/* Tighter cell padding for the charges grid */
[b-y7tpx1o7cv] .mud-table-dense * .mud-table-row .mud-table-cell {
    padding: 6px 2px 6px 1px;
    padding-inline-start: 2px;
    padding-inline-end: 2px;
}


/* Two-panel top section: VOUCHER (5fr) + BILL TO (7fr) */
.voucher-top[b-y7tpx1o7cv] {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 8px;
    align-items: start;
}

@media (max-width: 767px) {
    .voucher-top[b-y7tpx1o7cv] {
        grid-template-columns: 1fr;
    }
}

/* Panels */
.ec-panel[b-y7tpx1o7cv] {
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--panel-bg);
}

.ec-panel-hdr[b-y7tpx1o7cv] {
    background: var(--panel-hdr-bg);
    border-bottom: 1px solid var(--panel-border);
    padding: 5px 12px;
    font-size: 10px;
    font-weight: 700;
    color: var(--panel-hdr-text);
    letter-spacing: .06em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
}

.ec-panel-body[b-y7tpx1o7cv] {
    padding: 10px 12px 6px;
}

/* Shipment Details panel — compact body + 3-column grid */
.ship-panel .ec-panel-body[b-y7tpx1o7cv] {
    padding: 6px 10px 4px;
}

.ship-panel[b-y7tpx1o7cv]  .mud-grid-item {
    padding-top: 0 !important;
}

.ship-panel[b-y7tpx1o7cv]  .mt-2 {
    margin-top: 4px !important;
}

.shipment-grid[b-y7tpx1o7cv] {
    display: grid;
    grid-template-columns: 5fr 3fr 5fr 3fr;
    gap: 8px;
    align-items: start;
}

@media (max-width: 1280px) {
    .shipment-grid[b-y7tpx1o7cv] { grid-template-columns: 5fr 7fr; }
}

@media (max-width: 767px) {
    .shipment-grid[b-y7tpx1o7cv] { grid-template-columns: 1fr; }
}

/* Hide dropdown arrow on compact select columns (Ch On, GST%) */
.no-sel-icon[b-y7tpx1o7cv]  .mud-input-adornment-end { display: none !important; }

.ship-col-hdr[b-y7tpx1o7cv] {
    font-size: 10px;
    font-weight: 700;
    color: var(--panel-hdr-text);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 4px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--panel-border);
}

/* Party dialog — remove MudBlazor grid spacing top padding */
.party-dlg[b-y7tpx1o7cv]  .mud-grid-item {
    padding-top: 0 !important;
}

/* Slim action button inside panel header */
.ec-panel-hdr-btn[b-y7tpx1o7cv] {
    font-size: 0.72rem;
    padding: 0 6px;
    height: 20px;
    min-height: 20px;
    line-height: 20px;
    opacity: 0.8;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

/* Job ref code shown inside panel header */
.ec-panel-hdr-meta[b-y7tpx1o7cv] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.9;
}

/* ── Bottom tab panel ─────────────────────────────────────────────────────── */
.btm-tabs-panel[b-y7tpx1o7cv] {
    overflow: hidden;
}

.btm-tabs-bar[b-y7tpx1o7cv] {
    display: flex;
    gap: 0;
    background: var(--panel-tab-strip-bg);
    border-bottom: 1px solid var(--panel-border);
    overflow-x: auto;
    scrollbar-width: none;
}

.btm-tabs-bar[b-y7tpx1o7cv]::-webkit-scrollbar { display: none; }

.btm-tab[b-y7tpx1o7cv] {
    padding: 7px 14px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--panel-tab-text);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}

.btm-tab:hover[b-y7tpx1o7cv] {
    color: var(--panel-text-strong);
    background: var(--panel-subtle-bg);
}

.btm-tab.active[b-y7tpx1o7cv] {
    color: var(--panel-tab-active-color);
    border-bottom-color: var(--panel-tab-active-color);
    background: var(--panel-tab-active-bg, var(--panel-bg));
}

.btm-tab-body[b-y7tpx1o7cv] {
    padding: 12px 14px 10px;
    min-height: 90px;
}

/* ── Status strip (outside fieldset, View mode) ───────────────────────────── */
.ec-status-strip[b-y7tpx1o7cv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 7px 4px;
    margin-top: 6px;
    max-width: 1100px;
}

.einv-qr-img[b-y7tpx1o7cv] {
    display: block;
    max-width: 140px;
    height: auto;
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    padding: 4px;
    background: var(--panel-bg);
}

/* LC / FC toggle in CHARGES panel header */
.lc-fc-toggle[b-y7tpx1o7cv] {
    display: flex;
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    overflow: hidden;
}
.lc-fc-btn[b-y7tpx1o7cv] {
    padding: 2px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    background: none;
    border: none;
    color: var(--panel-text-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.lc-fc-btn + .lc-fc-btn[b-y7tpx1o7cv] { border-left: 1px solid var(--panel-border); }
.lc-fc-btn.active[b-y7tpx1o7cv] { background: var(--panel-tab-active-color); color: #fff; }
.lc-fc-btn:disabled[b-y7tpx1o7cv] { opacity: 0.45; cursor: default; }

/* E-Invoice section */
.einv-section[b-y7tpx1o7cv] { max-width: 640px; }
.einv-irn[b-y7tpx1o7cv] {
    display: block;
    font-size: 0.78rem;
    word-break: break-all;
    color: var(--panel-tab-active-color);
    margin-bottom: 10px;
}

/* Audit display */
.audit-grid[b-y7tpx1o7cv] { display: grid; gap: 4px; max-width: 560px; }
.audit-row[b-y7tpx1o7cv]  { display: flex; gap: 12px; align-items: baseline; font-size: 0.82rem; }
.audit-lbl[b-y7tpx1o7cv]  { width: 110px; flex-shrink: 0; color: var(--panel-text-muted); font-weight: 600; }
.audit-val[b-y7tpx1o7cv]  { color: var(--panel-text-strong); }
/* /Components/Pages/Yearly/Air/AwbLabels.razor.rz.scp.css */
/* ── Page wrapper ────────────────────────────────────────────────────────── */
.awbl-page[b-nckbemptzo] {
    max-width: 1000px;
    padding: 0 4px 32px;
}

/* ── 2-column grid ───────────────────────────────────────────────────────── */
.awbl-grid[b-nckbemptzo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

/* ── Panel (card-like sections) ──────────────────────────────────────────── */
.awbl-panel[b-nckbemptzo] {
    border: 1px solid var(--mud-palette-divider, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
    background: var(--mud-palette-surface, #ffffff);
}

.awbl-panel-hdr[b-nckbemptzo] {
    padding: 6px 14px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary, #64748b);
    background: var(--mud-palette-background-grey, #f8fafc);
    border-bottom: 1px solid var(--mud-palette-divider, #e2e8f0);
}

.awbl-panel-body[b-nckbemptzo] {
    padding: 14px 14px 10px;
}

/* ── AWB No. row — input + Auto Fill button side by side ─────────────────── */
.awbl-awbno-row[b-nckbemptzo] {
    display: flex;
    gap: 6px;
    align-items: flex-end;
}

.awbl-awbno-input[b-nckbemptzo] { flex: 1; }

.awbl-awbno-btn[b-nckbemptzo] {
    margin-bottom: 4px;
    flex-shrink: 0;
}

/* ── Print options rows ──────────────────────────────────────────────────── */
.awbl-opt-row[b-nckbemptzo] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    flex-wrap: wrap;
}

.awbl-opt-row + .awbl-opt-row[b-nckbemptzo] {
    border-top: 1px solid var(--mud-palette-divider, #f1f5f9);
}

.awbl-opt-lbl[b-nckbemptzo] {
    font-size: 12px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary, #64748b);
    width: 80px;
    flex-shrink: 0;
}

.awbl-opt-hint[b-nckbemptzo] {
    font-size: 11px;
    color: var(--mud-palette-text-secondary, #94a3b8);
    font-style: italic;
}

/* ── Toggle items — ensure single-char labels (1, 2) aren't too thin ────── */
[b-nckbemptzo] .mud-toggle-item {
    min-width: 44px;
    padding-left: 14px !important;
    padding-right: 14px !important;
}

/* ── Action / print column ───────────────────────────────────────────────── */
.awbl-action-col[b-nckbemptzo] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
}

/* ── Hint messages ───────────────────────────────────────────────────────── */
.awbl-hint[b-nckbemptzo] {
    font-size: 11px;
    color: #f59e0b;
    margin-top: 4px;
}

.awbl-error[b-nckbemptzo] {
    font-size: 12px;
    color: var(--mud-palette-error, #ef4444);
    padding: 6px 10px;
    background: #fef2f2;
    border-radius: 6px;
    border: 1px solid #fecaca;
}
/* /Components/Pages/Yearly/Customs/ShippingBill.razor.rz.scp.css */
/* Component-scoped tightening for the Shipping Bill wizard.
   Overrides the global app.css spacing for this component only —
   does NOT affect ShippingBillFilingConsole, which shares the same classes. */

/* ── Collapsible KPI strip toggle ───────────────────────────────── */
.kpi-toggle[b-vrnc7jkytk] {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--panel-border, #e2e8f0);
    border-radius: 6px;
    background: var(--panel-subtle-bg, #f8fafc);
    color: var(--panel-text, #475569);
    cursor: pointer;
    text-align: left;
    font-size: 11px;
    line-height: 1.2;
    transition: background 0.15s ease;
}

.kpi-toggle:hover[b-vrnc7jkytk] {
    background: var(--panel-hdr-bg, #f1f5f9);
}

.kpi-toggle-lbl[b-vrnc7jkytk] {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kpi-toggle-hint[b-vrnc7jkytk] {
    margin-left: auto;
    font-weight: 600;
    color: var(--panel-text-secondary, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Thinner KPI bar when expanded ──────────────────────────────── */
.ec-kpi-bar[b-vrnc7jkytk] {
    padding: 4px 10px;
    gap: 6px;
}

.ec-kpi-item[b-vrnc7jkytk] {
    padding: 2px 8px;
}

/* ── Lower, denser stepper ──────────────────────────────────────── */
.ec-wizard-stepper[b-vrnc7jkytk] {
    padding: 4px;
}

.ec-step-btn[b-vrnc7jkytk] {
    padding: 5px 9px;
}

/* ── Tighter form shell + nested section panels ─────────────────── */
.ec-panel-body[b-vrnc7jkytk] {
    padding: 10px;
}

.ec-panel-body .ec-panel[b-vrnc7jkytk] {
    border-radius: 5px;
}
/* /Components/Shared/Chat/ChatBottomDockBar.razor.rz.scp.css */
.cbd-bar[b-838y6015i0] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 38px;
    background: var(--panel-bg, #ffffff);
    border-top: 1px solid var(--panel-border, #cbd5e1);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 8px;
    z-index: 1040;
    user-select: none;
}

.cbd-master-btn[b-838y6015i0] {
    height: 28px;
    padding: 0 12px;
    border-radius: 6px;
    border: 1px solid var(--panel-border, #cbd5e1);
    background: var(--panel-subtle-bg, #f1f5f9);
    color: var(--panel-text, #1e293b);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.cbd-master-btn:hover[b-838y6015i0], .cbd-master-active[b-838y6015i0] {
    background: #4f46e5;
    color: #ffffff;
    border-color: #4338ca;
}

.cbd-badge[b-838y6015i0] {
    background: #ef4444;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 10px;
    line-height: 1;
}

.cbd-tabs-scroll[b-838y6015i0] {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    flex: 1;
    height: 100%;
    scrollbar-width: none;
}

.cbd-tabs-scroll[b-838y6015i0]::-webkit-scrollbar {
    display: none;
}

/* Popped-Up Chat Cards Layer (Fixed above bottom bar, on top of everything) */
.cbd-cards-layer[b-838y6015i0] {
    position: fixed;
    bottom: 42px;
    right: 20px;
    display: flex;
    flex-direction: row-reverse;
    gap: 12px;
    align-items: flex-end;
    z-index: 1050;
    pointer-events: none;
    max-width: calc(100vw - 30px);
}

.cbd-card-slot[b-838y6015i0] {
    pointer-events: auto;
    flex-shrink: 0;
}

.cbd-tab-pill[b-838y6015i0] {
    height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid var(--panel-border, #cbd5e1);
    background: var(--panel-bg, #ffffff);
    color: var(--panel-text, #334155);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.cbd-tab-pill:hover[b-838y6015i0] {
    background: var(--panel-subtle-bg, #f8fafc);
    border-color: #94a3b8;
}

.cbd-tab-active[b-838y6015i0] {
    background: #e0e7ff !important;
    border-color: #818cf8 !important;
    color: #3730a3 !important;
    font-weight: 600;
}

.cbd-tab-pinned[b-838y6015i0] {
    border-left: 3px solid #4f46e5 !important;
}

.cbd-tab-presence[b-838y6015i0] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.cbd-dot-green[b-838y6015i0] { background: #10b981; }
.cbd-dot-amber[b-838y6015i0] { background: #f59e0b; }
.cbd-dot-gray[b-838y6015i0] { background: #94a3b8; }

.cbd-tab-icon[b-838y6015i0] {
    font-size: 11px;
    color: #0ea5e9;
}

.cbd-tab-title[b-838y6015i0] {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cbd-tab-pin-icon[b-838y6015i0] {
    font-size: 9.5px;
    color: #4f46e5;
}

.cbd-tab-unread[b-838y6015i0] {
    background: #ef4444;
    color: #ffffff;
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 8px;
    line-height: 1;
}

.cbd-tab-close[b-838y6015i0] {
    font-size: 11px;
    color: var(--panel-text-muted, #94a3b8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    margin-left: 2px;
    transition: color 0.12s, background 0.12s;
}

.cbd-tab-close:hover[b-838y6015i0] {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}

/* Drawer Popup */
.cbd-drawer-popup[b-838y6015i0] {
    position: fixed;
    bottom: 44px;
    left: 12px;
    width: 320px;
    max-height: 460px;
    background: var(--panel-bg, #ffffff);
    color: var(--panel-text, #1e293b);
    border: 1px solid var(--panel-border, #cbd5e1);
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.18), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1050;
    animation: cbdDrawerPop-b-838y6015i0 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cbdDrawerPop-b-838y6015i0 {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cbd-drawer-head[b-838y6015i0] {
    height: 42px;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    flex-shrink: 0;
}

.cbd-drawer-title[b-838y6015i0] {
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cbd-drawer-actions[b-838y6015i0] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cbd-drawer-btn[b-838y6015i0] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s;
}

.cbd-drawer-btn:hover[b-838y6015i0] {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.cbd-drawer-search[b-838y6015i0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--panel-subtle-bg, #f8fafc);
    border-bottom: 1px solid var(--panel-border, #e2e8f0);
}

.cbd-drawer-search i[b-838y6015i0] {
    font-size: 12px;
    color: var(--panel-text-muted, #94a3b8);
}

.cbd-drawer-search input[b-838y6015i0] {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 12.5px;
    color: var(--panel-text, #0f172a);
}

.cbd-new-btn-wrap[b-838y6015i0] {
    padding: 6px 10px;
    border-bottom: 1px solid var(--panel-border, #e2e8f0);
}

.cbd-new-chat-btn[b-838y6015i0] {
    width: 100%;
    padding: 6px;
    border-radius: 6px;
    border: 1px dashed #818cf8;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.12s;
}

.cbd-new-chat-btn:hover[b-838y6015i0] {
    background: #e0e7ff;
}

.cbd-drawer-list[b-838y6015i0] {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.cbd-drawer-row[b-838y6015i0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.12s;
}

.cbd-drawer-row:hover[b-838y6015i0] {
    background: var(--panel-subtle-bg, #f1f5f9);
}

.cbd-row-open[b-838y6015i0] {
    background: rgba(99, 102, 241, 0.08);
}

.cbd-row-avatar[b-838y6015i0] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #4f46e5;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    position: relative;
    flex-shrink: 0;
}

.cbd-avatar-grp[b-838y6015i0] {
    background: #0ea5e9;
}

.cbd-presence-dot[b-838y6015i0] {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid var(--panel-bg, #ffffff);
}

.cbd-row-info[b-838y6015i0] {
    flex: 1;
    min-width: 0;
}

.cbd-row-top[b-838y6015i0] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.cbd-row-name[b-838y6015i0] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--panel-text, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cbd-row-time[b-838y6015i0] {
    font-size: 10px;
    color: var(--panel-text-muted, #94a3b8);
}

.cbd-row-sub-line[b-838y6015i0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1px;
}

.cbd-row-preview[b-838y6015i0] {
    font-size: 11px;
    color: var(--panel-text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 190px;
}

.cbd-row-badge[b-838y6015i0] {
    background: #ef4444;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 10px;
    line-height: 1;
}

.cbd-row-sub[b-838y6015i0] {
    font-size: 10.5px;
    color: var(--panel-text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cbd-empty[b-838y6015i0] {
    padding: 24px;
    text-align: center;
    color: var(--panel-text-muted, #94a3b8);
    font-size: 12px;
}

/* /Components/Shared/Chat/ChatDockCard.razor.rz.scp.css */
.cdc-card[b-y8jd70tihd] {
    width: 350px;
    height: 450px;
    background: var(--panel-bg, #ffffff);
    color: var(--panel-text, #1e293b);
    border: 1px solid var(--panel-border, #cbd5e1);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -8px 24px -4px rgba(0, 0, 0, 0.15), 0 -4px 8px -2px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 1045;
    animation: cdcCardPop-b-y8jd70tihd 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cdcCardPop-b-y8jd70tihd {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cdc-header[b-y8jd70tihd] {
    height: 44px;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    flex-shrink: 0;
    user-select: none;
}

.cdc-header-info[b-y8jd70tihd] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.cdc-avatar[b-y8jd70tihd] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.cdc-avatar-user[b-y8jd70tihd] {
    background: #4f46e5;
    color: #ffffff;
}

.cdc-avatar-group[b-y8jd70tihd] {
    background: #0ea5e9;
    color: #ffffff;
}

.cdc-avatar-context[b-y8jd70tihd] {
    background: #f59e0b;
    color: #ffffff;
}

.cdc-titles[b-y8jd70tihd] {
    overflow: hidden;
    min-width: 0;
}

.cdc-name[b-y8jd70tihd] {
    font-size: 12.5px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.cdc-status[b-y8jd70tihd] {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.1;
    display: flex;
    align-items: center;
}

.cdc-presence-live[b-y8jd70tihd] {
    color: #34d399;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cdc-presence-away[b-y8jd70tihd] {
    color: #fbbf24;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cdc-presence-offline[b-y8jd70tihd] {
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    gap: 4px;
}

.cdc-dot[b-y8jd70tihd] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.cdc-dot-green[b-y8jd70tihd] { background: #34d399; }
.cdc-dot-amber[b-y8jd70tihd] { background: #fbbf24; }
.cdc-dot-gray[b-y8jd70tihd] { background: #94a3b8; }

.cdc-header-actions[b-y8jd70tihd] {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.cdc-hdr-btn[b-y8jd70tihd] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.cdc-hdr-btn:hover[b-y8jd70tihd] {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.cdc-btn-pinned[b-y8jd70tihd] {
    background: rgba(99, 102, 241, 0.5) !important;
    color: #ffffff !important;
}

.cdc-close-btn:hover[b-y8jd70tihd] {
    background: rgba(239, 68, 68, 0.8) !important;
    color: #ffffff !important;
}

.cdc-body[b-y8jd70tihd] {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--panel-subtle-bg, #f8fafc);
}

.cdc-stream-empty[b-y8jd70tihd] {
    margin: auto;
    text-align: center;
    color: var(--panel-text-muted, #94a3b8);
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.cdc-stream-empty i[b-y8jd70tihd] {
    font-size: 22px;
    opacity: 0.5;
}

.cdc-msg-row[b-y8jd70tihd] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.cdc-msg-self[b-y8jd70tihd] {
    align-items: flex-end;
}

.cdc-msg-other[b-y8jd70tihd] {
    align-items: flex-start;
}

.cdc-msg-sender[b-y8jd70tihd] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--panel-text-muted, #64748b);
    margin-bottom: 2px;
    padding-left: 4px;
}

.cdc-msg-body-wrap[b-y8jd70tihd] {
    position: relative;
    max-width: 86%;
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.cdc-msg-self .cdc-msg-body-wrap[b-y8jd70tihd] {
    flex-direction: row-reverse;
}

.cdc-bubble[b-y8jd70tihd] {
    padding: 7px 10px;
    border-radius: 12px;
    font-size: 12.5px;
    line-height: 1.35;
    position: relative;
    word-break: break-word;
}

.cdc-bubble-self[b-y8jd70tihd] {
    background: #4f46e5;
    color: #ffffff;
    border-bottom-right-radius: 2px;
}

.cdc-bubble-other[b-y8jd70tihd] {
    background: var(--panel-bg, #ffffff);
    color: var(--panel-text, #1e293b);
    border: 1px solid var(--panel-border, #e2e8f0);
    border-bottom-left-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.cdc-bubble-deleted[b-y8jd70tihd] {
    opacity: 0.75;
    font-style: italic;
}

.cdc-deleted-text[b-y8jd70tihd] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
}

.cdc-content-text[b-y8jd70tihd] {
    white-space: pre-wrap;
}

.cdc-att-list[b-y8jd70tihd] {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cdc-att-chip[b-y8jd70tihd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.07);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    max-width: 100%;
}

.cdc-bubble-self .cdc-att-chip[b-y8jd70tihd] {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.cdc-att-name[b-y8jd70tihd] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

.cdc-att-dl[b-y8jd70tihd] {
    font-size: 9px;
    opacity: 0.7;
}

.cdc-msg-foot[b-y8jd70tihd] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 2px;
}

.cdc-msg-time[b-y8jd70tihd] {
    font-size: 9.5px;
    opacity: 0.75;
}

.cdc-tick[b-y8jd70tihd] {
    font-size: 10px;
    display: inline-flex;
}

.cdc-tick-blue[b-y8jd70tihd] {
    color: #38bdf8;
}

.cdc-tick-grey[b-y8jd70tihd] {
    color: rgba(255, 255, 255, 0.7);
}

.cdc-msg-actions[b-y8jd70tihd] {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.cdc-msg-body-wrap:hover .cdc-msg-actions[b-y8jd70tihd] {
    opacity: 1;
}

.cdc-msg-act-btn[b-y8jd70tihd] {
    border: none;
    background: transparent;
    color: var(--panel-text-muted, #94a3b8);
    cursor: pointer;
    font-size: 11px;
    padding: 2px;
}

.cdc-msg-act-btn:hover[b-y8jd70tihd] {
    color: #ef4444;
}

.cdc-typing-indicator[b-y8jd70tihd] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--panel-text-muted, #64748b);
    font-style: italic;
    padding: 2px 6px;
}

.cdc-upload-banner[b-y8jd70tihd] {
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
    font-size: 11px;
    padding: 4px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.cdc-pending-files[b-y8jd70tihd] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 5px 10px;
    background: var(--panel-subtle-bg, #f8fafc);
    border-top: 1px solid var(--panel-border, #e2e8f0);
}

.cdc-file-tag[b-y8jd70tihd] {
    font-size: 10.5px;
    background: #e0e7ff;
    color: #3730a3;
    padding: 2px 6px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cdc-file-tag-name[b-y8jd70tihd] {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cdc-file-tag-size[b-y8jd70tihd] {
    font-size: 9px;
    opacity: 0.75;
}

.cdc-file-tag-del[b-y8jd70tihd] {
    border: none;
    background: transparent;
    cursor: pointer;
    color: #6b7280;
    padding: 0 2px;
}

.cdc-file-tag-del:hover[b-y8jd70tihd] {
    color: #ef4444;
}

.cdc-input-bar[b-y8jd70tihd] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--panel-bg, #ffffff);
    border-top: 1px solid var(--panel-border, #e2e8f0);
}

.cdc-icon-btn[b-y8jd70tihd] {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--panel-text-muted, #64748b);
    border-radius: 6px;
    transition: background 0.12s;
}

.cdc-icon-btn:hover[b-y8jd70tihd] {
    background: rgba(0, 0, 0, 0.05);
    color: #4f46e5;
}

.cdc-input[b-y8jd70tihd] {
    flex: 1;
    border: 1px solid var(--panel-border, #cbd5e1);
    background: var(--panel-bg, #ffffff);
    color: var(--panel-text, #0f172a);
    border-radius: 8px;
    padding: 5px 8px;
    font-size: 12.5px;
    outline: none;
    resize: none;
    line-height: 1.3;
    max-height: 70px;
}

.cdc-input:focus[b-y8jd70tihd] {
    border-color: #4f46e5;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}

.cdc-send-btn[b-y8jd70tihd] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: #4f46e5;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    flex-shrink: 0;
}

.cdc-send-btn:hover:not(:disabled)[b-y8jd70tihd] {
    background: #4338ca;
    transform: scale(1.05);
}

.cdc-send-btn:disabled[b-y8jd70tihd] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Delete Modal */
.cdc-modal-overlay[b-y8jd70tihd] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 12px;
}

.cdc-modal-card[b-y8jd70tihd] {
    background: var(--panel-bg, #ffffff);
    border-radius: 10px;
    width: 100%;
    max-width: 280px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.cdc-modal-head[b-y8jd70tihd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--panel-border, #e2e8f0);
}

.cdc-modal-title[b-y8jd70tihd] {
    font-size: 12.5px;
    font-weight: 700;
    color: #dc2626;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cdc-modal-close[b-y8jd70tihd] {
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    font-size: 12px;
}

.cdc-modal-body[b-y8jd70tihd] {
    padding: 10px 12px;
}

.cdc-delete-opt-card[b-y8jd70tihd] {
    border: 1px solid var(--panel-border, #e2e8f0);
    border-radius: 6px;
    padding: 6px 8px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.12s;
}

.cdc-delete-opt-card:hover[b-y8jd70tihd] {
    background: var(--panel-subtle-bg, #f1f5f9);
}

.cdc-delete-opt-danger:hover[b-y8jd70tihd] {
    background: #fef2f2;
    border-color: #fecaca;
}

.cdc-del-opt-title[b-y8jd70tihd] {
    font-weight: 700;
    font-size: 11.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cdc-del-opt-danger-text[b-y8jd70tihd] {
    color: #dc2626;
}

.cdc-del-opt-sub[b-y8jd70tihd] {
    font-size: 10.5px;
    color: var(--panel-text-muted, #64748b);
    margin-top: 1px;
}

.cdc-del-time-note[b-y8jd70tihd] {
    font-size: 10px;
    color: #94a3b8;
    font-style: italic;
    margin-top: 4px;
}

.cdc-modal-foot[b-y8jd70tihd] {
    display: flex;
    justify-content: flex-end;
    padding: 6px 12px;
    background: var(--panel-subtle-bg, #f8fafc);
    border-top: 1px solid var(--panel-border, #e2e8f0);
}

.cdc-modal-btn[b-y8jd70tihd] {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 5px;
    border: 1px solid var(--panel-border, #cbd5e1);
    background: var(--panel-bg, #ffffff);
    color: var(--panel-text, #334155);
    cursor: pointer;
}

/* /Components/Shared/Chat/ChatFloatingWidget.razor.rz.scp.css */
/* ── Modern Floating Quick-Chat Widget ── */

.cfw-dock[b-3mljpmfdve] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-family: inherit;
}

.cfw-card[b-3mljpmfdve] {
    width: 380px;
    height: 530px;
    background: var(--panel-bg, #ffffff);
    border-radius: 18px;
    border: 1px solid var(--panel-border, #e2e8f0);
    box-shadow: 0 20px 40px -8px rgba(0,0,0,0.25), 0 0 1px 1px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 14px;
    animation: cfwPop-b-3mljpmfdve 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    color: var(--panel-text, #1e293b);
}

@keyframes cfwPop-b-3mljpmfdve {
    from { opacity: 0; transform: translateY(14px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.cfw-header[b-3mljpmfdve] {
    padding: 12px 16px;
    background: var(--nav-active-bg, linear-gradient(135deg, #0284c7, #0ea5e9));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    flex-shrink: 0;
}

.cfw-header-title[b-3mljpmfdve] {
    font-size: 13.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.cfw-hdr-name[b-3mljpmfdve] {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    line-height: 1.2;
}

.cfw-hdr-status[b-3mljpmfdve] {
    font-size: 10.5px;
    opacity: 0.85;
    font-weight: 500;
}

.cfw-title-icon[b-3mljpmfdve] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.cfw-mini-avatar[b-3mljpmfdve] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    background: rgba(255,255,255,0.22);
    color: #ffffff;
    flex-shrink: 0;
}

.cfw-header-actions[b-3mljpmfdve] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.cfw-hdr-btn[b-3mljpmfdve] {
    border: none;
    background: rgba(255,255,255,0.18);
    color: #ffffff;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    text-decoration: none;
    transition: background 0.15s, transform 0.1s;
}

.cfw-hdr-btn:hover[b-3mljpmfdve] {
    background: rgba(255,255,255,0.35);
    color: #ffffff;
    transform: translateY(-1px);
}

.cfw-body[b-3mljpmfdve] {
    flex: 1;
    overflow-y: auto;
    background: var(--content-bg, #f8fafc);
    display: flex;
    flex-direction: column;
}

/* ── SEARCH IN MINI WIDGET ── */
.cfw-search-wrap[b-3mljpmfdve] {
    padding: 10px 12px;
    background: var(--panel-bg, #ffffff);
    border-bottom: 1px solid var(--panel-border, #e2e8f0);
}

.cfw-search-box[b-3mljpmfdve] {
    position: relative;
    display: flex;
    align-items: center;
}

.cfw-search-icon[b-3mljpmfdve] {
    position: absolute;
    left: 10px;
    color: var(--panel-text-muted, #94a3b8);
    font-size: 12px;
    pointer-events: none;
}

.cfw-search-input[b-3mljpmfdve] {
    width: 100%;
    padding: 7px 10px 7px 30px;
    font-size: 12.5px;
    border-radius: 8px;
    border: 1px solid var(--panel-border, #e2e8f0);
    background: var(--panel-subtle-bg, #f8fafc);
    color: var(--panel-text-strong, #0f172a);
    outline: none;
    transition: all 0.15s;
}

.cfw-search-input:focus[b-3mljpmfdve] {
    border-color: var(--nav-active-bg, #0284c7);
    background: var(--panel-bg, #ffffff);
    box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
}

/* ── ROOMS LIST ── */
.cfw-rooms-list[b-3mljpmfdve] {
    display: flex;
    flex-direction: column;
}

.cfw-room-row[b-3mljpmfdve] {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--panel-border, #f1f5f9);
    background: var(--panel-bg, #ffffff);
    transition: background 0.15s;
}

.cfw-room-row:hover[b-3mljpmfdve] {
    background: var(--panel-subtle-bg, #f1f5f9);
}

.cfw-avatar-wrap[b-3mljpmfdve] {
    position: relative;
    flex-shrink: 0;
}

.cfw-room-avatar[b-3mljpmfdve] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--panel-subtle-bg, #e0e7ff);
    color: var(--nav-active-bg, #0284c7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    border: 1px solid var(--panel-border, rgba(0,0,0,0.06));
}

.cfw-presence-dot[b-3mljpmfdve] {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid var(--panel-bg, #ffffff);
}

.cfw-presence-active[b-3mljpmfdve] {
    background: #10b981;
}

.cfw-presence-away[b-3mljpmfdve] {
    background: #f59e0b;
}

.cfw-presence-offline[b-3mljpmfdve] {
    background: #94a3b8;
}

.cfw-online-dot[b-3mljpmfdve] {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #10b981;
    border: 2px solid var(--panel-bg, #ffffff);
}

/* ── NEW CHAT VIEW & COLLEAGUE ROWS ── */
.cfw-colleague-row[b-3mljpmfdve] {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--panel-border, #f1f5f9);
    background: var(--panel-bg, #ffffff);
    transition: background 0.15s;
}

.cfw-colleague-row:hover[b-3mljpmfdve] {
    background: var(--panel-subtle-bg, #f1f5f9);
}

.cfw-colleague-info[b-3mljpmfdve] {
    flex: 1;
    min-width: 0;
}

.cfw-colleague-name[b-3mljpmfdve] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--panel-text-strong, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cfw-colleague-role[b-3mljpmfdve] {
    font-size: 10.5px;
    color: var(--panel-text-muted, #94a3b8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cfw-new-chat-btn-bar[b-3mljpmfdve] {
    padding: 8px 12px;
    background: var(--panel-bg, #ffffff);
    border-bottom: 1px solid var(--panel-border, #f1f5f9);
}

.cfw-new-chat-quick-btn[b-3mljpmfdve] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px dashed var(--nav-active-bg, #0284c7);
    background: rgba(2, 132, 199, 0.05);
    color: var(--nav-active-bg, #0284c7);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.cfw-new-chat-quick-btn:hover[b-3mljpmfdve] {
    background: var(--nav-active-bg, #0284c7);
    color: #ffffff;
    border-style: solid;
}

.cfw-room-info[b-3mljpmfdve] {
    flex: 1;
    min-width: 0;
}

.cfw-room-top[b-3mljpmfdve] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.cfw-room-name[b-3mljpmfdve] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--panel-text-strong, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cfw-room-time[b-3mljpmfdve] {
    font-size: 10.5px;
    color: var(--panel-text-muted, #94a3b8);
    flex-shrink: 0;
    margin-left: 6px;
}

.cfw-room-sub[b-3mljpmfdve] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cfw-room-preview[b-3mljpmfdve] {
    font-size: 11px;
    color: var(--panel-text-muted, #94a3b8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cfw-unread-badge[b-3mljpmfdve] {
    background: #ef4444;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    flex-shrink: 0;
    margin-left: 6px;
}

.cfw-empty-state[b-3mljpmfdve] {
    text-align: center;
    padding: 50px 20px;
    color: var(--panel-text-muted, #94a3b8);
    font-size: 12.5px;
}

.cfw-empty-icon[b-3mljpmfdve] {
    font-size: 32px;
    margin-bottom: 8px;
    display: block;
    opacity: 0.5;
}

.cfw-open-link[b-3mljpmfdve] {
    color: var(--nav-active-bg, #0284c7);
    font-weight: 700;
    display: inline-block;
    margin-top: 8px;
    text-decoration: none;
}

/* ── MESSAGE STREAM ── */
.cfw-stream[b-3mljpmfdve] {
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    overflow-y: auto;
}

.cfw-stream-empty[b-3mljpmfdve] {
    text-align: center;
    padding: 40px 16px;
    color: var(--panel-text-muted, #94a3b8);
    font-size: 12px;
}

.cfw-msg-row[b-3mljpmfdve] {
    display: flex;
    flex-direction: column;
    max-width: 86%;
}

.cfw-msg-self[b-3mljpmfdve] {
    align-self: flex-end;
    align-items: flex-end;
}

.cfw-msg-other[b-3mljpmfdve] {
    align-self: flex-start;
    align-items: flex-start;
}

.cfw-msg-sender[b-3mljpmfdve] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--panel-text-muted, #64748b);
    margin-bottom: 3px;
    padding: 0 4px;
}

.cfw-bubble[b-3mljpmfdve] {
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 12.5px;
    line-height: 1.45;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.cfw-bubble-self[b-3mljpmfdve] {
    background: var(--nav-active-bg, #0284c7);
    color: #ffffff;
    border-bottom-right-radius: 4px;
}

.cfw-bubble-other[b-3mljpmfdve] {
    background: var(--panel-bg, #ffffff);
    color: var(--panel-text-strong, #1e293b);
    border: 1px solid var(--panel-border, #e2e8f0);
    border-bottom-left-radius: 4px;
}

.cfw-msg-foot[b-3mljpmfdve] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 4px;
    font-size: 9.5px;
    opacity: 0.85;
}

.cfw-bubble-self .cfw-msg-foot[b-3mljpmfdve] {
    color: rgba(255,255,255,0.85);
}

.cfw-bubble-other .cfw-msg-foot[b-3mljpmfdve] {
    color: var(--panel-text-muted, #94a3b8);
}

/* ── TICKS ── */
.cfw-tick[b-3mljpmfdve] {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
}

.cfw-tick-grey[b-3mljpmfdve] {
    color: rgba(255,255,255,0.7);
}

.cfw-tick-blue[b-3mljpmfdve] {
    color: #38bdf8;
}

/* ── ATTACHMENTS IN MINI ── */
.cfw-att-list[b-3mljpmfdve] {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cfw-att-chip[b-3mljpmfdve] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,0.08);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
}

/* ── TASK CARD IN MINI ── */
.cfw-task-card[b-3mljpmfdve] {
    background: var(--panel-subtle-bg, #f8fafc);
    border: 1px solid var(--panel-border, #e2e8f0);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--panel-text-strong, #1e293b);
}

.cfw-priority-tag[b-3mljpmfdve] {
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
}

.cfw-priority-tag.urgent[b-3mljpmfdve] { background: #fee2e2; color: #dc2626; }
.cfw-priority-tag.high[b-3mljpmfdve] { background: #ffedd5; color: #ea580c; }
.cfw-priority-tag.normal[b-3mljpmfdve] { background: #e0f2fe; color: #0284c7; }
.cfw-priority-tag.low[b-3mljpmfdve] { background: #f1f5f9; color: #64748b; }

.cfw-typing-indicator[b-3mljpmfdve] {
    font-size: 11px;
    color: var(--panel-text-muted, #94a3b8);
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
}

/* ── FOOTER INPUT ── */
.cfw-input-bar[b-3mljpmfdve] {
    padding: 10px 12px;
    background: var(--panel-bg, #ffffff);
    border-top: 1px solid var(--panel-border, #e2e8f0);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.cfw-input[b-3mljpmfdve] {
    flex: 1;
    padding: 8px 12px;
    font-size: 12.5px;
    border-radius: 10px;
    border: 1px solid var(--panel-border, #cbd5e1);
    background: var(--panel-subtle-bg, #f8fafc);
    color: var(--panel-text-strong, #1e293b);
    outline: none;
    resize: none;
    line-height: 1.4;
    transition: all 0.15s;
}

.cfw-input:focus[b-3mljpmfdve] {
    border-color: var(--nav-active-bg, #0284c7);
    background: var(--panel-bg, #ffffff);
    box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
}

.cfw-send-btn[b-3mljpmfdve] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--nav-active-bg, #0284c7);
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.15s;
    flex-shrink: 0;
}

.cfw-send-btn:hover:not(:disabled)[b-3mljpmfdve] {
    transform: translateY(-1px);
    opacity: 0.95;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

.cfw-send-btn:disabled[b-3mljpmfdve] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── FAB BUTTON ── */
.cfw-fab[b-3mljpmfdve] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--nav-active-bg, linear-gradient(135deg, #0284c7, #0ea5e9));
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.4);
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.cfw-fab:hover[b-3mljpmfdve] {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 12px 28px rgba(2, 132, 199, 0.5);
}

.cfw-badge[b-3mljpmfdve] {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: #ef4444;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--panel-bg, #ffffff);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* ── QUICKCHAT DELETED & ACTIONS ── */
.cfw-msg-body-wrap[b-3mljpmfdve] {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

.cfw-msg-self .cfw-msg-body-wrap[b-3mljpmfdve] {
    flex-direction: row-reverse;
}

.cfw-msg-actions[b-3mljpmfdve] {
    opacity: 0;
    transition: opacity 0.15s ease;
    display: flex;
    align-items: center;
}

.cfw-msg-row:hover .cfw-msg-actions[b-3mljpmfdve] {
    opacity: 1;
}

.cfw-msg-act-btn[b-3mljpmfdve] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid var(--panel-border, #e2e8f0);
    background: var(--panel-bg, #ffffff);
    color: var(--panel-text-muted, #94a3b8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 10px;
    transition: all 0.15s ease;
}

.cfw-msg-act-btn:hover[b-3mljpmfdve] {
    color: #ef4444;
    border-color: #fca5a5;
    background: #fef2f2;
}

.cfw-bubble-deleted[b-3mljpmfdve] {
    background: var(--panel-subtle-bg, #f1f5f9) !important;
    color: var(--panel-text-muted, #94a3b8) !important;
    border: 1px dashed var(--panel-border, #cbd5e1) !important;
    box-shadow: none !important;
    font-size: 11.5px !important;
}

/* Mini Delete Modal */
.cfw-modal-overlay[b-3mljpmfdve] {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}

.cfw-modal-card[b-3mljpmfdve] {
    background: var(--panel-bg, #ffffff);
    border-radius: 14px;
    width: 100%;
    max-width: 320px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    border: 1px solid var(--panel-border, #e2e8f0);
    overflow: hidden;
    color: var(--panel-text, #1e293b);
}

.cfw-modal-head[b-3mljpmfdve] {
    padding: 10px 14px;
    border-bottom: 1px solid var(--panel-border, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cfw-modal-close[b-3mljpmfdve] {
    border: none;
    background: transparent;
    color: var(--panel-text-muted, #94a3b8);
    cursor: pointer;
    font-size: 12px;
}

.cfw-modal-body[b-3mljpmfdve] {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cfw-modal-foot[b-3mljpmfdve] {
    padding: 8px 14px;
    border-top: 1px solid var(--panel-border, #f1f5f9);
    background: var(--panel-subtle-bg, #f8fafc);
    display: flex;
    justify-content: flex-end;
}

.cfw-modal-btn[b-3mljpmfdve] {
    padding: 4px 12px;
    border: 1px solid #cbd5e1;
    background: #fff;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.cfw-delete-opt-card[b-3mljpmfdve] {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--panel-border, #e2e8f0);
    background: var(--panel-bg, #ffffff);
    cursor: pointer;
    transition: all 0.15s ease;
}

.cfw-delete-opt-card:hover[b-3mljpmfdve] {
    background: var(--panel-subtle-bg, #f8fafc);
    border-color: #cbd5e1;
}

.cfw-delete-opt-danger[b-3mljpmfdve] {
    border-color: #fee2e2;
    background: #fffafa;
}

.cfw-delete-opt-danger:hover[b-3mljpmfdve] {
    border-color: #fca5a5;
    background: #fef2f2;
}

/* /Components/Shared/Chat/ChatMessageToast.razor.rz.scp.css */
.chat-toast-container[b-3eenbaqzz2] {
    position: fixed;
    bottom: 48px;
    right: 20px;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: 340px;
    width: 100%;
}

.chat-toast-item[b-3eenbaqzz2] {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--panel-bg, #ffffff);
    color: var(--panel-text, #1e293b);
    border: 1px solid var(--panel-border, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    animation: toastSlideIn-b-3eenbaqzz2 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.chat-toast-item:hover[b-3eenbaqzz2] {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.12);
}

.chat-toast-avatar[b-3eenbaqzz2] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.chat-toast-content[b-3eenbaqzz2] {
    flex: 1;
    min-width: 0;
}

.chat-toast-header[b-3eenbaqzz2] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    overflow: hidden;
}

.chat-toast-sender[b-3eenbaqzz2] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--panel-text, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-toast-room[b-3eenbaqzz2] {
    font-size: 10.5px;
    color: var(--panel-text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-toast-msg[b-3eenbaqzz2] {
    font-size: 12px;
    color: var(--panel-text-muted, #475569);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.chat-toast-close[b-3eenbaqzz2] {
    background: transparent;
    border: none;
    color: var(--panel-text-muted, #94a3b8);
    font-size: 13px;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.12s ease;
    flex-shrink: 0;
}

.chat-toast-close:hover[b-3eenbaqzz2] {
    color: #ef4444;
}

.chat-toast-progress[b-3eenbaqzz2] {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #4f46e5, #06b6d4);
    width: 100%;
    animation: toastProgress-b-3eenbaqzz2 5s linear forwards;
}

@keyframes toastSlideIn-b-3eenbaqzz2 {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toastProgress-b-3eenbaqzz2 {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

/* /Components/Shared/Chat/TaskCardInChat.razor.rz.scp.css */
/* ── In-Chat Task Card ── */

.tcard-wrapper[b-0qkgol3as9] {
    background: var(--panel-bg, #ffffff);
    border-radius: 14px;
    border: 1px solid var(--panel-border, #e2e8f0);
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    padding: 12px 14px;
    margin: 4px 0;
    max-width: 380px;
    width: 100%;
    transition: all 0.15s ease;
    color: var(--panel-text, #1e293b);
}

.tcard-wrapper:hover[b-0qkgol3as9] {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: var(--nav-active-bg, #cbd5e1);
}

.tcard-top[b-0qkgol3as9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.tcard-no-badge[b-0qkgol3as9] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--panel-subtle-bg, #eef2ff);
    color: var(--nav-active-bg, #0284c7);
}

.tcard-status-badge[b-0qkgol3as9] {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tcard-status-pending[b-0qkgol3as9] { background: rgba(217, 119, 6, 0.15); color: #d97706; }
.tcard-status-inprogress[b-0qkgol3as9] { background: rgba(2, 132, 199, 0.15); color: #0284c7; }
.tcard-status-inreview[b-0qkgol3as9] { background: rgba(124, 58, 237, 0.15); color: #7e22ce; }
.tcard-status-completed[b-0qkgol3as9] { background: rgba(5, 150, 105, 0.15); color: #059669; }

.tcard-title[b-0qkgol3as9] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--panel-text-strong, #0f172a);
    line-height: 1.35;
    margin-bottom: 4px;
}

.tcard-desc[b-0qkgol3as9] {
    font-size: 12px;
    color: var(--panel-text-muted, #64748b);
    line-height: 1.4;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tcard-meta[b-0qkgol3as9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid var(--panel-border, #f1f5f9);
    font-size: 11.5px;
    color: var(--panel-text-muted, #64748b);
    margin-bottom: 10px;
}

.tcard-actions[b-0qkgol3as9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--panel-border, #f1f5f9);
}

.tcard-btn[b-0qkgol3as9] {
    padding: 5px 12px;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s;
}

.tcard-btn-start[b-0qkgol3as9] {
    background: #e0f2fe;
    color: #0369a1;
}

.tcard-btn-start:hover[b-0qkgol3as9] {
    background: #bae6fd;
}

.tcard-btn-done[b-0qkgol3as9] {
    background: #d1fae5;
    color: #047857;
}

.tcard-btn-done:hover[b-0qkgol3as9] {
    background: #a7f3d0;
}

.tcard-link[b-0qkgol3as9] {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--panel-text-muted, #64748b);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tcard-link:hover[b-0qkgol3as9] {
    color: var(--nav-active-bg, #0284c7);
}

/* /Components/Shared/PrintDialog.razor.rz.scp.css */
.pd-body[b-rtf2r7z8ie] {
    padding: 12px 16px 8px;
    overflow-y: auto;
}

.pd-hint[b-rtf2r7z8ie] {
    font-size: 12px;
    color: var(--mud-palette-text-secondary, #64748b);
    margin-bottom: 12px;
}

/* ── Step 1: Document type cards ── */
.pd-doc-grid[b-rtf2r7z8ie] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.pd-doc-card[b-rtf2r7z8ie] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 12px;
    border: 1.5px solid var(--mud-palette-divider, #e2e8f0);
    border-radius: 8px;
    background: var(--mud-palette-surface, #fff);
    cursor: pointer;
    min-height: 72px;
    transition: border-color .15s, background .15s;
}

.pd-doc-card:hover:not(:disabled)[b-rtf2r7z8ie] {
    border-color: var(--mud-palette-primary, #1976d2);
    background: rgba(25,118,210,.05);
}

.pd-doc-disabled[b-rtf2r7z8ie] {
    opacity: .45;
    cursor: not-allowed;
}

.pd-doc-icon[b-rtf2r7z8ie] {
    font-size: 22px;
}

.pd-doc-name[b-rtf2r7z8ie] {
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary, #1e293b);
}

.pd-doc-tag[b-rtf2r7z8ie] {
    font-size: 10px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary, #64748b);
    background: var(--mud-palette-action-hover, rgba(0,0,0,.06));
    padding: 1px 6px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* ── Step 2: Shortcut preset buttons ── */
.pd-shortcuts[b-rtf2r7z8ie] {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}

.pd-shortcut-btn[b-rtf2r7z8ie] {
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 600;
    border: 1.5px solid var(--mud-palette-primary, #1976d2);
    border-radius: 14px;
    background: transparent;
    color: var(--mud-palette-primary, #1976d2);
    cursor: pointer;
    transition: background .15s, color .15s;
}

.pd-shortcut-btn:hover[b-rtf2r7z8ie] {
    background: rgba(25,118,210,.08);
}

/* ── Separator ── */
.pd-sep[b-rtf2r7z8ie] {
    border-top: 1px solid var(--mud-palette-divider, #e2e8f0);
    margin: 8px 0;
}

/* ── Group headers ── */
.pd-group-hdr[b-rtf2r7z8ie] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 0;
    border-bottom: 1px solid var(--mud-palette-divider, #e2e8f0);
    margin-bottom: 2px;
}

.pd-group-hdr-opt[b-rtf2r7z8ie] {
    margin-top: 8px;
}

.pd-group-lbl[b-rtf2r7z8ie] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--mud-palette-text-secondary, #64748b);
}

/* ── Page rows ── */
.pd-page-row[b-rtf2r7z8ie] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 1px 4px 1px 20px;
}

.pd-page-label[b-rtf2r7z8ie] {
    font-size: 12px;
    flex: 1;
    color: var(--mud-palette-text-primary, #1e293b);
}

/* ── Terms & Conditions row ── */
.pd-tnc-row[b-rtf2r7z8ie] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pd-tnc-lbl[b-rtf2r7z8ie] {
    font-size: 12px;
    flex: 1;
    color: var(--mud-palette-text-primary, #1e293b);
}

.pd-tnc-after[b-rtf2r7z8ie] {
    font-size: 12px;
    color: var(--mud-palette-text-secondary, #64748b);
    white-space: nowrap;
}

/* ── After: Each Page / Last Page toggle ── */
.pd-tgl-wrap[b-rtf2r7z8ie] {
    display: flex;
    border: 1px solid var(--mud-palette-divider, #e2e8f0);
    border-radius: 5px;
    overflow: hidden;
}

.pd-tgl-btn[b-rtf2r7z8ie] {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-secondary, #64748b);
    cursor: pointer;
    transition: background .15s, color .15s;
}

.pd-tgl-btn:not(:last-child)[b-rtf2r7z8ie] {
    border-right: 1px solid var(--mud-palette-divider, #e2e8f0);
}

.pd-tgl-btn:hover:not(:disabled)[b-rtf2r7z8ie] {
    background: rgba(25,118,210,.06);
    color: var(--mud-palette-primary, #1976d2);
}

.pd-tgl-sel[b-rtf2r7z8ie] {
    background: var(--mud-palette-primary, #1976d2) !important;
    color: #fff !important;
}

.pd-tgl-btn:disabled[b-rtf2r7z8ie],
.pd-tgl-wrap:has(.pd-tgl-btn:disabled)[b-rtf2r7z8ie] {
    opacity: .38;
    cursor: not-allowed;
}

/* ── Muted text (disabled state) ── */
.pd-text-muted[b-rtf2r7z8ie] {
    opacity: .38;
}