/* =====================================================
   DeciNexa Enterprise Portal Design System
   Shared by Financial Services, AgriTrade and future
   authenticated DeciNexa workspaces.
   ===================================================== */

:root {
  --dn-navy: #0d1b2f;
  --dn-navy-active: #1d3150;
  --dn-blue: #1769e0;
  --dn-cyan: #00a6c7;
  --dn-surface: #ffffff;
  --dn-canvas: #f4f7fb;
  --dn-border: #dfe6ef;
  --dn-text: #071b35;
  --dn-muted: #667085;
  --dn-success: #20b26b;
  --dn-sidebar-width: 250px;
  --dn-radius: 12px;
  --dn-shadow: 0 8px 24px rgba(16, 24, 40, .05);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  color: var(--dn-text);
  background: var(--dn-canvas);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
}

/* Shared sidebar */

.portal {
  grid-template-columns: var(--dn-sidebar-width) minmax(0, 1fr) !important;
}

.portal > aside,
body > .sidebar {
  width: var(--dn-sidebar-width) !important;
  color: #ffffff !important;
  background: var(--dn-navy) !important;
  padding: 28px 20px !important;
}

body > .sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 10;
}

.portal > aside .brand,
.sidebar .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: 0 0 40px !important;
  padding: 0 !important;
}

.portal > aside .brand > span,
.sidebar .brand .logo {
  display: grid;
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px;
  place-items: center;
  color: #ffffff;
  background:
    linear-gradient(
      135deg,
      var(--dn-blue),
      var(--dn-cyan)
    ) !important;
  border-radius: 10px !important;
  font-size: 16px;
  font-weight: 800;
}

.portal > aside .brand b,
.sidebar .brand strong {
  display: block;
  color: #ffffff;
  font-size: 18px !important;
  line-height: 1.2;
}

.portal > aside .brand small,
.sidebar .brand small {
  display: block;
  margin-top: 3px !important;
  color: #aab7ca !important;
  font-size: 13px !important;
  line-height: 1.3;
}

.portal > aside nav,
.sidebar nav {
  display: grid;
  gap: 8px !important;
  margin: 0 !important;
}

.portal > aside nav a,
.sidebar nav a {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px !important;
  color: #b9c5d6 !important;
  background: transparent !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.35;
  text-decoration: none;
}

.portal > aside nav a:hover,
.portal > aside nav a.active,
.sidebar nav a:hover,
.sidebar nav a.active {
  color: #ffffff !important;
  background: var(--dn-navy-active) !important;
}

/* AgriTrade workspace selector and policy */

.sidebar .workspace {
  margin: -10px 0 22px !important;
  padding: 15px 14px !important;
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: 10px !important;
}

.sidebar .workspace small {
  color: #7db5db !important;
  font-size: 9px !important;
  letter-spacing: .15em;
}

.sidebar .workspace b {
  margin-top: 7px !important;
  color: #ffffff;
  font-size: 13px !important;
}

.sidebar .policy {
  right: 20px !important;
  bottom: 28px !important;
  left: 20px !important;
  padding: 14px !important;
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: 10px !important;
}

/* Shared content canvas */

.content,
body > main:not(.dn404) {
  min-width: 0;
  color: var(--dn-text);
  background: var(--dn-canvas);
}

body > main:not(.dn404) {
  margin-left: var(--dn-sidebar-width) !important;
}

/* Shared workspace header */

.content > header,
body > main:not(.dn404) > header {
  display: flex !important;
  min-height: 132px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px;
  margin: 0 !important;
  padding: 28px 38px !important;
  background: transparent !important;
  border: 0 !important;
}

.content {
  padding: 0 38px 38px !important;
}

