/**
 * @file
 * CC Soccer Theme - User profile page styles.
 *
 * Styles local task tabs, user profile view, user edit form,
 * payment methods, and Commerce user orders pages.
 *
 * Uses design tokens from tokens.css.
 */

/* ============================================
   LOCAL TASK TABS (pill-style navigation)
   ============================================
   Replaces Drupal's default bullet-list tabs with
   horizontal pill buttons matching the site's
   season-tab design pattern.
   ============================================ */

.ccs-tabs {
  margin-bottom: var(--space-6);
}

.ccs-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ccs-tabs__tab a {
  display: inline-block;
  padding: 0.45rem 1rem;
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.ccs-tabs__tab a:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: rgba(212, 32, 32, 0.04);
  text-decoration: none;
}

.ccs-tabs__tab--active a,
.ccs-tabs__tab--active a:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* Secondary tabs - slightly smaller */
.ccs-tabs--secondary .ccs-tabs__tab a {
  font-size: var(--text-xs);
  padding: 0.3rem 0.75rem;
}

/* ============================================
   USER PROFILE VIEW PAGE
   ============================================
   /user/{uid} - Shows member info.
   ============================================ */

/* Wrap the user profile content nicely */
.profile {
  max-width: 760px;
}

/* Style the "Member for" field and any other user fields */
.profile .field {
  margin-bottom: var(--space-4);
}

.profile .field__label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-1);
}

.profile .field__item {
  font-size: var(--text-base);
  color: var(--color-text);
}

/* ============================================
   USER EDIT FORM
   ============================================
   /user/{uid}/edit - Account settings form.
   Constrain width and polish form elements.
   ============================================ */

/* Target user edit form specifically */
.user-form {
  max-width: 620px;
}

/* Form sections */
.user-form .form-item {
  margin-bottom: var(--space-5);
}

.user-form label {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-base);
  color: var(--color-text);
}

/* Make text inputs full width within the constrained form */
.user-form input[type="text"],
.user-form input[type="email"],
.user-form input[type="password"],
.user-form input[type="date"],
.user-form select,
.user-form textarea {
  width: 100%;
  max-width: 100%;
}

/* Description / help text under fields */
.user-form .form-item .description,
.user-form .form-item__description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
  line-height: var(--line-height-relaxed);
}

/* Password strength indicator */
.user-form .password-strength {
  margin-top: var(--space-2);
}

.user-form .password-strength__meter {
  height: 6px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--color-gray-200);
}

.user-form .password-strength__indicator {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width var(--transition-base), background-color var(--transition-base);
}

.user-form .password-strength__title {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

/* Password confirm match text */
.user-form .password-confirm,
.user-form .password-match-message {
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}

/* Save button at bottom of form */
.user-form .form-actions {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-gray-200);
}

.user-form .form-actions .form-submit,
.user-form .form-actions .button {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  padding: 0.6rem 1.5rem;
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-lg);
  cursor: pointer;
}

.user-form .form-actions .form-submit:hover,
.user-form .form-actions .button:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
}

/* ============================================
   PAYMENT METHODS PAGE
   ============================================
   /user/{uid}/payment-methods
   ============================================ */

/* Style the payment methods list */
.commerce-payment-methods {
  max-width: 620px;
}

/* "Add payment method" button */
.commerce-payment-methods .button,
.payment-method-add-form .button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Payment method items */
.commerce-payment-method {
  padding: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
}

/* Empty state */
.commerce-payment-methods .view-empty,
.commerce-payment-methods p:only-child {
  color: var(--color-text-secondary);
  font-size: var(--text-base);
}

/* ============================================
   COMMERCE USER ORDERS (Views table)
   ============================================
   /user/{uid}/orders - The Drupal Views page.
   Style the table to match /my-orders card table.

   Drupal Views generates multiple class formats:
   - .view-commerce-user-orders (hyphenated)
   - .view-id-commerce_user_orders (underscored)
   We target both, plus general .views-table inside
   these containers, with high specificity to beat
   Drupal core defaults.
   ============================================ */

/* Wrapper — constrain width */
.view-commerce-user-orders,
.view-id-commerce_user_orders {
  max-width: 760px;
}

/* Card-wrapped table */
.view-commerce-user-orders table,
.view-id-commerce_user_orders table,
.view-commerce-user-orders .views-table,
.view-id-commerce_user_orders .views-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-base);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* Table header row */
.view-commerce-user-orders table thead,
.view-id-commerce_user_orders table thead {
  background: var(--color-gray-100);
}

.view-commerce-user-orders table thead th,
.view-id-commerce_user_orders table thead th,
.view-commerce-user-orders .views-table thead th,
.view-id-commerce_user_orders .views-table thead th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--color-gray-200);
  background: var(--color-gray-100);
  white-space: nowrap;
}

