/* Mint UI theme for TLG Downloader */

:root {
  /*
    Semantic palette proposal
    Primary — Azure 600 (#2563EB)
    Secondary — Emerald 500 base (#10B981) tuned to darker #047857 for AA contrast
    Neutral — Slate 950 (#0F172A)
  */
  --font-family-sans: "Ubuntu", "Inter", "Segoe UI", sans-serif;

  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-primary-press: #1E40AF;
  --on-primary: #FFFFFF;
  --color-primary-container: #E0EAFF;
  --on-primary-container: #102A61;

  --color-secondary: #047857;
  --color-secondary-hover: #065F46;
  --color-secondary-press: #064E3B;
  --color-secondary-contrast: #065F46;
  --on-secondary: #FFFFFF;
  --color-secondary-container: #D1FAE5;
  --on-secondary-container: #064E3B;

  --color-success: #15803D;
  --color-success-hover: #166534;
  --on-success: #FFFFFF;
  --color-success-container: #DCFCE7;
  --on-success-container: #14532D;

  --color-danger: #DC2626;
  --color-danger-hover: #B91C1C;
  --on-danger: #FFFFFF;
  --color-danger-container: #FEE2E2;
  --on-danger-container: #7F1D1D;

  --surface-background: #F8FAFC;
  --surface-container-low: #F1F5F9;
  --surface-container: #FFFFFF;
  --surface-container-high: #E2E8F0;
  --surface-elevated: #FFFFFF;
  --surface-backdrop: rgba(15, 23, 42, 0.6);
  --surface-inverse: #0F172A;

  --on-surface: #0F172A;
  --on-surface-variant: #1E293B;
  --on-surface-muted: #64748B;
  --text-primary: var(--on-surface);
  --accent-neutral: #334155;
  --text-secondary: var(--accent-neutral);
  --text-muted: var(--on-surface-muted);
  --text-inverse: #F8FAFC;

  --icon-muted: #64748B;

  --border-subtle: #E2E8F0;
  --border-strong: #CBD5E1;

  --focus-ring: rgba(37, 99, 235, 0.35);
  --focus-ring-strong: rgba(37, 99, 235, 0.5);

  --shadow-color-rgb: 15, 23, 42;
  --shadow-lg: 0 10px 25px rgba(var(--shadow-color-rgb), 0.15);
  --shadow-glow: 0 0 20px rgba(37, 99, 235, 0.3);

  --badge-neutral-bg: #E2E8F0;
  --badge-neutral-fg: #0F172A;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  --transition-duration-fast: 120ms;
  --transition-duration-base: 200ms;
  --transition-timing: cubic-bezier(0.2, 0, 0, 1);

  --font-size-display-lg: clamp(2.5rem, 2.1vw + 2.1rem, 3.25rem);
  --line-height-display-lg: 1.2;
  --font-weight-display: 600;

  --font-size-headline-md: clamp(2rem, 1.2vw + 1.6rem, 2.5rem);
  --line-height-headline-md: 1.28;
  --font-weight-headline: 600;

  --font-size-title-lg: 1.5rem;
  --line-height-title-lg: 1.3;
  --font-weight-title: 600;

  --font-size-title-md: 1.25rem;
  --line-height-title-md: 1.35;

  --font-size-body-lg: 1rem;
  --line-height-body-lg: 1.6;
  --font-size-body-md: 0.9375rem;
  --line-height-body-md: 1.55;
  --font-size-body-sm: 0.875rem;
  --line-height-body-sm: 1.5;

  --font-size-label-lg: 0.875rem;
  --font-size-label-sm: 0.75rem;
  --line-height-label: 1.3;
  --font-weight-label: 600;
  --letter-spacing-label: 0.04em;
}

html {
  color-scheme: light;
}

