/* /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;
    /* Ocean theme background */
    background:
        /* shimmer sóng lăn trên mặt nước */
        repeating-linear-gradient(
            -55deg,
            transparent,
            transparent 6px,
            rgba(14,165,233,0.04) 6px,
            rgba(14,165,233,0.04) 7px
        ),
        /* gradient đại dương từ sáng xuống sâu */
        linear-gradient(
            180deg,
            #e0f2fe  0%,
            #bae6fd 18%,
            #7dd3fc 38%,
            #38bdf8 55%,
            #0ea5e9 70%,
            #0284c7 84%,
            #0369a1 100%
        );
    background-attachment: local;
    position: relative;
}
/* Lớp sóng nước chạy phía sau toàn bộ trang */
.db-shell[b-s6y75c8uwn]::before {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none; z-index: 0;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='160' viewBox='0 0 1440 160'%3E%3Cpath d='M0,80 C180,40 360,120 540,80 C720,40 900,120 1080,80 C1260,40 1380,100 1440,80 L1440,160 L0,160 Z' fill='rgba(186,230,253,0.18)'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='160' viewBox='0 0 1440 160'%3E%3Cpath d='M0,100 C240,60 480,140 720,100 C960,60 1200,140 1440,100 L1440,160 L0,160 Z' fill='rgba(125,211,252,0.12)'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 1440px 160px, 1440px 160px;
    background-position: 0 60%, 0 80%;
    animation: ocean-shift-b-s6y75c8uwn 14s linear infinite, ocean-shift2-b-s6y75c8uwn 20s linear infinite;
    opacity: 0.7;
}
.db-shell[b-s6y75c8uwn]::after {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none; z-index: 0;
    /* vảy sóng li ti toàn trang */
    background-image: radial-gradient(ellipse 120px 18px at 50% 50%, rgba(255,255,255,0.06) 0%, transparent 100%);
    background-size: 220px 60px;
    animation: glitter-move-b-s6y75c8uwn 8s linear infinite;
    opacity: 0.55;
}
@keyframes ocean-shift-b-s6y75c8uwn  { from { background-position: 0 60%, 0 80%; } to { background-position: 1440px 60%, 1440px 80%; } }
@keyframes ocean-shift2-b-s6y75c8uwn { from { background-position: 0 80%; } to { background-position: -1440px 80%; } }
@keyframes glitter-move-b-s6y75c8uwn { from { background-position: 0 0; } to { background-position: 220px 60px; } }

/* ══════════════════════════════════════════════════════
   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 */

/* ── Ánh sáng trái – lens flare / aurora – rộng và nổi bật ── */
.bn-light-left[b-s6y75c8uwn] {
    position: absolute;
    top: -30px; left: -30px;
    width: 520px; height: 260px;
    pointer-events: none; z-index: 4;
    background:
        radial-gradient(ellipse 55% 70% at 22% 50%,
            rgba(56,189,248,0.65) 0%,
            rgba(99,102,241,0.40) 30%,
            rgba(14,165,233,0.20) 55%,
            transparent 75%),
        radial-gradient(ellipse 30% 50% at 10% 30%,
            rgba(253,224,71,0.30) 0%,
            transparent 60%);
    filter: blur(10px);
    animation: light-left-pulse-b-s6y75c8uwn 6s ease-in-out infinite;
}
/* điểm sáng trắng – giống lens flare tia nắng chiếu vào */
.bn-light-left[b-s6y75c8uwn]::before {
    content: '';
    position: absolute;
    top: 28px; left: 100px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    box-shadow:
        0 0 22px 10px rgba(255,255,255,0.70),
        0 0 50px 22px rgba(253,224,71,0.45),
        30px 14px 0 3px rgba(255,255,255,0.30),
        -14px 28px 0 2px rgba(255,255,255,0.20),
        50px 30px 0 1px rgba(255,255,255,0.15);
    animation: flare-blink-b-s6y75c8uwn 4s ease-in-out infinite;
}
/* streak sáng chéo */
.bn-light-left[b-s6y75c8uwn]::after {
    content: '';
    position: absolute;
    top: 0; left: 60px;
    width: 3px; height: 100%;
    background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.55) 30%, rgba(253,224,71,0.40) 55%, transparent 100%);
    transform: rotate(-18deg) scaleX(1);
    filter: blur(2px);
    animation: flare-blink-b-s6y75c8uwn 4s ease-in-out infinite 0.6s;
}
@keyframes light-left-pulse-b-s6y75c8uwn {
    0%,100% { opacity: 0.85; transform: scale(1); }
    50%      { opacity: 1.00; transform: scale(1.05); }
}
@keyframes flare-blink-b-s6y75c8uwn {
    0%,100% { opacity: 0.80; }
    50%      { opacity: 1.00; }
}

