/* ==================================================================
   Modern SaaS Theme — theme.css
   ================================================================== */

/* 1. CSS Variables & Base Reset
   -------------------------------------------------------------- */

:root {
  /* Typography */
  --font-family-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Ubuntu, sans-serif;

  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 16px;
  --font-size-h3: 20px;
  --font-size-h2: 24px;
  --font-size-h1: 28px;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --line-height-tight: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  /* Layout */
  --page-max-width: 1200px;
  --page-padding-x: 20px;
  --page-padding-y: 30px;
  --section-gap: 24px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;

  /* Colors (tweak these to re-skin the app) */
  --color-bg-body: #f8fafc;
  --color-bg-surface: #ffffff;
  --color-bg-subtle: #f9fafb;
  --color-bg-muted: #f3f4f6;

  --color-border-subtle: #e5e7eb;
  --color-border-soft: #dcdfe6;

  --color-text-main: #111827;
  --color-text-muted: #6b7280;
  --color-text-soft: #9ca3af;

  /* Accent palette (change once → updates everywhere) */
  --color-primary: #3b82f6; /* You can customize this to any accent */
  --color-primary-soft: rgba(59, 130, 246, 0.12);

  --color-success: #22c55e;
  --color-success-soft: rgba(34, 197, 94, 0.12);

  --color-warning: #f59e0b;
  --color-warning-soft: rgba(245, 158, 11, 0.12);

  --color-danger: #ef4444;
  --color-danger-soft: rgba(239, 68, 68, 0.12);

  --color-secondary: #6b7280;
  --color-secondary-soft: rgba(107, 114, 128, 0.12);

  /* Shadows */
  --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-soft-lg: 0 18px 40px rgba(15, 23, 42, 0.08);

  /* Transitions */
  --transition-fast: 0.15s ease-out;
  --transition-normal: 0.2s ease;
}

/* Global reset-ish styles */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-text-main);
  background-color: var(--color-bg-body);
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ==================================================================
   2. Layout & Page Wrapper
   ================================================================== */

.page-wrapper {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--page-padding-y) var(--page-padding-x);
}

.page-section {
  margin-bottom: var(--section-gap);
}

/* Section spacing helpers */
.section-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ==================================================================
   3. Typography helpers
   ================================================================== */

.h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.01em;
}

.h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.01em;
}

.h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

.text-muted {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ==================================================================
   4. Section Headers & Labels
   ================================================================== */

.section-title {
  margin-bottom: 16px;
}

.section-title-label {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background-color: var(--color-bg-muted);
  color: var(--color-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em; /* 1–2px at normal sizes */
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  margin-bottom: 6px;
}

.section-title-main {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.section-title-desc {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ==================================================================
   5. Cards & Containers
   ================================================================== */

.card {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 24px;
}

.card--spacious {
  padding: 28px 32px;
}

.card--muted {
  background-color: var(--color-bg-subtle);
}

.section-card {
  background-color: #f8fafc; /* pastel grey */
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-subtle);
  padding: 28px 32px;
  box-shadow: var(--shadow-soft);
}

/* Variant pastel backgrounds for sections */
.section-card--cream {
  background-color: #fffbea;
}

.section-card--soft {
  background-color: #f9fafb;
}

/* Highlight cards: pastel bg + subtle border */
.card--highlight-primary {
  background-color: var(--color-primary-soft);
  border-color: rgba(59, 130, 246, 0.4);
}

.card--highlight-success {
  background-color: var(--color-success-soft);
  border-color: rgba(34, 197, 94, 0.4);
}

.card--highlight-warning {
  background-color: var(--color-warning-soft);
  border-color: rgba(245, 158, 11, 0.4);
}

.card--highlight-danger {
  background-color: var(--color-danger-soft);
  border-color: rgba(239, 68, 68, 0.4);
}

/* Header/footer blocks inside cards */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.card-title {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
}

.card-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ==================================================================
   6. Forms & Inputs
   ================================================================== */

.form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-main);
}

.label span.label-optional {
  color: var(--color-text-soft);
  font-weight: var(--font-weight-normal);
}

/* Base input styles */
.input,
textarea.input,
select.input {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  border-radius: 8px;
  border: 1px solid var(--color-border-soft);
  background-color: #ffffff;
  color: var(--color-text-main);
  outline: none;
  transition: border-color var(--transition-normal),
    box-shadow var(--transition-normal),
    background-color var(--transition-normal),
    transform var(--transition-fast);
}

/* ==================================================================
   7. Utility Action Buttons
   ================================================================== */


/*
  NOTE: The submit buttons across the utility tools use the `.create` class.
  This block is intentionally duplicated here with high-specificity values so
  the pill styling always wins, even if other utility styles (or cached CSS)
  try to override the background. The !important flags keep the gradient
  visible everywhere so the updated design reliably shows up.
*/
.create,
button.create {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem 1.8rem;
  min-height: 44px;
  border-radius: 999px;
  background: linear-gradient(135deg, #10b981, #0a9b69) !important;
  color: #ffffff !important;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-md);
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  box-shadow: 0 12px 30px rgba(16, 185, 129, 0.26), 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    filter var(--transition-fast), background-color var(--transition-fast),
    color var(--transition-fast);
}


.create:hover,
button.create:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(16, 185, 129, 0.3), 0 8px 20px rgba(0, 0, 0, 0.08);
  filter: brightness(0.98);
}


.create:active,
button.create:active {
  transform: translateY(0);
  box-shadow: 0 10px 26px rgba(16, 185, 129, 0.22), 0 5px 14px rgba(0, 0, 0, 0.08);
}


.create:focus-visible,
button.create:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.35), 0 12px 32px rgba(16, 185, 129, 0.28);
}