html[data-theme='dark'],
html[data-theme-resolved='dark'] {
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-primary-press: #1E3A8A;
  --on-primary: #FFFFFF;
  --color-primary-container: rgba(37, 99, 235, 0.2);
  --on-primary-container: #DCE8FF;

  --color-secondary: #10B981;
  --color-secondary-hover: #0CA678;
  --color-secondary-press: #0B8A61;
  --color-secondary-contrast: #34D399;
  --on-secondary: #06281B;
  --color-secondary-container: rgba(16, 185, 129, 0.22);
  --on-secondary-container: #D1FAE5;

  --color-success: #22C55E;
  --color-success-hover: #16A34A;
  --on-success: #052E16;
  --color-success-container: rgba(34, 197, 94, 0.22);
  --on-success-container: #ECFDF5;

  --color-danger: #F87171;
  --color-danger-hover: #EF4444;
  --on-danger: #450A0A;
  --color-danger-container: rgba(248, 113, 113, 0.22);
  --on-danger-container: #FEE2E2;

  --surface-background: #020817;
  --surface-container-low: #0B1220;
  --surface-container: #0F172A;
  --surface-container-high: #1E293B;
  --surface-elevated: #1F2937;
  --surface-backdrop: rgba(2, 8, 23, 0.7);
  --surface-inverse: #F8FAFC;

  --on-surface: #F1F5F9;
  --on-surface-variant: #CBD5F5;
  --on-surface-muted: #94A3B8;
  --text-primary: var(--on-surface);
  --accent-neutral: #C7D2FE;
  --text-secondary: var(--accent-neutral);
  --text-muted: var(--on-surface-muted);
  --text-inverse: #0F172A;

  --icon-muted: #94A3B8;

  --border-subtle: rgba(148, 163, 184, 0.4);
  --border-strong: rgba(148, 163, 184, 0.65);

  --focus-ring: rgba(96, 165, 250, 0.45);
  --focus-ring-strong: rgba(37, 99, 235, 0.6);

  --shadow-color-rgb: 2, 8, 23;

  --badge-neutral-bg: rgba(148, 163, 184, 0.22);
  --badge-neutral-fg: #E2E8F0;
}

html[data-theme='dark'],
html[data-theme-resolved='dark'] {
  color-scheme: dark;
}

html,
body {
  height: 100%;
}

body {
  background-color: var(--surface-background);
  color: var(--text-primary);
  font-family: var(--font-family-sans);
  font-size: 16px;
  line-height: var(--line-height-body-lg);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.app-body {
  background-color: var(--surface-background);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-sans);
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

h1 {
  font-size: var(--font-size-display-lg);
  line-height: var(--line-height-display-lg);
  font-weight: var(--font-weight-display);
}

h2 {
  font-size: var(--font-size-headline-md);
  line-height: var(--line-height-headline-md);
  font-weight: var(--font-weight-headline);
}

h3 {
  font-size: var(--font-size-title-lg);
  line-height: var(--line-height-title-lg);
  font-weight: var(--font-weight-title);
}

h4 {
  font-size: var(--font-size-title-md);
  line-height: var(--line-height-title-md);
  font-weight: var(--font-weight-title);
}

h5 {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-lg);
  font-weight: 600;
}

.license-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
}

.license-progress-chart {
  width: min(220px, 100%);
  aspect-ratio: 1 / 1;
}

.license-progress-chart canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.license-progress-text {
  color: var(--text-muted);
  font-size: var(--font-size-body-sm);
  text-align: center;
}

.license-progress--no-limit {
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
}

.license-progress--no-limit .license-progress-text {
  text-align: left;
  width: 100%;
}

h6 {
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-sm);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.text-display-lg {
  font-size: var(--font-size-display-lg);
  line-height: var(--line-height-display-lg);
  font-weight: var(--font-weight-display);
}

.text-headline-md {
  font-size: var(--font-size-headline-md);
  line-height: var(--line-height-headline-md);
  font-weight: var(--font-weight-headline);
}

.text-title-lg {
  font-size: var(--font-size-title-lg);
  line-height: var(--line-height-title-lg);
  font-weight: var(--font-weight-title);
}

.text-title-md {
  font-size: var(--font-size-title-md);
  line-height: var(--line-height-title-md);
  font-weight: var(--font-weight-title);
}

.text-body-lg {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-lg);
  font-weight: 400;
}

.text-body-md {
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body-md);
  font-weight: 400;
}

.text-body-sm {
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-sm);
  font-weight: 400;
}

