/* /Components/Pages/Index/Home.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   HOME – Dashboard (Banner → Scrollable body)
   Banner fixed height; body scrolls internally
═══════════════════════════════════════════════════════ */

/* ── SHELL ── */
.db-shell[b-s6y75c8uwn] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #f0f7ff;
}

/* ══════════════════════════════════════════════════════
   BANNER
══════════════════════════════════════════════════════ */
.db-banner[b-s6y75c8uwn] {
    position: relative;
    flex-shrink: 0;
    height: 120px;
    background: linear-gradient(165deg, #0c2d4e 0%, #0b4f7a 35%, #0369a1 65%, #0ea5e9 100%);
    overflow: hidden;
    isolation: isolate;
}
.db-banner[b-s6y75c8uwn]::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(130deg, rgba(255,255,255,0.07) 0%, transparent 50%, rgba(255,255,255,0.03) 100%);
    pointer-events: none;
}

/* Nautical deco */
.bn-lighthouse[b-s6y75c8uwn] {
    position: absolute; right: 20px; bottom: 38px;
    font-size: 2.4rem; color: rgba(255,255,255,0.20);
    animation: lh-pulse-b-s6y75c8uwn 4s ease-in-out infinite; pointer-events: none;
}
@keyframes lh-pulse-b-s6y75c8uwn {
    0%,100% { color: rgba(255,255,255,0.20); text-shadow: none; }
    50%     { color: rgba(255,255,255,0.42); text-shadow: 0 0 22px rgba(253,224,71,0.5); }
}
.bn-helm[b-s6y75c8uwn] {
    position: absolute; right: 100px; bottom: 32px;
    font-size: 2rem; color: rgba(255,255,255,0.15);
    animation: helm-spin-b-s6y75c8uwn 40s linear infinite; pointer-events: none;
}
@keyframes helm-spin-b-s6y75c8uwn { to { transform: rotate(360deg); } }
.bn-sailors[b-s6y75c8uwn] {
    position: absolute; right: 176px; bottom: 36px;
    display: flex; gap: 2px;
    font-size: 1.3rem; color: rgba(255,255,255,0.22); pointer-events: none;
}
.bn-sailors i:nth-child(2)[b-s6y75c8uwn] { margin-top: 4px; font-size: 1.1rem; }
.bn-sailors i:nth-child(3)[b-s6y75c8uwn] { margin-top: -3px; }
.bn-sailors i:nth-child(4)[b-s6y75c8uwn] { margin-top: 6px; font-size: 1rem; }
.bn-ship-wrap[b-s6y75c8uwn] {
    position: absolute; bottom: 40px; right: 310px;
    animation: ship-bob-b-s6y75c8uwn 10s ease-in-out infinite;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25)); pointer-events: none;
}
.bn-ship[b-s6y75c8uwn] { font-size: 2rem; color: rgba(255,255,255,0.82); }
@keyframes ship-bob-b-s6y75c8uwn {
    0%,100% { transform: translateY(0)    rotate(-1deg); }
    40%     { transform: translateY(-5px) rotate(1.2deg); }
    70%     { transform: translateY(-2px) rotate(-0.4deg); }
}

