/* =====================================================================
   ASP Uploader — modern skin for the generated widget UI
   Targets the DOM the uploader script emits:
     #<name>Button ................ trigger button (id ends with "Button")
     table.uploadergrid ........... file queue
     tr.AjaxUploaderQueueTableRow . queue row  (icon | file name | status)
     table.uploaderprogresstable .. progress panel wrapper
       .uploaderprogress ........ bar track  (+ .uploaderprogressclassic / -modern)
       .uploaderprogressleft .... completed part
       .uploaderprogressright ... remaining part
       .uploaderprogresstext .... centered percentage
       .uploaderprogressinfotext  "Uploading x.png 3 MB of 10 MB at 1MB/s; 7 s remaining"
     button.AjaxUploaderCancelAllButton
     button (sibling "Cancel upload")
   The script sets many inline styles, so a few rules use !important on purpose.
   ===================================================================== */

:root {
  --upl-primary: #0d6efd;
  --upl-primary-dark: #0a58ca;
  --upl-success: #198754;
  --upl-danger: #dc3545;
  --upl-text: #1e2022;
  --upl-muted: #677788;
  --upl-border: #e7eaf3;
  --upl-bg: #ffffff;
  --upl-bg-soft: #f8fafd;
  --upl-radius: 8px;
  --upl-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Trigger button ("Upload File", "Select multiple files") ---------- */
button[id$="Button"][onclick="return false"],
button[onclick^="ShowFiles"] {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--upl-font);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
  background: linear-gradient(180deg, var(--upl-primary) 0%, var(--upl-primary-dark) 100%);
  border: 1px solid var(--upl-primary-dark);
  border-radius: var(--upl-radius);
  padding: .55rem 1.1rem .55rem .95rem;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(13,110,253,.25), 0 6px 14px -8px rgba(13,110,253,.55);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
button[id$="Button"][onclick="return false"]::before,
button[onclick^="ShowFiles"]::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='M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z'/><path d='M7.646 4.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V14.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3z'/></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='M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z'/><path d='M7.646 4.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V14.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3z'/></svg>") center / contain no-repeat;
}
button[id$="Button"][onclick="return false"]:hover,
button[onclick^="ShowFiles"]:hover {
  background: linear-gradient(180deg, #1c7cff 0%, var(--upl-primary) 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(13,110,253,.25), 0 10px 20px -8px rgba(13,110,253,.6);
}
button[id$="Button"][onclick="return false"]:active,
button[onclick^="ShowFiles"]:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(13,110,253,.3); }
button[id$="Button"][onclick="return false"]:focus-visible,
button[onclick^="ShowFiles"]:focus-visible { outline: 3px solid rgba(13,110,253,.35); outline-offset: 2px; }

/* ---------- File queue ---------- */
table.uploadergrid {
  font-family: var(--upl-font) !important;
  max-width: 100%;               /* respects the script's PanelWidth, never overflows */
  margin: 14px 0 10px !important;
  background: var(--upl-bg) !important;
  border: 1px solid var(--upl-border) !important;
  border-radius: var(--upl-radius) !important;
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(30,32,34,.04), 0 6px 18px -12px rgba(30,32,34,.15);
}
table.uploadergrid td,
table.uploadergrid th {
  padding: 10px 12px !important;
  font-size: 14px !important;
  color: var(--upl-text) !important;
  border-bottom: 1px solid var(--upl-border) !important;
  vertical-align: middle;
  line-height: 1.4;
}
table.uploadergrid tr:last-child td { border-bottom: none !important; }
table.uploadergrid tr.AjaxUploaderQueueTableRow {
  background-color: var(--upl-bg) !important;
  transition: background-color .15s ease;
}
table.uploadergrid tr.AjaxUploaderQueueTableRow:hover { background-color: var(--upl-bg-soft) !important; }
/* first col: status icon; last col: action icon; middle col: file name.
   The script sets inline width on the middle cell; we pin the icon columns
   narrow with !important and let the name column take the rest. */
