/* Material-inspired design system for CZS eScoring.
   Loaded after Common.css so it can override legacy rules. The palette is
   aligned with www.cheer.si. Layout scope:
   - App-bar: three-zone flex (brand / HeaderCenter / HeaderUser)
   - Sidebar: 56px strip that absolute-positions to 240px on hover,
     never reflows the card underneath
   - Card: main content with overflow-x: auto so the 1440px VnosOcen table
     scrolls horizontally inside the card without shoving the rest of the UI
   Element resets are scoped to .card so Telerik Rad* controls on non-master
   pages and any future additions remain untouched. */

/* ─── Design tokens ─────────────────────────────────────────────────── */

:root {
	--md-primary:           #0085ca;
	--md-primary-dark:      #2270b0;
	--md-primary-light:     #e0f1fa;
	--md-accent:            #97d700;
	--md-surface:           #ffffff;
	--md-background:        #f4f4f5;
	--md-on-surface:        #27272a;
	--md-on-surface-muted:  #6b6b6f;
	--md-disabled:          #c5c5c9;
	--md-border:            #e4e4e7;
	--md-app-bar-bg:        #232323;
	--md-app-bar-on:        #ffffff;
	--md-elevation-1:       0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	--md-elevation-2:       0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	--md-elevation-3:       0 4px 8px rgba(0,0,0,0.18), 0 2px 4px rgba(0,0,0,0.14);
	--md-elevation-4:       0 4px 12px rgba(0,0,0,0.20);
	--md-radius:            4px;

	/* Extended palette — used by Chat dock, signal banners, and overlays */
	--md-on-primary:            #ffffff;
	--md-surface-variant:       #f0f0f2;
	--md-outline:               var(--md-border);
	--md-error:                 #d32f2f;
	--md-primary-container:     var(--md-primary-light);
	--md-on-primary-container:  var(--md-primary-dark);
}

/* ─── Page base ─────────────────────────────────────────────────────── */

body {
	margin: 0;
	font-family: 'Roboto', -apple-system, 'Segoe UI', Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--md-on-surface);
	background: var(--md-background);
}

/* ─── App-bar (three-zone flex header) ──────────────────────────────── */

.app-bar {
	display: flex;
	align-items: center;
	height: 56px;
	padding: 0 16px;
	background: var(--md-app-bar-bg);
	color: var(--md-app-bar-on);
	gap: 16px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	position: sticky;
	top: 0;
	z-index: 100;
}

.app-bar__brand {
	font-weight: 500;
	font-size: 18px;
	flex: 0 0 auto;
	white-space: nowrap;
}