.text-label-lg {
  font-size: var(--font-size-label-lg);
  line-height: var(--line-height-label);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

.text-label-sm {
  font-size: var(--font-size-label-sm);
  line-height: var(--line-height-label);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

p {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-lg);
}

.container-xxl {
  max-width: 1200px;
}

/* Header */
.app-header {
  background: var(--surface-container-high);
  border-bottom: 1px solid var(--border-strong);
  box-shadow: 0 2px 4px rgba(var(--shadow-color-rgb), 0.08);
}

.navbar {
  background: var(--surface-container-high);
  color: var(--text-primary);
  font-family: var(--font-family-sans);
  padding: .75rem 0;
  box-shadow: none;
}

.navbar .navbar-brand {
  color: var(--text-primary);
  font-weight: 600;
}

.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
  color: var(--color-primary);
}

.navbar .navbar-toggler {
  border-color: var(--border-strong);
  border-radius: var(--radius-sm);
}

.navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 .15rem var(--focus-ring);
}

.app-header .navbar-nav {
  gap: .75rem;
}

.app-header .navbar-nav .nav-item {
  width: 100%;
}

@media (min-width: 992px) {
  .app-header .navbar-nav .nav-item {
    width: auto;
  }
}

.app-header .navbar-nav .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: var(--font-weight-label);
  border-radius: var(--radius-lg);
  padding: .5rem 1rem;
  transition: transform var(--transition-duration-fast) ease-in-out;
}

.app-header .navbar-nav .btn .bi {
  font-size: 1.1rem;
}

.app-header .navbar-nav .btn:active {
  transform: scale(.98);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--text-secondary);
  background: var(--surface-container);
  border: 1px solid var(--border-subtle);
  transition: background-color var(--transition-duration-base) var(--transition-timing),
    color var(--transition-duration-base) var(--transition-timing);
}

.btn-icon:hover,
.btn-icon:focus-visible {
  background: var(--surface-container-low);
  color: var(--text-primary);
}

.btn-icon .bi {
  font-size: 1.1rem;
}

#activeJobBanner {
  width: 100%;
}

@media (min-width: 992px) {
  #activeJobBanner {
    width: auto;
  }
}

/* Utilities */
.bg-surface {
  background: var(--surface-container) !important;
}

.text-secondary {
  color: var(--text-secondary) !important;
}

/* Cards */
.card {
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 4px rgba(var(--shadow-color-rgb), 0.06);
  color: var(--text-primary);
}

.card-body {
  padding: 1rem;
}

.card-title {
  font-size: var(--font-size-title-md);
  font-weight: var(--font-weight-title);
  margin-bottom: .75rem;
}

/* Glassmorphism Card */
.card-glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(var(--shadow-color-rgb), 0.12);
}

