/* ═══════════════════════════════════════════════════════════════
   App.css — Ant Design dark-theme overrides for UserBrew
   All colours use tokens from index.css :root.
   ═══════════════════════════════════════════════════════════════ */

/* ── Layout base ─────────────────────────────────────────────── */
.ant-layout {
  background: var(--bg-base) !important;
  min-height: 100vh;
}

/* ── Header ──────────────────────────────────────────────────── */
.ant-layout-header {
  background: var(--bg-sidebar) !important;
  height: 64px !important;
  line-height: 64px !important;
  padding: 0 28px !important;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* ── Logo ────────────────────────────────────────────────────── */
.logo {
  font-family: 'DM Serif Display', serif;
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 11px;
  user-select: none;
}

.logo::before {
  content: '🔑';
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, var(--color-primary) 0%, #f97316 100%);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 0 20px var(--color-primary-glow);
  flex-shrink: 0;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.ant-layout-sider {
  background: var(--bg-sidebar) !important;
  border-right: 1px solid var(--border-subtle) !important;
  box-shadow: none !important;
}

/* Remove the pseudo-element border from App.css v1 */
.ant-layout-sider::after { display: none; }

/* ── Menu ────────────────────────────────────────────────────── */
.ant-menu-inline {
  background: transparent !important;
  border: none !important;
  padding: 12px 10px;
}

.ant-menu-item {
  height: 44px !important;
  line-height: 44px !important;
  margin: 2px 0 !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-muted) !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: 13px;
  transition:
    background var(--transition-fast),
    color     var(--transition-fast),
    transform var(--transition-fast) !important;
  border: none !important;
}

.ant-menu-item:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--text-secondary) !important;
  transform: translateX(3px);
}

.ant-menu-item-selected {
  background: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
  transform: translateX(3px);
}

.ant-menu-item-selected::after { display: none !important; }

.ant-menu-item .anticon {
  font-size: 16px !important;
  color: inherit !important;
}

/* Danger item (Sign out) */
.ant-menu-item-danger {
  color: var(--color-danger) !important;
  opacity: 0.75;
}
.ant-menu-item-danger:hover {
  color: var(--color-danger) !important;
  background: var(--color-danger-bg) !important;
  opacity: 1;
}

/* ── Content ─────────────────────────────────────────────────── */
.ant-layout-content {
  background: var(--bg-base) !important;
}

/* ── Cards ───────────────────────────────────────────────────── */
.ant-card {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--bg-secondary) !important;
  transition:
    box-shadow var(--transition-normal),
    transform  var(--transition-normal),
    border-color var(--transition-normal) !important;
}

.ant-card:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: var(--border-color) !important;
  transform: translateY(-2px);
}

.ant-card-head {
  background: transparent !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 14px 20px !important;
  min-height: 52px !important;
}

.ant-card-head-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.ant-card-extra { color: var(--text-muted); font-size: 13px; }
.ant-card-extra a { color: var(--color-primary) !important; }
.ant-card-extra a:hover { opacity: 0.8; }

.ant-card-body { padding: 20px !important; }

/* ── Buttons ─────────────────────────────────────────────────── */
.ant-btn {
  border-radius: var(--radius-md) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  height: 38px !important;
  padding: 0 18px !important;
  transition: all var(--transition-fast) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ant-btn-primary {
  background: var(--color-primary) !important;
  border: none !important;
  color: #0a0a0f !important;
  box-shadow: 0 2px 8px var(--color-primary-glow) !important;
}

.ant-btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover) !important;
  box-shadow: 0 4px 16px var(--color-primary-glow) !important;
  transform: translateY(-1px);
}

.ant-btn-default {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
}

.ant-btn-default:hover:not(:disabled) {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  background: var(--color-primary-light) !important;
}

.ant-btn-text {
  background: transparent !important;
  border: none !important;
  color: var(--text-muted) !important;
}

.ant-btn-text:hover:not(:disabled) {
  background: rgba(255,255,255,0.05) !important;
  color: var(--text-secondary) !important;
}

.ant-btn-dangerous {
  background: var(--color-danger-bg) !important;
  border: 1px solid rgba(239,68,68,0.2) !important;
  color: var(--color-danger) !important;
}

.ant-btn-dangerous:hover:not(:disabled) {
  background: var(--color-danger) !important;
  color: #fff !important;
}

/* Large variant */
.ant-btn-lg {
  height: 44px !important;
  font-size: 14px !important;
  padding: 0 22px !important;
}

/* ── Form ────────────────────────────────────────────────────── */
.ant-form-item-label > label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.ant-form-item-label > label::after { display: none !important; }

.ant-form-item-explain-error {
  font-size: 11px !important;
  color: #f87171 !important;
  margin-top: 4px !important;
}

