/* ============================================================
   SCHEDMATE — BOOKINGS.CSS (FINAL • CLEAN • SINGLE SOURCE)
   - Removes “daming guhit” (no per-cell borders)
   - Locked columns (Price + Actions)
   - Perfect alignment (no top hacks)
   - Uses dashboard tokens when available
============================================================ */

:root{
  /* fallbacks (in case tokens missing) */
  --bk-border: var(--sm-border, rgba(15,23,42,0.10));
  --bk-text:   var(--sm-text, rgba(15,23,42,0.92));
  --bk-muted:  var(--sm-muted, rgba(15,23,42,0.62));
  --bk-card:   var(--sm-card, rgba(255,255,255,0.92));
  --bk-card2:  var(--sm-card2, rgba(15,23,42,0.04));
  --bk-shadow: var(--sm-shadow2, 0 10px 28px rgba(15,23,42,0.08));
  --bk-radius: var(--sm-radius2, 14px);
  --bk-hover:  rgba(91,92,255,0.06);
}

/* ============================================================
   SCOPE RESET (bookings only) — kills weird “guhit” sources
============================================================ */
#view-bookings .sm-table-bookings,
#view-bookings .sm-table-bookings *{
  box-shadow: none !important;
  text-shadow: none !important;
}

#view-bookings .sm-table-bookings td::before,
#view-bookings .sm-table-bookings td::after,
#view-bookings .sm-table-bookings th::before,
#view-bookings .sm-table-bookings th::after{
  content: none !important;
}

/* ============================================================
   PANEL / WRAP
============================================================ */
#view-bookings .sm-panel{
  background: linear-gradient(180deg, var(--bk-card), rgba(255,255,255,0.70));
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius);
  box-shadow: var(--bk-shadow);
  overflow: hidden;
}

/* ============================================================
   TABLE BASE
============================================================ */
#view-bookings .sm-table-bookings{
  width: 100%;
  border-collapse: separate; /* IMPORTANT: prevents “double-line” looks */
  border-spacing: 0;
  table-layout: auto;
}

/* REMOVE any default borders from global table styles */
#view-bookings .sm-table-bookings th,
#view-bookings .sm-table-bookings td{
  border: 0 !important;          /* ✅ NO per-cell borders */
  padding: 14px 16px !important; /* ✅ override dashboard.css padding 0 18px */
  font-size: 14px;
  vertical-align: middle;
  color: var(--bk-text);
  background: transparent;
}

/* HEADER */
#view-bookings .sm-table-bookings thead th{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--bk-muted);
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.55));
  white-space: nowrap;
  text-align: left;
}

/* SINGLE DIVIDER PER ROW (no “daming guhit”) */
#view-bookings .sm-table-bookings tbody tr{
  position: relative;
}
#view-bookings .sm-table-bookings tbody tr::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:0;
  height:1px;
  background: var(--bk-border);
  opacity: .9;
}
#view-bookings .sm-table-bookings tbody tr:last-child::after{
  display:none;
}

/* HOVER */
#view-bookings .sm-table-bookings tbody tr:hover td{
  background: var(--bk-hover);
}

/* ============================================================
   COLUMN LOCKS
============================================================ */
/* PRICE */
#view-bookings .sm-table-bookings th:nth-child(5),
#view-bookings .sm-table-bookings td:nth-child(5){
  width: 130px;
  text-align: right;
  white-space: nowrap;
}

/* ACTIONS */
#view-bookings .sm-table-bookings th:nth-child(6),
#view-bookings .sm-table-bookings td:nth-child(6){
  width: 180px;
  text-align: right;
  white-space: nowrap;
}

/* ============================================================
   PRICE STYLE (perfect baseline)
============================================================ */
#view-bookings .sm-price{
  display: inline-block;
  font-weight: 800;
  color: var(--bk-text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  padding-top: 1px; /* micro optical align */
}

/* ============================================================
   STATUS DROPDOWN
============================================================ */
#view-bookings .sm-status{
  height: 34px;
  min-width: 160px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--bk-border);
  background: rgba(255,255,255,0.70);
  color: var(--bk-text);
  font-weight: 800;
  outline: none;
}

