/* -------------------------------------------------------------------
   Stage 105.0B CLEAN — UI v2 Global Design System Foundation
   Frontend-only professional UI foundation for the real ISP Forge app.

   Scope:
   - CSS-first shell, card, table, form, button, modal and spacing polish.
   - Works with the existing static frontend and current route/module stack.
   - No route rewrites, no API changes, no data writes, no popup logic changes.

   This file deliberately improves existing shared classes instead of replacing
   page renderers. Module-by-module UI v2 conversions can build on this safely.
------------------------------------------------------------------- */

:root {
  --ui-v2-stage: "105.0B CLEAN";

  /* Refresh the existing v1 variables so older pages inherit the new look. */
  --bg: #eef4fb;
  --panel: #ffffff;
  --panel-soft: #f8fbff;
  --text: #0f172a;
  --muted: #64748b;
  --line: rgba(15, 23, 42, 0.11);
  --line-soft: rgba(15, 23, 42, 0.07);

  --nav: #07111f;
  --nav-2: #0f2036;
  --nav-3: #14375a;
  --brand: #0ea5a3;
  --brand-dark: #0f766e;
  --brand-soft: #dffcf8;
  --accent: #2563eb;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow: 0 22px 60px rgba(15, 23, 42, 0.12);
  --shadow-soft: 0 12px 32px rgba(15, 23, 42, 0.075);

  --ui-v2-focus-ring: 0 0 0 4px rgba(14, 165, 163, 0.16);
  --ui-v2-panel-glow: inset 0 1px 0 rgba(255,255,255,0.78);
}

body {
  background:
    radial-gradient(circle at 8% 0%, rgba(14, 165, 163, 0.13), transparent 30rem),
    radial-gradient(circle at 88% 8%, rgba(37, 99, 235, 0.12), transparent 30rem),
    linear-gradient(180deg, #f8fbff 0%, #eef4fb 46%, #e8eff8 100%);
  color: var(--text);
  font-family: var(--ui-v2-font-family, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

/* App shell */
.topbar {
  background:
    radial-gradient(circle at 16% 0%, rgba(20, 184, 166, 0.20), transparent 20rem),
    radial-gradient(circle at 100% 18%, rgba(59, 130, 246, 0.17), transparent 18rem),
    linear-gradient(180deg, #07111f 0%, #0b1726 55%, #08111e 100%) !important;
  border-right: 1px solid rgba(255,255,255,0.08);
  box-shadow: 22px 0 60px rgba(15,23,42,0.18) !important;
}

.logo-area {
  border-bottom-color: rgba(255,255,255,0.12) !important;
  padding-bottom: 18px !important;
}

.logo-area strong {
  letter-spacing: -0.035em;
}

.logo-area span {
  color: rgba(219,234,254,0.75) !important;
}

.brand-mark,
.logo-box {
  background: linear-gradient(135deg, #10b981 0%, #0ea5e9 100%) !important;
  box-shadow: 0 16px 36px rgba(14,165,163,0.26) !important;
}

.top-menu {
  gap: 6px !important;
}

.top-menu a,
#top-menu .stage831-menu-top {
  border-radius: 14px !important;
  color: rgba(219,234,254,0.88) !important;
  font-weight: 760;
}

.top-menu a:hover,
#top-menu .stage831-menu-top:hover,
#top-menu .stage831-menu-item:hover > .stage831-menu-top {
  background: rgba(255,255,255,0.095) !important;
  border-color: rgba(255,255,255,0.13) !important;
  color: #fff !important;
}

.top-menu a.active,
#top-menu .stage831-menu-item.active > .stage831-menu-top {
  background: linear-gradient(135deg, rgba(14,165,163,0.30), rgba(37,99,235,0.23)) !important;
  border-color: rgba(45,212,191,0.36) !important;
  box-shadow: inset 4px 0 0 #2dd4bf, 0 10px 26px rgba(0,0,0,0.12) !important;
  color: #fff !important;
}

#top-menu .stage831-dropdown {
  background: rgba(7, 17, 31, 0.97) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 18px !important;
  box-shadow: 0 28px 80px rgba(2, 6, 23, 0.34) !important;
  padding: 10px !important;
  backdrop-filter: blur(18px);
}

.user-chip {
  border-top-color: rgba(255,255,255,0.12) !important;
}

.user-chip button {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.14) !important;
}

.submenu-bar {
  background: rgba(255,255,255,0.86) !important;
  border-bottom: 1px solid rgba(15,23,42,0.09) !important;
  box-shadow: 0 12px 34px rgba(15,23,42,0.06) !important;
  backdrop-filter: blur(18px);
}

