/*
 * P5.3 UX Polish — Apple-like refinements
 * Wi-Fi section redesign + cross-form consistency + nav/modal polish
 * CSS-only, no logic changes.
 */

/* ─── Design tokens ─────────────────────────────────────────── */
:root {
  --ux-radius-tab:   14px;
  --ux-radius-form:  26px;
  --ux-tab-h:        42px;
  --ux-field-gap:    18px;
  --ux-section-gap:  22px;
  --ux-card-pad:     clamp(16px, 4.5vw, 24px);
}

/* ─── TYPOGRAPHY – tighter/crisper ─────────────────────────── */
.section-title {
  font-size: clamp(22px, 6vw, 32px);
  letter-spacing: -0.055em;
  line-height: 1.0;
}

.section-note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  font-weight: 550;
}

/* ─── FORM GRID – unified across all forms ──────────────────── */
.form-grid {
  gap: var(--ux-field-gap);
}

.form-group {
  gap: 8px;
}

label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Remove label:: content trick that adds " *" to email labels –
   already visible in placeholder; keeps UI less cluttered */
label[for="securityEmail"]::after,
label[for="wifiProblemEmail"]::after,
label[for="wifiNewEmail"]::after,
label[for="graffitiEmail"]::after,
label[for="argusEmail"]::after,
label[for="appointmentEmail"]::after {
  content: ""; /* remove the auto-asterisk; email is shown optional in placeholder */
}

.form-input,
.form-select,
.form-textarea {
  border-radius: 16px;
  min-height: 50px;
  font-size: 15px;
  font-weight: 500;
  padding: 0 16px;
  letter-spacing: -0.01em;
}

.form-textarea {
  padding: 14px 16px;
  min-height: 128px;
  line-height: 1.5;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: rgba(10, 132, 255, .7);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, .16),
              inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* ─── BUTTONS – unified style ───────────────────────────────── */
.btn {
  height: 50px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.btn-compact {
  height: 42px;
  border-radius: 13px;
  font-size: 12px;
}

.btn-primary {
  background:
    radial-gradient(circle at 32% 12%, rgba(255,255,255,.20), transparent 30%),
    linear-gradient(180deg, #1a8fff, #0064e0);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 14px 32px rgba(10,132,255,.26), 0 4px 10px rgba(0,0,0,.18);
  color: #fff;
}

.btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 18px 40px rgba(10,132,255,.32), 0 4px 10px rgba(0,0,0,.18);
}

.btn-secondary {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.15);
}

html[data-theme="light"] .btn-secondary {
  background: rgba(255,255,255,.72);
  border-color: rgba(0,0,0,.10);
}

.btn-danger-soft {
  height: 50px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 800;
  color: #ff6b6b;
  border-color: rgba(255,107,107,.30);
  background: rgba(255,107,107,.07);
  transition: background .22s var(--ease), border-color .22s var(--ease);
}

.btn-danger-soft:hover {
  background: rgba(255,107,107,.12);
  border-color: rgba(255,107,107,.44);
}

/* ─── ACTIONS row at bottom of form ────────────────────────── */
.actions {
  margin-top: var(--ux-section-gap);
  margin-bottom: 0;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ─── INPUT ROW (name + "из MAX") ───────────────────────────── */
.input-row {
  gap: 10px;
}

/* ─── FORM CARD ─────────────────────────────────────────────── */
.form-card {
  padding: var(--ux-card-pad);
  border-radius: var(--ux-radius-form);
}

/* ─── LOCATION BUTTONS ──────────────────────────────────────── */
.location-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .location-actions {
    grid-template-columns: 1fr;
  }
}

.location-btn {
  height: auto;
  min-height: 50px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.3;
  white-space: normal;
  text-align: center;
  border-radius: 14px;
}

.form-hint {
  font-size: 12px;
  color: var(--muted2);
  font-weight: 550;
  margin-top: 8px;
  white-space: normal;
  line-height: 1.4;
}

.address-input-wrapper {
  margin-top: 10px;
  margin-bottom: 0;
}

/* ─── MEDIA UPLOADER ────────────────────────────────────────── */
.media-uploader {
  border-radius: 22px;
  padding: 18px;
}

.media-add {
  min-height: 52px;
  border-radius: 14px;
}

.media-count {
  border-radius: 10px;
  height: 26px;
  font-size: 11px;
}

