/*
 * Green Curl brand overrides, loaded after Tabler's CDN stylesheet so these
 * custom properties win. Keeps the ocean green/teal identity consistent
 * across Tabler's light and dark themes without needing a Sass build step.
 */

:root {
  --gc-gradient-start: #0b4f4a;
  --gc-gradient-mid: #0f9b8e;
  --gc-gradient-end: #5eead4;
  --gc-gradient: linear-gradient(135deg, var(--gc-gradient-start), var(--gc-gradient-mid) 55%, var(--gc-gradient-end));

  --tblr-primary: #0f9b8e;
  --tblr-primary-rgb: 15, 155, 142;
  --tblr-link-color: var(--tblr-primary);
  --tblr-link-color-rgb: var(--tblr-primary-rgb);
}

[data-bs-theme="dark"] {
  --tblr-primary: #2dd4bf;
  --tblr-primary-rgb: 45, 212, 191;
}

.gc-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

.gc-logo svg {
  width: 100%;
  height: 100%;
}

.gc-wordmark {
  font-weight: 700;
  letter-spacing: -0.01em;
  background: var(--gc-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gc-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

.btn-gc-gradient {
  background: var(--gc-gradient);
  border: none;
  color: #fff;
}

.btn-gc-gradient:hover,
.btn-gc-gradient:focus {
  color: #fff;
  filter: brightness(1.08);
}

/* Tabler ships .table-vcenter (vertical-align: middle) but not a top-aligned
   equivalent - every index table in the app wants cell content anchored to
   the top instead (rows vary in height once a cell wraps to multiple lines,
   e.g. the project/category stack on time_entries#index). */
.table-top > :not(caption) > * > * {
  vertical-align: top;
}

/* Tom Select (see app/javascript/controllers/tom_select_controller.js) -
   keep it a fixed single-line height like every other .form-control/
   .form-select sibling instead of letting it wrap and grow taller as tags
   are added, and match Tabler's light/dark theme instead of the library's
   own bootstrap5 theme colors, which are light-mode-only. */
.ts-wrapper {
  width: 100%;
}

.ts-control {
  position: relative;
  flex-wrap: nowrap !important;
  overflow: hidden;
  white-space: nowrap;
  min-height: calc(2.25rem + 2px);
}

.ts-control > * {
  flex-shrink: 0;
}

/* Once the selected tags would no longer fit on that single line, remove
   them from the flow (display: none, not visibility: hidden - the search
   <input> must stay a normal, focusable element so clicking/tabbing into
   the field still works) and overlay a plain count instead - see
   TomSelectController#updateSummary, which toggles this class/attribute.
   While actually focused (TomSelectController#expand), the real tags -
   remove buttons and all - are shown again instead, wrapping onto as many
   lines as needed; see .ts-control.ts-expanded below. */
.ts-control.ts-overflowing > .item {
  display: none;
}

.ts-control.ts-overflowing::after {
  content: attr(data-summary);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-inline-start: 0.75rem;
  color: var(--tblr-body-color);
  /* No background of its own (the control's own already-correctly-rounded
     background shows through underneath) and no pointer events, so clicking
     anywhere on the "N selected" summary still reaches the control/input
     underneath instead of the overlay itself intercepting the click. */
  pointer-events: none;
}

.ts-control.ts-expanded {
  flex-wrap: wrap !important;
  overflow: visible;
  white-space: normal;
  height: auto;
}

.ts-control.ts-expanded > .item {
  display: inline-flex;
}

.ts-control.ts-expanded::after {
  content: none;
}

[data-bs-theme="dark"] .ts-control,
[data-bs-theme="dark"] .ts-dropdown {
  background-color: var(--tblr-body-bg);
  border-color: var(--tblr-border-color);
  color: var(--tblr-body-color);
}

[data-bs-theme="dark"] .ts-control input {
  color: var(--tblr-body-color);
}

[data-bs-theme="dark"] .ts-control > .item {
  background-color: var(--tblr-primary) !important;
  border-color: var(--tblr-primary) !important;
  color: #fff !important;
}

[data-bs-theme="dark"] .ts-dropdown .option,
[data-bs-theme="dark"] .ts-dropdown .optgroup-header,
[data-bs-theme="dark"] .ts-dropdown .no-results {
  color: var(--tblr-body-color);
}

[data-bs-theme="dark"] .ts-dropdown .option.active {
  background-color: var(--tblr-primary);
  color: #fff;
}

.gc-auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top left, rgba(15, 155, 142, 0.12), transparent 55%),
    radial-gradient(circle at bottom right, rgba(94, 234, 212, 0.12), transparent 55%);
}