/* ── Mặt trời – góc trên phải, z-index 5 (trên mây) ── */
.bn-sun[b-s6y75c8uwn] {
    position: absolute;
    top: -10px; right: 40px;
    width: 100px; height: 100px;
    pointer-events: none; z-index: 5;
}
.bn-sun-core[b-s6y75c8uwn] {
    position: absolute;
    top: 50%; left: 50%;
    width: 40px; height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    background: radial-gradient(circle, #fef9c3 30%, #fde047 60%, #f59e0b 100%);
    box-shadow: 0 0 30px 14px rgba(253,224,71,0.50), 0 0 70px 28px rgba(251,191,36,0.24);
    animation: sun-glow-b-s6y75c8uwn 5s ease-in-out infinite;
}
.bn-sun-rays[b-s6y75c8uwn] {
    position: absolute; inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        transparent 0deg, rgba(253,224,71,0.18) 6deg, transparent 12deg,
        transparent 30deg, rgba(253,224,71,0.18) 36deg, transparent 42deg,
        transparent 60deg, rgba(253,224,71,0.18) 66deg, transparent 72deg,
        transparent 90deg, rgba(253,224,71,0.18) 96deg, transparent 102deg,
        transparent 120deg, rgba(253,224,71,0.18) 126deg, transparent 132deg,
        transparent 150deg, rgba(253,224,71,0.18) 156deg, transparent 162deg,
        transparent 180deg, rgba(253,224,71,0.18) 186deg, transparent 192deg,
        transparent 210deg, rgba(253,224,71,0.18) 216deg, transparent 222deg,
        transparent 240deg, rgba(253,224,71,0.18) 246deg, transparent 252deg,
        transparent 270deg, rgba(253,224,71,0.18) 276deg, transparent 282deg,
        transparent 300deg, rgba(253,224,71,0.18) 306deg, transparent 312deg,
        transparent 330deg, rgba(253,224,71,0.18) 336deg, transparent 342deg
    );
    animation: sun-spin-b-s6y75c8uwn 18s linear infinite;
}
@keyframes sun-glow-b-s6y75c8uwn {
    0%,100% { box-shadow: 0 0 30px 14px rgba(253,224,71,0.50), 0 0 70px 28px rgba(251,191,36,0.24); }
    50%      { box-shadow: 0 0 44px 20px rgba(253,224,71,0.70), 0 0 90px 38px rgba(251,191,36,0.34); }
}
@keyframes sun-spin-b-s6y75c8uwn { to { transform: rotate(360deg); } }

/* ── Mây – z-index 3 (dưới mặt trời z-5, nhưng mây cuộn lên che phần đáy mặt trời) ── */
.bn-cloud[b-s6y75c8uwn] {
    position: absolute; pointer-events: none; z-index: 3;
}
.bn-cloud svg[b-s6y75c8uwn] { display: block; }
/* mây lớn kéo lên cao che chân mặt trời */
.bn-cloud-1[b-s6y75c8uwn] { width: 140px; top: 30px; right: 0px;   animation: cloud-drift-1-b-s6y75c8uwn 28s cubic-bezier(.45,.05,.55,.95) infinite; }
.bn-cloud-2[b-s6y75c8uwn] { width: 85px;  top: 22px; right: 310px;  animation: cloud-drift-2-b-s6y75c8uwn 36s cubic-bezier(.45,.05,.55,.95) infinite; }
.bn-cloud-3[b-s6y75c8uwn] { width: 65px;  top: 14px; right: 430px;  animation: cloud-drift-3-b-s6y75c8uwn 44s cubic-bezier(.45,.05,.55,.95) infinite; opacity: 0.8; }
@keyframes cloud-drift-1-b-s6y75c8uwn {
    0%        { transform: translate(  0px,  0px); }
    25%       { transform: translate( -8px, -2px); }
    50%       { transform: translate(-14px,  1px); }
    75%       { transform: translate( -6px, -3px); }
    100%      { transform: translate(  0px,  0px); }
}
@keyframes cloud-drift-2-b-s6y75c8uwn {
    0%        { transform: translate( 0px,  0px); }
    30%       { transform: translate( 9px, -1px); }
    60%       { transform: translate(13px,  2px); }
    100%      { transform: translate( 0px,  0px); }
}
@keyframes cloud-drift-3-b-s6y75c8uwn {
    0%        { transform: translate(  0px,  0px); }
    40%       { transform: translate( -7px, -2px); }
    70%       { transform: translate(-10px,  1px); }
    100%      { transform: translate(  0px,  0px); }
}

