:root {
  --jids-black: #111827;
  --jids-graphite: #344054;
  --jids-muted: #667085;
  --jids-accent: #2563eb;
  --jids-accent-deep: #1d4ed8;
  --jids-white: #ffffff;
  --jids-platinum: #f7f8fa;
  --jids-line: #e4e7ec;
  --jids-success: #0f8a63;
  --jids-warning: #b7791f;
  --jids-critical: #c83245;
  --jids-ai: #2563eb;
  --jids-radius: 14px;
  --jids-radius-sm: 8px;
  --jids-shadow: 0 18px 44px rgba(9, 9, 9, .08);
  --jids-shadow-soft: 0 10px 26px rgba(9, 9, 9, .055);
  --jids-font: Inter, "SF Pro Display", "Segoe UI", Arial, sans-serif;
}

html,
body {
  background: var(--jids-platinum) !important;
}

body,
button,
input,
select,
textarea {
  font-family: var(--jids-font) !important;
  letter-spacing: 0 !important;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
}

.app,
.jxmail,
.jids-app {
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, .06), transparent 360px),
    linear-gradient(180deg, #fff 0, #f8fafc 300px, var(--jids-platinum) 100%) !important;
}

.side,
.sidebar,
aside.jids-sidebar {
  background: rgba(255, 255, 255, .97) !important;
  border-right: 1px solid var(--jids-line) !important;
  box-shadow: 14px 0 34px rgba(9, 9, 9, .045) !important;
}

.brand-mark,
.logo,
.mark,
.j9726-logo,
.j9726-mark,
.jids-mark {
  background: #eef4ff !important;
  border: 1px solid #c7d7fe !important;
  color: var(--jids-accent-deep) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .80), 0 10px 22px rgba(37, 99, 235, .12) !important;
}

