/* Tuân thủ PSR-12 (cho CSS không áp dụng trực tiếp, nhưng giữ code sạch sẽ) */

/* CSS tùy chỉnh nếu cần */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f8f9fa; /* Màu nền nhẹ nhàng */
}

.navbar {
    margin-bottom: 20px;
}

.card-header h4 {
    margin-bottom: 0;
}

.table th, .table td {
    vertical-align: middle;
}

.completed-task {
    /* text-decoration: line-through; */ /* Đã dùng trong style inline của header */
    background-color: #e9ecef; /* Màu nền khác cho task hoàn thành */
}

/* Ví dụ: trong header.php hoặc style.css */
.completed-task td {
    text-decoration: line-through; /* Đây là dòng gây ra gạch ngang */
    color: #6c757d;
}

.task-actions .btn {
    padding: .25rem .5rem; /* Nút nhỏ hơn */
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
}

/* public/css/style.css */
.task-bg-green {
    background-color: #d4edda !important; /* Màu xanh lá nhạt */
}

.task-bg-green td {
    color: #155724 !important; /* Màu chữ xanh đậm trên nền xanh lá */
    text-decoration: none !important; /* Đảm bảo KHÔNG có gạch ngang chữ */
}

/* Trong public/css/style.css */

@media (max-width: 992px) { /* Hoặc breakpoint bạn đã xác định là hoạt động */
    .table thead {
        display: none;
    }

    .table tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: .25rem;
        box-shadow: 0 2px 4px rgba(0,0,0,.05);
    }

    .table tbody td {
        display: block;
        width: 100%; /* Đảm bảo td chiếm toàn bộ chiều rộng của tr (thường là mặc định cho block) */
        box-sizing: border-box; /* Quan trọng: padding và border sẽ được tính vào width/height */
        text-align: left !important;
        padding: 10px; /* Padding chung cho ô, ví dụ: 10px */
        /* GIẢM padding-left để text có nhiều không gian hơn */
        padding-left: 95px; /* Thử với giá trị nhỏ hơn, ví dụ 95px. Điều chỉnh tùy ý. */
        position: relative;
        border-top: none;
        min-height: 40px; /* Chiều cao tối thiểu cho mỗi "dòng" thông tin */
    }

    .table tbody tr td:first-child {
        /* border-top: 1px solid #dee2e6; */ /* Bỏ nếu tr đã có border */
    }
    .table tbody td:last-child {
        border-bottom: none;
    }

    .table tbody td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px; /* Vị trí bắt đầu của nhãn, tính từ lề trái của td */
        top: 10px;  /* Căn lề trên của nhãn, khớp với padding chung của td */
        /* GIẢM width của nhãn */
        width: 75px; /* Độ rộng của nhãn, ví dụ 75px. Điều chỉnh tùy ý. */
        font-weight: bold;
        text-align: left;
        white-space: normal;
        font-size: 0.9em;
        color: #495057;
    }

    /* Xử lý riêng cho cột hành động nếu không dùng data-label kiểu này */
    .table tbody td.task-actions {
   /*     padding-left: 10px;  Padding trái bình thường cho cột actions */
        background-color: #f8f9fa;
    }
    .table tbody td.task-actions::before {
        display: none; /* Không hiển thị data-label cho cột actions */
    }
    .table tbody td.task-actions form,
    .table tbody td.task-actions a {
        display: inline-block;
        margin-right: 5px;
        margin-bottom: 5px;
    }
}