/* ============================================================
   Admin UI Unity — one theme + one button language for all pages
============================================================ */

.admin-shell {
  /* legacy alias — some pages used this by mistake */
  min-height: 100vh;
}

@keyframes admin-btn-shine {
  0% {
    transform: translateX(-130%) skewX(-18deg);
    opacity: 0;
  }
  35% {
    opacity: 0.9;
  }
  100% {
    transform: translateX(220%) skewX(-18deg);
    opacity: 0;
  }
}

@keyframes admin-btn-pop {
  0% {
    transform: translateY(0) scale(1);
  }
  45% {
    transform: translateY(-2px) scale(1.03);
  }
  100% {
    transform: translateY(-2px) scale(1.02);
  }
}

/* Shared light primary look */
.admin-layout .primary-button,
.admin-layout a.primary-button,
.admin-layout button.primary-button,
.admin-layout .btn-primary,
.admin-layout a.btn-primary,
.admin-layout button.btn-primary,
.admin-layout .button-primary,
.admin-layout a.button-primary,
.admin-layout button.button-primary,
.admin-layout .btn.btn-primary,
.admin-layout .admins-primary-btn,
.admin-layout .ae-btn--primary,
.admin-layout .lep-btn--primary,
.admin-layout .lep-btn--solid,
.admin-layout .syssec-btn--primary,
.admin-layout .syslogs-btn--primary,
.admin-layout .channels-add-button,
.admin-layout .token-action-button--primary,
.admin-layout .monitoring-btn--primary,
.admin-layout .traffic-btn--primary,
.admin-layout .m3u-btn-primary,
.admin-layout .syssettings-manage-btn.is-primary,
.login-page .primary-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-height: 42px;
  padding: 11px 18px;
  border-radius: 12px;
  border: 1px solid #9ad8ff;
  background: linear-gradient(180deg, #e8f7ff 0%, #b8e6ff 45%, #8fd4ff 100%);
  color: #0b4f74 !important;
  font-weight: 750;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(56, 152, 210, 0.18),
    0 8px 18px rgba(56, 189, 248, 0.28);
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s ease,
    border-color 0.2s ease,
    background 0.22s ease,
    color 0.2s ease;
}

/* Shared light secondary look */
.admin-layout .secondary-button,
.admin-layout a.secondary-button,
.admin-layout button.secondary-button,
.admin-layout .btn-secondary,
.admin-layout a.btn-secondary,
.admin-layout button.btn-secondary,
.admin-layout .button-secondary,
.admin-layout a.button-secondary,
.admin-layout button.button-secondary,
.admin-layout .btn.btn-secondary,
.admin-layout .admins-secondary-btn,
.admin-layout .ae-btn--ghost,
.admin-layout .ae-btn--secondary,
.admin-layout .lep-btn--ghost,
.admin-layout .lep-btn--secondary,
.admin-layout .syssec-btn,
.admin-layout .syssec-small-btn,
.admin-layout .syslogs-btn,
.admin-layout .syslogs-icon-btn,
.admin-layout .token-action-button,
.admin-layout .channel-action-button,
.admin-layout .channel-bulk-btn,
.admin-layout .monitoring-btn,
.admin-layout .monitoring-btn-secondary,
.admin-layout .traffic-btn,
.admin-layout .m3u-btn-secondary,
.admin-layout .syssettings-manage-btn,
.admin-layout .secondary-link-button,
.admin-layout .action-button,
.admin-layout .small-button,
.admin-layout .ae-btn--ghost,
.admin-layout .ae-btn--secondary,
.admin-layout .ae-btn--sm,
.admin-layout .ae-btn--teal,
.admin-layout .lep-btn--ghost,
.admin-layout .lep-btn--secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-height: 40px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid #d7e3f0;
  background: linear-gradient(180deg, #ffffff 0%, #f3f7fc 52%, #e7eef8 100%);
  color: #1e3a5f !important;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -1px 0 rgba(148, 163, 184, 0.18),
    0 6px 14px rgba(148, 163, 184, 0.2);
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s ease,
    border-color 0.2s ease,
    background 0.22s ease,
    color 0.2s ease;
}

/* Generic .btn / .button fallbacks inside admin */
.admin-layout .btn:not(.btn-danger):not(.btn-warning):not(.is-danger),
.admin-layout .button:not(.button-danger),
.admin-layout .ae-btn:not(.ae-btn--danger):not(.ae-btn--primary),
.admin-layout .lep-btn:not(.lep-btn--danger):not(.lep-btn--primary):not(.lep-btn--solid) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid #d7e3f0;
  background: linear-gradient(180deg, #ffffff 0%, #f3f7fc 52%, #e7eef8 100%);
  color: #1e3a5f !important;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 #fff,
    0 6px 14px rgba(148, 163, 184, 0.18);
}

/* Shine overlay */
.admin-layout .primary-button::before,
.admin-layout .secondary-button::before,
.admin-layout .btn-primary::before,
.admin-layout .btn-secondary::before,
.admin-layout .admins-primary-btn::before,
.admin-layout .admins-secondary-btn::before,
.admin-layout .ae-btn--primary::before,
.admin-layout .lep-btn--primary::before,
.admin-layout .channels-add-button::before,
.admin-layout .monitoring-btn::before,
.admin-layout .traffic-btn::before,
.admin-layout .token-action-button::before,
.admin-layout .syssec-btn::before,
.admin-layout .syslogs-btn::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto;
  height: 48%;
  border-radius: 10px 10px 40% 40%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.75),
    rgba(255, 255, 255, 0)
  );
  pointer-events: none;
  z-index: 0;
}