.app-bar__center {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.app-bar__user {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
}

.app-bar__user-badge {
	font-weight: 500;
	padding: 4px 12px;
	border-radius: 12px;
	background: rgba(255,255,255,0.1);
	color: var(--md-app-bar-on);
}

/* Dropdown inside the dark header.
   Closed state: dark-on-dark with readable border contrast.
   Open state reverts to OS-native rendering on Windows — accepted.
   480px min-width fits the longer Slovenian category names like
   "Junior Mixed Cheer Group Stunt" without truncation. The !important
   on width overrides per-page inline Width="280px" attributes that
   were sized for the old inline-toolbar layout. */
.app-bar__center select {
	min-width: 480px !important;
	width: auto !important;
	height: 36px;
	border-radius: var(--md-radius);
	border: 1px solid rgba(255,255,255,0.6);
	background: rgba(255,255,255,0.1);
	color: var(--md-app-bar-on);
	padding: 0 12px;
	font-family: inherit;
	font-size: 14px;
}

.app-bar__center select option {
	color: var(--md-on-surface);
	background: var(--md-surface);
}

.app-bar__center .btn-icon,
.app-bar__user   .btn-icon {
	color: var(--md-app-bar-on);
	width: 40px;
	height: 40px;
}

/* At first/last category the prev/next arrow is disabled. Fully transparent
   instead of grayed keeps the element in the DOM (no layout shift) but makes
   it invisible so the reviewer instantly sees they're at the boundary. */
.app-bar__center .btn-icon.aspNetDisabled,
.app-bar__center .btn-icon[disabled] {
	opacity: 0;
	pointer-events: none;
}

.app-bar__center .btn-icon:hover,
.app-bar__user   .btn-icon:hover {
	background: rgba(255,255,255,0.1);
}

/* ─── App-content (main area with sidebar + card) ────────────────────── */

.app-content {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	max-width: 1520px;
	margin: 0 auto;
	padding: 16px;
	position: relative;  /* anchor for absolute-positioned sidebar overlay */
}

/* The outer .app-sidebar is a positioning shell that reserves a fixed 56px
   slot in the flex layout. It has no background, no padding, and no visible
   styling. All visible chrome lives in the inner .app-sidebar__inner so it
   can absolute-position on hover without taking the outer's flex slot with it. */
.app-sidebar {
	flex: 0 0 56px;
	position: relative;
	align-self: flex-start;  /* don't stretch to .app-content height */
}

/* Hide the entire sidebar slot when the SideActions placeholder has zero
   element children. :has() works around the whitespace-text-node trap
   that breaks plain :empty (ASP.NET renders Visible="false" controls as
   newlines between the opening and closing tags). */
.app-sidebar:not(:has(.app-sidebar__inner > *)) {
	display: none;
}

/* The visible sidebar surface. Sized to its content height in the static
   state; on .app-sidebar:hover it absolute-positions over the card without
   removing the outer's 56px from the flex flow. */
.app-sidebar__inner {
	width: 56px;
	background: var(--md-surface);
	border-radius: var(--md-radius);
	box-shadow: var(--md-elevation-1);
	padding: 8px 0;
	overflow: hidden;
	white-space: nowrap;
}

/* Hover-expand: absolute over the outer's 0,0 origin so the card width
   never changes. The outer's content collapses to height 0 (since the
   inner left the flow) but its 56px flex slot is preserved. */
.app-sidebar:hover .app-sidebar__inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 240px;
	z-index: 10;
	overflow: visible;
	box-shadow: var(--md-elevation-4);
}

.app-sidebar .btn-icon {
	display: flex;
	align-items: center;
	gap: 16px;
	justify-content: flex-start;
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border-radius: 0;
	text-decoration: none;
	color: var(--md-primary);
}

.app-sidebar .btn-icon:hover {
	background: var(--md-primary-light);
}

.app-sidebar .btn-icon .label {
	color: var(--md-on-surface);
	font-weight: 500;
	display: none;
}

.app-sidebar:hover .btn-icon .label {
	display: inline;
}


/* ─── Card ──────────────────────────────────────────────────────────── */

.app-content .card {
	flex: 1 1 auto;
	min-width: 0;          /* flex child can shrink below content width */
	overflow-x: auto;      /* wide VnosOcen table scrolls within card */
	background: var(--md-surface);
	border-radius: var(--md-radius);
	box-shadow: var(--md-elevation-1);
	padding: 24px;
}

/* Login-form modifier: narrow centered card on Prijava.aspx.
   :has() detects the login-form wrapper and shrinks the content + hides
   the sidebar in one rule. */
.app-content:has(> .card > .login-form) {
	max-width: 420px;
	padding-top: 96px;
}
.app-content:has(> .card > .login-form) > .app-sidebar {
	display: none;
}

.login-form h1 {
	margin: 0 0 24px 0;
	font-size: 24px;
	font-weight: 500;
	color: var(--md-primary);
	text-align: center;
}

