/* ════════════════════════════════════════════
   RESTAURANT RESERVATION — Style sheet
   Modern minimalist · uses CSS variables (set inline by PHP)
════════════════════════════════════════════ */

/* ── Scope reset ── */
.rr-form, .rr-form *,
.rr-dash, .rr-dash *,
.rr-login-wrap, .rr-login-wrap * { box-sizing: border-box; }

/* ════════════════════════════════════════════
   FRONT FORM
════════════════════════════════════════════ */
.rr-form {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 28px;
  background: var(--rr-bg, #fff);
  color: var(--rr-text, #1a1a1a);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 16px;
  border: 1px solid var(--rr-border, #e5e7eb);
}

.rr-form-head { margin-bottom: 28px; }
.rr-form-h    { font-size: 26px; font-weight: 700; line-height: 1.25; margin: 0 0 8px; letter-spacing: -.5px; color: var(--rr-text, #1a1a1a); }
.rr-form-sub  { font-size: 15px; color: #6b7280; margin: 0; line-height: 1.55; }

/* ── Grid ── */
.rr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rr-full { grid-column: 1 / -1; }

/* ── Fields ── */
.rr-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.rr-lab   { font-size: 13px; font-weight: 600; color: var(--rr-text, #1a1a1a); letter-spacing: .1px; }
.rr-req   { color: var(--rr-primary, #0F766E); font-weight: 700; }
.rr-opt   { font-weight: 400; color: #9ca3af; font-size: 12px; }

/* ── Inputs ── */
.rr-inp {
  width: 100%;
  padding: var(--rr-input-pad, 10px 13px);
  font-size: var(--rr-input-font, 14px);
  border: 1px solid var(--rr-border, #e5e7eb);
  border-radius: var(--rr-input-radius, 8px);
  background: var(--rr-bg, #fff);
  color: var(--rr-text, #1a1a1a);
  font-family: inherit;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  appearance: none;
  -webkit-appearance: none;
}
.rr-inp::placeholder { color: #9ca3af; }
.rr-inp:hover  { border-color: #d1d5db; }
.rr-inp:focus  { border-color: var(--rr-primary, #0F766E); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rr-primary, #0F766E) 15%, transparent); }
textarea.rr-inp { resize: vertical; min-height: 90px; line-height: 1.5; }

/* select arrow */
select.rr-inp {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

/* date input */
input[type="date"].rr-inp { font-family: inherit; min-height: 40px; }

/* ── Time slots ── */
.rr-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.rr-slot {
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--rr-border, #e5e7eb);
  border-radius: 999px;
  cursor: pointer;
  background: var(--rr-bg, #fff);
  color: var(--rr-text, #374151);
  transition: all .15s ease;
  font-family: inherit;
  letter-spacing: .2px;
}
.rr-slot:hover    { border-color: #d1d5db; background: #f9fafb; transform: translateY(-1px); }
.rr-slot.selected { background: var(--rr-primary, #0F766E); color: #fff; border-color: var(--rr-primary, #0F766E); box-shadow: 0 4px 12px color-mix(in srgb, var(--rr-primary, #0F766E) 30%, transparent); }

/* ── Submit button ── */
.rr-submit {
  margin-top: 28px;
  width: 100%;
  padding: var(--rr-btn-pad, 12px 22px);
  font-size: var(--rr-btn-font, 14px);
  font-weight: 600;
  background: var(--rr-btn-bg, #0F766E);
  color: var(--rr-btn-text, #fff);
  border: var(--rr-btn-bw, 0) solid var(--rr-btn-bc, transparent);
  border-radius: var(--rr-btn-radius, 10px);
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease;
  letter-spacing: .2px;
}
.rr-submit:hover    { transform: translateY(-1px); filter: brightness(.92); box-shadow: 0 6px 20px color-mix(in srgb, var(--rr-btn-bg, #0F766E) 25%, transparent); }
.rr-submit:active   { transform: translateY(0); }
.rr-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.rr-submit.rr-btn-sm { width: auto; margin-top: 0; padding: 8px 16px; font-size: 13px; }

/* ── Success state ── */
#rr-success { text-align: center; padding: 48px 24px 24px; }
.rr-success-icon {
  width: 64px; height: 64px; margin: 0 auto 18px;
  background: color-mix(in srgb, var(--rr-primary, #0F766E) 12%, white);
  color: var(--rr-primary, #0F766E);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.rr-success-h { font-size: 22px; font-weight: 700; margin: 0 0 10px; color: var(--rr-text, #1a1a1a); letter-spacing: -.3px; }
.rr-success-p { font-size: 14px; color: #6b7280; line-height: 1.7; margin: 0 0 26px; max-width: 420px; margin-left: auto; margin-right: auto; }
.rr-back {
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--rr-border, #e5e7eb);
  border-radius: 8px;
  cursor: pointer;
  background: var(--rr-bg, #fff);
  color: var(--rr-text, #374151);
  font-family: inherit;
  transition: all .15s ease;
}
.rr-back:hover { background: #f9fafb; border-color: #d1d5db; }
.rr-back.rr-btn-sm { padding: 7px 14px; font-size: 12px; }

/* ── Alerts ── */
.rr-alert    { padding: 11px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 18px; line-height: 1.5; }
.rr-err      { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.rr-success  { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }

/* ── Responsive (form) ── */
@media (max-width: 600px) {
  .rr-form { padding: 24px 18px; border-radius: 12px; }
  .rr-form-h { font-size: 22px; }
  .rr-grid { grid-template-columns: 1fr; gap: 14px; }
  .rr-full { grid-column: 1; }
}

/* ════════════════════════════════════════════
   LOGIN
════════════════════════════════════════════ */
.rr-login-wrap { display: flex; justify-content: center; align-items: flex-start; padding: 40px 16px; min-height: 480px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; }
.rr-login-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 44px 40px; width: 100%; max-width: 420px; box-shadow: 0 4px 24px rgba(0,0,0,.04); }
.rr-login-logo { width: 64px; height: 64px; background: var(--rr-primary, #0F766E); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; margin: 0 auto 20px; }
.rr-login-title{ font-size: 24px; font-weight: 700; text-align: center; color: #111; margin: 0 0 8px; letter-spacing: -.4px; }
.rr-login-sub  { font-size: 14px; color: #6b7280; text-align: center; margin: 0 0 28px; }
.rr-login-hint { font-size: 12px; color: #9ca3af; text-align: center; margin-top: 22px; line-height: 1.6; }
.rr-login-hint code { background: #f3f4f6; padding: 1px 6px; border-radius: 4px; font-size: 11px; color: #374151; font-family: ui-monospace, 'Cascadia Code', Menlo, monospace; }

.rr-pass-wrap { position: relative; }
.rr-pass-wrap .rr-inp { padding-right: 40px; }
.rr-pass-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #9ca3af; padding: 0; display: flex; align-items: center; transition: color .15s; }
.rr-pass-toggle:hover { color: #374151; }

/* ════════════════════════════════════════════
   DASHBOARD
════════════════════════════════════════════ */
.rr-dash {
  display: flex;
  min-height: 640px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  box-shadow: 0 4px 24px rgba(0,0,0,.04);
}

/* Sidebar */
.rr-sidebar { width: 230px; flex-shrink: 0; background: #0F172A; color: #fff; display: flex; flex-direction: column; padding: 22px 0; }
.rr-sb-brand { display: flex; align-items: center; gap: 10px; padding: 0 20px 22px; font-size: 14px; font-weight: 700; color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); letter-spacing: -.2px; }
.rr-sb-brand svg { color: var(--rr-primary, #14b8a6); flex-shrink: 0; }

.rr-sb-nav { flex: 1; padding: 16px 12px; display: flex; flex-direction: column; gap: 3px; }
.rr-nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 8px; font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.65); cursor: pointer; border: none; background: transparent; text-align: left; width: 100%;
  transition: all .15s ease; font-family: inherit;
}
.rr-nav-item:hover  { background: rgba(255,255,255,.06); color: #fff; }
.rr-nav-item.active { background: rgba(255,255,255,.1); color: #fff; }
.rr-nav-item span:not(.rr-badge) { flex: 1; }
.rr-badge { background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; border-radius: 10px; padding: 2px 7px; min-width: 18px; text-align: center; display: none; }
.rr-badge.visible { display: inline-block; }

.rr-sb-foot { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.08); }
.rr-mode-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px; margin-bottom: 14px; letter-spacing: .2px; }
.rr-mode-tag.auto    { background: rgba(20,184,166,.15); color: #5eead4; }
.rr-mode-tag.manual  { background: rgba(245,158,11,.15); color: #fbbf24; }

.rr-userbox { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.rr-avatar  { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; }
.rr-uname   { font-size: 13px; font-weight: 600; color: #fff; }
.rr-urole   { font-size: 11px; color: rgba(255,255,255,.5); }
.rr-logout  { display: flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(255,255,255,.5); cursor: pointer; border: none; background: transparent; font-family: inherit; transition: color .15s; padding: 0; }
.rr-logout:hover { color: #ff8585; }

/* Main */
.rr-main { flex: 1; background: #f8fafc; overflow-y: auto; }
.rr-panel { display: none; padding: 26px 28px; }
.rr-panel.active { display: block; }
.rr-panel-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; gap: 14px; flex-wrap: wrap; }
.rr-panel-title { font-size: 19px; font-weight: 700; color: #0f172a; letter-spacing: -.3px; }

.rr-search { width: 220px; padding: 8px 13px; font-size: 13px; }

/* Stats */
.rr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-bottom: 22px; }
.rr-stat  { background: #fff; border: 1px solid #e5e7eb; border-radius: 11px; padding: 16px 18px; text-align: center; transition: border-color .15s, transform .15s; }
.rr-stat:hover { border-color: #d1d5db; transform: translateY(-1px); }
.rr-stat-num   { display: block; font-size: 26px; font-weight: 700; color: #0f172a; line-height: 1.1; letter-spacing: -.5px; }
.rr-stat-l     { display: block; font-size: 11px; color: #94a3b8; margin-top: 5px; font-weight: 500; letter-spacing: .3px; text-transform: uppercase; }
.rr-stat-pending  .rr-stat-num { color: #b45309; }
.rr-stat-confirmed .rr-stat-num { color: #15803d; }

/* Filters */
.rr-filters { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.rr-filter  { padding: 6px 14px; font-size: 12px; font-weight: 600; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; background: #fff; color: #64748b; transition: all .15s; font-family: inherit; }
.rr-filter:hover  { background: #f1f5f9; color: #0f172a; }
.rr-filter.active { background: #0f172a; color: #fff; border-color: #0f172a; }

/* List */
.rr-list { display: flex; flex-direction: column; gap: 9px; }
.rr-loading { text-align: center; padding: 48px; color: #94a3b8; font-size: 14px; }
.rr-empty   { text-align: center; padding: 56px 24px; color: #94a3b8; font-size: 14px; background: #fff; border: 1px dashed #e5e7eb; border-radius: 12px; }

/* Reservation card */
.rr-card { background: #fff; border: 1px solid #e5e7eb; border-left: 4px solid #cbd5e1; border-radius: 11px; padding: 14px 18px; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; transition: all .15s; }
.rr-card:hover    { border-color: #cbd5e1; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.03); }
.rr-card.pending  { border-left-color: #f59e0b; }
.rr-card.confirmed{ border-left-color: #10b981; }
.rr-card.cancelled{ border-left-color: #ef4444; opacity: .65; }
.rr-card.hidden   { display: none; }

.rr-card-name  { font-size: 14px; font-weight: 700; color: #0f172a; margin-bottom: 6px; }
.rr-card-meta  { font-size: 12px; color: #64748b; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.rr-card-notes { font-size: 12px; color: #94a3b8; font-style: italic; margin-top: 8px; padding-top: 8px; border-top: 1px solid #f1f5f9; }
.rr-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }

.rr-pill { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; letter-spacing: .2px; }
.rr-pill.pending   { background: #fef3c7; color: #92400e; }
.rr-pill.confirmed { background: #d1fae5; color: #065f46; }
.rr-pill.cancelled { background: #fee2e2; color: #991b1b; }

.rr-card-btns { display: flex; gap: 5px; }
.rr-action-btn { padding: 5px 11px; font-size: 11px; font-weight: 600; border-radius: 6px; cursor: pointer; border: 1px solid #e5e7eb; background: #fff; color: #475569; font-family: inherit; transition: all .15s; }
.rr-action-btn:hover { transform: translateY(-1px); }
.rr-action-btn.confirm { border-color: #86efac; color: #15803d; }
.rr-action-btn.confirm:hover { background: #d1fae5; }
.rr-action-btn.cancel  { border-color: #fca5a5; color: #991b1b; }
.rr-action-btn.cancel:hover  { background: #fee2e2; }

/* User card */
.rr-user-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 11px; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; transition: border-color .15s; }
.rr-user-card:hover { border-color: #cbd5e1; }
.rr-user-card-left { display: flex; align-items: center; gap: 12px; }
.rr-user-avatar    { width: 40px; height: 40px; border-radius: 50%; background: #f1f5f9; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #64748b; flex-shrink: 0; }
.rr-user-avatar.manager { background: #0f172a; color: #fff; }
.rr-user-card-name { font-size: 14px; font-weight: 700; color: #0f172a; }
.rr-user-card-meta { font-size: 12px; color: #94a3b8; margin-top: 3px; }
.rr-role-badge     { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; letter-spacing: .3px; text-transform: uppercase; }
.rr-role-badge.manager  { background: #0f172a; color: #fff; }
.rr-role-badge.employee { background: #f1f5f9; color: #475569; }
.rr-delete-btn { padding: 6px 12px; font-size: 12px; font-weight: 600; border: 1px solid #fca5a5; border-radius: 7px; cursor: pointer; background: #fff; color: #991b1b; font-family: inherit; transition: all .15s; }
.rr-delete-btn:hover { background: #fee2e2; }

/* Form card */
.rr-form-card    { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 24px 26px; margin-bottom: 18px; }
.rr-form-card-h  { font-size: 15px; font-weight: 700; color: #0f172a; margin: 0 0 18px; }
.rr-form-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.rr-form-card-actions { display: flex; gap: 10px; }

/* Responsive (dash) */
@media (max-width: 720px) {
  .rr-dash { flex-direction: column; }
  .rr-sidebar { width: 100%; padding: 14px 0; }
  .rr-sb-nav { flex-direction: row; padding: 8px 12px; overflow-x: auto; }
  .rr-sb-foot { padding: 14px 18px; }
  .rr-stats { grid-template-columns: 1fr 1fr; }
  .rr-form-card-grid { grid-template-columns: 1fr; }
  .rr-search { width: 100%; }
  .rr-card { flex-direction: column; align-items: stretch; }
  .rr-card-right { align-items: flex-start; }
}

/* ── Newsletter consent checkbox ── */
.rr-consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  background: color-mix(in srgb, var(--rr-primary, #0F766E) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--rr-primary, #0F766E) 20%, transparent);
  border-radius: var(--rr-input-radius, 8px);
  cursor: pointer;
  transition: background .15s;
}
.rr-consent:hover { background: color-mix(in srgb, var(--rr-primary, #0F766E) 8%, transparent); }
.rr-consent input[type=checkbox] {
  margin: 2px 0 0;
  width: 17px; height: 17px;
  cursor: pointer;
  accent-color: var(--rr-primary, #0F766E);
  flex-shrink: 0;
}
.rr-consent-text {
  font-size: 13px; line-height: 1.5;
  color: var(--rr-text, #1a1a1a);
}
.rr-consent-text a { text-decoration: underline; opacity: .8; }