/* =========================================================
   Custom UI Refresh — modern, clean, animated
   Loaded after the app CSS, so these rules safely override.
   ========================================================= */

:root {
  --c-primary: rgba(var(--primary-color), 1);
  --c-primary-soft: rgba(var(--primary-color), 0.12);
  --c-primary-softer: rgba(var(--primary-color), 0.06);
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-soft: 0 10px 30px rgba(17, 24, 39, 0.08);
  --shadow-hover: 0 18px 50px rgba(17, 24, 39, 0.14);
  --transition: 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Global typography & smoothing --- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.1px;
}

/* Smooth scrollbars */
html.windows ::-webkit-scrollbar-thumb {
  background-color: rgba(var(--primary-color), 0.4) !important;
  border: none !important;
  border-radius: 99px !important;
}
html.windows ::-webkit-scrollbar-track {
  background-color: transparent !important;
  border: none !important;
}

/* =========================================================
   Cards
   ========================================================= */
.use-shadow {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-soft) !important;
  border: 1px solid rgba(17, 24, 39, 0.04);
  transition: transform var(--transition), box-shadow var(--transition);
}
.use-shadow:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover) !important;
}

/* =========================================================
   Buttons (Ant + custom n-button)
   ========================================================= */
.ant-btn {
  border-radius: 999px !important;
  font-weight: 600 !important;
  transition: transform var(--transition), box-shadow var(--transition),
    background-color var(--transition), border-color var(--transition) !important;
}
.ant-btn.ant-btn-primary:not(:disabled) {
  background-image: linear-gradient(
    135deg,
    rgba(var(--primary-color), 1),
    rgba(var(--primary-color), 0.78)
  ) !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(var(--primary-color), 0.35) !important;
}
.ant-btn.ant-btn-primary:not(:disabled):hover,
.ant-btn.ant-btn-primary:not(:disabled):focus {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(var(--primary-color), 0.45) !important;
}
.ant-btn:not(.ant-btn-primary):not(.ant-btn-link):hover {
  transform: translateY(-1px);
}

.n-button {
  border-radius: 999px !important;
  transition: transform var(--transition), box-shadow var(--transition),
    filter var(--transition) !important;
}
.n-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow: 0 10px 24px rgba(var(--primary-color), 0.28) !important;
}

/* The big primary buttons used in auth / order pages */
.btn,
.right-form .btn {
  border-radius: 999px !important;
}

/* =========================================================
   Inputs / forms
   ========================================================= */
.ant-input,
.ant-input-affix-wrapper,
.ant-input-number,
.ant-select-selection,
.ant-select-selector {
  border-radius: var(--radius-sm) !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
}
.ant-input:focus,
.ant-input-focused,
.ant-input-affix-wrapper:focus,
.ant-input-affix-wrapper-focused,
.ant-select-focused .ant-select-selection,
.ant-select-focused .ant-select-selector {
  border-color: rgba(var(--primary-color), 1) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-color), 0.15) !important;
}
.ant-input-lg {
  height: 46px;
  padding: 6px 14px;
}

/* =========================================================
   Auth pages (login / register / reset)
   ========================================================= */
.auth-container {
  background: radial-gradient(
      1200px 600px at 10% -10%,
      rgba(var(--primary-color), 0.10),
      transparent 60%
    ),
    radial-gradient(
      1000px 500px at 110% 110%,
      rgba(var(--primary-color), 0.08),
      transparent 55%
    );
}
.auth-box {
  border-radius: 24px !important;
  box-shadow: 0 30px 80px rgba(17, 24, 39, 0.12) !important;
  backdrop-filter: saturate(1.1);
  overflow: hidden;
}
.auth-box .right-form .wrapper {
  padding: 8px 4px;
}
.auth-box .title {
  font-weight: 800;
  letter-spacing: 0.2px;
}
.auth-box .agree a.blu,
.blu {
  color: rgba(var(--primary-color), 1) !important;
  font-weight: 600;
}

/* =========================================================
   Sidebar / layout
   ========================================================= */
.ant-layout-sider,
.side-bar,
.sidebar {
  box-shadow: 0 0 30px rgba(17, 24, 39, 0.05);
}
.ant-menu-item,
.ant-menu-submenu-title,
.menu-item {
  border-radius: var(--radius-sm) !important;
  transition: background-color var(--transition), color var(--transition),
    transform var(--transition) !important;
}
.ant-menu-item:hover,
.menu-item:hover {
  transform: translateX(2px);
}
.ant-menu-item-selected,
.ant-menu-item-active,
.menu-item.active {
  background: var(--c-primary-soft) !important;
  color: rgba(var(--primary-color), 1) !important;
}
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  background: var(--c-primary-soft) !important;
}

/* =========================================================
   Tables
   ========================================================= */
.ant-table {
  border-radius: var(--radius-md);
  overflow: hidden;
}
.ant-table-thead > tr > th {
  background: var(--c-primary-softer) !important;
  font-weight: 700 !important;
  color: #1f2430 !important;
  border-bottom: none !important;
}
.ant-table-tbody > tr > td {
  transition: background-color var(--transition);
}
.ant-table-tbody > tr:hover > td {
  background: var(--c-primary-softer) !important;
}

/* =========================================================
   Tags / badges
   ========================================================= */
.ant-tag {
  border-radius: 999px !important;
  padding: 0 12px;
  font-weight: 600;
  border: none !important;
}

/* =========================================================
   Plan / pricing cards
   ========================================================= */
.plan-card {
  border-radius: var(--radius-lg) !important;
  transition: transform var(--transition), box-shadow var(--transition) !important;
}
.plan-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--shadow-hover) !important;
}
.plan-card .t0 {
  border-radius: 999px !important;
}

/* Order summary blocks */
.order-box .tit {
  font-weight: 700;
}

/* =========================================================
   Modals & messages
   ========================================================= */
.ant-modal-content {
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(17, 24, 39, 0.18) !important;
}
.ant-modal-confirm .ant-modal-body {
  padding: 28px;
}
.ant-message-notice-content {
  border-radius: 999px !important;
  box-shadow: var(--shadow-soft) !important;
  padding: 10px 18px !important;
}
.ant-notification-notice {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-soft) !important;
}

/* =========================================================
   Stat / dashboard tiles entrance animation
   ========================================================= */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.use-shadow,
.plan-card {
  animation: fadeUp 0.5s var(--transition) both;
}

/* =========================================================
   Dark mode polish
   ========================================================= */
.is-darkmode {
  background-color: #1b1c1e;
}
.is-darkmode .use-shadow {
  background-color: #242528 !important;
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}
.is-darkmode .ant-table-thead > tr > th {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #e6e6e6 !important;
}
.is-darkmode .ant-table-tbody > tr:hover > td {
  background: rgba(var(--primary-color), 0.12) !important;
}
.is-darkmode .ant-modal-content {
  background-color: #242528 !important;
}