/* SRIDIRA CMS · WhatsApp Communication (v9.7). Uses the portal's design tokens only,
   so light and dark themes both follow the existing CMS theme. Inspired by a chat
   layout (outgoing right, incoming left); no third-party brand assets are used. */
:root {
  --wa-out: #e3f4e8;
  --wa-out-border: #bfe3cb;
  --wa-in: #ffffff;
  --wa-in-border: var(--border, #e2e8f0);
  --wa-accent: #1f8a4c;
  --wa-thread-bg: rgba(26, 77, 53, 0.04);
}
[data-theme="dark"] {
  --wa-out: rgba(46, 160, 92, 0.18);
  --wa-out-border: rgba(46, 160, 92, 0.35);
  --wa-in: rgba(255, 255, 255, 0.05);
  --wa-in-border: rgba(255, 255, 255, 0.12);
  --wa-accent: #5fd08f;
  --wa-thread-bg: rgba(255, 255, 255, 0.03);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wa-out: rgba(46, 160, 92, 0.18);
    --wa-out-border: rgba(46, 160, 92, 0.35);
    --wa-in: rgba(255, 255, 255, 0.05);
    --wa-in-border: rgba(255, 255, 255, 0.12);
    --wa-accent: #5fd08f;
    --wa-thread-bg: rgba(255, 255, 255, 0.03);
  }
}

