/*
 * vps-manage.css: styles for presenters and organizers
 *
 * Loaded AFTER vps.css on the pages where people manage things: the poster
 * form and preview, the organizer app, registration and the admin pages. It
 * reuses the tokens, layers and components defined there and adds forms,
 * messages, lists, dialogs and tables, so session visitors never download any
 * of this.
 */

:root {
  --danger-bg: #fff1f2;
  --danger-line: #fecdd3;
  --ok-bg: #ecfdf5;
  --ok-line: #a7f3d0;
  --ok-ink: #065f46;
  --narrow: 46rem;
  --bar: #1e293b;
  --warn: #d97706;
}

@layer base {
  input:not([type]), input[type=url], input[type=number], input[type=name],
  input[type=date], input[type=file], select {
    width: 100%;
    padding: .55rem .75rem;
    font-size: .875rem;
    background: var(--surface);
    border: 1px solid #cbd5e1;
    border-radius: var(--radius);
  }
  input[readonly], textarea[readonly] { color: var(--muted); background: var(--line-soft); }
  textarea { line-height: 1.5; resize: vertical; }
  input:disabled { color: var(--faint); background: var(--line-soft); cursor: not-allowed; }
  button:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }
  h2 { font-size: 1.125rem; font-weight: 600; }
}

@layer layout {
  .wrap.narrow { max-width: var(--narrow); }
}

