/* Glamora shared stylesheet — luxury black/gold theme, used by the client pages,
   the center-admin dashboard, and (scoped) inside wp-admin's Glamora screens. */

.glamora-scope {
	--g-bg-dark: oklch(0.18 0.015 285);
	--g-bg-dark-2: oklch(0.223 0.02 285);
	--g-bg-dark-3: oklch(0.27 0.02 285);
	--g-border-dark: oklch(0.34 0.02 285);
	--g-text-dark: oklch(0.95 0.01 80);
	--g-text-muted-dark: oklch(0.68 0.02 280);

	--g-bg-light: oklch(0.975 0.008 80);
	--g-bg-light-2: oklch(0.96 0.012 75);
	--g-bg-light-3: oklch(0.93 0.014 75);
	--g-border-light: oklch(0.89 0.012 80);
	--g-text-light: oklch(0.22 0.02 280);
	--g-text-muted-light: oklch(0.5 0.02 260);

	--g-gold: oklch(0.76 0.135 80);
	--g-gold-2: oklch(0.68 0.13 77);
	--g-gold-soft: oklch(0.93 0.05 85);

	--g-success: oklch(0.62 0.13 148);
	--g-success-bg: oklch(0.92 0.045 148);
	--g-pending: oklch(0.72 0.15 60);
	--g-pending-bg: oklch(0.93 0.06 65);
	--g-danger: oklch(0.58 0.17 25);
	--g-danger-bg: oklch(0.93 0.05 25);

	font-family: "Cairo", system-ui, sans-serif;
	box-sizing: border-box;
}
.glamora-scope *, .glamora-scope *::before, .glamora-scope *::after { box-sizing: inherit; }
.glamora-scope a { text-decoration: none; color: var(--g-gold-2); }
.glamora-scope button { font-family: inherit; cursor: pointer; }
.glamora-scope .glamora-logotype { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; }

.glamora-dark { background: var(--g-bg-dark); color: var(--g-text-dark); }
.glamora-light { background: var(--g-bg-light); color: var(--g-text-light); }

.glamora-shell { max-width: 1000px; margin: 0 auto; padding: 24px 20px 60px; }
.glamora-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--g-border-dark); margin-bottom: 20px; }
.glamora-header .glamora-logotype { font-size: 24px; color: var(--g-gold); }
.glamora-lang-switch { display: flex; align-items: center; gap: 6px; background: var(--g-bg-dark-2); border: 1px solid var(--g-border-dark); border-radius: 20px; padding: 5px 12px; font-size: 12px; color: var(--g-text-muted-dark); }
.glamora-lang-switch a { color: inherit; }
.glamora-lang-switch a.is-active { color: var(--g-gold); font-weight: 700; }
.glamora-page-title h1 { font-size: 20px; font-weight: 800; margin: 0 0 20px; }

/* ---- centers grid (client landing) ---- */
.glamora-centers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.glamora-loading { color: var(--g-text-muted-dark); text-align: center; padding: 30px; grid-column: 1 / -1; }
.glamora-center-card { background: var(--g-bg-dark-2); border: 1px solid var(--g-border-dark); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.glamora-center-card .cover { height: 120px; background: linear-gradient(135deg, oklch(0.3 0.04 40), oklch(0.19 0.03 30)); position: relative; display: flex; align-items: flex-end; padding: 12px; }
.glamora-center-card .avatar { width: 50px; height: 50px; border-radius: 50%; background: var(--g-bg-dark); border: 2px solid var(--g-gold); display: flex; align-items: center; justify-content: center; font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; color: var(--g-gold); font-size: 20px; }
.glamora-center-card .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.glamora-center-card .name { font-size: 16px; font-weight: 700; }
.glamora-center-card .meta { font-size: 12px; color: var(--g-text-muted-dark); }

/* ---- buttons / chips / badges ---- */
.glamora-btn { border: none; border-radius: 12px; padding: 11px 18px; font-size: 13px; font-weight: 700; }
.glamora-btn.gold { background: var(--g-gold); color: var(--g-bg-dark); }
.glamora-btn.gold:hover { background: var(--g-gold-2); }
.glamora-btn.outline { background: transparent; border: 1px solid var(--g-border-light); color: inherit; }
.glamora-btn.outline.dark-border { border-color: var(--g-border-dark); }
.glamora-btn.danger { background: transparent; color: var(--g-danger); border: 1px solid var(--g-danger-bg); }
.glamora-btn:disabled { opacity: .5; cursor: not-allowed; }
.glamora-chip { display: inline-flex; align-items: center; font-size: 12px; padding: 7px 16px; border-radius: 20px; background: var(--g-bg-dark-2); border: 1px solid var(--g-border-dark); color: var(--g-text-muted-dark); cursor: pointer; }
.glamora-light .glamora-chip { background: var(--g-bg-light-2); border-color: var(--g-border-light); color: var(--g-text-muted-light); }
.glamora-chip.is-active { background: var(--g-gold); color: var(--g-bg-dark); border-color: var(--g-gold); font-weight: 700; }
.glamora-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 8px; }
.glamora-badge.success { background: var(--g-success-bg); color: var(--g-success); }
.glamora-badge.pending { background: var(--g-pending-bg); color: var(--g-pending); }
.glamora-badge.danger { background: var(--g-danger-bg); color: var(--g-danger); }