.wa-ico { display: inline-flex; vertical-align: -3px; color: var(--wa-accent); }
.btn-primary .wa-ico { color: inherit; }
.wa-title { display: flex; align-items: center; gap: 6px; }
.wa-panel { margin-bottom: 10px; }
.wa-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 10px; }
.wa-notice { font-size: 12.5px; color: var(--muted); background: var(--wa-thread-bg); border: 1px dashed var(--border, #d6dde5);
  border-radius: var(--radius-sm, 8px); padding: 7px 10px; margin-bottom: 10px; }
.wa-open { display: grid; gap: 6px; margin-bottom: 10px; }
.wa-open-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 8px); background: var(--wa-in); }
.wa-open-row .cell-sub { flex-basis: 100%; }
.wa-open-row.is-urgent, .wa-detail-head.is-urgent { border-color: var(--danger, #b91c1c); box-shadow: inset 4px 0 0 var(--danger, #b91c1c); }
.wa-more { margin: 4px 0 10px; }
.wa-more summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.wa-rid { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11.5px; color: var(--muted); }
.wa-lock { font-size: 11px; }
.wa-urgent { animation: wa-pulse 1.8s ease-in-out 3; }
@keyframes wa-pulse { 50% { box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.18); } }
@media (prefers-reduced-motion: reduce) { .wa-urgent { animation: none; } }

/* thread */
.wa-thread { background: var(--wa-thread-bg); border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-md, 12px);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; max-height: 560px; overflow-y: auto; }
.wa-day { text-align: center; margin: 6px 0 2px; }
.wa-day span { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--background, #fff);
  border: 1px solid var(--border, #e2e8f0); border-radius: 999px; padding: 2px 10px; }
.wa-msg { display: flex; }
.wa-msg.out { justify-content: flex-end; }
.wa-msg.in { justify-content: flex-start; }
.wa-bubble { max-width: min(78%, 560px); padding: 8px 11px 7px; border-radius: 12px; border: 1px solid var(--wa-in-border);
  background: var(--wa-in); color: var(--ink); box-shadow: var(--shadow-xs, 0 1px 1px rgba(0, 0, 0, 0.04)); }
.wa-msg.out .wa-bubble { background: var(--wa-out); border-color: var(--wa-out-border); border-top-right-radius: 3px; }
.wa-msg.in .wa-bubble { border-top-left-radius: 3px; }
.wa-msg.is-current .wa-bubble { outline: 2px solid var(--primary-ring, rgba(26, 77, 53, 0.25)); }
.wa-who { font-size: 11.5px; font-weight: 600; color: var(--wa-accent); margin-bottom: 3px; }
.wa-msg.in .wa-who { color: var(--info-text, #1d4ed8); }
.wa-text { white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.45; }
.wa-foot { font-size: 11px; color: var(--muted); margin-top: 5px; }
.wa-time { font-weight: 600; }
.wa-rec { font-size: 10.5px; color: var(--muted); font-style: italic; margin-top: 2px; }
.wa-note { font-size: 12px; margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--wa-in-border); }
.wa-note small { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 10px; color: var(--muted); margin-right: 4px; }
.wa-cat { font-size: 10.5px; vertical-align: 1px; }
.wa-corr { font-size: 12px; margin-top: 5px; }
.wa-corr summary { cursor: pointer; color: var(--warn, #b45309); }
.wa-orig { margin: 4px 0; padding: 4px 6px; border-left: 3px solid var(--warn, #b45309); background: rgba(180, 83, 9, 0.06); }
.wa-orig small { display: block; font-size: 10px; text-transform: uppercase; color: var(--muted); }
.wa-orig div { white-space: pre-wrap; text-decoration: line-through; text-decoration-color: rgba(180, 83, 9, 0.5); }
.wa-corr-row { color: var(--muted); margin-top: 2px; }
.wa-actions { margin-top: 4px; text-align: right; }
.wa-linkbtn { background: none; border: 0; padding: 0; color: var(--primary); text-decoration: underline; cursor: pointer; font-size: 12px; }
.wa-sys { align-self: center; max-width: 92%; text-align: center; font-size: 12px; color: var(--muted); }
.wa-sys.wa-req { align-self: stretch; text-align: left; background: var(--background, #fff); border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px; padding: 8px 10px; color: var(--ink); }
.wa-sys.wa-req.is-urgent { box-shadow: inset 4px 0 0 var(--danger, #b91c1c); }
.wa-sys.wa-req.is-current { outline: 2px solid var(--primary-ring, rgba(26, 77, 53, 0.25)); }
.wa-sys-head { font-size: 12.5px; }
.wa-sys-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.wa-instr { white-space: pre-wrap; word-break: break-word; font-size: 13.5px; margin-top: 5px; }
.wa-empty { text-align: center; padding: 18px 10px; color: var(--muted); border: 1px dashed var(--border, #e2e8f0); border-radius: 12px; }
.wa-empty span { font-size: 26px; }

/* modal + forms */
.wa-modal { max-width: 920px; }
.wa-detail-head { border: 1px solid var(--border, #e2e8f0); border-radius: 12px; padding: 12px; margin-bottom: 8px; }
.wa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 14px; margin: 10px 0; }
.wa-cell small, .wa-instr-box small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.wa-instr-box { background: var(--wa-thread-bg); border-radius: 8px; padding: 8px 10px; }
.wa-assign { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; font-size: 13px; }
.wa-form { border: 1px solid var(--primary-ring, rgba(26, 77, 53, 0.25)); background: var(--wa-thread-bg); border-radius: 12px; padding: 12px; margin: 10px 0; }
.wa-form h4 { margin: 0 0 8px; }
.wa-formbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.wa-confirm { border: 2px solid var(--wa-accent); border-radius: 10px; padding: 10px; margin-top: 8px; background: var(--wa-out); }
.wa-open-wa { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 8px; }
.wa-open-wa .hint { flex-basis: 100%; }
.wa-prio { display: flex; flex-wrap: wrap; gap: 6px; }
.wa-prio-opt { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border, #e2e8f0); border-radius: 999px; padding: 5px 12px; cursor: pointer; font-size: 13px; }
.wa-prio-opt input, .wa-check input { appearance: auto; -webkit-appearance: auto; width: 16px; height: 16px; min-width: 16px; padding: 0; margin: 0; accent-color: var(--primary); }
.wa-prio-opt.urgent { border-color: var(--danger, #b91c1c); color: var(--danger, #b91c1c); font-weight: 600; }
.wa-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; cursor: pointer; margin: 6px 12px 6px 0; }
.wa-danger { border-color: var(--danger, #b91c1c) !important; color: var(--danger, #b91c1c) !important; }
.btn-primary.wa-danger { background: var(--danger, #b91c1c) !important; color: #fff !important; }
.wa-users .wa-check { text-transform: none; letter-spacing: normal; font-weight: 400; font-size: 13px; }
.wa-users { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 10px; max-height: 180px; overflow-y: auto;
  border: 1px solid var(--border, #e2e8f0); border-radius: 8px; padding: 6px 10px; }
.wa-inline { max-width: 220px; padding: 4px 8px; font-size: 12.5px; }

/* request center */
.wa-panels { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.wa-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.wa-kpi { border: 1px solid var(--border, #e2e8f0); border-radius: 12px; padding: 10px 12px; background: var(--background, #fff); display: grid; gap: 2px; }
.wa-kpi b { font-size: 22px; line-height: 1.1; }
.wa-kpi small { color: var(--muted); font-size: 12px; }
.wa-kpi.amber { border-color: var(--gold-400, #d4b048); }
.wa-kpi.red { border-color: var(--danger, #b91c1c); color: var(--danger, #b91c1c); }
.wa-filters { padding: 10px 12px; }
.wa-filter-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.wa-filter-row .field { margin: 0; min-width: 140px; flex: 1 1 140px; }
.wa-filter-row .field:first-child { flex: 2 1 220px; }
.wa-filter-btns { display: flex; gap: 6px; }
.wa-table .wa-cell-text { display: block; max-width: 260px; white-space: pre-wrap; font-size: 12.5px; }
.wa-table tr.wa-row-urgent td { background: rgba(185, 28, 28, 0.06); }
.wa-table tr.wa-row-urgent td:first-child { box-shadow: inset 4px 0 0 var(--danger, #b91c1c); }
.wa-new { font-size: 10px; }
.wa-sum-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.wa-sum-grid td.num { text-align: right; font-weight: 600; }

@media (max-width: 640px) {
  .wa-bubble { max-width: 92%; }
  .wa-thread { max-height: none; padding: 8px; }
  .wa-filter-row .field { flex: 1 1 100%; }
  .wa-grid { grid-template-columns: 1fr 1fr; }
}