html[data-theme='dark'] .card-glass {
  background: rgba(31, 41, 55, 0.85);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Gradient Text Effect */
.gradient-text {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Entrance Animations */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-scale-in {
  animation: scaleIn 0.35s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.animate-fade-in {
  animation: fadeIn 0.4s ease-out both;
}

/* Badges */
.badge {
  display: inline-block;
  padding: .35em .6em;
  border-radius: 999px;
  font-size: var(--font-size-label-sm);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--letter-spacing-label);
  background: var(--badge-neutral-bg);
  color: var(--badge-neutral-fg);
}

.badge-success {
  background: var(--color-success);
  color: var(--on-success);
}

.badge-danger {
  background: var(--color-danger);
  color: var(--on-danger);
}

.badge-accent {
  background: var(--color-secondary);
  color: var(--on-secondary);
}

/* Chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-container-low);
  color: var(--text-secondary);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-sm);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}

.chip .bi {
  font-size: 1rem;
}

.chip-neutral {
  background: var(--surface-container-low);
  color: var(--text-secondary);
  border-color: var(--border-subtle);
}

.chip-accent {
  background: var(--color-primary-container);
  border-color: transparent;
  color: var(--on-primary-container);
}

.inline-feedback {
  font-size: var(--font-size-body-sm);
  margin-top: .35rem;
  color: var(--color-danger);
}

.download-summary {
  background: var(--surface-container);
  border-color: var(--border-subtle);
}

.download-summary .fw-bold {
  font-size: var(--font-size-body-md);
}

.material-progress {
  height: 6px;
  border-radius: 999px;
  background-color: var(--surface-container-high);
  overflow: hidden;
}

.material-progress .progress-bar {
  background-color: var(--color-primary);
  transition: width var(--transition-duration-base) var(--transition-timing);
  box-shadow: none;
}

.job-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--border-subtle);
}

.timeline-item {
  position: relative;
}

.timeline-marker {
  position: absolute;
  left: -0.7rem;
  top: .35rem;
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  background: var(--border-subtle);
  border: 2px solid var(--surface-elevated);
  transition: background var(--transition-duration-base) var(--transition-timing), box-shadow var(--transition-duration-base) var(--transition-timing);
}

.timeline-item--complete .timeline-marker {
  background: var(--color-secondary);
}

.timeline-item--active .timeline-marker {
  background: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

.timeline-item--error .timeline-marker {
  background: var(--color-danger);
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.18);
}

.timeline-title {
  font-weight: 600;
}

.timeline-meta {
  font-size: var(--font-size-body-sm);
  color: var(--text-muted);
}

.job-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.job-quick-action {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-container-low);
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--transition-duration-base) var(--transition-timing), color var(--transition-duration-base) var(--transition-timing);
}

.job-quick-action:hover {
  background: var(--color-primary-container);
  color: var(--on-primary-container);
  text-decoration: none;
}

.job-quick-action.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}

.job-quick-action i {
  font-size: 1rem;
}

.ant-feedback {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .75rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  border-left-width: 4px;
  background: var(--surface-container-low);
  font-size: var(--font-size-body-sm);
}

.ant-feedback i {
  font-size: 1rem;
  margin-top: .15rem;
}

.ant-feedback--warning {
  border-color: #FFE58F;
  border-left-color: #D48806;
  background: #FFFBE6;
  color: #92400E;
}

.ant-feedback--error {
  border-color: #FFCCC7;
  border-left-color: #D4380D;
  background: #FFF2F0;
  color: #A8071A;
}

.ant-feedback--info {
  border-color: var(--color-primary-container);
  border-left-color: var(--color-primary);
  background: var(--color-primary-container);
  color: var(--on-primary-container);
}

#activeJobBanner[data-alert-level="warning"] {
  background-color: #F59E0B;
  border-color: #F59E0B;
  color: #0F172A;
}

#activeJobBanner[data-alert-level="danger"] {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--on-danger);
}

.banner-alert {
  display: inline-flex;
  align-items: center;
  padding: .1rem .5rem;
  border-radius: 999px;
  font-size: var(--font-size-label-sm);
  margin-left: .4rem;
}

.banner-alert--warning {
  background: #FFF4E5;
  color: #92400E;
}

.banner-alert--danger {
  background: #FEE2E2;
  color: #991B1B;
}

.banner-alert--info {
  background: var(--color-primary-container);
  color: var(--on-primary-container);
}

/* Dark mode feedback overrides */
html[data-theme='dark'] .ant-feedback--warning {
  background: rgba(251, 146, 60, 0.15);
  border-color: rgba(251, 146, 60, 0.4);
  border-left-color: #FB923C;
  color: #FCD34D;
}

html[data-theme='dark'] .ant-feedback--error {
  background: rgba(248, 113, 113, 0.15);
  border-color: rgba(248, 113, 113, 0.4);
  border-left-color: #F87171;
  color: #FCA5A5;
}

html[data-theme='dark'] .banner-alert--warning {
  background: rgba(245, 158, 11, 0.2);
  color: #FCD34D;
}

html[data-theme='dark'] .banner-alert--danger {
  background: rgba(248, 113, 113, 0.2);
  color: #FCA5A5;
}

.chip-positive {
  background: var(--color-secondary-container);
  border-color: transparent;
  color: var(--on-secondary-container);
}

.chip-info {
  background: var(--color-primary-container);
  border-color: transparent;
  color: var(--on-primary-container);
}

.chip-warning {
  background: #FFF4E5;
  color: #92400E;
  border-color: #F59E0B;
}

.chip-danger {
  background: #FEE2E2;
  color: #991B1B;
  border-color: #FCA5A5;
}

/* Lists */
.list-group-item {
  background: var(--surface-container);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

/* Dialog lists scroll */
.dialogs-scroll-desktop {
  max-height: 60vh;
  overflow: auto;
}

.dialogs-scroll-mobile {
  max-height: 70vh;
  overflow: auto;
}

/* Inputs */
.form-control,
.form-select {
  background: var(--surface-container);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: .375rem .5rem;
  box-shadow: none;
  transition: border-color var(--transition-duration-fast) var(--transition-timing),
    box-shadow var(--transition-duration-fast) var(--transition-timing);
}

.form-control::placeholder,
.form-select::placeholder {
  color: var(--text-muted);
}

.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 .25rem var(--focus-ring);
}

.input-group-text {
  background: var(--surface-container);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
}

/* Buttons */
.btn {
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-label);
  font-size: var(--font-size-label-lg);
  line-height: var(--line-height-label);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  border-width: 1px;
  transition: background-color var(--transition-duration-base) var(--transition-timing),
    color var(--transition-duration-base) var(--transition-timing),
    border-color var(--transition-duration-base) var(--transition-timing),
    box-shadow var(--transition-duration-fast) var(--transition-timing);
}

.btn:focus-visible {
  box-shadow: 0 0 0 .25rem var(--focus-ring-strong);
}

.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--on-primary);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn-primary:active {
  background: var(--color-primary-press);
  border-color: var(--color-primary-press);
}

