* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg-primary: #050505;
  --bg-secondary: rgba(15, 15, 15, 0.6);
  --bg-card: #161616;
  --border-color: #1c1c1c;
  --text-primary: #ffffff;
  --text-secondary: #969696;
  --text-muted: rgba(255, 255, 255, 0.5);
  --accent-blue: #008fcd;
  --accent-green: #117c2c;
  --accent-orange: #ff8d28;
  --accent-purple: #6155f5;
  --accent-red: #ff383c;
  --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
}

/* Page transition animations - hide everything until ready */
body:not(.page-ready) .sidebar,
body:not(.page-ready) .main-content {
  opacity: 0;
}

.page-animate {
  opacity: 0;
  transform: translateY(15px);
}

.page-animate.animated {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.page-exit {
  opacity: 0 !important;
  transform: translateY(-10px) !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

.app {
  display: flex;
  min-height: 100vh;
  min-width: 1440px;
  position: relative;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.sidebar {
  width: 248px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  z-index: 1200 !important;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  z-index: 10;
  height: 100vh;
  overflow-y: auto;
  position: sticky;
  scrollbar-width: none;
  top: 0;
}

.sidebar-logo {
  margin-left: 24px;
  margin-top: 22px;
  width: 96px;
  height: 22px;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.sidebar-logo:hover {
  transform: scale(1.02);
  opacity: 0.9;
}

.sidebar-nav {
  margin-left: 8px;
  width: 232px;
  display: flex;
  flex-direction: column;
}

.separator {
  margin-left: 16px;
  width: 200px;
  height: 1px;
  background: var(--border-color);
}

.menu-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  width: 100%;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.menu-item span {
  white-space: nowrap;
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 400;
  letter-spacing: -0.3px;
  line-height: 1.4;
  transition: all 0.25s ease;
}

.menu-item .menu-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.25s ease, filter 0.25s ease;
}

.menu-item:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(2px);
}

.menu-item:hover .menu-icon {
  opacity: 1;
}

.menu-item.active {
  color: #008FCD;
  background: transparent;
}

.menu-item.active span {
  color: #008FCD;
}

.menu-item.active .menu-icon {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(1352%) hue-rotate(175deg) brightness(99%) contrast(101%);
}

.menu-item.active .dropdown-icon {
  color: #008FCD;
}

.menu-item.active .dropdown-icon path {
  fill: #008FCD !important;
}

.menu-item svg,
.menu-item img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.menu-item .dropdown-icon {
  margin-left: auto;
  transition: transform 0.3s ease;
  color: var(--text-secondary);
  opacity: 0.6;
}

.menu-item.has-submenu {
  cursor: pointer;
}

.menu-item.has-submenu.open .dropdown-icon {
  transform: rotate(180deg);
}

.submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  display: flex;
  flex-direction: column;
  background: transparent;
}

.submenu-item {
  display: flex;
  align-items: center;
  padding: 10px 16px 10px 46px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: -0.3px;
  transition: all 0.2s ease;
  border-radius: 8px;
  margin: 0 8px;
}

.submenu-item:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.submenu-item.active {
  color: var(--accent-blue);
  background: rgba(0, 143, 205, 0.1);
}

.wallet-section {
  margin-left: 24px;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 24px;
}

.wallet-item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
}

.wallet-icon {
  width: 24px;
  height: 24px;
}

.wallet-info {
  display: flex;
  flex-direction: column;
}

.wallet-amount {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.wallet-currency {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: -0.5px;
}

.user-section-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 24px;
  margin-top: 24px;
  margin-right: 16px;
}

.user-section {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex: 1;
}

.user-section:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(4px);
}

.user-section:hover .user-avatar {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0, 143, 205, 0.3);
}

.user-section:hover .user-name {
  color: var(--accent-blue);
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-shop {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: -0.4px;
  transition: color 0.3s ease;
}

.user-name {
  font-weight: 500;
  font-size: 16px;
  color: var(--text-primary);
  letter-spacing: -0.4px;
  transition: color 0.3s ease;
}

/* Notification Icon */
.notification-wrapper {
  position: relative;
}

.notification-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: scale(1.1);
}

.notification-btn:hover .notification-icon {
  filter: brightness(1.3);
}

.notification-btn:active {
  transform: scale(0.95);
}

.notification-icon {
  width: 22px;
  height: 22px;
  transition: all 0.3s ease;
}

.notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #ff383c;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: badge-pulse 2s infinite;
}

.notification-badge.visible {
  transform: scale(1);
}

@keyframes badge-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 56, 60, 0.4);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(255, 56, 60, 0);
  }
}

/* Notification Panel */
.notification-panel {
  position: fixed;
  top: auto;
  bottom: 80px;
  left: 260px;
  width: 282px;
  background: rgba(15, 15, 15, 0.95);
  border: 1px solid #1c1c1c;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-radius: 10px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px) scale(0.95);
  transform-origin: bottom left;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.notification-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) scale(1);
}

.notification-panel-header {
  padding: 15px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.notification-panel-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: -0.4px;
  color: #ffffff;
}

.notification-list {
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}

.notification-list::-webkit-scrollbar {
  width: 4px;
}

.notification-list::-webkit-scrollbar-track {
  background: transparent;
}

.notification-list::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 2px;
}

.notification-item {
  display: flex;
  gap: 16px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  animation: notification-slide-in 0.3s ease forwards;
  opacity: 0;
  transform: translateX(-10px);
}

.notification-item:nth-child(1) { animation-delay: 0.05s; }
.notification-item:nth-child(2) { animation-delay: 0.1s; }
.notification-item:nth-child(3) { animation-delay: 0.15s; }
.notification-item:nth-child(4) { animation-delay: 0.2s; }
.notification-item:nth-child(5) { animation-delay: 0.25s; }

@keyframes notification-slide-in {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.notification-item-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.notification-item-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.notification-item-name {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.4px;
  color: #ffffff;
}

.notification-item-text {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.4px;
  color: #969696;
}

.notification-item-time {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: -0.4px;
  color: rgba(255, 255, 255, 0.25);
  margin-top: 2px;
}

.notification-empty {
  padding: 30px 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
}

.main-content {
  flex: 1;
  margin: 38px;
  z-index: 10;
  min-width: 0;
}

.page-title {
  font-weight: 500;
  font-size: 24px;
  color: var(--text-primary);
  letter-spacing: -0.5px;
  line-height: 1.2;
  margin-bottom: 16px;
}

.dashboard-top {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.chart-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 25px;
  overflow: visible;
  position: relative;
}

.chart-card.large {
  flex: 1 1 0;
  min-width: 300px;
  height: 340px;
}

.chart-label {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: -0.3px;
  margin-bottom: 10px;
}

.chart-value-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 20px;
}

.chart-value {
  font-weight: 600;
  font-size: 34px;
  color: var(--text-primary);
  letter-spacing: -0.68px;
}

.chart-count {
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: -0.3px;
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  height: 170px;
  padding: 0 10px;
}

.bar {
  width: 35px;
  background: var(--accent-blue);
  border-radius: 10px;
  min-height: 20px;
  transition: transform 0.2s ease, filter 0.2s ease;
  cursor: pointer;
  position: relative;
}

.bar:hover {
  transform: scaleY(1.05);
  filter: brightness(1.2);
}

.bar-tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid #333;
  border-radius: 8px;
  padding: 10px 14px;
  color: #fff;
  font-size: 13px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 100;
  white-space: nowrap;
}

.bar-tooltip.visible {
  opacity: 1;
}

.bar-tooltip-label {
  color: #888;
  margin-bottom: 6px;
  font-size: 12px;
}

.bar-tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 4px;
}

.bar-tooltip-row span:first-child {
  color: #888;
}

.bar-tooltip-row span:last-child {
  color: #fff;
  font-weight: 500;
}

.bar-labels {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px 0;
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  letter-spacing: -0.24px;
}

.bar-labels span {
  width: 35px;
  text-align: center;
}

.stats-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 0;
  min-width: 260px;
}

.stat-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 24px;
  overflow: hidden;
}

.stat-card.wide {
  height: 93px;
}

.stat-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.stat-card-title {
  font-weight: 500;
  font-size: 16px;
  color: var(--text-primary);
}

.stat-card-detail {
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: -0.3px;
}

.stat-card-detail-multi {
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: -0.3px;
  line-height: 1.4;
}

.stat-card-content {
  margin-top: auto;
}

.stat-mini-chart-img {
  width: 94.05px;
  height: 18.99px;
}

.stat-mini-chart-svg {
  width: 94px;
  height: 19px;
}

