/* ================================================================
   ops-responsive.css — OpsCenter: responsive cho phần NỘI DUNG trang.
   Vỏ ngoài (sidebar off-canvas, header) đã responsive sẵn do dùng chung
   theme-sidebar-icon.css / responsive.css với AdminSite; file này chỉ lo
   những gì OpsCenter tự dựng: bảng 9–12 cột, form, modal, log build.
   Nạp SAU tất cả theme-*.css trong _Layout/_AuthLayout để override thắng.
   Màu: CHỈ dùng token của _variables.css.
   ================================================================ */

/* ---------------------------------------------------------------
   Chung: giá trị dài (install-GUID, đường dẫn artifact, mã kích hoạt)
   phải được phép ngắt dòng, nếu không nó đẩy cả bảng/thẻ tràn ngang.
   --------------------------------------------------------------- */
.text-monospace,
.ops-break {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Header card có nút bên phải: cho phép xuống dòng thay vì bóp tiêu đề. */
.card-header .d-flex.justify-content-between {
    flex-wrap: wrap;
    gap: 8px;
}

/* Cột chia đôi trong modal (Đường A / Đường B của reissue): trên desktop là
   vạch dọc, dưới md phải thành vạch NGANG — border-end ở màn hẹp là một
   đường kẻ lửng giữa trang, trông như lỗi render. */
.ops-split { padding-bottom: 14px; }
.ops-split:not(:last-child) { border-bottom: 1px solid var(--border); margin-bottom: 14px; }
@media (min-width: 768px) {
    .ops-split { padding-bottom: 0; }
    .ops-split:not(:last-child) {
        border-bottom: 0;
        margin-bottom: 0;
        border-right: 1px solid var(--border);
    }
}

/* Ô mã + nút "Sao chép": ở màn hẹp cho nút xuống dòng, đừng bóp ô mã còn 40px. */
@media (max-width: 575.98px) {
    .ops-code-group,
    .modal-result .input-group {
        flex-wrap: wrap;
    }
    .ops-code-group > .form-control,
    .modal-result .input-group > .form-control {
        flex: 1 1 100%;
        border-radius: var(--radius-sm) !important;
        margin-bottom: 6px;
    }
    .ops-code-group > .btn,
    .modal-result .input-group > .btn {
        flex: 1 1 100%;
        border-radius: var(--radius-sm) !important;
    }
}

/* Bảng "nhãn — giá trị" (chi tiết mã đã phát, kết quả phát hành): nhãn cột trái cố
   định để giá trị không bị đẩy sang tận mép phải khi thẻ rộng; dưới sm thì xếp dọc. */
.ops-kv > tbody > tr > th {
    width: 180px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}
@media (max-width: 575.98px) {
    /* padding ngang 32px là của style.css (vendor) cho mọi ô bảng — ở chế độ xếp dọc nó
       thành thụt lề vô nghĩa, phải triệt tận nơi. */
    .ops-kv > tbody > tr > th,
    .ops-kv > tbody > tr > td {
        display: block;
        width: auto;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .ops-kv > tbody > tr > th { padding-bottom: 0 !important; }
    .ops-kv > tbody > tr > td { padding-top: 0 !important; padding-bottom: 10px !important; }
}

/* Log build: giữ nguyên định dạng, cuộn ngang trong khung của nó. */
.ops-log {
    max-width: 100%;
    overflow: auto;
    max-height: 26rem;
    font-size: 12.5px;
    line-height: 1.55;
    margin-bottom: 0;
}

/* Danh sách artifact (đường dẫn tuyệt đối rất dài). */
.ops-artifact-list .list-group-item { overflow-wrap: anywhere; font-size: 13px; }

/* Footer card: dưới sm thì nút xếp dọc, full width — dễ bấm bằng ngón tay. */
@media (max-width: 575.98px) {
    .card-footer.text-end {
        display: flex;
        flex-direction: column-reverse;
        gap: 8px;
    }
    .card-footer.text-end > .btn { width: 100%; }
    .modal-footer { flex-direction: column-reverse; gap: 8px; }
    .modal-footer > .btn { width: 100%; margin: 0; }
}

/* ================================================================
   BẢNG XẾP THẺ — .table-stack
   Bảng của OpsCenter có 9–12 cột (lịch sử phát hành, danh sách khách
   hàng). Dưới 992px, cuộn ngang là không dùng được: người xem không
   biết mình đang ở cột nào. Mỗi <tr> thành một thẻ, mỗi <td> một dòng
   "nhãn — giá trị"; nhãn lấy từ data-label của chính ô đó.
   => THÊM CỘT MỚI vào bảng thì PHẢI thêm data-label cho <td> tương ứng,
      không thì ở màn hẹp ô đó hiện không có nhãn.
   ================================================================ */
@media (max-width: 991.98px) {
    .table-stack { border: 0 !important; }
    .table-stack thead { display: none !important; }
    .table-stack,
    .table-stack > tbody,
    .table-stack > tbody > tr,
    .table-stack > tbody > tr > td {
        display: block !important;
        width: auto !important;
    }
    .table-stack > tbody > tr {
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-md);
        background: var(--white);
        box-shadow: var(--shadow-sm);
        padding: 6px 14px;
        margin-bottom: 10px;
    }
    .table-stack > tbody > tr:last-child { margin-bottom: 0; }
    .table-stack > tbody > tr > td {
        border: 0 !important;
        border-bottom: 1px dashed var(--border) !important;
        padding: 7px 0 !important;
        text-align: left !important;
        white-space: normal !important;
    }
    .table-stack > tbody > tr > td:last-child { border-bottom: 0 !important; }
    /* Nhãn cột bên trái, giá trị bên phải — đọc như một danh sách thuộc tính. */
    .table-stack > tbody > tr > td[data-label]:before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .02em;
        color: var(--text-muted);
        margin-bottom: 2px;
    }
    /* Ô hành động: nút xếp lưới 2 cột cho đủ to để bấm bằng ngón tay. */
    .table-stack > tbody > tr > td.ops-actions { display: flex !important; flex-wrap: wrap; gap: 6px; }
    /* td là flex container nên ::before (nhãn cột) cũng là flex item — phải chiếm cả dòng,
       nếu không nhãn nằm CÙNG HÀNG với nút, khác hẳn các ô còn lại. */
    .table-stack > tbody > tr > td.ops-actions:before { flex: 1 1 100%; }
    .table-stack > tbody > tr > td.ops-actions > .btn,
    .table-stack > tbody > tr > td.ops-actions > a.btn { flex: 1 1 calc(50% - 3px); }
    /* Dòng "chưa có dữ liệu" (colspan) không cần khung thẻ. */
    .table-stack > tbody > tr.ops-empty-row {
        border: 0 !important;
        box-shadow: none;
        background: transparent;
        padding: 0;
    }
}