.content > header {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.portal-eyebrow,
.content .eyebrow {
  margin: 0 0 9px !important;
  color: var(--dn-blue) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
}

.content > header h1,
body > main:not(.dn404) > header h1 {
  margin: 0 !important;
  color: var(--dn-text) !important;
  font-size: 38px !important;
  font-weight: 750 !important;
  line-height: 1.12;
  letter-spacing: -.035em;
}

.header-actions,
.user {
  display: flex;
  align-items: center;
  gap: 16px !important;
}

.session-menu {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 16px;
  border-left: 1px solid var(--dn-border);
}

.session-identity,
.user > div {
  display: flex;
  flex-direction: column;
}

.session-identity small {
  color: #78869b !important;
  font-size: 8px !important;
  font-weight: 800;
  letter-spacing: .13em;
}

.session-identity strong,
.user b {
  margin-top: 3px;
  color: var(--dn-text);
  font-size: 14px;
}

.logout-button,
.user > button {
  min-height: 52px !important;
  padding: 0 20px !important;
  color: #ffffff !important;
  background: var(--dn-blue) !important;
  border: 1px solid var(--dn-blue) !important;
  border-radius: 9px !important;
  box-shadow: 0 9px 22px rgba(33, 103, 232, .18);
  font-family: inherit;
  font-size: 15px !important;
  font-weight: 650;
  cursor: pointer;
}

.logout-button:hover,
.user > button:hover {
  background: #145bc6 !important;
  border-color: #145bc6 !important;
  transform: translateY(-1px);
}

/* Shared secure workspace banner */

.welcome,
.portal-welcome {
  display: flex !important;
  min-height: 182px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 30px;
  margin: 0 !important;
  padding: 30px 34px !important;
  color: #ffffff !important;
  background:
    linear-gradient(
      120deg,
      #10284a,
      #1769e0
    ) !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 34px rgba(23, 105, 224, .12);
}

.portal-welcome {
  margin: 0 38px !important;
}

.welcome small,
.portal-welcome small,
.welcome .eyebrow {
  display: block;
  margin: 0 0 10px !important;
  color: #55a9ff !important;
  font-size: 11px !important;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.welcome h2,
.portal-welcome h2 {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 27px !important;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -.025em;
}

.welcome p,
.portal-welcome p {
  max-width: 900px;
  margin: 19px 0 0 !important;
  color: #d8e7ff !important;
  font-size: 16px !important;
  line-height: 1.55;
}

.welcome > span,
.portal-authenticated {
  flex: 0 0 auto;
  padding: 10px 14px !important;
  color: #d8ffe8 !important;
  background: rgba(18, 129, 71, .45) !important;
  border: 1px solid rgba(136, 255, 188, .45) !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  white-space: nowrap;
}

/* Shared page structure */

.page {
  max-width: none !important;
  margin: 0 !important;
  padding: 30px 38px 38px !important;
}

.title-row {
  min-height: 122px;
  align-items: center !important;
}

.title-row .eyebrow {
  margin: 0 0 8px !important;
  color: var(--dn-blue) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
}

.title-row h1 {
  margin: 0 0 11px !important;
  color: var(--dn-text) !important;
  font-size: 38px !important;
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: -.035em !important;
}

.title-row p {
  color: var(--dn-muted) !important;
  font-size: 15px !important;
  line-height: 1.5;
}

/* Shared status badge */

.status,
.badge {
  border-radius: 999px !important;
  font-weight: 750 !important;
}

.status {
  padding: 10px 14px !important;
  font-size: 12px !important;
}

.status.ok {
  color: #137a56 !important;
  background: #e8f8f0 !important;
}

/* Shared metric cards */

.metrics,
.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px !important;
  margin: 22px 0 !important;
}

.metrics article,
.kpis article,
.panel {
  background: var(--dn-surface) !important;
  border: 1px solid var(--dn-border) !important;
  border-radius: var(--dn-radius) !important;
  box-shadow: var(--dn-shadow) !important;
}

.metrics article,
.kpis article {
  min-height: 168px;
  padding: 24px !important;
}

.metrics label,
.metrics small,
.kpis span,
.kpis small {
  display: block;
  color: var(--dn-muted) !important;
  font-size: 14px;
}

.metrics strong,
.kpis strong {
  display: block;
  margin: 12px 0 !important;
  color: var(--dn-text);
  font-size: 30px !important;
  font-weight: 750;
  line-height: 1;
}

/* Shared content panels */

.panel {
  overflow: hidden;
}

.panel-head {
  min-height: 112px;
  padding: 24px !important;
  border-bottom: 1px solid var(--dn-border) !important;
}

.panel-head h2,
.panel h3 {
  margin: 0 0 7px !important;
  color: var(--dn-text);
  font-size: 20px !important;
  font-weight: 750;
}

.panel-head p {
  color: var(--dn-muted) !important;
  font-size: 14px !important;
}

/* Responsive shell */

@media (max-width: 1100px) {
  .metrics,
  .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .portal > aside,
  body > .sidebar {
    display: none !important;
  }

  body > main:not(.dn404) {
    margin-left: 0 !important;
  }
}

@media (max-width: 700px) {
  .content {
    padding: 0 18px 24px !important;
  }

  .content > header,
  body > main:not(.dn404) > header {
    min-height: auto !important;
    align-items: flex-start !important;
    flex-direction: column !important;
    padding: 24px 20px !important;
  }

  .content > header {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .content > header h1,
  body > main:not(.dn404) > header h1,
  .title-row h1 {
    font-size: 31px !important;
  }

  .portal-welcome {
    margin: 0 20px !important;
  }

  .welcome,
  .portal-welcome {
    min-height: 0 !important;
    align-items: flex-start !important;
    flex-direction: column !important;
    padding: 25px !important;
  }

  .page {
    padding: 25px 20px !important;
  }

  .title-row {
    min-height: auto;
    align-items: flex-start !important;
    flex-direction: column;
    padding: 10px 0 24px;
  }

  .metrics,
  .kpis {
    grid-template-columns: 1fr;
  }

  .session-identity {
    display: none;
  }
}