/* ========================================
   SETTINGS WORKSPACE
======================================== */

.settings-view,
.settings-view * {
  box-sizing: border-box;
}

.settings-view {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding:
    28px
    30px
    76px;
  display: grid;
  gap: 22px;
}

/* ========================================
   SETTINGS COMMAND CENTER
======================================== */

.settings-command-center {
  width: 100%;
  display: grid;
  gap: 18px;
}

.settings-command-header {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding:
    28px
    30px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 24px;
  background:
    linear-gradient(
      135deg,
      rgba(59, 89, 126, 0.82),
      rgba(26, 55, 84, 0.92)
    );
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
}

.settings-command-header::before {
  content: "";
  position: absolute;
  inset:
    0
    0
    auto;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(147, 197, 253, 0.5),
      transparent
    );
  pointer-events: none;
}

.settings-command-header > div {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.settings-command-label {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #a8c8ff;
}

.settings-command-header h1 {
  margin: 0;
  font-size:
    clamp(
      1.65rem,
      2.4vw,
      2.25rem
    );
  line-height: 1.1;
  color: #f8fafc;
}

.settings-command-header p:not(
  .settings-command-label
) {
  max-width: 760px;
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.6;
  color: #d2deec;
}

.settings-command-mode {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding:
    8px
    14px;
  border: 1px solid rgba(96, 165, 250, 0.34);
  border-radius: 999px;
  background: rgba(30, 64, 175, 0.22);
  font-size: 0.78rem;
  font-weight: 850;
  color: #bfdbfe;
  white-space: nowrap;
}

/* ========================================
   COMMAND STATUS CARDS
======================================== */

.settings-command-grid {
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );
  gap: 12px;
}

.settings-command-card {
  position: relative;
  min-width: 0;
  min-height: 96px;
  overflow: hidden;
  padding:
    16px
    17px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 15px;
  background:
    linear-gradient(
      145deg,
      rgba(45, 63, 90, 0.86),
      rgba(25, 40, 64, 0.96)
    );
  color: #f8fafc;
  text-align: left;
  cursor: pointer;
  appearance: none;
  display: grid;
  align-content: center;
  gap: 5px;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.17);
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}

.settings-command-card::before {
  content: "";
  position: absolute;
  inset:
    0
    auto
    0
    0;
  width: 3px;
  background: rgba(148, 163, 184, 0.7);
}

.settings-command-card:hover {
  transform: translateY(-2px);
  border-color: rgba(148, 163, 184, 0.4);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.22);
}

.settings-command-card:focus-visible {
  outline: none;
  border-color: rgba(96, 165, 250, 0.82);
  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.2),
    0 16px 34px rgba(0, 0, 0, 0.22);
}

.settings-command-card.is-success {
  border-color: rgba(74, 222, 128, 0.42);
  background:
    linear-gradient(
      145deg,
      rgba(31, 78, 72, 0.86),
      rgba(30, 54, 65, 0.96)
    );
}

.settings-command-card.is-success::before {
  background: #4ade80;
}

.settings-command-card.is-warning {
  border-color: rgba(251, 191, 36, 0.46);
  background:
    linear-gradient(
      145deg,
      rgba(92, 76, 42, 0.86),
      rgba(55, 49, 43, 0.96)
    );
}

.settings-command-card.is-warning::before {
  background: #fbbf24;
}

.settings-command-card.is-neutral {
  border-color: rgba(96, 165, 250, 0.38);
  background:
    linear-gradient(
      145deg,
      rgba(39, 67, 105, 0.88),
      rgba(27, 46, 73, 0.96)
    );
}

.settings-command-card.is-neutral::before {
  background: #60a5fa;
}

.settings-command-card-label {
  font-size: 0.71rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9fb0c5;
}

.settings-command-card strong {
  overflow-wrap: anywhere;
  font-size: 1rem;
  line-height: 1.25;
  color: #f8fafc;
}

.settings-command-card small {
  overflow-wrap: anywhere;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #aebed0;
}

/* ========================================
   SHARED SETTINGS CARDS
======================================== */

.settings-integration-card,
.ai-settings-modal {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 28px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      rgba(30, 58, 95, 0.76),
      rgba(15, 32, 54, 0.94)
    );
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.22);
  scroll-margin-top: 24px;
}

.settings-integration-card::before,
.ai-settings-modal::before {
  content: "";
  position: absolute;
  inset:
    0
    0
    auto;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(96, 165, 250, 0.46),
      transparent
    );
  pointer-events: none;
}