.login-form > div {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.login-form > div > span {
	flex: 0 0 auto;
	font-size: 14px;
	color: var(--md-on-surface);
}

.login-form > div > input[type="text"],
.login-form > div > input[type="password"] {
	flex: 1 1 auto;
}

.login-form > .btn {
	display: block;
	margin-left: auto;
}

/* Default border for Repeater-rendered tables (which used to inherit the
   inline border rule from Site.master's removed <style> block). Scoped to
   direct children of the card to avoid styling nested RadioButtonList-
   generated tables. */
.app-content .card > table,
.app-content .card > div > table {
	border-collapse: collapse;
	border: 1px solid var(--md-border);
}

.app-content .card > table th,
.app-content .card > table td,
.app-content .card > div > table th,
.app-content .card > div > table td {
	padding: 8px;
	border: 1px solid var(--md-border);
}

.app-content .card > table th,
.app-content .card > div > table th {
	background-color: #f7f7f7;
	color: var(--md-on-surface);
	font-weight: 500;
}

/* ─── Button system ─────────────────────────────────────────────────── */

/* Shims for `btn btn-primary float-right` markup already present in
   Prijava.aspx. Lights up the existing login button. */
.btn {
	display: inline-block;
	padding: 8px 16px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	border: 1px solid var(--md-border);
	border-radius: var(--md-radius);
	background: var(--md-surface);
	color: var(--md-on-surface);
	cursor: pointer;
	text-decoration: none;
	transition: background-color 150ms, box-shadow 150ms;
}

.btn:hover {
	background: var(--md-primary-light);
}

.btn-primary {
	background: var(--md-primary);
	color: #ffffff;
	border-color: var(--md-primary);
	box-shadow: var(--md-elevation-1);
}

.btn-primary:hover {
	background: var(--md-primary-dark);
	border-color: var(--md-primary-dark);
}

.btn-text {
	background: transparent;
	border: none;
	color: var(--md-primary);
	box-shadow: none;
}

.btn-text:hover {
	background: var(--md-primary-light);
}

.float-right {
	float: right;
}

/* Icon button (header + sidebar use the same base class). Default 40x40
   circular; sidebar override in .app-sidebar .btn-icon turns it into a
   full-width flex row. box-sizing: border-box so the sidebar override's
   width: 100% + padding: 0 16px doesn't overflow the parent .app-sidebar__inner
   by 32px (which would render the hover background extending past the
   white drawer surface on the right). */
.btn-icon {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	background: transparent;
	border-radius: 50%;
	cursor: pointer;
	color: var(--md-primary);
	text-decoration: none;
	transition: background-color 150ms;
}

.btn-icon:hover {
	background: var(--md-primary-light);
}

.btn-icon .material-symbols-outlined {
	font-size: 24px;
}

/* Disabled state for icon buttons. ASP.NET adds .aspNetDisabled when a
   Button/LinkButton has Enabled="false"; HTML5 native disabled attribute
   is kept separate for other pathways. Faded color, no hover, cursor
   indicates non-interactivity. */
.btn-icon[disabled],
.btn-icon.aspNetDisabled {
	color: var(--md-disabled);
	cursor: not-allowed;
	pointer-events: none;
}

.btn-icon[disabled]:hover,
.btn-icon.aspNetDisabled:hover {
	background: transparent;
}

/* ─── Scoped element resets (inside .card only) ─────────────────────── */

.card button,
.card input[type="submit"],
.card input[type="button"] {
	font-family: inherit;
	font-size: 14px;
	padding: 8px 16px;
	border: 1px solid var(--md-primary);
	border-radius: var(--md-radius);
	background: var(--md-primary);
	color: #ffffff;
	cursor: pointer;
	transition: background-color 150ms;
}

.card button:hover,
.card input[type="submit"]:hover,
.card input[type="button"]:hover {
	background: var(--md-primary-dark);
}

.card button:disabled,
.card input[type="submit"]:disabled,
.card input[type="button"]:disabled,
.card .aspNetDisabled {
	background: var(--md-disabled);
	border-color: var(--md-disabled);
	cursor: not-allowed;
}

.card input[type="text"],
.card input[type="password"],
.card select,
.card textarea {
	box-sizing: border-box;  /* so inline Width="99%" + padding/border don't overflow the wrap */
	font-family: inherit;
	font-size: 14px;
	padding: 6px 10px;
	border: 1px solid var(--md-border);
	border-radius: var(--md-radius);
	background: var(--md-surface);
	color: var(--md-on-surface);
	transition: border-color 150ms, box-shadow 150ms;
}

.card input[type="text"]:focus,
.card input[type="password"]:focus,
.card select:focus,
.card textarea:focus {
	outline: none;
	border-color: var(--md-primary);
	box-shadow: 0 0 0 2px var(--md-primary-light);
}

.card label {
	color: var(--md-on-surface-muted);
	font-size: 13px;
}

.card h1 { font-size: 24px; font-weight: 500; margin: 0 0 16px 0; }
.card h2 { font-size: 20px; font-weight: 500; margin: 0 0 12px 0; }
.card h3 { font-size: 16px; font-weight: 500; margin: 0 0 8px 0; }

/* ─── Disqualification row highlight ─────────────────────────────────── */

/* Teams flagged as disqualified get a red background across the entire
   row so it's unmissable at a glance. The checkbox toggle is kept but
   alone it's too subtle — DSQ is rare and consequential. */
tr.dsq-row > td {
	background-color: #ef5350 !important;
	color: #ffffff !important;
}

/* ─── Rank-tie highlighting ──────────────────────────────────────────── */

/* Tie badge on VnosOcen — just the total cell gets an orange pill.
   Applied as a CssClass on the LabelSestevek <span>. */
.tie-badge-1 { background: rgba(255, 152, 0, 0.25); padding: 2px 8px; border-radius: 4px; }
.tie-badge-2 { background: rgba(255, 152, 0, 0.40); padding: 2px 8px; border-radius: 4px; }
.tie-badge-3 { background: rgba(230, 126, 34, 0.30); padding: 2px 8px; border-radius: 4px; }
.tie-badge-4 { background: rgba(230, 126, 34, 0.45); padding: 2px 8px; border-radius: 4px; }

/* Row-level tie on Pregled pages — applied to team-row <tr> via
   server-side TieHighlighter. */
tr.tie-1 > td { background-color: rgba(255, 152, 0, 0.12) !important; }
tr.tie-2 > td { background-color: rgba(255, 152, 0, 0.22) !important; }
tr.tie-3 > td { background-color: rgba(255, 152, 0, 0.32) !important; }
tr.tie-4 > td { background-color: rgba(255, 152, 0, 0.42) !important; }

/* Per-cell tie on Pregled pages — applied to individual <span> Labels
   inside the S/M columns via server-side TieHighlighter. */
.tie-cell-1 { background: rgba(255, 152, 0, 0.25); padding: 2px 6px; border-radius: 3px; }
.tie-cell-2 { background: rgba(255, 152, 0, 0.40); padding: 2px 6px; border-radius: 3px; }
.tie-cell-3 { background: rgba(230, 126, 34, 0.30); padding: 2px 6px; border-radius: 3px; }
.tie-cell-4 { background: rgba(230, 126, 34, 0.45); padding: 2px 6px; border-radius: 3px; }

/* ─── Inline rubric accordion (PregledSodniskiListi) ────────────────── */

/* Team rows are clickable; hover background tells the reviewer they're
   interactive. Pointer cursor reinforces the affordance. */
tr.team-row {
	cursor: pointer;
}

tr.team-row:hover {
	background-color: var(--md-primary-light);
}

/* Detail row sits immediately after each team-row inside the same table.
   Hidden by default; the JS click handler toggles .expanded. display:
   table-row keeps the row participating in the table layout. */
tr.rubric-detail {
	display: none;
}

tr.rubric-detail.expanded {
	display: table-row;
}

tr.rubric-detail > td {
	background: #f4f4f5;
	padding: 16px 24px;
	border-top: 2px solid var(--md-primary);
}

/* Inner table: per-rubric × per-judge score breakdown. Pixel widths set
   inline by JS so the columns line up with the parent team-row columns
   (Rubric ≈ No+Club, Max ≈ Team, Judge ≈ S+M pair, Avg/Median/Range ≈
   Deductions/Total/Range). table-layout: fixed honors those widths
   regardless of cell content. Sticky first column keeps the rubric
   label visible when scrolling horizontally; sticky thead keeps the
   judge numbers visible during vertical scroll inside long inner tables. */
.rubric-table {
	table-layout: fixed;
	border-collapse: collapse;
	font-size: 13px;
	background: var(--md-surface);
	box-shadow: var(--md-elevation-1);
	border-radius: var(--md-radius);
}

.rubric-table th,
.rubric-table td {
	border: 1px solid var(--md-border);
	padding: 8px 12px;
	text-align: center;
	vertical-align: middle;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rubric-table thead th {
	background: var(--md-primary);
	color: var(--md-app-bar-on);
	font-weight: 500;
	position: sticky;
	top: 0;
	z-index: 1;
}

.rubric-table .rubric-col {
	text-align: left;
	position: sticky;
	left: 0;
	background: var(--md-surface);
	font-weight: 500;
}

.rubric-table thead .rubric-col {
	background: var(--md-primary);
	z-index: 2;  /* sit above both row sticky and header sticky */
}

/* Avg / Median / Range columns get a slightly tinted background so they
   read as derived values, not raw judge scores. */
.rubric-table .rubric-stat {
	background: rgba(0, 133, 202, 0.04);
	font-weight: 500;
}

.rubric-table thead .rubric-stat {
	background: var(--md-primary);
}

/* Per-judge comments block under the rubric grid. One row per judge with
   a non-empty Komentar. Replaces the need to open the IzpisKategorije popup
   just to read judge comments. */
.rubric-comments {
	margin-top: 16px;
	padding: 12px 16px;
	background: var(--md-surface);
	border-radius: var(--md-radius);
	box-shadow: var(--md-elevation-1);
}

.rubric-comments-heading {
	font-size: 13px;
	font-weight: 500;
	color: var(--md-on-surface-muted);
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.rubric-comment {
	display: flex;
	gap: 12px;
	padding: 6px 0;
	border-top: 1px solid var(--md-border);
	font-size: 13px;
}

.rubric-comment:first-of-type {
	border-top: none;
}

.rubric-comment-judge {
	flex: 0 0 auto;
	font-weight: 500;
	color: var(--md-primary-dark);
	min-width: 32px;
}

.rubric-comment-text {
	flex: 1 1 auto;
	white-space: pre-wrap;
	color: var(--md-on-surface);
}

/* Total footer row in the accordion rubric table. Sums each judge's
   rubric scores — should match S{N} in the parent row. */
.rubric-total {
	font-weight: 700;
}

.rubric-table tfoot td {
	border-top: 2px solid var(--md-primary);
}

.rubric-loading,
.rubric-empty,
.rubric-error {
	padding: 12px;
	color: var(--md-on-surface-muted);
	font-style: italic;
}

.rubric-error {
	color: #d32f2f;
}

/* ─── Quality-reviewer chat click affordance ───────────────────────── */
/* Only body[data-vloga="quality"] is stamped by chat-init; without it
   the cells render normally and are not interactive.                   */
body[data-vloga="quality"] .js-chat-score,
body[data-vloga="quality"] .js-chat-total,
body[data-vloga="quality"] .js-chat-comment {
	cursor: pointer;
}
body[data-vloga="quality"] .js-chat-score:hover,
body[data-vloga="quality"] .js-chat-total:hover,
body[data-vloga="quality"] .js-chat-comment:hover {
	background-color: rgba(var(--md-primary-rgb, 98, 0, 238), 0.08);
}

/* ─── Print overrides ───────────────────────────────────────────────── */

@media print {
	.app-bar,
	.app-sidebar {
		display: none !important;
	}
	.app-content {
		max-width: none;
		padding: 0;
		display: block;
	}
	.app-content .card {
		box-shadow: none;
		border-radius: 0;
		padding: 0;
		overflow: visible;
	}
	/* Don't print the inline accordion. Browser print uses the existing
	   IzpisVse / IzpisKategorije popup outputs for hardcopy reports. */
	tr.rubric-detail {
		display: none !important;
	}
}