/* ==========================================================================
   portal-specific.css — Company Portal (trang chủ hệ thống kỹ thuật WCM)
   --------------------------------------------------------------------------
   Nguyên tắc bố cục: KHÔNG hero, KHÔNG đoạn giới thiệu. Cục màu đỏ duy nhất
   của trang chính là HEADER (đồng bộ với .ds-header của các dashboard con).
   Vừa vào trang là thấy ngay lưới dashboard — mọi chữ mô tả thừa đã bỏ.

   Giọng giao diện: mềm và tiết chế. Một màu đỏ thương hiệu, còn lại là trung
   tính; chữ thường (không in hoa), độ đậm tối đa 600, không gradient, không
   bóng đổ khi đứng yên. Thẻ chỉ "thức dậy" khi rê chuột hoặc được focus.
   Trang này không dùng Tailwind, toàn bộ layout nằm trong file này.
   ========================================================================== */

:root {
    --wc-red: #a11d2b;
    --wc-red-deep: #8a1824;
    --wc-red-soft: #fbeeef;

    --pk-paper: #f5f6f8;
    --pk-surface: #ffffff;
    --pk-ink: #1f2430;
    --pk-ink-2: #4a5263;
    --pk-muted: #6b7384;
    --pk-line: #e6e8ec;
    --pk-line-strong: #d3d7de;
    --pk-tile: #f1f2f5;

    --pk-radius: 14px;
    --pk-shell: 1160px;
    --pk-ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

body.portal-body {
    margin: 0;
    min-height: 100vh;
    background-color: var(--pk-paper);
    color: var(--pk-ink);
    font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   HEADER — dải đỏ phẳng, dính trên cùng
   ========================================================================== */
.pk-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--wc-red);
    color: #fff;
}

.pk-header-inner {
    max-width: var(--pk-shell);
    margin: 0 auto;
    padding: 0.9rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ---- Cụm nhận diện: chỉ 1 chỗ duy nhất mang tên bộ phận ---- */
.pk-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

/* Logo chuẩn WinCommerce (chép từ app PnF). Chữ W đỏ sẽ chìm trên nền đỏ nên
   logo luôn nằm trên một tấm trắng. */
.pk-logo {
    display: flex;
    align-items: center;
    height: 2.35rem;
    padding: 0 0.55rem;
    border-radius: 10px;
    background: #fff;
    flex-shrink: 0;
}
.pk-logo img { display: block; height: 1.75rem; width: auto; }

/* Ẩn khỏi mắt nhưng vẫn đọc được bằng trình đọc màn hình — trang cần đúng một
   <h1> để cấu trúc tiêu đề hợp lệ, trong khi thiết kế không có chỗ cho nó. */
.pk-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.pk-brand-text {
    padding-left: 0.75rem;
    border-left: 1px solid rgba(255, 255, 255, .28);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

/* ---- Công cụ bên phải header ---- */
.pk-header-tools {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 260px;
    justify-content: flex-end;
}

/* Ô tìm kiếm chìm vào nền đỏ khi nghỉ, hoá thành ô trắng khi đang gõ. */
.pk-search {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    height: 2.4rem;
    max-width: 320px;
    flex: 1 1 200px;
    padding: 0 0.9rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, .13);
    color: rgba(255, 255, 255, .75);
    cursor: text;
    transition: background-color .2s var(--pk-ease), color .2s var(--pk-ease);
}
.pk-search:hover { background: rgba(255, 255, 255, .18); }
.pk-search:focus-within {
    background: #fff;
    color: var(--pk-muted);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .28);
}
.pk-search-icon { display: flex; flex-shrink: 0; }
.pk-search-icon svg { width: 0.95rem; height: 0.95rem; display: block; }
.pk-search input {
    flex: 1;
    min-width: 0;
    background: none;
    border: 0;
    outline: none;
    color: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 400;
}
.pk-search:focus-within input { color: var(--pk-ink); }
.pk-search input::placeholder { color: rgba(255, 255, 255, .68); }
.pk-search:focus-within input::placeholder { color: #9aa1ae; }
.pk-search:not(:focus-within) input::-webkit-search-cancel-button { filter: invert(1) opacity(.7); }

.pk-count {
    flex-shrink: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, .78);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   LƯỚI DASHBOARD — nội dung đầu tiên nhìn thấy khi vào trang
   ========================================================================== */
.pk-main {
    flex: 1;
    width: 100%;
    max-width: var(--pk-shell);
    margin: 0 auto;
    padding: 2rem 1.5rem 2.5rem;
}

.pk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    animation: pkFade .35s var(--pk-ease) both;
}

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

/* ---- Thẻ dashboard ---- */
.pk-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.25rem 1.1rem;
    background: var(--pk-surface);
    border: 1px solid var(--pk-line);
    border-radius: var(--pk-radius);
    text-decoration: none;
    color: inherit;
    transition: border-color .2s var(--pk-ease), box-shadow .25s var(--pk-ease),
                transform .25s var(--pk-ease);
}

