/* ========================================================================
   Tekion ↔ 8x8 CTI Demo — Oxygen Design System (Novo Theme)
   ========================================================================
   Built from @8x8/oxygen-theme v2.105.0 tokens.
   Light mode — Novo variant.
   ======================================================================== */

/* -- Oxygen Design Tokens ------------------------------------------------ */

:root {
  /* Palette — Blues */
  --o2-blue-03: #003DA5;
  --o2-blue-05: #0056E0;
  --o2-blue-06: #246FE5;
  --o2-blue-08: #BDD3F9;
  --o2-blue-09: #E5EEFB;

  /* Palette — Grays */
  --o2-gray-04: #6C6862;
  --o2-gray-06: #B5B0A8;
  --o2-gray-08: #D6D3CD;
  --o2-gray-09: #E8E6E1;
  --o2-gray-10: #F4F3EE;

  /* Palette — Reds */
  --o2-red-05: #CB2233;
  --o2-red-09: #FBDAD7;

  /* Palette — Greens */
  --o2-green-03: #127440;
  --o2-green-09: #CEEDD9;

  /* Palette — Yellows / Warnings */
  --o2-yellow-06: #F8AE1A;
  --o2-yellow-09: #FEF0C3;

  /* Palette — Purples (click-to-dial events) */
  --o2-purple-05: #7C3AED;
  --o2-purple-09: #EDE9FE;

  /* Offwhites (text) */
  --o2-offwhite-02: #26252A;
  --o2-offwhite-04: #4C4A44;
  --o2-offwhite-06: #6C6862;

  /* Semantic — UI Backgrounds */
  --o2-ui-01: #FFFFFF;
  --o2-ui-02: #F4F3EE;
  --o2-ui-03: #E8E6E1;
  --o2-ui-06: #FFFFFF;

  /* Semantic — Actions */
  --o2-action-01: #0056E0;
  --o2-action-01-hover: #003DA5;
  --o2-action-01-active: #002D7A;

  /* Semantic — Text */
  --o2-text-01: #26252A;
  --o2-text-02: #6C6862;
  --o2-text-03: #B5B0A8;
  --o2-text-inverse: #FFFFFF;

  /* Semantic — Status */
  --o2-error-01: #CB2233;
  --o2-success-01: #127440;
  --o2-warning-01: #F8AE1A;

  /* Semantic — Borders */
  --o2-border-01: #E8E6E1;
  --o2-border-02: #D6D3CD;
  --o2-border-focus: #0056E0;

  /* Demo Branding (injected at runtime by demo-renderer.js) */
  --demo-primary: #00264d;
  --demo-primary-light: #003366;
  --demo-accent: #c5a55a;

  /* Typography */
  --o2-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --demo-font-display: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --o2-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Spacing scale */
  --o2-spacing-01: 2px;
  --o2-spacing-02: 4px;
  --o2-spacing-03: 8px;
  --o2-spacing-04: 12px;
  --o2-spacing-05: 16px;
  --o2-spacing-06: 24px;
  --o2-spacing-07: 32px;
  --o2-spacing-08: 40px;

  /* Border radius — Novo */
  --o2-radius-small: 2px;
  --o2-radius-default: 3px;
  --o2-radius-medium: 5px;
  --o2-radius-novo: 6px;
  --o2-radius-large: 12px;

  /* Shadows */
  --o2-shadow-low: 0px 1px 2px 0px rgba(41, 41, 41, 0.25);
  --o2-shadow-medium: 0px 2px 6px 0px rgba(41, 41, 41, 0.25);
  --o2-shadow-high: 0px 2px 20px 0px rgba(41, 41, 41, 0.25);

  /* Sizing */
  --o2-btn-height-small: 32px;
  --o2-btn-height-medium: 40px;
  --o2-input-height-small: 32px;
  --o2-input-height-medium: 40px;

  /* Animation */
  --o2-transition-fast: 120ms ease;
  --o2-transition-default: 200ms ease;
}