/* ---- toggle switch ---- */
.glamora-toggle { width: 34px; height: 19px; border-radius: 10px; background: var(--g-border-light); position: relative; display: inline-block; cursor: pointer; flex-shrink: 0; border: none; padding: 0; }
.glamora-toggle::after { content: ""; width: 15px; height: 15px; border-radius: 50%; background: #fff; position: absolute; top: 2px; inset-inline-end: 2px; transition: inset-inline .15s; }
.glamora-toggle.is-on { background: var(--g-gold); }
.glamora-toggle.is-on::after { inset-inline-start: 2px; inset-inline-end: auto; }

/* ---- forms ---- */
.glamora-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.glamora-field label { font-size: 12px; color: var(--g-text-muted-dark); font-weight: 600; }
.glamora-light .glamora-field label { color: var(--g-text-muted-light); }
.glamora-field input, .glamora-field select, .glamora-field textarea {
	background: var(--g-bg-dark-2); border: 1px solid var(--g-border-dark); color: var(--g-text-dark);
	border-radius: 10px; padding: 11px 13px; font-size: 13px; font-family: inherit;
}
.glamora-light .glamora-field input, .glamora-light .glamora-field select, .glamora-light .glamora-field textarea {
	background: #fff; border-color: var(--g-border-light); color: var(--g-text-light);
}
/* Checkboxes/radios living inside a .glamora-field (e.g. a "which services this staff member can
   perform" list) are independent form controls, not text fields — the padded, rounded text-input
   look above squashed them into a shape that made their checked/unchecked state hard to see. Give
   them a normal small box with a visible border in both states, and a high-contrast checked color
   (the muted gold used elsewhere reads too close to the page background to see a checkmark on it). */
.glamora-field input[type="checkbox"], .glamora-field input[type="radio"] {
	background: none; border-radius: 3px; padding: 0; margin: 0;
	width: 16px; height: 16px; flex-shrink: 0;
	border: 1.5px solid var(--g-border-dark); accent-color: var(--g-text-dark);
}
.glamora-light .glamora-field input[type="checkbox"], .glamora-light .glamora-field input[type="radio"] {
	border-color: var(--g-border-light); accent-color: var(--g-text-light);
}
.glamora-field input[type="radio"] { border-radius: 50%; }
.glamora-field.required label::after { content: " *"; color: var(--g-gold); }

/* ---- generic table ---- */
.glamora-table { width: 100%; border-collapse: collapse; background: var(--g-bg-light-2); border: 1px solid var(--g-border-light); border-radius: 16px; overflow: hidden; }
.glamora-table th { text-align: start; font-size: 11px; color: var(--g-text-muted-light); font-weight: 700; padding: 12px 16px; border-bottom: 1px solid var(--g-border-light); }
.glamora-table td { padding: 12px 16px; border-bottom: 1px solid var(--g-border-light); font-size: 13px; vertical-align: middle; }
.glamora-table tr:last-child td { border-bottom: none; }
.glamora-table .actions { display: flex; gap: 10px; font-size: 11px; font-weight: 700; }
.glamora-table .actions a, .glamora-table .actions button { background: none; border: none; padding: 0; color: var(--g-gold-2); font-size: 11px; font-weight: 700; }
.glamora-table .actions .danger { color: var(--g-danger); }

/* ---- dashboard shell (sidebar layout) ---- */
.glamora-dash-shell { display: flex; min-height: 640px; }
.glamora-dash-sidebar { width: 236px; flex-shrink: 0; background: var(--g-bg-dark); color: var(--g-text-dark); display: flex; flex-direction: column; padding: 20px 14px; }
.glamora-dash-sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 22px; border-bottom: 1px solid var(--g-border-dark); margin-bottom: 16px; }
.glamora-dash-nav { display: flex; flex-direction: column; gap: 4px; }
.glamora-dash-nav .navitem { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; font-size: 13px; color: var(--g-text-muted-dark); background: none; border: none; text-align: start; width: 100%; }
.glamora-dash-nav .navitem.is-active { background: var(--g-gold); color: var(--g-bg-dark); font-weight: 700; }
.glamora-dash-main { flex: 1; padding: 26px 32px; display: flex; flex-direction: column; gap: 20px; overflow-x: auto; }
.glamora-dash-main h1 { font-size: 20px; font-weight: 800; margin: 0; }
.glamora-dash-main .subtitle { font-size: 12px; color: var(--g-text-muted-light); margin-top: 4px; }

