/* The relay's own additions on top of Bulma and lazzeking.fyi's styles.css.
   Colours come from Bulma's variables, so the light and dark themes both work. */

/* Page frame: full width like the VS tools pages, a column so the footer sits at the bottom */
.uf-content { display: flex; flex-direction: column; flex: 1; width: 100%; }
.uf-content .site-footer { margin-top: auto; padding-top: 2.5rem; }
.uf-brand { font-weight: 600; color: inherit; }
.uf-brand:hover { color: var(--bulma-link); }
.uf-topbar-right { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.uf-user { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--bulma-text-weak); }
.uf-avatar { border-radius: 50%; width: 24px; height: 24px; }
.uf-inline { display: inline-flex; }
.uf-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Headings */
.uf-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.uf-head .title { margin-bottom: 0.25rem; }
.uf-head .subtitle { margin-top: 0 !important; }
.uf-head-right { padding-top: 0.6rem; }
.uf-section { margin-top: 2.5rem; margin-bottom: 0.4rem !important; }
.uf-section-hint { margin-bottom: 1rem; font-size: 0.9rem; }
h2.uf-section + :not(.uf-section-hint) { margin-top: 1rem; }

/* Number cards */
.uf-stats { margin-bottom: 0 !important; }
.uf-stat { height: 100%; padding: 1rem 1.25rem; }
.uf-stat-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bulma-text-weak); }
.uf-stat-value { font-size: 1.6rem; font-weight: 600; line-height: 1.3; }
.uf-stat-sub { font-size: 0.8rem; color: var(--bulma-text-weak); }
.uf-next-tier { margin-top: 0.25rem; }

/* Destinations: icon, name, status and actions in one row, stacked on phones */
.uf-dest { padding: 1rem 1.25rem; margin-bottom: 0.75rem !important; }
.uf-dest.is-off .uf-dest-icon, .uf-dest.is-off .uf-dest-name { opacity: 0.55; }
.uf-dest-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.5rem 1.25rem; }
.uf-dest-icon { color: var(--bulma-link); }
.uf-dest-name { font-weight: 600; overflow-wrap: anywhere; }
.uf-dest-info .is-size-7 { overflow-wrap: anywhere; }
.uf-dest-status { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; }
.uf-dest-buttons { margin: 0 !important; flex-wrap: nowrap; }
.uf-dest-buttons .button { margin-bottom: 0 !important; }
.uf-dest-buttons form + form, .uf-dest-buttons form + .button, .uf-dest-buttons .button + form { margin-left: 0.4rem; }
.uf-dest-rename { margin-top: 0.85rem; max-width: 34rem; }
@media (max-width: 1023px) {
  .uf-dest-row { grid-template-columns: auto minmax(0, 1fr); }
  .uf-dest-status { grid-column: 2; flex-direction: row; align-items: center; gap: 0.5rem; }
  .uf-dest-buttons { grid-column: 1 / -1; flex-wrap: wrap; row-gap: 0.4rem; }
}

/* Boxes for adding things and for forms */
.uf-add { margin-top: 0.75rem; }
.uf-add-box { height: 100%; display: flex; flex-direction: column; }
.uf-add-box > form { display: flex; flex-direction: column; flex: 1; }
.uf-add-box .title .icon { color: var(--bulma-link); margin-right: 0.35rem; }
.uf-box-footer { margin-top: auto; padding-top: 0.75rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.uf-narrow-box { max-width: 40rem; }
.uf-input-short { max-width: 9rem; }
.uf-form .field.has-addons .input { min-width: 16rem; }

/* Lists of steps */
.uf-steps { margin-left: 1.25rem; }
.uf-steps li { margin-bottom: 0.85rem; }

/* Tables: keep tags and small buttons on one line */
.table td { vertical-align: middle; }
.table .tag { white-space: nowrap; }

/* Text pages keep a readable width inside the full-width page, like lazzeking.fyi's */
.uf-text { max-width: 44rem; }
.uf-text h2 { margin-top: 2rem; }

/* Coloured tags, the same way lazzeking.fyi colours its own (green and amber are its colours) */
.tag.uf-tag { font-weight: 600; border-color: transparent; }
.tag.uf-tag.is-success { background: #e7f6ea; color: #1d6b31; }
.tag.uf-tag.is-warning { background: #fff3dc; color: #8a5300; }
.tag.uf-tag.is-danger { background: #fde9e7; color: #a12a1c; }
.tag.uf-tag.is-info { background: #e6effb; color: #1f4f8a; }
[data-theme="dark"] .tag.uf-tag.is-success { background: #173822; color: #8fe0a5; }
[data-theme="dark"] .tag.uf-tag.is-warning { background: #3d2c0c; color: #ffc867; }
[data-theme="dark"] .tag.uf-tag.is-danger { background: #42181a; color: #ff9d92; }
[data-theme="dark"] .tag.uf-tag.is-info { background: #14294a; color: #9cc2ff; }

/* Phones */
.uf-brand { white-space: nowrap; }
.vstools-topbar { gap: 0.75rem; }
.uf-topbar-right { flex-wrap: nowrap; gap: 0.5rem; }
@media (max-width: 768px) {
  .uf-user-name { display: none; }
  .uf-head-right { padding-top: 0; }
  /* Destination actions: an even 2 x 2 grid */
  .uf-dest-buttons { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
  .uf-dest-buttons form, .uf-dest-buttons > .button { margin: 0 !important; width: 100%; }
  .uf-dest-buttons .button { width: 100%; }
  /* Tables marked uf-stack: each row a small card */
  .table.uf-stack thead { display: none; }
  .table.uf-stack, .table.uf-stack tbody, .table.uf-stack tr, .table.uf-stack td { display: block; width: 100%; }
  .table.uf-stack tr { border: 1px solid var(--bulma-border-weak); border-radius: 8px; padding: 0.5rem 0.75rem; margin-bottom: 0.6rem; }
  .table.uf-stack td { border: 0; padding: 0.2rem 0 0.2rem 7rem; position: relative; overflow-wrap: anywhere; }
  .table.uf-stack td::before { content: attr(data-label); position: absolute; left: 0; top: 0.3rem; width: 6.5rem;
    font-family: Quicksand, sans-serif; font-size: 0.75rem; color: var(--bulma-text-weak); }
  .table-container:has(.uf-stack) { overflow: visible; }
}
.uf-detail { display: block; }
@media (max-width: 768px) { .uf-detail { display: inline; } }

/* Admin */
.vstools-subnav + .uf-head { margin-top: 0.5rem; }
.uf-switch-box { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.uf-actions-grid .uf-add-box form { width: 100%; }
.uf-user-cell { display: inline-flex; align-items: center; gap: 0.6rem; }