#view-bookings .sm-status:focus{
  border-color: rgba(91,92,255,0.55);
  box-shadow: 0 0 0 3px rgba(91,92,255,0.12);
}

/* ============================================================
   ACTIONS (Edit + Archive)
   Supports BOTH class names:
   - .sm-row-actions (your bookings.js)
   - .sm-actions (older versions)
============================================================ */
#view-bookings .sm-row-actions,
#view-bookings .sm-actions{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  height: 34px;     /* ✅ same feel as status */
  line-height: 1;   /* ✅ prevents vertical drift */
}

/* Icon button */
#view-bookings .sm-icon-btn{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--bk-border);
  background: rgba(255,255,255,0.70);
  color: var(--bk-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#view-bookings .sm-icon-btn:hover{
  background: rgba(255,255,255,0.95);
}

/* Archive pill */
#view-bookings .sm-btn-archive{
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(220,38,38,0.28);
  background: rgba(220,38,38,0.08);
  color: rgba(185,28,28,0.95);
  font-weight: 900;
  cursor: pointer;
}

#view-bookings .sm-btn-archive:hover{
  background: rgba(220,38,38,0.12);
}

/* ============================================================
   ARCHIVED ROW LOOK
============================================================ */
#view-bookings .sm-row-archived td{
  opacity: 0.62;
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 900px){
  /* hide Date column */
  #view-bookings .sm-table-bookings th:nth-child(3),
  #view-bookings .sm-table-bookings td:nth-child(3){
    display:none;
  }
  #view-bookings .sm-table-bookings th:nth-child(6),
  #view-bookings .sm-table-bookings td:nth-child(6){
    width: 160px;
  }
}
/* =========================================================
   DARK MODE — STATUS DROPDOWN (TABLE)
========================================================= */

body.dark #view-bookings .sm-status{
  background: rgba(255,255,255,.06);
  color: #e5e7eb;
  border-color: rgba(255,255,255,.14);
}

body.dark #view-bookings .sm-status option{
  background: #0f172a;
  color: #e5e7eb;
}

body.dark #view-bookings .sm-status option:checked{
  background: #2563eb;
  color: #ffffff;
}

/* ============================================================
   BOOKINGS — TOOLBAR + ROW CLICK (DETAILS DRAWER)
   Safe: scoped to Bookings view IDs/classes only
============================================================ */

#view-bookings .sm-bookings-toolbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin: 10px 0 14px;
  flex-wrap:wrap;
}

/* Right controls use a compact grid so selects/search never overlap the table */
#view-bookings .sm-bookings-actions{
  display:grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap:10px;
  align-items:end;
  width: min(620px, 100%);
}

#view-bookings .sm-bk-field{ min-width: 0; }

#view-bookings .sm-bk-label{
  font-size: 12px;
  font-weight: 900;
  color: var(--bk-muted);
  margin: 0 0 6px;
}

#view-bookings .sm-bookings-status,
#view-bookings .sm-bookings-sort{
  width: 100%;
  min-width: 0;
}

#view-bookings .sm-bk-search{ grid-column: 1 / -1; }
#view-bookings #bkSearch{ width: 100%; }

@media (max-width: 720px){
  #view-bookings .sm-bookings-actions{ grid-template-columns: 1fr; width: 100%; }
  #view-bookings .sm-bk-search{ grid-column: auto; }
}

/* Row click */
#view-bookings .sm-table-bookings tr.sm-row-click{
  cursor: pointer;
}

#view-bookings .sm-table-bookings tr.sm-row-click:focus{
  outline: none;
}

#view-bookings .sm-table-bookings tr.sm-row-click.is-selected td{
  box-shadow: inset 0 0 0 2px rgba(31,107,255,0.22);
}


#view-bookings .sm-table-bookings tr.sm-row-click:hover td{
  background: rgba(0,0,0,0.02);
}

[data-theme="dark"] #view-bookings .sm-table-bookings tr.sm-row-click:hover td,
body.dark #view-bookings .sm-table-bookings tr.sm-row-click:hover td{
  background: rgba(255,255,255,0.03);
}