/* -- Reset --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--o2-font-family);
  background: var(--o2-ui-02);
  color: var(--o2-text-01);
  font-size: 14px;           /* body01 */
  font-weight: 400;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* -- Top Bar ------------------------------------------------------------- */

.o2-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--o2-spacing-04) var(--o2-spacing-06);
  background: var(--o2-ui-06);
  border-bottom: 1px solid var(--o2-border-01);
  box-shadow: var(--o2-shadow-low);
  z-index: 10;
}

.o2-topbar__left,
.o2-topbar__right {
  display: flex;
  align-items: center;
  gap: var(--o2-spacing-03);
}

.o2-topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--o2-spacing-03);
}

.o2-topbar__logo { flex-shrink: 0; }

.o2-topbar__title {
  font-size: 16px;           /* fontSize2xs */
  font-weight: 600;
  color: var(--o2-text-01);
}

.o2-topbar__title--accent {
  color: var(--o2-action-01);
}

.o2-topbar__customer-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.o2-topbar__customer-logo svg,
.o2-topbar__customer-logo img {
  height: 22px;
  width: auto;
}

.o2-topbar__partner-logo {
  flex-shrink: 0;
}

.o2-topbar__partner-logo--tekion {
  height: 16px;
  width: auto;
}

.o2-topbar__partner-logo--8x8 {
  height: 24px;
  width: auto;
}

.o2-topbar__divider {
  color: var(--o2-text-03);
  font-weight: 300;
  font-size: 18px;
}

/* -- LSH Auto Tag -------------------------------------------------------- */

.o2-tag--demo {
  background: var(--demo-primary);
  color: #ffffff;
  letter-spacing: 0.03em;
}

/* -- Demo Sub-Banner ----------------------------------------------------- */

.demo-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--o2-spacing-03) var(--o2-spacing-06);
  background: linear-gradient(135deg, var(--demo-primary), var(--demo-primary-light));
  color: #ffffff;
  font-family: var(--demo-font-display);
}

.demo-banner__content {
  display: flex;
  align-items: center;
  gap: var(--o2-spacing-04);
}

.demo-banner__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.demo-banner__subtitle {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.85;
}

.demo-banner__brands {
  display: flex;
  align-items: center;
  gap: var(--o2-spacing-02);
  font-size: 11px;
  font-weight: 500;
  opacity: 0.75;
  letter-spacing: 0.02em;
}

.demo-banner__sep {
  opacity: 0.5;
}

.demo-banner__brand {
  white-space: nowrap;
}

/* -- Tags / Badges ------------------------------------------------------- */

.o2-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--o2-spacing-01) var(--o2-spacing-03);
  border-radius: var(--o2-radius-novo);
  font-size: 12px;           /* label01 / fontSize4xs */
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.o2-tag--info {
  background: var(--o2-blue-09);
  color: var(--o2-blue-05);
}

.o2-tag--neutral {
  background: var(--o2-gray-10);
  color: var(--o2-text-02);
}

.o2-tag--success {
  background: var(--o2-green-09);
  color: var(--o2-success-01);
}

.o2-tag--warning {
  background: var(--o2-yellow-09);
  color: #946300;
}

.o2-tag--error {
  background: var(--o2-red-09);
  color: var(--o2-error-01);
}

.o2-tag--purple {
  background: var(--o2-purple-09);
  color: var(--o2-purple-05);
}

.o2-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 var(--o2-spacing-02);
  border-radius: 11px;
  background: var(--o2-action-01);
  color: var(--o2-text-inverse);
  font-size: 11px;
  font-weight: 700;
}

/* -- Status Indicator ---------------------------------------------------- */

.o2-status-indicator {
  display: flex;
  align-items: center;
  gap: var(--o2-spacing-03);
  font-size: 12px;
  color: var(--o2-text-02);
}

.o2-status-indicator__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--o2-error-01);
  transition: background var(--o2-transition-default);
}

.o2-status-indicator__dot.connected {
  background: var(--o2-success-01);
}

.o2-status-indicator__label {
  font-weight: 500;
}

/* -- Main Layout --------------------------------------------------------- */