/* ─── META ROW (char counter) ───────────────────────────────── */
.meta-row {
  margin-top: 8px;
}

.meta {
  font-size: 11px;
  color: var(--muted2);
}

/* ══════════════════════════════════════════════════════════════
   WI-FI SECTION – complete visual overhaul
   ══════════════════════════════════════════════════════════════ */

/* Outer wrapper – clean glass card, no heavy nesting */
#wifi-section > .glass-card {
  padding: 0;
  background: linear-gradient(180deg,
    rgba(255,255,255,.09) 0%,
    rgba(255,255,255,.048) 100%);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--ux-radius-form);
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.36),
              inset 0 1px 0 rgba(255,255,255,.09);
}

html[data-theme="light"] #wifi-section > .glass-card {
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.70));
  border-color: rgba(10,20,40,.10);
}

/* TAB BAR – pill-style, flush with top of card */
#wifi-section .tabs {
  display: flex;
  flex-direction: row;
  grid-template-columns: unset;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.10);
  border-radius: 0;
}

html[data-theme="light"] #wifi-section .tabs {
  background: rgba(240,244,255,.55);
  border-bottom-color: rgba(10,20,40,.08);
}

#wifi-section .tab {
  flex: 1;
  height: var(--ux-tab-h);
  border-radius: 11px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  transition: background .2s var(--ease), border-color .2s var(--ease),
              box-shadow .2s var(--ease), transform .15s var(--ease);
}

html[data-theme="light"] #wifi-section .tab {
  background: rgba(255,255,255,.56);
  border-color: rgba(10,20,40,.10);
  color: rgba(0,0,0,.70);
}

#wifi-section .tab.is-active {
  background: linear-gradient(180deg, #1a8fff, #0064e0);
  border-color: rgba(255,255,255,.24);
  color: #fff;
  box-shadow: 0 10px 28px rgba(10,132,255,.28);
}

/* TAB CONTENT – no nested glass-card, clean flat form */
#wifi-section .tab-content {
  display: none;
  padding: var(--ux-card-pad);
}

#wifi-section .tab-content.is-active {
  display: block;
}

/* Strip the nested glass-card/form-card inside wifi tab-content */
#wifi-section .tab-content .glass-card.form-card,
.wifi-form-inner {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  animation: none;
}

/* Form grid inside wifi – full width on small screens */
#wifi-section .form-grid {
  gap: 16px;
}

@media (max-width: 720px) {
  #wifi-section .form-grid {
    grid-template-columns: 1fr;
  }
}

/* Actions within wifi form */
#wifi-section .actions {
  padding-top: 8px;
}

/* ══════════════════════════════════════════════════════════════
   TABS (global) – reports filters
   ══════════════════════════════════════════════════════════════ */

.reports-tabs {
  display: flex;
  flex-direction: row;
  grid-template-columns: unset;
  flex-wrap: nowrap;
  padding: 0;
  background: transparent;
  border-bottom: none;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.reports-tabs::-webkit-scrollbar { display: none; }

.reports-tabs .tab {
  flex: 0 0 auto;
  height: 38px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  padding: 0 14px;
  letter-spacing: 0.02em;
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.12);
}

html[data-theme="light"] .reports-tabs .tab {
  background: rgba(255,255,255,.6);
  border-color: rgba(10,20,40,.10);
}

.reports-tabs .tab.is-active {
  background: linear-gradient(180deg, rgba(10,132,255,.92), rgba(10,132,255,.68));
  border-color: rgba(255,255,255,.20);
  color: #fff;
  box-shadow: 0 8px 20px rgba(10,132,255,.22);
}

/* ─── REPORTS CARD ──────────────────────────────────────────── */
.reports-card {
  padding: var(--ux-card-pad);
  gap: 18px;
}

.reports-controls {
  gap: 14px;
  margin-bottom: 0;
}

/* Search bar */
#reportsSearch {
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.12);
  height: 46px;
  font-size: 14px;
}

html[data-theme="light"] #reportsSearch {
  background: rgba(255,255,255,.7);
}

/* ─── REPORT ITEM CARD ───────────────────────────────────────── */
.report-item {
  border-radius: 20px;
  padding: 18px;
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.12);
  transition: filter .2s var(--ease), transform .15s var(--ease);
}

.report-item:hover {
  filter: brightness(1.04);
}

