/*
 * OwnBasketball — theme.css
 * Single source of truth for the visual tokens. The brand is the Nexus
 * default (docs/design_system.md) until the project gets its own identity:
 * change the tokens below and nothing else. NEVER hardcode a hex value in
 * markup: use these variables and the .nx-* classes.
 */

:root {
  /* Brand: OWN Basketball (ownbasketball.es), court orange on black. */
  --nx-brand:        #D45D2A;   /* primary buttons, links, current menu entry */
  --nx-brand-dark:   #B04A1F;   /* hover */
  --nx-brand-rgb:    212, 93, 42;
  --nx-ink:          #151515;   /* the site's black: section bars, footer */
  --nx-ink-soft:     #222222;
  --nx-sand:         #FBE7DD;   /* soft accent: fold boxes, text on the brand */
  --nx-lightblue:    #F6EEE9;   /* soft surfaces, table headers */

  /* Functional */
  --nx-success: #1e7e34;
  --nx-warning: #ffc107;  /* ALWAYS with dark text */
  --nx-danger:  #c22a32;
  --nx-info:    #0f6b7d;
  --nx-success-soft: #EEF8F0;
  --nx-warning-soft: #FFF8E1;

  /* Neutrals */
  --nx-bg:         #FAFAFA;
  --nx-card:       #ffffff;
  --nx-text:       #1A1A1A;
  --nx-text-muted: #666666;
  --nx-border:     #E4E4E4;
  --nx-secondary:  #F0F0F0;

  /* --- Bootstrap 5 overrides: make BS components use the brand --- */
  --bs-primary:     var(--nx-brand);
  --bs-primary-rgb: var(--nx-brand-rgb);
  --bs-link-color:  var(--nx-brand);
  --bs-link-color-rgb: var(--nx-brand-rgb);
  --bs-link-hover-color: var(--nx-brand-dark);
  --bs-link-hover-color-rgb: 176, 74, 31;

  /* Typography, as on the website: Oswald for headings (in capitals), Inter
     for text, Caveat for the hand-written accent line. */
  --nx-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --nx-font-display: "Oswald", "Arial Narrow", sans-serif;
  --nx-font-hand:    "Caveat", cursive;

  /* Height of the sticky navbar: what anything else that sticks sits under. */
  --nx-navbar-height: 4.25rem;
}

body {
  background: var(--nx-bg);
  color: var(--nx-text);
  font-family: var(--nx-font-body);
  font-size: 14px; /* dense base */
}

/* ------------------------------------------------------------------ */
/* Layout                                                             */
/* ------------------------------------------------------------------ */

/* The width of every screen. Bootstrap's .container caps at 1320px, which on
   an app full of wide tables leaves the figures crammed into the middle of a
   monitor. The page takes the whole window instead, with a margin that grows
   with it: finger-width on a phone, about a centimetre on a desktop. The
   navbar and the breadcrumb carry the same one, so everything lines up down
   the left edge. */
.nx-page {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: clamp(.75rem, 2vw, 2.5rem);
}

