/**
 * Structural CSS the PlayCourse UI cannot render without.
 *
 * The plugin builds Tailwind with `corePlugins: { preflight: false }`, because
 * preflight would reset the host theme's typography and global styles — it
 * loads inside wp-admin and inside whatever theme the site runs. That decision
 * stands, but it left three holes that the PlayCourse *theme* happened to fill,
 * so the plugin only looked self-sufficient while that theme was active:
 *
 *   1. Tailwind's border utilities emit a width and no `border-style`. A border
 *      whose style is `none` computes to 0px, so every border in plugin markup
 *      — 487 utility usages across 39 files — silently disappeared under any
 *      other theme. Cards lost their outline, dividers vanished, tables lost
 *      their rules, inputs lost their edges.
 *   2. `box-sizing: border-box`, without which every padded, fixed-width plugin
 *      layout is wider than it declares.
 *   3. `border-collapse: collapse` on tables, previously inherited from the
 *      theme's Bootstrap bundle. Without it `<tr>` borders are never painted at
 *      all, and cells drift apart by the default border-spacing.
 *
 * What is deliberately NOT here: colour, typography, spacing scale, shadows —
 * anything a site owner would call design. Branding stays in the theme. This
 * file is the floor the components stand on, not the way they look.
 */

/* ── 1. Border utilities ─────────────────────────────────────────
 *
 * Global, because these are Tailwind's own utility class names and plugin
 * markup uses them everywhere — there is no wrapper to scope them to, and
 * scoping them would mean rewriting every template that has a border.
 *
 * Each rule writes the style *and* the full width shorthand together, so
 * combining `.border-t` with `.border-l` cannot leave one edge styled and the
 * other unstyled, and no unset edge can fall back to the initial `medium` (3px)
 * the way `border-solid` alone allows.
 */
.border   { border-style: solid; border-width: 1px; }
.border-0 { border-style: solid; border-width: 0; }
.border-2 { border-style: solid; border-width: 2px; }
.border-4 { border-style: solid; border-width: 4px; }
.border-8 { border-style: solid; border-width: 8px; }

.border-t { border-style: solid; border-width: 1px 0 0 0; }
.border-r { border-style: solid; border-width: 0 1px 0 0; }
.border-b { border-style: solid; border-width: 0 0 1px 0; }
.border-l { border-style: solid; border-width: 0 0 0 1px; }
.border-x { border-style: solid; border-width: 0 1px 0 1px; }
.border-y { border-style: solid; border-width: 1px 0 1px 0; }

.border-t-0 { border-style: solid; border-top-width: 0; }
.border-t-2 { border-style: solid; border-width: 2px 0 0 0; }
.border-t-4 { border-style: solid; border-width: 4px 0 0 0; }
.border-t-8 { border-style: solid; border-width: 8px 0 0 0; }

.border-r-0 { border-right-width: 0; }
.border-r-2 { border-style: solid; border-width: 0 2px 0 0; }
.border-r-4 { border-style: solid; border-width: 0 4px 0 0; }
.border-r-8 { border-style: solid; border-width: 0 8px 0 0; }

.border-b-0 { border-bottom-width: 0; }
.border-b-2 { border-style: solid; border-width: 0 0 2px 0; }
.border-b-4 { border-style: solid; border-width: 0 0 4px 0; }
.border-b-8 { border-style: solid; border-width: 0 0 8px 0; }

.border-l-0 { border-left-width: 0; }
.border-l-2 { border-style: solid; border-width: 0 0 0 2px; }
.border-l-4 { border-style: solid; border-width: 0 0 0 4px; }
.border-l-8 { border-style: solid; border-width: 0 0 0 8px; }

/* ── 2. Box sizing, scoped ───────────────────────────────────────
 *
 * Scoped to `.pc-scope`, which the plugin's own templates carry, rather than
 * applied to `*`. A plugin has no business changing how the host theme's own
 * markup measures itself; inside PlayCourse UI it is not optional, because the
 * Tailwind widths and paddings in these templates were all authored against it.
 *
 * `.pc-scope` is set on plugin template roots; the long-standing component
 * roots are listed alongside it so existing markup is covered without being
 * rewritten.
 */
.pc-scope,
.pc-scope *,
.pc-scope *::before,
.pc-scope *::after,
.pc-dashboard,
.pc-dashboard *,
.pc-dashboard *::before,
.pc-dashboard *::after,
.woocommerce-MyAccount-content,
.woocommerce-MyAccount-content *,
.woocommerce-MyAccount-content *::before,
.woocommerce-MyAccount-content *::after {
	box-sizing: border-box;
}

/* ── 3. Buttons, scoped ──────────────────────────────────────────
 *
 * The minimum that makes a `<button>` behave like a control rather than a
 * paragraph. Colour, padding and radius are NOT here — those live in
 * button.css, which the plugin already ships and enqueues, and which is what
 * gives PlayCourse buttons their look on any theme.
 */
.pc-scope button,
.pc-dashboard button,
.woocommerce-MyAccount-content button {
	-webkit-appearance: button;
	appearance: button;
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	text-transform: none;
	margin: 0;
}

.pc-scope button:disabled,
.pc-dashboard button:disabled,
.woocommerce-MyAccount-content button:disabled {
	cursor: default;
}

/* ── 4. Tables, scoped ───────────────────────────────────────────
 *
 * `<tr>` borders are only painted under `border-collapse: collapse`; in the
 * default `separate` model they are dropped entirely, which is how the My
 * Account tables draw their row dividers. The separate model would also add
 * 2px of border-spacing between every cell.
 */
.pc-scope table,
.pc-dashboard table,
.woocommerce-MyAccount-content table {
	border-collapse: collapse;
	border-spacing: 0;
}