/*
 * GigRoom portal theme, layered on Pico CSS (https://picocss.com).
 *
 * Colours and font follow gigroom.com. The whole UI is sized from one value,
 * --pico-font-size below: Pico's spacing is in rem, so changing it scales text,
 * padding, inputs and buttons together.
 */

@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/roboto-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/roboto-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/roboto-latin-700-normal.woff2') format('woff2'); }

/* gigroom.com palette */
:root {
  --gr-blue: #1192dc;      /* nav bar / hero */
  --gr-blue-600: #0d6ba8;  /* buttons, links (white text passes contrast) */
  --gr-blue-700: #0b4d77;  /* hover */
  --gr-navy: #092f4f;      /* headings */
  --gr-page: #f4f7f8;      /* page background */
  --gr-text: #3f595f;      /* body text */
  --gr-muted: #5e767c;
  --gr-line: #dde6ea;
  --gr-success: #1f7a45;
  --gr-danger: #b3261e;
}

/* Pico overrides. Same specificity as Pico's light theme, loaded later, so these win.
   Fixed size at every screen width (Pico grows it to ~20px on wide screens). */
:root[data-theme="light"] {
  --pico-font-size: 81.25%; /* 13px */
  --pico-font-family-sans-serif: Roboto, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --pico-font-family: var(--pico-font-family-sans-serif);
  --pico-border-radius: 0.375rem;

  --pico-background-color: var(--gr-page);
  --pico-color: var(--gr-text);
  --pico-h1-color: var(--gr-navy);
  --pico-h2-color: var(--gr-navy);
  --pico-h3-color: var(--gr-navy);
  --pico-muted-color: var(--gr-muted);
  --pico-muted-border-color: var(--gr-line);

  --pico-primary: var(--gr-blue-600);
  --pico-primary-background: var(--gr-blue-600);
  --pico-primary-border: var(--gr-blue-600);
  --pico-primary-underline: rgba(13, 107, 168, 0.4);
  --pico-primary-hover: var(--gr-blue-700);
  --pico-primary-hover-background: var(--gr-blue-700);
  --pico-primary-hover-border: var(--gr-blue-700);
  --pico-primary-hover-underline: var(--gr-blue-700);
  --pico-primary-focus: rgba(17, 146, 220, 0.35);
  --pico-primary-inverse: #fff;

  --pico-secondary: var(--gr-muted);
  --pico-secondary-background: var(--gr-muted);
  --pico-secondary-border: var(--gr-muted);
  --pico-secondary-hover: var(--gr-text);
  --pico-secondary-hover-background: var(--gr-text);
  --pico-secondary-hover-border: var(--gr-text);
  --pico-secondary-focus: rgba(94, 118, 124, 0.3);
  --pico-secondary-inverse: #fff;

  --pico-contrast: var(--gr-navy);
  --pico-contrast-background: var(--gr-navy);
  --pico-contrast-border: var(--gr-navy);
  --pico-contrast-hover: #000;
  --pico-contrast-hover-background: #000;
  --pico-contrast-hover-border: #000;
  --pico-contrast-inverse: #fff;

  --pico-card-background-color: #fff;
  --pico-card-border-color: var(--gr-line);
  --pico-card-sectioning-background-color: #f9fbfc;
  --pico-card-box-shadow: 0 1px 2px rgba(9, 47, 79, 0.06), 0 2px 8px rgba(9, 47, 79, 0.05);
  --pico-table-row-stripped-background-color: #e9f2f8;
  --pico-form-element-focus-color: var(--gr-blue);
  --pico-progress-background-color: var(--gr-line);
  --pico-progress-color: var(--gr-blue);
  --pico-text-selection-color: rgba(17, 146, 220, 0.2);
}

body { background: var(--gr-page); }
.muted { color: var(--pico-muted-color); }