/* Navbar (sticky, brand background) */
.nx-navbar {
  background: var(--nx-card);
  border-bottom: 3px solid var(--nx-brand);
  min-height: var(--nx-navbar-height);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.nx-navbar .navbar-brand,
.nx-navbar .navbar-text { color: var(--nx-text); }

/* Menu items. Bootstrap paints the current one near-black, which on the brand colour
   is all but invisible, so the states are spelled out here: dimmed white for
   the rest, soft accent and underlined for where you are. */
.nx-navbar .nav-link { color: var(--nx-text); opacity: .8; }
.nx-navbar .nav-link:hover,
.nx-navbar .nav-link:focus { color: var(--nx-brand); opacity: 1; }
.nx-navbar .nav-link.active {
  color: var(--nx-brand);
  opacity: 1;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* ------------------------------------------------------------------ */
/* The menu: in the top bar, beside the logo, on every screen          */
/* ------------------------------------------------------------------ */
/* Each group (Mi área; Gestión, Configuración) is a dropdown of its screens.
   Where you are is filled with the brand in the list, and its group is
   underlined in the bar, so the eye finds it at once. */
.nx-shell { display: flex; align-items: flex-start; }
.nx-shell-main { flex: 1 1 auto; min-width: 0; }   /* lets wide tables scroll, not push */

.nx-topmenu { display: flex; align-items: center; gap: .1rem; margin: 0 0 0 .5rem; padding: 0; list-style: none; min-width: 0; }
.nx-topmenu-link {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--nx-font-display); font-weight: 500; font-size: 15px;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  color: var(--nx-text); background: none; border: 0; padding: .4rem .6rem; border-radius: 6px;
  text-decoration: none;
}
.nx-topmenu-link:hover, .nx-topmenu-link:focus-visible, .nx-topmenu-link.show { color: var(--nx-brand); background: var(--nx-secondary); }
.nx-topmenu-link.is-current { color: var(--nx-brand); box-shadow: inset 0 -2px 0 var(--nx-brand); border-radius: 0; }
.nx-topmenu .dropdown-menu { --bs-dropdown-link-active-bg: var(--nx-brand); font-size: 14px; min-width: 13rem; }
.nx-topmenu .dropdown-item.is-current { background: var(--nx-brand); color: #fff; font-weight: 600; }
/* On a phone the bar keeps the logo and the groups on one line: smaller words. */
@media (max-width: 575.98px) {
  .nx-topmenu { margin-left: .15rem; }
  .nx-topmenu-link { font-size: 13px; padding: .35rem .4rem; letter-spacing: .02em; }
  .nx-topmenu-link .bi-chevron-down { display: none; }
}
/* Screens not built yet: listed so the menu has its familiar shape, but
   plainly not somewhere you can go. */
.is-pending { color: var(--nx-text-muted); opacity: .6; cursor: default; }

/* A box whose text is saved in capitals shows it in capitals as it is typed. */
.nx-uppercase { text-transform: uppercase; }
.nx-uppercase::placeholder { text-transform: none; }

/* Breadcrumb under the navbar */
.nx-breadcrumb {
  background: var(--nx-lightblue);
  padding: .5rem clamp(.75rem, 2vw, 2.5rem);
  font-size: 13px;
  color: var(--nx-text-muted);
}
.nx-breadcrumb a { color: var(--nx-brand); text-decoration: none; }

/* Page header */
/* What you can do to what you are looking at sits next to its name, not across
   the page from it: the eye lands on the heading, and the buttons are already
   there. Anything that belongs on the far right — a count, a status — asks for
   it with `ms-auto`. */
.nx-page-header {
  background: var(--nx-card);
  border-bottom: 1px solid var(--nx-border);
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.nx-page-title {
  font-family: var(--nx-font-display);
  font-size: 24px; font-weight: 700; color: var(--nx-text); margin: 0;
  text-transform: uppercase; letter-spacing: .02em;
}

/* The header rides down the page under the navbar. On a form that is Save and
   Cancel, needed at the bottom of a long form as much as at the top; on a
   record it is Edit, Print and the status, which is what you reach for after
   reading to the end. Hunting back up for either is how work gets abandoned. */
.nx-page-header-stuck {
  position: sticky;
  top: var(--nx-navbar-height, 3.5rem);
  z-index: 1020;                      /* under the navbar's 1030 */
  box-shadow: 0 2px 6px rgba(var(--nx-brand-rgb), .1);
}

/* ------------------------------------------------------------------ */
/* Buttons                                                            */
/* ------------------------------------------------------------------ */
.btn-nx-primary {
  background: var(--nx-brand);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: var(--nx-font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.btn-nx-primary:hover { background: var(--nx-brand-dark); color: #fff; }
.btn-nx-primary:focus { outline: 2px solid var(--nx-brand); outline-offset: 2px; }
/* Always filled: Bootstrap paints a pressed, focused or open (.show) button with
   its own --bs-btn-* colours, which a custom button does not set — it went blank. */
.btn-nx-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--nx-brand);
  --bs-btn-border-color: var(--nx-brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--nx-brand-dark);
  --bs-btn-hover-border-color: var(--nx-brand-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--nx-brand-dark);
  --bs-btn-active-border-color: var(--nx-brand-dark);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--nx-brand);
  --bs-btn-disabled-border-color: var(--nx-brand);
  --bs-btn-focus-shadow-rgb: var(--nx-brand-rgb);
}
.btn-nx-primary:active, .btn-nx-primary.active, .btn-nx-primary.show,
.btn-nx-primary:focus-visible, .btn-nx-primary:disabled {
  background: var(--nx-brand-dark); color: #fff;
}

.btn-nx-secondary {
  background: #fff;
  border: 1px solid var(--nx-border);
  color: var(--nx-brand);
  border-radius: 6px;
}
.btn-nx-secondary:hover { background: var(--nx-secondary); color: var(--nx-brand-dark); }

.btn-nx-danger {
  background: var(--nx-danger);
  color: #fff;
  border: none;
  border-radius: 6px;
}
.btn-nx-danger:hover { background: #9d2028; color: #fff; }
.btn-nx-danger:focus { outline: 2px solid var(--nx-danger); outline-offset: 2px; }

/* Quiet destructive action inside a table row: an icon that only colours in
   on hover, so a table full of rows is not a wall of red. */
.btn-nx-danger-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--nx-text-muted);
  border-radius: 6px;
  line-height: 1;
}
.btn-nx-danger-ghost:hover { background: rgba(194, 42, 50, .1); color: var(--nx-danger); }
.btn-nx-danger-ghost:focus { outline: 2px solid var(--nx-danger); outline-offset: 1px; }

/* A wide card's labels: just enough for the longest of them, so the boxes
   take everything else. They are names, not sentences — "Presentations" is
   the longest one there is. */
.nx-form-label {
  flex: 0 0 auto;
  width: 7.5rem;
  padding-right: .5rem;
}

/* The layout of every new form: two columns of "Label: field", rows close
   together. A long field (notes, a file) starts its own row and takes the
   width. Narrower, one column of pairs; on a phone the label goes on top.
   Drawn by core/_form_pairs.html. */
.nx-form-pairs {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
  gap: .3rem .75rem;
  align-items: center;
  font-size: .875rem;
}
.nx-pair-label {
  margin: 0;
  font-weight: 600;
  color: var(--nx-text);
  white-space: nowrap;
}
.nx-pair-label.nx-pair-wide { grid-column: 1; }
.nx-pair-field.nx-pair-wide { grid-column: 2 / -1; }
.nx-pair-field .form-text { margin-top: 0; }

/* One column of "Label: field" (a form with `single_column`), each box as wide
   as its content asks: a time, a number, a choice, a line of text, a paragraph. */
/* Save and Cancel again at the foot of a form, left as at the top. */
.nx-form-footer { display: flex; gap: .5rem; background: var(--nx-card); border-top: 1px solid var(--nx-border); }

.nx-form-pairs--single { grid-template-columns: max-content minmax(0, 1fr); gap: .45rem .9rem; }
.nx-form-pairs--single .nx-pair-label.nx-pair-wide { grid-column: 1; }
.nx-form-pairs--single .nx-pair-field.nx-pair-wide { grid-column: 2; }
.nx-w-time   { max-width: 8rem; }
.nx-w-short  { max-width: 13rem; }
.nx-w-number { max-width: 7rem; }
.nx-w-select { max-width: 18rem; }
.nx-w-text   { max-width: 32rem; }
.nx-w-long   { max-width: 42rem; }
@media (max-width: 991.98px) {
  .nx-form-pairs { grid-template-columns: max-content minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  .nx-form-pairs { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .nx-pair-label { margin-top: .5rem; white-space: normal; }
  .nx-pair-label.nx-pair-wide, .nx-pair-field.nx-pair-wide,
  .nx-form-pairs--single .nx-pair-label.nx-pair-wide,
  .nx-form-pairs--single .nx-pair-field.nx-pair-wide { grid-column: auto; }
}

/* ------------------------------------------------------------------ */
/* Avatars                                                            */
/* ------------------------------------------------------------------ */
.nx-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; background: var(--nx-brand);
}
.nx-avatar-xs { width: 24px; height: 24px; font-size: 9px; }   /* dense tables */
.nx-avatar-sm { width: 32px; height: 32px; font-size: 12px; }  /* headers, cards */
.nx-avatar-stack > .nx-avatar { margin-left: -8px; border: 2px solid #fff; }

/* ------------------------------------------------------------------ */
/* Filters                                                            */
/* ------------------------------------------------------------------ */
.nx-filter-bar {
  display: flex; align-items: center;
  background: #fff; border-radius: 6px; padding: .25rem;
}

/* A table jumped to from a button sits clear of what is stuck to the top of
   the window: the navbar, and the form's own header under it. */
[data-table-panel] { scroll-margin-top: calc(var(--nx-navbar-height) + 4.5rem); }

/* A code read rather than composed: every character the same width, and a
   size down so a long one fits its column whole. */
.nx-code {
  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
  font-size: 11px;
  letter-spacing: -.01em;
}

/* The OK/KO column: a badge, so no wider than it needs to be. */
.nx-col-flag { width: 4.5rem; }

/* ------------------------------------------------------------------ */
/* Section colours                                                    */
/* ------------------------------------------------------------------ */
/* A long document is several stages of work, and the eye needs to know
   which one a table belongs to without reading back up to the heading. Each
   section sets an accent; the table strips and headings read it. Soft tints
   with dark ink, so a screen of figures is not a paint chart. */
.nx-section {
  --nx-accent: var(--nx-lightblue);
  --nx-accent-ink: var(--nx-brand);
}
/* The section's own bar keeps the navy: it is the heading, not the table. A
   hairline of the accent under it ties the two together. */
.nx-section > .nx-section-header { border-bottom: 3px solid var(--nx-accent); }

/* ------------------------------------------------------------------ */
/* Data tables — dense, for an app                                    */
/* ------------------------------------------------------------------ */
.nx-table thead th {
  background: var(--nx-accent, var(--nx-lightblue));
  color: var(--nx-accent-ink, var(--nx-brand));
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
}
.nx-numeric { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Sortable column heading: the whole label is the link, and the one in force
   is the only one wearing an arrow. */
.nx-sort { color: inherit; text-decoration: none; white-space: nowrap; }
.nx-sort:hover { color: inherit; text-decoration: underline; }
.nx-sort-on { text-decoration: underline; }
/* Columns you are not sorted by wear a faint double chevron, so it is plain
   that every heading is a handle and not only the one in force. */
.nx-sort-hint { opacity: .3; font-size: .85em; }
.nx-sort:hover .nx-sort-hint { opacity: .75; }

/* A filter box under each heading: the list is narrowed where it is read,
   rather than in a bar away from the column it applies to. It carries the
   heading's own background so the two rows read as one block. */
.nx-filter-row > td {
  background: var(--nx-accent, var(--nx-lightblue));
  padding: 0 .35rem .3rem;
  vertical-align: top;
  border-bottom: 1px solid var(--nx-border);
}
.nx-filter-row .form-control { font-size: 12px; }
.nx-filter-row .form-control::placeholder { color: var(--nx-text-muted); opacity: .7; }

/* A grid whose cells hold lists, one value per line — the shape their own
   packaging and characteristics screens are read in. Columns are held narrow
   so all eleven fit, and a long value wraps rather than pushing the table
   sideways. */
.nx-grid td { white-space: normal; max-width: 11rem; line-height: 1.35; }
.nx-grid tbody tr > td { border-left: 1px solid var(--nx-border); }
.nx-grid tbody tr > td:first-child { border-left: 0; }

/* One row, one line. A list is read by running the eye down a column, which a
   row wrapping to three lines breaks; the table scrolls sideways inside its
   .table-responsive instead of growing downwards. */
.nx-table-oneline tbody td { white-space: nowrap; }

/* A heading is free to wrap where its cells hold a figure: "Processing
   Cost/Kg" over three lines costs nothing in height and takes the column down
   to the width of the numbers under it. */
.nx-table thead th.nx-head-wrap { white-space: normal; width: 1%; }
/* The width is put on the link, not the cell: in an auto-layout table a cell
   takes the width of its content, so capping the label is what actually takes
   the column in. */
.nx-table thead th.nx-head-wrap .nx-sort {
  display: inline-block;
  max-width: 6rem;
  white-space: normal;
  text-align: right;
}

/* Section banner grouping several tables. */
.nx-section-header {
  background: var(--nx-ink);
  font-family: var(--nx-font-display);
  color: #fff;
  padding: .55rem 1rem;
  /* A step up from the table titles inside it: the sections are the stages
     of the document, and they should read as the headings of the page. */
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: calc(.375rem - 1px) calc(.375rem - 1px) 0 0;
}
/* Title bar of one sub-table. It wears the same colour as that
   table's own column headings, a size up from them, so a stack of tables in one
   section reads as a stack of tables and not as one long list. */
.nx-table-header {
  background: var(--nx-accent, var(--nx-lightblue));
  color: var(--nx-accent-ink, var(--nx-brand));
  padding: .45rem 1rem;
  border-top: 1px solid var(--nx-border);
}
.nx-table-title {
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* The column of tick boxes that picks rows for the spreadsheet: as narrow as a
   box, and never the thing a row wraps on. */
.nx-select-cell {
  width: 2.25rem;
  text-align: center;
  padding-right: 0;
}


/* The first sub-table sits straight under the banner: no double border. */
.nx-section-header + div > .nx-table-header { border-top: 0; }

/* Editable rows inside a formset table. Without minimum widths the browser
   squeezes every control to its content and the row becomes unreadable. */
.nx-table td .form-control,
.nx-table td .form-select { min-width: 6rem; }
.nx-table td select[name$="-product"] { min-width: 11rem; }
.nx-table td input[name$="-description"],
.nx-table td input[name$="-comments"],
.nx-table td input[name$="-number"] { min-width: 10rem; }
.nx-table td input[type="checkbox"] { min-width: 0; }
.nx-table thead th { vertical-align: bottom; }

/* Editable rows are dense on purpose: a document can be dozens of
   lines, and the whole table should be readable without scrolling. Only
   rows carrying controls are tightened — the read-only tables keep their air. */
.nx-table tbody tr.js-row > td { padding-top: .15rem; padding-bottom: .15rem; }
.nx-table tbody tr.js-row .form-control-sm,
.nx-table tbody tr.js-row .form-select-sm {
  padding-top: .05rem;
  padding-bottom: .05rem;
  line-height: 1.35;
}

/* Row numbers. A CSS counter rather than a rendered value, so a row added,
   pasted or removed renumbers the table with nothing to keep in step. */
.nx-table tbody { counter-reset: nx-row; }
.nx-table tbody tr.js-row { counter-increment: nx-row; }
.nx-table td.nx-row-number::before { content: counter(nx-row); }
.nx-table .nx-row-number {
  text-align: right;
  color: var(--nx-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Computed columns inside an editable table: read-only figures that follow
   what is being typed, so they read like the view rather than like a field. */
.nx-table .nx-line-total {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--nx-text-muted);
}
/* Row selection. Screen state only — these boxes have no name and never post. */
.nx-table .nx-row-select { padding-right: 0; }
.nx-table tbody tr.nx-row-selected > td { background: var(--nx-lightblue); }
.nx-badge-selection {
  background: var(--nx-brand);
  color: #fff;
  font-weight: 500;
  border-radius: 999px;
}

/* A row flagged for removal keeps its place, struck through, until Save: the
   deletion only happens on the server, so the user can still take it back. */
.nx-table tr.nx-row-deleted { background: rgba(194, 42, 50, .06); }
.nx-table tr.nx-row-deleted td .form-control,
.nx-table tr.nx-row-deleted td .form-select {
  text-decoration: line-through;
  opacity: .55;
}

/* Module cards on the dashboard */
.nx-module-card { border-color: var(--nx-border); transition: border-color .15s, box-shadow .15s; }
a:hover > .nx-module-card { border-color: var(--nx-brand); box-shadow: 0 2px 8px rgba(var(--nx-brand-rgb), .12); }
.nx-module-card .card-body > .d-flex > .bi { color: var(--nx-brand); }
.nx-module-card--pending { background: var(--nx-secondary); }

/* The master lists inside the Config card: a row each, the whole strip
   clickable, so seven links still read as a list and not as prose. */
.nx-config-links a {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .5rem;
  border-radius: .375rem;
  color: var(--nx-text);
  text-decoration: none;
  font-size: .9rem;
}
.nx-config-links a:hover { background: var(--nx-secondary); color: var(--nx-brand); }
.nx-config-links .bi { color: var(--nx-brand); }

/* ------------------------------------------------------------------ */
/* Inline editing (see docs/ui_components.md section 3) — invisible    */
/* until hover, BUT visible on focus (accessibility).                  */
/* ------------------------------------------------------------------ */
.edit-field { max-width: 180px; border: 1px solid transparent; background: transparent; }
.nx-row:hover { background: var(--nx-secondary); }
.nx-row:hover .edit-field,
.edit-field:focus { border-color: var(--nx-border); background: #fff; }
.edit-field:focus { outline: 2px solid var(--nx-brand); outline-offset: 1px; }
.btn-action { padding: .2rem .5rem; font-size: .8rem; }
.password-input { max-width: 160px; font-size: .85rem; }

/* Section and table bars lay out like the page header: title, then its
   buttons beside it, and figures pushed to the right with ms-auto. */
.nx-section-header,
.nx-table-header { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.nx-section-header .small,
.nx-section-header .text-muted {
  color: rgba(255, 255, 255, .85) !important;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.nx-section-header .text-success { color: #bfe8c6 !important; }
.nx-section-header .btn { text-transform: none; letter-spacing: 0; }
.nx-table-header .btn-link { color: var(--nx-accent-ink, var(--nx-brand)); text-transform: none; }
.nx-table-header .small { text-transform: none; letter-spacing: 0; }
/* The header card of a document: labels light, values strong. */
.nx-code { white-space: nowrap; }
.nx-table thead th.nx-head-wrap { white-space: normal; }


/* ------------------------------------------------------------------ */
/* OWN Basketball: the website's look                                 */
/* ------------------------------------------------------------------ */
h1, h2, h3, h4, .nx-display {
  font-family: var(--nx-font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.nx-hand { font-family: var(--nx-font-hand); color: var(--nx-brand); text-transform: none; letter-spacing: 0; }

.nx-logo { height: 2.6rem; width: auto; display: block; }

/* The name in the navbar opens the account's menu; a long email is cut, not wrapped. */
.nx-user-menu { display: inline-flex; align-items: center; gap: .35rem; max-width: 16rem; }
.nx-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 575.98px) { .nx-user-name { display: none; } }
.nx-navbar .dropdown-item:active { background: var(--nx-brand); }

/* The orange strip along the top of the website, with the next date. */
.nx-topbar {
  background: var(--nx-brand); color: #fff;
  font-size: 13px; text-align: center; padding: .35rem 1rem;
}
.nx-topbar a { color: #fff; font-weight: 600; }

/* Hero: the court photo, washed light, with the headline over it. The page
   sets --nx-hero-image, since only a template knows the static URL. */
.nx-hero {
  background: linear-gradient(rgba(255, 255, 255, .84), rgba(255, 255, 255, .84)),
              var(--nx-hero-image) center 30% / cover no-repeat;
  text-align: center;
  padding: clamp(3rem, 9vw, 6.5rem) 1rem;
}
.nx-hero h1 { font-size: clamp(2.2rem, 6vw, 4.2rem); font-weight: 700; line-height: 1.05; margin: 0; }
.nx-hero .nx-hand { font-size: clamp(1.6rem, 3.5vw, 2.6rem); margin: .5rem 0 1rem; transform: rotate(-2deg); }
.nx-hero p { color: var(--nx-text-muted); max-width: 34rem; margin: 0 auto 1.75rem; font-size: 15px; }
.btn-nx-lg { padding: .75rem 1.75rem; font-size: 16px; }

/* Dark band, as the website's sections. */
.nx-band-dark { background: var(--nx-ink); color: #fff; }
.nx-band-dark .text-muted { color: #b5b5b5 !important; }

/* Activity-type cards: BASICS, VITAMINS, LABS… */
.nx-type-card {
  background: var(--nx-ink-soft); color: #fff; border-radius: 10px;
  padding: 1.5rem; height: 100%; border-top: 4px solid var(--nx-brand);
}
.nx-type-card h3 { font-size: 22px; margin-bottom: .35rem; }
.nx-type-ages { color: var(--nx-brand); font-weight: 600; font-size: 13px; }
.nx-type-card p { color: #ccc; font-size: 14px; margin: .5rem 0 0; }

/* An activity in a list: its date as a block, like a ticket. */
.nx-activity {
  display: flex; gap: 1rem; align-items: center;
  background: var(--nx-card); border: 1px solid var(--nx-border); border-radius: 8px;
  padding: .75rem 1rem; color: inherit; text-decoration: none;
}
a.nx-activity:hover { border-color: var(--nx-brand); box-shadow: 0 2px 8px rgba(var(--nx-brand-rgb), .12); color: inherit; }
.nx-date {
  flex: 0 0 auto; width: 3.75rem; text-align: center; border-radius: 6px;
  background: var(--nx-brand); color: #fff; padding: .3rem 0; line-height: 1.1;
  font-family: var(--nx-font-display);
}
/* The weekday, in three letters, over the day: DOM 18 OCT. */
.nx-date-dow { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .9; }
.nx-date-day { font-size: 22px; font-weight: 700; display: block; }
.nx-date-month { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.nx-activity-title { font-family: var(--nx-font-display); font-size: 17px; text-transform: uppercase; margin: 0; }
.nx-tag {
  display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--nx-brand-dark); background: var(--nx-sand);
  border-radius: 999px; padding: .1rem .55rem;
}

/* Balance chips: sessions left of each type. */
.nx-balance {
  display: inline-flex; align-items: baseline; gap: .35rem;
  border: 1px solid var(--nx-border); border-radius: 6px; padding: .2rem .6rem; background: var(--nx-card);
}
.nx-balance strong { font-family: var(--nx-font-display); font-size: 18px; color: var(--nx-brand); }
.nx-balance.is-empty strong { color: var(--nx-text-muted); }

/* The bono picker: one row per bono, quantity at the end; the total at the foot. */
.nx-bono-row { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; border-bottom: 1px dotted var(--nx-border); }
.nx-bono-row:last-child { border-bottom: 0; }
.nx-bono-row .nx-qty { width: 5rem; flex: 0 0 auto; }
.nx-bono-group.is-disabled { opacity: .45; }
/* The type the student was sent here to pay for. */
.nx-bono-group.is-wanted { outline: 2px solid var(--nx-brand); outline-offset: 2px; border-radius: .375rem; }
.nx-total { font-family: var(--nx-font-display); font-size: 26px; color: var(--nx-brand); }

.nx-player-photo { width: 9rem; height: 9rem; object-fit: cover; }

.nx-footer { background: var(--nx-ink); color: #b5b5b5; font-size: 13px; padding: 1.5rem 0; }
.nx-footer a { color: #fff; }

/* ------------------------------------------------------------------ */
/* Tables on a phone: each row a card of "heading: value"             */
/* ------------------------------------------------------------------ */
/* Marked .nx-table-stack; core/js/table-stack.js gives every cell the
   heading of its column in data-label. */
@media (max-width: 575.98px) {
  .nx-table-stack thead { display: none; }
  .nx-table-stack, .nx-table-stack tbody, .nx-table-stack tfoot,
  .nx-table-stack tr, .nx-table-stack td, .nx-table-stack th { display: block; width: 100%; }
  .nx-table-stack tr { border-bottom: 1px solid var(--nx-border); padding: .45rem 0; }
  .nx-table-stack > :not(caption) > * > * { border-bottom-width: 0; }
  /* Block, not flex: a cell holding a link and some text keeps them on one line. */
  .nx-table-stack td, .nx-table-stack tfoot th {
    padding: .2rem .85rem; text-align: right; white-space: normal; max-width: none;
    overflow: hidden;
  }
  .nx-table-stack td::before, .nx-table-stack tfoot th::before {
    content: attr(data-label); float: left; margin-right: .75rem; padding-top: .15rem; text-align: left;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
    color: var(--nx-text-muted);
  }
  .nx-table-stack td[data-label=""]::before, .nx-table-stack th[data-label=""]::before { content: none; }
  .nx-table-stack td[data-label=""] { text-align: left; }
  .nx-table-stack td > form, .nx-table-stack td > .d-flex { display: inline-flex; }
  /* The first cell names the row: it reads as the card's title. */
  .nx-table-stack tbody td:first-child { font-weight: 600; font-size: 15px; }
  .nx-table-stack .nx-numeric { text-align: right; }
}

/* Several loose dates of an activity (MultiDateWidget): chips, and the tools to add more. */
.nx-date-picker { display: grid; gap: .4rem; }
/* The month view to pick days: a click picks a day (filled orange), another drops it. */
.nx-month { max-width: 19rem; border: 1px solid var(--nx-border); border-radius: 8px; padding: .5rem; background: var(--nx-card); }
.nx-month-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; }
.nx-month-title { font-family: var(--nx-font-display); text-transform: uppercase; letter-spacing: .03em; }
.nx-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .2rem; }
.nx-month-dow { font-size: 11px; font-weight: 600; color: var(--nx-text-muted); text-align: center; }
.nx-month-day {
  aspect-ratio: 1; border: 1px solid transparent; border-radius: 6px; background: var(--nx-bg);
  font-size: 13px; color: var(--nx-text); cursor: pointer; padding: 0;
}
.nx-month-day:hover { border-color: var(--nx-brand); }
.nx-month-day.is-today { border-color: var(--nx-ink); }
.nx-month-day.is-picked { background: var(--nx-brand); color: #fff; font-weight: 700; border-color: var(--nx-brand); }
.nx-day-chip--edit {
  display: inline-flex; align-items: center; gap: .3rem; font-size: 12px;
  background: var(--nx-sand); color: var(--nx-brand-dark); padding: .15rem .2rem .15rem .5rem;
}
.nx-day-chip--edit button {
  border: 0; background: transparent; color: inherit; font-size: 15px; line-height: 1;
  padding: 0 .25rem; border-radius: 3px; cursor: pointer;
}
.nx-day-chip--edit button:hover { background: var(--nx-brand); color: #fff; }
/* The dates of an activity, as small chips. */
.nx-day-chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.nx-day-chip {
  font-size: 11px; font-weight: 600; border-radius: 4px; padding: .05rem .4rem;
  background: var(--nx-secondary); color: var(--nx-text); white-space: nowrap;
}
.nx-day-chip.is-past { opacity: .5; text-decoration: line-through; }

/* The student's activities (academy/_my_activities.html): one row per
   activity, by next date. Enrolled is the strong mark — a green bar and
   tint; enrolled without a bono, amber. */
.nx-pick {
  display: flex; gap: .85rem; align-items: center; width: 100%; text-align: left;
  background: var(--nx-card); border: 1px solid var(--nx-border); border-left: 5px solid var(--nx-border);
  border-radius: 8px; padding: .65rem .85rem; color: inherit;
}
.nx-pick:hover, .nx-pick:focus-within { border-color: var(--nx-brand);
  box-shadow: 0 2px 8px rgba(var(--nx-brand-rgb), .12); }
/* The part of the row that opens the dialog; the action stays apart, beside it. */
.nx-pick-main {
  display: flex; gap: .85rem; align-items: center; flex: 1 1 auto; min-width: 0;
  background: none; border: 0; padding: 0; text-align: left; color: inherit; cursor: pointer;
}
.nx-pick-main:focus-visible { outline: 2px solid var(--nx-brand); outline-offset: 3px; border-radius: 4px; }
.nx-pick.is-enrolled { border-left-color: var(--nx-success); background: var(--nx-success-soft); }
.nx-pick.is-unpaid { border-left-color: var(--nx-warning); background: var(--nx-warning-soft); }
.nx-pick.is-enrolled .nx-date { background: var(--nx-success); }
/* What to do on the row (Inscribir, places, reminders): on the left, under the
   activity and in line with its title — never off in the far corner. */
.nx-pick { flex-wrap: wrap; row-gap: .4rem; }
.nx-pick-status {
  flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem;
  padding-left: calc(3.75rem + .85rem);   /* the date block and its gap */
  font-size: 12px; text-align: left;
}
.nx-pick-status:empty { display: none; }
.nx-pick-status form { margin: 0; }
/* The player is outside the type's ages: allowed, but said. */
.nx-age-warning { color: var(--nx-text-muted); font-weight: 600; }
/* Beside Inscribir when there is no session to pay it: a bono will be needed. */
.nx-pick-reminder { color: var(--nx-brand-dark); font-weight: 600; line-height: 1.3; }
@media (max-width: 575.98px) {
  .nx-pick-status { padding-left: 0; }
}

/* The photo box at the top of a form (core/_photo_slot.html): click to choose. */
.nx-photo-slot {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 9.5rem; height: 9.5rem; border: 2px dashed var(--nx-brand); border-radius: 10px;
  background: var(--nx-sand); color: var(--nx-brand-dark); cursor: pointer; overflow: hidden;
  text-align: center; font-size: 12px; font-weight: 600; margin: 0;
}
.nx-photo-slot:hover, .nx-photo-slot:focus-within { box-shadow: 0 0 0 3px rgba(var(--nx-brand-rgb), .25); }
.nx-photo-slot.has-photo { border-style: solid; background: var(--nx-card); }
.nx-photo-slot img { width: 100%; height: 100%; object-fit: cover; }
.nx-photo-empty { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .5rem; }
.nx-photo-empty .bi { font-size: 2.4rem; }
.nx-photo-change {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .2rem; font-size: 11px;
  background: rgba(21, 21, 21, .65); color: #fff;
}
.nx-photo-slot:not(.has-photo) .nx-photo-change { display: none; }