/* Rê chuột: thẻ nhấc nhẹ lên, viền ngả đỏ nhạt, bóng mềm; tên và icon chuyển
   sang đỏ thương hiệu. Không phóng to (scale) để chữ không bị nhoè. */
.pk-card:hover {
    transform: translateY(-3px);
    border-color: #e9c3c7;
    box-shadow: 0 14px 30px -18px rgba(161, 29, 43, .35);
}
.pk-card:active { transform: translateY(-1px); }

.pk-card:focus-visible {
    outline: 2px solid var(--wc-red);
    outline-offset: 2px;
}

/* Icon bên trái, tên + mô tả bên phải */
.pk-card-main {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    flex: 1;
}
.pk-card-icon { flex-shrink: 0; }

.pk-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pk-tile);
    color: var(--pk-ink-2);
    transition: background-color .2s var(--pk-ease), color .2s var(--pk-ease);
}
.pk-card-icon svg { width: 1.2rem; height: 1.2rem; display: block; }
.pk-card:hover .pk-card-icon,
.pk-card:focus-visible .pk-card-icon {
    background: var(--wc-red-soft);
    color: var(--wc-red);
}

/* ---- Trạng thái app (chân thẻ, bên phải) — lấy thật từ /api/status ----
   Chấm luôn có chữ đi kèm, không để màu đứng một mình. Màu theo bảng trạng
   thái chung của hệ: mint chạy · amber đang khởi động · rose không phản hồi. */
.pk-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--pk-muted);
    white-space: nowrap;
}
.pk-status[data-state="up"] { color: var(--pk-ink-2); }
.pk-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #c4cedb;
}
.pk-status[data-state="up"] .pk-status-dot { background: #16b884; }
.pk-status[data-state="waking"] .pk-status-dot {
    background: #f6aa2a;
    animation: pkBreathe 1.4s ease-in-out infinite;
}
.pk-status[data-state="down"] .pk-status-dot { background: #f24b64; }

/* ---- Chân thẻ: nhãn bên trái, trạng thái bên phải, cách bằng vạch mảnh.
   Không còn nút "Mở trong tab mới": cả thẻ là liên kết, hiệu ứng rê chuột đã
   cho biết bấm được. ---- */
.pk-card-foot .pk-status { margin-left: auto; }
.pk-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 -1.25rem -1.1rem;
    padding: 0.7rem 1.25rem;
    border-top: 1px solid var(--pk-line);
}

.pk-tag {
    font-size: 0.8rem;
    color: var(--pk-muted);
    white-space: nowrap;
}

.pk-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}
.pk-card-name {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--pk-ink);
    transition: color .2s var(--pk-ease);
}
.pk-card:hover .pk-card-name,
.pk-card:focus-visible .pk-card-name { color: var(--wc-red); }
.pk-card-desc {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--pk-muted);
}

/* Mục có URL không hợp lệ trong projects.json: vẫn hiện để người quản trị thấy
   mà sửa, nhưng không giả vờ bấm được. */
.pk-card.is-broken { opacity: .55; cursor: not-allowed; }
.pk-card.is-broken:hover { transform: none; border-color: var(--pk-line); box-shadow: none; }
.pk-card.is-broken:hover .pk-card-icon { background: var(--pk-tile); color: var(--pk-ink-2); }
.pk-card.is-broken:hover .pk-card-name { color: var(--pk-ink); }

/* ==========================================================================
   TRẠNG THÁI PHỤ — chờ tải, rỗng, lỗi
   ========================================================================== */
.pk-skeleton {
    height: 156px;
    border-radius: var(--pk-radius);
    background: #eceef1;
    animation: pkBreathe 1.6s ease-in-out infinite;
}
@keyframes pkBreathe {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
}

.pk-empty,
.pk-error {
    margin: 3rem auto 0;
    max-width: 30rem;
    text-align: center;
    font-size: 0.95rem;
    color: var(--pk-muted);
}
.pk-error { grid-column: 1 / -1; margin-top: 1.5rem; }
.pk-error p { margin: 0; }

/* ==========================================================================
   FOOTER — 1 dòng, không lặp lại tên bộ phận
   ========================================================================== */
.pk-footer {
    max-width: var(--pk-shell);
    width: 100%;
    margin: 0 auto;
    padding: 0 1.5rem 1.75rem;
    font-size: 0.8rem;
    color: #9aa1ae;
}

/* ==========================================================================
   MÀN HÌNH NHỎ
   ========================================================================== */
@media (max-width: 640px) {
    .pk-header-inner { padding: 0.75rem 1rem; gap: 0.75rem; }
    .pk-header-tools { flex-basis: 100%; justify-content: space-between; }
    .pk-search { max-width: none; }
    .pk-main { padding: 1.25rem 1rem 2rem; }
    .pk-grid { grid-template-columns: 1fr; gap: 0.75rem; }
    .pk-footer { padding: 0 1rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pk-grid, .pk-skeleton, .pk-status-dot { animation: none !important; }
    .pk-card, .pk-card *, .pk-search { transition: none !important; }
    .pk-card:hover, .pk-card:active { transform: none; }
}