/*
 * Tabler component skin for this app's OWN class names.
 *
 * WHY THIS IS A SECOND FILE AND NOT MORE OF tabler-bridge.css
 *
 * The bridge re-points design TOKENS (--color-surface, --color-border,
 * --radius-*) at Tabler's variables, which gave every component Tabler's
 * palette and typography for free. That was measured after deploying and it
 * only got part of the way: the app's pages do not use Tabler's markup
 * (.card / .table / .page-header), they use their own (.app-sidebar,
 * .board-row, .data-table), and those carry their own structural CSS that
 * Tabler never sees. Result: right colours, right font, but the shell still
 * looked like the old design -- a sidebar of bare text links, board rows as
 * flat lines, no table headers.
 *
 * Tokens carry colour and type. They cannot carry component DESIGN. This file
 * supplies that missing half: it restyles the app's own classes to the shapes
 * Tabler uses -- elevation, header treatment, hover, pill navigation, row
 * rhythm -- without touching a single one of the 189 templates, which is the
 * whole constraint this approach exists to respect.
 *
 * Loaded AFTER components.css so it wins on specificity ties; every rule here
 * is a deliberate override of a rule in that file, not an addition to it.
 */

/* ===================================================================
 * APPLICATION SHELL
 * The sidebar was `background: var(--color-surface)` with plain links.
 * Tabler's own shell reads as a distinct navigation surface, which is what
 * separates "a web page with links" from "an application".
 * =================================================================== */

.app-shell {
	background: var(--tblr-body-bg);
}