.submenu-bar a {
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(15,23,42,0.10) !important;
  color: #334155 !important;
  font-weight: 760;
}

.submenu-bar a.active,
.submenu-bar a:hover {
  background: linear-gradient(135deg, rgba(20,184,166,0.14), rgba(37,99,235,0.10)) !important;
  border-color: rgba(14,165,163,0.34) !important;
  color: #0f766e !important;
  box-shadow: 0 9px 22px rgba(14,165,163,0.12) !important;
}

.page {
  padding: 28px;
  padding-bottom: calc(var(--footer-height) + 38px);
}

.page-title-row,
.panel,
.shell-card,
.kpi,
.merge-card,
.ui-v2-card,
.stage822-header-card,
.stage822-card,
[class*="-card"]:not(.brand-mark):not(.logo-box) {
  border-color: rgba(15,23,42,0.10);
}

.page-title-row {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,251,255,0.92)),
    radial-gradient(circle at 100% 0%, rgba(14,165,163,0.12), transparent 18rem) !important;
  box-shadow: var(--shadow-soft), var(--ui-v2-panel-glow) !important;
}

.page-title-row h1 {
  color: #07111f !important;
  letter-spacing: -0.055em;
}

.page-title-row p,
.panel-header p,
.ui-v2-card-subtitle {
  color: #64748b !important;
}

/* Cards, panels and KPIs */
.panel,
.shell-card,
.kpi,
.merge-card,
.ui-v2-card {
  background: rgba(255,255,255,0.96) !important;
  border-radius: 22px !important;
  box-shadow: var(--shadow-soft), var(--ui-v2-panel-glow) !important;
}

.panel {
  overflow: hidden;
}

.panel-header {
  background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
  border-bottom-color: rgba(15,23,42,0.07) !important;
  padding: 17px 20px !important;
}

.panel-header h2,
.shell-card strong,
.kpi strong,
.section-title {
  color: #07111f !important;
}

.kpi-row {
  gap: 16px !important;
}

.kpi {
  padding: 18px !important;
}

