/**
 * @file
 * Livalos brand overrides for the Gin admin theme.
 *
 * NOTE: !important is required because Drupal loads module CSS before theme CSS,
 * and Gin's accent.js injects inline <style> elements.
 */

/* ---------------------------------------------------------------------------
   1. COLOR TOKENS
   --------------------------------------------------------------------------- */

:root {
  --livalos-blue: #0D1AFF;
  --livalos-blue-rgb: 13, 26, 255;
  --livalos-blue-dark: #0011DB;
  --livalos-blue-dark-rgb: 0, 17, 219;
  --livalos-blue-light: #4252FF;
  --livalos-blue-light-rgb: 66, 82, 255;
  --livalos-blue-pale: #e8eaff;
  --livalos-blue-wash: #f0f1ff;

  --livalos-cyan: #06b6d4;
  --livalos-cyan-rgb: 6, 182, 212;

  --livalos-white: #ffffff;
  --livalos-gray-50: #f8fafc;
  --livalos-gray-100: #f1f5f9;
  --livalos-gray-200: #e2e8f0;
  --livalos-gray-300: #cbd5e1;
  --livalos-gray-400: #94a3b8;
  --livalos-gray: #64748b;
  --livalos-gray-dark: #334155;
  --livalos-gray-900: #0f172a;

  --livalos-shadow-sm: 0 1px 3px rgba(13, 26, 255, .04), 0 1px 2px rgba(15, 23, 42, .03);
  --livalos-shadow-md: 0 4px 12px rgba(13, 26, 255, .06), 0 2px 4px rgba(15, 23, 42, .03);
  --livalos-shadow-lg: 0 12px 32px rgba(13, 26, 255, .08), 0 4px 8px rgba(15, 23, 42, .04);
  --livalos-shadow-xl: 0 20px 48px rgba(13, 26, 255, .12), 0 8px 16px rgba(15, 23, 42, .06);
  --livalos-shadow-glow: 0 0 20px rgba(13, 26, 255, .15), 0 4px 14px rgba(13, 26, 255, .2);
  --livalos-shadow-glow-lg: 0 0 40px rgba(13, 26, 255, .2), 0 8px 24px rgba(13, 26, 255, .25);

  --livalos-radius-sm: 8px;
  --livalos-radius-md: 12px;
  --livalos-radius-lg: 16px;
  --livalos-radius-xl: 24px;
}

/* ---------------------------------------------------------------------------
   2. GIN VARIABLE OVERRIDES — Light mode
   --------------------------------------------------------------------------- */

html:not(.gin--dark-mode),
[data-gin-accent] {
  --gin-color-primary-rgb: var(--livalos-blue-rgb) !important;
  --gin-color-primary: rgb(var(--livalos-blue-rgb)) !important;
  --gin-color-primary-hover: var(--livalos-blue-dark) !important;
  --gin-color-primary-active: var(--livalos-blue-dark) !important;
  --gin-color-primary-light: rgba(var(--livalos-blue-rgb), .05) !important;
  --gin-color-primary-light-hover: rgba(var(--livalos-blue-rgb), .08) !important;
  --gin-color-primary-light-active: rgba(var(--livalos-blue-rgb), .14) !important;
  --gin-bg-app-rgb: 248, 250, 252 !important;
  --gin-bg-header: #f0f2ff !important;
  --gin-color-sticky-rgb: 248, 250, 252 !important;

  --gin-color-focus: rgba(var(--livalos-blue-rgb), .35) !important;

  --gin-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;

  --gin-color-title: var(--livalos-gray-900) !important;
  --gin-color-text: var(--livalos-gray-dark) !important;
  --gin-color-text-light: var(--livalos-gray) !important;

  --gin-bg-layer: var(--livalos-white) !important;
  --gin-bg-layer2: var(--livalos-gray-50) !important;
  --gin-bg-layer3: var(--livalos-white) !important;
  --gin-bg-layer4: var(--livalos-gray-200) !important;

  --gin-bg-item: rgba(var(--livalos-blue-rgb), .03) !important;
  --gin-bg-item-hover: rgba(var(--livalos-blue-rgb), .06) !important;

  --gin-border-color: var(--livalos-gray-200) !important;
  --gin-border-color-secondary: rgba(13, 26, 255, .06) !important;
  --gin-border-color-layer: rgba(13, 26, 255, .04) !important;
  --gin-border-color-layer2: var(--livalos-gray-200) !important;
  --gin-border-color-form-element: var(--livalos-gray-300) !important;
  --gin-border-color-table: var(--livalos-gray-200) !important;

  --gin-shadow-l1: var(--livalos-shadow-sm) !important;
  --gin-shadow-l2: var(--livalos-shadow-lg) !important;

  --gin-border-m: var(--livalos-radius-md) !important;
  --gin-border-l: var(--livalos-radius-lg) !important;
  --gin-border-xl: var(--livalos-radius-xl) !important;

  --button-border-radius-size: var(--livalos-radius-sm) !important;
}