.btn-accent {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--on-secondary);
}

.btn-accent:hover {
  background: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
}

.btn-accent:active {
  background: var(--color-secondary-press);
  border-color: var(--color-secondary-press);
}

.btn-outline-secondary {
  color: var(--color-secondary-contrast);
  border-color: var(--color-secondary-contrast);
  background: transparent;
}

.btn-outline-secondary:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--on-secondary);
}

.btn-outline-danger {
  color: var(--color-danger);
  border-color: var(--color-danger);
  background: transparent;
}

.btn-outline-danger:hover {
  background: var(--color-danger);
  color: var(--on-danger);
  border-color: var(--color-danger);
}

/* Tabs */
.nav-pills .nav-link {
  border-radius: var(--radius-md);
  background: var(--surface-container);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  transition: background-color var(--transition-duration-base) var(--transition-timing),
    color var(--transition-duration-base) var(--transition-timing),
    border-color var(--transition-duration-base) var(--transition-timing);
}

.nav-pills .nav-link:hover {
  background: var(--surface-container-low);
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  background: var(--color-primary);
  color: var(--on-primary);
  border-color: var(--color-primary);
}

/* Progress */
.progress {
  height: 18px;
  background: var(--surface-container);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 2px rgba(var(--shadow-color-rgb), .12);
}

.progress-bar {
  background: var(--color-primary);
}

/* Offcanvas & Modals */
.offcanvas,
.modal-content {
  background: var(--surface-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 8px rgba(var(--shadow-color-rgb), 0.1);
}

.modal-header,
.modal-footer {
  border-color: var(--border-subtle);
}

.btn-close {
  filter: none;
  opacity: 1;
}

/* Dropdown menu */
.dropdown-toggle {
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  background: var(--surface-container) !important;
  color: var(--text-primary) !important;
}

.dropdown-menu {
  background: var(--surface-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 8px rgba(var(--shadow-color-rgb), 0.12);
  padding: .5rem 0;
}

.dropdown-item {
  color: var(--text-primary);
  transition: background-color var(--transition-duration-fast) var(--transition-timing),
    color var(--transition-duration-fast) var(--transition-timing);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--color-primary-container);
  color: var(--on-primary-container);
}

.dropdown-divider {
  border-top: 1px solid var(--border-subtle);
}

/* Tables */
.table-responsive {
  max-height: 50vh;
  overflow-y: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-container);
  box-shadow: 0 2px 4px rgba(var(--shadow-color-rgb), 0.08);
}

.w95-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-container);
}