.kpi::before {
  width: 5px !important;
  background: linear-gradient(180deg, #14b8a6, #2563eb) !important;
}

.kpi span {
  color: #64748b !important;
}

/* Forms */
label {
  color: #334155 !important;
  font-weight: 800;
}

input,
select,
textarea {
  background: #ffffff !important;
  border-color: rgba(15,23,42,0.13) !important;
  border-radius: 13px !important;
  color: #0f172a !important;
}

input:hover,
select:hover,
textarea:hover {
  border-color: rgba(14,165,163,0.34) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(14,165,163,0.70) !important;
  box-shadow: var(--ui-v2-focus-ring) !important;
}

.form-tabs {
  background: #f8fbff !important;
  border-bottom-color: rgba(15,23,42,0.08) !important;
}

.form-tabs .tab {
  border-color: rgba(15,23,42,0.10) !important;
  background: #eef6fb !important;
  color: #334155 !important;
}

.form-tabs .tab.active {
  background: linear-gradient(135deg, #14b8a6, #2563eb) !important;
  color: #ffffff !important;
}

/* Buttons and actions */
button,
.button,
.primary,
.secondary,
.danger {
  border-radius: 13px !important;
  font-weight: 800;
}

.primary,
#login-button {
  background: linear-gradient(135deg, #14b8a6 0%, #2563eb 100%) !important;
  box-shadow: 0 14px 30px rgba(14,165,163,0.20) !important;
}

.secondary {
  background: #eef6fb !important;
  border-color: rgba(15,23,42,0.11) !important;
  color: #1e293b !important;
}

.danger {
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
  color: #9f1239 !important;
}

button:hover,
.button:hover,
.primary:hover,
.secondary:hover,
.danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(15,23,42,0.13) !important;
}

/* Tables */
.table-wrap,
.ui-v2-table-wrap {
  background: #ffffff !important;
}

table {
  font-size: 14px;
}

th {
  background: #f5f8fc !important;
  border-bottom-color: rgba(15,23,42,0.10) !important;
  color: #475569 !important;
  font-weight: 850;
}

td {
  border-bottom-color: rgba(15,23,42,0.065) !important;
}

tbody tr {
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

tbody tr:hover {
  background: #f8fbff !important;
}

.badge,
.ui-v2-badge {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.30);
}

/* Modals and popup surfaces — visual polish only, not close/save logic. */
.modal,
.popup,
[class*="modal"],
[class*="popup"] {
  scrollbar-width: thin;
}

.modal-content,
.popup-content,
.stage828-modal,
[data-stage828-modal] {
  border-radius: 24px !important;
  box-shadow: 0 30px 90px rgba(2,6,23,0.24) !important;
}

.sticky-actions {
  background: #f8fbff !important;
  border-top-color: rgba(15,23,42,0.08) !important;
}

.notice-box,
.duplicate-warning,
.log-info,
.log-ok,
.log-error {
  border-radius: 16px !important;
}

.footer {
  background: rgba(255,255,255,0.90) !important;
  border-top-color: rgba(15,23,42,0.09) !important;
  box-shadow: 0 -10px 30px rgba(15,23,42,0.045);
}

/* Login screen gets the same UI v2 finish. */
.login-wrap {
  background:
    radial-gradient(circle at 20% 20%, rgba(20,184,166,0.28), transparent 28rem),
    radial-gradient(circle at 80% 10%, rgba(37,99,235,0.22), transparent 24rem),
    linear-gradient(135deg,#06111f,#14325a 54%,#0f766e) !important;
}

.login-card {
  border-radius: 28px !important;
  box-shadow: 0 32px 90px rgba(2,8,23,0.34) !important;
}

/* Dark compatibility with the existing dark contrast module. */
[data-theme="dark"],
html.dark,
body.dark,
body.theme-dark {
  --bg: #07111f;
  --panel: #0f172a;
  --panel-soft: #111c2f;
  --text: #e5eefb;
  --muted: #9fb0c8;
  --line: rgba(226,232,240,0.14);
  --line-soft: rgba(226,232,240,0.09);
  --shadow: 0 22px 60px rgba(0,0,0,0.35);
  --shadow-soft: 0 12px 32px rgba(0,0,0,0.25);
}

[data-theme="dark"] body,
html.dark body,
body.dark,
body.theme-dark {
  background:
    radial-gradient(circle at 8% 0%, rgba(14,165,163,0.13), transparent 30rem),
    radial-gradient(circle at 88% 8%, rgba(37,99,235,0.11), transparent 30rem),
    linear-gradient(180deg, #07111f 0%, #0b1726 100%) !important;
}

[data-theme="dark"] .page-title-row,
html.dark .page-title-row,
body.dark .page-title-row,
body.theme-dark .page-title-row,
[data-theme="dark"] .panel,
html.dark .panel,
body.dark .panel,
body.theme-dark .panel,
[data-theme="dark"] .shell-card,
html.dark .shell-card,
body.dark .shell-card,
body.theme-dark .shell-card,
[data-theme="dark"] .kpi,
html.dark .kpi,
body.dark .kpi,
body.theme-dark .kpi,
[data-theme="dark"] .merge-card,
html.dark .merge-card,
body.dark .merge-card,
body.theme-dark .merge-card {
  background: rgba(15,23,42,0.88) !important;
  border-color: rgba(226,232,240,0.13) !important;
  color: #e5eefb !important;
}

[data-theme="dark"] .panel-header,
html.dark .panel-header,
body.dark .panel-header,
body.theme-dark .panel-header,
[data-theme="dark"] .form-tabs,
html.dark .form-tabs,
body.dark .form-tabs,
body.theme-dark .form-tabs,
[data-theme="dark"] .sticky-actions,
html.dark .sticky-actions,
body.dark .sticky-actions,
body.theme-dark .sticky-actions {
  background: rgba(17,28,47,0.92) !important;
  border-color: rgba(226,232,240,0.10) !important;
}

[data-theme="dark"] input,
html.dark input,
body.dark input,
body.theme-dark input,
[data-theme="dark"] select,
html.dark select,
body.dark select,
body.theme-dark select,
[data-theme="dark"] textarea,
html.dark textarea,
body.dark textarea,
body.theme-dark textarea {
  background: rgba(15,23,42,0.96) !important;
  border-color: rgba(226,232,240,0.16) !important;
  color: #e5eefb !important;
}

[data-theme="dark"] th,
html.dark th,
body.dark th,
body.theme-dark th {
  background: rgba(17,28,47,0.96) !important;
  border-bottom-color: rgba(226,232,240,0.14) !important;
  color: #cbd5e1 !important;
}

[data-theme="dark"] td,
html.dark td,
body.dark td,
body.theme-dark td {
  border-bottom-color: rgba(226,232,240,0.08) !important;
}

[data-theme="dark"] tbody tr:hover,
html.dark tbody tr:hover,
body.dark tbody tr:hover,
body.theme-dark tbody tr:hover {
  background: rgba(148,163,184,0.08) !important;
}

@media (max-width: 900px) {
  .page {
    padding: 20px;
    padding-bottom: calc(var(--footer-height) + 30px);
  }

  .page-title-row {
    align-items: stretch;
    flex-direction: column;
  }
}