/* Ép container full width */
.container {
    max-width: 80% !important;
}

/* ===========================
   ZEBRA ROWS (xen kẽ nền xám)
   ===========================*/
table.table-custom tbody tr:nth-of-type(odd) {
    background-color: #ffffff !important;
}

table.table-custom tbody tr:nth-of-type(even) {
    background-color: #f7f9fc !important;
}

table.table-custom tbody tr:hover {
    background-color: #eef2f7 !important;
}

/* ===========================
   SUMMARY ROWS
   ===========================*/
table.table-custom tfoot .table-summary {
    background-color: #f1f3f5 !important;
    font-weight: 600;
}

table.table-custom tfoot .table-summary td {
    border-top: 2px solid #dee2e6;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

/* ===========================
   Table spacing & font
   ===========================*/
table.table-custom td,
table.table-custom th {
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 0.875rem;
}

table.table-custom thead th {
    font-size: 0.9rem;
    white-space: nowrap;
}

table.table-custom td.text-end {
    font-variant-numeric: tabular-nums;
}

/* Badge tối ưu */
table.table-custom td .badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

/* =======================================
   ZEBRA ROWS – per-cell
   =======================================*/
table.table-custom tbody tr:nth-child(odd) td {
    background-color: #ffffff !important;
}

table.table-custom tbody tr:nth-child(even) td {
    background-color: #f2f3f5 !important;
}

/* Hover */
table.table-custom tbody tr:hover td {
    background-color: #e9eef5 !important;
}

/* ===========================
   Filter bar
   ===========================*/
.orders-filter .form-control-sm,
.orders-filter .form-select-sm {
    font-size: 0.85rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.orders-filter .btn-sm {
    font-size: 0.8rem;
    padding: 0.25rem 0.6rem;
}

.orders-filter .filter-actions {
    gap: 0.25rem;
}

/* ===========================
   Header + summary card
   ===========================*/
.orders-header-actions .btn {
    white-space: nowrap;
}

.orders-summary-card .h3 {
    font-size: 1.5rem;
}

.orders-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ===========================
   MOBILE
   ===========================*/
@media (max-width: 768px) {
    .orders-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .orders-header-actions {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .orders-summary-card .h3 {
        font-size: 1.3rem;
    }

    table.table-custom {
        min-width: 980px;
    }

    table.table-custom th,
    table.table-custom td {
        padding-top: 4px;
        padding-bottom: 4px;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .orders-table-wrapper {
        margin: 0 -8px;
        padding: 0 8px;
    }
}

/* Ẩn mặc định 2 cột Dài tấm / Khổ tấm trên mobile */
@media (max-width: 576px) {
    th.col-sheet-length,
    td.col-sheet-length,
    th.col-sheet-width,
    td.col-sheet-width {
        display: none !important;
    }
}

/* =========================================
   ORDER ACTIONS – nhóm 3 nút / dòng
   =========================================*/
.order-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 210px;
}

/* Hàng nút */
.order-actions-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

/* Nút chung */
.order-actions .btn {
    width: 100%;
    padding: 0.32rem 0.4rem;
    font-size: 0.8rem;
    border-radius: 5px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* Icon trong nút */
.order-actions .btn i {
    font-style: normal;  /* dùng ký tự icon */
    font-size: 0.95em;
}

/* Nhẹ màu – ngoại trừ Delete */
.order-actions .btn-outline-dark,
.order-actions .btn-primary,
.order-actions .btn-outline-success,
.order-actions .btn-outline-primary,
.order-actions .btn-outline-warning {
    background-color: white;
    color: #333;
    border: 1px solid #ced4da;
}

.order-actions .btn-outline-dark:hover,
.order-actions .btn-primary:hover,
.order-actions .btn-outline-success:hover,
.order-actions .btn-outline-primary:hover,
.order-actions .btn-outline-warning:hover {
    background-color: #f1f3f5;
}

/* Delete vẫn đỏ */
.order-actions .btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

/* ===========================
   ICON REPLACEMENT (buttons)
   ===========================*/
.btn-copy::before {
    content: "📋 ";
}
.btn-edit::before {
    content: "✏️ ";
}
.btn-nl::before {
    content: "📦 ";
}
.btn-crease::before {
    content: "📘 ";
}
.btn-glue::before {
    content: "📗 ";
}
.btn-delete::before {
    content: "🗑️ ";
}

/* ===========================
   MOBILE
   ===========================*/
@media (max-width: 768px) {

    .order-actions {
        min-width: 100%;
    }

    .order-actions-row {
        grid-template-columns: repeat(3, 1fr);
    }

    .order-actions .btn {
        padding: 0.3rem 0.35rem;
        font-size: 0.8rem;
    }
}