/* ============================================================
org_gear.css — Org Gear hub Page Styles
Styles not covered by DS components.
DS components used: app-shell, card, inline-header, alert,
dashboard-grid (layouts.md §10.1), button, topbar, hamburger,
drawer, menu-group
Token: css/tokens.css
Shared: css/auth.css (auth-main)

RENAMED (2026-09-17): attrezzatura_club_master.css → org_gear.css

FIX 2026-08-02 (Audit DS):
- .master-grid replaced by .dashboard-grid (layouts.md §10.1)
- .master-card replaced by .card (existing DS component)
- Sub-classes renamed to page-specific BEM (.hub-card__*)
- Removed .master-grid / .master-card styles (now handled by DS)
============================================================ */

/* ── Hub Card — page-specific styles for navigation cards ── */
/* The .card class comes from the DS (ds/components/card.css).
   Here we only define hub-card specific styles:
   icon, title, description and hover/focus behaviour. */

.hub-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text-primary);
  transition: transform var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard);
}

.hub-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-medium);
}

.hub-card:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.hub-card__icon {
  font-size: var(--font-display-large);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.hub-card__title {
  font-size: var(--font-title-large);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.hub-card__description {
  font-size: var(--font-body-medium);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
  margin: 0;
}

/* ── Responsive ── */
@media (max-width: 599px) {
  .hub-card__icon {
    font-size: var(--font-display-medium);
  }

  .hub-card__title {
    font-size: var(--font-title-medium);
  }

  .gear-items {
    padding: var(--space-3);
  }

  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .toolbar__actions {
    flex-wrap: wrap;
  }
}

/* ============================================================
   Club gear items section
   MERGED (2026-09-17) from attrezzatura_club.css (the page has been merged
   into org_gear). Page-specific classes renamed to English; classes shared
   with other pages (.tab-content, .istruttore-view, .btn-admin-only,
   .dettagli-row, .dettagli-info, .autocomplete-*) are kept as they are.
   Design Token only: no hardcoded color/spacing/radius.
   ============================================================ */

.gear-items {
  flex: 1;
  min-width: 0;
  padding: var(--space-4);
}

/* ── Tab Content ── */
.tab-content {
  display: none;
}

.tab-content.active,
.tab-content[aria-hidden="false"] {
  display: block;
}

/* ── Instructor role: hides admin-only actions ── */
.istruttore-view .btn-admin-only {
  display: none;
}

/* ── Clickable main row (toggles the history details) ── */
.datatable__main-row {
  cursor: pointer;
}

/* Visible keyboard focus on the expandable row (issue #106, WCAG 2.4.7).
   Negative offset keeps the outline inside the table wrapper. */
.datatable__main-row:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: -3px;
}

/* ── "Full history" link inside expanded rows ── */
.history-link {
  color: var(--color-primary);
  text-decoration: none;
}

.history-link .material-symbols-outlined {
  font-size: var(--font-body-large);
  vertical-align: middle;
}

/* ── Expandable Detail Row ── */
.dettagli-row {
  display: none;
}

.dettagli-row--open {
  display: table-row;
}

.dettagli-row td {
  padding: var(--space-4);
  background: var(--color-surface-container);
  border-bottom: 1px solid var(--color-border);
}

.history-section {
  font-size: var(--font-body-medium);
  color: var(--color-text-secondary);
}

.history-section h4 {
  font-size: var(--font-label-large);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dettagli-info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
  font-size: var(--font-body-medium);
  color: var(--color-text-secondary);
}

.dettagli-info-label {
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

/* ── Status Icon (inline state) ── */
.state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  font-size: var(--font-body-large);
}

.state-icon .material-symbols-outlined {
  font-size: var(--font-body-large);
}

/* FIX 2026-08-02: BEM classes for item states (replacing style="color:...") */
.state-green  { color: var(--color-success); }
.state-cyan   { color: var(--color-primary); }
.state-yellow { color: var(--color-warning); }
.state-orange { color: var(--color-warning); }
.state-orange-dark { color: var(--color-warning); }
.state-red    { color: var(--color-error); }
.state-violet { color: var(--color-tertiary); }

/* ── Text utility (states) ── */
.text-warning {
  color: var(--color-warning);
}

.text-error {
  color: var(--color-error);
}

/* Note: the dialog form fields use the DS `form-field` component
   (ds/components/form-field.css) and the `.form-row` layout (tokens.css).
   The former page-local `.form-group` / `.required` rules were removed
   (issue #106). */

/* ── Autocomplete dropdown (pattern shared with shared/autocomplete.js) ── */
.autocomplete-wrapper {
  position: relative;
  width: 100%;
}

.autocomplete-wrapper input {
  width: 100%;
}

.autocomplete-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  max-height: 220px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius-medium) var(--radius-medium);
  box-shadow: var(--shadow-medium);
}

.autocomplete-dropdown.visible {
  display: block;
}

/* When the dropdown is open, only the top corners of the input stay rounded */
.autocomplete-wrapper:focus-within input {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.autocomplete-item {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-size: var(--font-body-medium);
  color: var(--color-text-primary);
  transition: background var(--motion-fast) var(--ease-standard);
  border-bottom: 1px solid var(--color-border);
}

.autocomplete-item:last-child {
  border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item.autocomplete-active {
  background: var(--color-surface-container);
}

.autocomplete-empty {
  padding: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--font-body-medium);
  font-style: italic;
  text-align: center;
}