/* ── Hải âu ── */
.bn-seagulls[b-s6y75c8uwn] {
    position: absolute; right: 28px; top: 8px;
    display: flex; flex-direction: column; gap: 3px;
    pointer-events: none; z-index: 3;
}
.bn-sg[b-s6y75c8uwn]        { display: block; width: 40px; animation: sg-glide-b-s6y75c8uwn 7s ease-in-out infinite; }
.bn-sg-2[b-s6y75c8uwn]      { width: 28px; margin-left: 18px; animation: sg-glide-b-s6y75c8uwn 9s ease-in-out infinite 0.8s; }
.bn-sg-3[b-s6y75c8uwn]      { width: 20px; margin-left: 8px;  animation: sg-glide-b-s6y75c8uwn 8s ease-in-out infinite 1.4s; }
.bn-sg-4[b-s6y75c8uwn]      { width: 16px; margin-left: 24px; animation: sg-glide-b-s6y75c8uwn 11s ease-in-out infinite 0.3s; }
.bn-sg-5[b-s6y75c8uwn]      { width: 13px; margin-left: 14px; animation: sg-glide-b-s6y75c8uwn 10s ease-in-out infinite 1.8s; }
@keyframes sg-glide-b-s6y75c8uwn {
    0%,100% { transform: translateX(0)   translateY(0); }
    25%     { transform: translateX(-5px) translateY(-4px); }
    50%     { transform: translateX(-9px) translateY(-1px); }
    75%     { transform: translateX(-4px) translateY(-5px); }
}

/* ── Đội tàu ── */
.bn-ship-wrap[b-s6y75c8uwn] {
    position: absolute; bottom: 40px; right: 310px;
    animation: ship-sail-b-s6y75c8uwn 12s cubic-bezier(.45,.05,.55,.95) infinite;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25)); pointer-events: none;
    z-index: 1;
}
.bn-ship[b-s6y75c8uwn] { font-size: 2rem; color: rgba(255,255,255,0.82); }

/* Tàu nhỏ 1 – phía sau bên phải, nhỏ hơn, lệch pha bob */
.bn-ship-sm1[b-s6y75c8uwn] {
    right: 200px; bottom: 38px;
    animation: ship-sail-b-s6y75c8uwn 16s cubic-bezier(.45,.05,.55,.95) infinite 3s;
    filter: drop-shadow(0 3px 7px rgba(0,0,0,0.20));
}
.bn-ship-sm1 .bn-ship[b-s6y75c8uwn] { font-size: 1.25rem; color: rgba(255,255,255,0.60); }

/* Tàu nhỏ 2 – xa hơn, nhỏ nhất, lệch pha khác */
.bn-ship-sm2[b-s6y75c8uwn] {
    right: 440px; bottom: 42px;
    animation: ship-sail-b-s6y75c8uwn 20s cubic-bezier(.45,.05,.55,.95) infinite 6s;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.18));
}
.bn-ship-sm2 .bn-ship[b-s6y75c8uwn] { font-size: 0.85rem; color: rgba(255,255,255,0.42); }

@keyframes ship-sail-b-s6y75c8uwn {
    0%   { transform: translateY(0px)   rotate(-0.8deg); }
    15%  { transform: translateY(-4px)  rotate( 0.6deg); }
    30%  { transform: translateY(-7px)  rotate( 1.4deg); }
    45%  { transform: translateY(-4px)  rotate( 0.4deg); }
    60%  { transform: translateY(-2px)  rotate(-0.6deg); }
    75%  { transform: translateY(-5px)  rotate( 1.0deg); }
    90%  { transform: translateY(-3px)  rotate(-0.3deg); }
    100% { transform: translateY(0px)   rotate(-0.8deg); }
}

/* 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%); } }

/* ── Quote giữa banner ── */
.bn-quote-wrap[b-s6y75c8uwn] {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    max-width: 520px; width: 60%;
    display: flex; align-items: center; gap: 8px;
    z-index: 6; pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.bn-quote--in[b-s6y75c8uwn]  { opacity: 1;   transform: translate(-50%, -50%) scale(1);    }
.bn-quote--out[b-s6y75c8uwn] { opacity: 0;   transform: translate(-50%, -46%) scale(0.97); }
.bn-quote-icon[b-s6y75c8uwn] {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: rgba(253,224,71,0.80);
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.3));
    line-height: 1;
    margin-top: -6px;
}
.bn-quote-text[b-s6y75c8uwn] {
    flex: 1;
    font-size: 0.78rem; font-weight: 600; font-style: italic;
    color: rgba(255,255,255,0.95);
    text-shadow: 0 1px 8px rgba(0,0,0,0.50);
    line-height: 1.45;
    letter-spacing: 0.2px;
    /* 2 dòng max, tiếp theo ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bn-quote-author[b-s6y75c8uwn] {
    flex-shrink: 0;
    font-size: 0.62rem; font-weight: 700;
    color: rgba(186,230,253,0.90);
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    white-space: nowrap;
    align-self: flex-end;
    margin-bottom: 2px;
    letter-spacing: 0.3px;
}

/* 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 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative; z-index: 1;
    padding-bottom:30px;
}

/* ══════════════════════════════════════════════════════
   ROW 1 – 3 stat widgets (My Tasks | All Tasks | Crew)
══════════════════════════════════════════════════════ */
.db-stat-widgets[b-s6y75c8uwn] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    flex-shrink: 0;
    align-items: stretch;
}