.admin-layout .primary-button::after,
.admin-layout .secondary-button::after,
.admin-layout .btn-primary::after,
.admin-layout .admins-primary-btn::after,
.admin-layout .ae-btn--primary::after,
.admin-layout .lep-btn--primary::after,
.admin-layout .channels-add-button::after {
  content: "";
  position: absolute;
  top: -20%;
  left: 0;
  width: 42%;
  height: 140%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.7),
    transparent
  );
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}

.admin-layout .primary-button:hover,
.admin-layout .secondary-button:hover,
.admin-layout .btn-primary:hover,
.admin-layout .btn-secondary:hover,
.admin-layout .admins-primary-btn:hover,
.admin-layout .admins-secondary-btn:hover,
.admin-layout .ae-btn--primary:hover,
.admin-layout .lep-btn--primary:hover,
.admin-layout .channels-add-button:hover,
.admin-layout .monitoring-btn:hover,
.admin-layout .traffic-btn:hover,
.admin-layout .token-action-button:hover,
.admin-layout .syssec-btn:hover,
.admin-layout .syslogs-btn:hover,
.admin-layout .btn:hover,
.admin-layout .button:hover,
.admin-layout .ae-btn:hover,
.admin-layout .lep-btn:hover {
  animation: admin-btn-pop 0.35s ease forwards;
}

.admin-layout .primary-button:hover::after,
.admin-layout .btn-primary:hover::after,
.admin-layout .admins-primary-btn:hover::after,
.admin-layout .ae-btn--primary:hover::after,
.admin-layout .lep-btn--primary:hover::after,
.admin-layout .channels-add-button:hover::after {
  animation: admin-btn-shine 0.75s ease;
}

.admin-layout .primary-button:hover,
.admin-layout .btn-primary:hover,
.admin-layout .admins-primary-btn:hover,
.admin-layout .ae-btn--primary:hover,
.admin-layout .lep-btn--primary:hover,
.admin-layout .channels-add-button:hover {
  border-color: #7ecfff;
  background: linear-gradient(180deg, #f2fbff 0%, #c4ebff 48%, #9adbff 100%);
  color: #086089 !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 12px 26px rgba(56, 189, 248, 0.38);
}

.admin-layout .secondary-button:hover,
.admin-layout .btn-secondary:hover,
.admin-layout .admins-secondary-btn:hover,
.admin-layout .monitoring-btn:hover,
.admin-layout .traffic-btn:hover,
.admin-layout .token-action-button:hover,
.admin-layout .syssec-btn:hover,
.admin-layout .syslogs-btn:hover,
.admin-layout .channel-action-button:hover {
  border-color: #b9d4ef;
  background: linear-gradient(180deg, #ffffff 0%, #eef5ff 55%, #dceaf8 100%);
  color: #0f3d6b !important;
}

/* Danger variants stay light but pink */
.admin-layout .btn-danger,
.admin-layout .admins-action-btn.is-danger,
.admin-layout .ae-btn--danger,
.admin-layout .lep-btn--danger,
.admin-layout .token-action-button--danger,
.admin-layout .secondary-button.is-danger,
.admin-layout .channel-action-button.is-danger,
.admin-layout .channel-bulk-btn.is-danger,
.admin-layout .syssec-btn-danger,
.admin-layout .monitoring-btn-danger-soft {
  border-color: #f9c2c8 !important;
  color: #9f1239 !important;
  background: linear-gradient(
    180deg,
    #fff5f6 0%,
    #ffe4e8 50%,
    #fecdd3 100%
  ) !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 6px 14px rgba(251, 113, 133, 0.22);
}

/* Teal accent CTAs still use the same light family */
.admin-layout .ae-btn--teal {
  border-color: #7dd3c0 !important;
  color: #0f766e !important;
  background: linear-gradient(180deg, #ecfdf8 0%, #ccfbf1 50%, #99f6e4 100%) !important;
}

.admin-layout .primary-button:active,
.admin-layout .secondary-button:active,
.admin-layout .btn:active,
.admin-layout .admins-primary-btn:active,
.admin-layout .admins-secondary-btn:active {
  transform: translateY(1px) scale(0.985);
  animation: none;
}

.admin-layout .primary-button:disabled,
.admin-layout .secondary-button:disabled,
.admin-layout .btn:disabled,
.admin-layout button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  animation: none !important;
  filter: grayscale(0.15);
  box-shadow: none;
}

/* Keep auto-width helpers working */
.admin-layout .primary-button.auto-width,
.admin-layout .secondary-button.auto-width {
  width: auto;
}

/* Soft page panels stay on shared surface language */
.admin-layout .main-content {
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .admin-layout .primary-button,
  .admin-layout .secondary-button,
  .admin-layout .btn,
  .admin-layout .admins-primary-btn,
  .admin-layout .admins-secondary-btn,
  .admin-layout .ae-btn,
  .admin-layout .lep-btn,
  .admin-layout .monitoring-btn,
  .admin-layout .traffic-btn,
  .admin-layout .token-action-button {
    transition: none;
    animation: none !important;
  }
}