table.uploadergrid { table-layout: fixed; }
table.uploadergrid td:first-child { width: 22px !important; padding-right: 0 !important; }
table.uploadergrid td:last-child  { width: 22px !important; text-align: right; padding-left: 0 !important; }
table.uploadergrid td:nth-child(2) {
  width: auto !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
table.uploadergrid img {
  display: inline-block;
  vertical-align: middle;
  border: 0;
}
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 ----------
   The script positions the fill with pixel geometry computed from PanelWidth
   (left/width in px on .uploaderprogressleft/.uploaderprogressright and a
   fixed px width on the track). We keep that geometry intact and only restyle
   colours, radius, shadows and typography, so the percentage stays accurate. */
table.uploaderprogresstable {
  max-width: 100%;
  margin: 12px 0 6px !important;
  border-collapse: separate;
  border-spacing: 0;
}
table.uploaderprogresstable > tbody > tr > td { padding: 0; }

/* Track */
.uploaderprogress {
  box-sizing: content-box;               /* the JS width excludes the border */
  border: 1px solid #d5dbe7 !important;
  border-radius: 999px !important;
  background: #e9ecf3 !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08) !important;
  overflow: hidden;
  max-width: 100%;
}
/* Completed fill — replaces continuous.gif with a gradient + animated stripes */
.uploaderprogress .uploaderprogressleft {
  border-radius: 999px 0 0 999px;
  background-color: var(--upl-primary) !important;
  background-image:
    linear-gradient(90deg, #2b8cff 0%, var(--upl-primary) 55%, #0b5ed7 100%),
    linear-gradient(45deg, rgba(255,255,255,.18) 25%, transparent 25%, transparent 50%,
                    rgba(255,255,255,.18) 50%, rgba(255,255,255,.18) 75%, transparent 75%, transparent) !important;
  background-size: 100% 100%, 28px 28px !important;
  background-repeat: repeat-x !important;
  background-position: 0 0, 0 0 !important;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.08);
  animation: upl-stripes 1s linear infinite;
  transition: width .2s ease-out;
}
/* Remaining part: keep transparent so the track shows through */
.uploaderprogress .uploaderprogressright {
  background: transparent !important;
}
/* Percentage label — the script sets its colour inline (#000 on the empty
   track, #fff once the fill covers the centre); we only refine typography */
.uploaderprogress .uploaderprogresstext {
  font-family: var(--upl-font) !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: .02em;
  text-align: center;
  pointer-events: none;
  z-index: 2;
}
.uploaderprogress .uploaderprogresstext[style*="#ffffff"] { text-shadow: 0 1px 1px rgba(0,0,0,.35); }
.uploaderprogress .uploaderprogresstext[style*="#000000"] { color: var(--upl-muted) !important; }
/* Info line */
.uploaderprogressinfotext {
  font: 500 12.5px/1.5 var(--upl-font) !important;
  color: var(--upl-muted) !important;
  padding: 6px 2px 0 !important;
  white-space: normal !important;
}

button[onclick^="ShowFiles"]::before { display: none; }
button[onclick^="ShowFiles"] { padding: .55rem 1.1rem; }

@keyframes upl-stripes {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 0, 28px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .uploaderprogress .uploaderprogressleft { animation: none; }
}

/* ---------- Secondary buttons: "Cancel all uploads", "Cancel upload" ----------
   "Cancel upload" is emitted as a bare <button> right after the progress <span>;
   the trigger button (id ends in "Button") and page buttons are excluded. */
button.AjaxUploaderCancelAllButton,
button.upl-cancel,
span + button:not([id]):not([class]),
input[isuploaderfield] ~ button:not([id]):not([class]) {
  font-family: var(--upl-font);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--upl-danger);
  background: #fff;
  border: 1px solid rgba(220,53,69,.35);
  border-radius: 6px;
  padding: .35rem .75rem;
  margin: 4px 0 8px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
button.AjaxUploaderCancelAllButton:hover,
button.upl-cancel:hover,
span + button:not([id]):not([class]):hover,
input[isuploaderfield] ~ button:not([id]):not([class]):hover {
  background: rgba(220,53,69,.06);
  border-color: var(--upl-danger);
}

/* ---------- Attachment / file-list tables built by the AJAX demos ---------- */
table.uploaderattachments,
table.Grid {
  font-family: var(--upl-font);
  font-size: 14px;
  color: var(--upl-text);
  background: var(--upl-bg);
  border: 1px solid var(--upl-border) !important;
  border-radius: var(--upl-radius);
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
  min-width: 360px;
  max-width: 100%;
}
table.uploaderattachments td, table.uploaderattachments th,
table.Grid td, table.Grid th {
  padding: 9px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--upl-border) !important;
  vertical-align: middle;
}
table.uploaderattachments tr:last-child td,
table.Grid tr:last-child td { border-bottom: 0 !important; }
table.uploaderattachments th, table.Grid th {
  background: var(--upl-bg-soft) !important;
  color: var(--upl-muted);
  font-weight: 600 !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
table.Grid tr:hover td { background: var(--upl-bg-soft); }
table.Grid td:first-child { width: 28px; padding-right: 0 !important; }
table.Grid a { color: var(--upl-primary); text-decoration: none; font-weight: 500; }
table.Grid a:hover { text-decoration: underline; }
table.Grid img { vertical-align: middle; }
table.Grid:empty { display: none; }

/* ---------- Small screens: let everything shrink ---------- */
@media (max-width: 480px) {
  table.uploadergrid,
  table.uploaderprogresstable,
  .uploaderprogress { min-width: 0 !important; }
  button[id$="Button"][onclick="return false"] { width: 100%; justify-content: center; }
}

/* =====================================================================
   Demo page chrome: stage card + source panel + result cards
   ===================================================================== */
.demo-stage {
  position: relative;
  background: var(--upl-bg);
  border: 1px solid var(--upl-border);
  border-radius: 12px;
  padding: 1.5rem 1.5rem 1.35rem;
  margin: 1.25rem 0 1.5rem;
  box-shadow: 0 1px 2px rgba(30,32,34,.03), 0 14px 34px -24px rgba(30,32,34,.28);
  background-image: radial-gradient(rgba(13,110,253,.06) 1px, transparent 1px);
  background-size: 14px 14px;
}
.demo-stage__label {
  position: absolute; top: -11px; left: 18px;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: 2px 10px; border-radius: 999px;
  background: var(--upl-primary); color: #fff;
  font: 600 11px/18px var(--upl-font); letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(13,110,253,.35);
}
.demo-stage__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7bff9e; box-shadow: 0 0 0 3px rgba(123,255,158,.25); }
.demo-stage__hint {
  margin: 12px 0 0; font: 400 13px/1.5 var(--upl-font); color: var(--upl-muted);
}
.demo-stage__hint code { font: 500 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace; background: var(--upl-bg-soft); border: 1px solid var(--upl-border); border-radius: 4px; padding: 2px 5px; color: var(--upl-text); }
.demo-stage form { margin: 0; }
.demo-stage ul { margin: 0 0 12px 1.1rem; padding: 0; color: var(--upl-muted); }
.demo-stage ul li { margin: 0 0 4px; }
.demo-stage p:last-child { margin-bottom: 0; }