.settings-integration-card[aria-busy="true"],
.ai-settings-modal[aria-busy="true"] {
  opacity: 0.72;
  pointer-events: none;
}

#aiSettingsCard {
  min-width: 0;
  scroll-margin-top: 24px;
}

/* ========================================
   CARD HEADERS
======================================== */

.settings-integration-heading,
.ai-settings-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.settings-integration-heading > div,
.ai-settings-heading > div {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.settings-integration-label,
.ai-settings-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #8db7ff;
}

.settings-integration-heading h2,
.ai-settings-heading h2 {
  margin: 0;
  font-size:
    clamp(
      1.55rem,
      2vw,
      2rem
    );
  line-height: 1.12;
  color: #f8fafc;
}

.settings-integration-copy,
.ai-settings-copy {
  max-width: 720px;
  margin: 0;
  line-height: 1.6;
  color: #b8c8dc;
}

/* ========================================
   STATUS BADGES
======================================== */

.settings-integration-status,
.ai-settings-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding:
    7px
    13px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.77rem;
  font-weight: 850;
  white-space: nowrap;
}

.settings-integration-status.is-connected,
.ai-settings-status.is-configured {
  border-color: rgba(74, 222, 128, 0.32);
  background: rgba(22, 101, 52, 0.28);
  color: #86efac;
}

.settings-integration-status.is-disconnected {
  border-color: rgba(148, 163, 184, 0.26);
  background: rgba(71, 85, 105, 0.28);
  color: #cbd5e1;
}

.settings-integration-status.is-warning,
.ai-settings-status.is-warning {
  border-color: rgba(251, 191, 36, 0.36);
  background: rgba(146, 64, 14, 0.28);
  color: #fde68a;
}

/* ========================================
   OUTLOOK CONNECTION DETAILS
======================================== */

.settings-integration-details {
  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );
  gap: 15px;
  padding:
    24px
    0;
}

.settings-integration-detail {
  min-width: 0;
  min-height: 94px;
  padding:
    18px
    19px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 15px;
  background:
    linear-gradient(
      145deg,
      rgba(15, 23, 42, 0.48),
      rgba(15, 23, 42, 0.28)
    );
  display: grid;
  align-content: center;
  gap: 8px;
}

.settings-integration-detail span {
  font-size: 0.71rem;
  font-weight: 850;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: #8194ad;
}

.settings-integration-detail strong {
  overflow-wrap: anywhere;
  font-size: 0.95rem;
  line-height: 1.42;
  color: #f1f5f9;
}

/* ========================================
   AI SETTINGS FIELDS
======================================== */

.ai-settings-fields {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 17px;
  padding:
    24px
    0;
}

.ai-settings-field {
  min-width: 0;
  padding:
    18px
    19px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 15px;
  background:
    linear-gradient(
      145deg,
      rgba(15, 23, 42, 0.46),
      rgba(15, 23, 42, 0.26)
    );
  display: grid;
  align-content: start;
  gap: 9px;
}

.ai-settings-field:nth-child(1),
.ai-settings-field:nth-child(2) {
  grid-column:
    span 1;
}

.ai-settings-field label {
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: #91a6bf;
}

.ai-settings-field input,
.ai-settings-field select {
  width: 100%;
  min-height: 46px;
  padding:
    11px
    14px;
  border: 1px solid rgba(148, 163, 184, 0.21);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.52);
  color: #f8fafc;
  font: inherit;
  outline: none;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}

.ai-settings-field input[readonly] {
  cursor: default;
  color: #e2e8f0;
}

.ai-settings-field input:hover,
.ai-settings-field select:hover {
  border-color: rgba(148, 163, 184, 0.34);
}

.ai-settings-field input:focus,
.ai-settings-field select:focus {
  border-color: rgba(96, 165, 250, 0.72);
  background: rgba(15, 23, 42, 0.68);
  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.17);
}

.ai-settings-field small {
  display: block;
  line-height: 1.5;
  color: #8194ad;
}

/* ========================================
   SERVER VALUE PANELS
======================================== */

.ai-settings-server-value {
  min-height: 76px;
  padding:
    13px
    14px;
  border: 1px solid rgba(96, 165, 250, 0.15);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.36);
  display: grid;
  align-content: center;
  gap: 5px;
}

.ai-settings-server-value strong {
  font-size: 0.96rem;
  color: #f1f5f9;
}