.report-item__head {
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.report-item__no {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.report-item__type {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.report-item__date {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted2);
  white-space: nowrap;
}

.report-item__desc {
  font-size: 14px;
  line-height: 1.48;
  color: var(--text);
  margin-top: 8px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.report-item__meta {
  gap: 8px;
  margin: 10px 0 12px;
}

/* Open button in report item */
.report-item .btn-wide {
  height: 46px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 800;
  margin-top: 4px;
  background: rgba(10,132,255,.12);
  border-color: rgba(10,132,255,.28);
  color: var(--blue);
}

html[data-theme="light"] .report-item .btn-wide {
  background: rgba(10,132,255,.09);
  border-color: rgba(10,132,255,.22);
}

.report-item .btn-wide:hover {
  background: rgba(10,132,255,.18);
}

/* ─── STATUS BADGES ─────────────────────────────────────────── */
.status-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 8px;
  letter-spacing: 0.02em;
}

/* Status colors */
.status-badge[data-status="new"],
.status-badge.is-new {
  background: rgba(10,132,255,.14);
  border-color: rgba(10,132,255,.28);
  color: #4da6ff;
}

.status-badge[data-status="in_progress"],
.status-badge.is-work {
  background: rgba(255,159,10,.14);
  border-color: rgba(255,159,10,.28);
  color: #ff9f0a;
}

.status-badge[data-status="resolved"],
.status-badge.is-done {
  background: rgba(52,199,89,.14);
  border-color: rgba(52,199,89,.28);
  color: #34c759;
}

.status-badge[data-status="rejected"],
.status-badge.is-rejected {
  background: rgba(255,59,48,.14);
  border-color: rgba(255,59,48,.28);
  color: #ff6b6b;
}

.reply-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(88,86,214,.14);
  border-color: rgba(88,86,214,.28);
  color: #9b97ff;
}

/* ─── DETAIL CARD ───────────────────────────────────────────── */
.report-detail-card {
  border-radius: 22px;
  padding: 20px;
  background: rgba(255,255,255,.055);
}

.report-detail__top {
  margin-bottom: 16px;
  align-items: flex-start;
}

.report-block {
  gap: 14px;
  padding-top: 16px;
  margin-top: 0;
}

.report-block__title {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

.report-fields {
  gap: 14px;
  margin-top: 16px;
}

.report-fields div {
  font-size: 14px;
  line-height: 1.5;
}

/* ─── MEDIA GRID IN DETAIL ──────────────────────────────────── */
.report-media-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 520px) {
  .report-media-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.report-media-item {
  border-radius: 16px;
  min-height: 110px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .18s var(--ease), filter .18s var(--ease);
}

.report-media-item:hover {
  transform: scale(1.02);
  filter: brightness(1.06);
}

.report-media-item img {
  height: 120px;
  object-fit: cover;
}

/* ─── DELETE ZONE ───────────────────────────────────────────── */
.report-delete-zone {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.10);
}

html[data-theme="light"] .report-delete-zone {
  border-top-color: rgba(10,20,40,.08);
}

/* ─── EMPTY STATE ───────────────────────────────────────────── */
.empty-state {
  border-radius: 20px;
  padding: 36px 24px;
  text-align: center;
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
}

.empty-icon {
  font-size: 36px;
  margin-bottom: 12px;
  opacity: .5;
}

.empty-text {
  font-size: 15px;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.5;
}

/* ─── STATUS HISTORY ────────────────────────────────────────── */
.status-history {
  gap: 8px;
}

.status-history__row {
  border-radius: 13px;
  padding: 10px 14px;
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

/* ─── MODALS ────────────────────────────────────────────────── */
.modal-backdrop,
.loading-backdrop {
  background: rgba(0,0,0,.56);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.modal-sheet {
  border-radius: 28px;
  background: rgba(16,18,26,.82);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 32px 100px rgba(0,0,0,.52),
              inset 0 1px 0 rgba(255,255,255,.09);
  animation: modalSlideIn .22s var(--ease) both;
}

html[data-theme="light"] .modal-sheet {
  background: rgba(248,250,255,.92);
  border-color: rgba(10,20,40,.10);
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: translate(-50%, -47%) scale(.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.modal-head {
  padding: 16px 20px;
  border-bottom-color: rgba(255,255,255,.10);
}

html[data-theme="light"] .modal-head {
  border-bottom-color: rgba(10,20,40,.08);
}

.modal-title {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.modal-body {
  padding: 20px;
  font-size: 15px;
  line-height: 1.5;
}

.modal-actions {
  padding: 14px 20px;
  border-top-color: rgba(255,255,255,.10);
  gap: 10px;
}

html[data-theme="light"] .modal-actions {
  border-top-color: rgba(10,20,40,.08);
}

/* Media viewer inside modal */
.media-viewer {
  border-radius: 16px;
  overflow: hidden;
}

.media-viewer img,
.media-viewer video {
  border-radius: 14px;
  max-height: min(68vh, 580px);
}

/* Confirm card in modal */
.confirm-card {
  gap: 14px;
}

/* Success receipt */
.success-receipt__icon {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  font-size: 30px;
}

.success-receipt__title {
  font-size: 21px;
  letter-spacing: -0.04em;
}

/* ─── LOADING OVERLAY ───────────────────────────────────────── */
.loading-card {
  border-radius: 22px;
  padding: 22px 24px;
  min-width: min(320px, calc(100vw - 32px));
}

.loading-text {
  font-size: 15px;
  font-weight: 700;
}

.spinner {
  width: 24px;
  height: 24px;
  border-width: 2.5px;
}

/* ─── BOTTOM NAV ────────────────────────────────────────────── */
.bottom-nav {
  height: 70px;
  border-radius: 24px;
  padding: 7px;
  background: rgba(8,10,16,.62);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 60px rgba(0,0,0,.38),
              inset 0 1px 0 rgba(255,255,255,.07);
  /* Ensure it doesn't grow beyond viewport width */
  max-width: calc(100vw - 16px);
}

html[data-theme="light"] .bottom-nav {
  background: rgba(255,255,255,.84);
  border-color: rgba(10,20,40,.10);
}

.nav-item {
  border-radius: 18px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transition: background .2s var(--ease), transform .15s var(--ease);
}

.nav-item:hover {
  background: rgba(255,255,255,.07);
}

.nav-item.is-active {
  background: linear-gradient(180deg, rgba(10,132,255,.92), rgba(0,100,224,.72));
  border-color: rgba(255,255,255,.20);
  box-shadow: 0 12px 28px rgba(10,132,255,.26);
}

.nav-item i {
  font-size: 18px;
}

.nav-item span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* ─── TOPBAR ────────────────────────────────────────────────── */
.topbar {
  padding-left: clamp(14px, 4vw, 22px);
  padding-right: clamp(14px, 4vw, 22px);
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
}

/* ─── HOME SCREEN ACTIONS ───────────────────────────────────── */
.action-btn {
  border-radius: 22px;
  padding: 16px;
  gap: 14px;
}

.action-title {
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.action-sub {
  font-size: 12.5px;
  font-weight: 550;
  line-height: 1.38;
}

/* ─── CONTACTS ──────────────────────────────────────────────── */
.contact-item {
  padding: 16px 18px;
}

.contact-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.contact-row {
  font-size: 14px;
  font-weight: 600;
  gap: 10px;
}

.contact-row a {
  color: var(--blue);
  font-weight: 700;
  transition: opacity .18s;
}

.contact-row a:hover { opacity: .8; }

/* ─── GLASS CARD ANIMATION ──────────────────────────────────── */
/* Prevent jarring animation on report cards */
.report-item,
.report-detail-card,
.empty-state {
  animation: none;
}

/* ─── CONTENT SECTION SPACING ───────────────────────────────── */
.section-head {
  margin: 16px 2px 14px;
  gap: 6px;
}

/* ─── MAIN CONTENT BOTTOM PADDING (safe area + nav) ────────── */
.main {
  padding-bottom: calc(82px + env(safe-area-inset-bottom));
}

/* ─── MISC: form-group--full in 2-col grids ─────────────────── */
.form-group--full {
  grid-column: 1 / -1;
}

/* ─── RESPONSIVE: small phones ──────────────────────────────── */
@media (max-width: 400px) {
  :root {
    --ux-card-pad: 14px;
  }

  .form-input,
  .form-select,
  .form-textarea {
    font-size: 14px;
  }

  .bottom-nav {
    height: 66px;
    border-radius: 20px;
  }

  #wifi-section .tab {
    font-size: 12px;
    padding: 0 10px;
  }
}

/* ─── RESPONSIVE: desktop ──────────────────────────────────── */
@media (min-width: 900px) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #wifi-section .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .location-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ─── LIGHT THEME REFINEMENTS ───────────────────────────────── */
html[data-theme="light"] .report-item {
  background: rgba(255,255,255,.72);
  border-color: rgba(10,20,40,.09);
}

html[data-theme="light"] .report-detail-card {
  background: rgba(255,255,255,.72);
  border-color: rgba(10,20,40,.09);
}

html[data-theme="light"] .empty-state {
  background: rgba(255,255,255,.55);
  border-color: rgba(10,20,40,.08);
}

html[data-theme="light"] .status-history__row {
  background: rgba(255,255,255,.60);
  border-color: rgba(10,20,40,.08);
}

html[data-theme="light"] .nav-item:hover {
  background: rgba(10,20,40,.06);
}

html[data-theme="light"] label {
  color: rgba(0,0,0,.55);
}

/* ─── ICON BTN ──────────────────────────────────────────────── */
.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 13px;
}

/* ─── SECTION TRANSITIONS ───────────────────────────────────── */
.content-section.is-active {
  animation: sectionSlideIn .32s var(--ease) both;
}

@keyframes sectionSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* P5.4 final visual fix: light tabs + bottom nav active clipping */
.reports-tabs {
  flex-wrap: wrap !important;
  overflow: visible !important;
  gap: 10px !important;
}

.reports-tabs .tab {
  flex: 1 1 calc(50% - 10px) !important;
  min-width: 132px;
  color: rgba(255,255,255,.82) !important;
  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reports-tabs .tab.is-active,
html[data-theme="light"] .reports-tabs .tab.is-active {
  color: #fff !important;
  background: linear-gradient(180deg, #1a8fff 0%, #0064e0 100%) !important;
  border-color: rgba(255,255,255,.24) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 22px rgba(10,132,255,.24) !important;
}

html[data-theme="light"] .reports-tabs .tab:not(.is-active) {
  color: rgba(12,18,30,.78) !important;
  background: rgba(255,255,255,.74) !important;
  border-color: rgba(10,20,40,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 8px 18px rgba(20,35,60,.06) !important;
}

@media (min-width: 760px) {
  .reports-tabs .tab {
    flex-basis: calc(20% - 10px) !important;
    min-width: 0;
  }
}

.bottom-nav {
  isolation: isolate;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  background-clip: padding-box;
  gap: 7px !important;
  padding: 7px !important;
}

.bottom-nav .nav-item,
.nav-item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
  flex: 0 0 68px;
  min-width: 68px;
  border-radius: 18px !important;
}

.bottom-nav .nav-item::before,
.nav-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  background: transparent;
  transition: opacity .18s var(--ease), background .18s var(--ease);
}

.bottom-nav .nav-item.is-active,
.nav-item.is-active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.bottom-nav .nav-item.is-active::before,
.nav-item.is-active::before {
  opacity: 1;
  background: linear-gradient(180deg, #1a8fff 0%, #0064e0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}

.bottom-nav .nav-item:not(.is-active)::before,
.nav-item:not(.is-active)::before {
  opacity: 0;
}

.bottom-nav .nav-item i,
.nav-item i {
  position: relative;
  z-index: 1;
}

.bottom-nav .nav-item span,
.nav-item span {
  position: relative;
  z-index: 1;
}

.bottom-nav .nav-item.is-active i,
.bottom-nav .nav-item.is-active span,
.nav-item.is-active i,
.nav-item.is-active span {
  color: #fff !important;
}

html[data-theme="light"] .bottom-nav .nav-item:not(.is-active) i,
html[data-theme="light"] .nav-item:not(.is-active) i {
  color: rgba(12,18,30,.82) !important;
}

html[data-theme="light"] .bottom-nav .nav-item:not(.is-active) span,
html[data-theme="light"] .nav-item:not(.is-active) span {
  color: rgba(12,18,30,.62) !important;
}

html[data-theme="light"] .bottom-nav {
  background: rgba(255,255,255,.90) !important;
  border-color: rgba(10,20,40,.10) !important;
  box-shadow: 0 18px 48px rgba(20,35,60,.14), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

@media (max-width: 430px) {
  .bottom-nav .nav-item,
  .nav-item {
    flex-basis: 64px;
    min-width: 64px;
  }

  .reports-tabs .tab {
    min-width: 0;
    flex-basis: calc(50% - 8px) !important;
    padding-left: 10px;
    padding-right: 10px;
  }
}