.o2-layout {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 320px 320px;
  gap: var(--o2-spacing-05);
  padding: var(--o2-spacing-05) var(--o2-spacing-06);
  overflow-y: auto;
  align-content: start;
}

.o2-layout__column {
  display: flex;
  flex-direction: column;
  gap: var(--o2-spacing-04);
  min-width: 0;
}

/* -- Section Headers ----------------------------------------------------- */

.o2-section-header {
  display: flex;
  align-items: center;
  gap: var(--o2-spacing-03);
  padding-bottom: var(--o2-spacing-03);
  border-bottom: 2px solid var(--o2-border-01);
}

.o2-section-header__title {
  font-size: 12px;
  font-weight: 600;
  font-family: var(--demo-font-display);
  color: var(--o2-text-02);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  flex-shrink: 0;
}

.o2-section-header__spacer {
  flex: 1;
}

/* Compact select — inline in section headers */
.o2-select--compact {
  width: auto;
  min-width: 140px;
  height: 26px;
  padding: 0 var(--o2-spacing-03);
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--o2-radius-novo);
}

/* -- Cards --------------------------------------------------------------- */

.o2-card {
  background: var(--o2-ui-06);
  border: 1px solid var(--o2-border-01);
  border-radius: var(--o2-radius-large);
  overflow: hidden;
  transition: box-shadow var(--o2-transition-default);
}

.o2-card:hover {
  box-shadow: var(--o2-shadow-low);
}

.o2-card--collapsible .o2-card__header {
  cursor: pointer;
  user-select: none;
}

.o2-card__chevron {
  transition: transform 0.2s ease;
  color: var(--o2-text-02);
  flex-shrink: 0;
}

.o2-card--collapsible.collapsed .o2-card__chevron {
  transform: rotate(-90deg);
}

.o2-card__collapse-body {
  transition: max-height 0.25s ease, padding 0.25s ease, opacity 0.2s ease;
  max-height: 600px;
  opacity: 1;
  overflow: hidden;
}

.o2-card--collapsible.collapsed .o2-card__collapse-body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

.o2-card--collapsible.collapsed .o2-card__header {
  border-bottom-color: transparent;
}

.o2-card--grow {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.o2-card--grow .o2-card__body {
  flex: 1;
  min-height: 0;
  overflow: visible;
}

.o2-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--o2-spacing-04) var(--o2-spacing-05);
  border-bottom: 1px solid var(--o2-border-01);
  background: var(--o2-ui-02);
}

.o2-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--o2-text-01);
  letter-spacing: 0.01em;
}

.o2-card__body {
  padding: var(--o2-spacing-05);
}

.o2-card__body--flush {
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* -- Tables -------------------------------------------------------------- */

.o2-table {
  width: 100%;
  border-collapse: collapse;
}

.o2-table th,
.o2-table td {
  text-align: left;
  padding: var(--o2-spacing-03) var(--o2-spacing-04);
}

.o2-table th {
  font-size: 11px;
  font-weight: 600;
  color: var(--o2-text-02);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--o2-ui-02);
  border-bottom: 1px solid var(--o2-border-01);
}

.o2-table td {
  font-size: 13px;
  border-bottom: 1px solid var(--o2-border-01);
  color: var(--o2-text-01);
}

.o2-table tr:last-child td {
  border-bottom: none;
}

.o2-table tr:hover td {
  background: var(--o2-gray-10);
}

/* Phone links in table */
.phone-link {
  color: var(--o2-action-01);
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
  transition: color var(--o2-transition-fast);
}

.phone-link:hover {
  color: var(--o2-action-01-hover);
  text-decoration: underline;
}

/* -- Buttons ------------------------------------------------------------- */

.o2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--o2-spacing-02);
  padding: 0 var(--o2-spacing-05);
  height: var(--o2-btn-height-medium);
  border: 1px solid var(--o2-border-02);
  border-radius: var(--o2-radius-novo);
  font-family: var(--o2-font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: var(--o2-ui-06);
  color: var(--o2-text-01);
  transition: all var(--o2-transition-fast);
  white-space: nowrap;
  line-height: 1;
}

