/* taskpane.css — CTAAS Excel Add-in */

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

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #faf9f8;
  color: #323130;
}

/* ── Layout ─────────────────────────────────────────── */

.addin-header {
  background-color: #2DA836;
  color: #ffffff;
  padding: 16px 20px 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.header-title h1 {
  margin: 0 0 2px;
  color: #ffffff;
}

.header-title p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
}

.addin-button--signout {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.6);
  font-size: 12px;
  padding: 4px 10px;
  margin-top: 2px;
  flex-shrink: 0;
}

.addin-button--signout:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.addin-body {
  padding: 0 16px 16px;
}

.addin-footer {
  text-align: center;
  padding: 12px;
  border-top: 1px solid #edebe9;
  background-color: #f3f2f1;
}

/* ── Sections ────────────────────────────────────────── */

.section {
  padding: 16px 0;
  border-bottom: 1px solid #edebe9;
}

.section:last-child {
  border-bottom: none;
}

.section h2 {
  margin: 0 0 6px;
  font-size: 14px;
  color: #323130;
}

.section p {
  margin: 0 0 12px;
  font-size: 13px;
  color: #605e5c;
}

/* ── Buttons ─────────────────────────────────────────── */

.addin-button {
  display: inline-block;
  padding: 8px 20px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 600;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.addin-button--primary {
  background-color: #2DA836;
  color: #ffffff;
}

.addin-button--primary:hover {
  background-color: #248a2c;
}

.addin-button--primary:active {
  background-color: #1c6e23;
}

.addin-button--secondary {
  background-color: #f3f2f1;
  color: #323130;
  border: 1px solid #8a8886;
}

.addin-button--secondary:hover {
  background-color: #edebe9;
}

.addin-button--secondary:active {
  background-color: #e1dfdd;
}

.addin-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Select dropdown ─────────────────────────────────── */

.addin-select {
  display: block;
  width: 100%;
  padding: 6px 10px;
  font-size: 14px;
  font-family: inherit;
  color: #323130;
  background-color: #ffffff;
  border: 1px solid #8a8886;
  border-radius: 2px;
  margin-bottom: 10px;
  cursor: pointer;
}

.addin-select:focus {
  outline: 2px solid #2DA836;
  outline-offset: 1px;
}

/* ── Company list ────────────────────────────────────── */

.company-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}

.company-list li {
  padding: 4px 0;
  font-size: 13px;
  color: #323130;
}

.company-list li::before {
  content: "✓ ";
  color: #2DA836;
  font-weight: bold;
}

/* ── Button row ──────────────────────────────────────── */

.button-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Login form ──────────────────────────────────────── */

.form-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.form-field label {
  font-size: 12px;
  font-weight: 600;
  color: #323130;
  margin-bottom: 4px;
}

.addin-input {
  padding: 6px 10px;
  font-size: 14px;
  font-family: inherit;
  color: #323130;
  background-color: #ffffff;
  border: 1px solid #8a8886;
  border-radius: 2px;
}

.addin-input:focus {
  outline: 2px solid #2DA836;
  outline-offset: 1px;
}

.addin-button--full {
  width: 100%;
  text-align: center;
  margin-top: 4px;
}

.login-error {
  font-size: 13px;
  color: #a80000;
  background-color: #fde7e9;
  border-left: 4px solid #a80000;
  padding: 6px 10px;
  border-radius: 2px;
  margin-bottom: 10px;
}

/* ── Status banner ───────────────────────────────────── */

.status-banner {
  margin: 12px 0 0;
  padding: 8px 12px;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 600;
}

.status-banner--success {
  background-color: #dff6dd;
  color: #107c10;
  border-left: 4px solid #107c10;
}

.status-banner--error {
  background-color: #fde7e9;
  color: #a80000;
  border-left: 4px solid #a80000;
}

.status-banner--info {
  background-color: #deecf9;
  color: #0078d4;
  border-left: 4px solid #0078d4;
}