/* Header links (sortable columns) */
.view-commerce-user-orders table thead th a,
.view-id-commerce_user_orders table thead th a {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--text-sm);
}

.view-commerce-user-orders table thead th a:hover,
.view-id-commerce_user_orders table thead th a:hover {
  color: var(--color-primary);
}

/* Active sort column */
.view-commerce-user-orders table thead th.is-active a,
.view-id-commerce_user_orders table thead th.is-active a {
  color: var(--color-text);
}

/* Sort arrow icon */
.view-commerce-user-orders table thead th .tablesort,
.view-id-commerce_user_orders table thead th .tablesort {
  vertical-align: middle;
  margin-left: var(--space-1);
}

/* Table body cells */
.view-commerce-user-orders table tbody td,
.view-id-commerce_user_orders table tbody td,
.view-commerce-user-orders .views-table tbody td,
.view-id-commerce_user_orders .views-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-gray-100);
  color: var(--color-text);
  vertical-align: middle;
}

.view-commerce-user-orders table tbody tr:last-child td,
.view-id-commerce_user_orders table tbody tr:last-child td {
  border-bottom: none;
}

.view-commerce-user-orders table tbody tr:hover,
.view-id-commerce_user_orders table tbody tr:hover {
  background: var(--color-gray-50);
}

/* Order number links in table body */
.view-commerce-user-orders table tbody td a,
.view-id-commerce_user_orders table tbody td a {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.view-commerce-user-orders table tbody td a:hover,
.view-id-commerce_user_orders table tbody td a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* Empty state message */
.view-commerce-user-orders .view-empty,
.view-id-commerce_user_orders .view-empty {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--text-base);
}

/* Mobile: stack table into card-like rows */
@media (max-width: 600px) {
  .view-commerce-user-orders table thead,
  .view-id-commerce_user_orders table thead {
    display: none;
  }

  .view-commerce-user-orders table tbody tr,
  .view-id-commerce_user_orders table tbody tr {
    display: block;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-gray-200);
  }

  .view-commerce-user-orders table tbody tr:last-child,
  .view-id-commerce_user_orders table tbody tr:last-child {
    border-bottom: none;
  }

  .view-commerce-user-orders table tbody td,
  .view-id-commerce_user_orders table tbody td {
    display: block;
    padding: var(--space-1) 0;
    border-bottom: none;
    text-align: left;
  }

  /* Form elements */
  .user-form {
    max-width: 100%;
  }
}

/* ============================================
   DRUPAL VIEWS TABLE - GLOBAL OVERRIDE
   ============================================
   Any Views-generated table on a user profile page
   that isn't already targeted should still look polished.
   Uses the .site-main__inner parent to scope.
   ============================================ */

.site-main__inner .views-view-table table,
.site-main__inner table.views-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-base);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.site-main__inner .views-view-table table thead,
.site-main__inner table.views-table thead {
  background: var(--color-gray-100);
}

.site-main__inner .views-view-table table thead th,
.site-main__inner table.views-table thead th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--color-gray-200);
  background: var(--color-gray-100);
}

.site-main__inner .views-view-table table thead th a,
.site-main__inner table.views-table thead th a {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--text-sm);
}

.site-main__inner .views-view-table table thead th a:hover,
.site-main__inner table.views-table thead th a:hover {
  color: var(--color-primary);
}

.site-main__inner .views-view-table table tbody td,
.site-main__inner table.views-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-gray-100);
  color: var(--color-text);
  vertical-align: middle;
}

.site-main__inner .views-view-table table tbody tr:last-child td,
.site-main__inner table.views-table tbody tr:last-child td {
  border-bottom: none;
}

.site-main__inner .views-view-table table tbody tr:hover,
.site-main__inner table.views-table tbody tr:hover {
  background: var(--color-gray-50);
}

.site-main__inner .views-view-table table tbody td a,
.site-main__inner table.views-table tbody td a {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.site-main__inner .views-view-table table tbody td a:hover,
.site-main__inner table.views-table tbody td a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* ============================================
   GENERAL: Hide Drupal default tab styling
   ============================================
   The core tabs use .tabs class with specific
   sub-selectors. Override any residual styles.
   ============================================ */

/* Reset any inherited Drupal core tab styles */
.block-local-tasks-block ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ============================================
   COMMERCE ORDER DETAIL PAGE
   ============================================
   /user/{uid}/orders/{order_id}
   Actual Commerce markup (verified from source):
   - h1 > div > div (label) + div (value) — no classes
   - .customer-information > div pairs (no classes)
   - .customer-billing > .field__label + .profile
   - .order-information > div pairs + table.cols-4 + totals
   - .order-total-line, .order-total-line-label/value
   ============================================ */

/* Back nav above order detail */
.page-back-nav {
  margin-bottom: var(--space-5);
}

/* Constrain width */
.customer-information,
.order-information {
  max-width: 760px;
}

/* Manage this order — admin-only action (bare li with no ul wrapper) */
#block-ccsoccer-theme-primary-admin-actions {
  margin-bottom: var(--space-5);
}

