/*
 * The admin app's stylesheet: the synced design-system tokens and sheets, and
 * Tailwind with the admin's config. Only the rules after "Inside wp-admin" are
 * the plugin's own. Every built rule is scoped to `.rb-root`
 * (build/postcss-rb-scope.js). Built to admin/js/razorbooking-admin.css.
 */

@import '../design-system/tokens/theme.css';
@import '../design-system/tokens/motion.css';
@import '../design-system/tokens/scrollbars.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

/* The admin's own base rules (resources/css/app.css), the ones that apply to
   the design system: body copy colour and size, antialiasing, and the forms
   plugin's focus ring re-pointed from its hardcoded blue to the ink token. */
@layer base {
	html {
		@apply antialiased;
	}

	body {
		@apply text-sm text-gray-600;
	}

	input:not([type]):focus,
	input[type='text']:focus,
	input[type='email']:focus,
	input[type='url']:focus,
	input[type='password']:focus,
	input[type='number']:focus,
	input[type='search']:focus,
	input[type='tel']:focus,
	select:focus,
	textarea:focus {
		--tw-ring-color: rgb(var(--ring) / 0.85);
		border-color: rgb(var(--ring));
	}
}

/* Inside wp-admin */

/* The app fills WordPress's content column. Keyed on the `rb-app` body class
   (Razorbooking_Admin::add_body_class()): this sheet also loads on plugins.php
   for the activation banner. */
body.rb-app #wpcontent {
	padding-left: 0 !important;
}

body.rb-app #wpbody-content {
	padding-bottom: 0 !important;
}

#razorbooking-root {
	min-height: calc(100vh - 32px);
	background: rgb(var(--background));
	font-family: var(--font-brand);
}

@media (max-width: 782px) {
	#razorbooking-root {
		min-height: calc(100vh - 46px);
	}
}

/* wp-admin element rules the scoped preflight does not reset (common.css,
   forms.css). */
.rb-root li,
.rb-root dd {
	margin-bottom: 0;
}

.rb-root p {
	font-size: inherit;
	line-height: inherit;
}

.rb-root input,
.rb-root select,
.rb-root textarea {
	margin: 0;
	min-height: 0;
}

/* Remove WordPress's blue focus box-shadow. Fields draw their own focus; links
   keep the design system's ring on keyboard focus (:focus-visible). */
.rb-root a:focus:not(:focus-visible),
.rb-root input:focus,
.rb-root select:focus,
.rb-root textarea:focus {
	box-shadow: none;
}

/* Overlays above WordPress's admin bar (99999) and menu (9990), at the level
   of WordPress's media modal; the design system's order is kept. */
.rb-root {
	--z-dropdown: 160000;
	--z-drawer: 160100;
	--z-dialog: 160200;
	--z-popover: 160300;
	--z-toast: 160400;
	--z-tooltip: 160500;
}

/* The overlay portal host (src/admin/index.tsx). */
.rb-root.rb-portal-root {
	position: relative;
	z-index: auto;
}