/* Result cards written by the demos after postback */
.demo-result {
  display: flex; align-items: center; gap: 12px;
  margin: 12px 0 0; padding: 10px 14px;
  background: #f0faf4; border: 1px solid #c8ecd6; border-left: 4px solid var(--upl-success);
  border-radius: 8px; font: 500 14px/1.4 var(--upl-font); color: #0f5132;
}
.demo-result::before {
  content: ""; width: 18px; height: 18px; flex: none; background: var(--upl-success);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'/></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='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'/></svg>") center/contain no-repeat;
}
.demo-result b { font-weight: 600; }
.demo-result .demo-result__size { margin-left: auto; color: #3f7a57; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Source panel */
.demo-source { margin: 0 0 1.5rem; border: 1px solid var(--upl-border); border-radius: 12px; overflow: hidden; background: #0f172a; }
.demo-source__bar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: #111c33; border-bottom: 1px solid rgba(255,255,255,.06); }
.demo-source__bar span.dot { width: 10px; height: 10px; border-radius: 50%; background: #2c3a57; }
.demo-source__bar span.dot:nth-child(1) { background: #ff5f57; } .demo-source__bar span.dot:nth-child(2) { background: #febc2e; } .demo-source__bar span.dot:nth-child(3) { background: #28c840; }
.demo-source__file { margin-left: 4px; font: 500 12px/1 var(--upl-font); color: #93a4c3; letter-spacing: .02em; }
.demo-source__copy { margin-left: auto; font: 500 12px/1 var(--upl-font); color: #93a4c3; background: transparent; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; padding: 5px 9px; cursor: pointer; }
.demo-source__copy:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.demo-source pre { margin: 0; padding: 16px 18px; overflow-x: auto; font: 13px/1.6 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; color: #e2e8f0; tab-size: 4; }
.demo-source pre code { font: inherit; color: inherit; background: none; padding: 0; }
.demo-source .k  { color: #c792ea; }        /* keyword: Dim Set new If Then End For Next */
.demo-source .t  { color: #82aaff; }        /* type/object: AspUploader uploader */
.demo-source .p  { color: #ffcb6b; }        /* property */
.demo-source .s  { color: #c3e88d; }        /* string */
.demo-source .n  { color: #f78c6c; }        /* number/boolean */
.demo-source .c  { color: #637089; font-style: italic; }  /* comment */
.demo-source .d  { color: #89ddff; }        /* <% %> delimiters */
.demo-source .h  { color: #94a3b8; }        /* html tags */

/* ---------- Manual-start "Start upload" + form submit ---------- */
button.upl-start,
.demo-stage input[type="submit"] {
  display: inline-flex; align-items: center; gap: .45rem;
  vertical-align: middle; margin-left: 10px;
  font-family: var(--upl-font); font-size: .9375rem; font-weight: 600; line-height: 1.5;
  color: #fff; background: linear-gradient(180deg, #22a55f 0%, var(--upl-success) 100%);
  border: 1px solid #157347; border-radius: var(--upl-radius); padding: .55rem 1.1rem;
  cursor: pointer; box-shadow: 0 1px 2px rgba(25,135,84,.25), 0 6px 14px -8px rgba(25,135,84,.55);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  -webkit-appearance: none; appearance: none;
}
button.upl-start::before {
  content: ""; width: .95em; height: .95em; 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='m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z'/></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='m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z'/></svg>") center/contain no-repeat;
}
button.upl-start:hover:not(:disabled),
.demo-stage input[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(25,135,84,.25), 0 10px 20px -8px rgba(25,135,84,.6); }
button.upl-start:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.demo-stage input[type="submit"] { margin-left: 0; margin-top: 8px; }
/* Trigger button in the manual-start demo sits inline with Start */
.demo-stage form > button[id$="Button"] { vertical-align: middle; }
.demo-stage .demo-now { display: inline-block; margin-left: 12px; font: 400 13px var(--upl-font); color: var(--upl-muted); }

/* ---------- File manager demo (misc-filemanager.asp) ---------- */
.filemanager { margin-top: 14px; }
.filemanager__loading, .filemanager__empty {
  padding: 14px 16px; border: 1px dashed #cfd6e4; border-radius: 10px;
  font: 500 14px/1.4 var(--upl-font); color: var(--upl-muted); background: var(--upl-bg-soft);
}
.filemanager__table { width: 100%; }
.filemanager__table thead td { background: var(--upl-bg-soft) !important; color: var(--upl-muted); font-weight: 600 !important; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.filemanager__table td:first-child { width: auto; padding-right: 12px !important; }
.filemanager__time { white-space: nowrap; color: var(--upl-muted); font-variant-numeric: tabular-nums; width: 1%; }
.filemanager__name { font-weight: 500; }
.filemanager__size { text-align: right; white-space: nowrap; color: var(--upl-muted); font-variant-numeric: tabular-nums; width: 1%; }
.filemanager__actions { text-align: right; white-space: nowrap; width: 1%; }
.filemanager__delete { color: var(--upl-danger) !important; font-weight: 500; }
.filemanager__delete:hover { text-decoration: underline; }

/* ---------- Attachments demo (ajax-attachments.asp) ---------- */
#filelist { width: 100%; }
#filelist td:first-child { width: 28px; padding-right: 0 !important; }
.attach__name { font-weight: 500; }
.attach__actions { text-align: right; white-space: nowrap; width: 1%; }
.attach__actions a { margin-left: 14px; font-weight: 500; }
.attach__dl { color: var(--upl-primary) !important; }
.attach__rm { color: var(--upl-danger) !important; }
#filelist:empty { display: none; }