.create:disabled,
button.create:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: none;
}

/* Slightly taller variant if you want */
.input--tall {
  padding-top: 12px;
  padding-bottom: 12px;
}

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

/* Focus ring using dynamic accent */
.input:focus,
textarea.input:focus,
select.input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
  background-color: #ffffff;
}

/* Disabled */
.input:disabled {
  background-color: #f3f4f6;
  color: var(--color-text-soft);
  cursor: not-allowed;
}

/* Inline input group */
.input-group {
  display: flex;
  align-items: stretch;
}

.input-group > .input {
  border-radius: 8px 0 0 8px;
}

.input-group > .input-group-addon {
  padding: 0 12px;
  display: flex;
  align-items: center;
  border-radius: 0 8px 8px 0;
  border: 1px solid var(--color-border-soft);
  border-left: none;
  background-color: #f9fafb;
  font-size: var(--font-size-sm);
  color: var(--color-text-soft);
}

/* ==================================================================
   8. Buttons
   ================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  cursor: pointer;
  background-color: var(--color-bg-muted);
  color: var(--color-text-main);
  transition: background-color var(--transition-normal),
    border-color var(--transition-normal),
    color var(--transition-normal),
    box-shadow var(--transition-normal),
    transform var(--transition-fast);
}

/* Shared hover/active micro-interactions */
.btn:hover {
  box-shadow: var(--shadow-soft);
  transform: translateY(-0.5px);
}

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

/* Disabled state */
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Primary (dynamic accent) */
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

.btn-primary:hover {
  background-color: #2563eb;
  border-color: #2563eb;
}

.btn-primary:active {
  background-color: #1d4ed8;
  border-color: #1d4ed8;
}

/* Secondary (neutral) */
.btn-secondary {
  background-color: #f9fafb;
  border-color: var(--color-border-subtle);
  color: var(--color-secondary);
}

.btn-secondary:hover {
  background-color: #eef1f5;
  border-color: #d1d5db;
}

.btn-secondary:active {
  background-color: #e5e7eb;
}

/* Success */
.btn-success {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: #ffffff;
}

.btn-success:hover {
  background-color: #16a34a;
  border-color: #16a34a;
}

.btn-success:active {
  background-color: #15803d;
}

/* Warning */
.btn-warning {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
  color: #111827;
}

.btn-warning:hover {
  background-color: #d97706;
  border-color: #d97706;
}

.btn-warning:active {
  background-color: #b45309;
}

/* Danger */
.btn-danger {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: #ffffff;
}

.btn-danger:hover {
  background-color: #dc2626;
  border-color: #dc2626;
}

.btn-danger:active {
  background-color: #b91c1c;
}

/* Ghost / subtle variant */
.btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-secondary);
}

.btn-ghost:hover {
  background-color: var(--color-secondary-soft);
}

/* ==================================================================
   8. Tables (for settings, lists, etc.)
   ================================================================== */

.table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.table thead {
  background-color: #f9fafb;
}

.table th,
.table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--color-border-subtle);
}

.table th {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-soft);
  font-weight: var(--font-weight-medium);
}

.table tr:hover td {
  background-color: #f9fafb;
}

/* ==================================================================
   9. Action Panels / Toolbars
   ================================================================== */

.action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.action-bar-left,
.action-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ==================================================================
   10. Overlay helpers
   ================================================================== */

.page-transition-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 150ms ease-in-out, visibility 150ms ease-in-out;
}

.page-transition-overlay[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.page-transition-overlay__card {
  width: min(94vw, 420px);
  border-radius: 18px;
  background: #ffffff;
  color: #0f172a;
  padding: 16px 18px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
}

.dark .page-transition-overlay__card {
  background: rgba(15, 23, 42, 0.92);
  color: #e2e8f0;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

/* ==================================================================
   11. Utility Classes (spacing, flex, grid)
   ================================================================== */

/* Spacing – use sparingly to keep things clean */

.u-mt-8 {
  margin-top: 8px;
}
.u-mt-16 {
  margin-top: 16px;
}
.u-mt-24 {
  margin-top: 24px;
}
.u-mb-8 {
  margin-bottom: 8px;
}
.u-mb-16 {
  margin-bottom: 16px;
}
.u-mb-24 {
  margin-bottom: 24px;
}
.u-pt-16 {
  padding-top: 16px;
}
.u-pb-16 {
  padding-bottom: 16px;
}
.u-p-16 {
  padding: 16px;
}
.u-p-24 {
  padding: 24px;
}

/* Flexbox */

.u-flex {
  display: flex;
}

.u-inline-flex {
  display: inline-flex;
}

.u-flex-row {
  flex-direction: row;
}

.u-flex-col {
  flex-direction: column;
}

.u-align-center {
  align-items: center;
}

.u-justify-between {
  justify-content: space-between;
}

.u-justify-center {
  justify-content: center;
}

.u-flex-wrap {
  flex-wrap: wrap;
}

/* Gaps */

.u-gap-8 {
  gap: 8px;
}

.u-gap-12 {
  gap: 12px;
}

.u-gap-16 {
  gap: 16px;
}

.u-gap-24 {
  gap: 24px;
}

/* Grid */

.u-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.u-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* Responsive: stack grids on small screens */

@media (max-width: 768px) {
  .page-wrapper {
    padding: 20px 16px;
  }

  .section-card,
  .card,
  .card--spacious {
    padding: 20px 18px;
  }

  .u-grid-2,
  .u-grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .action-bar {
    flex-direction: column;
    align-items: stretch;
  }
}