/* ==========================================================================
   Shared responsive behaviour for the Customer Management UI.
   Tailwind (CDN) handles the bulk of the layout; this file covers the parts
   utility classes cannot express — chiefly turning wide data tables into
   stacked cards on small screens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Responsive data tables
   A table marked `data-responsive` renders as a real table from `lg` (1024px)
   up, where the docked sidebar still leaves room for it. Below that
   it collapses into one card per row, with each cell labelled by its column
   heading via `data-label`. Mark the identity cell (avatar + name) with
   `data-primary` so it spans the card as a heading, and the button cell with
   `data-actions` so its controls get touch-sized hit areas.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
	table[data-responsive] {
		min-width: 0 !important;
	}

	/* Headings become the per-cell labels, so hide them accessibly. */
	table[data-responsive] thead {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	table[data-responsive],
	table[data-responsive] tbody,
	table[data-responsive] tr,
	table[data-responsive] td {
		display: block;
		width: 100%;
	}

	table[data-responsive] tr {
		padding: 1rem 1.25rem;
	}

	table[data-responsive] td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.375rem 0;
		text-align: left;
	}

	table[data-responsive] td::before {
		content: attr(data-label);
		flex: 0 0 auto;
		font-size: 10px;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: #aa9791;
	}

	/* Cells with no label (or an explicitly empty one) render without a prefix. */
	table[data-responsive] td:not([data-label])::before,
	table[data-responsive] td[data-label='']::before {
		content: none;
	}

	/* The identity cell heads the card: full width, no label, a little breathing room. */
	table[data-responsive] td[data-primary] {
		display: block;
		padding-top: 0;
		padding-bottom: 0.75rem;
	}

	table[data-responsive] td[data-primary]::before {
		content: none;
	}

	/* Controls centred with auto margins in table mode would fight the card
	   layout's space-between alignment, so neutralise them here. */
	table[data-responsive] td > * {
		margin-left: 0;
		margin-right: 0;
	}

	/* `truncate` keeps a desktop table row on one line, but in a card the value
	   should wrap rather than be cut off. */
	table[data-responsive] td {
		overflow: visible;
		text-overflow: clip;
		white-space: normal;
		max-width: none;
	}

	/* Permission-matrix checkboxes get a larger tap area too. */
	table[data-responsive] td input[type='checkbox'] {
		height: 1.25rem;
		width: 1.25rem;
	}

	/* Comfortable touch targets for row actions on phones. */
	table[data-responsive] td[data-actions] {
		padding-top: 0.875rem;
	}

	table[data-responsive] td[data-actions] a,
	table[data-responsive] td[data-actions] button {
		height: 2.25rem;
		width: 2.25rem;
	}
}

/* --------------------------------------------------------------------------
   Card layout on wider screens (tablets)
   Between 640px and the table breakpoint the cards span a wide row, which
   would strand each label and its value at opposite edges. Cap the pair so
   they stay visually associated.
   -------------------------------------------------------------------------- */
@media (min-width: 640px) and (max-width: 1023px) {
	table[data-responsive] td:not([data-primary]) {
		max-width: 32rem;
	}
}

/* ==========================================================================
   Light content area
   The shell (sidebar + top bar) stays dark; `main` becomes a light panel.
   Every rule below is scoped to `main`, so the dark utilities the sidebar,
   header and auth pages rely on are left alone.
   ========================================================================== */
body:not(.auth-shell) main {
	--paper: #f7f4f2;
	--surface: #ffffff;
	--ink: #1b1517;
	--ink-soft: #6d5f5a;
	--ink-faint: #97877f;
	--hairline: #e6ddd8;
	--tint: #f3ede9;
	--red: #b4162c;
	--red-soft: #fdecee;

	background-color: var(--paper);
	color: var(--ink);
}

/* --- surfaces ------------------------------------------------------------ */
body:not(.auth-shell) main .bg-ink {
	background-color: var(--surface);
}

body:not(.auth-shell) main [class*="rgba(255,240,230,0.02)]"],
body:not(.auth-shell) main [class*="rgba(255,240,230,0.04)]"] {
	background-color: var(--tint);
}

/* --- type ---------------------------------------------------------------- */
body:not(.auth-shell) main .text-cream {
	color: var(--ink);
}

body:not(.auth-shell) main .text-muted {
	color: var(--ink-soft);
}

body:not(.auth-shell) main [class*="text-[#cfbeb6]"] {
	color: var(--ink-soft);
}