.ai-settings-server-value span {
  line-height: 1.48;
  color: #bac9db;
}

/* ========================================
   ACTIONS
======================================== */

.settings-integration-actions,
.ai-settings-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11px;
}

.settings-integration-actions button,
.ai-settings-actions button {
  min-height: 43px;
  padding:
    10px
    18px;
  border-radius: 12px;
  font-weight: 850;
  cursor: pointer;
  transition:
    transform 150ms ease,
    opacity 150ms ease,
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}

.settings-integration-actions button:hover:not(:disabled),
.ai-settings-actions button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.settings-integration-actions button:disabled,
.ai-settings-actions button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.settings-integration-actions .primary-button,
.ai-settings-actions .primary-button {
  border: 1px solid rgba(96, 165, 250, 0.48);
  background:
    linear-gradient(
      135deg,
      rgba(37, 99, 235, 0.95),
      rgba(59, 130, 246, 0.92)
    );
  color: #ffffff;
  box-shadow:
    0 8px 20px rgba(37, 99, 235, 0.18);
}

.settings-integration-actions .primary-button:hover:not(:disabled),
.ai-settings-actions .primary-button:hover:not(:disabled) {
  background:
    linear-gradient(
      135deg,
      rgba(37, 99, 235, 1),
      rgba(59, 130, 246, 1)
    );
  box-shadow:
    0 10px 24px rgba(37, 99, 235, 0.25);
}

.settings-integration-actions .secondary-button {
  border: 1px solid rgba(148, 163, 184, 0.27);
  background: rgba(51, 65, 85, 0.72);
  color: #f8fafc;
}

.settings-integration-actions .secondary-button:hover:not(:disabled) {
  border-color: rgba(148, 163, 184, 0.42);
  background: rgba(71, 85, 105, 0.82);
}

/* ========================================
   MESSAGES
======================================== */

.settings-integration-message,
.ai-settings-message {
  min-height: 20px;
  margin:
    14px
    0
    0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: #9fb0c5;
}

.settings-integration-message.is-success,
.ai-settings-message.is-success {
  color: #86efac;
}

.settings-integration-message.is-error,
.ai-settings-message.is-error {
  color: #fca5a5;
}

.settings-integration-message.is-info,
.ai-settings-message.is-info {
  color: #93c5fd;
}

.settings-integration-error {
  margin:
    20px
    0;
  padding:
    14px
    16px;
  border: 1px solid rgba(248, 113, 113, 0.28);
  border-radius: 12px;
  background: rgba(127, 29, 29, 0.22);
  color: #fecaca;
}

/* ========================================
   TABLET
======================================== */

@media (max-width: 1100px) {

  .settings-view {
    padding:
      24px
      22px
      64px;
  }

  .settings-command-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .settings-integration-details {
    grid-template-columns: 1fr;
  }

}

/* ========================================
   MOBILE
======================================== */

@media (max-width: 720px) {

  .settings-view {
    padding:
      18px
      14px
      48px;
    gap: 18px;
  }

  .settings-command-header {
    padding:
      22px
      21px;
    border-radius: 18px;
    flex-direction: column;
    gap: 16px;
  }

  .settings-command-mode {
    align-self: flex-start;
  }

  .settings-command-grid {
    grid-template-columns: 1fr;
  }

  .settings-command-card {
    min-height: 86px;
  }

  .settings-integration-card,
  .ai-settings-modal {
    padding: 21px;
    border-radius: 17px;
  }

  .settings-integration-heading,
  .ai-settings-heading {
    flex-direction: column;
    gap: 16px;
  }

  .settings-integration-status,
  .ai-settings-status {
    align-self: flex-start;
  }

  .ai-settings-fields {
    grid-template-columns: 1fr;
  }

  .ai-settings-field:nth-child(1),
  .ai-settings-field:nth-child(2) {
    grid-column: auto;
  }

  .settings-integration-actions,
  .ai-settings-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .settings-integration-actions button,
  .ai-settings-actions button {
    width: 100%;
  }

}

/* ========================================
   SMALL MOBILE
======================================== */

@media (max-width: 420px) {

  .settings-view {
    padding:
      14px
      10px
      40px;
  }

  .settings-command-header {
    padding:
      19px
      17px;
  }

  .settings-command-card {
    padding:
      15px
      16px;
  }

  .settings-integration-card,
  .ai-settings-modal {
    padding: 17px;
  }

  .settings-integration-detail,
  .ai-settings-field {
    padding:
      15px
      16px;
  }

}