/* ---------------------------------------------------------------------------
   3. GIN VARIABLE OVERRIDES — Dark mode
   The light block also matches [data-gin-accent] (e.g. <body>), so every
   variable it sets needs a dark value here, or the light one leaks through.
   --------------------------------------------------------------------------- */

html.gin--dark-mode,
.gin--dark-mode[data-gin-accent],
.gin--dark-mode [data-gin-accent] {
  --gin-color-primary-rgb: var(--livalos-blue-light-rgb) !important;
  --gin-color-primary: rgb(var(--livalos-blue-light-rgb)) !important;
  --gin-color-primary-hover: #6b78ff !important;
  --gin-color-primary-active: #8891ff !important;
  --gin-color-primary-light: rgba(var(--livalos-blue-light-rgb), .08) !important;
  --gin-color-primary-light-hover: rgba(var(--livalos-blue-light-rgb), .12) !important;
  --gin-color-primary-light-active: rgba(var(--livalos-blue-light-rgb), .18) !important;

  --gin-color-focus: rgba(var(--livalos-blue-light-rgb), .35) !important;

  --gin-color-title: var(--livalos-gray-50) !important;
  --gin-color-text: var(--livalos-gray-200) !important;
  --gin-color-text-light: var(--livalos-gray-400) !important;

  --gin-bg-app-rgb: 12, 12, 31 !important;
  --gin-bg-header: #0c0c1f !important;
  --gin-color-sticky-rgb: 12, 12, 31 !important;
  --gin-bg-layer: #141428 !important;
  --gin-bg-layer2: #1a1a35 !important;
  --gin-bg-layer3: #141428 !important;
  --gin-bg-layer4: #24244a !important;

  --gin-bg-item: rgba(var(--livalos-blue-light-rgb), .05) !important;
  --gin-bg-item-hover: rgba(var(--livalos-blue-light-rgb), .08) !important;

  --gin-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  --gin-border-m: var(--livalos-radius-md) !important;
  --gin-border-l: var(--livalos-radius-lg) !important;
  --gin-border-xl: var(--livalos-radius-xl) !important;

  --gin-border-color: rgba(66, 82, 255, .12) !important;
  --gin-border-color-secondary: rgba(66, 82, 255, .08) !important;
  --gin-border-color-layer: rgba(66, 82, 255, .06) !important;
  --gin-border-color-layer2: rgba(66, 82, 255, .2) !important;
  --gin-border-color-form-element: rgba(66, 82, 255, .2) !important;
  --gin-border-color-table: rgba(66, 82, 255, .12) !important;

  --gin-shadow-l1: 0 1px 2px rgba(0, 0, 0, .2), 0 3px 4px rgba(0, 0, 0, .15) !important;
  --gin-shadow-l2: 0 4px 8px rgba(0, 0, 0, .25), 0 20px 24px rgba(0, 0, 0, .3) !important;

  --button-border-radius-size: var(--livalos-radius-sm) !important;
}

/* ---------------------------------------------------------------------------
   4. TYPOGRAPHY
   --------------------------------------------------------------------------- */

