@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
  /* Base tint for fallbacks; main admin uses .admin-shell-canvas */
  --cms-content-bg: #f3f5fa;

  /* SaaS-style accent: blue → indigo → violet */
  --cms-accent-blue: #2563eb;
  --cms-accent-indigo: #4f46e5;
  --cms-accent-violet: #7c3aed;
  --cms-accent-gradient: linear-gradient(
    125deg,
    var(--cms-accent-blue) 0%,
    var(--cms-accent-indigo) 48%,
    var(--cms-accent-violet) 100%
  );
  --cms-accent-gradient-soft: linear-gradient(
    125deg,
    rgba(37, 99, 235, 0.14) 0%,
    rgba(79, 70, 229, 0.12) 45%,
    rgba(124, 58, 237, 0.1) 100%
  );
  --cms-accent-glow: 0 8px 28px -6px rgba(79, 70, 229, 0.42);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --ease-cms: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Layered premium canvas (main column behind cards) */
.admin-shell-canvas {
  background-color: #eef1f8;
  background-image:
    radial-gradient(ellipse 90% 60% at 0% -10%, rgba(37, 99, 235, 0.08), transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 0%, rgba(124, 58, 237, 0.07), transparent 50%),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(79, 70, 229, 0.06), transparent 45%),
    linear-gradient(180deg, #eef1f8 0%, #f5f7fb 38%, #f0f3f9 100%);
}

/* Deep navy sidebar + dark menu */
.cms-dashboard-sider.ant-layout-sider {
  background: linear-gradient(185deg, #0a1224 0%, #0d1730 42%, #0a1426 100%) !important;
  box-shadow: 4px 0 32px -12px rgba(0, 0, 0, 0.35);
}

.cms-dashboard-sider .ant-layout-sider-children {
  background: transparent !important;
}

.cms-dashboard-sider .ant-menu-dark,
.cms-dashboard-sider .ant-menu-dark .ant-menu-sub {
  background: transparent !important;
}

.cms-dashboard-sider .ant-menu-dark.ant-menu-inline .ant-menu-item,
.cms-dashboard-sider .ant-menu-dark .ant-menu-item {
  margin-inline: 10px !important;
  width: calc(100% - 20px) !important;
  margin-block: 5px !important;
  border-radius: 12px !important;
  transition:
    background 0.22s ease,
    color 0.2s ease,
    box-shadow 0.22s ease,
    transform 0.18s ease;
}

.cms-dashboard-sider .ant-menu-dark .ant-menu-item .anticon {
  transition: color 0.2s ease;
}

.cms-dashboard-sider .ant-menu-dark .ant-menu-item:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

.cms-dashboard-sider .ant-menu-dark .ant-menu-item-selected {
  background: linear-gradient(
    105deg,
    rgba(99, 102, 241, 0.38) 0%,
    rgba(99, 102, 241, 0.14) 100%
  ) !important;
  color: #fff !important;
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.35),
    0 8px 28px -8px rgba(79, 70, 229, 0.55);
}

.cms-dashboard-sider .ant-menu-dark .ant-menu-item-selected .anticon {
  color: #e0e7ff !important;
}

.cms-dashboard-sider .ant-menu-dark .ant-menu-item:active {
  transform: scale(0.98);
}

.cms-dashboard-sider .ant-menu-dark .ant-menu-item a,
.cms-dashboard-sider .ant-menu-dark .ant-menu-item a:hover {
  color: inherit;
}

/* Premium surface cards + hover lift */
.cms-surface-card.ant-card {
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 16px -4px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  border: 1px solid rgba(15, 23, 42, 0.07);
  transition:
    transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1),
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

.cms-surface-card.ant-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 4px 8px rgba(15, 23, 42, 0.04),
    0 16px 40px -12px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.75) inset,
    var(--cms-accent-glow);
  border-color: rgba(79, 70, 229, 0.18);
}

.cms-crud-card.ant-card {
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 8px 28px -8px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.55) inset;
  border: 1px solid rgba(15, 23, 42, 0.08);
  transition:
    transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1),
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

.cms-crud-card.ant-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 16px rgba(15, 23, 42, 0.06),
    0 20px 44px -14px rgba(15, 23, 42, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.65) inset,
    var(--cms-accent-glow);
  border-color: rgba(79, 70, 229, 0.16);
}

/* Toolbar “Create” — gradient primary, stands out top-right */
.admin-shell-root .cms-toolbar-create .ant-btn.ant-btn-primary {
  height: 44px !important;
  padding-inline: 22px !important;
  font-weight: 600 !important;
  border: none !important;
  background-image: var(--cms-accent-gradient) !important;
  box-shadow:
    0 4px 16px -4px rgba(79, 70, 229, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.22s ease,
    filter 0.2s ease !important;
}

.admin-shell-root .cms-toolbar-create a .ant-btn.ant-btn-primary:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.05);
  box-shadow:
    0 12px 32px -8px rgba(79, 70, 229, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.28) inset !important;
}

.admin-shell-root .cms-toolbar-create a .ant-btn.ant-btn-primary:active:not(:disabled) {
  transform: translateY(0) scale(1);
}

/* Section title icon tile (forms + in-card sections) */
.cms-section-title-icon {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background: var(--cms-accent-gradient-soft);
  color: var(--cms-accent-indigo);
  font-size: 1.125rem;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 0 0 1px rgba(79, 70, 229, 0.14);
}

/* Page-level H1 row icon plate */
.cms-page-heading-icon {
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.875rem;
  background: var(--cms-accent-gradient-soft);
  color: var(--cms-accent-indigo);
  font-size: 1.125rem;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 0 0 1px rgba(79, 70, 229, 0.12) inset;
}

/* Tables */
.cms-data-table .ant-table-thead > tr > th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55);
  background: rgba(255, 255, 255, 0.65) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}

.cms-data-table .ant-table-tbody > tr.ant-table-row {
  cursor: default;
}

.cms-data-table .ant-table-tbody > tr.ant-table-row > td {
  transition: background 0.2s ease;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05) !important;
}

.cms-data-table .ant-table-tbody > tr.ant-table-row:nth-child(even) > td {
  background: rgba(99, 102, 241, 0.025) !important;
}

.cms-data-table .ant-table-tbody > tr.ant-table-row:hover > td {
  background: rgba(99, 102, 241, 0.1) !important;
}

/* Primary buttons: depth + motion */
.admin-shell-root .ant-btn-primary:not(:disabled) {
  transition:
    transform 0.18s ease,
    box-shadow 0.22s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.admin-shell-root .ant-btn-primary:not(:disabled):hover {
  box-shadow: 0 10px 28px -10px rgba(79, 70, 229, 0.55);
  transform: translateY(-1px);
}

.admin-shell-root .ant-btn-primary:not(:disabled):active {
  transform: translateY(0);
  box-shadow: 0 4px 14px -6px rgba(79, 70, 229, 0.45);
}

.admin-shell-root .ant-btn-default:not(:disabled) {
  transition:
    transform 0.18s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.admin-shell-root .ant-btn-default:not(:disabled):hover {
  border-color: rgba(99, 102, 241, 0.35);
  color: #4338ca;
}