/* =====================================================
   STYLE.CSS – TỐI ƯU, MODULED, HOVER & TRỰC QUAN
   ===================================================== */

/* ================= BODY ================= */
body {
    font-family: Arial, sans-serif;
    margin: 0; padding: 0;
    background: #f9f9f9;
    color: #333;
    transition: background 0.2s, color 0.2s;
}

/* ================= HEADER & NAV ================= */
header {
    background: #007bff;
    color: #fff;
    padding: 10px 20px;
}
header h1 { display: inline-block; margin: 0; }
nav a {
    color: #fff;
    margin-left: 15px;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.2s;
}
nav a:hover { color: #ffeb3b; text-decoration: underline; }

/* ================= MAIN ================= */
main { padding: 20px; transition: all 0.2s; }

/* ================= FLASH MESSAGES ================= */
.flash { list-style: none; padding: 0; margin: 10px 0; color: green; }
.flash li { margin-bottom: 5px; }
.flash-error { color: red; }

/* ================= BUTTONS ================= */
button, .btn {
    background: #007bff;
    color: #fff;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, transform 0.1s;
}
button:hover, .btn:hover { background: #0056b3; transform: translateY(-1px); }

/* Small / Warning Buttons */
.btn-small {
    padding: 2px 6px;
    font-size: 0.85rem;
}
.btn-warning, .btn-small.btn-warning {
    background: #ffc107;
    color: #000;
}
.btn-small:hover { transform: translateY(-1px); }

/* ================= TABLES ================= */
.table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    transition: all 0.2s;
}
.table th, .table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid #eee;
}
.table thead th { background: #f7f7f7; }
.table tbody tr:hover { background: #f1f5f9; transition: background 0.2s; }

/* Sortable columns */
th.sortable { cursor:pointer; position: relative; }
th.sortable::after { content:"↕"; position:absolute; right:6px; font-size:0.8rem; color:#666; }
th.sortable.asc::after { content:"↑"; color:#007bff; }
th.sortable.desc::after { content:"↓"; color:#007bff; }

/* ================= PT / TRAINERS ================= */
.pt-name {
    color: #0d6efd;
    cursor:pointer;
    text-decoration:none;
    transition: color 0.2s;
}
.pt-name:hover { color:#0056b3; text-decoration:underline; }
.detail-row { display:none; }
.detail-cell { background:#fafafa; padding:0; }
.pt-detail-container { padding:14px 14px 4px 14px; }

/* ================= BADGES & STATUS ================= */
.badge, .stat-badge {
    display:inline-block;
    padding:0.25rem 0.6rem;
    border-radius:999px;
    font-size:0.85rem;
    font-weight:600;
    transition: all 0.2s;
}
.badge-approved, .stat-badge.badge-approved { background:#d4edda; color:#155724; }
.badge-pending, .stat-badge.badge-pending { background:#fff3cd; color:#856404; }
.badge-cancel, .stat-badge.badge-cancel { background:#f8d7da; color:#721c24; }

/* Row status */
.status-pending { background:#fff3cd; color:#856404; }
.status-Approved { background:#d4edda; color:#155724; }
.status-cancel { background:#f8d7da; color:#721c24; }
.status-pending td, .status-Approved td, .status-cancel td { color:inherit; }

/* ================= STAT CARDS ================= */
.stat-cards { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.stat-card {
    padding:12px 16px;
    border-radius:8px;
    box-shadow:0 1px 3px rgba(0,0,0,0.06);
    min-width:140px;
    text-align:center;
    transition:transform 0.2s, box-shadow 0.2s;
}
.stat-card:hover { transform:translateY(-3px); box-shadow:0 4px 8px rgba(0,0,0,0.15); }
.stat-card .label { font-size:0.85rem; color:#666; }
.stat-card .value { font-size:1.6rem; font-weight:700; margin-top:6px; }
.card-approved { background:#dff0df; color:#114b23; }
.card-cancel { background:#fde2e6; color:#6b0f1a; }
.card-pending { background:#fff8e1; color:#856404; }
.card-total { background:#eef2f6; color:#1f2937; }

/* ================= FILTER ROWS ================= */
.filter-row { display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.filter-row input[type="date"], .small-input {
    padding:6px 8px; border-radius:4px; border:1px solid #ccc;
    transition:border-color 0.2s, box-shadow 0.2s;
}
.filter-row input[type="date"]:focus, .small-input:focus {
    border-color:#007bff; box-shadow:0 0 4px rgba(0,123,255,0.3);
}
.filter-row button { padding:8px 12px; border-radius:4px; border:none; background:#007bff; color:white; cursor:pointer; transition:background 0.2s, transform 0.1s; }
.filter-row button:hover { background:#0056b3; transform:translateY(-1px); }
.note-small { font-size:0.9rem; color:#666; margin-top:6px; }
.section-title { margin-top:28px; font-size:1.1rem; font-weight:600; border-bottom:1px solid #ddd; padding-bottom:4px; }

/* ================= FORMS ================= */
input, select { font-family:inherit; font-size:1em; border:1px solid #ccc; border-radius:4px; box-sizing:border-box; transition:border-color 0.2s, box-shadow 0.2s; }
input:focus, select:focus { border-color:#007bff; box-shadow:0 0 4px rgba(0,123,255,0.3); }
.editable { min-width:80px; padding:2px 4px; border-radius:3px; }
.editable:focus { outline:2px solid #007bff; background:#eef5ff; }
.form-add-customer, .form-add-user, .edit-form-inline, .form-add-show { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:20px; }
.form-add-customer input, .form-add-customer select, .form-add-customer button,
.form-add-user input, .form-add-user select, .form-add-user button,
.edit-form-inline input, .edit-form-inline select, .edit-form-inline button,
.form-add-show input, .form-add-show button { padding:4px 8px; }
.edit-form-inline button, .form-add-customer button, .form-add-user button, .form-add-show button { cursor:pointer; transition:background 0.2s, transform 0.1s; }
.edit-form-inline button:hover, .form-add-customer button:hover, .form-add-user button:hover, .form-add-show button:hover { background:#0056b3; transform:translateY(-1px); }

/* Inline / Small inputs */
.inline-form { display:inline-flex; gap:5px; align-items:center; }

/* ================= MODAL ================= */
.modal { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); align-items:center; justify-content:center; transition:opacity 0.2s; }
.modal-content { background:white; padding:20px; border-radius:6px; width:400px; box-shadow:0 4px 12px rgba(0,0,0,0.2); transition:transform 0.2s; }
.modal-content.show { transform:translateY(0); }
.modal-actions { text-align:right; margin-top:12px; }

/* ================= FOOTER & HR ================= */
footer { text-align:center; padding:10px 0; color:#555; }
hr { border:0; border-top:1px solid #ccc; margin:10px 0; }

/* Form Edit inline – mặc định ẩn */
.edit-form-row {
    display: none;
}
.edit-form-inline {
    gap:6px;
    align-items:center;
    flex-wrap:wrap;
}