body:not(.auth-shell) main [class*="text-[#786964]"] {
	color: var(--ink-faint);
}

body:not(.auth-shell) main ::placeholder {
	color: var(--ink-faint);
}

/* --- rules and dividers -------------------------------------------------- */
body:not(.auth-shell) main .border-line {
	border-color: var(--hairline);
}

body:not(.auth-shell) main .divide-line > :not([hidden]) ~ :not([hidden]),
body:not(.auth-shell) main .divide-y > :not([hidden]) ~ :not([hidden]) {
	border-color: var(--hairline);
}

/* --- form controls ------------------------------------------------------- */
body:not(.auth-shell) main input:not([type='checkbox']):not([type='radio']),
body:not(.auth-shell) main select,
body:not(.auth-shell) main textarea {
	background-color: var(--surface);
	border-color: var(--hairline);
	color: var(--ink);
	color-scheme: light;
}

body:not(.auth-shell) main input:focus,
body:not(.auth-shell) main select:focus,
body:not(.auth-shell) main textarea:focus {
	background-color: var(--red-soft);
	border-color: var(--red);
}

body:not(.auth-shell) main option {
	background-color: var(--surface);
	color: var(--ink);
}

/* --- table rows ---------------------------------------------------------- */
body:not(.auth-shell) main tbody tr:hover {
	background-color: var(--tint);
}

/* --- accents ------------------------------------------------------------- */
body:not(.auth-shell) main .text-blood-bright {
	color: var(--red);
}

body:not(.auth-shell) main [class*="hover:text-[#ff657a]"]:hover {
	color: #8f1022;
}

body:not(.auth-shell) main [class*="rgba(167,25,46,0.12)]"],
body:not(.auth-shell) main [class*="rgba(167,25,46,0.2)]"] {
	background-color: var(--red-soft);
}

/* status pills need darker ink to stay legible on white */
body:not(.auth-shell) main .text-emerald-400 {
	color: #0d6b47;
}

body:not(.auth-shell) main .bg-emerald-400\/10 {
	background-color: #e8f4ef;
}

body:not(.auth-shell) main .text-gold {
	color: #8a5f34;
}

body:not(.auth-shell) main .bg-gold\/10 {
	background-color: #f8f0e6;
}

body:not(.auth-shell) main [class*="rgba(170,151,145,0.15)]"] {
	background-color: #ece6e2;
}

/* Faint white fills (progress track, subtle panels) vanish on a light ground. */
body:not(.auth-shell) main [class*="rgba(255,240,230,0.08)]"]:not([class*="hover:"]):not([class*="focus-visible:"]),
body:not(.auth-shell) main [class*="rgba(255,240,230,0.03)]"]:not([class*="hover:"]) {
	background-color: #e8e0db;
}

body:not(.auth-shell) main [class*="hover:bg-[rgba(255,240,230,0.06)"]:hover,
body:not(.auth-shell) main [class*="hover:bg-[rgba(255,240,230,0.08)"]:hover {
	background-color: var(--tint);
}

/* ==========================================================================
   Typography
   Inter is a UI face: at display sizes its default weight reads thin and its
   default tracking too loose, so the big headings get tightened up.
   ========================================================================== */
body:not(.auth-shell) main h1 {
	font-weight: 600;
	letter-spacing: -0.025em;
}

body:not(.auth-shell) main h2 {
	font-weight: 600;
	letter-spacing: -0.015em;
}

/* Fixed-width digits so amounts and counts line up down a column. */
body:not(.auth-shell) main table,
body:not(.auth-shell) main .font-serif {
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Card elevation
   On the light ground a hairline border alone reads flat, so every card
   surface gets a soft two-layer shadow: a tight contact shadow plus a wider,
   softer one. Cards that are links lift slightly on hover.
   ========================================================================== */
body:not(.auth-shell) main .bg-ink {
	box-shadow:
		0 1px 2px rgba(27, 21, 23, 0.04),
		0 2px 8px rgba(27, 21, 23, 0.05);
}

body:not(.auth-shell) main a.bg-ink {
	transition: box-shadow 160ms ease, transform 160ms ease;
}

body:not(.auth-shell) main a.bg-ink:hover {
	box-shadow:
		0 2px 4px rgba(27, 21, 23, 0.06),
		0 8px 20px rgba(27, 21, 23, 0.09);
	transform: translateY(-1px);
}