.page-title {
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  font-size: 2rem !important;
  background: linear-gradient(135deg, var(--livalos-blue) 0%, var(--livalos-blue-light) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.gin--dark-mode .page-title {
  background: linear-gradient(135deg, #8891ff 0%, #b4baff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

h1, h2, h3, h4 {
  letter-spacing: -.02em !important;
  font-weight: 700 !important;
}

h2 {
  font-size: 1.4rem !important;
}

/* ---------------------------------------------------------------------------
   5. BUTTONS
   --------------------------------------------------------------------------- */

.button,
.action-link {
  border-radius: var(--livalos-radius-sm) !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  transition:
    all .2s cubic-bezier(.19, 1, .22, 1) !important;
}

/* Primary — big, bold, glowing */
.button--primary {
  background: linear-gradient(135deg, var(--livalos-blue) 0%, var(--livalos-blue-light) 100%) !important;
  border: none !important;
  box-shadow: var(--livalos-shadow-md) !important;
  color: white !important;
  padding: .65rem 1.5rem !important;
  font-size: .875rem !important;
  position: relative;
}

.button--primary:hover,
.button--primary:focus {
  box-shadow: var(--livalos-shadow-glow) !important;
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, var(--livalos-blue-dark) 0%, var(--livalos-blue) 100%) !important;
  color: white !important;
}

.button--primary:active {
  transform: translateY(0) scale(.98) !important;
  box-shadow: var(--livalos-shadow-sm) !important;
}

.button--primary:focus {
  box-shadow:
    0 0 0 3px rgba(var(--livalos-blue-rgb), .3),
    var(--livalos-shadow-glow) !important;
}

/* Secondary buttons */
.button:not(.button--primary):not(.button--danger) {
  border: 1.5px solid var(--livalos-gray-200) !important;
  background: var(--livalos-white) !important;
  color: var(--livalos-gray-dark) !important;
}

.button:not(.button--primary):not(.button--danger):hover {
  border-color: var(--livalos-blue-light) !important;
  color: var(--livalos-blue) !important;
  background: var(--livalos-blue-wash) !important;
  background-color: var(--livalos-blue-wash) !important;
  box-shadow: var(--livalos-shadow-md) !important;
  transform: translateY(-2px) !important;
}

.button:not(.button--primary):not(.button--danger):active {
  transform: translateY(0) !important;
}

/* Let Gin handle dropbutton internals */
.dropbutton .button {
  border: 0 none !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.dropbutton .button:hover {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 none !important;
  box-shadow: none !important;
  transform: none !important;
}

.gin--dark-mode .button:not(.button--primary):not(.button--danger) {
  border-color: rgba(66, 82, 255, .2) !important;
  background: rgba(66, 82, 255, .05) !important;
  color: #c7caff !important;
}

.gin--dark-mode .button:not(.button--primary):not(.button--danger):hover {
  border-color: rgba(66, 82, 255, .4) !important;
  background: rgba(66, 82, 255, .1) !important;
  background-color: rgba(66, 82, 255, .1) !important;
  color: white !important;
}

.gin--dark-mode .dropbutton .button,
.gin--dark-mode .dropbutton .button:hover {
  border: 0 none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Danger button */
.button--danger {
  border-radius: var(--livalos-radius-sm) !important;
}

/* Action links */
.action-link {
  font-weight: 600 !important;
}

.action-link:hover {
  transform: translateY(-1px) !important;
}

/* Dropbutton */
.dropbutton-wrapper {
  border-radius: var(--livalos-radius-sm) !important;
}

/* Slightly enlarge the extrasmall dropbutton primary-action area so the
 * rounded button outline lines up with the chevron toggle visually. Gin's
 * default container height is 1.75rem (28px); bump to 2rem (32px). The
 * dropdown panel (.dropbutton__items) is NOT a direct child of .dropbutton,
 * so the `>` selectors here don't reach into it — menu items keep gin's
 * defaults. Flex-center the inner anchor so the text stays vertically
 * centered inside the slightly-taller container. */
.dropbutton.dropbutton--extrasmall {
  min-height: 2rem !important;
}

.dropbutton.dropbutton--extrasmall > .dropbutton__item:first-of-type > a,
.dropbutton.dropbutton--extrasmall > .dropbutton__item:first-of-type > .button {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

/* Toggle: gin pins it at inset-block-start: 2px with a hardcoded
 * height: 2.75rem (44px), which overflows our 2rem (32px) container —
 * the chevron sits taller than the rounded border. Stretch it top-to-
 * bottom inside the container so the chevron pseudo-element (mask-
 * position: center) lands at the vertical middle of the button. */
.dropbutton.dropbutton--extrasmall .dropbutton__toggle {
  inset-block-start: 0 !important;
  inset-block-end: 0 !important;
  height: auto !important;
}

/* ---------------------------------------------------------------------------
   6. FORM ELEMENTS
   --------------------------------------------------------------------------- */

.form-element,
.form-autocomplete,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="tel"],
textarea,
select {
  border-radius: var(--livalos-radius-sm) !important;
  border: 1.5px solid var(--livalos-gray-300) !important;
  transition: all .2s cubic-bezier(.19, 1, .22, 1) !important;
  background: var(--livalos-white) !important;
}

/* Match the base rule's input types exactly. A bare `input` here also hits
   radios and checkboxes, whose checked fill IS a box-shadow in Gin — an
   !important shadow on :focus wipes the selection the moment you click. */
.form-element:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="url"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
textarea:hover,
select:hover {
  border-color: var(--livalos-blue-light) !important;
}

.form-element:focus,
.form-autocomplete:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  border-color: var(--livalos-blue) !important;
  box-shadow:
    0 0 0 4px rgba(var(--livalos-blue-rgb), .1),
    0 0 12px rgba(var(--livalos-blue-rgb), .06) !important;
  outline: none !important;
}

.gin--dark-mode .form-element,
.gin--dark-mode input[type="text"],
.gin--dark-mode input[type="email"],
.gin--dark-mode input[type="password"],
.gin--dark-mode textarea,
.gin--dark-mode select {
  background: rgba(66, 82, 255, .04) !important;
  border-color: rgba(66, 82, 255, .15) !important;
}

.gin--dark-mode .form-element:focus,
.gin--dark-mode input:focus,
.gin--dark-mode textarea:focus {
  border-color: var(--livalos-blue-light) !important;
  box-shadow:
    0 0 0 4px rgba(var(--livalos-blue-light-rgb), .12),
    0 0 16px rgba(var(--livalos-blue-light-rgb), .08) !important;
}

details {
  border-radius: var(--livalos-radius-md) !important;
  border: 1.5px solid var(--livalos-gray-200) !important;
  transition: border-color .2s ease !important;
}

details[open] {
  border-color: rgba(var(--livalos-blue-rgb), .15) !important;
  box-shadow: var(--livalos-shadow-sm) !important;
}

details summary {
  border-radius: var(--livalos-radius-md) !important;
  transition: all .15s ease !important;
  font-weight: 600 !important;
}

/* ---------------------------------------------------------------------------
   7. TABLES
   --------------------------------------------------------------------------- */

th {
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  font-size: .6875rem !important;
  color: var(--livalos-gray) !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.gin--dark-mode th {
  color: #8891ff !important;
}

tr {
  transition: all .15s ease !important;
}

tbody tr:hover {
  background-color: rgba(var(--livalos-blue-rgb), .03) !important;
}

.gin--dark-mode tbody tr:hover {
  background-color: rgba(var(--livalos-blue-light-rgb), .05) !important;
}

/* Striped effect */
tbody tr:nth-child(even) {
  background-color: rgba(var(--livalos-blue-rgb), .015);
}

.gin--dark-mode tbody tr:nth-child(even) {
  background-color: rgba(var(--livalos-blue-light-rgb), .02);
}

/* ---------------------------------------------------------------------------
   8. NAVIGATION SIDEBAR
   --------------------------------------------------------------------------- */

/* Issue #866: with all submenus collapsed the sidebar has only a little
   scrollable overflow; the moment it hits its end the wheel event chains to
   the page, which reads as "the menu doesn't scroll, only the page does".
   Contain scrolling to the sidebar while the pointer is over it. */
.admin-toolbar__scroll-wrapper {
  overscroll-behavior: contain !important;
}

.admin-toolbar .toolbar-link {
  border-radius: var(--livalos-radius-sm) !important;
  transition: all .15s cubic-bezier(.19, 1, .22, 1) !important;
}

.admin-toolbar .toolbar-link:hover {
  background: rgba(var(--livalos-blue-rgb), .06) !important;
}

.admin-toolbar .toolbar-link--active,
.admin-toolbar .toolbar-link.is-active {
  border-inline-start-color: var(--livalos-blue) !important;
  background: rgba(var(--livalos-blue-rgb), .06) !important;
  font-weight: 600 !important;
}

.gin--dark-mode .admin-toolbar .toolbar-link:hover {
  background: rgba(var(--livalos-blue-light-rgb), .08) !important;
}

.gin--dark-mode .admin-toolbar .toolbar-link--active,
.gin--dark-mode .admin-toolbar .toolbar-link.is-active {
  border-inline-start-color: var(--livalos-blue-light) !important;
  background: rgba(var(--livalos-blue-light-rgb), .08) !important;
}

/* Secondary toolbar */
.gin-secondary-toolbar {
  border-bottom: 2px solid transparent !important;
  border-image: linear-gradient(90deg, var(--livalos-blue), var(--livalos-blue-light), var(--livalos-cyan), transparent) 1 !important;
}

/* Breadcrumbs */
.gin-breadcrumb__link {
  transition: color .15s ease !important;
}

.gin-breadcrumb__link:hover {
  color: var(--livalos-blue) !important;
}

/* ---------------------------------------------------------------------------
   9. STICKY HEADER
   --------------------------------------------------------------------------- */

.region-sticky {
  backdrop-filter: blur(16px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(200%) !important;
}

html:not(.gin--dark-mode) .region-sticky {
  background: rgba(248, 250, 252, .75) !important;
  border-bottom: 1px solid rgba(var(--livalos-blue-rgb), .06) !important;
}

html.gin--dark-mode .region-sticky {
  background: rgba(12, 12, 31, .75) !important;
  border-bottom: 1px solid rgba(var(--livalos-blue-light-rgb), .08) !important;
}

/* ---------------------------------------------------------------------------
   10. STATUS MESSAGES
   --------------------------------------------------------------------------- */

.messages {
  border-radius: var(--livalos-radius-md) !important;
  box-shadow: var(--livalos-shadow-md) !important;
  border-left-width: 4px !important;
  backdrop-filter: blur(8px) !important;
  padding-block: var(--space-m) var(--space-m) !important;
}

.messages__header {
  margin-block-end: 0 !important;
}

.messages__header:has(.messages__title) {
  margin-block-end: var(--space-xs) !important;
}

.messages--status {
  border-left-color: #059669 !important;
  background: #ecfdf5 !important;
  color: #064e3b !important;
}

.messages--status a {
  color: #047857 !important;
}

.messages--warning {
  border-left-color: #d97706 !important;
  background: #fffbeb !important;
  color: #78350f !important;
}

.messages--warning a {
  color: #b45309 !important;
}

.messages--error {
  border-left-color: #dc2626 !important;
  background: #fef2f2 !important;
  color: #7f1d1d !important;
}

.messages--error a {
  color: #b91c1c !important;
}

.gin--dark-mode .messages--status {
  background: rgba(16, 185, 129, .1) !important;
  color: #6ee7b7 !important;
}

.gin--dark-mode .messages--warning {
  background: rgba(245, 158, 11, .1) !important;
  color: #fcd34d !important;
}

.gin--dark-mode .messages--error {
  background: rgba(239, 68, 68, .1) !important;
  color: #fca5a5 !important;
}

.messages--status .button--dismiss .icon-close {
  background-color: #064e3b !important;
}

.messages--warning .button--dismiss .icon-close {
  background-color: #78350f !important;
}

.messages--error .button--dismiss .icon-close {
  background-color: #7f1d1d !important;
}

.gin--dark-mode .messages--status .button--dismiss .icon-close {
  background-color: #6ee7b7 !important;
}

.gin--dark-mode .messages--warning .button--dismiss .icon-close {
  background-color: #fcd34d !important;
}

.gin--dark-mode .messages--error .button--dismiss .icon-close {
  background-color: #fca5a5 !important;
}

/* ---------------------------------------------------------------------------
   11. DIALOGS & MODALS
   --------------------------------------------------------------------------- */

.ui-dialog {
  border-radius: var(--livalos-radius-xl) !important;
  box-shadow: var(--livalos-shadow-xl) !important;
  border: 1px solid rgba(var(--livalos-blue-rgb), .08) !important;
  overflow: hidden !important;
}

.ui-dialog .ui-dialog-titlebar {
  border-radius: var(--livalos-radius-xl) var(--livalos-radius-xl) 0 0 !important;
  background: linear-gradient(135deg, rgba(var(--livalos-blue-rgb), .03), transparent) !important;
}

.ui-dialog .ui-dialog-title {
  color: var(--livalos-gray-900) !important;
}

.gin--dark-mode .ui-dialog .ui-dialog-title {
  color: var(--livalos-white) !important;
}

.ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick {
  background: var(--livalos-gray-900) !important;
}

.gin--dark-mode .ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick {
  background: var(--livalos-white) !important;
}

.gin--dark-mode .ui-dialog {
  border-color: rgba(var(--livalos-blue-light-rgb), .15) !important;
  box-shadow: var(--livalos-shadow-xl),
              0 0 60px rgba(var(--livalos-blue-light-rgb), .06) !important;
}

/* ---------------------------------------------------------------------------
   12. TABS
   --------------------------------------------------------------------------- */

.tabs__link {
  transition: all .15s ease !important;
  border-radius: var(--livalos-radius-sm) var(--livalos-radius-sm) 0 0 !important;
  font-weight: 500 !important;
}

.tabs__link:hover {
  background: rgba(var(--livalos-blue-rgb), .04) !important;
}

.tabs__tab.is-active .tabs__link,
.tabs__link.is-active {
  font-weight: 700 !important;
  color: var(--livalos-blue) !important;
}

.tabs__tab.is-active a::after,
.tabs__link.is-active::after {
  background: linear-gradient(90deg, var(--livalos-blue), var(--livalos-blue-light)) !important;
  height: 3px !important;
  border-radius: 3px 3px 0 0 !important;
}

.gin--dark-mode .tabs__tab.is-active .tabs__link,
.gin--dark-mode .tabs__link.is-active {
  color: var(--livalos-blue-light) !important;
}

/* ---------------------------------------------------------------------------
   13. VERTICAL TABS
   --------------------------------------------------------------------------- */

.vertical-tabs {
  border-radius: var(--livalos-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--livalos-shadow-sm) !important;
  border: 1.5px solid var(--livalos-gray-200) !important;
}

.vertical-tabs__menu-item.is-selected {
  border-left-color: var(--livalos-blue) !important;
  background: rgba(var(--livalos-blue-rgb), .04) !important;
}

.gin--dark-mode .vertical-tabs {
  border-color: rgba(66, 82, 255, .12) !important;
}

/* ---------------------------------------------------------------------------
   14. BADGES & LABELS
   --------------------------------------------------------------------------- */

.label {
  border-radius: 100px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  font-size: .6875rem !important;
  padding: .15rem .65rem !important;
}

/* ---------------------------------------------------------------------------
   15. LINKS
   --------------------------------------------------------------------------- */

a {
  transition: color .15s ease !important;
}

a:not(.button):not(.action-link):hover {
  color: var(--livalos-blue) !important;
}

/* Let Gin handle link colors inside dropbuttons. Scoped via .dropbutton__item
 * so the selector specificity (0,3,1) matches the broader a:hover rule above
 * — same specificity + later source order means this wins, even though the
 * inner <a> itself carries no classes (the .dropbutton__item class lives on
 * the parent <li>). Without this scope-bump the broad blue-on-hover rule
 * would force blue text onto gin's blue-background, making the dropbutton
 * primary action invisible. */
.dropbutton .dropbutton__item a:hover,
.dropbutton .dropbutton__item .button:hover {
  color: var(--gin-color-button-text) !important;
}

.gin--dark-mode a:not(.button):not(.action-link):hover {
  color: var(--livalos-blue-light) !important;
}

.gin--dark-mode .dropbutton .dropbutton__item a:hover,
.gin--dark-mode .dropbutton .dropbutton__item .button:hover {
  color: var(--gin-color-button-text) !important;
}

/* ---------------------------------------------------------------------------
   16. ADMIN CONTENT LIST — Card-like rows
   --------------------------------------------------------------------------- */

.views-table {
  border-collapse: separate !important;
  border-spacing: 0 4px !important;
}

.views-table tbody tr {
  background: var(--livalos-white) !important;
  box-shadow: var(--livalos-shadow-sm) !important;
  border-radius: var(--livalos-radius-sm) !important;
}

.views-table tbody tr:hover {
  box-shadow: var(--livalos-shadow-md) !important;
  background: var(--livalos-blue-wash) !important;
}

.views-table tbody tr td:first-child {
  border-radius: var(--livalos-radius-sm) 0 0 var(--livalos-radius-sm) !important;
}

.views-table tbody tr td:last-child {
  border-radius: 0 var(--livalos-radius-sm) var(--livalos-radius-sm) 0 !important;
}

.gin--dark-mode .views-table tbody tr {
  background: rgba(66, 82, 255, .04) !important;
}

.gin--dark-mode .views-table tbody tr:hover {
  background: rgba(66, 82, 255, .08) !important;
}

/* ---------------------------------------------------------------------------
   17. GIN LOGIN
   --------------------------------------------------------------------------- */

.gin-login-bg {
  background:
    radial-gradient(circle at 15% 50%, rgba(var(--livalos-cyan-rgb), .2) 0%, transparent 40%),
    radial-gradient(circle at 85% 30%, rgba(var(--livalos-blue-light-rgb), .2) 0%, transparent 35%),
    radial-gradient(circle at 50% 80%, rgba(var(--livalos-blue-rgb), .15) 0%, transparent 45%),
    linear-gradient(160deg, #020024 0%, #0a0a3a 30%, var(--livalos-blue-dark) 60%, var(--livalos-blue) 100%) !important;
  animation: loginBgShift 20s ease infinite alternate !important;
}

@keyframes loginBgShift {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(8deg); }
}

.gin-login .gin-login-form {
  border-radius: var(--livalos-radius-xl) !important;
  box-shadow: var(--livalos-shadow-xl) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(20px) !important;
}

.gin-login-form .button--primary,
.user-login-form .button--primary {
  background: linear-gradient(135deg, var(--livalos-blue) 0%, var(--livalos-blue-light) 100%) !important;
  border: none !important;
  border-radius: var(--livalos-radius-sm) !important;
  box-shadow: var(--livalos-shadow-md) !important;
  padding: .75rem 2rem !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}

.gin-login-form .button--primary:hover,
.user-login-form .button--primary:hover {
  box-shadow: var(--livalos-shadow-glow-lg) !important;
  transform: translateY(-2px) !important;
}

/* ---------------------------------------------------------------------------
   19. SCROLLBAR
   --------------------------------------------------------------------------- */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--livalos-blue-light), var(--livalos-blue));
  border-radius: 100px;
  opacity: .4;
}

::-webkit-scrollbar-thumb:hover {
  opacity: .7;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--livalos-blue-rgb), .3) transparent;
}

.gin--dark-mode * {
  scrollbar-color: rgba(var(--livalos-blue-light-rgb), .2) transparent;
}

/* ---------------------------------------------------------------------------
   20. SELECTION
   --------------------------------------------------------------------------- */

::selection {
  background: rgba(var(--livalos-blue-rgb), .15) !important;
  color: var(--livalos-blue-dark) !important;
}

.gin--dark-mode ::selection {
  background: rgba(var(--livalos-blue-light-rgb), .25) !important;
  color: white !important;
}

/* ---------------------------------------------------------------------------
   21. BRANDED WATERMARK
   --------------------------------------------------------------------------- */

.region-content::after {
  content: '';
  position: fixed;
  bottom: -10vw;
  right: -5vw;
  width: 40vw;
  height: 40vw;
  background: url(../assets/images/livalos-logo.svg) no-repeat center / contain;
  opacity: .06;
  pointer-events: none;
  z-index: 0;
}

.gin--dark-mode .region-content::after {
  opacity: .07;
  filter: brightness(3);
}

/* ---------------------------------------------------------------------------
   22. SMOOTH GLOBAL TRANSITIONS
   --------------------------------------------------------------------------- */

*,
*::before,
*::after {
  transition-timing-function: cubic-bezier(.19, 1, .22, 1);
}

/* ---------------------------------------------------------------------------
   24. STICKY LOCAL TASKS – DUOTONE SVG ICONS
   --------------------------------------------------------------------------- */

/* Normal state: light background, primary-colored strokes (via currentColor). */
.sticky-local-tasks__wrapper svg.nav-link__icon {
  background-color: var(--slt-icon-color, var(--gin-bg-layer2)) !important;
  color: var(--slt-icon-background, var(--gin-color-primary)) !important;
  box-sizing: border-box !important;
}

/* Hover state: blue background, white strokes. */
.sticky-local-tasks__wrapper .nav-item:hover svg.nav-link__icon {
  background-color: var(--slt-icon-background, var(--gin-color-primary)) !important;
  color: #fff !important;
}

/* ---------------------------------------------------------------------------
   25. DANSE NOTIFICATIONS — Navigation sidebar link
   --------------------------------------------------------------------------- */

/* Link styled as a navigation item */
a.danse-nav-notifications {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: var(--livalos-radius-sm) !important;
  color: var(--gin-color-text) !important;
  text-decoration: none !important;
  transition: background .15s cubic-bezier(.19, 1, .22, 1) !important;
  min-height: 36px !important;
  margin: var(--admin-toolbar-space-4, 4px) var(--admin-toolbar-space-8, 8px) !important;
  border-bottom: 1px solid var(--gin-border-color-secondary) !important;
  padding-bottom: 12px !important;
  margin-bottom: var(--admin-toolbar-space-4, 4px) !important;
}

a.danse-nav-notifications:hover {
  background: rgba(var(--livalos-blue-rgb), .06) !important;
  color: var(--gin-color-text) !important;
}

/* Icon */
.danse-nav-notifications__icon {
  flex-shrink: 0 !important;
  color: currentColor !important;
}

/* Label */
.danse-nav-notifications__label {
  font-size: .875rem !important;
  font-weight: 500 !important;
  flex-grow: 1 !important;
  white-space: nowrap !important;
}

/* Count badge pill */
.danse-nav-notifications__badge {
  min-width: 20px !important;
  padding: 1px 6px !important;
  background: var(--livalos-blue) !important;
  color: white !important;
  border-radius: 100px !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  line-height: 16px !important;
  text-align: center !important;
}

/* Collapsed sidebar — hide label, center icon */
html:not([data-admin-toolbar="expanded"]) a.danse-nav-notifications {
  justify-content: center !important;
  padding: 8px !important;
  position: relative !important;
}

html:not([data-admin-toolbar="expanded"]) .danse-nav-notifications__label {
  display: none !important;
}

html:not([data-admin-toolbar="expanded"]) .danse-nav-notifications__badge {
  position: absolute !important;
  top: 2px !important;
  right: 4px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  font-size: .6rem !important;
  line-height: 16px !important;
}

/* Dark mode */
.gin--dark-mode a.danse-nav-notifications {
  border-bottom-color: rgba(66, 82, 255, .08) !important;
}

.gin--dark-mode a.danse-nav-notifications:hover {
  background: rgba(var(--livalos-blue-light-rgb), .08) !important;
  color: var(--gin-color-text) !important;
}

.gin--dark-mode .danse-nav-notifications__badge {
  background: var(--livalos-blue-light) !important;
}

/* Media widget edit/remove buttons (#879). They are icon-only <input>s that
   carry .button, so the secondary-button rules above, which use the background
   shorthand with !important, also wipe Gin's pencil and cross icons and leave
   two blank white circles on every selected image. Put the icons back, also
   on hover and in dark mode. */
.media-library-item .media-library-item__edit.button.js-form-submit,
.media-library-item .media-library-item__edit.button.js-form-submit:hover,
.media-library-item .media-library-item__edit.button.js-form-submit:focus,
.media-library-item .media-library-item__remove.button.js-form-submit,
.media-library-item .media-library-item__remove.button.js-form-submit:hover,
.media-library-item .media-library-item__remove.button.js-form-submit:focus {
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: .75rem .75rem !important;
  transform: none !important;
}

.media-library-item .media-library-item__edit.button.js-form-submit,
.media-library-item .media-library-item__edit.button.js-form-submit:hover,
.media-library-item .media-library-item__edit.button.js-form-submit:focus {
  background-image: url("../../../../themes/contrib/gin/dist/media/sprite.svg#media-edit-view") !important;
}

.media-library-item .media-library-item__remove.button.js-form-submit,
.media-library-item .media-library-item__remove.button.js-form-submit:hover,
.media-library-item .media-library-item__remove.button.js-form-submit:focus {
  background-image: url("../../../../themes/contrib/gin/dist/media/sprite.svg#media-remove-view") !important;
}