.nav-item,
.side nav a,
.sidebar nav a {
  border-radius: var(--jids-radius-sm) !important;
  color: #1b2028 !important;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.nav-item:hover,
.side nav a:hover,
.sidebar nav a:hover {
  background: #f5f8ff !important;
  color: var(--jids-black) !important;
  transform: translateX(1px);
}

.nav-item.active,
.side nav a.active,
.sidebar nav a.active,
.j9726-nav a.active {
  background: #eef4ff !important;
  border-color: #c7d7fe !important;
  box-shadow: inset 3px 0 0 var(--jids-ai) !important;
  color: var(--jids-black) !important;
}

.top,
.topbar,
.header,
.page-header,
.hero,
.panel,
.card,
.metric,
.kpi,
.jids-card {
  border-color: var(--jids-line) !important;
}

.top,
.topbar,
.header,
.page-header {
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 1px 0 rgba(9, 9, 9, .04) !important;
  backdrop-filter: blur(18px);
}

.top > div:first-child,
.topbar > div:first-child,
.header > div:first-child,
.page-header > div:first-child {
  flex: 1 1 340px !important;
  min-width: 260px;
}

.top h1,
.topbar h1,
.header h1,
.page-header h1 {
  line-height: 1.12 !important;
  white-space: normal;
}

.top-actions,
.jarvis-actions {
  flex: 0 1 auto !important;
}

.search:not(input),
.jarvis-search:not(input) {
  width: min(360px, 30vw) !important;
}

.hero,
.panel,
.card,
.metric,
.kpi,
.jids-card {
  background: var(--jids-white) !important;
  border-radius: var(--jids-radius) !important;
  box-shadow: var(--jids-shadow-soft) !important;
}

.hero {
  box-shadow: var(--jids-shadow) !important;
}

h1,
h2,
h3 {
  color: var(--jids-black) !important;
  letter-spacing: 0 !important;
}

p,
.muted,
.sub,
.crumb,
.label,
td span {
  color: var(--jids-muted) !important;
}

.kicker,
.nav-section,
.label,
th {
  color: var(--jids-accent-deep) !important;
}

.btn,
button,
.jids-button {
  border-radius: var(--jids-radius-sm) !important;
  font-weight: 850 !important;
}

.btn:not(.ghost):not(.soft):not(.green):not(.red),
button.btn:not(.ghost):not(.soft):not(.green):not(.red),
.btn.primary,
.jids-button-primary {
  background: linear-gradient(145deg, #3b82f6, #1d4ed8) !important;
  border-color: #1d4ed8 !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(37, 99, 235, .18) !important;
}

.btn.soft,
.btn.ghost,
.jids-button-secondary {
  background: #fff !important;
  border-color: var(--jids-line) !important;
  color: var(--jids-black) !important;
}

.btn.blue {
  background: linear-gradient(145deg, #3b82f6, #1d4ed8) !important;
  border-color: #1d4ed8 !important;
  color: #fff !important;
}

.jids-ai-action {
  background: #fff !important;
  border-color: rgba(37, 99, 235, .34) !important;
  color: var(--jids-ai) !important;
  box-shadow: inset 0 -2px 0 rgba(37, 99, 235, .08) !important;
}

.btn.green,
.pill.green,
.pill.ok {
  background: #ecfdf5 !important;
  border-color: #b7f1d8 !important;
  color: var(--jids-success) !important;
}

.btn.red,
.pill.red,
.pill.bad,
.bad {
  background: #fff1f2 !important;
  border-color: #ffd3d9 !important;
  color: var(--jids-critical) !important;
}

.pill,
.tab,
.small {
  border-radius: 999px !important;
}

.tab.active,
.pill.yellow {
  background: #fffbeb !important;
  border-color: #fedf89 !important;
  color: var(--jids-warning) !important;
}

input,
select,
textarea {
  border-color: #d8dee8 !important;
  border-radius: var(--jids-radius-sm) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--jids-accent) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14) !important;
  outline: none !important;
}

table {
  border-collapse: collapse;
}

th {
  font-size: 11px !important;
  letter-spacing: .06em !important;
}

td,
th {
  border-bottom-color: var(--jids-line) !important;
}

tr:hover td {
  background: #f8fbff;
}

@media (prefers-reduced-motion: no-preference) {
  .card,
  .panel,
  .metric,
  .kpi,
  .btn,
  button {
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }

  .card:hover,
  .metric:hover,
  .kpi:hover {
    transform: translateY(-1px);
    box-shadow: var(--jids-shadow) !important;
  }
}

@media (max-width: 860px) {
  .app {
    grid-template-columns: 1fr !important;
  }

  .side,
  .sidebar,
  aside.jids-sidebar {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 12px 14px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
  }

  .side nav,
  .sidebar nav,
  .side-card {
    display: none !important;
  }

  .brand {
    margin-bottom: 0 !important;
  }

  .top,
  .topbar,
  .header,
  .page-header,
  .hero {
    align-items: flex-start !important;
    grid-template-columns: 1fr !important;
  }

  .search:not(input),
  .jarvis-search:not(input) {
    width: 100% !important;
  }
}

@media (max-width: 1100px) {
  .j9726-side {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 14px 18px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
  }

  .j9726-nav {
    display: none !important;
  }

  .j9726-brand {
    margin-bottom: 0 !important;
  }

  .j9726-shell,
  .j9726-main {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .j9726-main .top {
    box-sizing: border-box !important;
    display: grid !important;
    gap: 16px !important;
    grid-template-columns: minmax(220px, 240px) minmax(0, 1fr) !important;
    max-width: 100% !important;
  }

  .j9726-main .top-actions,
  .j9726-main .search-wrap,
  .j9726-main input.search {
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 600px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .j9726-main,
  .j9726-main main,
  .j9726-main section {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    width: 100% !important;
  }

  .j9726-main .top {
    align-items: stretch !important;
    display: grid !important;
    gap: 12px !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 116px !important;
    overflow: visible !important;
    padding: 12px 16px !important;
    position: sticky !important;
  }

  .j9726-main .top-actions {
    display: grid !important;
    gap: 8px !important;
    grid-template-columns: minmax(0, 1fr) 42px 42px !important;
    justify-content: stretch !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .j9726-main .search-wrap,
  .j9726-main input.search {
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .j9726-main .user {
    display: none !important;
  }

  .j9726-main .grid5,
  .j9726-main .grid4,
  .j9726-main .grid3,
  .j9726-main .grid2 {
    display: grid !important;
    gap: 16px !important;
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .j9726-main .card,
  .j9726-main .kpi,
  .j9726-main .panel,
  .j9726-main .metric {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .j9726-main .row {
    flex-wrap: wrap !important;
    gap: 8px 14px !important;
  }
}