/* Nhãn chữ cho nút chỉ-có-icon: ẩn trên desktop (đã có tooltipster), hiện khi xếp thẻ. */
.ops-action-label { display: none; }
@media (max-width: 991.98px) {
    .ops-action-label { display: inline; margin-left: 6px; }
}

/* Cột hành động trên desktop giữ nguyên hành vi cũ (không xuống dòng). */
@media (min-width: 992px) {
    td.ops-actions { white-space: nowrap; }
}

/* ================================================================
   Form Release (Build gói): checkbox RID nằm ngang cho đỡ trống trải,
   ô nhập giới hạn chiều rộng đọc trên màn rộng.
   ================================================================ */
.ops-form-narrow { max-width: 720px; }
.ops-rid-group { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* Chữ "OpsCenter" cạnh logo: dưới sm thì bỏ, chỉ giữ logo — nếu không header bị
   đẩy chật giữa nút hamburger và cụm nút bên phải. */
@media (max-width: 575.98px) {
    .ops-wordmark { display: none; }
}

/* ================================================================
   Trang auth (_AuthLayout): thẻ đăng nhập không được dính sát viền
   trên điện thoại nhỏ.
   ================================================================ */
@media (max-width: 575.98px) {
    .auth-card { padding: 28px 20px !important; }
}