.o2-btn:hover {
  background: var(--o2-gray-10);
  border-color: var(--o2-border-02);
}

.o2-btn:active {
  background: var(--o2-gray-09);
}

.o2-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary */
.o2-btn--primary {
  background: var(--o2-action-01);
  color: var(--o2-text-inverse);
  border-color: var(--o2-action-01);
}

.o2-btn--primary:hover {
  background: var(--o2-action-01-hover);
  border-color: var(--o2-action-01-hover);
}

.o2-btn--primary:active {
  background: var(--o2-action-01-active);
}

/* Secondary */
.o2-btn--secondary {
  background: var(--o2-ui-06);
  color: var(--o2-action-01);
  border-color: var(--o2-action-01);
}

.o2-btn--secondary:hover {
  background: var(--o2-blue-09);
}

/* Tertiary */
.o2-btn--tertiary {
  background: transparent;
  color: var(--o2-action-01);
  border-color: transparent;
  padding: 0 var(--o2-spacing-03);
}

.o2-btn--tertiary:hover {
  background: var(--o2-gray-10);
}

/* Destructive */
.o2-btn--destructive {
  background: var(--o2-error-01);
  color: var(--o2-text-inverse);
  border-color: var(--o2-error-01);
}

.o2-btn--destructive:hover {
  background: #A91B2A;
  border-color: #A91B2A;
}

/* Success */
.o2-btn--success {
  background: var(--o2-success-01);
  color: var(--o2-text-inverse);
  border-color: var(--o2-success-01);
}

.o2-btn--success:hover {
  background: #0E5C33;
  border-color: #0E5C33;
}

/* Size: Small */
.o2-btn--small {
  height: var(--o2-btn-height-small);
  font-size: 13px;
  padding: 0 var(--o2-spacing-04);
}

/* Full width */
.o2-btn--full {
  width: 100%;
}

.o2-btn-group {
  display: flex;
  gap: var(--o2-spacing-03);
  margin-top: var(--o2-spacing-03);
}

/* -- Form Elements ------------------------------------------------------- */

.o2-form-field {
  margin-bottom: var(--o2-spacing-04);
}

.o2-form-field:last-child {
  margin-bottom: 0;
}

.o2-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--o2-text-02);
  margin-bottom: var(--o2-spacing-02);
}

.o2-input,
.o2-select,
.o2-textarea {
  width: 100%;
  padding: 0 var(--o2-spacing-04);
  height: var(--o2-input-height-small);
  border: 1px solid var(--o2-border-02);
  border-radius: var(--o2-radius-novo);
  background: var(--o2-ui-06);
  color: var(--o2-text-01);
  font-size: 14px;
  font-family: var(--o2-font-family);
  transition: border-color var(--o2-transition-fast), box-shadow var(--o2-transition-fast);
}

.o2-textarea {
  height: auto;
  padding: var(--o2-spacing-03) var(--o2-spacing-04);
  resize: vertical;
}

.o2-input:focus,
.o2-select:focus,
.o2-textarea:focus {
  outline: none;
  border-color: var(--o2-border-focus);
  box-shadow: 0 0 0 2px rgba(0, 86, 224, 0.15);
}

.o2-input::placeholder,
.o2-textarea::placeholder {
  color: var(--o2-text-03);
}

.o2-input-group {
  display: flex;
  gap: var(--o2-spacing-03);
}

.o2-input-group .o2-input {
  flex: 1;
}

/* -- Event Log ----------------------------------------------------------- */

.o2-event-log {
  max-height: 420px;
  overflow-y: auto;
  font-family: var(--o2-font-mono);
  font-size: 12px;
  line-height: 1.6;
}

.o2-event {
  display: flex;
  gap: var(--o2-spacing-03);
  padding: var(--o2-spacing-02) var(--o2-spacing-04);
  border-bottom: 1px solid transparent;
  transition: background var(--o2-transition-fast);
}