@layer components {

  .sitebar .out { margin-left: auto; white-space: nowrap; }

  /* --- app bar (organizer + admin) -------------------------------------- */
  .appbar { color: #cbd5e1; background: var(--bar); }
  .appbar .wrap { display: flex; align-items: center; gap: .5rem; min-height: 3.75rem; }
  .appbar .brand { display: flex; align-items: center; gap: .75rem; margin-right: 1rem; font-size: 1.125rem; font-weight: 600; color: #fff; }
  .appbar .brand .i { width: 1.75rem; height: 1.75rem; }
  .appbar nav { display: flex; flex-wrap: wrap; gap: .25rem; }
  .appbar nav a { padding: .4rem .75rem; border-radius: var(--radius); font-size: .875rem; font-weight: 500; }
  .appbar nav a:hover, .appbar nav a.on { color: #fff; background: rgb(255 255 255 / .1); }
  .appbar .menu { margin-left: auto; }
  .appbar summary .i { width: 2rem; height: 2rem; color: #fff; }

  /* dropdown menus use <details>, so they need no script */
  .menu { position: relative; }
  .menu summary { display: flex; align-items: center; list-style: none; cursor: pointer; border-radius: var(--radius); }
  .menu summary::-webkit-details-marker { display: none; }
  .menu > div { position: absolute; right: 0; z-index: 20; min-width: 12rem; margin-top: .5rem; padding: .25rem 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lift); }
  .menu > div a { display: block; padding: .5rem 1rem; font-size: .875rem; color: var(--ink-2); }
  .menu > div a:hover { background: var(--line-soft); }
  .menu hr { margin: .25rem 0; border: 0; border-top: 1px solid var(--line); }

  /* --- page title bar --------------------------------------------------- */
  .pagebar { background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  .pagebar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; padding-block: 1.25rem; }
  .pagebar h1 { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 700; letter-spacing: -.02em; }
  .tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
  .tools form { display: flex; gap: .6rem; }
  form.tools { flex-wrap: nowrap; }
  .tools input[type=search] { width: 20rem; min-width: 0; }
  .banner.note { background: var(--success); }
  .banner.note a { color: var(--success-hover); }
  main > .wrap { padding-block: 1.5rem; }
  main > .wrap > .alert:first-child { margin-top: 0; }
  main > .wrap > * + * { margin-top: 1.5rem; }

  .tag { display: inline-block; padding: .1rem .5rem; border-radius: 99px; font-size: .68rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; vertical-align: middle; color: var(--brand-hover); background: var(--brand-soft); border: 1px solid var(--brand-line); }
  a.tag:hover { background: var(--brand-line); }
  .tag:empty { display: none; }

  /* --- lists of rows inside a card -------------------------------------- */
  .list { padding: 0; overflow: hidden; }
  .list > header, .list > footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; padding: 1.1rem 1.5rem; }
  .list > header { border-bottom: 1px solid var(--line); }
  .list > header p { margin-top: .2rem; font-size: .875rem; color: var(--muted); }
  .list > header p a { color: var(--ink); border-bottom: 1px solid #cbd5e1; }
  .list > footer { border-top: 1px solid var(--line); font-size: .875rem; color: var(--ink-2); }
  .rows { margin: 0; padding: 0; list-style: none; }
  .rows > li + li { border-top: 1px solid var(--line); }
  .rows > li > a, .rows > li > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem 1.5rem; }
  .rows > li > a:hover { background: var(--page); }
  .rows > li > form, .rows > li > .line { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; }
  .rows > li > form > div, .rows > li > .line > div { flex: 1; min-width: 0; }
  .rows strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; font-weight: 500; color: var(--brand); }
  .rows span, .rows p { font-size: .875rem; }
  .rows .sub { display: block; margin-top: .4rem; color: var(--muted); overflow-wrap: anywhere; }
  .rows .sub span { margin-right: .5rem; }
  .rows .sub .i { display: inline-block; margin-right: .3rem; vertical-align: -.2em; color: var(--faint); }
  .rows .sub .i.ok { color: var(--success); }
  .rows .sub .i.no { opacity: .45; }
  .rows > li > a > .i { color: var(--faint); }
  .rows .empty { display: block; }
  .rows .empty p { margin-top: .5rem; color: var(--muted); }
  @media (max-width: 47.99rem) {
    .rows > li > a { grid-template-columns: minmax(0, 1fr) auto; }
    .rows > li > div { grid-template-columns: minmax(0, 1fr); }
    .rows .side { display: none; }
  }
  .acts { display: flex; flex-wrap: wrap; gap: .35rem; }

  /* --- tables ----------------------------------------------------------- */
  .table { width: 100%; border-collapse: collapse; font-size: .875rem; }
  .table th { padding: .75rem 1.5rem; text-align: left; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--page); border-bottom: 1px solid var(--line); }
  .table td { padding: .9rem 1.5rem; vertical-align: top; overflow-wrap: anywhere; }
  .table tr + tr td { border-top: 1px solid var(--line); }
  .table tbody tr:nth-child(even) { background: var(--page); }
  .table td a:not(.btn), .rows .side a { color: var(--brand-hover); border-bottom: 1px solid var(--brand-line); }
  .table tfoot td { border-top: 1px solid var(--line); }
  .table tfoot .btn:last-child { float: right; }
  .scroll { overflow-x: auto; }

  /* --- dialogs (inside .modal from vps.css) ----------------------------- */
  .modal .panel.dialog { max-width: 38rem; }
  .dialog .body { max-height: 75vh; padding: 1.5rem; overflow-y: auto; }
  .dialog h3 { font-size: 1.125rem; font-weight: 600; }
  .dialog .body > p, .dialog .body > div > p { margin-top: .75rem; font-size: .875rem; color: var(--muted); }
  .dialog .field:first-of-type, .dialog .tabs + div > .field:first-child { margin-top: 1rem; }
  .dialog fieldset { min-width: 0; margin: 1.5rem 0 0; padding: 0; border: 0; font-size: .875rem; }
  .dialog legend { padding: 0; font-weight: 600; }
  .dialog form > footer { display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .75rem 1.5rem; background: var(--page); border-top: 1px solid var(--line); }
  .dialog form > footer small { margin-right: auto; font-size: .875rem; color: var(--muted); }
  .dialog pre { margin: 1rem 0 0; padding: 1rem; overflow-x: auto; white-space: pre-wrap; font: .8rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-2); background: var(--page); border-radius: var(--radius); }
  .dialog pre textarea { margin: .25rem 0; font-family: inherit; }
  .dialog textarea.code { font: .8rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }

  .tabs { display: flex; gap: 1.5rem; margin-top: .75rem; border-bottom: 1px solid var(--line); }
  .tabs a { margin-bottom: -1px; padding: .5rem .1rem; font-size: .875rem; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; }
  .tabs a.on { color: var(--brand); border-color: var(--brand); }

  .checks label { display: flex; align-items: center; justify-content: flex-start; gap: .6rem; margin-top: .85rem; font-weight: 500; color: var(--ink-2); }
  .checks label span { display: inline-flex; align-items: center; gap: .6rem; }
  .checks label small { margin-left: auto; font-weight: 400; color: var(--muted); }
  .checks label small a { color: var(--ink); border-bottom: 1px solid #cbd5e1; }
  .checks h4, .form h4 { margin: 1.5rem 0 0; font-size: .875rem; font-weight: 600; }

  /* --- settings pages (publish, upgrade, payment) ----------------------- */
  .settings { padding: 0; }
  .settings > section { display: grid; gap: 1rem 2rem; padding: 1.5rem; }
  .settings > section > * { min-width: 0; }
  .settings > section + section, .settings > footer { border-top: 1px solid var(--line); }
  .settings > section > div:first-child p { margin-top: .35rem; font-size: .875rem; color: var(--muted); }
  .settings > footer { display: flex; flex-wrap: wrap; gap: .75rem; padding: 1rem 1.5rem; background: var(--page); }
  @media (min-width: 48rem) { .settings > section { grid-template-columns: 1fr 2fr; } }
  .settings fieldset { min-width: 0; margin: 0; padding: 0; border: 0; font-size: .875rem; }
  .settings fieldset + fieldset, .settings .field + .field { margin-top: 1.5rem; }
  .settings legend { padding: 0; font-weight: 600; }
  .settings p a, .form p a { color: var(--ink); border-bottom: 1px solid #cbd5e1; }
  .settings pre { margin: .75rem 0 0; padding: .75rem 1rem; overflow-x: auto; font-size: .8rem; background: var(--page); border-radius: var(--radius); }
  .field p { margin-top: .4rem; font-size: .875rem; color: var(--muted); }
  .choice > div > input { max-width: 24rem; }
  .suffix { display: flex; align-items: stretch; max-width: 28rem; }
  .suffix input { border-radius: var(--radius) 0 0 var(--radius); }
  .suffix span { display: flex; align-items: center; padding: 0 .75rem; font-size: .875rem; color: var(--muted); background: var(--page); border: 1px solid #cbd5e1; border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; white-space: nowrap; }

  .summary { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; padding: 1rem 1.25rem; background: var(--page); border: 1px solid var(--line); border-radius: var(--radius); }
  .summary dt { font-size: .875rem; color: var(--muted); }
  .summary dd { margin-top: .2rem; font-size: 1.125rem; font-weight: 600; }
  .summary div:last-child dd { font-size: 1.5rem; }
  .form .terms { display: block; margin-top: .75rem; font-size: .75rem; color: var(--muted); }
  .form #payment_error { display: block; margin-bottom: .5rem; font-size: .875rem; color: var(--danger); }
  .tip { position: relative; border-bottom: 1px dashed var(--muted); }
  .tip span { display: none; position: absolute; left: 50%; bottom: 140%; translate: -50%; padding: .3rem .6rem; border-radius: .35rem; font-size: .75rem; white-space: nowrap; color: #fff; background: var(--ink); }
  .tip:hover span { display: block; }

  /* --- flash messages --------------------------------------------------- */
  .alert.ok { color: var(--ok-ink); background: var(--ok-bg); border-color: var(--ok-line); }
  .alert.ok > .i { color: var(--success); }
  .alert.ok button:hover { background: var(--ok-line); }
  .alert.err { color: var(--danger-ink); background: var(--danger-bg); border-color: var(--danger-line); font-weight: 500; }
  .alert.err > .i { color: var(--danger); }
  .alert.err button:hover { background: var(--danger-line); }

  /* --- buttons ---------------------------------------------------------- */
  .btn.quiet { color: var(--muted); background: none; box-shadow: none; }
  .btn.quiet:hover { color: #fff; background: var(--ink-2); }
  .btn.quiet.danger:hover { background: var(--danger); }
  .btn.sm { padding: .35rem .6rem; font-size: .75rem; }
  .btn.dark { background: var(--ink-2); }
  .btn.dark:hover { background: var(--ink); }
  .btn.warn { background: var(--warn); }
  /* solid red, except on quiet buttons, which only turn red on hover (above) */
  .btn.danger:not(.quiet) { background: var(--danger); }
  .btn.alt.danger { color: var(--danger); background: var(--surface); border-color: var(--danger-line); }
  .btn.alt.danger:hover { color: #fff; background: var(--danger); }
  .btn.alt.on { color: var(--faint); background: var(--line-soft); cursor: not-allowed; }
  .group { display: inline-flex; }
  .group .btn { border-radius: 0; box-shadow: none; }
  .group .btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
  .group .btn:last-child { margin-left: -1px; border-radius: 0 var(--radius) var(--radius) 0; }

  /* --- forms ------------------------------------------------------------ */
  .pagehead { padding-top: 3rem; text-align: center; }
  .pagehead h1 { font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 700; letter-spacing: -.02em; }
  .pagehead a { border-bottom: 1px solid #cbd5e1; }
  .pagehead p { margin-top: .75rem; color: var(--ink-2); }

  .pagehead ul { display: inline-block; margin: .75rem 0 0; padding: 0; list-style: none; text-align: left; color: var(--ink-2); }
  .form { margin-top: 2rem; padding: clamp(1.25rem, 4vw, 2.5rem); }
  .form > p { font-size: .875rem; color: var(--ink-2); }
  .field + .field, .form fieldset, .form .buttons { margin-top: 1.5rem; }
  .field label, .field .labels, .form legend { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .3rem; font-weight: 500; color: var(--ink-2); }
  .field .labels label { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
  .field small, .field .labels label + label { font-size: .75rem; font-weight: 400; color: var(--muted); }
  .field small a { text-decoration: underline; }
  .field sup { color: var(--danger); }

  .form fieldset { min-width: 0; padding: 0; border: 0; font-size: .875rem; }
  .form legend { padding: 0; font-size: .875rem; }
  .form fieldset p { margin: .5rem 0 1rem; color: var(--ink-2); }
  .form fieldset p a { border-bottom: 1px solid #cbd5e1; }
  .choice { display: grid; grid-template-columns: 1rem 1fr; gap: .25rem .75rem; margin-top: 1rem; }
  .choice > input { margin-top: .15rem; }
  .choice label { font-weight: 500; color: var(--ink-2); }
  .choice label span, .choice p { font-weight: 400; color: var(--muted); }
  .choice > div > input { margin-top: .35rem; }
  .choice p { margin: 0 !important; }
  #upstatus { font-size: .75rem; }

  .form .buttons { display: grid; gap: .75rem; }
  .form .buttons .row { display: flex; align-items: center; gap: 1rem; font-size: .75rem; color: var(--muted); }
  .form .buttons .row > * { flex: 1; justify-content: center; }

  .loader { display: inline-block; width: 1.1rem; height: 1.1rem; vertical-align: middle; border: 3px solid var(--line); border-left-color: var(--ink); border-radius: 50%; animation: spin 1.1s linear infinite; }
  @keyframes spin { to { rotate: 360deg; } }
}