/* ============================================================
   Owner dashboard — ONE card style for the entire dashboard.
   Every content card across every owner page renders from the
   single rule below. Pages should not redefine the card shell;
   any per-page card background/border/radius is intentionally
   overridden here so the whole dashboard stays consistent.
   Colour tokens (--owner-*) are declared in layouts/owner.blade.php.
   ============================================================ */

/* The one card. New markup should use .glass-card; the rest of the
   selector list keeps existing per-page card classes on the same look. */
.glass-card,
.card,
.form-card,
.op-card,
.hr-card,
.pos-card,
.integration-card,
.profile-card,
.stat-card,
.activity-card,
.settings-card,
.order-settings-card,
.restaurant-card,
.sd-card,
.dm-card,
.section-card,
.table-card,
.table-wrap {
  background: var(--owner-glass) !important;
  border: 1px solid var(--owner-border) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: none !important;
  color: var(--owner-text-primary) !important;
  overflow: hidden;
}

/* Card header strip (title + subtitle) */
.glass-card__head {
  padding: 16px 20px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.glass-card__head h2 { font-size: 0.95rem; font-weight: 700; color: var(--owner-text-primary); margin: 0 0 2px; }
.glass-card__head p  { font-size: 0.8rem; color: var(--owner-text-secondary); margin: 0; line-height: 1.5; }

/* Card body */
.glass-card__body { padding: 18px 20px; }

/* A frosted sub-row inside a card (lists of domains, items, etc.) */
.glass-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

/* Destructive outline buttons: readable on the green/glass owner dashboard
   without the visual weight of a solid danger button. */
.btn.btn-outline-danger {
  border-color: rgba(252, 165, 165, 0.4) !important;
  background: rgba(252, 165, 165, 0.1) !important;
  color: #fca5a5 !important;
}
.btn.btn-outline-danger:hover,
.btn.btn-outline-danger:focus {
  border-color: #dc3545 !important;
  background: #dc3545 !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn.btn-outline-danger:active {
  border-color: #bb2d3b !important;
  background: #bb2d3b !important;
  color: #fff !important;
}

/* ============================================================
   Bootstrap modals — one dark-glass look for the whole owner
   dashboard. Use native BS5 modal markup (.modal > .modal-dialog
   > .modal-content) and it themes automatically.
   ============================================================ */
.modal-content {
  background: #34634e !important;
  border: 1px solid var(--owner-border) !important;
  border-radius: 14px !important;
  color: var(--owner-text-primary) !important;
}
.modal-header,
.modal-footer {
  border-color: rgba(255, 255, 255, 0.12) !important;
}
.modal-title { font-size: 1rem; font-weight: 700; }
.modal-content .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ============================================================
   Bootstrap form controls inside the owner dashboard — themed
   once so every form (in cards and modals) is consistent.
   ============================================================ */
.glass-card .form-control,
.glass-card .form-select,
.modal-content .form-control,
.modal-content .form-select {
  background: var(--owner-glass);
  border: 1px solid var(--owner-border);
  color: var(--owner-text-primary);
}
.glass-card .form-control::placeholder,
.modal-content .form-control::placeholder {
  color: var(--owner-text-muted);
}
.glass-card .form-control:focus,
.glass-card .form-select:focus,
.modal-content .form-control:focus,
.modal-content .form-select:focus {
  background: var(--owner-glass);
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--owner-text-primary);
  box-shadow: none;
}
.glass-card .form-select option,
.modal-content .form-select option {
  background: #34634e;
  color: var(--owner-text-primary);
}
.glass-card .form-label,
.modal-content .form-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--owner-text-secondary);
}
.glass-card .input-group-text,
.modal-content .input-group-text {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--owner-border);
  color: var(--owner-text-muted);
}

/* ============================================================
   Opt-in glass tables for owner pages.
   Use: <table class="table table-glass ...">
   ============================================================ */
.table-glass {
  --bs-table-bg: transparent;
  --bs-table-color: var(--owner-text-secondary);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
  --bs-table-border-color: rgba(255, 255, 255, 0.1);
  margin-bottom: 0;
}

.table-glass thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--owner-text-muted);
  border-bottom-width: 1px;
}

.table-glass td,
.table-glass th {
  background: transparent !important;
  color: inherit;
}