.o2-event:hover {
  background: var(--o2-gray-10);
}

.o2-event__time {
  flex-shrink: 0;
  color: var(--o2-text-03);
  font-size: 11px;
  min-width: 56px;
}

.o2-event__msg {
  word-break: break-word;
}

/* Event type variants */
.o2-event--system  { color: var(--o2-text-02); }
.o2-event--offered { color: #946300; background: var(--o2-yellow-09); }
.o2-event--accepted { color: var(--o2-success-01); background: var(--o2-green-09); }
.o2-event--completed { color: var(--o2-blue-05); background: var(--o2-blue-09); }
.o2-event--click2dial { color: var(--o2-purple-05); background: var(--o2-purple-09); }
.o2-event--lookup  { color: var(--o2-blue-06); background: rgba(36, 111, 229, 0.08); }
.o2-event--pop     { color: var(--o2-success-01); background: rgba(18, 116, 64, 0.08); }
.o2-event--outcome { color: #946300; background: rgba(248, 174, 26, 0.10); }
.o2-event--error   { color: var(--o2-error-01); background: var(--o2-red-09); }

/* -- Active Call Info ----------------------------------------------------- */

.o2-call-info {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--o2-spacing-02) var(--o2-spacing-04);
  font-size: 13px;
}

.o2-call-info dt {
  color: var(--o2-text-02);
  font-weight: 600;
  font-size: 12px;
}

.o2-call-info dd {
  font-weight: 500;
  color: var(--o2-text-01);
}

/* -- Text utilities ------------------------------------------------------- */

.o2-text--secondary {
  color: var(--o2-text-02);
  font-style: italic;
}

.o2-text--small {
  font-size: 12px;
}

/* -- RO / Deal items ----------------------------------------------------- */

.o2-item {
  padding: var(--o2-spacing-03) var(--o2-spacing-04);
  background: var(--o2-ui-02);
  border-radius: var(--o2-radius-novo);
  margin-bottom: var(--o2-spacing-03);
  font-size: 13px;
}

.o2-item:last-child {
  margin-bottom: 0;
}

.o2-item__title {
  font-weight: 600;
  color: var(--o2-text-01);
}

.o2-item__meta {
  font-size: 12px;
  margin-top: var(--o2-spacing-01);
}

.o2-item-heading {
  font-size: 11px;
  font-weight: 600;
  color: var(--o2-text-02);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: var(--o2-spacing-04) 0 var(--o2-spacing-03);
}

/* -- MAShell iframe ------------------------------------------------------- */

#mashellCard {
  min-height: auto;          /* override .o2-card--grow min-height:0 */
}

#mashellCard .o2-card__body {
  min-height: auto;          /* let iframe push natural height */
}

.o2-iframe-wrapper {
  width: 100%;
  min-height: 740px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: var(--o2-ui-02);
}

.o2-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: var(--o2-ui-06);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.o2-iframe::-webkit-scrollbar {
  display: none;
}

/* -- Misc Utilities ------------------------------------------------------- */

.hidden { display: none !important; }

.highlight {
  animation: o2-pulse 0.6s ease-out;
}

@keyframes o2-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 86, 224, 0.4); }
  100% { box-shadow: 0 0 0 12px transparent; }
}

/* -- Footer -------------------------------------------------------------- */

.o2-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--o2-spacing-03);
  padding: var(--o2-spacing-04);
  font-size: 12px;
  color: var(--o2-text-02);
  border-top: 3px solid var(--demo-primary);
  background: var(--o2-ui-06);
}

.o2-footer__separator {
  color: var(--o2-text-03);
}

/* -- Scrollbar Styling ---------------------------------------------------- */

.o2-event-log::-webkit-scrollbar {
  width: 6px;
}

.o2-event-log::-webkit-scrollbar-track {
  background: transparent;
}

.o2-event-log::-webkit-scrollbar-thumb {
  background: var(--o2-gray-08);
  border-radius: 3px;
}

.o2-event-log::-webkit-scrollbar-thumb:hover {
  background: var(--o2-gray-06);
}