/* Supplier-facing packaging design portal (/packaging-designs). The default web.html
   theme renders plain, unstyled text -- most noticeable in the Files column, where
   several download links with no separator visually ran together as one phrase
   ("Print-Ready File Barcode"). This gives that column and the surrounding item
   blocks real visual structure instead.

   The file-type-columns table (.santek-pd-file-table) and the Report an Issue modal
   were both prototyped live in a real browser session against the deployed page
   before being written here -- every value below (grid widths, spacing, the dot
   glow, the responsive breakpoints) was visually confirmed, not guessed.

   Retrofitted onto the Dark/Light Glass system (DESIGN.md) -- this file predated
   that system and never carried a single html[data-theme=...] rule, unlike every
   other portal surface. Every color below now routes through the same --santek-*,
   --text-*, --border-color, --fg-color custom properties portal_theme.css already
   redefines per theme, so (like timeline.css's own var(--token, #fallback) rules)
   no explicit dark/light selector pairs are needed here -- the fallback literals
   only exist for the (never-hit) case those properties are undefined. The status
   dots' red/green now match the exact hex timeline.css's own status vocabulary
   uses (DESIGN.md's Status Semantics); the orange "partially ready" dot keeps the
   same bare-literal-no-var() treatment timeline.css's own amber status uses, since
   no real Frappe token exists for it either. The modal gets the same 28px glass
   Container treatment as every other dialog in this app (see webshop_theme.css's
   .modal-content), not a bespoke look. Font sizes are left as this file's own
   pre-existing px-based scale -- untouched, since this pass is a color/surface
   retrofit, not a typography-unification pass; DESIGN.md's rem-based hierarchy
   documents the app's dominant scale, not a hard requirement every legacy px value
   must be renamed to match. */

.santek-pd-item {
	margin: 2rem 0 0;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--border-color, #d1d8dd);
}

.santek-pd-item:last-child {
	border-bottom: none;
}

.santek-pd-item-title {
	font-size: 1.15rem;
	font-weight: 600;
	margin: 0 0 0.75rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.santek-pd-item-code {
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--text-muted, #8d99a6);
	margin: -0.5rem 0 0.75rem;
	/* Lines up with the item name's own text, not the status dot -- the dot is
	   meant to draw the eye first, the code is a subtitle of the name below it. */
	padding-left: 18.4px;
	box-sizing: border-box;
}

.santek-pd-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
	animation: santek-pd-glow-pulse 2s ease-in-out infinite;
}

@keyframes santek-pd-glow-pulse {
	0%,
	100% {
		box-shadow: 0 0 3px 1px var(--glow-color), 0 0 1px 0px var(--glow-color);
	}
	50% {
		box-shadow: 0 0 7px 2px var(--glow-color), 0 0 3px 1px var(--glow-color);
	}
}

/* Aligned to DESIGN.md's Status Semantics palette -- the same red/green this app's
   timeline.css already uses for its own status dots, not a second, slightly
   different red/green invented independently here. */