.stat-mini-chart-svg polyline {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawLine 1.5s ease forwards;
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

.mini-line-chart {
  position: relative;
  width: 94px;
  height: 19px;
  cursor: pointer;
}

.mini-line-chart svg {
  width: 100%;
  height: 100%;
}

.mini-line-chart polyline {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawLine 1.5s ease forwards;
}

.mini-line-chart .chart-point {
  fill: #008FCD;
  opacity: 0;
  transition: opacity 0.2s ease, r 0.2s ease;
  cursor: pointer;
}

.mini-line-chart .chart-point:hover {
  opacity: 1;
  r: 5;
}

.mini-line-chart .chart-point.visible {
  opacity: 1;
}

.mini-chart-tooltip {
  position: fixed;
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid #333;
  border-radius: 6px;
  padding: 8px 12px;
  color: #fff;
  font-size: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 1000;
  white-space: nowrap;
}

.mini-chart-tooltip.visible {
  opacity: 1;
}

.mini-chart-tooltip-label {
  color: #888;
  margin-bottom: 4px;
  font-size: 11px;
}

.mini-chart-tooltip-value {
  color: #008FCD;
  font-weight: 600;
  font-size: 14px;
}

.stat-mini-chart-img.small {
  width: 94.05px;
  height: 18.99px;
  margin-bottom: auto;
}

.stats-cards-row {
  display: flex;
  gap: 16px;
}

.stats-cards-row .stat-card {
  width: 247px;
  height: 231px;
  display: flex;
  flex-direction: column;
}

.inventory-table {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 16px;
}

.table-title {
  font-weight: 500;
  font-size: 18px;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.city-section {
  margin-bottom: 20px;
}

.city-name {
  font-size: 16px;
  color: var(--text-secondary);
  letter-spacing: -0.3px;
  margin-bottom: 8px;
  display: block;
  margin-left: 25px;
}

.inventory-row {
  display: grid;
  grid-template-columns: 1fr 150px 120px 120px 150px;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 5px;
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.product-price,
.product-weight,
.product-count,
.product-total {
  text-align: right;
}

.graphs-row {
  display: flex;
  gap: 16px;
}

.graph-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 24px;
  width: 550px;
  height: 279px;
}

.graph-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.graph-title {
  font-weight: 500;
  font-size: 16px;
  color: var(--text-primary);
  letter-spacing: -0.4px;
}

.graph-date {
  font-size: 10px;
  color: var(--text-secondary);
  letter-spacing: -0.4px;
  margin-left: auto;
}

.graph-legend {
  display: flex;
  gap: 16px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.legend-dot.purple {
  background: var(--accent-purple);
}

.legend-dot.red {
  background: var(--accent-red);
}

.graph-content {
  display: flex;
  gap: 10px;
  height: 187px;
}

.graph-y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: -0.3px;
  text-align: right;
  width: 50px;
}

.graph-area {
  flex: 1;
  position: relative;
}

.line-chart {
  width: 100%;
  height: 100%;
}

.graph-tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid #333;
  border-radius: 8px;
  padding: 12px 16px;
  color: #fff;
  font-size: 13px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 100;
  min-width: 160px;
}

.graph-tooltip.visible {
  opacity: 1;
}

.graph-tooltip-label {
  font-weight: 500;
  margin-bottom: 8px;
  color: #fff;
}

.graph-tooltip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.graph-tooltip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.graph-tooltip-dot.btc { background: #0b62a4; }
.graph-tooltip-dot.card { background: #7A92A3; }
.graph-tooltip-dot.promocode { background: #4da74d; }
.graph-tooltip-dot.sbp { background: #afd8f8; }
.graph-tooltip-dot.moscow { background: #6155f5; }
.graph-tooltip-dot.saratov { background: #ff383c; }

.graph-tooltip-text {
  color: #888;
}

.graph-tooltip-value {
  color: #fff;
  margin-left: auto;
  font-weight: 500;
}

.graph-point {
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, r 0.2s ease;
}

.graph-point.visible {
  opacity: 1;
}

.graph-point:hover {
  r: 8;
}

.graph-hover-line {
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.graph-hover-line.visible {
  opacity: 1;
}

[data-animate] {
  opacity: 0;
  transform: translateY(20px);
}

[data-animate].animated {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate="slide-in"] {
  transform: translateX(-20px);
}

[data-animate="slide-in"].animated {
  transform: translateX(0);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 20px;
}

.breadcrumb-item {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.5px;
  color: var(--text-secondary);
}

.breadcrumb-item.active {
  color: var(--text-primary);
}

.breadcrumb-link {
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
}

.breadcrumb-link:hover {
  color: #008fcd;
  transform: translateY(-2px);
}

.breadcrumb-separator {
  width: 19px;
  height: 19px;
  color: var(--text-secondary);
}

.stats-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 16px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-value {
  font-weight: 500;
  font-size: 14px;
  color: #FFFFFF;
  letter-spacing: -0.5px;
}

.stat-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.stat-box {
  box-sizing: border-box;
  position: relative;
  width: 189px;
  height: 66px;
  background: rgba(15, 15, 15, 0.6);
  border: 1px solid #1C1C1C;
  border-radius: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.stat-box .stat-value {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.5px;
  color: #FFFFFF;
}

.stat-box .stat-label {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  color: #969696;
}

.filters-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.search-input {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px 14px;
  gap: 10px;
  width: 274px;
  height: 40px;
  background: rgba(15, 15, 15, 0.6);
  border: 1px solid #1C1C1C;
  border-radius: 8px;
}

.search-input input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-family);
  width: 100%;
}

.search-input input::placeholder {
  color: #969696;
}

.search-input svg {
  width: 16px;
  height: 16px;
  color: #969696;
  flex-shrink: 0;
}

.filter-buttons {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-family);
  cursor: pointer;
}

.filter-btn svg {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
}

.data-table {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  overflow: hidden;
}

.table-header {
  display: grid;
  grid-template-columns: 100px 200px 200px 100px 180px 100px;
  gap: 16px;
  padding: 16px 24px;
}

.table-header span {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: -0.3px;
}

.table-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
}

.table-row {
  display: grid;
  grid-template-columns: 100px 200px 200px 100px 180px 100px;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px;
}

.table-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.table-cell.center {
  justify-content: center;
}

.cell-title {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.cell-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: -0.3px;
}

.cell-muted {
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: -0.3px;
}

.cell-id {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: -0.3px;
}

.status-completed {
  font-weight: 500;
  font-size: 14px;
  color: var(--accent-green);
  letter-spacing: -0.3px;
}

.status-pending {
  font-weight: 500;
  font-size: 14px;
  color: var(--accent-orange);
  letter-spacing: -0.3px;
}

.status-cancelled {
  font-weight: 500;
  font-size: 14px;
  color: #ff4d4d;
  letter-spacing: -0.3px;
}

.no-results {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
  font-size: 14px;
}

.action-icons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.action-icon {
  width: 20px;
  height: 20px;
}

.action-icon.orange {
  color: var(--accent-orange);
}

.action-icon.comment-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.action-icon.comment-icon:hover {
  transform: scale(1.1);
  filter: brightness(1.2);
}

.action-icon.blue {
  color: #0088ff;
}

.filters-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.filter-buttons {
  display: flex;
  gap: 10px;
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-family);
  cursor: pointer;
  transition: border-color 0.2s;
}

.filter-btn:hover {
  border-color: var(--accent-blue);
}

.filter-btn svg {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
}

/* Status Filter Dropdown */
.filter-dropdown {
  position: relative;
  display: inline-block;
}

.filter-dropdown .filter-btn {
  position: relative;
  z-index: 10;
  border: none;
  background: transparent;
}

.filter-dropdown .filter-btn.active {
  background: rgba(45, 164, 78, 0.15);
}

.filter-dropdown .filter-btn.active .dropdown-arrow {
  transform: rotate(180deg);
}

.filter-dropdown .dropdown-arrow {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  background: #1a1a1a;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 8px;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.98);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.filter-dropdown-menu.open,
.filter-dropdown.open .filter-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.filter-dropdown-menu::-webkit-scrollbar {
  width: 6px;
}

.filter-dropdown-menu::-webkit-scrollbar-track {
  background: transparent;
}

.filter-dropdown-menu::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

.filter-dropdown-item {
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.filter-dropdown-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: var(--accent-green);
  transform: scaleY(0);
  transition: transform 0.2s ease;
}

.filter-dropdown-item:hover {
  background: rgba(45, 164, 78, 0.15);
  padding-left: 18px;
}

.filter-dropdown-item:hover::before {
  transform: scaleY(1);
}

.filter-dropdown-item.selected {
  background: rgba(45, 164, 78, 0.2);
  color: var(--accent-green);
  padding-left: 18px;
}

.filter-dropdown-item.selected::before {
  transform: scaleY(1);
}

.filter-dropdown-item:active {
  transform: scale(0.98);
}

/* Courier Dropdown Items */
.courier-dropdown-item {
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.courier-dropdown-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: var(--accent-green);
  transform: scaleY(0);
  transition: transform 0.2s ease;
}

.courier-dropdown-item:hover {
  background: rgba(45, 164, 78, 0.15);
  padding-left: 18px;
}

.courier-dropdown-item:hover::before {
  transform: scaleY(1);
}

.courier-dropdown-item.selected {
  background: rgba(45, 164, 78, 0.2);
  color: var(--accent-green);
  padding-left: 18px;
}

.courier-dropdown-item.selected::before {
  transform: scaleY(1);
}

.courier-dropdown-item:active {
  transform: scale(0.98);
}

/* Date Picker Styles */
.date-picker-menu {
  min-width: 280px;
  padding: 16px;
}

.date-picker-header {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.date-picker-presets {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.date-preset-item {
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.date-preset-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: var(--accent-green);
  transform: scaleY(0);
  transition: transform 0.2s ease;
}

.date-preset-item:hover {
  background: rgba(45, 164, 78, 0.15);
  padding-left: 18px;
}

.date-preset-item:hover::before {
  transform: scaleY(1);
}

.date-preset-item.selected {
  background: rgba(45, 164, 78, 0.2);
  color: var(--accent-green);
  padding-left: 18px;
}

.date-preset-item.selected::before {
  transform: scaleY(1);
}

.date-preset-item:active {
  transform: scale(0.98);
}

.date-picker-divider {
  height: 1px;
  background: var(--border-color);
  margin: 12px 0;
}

.date-picker-custom {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.date-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.date-input-group label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

.date-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-family);
  transition: all 0.2s ease;
}

.date-input:focus {
  outline: none;
  border-color: var(--accent-green);
  box-shadow: 0 0 0 3px rgba(45, 164, 78, 0.15);
}

.date-input::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.date-input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

.date-apply-btn {
  width: 100%;
  padding: 12px;
  background: var(--accent-green);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 4px;
}

.date-apply-btn:hover {
  background: #25a359;
  transform: translateY(-1px);
}

.date-apply-btn:active {
  transform: translateY(0) scale(0.98);
}

.date-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.date-picker-row label {
  min-width: 30px;
  font-size: 14px;
  color: var(--text-secondary);
}

/* Dispute row filtering animation */
.dispute-row.hidden {
  opacity: 0;
  transform: translateX(-20px);
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border: none;
}

.dispute-row.visible {
  opacity: 1;
  transform: translateX(0);
}

/* History row animation for filtering */
.history-row {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.history-row.hidden {
  opacity: 0;
  transform: translateX(-20px);
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border: none;
}

.history-row.visible {
  opacity: 1;
  transform: translateX(0);
}

.deposits-table {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  overflow: hidden;
  min-height: 826px;
}

.deposits-header {
  display: grid;
  grid-template-columns: 60px 150px 140px 180px 80px 180px 80px;
  gap: 10px;
  padding: 24px 40px;
  color: var(--text-secondary);
  font-size: 16px;
  letter-spacing: -0.3px;
}

.deposits-body {
  padding: 0 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.deposit-row {
  display: grid;
  grid-template-columns: 60px 150px 140px 180px 80px 180px 80px;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px 16px;
  align-items: start;
  min-height: 185px;
}

.deposit-id {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: -0.3px;
  align-self: center;
}

.deposit-client {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.client-name {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  margin-bottom: 4px;
}

.client-detail {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: -0.3px;
  line-height: 1.4;
}

.client-detail.muted {
  color: var(--text-secondary);
}

.deposit-credited {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  align-self: center;
}

.deposit-payment {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: center;
}

.payment-amount {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.payment-method {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: -0.3px;
}

.deposit-status {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.3px;
  align-self: center;
}

.deposit-status.completed {
  color: var(--accent-green);
}

.deposit-status.cancelled {
  color: var(--accent-red);
}

.deposit-status.pending {
  color: #FFA500;
}

.deposits-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.stat-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 16px;
}

.stat-badge-label {
  color: var(--text-secondary);
  font-size: 14px;
}

.stat-badge-value {
  color: var(--text-primary);
  font-weight: 500;
  font-size: 14px;
}

.no-results-message {
  text-align: center;
  padding: 40px;
  color: var(--text-secondary);
  font-size: 16px;
}

.deposit-row {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.4s ease forwards;
}

.deposit-row:nth-child(1) { animation-delay: 0.1s; }
.deposit-row:nth-child(2) { animation-delay: 0.15s; }
.deposit-row:nth-child(3) { animation-delay: 0.2s; }
.deposit-row:nth-child(4) { animation-delay: 0.25s; }
.deposit-row:nth-child(5) { animation-delay: 0.3s; }
.deposit-row:nth-child(6) { animation-delay: 0.35s; }
.deposit-row:nth-child(7) { animation-delay: 0.4s; }
.deposit-row:nth-child(8) { animation-delay: 0.45s; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.deposit-date {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  align-self: center;
}

.deposit-action {
  align-self: center;
  display: flex;
  justify-content: center;
}

.deposit-action .action-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.disputes-filters {
  justify-content: flex-start;
}

.filter-buttons-left {
  display: flex;
  gap: 10px;
}

.disputes-table {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  overflow: hidden;
  min-height: 826px;
}

.disputes-header {
  display: grid;
  grid-template-columns: 80px 1fr 100px 180px;
  gap: 10px;
  padding: 24px 40px;
  color: var(--text-secondary);
  font-size: 16px;
  letter-spacing: -0.3px;
}

.disputes-body {
  padding: 0 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dispute-row {
  display: grid;
  grid-template-columns: 80px 1fr 100px 180px;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px 16px;
  align-items: center;
  min-height: 62px;
}

.dispute-id {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: -0.3px;
}

.dispute-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dispute-title {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.dispute-message {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.dispute-status {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.3px;
}

.dispute-status.completed {
  color: var(--accent-green);
}

.dispute-status.rejected {
  color: #ffcc00;
}

.dispute-status.refund {
  color: #ff6b6b;
}

.no-data-message {
  padding: 40px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
}

.dispute-loading {
  padding: 40px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
}

.dispute-date {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.dispute-row {
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.dispute-row:hover {
  background: rgba(255, 255, 255, 0.03);
  transform: translateX(4px);
}

/* ===== DISPUTE MODAL ===== */
.dispute-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dispute-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.dispute-modal {
  width: 502px;
  max-height: 710px;
  background: rgba(15, 15, 15, 0.8);
  border: 1px solid #1C1C1C;
  backdrop-filter: blur(37.5px);
  -webkit-backdrop-filter: blur(37.5px);
  border-radius: 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  transform: scale(0.9) translateY(20px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.dispute-modal-overlay.active .dispute-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.dispute-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  flex-shrink: 0;
}

.dispute-modal-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.5px;
  color: #FFFFFF;
}

.dispute-modal-title span {
  text-decoration: underline;
}

.dispute-modal-close {
  width: 19px;
  height: 19px;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  padding: 0;
  transition: transform 0.2s ease;
}

.dispute-modal-close:hover {
  transform: scale(1.1);
}

.dispute-modal-close::before,
.dispute-modal-close::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 2px;
  background: #FFFFFF;
  top: 50%;
  left: 50%;
  border-radius: 2px;
}

.dispute-modal-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.dispute-modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.dispute-modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.dispute-message-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 70%;
  animation: messageSlideIn 0.3s ease forwards;
  opacity: 0;
}

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

.dispute-message-item:nth-child(1) { animation-delay: 0.1s; }
.dispute-message-item:nth-child(2) { animation-delay: 0.2s; }
.dispute-message-item:nth-child(3) { animation-delay: 0.3s; }
.dispute-message-item:nth-child(4) { animation-delay: 0.4s; }
.dispute-message-item:nth-child(5) { animation-delay: 0.5s; }

.dispute-message-item.seller {
  align-self: flex-start;
}

.dispute-message-item.employee {
  align-self: flex-end;
  text-align: right;
}

.dispute-message-role {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  color: #969696;
}

.dispute-message-bubble {
  background: #161616;
  border-radius: 8px;
  padding: 15px;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  color: #FFFFFF;
}

.dispute-message-time {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  color: #969696;
}

.dispute-modal-footer {
  padding: 30px 20px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

.dispute-result-label {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  color: #969696;
  margin-bottom: 10px;
}

.dispute-result-text {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
}

.page-title {
  font-weight: 500;
  font-size: 16px;
  color: var(--text-primary);
  letter-spacing: -0.5px;
  line-height: 1.2;
  margin-bottom: 15px;
}

.history-filters {
  justify-content: flex-start;
}

.history-table {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  overflow: hidden;
  min-height: 826px;
}

.history-header {
  display: grid;
  grid-template-columns: 70px 100px 100px 80px 1fr 160px;
  gap: 10px;
  padding: 24px 40px;
  color: var(--text-secondary);
  font-size: 16px;
  letter-spacing: -0.3px;
}

.history-body {
  padding: 0 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-row {
  display: grid;
  grid-template-columns: 70px 100px 100px 80px 1fr 160px;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px 16px;
  align-items: center;
  min-height: 62px;
}

.history-row.compact {
  min-height: 46px;
}

.history-id {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: -0.3px;
}

.history-employee,
.history-client,
.history-courier {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.history-description {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  line-height: 1.4;
}

.history-date {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.regions-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.search-box {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px 14px;
  gap: 10px;
  width: 274px;
  height: 40px;
  background: rgba(15, 15, 15, 0.6);
  border: 1px solid #1C1C1C;
  border-radius: 8px;
  flex-shrink: 0;
}

.search-box svg {
  width: 16px;
  height: 16px;
  color: #969696;
  flex-shrink: 0;
}

.search-box .search-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  width: 100%;
  letter-spacing: -0.3px;
}

.search-input::placeholder {
  color: var(--text-muted);
}

.add-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-green);
  border: none;
  border-radius: 10px;
  padding: 12px 20px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
  transition: opacity 0.2s;
}

.add-btn:hover {
  opacity: 0.9;
}

.add-btn svg {
  width: 18px;
  height: 18px;
}

.regions-table {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  overflow: hidden;
  min-height: 500px;
}

.regions-header {
  display: grid;
  grid-template-columns: 80px 1fr 100px;
  gap: 20px;
  padding: 24px 40px;
  color: var(--text-secondary);
  font-size: 16px;
  letter-spacing: -0.3px;
}

.regions-body {
  padding: 0 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.region-row {
  display: grid;
  grid-template-columns: 80px 1fr 100px;
  gap: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px 16px;
  align-items: center;
  min-height: 54px;
}

.region-id {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: -0.3px;
}

.region-name {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.region-action {
  display: flex;
  justify-content: flex-end;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.action-btn:hover {
  opacity: 0.8;
}

.action-btn.info {
  background: transparent;
  color: white;
  padding: 0;
  width: 20px;
  height: 20px;
}

.action-btn.card {
  background: transparent;
  padding: 0;
  width: 20px;
  height: 16px;
  margin-top: 8px;
}

.action-btn svg {
  width: 18px;
  height: 18px;
}

/* Clock animation for info button */
.action-btn.info .clock-hand-hour,
.action-btn.info .clock-hand-minute {
  transform-origin: center;
  transition: transform 0.3s ease;
}

.client-card:hover .action-btn.info .clock-hand-minute,
.table-row:hover .action-btn.info .clock-hand-minute,
.data-row:hover .action-btn.info .clock-hand-minute,
.bot-card:hover .action-btn.info .clock-hand-minute,
tr:hover .action-btn.info .clock-hand-minute {
  animation: clock-minute-spin 1s linear infinite;
}

.client-card:hover .action-btn.info .clock-hand-hour,
.table-row:hover .action-btn.info .clock-hand-hour,
.data-row:hover .action-btn.info .clock-hand-hour,
.bot-card:hover .action-btn.info .clock-hand-hour,
tr:hover .action-btn.info .clock-hand-hour {
  animation: clock-hour-spin 4s linear infinite;
}

@keyframes clock-minute-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes clock-hour-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Universal clock animation for all clock icons */
.clock-animated .clock-hand-hour,
.clock-animated .clock-hand-minute {
  transform-origin: 12px 12px;
  transition: transform 0.3s ease;
}

.emp-row:hover .clock-animated .clock-hand-minute,
.deposit-row:hover .clock-animated .clock-hand-minute,
.table-row:hover .clock-animated .clock-hand-minute,
.region-row:hover .clock-hand-minute,
.message-row:hover .clock-hand-minute,
.courier-row:hover .clock-hand-minute,
.bot-row:hover .clock-hand-minute,
.product-row:hover .clock-hand-minute {
  animation: clock-minute-spin 1s linear infinite;
}

.emp-row:hover .clock-animated .clock-hand-hour,
.deposit-row:hover .clock-animated .clock-hand-hour,
.table-row:hover .clock-animated .clock-hand-hour,
.region-row:hover .clock-hand-hour,
.message-row:hover .clock-hand-hour,
.courier-row:hover .clock-hand-hour,
.bot-row:hover .clock-hand-hour,
.product-row:hover .clock-hand-hour {
  animation: clock-hour-spin 4s linear infinite;
}

.region-label {
  color: var(--text-secondary);
  font-weight: 400;
}

/* Region Modal Styles */
.region-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.region-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.region-modal {
  box-sizing: border-box;
  width: 715px;
  background: rgba(15, 15, 15, 0.8);
  border: 1px solid #1C1C1C;
  backdrop-filter: blur(37.5px);
  -webkit-backdrop-filter: blur(37.5px);
  border-radius: 18px;
  padding: 20px;
  transform: scale(0.9) translateY(-20px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.region-modal.active {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.region-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.region-modal-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.5px;
  color: #FFFFFF;
}

.region-modal-close {
  width: 19px;
  height: 19px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.region-modal-close:hover {
  opacity: 0.7;
}

.region-modal-close svg {
  width: 19px;
  height: 19px;
  color: #FFFFFF;
}

.region-modal-body {
  margin-bottom: 20px;
}

.region-modal-label {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #969696;
  margin-bottom: 5px;
}

.region-modal-input {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  padding: 0 14px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  outline: none;
  transition: border-color 0.2s ease;
}

.region-modal-input:focus {
  border-color: #0088FF;
}

.region-modal-input::placeholder {
  color: #969696;
}

.region-modal-footer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.region-modal-btn {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.1s ease;
}

.region-modal-btn:hover {
  opacity: 0.9;
}

.region-modal-btn:active {
  transform: scale(0.98);
}

.region-modal-btn.green {
  background: #117C2C;
}

.region-modal-btn.red {
  background: #FF383C;
  margin-left: auto;
}

.modal-field {
  margin-bottom: 15px;
}

.modal-field:last-child {
  margin-bottom: 0;
}

.modal-select-wrapper {
  position: relative;
}

.modal-select {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.modal-select:hover {
  border-color: #333;
}

.modal-select.open {
  border-color: #0088FF;
}

.modal-select-text {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
}

.modal-select-arrow {
  width: 16px;
  height: 16px;
  color: #969696;
  transition: transform 0.2s ease;
}

.modal-select.open .modal-select-arrow {
  transform: rotate(180deg);
}

.modal-select-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  padding: 8px 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  max-height: 200px;
  overflow-y: auto;
}

.modal-select-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.modal-select-option {
  padding: 10px 14px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.2s ease;
}

.modal-select-option:hover {
  background: rgba(255, 255, 255, 0.1);
}

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

.products-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.toolbar-buttons {
  display: flex;
  gap: 12px;
}

.add-btn.bulk {
  background: var(--accent-green);
}

.products-table {
  box-sizing: border-box;
  background: rgba(15, 15, 15, 0.6);
  border: 1px solid #1C1C1C;
  border-radius: 18px;
  padding: 25px;
  min-height: 500px;
}

.products-header {
  display: grid;
  grid-template-columns: 50px 150px 120px 200px 1fr 60px;
  gap: 10px;
  padding: 0 15px;
  margin-bottom: 10px;
  color: #969696;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
}

.products-header .col-id {
  color: #969696;
}

.products-header .col-name,
.products-header .col-group {
  color: #FFFFFF;
}

.products-header .col-weight {
  color: #FFFFFF;
  text-align: center;
  align-self: end;
}

.products-header .col-price {
  color: #FFFFFF;
  text-align: center;
}

.products-header .col-action {
  text-align: right;
  color: #FFFFFF;
}

.products-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-row {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 50px 150px 120px 200px 1fr 60px;
  gap: 10px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  padding: 0 15px;
  align-items: center;
  height: 46px;
}

.product-id {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #969696;
}

.product-name {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
}

.product-group {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
}

.product-weight {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
  text-align: center;
}

.product-price {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
  text-align: center;
}

.product-action {
  display: flex;
  justify-content: flex-end;
}

/* Product Modals */
.product-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.product-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.product-modal {
  box-sizing: border-box;
  width: 850px;
  max-height: 90vh;
  background: rgba(15, 15, 15, 0.8);
  border: 1px solid #1C1C1C;
  backdrop-filter: blur(37.5px);
  border-radius: 18px;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  overflow-y: auto;
}

.product-modal-overlay.active .product-modal {
  transform: translateY(0);
  opacity: 1;
}

.product-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.product-modal-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.5px;
  color: #FFFFFF;
}

.product-modal-close {
  width: 19px;
  height: 19px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-modal-close svg {
  width: 19px;
  height: 19px;
  color: #FFFFFF;
}

.product-modal-close:hover svg {
  color: #FF383C;
}

.product-modal-body {
  padding: 0 20px 20px;
}

.product-modal-tabs {
  display: flex;
  gap: 3px;
  padding: 5px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 18px;
  width: fit-content;
  margin-bottom: 20px;
}

.product-modal-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 16px;
  background: transparent;
  border: none;
  border-radius: 13px;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 14px;
  color: #969696;
  cursor: pointer;
  opacity: 0.5;
  transition: all 0.2s ease;
}

.product-modal-tab.active {
  background: #008FCD;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  opacity: 1;
}

.product-modal-tab:hover:not(.active) {
  opacity: 0.8;
}

.product-tab-content {
  display: none;
  opacity: 0;
  transform: translateX(10px);
}

.product-tab-content.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  animation: tabFadeIn 0.3s ease forwards;
}

@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.product-form-group {
  margin-bottom: 16px;
}

.product-form-label {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #969696;
  margin-bottom: 5px;
}

.product-form-input {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  padding: 0 15px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
}

.product-form-input::placeholder {
  color: rgba(150, 150, 150, 0.5);
}

.product-form-input:focus {
  outline: none;
  border-color: #0088FF;
}

.product-form-row {
  display: flex;
  gap: 18px;
}

.product-form-row .product-form-group {
  flex: 1;
}

.product-form-textarea {
  box-sizing: border-box;
  width: 100%;
  height: 80px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  padding: 15px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
  resize: none;
}

.product-form-textarea::placeholder {
  color: rgba(150, 150, 150, 0.5);
}

.product-form-select-wrapper {
  position: relative;
}

.product-form-select {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  padding: 0 40px 0 15px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.product-form-select-arrow {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #969696;
  pointer-events: none;
}

.product-form-select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  margin-top: 4px;
  z-index: 10;
  max-height: 200px;
  overflow-y: auto;
  display: none;
}

.product-form-select-dropdown.open {
  display: block;
  animation: fadeInUp 0.2s ease forwards;
}

.product-form-select-option {
  padding: 12px 15px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.2s ease;
}

.product-form-select-option:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* City Prices Table */
.city-prices-section {
  margin-top: 20px;
}

.city-prices-label {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #969696;
  margin-bottom: 10px;
}

.city-prices-table {
  box-sizing: border-box;
  background: rgba(15, 15, 15, 0.6);
  border: 1px solid #1C1C1C;
  border-radius: 18px;
  padding: 25px;
}

.city-prices-empty {
  width: 810px;
  height: 69px;
  position: relative;
  padding: 0;
}

.city-prices-header-static {
  position: relative;
  width: 100%;
  height: 100%;
}

.city-prices-header-static span {
  position: absolute;
  top: 25px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: -0.3px;
  color: #969696;
}

.city-prices-header {
  display: grid;
  grid-template-columns: 130px 126px 137px 1fr 46px;
  gap: 5px;
  padding: 0 0 15px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: -0.3px;
  color: #969696;
}

.city-prices-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.city-price-row {
  display: grid;
  grid-template-columns: 130px 126px 137px 1fr 46px;
  gap: 5px;
  align-items: center;
}

.city-price-row .product-form-select,
.city-price-row .product-form-input {
  height: 46px;
}

.city-price-delete-btn {
  width: 46px;
  height: 46px;
  background: #FF383C;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.city-price-delete-btn:hover {
  background: #e62e32;
}

.city-price-delete-btn svg {
  width: 20px;
  height: 20px;
  color: #FFFFFF;
}

.add-city-price-btn {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  gap: 10px;
  background: #117C2C;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  cursor: pointer;
  margin-top: 15px;
  transition: background 0.2s ease;
}

.add-city-price-btn:hover {
  background: #0d6623;
}

/* Nested Modal for City Price Row */
.nested-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.nested-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.nested-modal {
  box-sizing: border-box;
  width: 850px;
  background: rgba(15, 15, 15, 0.95);
  border: 1px solid #1C1C1C;
  backdrop-filter: blur(37.5px);
  border-radius: 18px;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  padding: 20px;
}

.nested-modal-overlay.active .nested-modal {
  transform: translateY(0);
  opacity: 1;
}

.nested-modal-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #FFFFFF;
  margin-bottom: 20px;
}

/* Happy Hours Section */
.happy-hours-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.happy-hours-checkbox input[type="checkbox"] {
  display: none;
}

.happy-hours-checkbox-box {
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 1px solid #969696;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.happy-hours-checkbox input[type="checkbox"]:checked + .happy-hours-checkbox-box {
  background: #0088FF;
  border-color: #0088FF;
}

.happy-hours-checkbox input[type="checkbox"]:checked + .happy-hours-checkbox-box::after {
  content: '';
  width: 8px;
  height: 6px;
  border: 2px solid #FFFFFF;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
  margin-top: -2px;
}

.happy-hours-checkbox-label {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
  cursor: pointer;
}

.hours-grid-label {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #969696;
  margin-bottom: 10px;
}

.hours-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.hour-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hour-checkbox input[type="checkbox"] {
  display: none;
}

.hour-checkbox-box {
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 1px solid #969696;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.hour-checkbox input[type="checkbox"]:checked + .hour-checkbox-box {
  background: #0088FF;
  border-color: #0088FF;
}

.hour-checkbox input[type="checkbox"]:checked + .hour-checkbox-box::after {
  content: '';
  width: 8px;
  height: 6px;
  border: 2px solid #FFFFFF;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
  margin-top: -2px;
}

.hour-checkbox-label {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  cursor: pointer;
}

/* Bulk Modal */
.bulk-modal-info {
  margin-bottom: 20px;
}

.bulk-modal-info-text {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.3px;
  color: rgba(150, 150, 150, 0.5);
  margin-bottom: 20px;
}

.bulk-modal-columns {
  display: flex;
  gap: 80px;
  margin-bottom: 20px;
}

.bulk-modal-column {
  display: flex;
  flex-direction: column;
}

.bulk-modal-column-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
  margin-bottom: 5px;
}

.bulk-modal-column-subtitle {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.3px;
  color: rgba(255, 255, 255, 0.9);
}

.bulk-modal-example {
  margin-bottom: 20px;
}

.bulk-modal-example-label {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.3px;
  color: rgba(150, 150, 150, 0.5);
  margin-bottom: 10px;
}

.bulk-modal-example-text {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
}

.bulk-modal-textarea {
  box-sizing: border-box;
  width: 100%;
  height: 200px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  padding: 15px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
  resize: none;
}

.bulk-modal-textarea::placeholder {
  color: rgba(150, 150, 150, 0.5);
}

/* Product Modal Footer */
.product-modal-footer {
  display: flex;
  gap: 10px;
  padding: 20px;
  padding-top: 0;
}

.product-modal-btn {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  gap: 10px;
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.product-modal-btn.green {
  background: #117C2C;
}

.product-modal-btn.green:hover {
  background: #0d6623;
}

.product-modal-btn.red {
  background: #FF383C;
  margin-left: auto;
}

.product-modal-btn.red:hover {
  background: #e62e32;
}

.groups-table {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  overflow: hidden;
  min-height: 500px;
}

.groups-header {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 20px;
  padding: 24px 40px;
  color: var(--text-secondary);
  font-size: 16px;
  letter-spacing: -0.3px;
}

.groups-body {
  padding: 0 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.group-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px 16px;
  align-items: center;
  min-height: 54px;
}

.group-id {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: -0.3px;
}

.group-name {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.couriers-table {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  overflow: hidden;
  min-height: 500px;
}

.couriers-header {
  display: grid;
  grid-template-columns: 50px 80px 140px 120px 100px 130px 100px 140px;
  gap: 10px;
  padding: 24px 24px;
  color: var(--text-secondary);
  font-size: 14px;
  letter-spacing: -0.3px;
}

.couriers-body {
  padding: 0 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.courier-row {
  display: grid;
  grid-template-columns: 50px 80px 140px 120px 100px 130px 100px 140px;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px 8px;
  align-items: start;
}

.courier-id {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: -0.3px;
}

.courier-name {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.courier-stats {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-line {
  font-size: 12px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.courier-products {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.courier-tg {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.courier-balance {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.balance-line {
  font-size: 12px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.balance-link {
  font-size: 12px;
  color: var(--accent-blue);
  cursor: pointer;
}

.courier-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.action-link {
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
}

.courier-bot {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bot-status {
  font-size: 12px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.addresses-table {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  overflow: hidden;
  min-height: 500px;
}

.addresses-header {
  display: grid;
  grid-template-columns: 50px 120px 180px 1fr 60px 50px;
  gap: 16px;
  padding: 24px 24px;
  color: var(--text-secondary);
  font-size: 14px;
  letter-spacing: -0.3px;
}

.addresses-body {
  padding: 0 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.address-row {
  display: grid;
  grid-template-columns: 50px 120px 180px 1fr 60px 50px;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px 8px;
  align-items: center;
}

.address-id {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: -0.3px;
}

.address-city {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.address-product {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.address-location {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.location-text {
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.location-coords {
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: -0.3px;
}

.address-photo {
  display: flex;
  justify-content: center;
}

.checkbox-container {
  display: block;
  position: relative;
  cursor: pointer;
  width: 18px;
  height: 18px;
}

.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: transparent;
  border: 2px solid var(--border-color);
  border-radius: 4px;
}

.checkbox-container input:checked ~ .checkmark {
  background-color: var(--accent-green);
  border-color: var(--accent-green);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

.checkbox-container .checkmark:after {
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.address-copy {
  display: flex;
  justify-content: center;
}

.copy-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.copy-btn svg {
  width: 18px;
  height: 18px;
  fill: var(--text-secondary);
}

.copy-btn:hover svg {
  fill: var(--accent-blue);
}

.bots-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  align-items: center;
}

.filter-dropdown-wrapper {
  position: relative;
  z-index: 100;
}

.filter-dropdown-wrapper:focus-within,
.filter-dropdown-wrapper:has(.filter-dropdown-menu.open),
.filter-dropdown-wrapper:has(.filter-dropdown-menu.show) {
  z-index: 9999;
}

.filter-dropdown {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 14px;
  min-width: 166px;
  height: 40px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.filter-dropdown:hover {
  border-color: var(--accent-green);
}

.filter-dropdown.active {
  border-color: var(--accent-green);
  background: rgba(17, 124, 44, 0.1);
}

.filter-dropdown svg {
  width: 16px;
  height: 16px;
  fill: var(--text-secondary);
}

.filter-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #161616;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-top: 4px;
  z-index: 9999;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: max-height 0.3s ease, opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

.date-picker-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.btn-apply-date,
.btn-reset-date {
  flex: 1;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-apply-date {
  background: var(--accent-green);
  border: 1px solid var(--accent-green);
  color: #fff;
}

.btn-apply-date:hover {
  background: #0e6624;
  border-color: #0e6624;
}

.btn-reset-date {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.btn-reset-date:hover {
  background: rgba(17, 124, 44, 0.15);
  border-color: var(--accent-green);
  color: var(--accent-green);
}

.btn-apply-date:active,
.btn-reset-date:active {
  transform: scale(0.98);
}

.filter-dropdown.active svg {
  transform: rotate(180deg);
}

.filter-dropdown svg {
  transition: transform 0.3s ease;
}

.filter-dropdown-menu.open,
.filter-dropdown.open .filter-dropdown-menu,
.filter-dropdown.active .filter-dropdown-menu,
.filter-dropdown-menu.show {
  max-height: 300px;
  overflow-y: auto;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.filter-dropdown-item {
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.2s ease, padding-left 0.2s ease, transform 0.15s ease;
  position: relative;
}

.filter-dropdown-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: var(--accent-green);
  transform: scaleY(0);
  transition: transform 0.2s ease;
  border-radius: 0 2px 2px 0;
}

.filter-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1);
  padding-left: 18px;
}

.filter-dropdown-item:hover::before {
  transform: scaleY(1);
}

.filter-dropdown-item:active {
  transform: scale(0.98);
}

.filter-dropdown-item.selected,
.filter-dropdown-item.active {
  background: rgba(17, 124, 44, 0.3);
  padding-left: 18px;
}

.filter-dropdown-item.selected::before,
.filter-dropdown-item.active::before {
  transform: scaleY(1);
}

.bots-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.bots-stats {
  display: flex;
  gap: 20px;
  color: var(--text-secondary);
  font-size: 14px;
}

.delete-selected {
  color: #ff383c;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

.bots-table {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  overflow: hidden;
  min-height: 500px;
}

.bots-header {
  display: grid;
  grid-template-columns: 40px 50px 180px 140px 100px 140px 160px 50px;
  gap: 10px;
  padding: 24px 24px;
  color: var(--text-secondary);
  font-size: 16px;
  letter-spacing: -0.3px;
}

.bots-body {
  padding: 0 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bot-row {
  display: grid;
  grid-template-columns: 40px 50px 180px 140px 100px 140px 160px 50px;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px 8px;
  align-items: center;
}

.bot-check {
  display: flex;
  justify-content: center;
}

.bot-id {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: -0.3px;
}

.bot-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bot-username {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.bot-error {
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.bot-type {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.bot-status {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.3px;
}

.bot-status.active {
  color: var(--accent-green);
}

.bot-clients {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.bot-date {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.bot-action {
  display: flex;
  justify-content: flex-end;
  padding-right: 16px;
}

.bot-action .action-btn svg {
  fill: #0088ff;
}

.bots-toolbar-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-left: auto;
  justify-content: flex-end;
}

/* Bot Modal Styles */
.bot-modal {
  width: 638px;
  max-height: 90vh;
  background: rgba(15, 15, 15, 0.8);
  border: 1px solid #1C1C1C;
  backdrop-filter: blur(37.5px);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bot-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.bot-modal-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.5px;
  color: #FFFFFF;
}

.bot-modal-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bot-modal-close:hover {
  opacity: 0.7;
}

.bot-modal-body {
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

.bot-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.bot-form-label {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #969696;
}

.bot-form-dropdown-wrapper {
  position: relative;
}

.bot-form-dropdown {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 46px;
  padding: 0 15px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  cursor: pointer;
  box-sizing: border-box;
}

.bot-form-dropdown span {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
}

.bot-form-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  margin-top: 4px;
  z-index: 100;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.bot-form-dropdown-menu.open {
  max-height: 200px;
  overflow-y: auto;
}

.bot-form-dropdown-item {
  padding: 12px 15px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.2s ease;
}

.bot-form-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.bot-form-dropdown-item.selected {
  background: rgba(17, 124, 44, 0.3);
}

.bot-form-textarea {
  width: 100%;
  height: 80px;
  padding: 15px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  resize: none;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
  box-sizing: border-box;
}

.bot-form-textarea:focus {
  outline: none;
  border-color: #333;
}

.bot-form-hint {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.3px;
  color: rgba(150, 150, 150, 0.5);
}

.bot-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.bot-checkbox {
  width: 18px;
  height: 18px;
  accent-color: #117C2C;
}

.bot-checkbox-text {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
}

.bot-modal-footer {
  display: flex;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.bot-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: opacity 0.2s ease;
}

.bot-btn:hover {
  opacity: 0.9;
}

.bot-btn.primary {
  background: #117C2C;
}

.bot-btn.secondary {
  background: #117C2C;
}

.bot-btn.danger {
  background: #FF383C;
}

/* Edit Bot Modal Styles */
.edit-bot-modal {
  width: 638px;
  background: rgba(15, 15, 15, 0.8);
  border: 1px solid #1C1C1C;
  backdrop-filter: blur(37.5px);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes modalSlideOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
}

.edit-bot-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.edit-bot-modal-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.5px;
  color: #FFFFFF;
}

.edit-bot-modal-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.edit-bot-modal-close:hover {
  opacity: 0.7;
}

.edit-bot-modal-body {
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.edit-bot-info-row {
  display: flex;
  gap: 20px;
}

.edit-bot-info-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.edit-bot-info-label {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.3px;
  color: rgba(150, 150, 150, 0.5);
}

.edit-bot-info-value {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
}

.edit-bot-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.edit-bot-form-label {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #969696;
}

.edit-bot-textarea {
  width: 100%;
  height: 80px;
  padding: 15px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  resize: none;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.edit-bot-textarea:focus {
  outline: none;
  border-color: #333;
}

.edit-bot-variables {
  display: flex;
  gap: 40px;
}

.edit-bot-variable {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.edit-bot-variable-label {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.3px;
  color: rgba(150, 150, 150, 0.5);
}

.edit-bot-variable-value {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
}

.edit-bot-actions {
  display: flex;
  gap: 10px;
}

.edit-bot-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.2s ease;
}

.edit-bot-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.edit-bot-btn:active {
  transform: translateY(0);
}

.edit-bot-btn.primary {
  background: #117C2C;
}

.edit-bot-dates {
  display: flex;
  gap: 40px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.edit-bot-date-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.edit-bot-date-label {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.3px;
  color: rgba(150, 150, 150, 0.5);
}

.edit-bot-date-value {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
}

.messages-table {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  overflow: hidden;
  min-height: 500px;
}

.messages-header {
  display: grid;
  grid-template-columns: 60px 1fr 160px 180px 50px;
  gap: 10px;
  padding: 24px 24px;
  color: var(--text-secondary);
  font-size: 16px;
  letter-spacing: -0.3px;
}

.messages-body {
  padding: 0 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.message-row {
  display: grid;
  grid-template-columns: 60px 1fr 160px 180px 50px;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px 8px;
  align-items: center;
}

.message-row.large {
  padding: 14px 8px;
  align-items: flex-start;
}

.msg-id {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: -0.3px;
  padding-left: 6px;
}

.msg-text {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  line-height: 1.4;
}

.msg-slug {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.msg-date {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.msg-action {
  display: flex;
  justify-content: center;
}

.msg-action .action-btn svg {
  fill: #0088ff;
}

.clients-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  align-items: center;
  justify-content: space-between;
}

.clients-filters-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-dropdown-btn {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px 14px;
  gap: 10px;
  min-height: 40px;
  min-width: 120px;
  background: rgba(15, 15, 15, 0.6);
  border: 1px solid #1C1C1C;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.filter-dropdown-btn:hover {
  border-color: #2C2C2C;
}

.filter-dropdown-btn span {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.filter-dropdown-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.filter-dropdown-btn.open svg {
  transform: rotate(180deg);
}

.filter-dropdown-btn.open {
  border-color: #008FCD;
}

.filter-dropdown-wrapper {
  position: relative;
}

.filter-dropdown-menu {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  min-width: 100%;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 8px;
  padding: 8px 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.filter-dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.filter-dropdown-item {
  padding: 10px 15px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.2s ease;
  white-space: nowrap;
}

.filter-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.filter-dropdown-item.active {
  background: rgba(0, 143, 205, 0.2);
  color: #008FCD;
}

.date-filter-menu {
  min-width: 280px;
  padding: 0;
}

.date-filter-header {
  padding: 15px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
  border-bottom: 1px solid #1C1C1C;
}

.date-filter-body {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.date-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.date-filter-row label {
  width: 30px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #969696;
}

.date-filter-input {
  flex: 1;
  height: 40px;
  padding: 0 12px;
  background: #0F0F0F;
  border: 1px solid #1C1C1C;
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  cursor: pointer;
}

.date-filter-input:focus {
  outline: none;
  border-color: #008FCD;
}

.date-filter-footer {
  padding: 15px;
  border-top: 1px solid #1C1C1C;
}

.date-filter-apply {
  width: 100%;
  height: 40px;
  background: #008FCD;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.2s ease;
}

.date-filter-apply:hover {
  background: #0077aa;
}

.client-row {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.client-row.hidden {
  opacity: 0;
  transform: translateY(-10px);
  display: none;
}

.client-row.visible {
  opacity: 1;
  transform: translateY(0);
}

.clients-filters-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.filter-label {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
}

.filter-input {
  box-sizing: border-box;
  height: 40px;
  padding: 12px 14px;
  background: rgba(15, 15, 15, 0.6);
  border: 1px solid #1C1C1C;
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
}

.filter-input:focus {
  outline: none;
  border-color: #008FCD;
}

.filter-search-btn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  width: 127px;
  height: 40px;
  background: #008FCD;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.filter-search-btn:hover {
  opacity: 0.9;
}

/* Balance Modal */
.balance-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.balance-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.balance-modal {
  box-sizing: border-box;
  position: relative;
  width: 638px;
  height: 216px;
  background: rgba(15, 15, 15, 0.8);
  border: 1px solid #1C1C1C;
  backdrop-filter: blur(37.5px);
  border-radius: 18px;
  padding: 20px;
  transform: scale(0.9) translateY(-20px);
  transition: transform 0.3s ease;
}

.balance-modal-overlay.active .balance-modal {
  transform: scale(1) translateY(0);
}

.balance-modal-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.5px;
  color: #FFFFFF;
}

.balance-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 19px;
  height: 19px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.balance-modal-close:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

.balance-modal-close svg {
  width: 19px;
  height: 19px;
}

.balance-modal-body {
  margin-top: 20px;
}

.balance-label {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #969696;
  margin-bottom: 5px;
}

.balance-input {
  box-sizing: border-box;
  width: 598px;
  height: 46px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  padding: 12px 14px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
}

.balance-input:focus {
  outline: none;
  border-color: #008FCD;
}

.balance-modal-footer {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: flex;
  gap: 10px;
}

.balance-btn-add {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  width: 93px;
  height: 40px;
  background: #117C2C;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.2s ease;
}

.balance-btn-add:hover {
  background: #0f6a25;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(17, 124, 44, 0.3);
}

.balance-btn-add:active {
  transform: translateY(0);
  box-shadow: none;
}

.balance-btn-cancel {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  width: 164px;
  height: 40px;
  background: #2D2D2D;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.balance-btn-cancel:hover {
  background: #3D3D3D;
  transform: translateY(-1px);
}

.balance-btn-cancel:active {
  transform: translateY(0);
}

/* Client Info Modal */
.client-info-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.client-info-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.client-info-modal {
  box-sizing: border-box;
  position: relative;
  width: 850px;
  max-height: 90vh;
  background: rgba(15, 15, 15, 0.8);
  border: 1px solid #1C1C1C;
  backdrop-filter: blur(37.5px);
  border-radius: 18px;
  padding: 20px;
  overflow-y: auto;
  transform: scale(0.9) translateY(-20px);
  transition: transform 0.3s ease;
}

.client-info-modal-overlay.active .client-info-modal {
  transform: scale(1) translateY(0);
}

.client-info-modal-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.5px;
  color: #FFFFFF;
}

.client-info-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 19px;
  height: 19px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.client-info-section {
  margin-top: 20px;
  padding: 20px;
  background: rgba(15, 15, 15, 0.6);
  border: 1px solid #1C1C1C;
  border-radius: 18px;
}

.client-info-row {
  display: flex;
  gap: 40px;
}

.client-info-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.client-info-field .field-label {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.3px;
  color: rgba(150, 150, 150, 0.5);
}

.client-info-field .field-value {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
}

.client-info-checkboxes {
  margin-top: 20px;
  display: flex;
  gap: 40px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
  cursor: pointer;
}

.checkbox-item input[type="checkbox"],
.checkbox-item .custom-checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  background: transparent;
  border: 1px solid #969696;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.checkbox-item input[type="checkbox"]:checked,
.checkbox-item .custom-checkbox:checked {
  background: #008FCD;
  border-color: #008FCD;
}

.checkbox-item input[type="checkbox"]:checked::after,
.checkbox-item .custom-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-item input[type="checkbox"]:hover,
.checkbox-item .custom-checkbox:hover {
  border-color: #FFFFFF;
}

.client-info-balance-box {
  box-sizing: border-box;
  margin-top: 20px;
  display: flex;
  align-items: center;
  padding: 15px;
  gap: 60px;
  height: 66px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
}

.balance-info-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.balance-label {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.3px;
  color: rgba(150, 150, 150, 0.5);
}

.balance-value {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
}

.balance-actions-group {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}

.balance-action-link {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.3px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.balance-action-link:hover {
  opacity: 0.8;
}

.balance-action-link.add-balance {
  color: #117C2C;
}

.balance-action-link.subtract-balance {
  color: #FF383C;
}

.balance-action-link.change-discount {
  color: #008FCD;
}

.client-info-referral-section {
  margin-top: 20px;
}

.referral-row {
  display: flex;
  gap: 40px;
}

.referral-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.referral-field .field-label {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.3px;
  color: rgba(150, 150, 150, 0.5);
}

.referral-field .field-value {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
}

.client-mailing-checkbox {
  margin-top: 20px;
}

.client-info-stats {
  margin-top: 20px;
}

.stats-title {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.3px;
  color: rgba(150, 150, 150, 0.5);
  margin-bottom: 6px;
}

.stats-box {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 15px;
  gap: 30px;
  height: 66px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-item .stat-label {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.3px;
  color: rgba(150, 150, 150, 0.5);
}

.stat-item .stat-value {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
}

.client-info-block-status {
  margin-top: 20px;
}

.block-status-label {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.3px;
  color: rgba(150, 150, 150, 0.5);
}

.block-status-value {
  display: block;
  margin-top: 6px;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #FFFFFF;
}

.client-info-comment {
  margin-top: 20px;
}

.comment-label {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #969696;
}

.comment-textarea {
  margin-top: 10px;
  box-sizing: border-box;
  width: 100%;
  height: 100px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  padding: 12px 14px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  resize: none;
}

.comment-textarea:focus {
  outline: none;
  border-color: #008FCD;
}

.client-info-discounts {
  margin-top: 20px;
}

.discounts-label {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #969696;
}

.discounts-table {
  margin-top: 10px;
  background: rgba(15, 15, 15, 0.6);
  border: 1px solid #1C1C1C;
  border-radius: 18px;
  padding: 25px;
}

.discounts-header {
  display: grid;
  grid-template-columns: 150px 1fr 100px;
  gap: 20px;
}

.discounts-header span {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: -0.3px;
  color: #969696;
}

.add-row-btn {
  margin-top: 15px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  width: 138px;
  height: 46px;
  background: #008FCD;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.add-row-btn:hover {
  opacity: 0.85;
}

.client-info-footer {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.footer-btn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  height: 40px;
  background: #117C2C;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  cursor: pointer;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.footer-btn:hover {
  opacity: 0.85;
}

.footer-btn.save-add {
  width: 224px;
}

.footer-btn.apply {
  width: 103px;
}

.footer-btn.save {
  width: 98px;
}

/* Write Message Modal */
.write-message-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.write-message-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.write-message-modal {
  box-sizing: border-box;
  position: relative;
  width: 502px;
  height: 710px;
  background: rgba(15, 15, 15, 0.8);
  border: 1px solid #1C1C1C;
  backdrop-filter: blur(37.5px);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  transform: scale(0.9) translateY(-20px);
  transition: transform 0.3s ease;
}

.write-message-modal-overlay.active .write-message-modal {
  transform: scale(1) translateY(0);
}

.write-message-modal-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.5px;
  color: #FFFFFF;
}

.write-message-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 19px;
  height: 19px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.write-message-chat {
  flex: 1;
  margin-top: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chat-message {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chat-message.client-msg {
  align-items: flex-start;
}

.chat-message.employee-msg {
  align-items: flex-end;
}

.msg-author {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  line-height: 14px;
  color: #969696;
}

.msg-bubble {
  padding: 15px;
  background: #161616;
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  color: #FFFFFF;
  max-width: 80%;
}

.msg-time {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  line-height: 14px;
  color: #969696;
}

.write-message-input-section {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.write-message-textarea {
  box-sizing: border-box;
  width: 100%;
  height: 80px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  padding: 12px 14px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  resize: none;
}

.write-message-textarea:focus {
  outline: none;
  border-color: #008FCD;
}

.write-message-file-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.file-label {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #969696;
}

.file-row {
  display: flex;
  gap: 10px;
}

.file-select-btn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  height: 46px;
  background: #008FCD;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.file-select-btn:hover {
  opacity: 0.9;
}

.file-name-display {
  box-sizing: border-box;
  flex: 1;
  display: flex;
  align-items: center;
  padding: 12px 14px;
  height: 46px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
}

.export-btn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 95px;
  height: 40px;
  background: #117C2C;
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.export-btn:hover {
  opacity: 0.9;
}

.export-btn svg,
.export-btn img {
  width: 16px;
  height: 16px;
}

.clients-table {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  overflow: hidden;
}

.clients-header {
  display: grid;
  grid-template-columns: 60px 130px 120px 140px 200px 130px 80px 90px 40px;
  gap: 8px;
  padding: 24px 16px;
  color: var(--text-secondary);
  font-size: 16px;
  letter-spacing: -0.3px;
}

.clients-body {
  padding: 0 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.client-row {
  display: grid;
  grid-template-columns: 60px 130px 120px 140px 200px 130px 80px 90px 40px;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 18px 8px;
  align-items: flex-start;
}

.client-id {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: -0.3px;
  padding-left: 6px;
  padding-top: 40px;
}

.client-telegram {
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
}

.tg-id {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
}

.tg-username {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
}

.tg-name {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
}

.client-referral {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  padding-top: 40px;
}

.client-finance {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.finance-info {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: -0.3px;
}

.finance-action {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.3px;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.finance-action.add {
  color: #117c2c;
}

.finance-action.add:hover {
  color: #1a9e3a;
  text-shadow: 0 0 6px rgba(17, 124, 44, 0.3);
}

.finance-action.remove {
  color: #ff383c;
}

.finance-action.remove:hover {
  color: #ff5a5e;
  text-shadow: 0 0 6px rgba(255, 56, 60, 0.3);
}

.finance-action.edit {
  color: var(--accent-blue);
}

.finance-action.edit:hover {
  color: #00a8f3;
  text-shadow: 0 0 6px rgba(0, 143, 205, 0.3);
}

.client-stats {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.stat-row {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: -0.3px;
  line-height: 1.4;
}

.stat-row.muted {
  color: var(--text-secondary);
}

.client-status {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.check-icon {
  width: 16px;
  height: 16px;
  fill: var(--accent-green);
}

.status-item span {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
}

.block-link {
  font-size: 12px;
  color: #ff383c;
  text-decoration: underline;
  margin-top: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.block-link:hover {
  color: #ff5a5e;
  text-shadow: 0 0 8px rgba(255, 56, 60, 0.4);
}

.unblock-link {
  font-size: 12px;
  color: #117C2C;
  text-decoration: underline;
  margin-top: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.unblock-link:hover {
  color: #1a9e3a;
  text-shadow: 0 0 8px rgba(17, 124, 44, 0.4);
}

.status-item.blocked span {
  color: #FFFFFF;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
}

.block-icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  flex-shrink: 0;
  display: inline-block;
}

.client-message {
  display: flex;
  align-items: center;
  padding-top: 30px;
}

.message-link {
  font-weight: 500;
  font-size: 14px;
  color: var(--accent-blue);
  text-decoration: none;
  line-height: 1.3;
}

.client-date {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  padding-top: 30px;
}

.client-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-top: 36px;
}

.client-action .action-btn svg {
  fill: #0088ff;
}

.support-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  align-items: center;
  justify-content: space-between;
}

.date-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 15, 15, 0.6);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 14px;
}

.date-input {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  outline: none;
  cursor: pointer;
}

.calendar-icon {
  width: 16px;
  height: 16px;
  fill: var(--text-secondary);
}

.support-table {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  overflow: hidden;
}

.support-header {
  display: grid;
  grid-template-columns: 280px 1fr 180px;
  gap: 10px;
  padding: 24px 40px;
  color: var(--text-secondary);
  font-size: 16px;
  letter-spacing: -0.3px;
}

.support-body {
  padding: 0 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.support-row {
  display: grid;
  grid-template-columns: 280px 1fr 180px;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px;
  align-items: center;
}

.support-client {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.client-name {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.open-dialog {
  font-weight: 500;
  font-size: 14px;
  color: var(--accent-blue);
  text-decoration: underline;
  letter-spacing: -0.3px;
}

.support-message {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.support-date {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  text-align: right;
}

.employees-table {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  overflow: hidden;
}

.employees-header {
  display: grid;
  grid-template-columns: 60px 200px 200px 120px 1fr;
  gap: 10px;
  padding: 24px 40px;
  color: var(--text-secondary);
  font-size: 16px;
  letter-spacing: -0.3px;
}

.employees-body {
  padding: 0 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.emp-row {
  display: grid;
  grid-template-columns: 60px 200px 200px 120px 1fr;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px;
  align-items: center;
}

.emp-id {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: -0.3px;
}

.emp-login {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.emp-level {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.emp-2fa {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.3px;
}

.emp-2fa.status-red {
  color: #ff383c;
}

.emp-2fa.status-green {
  color: #117c2c;
}

.emp-action {
  display: flex;
  justify-content: flex-end;
}

.emp-action svg {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.btn-add-right {
  background: #117c2c;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
  margin-left: auto;
  white-space: nowrap;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.access-levels-table {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  overflow: hidden;
}

.access-levels-header {
  display: grid;
  grid-template-columns: 60px 200px 1fr 100px;
  gap: 10px;
  padding: 24px 40px;
  color: var(--text-secondary);
  font-size: 16px;
  letter-spacing: -0.3px;
}

.access-levels-body {
  padding: 0 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.level-row {
  display: grid;
  grid-template-columns: 60px 200px 1fr 100px;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px;
  align-items: center;
}

.level-id {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: -0.3px;
}

.level-name {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.level-permissions {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: -0.3px;
}

.level-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.action-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.action-icon.edit {
  fill: #0088ff;
}

.action-icon.delete {
  fill: #ff383c;
}

.promocodes-table {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  overflow: hidden;
}

.promocodes-header {
  display: grid;
  grid-template-columns: 50px 130px 180px 100px 100px 100px 150px 80px;
  gap: 10px;
  padding: 24px 40px;
  color: var(--text-secondary);
  font-size: 16px;
  letter-spacing: -0.3px;
}

.promocodes-body {
  padding: 0 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.promo-row {
  display: grid;
  grid-template-columns: 50px 130px 180px 100px 100px 100px 150px 80px;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px;
  align-items: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.promo-row:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.15);
}

.promo-id {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: -0.3px;
}

.promo-code-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.promo-code {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.copy-icon {
  width: 16px;
  height: 16px;
  fill: var(--text-primary);
  cursor: pointer;
  opacity: 0.7;
}

.copy-icon:hover {
  opacity: 1;
}

.promo-value,
.promo-type,
.promo-creator {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.promo-status {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.3px;
  background: transparent !important;
}

.promo-status.status-active {
  color: #117c2c;
  background: transparent !important;
}

.promo-status.status-inactive {
  color: #969696;
  background: transparent !important;
}

.promo-dates {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.promo-dates span {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.promo-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.promo-actions-table {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  overflow: hidden;
}

.promo-actions-header {
  display: grid;
  grid-template-columns: 50px 140px 140px 140px 100px 180px 80px;
  gap: 10px;
  padding: 24px 40px;
  color: var(--text-secondary);
  font-size: 16px;
  letter-spacing: -0.3px;
}

.promo-actions-header .col-action-count {
  font-size: 14px;
  line-height: 1.3;
}

.promo-actions-body {
  padding: 0 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.action-row {
  display: grid;
  grid-template-columns: 50px 140px 140px 140px 100px 180px 80px 50px;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px;
  align-items: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.action-row:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.15);
}

.action-row.tall {
  padding: 14px;
  min-height: 62px;
}

.action-id {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: -0.3px;
}

.action-type,
.action-start,
.action-end,
.action-count,
.action-bonus {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.action-status {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.3px;
  background: transparent !important;
}

.action-status.status-active {
  color: #117c2c;
  background: transparent !important;
}

.action-status.status-paused {
  color: #fc0;
  background: transparent !important;
}

.action-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.date-range {
  min-width: 180px;
}

.cumulative-table {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  overflow: hidden;
}

.cumulative-header {
  display: grid;
  grid-template-columns: 150px 150px 200px;
  gap: 10px;
  padding: 24px 40px;
  color: var(--text-secondary);
  font-size: 16px;
  letter-spacing: -0.3px;
}

.cumulative-body {
  padding: 0 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cumul-row {
  display: grid;
  grid-template-columns: 150px 150px 200px 1fr;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px;
  align-items: center;
  cursor: pointer;
  transition: background 0.15s ease;
}

.cumul-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.cumul-count,
.cumul-discount,
.cumul-date {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.cumul-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.reviews-table {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  overflow: hidden;
}

.reviews-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.review-card {
  display: grid;
  grid-template-columns: 240px 70px 180px 40px 80px 110px 150px 50px;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px;
  align-items: start;
  min-height: 185px;
  transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease;
  opacity: 1;
  transform: translateY(0);
}

.review-card.hiding {
  opacity: 0;
  transform: translateY(-10px);
}

.review-card.hidden {
  display: none;
}

.review-card.showing {
  animation: reviewCardShow 0.3s ease forwards;
}

@keyframes reviewCardShow {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.review-user-section {
  display: flex;
  gap: 10px;
}

.review-user-id {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-secondary);
  padding-top: 70px;
}

.review-user-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.review-username {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
}

.review-user-shop {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
}

.review-user-stat {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
}

.review-user-stat.muted {
  color: var(--text-secondary);
}

.review-order-id {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  padding-top: 70px;
}

.review-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 60px;
}

.review-text-main {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
}

.review-response {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
}

.response-label {
  color: rgba(150, 150, 150, 0.9);
}

.review-rating {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  padding-top: 70px;
}

.review-courier {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  padding-top: 70px;
}

.review-status {
  font-weight: 500;
  font-size: 14px;
  padding-top: 70px;
}

.review-status.status-moderation {
  color: #fc0;
}

.review-status.status-approved {
  color: #117C2C;
}

.review-status.status-rejected {
  color: #ff383c;
}

.review-date {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  padding-top: 70px;
}

.review-actions {
  display: flex;
  gap: 5px;
  padding-top: 68px;
}

.review-actions .thumb-up,
.review-actions .thumb-down {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.review-actions .thumb-up:hover {
  stroke: #2ecc71;
}

.review-actions .thumb-down:hover {
  stroke: #e74c3c;
}

.action-icon.history-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.action-icon.history-icon:hover {
  fill: #33aaff;
}

.toolbar-spacer {
  flex: 1;
}

.publications-table {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.publications-header {
  display: grid;
  grid-template-columns: 40px 120px 350px 1fr 100px;
  width: 100%;
  max-width: 1116px;
  padding: 0 25px 15px 25px;
  box-sizing: border-box;
  border-bottom: none;
  background: transparent;
}

.publications-header .th {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: -0.3px;
  color: #969696;
}

.publications-header .th-id {
  text-align: left;
}

.publications-header .th-attachment {
  text-align: left;
}

.publications-header .th-text {
  text-align: left;
}

.publications-header .th-status {
  text-align: left;
}

.publications-header .th-action {
  text-align: left;
}

.publication-row {
  display: grid;
  grid-template-columns: 40px 120px 350px 1fr 100px;
  gap: 10px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  padding: 14px;
  align-items: center;
  margin-bottom: 10px;
  max-width: 1066px;
}

.publication-row.expanded {
  min-height: 130px;
  align-items: start;
}

.pub-id {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-secondary);
}

.pub-attachment {
  display: flex;
  align-items: center;
}

.pub-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
}

.pub-attachment-text {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
}

.pub-text {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
}

.publication-row.expanded .pub-text {
  padding-top: 42px;
}

.pub-status {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pub-status-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.pub-status-date {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
}

.pub-status-badges {
  display: flex;
  gap: 4px;
}

.badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.badge-gray {
  background: #3d3d3d;
}

.badge-green {
  background: #117c2c;
}

.badge-red {
  background: #ff383c;
}

.pub-action {
  display: flex;
  justify-content: flex-end;
}

.publication-row.expanded .pub-action {
  padding-top: 34px;
}

.btn-launch {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  gap: 10px;
  width: 74px;
  height: 32px;
  background: #008FCD;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-launch:hover {
  background: #0077aa;
}

.status-badge {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: white;
}

.status-active {
  background: #117c2c;
}

/* ===== PRELOADER WITH COSMIC EFFECTS ===== */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #050505;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader.fade-out {
  opacity: 0;
  visibility: hidden;
}

.preloader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  z-index: 2;
}

.preloader-logo {
  width: 180px;
  height: auto;
  animation: preloaderPulse 2s ease-in-out infinite;
  filter: drop-shadow(0 0 30px rgba(0, 143, 205, 0.6));
}

@keyframes preloaderPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 30px rgba(0, 143, 205, 0.6));
  }
  50% {
    transform: scale(1.05);
    filter: drop-shadow(0 0 50px rgba(0, 143, 205, 0.9));
  }
}

.preloader-spinner {
  width: 60px;
  height: 60px;
  position: relative;
}

.preloader-spinner::before,
.preloader-spinner::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}

.preloader-spinner::before {
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-top-color: var(--accent-color);
  border-right-color: var(--accent-color);
  animation: spinnerRotate 1s linear infinite;
}

.preloader-spinner::after {
  width: 70%;
  height: 70%;
  top: 15%;
  left: 15%;
  border: 2px solid transparent;
  border-bottom-color: rgba(0, 143, 205, 0.5);
  border-left-color: rgba(0, 143, 205, 0.5);
  animation: spinnerRotate 0.8s linear infinite reverse;
}

@keyframes spinnerRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Cosmic Stars Background */
.cosmic-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.cosmic-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  animation: cosmicTwinkle 3s ease-in-out infinite;
}

.cosmic-star::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.3);
}

@keyframes cosmicTwinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5); }
}

.cosmic-nebula {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
  animation: nebulaFloat 15s ease-in-out infinite;
}

.cosmic-nebula.nebula-1 {
  background: radial-gradient(circle, rgba(0, 143, 205, 0.8) 0%, transparent 70%);
  top: -100px;
  left: -100px;
  animation-delay: 0s;
}

.cosmic-nebula.nebula-2 {
  background: radial-gradient(circle, rgba(138, 43, 226, 0.6) 0%, transparent 70%);
  bottom: -150px;
  right: -100px;
  animation-delay: -5s;
}

.cosmic-nebula.nebula-3 {
  background: radial-gradient(circle, rgba(0, 200, 150, 0.5) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: -10s;
}

@keyframes nebulaFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -20px) scale(1.1); }
  50% { transform: translate(-20px, 30px) scale(0.9); }
  75% { transform: translate(-30px, -10px) scale(1.05); }
}

.shooting-star {
  position: absolute;
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.8), transparent);
  opacity: 0;
  animation: shootingStar 4s ease-in-out infinite;
}

.shooting-star:nth-child(1) {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
  transform: rotate(-30deg);
}

.shooting-star:nth-child(2) {
  top: 40%;
  right: 20%;
  animation-delay: 2s;
  transform: rotate(-45deg);
}

.shooting-star:nth-child(3) {
  bottom: 30%;
  left: 30%;
  animation-delay: 3.5s;
  transform: rotate(-25deg);
}

@keyframes shootingStar {
  0% { opacity: 0; transform: translateX(0) rotate(-30deg); }
  10% { opacity: 1; }
  30% { opacity: 0; transform: translateX(200px) rotate(-30deg); }
  100% { opacity: 0; transform: translateX(200px) rotate(-30deg); }
}

/* Page Transition */
.page-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #050505;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.page-transition-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* ===== PAGINATION SLIDER ===== */
.pagination-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  padding: 24px 0;
  margin-top: 16px;
}

.pagination-arrow {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.pagination-arrow:hover:not(:disabled) {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.pagination-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.pagination-arrow svg {
  width: 20px;
  height: 20px;
}

.pagination-pages {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  padding: 4px;
  background: #2a2a2a;
  border-radius: 10px;
}

.pagination-page {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 2;
}

.pagination-page:hover:not(.active) {
  background: rgba(255, 255, 255, 0.1);
}

.pagination-page.active {
  background: #008FCD;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 143, 205, 0.4);
  transform: scale(1.05);
}

.pagination-slider-bg {
  position: absolute;
  width: 40px;
  height: 40px;
  background: var(--accent-color);
  border-radius: 8px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  box-shadow: 0 4px 12px rgba(0, 143, 205, 0.4);
}

.pagination-ellipsis {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 14px;
}

.status-inactive {
  background: #ff383c;
}

.status-paused {
  background: #fc0;
  color: #000;
}

/* ===== GROUP MODAL ===== */
.group-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.group-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.group-modal {
  box-sizing: border-box;
  width: 715px;
  background: rgba(15, 15, 15, 0.8);
  border: 1px solid #1C1C1C;
  backdrop-filter: blur(37.5px);
  -webkit-backdrop-filter: blur(37.5px);
  border-radius: 18px;
  padding: 20px;
  transform: scale(0.9) translateY(20px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.group-modal-overlay.active .group-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.group-modal-overlay.closing .group-modal {
  transform: scale(0.9) translateY(20px);
  opacity: 0;
}

.group-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.group-modal-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.5px;
  color: #FFFFFF;
}

.group-modal-close {
  width: 19px;
  height: 19px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.group-modal-close:hover {
  opacity: 1;
}

.group-modal-body {
  margin-bottom: 30px;
}

.group-modal-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.group-modal-label {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #969696;
}

.group-modal-input {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  padding: 15px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
  outline: none;
  transition: border-color 0.2s;
}

.group-modal-input::placeholder {
  color: rgba(150, 150, 150, 0.5);
}

.group-modal-input:focus {
  border-color: #008FCD;
}

.group-modal-footer {
  display: flex;
  gap: 10px;
}

.group-modal-btn {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
  white-space: nowrap;
}

.group-modal-btn:hover {
  opacity: 0.9;
}

.group-modal-btn:active {
  transform: scale(0.98);
}

.group-modal-btn-green {
  background: #117C2C;
}

.group-modal-btn-red {
  background: #FF383C;
  margin-left: auto;
}

/* Group row animation */
.group-row.fade-in {
  animation: fadeInUp 0.3s ease forwards;
}

.group-row.fade-out {
  animation: fadeOutDown 0.3s ease forwards;
}

/* ===== COURIER MODAL ===== */
.courier-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  overflow-y: auto;
  padding: 20px;
}

.courier-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.courier-modal {
  box-sizing: border-box;
  width: 850px;
  max-height: 90vh;
  overflow-y: auto;
  background: rgba(15, 15, 15, 0.8);
  border: 1px solid #1C1C1C;
  backdrop-filter: blur(37.5px);
  -webkit-backdrop-filter: blur(37.5px);
  border-radius: 18px;
  padding: 20px;
  transform: scale(0.9) translateY(20px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.courier-modal-overlay.active .courier-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.courier-modal-overlay.closing .courier-modal {
  transform: scale(0.9) translateY(20px);
  opacity: 0;
}

.courier-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.courier-modal-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.5px;
  color: #FFFFFF;
}

.courier-modal-close {
  width: 19px;
  height: 19px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.courier-modal-close:hover {
  opacity: 1;
}

.courier-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.courier-modal-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.courier-modal-label {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #969696;
}

.courier-modal-input {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  padding: 15px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
  outline: none;
  transition: border-color 0.2s;
}

.courier-modal-input::placeholder {
  color: rgba(150, 150, 150, 0.5);
}

.courier-modal-input:focus {
  border-color: #008FCD;
}

.courier-modal-textarea {
  box-sizing: border-box;
  width: 100%;
  height: 80px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  padding: 15px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
  outline: none;
  resize: none;
  transition: border-color 0.2s;
}

.courier-modal-textarea:focus {
  border-color: #008FCD;
}

.courier-modal-select {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: border-color 0.2s;
}

.courier-modal-select span {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #969696;
}

.courier-modal-select:hover {
  border-color: #008FCD;
}

.courier-dropdown-arrow {
  transition: transform 0.3s ease;
}

.courier-modal-select.open .courier-dropdown-arrow {
  transform: rotate(180deg);
}

.courier-dropdown-container {
  position: relative;
}

.courier-dropdown-list {
  position: absolute;
  top: calc(100% - 20px);
  left: 0;
  width: 100%;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  z-index: 100;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.courier-dropdown-list.open {
  max-height: 300px;
  overflow-y: auto;
  opacity: 1;
  transform: translateY(0);
}

.courier-dropdown-item {
  padding: 12px 15px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color 0.2s;
}

.courier-dropdown-item:hover {
  background: rgba(0, 143, 205, 0.2);
}

.courier-dropdown-item.selected {
  background: rgba(0, 143, 205, 0.3);
}

.courier-modal-hint {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.3px;
  color: rgba(150, 150, 150, 0.5);
  text-align: right;
}

.courier-modal-row {
  display: flex;
  align-items: center;
  gap: 40px;
}

.courier-modal-balance {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.courier-modal-balance .balance-label {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  color: #969696;
}

.courier-modal-balance .balance-value {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.courier-modal-link {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #008FCD;
  text-decoration: underline;
  margin-left: auto;
}

.courier-modal-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bot-status-warning {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #FF383C;
}

.bot-status-text {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(150, 150, 150, 0.7);
}

.courier-modal-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.courier-payout-table {
  box-sizing: border-box;
  background: rgba(15, 15, 15, 0.6);
  border: 1px solid #1C1C1C;
  border-radius: 18px;
  overflow: hidden;
}

.courier-payout-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: 15px 25px;
  gap: 20px;
}

.courier-payout-header span {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: -0.3px;
  color: #969696;
}

.courier-payout-body {
  display: flex;
  flex-direction: column;
}

.courier-payout-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: 10px 25px;
  gap: 20px;
  border-top: 1px solid #1C1C1C;
  animation: fadeInUp 0.3s ease;
}

.courier-payout-row input {
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 8px;
  padding: 8px 12px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  outline: none;
}

.courier-payout-row input:focus {
  border-color: #008FCD;
}

.courier-add-row-btn {
  width: fit-content;
  background: #008FCD;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 12px 20px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
  cursor: pointer;
  transition: opacity 0.2s;
}

.courier-add-row-btn:hover {
  opacity: 0.9;
}

.courier-modal-footer {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.courier-modal-buttons {
  display: flex;
  gap: 10px;
}

.courier-modal-btn {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
  white-space: nowrap;
}

.courier-modal-btn:hover {
  opacity: 0.9;
}

.courier-modal-btn:active {
  transform: scale(0.98);
}

.courier-modal-btn-green {
  background: #117C2C;
}

.courier-modal-btn-red {
  background: #FF383C;
  margin-left: auto;
}

.courier-modal-dates {
  display: flex;
  gap: 40px;
}

.courier-date-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.courier-date-item .date-label {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  color: #969696;
}

.courier-date-item .date-value {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
}

/* Courier row animation */
.courier-row.fade-in {
  animation: fadeInUp 0.3s ease forwards;
}

.courier-row.fade-out {
  animation: fadeOutDown 0.3s ease forwards;
}

/* ===== ADDRESSES PAGE NEW DESIGN ===== */
.addresses-toolbar {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

.toolbar-row-top {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.addresses-search {
  width: 274px;
  background: rgba(15, 15, 15, 0.8);
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  padding: 0 15px;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
}


.addresses-search .search-input {
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  width: 100%;
  outline: none;
}

.addresses-search .search-input::placeholder {
  color: #969696;
}

.filters-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-dropdown {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  background: rgba(15, 15, 15, 0.6);
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.filter-dropdown:hover {
  border-color: #008FCD;
}

.filter-dropdown span {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
}

.filter-dropdown.date-filter {
  min-width: 180px;
}

.toolbar-buttons {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.bulk-btn {
  background: linear-gradient(180deg, #117C2C 0%, #0D5E21 100%);
}

.toolbar-row-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.action-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.action-label {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #969696;
}

.action-dropdown {
  min-width: 140px;
}

.execute-btn {
  padding: 10px 20px;
  background: #008FCD;
  border: none;
  border-radius: 10px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
  cursor: pointer;
  transition: opacity 0.2s;
}

.execute-btn:hover {
  opacity: 0.9;
}

.page-stats {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #969696;
}

/* Addresses Data Table */
.addresses-data-table {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  overflow: hidden;
  padding: 24px;
  margin: 0 24px;
}

.addresses-data-table .data-table-header {
  display: grid;
  grid-template-columns: 34px 50px 110px 180px 80px 80px 100px 70px 80px 100px 36px;
  padding: 12px 14px;
  background: transparent;
  border-bottom: none;
  gap: 8px;
  margin-bottom: 10px;
}

.addresses-data-table .data-table-header > div {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #969696;
}

.addresses-data-table .data-table-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.addresses-data-table .data-table-row {
  display: grid;
  grid-template-columns: 34px 50px 110px 180px 80px 80px 100px 70px 80px 100px 36px;
  padding: 14px 14px;
  gap: 8px;
  background: #161616;
  border: 1px solid #1c1c1c;
  border-radius: 10px;
  align-items: center;
  transition: background-color 0.2s;
  min-height: 68px;
}

.addresses-data-table .data-table-row:hover {
  background: #1a1a1a;
}

.addresses-data-table .data-table-row:last-child {
  border-bottom: 1px solid #1c1c1c;
}

.data-table-row .col-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
}

.table-checkbox {
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 1px solid #969696;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
}

.table-checkbox:checked {
  background: #008FCD;
  border-color: #008FCD;
}

.table-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.data-table-row .col-num,
.data-table-row .col-product,
.data-table-row .col-district,
.data-table-row .col-courier,
.data-table-row .col-type,
.data-table-row .col-priority {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
}

.data-table-row .col-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.info-link {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.info-link:hover {
  opacity: 0.8;
}

.info-link svg {
  stroke: #FFFFFF;
  width: 12px;
  height: 12px;
}

.data-table-row .col-date {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.date-main {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
}

.date-time {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  color: #969696;
}

/* Status Badges - Addresses Page */
.data-table-row .status-badge {
  display: inline-block;
  padding: 0;
  background: transparent;
  border-radius: 0;
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
}

.data-table-row .status-badge.status-new {
  background: transparent;
  color: #117C2C;
}

.data-table-row .status-badge.status-paid {
  background: transparent;
  color: #117C2C;
}

.data-table-row .status-badge.status-refund {
  background: transparent;
  color: #FF383C;
}

/* Addresses Table Action Button - Blue Clock Icon */
.addresses-data-table .data-table-row .col-action {
  display: flex;
  justify-content: center;
  align-items: center;
}

.addresses-data-table .data-table-row .col-action .action-btn {
  width: 20px;
  height: 20px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
  padding: 0;
}

.addresses-data-table .data-table-row .col-action .action-btn:hover {
  opacity: 0.85;
  transform: scale(1.1);
}

.addresses-data-table .data-table-row .col-action .action-btn svg {
  width: 20px;
  height: 20px;
}

/* Action Dropdown Animated */
.action-dropdown-wrapper {
  position: relative;
  display: inline-block;
}

.action-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  min-width: 280px;
  background: #33363F;
  border: 1px solid #4a4d57;
  border-radius: 6px;
  margin-top: 4px;
  z-index: 1000;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.2s ease;
}

.action-dropdown-menu.open {
  max-height: 400px;
  overflow-y: auto;
  opacity: 1;
}

.action-dropdown-item {
  padding: 10px 14px;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
}

.action-dropdown-item:hover {
  background: rgba(0, 143, 205, 0.2);
}

.action-dropdown-item.selected {
  background: rgba(0, 143, 205, 0.3);
}

.action-dropdown-divider {
  height: 1px;
  background: #4a4d57;
  margin: 4px 0;
}

.action-dropdown.open svg {
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

.action-dropdown svg {
  transition: transform 0.2s ease;
}

/* Filter Menu Styles */
.filter-dropdown-wrapper {
  position: relative;
  display: inline-block;
}

.filter-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 150px;
  background: #33363F;
  border: 1px solid #4a4d57;
  border-radius: 6px;
  margin-top: 4px;
  z-index: 1000;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.2s ease;
}

.filter-menu.open {
  max-height: 300px;
  overflow-y: auto;
  opacity: 1;
}

.filter-menu-item {
  padding: 10px 14px;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
}

.filter-menu-item:hover {
  background: rgba(0, 143, 205, 0.2);
}

.filter-menu-item.selected {
  background: rgba(0, 143, 205, 0.3);
}

.filter-dropdown.open svg {
  transform: rotate(180deg);
}

.filter-dropdown svg {
  transition: transform 0.2s ease;
}

/* Date Picker Menu */
.date-picker-menu {
  min-width: 280px;
  padding: 16px;
}

.date-picker-inputs {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.date-input-group {
  flex: 1;
}

.date-input-group label {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  color: #969696;
  margin-bottom: 6px;
}

.date-input-group input[type="date"] {
  width: 100%;
  padding: 8px 10px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 6px;
  color: #FFFFFF;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
}

.date-input-group input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

.date-apply-btn {
  width: 100%;
  padding: 10px;
  background: #117C2C;
  border: none;
  border-radius: 6px;
  color: #FFFFFF;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

.date-apply-btn:hover {
  background: #0e6624;
}

/* Address Modal Styles */
.address-modal {
  box-sizing: border-box;
  width: 850px;
  max-height: 90vh;
  background: rgba(15, 15, 15, 0.95);
  border: 1px solid #1C1C1C;
  backdrop-filter: blur(37.5px);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  animation: modalSlideIn 0.3s ease;
}

.address-modal.bulk-modal {
  max-height: 95vh;
}

.address-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: none;
}

.address-modal-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.5px;
  color: #FFFFFF;
}

.address-modal-close {
  width: 19px;
  height: 19px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.address-modal-close:hover {
  opacity: 0.8;
}

.address-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.address-modal-footer {
  display: flex;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid #1C1C1C;
}

.address-form-group {
  margin-bottom: 16px;
}

.address-form-group.half {
  flex: 1;
}

.address-form-row {
  display: flex;
  gap: 16px;
}

.address-form-label {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #969696;
  margin-bottom: 5px;
}

.address-form-dropdown-wrapper {
  position: relative;
}

.address-form-dropdown {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  padding: 0 15px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.address-form-dropdown:hover {
  border-color: #2a2a2a;
}

.address-form-dropdown span {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
}

.address-form-dropdown svg {
  transition: transform 0.2s ease;
}

.address-form-dropdown.open svg {
  transform: rotate(180deg);
}

.address-form-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #33363F;
  border: 1px solid #4a4d57;
  border-radius: 6px;
  margin-top: 4px;
  z-index: 1001;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.2s ease;
}

.address-form-dropdown-menu.open {
  max-height: 250px;
  overflow-y: auto;
  opacity: 1;
}

.address-form-dropdown-item {
  padding: 12px 15px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.15s ease;
}

.address-form-dropdown-item:hover {
  background: rgba(0, 143, 205, 0.2);
}

.address-form-dropdown-item.selected {
  background: rgba(0, 143, 205, 0.3);
}

.address-form-input {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  padding: 0 15px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
}

.address-form-textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 100px;
  padding: 15px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  resize: vertical;
}

.address-form-textarea.large {
  min-height: 150px;
}

.file-upload-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.file-upload-btn {
  padding: 10px 20px;
  background: #0088FF;
  border: none;
  border-radius: 8px;
  color: #FFFFFF;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

.file-upload-btn:hover {
  background: #0077e6;
}

.file-upload-text {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #969696;
}

.address-btn {
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

.address-btn.primary {
  background: #117C2C;
  color: #FFFFFF;
}

.address-btn.primary:hover {
  background: #0e6624;
}

.address-btn.secondary {
  background: #33363F;
  color: #FFFFFF;
}

.address-btn.secondary:hover {
  background: #3d4049;
}

.address-btn.danger {
  background: #FF383C;
  color: #FFFFFF;
  margin-left: auto;
}

.address-btn.danger:hover {
  background: #e63135;
}

/* Bulk Add Modal Info Text */
.bulk-info-text {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.3px;
  margin-bottom: 10px;
}

.bulk-info-text.muted {
  color: rgba(255, 255, 255, 0.5);
}

.bulk-info-text.muted-light {
  color: rgba(150, 150, 150, 0.5);
}

.bulk-info-text.white {
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
}

.bulk-info-text.warning {
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
}

/* Drop Zone */
.drop-zone {
  box-sizing: border-box;
  width: 100%;
  min-height: 150px;
  background: rgba(22, 22, 22, 0.5);
  border: 2px dashed #4a4d57;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  margin-top: 16px;
}

.drop-zone:hover,
.drop-zone.drag-over {
  border-color: #0088FF;
  background: rgba(0, 136, 255, 0.05);
}

.drop-zone-icon {
  margin-bottom: 16px;
}

.drop-zone-text {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
  margin-bottom: 8px;
}

.drop-zone-subtext {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  color: #969696;
}

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-window {
  box-sizing: border-box;
  width: 638px;
  background: rgba(15, 15, 15, 0.8);
  border: 1px solid #1C1C1C;
  backdrop-filter: blur(37.5px);
  border-radius: 18px;
  animation: modalSlideIn 0.3s ease forwards;
}

.modal-window.modal-715 {
  width: 715px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}

.modal-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.5px;
  color: #FFFFFF;
}

.modal-close {
  width: 19px;
  height: 19px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close svg {
  width: 19px;
  height: 19px;
  stroke: #FFFFFF;
  stroke-width: 1.58px;
}

.modal-close:hover svg {
  stroke: #969696;
}

.modal-body {
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {}

.form-label {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #969696;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Custom Toast Notification */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.toast {
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px 20px;
  min-width: 300px;
  max-width: 400px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  animation: toastSlideIn 0.3s ease forwards;
}

.toast.toast-hide {
  animation: toastSlideOut 0.3s ease forwards;
}

.toast-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.toast-icon.success {
  background: rgba(52, 199, 89, 0.2);
  color: #34C759;
}

.toast-icon.error {
  background: rgba(255, 59, 48, 0.2);
  color: #FF3B30;
}

.toast-icon.warning {
  background: rgba(255, 204, 0, 0.2);
  color: #FFCC00;
}

.toast-icon.info {
  background: rgba(0, 122, 255, 0.2);
  color: #007AFF;
}

.toast-icon svg {
  width: 14px;
  height: 14px;
}

.toast-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.toast-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #FFFFFF;
}

.toast-message {
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}

.toast-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.toast-close:hover {
  color: #FFFFFF;
}

.toast-close svg {
  width: 16px;
  height: 16px;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toastSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* Confirmation Modal */
.confirm-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.confirm-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.confirm-modal {
  background: rgba(30, 30, 30, 0.98);
  backdrop-filter: blur(40px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  min-width: 340px;
  max-width: 400px;
  animation: modalSlideIn 0.3s ease;
}

.confirm-modal-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #FFFFFF;
  margin-bottom: 12px;
}

.confirm-modal-message {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  margin-bottom: 24px;
}

.confirm-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.confirm-modal-btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.confirm-modal-btn.cancel {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

.confirm-modal-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.15);
}

.confirm-modal-btn.confirm {
  background: #007AFF;
  color: #FFFFFF;
}

.confirm-modal-btn.confirm:hover {
  background: #0066DD;
}

.confirm-modal-btn.danger {
  background: #FF3B30;
  color: #FFFFFF;
}

.confirm-modal-btn.danger:hover {
  background: #DD3328;
}

/* Copy button styling */
.copy-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #FFFFFF;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.copy-btn:hover {
  color: #008FCD;
}

.copy-btn svg {
  width: 14px;
  height: 14px;
}

/* Action Arrow Button */
.action-arrow-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #117C2C;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
}

.action-arrow-btn:hover {
  opacity: 0.9;
  transform: scale(1.05);
}

.action-arrow-btn svg {
  stroke: #FFFFFF;
}

/* Add Employee Modal */
.add-employee-modal {
  width: 638px;
  background: rgba(15, 15, 15, 0.8);
  border: 1px solid #1C1C1C;
  backdrop-filter: blur(37.5px);
  border-radius: 18px;
  animation: modalSlideIn 0.3s ease;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.modal-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.5px;
  color: #FFFFFF;
}

.modal-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 19px;
  height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close-btn svg {
  width: 19px;
  height: 19px;
  color: #FFFFFF;
}

.modal-body {
  padding: 0 20px 20px;
}

.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #969696;
  margin-bottom: 5px;
}

.generate-link {
  color: #FFFFFF;
  cursor: pointer;
  font-weight: 500;
}

.generate-link:hover {
  text-decoration: underline;
}

.form-input {
  width: 100%;
  height: 46px;
  padding: 15px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  outline: none;
  transition: border-color 0.2s ease;
}

.form-input:focus {
  border-color: #0088FF;
}

.form-input::placeholder {
  color: rgba(150, 150, 150, 0.5);
}

.form-select {
  position: relative;
  width: 100%;
  height: 46px;
  padding: 15px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
}

.form-select svg {
  width: 16px;
  height: 16px;
  fill: #969696;
  transition: transform 0.2s ease;
}

.form-select.open svg {
  transform: rotate(180deg);
}

.form-select-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  margin-top: 4px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
}

.form-select.open .form-select-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.form-select-item {
  padding: 12px 15px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.2s ease;
}

.form-select-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.form-select-item:first-child {
  border-radius: 10px 10px 0 0;
}

.form-select-item:last-child {
  border-radius: 0 0 10px 10px;
}

.modal-footer {
  display: flex;
  gap: 10px;
  padding: 0 20px 20px;
}

.btn-green {
  height: 40px;
  padding: 12px 14px;
  background: #117C2C;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-green:hover {
  background: #0e6a24;
}

.btn-red {
  height: 40px;
  padding: 12px 14px;
  background: #FF383C;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.2s ease;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-red:hover {
  background: #e02f32;
}

.btn-gray {
  height: 40px;
  padding: 12px 14px;
  background: #2A2A2A;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-gray:hover {
  background: #3A3A3A;
}

.btn-outline {
  padding: 12px 14px;
  background: transparent;
  border: 1px solid #1C1C1C;
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #3C3C3C;
}

/* Add Access Level Modal */
.add-access-level-modal {
  width: 638px;
  max-height: 90vh;
  overflow-y: auto;
  background: rgba(15, 15, 15, 0.8);
  border: 1px solid #1C1C1C;
  backdrop-filter: blur(37.5px);
  border-radius: 18px;
  animation: modalSlideIn 0.3s ease;
}

.permissions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 20px;
}

.permission-item {
  height: 46px;
  padding: 0 15px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.permission-item:hover {
  background: #1a1a1a;
}

.permission-checkbox {
  width: 14px;
  height: 14px;
  border: 1px solid #969696;
  border-radius: 3px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  position: relative;
  background: transparent;
}

.permission-checkbox:checked {
  background: #117C2C;
  border-color: #117C2C;
}

.permission-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.permission-label {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.access-level-footer {
  flex-wrap: wrap;
}

.access-level-footer .btn-red {
  margin-left: auto;
}

/* Modal 715px width */
.modal-715 {
  width: 715px;
}

/* Filter select styles */
.filter-select-wrapper {
  position: relative;
}

.filter-select {
  background: linear-gradient(180deg, #1E1E1E 0%, #161616 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 12px 40px 12px 16px;
  color: #FFFFFF;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 400;
  min-width: 160px;
  height: 44px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23969696' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;
}

.filter-select:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: linear-gradient(180deg, #252525 0%, #1A1A1A 100%);
}

.filter-select:focus {
  outline: none;
  border-color: #0088FF;
  box-shadow: 0 0 0 3px rgba(0, 136, 255, 0.15), 0 2px 8px rgba(0, 0, 0, 0.2);
}

.filter-select option {
  background: #161616;
  color: #FFFFFF;
  padding: 12px 16px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  border: none;
}

.filter-select option:hover,
.filter-select option:focus,
.filter-select option:checked {
  background: linear-gradient(180deg, #252525 0%, #1E1E1E 100%);
  color: #FFFFFF;
}

.filter-select::-ms-expand {
  display: none;
}

.filter-select optgroup {
  background: #161616;
  color: #969696;
}

/* Date range wrapper */
.date-range-wrapper {
  position: relative;
}

.date-range-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  padding: 10px 14px;
  color: #FFFFFF;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.date-range-btn:hover {
  border-color: #0088FF;
}

.date-range-btn svg {
  fill: #969696;
}

.date-range-panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  background: rgba(15, 15, 15, 0.95);
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  padding: 16px;
  display: none;
  flex-direction: column;
  gap: 12px;
  z-index: 100;
  backdrop-filter: blur(20px);
}

.date-range-panel.active {
  display: flex;
}

.date-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.date-input-group label {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  color: #969696;
}

.date-input-group input[type="date"] {
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 8px;
  padding: 8px 12px;
  color: #FFFFFF;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
}

.date-input-group input[type="date"]:focus {
  outline: none;
  border-color: #0088FF;
}

.btn-apply-date {
  background: #117C2C;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 8px 16px;
  color: #FFFFFF;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-apply-date:hover {
  opacity: 0.9;
}

/* Form row for side by side inputs */
.form-row {
  display: flex;
  gap: 16px;
}

.form-group.half {
  flex: 1;
}

/* Date input wrapper with icon */
.date-input-wrapper {
  position: relative;
}

.date-input-wrapper .form-input {
  padding-right: 40px;
}

.date-input-wrapper .date-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  fill: #969696;
  pointer-events: none;
}

/* Promo footer styles */
.promo-footer {
  flex-wrap: wrap;
  gap: 10px;
}

.promo-footer .btn-red {
  margin-left: auto;
}

/* Gray button */
.btn-gray {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  background: #333333;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-gray:hover {
  opacity: 0.9;
}

/* Add button alignment fix */
.btn-add-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-add-right span {
  display: inline-block;
}

.btn-add-right svg {
  flex-shrink: 0;
}

/* Status label styles for promo actions */
.action-status.status-active {
  color: #117C2C;
  font-weight: 500;
}

.action-status.status-paused {
  color: #FFCC00;
  font-weight: 500;
}

/* Status label styles for promo codes */
.promo-status.status-active {
  color: #117C2C;
  font-weight: 500;
}

.promo-status.status-inactive {
  color: #969696;
  font-weight: 500;
}

/* ==================== MODAL WINDOW ==================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-window {
  box-sizing: border-box;
  width: 638px;
  background: rgba(15, 15, 15, 0.8);
  border: 1px solid #1C1C1C;
  backdrop-filter: blur(37.5px);
  border-radius: 18px;
  transform: scale(0.9) translateY(-20px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.modal-overlay.active .modal-window {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}

.modal-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.5px;
  color: #FFFFFF;
}

.modal-close {
  width: 19px;
  height: 19px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.modal-close svg {
  width: 19px;
  height: 19px;
  stroke: #FFFFFF;
}

.modal-close:hover {
  transform: rotate(90deg);
  opacity: 0.8;
}

.modal-body {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-label {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #969696;
}

.form-input {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  padding: 0 15px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  transition: border-color 0.2s ease;
}

.form-input:focus {
  outline: none;
  border-color: #117C2C;
}

.form-hint {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.3px;
  color: rgba(150, 150, 150, 0.5);
}

.modal-footer {
  display: flex;
  gap: 10px;
  padding: 20px;
  flex-wrap: wrap;
}

.btn-modal {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 12px 14px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
  white-space: nowrap;
}

.btn-modal.btn-green {
  background: #117C2C;
}

.btn-modal.btn-green:hover {
  background: #0e6a24;
}

.btn-modal.btn-red {
  background: #FF383C;
  margin-left: auto;
}

.btn-modal.btn-red:hover {
  background: #e02f32;
}

.btn-modal:active {
  transform: scale(0.98);
}

/* ==================== BTN-ADD ==================== */
.btn-add {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px 14px;
  gap: 10px;
  height: 40px;
  background: #117C2C;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-add:hover {
  background: #0e6a24;
}

.btn-add span {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  white-space: nowrap;
}

.btn-add svg {
  width: 16px;
  height: 16px;
  fill: #FFFFFF;
  flex-shrink: 0;
}

/* ==================== SECTION CONTAINER ==================== */
.section-container {
  box-sizing: border-box;
  position: relative;
  width: 1116px;
  max-width: 100%;
  min-height: 826px;
  background: rgba(15, 15, 15, 0.6);
  border: 1px solid #1C1C1C;
  border-radius: 18px;
  padding: 15px 25px 25px 25px;
}

/* ==================== MAILING CHANNELS TABLE ==================== */
.mailing-channels-table {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.mailing-channels-table .table-header {
  display: grid;
  grid-template-columns: 30px 300px 1fr 200px 40px;
  width: 100%;
  max-width: 1066px;
  padding: 0 15px 15px 15px;
  box-sizing: border-box;
  border-bottom: none;
  background: transparent;
}

.mailing-channels-table .table-header .th {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: -0.3px;
  color: #969696;
}

.mailing-channels-table .table-header .th-id {
  text-align: left;
}

.mailing-channels-table .table-header .th-name {
  text-align: left;
}

.mailing-channels-table .table-header .th-status {
  text-align: left;
}

.mailing-channels-table .table-header .th-date {
  text-align: left;
}

.mailing-channels-table .table-header .th-actions {
  text-align: right;
}

.mailing-channels-table .table-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mailing-channels-table .table-row {
  display: grid;
  grid-template-columns: 30px 300px 1fr 200px 40px;
  align-items: center;
  width: 100%;
  max-width: 1066px;
  height: 46px;
  padding: 0 15px;
  box-sizing: border-box;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  transition: border-color 0.2s ease;
}

.mailing-channels-table .table-row:hover {
  border-color: #0088FF;
}

.mailing-channels-table .table-row .td {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
}

.mailing-channels-table .table-row .td-id {
  color: #969696;
  text-align: left;
}

.mailing-channels-table .table-row .td-name {
  color: #FFFFFF;
  text-align: left;
}

.mailing-channels-table .table-row .td-status {
  color: #FFFFFF;
  text-align: left;
}

.mailing-channels-table .table-row .td-date {
  color: #FFFFFF;
  text-align: left;
}

.mailing-channels-table .table-row .td-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.mailing-channels-table .table-row .td-actions .action-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
}


/* Publication Modal Styles */
.publication-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.publication-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.publication-modal {
  box-sizing: border-box;
  width: 638px;
  background: rgba(15, 15, 15, 0.8);
  border: 1px solid #1C1C1C;
  backdrop-filter: blur(37.5px);
  -webkit-backdrop-filter: blur(37.5px);
  border-radius: 18px;
  transform: scale(0.9) translateY(20px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.publication-modal-overlay.active .publication-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.publication-modal-overlay.closing .publication-modal {
  transform: scale(0.9) translateY(20px);
  opacity: 0;
}

.publication-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}

.publication-modal-title {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.5px;
  color: #FFFFFF;
}

.publication-modal-body {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pub-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pub-form-label {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #969696;
}

.pub-dropdown-wrapper {
  position: relative;
}

.pub-dropdown-toggle {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.pub-dropdown-toggle:hover {
  border-color: #2C2C2C;
}

.pub-dropdown-toggle svg {
  fill: #969696;
  transition: transform 0.2s ease;
}

.pub-dropdown-wrapper.open .pub-dropdown-toggle svg {
  transform: rotate(180deg);
}

.pub-dropdown-menu {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: 100%;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  padding: 8px 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.pub-dropdown-wrapper.open .pub-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pub-dropdown-item {
  padding: 10px 15px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.2s ease;
}

.pub-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.pub-file-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pub-file-upload-btn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  height: 46px;
  background: #008FCD;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.2s ease;
}

.pub-file-upload-btn:hover {
  background: #0077aa;
}

.pub-file-input {
  display: none;
}

.pub-file-input-display {
  box-sizing: border-box;
  flex: 1;
  height: 46px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
}

.pub-textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 80px;
  padding: 15px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
  resize: vertical;
  transition: border-color 0.2s ease;
}

.pub-textarea:focus {
  outline: none;
  border-color: #2C2C2C;
}

.pub-form-hint {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.3px;
  color: rgba(150, 150, 150, 0.5);
}

.publication-modal-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px;
}

.pub-modal-btn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  height: 40px;
  border-radius: 8px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.2s ease;
}

.pub-btn-green {
  background: #117C2C;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.pub-btn-green:hover {
  background: #0d6623;
}

.pub-btn-red {
  background: #FF383C;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.pub-btn-red:hover {
  background: #e0282c;
}

/* Publication row click styles */
.publication-row {
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.publication-row:hover {
  border-color: #0088FF;
}

.publication-row.fade-in {
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* Bot Mailing Modal Styles */
.bot-mailing-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.bot-mailing-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.bot-mailing-modal {
  box-sizing: border-box;
  width: 638px;
  max-height: 90vh;
  overflow-y: auto;
  background: rgba(15, 15, 15, 0.8);
  border: 1px solid #1C1C1C;
  backdrop-filter: blur(37.5px);
  -webkit-backdrop-filter: blur(37.5px);
  border-radius: 18px;
  transform: scale(0.9) translateY(20px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.bot-mailing-modal-overlay.active .bot-mailing-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.bot-mailing-modal-overlay.closing .bot-mailing-modal {
  transform: scale(0.9) translateY(20px);
  opacity: 0;
}

.bot-mailing-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}

.bot-mailing-modal-title {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.5px;
  color: #FFFFFF;
}

.bot-mailing-modal-body {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mailing-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mailing-form-label {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #969696;
}

.mailing-dropdown-wrapper {
  position: relative;
}

.mailing-dropdown-toggle {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.mailing-dropdown-toggle:hover {
  border-color: #2C2C2C;
}

.mailing-dropdown-toggle svg {
  fill: #969696;
  transition: transform 0.2s ease;
}

.mailing-dropdown-wrapper.open .mailing-dropdown-toggle svg {
  transform: rotate(180deg);
}

.mailing-dropdown-menu {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: 100%;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  padding: 8px 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.mailing-dropdown-wrapper.open .mailing-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mailing-dropdown-item {
  padding: 10px 15px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.2s ease;
}

.mailing-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.mailing-file-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mailing-file-upload-btn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  height: 46px;
  background: #008FCD;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.2s ease;
}

.mailing-file-upload-btn:hover {
  background: #0077aa;
}

.mailing-file-input {
  display: none;
}

.mailing-file-input-display {
  box-sizing: border-box;
  flex: 1;
  height: 46px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
}

.mailing-textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 80px;
  padding: 15px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
  resize: vertical;
  transition: border-color 0.2s ease;
}

.mailing-textarea:focus {
  outline: none;
  border-color: #2C2C2C;
}

.mailing-form-hint {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.3px;
  color: rgba(150, 150, 150, 0.5);
}

.mailing-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mailing-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.mailing-checkbox input[type="checkbox"] {
  display: none;
}

.mailing-checkbox-box {
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 1px solid #969696;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.mailing-checkbox input[type="checkbox"]:checked + .mailing-checkbox-box {
  background: #0088FF;
  border-color: #0088FF;
}

.mailing-checkbox input[type="checkbox"]:checked + .mailing-checkbox-box::after {
  content: "";
  width: 8px;
  height: 6px;
  border: 2px solid #FFFFFF;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
  margin-top: -2px;
}

.mailing-checkbox-label {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #FFFFFF;
}

.mailing-checkbox-hint {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.3px;
  color: rgba(150, 150, 150, 0.5);
  margin-left: 24px;
}

.mailing-form-row {
  display: flex;
  gap: 10px;
}

.mailing-form-half {
  flex: 1;
}

.bot-mailing-modal-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px;
}

.mailing-modal-btn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  height: 40px;
  border-radius: 8px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.2s ease;
}

.mailing-btn-green {
  background: #117C2C;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.mailing-btn-green:hover {
  background: #0d6623;
}

.mailing-btn-red {
  background: #FF383C;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.mailing-btn-red:hover {
  background: #e0282c;
}


/* Bot Mailings Page - New Design */
.bot-mailings-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.bot-filters-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bot-filter-dropdown {
  position: relative;
}

.bot-filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.bot-filter-btn:hover {
  opacity: 0.8;
}

.bot-filter-btn svg {
  fill: #FFFFFF;
  transition: transform 0.2s ease;
}

.bot-filter-dropdown.open .bot-filter-btn svg {
  transform: rotate(180deg);
}

.bot-filter-menu {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  min-width: 180px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 8px;
  padding: 6px 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.bot-filter-dropdown.open .bot-filter-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.bot-filter-item {
  padding: 10px 14px;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.2s ease;
}

.bot-filter-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.bot-date-range {
  position: relative;
  display: flex;
  align-items: center;
}

.bot-date-input {
  padding: 8px 36px 8px 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  cursor: pointer;
  width: 200px;
}

.bot-date-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
}

.bot-date-icon {
  position: absolute;
  right: 10px;
  width: 16px;
  height: 16px;
  color: #969696;
  pointer-events: none;
}

/* Bot Mailings Table */
.bot-mailings-table-container {
  background: rgba(15, 15, 15, 0.6);
  border: 1px solid #1C1C1C;
  border-radius: 12px;
  overflow: hidden;
}

.bot-mailings-table {
  width: 100%;
}

.bot-mailings-header {
  display: grid;
  grid-template-columns: 50px 120px 1fr 200px 160px 100px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: none;
}

.bot-th {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #969696;
}

.bot-mailings-body {
  display: flex;
  flex-direction: column;
}

.bot-mailing-row {
  display: grid;
  grid-template-columns: 50px 120px 1fr 200px 160px 100px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(28, 28, 28, 0.5);
  cursor: pointer;
  transition: background 0.2s ease;
}

.bot-mailing-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.bot-mailing-row:last-child {
  border-bottom: none;
}

.bot-td {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;
}

.bot-td-id {
  color: #969696;
}

.bot-attachment-preview {
  width: 70px;
  height: 70px;
  border-radius: 8px;
  overflow: hidden;
  background: #1C1C1C;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bot-attachment-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bot-no-attachment {
  color: #969696;
  font-size: 13px;
}

.bot-status-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bot-status-info.empty {
  color: #969696;
}

.bot-status-label {
  font-size: 12px;
  color: #969696;
}

.bot-status-date {
  font-size: 14px;
  color: #FFFFFF;
}

.bot-status-badges {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.bot-stat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #FFFFFF;
}

.bot-stat-badge.bot-stat-blue {
  background: #0088FF;
}

.bot-stat-badge.bot-stat-green {
  background: #117C2C;
}

.bot-td-type {
  color: #FFFFFF;
  font-size: 13px;
}

.bot-launch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: #117C2C;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.2s ease;
}

.bot-launch-btn:hover {
  background: #0d6623;
}

/* Bot Mailing Card Style - Enhanced Row */
.bot-mailing-card {
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  margin: 0 20px 9px 20px;
  padding: 15px 20px !important;
  min-height: 130px;
  display: grid;
  grid-template-columns: 30px 120px 1fr 180px 140px 90px;
  align-items: center;
}

.bot-mailing-card:hover {
  background: #1a1a1a;
}

.bot-attachment-large {
  width: 100px;
  height: 100px;
  border-radius: 8px;
}

.bot-stat-badge.bot-stat-gray {
  background: #3D3D3D;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.bot-stat-badge.bot-stat-red {
  background: #FF383C;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.bot-launch-btn.bot-launch-blue {
  background: #008FCD;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 8px 14px;
  height: 32px;
}

.bot-launch-btn.bot-launch-blue:hover {
  background: #0077aa;
}

/* Bot Mailings Table Container - Full Height */
.bot-mailings-table-container {
  flex: 1;
  min-height: calc(100vh - 200px);
}

/* Status column alignment fix */
.bot-td-status {
  text-align: left;
  padding-left: 0;
}

.bot-status-info {
  align-items: flex-start;
}

.bot-mailings-header {
  grid-template-columns: 50px 120px 1fr 160px 160px 100px;
}

.bot-mailing-card {
  grid-template-columns: 30px 120px 1fr 160px 160px 90px !important;
}

/* Publication row spacing */
.publication-row {
  margin-bottom: 9px;
}

.publication-row:last-child {
  margin-bottom: 0;
}

/* Publications container with gap */
.publications-table {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* Remove margin-bottom, use gap instead */
.publication-row {
  margin-bottom: 0 !important;
}

/* Bot mailing card dimensions */
.bot-mailing-card {
  max-width: 1066px;
  min-height: 130px;
  height: 130px;
}

/* Bot mailing card without attachment - smaller height */
.bot-mailing-card.no-attachment {
  min-height: 98px;
  height: 98px;
}

/* Bot Filter Button - Updated Styles */
.bot-filter-btn {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px 14px;
  gap: 10px;
  width: 78px;
  height: 40px;
  background: rgba(15, 15, 15, 0.6);
  border: 1px solid #1C1C1C;
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.bot-filter-btn:hover {
  border-color: #2C2C2C;
}

.bot-filter-btn svg {
  width: 16px;
  height: 16px;
  fill: #969696;
  flex: none;
}

.bot-filter-dropdown.open .bot-filter-btn {
  border-color: #0088FF;
}

/* Bot Mailing Modal - Updated Styles */
.bot-mailing-modal {
  width: 638px;
  max-height: 829px;
  background: rgba(15, 15, 15, 0.8);
  border: 1px solid #1C1C1C;
  backdrop-filter: blur(37.5px);
  -webkit-backdrop-filter: blur(37.5px);
  border-radius: 18px;
  overflow-y: auto;
}

.bot-mailing-modal-header {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bot-mailing-modal-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.5px;
  color: #FFFFFF;
}

.bot-mailing-modal .modal-close {
  width: 19px;
  height: 19px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}

.bot-mailing-modal-body {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Type dropdown in modal */
.mailing-dropdown-toggle {
  width: 100%;
  height: 46px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  cursor: pointer;
}

/* File upload row */
.mailing-file-upload-btn {
  width: 129px;
  height: 46px;
  background: #008FCD;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  cursor: pointer;
}

.mailing-file-input-display {
  flex: 1;
  height: 46px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
}

/* Textareas */
.mailing-textarea {
  width: 100%;
  height: 80px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  padding: 15px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  resize: none;
}

.mailing-form-hint {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.3px;
  color: rgba(150, 150, 150, 0.5);
}

/* Checkboxes */
.mailing-checkbox-label {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
}

.mailing-checkbox-hint {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  line-height: 14px;
  color: rgba(150, 150, 150, 0.5);
  margin-left: 24px;
}

/* Two dropdowns in row */
.mailing-form-row {
  display: flex;
  gap: 10px;
}

.mailing-form-half {
  flex: 1;
}

/* Footer buttons */
.bot-mailing-modal-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px;
}

.mailing-modal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  height: 40px;
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

#mailingSaveAndAdd {
  width: 224px;
  background: #117C2C;
}

#mailingApply {
  width: 103px;
  background: #117C2C;
}

#mailingSave {
  width: 98px;
  background: #117C2C;
}

#mailingDelete {
  width: 83px;
  background: #FF383C;
}

.mailing-btn-green:hover {
  background: #0d6623;
}

.mailing-btn-red:hover {
  background: #e0282c;
}

/* Date Picker Dropdown */
.date-picker-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 280px;
  background: rgba(15, 15, 15, 0.95);
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  padding: 16px;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.date-picker-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.date-picker-header {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
  margin-bottom: 16px;
}

.date-picker-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.date-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.date-picker-label {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #969696;
  width: 30px;
}

.date-picker-input {
  flex: 1;
  height: 40px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 8px;
  padding: 0 12px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  color-scheme: dark;
}

.date-picker-input:focus {
  outline: none;
  border-color: #0088FF;
}

.date-picker-footer {
  margin-top: 16px;
}

.date-picker-btn {
  width: 100%;
  height: 40px;
  background: #117C2C;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.2s ease;
}

.date-picker-btn:hover {
  background: #0d6623;
}

/* Date Range Button */
.bot-date-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  height: 40px;
  background: rgba(15, 15, 15, 0.6);
  border: 1px solid #1C1C1C;
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.bot-date-btn:hover {
  border-color: #2C2C2C;
}

.bot-date-btn .bot-date-icon {
  position: static;
  width: 16px;
  height: 16px;
  color: #969696;
}

/* Bot Mailing Modal - Exact Design Match */
.bot-mailing-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.bot-mailing-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.bot-mailing-modal {
  box-sizing: border-box;
  width: 638px;
  height: 829px;
  background: rgba(15, 15, 15, 0.8);
  border: 1px solid #1C1C1C;
  backdrop-filter: blur(37.5px);
  -webkit-backdrop-filter: blur(37.5px);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  transform: scale(0.9) translateY(20px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.bot-mailing-modal-overlay.active .bot-mailing-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.bot-mailing-modal-overlay.closing .bot-mailing-modal {
  transform: scale(0.9) translateY(20px);
  opacity: 0;
}

.bot-mailing-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  flex-shrink: 0;
}

.bot-mailing-modal-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.5px;
  color: #FFFFFF;
}

.bot-mailing-modal .modal-close {
  width: 19px;
  height: 19px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bot-mailing-modal-body {
  flex: 1;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

.mailing-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mailing-form-label {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #969696;
}

.mailing-dropdown-wrapper {
  position: relative;
}

.mailing-dropdown-toggle {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.mailing-dropdown-toggle:hover {
  border-color: #2C2C2C;
}

.mailing-dropdown-toggle svg {
  fill: #969696;
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.mailing-dropdown-wrapper.open .mailing-dropdown-toggle svg {
  transform: rotate(180deg);
}

.mailing-dropdown-menu {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: 100%;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  padding: 8px 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.mailing-dropdown-wrapper.open .mailing-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mailing-dropdown-item {
  padding: 10px 15px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.2s ease;
}

.mailing-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.mailing-file-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mailing-file-upload-btn {
  box-sizing: border-box;
  width: 129px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #008FCD;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.2s ease;
}

.mailing-file-upload-btn:hover {
  background: #0077aa;
}

.mailing-file-input {
  display: none;
}

.mailing-file-input-display {
  box-sizing: border-box;
  flex: 1;
  height: 46px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
}

.mailing-textarea {
  box-sizing: border-box;
  width: 100%;
  height: 80px;
  padding: 15px;
  background: #161616;
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  resize: none;
  transition: border-color 0.2s ease;
}

.mailing-textarea:focus {
  outline: none;
  border-color: #2C2C2C;
}

.mailing-form-hint {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.3px;
  color: rgba(150, 150, 150, 0.5);
}

.mailing-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mailing-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.mailing-checkbox input[type="checkbox"] {
  display: none;
}

.mailing-checkbox-box {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 1px solid #969696;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.mailing-checkbox input[type="checkbox"]:checked + .mailing-checkbox-box {
  background: #0088FF;
  border-color: #0088FF;
}

.mailing-checkbox input[type="checkbox"]:checked + .mailing-checkbox-box::after {
  content: "";
  width: 8px;
  height: 5px;
  border: 2px solid #FFFFFF;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
  margin-top: -2px;
}

.mailing-checkbox-label {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
}

.mailing-checkbox-hint {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: rgba(150, 150, 150, 0.5);
  margin-left: 26px;
}

.mailing-form-row {
  display: flex;
  gap: 10px;
}

.mailing-form-half {
  flex: 1;
}

.bot-mailing-modal-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px;
  flex-shrink: 0;
}

.mailing-modal-btn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  height: 40px;
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: background 0.2s ease;
}

#mailingSaveAndAdd {
  background: #117C2C;
}

#mailingApply {
  background: #117C2C;
}

#mailingSave {
  background: #117C2C;
}

#mailingDelete {
  background: #FF383C;
}

#mailingSaveAndAdd:hover,
#mailingApply:hover,
#mailingSave:hover {
  background: #0d6623;
}

#mailingDelete:hover {
  background: #e0282c;
}

/* ===== WAREHOUSE ADDRESSES - NEW LAYOUT ===== */
.addresses-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

/* Row 1: Search */
.toolbar-search-row {
  display: flex;
}

.toolbar-search-row .addresses-search {
  width: 274px;
  height: 40px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: rgba(15, 15, 15, 0.6);
  border: 1px solid #1C1C1C;
  border-radius: 10px;
}

.toolbar-search-row .addresses-search .search-input {
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  width: 100%;
}

.toolbar-search-row .addresses-search .search-input::placeholder {
  color: #969696;
}

/* Row 2: Filters + Buttons */
.toolbar-filters-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
}

.toolbar-filters-row .filters-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-shrink: 1;
}

.toolbar-filters-row .buttons-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.toolbar-filters-row .filter-dropdown-wrapper {
  position: relative;
}

.toolbar-filters-row .filter-dropdown {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px 14px;
  gap: 10px;
  background: rgba(15, 15, 15, 0.6);
  border: 1px solid #1C1C1C;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.toolbar-filters-row .filter-dropdown:hover {
  border-color: #117C2C;
}

.toolbar-filters-row .filter-dropdown span {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  flex: none;
  flex-grow: 0;
}

.toolbar-filters-row .filter-dropdown svg {
  width: 16px;
  height: 16px;
  flex: none;
  flex-grow: 0;
}

/* Filter widths - reduced to prevent overlap */
.toolbar-filters-row .filter-dropdown {
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toolbar-filters-row .filter-city {
  min-width: 70px;
  height: 40px;
}

.toolbar-filters-row .filter-product {
  min-width: 72px;
  height: 40px;
}

.toolbar-filters-row .filter-courier {
  min-width: 78px;
  height: 40px;
}

.toolbar-filters-row .filter-type {
  min-width: 60px;
  height: 40px;
}

.toolbar-filters-row .filter-status {
  min-width: 75px;
  height: 40px;
}

.toolbar-filters-row .filter-calendar {
  min-width: 160px;
  height: 40px;
}

/* Green buttons */
.toolbar-filters-row .btn-add,
.toolbar-filters-row .btn-add-bulk {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  gap: 10px;
  height: 40px;
  background: linear-gradient(180deg, #117C2C 0%, #0D5E21 100%);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.toolbar-filters-row .btn-add:hover,
.toolbar-filters-row .btn-add-bulk:hover {
  opacity: 0.9;
}

.toolbar-filters-row .btn-add {
  width: 119px;
}

.toolbar-filters-row .btn-add-bulk {
  width: 179px;
}

.toolbar-filters-row .btn-add span,
.toolbar-filters-row .btn-add-bulk span {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
}

.toolbar-filters-row .btn-add svg,
.toolbar-filters-row .btn-add-bulk svg {
  width: 16px;
  height: 16px;
}

/* Row 3: Actions */
.toolbar-row-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.action-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.action-label {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #969696;
}

.action-dropdown-wrapper {
  position: relative;
}

.action-dropdown {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px 14px;
  gap: 10px;
  min-width: 120px;
  height: 40px;
  background: rgba(15, 15, 15, 0.6);
  border: 1px solid #1C1C1C;
  border-radius: 8px;
  cursor: pointer;
}

.execute-btn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  height: 40px;
  background: #0088FF;
  border: none;
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.execute-btn:hover {
  opacity: 0.9;
}

.page-stats {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #969696;
}

/* ============================================
   RESPONSIVE STYLES - MOBILE & TABLET
   ============================================ */

/* Mobile menu toggle button */
.mobile-menu-toggle {
  display: none;
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 1001;
  width: 44px;
  height: 44px;
  background: rgba(15, 15, 15, 0.95);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
}

.mobile-menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile overlay */
.mobile-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-overlay.active {
  opacity: 1;
}

/* Tablet: 1024px and below */
@media screen and (max-width: 1024px) {
  .app {
    min-width: 100%;
  }
  
  .main-content {
    padding: 16px;
  }
  
  .toolbar-filters-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .toolbar-row-bottom {
    flex-wrap: wrap;
    gap: 12px;
  }


  .dashboard-top{
    display: block;
  }

  .chart-card.large{
    width: 100%;
    margin-bottom: 16px;
  }

  .stats-cards {
    width: 100%;
  }

  .stats-cards-row .stat-card {
    width: 100%;
  }

  .inventory-row {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }

  .graphs-row {
    flex-direction: column;
  }

  .graph-card {
    width: 100%; 
}
}

/* Mobile: 768px and below */
@media screen and (max-width: 768px) {
  .app {
    flex-direction: column;
    min-width: 100%;
  }
  
  .mobile-menu-toggle {
    display: flex;
  }
  
  .mobile-overlay {
    display: block;
    pointer-events: none;
  }
  
  .mobile-overlay.active {
    pointer-events: auto;
  }
  
  .sidebar {
    position: fixed;
    left: -280px;
    top: 0;
    height: 100vh;
    width: 280px;
    z-index: 1000 !important;
    transition: left 0.3s ease;
    overflow-y: auto;
    background: var(--bg-secondary);
  }
  
  .sidebar.mobile-open {
    left: 0;
  }
  
  .main-content {
    width: 100%;
    min-height: 100vh;
    padding: 70px 12px 20px 12px;
    margin-left: 0;
  }
  
  .breadcrumb {
    flex-wrap: wrap;
    gap: 4px;
    font-size: 12px;
    padding: 0;
    margin-bottom: 16px;
  }
  
  .breadcrumb-item {
    font-size: 12px;
  }
  
  /* Toolbar responsive */
  .toolbar-filters-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  
  .toolbar-filters-row > * {
    width: 100% !important;
    min-width: 100% !important;
  }
  
  .toolbar-row-bottom {
    flex-direction: column;
    gap: 12px;
  }
  
  .action-section {
    flex-wrap: wrap;
    width: 100%;
  }
  
  /* Tables - horizontal scroll */
  .table-container,
  .af-table-container,
  .mailings-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .table,
  .af-table,
  .mailings-table {
    min-width: 800px;
  }
  
  /* Cards grid */
  .cards-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  /* Stats cards */
  .stats-row {
    flex-direction: column;
    gap: 12px;
  }
  
  .stat-card {
    width: 100%;
  }
  
  /* Filter dropdowns */
  .filter-dropdown,
  .af-filter-dropdown {
    width: 100%;
  }
  
  .filter-btn,
  .af-filter-btn {
    width: 100%;
    justify-content: space-between;
  }
  
  /* Add buttons */
  .btn-add,
  .af-btn-add {
    width: 100%;
    justify-content: center;
  }
  
  /* Page title adjustments */
  .page-title {
    font-size: 20px;
  }
  
  .section-title {
    font-size: 16px;
  }
}

/* Small mobile: 480px and below */
@media screen and (max-width: 480px) {
  .main-content {
    padding: 60px 8px 16px 8px;
  }
  
  .breadcrumb {
    font-size: 11px;
  }
  
  .breadcrumb-separator {
    width: 12px;
    height: 12px;
  }
  
  /* Buttons */
  .btn-add span,
  .af-btn-add span,
  .toolbar-filters-row .btn-add span {
    font-size: 13px;
  }
  
  /* Hide some elements on very small screens */
  .toolbar-filters-row .filter-calendar span {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Tables - more compact */
  .table td,
  .table th,
  .af-td,
  .af-th {
    padding: 8px 10px;
    font-size: 12px;
  }
  
  /* Modal adjustments for small screens */
  .client-modal,
  .af-modal,
  .bot-mailing-modal {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 10px;
  }
}

/* Modal responsive styles */
@media screen and (max-width: 768px) {
  .client-modal-overlay,
  .af-modal-overlay,
  .bot-mailing-modal-overlay {
    padding: 10px;
    align-items: flex-start;
    overflow-y: auto;
  }
  
  .client-modal,
  .af-modal,
  .bot-mailing-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh;
    margin: 0;
  }
  
  .client-modal-content,
  .af-modal-content,
  .bot-mailing-modal-content {
    padding: 16px;
  }
  
  .modal-footer,
  .af-modal-footer,
  .bot-mailing-modal-footer {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
  }
  
  .modal-footer button,
  .af-modal-footer button,
  .bot-mailing-modal-footer button {
    flex: 1 1 calc(50% - 4px);
    min-width: calc(50% - 4px);
  }
  
  /* Form groups stack vertically */
  .mailing-two-col-row,
  .form-two-col-row {
    flex-direction: column;
    gap: 16px;
  }
  
  .mailing-two-col-row > div,
  .form-two-col-row > div {
    width: 100%;
  }
  
  /* Inputs full width */
  .af-form-input,
  .af-form-textarea,
  .af-form-select,
  .mailing-form-input,
  .mailing-textarea {
    width: 100% !important;
  }
}

/* Wallet section responsive */
@media screen and (max-width: 768px) {
  .wallet-section {
    padding: 8px;
  }
  
  .wallet-item {
    padding: 8px;
  }
  
  .wallet-amount {
    font-size: 12px;
  }
}

/* Notification panel responsive */
@media screen and (max-width: 768px) {
  .notification-panel {
    right: -50px;
    width: calc(100vw - 20px);
    max-width: 320px;
  }
}

/* Toast notifications responsive */
@media screen and (max-width: 480px) {
  #toast-container {
    left: 10px;
    right: 10px;
    bottom: 10px;
    max-width: calc(100vw - 20px);
  }
  
  .toast {
    width: 100%;
    max-width: 100%;
  }
}

/* ============================================
   ADDITIONAL RESPONSIVE STYLES - ALL PAGES
   ============================================ */

/* Dashboard responsive */
@media screen and (max-width: 768px) {
  .dashboard-top {
    flex-direction: column;
    gap: 16px;
  }
  
  .chart-card.large {
    width: 100%;
    min-width: 100%;
  }
  
  .stats-cards {
    width: 100%;
    min-width: 100%;
  }
  
  .stats-cards-row {
    flex-direction: column;
    gap: 12px;
  }
  
  .stats-cards-row .stat-card {
    width: 100%;
  }
  
  .chart-value-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .chart-value {
    font-size: 24px;
  }
  
  .bar-chart {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .mini-line-chart {
    width: 80px;
    height: 40px;
  }
  
  /* Dashboard bottom section */
  .dashboard-bottom {
    flex-direction: column;
    gap: 16px;
  }
  
  .left-column,
  .right-column {
    width: 100%;
    min-width: 100%;
  }
  
  .info-cards-row {
    flex-direction: column;
    gap: 12px;
  }
  
  .info-card {
    width: 100%;
  }
}

/* Clients table responsive */
@media screen and (max-width: 768px) {
  .clients-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .clients-table {
    min-width: 900px;
  }
}

/* Deposits/Purchases/Disputes tables responsive */
@media screen and (max-width: 768px) {
  .deposits-table-container,
  .purchases-table-container,
  .disputes-table-container,
  .data-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .deposits-table,
  .purchases-table,
  .disputes-table,
  .data-table {
    min-width: 800px;
  }
  
  /* Filters bar responsive */
  .filters-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 16px;
    margin-bottom: 16px;
  }
  
  .filters-bar .search-input {
    width: 100%;
  }
  
  .filters-bar .filter-buttons {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }
  
  .filters-bar .filter-btn {
    width: 100%;
    justify-content: space-between;
  }
}

/* Settings page responsive */
@media screen and (max-width: 768px) {
  .settings-container {
    padding: 16px;
  }
  
  .settings-section {
    padding: 16px;
  }
  
  .settings-form {
    gap: 12px;
  }
  
  .settings-row {
    flex-direction: column;
    gap: 12px;
  }
  
  .settings-row > div {
    width: 100%;
  }
}

/* Products/Items grid responsive */
@media screen and (max-width: 768px) {
  .products-grid,
  .items-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media screen and (max-width: 480px) {
  .products-grid,
  .items-grid {
    grid-template-columns: 1fr;
  }
}

/* Warehouse pages responsive */
@media screen and (max-width: 768px) {
  .regions-table-container,
  .cities-table-container,
  .districts-table-container,
  .couriers-table-container,
  .addresses-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .regions-table,
  .cities-table,
  .districts-table,
  .couriers-table,
  .addresses-table {
    min-width: 600px;
  }
}

/* Marketing pages responsive */
@media screen and (max-width: 768px) {
  .promocodes-table-container,
  .reviews-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .promocodes-table,
  .reviews-table {
    min-width: 700px;
  }
}

/* Employees/Access pages responsive */
@media screen and (max-width: 768px) {
  .employees-table-container,
  .access-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .employees-table,
  .access-table {
    min-width: 600px;
  }
}

/* History page responsive */
@media screen and (max-width: 768px) {
  .history-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .history-table {
    min-width: 700px;
  }
}

/* Generic table container responsive */
@media screen and (max-width: 768px) {
  [class*="-table-container"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
  }
  
  [class*="-table"]:not(.bar-chart):not(.mini-line-chart) {
    min-width: 600px;
  }
}

/* Button groups responsive */
@media screen and (max-width: 768px) {
  .button-group,
  .btn-group,
  .action-buttons {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .button-group > *,
  .btn-group > *,
  .action-buttons > * {
    flex: 1 1 calc(50% - 4px);
    min-width: calc(50% - 4px);
  }
}

/* Search inputs responsive */
@media screen and (max-width: 768px) {
  .search-input-wrapper,
  .search-container {
    width: 100%;
  }
  
  .search-input {
    width: 100%;
  }
}

/* Filter sections responsive */
@media screen and (max-width: 768px) {
  .filters-row,
  .filter-row {
    flex-direction: column;
    gap: 8px;
  }
  
  .filters-row > *,
  .filter-row > * {
    width: 100%;
  }
}

/* Pagination responsive */
@media screen and (max-width: 768px) {
  .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  
  .pagination-info {
    width: 100%;
    text-align: center;
    margin-bottom: 8px;
  }
}

@media screen and (max-width: 480px) {
  .pagination-btn {
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* ============================================
   COMPREHENSIVE RESPONSIVE STYLES - ALL PAGES
   ============================================ */

/* Filter dropdown z-index fix for overlapping */
.filter-dropdown-wrapper {
  position: relative;
}

.filters-bar {
  position: relative;
  z-index: 100;
}

/* Ensure open dropdowns appear above all content */
.filter-dropdown-menu.open,
.filter-dropdown-menu.show {
  z-index: 9999 !important;
}

/* ===== TABLET: 1024px ===== */
@media screen and (max-width: 1024px) {
  /* Grid layouts become single column */
  .content-grid,
  .charts-grid,
  .two-column-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  
  /* Flex layouts stack */
  .two-column-layout {
    flex-direction: column;
  }
}

/* ===== MOBILE: 768px ===== */
@media screen and (max-width: 768px) {
  /* All page toolbars stack vertically */
  .page-toolbar,
  .toolbar,
  .toolbar-row,
  .filters-bar,
  .filter-bar,
  .history-filters,
  .regions-toolbar,
  .addresses-toolbar,
  .employees-toolbar,
  .clients-toolbar,
  .bot-mailings-filters {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  
  /* All filter wrappers full width */
  .filter-dropdown-wrapper,
  .search-input,
  .search-box,
  .filter-btn,
  .date-picker {
    width: 100% !important;
  }
  
  .filter-btn {
    justify-content: space-between !important;
  }
  
  /* Add buttons full width on mobile */
  .btn-add,
  .add-btn {
    width: 100% !important;
    justify-content: center !important;
  }
  
  /* All tables horizontal scroll */
  .data-table,
  .deposits-table,
  .purchases-table,
  .disputes-table,
  .clients-table,
  .history-table,
  .employees-table,
  .regions-table,
  .cities-table,
  .districts-table,
  .products-table,
  .couriers-table,
  .addresses-table,
  .promocodes-table,
  .reviews-table,
  .bots-table,
  .mailings-table,
  .channels-table,
  .publications-table,
  .cumulative-table,
  .access-table,
  .promo-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Table inner content min-width */
  .deposits-header,
  .deposits-body,
  .table-header,
  .table-body,
  .history-header,
  .history-body {
    min-width: 700px;
  }
  
  /* Cards grid single column */
  .cards-grid,
  .stat-cards,
  .info-cards-row {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  
  /* Stat cards row stack */
  .stats-cards-row,
  .stats-row {
    flex-direction: unset !important;
    gap: 12px;
  }
  
  .stat-card,
  .info-card {
    width: 100% !important;
  }
  
  /* Modal adjustments */
  .modal,
  .client-modal,
  .region-modal,
  .city-modal,
  .district-modal,
  .product-modal,
  .courier-modal,
  .address-modal,
  .promocode-modal,
  .promo-modal,
  .review-modal,
  .bot-modal,
  .mailing-modal,
  .channel-modal,
  .publication-modal,
  .employee-modal,
  .access-modal,
  .dispute-modal,
  .af-modal,
  .bot-mailing-modal {
    width: 100% !important;
    max-width: calc(100vw - 20px) !important;
    max-height: 90vh !important;
    margin: 10px !important;
  }
  
  /* Modal content padding */
  .modal-content,
  .client-modal-content,
  .af-modal-content,
  .bot-mailing-modal-content {
    padding: 16px !important;
  }
  
  /* Modal footer buttons */
  .modal-footer,
  .af-modal-footer,
  .bot-mailing-modal-footer {
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .modal-footer button,
  .af-modal-footer button,
  .bot-mailing-modal-footer button {
    width: 100% !important;
  }
  
  /* Form groups stack */
  .form-row,
  .form-two-col-row,
  .mailing-two-col-row,
  .settings-row {
    flex-direction: column !important;
    gap: 12px !important;
  }
  
  .form-row > *,
  .form-two-col-row > *,
  .mailing-two-col-row > *,
  .settings-row > * {
    width: 100% !important;
  }
  
  /* Chart containers scroll */
  .chart-container,
  .chart-card {
    
    -webkit-overflow-scrolling: touch;
  }
  
  .chart-area,
  .bar-chart {
    
  }
  
  /* Deposit/Purchase row details */
  .deposit-row,
  .purchase-row,
  .dispute-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  /* Product stats in stock pages */
  .product-stats {
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* ===== SMALL MOBILE: 480px ===== */
@media screen and (max-width: 480px) {
  /* Reduce padding */
  .main-content {
    padding: 60px 8px 16px 8px !important;
  }
  
  /* Smaller text */
  .page-title {
    font-size: 18px !important;
  }
  
  .section-title {
    font-size: 14px !important;
  }
  
  /* Cards reduced padding */
  .card,
  .stat-card,
  .info-card,
  .chart-card {
    padding: 12px !important;
  }
  
  /* Smaller buttons */
  .btn-add span,
  .add-btn span {
    font-size: 13px !important;
  }
  
  /* Table cells compact */
  .table td,
  .table th,
  [class*="-header"] span,
  [class*="-row"] > div {
    padding: 8px 6px !important;
    font-size: 12px !important;
  }
  
  /* Modal compact */
  .modal,
  [class*="-modal"]:not(.modal-overlay):not([class*="-modal-overlay"]) {
    margin: 5px !important;
    max-width: calc(100vw - 10px) !important;
  }
  
  /* Form inputs */
  .form-input,
  .form-select,
  .form-textarea {
    font-size: 14px !important;
    padding: 10px 12px !important;
  }
  
  /* Stats badges */
  .stat-badge {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
}

/* ===== ADDRESS STATS ROW ===== */
.addr-stats-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 1400px) { .addr-stats-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .addr-stats-row { grid-template-columns: repeat(2, 1fr); } }

.addr-stat-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: transform .2s, filter .2s;
}
.addr-stat-card:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}
.addr-stat-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.addr-stat-icon--free     { background: rgba(17, 124, 44, 0.25); color: var(--accent-green); }
.addr-stat-icon--reserved { background: rgba(255, 141, 40, 0.2);  color: var(--accent-orange); }
.addr-stat-icon--sold     { background: rgba(97, 85, 245, 0.2);   color: var(--accent-purple); }
.addr-stat-icon--cities   { background: rgba(0, 143, 205, 0.2);   color: var(--accent-blue); }
.addr-stat-icon--variants { background: rgba(255, 56, 60, 0.2);   color: var(--accent-red); }
.addr-stat-icon--clients  { background: rgba(150, 150, 150, 0.12); color: var(--text-secondary); }

.addr-stat-content {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.addr-stat-label {
  font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.addr-stat-value {
  font-size: 20px; font-weight: 600; color: var(--text-primary);
}

/* ===== ADDRESS BY CITY CHART ===== */
.addr-chart-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 20px 24px;
  margin-bottom: 16px;
}
.addr-chart-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.addr-chart-title {
  font-size: 14px; font-weight: 500; color: var(--text-secondary);
}
.addr-chart-legend {
  display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--text-secondary);
}
.addr-legend-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px;
}
.addr-legend-dot--free     { background: var(--accent-green); }
.addr-legend-dot--reserved { background: var(--accent-orange); }
.addr-legend-dot--sold     { background: var(--accent-purple); }

.addr-chart-body {
  display: flex; flex-direction: column; gap: 14px;
}
.addr-chart-empty {
  text-align: center; color: var(--text-secondary); padding: 32px; font-size: 14px;
}
.addr-city-row { display: flex; flex-direction: column; gap: 6px; }
.addr-city-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--text-secondary);
}
.addr-city-name { font-weight: 500; color: var(--text-primary); }
.addr-city-total { font-size: 12px; color: var(--text-secondary); }
.addr-city-bars { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--border-color); }
.addr-bar-free     { background: var(--accent-green);  transition: width .6s ease; }
.addr-bar-reserved { background: var(--accent-orange); transition: width .6s ease; }
.addr-bar-sold     { background: var(--accent-purple); transition: width .6s ease; }