/* Premium UI overrides loaded after the historical stylesheet. */

body {
  background:
    radial-gradient(circle at 50% -12%, rgba(214, 168, 70, 0.075), transparent 31%),
    linear-gradient(180deg, #000 0%, #010101 46%, #000 100%) !important;
}

body::before {
  opacity: 0.34 !important;
  background-image:
    linear-gradient(rgba(214, 168, 70, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214, 168, 70, 0.018) 1px, transparent 1px) !important;
}

body:not([data-role="client"]) [data-client-only],
body[data-role="admin"] [data-client-only] {
  display: none !important;
}

body[data-role="client"] [data-admin-only] {
  display: none !important;
}

@media (min-width: 901px) {
  .quick-nav-shell,
  .is-sidebar-collapsed .quick-nav-shell {
    width: 230px !important;
    padding: 14px !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    background: #000 !important;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.72) !important;
  }

  .app,
  .is-sidebar-collapsed .app {
    width: min(1320px, calc(100% - 304px)) !important;
    margin-left: 274px !important;
    margin-right: 24px !important;
  }

  .sidebar-brand,
  .is-sidebar-collapsed .sidebar-brand {
    display: block !important;
    padding-bottom: 16px !important;
    margin-bottom: 12px !important;
    background: #000 !important;
  }

  .sidebar-brand-image {
    display: block;
    width: min(100%, 226px);
    height: auto;
    margin: -8px auto -2px;
    border: 0;
    object-fit: contain;
    filter: drop-shadow(0 10px 22px rgba(214, 168, 70, 0.1));
  }

  .quick-nav {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    gap: 5px !important;
    padding-right: 3px !important;
    scrollbar-width: none !important;
  }

  .quick-nav::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  .quick-nav a,
  .is-sidebar-collapsed .quick-nav a {
    min-height: 36px !important;
    padding: 5px 7px !important;
    font-size: 0.72rem !important;
    line-height: 1.1 !important;
  }

  .quick-nav a::before,
  .is-sidebar-collapsed .quick-nav a::before {
    flex-basis: 24px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 7px !important;
    font-size: 0.78rem !important;
  }

  .logout-link {
    min-height: 34px !important;
    padding: 7px 10px !important;
    font-size: 0.72rem !important;
  }
}

.calendar-panel {
  overflow: hidden !important;
}

.calendar-panel .section-title {
  min-width: 0 !important;
}

.calendar-panel .section-title > div {
  min-width: 0 !important;
}

#refreshCalendarButton {
  flex: 0 0 auto !important;
  max-width: 180px !important;
  white-space: nowrap !important;
}

.calendar-filters {
  grid-template-columns: minmax(150px, 0.62fr) minmax(280px, 1.35fr) minmax(220px, 0.92fr) minmax(180px, 0.78fr) !important;
  max-width: 100% !important;
}

.calendar-filter-group,
.calendar-filters .control-group {
  min-width: 0 !important;
  max-width: 100% !important;
}

.calendar-filters input,
.calendar-filters select {
  width: 100% !important;
  min-width: 0 !important;
}

.calendar-check-grid.pairs {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.calendar-check {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  min-height: 28px !important;
  padding: 5px 7px !important;
  font-size: 0.68rem !important;
}

.calendar-check input {
  flex: 0 0 13px !important;
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  min-height: 13px !important;
  max-width: 13px !important;
  max-height: 13px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

.calendar-check span {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: inherit !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.calendar-status,
.calendar-list,
.calendar-event {
  max-width: 100% !important;
}

@media (max-width: 1280px) {
  .calendar-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  .calendar-panel .section-title {
    align-items: stretch !important;
  }

  #refreshCalendarButton {
    max-width: none !important;
    width: 100% !important;
  }

  .calendar-filters {
    grid-template-columns: 1fr !important;
  }
}

.scanner-guide-panel {
  display: grid;
  gap: 18px;
}

.scanner-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.scanner-flow-card {
  position: relative;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(214, 168, 70, 0.22);
  border-radius: 10px;
  background:
    radial-gradient(circle at 18% 0%, rgba(214, 168, 70, 0.14), transparent 34%),
    rgba(7, 7, 7, 0.88);
}

.scanner-flow-card::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -12px;
  width: 12px;
  height: 1px;
  background: linear-gradient(90deg, rgba(214, 168, 70, 0.48), transparent);
}

.scanner-flow-card:nth-child(3n)::after,
.scanner-flow-card:last-child::after {
  display: none;
}

.scanner-flow-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  border: 1px solid rgba(214, 168, 70, 0.42);
  border-radius: 10px;
  color: #060504;
  background: linear-gradient(135deg, #e2b648, #b87f24);
  font-size: 0.78rem;
  font-weight: 950;
}

.scanner-flow-card strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 1rem;
}

.scanner-flow-card p,
.scanner-flow-summary p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.scanner-flow-summary {
  padding: 16px;
  border: 1px solid rgba(214, 168, 70, 0.24);
  border-radius: 10px;
  background: rgba(214, 168, 70, 0.08);
}

.scanner-flow-summary strong {
  display: block;
  margin-bottom: 8px;
  color: var(--gold);
}

@media (max-width: 1000px) {
  .scanner-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scanner-flow-card::after {
    display: none;
  }
}

/* Mobile polish pass */
@media (max-width: 900px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .app {
    width: min(100% - 16px, 430px) !important;
    padding-bottom: 92px !important;
  }

  .header,
  .controls,
  .market-strip,
  .bias-panel,
  .settings-panel,
  .system-panel,
  .top-section,
  .table-card,
  .logs-panel,
  .book-panel,
  .calendar-panel,
  .clients-panel {
    max-width: 100% !important;
  }

  .quick-nav-shell {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    z-index: 100 !important;
    max-width: calc(100vw - 16px) !important;
  }

  .quick-nav-toggle {
    min-height: 38px !important;
    padding: 8px 14px !important;
    font-size: 0.82rem !important;
  }

  .is-quick-nav-open .quick-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 58px !important;
    width: auto !important;
    min-width: 0 !important;
    max-height: min(46vh, 360px) !important;
    padding: 7px !important;
    gap: 5px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    transform: none !important;
  }

  .is-quick-nav-open .quick-nav::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  .quick-nav a {
    min-height: 34px !important;
    padding: 5px 7px !important;
    font-size: 0.68rem !important;
    line-height: 1.08 !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 6px !important;
  }

  .quick-nav a::before {
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 0.66rem !important;
  }

  .logout-link,
  .quick-nav-shell .logout-link,
  .is-quick-nav-open .logout-link {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .section-title,
  .table-title,
  .calendar-panel .section-title {
    gap: 10px !important;
    align-items: flex-start !important;
  }

  .calendar-filters {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .calendar-check-grid.compact,
  #calendarCurrencyChecks {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .calendar-check-grid.pairs {
    grid-template-columns: 1fr !important;
    max-height: 220px !important;
  }

  .logs-table-wrap,
  .pair-stats-block,
  .book-frame,
  .table-scroll {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  .pair-stats-table,
  .logs-table {
    min-width: 560px !important;
  }

  .scanner-flow {
    grid-template-columns: 1fr !important;
  }

  .scanner-flow-card {
    padding: 14px !important;
  }
}