/* ── CUSTOMER DASHBOARD ──
   Linked after site.css in app.blade.php
   Overrides site.css defaults for the customer dashboard pages.
*/

/* Override site.css gray outline with orange */
.btn-sm.outline { background:transparent; color:var(--orange,#F97316); border:1.5px solid var(--orange,#F97316); }
.btn-sm.outline:hover { background:var(--orange,#F97316); color:#fff; }

/* ── MOBILE / DESKTOP TOGGLES ── */
.mob-only { display:none; }
.desk-only { display:inline-flex; }

/* ── FILTER FORM ── */
.filter-form { padding:16px 20px; border-bottom:1px solid var(--gray2,#E2E8F0); }

.filter-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.field-group {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
}

.field-group label {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #64748B;
}

.field-group .search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  font-size: .85rem;
  outline: none;
  min-width: 0;
  box-sizing: border-box;
}

.field-group .search-input:focus {
  border-color: #F97316;
  box-shadow: 0 0 0 3px rgba(249,115,22,.1);
}

.filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.apply-btn {
  background: #1E293B;
  color: #fff;
  border: none;
  padding: 8px 24px;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: background .2s;
}
.apply-btn:hover { background: #F97316; }

.clear-btn {
  background: transparent;
  color: #64748B;
  border: 1px solid #E2E8F0;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-family: 'DM Sans', sans-serif;
  transition: all .2s;
}
.clear-btn:hover { border-color: #F97316; color: #F97316; }

/* ── ANALYTICS FILTERS ── */
.analytics-filters { background:#fff; border-radius:14px; border:1px solid var(--gray2,#E2E8F0); padding:16px 20px; margin-bottom:16px; }
.analytics-filters .filter-row { margin-bottom:0; }
.analytics-filters .field-group label { font-size:.68rem; }
.analytics-filters .field-group .search-input { padding:8px 12px; border:1px solid #E2E8F0; border-radius:8px; font-size:.84rem; min-width:140px; }
.analytics-filters .field-group .search-input:focus { border-color:#F97316; box-shadow:0 0 0 3px rgba(249,115,22,.1); }
.analytics-filters .presets-row { margin-top:10px; }
.preset-group { display:flex; gap:6px; flex-wrap:wrap; align-items:center; width:100%; }
.preset-btn {
  display:inline-flex; align-items:center; gap:4px; padding:6px 14px; border-radius:999px;
  font-size:.78rem; font-weight:600; text-decoration:none;
  background:var(--gray,#f4f6f8); color:var(--muted,#64748B);
  border:1px solid var(--gray2,#E2E8F0); cursor:pointer;
  font-family:'DM Sans',sans-serif; transition:all .2s; white-space:nowrap;
}
.preset-btn:hover { border-color:#F97316; color:#F97316; }
.preset-btn.active { background:var(--navy,#1E293B); color:#fff; border-color:var(--navy,#1E293B); }
.export-btn { margin-left:auto; background:transparent; }
.export-btn:hover { background:var(--gray,#f4f6f8); }

/* ── MOBILE STACKED CARDS ── */
.mob-cards { display:none; }
.booking-card {
  background:#fff; border:1px solid var(--gray2,#e8ecf0); border-left:3px solid #F97316;
  border-radius:12px; padding:14px 16px; margin-bottom:10px;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
}
.card-row { display:flex; align-items:center; justify-content:space-between; padding:6px 0; border-bottom:1px solid #f0f2f4; }
.card-row:last-child { border-bottom:none; }
.card-lbl { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#64748B; flex-shrink:0; margin-right:12px; }
.card-val { font-size:.84rem; text-align:right; }
.card-row-last { border-bottom:none; }
.mob-book-btn { margin:0 14px 8px; width:calc(100% - 28px); justify-content:center; }

/* ── STICKY STATS BAR ── */
.mob-sticky-bar { display:none; }
.mob-sticky-spacer { display:none; }

/* ── MOBILE FAB + DRAWER ── */
.mobile-fab {
  display:none; position:fixed; bottom:24px; right:24px; z-index:10000;
  width:48px; height:48px; border-radius:50%; background:var(--navy,#1E293B);
  border:none; cursor:pointer; flex-direction:column; align-items:center;
  justify-content:center; gap:5px; box-shadow:0 4px 20px rgba(0,0,0,.3);
}
.mobile-fab span { display:block; width:20px; height:2.5px; background:#fff; border-radius:2px; }
.drawer-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:10001;
}
.drawer-overlay.show { display:block; }
.bottom-drawer {
  position:fixed; bottom:0; left:0; right:0; z-index:10002;
  background:#fff; border-radius:20px 20px 0 0; padding:20px 24px 32px;
  transform:translateY(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow:0 -8px 40px rgba(0,0,0,.15); max-height:80vh; overflow-y:auto;
}
.bottom-drawer.open { transform:translateY(0); }
.drawer-header { display:flex; align-items:center; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--gray2,#e8ecf0); margin-bottom:12px; }
.drawer-avatar { width:40px; height:40px; border-radius:50%; background:var(--orange,#F97316); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1rem; color:#fff; flex-shrink:0; }
.drawer-name { font-size:.92rem; font-weight:700; color:var(--text,#1a2a3a); }
.drawer-role { font-size:.75rem; color:var(--muted,#6b7a8d); }
.drawer-nav { display:flex; flex-direction:column; gap:2px; }
.drawer-item {
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px;
  font-size:.88rem; font-weight:600; color:var(--text,#1a2a3a); text-decoration:none;
  cursor:pointer; transition:background .15s; background:none; border:none;
  width:100%; font-family:'DM Sans',sans-serif; text-align:left;
}
.drawer-item:hover { background:var(--gray,#f4f6f8); }
.drawer-item:active { background:var(--gray2,#e8ecf0); }
.active-drawer { background:rgba(230,126,34,.1); color:var(--orange,#F97316); font-weight:700; }
.drawer-item form { width:100%; }
.drawer-nav form .drawer-item { width:100%; }
.drawer-handle { width:36px; height:4px; border-radius:4px; background:var(--gray2,#e8ecf0); margin:0 auto 16px; }

/* ── RESPONSIVE ── */

/* Tablet */
@media (max-width:1024px) {
  .filter-row { gap:10px; }
}

/* Mobile — shared (admin + customer) */
@media (max-width:768px) {
  .main-area { margin-left:0 !important; width:100%; max-width:100%; }
  .top-nav { padding:0 12px; height:44px; }
  .top-nav-left .page-title { font-size:.85rem; }
  .content { padding:14px; }
  .stats-row { grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
  .stat-card { padding:10px 12px; border-radius:10px; }
  .stat-card-top { margin-bottom:4px; }
  .stat-icon { width:26px; height:26px; font-size:.78rem; border-radius:7px; }
  .stat-num { font-size:1.3rem; }
  .stat-label { font-size:.65rem; }
  .sec-hdr { flex-direction:column; align-items:flex-start; gap:8px; }
  .table-wrap { overflow-x:auto; border-radius:10px; margin-bottom:12px; }
  .vrm-cell { font-size:.78rem; }

  .analytics-filters { padding:12px 14px; }
  .analytics-filters .filter-row { flex-wrap:wrap; gap:8px; }
  .analytics-filters .field-group { flex:1; min-width:calc(50% - 8px); }
  .analytics-filters .field-group:last-child { min-width:100%; }
  .analytics-filters .field-group .search-input { min-width:0; width:100%; font-size:.82rem; padding:6px 10px; }
  .analytics-filters .apply-btn { width:100%; }
  .analytics-filters .presets-row { margin-top:8px; }
  .preset-group { gap:4px; }
  .preset-btn { font-size:.74rem; padding:5px 12px; }
  .export-btn { margin-left:0; width:100%; justify-content:center; margin-top:4px; }
}

/* Mobile — customer only */
@media (max-width:768px) {
  .customer-area { overflow-x:hidden; width:100%; padding-bottom:0; }
  .customer-area .sidebar { display:none !important; }
  .customer-area .sb-toggle { display:none !important; }
  .customer-area .sb-overlay { display:none !important; }

  .mobile-fab { display:flex !important; }
  .mob-sticky-bar {
    display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:44px; z-index:80; background:#fff;
    border-bottom:1px solid var(--gray2,#e8ecf0); padding:8px 14px;
    font-size:.78rem; font-weight:700; color:var(--text,#1a2a3a);
  }
  .mob-sticky-bar .mob-sticky-badge {
    background:#F97316; color:#fff; border-radius:50px;
    padding:2px 10px; font-size:.72rem; font-weight:700;
  }
  .mob-sticky-spacer { display:block; height:0; }

  .customer-area .table-wrap { overflow:visible; }
  .desk-table { display:none; }
  .mob-cards { display:block; padding:0 14px 14px; }
  .mob-only { display:block; }
  .desk-only { display:none !important; }

  .filter-form { padding:12px 14px; }
  .filter-row { gap:8px; margin-bottom:0; }
  .field-group label { font-size:.6rem; }
  .field-group .search-input { padding:6px 10px; font-size:.78rem; }
  .filter-actions { gap:8px; margin-top:6px; }
  .apply-btn { flex:0 0 60%; min-height:42px; font-size:.8rem; }
  .clear-btn { flex:1; min-height:42px; font-size:.8rem; }

  .desk-table colgroup { display:none; }
  .table-wrap > div:last-child { padding:8px 12px; }
  .table-wrap > div:last-child nav[role="navigation"] { flex-wrap:wrap; gap:4px; justify-content:center; }
  .table-wrap > div:last-child nav[role="navigation"] a,
  .table-wrap > div:last-child nav[role="navigation"] span { font-size:.72rem; padding:3px 8px; }
}

/* Small mobile — shared */
@media (max-width:480px) {
  .content { padding:10px; }
  .stat-card { padding:8px 10px; border-radius:8px; }
  .stat-num { font-size:1.15rem; }
  .stat-label { font-size:.6rem; }
  .stat-icon { width:24px; height:24px; font-size:.72rem; border-radius:6px; }
  .stats-row { gap:6px; margin-bottom:10px; }
  .top-nav { padding:0 8px; height:40px; }
  .top-nav-left .page-title { font-size:.78rem; }
  .vrm-cell { font-size:.7rem; padding:1px 5px; border-radius:4px; }
  .table-wrap { border-radius:8px; margin-bottom:8px; }

  .analytics-filters { padding:10px 12px; }
  .analytics-filters .filter-row { gap:6px; }
  .analytics-filters .field-group .search-input { font-size:.8rem; padding:5px 8px; }
  .preset-btn { font-size:.7rem; padding:4px 10px; }
}

/* Small mobile — customer only */
@media (max-width:480px) {
  .customer-area { overflow-x:hidden; padding-bottom:0; }
  .booking-card { padding:12px 14px; border-radius:10px; border-left-width:3px; }
  .card-lbl { font-size:.72rem; }
  .card-val { font-size:.78rem; }
  .status-chip { font-size:.6rem; padding:2px 7px; gap:3px; }
  .receipt-link { font-size:.7rem; }
  .mob-cards { padding:0 10px 10px; }
  .filter-form { padding:10px 12px; }
  .filter-row { gap:6px; }
  .field-group label { font-size:.55rem; }
  .field-group .search-input { padding:5px 8px; font-size:.74rem; }
  .apply-btn { min-height:38px; font-size:.76rem; padding:6px 14px; }
  .clear-btn { min-height:38px; font-size:.76rem; padding:6px 14px; }
  .mobile-fab { width:44px; height:44px; bottom:20px; right:16px; gap:4px; }
  .mobile-fab span { width:18px; height:2px; }
  .bottom-drawer { padding:16px 20px 24px; }
  .drawer-item { padding:10px 12px; font-size:.84rem; }
  .table-wrap > div:last-child { padding:6px 10px; }
  .table-wrap > div:last-child nav[role="navigation"] a,
  .table-wrap > div:last-child nav[role="navigation"] span { font-size:.68rem; padding:2px 7px; }
}