/* ==========================================================================
   HIRENTRA v0.8.0 BUILD 18 PHASE 6.1
   EXECUTIVE COMMERCIAL DASHBOARD
   ========================================================================== */

/* Keep the timeline chronological and make the current/newest month the
   far-right item. Narrow screens scroll horizontally and JS starts at the end. */
.monthly-exposure-cards {
  display: flex;
  grid-template-columns: none;
  gap: 9px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 3px;
}

.monthly-exposure-card {
  flex: 1 0 140px;
  min-width: 140px;
  max-width: none;
  scroll-snap-align: end;
  cursor: pointer;
}

.monthly-exposure-card.selected {
  outline: 2px solid rgba(255, 193, 7, 0.58);
  outline-offset: -2px;
}

.executive-commercial-section {
  margin: 16px 0;
  padding: 18px;
  border: 1px solid rgba(255, 193, 7, 0.20);
  border-radius: 18px;
  background: var(--panel, #172033);
}

.exec61-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.exec61-heading small,
.exec61-commercial-control small,
.exec61-locked small {
  display: block;
  color: #ffc107;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.11em;
}

.exec61-heading h2,
.exec61-locked h2 {
  margin: 3px 0;
  font-size: 1rem;
  font-weight: 900;
}

.exec61-heading p,
.exec61-commercial-control p,
.exec61-locked p {
  margin: 0;
  color: var(--muted, #94a3b8);
  font-size: 0.72rem;
  line-height: 1.4;
}

.exec61-heading > strong {
  color: #ffc107;
  font-size: 0.72rem;
  white-space: nowrap;
}

.exec61-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.exec61-metrics article {
  padding: 11px;
  border: 1px solid rgba(96, 165, 250, 0.15);
  border-radius: 12px;
  background: rgba(96, 165, 250, 0.045);
}

.exec61-metrics small {
  display: block;
  color: var(--muted, #94a3b8);
  font-size: 0.59rem;
  font-weight: 800;
}

.exec61-metrics strong {
  display: block;
  margin-top: 4px;
  font-size: 1rem;
  font-weight: 900;
}

.exec61-filters {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 8px;
  margin-top: 14px;
  align-items: end;
}

.exec61-filter span {
  display: block;
  margin: 0 0 4px 2px;
  color: var(--muted, #94a3b8);
  font-size: 0.62rem;
  font-weight: 800;
}

.exec61-filter select {
  width: 100%;
  min-height: 38px;
}

.exec61-error {
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  font-size: 0.72rem;
}

.exec61-asset-access {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(96, 165, 250, 0.16);
  border-radius: 14px;
  background: rgba(96, 165, 250, 0.04);
}

.exec61-asset-access strong,
.exec61-asset-access small {
  display: block;
}

.exec61-asset-access strong {
  font-size: 0.76rem;
  font-weight: 900;
}

.exec61-asset-access small {
  margin-top: 3px;
  color: var(--muted, #94a3b8);
  font-size: 0.66rem;
  line-height: 1.35;
}

.exec61-asset-access button {
  min-height: 36px;
  flex: 0 0 auto;
}

.exec61-modal-table-wrap {
  overflow: auto;
}

.exec61-modal-table {
  min-width: 1220px;
}

.exec61-modal-table td > strong,
.exec61-modal-table td > small {
  display: block;
}

.exec61-modal-table td > small {
  margin-top: 2px;
  color: var(--muted, #94a3b8);
  font-size: 0.65rem;
}

.exec61-status {
  display: inline-block;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.08);
  font-size: 0.61rem;
  font-weight: 800;
  white-space: nowrap;
}

.exec61-commercial-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 14px;
  background: rgba(167, 139, 250, 0.045);
}

.exec61-commercial-control h3 {
  margin: 3px 0;
  font-size: 0.92rem;
}

.exec61-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.exec61-actions button {
  min-height: 34px;
}

.exec61-locked {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.exec61-lock-icon {
  font-size: 1.5rem;
}


/* Phase 6.1 action controls --------------------------------------------------
   Keep these scoped to the executive dashboard. The original R1 markup used
   plain buttons, which allowed the browser default white background to clash
   with Hirentra's inherited light text in dark mode. */
.exec61-refresh {
  min-width: 92px;
  min-height: 38px;
  margin-top: 0;
  padding: 0 14px;
}

.exec61-primary-action,
.exec61-nav-action {
  min-height: 36px;
  padding: 0 13px;
  border-radius: 10px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.015em;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease,
              background 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}

.exec61-primary-action {
  color: #080b12;
  background: var(--yellow, #ffc107);
  border: 1px solid rgba(255, 193, 7, 0.72);
  box-shadow: 0 8px 20px rgba(255, 193, 7, 0.12);
}

.exec61-nav-action {
  color: var(--text, #f8fafc);
  background: rgba(15, 23, 42, 0.28);
  border: 1px solid rgba(148, 163, 184, 0.24);
}

.exec61-primary-action:hover:not(:disabled),
.exec61-nav-action:hover:not(:disabled),
.exec61-refresh:hover:not(:disabled) {
  transform: translateY(-1px);
}

.exec61-primary-action:hover:not(:disabled) {
  background: #ffd33d;
  border-color: rgba(255, 211, 61, 0.9);
  box-shadow: 0 10px 24px rgba(255, 193, 7, 0.17);
}

.exec61-nav-action:hover:not(:disabled) {
  background: rgba(96, 165, 250, 0.08);
  border-color: rgba(96, 165, 250, 0.28);
}

.exec61-primary-action:focus-visible,
.exec61-nav-action:focus-visible,
.exec61-refresh:focus-visible {
  outline: 2px solid rgba(255, 193, 7, 0.72);
  outline-offset: 2px;
}

.exec61-primary-action:disabled,
.exec61-nav-action:disabled,
.exec61-refresh:disabled {
  cursor: not-allowed;
  transform: none;
  opacity: 0.46;
}

/* Phase 6 / 6.1 light-theme alignment --------------------------------------
   The new commercial panels must use the same bright surfaces as the rest of
   the portal rather than falling back to the dark #172033 panel colour. */
html[data-theme="light"] .executive-commercial-section {
  color: #0f172a;
  background: #ffffff;
  border-color: rgba(180, 129, 0, 0.22);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.045);
}

html[data-theme="light"] .exec61-metrics article {
  background: #f8fafc;
  border-color: rgba(59, 130, 246, 0.13);
}

html[data-theme="light"] .exec61-asset-access {
  background: #f8fafc;
  border-color: rgba(59, 130, 246, 0.14);
}

html[data-theme="light"] .exec61-commercial-control {
  background: #faf9ff;
  border-color: rgba(124, 58, 237, 0.15);
}

html[data-theme="light"] .exec61-status {
  color: #334155;
  background: #eef4fb;
}

html[data-theme="light"] .exec61-nav-action,
html[data-theme="light"] .exec61-refresh {
  color: #334155;
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

html[data-theme="light"] .exec61-nav-action:hover:not(:disabled),
html[data-theme="light"] .exec61-refresh:hover:not(:disabled) {
  color: #0f172a;
  background: #f1f5f9;
  border-color: rgba(15, 23, 42, 0.22);
}

html[data-theme="light"] .exec61-primary-action {
  color: #111827;
  background: var(--yellow, #ffc107);
  border-color: rgba(180, 129, 0, 0.34);
  box-shadow: 0 8px 18px rgba(180, 129, 0, 0.10);
}

@media (min-width: 1280px) {
  .monthly-exposure-card {
    flex-basis: 0;
  }
}

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

  .exec61-filters {
    grid-template-columns: 1fr 1fr;
  }

  .exec61-asset-access,
  .exec61-commercial-control {
    display: block;
  }

  .exec61-asset-access button {
    width: 100%;
    margin-top: 10px;
  }

  .exec61-actions {
    justify-content: flex-start;
    margin-top: 12px;
  }
}

@media (max-width: 560px) {
  .executive-commercial-section {
    padding: 14px;
  }

  .exec61-heading {
    display: block;
  }

  .exec61-heading > strong {
    display: inline-block;
    margin-top: 8px;
  }

  .exec61-filters {
    grid-template-columns: 1fr;
  }
}