/* ── Inputs ──────────────────────────────────────────────────── */
.ant-input,
.ant-input-affix-wrapper,
.ant-input-number {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
}

.ant-input::placeholder,
.ant-input-affix-wrapper input::placeholder {
  color: var(--text-muted) !important;
}

.ant-input:hover,
.ant-input-affix-wrapper:hover {
  border-color: var(--border-color) !important;
  background: #141620 !important;
}

.ant-input:focus,
.ant-input-affix-wrapper-focused {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-light) !important;
  background: #141620 !important;
}

.ant-input-prefix,
.ant-input-suffix,
.ant-input-password-icon { color: var(--text-muted) !important; }
.ant-input-password-icon:hover { color: var(--text-secondary) !important; }

/* Select */
.ant-select-selector {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
}

.ant-select-focused .ant-select-selector {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-light) !important;
}

.ant-select-selection-placeholder { color: var(--text-muted) !important; }

.ant-select-dropdown {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
}

.ant-select-item {
  color: var(--text-secondary) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  border-radius: 6px !important;
}

.ant-select-item-option-active  { background: var(--bg-overlay) !important; }
.ant-select-item-option-selected {
  background: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
  font-weight: 600 !important;
}

.ant-select-arrow { color: var(--text-muted) !important; }

/* ── Tables ──────────────────────────────────────────────────── */
.ant-table-wrapper {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  border: 1px solid var(--border-color) !important;
}

.ant-table {
  background: var(--bg-secondary) !important;
}

