/* =====================================================================
   PHP File Uploader - skin for the widget the library generates.

   The uploader emits its own DOM with inline geometry, so this file only
   restyles colour, type and spacing. Targets:

     button#<Name>Button ........... trigger ("Upload File", "Select files")
     bare <button> after the panel .. "Cancel upload"
     button.AjaxUploaderCancelAllButton
     table.uploadergrid ............ file queue (icon | name | action)
     table.uploaderprogresstable ... progress panel
       .uploaderprogress ........... track
       .uploaderprogressleft ....... completed fill  (coloured by the library CSS)
       .uploaderprogresstext ....... centred percentage
       .uploaderprogressinfotext ... "3.1 MB of 8.0 MB at 1.2 MB/s"
     table.Grid / .demo-table ...... lists the AJAX demos build

   Palette follows the site brand (#0078ca) rather than the uploader's
   defaults, so the widget matches the page it sits on.
   ===================================================================== */

:root {
	--upl-primary: #0078ca;
	--upl-primary-dark: #005fa3;
	--upl-success: #22a06b;
	--upl-danger: #dc2626;
	--upl-text: #0f172a;
	--upl-muted: #64748b;
	--upl-border: #e2e8f0;
	--upl-bg: #ffffff;
	--upl-bg-soft: #f8fafc;
	--upl-radius: 8px;
	--upl-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Trigger button ----------
   Emitted as <button id="...Button" onclick="return false;"> with no class,
   so it is matched on that shape. */
.demo-stage button[id$="Button"],
button[id$="Button"][onclick^="return false"] {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	border: 1px solid var(--upl-primary-dark);
	border-radius: var(--upl-radius);
	background: linear-gradient(180deg, #0e93e9 0%, var(--upl-primary) 100%);
	padding: .55rem 1.1rem;
	color: #fff;
	font-family: var(--upl-font);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.5;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0,120,202,.25), 0 6px 14px -8px rgba(0,120,202,.55);
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* upload glyph, drawn as a mask so it inherits the text colour */
.demo-stage button[id$="Button"]::before,
button[id$="Button"][onclick^="return false"]::before {
	content: "";
	width: 1.05em;
	height: 1.05em;
	flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M7.646 4.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V13.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3z'/><path d='M2 2.5A.5.5 0 0 1 2.5 2h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 2.5z'/></svg>") center / contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M7.646 4.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V13.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3z'/><path d='M2 2.5A.5.5 0 0 1 2.5 2h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 2.5z'/></svg>") center / contain no-repeat;
}

.demo-stage button[id$="Button"]:hover,
button[id$="Button"][onclick^="return false"]:hover {
	transform: translateY(-1px);
	background: linear-gradient(180deg, #38adf8 0%, #0e93e9 100%);
	box-shadow: 0 2px 4px rgba(0,120,202,.25), 0 10px 20px -8px rgba(0,120,202,.6);
}

.demo-stage button[id$="Button"]:active,
button[id$="Button"][onclick^="return false"]:active {
	transform: translateY(0);
	box-shadow: 0 1px 2px rgba(0,120,202,.3);
}

.demo-stage button[id$="Button"]:focus-visible,
button[id$="Button"][onclick^="return false"]:focus-visible {
	outline: 3px solid rgba(0,120,202,.35);
	outline-offset: 2px;
}

/* ---------- Cancel controls ----------
   "Cancel upload" is a bare <button> with no id or class, emitted next to the
   progress panel; "Cancel all" carries its own class. */
button.AjaxUploaderCancelAllButton,
.demo-stage table + button:not([id]):not([class]),
.demo-stage span + button:not([id]):not([class]) {
	border: 1px solid rgba(220,38,38,.35);
	border-radius: 6px;
	background: #fff;
	padding: .35rem .75rem;
	margin: 4px 0 8px;
	color: var(--upl-danger);
	font-family: var(--upl-font);
	font-size: .8125rem;
	font-weight: 500;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

button.AjaxUploaderCancelAllButton:hover,
.demo-stage table + button:not([id]):not([class]):hover,
.demo-stage span + button:not([id]):not([class]):hover {
	border-color: var(--upl-danger);
	background: rgba(220,38,38,.06);
}

/* ---------- File queue ---------- */
table.uploadergrid {
	max-width: 100%;
	table-layout: fixed;
	border-spacing: 0;
	box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 18px -12px rgba(15,23,42,.15);
}

/* icon columns stay narrow; the name column takes the rest and truncates */
table.uploadergrid td:first-child { width: 26px !important; padding-right: 0 !important; }
table.uploadergrid td:last-child { width: 26px !important; padding-left: 0 !important; text-align: right; }

table.uploadergrid td:nth-child(2) {
	width: auto !important;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-weight: 500;
}

table.uploadergrid img[alt="Remove"],
table.uploadergrid img[alt="Cancel"] {
	opacity: .55;
	transition: opacity .15s ease, transform .15s ease;
}

table.uploadergrid tr:hover img[alt="Remove"],
table.uploadergrid tr:hover img[alt="Cancel"] { opacity: 1; transform: scale(1.1); }

/* ---------- Progress panel ----------
   Colours live in the stylesheet the library emits; this only fixes layout
   robustness. uploader.js writes the text box with MISSPELLED inline styles
   ("heignt", "line-heignt"), so vertical centring cannot rely on them. */
.uploaderprogresstext {
	display: flex;
	align-items: center;
	justify-content: center;
	bottom: 0;                 /* the inline style sets top only */
	line-height: 1;
	pointer-events: none;
	z-index: 2;
}

.uploaderprogressinfotext { white-space: normal !important; }

/* ---------- Lists the AJAX demos build ---------- */
table.Grid,
table.demo-table {
	min-width: 320px;
	max-width: 100%;
	border: 1px solid var(--upl-border);
	border-radius: var(--upl-radius);
	border-collapse: separate;
	border-spacing: 0;
	background: var(--upl-bg);
	overflow: hidden;
	font-family: var(--upl-font);
	font-size: 14px;
	color: var(--upl-text);
}

table.Grid td,
table.Grid th {
	border: 0;
	border-bottom: 1px solid var(--upl-border);
	padding: 9px 12px;
	vertical-align: middle;
}

table.Grid tr:last-child td { border-bottom: 0; }
table.Grid tr:hover td { background: var(--upl-bg-soft); }
table.Grid td:first-child { width: 28px; padding-right: 0; }
table.Grid img { vertical-align: middle; }
table.Grid a { color: var(--upl-primary); font-weight: 500; text-decoration: none; }
table.Grid a:hover { text-decoration: underline; }
table.Grid:empty, table#filelist:empty { display: none; }

/* ---------- Small screens ---------- */
@media (max-width: 480px) {
	table.uploadergrid,
	table.uploaderprogresstable,
	.uploaderprogress { min-width: 0 !important; }

	.demo-stage button[id$="Button"],
	button[id$="Button"][onclick^="return false"] { width: 100%; justify-content: center; }
}