.app-sidebar {
	background: var(--tblr-bg-surface, #fff);
	border-inline-end: 1px solid var(--tblr-border-color);
	box-shadow: 0 0 1rem rgba(24, 36, 51, .04);
}

.app-sidebar nav {
	padding: .75rem .5rem;
	gap: .125rem;
}

.app-sidebar nav a {
	display: flex;
	align-items: center;
	gap: .625rem;
	padding: .5rem .75rem;
	border-radius: var(--tblr-border-radius);
	color: var(--tblr-secondary-color);
	text-decoration: none;
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.6;
	transition: background-color .12s ease, color .12s ease;
}

.app-sidebar nav a:hover {
	background: var(--tblr-bg-surface-secondary, #f8fafc);
	color: var(--tblr-body-color);
	text-decoration: none;
}

/* The current page must be obvious at a glance -- the old sidebar gave no
   indication at all of where you were. */
.app-sidebar nav a.active,
.app-sidebar nav a[aria-current="page"] {
	background: var(--tblr-primary-lt, rgba(0, 84, 166, .1));
	color: var(--color-brand-primary-on-light);
	font-weight: 600;
}

.app-topbar {
	background: var(--tblr-bg-surface, #fff);
	border-bottom: 1px solid var(--tblr-border-color);
	box-shadow: 0 1px 2px rgba(24, 36, 51, .04);
	padding: .5rem 1rem;
}

/* ===================================================================
 * PAGE HEADER
 * =================================================================== */

.app-main > h1,
.app-shell-content > h1 {
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -.01em;
	margin: 0 0 .25rem;
}

/* ===================================================================
 * CARDS AND TILES
 * components.css gave .card only padding and a border. Tabler cards read as
 * raised surfaces, which is most of why a Tabler screen looks finished.
 * =================================================================== */

.card,
.tile,
.report-card,
.auth-card {
	background: var(--tblr-bg-surface, #fff);
	border: 1px solid var(--tblr-border-color);
	border-radius: var(--tblr-border-radius-lg, .5rem);
	box-shadow: 0 1px 2px 0 rgba(24, 36, 51, .05);
}

.report-card {
	padding: 1rem;
	transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

.report-card:hover {
	box-shadow: 0 .5rem 1rem rgba(24, 36, 51, .1);
	border-color: var(--tblr-primary);
	transform: translateY(-1px);
}

.tile-label {
	color: var(--tblr-secondary-color);
	font-size: .75rem;
	text-transform: none;
	letter-spacing: 0;
}

.tile-value {
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

/* ===================================================================
 * BOARD ROWS  (reception board, queue, worklists)
 * Were borderless flex lines running edge to edge -- the single biggest
 * reason the reception screen read as unfinished. Given the same rhythm and
 * hover affordance as a Tabler table row.
 * =================================================================== */

.board-row {
	padding: .625rem 1rem;
	border-bottom: 1px solid var(--tblr-border-color-translucent, rgba(4, 32, 69, .08));
	transition: background-color .12s ease;
	font-size: .875rem;
}

.board-row:hover {
	background: var(--tblr-bg-surface-secondary, #f8fafc);
}

.board-row:last-child {
	border-bottom: 0;
}

/* First cell of a board row is the time -- align the digits so the column
   reads as a column and not as ragged text. */
.board-row > strong:first-child {
	font-variant-numeric: tabular-nums;
	min-width: 3.5rem;
	color: var(--tblr-body-color);
}

.board-row > span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ===================================================================
 * DATA TABLES
 * =================================================================== */

.data-table-wrap {
	background: var(--tblr-bg-surface, #fff);
	border: 1px solid var(--tblr-border-color);
	border-radius: var(--tblr-border-radius-lg, .5rem);
	overflow: hidden;
	overflow-x: auto;
}

.data-table {
	font-size: .875rem;
	margin: 0;
}

.data-table th {
	padding: .6rem .75rem;
	font-weight: 600;
	font-size: .75rem;
	color: var(--tblr-secondary-color);
	background: var(--tblr-bg-surface-secondary, #f8fafc);
	border-bottom: 1px solid var(--tblr-border-color);
	white-space: nowrap;
	text-align: start;
}

.data-table td {
	padding: .6rem .75rem;
	vertical-align: middle;
	border-bottom: 1px solid var(--tblr-border-color-translucent, rgba(4, 32, 69, .08));
}

.data-table tbody tr:last-child td {
	border-bottom: 0;
}

.data-table-empty {
	padding: 2.5rem 1rem;
	text-align: center;
	color: var(--tblr-secondary-color);
	font-size: .875rem;
}

.data-table-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	padding: .75rem;
	border-bottom: 1px solid var(--tblr-border-color);
	background: var(--tblr-bg-surface, #fff);
}

/* ===================================================================
 * BADGES
 * Tabler's "-lt" (light tint) treatment: a soft background with a saturated
 * label. Far more legible in a dense table than a solid block of colour, and
 * it keeps the status readable at a glance without shouting.
 * =================================================================== */

.badge {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: .1875rem .5rem;
	border-radius: 100px;
	font-size: .75rem;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
}

.badge-success { background: var(--tblr-success-lt, #e8f7ec); color: var(--tblr-success); }
.badge-warning { background: var(--tblr-warning-lt, #fdf0e6); color: #a8480a; }
.badge-danger  { background: var(--tblr-danger-lt,  #fbebeb); color: var(--tblr-danger); }
.badge-info    { background: var(--tblr-info-lt,    #eaf3fb); color: #2b6cb0; }
.badge-neutral { background: var(--tblr-bg-surface-secondary, #f1f3f5); color: var(--tblr-secondary-color); }

/* ===================================================================
 * BUTTONS
 * components.css sets a 44px min-height for the GUC SS2 touch-target floor.
 * That floor is kept -- it is an accessibility requirement, not styling --
 * while everything visual comes from Tabler.
 * =================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .375rem;
	padding: .5rem .875rem;
	font-size: .875rem;
	font-weight: 500;
	border-radius: var(--tblr-border-radius);
	border: 1px solid var(--tblr-border-color);
	background: var(--tblr-bg-surface, #fff);
	color: var(--tblr-body-color);
	box-shadow: 0 1px 2px rgba(24, 36, 51, .04);
	transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.btn:hover {
	background: var(--tblr-bg-surface-secondary, #f8fafc);
	border-color: var(--tblr-border-color);
}

.btn-primary {
	background: var(--color-brand-primary);
	border-color: var(--color-brand-primary);
	color: #fff;
}

.btn-primary:hover {
	filter: brightness(.94);
	background: var(--color-brand-primary);
	color: #fff;
}

.btn-destructive {
	background: var(--tblr-danger);
	border-color: var(--tblr-danger);
	color: #fff;
}

.btn-sm {
	padding: .3125rem .625rem;
	font-size: .8125rem;
	min-height: 32px;
}

/* ===================================================================
 * FORMS
 * =================================================================== */

.field-label {
	font-size: .8125rem;
	font-weight: 500;
	color: var(--tblr-body-color);
	margin-bottom: .25rem;
}

.field-input,
.field-select,
.field-textarea {
	padding: .4375rem .75rem;
	font-size: .875rem;
	border-radius: var(--tblr-border-radius);
	box-shadow: 0 1px 2px rgba(24, 36, 51, .04) inset;
}

.field-hint { font-size: .75rem; color: var(--tblr-secondary-color); }
.field-error { font-size: .75rem; color: var(--tblr-danger); }

/* ===================================================================
 * NAV PILLS / CHIPS
 * =================================================================== */

.category-chip,
.tab-pill {
	display: inline-flex;
	align-items: center;
	padding: .3125rem .75rem;
	border-radius: 100px;
	font-size: .8125rem;
	font-weight: 500;
	border: 1px solid var(--tblr-border-color);
	background: var(--tblr-bg-surface, #fff);
	color: var(--tblr-secondary-color);
	cursor: pointer;
	transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

.category-chip:hover,
.tab-pill:hover {
	background: var(--tblr-bg-surface-secondary, #f8fafc);
	color: var(--tblr-body-color);
}

.category-chip.selected,
.tab-pill.active {
	background: var(--color-brand-primary);
	border-color: var(--color-brand-primary);
	color: #fff;
}

/* ===================================================================
 * REPORT CENTER
 * The grid left ragged half-empty rows because cards were not stretched --
 * observed live on /reports, where a two-card category read as broken rather
 * than merely small.
 * =================================================================== */

.report-card-grid {
	align-items: stretch;
	gap: .75rem;
}

.report-card-grid > * { height: 100%; }

.report-category-title {
	font-size: .8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--tblr-secondary-color);
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--tblr-border-color);
}

/* Arabic must not be letter-spaced or uppercased: the script is cursive, so
   letter-spacing breaks the joins between glyphs and text-transform does
   nothing but risk it. Undone by direction rather than by language so it also
   covers any future RTL locale. */
[dir="rtl"] .report-category-title {
	text-transform: none;
	letter-spacing: 0;
	font-size: .875rem;
}


/* ===================================================================
 * MOBILE
 *
 * The shell already had a drawer (.app-sidebar.open + a scrim), but nothing
 * below the drawer itself was adapted: the topbar's two flex groups did not
 * wrap, so on a phone the language switcher, the user email and Log out
 * collided; board rows kept desktop padding; and the sidebar drawer had no
 * elevation, so it read as part of the page rather than above it.
 *
 * Breakpoint is 992px to match Tabler's own lg, so this layer and the vendor
 * stylesheet change state together instead of fighting across a 24px band.
 * =================================================================== */

@media (max-width: 991.98px) {

	/* Drawer: above the page, not part of it. */
	.app-sidebar {
		position: fixed;
		top: 0;
		bottom: 0;
		z-index: 1045;
		width: min(17rem, 82vw);
		box-shadow: 0 0 2rem rgba(24, 36, 51, .18);
	}

	.app-sidebar-scrim.open {
		position: fixed;
		inset: 0;
		z-index: 1040;
		background: rgba(24, 36, 51, .45);
	}

	/* Topbar: allow the right-hand controls to wrap instead of overlapping. */
	.app-topbar {
		flex-wrap: wrap;
		gap: .5rem;
		padding: .5rem .75rem;
	}

	.app-topbar > span {
		flex-wrap: wrap;
		gap: .5rem !important;
	}

	/* The signed-in address is the least useful thing on a 390px screen and
	   the most likely to force a horizontal scroll. Hidden rather than
	   truncated -- Log out beside it is what the user actually needs. */
	.app-topbar-user {
		display: none;
	}

	.app-main {
		padding: .75rem;
	}

	.container-xl {
		padding-inline: 0;
	}

	/* Board rows stack: a five-column desktop row is unreadable at phone
	   width, so each row becomes a block with its time and status on one
	   line and the actions full-width beneath. */
	.board-row {
		align-items: flex-start;
		gap: .375rem .625rem;
		padding: .75rem;
	}

	.board-row-actions {
		width: 100%;
		margin-inline-start: 0;
		padding-top: .25rem;
	}

	.board-row-actions .btn {
		flex: 1 1 auto;
	}

	/* Tables scroll inside their own container rather than widening the page.
	   -webkit-overflow-scrolling keeps momentum scrolling on iOS. */
	.data-table-wrap {
		-webkit-overflow-scrolling: touch;
	}

	.data-table th,
	.data-table td {
		white-space: nowrap;
	}

	/* Forms go single-column; a two-up grid at 390px leaves fields ~150px. */
	.form-grid {
		grid-template-columns: 1fr !important;
	}

	.form-actions {
		flex-wrap: wrap;
	}

	.form-actions .btn {
		flex: 1 1 auto;
	}

	/* Report/card galleries: one per row rather than a 240px minmax that
	   produces a single cramped column with wasted gutters anyway. */
	.report-card-grid,
	.card-grid,
	.tile-grid {
		grid-template-columns: 1fr;
	}

	/* Page titles were desktop-sized and ate two lines on a phone. */
	.app-main > h1,
	.app-shell-content > h1 {
		font-size: 1.125rem;
	}
}

/* The hamburger is the only way to reach navigation on a phone, so it must
   meet the touch-target floor even though it is an icon button. */
.app-nav-toggle {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	background: transparent;
	border-radius: var(--tblr-border-radius);
	font-size: 1.25rem;
	cursor: pointer;
	color: var(--tblr-body-color);
}

.app-nav-toggle:hover {
	background: var(--tblr-bg-surface-secondary, #f8fafc);
}

/* ===================================================================
 * SIDEBAR ICONS
 * =================================================================== */

.app-sidebar nav a i {
	width: 1.25rem;
	font-size: 1.125rem;
	line-height: 1;
	flex-shrink: 0;
	text-align: center;
	opacity: .75;
}

.app-sidebar nav a.active i,
.app-sidebar nav a[aria-current="page"] i {
	opacity: 1;
}

/* Icons must not mirror in RTL: an icon is a pictogram, not text. Tabler's
   RTL build flips some glyph containers, which turns a clock or a flask into
   a mirrored version of itself. */
[dir="rtl"] .app-sidebar nav a i {
	transform: none;
}