/* Page-scoped styles for bookings.html */
.view-toggle { display: inline-flex; border: 1px solid #d5d1cb; border-radius: var(--radius-sm); overflow: hidden; }
    .view-toggle .btn { border-radius: 0; border: none; background: transparent; color: var(--ink); }
    .view-toggle .btn.active { background: var(--blue); color: #fff; }

    .action-bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
    .month-nav { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
    .month-nav .month-label { font-weight: 600; font-size: 0.9375rem; min-width: 120px; text-align: center; }

    /* Calendar booking bars */
    .cal-booking {
      display: block; padding: 0.125rem 0.25rem; border-radius: 2px;
      font-size: 0.625rem; margin-bottom: 1px; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis; cursor: pointer; color: #fff;
    }
    .cal-booking:hover { opacity: 0.85; }
    .cal-booking.status-pending_quote   { background: #9ca3af; }
    .cal-booking.status-quoted          { background: #f59e0b; color: #000; }
    .cal-booking.status-deposit_paid    { background: var(--blue); }
    .cal-booking.status-confirmed       { background: var(--success); }
    .cal-booking.status-in_transit       { background: #f97316; }
    .cal-booking.status-completed       { background: var(--muted); }
    .cal-booking.status-cancelled       { background: var(--danger); }

    /* Detail modal sections */
    .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1rem; }
    .detail-field label { display: block; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
    .detail-field span { font-size: 0.875rem; }
    .status-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
    .checkout-url-box { margin-top: 0.75rem; word-break: break-all; padding: 0.5rem 0.75rem; background: #f6f3ee; border-radius: var(--radius-sm); font-size: 0.8125rem; }

    /* Form grid */
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1rem; }
    .form-field { display: flex; flex-direction: column; gap: 0.25rem; }
    .form-field.full-width { grid-column: 1 / -1; }
    .form-field label { font-size: 0.75rem; font-weight: 600; color: var(--muted); }
    .form-field .input { padding: 0.45rem 0.75rem; border: 1px solid #d5d1cb; border-radius: var(--radius-sm); font-family: inherit; font-size: 0.8125rem; }
    .form-field .input:focus { outline: none; border-color: var(--blue); }
    .form-field textarea.input { resize: vertical; }
    .modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }

    .modal-lg { max-width: 720px; }

    /* Driver Assignment Section */
    .driver-section { border-top: 2px solid var(--border, #e5e5e5); margin-top: 1rem; padding-top: 1rem; }
    .driver-section h3 { font-size: 0.875rem; font-weight: 700; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
    .driver-current { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--radius-sm); padding: 0.75rem; margin-bottom: 0.75rem; }
    .driver-current .driver-name { font-weight: 600; font-size: 0.9375rem; }
    .driver-current .driver-meta { font-size: 0.8125rem; color: var(--muted); margin-top: 0.25rem; }
    .driver-rec { background: #f8f7f4; border: 1px solid #e5e3dc; border-radius: var(--radius-sm); padding: 0.75rem; margin-bottom: 0.5rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
    .driver-rec-info { flex: 1; }
    .driver-rec-name { font-weight: 600; font-size: 0.875rem; }
    .driver-rec-detail { font-size: 0.75rem; color: var(--muted); margin-top: 0.15rem; }
    .driver-rec .badge-chain { background: #fef3c7; color: #d97706; font-size: 0.625rem; padding: 0.1rem 0.4rem; border-radius: 4px; font-weight: 600; }
    .manual-assign-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.75rem; }
    .manual-assign-grid .form-field { margin-bottom: 0; }
    .manual-assign-grid .form-field.span-2 { grid-column: 1 / -1; }
    .driver-status-btns { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
    .driver-status-btns .btn { font-size: 0.75rem; padding: 0.3rem 0.6rem; }
    .driver-loading { text-align: center; padding: 1rem; color: var(--muted); font-size: 0.8125rem; }