/* App shell glue: things the Sibsoft UI stylesheets don't know about because the
   old templates didn't need them. Keep this small; page styles belong in xfs.css. */

[x-cloak] { display: none !important; }

/* Wrappers that only exist because Alpine's x-if / x-for need a single root element */
/* .sb-x is the generic one for templates */
.sb-x, .sb-page, .sb-pub-wrap, .sb-menu-group, .sb-subnav-grp, .sb-mdrawer-secw, .sb-view { display: contents; }
.sb-subnav-grp:not(:nth-child(1 of :not(template))) > h6:nth-child(1 of :not(template)) { margin-top: 14px; }

/* Placeholder while a page's template and data load */
/* Busy indicators (js/progress.js, js/lazy.js) */
/* a page opened from the left sidebar: a spinner where it will be */
.sb-view-loading { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - var(--top-h, 52px) - 96px); }
.sb-view-loading .sb-spin { width: 32px; height: 32px; border-width: 3px; }
/* any other navigation: the old page stays, frozen, until the new one is there */
.sb-view-stale { pointer-events: none; user-select: none; }
/* the progress line along the top of the window: --topline-fg is the colour of the
   surface under it (gradient tops declare white, everything else keeps the accent) */
.sb-topline { position: fixed; top: 0; left: 0; z-index: 2000; height: 2px; width: 0; background: var(--topline-fg, var(--accent)); box-shadow: 0 0 6px color-mix(in srgb, var(--topline-fg, var(--accent)) 60%, transparent); transition: width .2s ease-out, opacity .3s ease .15s; pointer-events: none; }
.sb-topline[hidden] { display: none; }
.sb-topline.done { opacity: 0; }
/* a server call while the left sidebar is shown: the page is dimmed under a spinner */
.sb-main.sb-busy { position: relative; cursor: progress; }
.sb-main.sb-busy > * { pointer-events: none; }
.sb-main.sb-busy::before { content: ""; position: absolute; inset: 0; z-index: 20; background: color-mix(in srgb, var(--surface-page) 55%, transparent); }
.sb-main.sb-busy::after { content: ""; position: fixed; left: var(--busy-x, 50%); top: var(--busy-y, 50%); z-index: 21; width: 32px; height: 32px; margin: -16px 0 0 -16px; box-sizing: border-box; border: 3px solid var(--accent-line); border-top-color: var(--accent); border-radius: 50%; background: var(--surface-raised); box-shadow: 0 0 0 10px var(--surface-raised), 0 4px 18px 8px rgba(13, 17, 24, .14); animation: sb-spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .sb-topline { transition: opacity .3s; }
  .sb-view-loading .sb-spin, .sb-main.sb-busy::after { animation-duration: 2.4s; }
}

#gdpr-cookie-notice {
  background: rgba(128, 128, 128, .92);
  position: fixed;
  z-index: 10000;
  width: 100%;
  bottom: 0;
  left: 0;
  color: white;
  font-size: 13px;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-left: 4px solid var(--bs-primary);
  column-gap: 10px;
}
#gdpr-cookie-notice .btn { font-size: 13px; }

/* Messages of the server may have line breaks */
.sb-toast, .sb-done .content, .sb-message .content { white-space: pre-line; }

/* user_public: pagers without pages stay out of the way (was inline in the classic page) */
.paging:empty { display: none; }

/* Account: code field of the authenticator dialog (was inline in g2fa_toggle.html) */
#g2fa-code { font-size: 16px; width: 175px; display: inline-block; letter-spacing: 12px; font-weight: bold; padding-left: 24px; }
#g2fa-code::placeholder { letter-spacing: 0; font-weight: normal; }

/* sections reached by a link (#security): clear of the sticky top bar */
.sb-section[id] { scroll-margin-top: calc(var(--top-h, 52px) + 12px); }