/* ---- calendar day list ---- */
.glamora-cal-row { display: grid; grid-template-columns: 60px 1fr; padding: 10px 16px; border-bottom: 1px solid var(--g-border-light); align-items: center; }
.glamora-cal-row:last-child { border-bottom: none; }
.glamora-cal-slot { border-radius: 10px; padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.glamora-cal-slot.pending { background: var(--g-pending-bg); }
.glamora-cal-slot.confirmed { background: var(--g-success-bg); }
.glamora-cal-slot.open { border: 1px dashed var(--g-border-light); color: var(--g-text-muted-light); }
.glamora-cal-slot.closed { background: var(--g-bg-light-3); color: var(--g-text-muted-light); }

/* ---- modal ---- */
.glamora-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; }
.glamora-modal { background: var(--g-bg-light); color: var(--g-text-light); border-radius: 18px; padding: 24px; width: 100%; max-width: 440px; max-height: 86vh; overflow-y: auto; }
.glamora-modal h2 { margin: 0 0 16px; font-size: 16px; }

/* ---- site-admin: Centers dashboard (stat cards, avatar-badge table, services-by-category) ---- */
.glamora-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.glamora-page-head h1 { font-size: 20px; font-weight: 800; margin: 0; }
.glamora-page-head .subtitle { font-size: 12px; color: var(--g-text-muted-light); margin-top: 4px; }

.glamora-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 22px; }
.glamora-stat-card { background: var(--g-bg-light-2); border: 1px solid var(--g-border-light); border-radius: 14px; padding: 16px; }
.glamora-stat-card .label { font-size: 11px; color: var(--g-text-muted-light); font-weight: 600; }
.glamora-stat-card .value { font-size: 24px; font-weight: 800; margin-top: 6px; }
.glamora-stat-card .value.success { color: var(--g-success); }

.glamora-avatar-badge { width: 32px; height: 32px; border-radius: 9px; background: var(--g-bg-dark); border: 1.5px solid var(--g-gold); display: flex; align-items: center; justify-content: center; font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; color: var(--g-gold); font-size: 13px; flex-shrink: 0; }
.glamora-avatar-badge.is-inactive { background: var(--g-bg-light-3); border-color: transparent; color: var(--g-text-muted-light); }

.glamora-grid-table { background: var(--g-bg-light-2); border: 1px solid var(--g-border-light); border-radius: 16px; overflow: hidden; margin-bottom: 26px; }
.glamora-grid-table .g-row { display: grid; grid-template-columns: 1.8fr 1.3fr 1.1fr 0.7fr 0.9fr 1.7fr; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--g-border-light); gap: 8px; }
.glamora-grid-table .g-row:last-child { border-bottom: none; }
.glamora-grid-table .g-row.head { padding: 12px 18px; font-size: 11px; color: var(--g-text-muted-light); font-weight: 700; }
.glamora-grid-table .g-row .g-name { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; }
.glamora-grid-table .g-row .g-name.is-inactive { opacity: .55; }
.glamora-grid-table .g-row .g-muted { font-size: 12px; color: var(--g-text-muted-light); }
.glamora-grid-table .g-row .g-actions { display: flex; gap: 7px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.glamora-grid-table .g-row .g-actions a, .glamora-grid-table .g-row .g-actions button { background: none; border: none; padding: 0; color: var(--g-gold-2); font-size: 10.5px; font-weight: 700; cursor: pointer; }
.glamora-grid-table .g-row .g-actions .danger { color: var(--g-danger); }

.glamora-cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.glamora-cat-card { background: var(--g-bg-light-2); border: 1px solid var(--g-border-light); border-radius: 14px; padding: 14px; }
.glamora-cat-card .cat-title { font-size: 11px; color: var(--g-gold-2); font-weight: 700; margin-bottom: 8px; }
.glamora-cat-card .svc-row { font-size: 12px; padding: 5px 0; display: flex; justify-content: space-between; gap: 8px; }
.glamora-cat-card .svc-row .dot-on { color: var(--g-success); }
.glamora-cat-card .svc-row .dot-off { color: var(--g-text-muted-light); font-size: 11px; }

@media (max-width: 900px) {
	.glamora-stats-grid, .glamora-cat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.glamora-grid-table .g-row { grid-template-columns: 1fr; gap: 4px; }
	.glamora-grid-table .g-row.head { display: none; }
}

/* small helpers */
.glamora-flex { display: flex; align-items: center; gap: 10px; }
.glamora-between { display: flex; align-items: center; justify-content: space-between; }
.glamora-muted { color: var(--g-text-muted-light); }
.glamora-dark .glamora-muted { color: var(--g-text-muted-dark); }
.glamora-gold-text { color: var(--g-gold-2); }
[dir="ltr"] .glamora-numeric { unicode-bidi: plaintext; }

@media (max-width: 720px) {
	.glamora-dash-shell { flex-direction: column; }
	.glamora-dash-sidebar { width: 100%; flex-direction: row; overflow-x: auto; }
	.glamora-dash-nav { flex-direction: row; }
}