/* Waves */
.bn-waves[b-s6y75c8uwn] { position: absolute; bottom: 0; left: 0; width: 100%; height: 46px; pointer-events: none; }
.bn-wave[b-s6y75c8uwn]  { position: absolute; bottom: 0; left: 0; width: 200%; height: 46px; }
.bw1[b-s6y75c8uwn] { animation: wave-roll-b-s6y75c8uwn  8s linear infinite; }
.bw2[b-s6y75c8uwn] { animation: wave-roll-b-s6y75c8uwn 13s linear infinite reverse; opacity: 0.85; }
.bw3[b-s6y75c8uwn] { animation: wave-roll-b-s6y75c8uwn 19s linear infinite; }
@keyframes wave-roll-b-s6y75c8uwn { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Identity */
.bn-identity[b-s6y75c8uwn] {
    position: absolute; top: 0; bottom: 23px; left: 0;
    display: flex; align-items: center; gap: 16px;
    padding: 0 22px; z-index: 2; pointer-events: none;
    letter-spacing:1px;
}
.bn-avatar-wrap[b-s6y75c8uwn] { position: relative; flex-shrink: 0; }
.bn-avatar[b-s6y75c8uwn] {
    width: 68px; height: 68px; border-radius: 50%;
    object-fit: cover; border: 3px solid rgba(255,255,255,0.9);
    box-shadow: 0 4px 18px rgba(0,0,0,0.35); display: block;
}
.bn-avatar-initials[b-s6y75c8uwn] {
    width: 68px; height: 68px; border-radius: 50%;
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 1.55rem; font-weight: 800; letter-spacing: -1px;
    border: 3px solid rgba(255,255,255,0.9); box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}
.bn-avatar-ring[b-s6y75c8uwn] {
    position: absolute; inset: -5px; border-radius: 50%;
    border: 2px dashed rgba(255,255,255,0.32);
    animation: ring-spin-b-s6y75c8uwn 30s linear infinite;
}
@keyframes ring-spin-b-s6y75c8uwn { to { transform: rotate(360deg); } }
.bn-id-text[b-s6y75c8uwn] { display: flex; flex-direction: column; gap: 2px; }
.bn-appname[b-s6y75c8uwn] {
    font-size: 0.60rem; font-weight: 800; letter-spacing: 2px;
    text-transform: uppercase; color: rgba(186,230,253,0.90);
    display: flex; align-items: center; gap: 5px;
}
.bn-greeting[b-s6y75c8uwn] {
    font-size: 1.25rem; font-weight: 800; color: #fff;
    line-height: 1.2; text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.bn-greeting strong[b-s6y75c8uwn] { color: #fde047; text-shadow: 0 0 14px rgba(253,224,71,0.5); }
.bn-meta[b-s6y75c8uwn] {
    display: flex; align-items: center; flex-wrap: wrap; gap: 3px 8px;
    font-size: 0.68rem; font-weight: 600;
    color: rgba(186,230,253,1); text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.bn-meta span[b-s6y75c8uwn] { display: flex; align-items: center; gap: 4px; }
.bn-sep[b-s6y75c8uwn] { opacity: 0.4; }

/* ══════════════════════════════════════════════════════
   DASHBOARD BODY  –  scrolls vertically
══════════════════════════════════════════════════════ */
.db-body[b-s6y75c8uwn] {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ══════════════════════════════════════════════════════
   ROW 1 – Stat mini-widgets (Task | Crew) side by side
══════════════════════════════════════════════════════ */
.db-stat-widgets[b-s6y75c8uwn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    flex-shrink: 0;
}

.sw-card[b-s6y75c8uwn] {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sw-header[b-s6y75c8uwn] {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: #f8fbff;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.78rem; font-weight: 700; color: #334155;
    flex-shrink: 0;
}
.sw-icon[b-s6y75c8uwn] {
    width: 26px; height: 26px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.80rem; flex-shrink: 0;
}
.swi-rose[b-s6y75c8uwn]  { background: #fff1f2; color: #e11d48; }
.swi-blue[b-s6y75c8uwn]  { background: #dbeafe; color: #2563eb; }
.sw-title[b-s6y75c8uwn]  { font-weight: 700; }

.sw-body[b-s6y75c8uwn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0;
}

.sw-item[b-s6y75c8uwn] {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    border-right: 1px solid #f1f5f9;
    transition: background 0.12s;
}
.sw-item:hover[b-s6y75c8uwn] { background: #f8fbff; }
.sw-item:nth-child(2n)[b-s6y75c8uwn] { border-right: none; }
.sw-item:nth-last-child(-n+2)[b-s6y75c8uwn] { border-bottom: none; }

.sw-ic[b-s6y75c8uwn] {
    width: 30px; height: 30px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.88rem; flex-shrink: 0;
}
.sic-open[b-s6y75c8uwn]  { background: #fff1f2; color: #e11d48; }
.sic-done[b-s6y75c8uwn]  { background: #f0fdf4; color: #16a34a; }
.sic-week[b-s6y75c8uwn]  { background: #ecfeff; color: #0891b2; }
.sic-month[b-s6y75c8uwn] { background: #fefce8; color: #ca8a04; }
.sic-total[b-s6y75c8uwn] { background: #eff6ff; color: #2563eb; }
.sic-new[b-s6y75c8uwn]   { background: #f0fdf4; color: #16a34a; }
.sic-wk[b-s6y75c8uwn]    { background: #fff7ed; color: #ea580c; }
.sic-mo[b-s6y75c8uwn]    { background: #faf5ff; color: #7c3aed; }

.sw-info[b-s6y75c8uwn] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sw-val[b-s6y75c8uwn]  { font-size: 1.3rem; font-weight: 800; line-height: 1; color: #0f172a; }
.sw-lbl[b-s6y75c8uwn]  { font-size: 0.60rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #64748b; }

/* ══════════════════════════════════════════════════════
   SHARED WIDGET CARD
══════════════════════════════════════════════════════ */
.wg-card[b-s6y75c8uwn] {
    background: #fff;
    border: 1px solid #e0f2fe;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 1px 8px rgba(14,165,233,0.07);
    flex-shrink: 0;
}

.wg-header[b-s6y75c8uwn] {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    background: #f8fbff;
    border-bottom: 1px solid #e0f2fe;
    font-size: 0.80rem; font-weight: 700; color: #0369a1;
}
.wg-icon[b-s6y75c8uwn] {
    width: 28px; height: 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.88rem; flex-shrink: 0;
}
.wgi-blue[b-s6y75c8uwn]   { background: #dbeafe; color: #2563eb; }
.wgi-teal[b-s6y75c8uwn]   { background: #d1fae5; color: #059669; }
.wgi-purple[b-s6y75c8uwn] { background: #ede9fe; color: #7c3aed; }
.wgi-indigo[b-s6y75c8uwn] { background: #e0e7ff; color: #4338ca; }
.wgi-amber[b-s6y75c8uwn]  { background: #fef3c7; color: #d97706; }
.wg-title[b-s6y75c8uwn] { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-badge[b-s6y75c8uwn] {
    flex-shrink: 0;
    background: #e0f2fe; color: #0369a1;
    font-size: 0.66rem; font-weight: 700;
    padding: 2px 8px; border-radius: 20px;
}
.wgb-indigo[b-s6y75c8uwn] { background: #e0e7ff; color: #4338ca; }
.wgb-teal[b-s6y75c8uwn]   { background: #d1fae5; color: #059669; }
.wgb-purple[b-s6y75c8uwn] { background: #ede9fe; color: #7c3aed; }
.wgb-amber[b-s6y75c8uwn]  { background: #fef3c7; color: #d97706; }

.wg-body[b-s6y75c8uwn] {
    flex: 1 1 auto;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.wg-empty[b-s6y75c8uwn] {
    color: #94a3b8; font-size: 0.80rem;
    text-align: center; padding: 16px 0;
}

/* ── Scrollable body (for status bar with many items) ── */
.wg-scroll[b-s6y75c8uwn] {
    overflow-y: auto;
    justify-content: flex-start;
    max-height: 220px;
}

/* ══════════════════════════════════════════════════════
   CARD VARIANT – allows tooltip overflow
══════════════════════════════════════════════════════ */
.wg-card-overflow[b-s6y75c8uwn] {
    background: #fff;
    border: 1px solid #e0f2fe;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: visible;
    box-shadow: 0 1px 8px rgba(14,165,233,0.07);
    flex-shrink: 0;
}
.wg-card-overflow .wg-header[b-s6y75c8uwn] {
    border-radius: 14px 14px 0 0;
}
/* Sea Service full-width card */
.wg-ss-full[b-s6y75c8uwn] {
    width: 100%;
}
/* d-none helper */
.__tab_placeholder[b-s6y75c8uwn] { display: none; }
.d-none[b-s6y75c8uwn] { display: none !important; }

/* ── Sea Service chart ── */
.wg-sea-service[b-s6y75c8uwn] { margin-top: 0; }

/* ══════════════════════════════════════════════════════
   ROW 2 – Activity / Sea Service widgets
══════════════════════════════════════════════════════ */
.wg-line-body[b-s6y75c8uwn] {
    padding: 36px 14px 6px;
    height: 150px;
    flex-shrink: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
}
.line-svg[b-s6y75c8uwn] {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* ══════════════════════════════════════════════════════
   ROW 2 – Activity section (2-col row + SS full width)
══════════════════════════════════════════════════════ */
.db-act-section[b-s6y75c8uwn] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}
.db-act-row[b-s6y75c8uwn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* ── SVG dot tooltip (pure CSS, lives inside SVG) ── */
.dot-tip[b-s6y75c8uwn] {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.12s ease;
    pointer-events: none;
}
.dot-group:hover .dot-tip[b-s6y75c8uwn] {
    visibility: visible;
    opacity: 1;
}
.dot-group:hover .dot-vis[b-s6y75c8uwn] {
    r: 4.5;
}

/* ══════════════════════════════════════════════════════
   ROW 3 – 3-column crew charts
══════════════════════════════════════════════════════ */
.db-chart-row[b-s6y75c8uwn] {
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr;
    gap: 10px;
    flex-shrink: 0;
}

/* ── Status bar chart ── */
.bar-row[b-s6y75c8uwn] {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 5px;
}
.bar-row:last-child[b-s6y75c8uwn] { margin-bottom: 0; }
.bar-label[b-s6y75c8uwn] {
    width: 110px; min-width: 70px;
    font-size: 0.69rem; font-weight: 600; color: #1e293b;
    text-align: right; flex-shrink: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bar-track[b-s6y75c8uwn] {
    flex: 1; background: #f1f5f9;
    border-radius: 5px; height: 18px; overflow: hidden;
}
.bar-fill[b-s6y75c8uwn] {
    height: 100%; border-radius: 5px;
    display: flex; align-items: center; padding-left: 7px;
    min-width: 4px;
    transition: width 0.55s cubic-bezier(.4,0,.2,1);
    font-size: 0.64rem; font-weight: 700; color: #fff;
}
.bar-count[b-s6y75c8uwn] {
    width: 26px; text-align: right;
    font-size: 0.73rem; font-weight: 800; flex-shrink: 0;
}

/* ── Growth (column) chart ── */
.wg-growth-body[b-s6y75c8uwn] { padding: 10px 14px 8px; height: 200px; overflow: visible; }
.wg-ss-body[b-s6y75c8uwn] { height: 180px; }
.growth-bars[b-s6y75c8uwn] {
    display: flex; align-items: flex-end; gap: 3px;
    height: 100%; width: 100%;
}
.growth-col[b-s6y75c8uwn] {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; height: 100%; gap: 3px;
    position: relative;
    isolation: isolate;
}
.growth-bar-wrap[b-s6y75c8uwn] {
    flex: 1; width: 100%;
    display: flex; align-items: flex-end;
}
.growth-bar[b-s6y75c8uwn] {
    width: 100%;
    background: linear-gradient(180deg, #38bdf8 0%, #0369a1 100%);
    border-radius: 4px 4px 2px 2px; min-height: 3px;
    position: relative;
    transition: height 0.6s cubic-bezier(.4,0,.2,1);
    display: flex; align-items: flex-start; justify-content: center; padding-top: 2px;
}
.growth-bar:hover[b-s6y75c8uwn] { background: linear-gradient(180deg, #7dd3fc 0%, #0ea5e9 100%); }

/* ── Sea service paired bar columns ── */
.ss-bars[b-s6y75c8uwn] { gap: 4px; }
.ss-bar-pair[b-s6y75c8uwn] {
    display: flex; align-items: flex-end; gap: 2px;
    width: 100%; height: 100%;
}
.ss-bar-on[b-s6y75c8uwn] {
    flex: 1;
    background: linear-gradient(180deg, #34d399 0%, #059669 100%);
    border-radius: 4px 4px 2px 2px;
    min-height: 3px;
    display: flex; align-items: flex-start; justify-content: center; padding-top: 2px;
    transition: height 0.55s cubic-bezier(.4,0,.2,1);
}
.ss-bar-off[b-s6y75c8uwn] {
    flex: 1;
    background: linear-gradient(180deg, #f87171 0%, #dc2626 100%);
    border-radius: 4px 4px 2px 2px;
    min-height: 3px;
    display: flex; align-items: flex-start; justify-content: center; padding-top: 2px;
    transition: height 0.55s cubic-bezier(.4,0,.2,1);
}
.ss-bar-on:hover[b-s6y75c8uwn]  { background: linear-gradient(180deg, #6ee7b7 0%, #10b981 100%); }
.ss-bar-off:hover[b-s6y75c8uwn] { background: linear-gradient(180deg, #fca5a5 0%, #ef4444 100%); }
.growth-bar-val[b-s6y75c8uwn] {
    font-size: 0.56rem; font-weight: 800; color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3); line-height: 1;
}
.growth-label[b-s6y75c8uwn] {
    font-size: 0.52rem; font-weight: 600; color: #64748b;
    text-align: center; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* ── Donut widget ── */
.wg-donut-body[b-s6y75c8uwn] {
    flex-direction: row !important;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    overflow: hidden;
}
.donut-svg[b-s6y75c8uwn] { width: 120px; height: 120px; flex-shrink: 0; }
.donut-legend[b-s6y75c8uwn] {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
    overflow-y: auto;
    max-height: 200px;
}
.legend-row[b-s6y75c8uwn] {
    display: flex; align-items: center; gap: 5px;
    font-size: 0.70rem; color: #334155;
    padding: 2px 4px; border-radius: 6px; transition: background 0.14s;
    flex-shrink: 0;
}
.legend-row:hover[b-s6y75c8uwn] { background: #f0f9ff; }
.legend-dot[b-s6y75c8uwn]  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.legend-name[b-s6y75c8uwn] { flex: 1; font-weight: 600; color: #1e293b; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend-num[b-s6y75c8uwn]  { font-weight: 800; color: #0f172a; min-width: 22px; text-align: right; }
.legend-pct[b-s6y75c8uwn]  { min-width: 26px; text-align: right; color: #64748b; font-size: 0.64rem; }

/* ── Line chart labels ── */
.line-labels[b-s6y75c8uwn] {
    display: flex;
    justify-content: space-between;
    padding: 2px 0 0;
}
.line-labels span[b-s6y75c8uwn] {
    font-size: 0.55rem; font-weight: 600; color: #94a3b8;
    text-align: center; flex: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.line-lbl-hide[b-s6y75c8uwn] { visibility: hidden; }

/* ── Activity chart legend ── */
.act-legend[b-s6y75c8uwn] {
    display: flex; align-items: center; gap: 6px;
    margin-left: auto; font-size: 0.68rem; color: #64748b;
}
.act-leg-dot[b-s6y75c8uwn] {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}

/* ── Sea Service chart ── */
.wg-sea-service[b-s6y75c8uwn] { margin-top: 0; }

/* ══════════════════════════════════════════════════════
   TOOLTIP – data-tip (light, always on top)
══════════════════════════════════════════════════════ */
.tip[b-s6y75c8uwn] {
    position: relative;
    cursor: default;
}
.tip[b-s6y75c8uwn]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.90);
    transform-origin: bottom center;
    background: #fff;
    color: #1e293b;
    font-size: 0.70rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.13);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 9999;
}
.tip[b-s6y75c8uwn]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #e2e8f0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 9999;
}
.tip:hover[b-s6y75c8uwn]::after,
.tip:hover[b-s6y75c8uwn]::before {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .db-chart-row[b-s6y75c8uwn] { grid-template-columns: 1fr 1fr; }
    .db-stat-widgets[b-s6y75c8uwn] { grid-template-columns: 1fr; }
    .db-act-row[b-s6y75c8uwn] { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .db-chart-row[b-s6y75c8uwn] { grid-template-columns: 1fr; }
    .db-banner[b-s6y75c8uwn] { height: 100px; }
}
/* /Components/Pages/Index/PageHoSoCaNhan.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   PROFILE PAGE — high-contrast, readable
   ═══════════════════════════════════════════ */

/* ROOT */
.pp-root[b-ejs0kcjdsl] {
    background: #f0faf4;
    background-image:
        radial-gradient(900px 500px at 5% -5%,  rgba(16,185,129,.12) 0%, transparent 60%),
        radial-gradient(800px 400px at 100% 5%, rgba(14,165,233,.10) 0%, transparent 55%);
    position: relative;
}

/* ── COVER HERO ── */
.pp-cover[b-ejs0kcjdsl] {
    position: relative;
    height: 176px;
    background: linear-gradient(135deg, #065f46 0%, #059669 45%, #0284c7 100%);
    overflow: hidden;
    border-bottom: 3px solid #10b981;
}

.pp-cover-glow[b-ejs0kcjdsl] {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 65% at 50% 115%,
                rgba(255,255,255,.22) 0%, transparent 70%);
}

/* floating particles */
.pp-p[b-ejs0kcjdsl] {
    position: absolute;
    border-radius: 50%;
    opacity: .3;
    animation: ppFloat-b-ejs0kcjdsl linear infinite;
    background: rgba(255,255,255,.85);
}
.pp-p1[b-ejs0kcjdsl] { width:10px; height:10px; left:8%;  top:28%; animation-duration:6s;  }
.pp-p2[b-ejs0kcjdsl] { width:16px; height:16px; left:22%; top:55%; animation-duration:8s;  animation-delay:-2s; }
.pp-p3[b-ejs0kcjdsl] { width: 8px; height: 8px; left:42%; top:18%; animation-duration:5s;  animation-delay:-1s; }
.pp-p4[b-ejs0kcjdsl] { width:12px; height:12px; left:63%; top:58%; animation-duration:9s;  animation-delay:-3s; }
.pp-p5[b-ejs0kcjdsl] { width:20px; height:20px; left:78%; top:22%; animation-duration:7s;  animation-delay:-.5s; }
.pp-p6[b-ejs0kcjdsl] { width: 6px; height: 6px; left:90%; top:44%; animation-duration:4s;  animation-delay:-1.5s; }

@keyframes ppFloat-b-ejs0kcjdsl {
    0%,100% { transform: translateY(0) rotate(0deg); }
    50%     { transform: translateY(-26px) rotate(180deg); }
}

/* ── LAYOUT ── */
.pp-layout[b-ejs0kcjdsl] {
    display: flex;
    gap: 20px;
    max-width: 1280px;
    margin: -68px auto 40px;
    padding: 0 20px;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

/* ── SIDEBAR ── */
.pp-sidebar[b-ejs0kcjdsl] {
    width: 272px;
    flex-shrink: 0;
    position: sticky;
    top: 74px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── glass card base ── */
.pp-glass[b-ejs0kcjdsl] {
    background: #ffffff;
    border: 1.5px solid #d1fae5;
    box-shadow: 0 4px 16px rgba(5,150,105,.1), 0 1px 4px rgba(15,23,42,.06);
    border-radius: 14px;
}

/* ── identity card ── */
.pp-identity[b-ejs0kcjdsl] {
    padding: 24px 16px 20px;
    text-align: center;
    animation: ppRise-b-ejs0kcjdsl .5s ease both;
}

.pp-av-ring[b-ejs0kcjdsl] {
    position: relative;
    width: 82px;
    height: 82px;
    margin: 0 auto 12px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(from 0deg, #10b981, #0ea5e9, #34d399, #10b981);
    animation: ppSpin-b-ejs0kcjdsl 8s linear infinite;
}

.pp-av-img[b-ejs0kcjdsl],
.pp-av-init[b-ejs0kcjdsl] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid #fff;
    background: #fff;
    object-fit: cover;
    display: block;
}

.pp-av-init[b-ejs0kcjdsl] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #059669, #0ea5e9);
    color: #fff;
    font-size: 1.55rem;
    font-weight: 800;
}

.pp-av-dot[b-ejs0kcjdsl] {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 13px;
    height: 13px;
    background: #22c55e;
    border-radius: 50%;
    border: 2.5px solid #fff;
    animation: ppPulse-b-ejs0kcjdsl 1.6s infinite;
}

@keyframes ppPulse-b-ejs0kcjdsl {
    0%   { box-shadow: 0 0 0 0   rgba(34,197,94,.6); }
    70%  { box-shadow: 0 0 0 9px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0   rgba(34,197,94,0); }
}

@keyframes ppSpin-b-ejs0kcjdsl { to { transform: rotate(360deg); } }

.pp-id-name[b-ejs0kcjdsl] {
    font-size: 1.05rem;
    font-weight: 800;
    color: #064e3b;
    letter-spacing: .3px;
    margin-bottom: 4px;
    line-height: 1.3;
}

.pp-id-user[b-ejs0kcjdsl] {
    font-size: .82rem;
    color: #059669;
    font-weight: 600;
    margin-bottom: 10px;
}

.pp-role-pill[b-ejs0kcjdsl] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #059669, #0284c7);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 11px;
    border-radius: 999px;
    letter-spacing: .3px;
    box-shadow: 0 3px 10px rgba(5,150,105,.3);
}

/* stats row */
.pp-stats-row[b-ejs0kcjdsl] {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1.5px solid #d1fae5;
    border-radius: 12px;
    padding: 14px 8px;
    box-shadow: 0 2px 8px rgba(5,150,105,.08);
    animation: ppRise-b-ejs0kcjdsl .5s .05s ease both;
}

.pp-stat[b-ejs0kcjdsl] { flex: 1; text-align: center; }

.pp-sv[b-ejs0kcjdsl] {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
}

.pp-sv-red[b-ejs0kcjdsl]   { color: #dc2626; }
.pp-sv-amber[b-ejs0kcjdsl] { color: #b45309; }
.pp-sv-sky[b-ejs0kcjdsl]   { color: #0369a1; }

.pp-sl[b-ejs0kcjdsl] {
    display: block;
    font-size: .7rem;
    font-weight: 600;
    color: #6b7280;
    margin-top: 4px;
    letter-spacing: .2px;
}

.pp-sep[b-ejs0kcjdsl] {
    width: 1px;
    height: 34px;
    background: #d1fae5;
}

/* chips */
.pp-chips[b-ejs0kcjdsl] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    animation: ppRise-b-ejs0kcjdsl .5s .1s ease both;
    display:none;
}

.pp-chip[b-ejs0kcjdsl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    font-weight: 500;
    color: #1e3a2e;
    background: #f0fdf4;
    border-radius: 8px;
    padding: 7px 10px;
    border: 1px solid #bbf7d0;
    transition: background .15s, border-color .15s;
}

.pp-chip:hover[b-ejs0kcjdsl] {
    background: #dcfce7;
    border-color: #86efac;
}

.pp-chip i[b-ejs0kcjdsl] {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: #fff;
    background: linear-gradient(135deg, #059669, #0284c7);
    font-size: .72rem;
    flex-shrink: 0;
}

.pp-chip span[b-ejs0kcjdsl] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

/* sidebar nav */
.pp-nav[b-ejs0kcjdsl] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #ffffff;
    border: 1.5px solid #d1fae5;
    border-radius: 12px;
    padding: 7px;
    box-shadow: 0 2px 8px rgba(5,150,105,.07);
    animation: ppRise-b-ejs0kcjdsl .5s .15s ease both;
}

.pp-nb[b-ejs0kcjdsl] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #374151;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
    text-align: left;
    width: 100%;
    letter-spacing: .1px;
}

.pp-nb:hover[b-ejs0kcjdsl] {
    background: #f0fdf4;
    color: #065f46;
}

.pp-nb.active[b-ejs0kcjdsl] {
    background: linear-gradient(135deg, #059669, #0284c7);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(5,150,105,.3);
}

.pp-nb > i:first-child[b-ejs0kcjdsl] { width: 16px; text-align: center; flex-shrink: 0; }
.pp-nb > span[b-ejs0kcjdsl] { flex: 1; }

.pp-arr[b-ejs0kcjdsl] { font-size: .64rem; opacity: .35; margin-left: auto; }
.pp-nb.active .pp-arr[b-ejs0kcjdsl] { opacity: .65; }

.pp-badge[b-ejs0kcjdsl] {
    margin-left: auto;
    background: #dc2626;
    color: #fff;
    font-size: .66rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    line-height: 1.5;
    border: 2px solid rgba(255,255,255,.85);
    display:none;
}

/* ── MAIN ── */
.pp-main[b-ejs0kcjdsl] { flex: 1; min-width: 0; }

/* section card */
.pp-section[b-ejs0kcjdsl] {
    background: #ffffff;
    border: 1.5px solid #e5e7eb;
    border-radius: 14px;
    padding: 26px;
    box-shadow: 0 4px 18px rgba(15,23,42,.07);
}

.pp-anim[b-ejs0kcjdsl] { animation: ppRise-b-ejs0kcjdsl .28s ease-out both; }

@keyframes ppRise-b-ejs0kcjdsl {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* section header */
.pp-shead[b-ejs0kcjdsl] {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1.5px solid #e5e7eb;
}

.pp-sicon[b-ejs0kcjdsl] {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    flex-shrink: 0;
}

.s-blue[b-ejs0kcjdsl]   { background: linear-gradient(135deg, #0284c7, #0369a1); box-shadow: 0 4px 12px rgba(2,132,199,.3); }
.s-violet[b-ejs0kcjdsl] { background: linear-gradient(135deg, #7c3aed, #6d28d9); box-shadow: 0 4px 12px rgba(124,58,237,.3); }
.s-amber[b-ejs0kcjdsl]  { background: linear-gradient(135deg, #d97706, #b45309); box-shadow: 0 4px 12px rgba(217,119,6,.3); }
.s-green[b-ejs0kcjdsl]  { background: linear-gradient(135deg, #059669, #047857); box-shadow: 0 4px 12px rgba(5,150,105,.3); }

.pp-stitle[b-ejs0kcjdsl] {
    font-size: 1rem;
    font-weight: 800;
    color: #111827;
    letter-spacing: .1px;
}

.pp-ssub[b-ejs0kcjdsl] {
    font-size: .78rem;
    color: #6b7280;
    margin-top: 2px;
    font-weight: 500;
}

/* form grid */
.pp-grid[b-ejs0kcjdsl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 22px;
}

.pp-span2[b-ejs0kcjdsl] { grid-column: 1 / -1; }

.pp-field[b-ejs0kcjdsl] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pp-field label[b-ejs0kcjdsl] {
    font-size: .78rem;
    font-weight: 700;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 5px;
    letter-spacing: .1px;
}

.pp-field input[b-ejs0kcjdsl],
.pp-field textarea[b-ejs0kcjdsl] {
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    padding: 9px 13px;
    font-size: .88rem;
    font-weight: 500;
    background: #f9fafb;
    color: #111827;
    transition: border-color .18s, box-shadow .18s, background .18s;
    outline: none;
    resize: vertical;
    line-height: 1.45;
}

.pp-field input:focus[b-ejs0kcjdsl],
.pp-field textarea:focus[b-ejs0kcjdsl] {
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(5,150,105,.15);
    background: #fff;
}

.pp-field.pp-ro input[b-ejs0kcjdsl] {
    background: #f3f4f6;
    cursor: not-allowed;
    color: #9ca3af;
    border-color: #e5e7eb;
}

/* footer bar */
.pp-foot[b-ejs0kcjdsl] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1.5px solid #e5e7eb;
}

/* buttons */
.pp-btn[b-ejs0kcjdsl] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    border: none;
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .18s;
    letter-spacing: .1px;
}

.pp-btn:disabled[b-ejs0kcjdsl] { opacity: .5; cursor: not-allowed; }

.pp-prim[b-ejs0kcjdsl] {
    background: linear-gradient(135deg, #059669 0%, #0284c7 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(5,150,105,.35);
}

.pp-prim:not(:disabled):hover[b-ejs0kcjdsl] {
    box-shadow: 0 8px 22px rgba(5,150,105,.45);
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.pp-danger[b-ejs0kcjdsl] {
    background: #fff;
    color: #dc2626;
    border: 1.5px solid #fca5a5;
}

.pp-danger:hover[b-ejs0kcjdsl] {
    background: #fef2f2;
    border-color: #f87171;
}

.pp-ghost[b-ejs0kcjdsl] {
    background: #f9fafb;
    color: #374151;
    border: 1.5px solid #d1d5db;
}

.pp-ghost:hover[b-ejs0kcjdsl] {
    background: #f3f4f6;
    border-color: #9ca3af;
}

/* ── AVATAR ── */
.pp-av-zone[b-ejs0kcjdsl] {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.pp-av-preview[b-ejs0kcjdsl] { position: relative; flex-shrink: 0; }

.pp-av-lg[b-ejs0kcjdsl] {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #d1fae5;
    box-shadow: 0 4px 18px rgba(5,150,105,.18);
}

.pp-av-lg-blank[b-ejs0kcjdsl] {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: linear-gradient(135deg, #059669, #0284c7);
    color: #fff;
    font-size: 1.9rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(5,150,105,.22);
}

.pp-av-new[b-ejs0kcjdsl] {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: #16a34a;
    color: #fff;
    font-size: .63rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 20px;
    border: 2px solid #fff;
}

.pp-dz[b-ejs0kcjdsl] {
    flex: 1;
    min-width: 200px;
    border: 2px dashed #6ee7b7;
    border-radius: 12px;
    padding: 30px 18px;
    text-align: center;
    cursor: pointer;
    transition: border-color .18s, background .18s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: #f0fdf4;
}

.pp-dz:hover[b-ejs0kcjdsl],
.pp-dz-over[b-ejs0kcjdsl] {
    border-color: #059669;
    background: #dcfce7;
}

.pp-dz-ico[b-ejs0kcjdsl]   { font-size: 1.9rem; color: #059669; opacity: .75; }
.pp-dz-title[b-ejs0kcjdsl] { font-size: .875rem; color: #374151; font-weight: 500; }
.pp-dz-hint[b-ejs0kcjdsl]  { font-size: .75rem; color: #6b7280; }

.pp-pending[b-ejs0kcjdsl] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    font-weight: 600;
    color: #92400e;
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    border-radius: 8px;
    padding: 7px 12px;
    flex: 1;
}

/* ── PASSWORD ── */
.pp-tips[b-ejs0kcjdsl] {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 11px 15px;
    background: #f0fdf4;
    border-radius: 10px;
    border: 1.5px solid #bbf7d0;
}

.pp-tips span[b-ejs0kcjdsl] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .78rem;
    font-weight: 600;
    color: #374151;
}

.pp-tips .fa-circle-check[b-ejs0kcjdsl] { color: #16a34a; }

.pp-pw[b-ejs0kcjdsl] { position: relative; display: flex; align-items: center; }
.pp-pw input[b-ejs0kcjdsl] { flex: 1; padding-right: 42px !important; }

.pp-eye[b-ejs0kcjdsl] {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    padding: 4px;
    font-size: .9rem;
    transition: color .15s;
}

.pp-eye:hover[b-ejs0kcjdsl] { color: #059669; }

/* password strength */
.pp-strength[b-ejs0kcjdsl] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 7px;
}

.pp-sb[b-ejs0kcjdsl] {
    flex: 1;
    height: 5px;
    border-radius: 99px;
    background: #e5e7eb;
    transition: background .28s;
}

.pp-sb.ps-1[b-ejs0kcjdsl] { background: #ef4444; }
.pp-sb.ps-2[b-ejs0kcjdsl] { background: #f59e0b; }
.pp-sb.ps-3[b-ejs0kcjdsl] { background: #22c55e; }
.pp-sb.ps-4[b-ejs0kcjdsl] { background: #0ea5e9; }

.pp-sl-lbl[b-ejs0kcjdsl] {
    font-size: .72rem;
    font-weight: 700;
    min-width: 70px;
    text-align: right;
    color: #374151;
}

/* password match */
.pp-match[b-ejs0kcjdsl] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 700;
    margin-top: 6px;
}

.pp-ok[b-ejs0kcjdsl]  { color: #16a34a; }
.pp-err[b-ejs0kcjdsl] { color: #dc2626; }

/* ── LOGS ── */
.pp-log-bar[b-ejs0kcjdsl] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.pp-af-row[b-ejs0kcjdsl] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.pp-af[b-ejs0kcjdsl] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    border: 1.5px solid #d1d5db;
    border-radius: 999px;
    background: #f9fafb;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .16s;
    color: #374151;
}

.pp-af:hover[b-ejs0kcjdsl] {
    border-color: var(--c, #059669);
    color: var(--c, #059669);
    background: #fff;
}

.pp-af.active[b-ejs0kcjdsl] {
    background: var(--c, #059669);
    border-color: var(--c, #059669);
    color: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,.18);
}

/* timeline */
.pp-timeline[b-ejs0kcjdsl] {
    display: flex;
    flex-direction: column;
    margin-bottom: 18px;
}

.pp-tl[b-ejs0kcjdsl] {
    display: flex;
    gap: 13px;
    position: relative;
    padding-bottom: 18px;
}

.pp-tl:not(:last-child)[b-ejs0kcjdsl]::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 34px;
    bottom: 0;
    width: 2px;
    background: #e5e7eb;
}

.pp-tl-dot[b-ejs0kcjdsl] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f3f4f6;
    border: 2px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    flex-shrink: 0;
    color: #9ca3af;
    z-index: 1;
    transition: all .18s;
}

.pp-tl.action-Insert .pp-tl-dot[b-ejs0kcjdsl]  { background: #d1fae5; border-color: #059669; color: #059669; }
.pp-tl.action-Update .pp-tl-dot[b-ejs0kcjdsl]  { background: #fef3c7; border-color: #d97706; color: #b45309; }
.pp-tl.action-Delete .pp-tl-dot[b-ejs0kcjdsl]  { background: #fee2e2; border-color: #dc2626; color: #dc2626; }
.pp-tl.action-Login  .pp-tl-dot[b-ejs0kcjdsl]  { background: #e0f2fe; border-color: #0891b2; color: #0369a1; }
.pp-tl.action-Logout .pp-tl-dot[b-ejs0kcjdsl]  { background: #f1f5f9; border-color: #64748b; color: #475569; }
.pp-tl.action-View   .pp-tl-dot[b-ejs0kcjdsl]  { background: #dbeafe; border-color: #2563eb; color: #1d4ed8; }

.pp-tl-card[b-ejs0kcjdsl] {
    flex: 1;
    background: #fafafa;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    padding: 11px 14px;
    transition: box-shadow .18s, transform .18s;
}

.pp-tl-card:hover[b-ejs0kcjdsl] {
    box-shadow: 0 4px 16px rgba(15,23,42,.09);
    transform: translateX(2px);
    background: #fff;
}

.pp-tl-top[b-ejs0kcjdsl] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    flex-wrap: wrap;
}

.pp-tl-pill[b-ejs0kcjdsl] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .7rem;
    font-weight: 800;
    padding: 2px 9px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
    cursor: pointer;
    letter-spacing: .3px;
    border: 1.5px solid #e5e7eb;
}

.pp-tl.action-Insert .pp-tl-pill[b-ejs0kcjdsl]  { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.pp-tl.action-Update .pp-tl-pill[b-ejs0kcjdsl]  { background: #fef3c7; color: #78350f; border-color: #fcd34d; }
.pp-tl.action-Delete .pp-tl-pill[b-ejs0kcjdsl]  { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.pp-tl.action-Login  .pp-tl-pill[b-ejs0kcjdsl]  { background: #e0f2fe; color: #0c4a6e; border-color: #7dd3fc; }
.pp-tl.action-Logout .pp-tl-pill[b-ejs0kcjdsl]  { background: #f1f5f9; color: #1e293b; border-color: #cbd5e1; }
.pp-tl.action-View   .pp-tl-pill[b-ejs0kcjdsl]  { background: #dbeafe; color: #1e3a8a; border-color: #93c5fd; }

.pp-tl-ago[b-ejs0kcjdsl] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .73rem;
    font-weight: 500;
    color: #00796B;
    margin-left: auto;
}

.pp-tl-msg[b-ejs0kcjdsl] {
    font-size: .875rem;
    font-weight: 400;
    color: #1f2937;
    margin-bottom: 7px;
    line-height: 1.55;
}

.pp-tl-meta[b-ejs0kcjdsl] {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: .73rem;
    font-weight: 500;
    color: #9ca3af;
}

.pp-tl-meta span[b-ejs0kcjdsl] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pp-diff[b-ejs0kcjdsl] {
    margin-top: 9px;
    border: 1.5px solid #e5e7eb;
    border-radius: 7px;
    overflow: hidden;
}

.pp-diff summary[b-ejs0kcjdsl] {
    padding: 6px 11px;
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
    color: #6b7280;
    background: #f9fafb;
    display: flex;
    align-items: center;
    gap: 5px;
    list-style: none;
}

.pp-diff summary:hover[b-ejs0kcjdsl] { color: #059669; background: #f0fdf4; }

.pp-diff pre[b-ejs0kcjdsl] {
    margin: 0;
    padding: 10px 13px;
    font-size: .75rem;
    overflow-x: auto;
    background: #f3f4f6;
    border-top: 1.5px solid #e5e7eb;
    max-height: 180px;
    overflow-y: auto;
    color: #1f2937;
    line-height: 1.5;
}

/* empty state */
.pp-empty[b-ejs0kcjdsl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    color: #9ca3af;
    gap: 10px;
}

.pp-empty i[b-ejs0kcjdsl] { font-size: 2.4rem; opacity: .35; }
.pp-empty p[b-ejs0kcjdsl] { font-size: .9rem; font-weight: 500; margin: 0; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .pp-layout[b-ejs0kcjdsl] {
        flex-direction: column;
        margin-top: -50px;
    }
    .pp-sidebar[b-ejs0kcjdsl] { width: 100%; position: static; }
    .pp-cover[b-ejs0kcjdsl]   { height: 120px; }
    .pp-grid[b-ejs0kcjdsl]    { grid-template-columns: 1fr; }
    .pp-span2[b-ejs0kcjdsl]   { grid-column: 1; }
}
/* /Components/Pages/PageCrews/Page_cCrews.razor.rz.scp.css */

/* /Components/Pages/PageHeThong/PageUserLogs.razor.rz.scp.css */
/* ============================================================
   ACTIVE FILTERS BAR
   ============================================================ */
.active-filters[b-y8lhsx2875] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px 16px;
    background: #eff6ff;
    border-bottom: 1px solid #bfdbfe;
    animation: fadeSlideIn-b-y8lhsx2875 0.25s ease both;
}

.af-label[b-y8lhsx2875] {
    font-size: 11px;
    font-weight: 600;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.3px;
}

.af-chip[b-y8lhsx2875] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1.5px solid #93c5fd;
    color: #1e40af;
    font-size: 11.5px;
    padding: 3px 10px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.18s ease;
    user-select: none;
}
    .af-chip b[b-y8lhsx2875] { font-weight: 700; }
    .af-chip:hover[b-y8lhsx2875] { background: #fee2e2; border-color: #f87171; color: #b91c1c; }

.af-chip-action[b-y8lhsx2875] { border-color: #818cf8; color: #4338ca; background: #eef2ff; }
.af-remove[b-y8lhsx2875] { font-size: 10px; opacity: 0.6; margin-left: 2px; }

.af-clear[b-y8lhsx2875] {
    margin-left: auto;
    font-size: 11px;
    color: #64748b;
    cursor: pointer;
    padding: 2px 10px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s;
    background: #fff;
}
    .af-clear:hover[b-y8lhsx2875] { background: #fee2e2; color: #b91c1c; border-color: #f87171; }

/* ============================================================
   FEED CONTAINER
   ============================================================ */
.tl-feed[b-y8lhsx2875] {
    position: relative;
    height: calc(100svh - 141px);
    overflow-y: auto;
    padding: 20px 32px 20px 20px;
    background: #ECEFF1;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
    .tl-feed[b-y8lhsx2875]::-webkit-scrollbar { width: 5px; }
    .tl-feed[b-y8lhsx2875]::-webkit-scrollbar-track { background: transparent; }
    .tl-feed[b-y8lhsx2875]::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* ============================================================
   DATE SEPARATOR
   ============================================================ */
.tl-date-sep[b-y8lhsx2875] {
    display: flex;
    align-items: center;
    margin: 20px 0 12px 48px;
    position: relative;
}
    .tl-date-sep[b-y8lhsx2875]::before {
        content: '';
        position: absolute;
        left: -48px; right: 0; top: 50%;
        height: 1px;
        background: linear-gradient(90deg, transparent, #cbd5e1 15%, #cbd5e1 85%, transparent);
    }

.tl-date-badge[b-y8lhsx2875] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
    position: relative;
    letter-spacing: 0.5px;
    z-index: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}

/* ============================================================
   TIMELINE ITEM
   ============================================================ */
.tl-item[b-y8lhsx2875] {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 12px;
    position: relative;
    animation: fadeSlideIn-b-y8lhsx2875 0.3s cubic-bezier(.22,.68,0,1.2) both;
}
.tl-item:nth-child(1)[b-y8lhsx2875]   { animation-delay: 0.03s; }
.tl-item:nth-child(2)[b-y8lhsx2875]   { animation-delay: 0.06s; }
.tl-item:nth-child(3)[b-y8lhsx2875]   { animation-delay: 0.09s; }
.tl-item:nth-child(4)[b-y8lhsx2875]   { animation-delay: 0.12s; }
.tl-item:nth-child(5)[b-y8lhsx2875]   { animation-delay: 0.15s; }
.tl-item:nth-child(n+6)[b-y8lhsx2875] { animation-delay: 0.18s; }

@keyframes fadeSlideIn-b-y8lhsx2875 {
    from { opacity: 0; transform: translateX(-14px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   DOT COLUMN
   ============================================================ */
.tl-dot-col[b-y8lhsx2875] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 48px;
    flex-shrink: 0;
    position: relative;
    padding-top: 10px;
}
    .tl-dot-col[b-y8lhsx2875]::after {
        content: '';
        position: absolute;
        top: 46px; bottom: -12px;
        left: 50%; transform: translateX(-50%);
        width: 2px;
        background: linear-gradient(to bottom, #e2e8f0, transparent);
    }
    .tl-item:last-child .tl-dot-col[b-y8lhsx2875]::after { display: none; }

.tl-dot[b-y8lhsx2875] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #fff;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 4px #f1f5f9, 0 3px 12px rgba(0,0,0,0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
    .tl-item:hover .tl-dot[b-y8lhsx2875] { transform: scale(1.1); box-shadow: 0 0 0 4px #f1f5f9, 0 6px 18px rgba(0,0,0,0.25); }

.tl-item.action-View     .tl-dot[b-y8lhsx2875] { background: linear-gradient(135deg,#60a5fa,#2563eb); }
.tl-item.action-Insert   .tl-dot[b-y8lhsx2875] { background: linear-gradient(135deg,#34d399,#059669); }
.tl-item.action-Update   .tl-dot[b-y8lhsx2875] { background: linear-gradient(135deg,#fbbf24,#d97706); }
.tl-item.action-Delete   .tl-dot[b-y8lhsx2875] { background: linear-gradient(135deg,#f87171,#dc2626); }
.tl-item.action-Download .tl-dot[b-y8lhsx2875] { background: linear-gradient(135deg,#a78bfa,#7c3aed); }
.tl-item.action-Login    .tl-dot[b-y8lhsx2875] { background: linear-gradient(135deg,#22d3ee,#0891b2); }
.tl-item.action-Logout   .tl-dot[b-y8lhsx2875] { background: linear-gradient(135deg,#94a3b8,#475569); }

.tl-dot.tl-dot-pulse[b-y8lhsx2875]::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid #f59e0b;
    animation: dotPulse-b-y8lhsx2875 1.4s ease-out infinite;
    opacity: 0;
}
@keyframes dotPulse-b-y8lhsx2875 {
    0%   { transform: scale(0.9); opacity: 0.8; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* ============================================================
   CARD
   ============================================================ */
.tl-card[b-y8lhsx2875] {
    flex: 1;
    margin-left: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px 10px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
    .tl-card[b-y8lhsx2875]::before {
        content: '';
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 4px;
        border-radius: 12px 0 0 12px;
        transition: width 0.2s ease;
    }
    .tl-item:hover .tl-card[b-y8lhsx2875]::before { width: 5px; }

.tl-item.action-View     .tl-card[b-y8lhsx2875]::before { background: linear-gradient(180deg,#60a5fa,#2563eb); }
.tl-item.action-Insert   .tl-card[b-y8lhsx2875]::before { background: linear-gradient(180deg,#34d399,#059669); }
.tl-item.action-Update   .tl-card[b-y8lhsx2875]::before { background: linear-gradient(180deg,#fbbf24,#d97706); }
.tl-item.action-Delete   .tl-card[b-y8lhsx2875]::before { background: linear-gradient(180deg,#f87171,#dc2626); }
.tl-item.action-Download .tl-card[b-y8lhsx2875]::before { background: linear-gradient(180deg,#a78bfa,#7c3aed); }
.tl-item.action-Login    .tl-card[b-y8lhsx2875]::before { background: linear-gradient(180deg,#22d3ee,#0891b2); }
.tl-item.action-Logout   .tl-card[b-y8lhsx2875]::before { background: linear-gradient(180deg,#94a3b8,#475569); }

    .tl-item:hover .tl-card[b-y8lhsx2875] {
        transform: translateY(-2px) translateX(2px);
        border-color: #bfdbfe;
        box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    }

/* action tint nhẹ cho card */
.tl-item.action-Insert .tl-card[b-y8lhsx2875] { background: #fff; border-color: #bbf7d0; }
.tl-item.action-Delete .tl-card[b-y8lhsx2875] { background: #fff; border-color: #fecaca; }
.tl-item.action-Update .tl-card[b-y8lhsx2875] { background: #fff; border-color: #fde68a; }

/* ============================================================
   IS-NEW
   ============================================================ */
.tl-item.is-new[b-y8lhsx2875] { animation: newCardPop-b-y8lhsx2875 0.5s cubic-bezier(.22,.68,0,1.3) both; }
@keyframes newCardPop-b-y8lhsx2875 {
    0%   { opacity: 0; transform: translateY(-10px) scale(0.97); }
    60%  { transform: translateY(2px) scale(1.01); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.tl-item.is-new .tl-card[b-y8lhsx2875] { animation: glowPulse-b-y8lhsx2875 3s ease forwards; }
@keyframes glowPulse-b-y8lhsx2875 {
    0%   { box-shadow: 0 0 0 3px rgba(251,191,36,0.6), 0 4px 20px rgba(251,191,36,0.2); }
    50%  { box-shadow: 0 0 0 5px rgba(251,191,36,0.3), 0 8px 28px rgba(251,191,36,0.12); }
    100% { box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
}

.new-badge[b-y8lhsx2875] {
    position: absolute;
    top: -10px; right: 14px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(245,158,11,0.4);
    animation: badgeBounce-b-y8lhsx2875 0.6s cubic-bezier(.22,.68,0,1.4) both;
    z-index: 10;
    pointer-events: none;
}
@keyframes badgeBounce-b-y8lhsx2875 {
    0%   { opacity: 0; transform: scale(0.5) translateY(-6px); }
    70%  { transform: scale(1.15) translateY(2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============================================================
   CARD HEADER
   ============================================================ */
.tl-card-header[b-y8lhsx2875] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.tl-avatar[b-y8lhsx2875] {
    width: 38px; height: 38px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #e2e8f0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
    .tl-avatar img[b-y8lhsx2875] { width: 100%; height: 100%; object-fit: cover; display: block; }

.tl-user-info[b-y8lhsx2875] {  }
.tl-user-sub[b-y8lhsx2875] {
    display: inline-block;
    margin-left: 8px;
}

.user-fullname[b-y8lhsx2875] {
    font-weight: 700;
    font-size: 13.5px;
    color: #303F9F;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-username[b-y8lhsx2875] {
    font-size: 11px;
    color: #E64A19;
    background: #f5f3ff;
    padding: 3px 8px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
    margin-right: 8px;
}

.user-dept[b-y8lhsx2875] {
    font-size: 10px;
    color: #00796B;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tl-header-right[b-y8lhsx2875] { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }

/* ============================================================
   ACTION PILL
   ============================================================ */
.action-pill[b-y8lhsx2875] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    border: 1.5px solid transparent;
    transition: all 0.2s;
    user-select: none;
}

.tl-item.action-View     .action-pill[b-y8lhsx2875] { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.tl-item.action-Insert   .action-pill[b-y8lhsx2875] { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.tl-item.action-Update   .action-pill[b-y8lhsx2875] { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.tl-item.action-Delete   .action-pill[b-y8lhsx2875] { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.tl-item.action-Download .action-pill[b-y8lhsx2875] { background: #f5f3ff; color: #5b21b6; border-color: #ddd6fe; }
.tl-item.action-Login    .action-pill[b-y8lhsx2875] { background: #ecfeff; color: #155e75; border-color: #a5f3fc; }
.tl-item.action-Logout   .action-pill[b-y8lhsx2875] { background: #f8fafc; color: #475569; border-color: #e2e8f0; }

.tl-item.action-View     .action-pill-active[b-y8lhsx2875] { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
.tl-item.action-Insert   .action-pill-active[b-y8lhsx2875] { background: #166534; color: #fff; border-color: #166534; }
.tl-item.action-Update   .action-pill-active[b-y8lhsx2875] { background: #92400e; color: #fff; border-color: #92400e; }
.tl-item.action-Delete   .action-pill-active[b-y8lhsx2875] { background: #991b1b; color: #fff; border-color: #991b1b; }
.tl-item.action-Download .action-pill-active[b-y8lhsx2875] { background: #5b21b6; color: #fff; border-color: #5b21b6; }
.tl-item.action-Login    .action-pill-active[b-y8lhsx2875] { background: #155e75; color: #fff; border-color: #155e75; }
.tl-item.action-Logout   .action-pill-active[b-y8lhsx2875] { background: #475569; color: #fff; border-color: #475569; }

/* ============================================================
   TIME AGO
   ============================================================ */
.time-ago[b-y8lhsx2875] {
    font-size: 11px;
    color: #D32F2F;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ============================================================
   CARD MESSAGE
   ============================================================ */
.card-message[b-y8lhsx2875] {
    font-size: 13px;
    color: #1e293b;
    line-height: 1.65;
    margin-bottom: 8px;
    font-weight: 400;
}
.tl-item.action-Delete .card-message[b-y8lhsx2875] { color: #991b1b;  }
.tl-item.action-Insert .card-message[b-y8lhsx2875] { color: #166534; }
.tl-item.action-Update .card-message[b-y8lhsx2875] { color: #78350f; }

/* ============================================================
   META ROW
   ============================================================ */
.card-meta[b-y8lhsx2875] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid #f1f5f9;
}

.meta-time[b-y8lhsx2875] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    color: #64748b;
}

.meta-tag[b-y8lhsx2875] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 2px 8px;
    border-radius: 6px;
    transition: all 0.15s;
}
    .meta-tag i[b-y8lhsx2875] { font-size: 10px; }

.meta-tag-btn[b-y8lhsx2875] { cursor: pointer; user-select: none; }
    .meta-tag-btn:hover[b-y8lhsx2875] { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }

.meta-tag-active[b-y8lhsx2875] { background: #dbeafe; border-color: #3b82f6; color: #1d4ed8; font-weight: 600; }
    .meta-tag-active:hover[b-y8lhsx2875] { background: #fee2e2; border-color: #f87171; color: #b91c1c; }

/* ============================================================
   DATA DIFF
   ============================================================ */
.data-diff-toggle[b-y8lhsx2875] { margin-top: 8px; }

.btn-diff[b-y8lhsx2875] {
    background: none;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    color: #64748b;
    font-size: 11px;
    padding: 3px 10px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
    .btn-diff:hover[b-y8lhsx2875] { border-color: #94a3b8; background: #f8fafc; color: #334155; }

.data-diff-panel[b-y8lhsx2875] {
    margin-top: 8px;
    background: #0f172a;
    border-radius: 8px;
    padding: 12px;
    font-size: 11.5px;
    font-family: 'Consolas','Cascadia Code',monospace;
    color: #94a3b8;
    overflow-x: auto;
    max-height: 200px;
    overflow-y: auto;
    animation: expandDown-b-y8lhsx2875 0.2s ease;
}
@keyframes expandDown-b-y8lhsx2875 {
    from { opacity: 0; max-height: 0; padding: 0 12px; }
    to   { opacity: 1; max-height: 200px; padding: 12px; }
}

/* ============================================================
   AUTO REFRESH BUTTON
   ============================================================ */
.btn-autorefresh[b-y8lhsx2875] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    height: 30px;
}
    .btn-autorefresh:hover[b-y8lhsx2875] { border-color: #94a3b8; background: #f8fafc; color: #334155; }
    .btn-autorefresh.active[b-y8lhsx2875] {
        background: linear-gradient(135deg, #10b981, #059669);
        border-color: transparent;
        color: #fff;
        box-shadow: 0 2px 12px rgba(16,185,129,0.4);
        animation: activePulse-b-y8lhsx2875 2s ease infinite;
    }

@keyframes activePulse-b-y8lhsx2875 {
    0%, 100% { box-shadow: 0 2px 10px rgba(16,185,129,0.35); }
    50%       { box-shadow: 0 2px 20px rgba(16,185,129,0.6); }
}

.ar-countdown[b-y8lhsx2875] { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 18px; text-align: center; }
.ar-unit[b-y8lhsx2875] { font-size: 10px; font-weight: 600; opacity: 0.8; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-feed[b-y8lhsx2875] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    gap: 14px;
}
    .empty-feed i[b-y8lhsx2875] { font-size: 48px; color: #cbd5e1; }
    .empty-feed p[b-y8lhsx2875] { font-size: 14px; margin: 0; color: #94a3b8; }
/* /Components/Shared/Controls/LogMessageRenderer.razor.rz.scp.css */
/* ===== LOG MESSAGE RENDERER ===== */
.lmr-title[b-5ru4i4yp4g] {
    font-size: 12px;
    margin-bottom: 6px;
    font-weight:400;
}

.lmr-fields[b-5ru4i4yp4g] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lmr-field[b-5ru4i4yp4g] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12.5px;
    padding: 3px 0;
    border-bottom: 1px dashed #f1f5f9;
}

    .lmr-field:last-child[b-5ru4i4yp4g] {
        border-bottom: none;
    }

.lmr-label[b-5ru4i4yp4g] {
    min-width: 90px;
    font-weight: 500;
    color: #333;
    font-size: 12px;
    flex-shrink: 0;
}

.lmr-old[b-5ru4i4yp4g] {
    background: #fef2f2;
    color: #dc2626;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 12px;
    text-decoration: line-through;
    text-decoration-color: #f87171;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight:400;
}

.lmr-new[b-5ru4i4yp4g] {
    background: #f0fdf4;
    color: #303F9F;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
}

.lmr-empty[b-5ru4i4yp4g] {
    font-style: italic;
    opacity: 0.6;
    text-decoration: none;
}

.lmr-arrow[b-5ru4i4yp4g] {
    color: #94a3b8;
    font-size: 10px;
    flex-shrink: 0;
}
/* /Components/Shared/Crews/CrewComments.razor.rz.scp.css */
/* Skeleton loading */
.skeleton-comment-item[b-hev96w3zhm] {
    display: flex;
    gap: 12px;
    padding: 14px 10px;
    border-bottom: 1px solid #ececec;
    align-items: flex-start;
}

.skeleton-avatar[b-hev96w3zhm] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #e0e0e0;
}

.skeleton-body[b-hev96w3zhm] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.skeleton-line[b-hev96w3zhm] {
    border-radius: 6px;
    background: #e0e0e0;
}

@keyframes skeleton-shimmer-b-hev96w3zhm {
    0% { background-color: #e0e0e0; }
    50% { background-color: #f0f0f0; }
    100% { background-color: #e0e0e0; }
}

.skeleton-pulse[b-hev96w3zhm] {
    animation: skeleton-shimmer-b-hev96w3zhm 1.4s ease-in-out infinite;
}