.ant-table-thead > tr > th {
  background: var(--bg-overlay) !important;
  border-bottom: 1px solid var(--border-color) !important;
  color: var(--text-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.ant-table-tbody > tr > td {
  background: transparent !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  color: var(--text-secondary) !important;
  transition: background var(--transition-fast) !important;
}

.ant-table-tbody > tr:last-child > td { border-bottom: none !important; }

.ant-table-tbody > tr:hover > td {
  background: var(--bg-tertiary) !important;
}

.ant-table-column-sorter { color: var(--text-muted) !important; }
.ant-table-filter-trigger { color: var(--text-muted) !important; }

/* Pagination inside table */
.ant-table-pagination { padding: 12px 16px !important; }

/* ── Pagination ──────────────────────────────────────────────── */
.ant-pagination-item {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
}

.ant-pagination-item a { color: var(--text-secondary) !important; }
.ant-pagination-item:hover { border-color: var(--color-primary) !important; }
.ant-pagination-item:hover a { color: var(--color-primary) !important; }

.ant-pagination-item-active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.ant-pagination-item-active a { color: #0a0a0f !important; font-weight: 700 !important; }

.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-muted) !important;
}

.ant-pagination-total-text { color: var(--text-muted) !important; font-size: 12px !important; }

/* ── Tags ────────────────────────────────────────────────────── */
.ant-tag {
  border-radius: var(--radius-sm) !important;
  padding: 2px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border: none !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.ant-tag-green   { background: rgba(16, 185, 129, 0.12) !important; color: #34d399 !important; }
.ant-tag-red     { background: rgba(239, 68, 68, 0.12)  !important; color: #f87171 !important; }
.ant-tag-orange  { background: rgba(245, 158, 11, 0.12) !important; color: #fbbf24 !important; }
.ant-tag-blue    { background: rgba(59, 130, 246, 0.12) !important; color: #60a5fa !important; }
.ant-tag-default { background: var(--bg-overlay) !important;         color: var(--text-muted) !important; }

/* ── Modals ──────────────────────────────────────────────────── */
.ant-modal-mask {
  background: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(4px);
}

.ant-modal-content {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl) !important;
  overflow: hidden;
}

.ant-modal-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 18px 24px !important;
}

.ant-modal-title {
  font-family: 'DM Serif Display', serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--text-primary);
}

.ant-modal-body    { padding: 24px !important; }
.ant-modal-footer  { border-top: 1px solid var(--border-subtle) !important; padding: 14px 24px !important; background: transparent !important; }
.ant-modal-close   { color: var(--text-secondary) !important; top: 14px !important; right: 20px !important; }
.ant-modal-close:hover { color: var(--text-primary) !important; }

.ant-drawer-close  { color: var(--text-secondary) !important; }
.ant-drawer-close:hover { color: var(--text-primary) !important; }

/* ── Statistics ──────────────────────────────────────────────── */
.ant-statistic-title {
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 10px !important;
}

/* Numbers: tabular, tight — NOT serif display */
.ant-statistic-content {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.03em !important;
}

.ant-statistic-content-value { color: #fff !important; }

.ant-statistic-content-prefix {
  font-size: 20px !important;
  margin-right: 8px !important;
  opacity: 0.7;
}

/* ── Tooltip ─────────────────────────────────────────────────── */
.ant-tooltip-inner {
  background: var(--bg-overlay) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  box-shadow: var(--shadow-md) !important;
}

.ant-tooltip-arrow::before { background: var(--bg-overlay) !important; }

/* ── Popconfirm ──────────────────────────────────────────────── */
.ant-popover-inner {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
}

.ant-popover-title         { color: var(--text-primary) !important; border-bottom-color: var(--border-subtle) !important; }
.ant-popover-inner-content { color: var(--text-secondary) !important; font-size: 13px !important; }

/* ── Dropdown ────────────────────────────────────────────────── */
.ant-dropdown-menu {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 6px !important;
}

.ant-dropdown-menu-item {
  color: var(--text-secondary) !important;
  border-radius: 6px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
}

.ant-dropdown-menu-item:hover    { background: var(--bg-tertiary) !important; color: var(--text-primary) !important; }
.ant-dropdown-menu-item-danger   { color: var(--color-danger) !important; }
.ant-dropdown-menu-item-divider  { background: var(--border-subtle) !important; margin: 6px 0 !important; }

/* Avatar in header */
.ant-avatar {
  background: var(--color-primary) !important;
  color: #0a0a0f !important;
  font-weight: 700 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* ── Notifications / Message ─────────────────────────────────── */
.ant-message-notice-content {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 10px 18px !important;
  color: var(--text-primary) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.ant-message-success .anticon { color: var(--color-success) !important; }
.ant-message-error   .anticon { color: var(--color-danger)  !important; }
.ant-message-warning .anticon { color: var(--color-warning) !important; }

/* ── Spin ────────────────────────────────────────────────────── */
.ant-spin-dot-item { background-color: var(--color-primary) !important; }

/* ── Alert ───────────────────────────────────────────────────── */
.ant-alert {
  border-radius: var(--radius-md) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.ant-alert-success {
  background: var(--color-success-bg) !important;
  border-color: rgba(16,185,129,0.2) !important;
}

.ant-alert-error {
  background: var(--color-danger-bg) !important;
  border-color: rgba(239,68,68,0.2) !important;
}

.ant-alert-warning {
  background: rgba(245,158,11,0.06) !important;
  border-color: rgba(245,158,11,0.2) !important;
}

.ant-alert-message     { color: var(--text-primary) !important; font-weight: 600 !important; font-size: 13px !important; }
.ant-alert-description { color: var(--text-muted) !important; font-size: 13px !important; }

/* ── Skeleton ────────────────────────────────────────────────── */
.ant-skeleton-element .ant-skeleton-avatar,
.ant-skeleton-element .ant-skeleton-button,
.ant-skeleton-content .ant-skeleton-title,
.ant-skeleton-content .ant-skeleton-paragraph > li {
  background: linear-gradient(
    90deg,
    var(--bg-tertiary) 25%,
    var(--bg-overlay)  50%,
    var(--bg-tertiary) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.6s infinite !important;
}

/* ── Page layout helpers ─────────────────────────────────────── */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  animation: fadeInUp 0.35s var(--ease-out) both;
}

.page-title {
  margin: 0;
  font-family: 'DM Serif Display', serif;
  font-size: 1.75rem;
  color: var(--text-primary);
  animation: slideInLeft 0.35s var(--ease-out) both;
}

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state {
  padding: 64px 24px;
  text-align: center;
}

.empty-state-icon        { font-size: 48px; color: var(--text-muted); margin-bottom: 16px; opacity: 0.4; }
.empty-state-title       { font-size: 16px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.empty-state-description { color: var(--text-muted); max-width: 380px; margin: 0 auto; font-size: 13px; }

/* ── Table row action fade-in ────────────────────────────────── */
.table-actions {
  opacity: 0;
  transform: translateX(-6px);
  transition: all var(--transition-fast);
}

.ant-table-tbody > tr:hover .table-actions {
  opacity: 1;
  transform: translateX(0);
}

/* ── Mobile ──────────────────────────────────────────────────── */
.mobile-menu-toggle { display: none !important; }

@media (max-width: 992px) {
  .mobile-menu-toggle { display: flex !important; }

  .ant-layout-sider {
    position: fixed !important;
    z-index: 200;
    height: 100vh;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
  }

  .ant-layout-sider.open { transform: translateX(0); }

  .ant-layout-content { padding: 20px !important; }
  h1 { font-size: 1.5rem !important; }
}

@media (max-width: 768px) {
  .ant-layout-header { padding: 0 16px !important; }
  .logo              { font-size: 17px; }
  .ant-modal-content { margin: 8px; border-radius: var(--radius-lg) !important; }
}

/* ── Focus ring (a11y) ───────────────────────────────────────── */
.ant-btn:focus-visible,
.ant-input:focus-visible,
.ant-menu-item:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
}