.booking-page-head { margin-bottom:1.35rem; }
.booking-page-head .salon-page-subtitle { max-width:680px; }
.booking-head-actions { display:flex; flex-wrap:wrap; gap:.65rem; }
.booking-head-actions .btn { min-height:42px; display:inline-flex; align-items:center; justify-content:center; }
.booking-summary { margin-bottom:1.25rem; }
.booking-summary-card { height:100%; border-radius:16px !important; }
.booking-summary-card .card-body { display:flex; align-items:center; gap:13px; padding:1rem; }
.booking-summary-icon { width:43px; height:43px; display:grid; place-items:center; flex:0 0 auto; border-radius:13px; font-size:1.25rem; }
.booking-summary-card small { display:block; color:var(--salon-muted); font-size:.72rem; font-weight:600; }
.booking-summary-card strong { display:block; margin-top:2px; color:var(--salon-ink); font-size:1.35rem; line-height:1; }
.booking-summary-card.is-all .booking-summary-icon { background:#f4dfe3; color:#8f5367; }
.booking-summary-card.is-today .booking-summary-icon { background:#e2eee9; color:#557e71; }
.booking-summary-card.is-pending .booking-summary-icon { background:#f7ead9; color:#a4753e; }
.booking-summary-card.is-online .booking-summary-icon { background:#e9e4f0; color:#6e5b82; }

.booking-filter-card { margin-bottom:1.25rem; }
.booking-filter-card .card-body { padding:1.1rem 1.2rem; }
.booking-filter-card .form-label { margin-bottom:.4rem; color:var(--salon-muted); font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.booking-list-card { overflow:hidden; }
.booking-list-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding:1.1rem 1.2rem; border-bottom:1px solid var(--salon-border); }
.booking-status-tabs { display:flex; flex-wrap:wrap; gap:.45rem; }
.booking-status-tab { padding:.48rem .82rem; border:1px solid var(--salon-border); border-radius:999px; background:#fff; color:var(--salon-muted); font-size:.75rem; font-weight:700; transition:.18s ease; }
.booking-status-tab:hover,.booking-status-tab.active { border-color:var(--salon-plum); background:var(--salon-plum); color:#fff; }
.booking-search { position:relative; width:min(100%,270px); }
.booking-search i { position:absolute; z-index:1; left:.85rem; top:50%; color:var(--salon-muted); font-size:1.1rem; transform:translateY(-50%); }
.booking-search .form-control { padding-left:2.45rem; }
.booking-table { margin:0; }
.booking-table thead th { white-space:nowrap; }
.booking-table tbody td { vertical-align:middle; }
.booking-number { display:flex; flex-direction:column; gap:3px; }
.booking-number strong { color:var(--salon-plum); font-size:.83rem; }
.booking-number small { color:var(--salon-muted); font-size:.66rem; }
.booking-customer { display:flex; align-items:center; gap:.75rem; min-width:190px; }
.booking-avatar { width:39px; height:39px; display:grid; place-items:center; flex:0 0 auto; border-radius:12px; background:linear-gradient(145deg,#f4dfe3,#ead2d8); color:var(--salon-plum); font-weight:800; }
.booking-customer strong { display:block; color:var(--salon-ink); font-size:.84rem; }
.booking-customer small { display:inline-flex; align-items:center; gap:3px; margin-top:3px; color:var(--salon-muted); font-size:.66rem; }
.booking-customer small.is-online { color:#6e5b82; }
.booking-schedule { min-width:145px; }
.booking-schedule strong { display:block; color:var(--salon-ink); font-size:.82rem; }
.booking-schedule span { display:inline-flex; align-items:center; gap:4px; margin-top:5px; color:var(--salon-rose); font-size:.72rem; font-weight:700; }
.booking-amount { white-space:nowrap; color:var(--salon-ink); font-weight:700; }
.booking-amount small { color:var(--salon-muted); font-weight:500; }
.booking-shop { display:flex; align-items:center; gap:5px; max-width:150px; color:var(--salon-muted); font-size:.74rem; }
.booking-shop span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.booking-status { display:inline-flex; align-items:center; gap:5px; padding:.42rem .68rem; border-radius:999px; font-size:.68rem; font-weight:800; white-space:nowrap; }
.booking-status::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.booking-status.status-confirm,.booking-status.status-confirmed { background:#e2eee9; color:#4e806c; }
.booking-status.status-cancel,.booking-status.status-cancelled { background:#f7e2e6; color:#ad5364; }
.booking-status.status-booking,.booking-status.status-pending { background:#f8ead8; color:#a06e36; }
.booking-status.status-completed { background:#e8e3ef; color:#69557b; }
.booking-status.status-default { background:#eee9eb; color:#786d75; }
.booking-view-btn { width:36px; height:36px; display:grid; place-items:center; margin:auto; border:1px solid var(--salon-border); border-radius:10px; background:#fff; color:var(--salon-plum); }
.booking-view-btn:hover { border-color:var(--salon-plum); background:var(--salon-plum); color:#fff; }
.booking-empty { padding:4rem 1rem !important; text-align:center; }
.booking-empty-icon { width:64px; height:64px; display:grid; place-items:center; margin:0 auto 1rem; border-radius:20px; background:var(--salon-blush); color:var(--salon-rose); font-size:1.8rem; }
.booking-empty h3 { color:var(--salon-plum-deep); font-family:'Playfair Display',serif; font-size:1.15rem; }
.booking-empty p { margin:0; color:var(--salon-muted); font-size:.8rem; }
.booking-table-footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.2rem; border-top:1px solid var(--salon-border); color:var(--salon-muted); font-size:.75rem; }
.booking-table-footer .dataTables_info { padding:0 !important; }
.booking-table-footer .pagination { margin:0; }

.booking-modal .modal-content { overflow:hidden; border:0; border-radius:20px; box-shadow:0 25px 70px rgba(62,32,56,.2); }
.booking-modal .modal-header { padding:1.25rem 1.4rem; border-bottom:1px solid var(--salon-border); background:linear-gradient(135deg,#fffaf6,#fbf0f1); }
.booking-modal .modal-title { color:var(--salon-plum-deep); font-family:'Playfair Display',serif; }
.booking-detail-hero { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding:1.15rem; border-radius:16px; background:var(--salon-blush); }
.booking-detail-customer { display:flex; align-items:center; gap:.85rem; }
.booking-detail-customer .booking-avatar { width:48px; height:48px; font-size:1rem; }
.booking-detail-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:1.15rem; }
.booking-detail-item { padding:1rem; border:1px solid var(--salon-border); border-radius:13px; }
.booking-detail-item small { display:block; margin-bottom:.35rem; color:var(--salon-muted); font-size:.66rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.booking-detail-item strong { color:var(--salon-ink); font-size:.84rem; }
.booking-notes { margin-top:1rem; padding:1rem; border-left:3px solid var(--salon-rose); border-radius:0 10px 10px 0; background:#fffaf7; color:var(--salon-muted); font-size:.8rem; line-height:1.7; }

@media (max-width:767.98px) {
  .booking-head-actions,.booking-head-actions .btn { width:100%; }
  .booking-list-toolbar { align-items:stretch; }
  .booking-search { width:100%; }
  .booking-table-footer { flex-direction:column; }
  .booking-detail-grid { grid-template-columns:1fr; }
}