/* WebBordro - Centralized Theme & Preline UI Styles */

:root {
  --color-bg-app: #fafafa;
  --color-bg-card: #ffffff;
  --color-bg-subtle: #f8fafc;
  --color-bg-input: #ffffff;
  --color-border: #e2e8f0;
  --color-border-subtle: #f1f5f9;
  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted: #64748b;
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-header-bg: rgba(255, 255, 255, 0.9);
}

html[data-theme='dark'], html.dark {
  --color-bg-app: #0f172a;
  --color-bg-card: #1e293b;
  --color-bg-subtle: #0f172a;
  --color-bg-input: #1e293b;
  --color-border: #334155;
  --color-border-subtle: #1e293b;
  --color-text-primary: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-header-bg: rgba(15, 23, 42, 0.9);
}

html[data-theme='cyberpunk'] {
  --color-bg-app: #000000;
  --color-bg-card: #000000;
  --color-bg-subtle: #0a0a0a;
  --color-bg-input: #000000;
  --color-border: #ffff00;
  --color-border-subtle: #ffff00;
  --color-text-primary: #ffff00;
  --color-text-secondary: #ffff00;
  --color-text-muted: #e6e600;
  --color-primary: #ffff00;
  --color-primary-hover: #ffff33;
  --color-header-bg: rgba(0, 0, 0, 0.95);
}

html { color-scheme: light; background-color: var(--color-bg-app); }
html[data-theme='dark'], html[data-theme='cyberpunk'] { color-scheme: dark; }
body { background-color: var(--color-bg-app); color: var(--color-text-primary); }

html[data-theme='dark'],
html[data-theme='dark'] body {
  background-color: #0f172a !important;
  color: #f8fafc;
}

html[data-theme='dark'] main,
html[data-theme='dark'] footer {
  background-color: transparent;
}

/* Dark theme depth: page, surfaces and controls remain visually distinct. */
html[data-theme='dark'] header { background-color: #1e293b !important; }
html[data-theme='dark'] #inputCard,
html[data-theme='dark'] #calcForm > div { background-color: #111c31 !important; }
html[data-theme='dark'] #inputCard select,
html[data-theme='dark'] #inputCard input:not([type='radio']):not([type='checkbox']),
html[data-theme='dark'] #inputCard .calc-mode-pill {
  background-color: #1e293b !important;
  border-color: #3b4a61 !important;
}
html[data-theme='dark'] #app-purpose-note {
  background-color: #162238 !important;
  border-color: #334155 !important;
}

/* Strong selected state for Net / Brut mode. */
.calc-mode-pill:has(input:checked) {
  border-color: #2563eb !important;
  background-color: #eff6ff !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.14);
}
.calc-mode-pill:has(input:checked) span { color: #1d4ed8 !important; }
html[data-theme='dark'] .calc-mode-pill:has(input:checked) {
  border-color: #60a5fa !important;
  background-color: #172554 !important;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.16);
}
html[data-theme='dark'] .calc-mode-pill:has(input:checked) span { color: #bfdbfe !important; }

/* Denser payroll form without changing field structure. */
#app-purpose-note { padding: 0.75rem 1rem !important; }
#parameters-heading { margin-bottom: -0.65rem; }
#inputCard > div { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
#inputCard .saas-label { margin-bottom: 0.55rem !important; }
#inputCard .h-\[70px\],
#inputCard .\!h-\[70px\] { height: 54px !important; }
#inputCard button[onclick*="openDistributionModal"] {
  padding-left: 1rem;
  padding-right: 1rem;
  min-height: 38px;
}

/* Preline overlay fallback and transition state. */
.hs-overlay.open, .hs-overlay.opened {
  display: block;
  pointer-events: auto;
  z-index: 11000 !important;
  background-color: rgba(2, 6, 23, 0.74);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.hs-overlay.open > div, .hs-overlay.opened > div { margin-top: 1.75rem; opacity: 1; }

html[data-theme='light'] .hs-overlay.open,
html[data-theme='light'] .hs-overlay.opened {
  background-color: rgba(15, 23, 42, 0.56);
}

/* Distribution overlay: one scroll area with persistent actions. */
#distributionModal > div { align-items: flex-start; }
#distributionModal > div > div {
  max-height: calc(100dvh - 3.5rem);
  overflow: hidden;
}
.distribution-modal-header { flex: 0 0 auto; }
.distribution-modal-body {
  min-height: 0;
  overflow-y: auto;
}
#distMonthsContainer { gap: 0.85rem !important; }
.distribution-actions {
  position: sticky;
  bottom: -1rem;
  z-index: 5;
  margin-left: -1rem;
  margin-right: -1rem;
  padding: 0.9rem 1rem 0.25rem;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
html[data-theme='dark'] .distribution-actions { background: rgba(15, 23, 42, 0.96); }

/* Theme-aware, informative boot state. */
#boot-loader { background: #f8fafc; color: #0f172a; }
#boot-loader h2 { color: #0f172a !important; }
.boot-loader-message { margin: 0 0 1rem; font-size: 13px; color: #64748b; }
.boot-loader-steps { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.boot-loader-steps span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font-size: 10px;
  font-weight: 700;
}
html[data-theme='dark'] #boot-loader { background: #0f172a; color: #f8fafc; }
html[data-theme='dark'] #boot-loader h2 { color: #f8fafc !important; }
html[data-theme='dark'] .boot-loader-message { color: #94a3b8; }
html[data-theme='dark'] .boot-loader-steps span {
  background: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
}
html[data-theme='dark'] #boot-loader svg { filter: invert(1) hue-rotate(180deg); }

@media (max-width: 640px) {
  #app-purpose-note { font-size: 12px; line-height: 1.45; }
  #parameters-heading { margin-bottom: -0.9rem; }
  #inputCard > div { padding: 1rem !important; }
  #inputCard .saas-label { margin-bottom: 0.45rem !important; }
  #inputCard .h-\[70px\], #inputCard .\!h-\[70px\] { height: 52px !important; }
  #cookie-consent-bar > div { align-items: center; }
  #cookie-consent-bar p { max-width: 240px; }
  #distributionModal > div { margin: 0.75rem; width: calc(100% - 1.5rem); }
  #distributionModal > div > div { max-height: calc(100dvh - 1.5rem); }
  .distribution-modal-header { padding: 1rem !important; }
  .distribution-modal-header h3 { font-size: 1.05rem; }
  .distribution-modal-body { padding: 0.85rem !important; }
  .distribution-helper { margin-bottom: 0.75rem; }
  .distribution-actions {
    bottom: -0.85rem;
    margin-left: -0.85rem;
    margin-right: -0.85rem;
    padding: 0.75rem 0.85rem;
  }
  .distribution-actions > button { display: none; }
}

/* Preline Form Control Enhancements */
.preline-input {
  background-color: var(--color-bg-input);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

.preline-input:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 1px var(--color-primary);
}

.preline-card {
  background-color: var(--color-bg-card);
  border-color: var(--color-border);
}

/* Table Hover & Striping */
.datagrid-table tbody tr {
  transition: background-color 0.15s ease-in-out;
}

.datagrid-table tbody tr:hover {
  background-color: rgba(59, 130, 246, 0.04);
}

html.dark .datagrid-table tbody tr:hover,
html[data-theme='dark'] .datagrid-table tbody tr:hover {
  background-color: rgba(59, 130, 246, 0.1);
}