/* ── Base card ── */
.sw-card[b-s6y75c8uwn] {
    background: rgba(255,255,255,0.96);
    border-radius: 14px;
    border: 1px solid rgba(186,230,253,0.60);
    box-shadow: 0 4px 24px rgba(3,105,161,0.14), 0 1px 4px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    backdrop-filter: blur(4px);
    transition: transform 0.22s cubic-bezier(.34,1.56,.64,1), box-shadow 0.22s ease;
}
.sw-card:hover[b-s6y75c8uwn] {
    transform: translateY(-4px) scale(1.012);
    box-shadow: 0 12px 36px rgba(3,105,161,0.22), 0 2px 8px rgba(0,0,0,0.10);
    border-color: rgba(14,165,233,0.50);
}
/* Icon animated khi card hover */
.sw-card:hover .sw-icon[b-s6y75c8uwn] {
    animation: icon-bounce-b-s6y75c8uwn 0.55s cubic-bezier(.34,1.56,.64,1);
}
@keyframes icon-bounce-b-s6y75c8uwn {
    0%   { transform: scale(1)    rotate(0deg);   }
    30%  { transform: scale(1.35) rotate(-12deg); }
    60%  { transform: scale(0.90) rotate(6deg);   }
    80%  { transform: scale(1.10) rotate(-3deg);  }
    100% { transform: scale(1)    rotate(0deg);   }
}