.w95-table th,
.w95-table td {
  padding: 6px 8px;
  border: 1px solid var(--border-subtle);
}

.w95-table thead th {
  background: var(--surface-container-low);
  position: sticky;
  top: 0;
  z-index: 1;
}

.w95-table tbody tr:hover {
  background: var(--surface-container-low);
}

.files-wrap {
  max-height: 30vh;
}

.w95-table .thumb {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border: 1px solid var(--border-subtle);
  background: #000;
}

.w95-table .icon {
  width: 64px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-subtle);
  background: #e8ddc7;
  font-weight: 700;
}

/* Preview modal */
#previewModal {
  --pv-h: 86vh;
}

#previewModal .modal-dialog {
  width: auto;
  max-width: min(96vw, 1200px);
}

#previewModal .modal-content {
  height: var(--pv-h);
  display: flex;
  flex-direction: column;
}

#previewModal .modal-header,
#previewModal .modal-footer {
  flex: 0 0 auto;
}

#previewModal .modal-body {
  flex: 1 1 auto;
  overflow: auto;
  display: grid;
  place-items: center;
  padding: 0.75rem;
}

#previewContent {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

#previewContent img,
#previewContent video {
  max-width: 100%;
  max-height: calc(var(--pv-h) - 120px);
  width: auto;
  height: auto;
  object-fit: contain;
  background: #000;
}

@media (max-width: 576px) {
  #previewModal {
    --pv-h: 88vh;
  }
}

/* Layout tweaks */
#chatInfo {
  display: inline-block;
  max-width: 46ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#leftPanel {
  margin-bottom: 1.5rem;
  display: none;
}

.left-panel-backdrop {
  display: none;
}

@media (min-width: 992px) {
  #app .row.g-4.align-items-start {
    position: relative;
  }

  #leftPanel {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition-duration-base) var(--transition-timing), opacity var(--transition-duration-base) var(--transition-timing);
  }

  .left-panel-open #leftPanel,
  .left-panel-open #leftPanel.is-open {
    position: absolute;
    z-index: 2;
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  #app main.col-lg-8.col-xl-9 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .left-panel-backdrop {
    position: absolute;
    inset: 0;
    display: block;
    background: var(--surface-backdrop);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-duration-base) var(--transition-timing);
    z-index: 1;
  }

  .left-panel-open .left-panel-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}

.left-panel-rail {
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 24px rgba(var(--shadow-color-rgb), 0.08);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
}

.left-panel-header {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.left-panel-eyebrow {
  color: var(--text-muted);
}

.left-panel-title {
  margin: 0;
}

.left-panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.left-panel-subtitle {
  margin: 0;
  color: var(--text-muted);
}

.left-panel-actions {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.btn-rail {
  width: 100%;
  justify-content: center;
  gap: .5rem;
  border-radius: 999px;
  padding: .75rem 1.25rem;
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--font-size-body-md);
  box-shadow: 0 4px 12px rgba(var(--shadow-color-rgb), 0.12);
}

.btn-rail .bi {
  font-size: 1.2rem;
}

.left-panel-shortcut {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--text-muted);
}

.left-panel-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: .25rem .5rem;
  border-radius: var(--radius-sm);
  background: var(--surface-container);
  border: 1px solid var(--border-subtle);
  font-size: var(--font-size-label-sm);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  box-shadow: inset 0 -1px 0 rgba(var(--shadow-color-rgb), 0.1);
}

.left-panel-section {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.left-panel-section-title {
  margin: 0;
  color: var(--text-secondary);
}

.left-panel-dialogs {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

#dialogsPanelDesktop .dialogs-search {
  margin-bottom: .75rem !important;
}

#dialogsPanelDesktop .dialogs-tabs {
  margin-bottom: .75rem !important;
}

.left-panel-dialogs .dialogs-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.left-panel-dialogs .dialog-item {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  padding: .75rem;
  background: transparent;
  transition: background-color var(--transition-duration-base) var(--transition-timing),
    border-color var(--transition-duration-base) var(--transition-timing);
  margin-bottom: 0 !important;
}

.left-panel-dialogs .dialog-item:hover,
.left-panel-dialogs .dialog-item:focus-within {
  background: var(--surface-container-low);
  border-color: var(--border-subtle);
}