/* ---- Header bar (bright blue, like gigroom.com) ---- */
.site-header { background: var(--gr-blue); margin-bottom: 2rem; }
.site-header nav { min-height: 3.5rem; }
.site-header nav ul { margin-block: 0; }
.site-header nav li { padding-block: 0; }
.site-header a { color: #fff; font-weight: 500; text-decoration: none; }
.site-header a:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.3em; }
.site-header a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.site-header button.small { color: #fff; border-color: rgba(255, 255, 255, 0.75); background: transparent; }
.site-header button.small:hover { background: rgba(255, 255, 255, 0.15); border-color: #fff; }

.brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.brand:hover { text-decoration: none !important; }
.brand img { height: 2rem; width: auto; display: block; }
.brand-name { font-size: 1.3rem; font-weight: 700; letter-spacing: 0.01em; }
.brand-label { font-weight: 400; opacity: 0.85; padding-left: 0.6rem; border-left: 1px solid rgba(255, 255, 255, 0.5); }

/* ---- Sign-in ---- */
.narrow { max-width: 26rem; margin: 2rem auto; }
.login-card { padding: 0; overflow: hidden; }
.login-hero { background: var(--gr-blue); color: #fff; text-align: center; padding: 2rem 1rem 1.5rem; }
.login-hero img { height: 5rem; width: auto; display: block; margin: 0 auto 0.5rem; }
.login-hero .brand-name { display: block; font-size: 2rem; line-height: 1.2; }
.login-hero p { margin: 0.25rem 0 0; color: #fff; opacity: 0.9; }
.login-body { padding: 1.5rem; }

/* ---- Page bits ---- */
form.inline { display: inline-block; margin: 0; }
button.small, [role="button"].small {
  width: auto;
  margin: 0 0.25rem 0.25rem 0;
  padding: 0.25rem 0.6rem;
  font-size: 0.875rem;
}
button.danger { color: var(--gr-danger); border-color: var(--gr-danger); background: transparent; }
button.danger:hover { color: #fff; background: var(--gr-danger); border-color: var(--gr-danger); }

.flash {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border-left: 4px solid;
  border-radius: var(--pico-border-radius);
  background: #fff;
  box-shadow: var(--pico-card-box-shadow);
}
.flash-success { border-color: var(--gr-success); }
.flash-error   { border-color: var(--gr-danger); }
.flash-info    { border-color: var(--gr-blue); }

.stats .stat { font-size: 2rem; font-weight: 700; color: var(--gr-navy); margin-bottom: 0.25rem; }
.stats article { margin-bottom: 1rem; }
.stats article small { font-size: 1rem; } /* captions under the numbers */

table.members td { vertical-align: top; }
table.members tr.inactive td:not(.actions) { color: var(--pico-muted-color); }
table.members th, table.members td { padding: 0.6rem 0.5rem; }
td.nowrap { white-space: nowrap; }
td.actions { width: 14rem; }
td.actions details { margin: 0.25rem 0 0; }
td.actions details summary { font-size: 0.875rem; color: var(--gr-blue-600); }
td.actions details form { margin-top: 0.5rem; }
td.actions details input { width: 100%; margin-bottom: 0.4rem; padding: 0.35rem 0.6rem; height: auto; }

.badge { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 1rem; font-size: 0.85rem; border: 1px solid; }
.badge-on  { color: var(--gr-success); border-color: var(--gr-success); }
.badge-off { color: var(--pico-muted-color); border-color: #8a9ca1; } /* darker than the row stripes */
.badge-tag { color: var(--gr-blue-700); border-color: #8cc8ee; background: #fff; white-space: nowrap; }
td.tags { line-height: 1.9; }
td.tags .badge { margin: 0 0.25rem 0.15rem 0; }

body > footer { padding-block: 1.5rem; }

/* Keep the add-user form a readable width on wide screens. */
#add-user article { max-width: 48rem; }
#add-user button[type="submit"] { width: auto; padding-inline: 1.5rem; }

/* Users page search */
.member-search { margin-bottom: 1rem; }
.member-search input[type="search"] { width: 100%; margin-bottom: 0.25rem; background-color: #fff; }
.member-search small { display: block; min-height: 1.2em; margin-top: 0.35rem; } /* Pico pulls helper text up under inputs */
/* Keep row striping even when the search hides rows. */
#member-table tbody tr:nth-child(odd) td { background-color: transparent; }
#member-table tbody tr:nth-child(odd of :not([hidden])) td { background-color: var(--pico-table-row-stripped-background-color); }

/* Footer (all pages) */
footer.site-footer { text-align: center; }

/* Modal dialogs (Pico styles <dialog><article>) */
dialog article { max-width: 30rem; }
dialog article header h2 { font-size: 1.15rem; margin: 0; }
dialog article footer form { margin: 0; }
dialog article footer { text-align: right; }
dialog article footer button[type="submit"] { width: auto; margin: 0; padding-inline: 1.5rem; }

/* Users page: button row under the heading */
.page-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.page-actions > [role="button"], .page-actions > button { width: auto; margin: 0; }
.page-actions small { margin: 0; }
.page-actions .flash { flex-basis: 100%; margin: 0; }

/* Add-user dialog: wide enough for two fields per row */
#add-user-dialog article { width: 100%; max-width: 40rem; }
#add-user-dialog form { margin-bottom: 0; }
dialog article footer { display: flex; justify-content: flex-end; gap: 0.75rem; }
dialog article footer [role="button"], dialog article footer button { width: auto; margin: 0; padding-inline: 1.5rem; }

/* Sortable column headers (buttons added by portal.js) */
th button.sort {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: inherit;
  color: inherit;
  white-space: nowrap;
}
th button.sort::after { content: '↕'; font-size: 0.8em; opacity: 0.35; }
th[aria-sort="ascending"] button.sort::after { content: '▲'; opacity: 0.9; color: var(--gr-blue-600); }
th[aria-sort="descending"] button.sort::after { content: '▼'; opacity: 0.9; color: var(--gr-blue-600); }
th button.sort:hover { color: var(--gr-blue-600); }
th button.sort:focus-visible { outline: 2px solid var(--gr-blue); outline-offset: 2px; border-radius: 2px; }

/* Breadcrumb page headings, e.g. "Manage › Users" */
h1.breadcrumb a { color: var(--gr-blue-600); text-decoration: none; }
h1.breadcrumb a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
h1.breadcrumb .crumb-sep { color: var(--pico-muted-color); font-weight: 400; margin: 0 0.4rem; }

/* Tags are stored lowercase; show them capitalized ("first chair" -> "First Chair"). */
.badge-tag, .tag-name { text-transform: capitalize; }

/* Edit tags dialog */
#tags-dialog article { width: 100%; max-width: 34rem; }
#tags-dialog h2 .muted { font-weight: 400; margin-left: 0.35rem; }
#tags-form { margin-bottom: 0; }
.tag-options { margin: 0; }
.tag-options legend { margin-bottom: 0.5rem; font-size: 0.95rem; }
/* Newspaper columns: alphabetical down each column, then across (up to 3 columns). */
.tag-columns { columns: 3 9rem; column-gap: 1rem; }
.tag-options label { margin: 0 0 0.35rem; display: flex; align-items: center; gap: 0.4rem; break-inside: avoid; }
.tag-options input[type="checkbox"] { margin: 0; }

/* "+" button after a member's tags: opens the Edit tags dialog */
a.tag-add {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.45rem; height: 1.45rem; vertical-align: middle;
  border: 1px dashed #8cc8ee; border-radius: 50%;
  color: var(--gr-blue-600); background: #fff;
  font-size: 1rem; font-weight: 500; line-height: 1; text-decoration: none;
}
a.tag-add:hover { border-style: solid; border-color: var(--gr-blue-600); background: var(--gr-blue-600); color: #fff; }
a.tag-add:focus-visible { outline: 2px solid var(--gr-blue); outline-offset: 2px; }

/* Groups page */
.groups-table td { vertical-align: top; }
td.group-name { font-weight: 500; color: var(--gr-navy); white-space: nowrap; }
td.group-members { line-height: 1.7; }
td.group-members .member.is-leader { font-weight: 600; color: var(--gr-navy); }
td.group-members .member.is-muted { color: var(--pico-muted-color); }
td.group-members .leader-label { font-weight: 400; color: var(--pico-muted-color); }
td.group-members .badge { margin-right: 0.4rem; }
.badge-warn { color: #8a5300; border-color: #d99a2b; background: #fff8eb; }

/* Group form */
td.group-name a { color: var(--gr-blue-600); text-decoration: none; }
td.group-name a:hover { color: var(--gr-blue-700); text-decoration: underline; }
.group-form { max-width: 52rem; }
.group-form fieldset { margin-top: 0.5rem; }
.group-form legend { font-weight: 600; color: var(--gr-navy); }
.selected-summary { padding: 0.6rem 0.8rem; background: #fff; border: 1px solid var(--gr-line); border-radius: var(--pico-border-radius); }
.selected-summary .size-note { color: #8a5300; }
#picker-search { margin-bottom: 0.5rem; background-color: #fff; }
.picker { max-height: 26rem; overflow-y: auto; border: 1px solid var(--gr-line); border-radius: var(--pico-border-radius); background: #fff; }
.picker-table { margin: 0; }
.picker-table thead th { position: sticky; top: 0; background: #fff; z-index: 1; }
.picker-table th, .picker-table td { padding: 0.45rem 0.6rem; }
.picker-table th:nth-child(-n+2), .picker-table td:nth-child(-n+2) { width: 4.5rem; text-align: center; }
.picker-table input[type="checkbox"], .picker-table input[type="radio"] { margin: 0; }
.picker-table tbody tr:nth-child(odd) td { background-color: transparent; }
.picker-table tbody tr:nth-child(odd of :not([hidden])) td { background-color: var(--pico-table-row-stripped-background-color); }
.form-actions { display: flex; gap: 0.75rem; margin-top: 1rem; }
.form-actions > *, .form-actions button[type="submit"] { width: auto; margin: 0; padding-inline: 1.5rem; }
.danger-zone { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--gr-line); max-width: 52rem; }
.danger-zone button { width: auto; }