#block-ccsoccer-theme-primary-admin-actions li {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* button-action — primary (solid red) admin action */
#block-ccsoccer-theme-primary-admin-actions .button-action {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.25rem;
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

#block-ccsoccer-theme-primary-admin-actions .button-action:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-text-inverse);
  text-decoration: none;
}

/* Order number h1: two divs stacked — make them inline */
#block-ccsoccer-theme-page-title h1 {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-5);
  line-height: 1.2;
}

#block-ccsoccer-theme-page-title h1 > div {
  display: inline;
}

#block-ccsoccer-theme-page-title h1 > div > div:first-child::after {
  content: ' #';
}

#block-ccsoccer-theme-page-title h1 > div > div {
  display: inline;
}

/* Customer info: label/value div pairs */
.customer-information > div {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  font-size: var(--text-base);
}

.customer-information > div > div:first-child {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  min-width: 130px;
  flex-shrink: 0;
  padding-top: 1px;
}

/* Billing address block */
.customer-billing {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
}

.customer-billing .field__label {
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2);
}

/* Order info: label/value div pairs (Completed, Placed, State)
   Exclude last two children (table wrapper + totals wrapper) */
.order-information > div:not(:last-child):not(:nth-last-child(2)) {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  font-size: var(--text-base);
}

.order-information > div:not(:last-child):not(:nth-last-child(2)) > div:first-child {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  min-width: 130px;
  flex-shrink: 0;
  padding-top: 1px;
}

/* Order items table + totals — unified card block */
.order-information table.cols-4 {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden;
  box-shadow: none;
  margin: var(--space-5) 0 0 0;
}

.order-information table.cols-4 thead th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--color-gray-100);
  border-bottom: 1px solid var(--color-gray-200);
}

/* Pin last column width so totals can align to it */
.order-information table.cols-4 th.views-field-total-price__number,
.order-information table.cols-4 td.views-field-total-price__number {
  width: 120px;
  text-align: right;
}

.order-information table.cols-4 tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-gray-100);
  color: var(--color-text);
  vertical-align: middle;
}

/* Prevent long product names from pushing table wide */
.order-information table.cols-4 td.views-field-purchased-entity {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

.order-information table.cols-4 tbody tr:last-child td {
  border-bottom: none;
}

/* Order totals — connects to bottom of table as unified card */
.order-information > div:last-child {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-top: none;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) 0 var(--space-4) var(--space-4);
  margin-bottom: var(--space-5);
  width: 100%;
  box-sizing: border-box;
}

/* Inner totals wrapper — full width, values right-aligned */
.order-information > div:last-child > div {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.order-total-line {
  display: flex;
  font-size: inherit; /* match table cell font size */
  margin-bottom: var(--space-1);
  width: 100%;
}

.order-total-line-label {
  color: var(--color-text-secondary);
  flex: 1;
  text-align: right;
  /* Match table cell right padding so value column aligns with table */
  padding-right: var(--space-4);
}

/* Match the pinned last column width + its padding exactly */
.order-total-line-value {
  width: 120px;
  text-align: right;
  font-weight: var(--font-weight-medium);
}

.order-total-line__total {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-gray-200);
  margin-top: var(--space-1);
}

.order-total-line__total .order-total-line-label {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-base);
}

.order-total-line__total .order-total-line-value {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-lg);
}

/* ============================================
   ORDER DETAIL - MOBILE
   ============================================ */
@media (max-width: 600px) {
  /* Allow table to scroll horizontally rather than break layout */
  .order-information {
    overflow-x: auto;
  }

  /* Release the pinned column width on mobile */
  .order-information table.cols-4 th.views-field-total-price__number,
  .order-information table.cols-4 td.views-field-total-price__number {
    width: auto;
  }

  /* Release fixed value column width */
  .order-total-line-value {
    width: auto;
    min-width: 80px;
  }

  /* Customer info: stack label above value on small screens */
  .customer-information > div,
  .order-information > div:not(:last-child):not(:nth-last-child(2)) {
    flex-direction: column;
    gap: var(--space-1);
  }

  .customer-information > div > div:first-child,
  .order-information > div:not(:last-child):not(:nth-last-child(2)) > div:first-child {
    min-width: unset;
  }
}