.chat-selection-info h3 {
  margin: 0;
}

.btn-select-chat {
  text-transform: none;
  letter-spacing: normal;
  gap: .5rem;
}

.btn-select-chat .bi {
  font-size: 1.1rem;
}

@media (max-width: 576px) {
  .btn-select-chat {
    width: 100%;
    justify-content: center;
  }
}

.chat-modal-list {
  max-height: min(60vh, 480px);
  overflow: auto;
  padding-right: .5rem;
}

.chat-modal-list .dialog-item {
  margin-bottom: 1rem !important;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

.chat-modal-list .dialog-item:last-child {
  margin-bottom: 0 !important;
  border-bottom: none;
  padding-bottom: 0;
}

@media (min-width: 992px) {
  .left-panel-rail {
    position: sticky;
    top: 6rem;
    max-height: calc(100vh - 6rem);
    overflow: auto;
    scrollbar-gutter: stable both-edges;
  }
}

#jobBox .badge {
  margin-right: 6px;
}

#jobBox .form-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 4px 0;
  flex-wrap: wrap;
}

#jobBox .form-row>label {
  flex: 1 1 120px;
  font-weight: 700;
}

@media (max-width: 576px) {
  #jobBox .form-row {
    flex-direction: column;
    align-items: stretch;
  }

  #jobBox .form-row>label {
    flex: 1 1 auto;
  }
}

.group-range .form-control {
  max-width: 220px;
}

.group-range .btn {
  padding: 2px 8px;
}

.group-actions {
  text-align: left;
  max-width: 100%;
}

.group-stack>.group+.group {
  margin-top: 1rem;
}

/* Option card selector */
.content-type-option,
.storage-option,
.forward-option {
  position: relative;
}

.content-type-option input[type=checkbox],
.storage-option input[type=checkbox],
.forward-option input[type=checkbox] {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  border: 0;
  outline: none;
}

.content-type-option label,
.storage-option label,
.forward-option label {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-container);
  cursor: pointer;
  transition: background var(--transition-duration-base) var(--transition-timing),
    border-color var(--transition-duration-base) var(--transition-timing),
    color var(--transition-duration-base) var(--transition-timing),
    box-shadow var(--transition-duration-fast) var(--transition-timing);
}

.content-type-option label::before,
.storage-option label::before,
.forward-option label::before {
  content: '';
  flex: 0 0 1rem;
  height: 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  color: #fff;
  background: transparent;
  transition: background-color var(--transition-duration-fast) var(--transition-timing),
    border-color var(--transition-duration-fast) var(--transition-timing),
    color var(--transition-duration-fast) var(--transition-timing);
}

.content-type-option .bi,
.storage-option .bi,
.forward-option .bi {
  font-size: 1.25rem;
  color: var(--icon-muted);
}

.content-type-option input[type=checkbox]:focus-visible+label,
.storage-option input[type=checkbox]:focus-visible+label,
.forward-option input[type=checkbox]:focus-visible+label {
  outline: 3px solid var(--focus-ring-strong);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--focus-ring);
}

.content-type-option input[type=checkbox]:checked+label,
.storage-option input[type=checkbox]:checked+label,
.forward-option input[type=checkbox]:checked+label {
  background: var(--color-primary-container);
  border-color: var(--color-primary);
  color: var(--on-primary-container);
}

.content-type-option input[type=checkbox]:checked+label::before,
.storage-option input[type=checkbox]:checked+label::before,
.forward-option input[type=checkbox]:checked+label::before {
  content: '\2713';
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.content-type-option input[type=checkbox]:checked+label .bi,
.storage-option input[type=checkbox]:checked+label .bi,
.forward-option input[type=checkbox]:checked+label .bi {
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {

  .content-type-option label,
  .storage-option label,
  .forward-option label,
  .content-type-option label::before,
  .storage-option label::before,
  .forward-option label::before {
    transition: none;
  }
}

/* Utilities */
.mt-3 {
  margin-top: 1rem !important;
}

.gap-2 {
  gap: .5rem !important;
}

#topicHint {
  display: none;
}