.santek-pd-dot-red {
	background: var(--red-500, #c62828);
	--glow-color: rgba(198, 40, 40, 0.8);
}

.santek-pd-dot-orange {
	background: #e0a13a;
	--glow-color: rgba(224, 161, 58, 0.8);
}

.santek-pd-dot-green {
	background: var(--green-500, #2e7d32);
	--glow-color: rgba(46, 125, 50, 0.8);
}

.santek-pd-download-all {
	margin: 0.5rem 0 1.5rem;
}

.santek-pd-not-ready {
	color: var(--text-muted, #8d99a6);
	font-size: 0.95rem;
	margin: 0;
}

/* One file-table per item -- column widths are auto-sized within each item's own
   table, never shared across items (nothing needs the "Box" row of one item to
   line up with the "Inner Carton" row of another). */
.santek-pd-file-table {
	display: grid;
	grid-template-columns: 260px 1fr 1fr 1fr 140px;
	column-gap: 14px;
	row-gap: 12px;
	align-items: center;
	margin-top: 10px;
	font-size: 13px;
}

.santek-pd-col-head {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted, #8d99a6);
	font-weight: 600;
	border-bottom: 1px solid var(--border-color, #d1d8dd);
	padding-bottom: 8px;
	margin-bottom: 4px;
	/* Stretched to the row's full height (not centered within it) so every column
	   head's own border-bottom lands on the exact same line -- an empty head cell
	   (above the row-label column) has no text and would otherwise collapse to a
	   shorter box than its neighbours, leaving the divider line broken/uneven. */
	align-self: stretch;
	display: flex;
	align-items: flex-end;
}

.santek-pd-cell {
	padding: 4px 0;
}

/* Row-label cell needs to fit fully within its own grid column -- the base page
   theme's typography rules can otherwise hand it a width/flex-basis that overflows
   into the next column. */
.santek-pd-design-meta {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	flex: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 0.95rem;
	color: var(--text-muted, #8d99a6);
	box-sizing: border-box;
}

.santek-pd-design-meta b {
	color: var(--text-color, #1c2126);
	font-weight: 600;
}

/* Own white-space/overflow rules, deliberately not inherited from the parent
   .santek-pd-design-meta cell (nowrap + ellipsis, sized for the package-type line
   above it) -- live-prototyping this exact template already hit that inheritance
   trap twice before (see item_packaging_design/CLAUDE.md), so this is written
   defensively rather than assumed safe. Shown only when a design carries a
   distributor -- an item can have several simultaneous Approved designs for the
   same package type differing only by distributor, so this is what actually lets
   a supplier tell two otherwise-identical-looking rows apart. */
.santek-pd-distributor-label {
	display: block;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	font-size: 11px;
	color: var(--text-muted, #8d99a6);
	margin-top: 2px;
}

.santek-pd-cell-dash {
	color: var(--text-muted, #8d99a6);
}

.santek-pd-assets-cell {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

/* Download-link chips -- the same field-surface pill treatment as the app's other
   secondary/ghost pill buttons (webshop_theme.css's .btn-primary-light), not a
   hardcoded white pill. Needs the html[data-theme=...] prefix, not just the class,
   to actually beat portal_theme.css's own global `html[data-theme] a { color:
   var(--santek-accent); }` link-color rule -- confirmed live it otherwise wins on
   specificity and the chip text renders accent blue instead of the intended
   neutral text-color, the same class of conflict page-header-actions-block's own
   .btn-secondary rule already had to be fixed for. */
html[data-theme$="-dark"] .santek-pd-file-link,
html[data-theme$="-light"] .santek-pd-file-link {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	border: 1px solid var(--santek-card-border, rgba(255, 255, 255, 0.16));
	font-size: 12.5px;
	line-height: 1.3;
	text-decoration: none;
	color: var(--text-color, #1c2126);
	background: var(--santek-input-bg, rgba(255, 255, 255, 0.06));
}

.santek-pd-file-link:hover {
	border-color: var(--santek-accent, #3f8ae0);
	text-decoration: none;
}

/* A destructive/attention action, not a purchase one -- reuses DESIGN.md's
   documented status-error red (the same red timeline.css's own error banner and
   this file's own "not ready" dot use) rather than a separately-tuned red. */
.santek-pd-report-issue-btn {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	border: 1px solid var(--red-500, #c62828);
	color: var(--red-500, #c62828);
	background: var(--santek-input-bg, rgba(255, 255, 255, 0.06));
	font-size: 12px;
	font-family: inherit;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.12s, color 0.12s;
}

.santek-pd-report-issue-btn:hover {
	background: var(--red-500, #c62828);
	color: #fff;
}


/* -------------------------------------------------------------------------
   Report an Issue modal
   ------------------------------------------------------------------------- */

.santek-pd-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	/* Scrim stays a plain black tint regardless of theme -- the conventional
	   treatment for a dimming layer behind a modal, same as core Bootstrap's own
	   .modal-backdrop, not part of the glass palette itself. */
	background: rgba(0, 0, 0, 0.45);
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.santek-pd-modal-overlay.santek-pd-open {
	display: flex;
}

/* Same 28px glass Container recipe as every other dialog in this app
   (webshop_theme.css's .modal-content) -- this modal predates that pattern and had
   its own hardcoded white card; now it's the same recipe, not a third one. */
.santek-pd-modal {
	background: var(--santek-card-bg, rgba(255, 255, 255, 0.08));
	backdrop-filter: var(--santek-blur, blur(34px) saturate(160%));
	-webkit-backdrop-filter: var(--santek-blur, blur(34px) saturate(160%));
	border: 1px solid var(--santek-card-border, rgba(255, 255, 255, 0.16));
	border-radius: 28px;
	color: var(--text-color, #1c2126);
	width: 480px;
	max-width: 92vw;
	max-height: 86vh;
	overflow-y: auto;
	box-shadow:
		inset 0 1px 0 var(--santek-card-highlight, rgba(255, 255, 255, 0.14)),
		0 30px 80px var(--santek-card-shadow, rgba(0, 0, 0, 0.35));
	font-family: inherit;
}

.santek-pd-modal-header {
	padding: 20px 24px 12px;
	border-bottom: 1px solid var(--border-color, #d1d8dd);
}

.santek-pd-modal-header h3 {
	margin: 0 0 4px;
	font-size: 18px;
}

.santek-pd-modal-subtitle {
	color: var(--text-muted, #8d99a6);
	font-size: 13px;
}

.santek-pd-modal-body {
	padding: 18px 24px;
}

.santek-pd-modal-body label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--text-color, #1c2126);
}

/* Background/text color for a bare <textarea> already come from portal_theme.css's
   site-wide themed form-control rule; only the border literal was local to this
   file and needed converting. */
.santek-pd-modal-body textarea {
	width: 100%;
	min-height: 90px;
	border: 1px solid var(--border-color, #d1d8dd);
	border-radius: 8px;
	padding: 10px;
	font-size: 14px;
	font-family: inherit;
	resize: vertical;
	box-sizing: border-box;
}

.santek-pd-file-drop {
	margin-top: 16px;
	border: 1.5px dashed var(--border-color, #d1d8dd);
	border-radius: 8px;
	padding: 14px;
	text-align: center;
	color: var(--text-muted, #8d99a6);
	font-size: 13px;
	cursor: pointer;
	min-height: 137px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.santek-pd-file-drop:hover {
	border-color: var(--santek-accent, #3f8ae0);
}

.santek-pd-file-drop.santek-pd-drag-over {
	border-color: var(--santek-accent, #3f8ae0);
	background: var(--fg-color, rgba(255, 255, 255, 0.08));
	color: var(--text-color, #1c2126);
}

.santek-pd-file-hint {
	font-size: 11.5px;
	color: var(--text-muted, #8d99a6);
	margin-top: 4px;
}

.santek-pd-file-list {
	margin-top: 10px;
}

.santek-pd-file-list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 10px;
	background: var(--fg-color, rgba(255, 255, 255, 0.08));
	border-radius: 6px;
	margin-bottom: 6px;
	font-size: 12.5px;
}

/* Same red-tinted error banner pair timeline.css's own SLA warning banner uses
   (Frappe's --red-100/--red-700), not a second, independently-tuned red pair. */
.santek-pd-file-list-item.error {
	background: var(--red-100, #fdecea);
	color: var(--red-700, #a52a1f);
}

.santek-pd-file-remove {
	cursor: pointer;
	color: var(--text-muted, #8d99a6);
	font-weight: bold;
	margin-left: 10px;
}

.santek-pd-file-remove:hover {
	color: var(--red-500, #c62828);
}

.santek-pd-modal-error {
	color: var(--red-700, #a52a1f);
	font-size: 12.5px;
	margin-top: 10px;
	display: none;
}

.santek-pd-modal-footer {
	padding: 16px 24px 22px;
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

.santek-pd-btn-secondary {
	padding: 9px 16px;
	border-radius: 999px;
	border: 1px solid var(--santek-card-border, rgba(255, 255, 255, 0.16));
	background: var(--santek-input-bg, rgba(255, 255, 255, 0.06));
	color: var(--text-color, #1c2126);
	font-size: 13px;
	font-family: inherit;
	cursor: pointer;
}

/* A confirm/submit action, not a purchase one -- the same accent-tinted treatment
   the /login submit button uses (portal_theme.css's .btn-login), rather than the
   webshop's reserved buy-glow gradient (DESIGN.md: the glow is for commerce
   actions only) or the original's theme-blind solid black. */
.santek-pd-btn-primary {
	padding: 9px 18px;
	border-radius: 999px;
	border: 1px solid var(--santek-accent, #3f8ae0);
	background: color-mix(in srgb, var(--santek-accent, #3f8ae0) 85%, transparent);
	color: #fff;
	font-size: 13px;
	font-family: inherit;
	cursor: pointer;
	font-weight: 500;
}

.santek-pd-btn-primary:disabled {
	background: var(--text-muted, #8d99a6);
	border-color: var(--text-muted, #8d99a6);
	cursor: not-allowed;
}

.santek-pd-modal-success {
	padding: 40px 24px;
	text-align: center;
}

.santek-pd-modal-success .icon {
	font-size: 40px;
	margin-bottom: 12px;
}

/* -------------------------------------------------------------------------
   Tablet -- tighten columns and let the row-label wrap instead of truncating it
   (there's still plenty of vertical room at this width, so losing "Version N" to
   an ellipsis is worse than a two-line label).
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.santek-pd-file-table {
		grid-template-columns: 190px 1fr 1fr 1fr 110px;
		column-gap: 10px;
		font-size: 12.5px;
	}

	.santek-pd-file-table .santek-pd-file-link {
		padding: 3px 9px;
		font-size: 11.5px;
	}

	.santek-pd-report-issue-btn {
		padding: 3px 9px;
		font-size: 11px;
	}

	.santek-pd-design-meta {
		white-space: normal;
		text-overflow: clip;
		overflow: visible;
		line-height: 1.3;
	}
}

/* -------------------------------------------------------------------------
   Phone -- collapse the column table into one labeled card per design, and let
   the modal fill the whole screen instead of floating as a small dialog.
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.santek-pd-file-table {
		grid-template-columns: 1fr;
		row-gap: 0;
	}

	.santek-pd-col-head {
		display: none;
	}

	.santek-pd-file-table .santek-pd-cell {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 6px 0;
		border-bottom: 1px solid var(--border-color, #d1d8dd);
	}

	.santek-pd-file-table .santek-pd-cell[data-label]::before {
		content: attr(data-label);
		font-size: 11px;
		font-weight: 600;
		color: var(--text-muted, #8d99a6);
		text-transform: uppercase;
		letter-spacing: 0.03em;
		flex: 0 0 auto;
		margin-right: 10px;
	}

	/* The base .santek-pd-cell flex-row above is shaped for a label + single value
	   pair (Dieline/Print-Ready File/Assets), side by side. The meta cell has no
	   data-label of its own and, once a distributor label is present, stacks two
	   lines of its own content -- without this override, flex-row + space-between
	   would squeeze the distributor label onto the same line as the title instead
	   of below it. */
	.santek-pd-file-table .santek-pd-design-meta {
		display: block;
	}

	.santek-pd-file-table .santek-pd-row-start {
		border-bottom: none;
		padding-top: 16px;
		margin-top: 6px;
		border-top: 1px solid var(--border-color, #d1d8dd);
	}

	.santek-pd-file-table .santek-pd-row-first {
		border-top: none;
		margin-top: 0;
		padding-top: 0;
	}

	.santek-pd-file-table .santek-pd-cell:last-child {
		justify-content: flex-end;
		border-bottom: none;
		padding-bottom: 12px;
	}

	.santek-pd-report-issue-btn {
		width: 100%;
		text-align: center;
		padding: 8px 0;
	}

	.santek-pd-modal-overlay {
		padding: 0;
		align-items: stretch;
		justify-content: stretch;
	}

	.santek-pd-modal {
		width: 100%;
		max-width: 100%;
		height: 100%;
		max-height: 100%;
		border-radius: 0;
		display: flex;
		flex-direction: column;
	}

	.santek-pd-modal-header {
		flex: 0 0 auto;
	}

	.santek-pd-modal-body {
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.santek-pd-modal-footer {
		flex: 0 0 auto;
		border-top: 1px solid var(--border-color, #d1d8dd);
	}
}