/* ============================================================================
   Chamanke Workspace — Action Log (Obeya zone G)
   ----------------------------------------------------------------------------
   Everything is scoped under .al-* / #view-actions so nothing leaks into
   another module. Colours come from the theme tokens, so the board works in
   light AND dark; the due-date urgency palette deliberately matches the Active
   Contracts table (styles2.css .adt-date-*) so the two read identically.
   Logical properties throughout, so it also flips correctly in Arabic/RTL.
   ============================================================================ */

/* ---- KPI strip ----------------------------------------------------------- */
.al-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.al-kpi {
  background: var(--bg-card); border: 1px solid var(--border-primary);
  border-inline-start: 4px solid var(--border-primary);
  border-radius: var(--radius-lg); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow-card);
}
.al-kpi-value { font-size: 1.6rem; font-weight: 800; line-height: 1.1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.al-kpi-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); }
.al-kpi-sub { font-size: 0.72rem; color: var(--text-tertiary); }
.al-kpi-bad  { border-inline-start-color: var(--danger); }
.al-kpi-bad .al-kpi-value { color: var(--danger); }
.al-kpi-warn { border-inline-start-color: var(--warning); }
.al-kpi-warn .al-kpi-value { color: var(--warning); }
.al-kpi-good { border-inline-start-color: var(--success); }
.al-kpi-neutral { border-inline-start-color: #1e3a8a; }

/* ---- toolbar ------------------------------------------------------------- */
.al-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.al-tb-left, .al-tb-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.al-search, .al-select {
  min-height: 36px; padding: 0 10px; border-radius: var(--radius-md);
  border: 1px solid var(--border-input); background: var(--bg-input);
  color: var(--text-primary); font: inherit; font-size: 0.86rem;
}
.al-search { min-width: 230px; }
.al-search:focus, .al-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.al-btn {
  min-height: 36px; padding: 0 12px; border-radius: var(--radius-md);
  border: 1px solid var(--border-primary); background: var(--bg-card);
  color: var(--text-primary); font-weight: 700; font-size: 0.86rem; cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.al-btn:hover { background: var(--bg-card-hover); border-color: var(--accent); }
/* Review mode is a MODE, not a button press — it stays visibly latched on. */
.al-btn.is-on { background: #1e3a8a; border-color: #1e3a8a; color: #fff; }
.al-btn-primary { min-height: 36px; }

/* ---- table --------------------------------------------------------------- */
.al-table-wrap {
  border: 1px solid var(--border-primary); border-radius: var(--radius-lg);
  background: var(--bg-card); box-shadow: var(--shadow-card); overflow-x: auto;
}
.al-table { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
.al-table th {
  background: var(--table-header-bg); color: var(--table-header-text);
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  text-align: start; padding: 10px 10px; white-space: nowrap;
}
.al-table td { padding: 10px; border-block-start: 1px solid var(--border-primary); vertical-align: top; color: var(--text-primary); }
.al-table tbody tr:hover { background: var(--bg-card-hover); }
/* A closed action is finished — it recedes instead of competing for attention. */
.al-table tr.is-done td { opacity: 0.55; }
.al-table tr.is-done .al-action-text { text-decoration: line-through; }
.al-table tr.is-late td { background: var(--danger-bg); }

.al-c-no { width: 46px; font-weight: 800; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.al-c-src, .al-c-owner, .al-c-due, .al-c-pri, .al-c-status { white-space: nowrap; }
.al-c-owner { font-weight: 700; }
.al-c-act { width: 40px; text-align: end; }

.al-cell-action { min-width: 240px; }
.al-action-text { font-weight: 600; }
.al-action-detail, .al-action-link {
  display: block; font-size: 0.76rem; color: var(--text-tertiary); margin-top: 2px;
}
.al-action-link { color: var(--info); }

/* Due-date urgency — same palette as the Active Contracts board.
   These MUST win over two more-specific rules that would otherwise swallow
   them: `.al-table td` sets the text colour (0,1,1) and `tr.is-late td` sets a
   row tint (0,2,2), so an unqualified `.al-due-*` (0,1,0) loses both — which
   rendered the "today" cell as dark navy text on black. styles2.css solves the
   identical problem for .adt-date-* the same way, so this follows that
   precedent rather than inventing a second convention. */
.al-c-due { font-weight: 700; border-radius: 0; }
.al-due-cue { display: block; font-size: 0.7rem; font-weight: 700; opacity: 0.9; color: inherit; }
.al-table td.al-due-ok    { background: #bbf7d0 !important; color: #14532d !important; }
.al-table td.al-due-warn  { background: #fef08a !important; color: #713f12 !important; }
.al-table td.al-due-crit  { background: #b91c1c !important; color: #fff !important; }
.al-table td.al-due-today { background: #000000 !important; color: #fff !important; }
.al-table td.al-due-over  { background: #7f1d1d !important; color: #fff !important; }

/* badges */
.al-badge, .al-src-badge, .al-pri {
  display: inline-block; padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: 0.74rem; font-weight: 700; white-space: nowrap;
}
.al-src-badge { background: var(--bg-input); color: var(--text-secondary); border: 1px solid var(--border-primary); }
.al-pri-high   { background: var(--danger-bg); color: var(--danger); }
.al-pri-medium { background: var(--bg-input); color: var(--text-secondary); }
.al-pri-low    { background: var(--bg-input); color: var(--text-tertiary); }

.al-st-open     { background: var(--bg-input); color: var(--text-secondary); }
.al-st-progress { background: var(--warning-bg); color: var(--warning); }
.al-st-blocked  { background: var(--danger-bg); color: var(--danger); }
.al-st-done     { background: var(--success-bg); color: var(--success); }

/* the in-row status picker carries the status colour itself */
.al-status-sel {
  min-height: 30px; padding: 2px 6px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-input); font: inherit; font-size: 0.76rem; font-weight: 700;
  cursor: pointer;
}
.al-status-sel:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.al-edit {
  background: none; border: 0; cursor: pointer; font-size: 0.95rem; padding: 2px 4px;
  border-radius: var(--radius-sm); opacity: 0.6;
}
.al-edit:hover { opacity: 1; background: var(--bg-card-hover); }

/* ---- grouping ------------------------------------------------------------ */
.al-group { margin-bottom: 16px; }
.al-group-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 6px 2px; margin-bottom: 4px;
}
.al-group-name { font-size: 0.86rem; font-weight: 800; color: var(--text-primary); }
.al-group-count { font-size: 0.76rem; color: var(--text-tertiary); }
.al-group-late { color: var(--danger); font-weight: 700; }

/* ---- empty state + footer ------------------------------------------------ */
.al-empty {
  text-align: center; padding: 46px 20px; background: var(--bg-card);
  border: 1px dashed var(--border-primary); border-radius: var(--radius-lg);
}
.al-empty-icon { font-size: 2.2rem; margin-bottom: 8px; }
.al-empty-title { font-weight: 800; color: var(--text-primary); margin-bottom: 4px; }
.al-empty-sub { font-size: 0.86rem; color: var(--text-tertiary); margin-bottom: 14px; }
.al-foot { margin-top: 10px; font-size: 0.78rem; color: var(--text-tertiary); }
.al-hint { font-weight: 400; font-size: 0.74rem; color: var(--text-tertiary); }

/* ---- form layout ---------------------------------------------------------
   This app has NO global styling for `.form-row`, nor for a bare <input> inside
   a modal — every modal scopes its own (styles2.css does it per-ID for the
   client/company dialogs, finance-styles.css under .fin-form-section). Without
   this block the Action Log form falls back to browser defaults: labels and
   fields run together on one line and the inputs have no border.
   -------------------------------------------------------------------------- */
#alFormOverlay .modal-body .form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px;
}
#alFormOverlay .modal-body .form-row.full { grid-template-columns: 1fr; }
#alFormOverlay .modal-body label {
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
  font-size: 0.82rem; font-weight: 600; color: var(--text-secondary);
}
#alFormOverlay .modal-body input,
#alFormOverlay .modal-body select,
#alFormOverlay .modal-body textarea {
  width: 100%; box-sizing: border-box; padding: 9px 12px;
  border: 1px solid var(--border-input); border-radius: var(--radius-sm);
  font-size: 0.9rem; font-family: inherit; color: var(--text-primary); background: var(--bg-input);
}
#alFormOverlay .modal-body input:focus,
#alFormOverlay .modal-body select:focus,
#alFormOverlay .modal-body textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow);
}
#alFormOverlay .modal-body textarea { resize: vertical; min-height: 58px; line-height: 1.45; }
/* owner tags sit between the label and the picker; no gap when there are none */
#alOwnerTags { margin-bottom: 0; }
#alOwnerTags:empty { display: none; }

/* ---- mobile -------------------------------------------------------------- */
@media (max-width: 768px) {
  .al-kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .al-kpi-value { font-size: 1.3rem; }
  .al-toolbar { flex-direction: column; align-items: stretch; }
  .al-tb-left, .al-tb-right { width: 100%; }
  .al-search { min-width: 0; flex: 1 1 100%; }
  .al-select { flex: 1 1 45%; }
  .al-cell-action { min-width: 180px; }
  #alFormOverlay .modal-body .form-row { grid-template-columns: 1fr; }
}