/* ── Header ── */
.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; }
.swi-indigo[b-s6y75c8uwn] { background: #e0e7ff; color: #4338ca; }
.sw-title[b-s6y75c8uwn]   { flex: 1; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Badge in header ── */
.sw-badge[b-s6y75c8uwn] {
    flex-shrink: 0;
    font-size: 0.62rem; font-weight: 700;
    padding: 2px 9px; border-radius: 20px;
    white-space: nowrap;
}
.sw-badge-rose[b-s6y75c8uwn]  { background: #fff1f2; color: #be123c; }
.sw-badge-red[b-s6y75c8uwn]   { background: #fef2f2; color: #dc2626; }
.sw-badge-blue[b-s6y75c8uwn]  { background: #dbeafe; color: #1d4ed8; }
.sw-badge-overdue[b-s6y75c8uwn] {
    background: #fef2f2; color: #dc2626;
    border: 1px solid #fecaca;
    animation: badge-overdue-blink-b-s6y75c8uwn 2s ease-in-out infinite;
}
@keyframes badge-overdue-blink-b-s6y75c8uwn {
    0%,100% { background: #fef2f2; }
    50%     { background: #fee2e2; }
}

/* ── KPI number row (4 cells) ── */
.sw-kpi-row[b-s6y75c8uwn] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid #f1f5f9;
}
.sw-kpi-cell[b-s6y75c8uwn] {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px;
    padding: 10px 4px;
    border-right: 1px solid #f1f5f9;
    transition: background 0.12s;
}
.sw-kpi-cell:last-child[b-s6y75c8uwn] { border-right: none; }
.sw-kpi-cell:hover[b-s6y75c8uwn] { background: #f8fbff; }
.sw-kpi-num[b-s6y75c8uwn] {
    font-size: 1.55rem; font-weight: 900; line-height: 1;
}
.kpi-rose[b-s6y75c8uwn]   { color: #e11d48; }
.kpi-red[b-s6y75c8uwn]    { color: #dc2626; }
.kpi-green[b-s6y75c8uwn]  { color: #16a34a; }
.kpi-cyan[b-s6y75c8uwn]   { color: #0891b2; }
.kpi-amber[b-s6y75c8uwn]  { color: #d97706; }
.kpi-blue[b-s6y75c8uwn]   { color: #2563eb; }
.kpi-orange[b-s6y75c8uwn] { color: #ea580c; }
.kpi-purple[b-s6y75c8uwn] { color: #7c3aed; }
.kpi-overdue-pulse[b-s6y75c8uwn] { animation: overdue-num-pulse-b-s6y75c8uwn 2s ease-in-out infinite; }
@keyframes overdue-num-pulse-b-s6y75c8uwn {
    0%,100% { opacity: 1; }
    50%     { opacity: 0.55; }
}
.sw-kpi-lbl[b-s6y75c8uwn] {
    font-size: 0.57rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.3px; color: #94a3b8; text-align: center;
    line-height: 1.2;
}

/* ── Divider ── */
.sw-divider[b-s6y75c8uwn] {
    height: 1px; background: #f1f5f9; flex-shrink: 0;
}

/* ── Stat row (3-4 items inline with icon) ── */
.sw-stat-row[b-s6y75c8uwn] {
    display: flex; align-items: stretch;
    flex: 1;
}
.sw-stat-item[b-s6y75c8uwn] {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
    padding: 8px 4px;
    border-right: 1px solid #f1f5f9;
    font-size: 0.70rem; transition: background 0.12s;
}
.sw-stat-item:last-child[b-s6y75c8uwn] { border-right: none; }
.sw-stat-item:hover[b-s6y75c8uwn] { background: #f8fbff; }
.sw-stat-item i[b-s6y75c8uwn]  { font-size: 0.75rem; }
.sw-stat-val[b-s6y75c8uwn] { font-size: 1.05rem; font-weight: 800; color: #0f172a; line-height: 1; }
.sw-stat-lbl[b-s6y75c8uwn] { font-size: 0.56rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; text-align: center; }

/* ── All Tasks – donut layout ── */
.sw-donut-layout[b-s6y75c8uwn] {
    display: flex; align-items: center; gap: 0;
    padding: 10px 12px 10px 10px;
    flex: 1;
}
.sw-donut-wrap[b-s6y75c8uwn] {
    flex-shrink: 0; width: 84px; height: 84px;
}
.sw-donut-svg[b-s6y75c8uwn] {
    width: 84px; height: 84px; display: block;
}
.sw-donut-legend[b-s6y75c8uwn] {
    flex: 1; display: flex; flex-direction: column; gap: 5px;
    padding-left: 12px; min-width: 0;
}
.sw-leg-item[b-s6y75c8uwn] {
    display: flex; align-items: center; gap: 5px;
    font-size: 0.70rem;
}
.sw-leg-dot[b-s6y75c8uwn] {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.sw-leg-name[b-s6y75c8uwn] { flex: 1; color: #334155; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-leg-num[b-s6y75c8uwn]  { font-weight: 800; color: #0f172a; min-width: 18px; text-align: right; }
.sw-leg-pct[b-s6y75c8uwn]  { color: #94a3b8; font-size: 0.63rem; min-width: 28px; text-align: right; }

/* ── Crew – status mini bars ── */
.sw-status-bars[b-s6y75c8uwn] {
    display: flex; flex-direction: column; gap: 5px;
    padding: 8px 12px;
    flex: 1; justify-content: center;
}
.sw-sbar-row[b-s6y75c8uwn] {
    display: flex; align-items: center; gap: 6px; font-size: 0.68rem;
}
.sw-sbar-name[b-s6y75c8uwn] {
    width: 80px; flex-shrink: 0;
    font-weight: 600; color: #1e293b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-align: right;
}
.sw-sbar-track[b-s6y75c8uwn] {
    flex: 1; height: 8px; border-radius: 4px; background: #f1f5f9; overflow: hidden;
}
.sw-sbar-fill[b-s6y75c8uwn] {
    height: 100%; border-radius: 4px;
    transition: width 0.55s cubic-bezier(.4,0,.2,1);
    opacity: 0.85;
}
.sw-sbar-num[b-s6y75c8uwn] {
    width: 22px; text-align: right;
    font-weight: 800; color: #0f172a; flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════
   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; }

/* ── Activity period toggle ── */
.act-period-group[b-s6y75c8uwn] {
    display: flex;
    align-items: center;
    gap: 2px;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 2px;
    flex-shrink: 0;
}
.act-period-btn[b-s6y75c8uwn] {
    padding: 2px 7px;
    font-size: 0.62rem; font-weight: 700;
    border: none; background: transparent;
    border-radius: 6px; color: #64748b;
    cursor: pointer; line-height: 1.6;
    transition: background 0.13s, color 0.13s;
    white-space: nowrap;
}
.act-period-btn:hover[b-s6y75c8uwn] { background: #e2e8f0; color: #1e293b; }
.act-period-active[b-s6y75c8uwn] {
    background: #6366f1 !important;
    color: #fff !important;
    box-shadow: 0 1px 4px rgba(99,102,241,0.25);
}
.act-period-active-amber[b-s6y75c8uwn] {
    background: #f59e0b !important;
    color: #fff !important;
    box-shadow: 0 1px 4px rgba(245,158,11,0.25);
}

.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: 8px 10px 6px;
    height: 160px;
    flex-shrink: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.line-svg[b-s6y75c8uwn] {
    flex: 1;
    width: 100%;
    min-height: 0;
    display: block;
    overflow: visible;
}
.line-labels[b-s6y75c8uwn] {
    display: flex;
    justify-content: space-between;
    padding: 0 6px;
    flex-shrink: 0;
    min-width: 0;
    overflow: hidden;
}
.line-labels span[b-s6y75c8uwn] {
    font-size: 0.58rem;
    color: #94a3b8;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
    text-align: center;
}
.line-lbl-hide[b-s6y75c8uwn] { visibility: hidden; width: 0; flex: 0 !important; padding: 0; }

/* ══════════════════════════════════════════════════════
   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;
    min-width: 0;
}
.db-act-row[b-s6y75c8uwn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    min-width: 0;
}
.db-act-row > *[b-s6y75c8uwn] {
    min-width: 0;
    overflow: visible;
}

/* ── 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; }
    .rt-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; }
}

/* ══════════════════════════════════════════════════════
   ROW 4 – Realtime Monitoring Widgets
══════════════════════════════════════════════════════ */
.rt-row[b-s6y75c8uwn] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    min-width: 0;
    align-items: stretch;
}

/* ── Base card ── */
.rt-card[b-s6y75c8uwn] {
    background: rgba(255,255,255,0.96);
    border-radius: 14px;
    border: 1px solid rgba(186,230,253,0.60);
    box-shadow: 0 4px 24px rgba(3,105,161,0.14), 0 1px 4px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    height: 480px;
    backdrop-filter: blur(4px);
    transition: transform 0.22s cubic-bezier(.34,1.56,.64,1), box-shadow 0.22s ease;
}
.rt-card:hover[b-s6y75c8uwn] {
    transform: translateY(-4px) scale(1.010);
    box-shadow: 0 12px 36px rgba(3,105,161,0.22), 0 2px 8px rgba(0,0,0,0.10);
    border-color: rgba(14,165,233,0.50);
}
.rt-card:hover .rt-icon[b-s6y75c8uwn] {
    animation: icon-bounce-b-s6y75c8uwn 0.55s cubic-bezier(.34,1.56,.64,1);
}

/* ── Header ── */
.rt-header[b-s6y75c8uwn] {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 12px;
    background: #f8fbff;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}
.rt-icon[b-s6y75c8uwn] {
    width: 24px; height: 24px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; flex-shrink: 0;
}
.rti-green[b-s6y75c8uwn]  { background: #dcfce7; color: #16a34a; }
.rti-indigo[b-s6y75c8uwn] { background: #e0e7ff; color: #4338ca; }
.rti-amber[b-s6y75c8uwn]  { background: #fef3c7; color: #d97706; }
.rt-title[b-s6y75c8uwn]   { flex: 1; font-size: 0.76rem; font-weight: 700; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* LIVE badge */
.rt-live[b-s6y75c8uwn] {
    display: flex; align-items: center; gap: 4px;
    font-size: 0.58rem; font-weight: 800; color: #16a34a;
    letter-spacing: 0.5px;
}
.rt-pulse[b-s6y75c8uwn] {
    display: inline-block;
    width: 6px; height: 6px; border-radius: 50%;
    background: #22c55e;
    animation: rtPulse-b-s6y75c8uwn 1.4s ease-in-out infinite;
}
@keyframes rtPulse-b-s6y75c8uwn {
    0%,100% { transform: scale(1); opacity:1; }
    50%      { transform: scale(1.6); opacity:0.5; }
}

/* Refresh button */
.rt-refresh-btn[b-s6y75c8uwn] {
    border: none; background: transparent; cursor: pointer;
    color: #94a3b8; font-size: 0.72rem;
    padding: 2px 5px; border-radius: 5px;
    transition: color 0.13s, background 0.13s;
}
.rt-refresh-btn:hover[b-s6y75c8uwn] { background: #f1f5f9; color: #334155; }

/* ── Fixed body (không cuộn – chart / gauges / KPIs) ── */
.rt-fixed-body[b-s6y75c8uwn] {
    flex-shrink: 0;
    padding: 10px 12px 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Sub-header between fixed and scroll sections ── */
.rt-sub-header[b-s6y75c8uwn] {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 12px;
    background: #f8fbff;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.63rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.4px;
    color: #94a3b8; flex-shrink: 0;
}
.rt-sub-count[b-s6y75c8uwn] { margin-left: auto; color: #cbd5e1; font-weight: 600; }

/* ── Scrollable body (slim modern scrollbar) ── */
.rt-scroll-body[b-s6y75c8uwn] {
    flex: 1;
    overflow-y: auto;
    padding: 6px 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.rt-scroll-body[b-s6y75c8uwn]::-webkit-scrollbar { width: 4px; }
.rt-scroll-body[b-s6y75c8uwn]::-webkit-scrollbar-track { background: transparent; }
.rt-scroll-body[b-s6y75c8uwn]::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.rt-scroll-body[b-s6y75c8uwn]::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Storage growth grid ── */
.rt-growth-grid[b-s6y75c8uwn] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-bottom: 2px;
}
.rt-growth-tile[b-s6y75c8uwn] {
    display: flex; flex-direction: column; align-items: center;
    background: #f8fbff; border-radius: 8px;
    padding: 6px 4px; gap: 1px;
    border: 1px solid #e2e8f0;
}
.rt-growth-val[b-s6y75c8uwn]  { font-size: 1rem; font-weight: 900; color: #f59e0b; line-height: 1.1; }
.rt-growth-unit[b-s6y75c8uwn] { font-size: 0.58rem; font-weight: 700; color: #0891b2; }
.rt-growth-lbl[b-s6y75c8uwn]  { font-size: 0.56rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }

/* ── Uptime row ── */
.rt-uptime-row[b-s6y75c8uwn] {
    display: flex; align-items: center; gap: 6px;
    background: #f0fdf4; border-radius: 8px;
    padding: 5px 10px; flex-shrink: 0;
}
.rt-uptime-lbl[b-s6y75c8uwn] { font-size: 0.63rem; font-weight: 700; color: #64748b; }
.rt-uptime-val[b-s6y75c8uwn] { font-size: 0.82rem; font-weight: 900; color: #15803d; margin-left: auto; }

/* ── Boot history row ── */
.rt-boot-row[b-s6y75c8uwn] {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.65rem; padding: 3px 0;
    border-bottom: 1px solid #f8fafc;
}
.rt-boot-dot[b-s6y75c8uwn] {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.rt-boot-type[b-s6y75c8uwn] { font-weight: 700; width: 76px; flex-shrink: 0; }
.rt-boot-time[b-s6y75c8uwn] { color: #64748b; margin-left: auto; }

/* ── KPI tiles (Users Online widget) ── */
.rt-kpi-row[b-s6y75c8uwn] {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
}
.rt-kpi-tile[b-s6y75c8uwn] {
    display: flex; flex-direction: column; align-items: center;
    border-radius: 10px; padding: 8px 4px; gap: 3px;
    border: 1px solid #e2e8f0;
}
.rt-kpi-green[b-s6y75c8uwn] { background: #f0fdf4; border-color: #bbf7d0; }
.rt-kpi-blue[b-s6y75c8uwn]  { background: #eff6ff; border-color: #bfdbfe; }
.rt-kpi-slate[b-s6y75c8uwn] { background: #f8fafc; border-color: #e2e8f0; }
.rt-kpi-num[b-s6y75c8uwn] { font-size: 1.5rem; font-weight: 900; line-height: 1; color: #0f172a; }
.rt-kpi-lbl[b-s6y75c8uwn] { font-size: 0.58rem; font-weight: 700; color: #64748b; display: flex; align-items: center; gap: 3px; }
.rt-kpi-green .rt-kpi-num[b-s6y75c8uwn] { color: #15803d; }
.rt-kpi-blue  .rt-kpi-num[b-s6y75c8uwn] { color: #1d4ed8; }

/* ── Permission breakdown – compact list ── */
.rt-perm-list[b-s6y75c8uwn] {
    display: flex; flex-direction: column; gap: 4px;
}
.rt-perm-item[b-s6y75c8uwn] {
    display: flex; align-items: center; gap: 5px;
}
.rt-perm-dot[b-s6y75c8uwn] {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.rt-perm-name[b-s6y75c8uwn] {
    width: 80px; flex-shrink: 0;
    font-size: 0.63rem; font-weight: 600; color: #1e293b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rt-perm-track[b-s6y75c8uwn] {
    flex: 1; height: 7px; border-radius: 4px; background: #f1f5f9; overflow: hidden;
}
.rt-perm-fill[b-s6y75c8uwn] { height: 100%; border-radius: 4px; transition: width 0.4s ease; }
.rt-perm-num[b-s6y75c8uwn] {
    width: 22px; text-align: right; flex-shrink: 0;
    font-size: 0.65rem; font-weight: 700; color: #0f172a;
}
.rt-perm-badge[b-s6y75c8uwn] {
    background: #dcfce7; color: #15803d;
    font-size: 0.54rem; font-weight: 800;
    padding: 1px 5px; border-radius: 20px; flex-shrink: 0;
}

/* ── Activity feed ── */
.rt-act-row[b-s6y75c8uwn] {
    display: flex; align-items: baseline; gap: 5px;
    font-size: 0.64rem; padding: 3px 0;
    border-bottom: 1px solid #f8fafc;
}
.rt-act-user[b-s6y75c8uwn]  { font-weight: 700; color: #1d4ed8; white-space: nowrap; flex-shrink: 0; max-width: 70px; overflow: hidden; text-overflow: ellipsis; }
.rt-act-title[b-s6y75c8uwn] { flex: 1; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-act-time[b-s6y75c8uwn]  { font-size: 0.58rem; color: #94a3b8; flex-shrink: 0; }
.rt-no-activity[b-s6y75c8uwn] { font-size: 0.64rem; color: #94a3b8; font-style: italic; }

/* ── Widget 2: gauges ── */
.rt-gauges[b-s6y75c8uwn] {
    display: flex; flex-direction: column; gap: 6px;
}
.rt-gauge-row[b-s6y75c8uwn] {
    display: flex; align-items: center; gap: 6px;
}
.rt-gauge-lbl[b-s6y75c8uwn] {
    width: 52px; flex-shrink: 0;
    font-size: 0.64rem; font-weight: 700; color: #334155;
    display: flex; align-items: center; gap: 3px;
}
.rt-gauge-track[b-s6y75c8uwn] {
    flex: 1; height: 10px; border-radius: 5px;
    background: #f1f5f9; overflow: hidden;
}
.rt-gauge-fill[b-s6y75c8uwn] {
    height: 100%; border-radius: 5px;
    transition: width 0.4s ease;
    min-width: 2px;
}
.rt-gauge-val[b-s6y75c8uwn] {
    width: 72px; text-align: right; flex-shrink: 0;
    font-size: 0.63rem; font-weight: 700; color: #0f172a;
}

/* History chart area */
.rt-history-chart[b-s6y75c8uwn] {
    display: flex; flex-direction: column; gap: 2px;
    min-height: 96px;
    border-top: 1px solid #f1f5f9; padding-top: 4px;
}
.rt-chart-legend[b-s6y75c8uwn] {
    display: flex; align-items: center; gap: 4px;
    font-size: 0.60rem; color: #64748b; font-weight: 600;
}
.rt-leg-dot[b-s6y75c8uwn] {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0;
}

/* ── Widget 1: storage ── */
.rt-disk-header[b-s6y75c8uwn] {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.70rem;
}
.rt-disk-drive[b-s6y75c8uwn] { font-weight: 700; color: #334155; }
.rt-disk-num[b-s6y75c8uwn]   { font-weight: 600; color: #64748b; font-size: 0.64rem; }
.rt-disk-track[b-s6y75c8uwn] {
    height: 18px; border-radius: 8px; background: #f1f5f9; overflow: hidden;
}
.rt-disk-fill[b-s6y75c8uwn] {
    height: 100%; border-radius: 8px; min-width: 4px;
    display: flex; align-items: center; padding-left: 8px;
    transition: width 0.5s ease;
    font-size: 0.62rem; font-weight: 700; color: #fff;
}
.rt-disk-sub[b-s6y75c8uwn] { font-size: 0.60rem; color: #64748b; }

.rt-folder-section[b-s6y75c8uwn], .rt-sql-section[b-s6y75c8uwn] {
    display: flex; flex-direction: column; gap: 3px;
    border-top: 1px solid #f1f5f9; padding-top: 5px;
    margin-top: 2px;
}
.rt-section-lbl[b-s6y75c8uwn] {
    font-size: 0.63rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.4px; color: #94a3b8; margin-bottom: 2px;
}
.rt-folder-row[b-s6y75c8uwn] {
    display: flex; align-items: center; gap: 5px;
}
.rt-folder-name[b-s6y75c8uwn] {
    width: 80px; flex-shrink: 0; font-size: 0.63rem; font-weight: 600; color: #1e293b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rt-folder-track[b-s6y75c8uwn] {
    flex: 1; height: 7px; border-radius: 4px; background: #f1f5f9; overflow: hidden;
}
.rt-folder-fill[b-s6y75c8uwn] {
    height: 100%; border-radius: 4px; background: #f59e0b;
    transition: width 0.4s ease;
}
.rt-folder-sz[b-s6y75c8uwn] {
    width: 48px; text-align: right; flex-shrink: 0;
    font-size: 0.60rem; font-weight: 700; color: #64748b;
}

/* SQL KPI grid */
.rt-sql-grid[b-s6y75c8uwn] {
    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 4px; margin-bottom: 4px;
}
.rt-sql-kpi[b-s6y75c8uwn] {
    display: flex; flex-direction: column; align-items: center;
    background: #f8fbff; border-radius: 8px;
    padding: 5px 4px; gap: 2px;
}
.rt-sql-val[b-s6y75c8uwn] { font-size: 0.88rem; font-weight: 900; line-height: 1; }
.rt-sql-lbl[b-s6y75c8uwn] { font-size: 0.56rem; font-weight: 600; color: #94a3b8; text-align: center; text-transform: uppercase; }

/* ══════════════════════════════════════════════════════
   SKELETON LOADING
══════════════════════════════════════════════════════ */
.sk-row[b-s6y75c8uwn] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}
.sk-row-tall .sk-card[b-s6y75c8uwn]  { height: 480px; }
.sk-row-chart .sk-card[b-s6y75c8uwn] { height: 280px; }
.sk-card[b-s6y75c8uwn] {
    height: 160px;
    border-radius: 14px;
    background: #e2e8f0;
}
/* Skeleton cho sw-card (Row1 widget cards) */
.sw-card.sk-shimmer[b-s6y75c8uwn] {
    height: 220px;
    min-height: 220px;
    border-radius: 14px;
}
/* Skeleton cho rt-card (Row4 realtime cards) */
.rt-card.sk-shimmer[b-s6y75c8uwn] {
    min-height: 420px;
    border-radius: 14px;
}
/* Inline skeleton shimmer cho boot history placeholder */
.sk-inline-shimmer[b-s6y75c8uwn] {
    background: linear-gradient(90deg, #e2e8f0 25%, #f0f4f8 50%, #e2e8f0 75%);
    background-size: 600px 100%;
    animation: skShimmer-b-s6y75c8uwn 1.4s infinite linear;
    border-radius: 4px;
}
.rt-boot-skeleton .rt-boot-row[b-s6y75c8uwn] {
    padding: 6px 0;
}
@keyframes skShimmer-b-s6y75c8uwn {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}
.sk-shimmer[b-s6y75c8uwn] {
    background: linear-gradient(90deg, #e2e8f0 25%, #f0f4f8 50%, #e2e8f0 75%);
    background-size: 1200px 100%;
    animation: skShimmer-b-s6y75c8uwn 1.4s infinite linear;
}


/* /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;
}