/* one topic of the account per page (?tab=security, payout, …): a single column like the design */
.sb-account.sb-account-tab { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.sb-account.sb-account-tab > .sb-rec-col { display: contents; }

/* the router moves focus to the page heading for screen readers: no ring for that */
.sb-shell h1[tabindex="-1"]:focus { outline: none; box-shadow: none; }

/* fields locked by the account's security lock (design: .sb-input.disabled) */
.sb-shell .form-control:disabled,.sb-shell .form-select:disabled,.sb-shell .sb-input:has(> input:disabled){background:var(--surface-sunken);color:var(--text-3);cursor:not-allowed}
.sb-shell .sb-input > input:disabled{background:transparent;color:var(--text-3);cursor:not-allowed}

/* The upload page (Templates/public/upload_form.html): the source and Uploads, Options beside;
   guests pick the source in tabs above it (users in the panel's sub-nav) */
.sb-upload-src { margin-bottom: 16px; }
/* in the public shell: as wide as the content under it (the gutters are margins, so the underline stops there too) */
.sb-pub-main .sb-upload-src { box-sizing: border-box; width: min(1192px, calc(100% - 48px)); margin: 0 auto 16px; }
@media (max-width: 767px) { .sb-pub-main .sb-upload-src { width: calc(100% - 32px); } }
.sb-upload-panel { padding: 0 0 20px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.sb-upload-col, .sb-upload-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sb-upload-aside { position: sticky; top: 0; }
label.sb-drop { cursor: pointer; }
/* Upload form: the filename takes its content width (up to 300px); the gauge fills the rest. */
.sb-up { grid-template-columns: 20px fit-content(300px) minmax(160px, 1fr) fit-content(130px) 28px; }
.sb-up > .sb-meter { margin-left: 30px; }
@media (max-width: 1099px) {
  .sb-upload-panel { grid-template-columns: minmax(0, 1fr); }
  .sb-upload-aside { position: static; }
}
@media (max-width: 767px) {
  .sb-upload-panel { padding: 0 0 16px; }
  .sb-up { grid-template-columns: 20px minmax(0, 1fr) 90px 28px; }
  .sb-up .sb-meter { display: none; }
}

/* Background uploads: the mini uploader (js/uploads.js, index.html) */
.up-mini {
  position: fixed; right: 20px; bottom: 20px; z-index: 35;
  width: min(360px, calc(100vw - 24px));
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 14px 36px rgba(15, 23, 42, .2);
  color: var(--text-1); font-family: var(--hy-font, Manrope, system-ui, sans-serif);
  font-size: 14px; line-height: 1.45; overflow: hidden;
}
.up-mini-top { display: flex; align-items: stretch; gap: 2px; padding-right: 4px; }
.up-mini-sum {
  position: relative; display: flex; align-items: center; gap: 9px;
  flex: 1; min-width: 0; border: 0; background: transparent; color: inherit;
  padding: 9px 4px 12px 10px; text-align: left; cursor: pointer; font: inherit;
}
.up-mini-sum:focus-visible, .up-mini-close:focus-visible, .up-mini-act:focus-visible,
.up-mini-link:focus-visible, .up-mini-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.up-mini-ico {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-text); font-size: 17px;
}
.up-mini-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.up-mini-txt b { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-mini-txt span { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-mini-pct { flex: none; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.up-mini-chev { flex: none; font-size: 14px; color: var(--text-3); }
.up-mini-close {
  flex: none; align-self: flex-start; margin-top: 6px; padding: 3px;
  border: 0; border-radius: 6px; background: transparent; color: var(--text-3);
  font-size: 15px; line-height: 1; cursor: pointer;
}
.up-mini-close:hover { color: var(--text-1); background: var(--surface-sunken); }
.up-mini-prog {
  position: absolute; left: 10px; right: 4px; bottom: 5px; height: 2px;
  border-radius: 1px; background: var(--border); overflow: hidden;
}
.up-mini-prog i { display: block; height: 100%; background: var(--accent); transition: width .2s ease-out; }
.up-mini-body { border-top: 1px solid var(--border); background: var(--surface-raised); }
.up-mini-rows { max-height: min(320px, 45vh); overflow-y: auto; padding: 2px 0; }
.up-mini-row {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) 24px;
  align-items: start; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid var(--border-row);
}
.up-mini-row:last-child { border-bottom: 0; }
.up-mini-file { font-size: 17px; color: var(--text-3); margin-top: 1px; }
.up-mini-info { min-width: 0; }
.up-mini-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-mini-sub { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-mini-done { color: var(--ok-text, #1f8a55); }
.up-mini-failed { color: var(--danger-text, #c43a3a); }
.up-mini-bar { display: block; height: 4px; margin-top: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
.up-mini-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width .2s ease-out; }
.up-mini-bar i.ok { background: var(--ok, #1f8a55); }
.up-mini-bar i.danger { background: var(--danger, #c43a3a); }
.up-mini-act {
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 5px;
  background: transparent; color: var(--text-3); font-size: 14px; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.up-mini-act:hover { color: var(--text-1); background: var(--surface-sunken); }
.up-mini-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; border-top: 1px solid var(--border); background: var(--surface-sunken); font-size: 12px;
}
.up-mini-link { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-text); text-decoration: none; }
.up-mini-link:hover { text-decoration: underline; }
.up-mini-clear {
  display: inline-flex; align-items: center; gap: 4px; border: 0; padding: 0;
  background: none; color: var(--text-2); font: inherit; font-size: 12px; cursor: pointer;
}
.up-mini-clear:disabled { opacity: .5; cursor: default; }
body:has(.up-mini) .sb-toasts { bottom: calc(20px + var(--up-mini-h, 72px) + 8px); }
@media (max-width: 640px) {
  .up-mini { left: 12px; right: 12px; bottom: 12px; width: auto; max-height: calc(100vh - 24px); }
  .up-mini-rows { max-height: 42vh; }
  body:has(.up-mini) .sb-toasts { bottom: calc(12px + var(--up-mini-h, 72px) + 8px); }
}
@media (prefers-reduced-motion: reduce) {
  .up-mini-prog i, .up-mini-bar i { transition: none; }
}