﻿.option-detail { display:grid; gap:1rem; }
    .option-detail__top { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
    .option-detail__back { display:inline-flex; align-items:center; gap:.4rem; color:#111827; text-decoration:none; font-weight:700; }
    .option-detail__title { margin:.15rem 0 0; font-size:1.7rem; font-weight:800; color:#111827; }
    .option-detail__subtitle { margin:.35rem 0 0; color:#6b7280; max-width:78ch; }
    .option-detail__layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr); gap:1rem; align-items:start; }
    .option-panel { border:1px solid #e5e7eb; border-radius:1.2rem; background:#fff; box-shadow:0 18px 44px rgba(15,23,42,.06); padding:1rem; }
    .option-panel__title { margin:0 0 .85rem; font-size:1.05rem; font-weight:800; color:#111827; }
    .option-mail-thread { display:grid; gap:.65rem; align-content:start; }
    .option-mail-bubble {
      display:grid;
      gap:.45rem;
      width:fit-content;
      max-width:100%;
      padding:.72rem .82rem .6rem;
      border-radius:1rem;
      border-top-left-radius:.35rem;
      background:#f8fafc;
      color:#0f172a;
      box-shadow:0 8px 18px rgba(15,23,42,.05);
    }
    .option-mail-bubble__body { white-space:pre-wrap; line-height:1.55; overflow-wrap:anywhere; word-break:break-word; }
    .option-mail-bubble__meta {
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      gap:.4rem .65rem;
      padding-top:.42rem;
      border-top:1px solid rgba(100,116,139,.24);
      color:#6b7280;
      font-size:.78rem;
    }
    .option-mail-bubble__sender { font-weight:700; color:#334155; }
    .option-message-compose { display:grid; gap:.75rem; margin-top:1rem; }
    .option-message-compose__row { display:grid; gap:.42rem; }
    .option-message-compose__actions { display:flex; justify-content:flex-end; }
    .option-thread-empty { border:1px dashed #d1d5db; border-radius:1rem; background:#f9fafb; padding:.9rem; color:#6b7280; text-align:center; }
    .option-message-success { color:#166534; font-size:.85rem; font-weight:700; }
    .option-form { display:grid; gap:1rem; }
    .option-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.85rem; }
    .option-field { display:grid; gap:.42rem; }
    .option-field--full { grid-column:1 / -1; }
    .option-field label { color:#374151; font-size:.92rem; font-weight:700; }
    .option-input, .option-select, .option-textarea { width:100%; border:1px solid #d1d5db; border-radius:.9rem; background:#fff; padding:.78rem .9rem; font:inherit; color:#111827; }
    .option-textarea { min-height:130px; resize:vertical; }
    .option-help { color:#6b7280; font-size:.85rem; }
    .option-help.is-warning { color:#b45309; font-weight:700; }
    .option-actions { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
    .option-table-picker-toggle {
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      border:1px solid #d1d5db;
      border-radius:.95rem;
      background:#fff;
      padding:.78rem .9rem;
      color:#111827;
      font:inherit;
      font-weight:700;
      text-align:left;
    }
    .option-table-picker-toggle i { color:#6b7280; }
    .option-table-picker {
      display:grid;
      gap:.85rem;
      margin-top:.75rem;
      padding:.85rem;
      border:1px solid #e5e7eb;
      border-radius:1rem;
      background:#f8fafc;
    }
    .option-table-section { display:grid; gap:.65rem; }
    .option-table-section__head {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      flex-wrap:wrap;
    }
    .option-table-section__title { font-weight:800; color:#111827; }
    .option-table-section__action {
      border:0;
      background:transparent;
      padding:0;
      color:#ea580c;
      font-weight:700;
    }
    .option-table-grid {
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(108px, 1fr));
      gap:.6rem;
    }
    .option-table-tile {
      position:relative;
      display:grid;
      gap:.2rem;
      justify-items:start;
      min-height:72px;
      padding:.8rem .85rem;
      border:1px solid #d1d5db;
      border-radius:1rem;
      background:#fff;
      color:#111827;
      text-align:left;
      transition:border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
    }
    .option-table-tile:hover:not(:disabled) {
      transform:translateY(-1px);
      border-color:#fdba74;
      box-shadow:0 12px 24px rgba(249,115,22,.12);
    }
    .option-table-tile.is-selected {
      border-color:#f97316;
      background:#fff7ed;
      box-shadow:0 14px 26px rgba(249,115,22,.14);
      color:#9a3412;
    }
    .option-table-tile.is-unavailable,
    .option-table-tile:disabled {
      opacity:.48;
      background:#f3f4f6;
      color:#6b7280;
      box-shadow:none;
      cursor:not-allowed;
    }
    .option-table-tile__name { font-weight:800; }
    .option-table-tile__meta { font-size:.8rem; color:inherit; opacity:.82; }
    .option-selected-table-list {
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
      min-height:1rem;
    }
    .option-selected-table-chip {
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      border-radius:999px;
      background:#fff7ed;
      border:1px solid #fdba74;
      padding:.36rem .68rem;
      color:#9a3412;
      font-size:.82rem;
      font-weight:700;
    }
    .option-meta-list { display:grid; gap:.7rem; }
    .option-meta-item { border:1px solid #e5e7eb; border-radius:1rem; padding:.85rem; }
    .option-meta-item strong { display:block; margin-bottom:.2rem; color:#111827; }
    @media (max-width: 1100px) {
      .option-detail__layout { grid-template-columns:1fr; }
      .option-grid { grid-template-columns:1fr; }
    }

/* Detail screen: use the same green, linen, and soft-border treatment as the rest of the app. */
.option-detail__back { color:var(--bm-green, #2F3D34); }
.option-detail__back:hover { color:var(--bm-ink, #1F2A24); text-decoration:underline; }
.option-detail__title { color:var(--bm-ink, #1F2A24); letter-spacing:-.02em; }
.option-detail__subtitle { color:var(--bm-muted, #6F766F); }
.option-panel { border-color:var(--bm-border, #D8D2C4); border-radius:1rem; background:var(--bm-linen, #F7F3EA); box-shadow:0 10px 30px rgba(31,42,36,.04); }
.option-panel__title { color:var(--bm-ink, #1F2A24); }
.option-mail-bubble { border:1px solid var(--bm-border, #D8D2C4); background:rgba(255,255,255,.82); color:var(--bm-ink, #1F2A24); box-shadow:0 6px 16px rgba(31,42,36,.05); }
.option-mail-bubble--outbound { justify-self:end; border-top-right-radius:.35rem; border-top-left-radius:1rem; background:rgba(125,135,126,.18); }
.option-mail-bubble__meta { border-top-color:var(--bm-border, #D8D2C4); color:var(--bm-muted, #6F766F); }
.option-mail-bubble__sender { color:var(--bm-ink, #1F2A24); }
.option-thread-empty { border-color:var(--bm-border, #D8D2C4); border-radius:.85rem; background:rgba(255,250,241,.72); color:var(--bm-muted, #6F766F); }
.option-message-success { color:var(--bm-bright-green, #006b25); }
.option-field label, .option-message-compose label { color:var(--bm-ink, #1F2A24); }
.option-input, .option-select, .option-textarea { border-color:var(--bm-border, #D8D2C4); border-radius:.75rem; background:#fffaf1; color:var(--bm-ink, #1F2A24); }
.option-input:focus, .option-select:focus, .option-textarea:focus { border-color:var(--bm-sage, #7D877E); box-shadow:0 0 0 .2rem rgba(125,135,126,.16); outline:0; }
.option-help { color:var(--bm-muted, #6F766F); }
.option-help.is-warning { color:#8D4A43; }
.option-table-picker-toggle { border-color:var(--bm-border, #D8D2C4); border-radius:.75rem; background:#fffaf1; color:var(--bm-ink, #1F2A24); }
.option-table-picker-toggle i { color:var(--bm-muted, #6F766F); }
.option-table-picker { border-color:var(--bm-border, #D8D2C4); border-radius:.85rem; background:rgba(255,250,241,.66); }
.option-table-section__title { color:var(--bm-ink, #1F2A24); }
.option-table-section__action { color:var(--bm-green, #2F3D34); }
.option-table-tile { border-color:var(--bm-border, #D8D2C4); border-radius:.75rem; background:#fffaf1; color:var(--bm-ink, #1F2A24); }
.option-table-tile:hover:not(:disabled) { border-color:var(--bm-sage, #7D877E); box-shadow:0 10px 20px rgba(31,42,36,.08); }
.option-table-tile.is-selected { border-color:var(--bm-green, #2F3D34); background:rgba(125,135,126,.16); box-shadow:0 10px 20px rgba(31,42,36,.09); color:var(--bm-green, #2F3D34); }
.option-table-tile.is-unavailable, .option-table-tile:disabled { background:#eeeae0; color:var(--bm-muted, #6F766F); }
.option-selected-table-chip { background:rgba(125,135,126,.15); border-color:var(--bm-sage, #7D877E); color:var(--bm-green, #2F3D34); }
.option-meta-item { border-color:var(--bm-border, #D8D2C4); border-radius:.85rem; background:rgba(255,250,241,.62); }
.option-meta-item strong { color:var(--bm-ink, #1F2A24); }
.option-request-summary { display:grid; gap:.55rem; border:1px solid var(--bm-border, #D8D2C4); border-radius:.85rem; background:rgba(255,250,241,.72); padding:.85rem .9rem; }
.option-request-summary__meta { display:flex; flex-wrap:wrap; gap:.35rem .8rem; color:var(--bm-muted, #6F766F); font-size:.82rem; font-weight:700; }
.option-request-summary__body { color:var(--bm-ink, #1F2A24); line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }

