/* MMD Portal — IT Service Desk module (Security Alerts + ITSM Tickets views).
   Owns every visual decision for src/app/app/it/service-desk/{page,
   SecurityAlertsView,ItsmTicketsView}.tsx. Those files point at these
   semantic classes only — zero inline styles, zero utility classes.
   Prefix: sd- (service desk). Colours are existing CDS tokens (portal-core.css
   / shell.css) wherever an exact match exists; the two tokens below are new
   because no existing token carries that exact literal value. */

:root {
  --sd-c-white: #fff;                 /* pure white text on a solid accent fill (buttons) — distinct from --baobab-on (#FAFAF6) */
  --sd-c-scrim: rgba(0, 0, 0, 0.5);      /* detail-modal backdrop */
}

/* ---------- Page shell (page.tsx) ---------- */

.sd-page-shell { padding: 24px 32px; max-width: 1400px; margin: 0 auto; }
.sd-page-header { margin-bottom: 20px; }
/* Layered onto the existing .sd-title (italic display type) — only the two
   properties that differ for this page header are overridden here. */
.sd-page-title { margin: 0 0 6px 0; font-size: 24px; }
.sd-tab-row { display: flex; gap: 8px; border-bottom: 1px solid var(--hairline); padding-bottom: 12px; margin-bottom: 16px; }

/* ---------- View roots ---------- */

/* Layered onto .ds-form (default gap:32px, margin-top:40px); each view needs
   its own tighter rhythm. */
.sd-security-root { gap: 24px; margin-top: 16px; }
.sd-itsm-root { gap: 20px; margin-top: 16px; }

/* ---------- Shared fieldset / hint / action-row modifiers ---------- */

/* Layered onto .ds-fieldset (default padding:28px 32px). */
.sd-fieldset-tight { padding: 16px 20px; }
/* Layered onto .ds-field-row-3 (keeps its grid/align-items/min-width rules,
   only the gap differs for these info rows). */
.sd-info-grid { gap: 16px; }
/* Layered onto .ds-hint to promote it from muted secondary text to a real value. */
.sd-hint-value { color: var(--ink); }
.sd-hint-value-strong { color: var(--ink); font-weight: 600; }
/* Layered onto .ds-actions for the fieldset's bottom row (hint + primary action). */
.sd-fieldset-footer { margin-top: 16px; justify-content: space-between; align-items: center; }

.sd-mono { font-family: var(--font-mono); }
.sd-code-chip { font-family: var(--font-mono); background: var(--paper-2); padding: 2px 6px; border-radius: var(--ds-radius-sm); }
.sd-empty-value { color: var(--ink-mute); }

/* Accent button that runs an FM process from ItsmTicketsView. Layered onto
   .ds-button.ds-button-primary. */
.sd-btn-run { padding: 8px 16px; font-size: 12px; background: var(--baobab); color: var(--sd-c-white); border-color: var(--baobab); }

/* ---------- FlowMaster EA2 classification panel (ItsmTicketsView) ---------- */

.sd-classification-panel { background: var(--paper-2); border: 1px solid var(--hairline); border-radius: 6px; padding: 16px 20px; }
.sd-classification-title { margin: 0 0 10px 0; font-size: 14px; font-family: var(--font-display); color: var(--ink); }
.sd-classification-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sd-classification-card { background: var(--paper); border: 1px solid var(--hairline); padding: 10px 12px; border-radius: 4px; }
.sd-classification-card-name { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--baobab); margin-bottom: 4px; }
.sd-classification-card-desc { font-size: 11px; color: var(--ink-soft); margin-bottom: 6px; }
.sd-classification-card-fields { font-size: 10px; color: var(--ink-mute); }

/* ---------- Process execution audit trail (ItsmTicketsView top-level log) ---------- */

.sd-exec-log { background: var(--console-bg); color: var(--console-fg); padding: 12px 16px; border-radius: 6px; font-family: var(--font-mono); font-size: 11px; }
.sd-exec-log-label { text-transform: uppercase; color: var(--console-label); margin-bottom: 4px; font-size: 10px; font-weight: 700; }

/* ---------- Filter tabs (ItsmTicketsView) ---------- */

.sd-filter-row { display: flex; gap: 8px; align-items: center; }
/* Layered onto .ds-button (primary/secondary already toggled by state). */
.sd-btn-filter { padding: 6px 12px; font-size: 12px; }

/* ---------- Shared table primitives (both views) ---------- */

.sd-table-empty { padding: 24px; text-align: center; color: var(--ink-mute); }
.sd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sd-table-head-row { border-bottom: 1px solid var(--hairline); background: var(--paper-2); text-transform: uppercase; font-size: 11px; letter-spacing: 0.05em; color: var(--ink-mute); }
.sd-th { padding: 10px 12px; text-align: left; }
.sd-th--center { text-align: center; }
.sd-tr { border-bottom: 1px solid var(--hairline); }
.sd-td { padding: 10px 12px; }
.sd-td-center { padding: 10px 12px; text-align: center; }
.sd-td-strong { padding: 10px 12px; font-weight: 600; }
.sd-td-soft { padding: 10px 12px; color: var(--ink-soft); }
.sd-td-id { padding: 10px 12px; font-family: var(--font-mono); font-weight: 600; }
.sd-td-id-sub { font-size: 10px; color: var(--ink-mute); }

/* ---------- Security Alert instances table (SecurityAlertsView) ---------- */

.sd-td-date { padding: 10px 12px; color: var(--ink-soft); white-space: nowrap; }
.sd-td-subject { padding: 10px 12px; max-width: 280px; }
.sd-td-subject-title { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-td-subject-from { font-size: 11px; color: var(--ink-mute); }
.sd-td-note { padding: 10px 12px; font-size: 12px; color: var(--ink-soft); max-width: 240px; }
/* Layered onto .ds-button.ds-button-secondary for the row-level Inspect action. */
.sd-btn-inspect { padding: 4px 8px; font-size: 10px; }

/* ---------- ITSM tickets table (ItsmTicketsView) ---------- */

.sd-td-title { padding: 10px 12px; max-width: 320px; }
.sd-td-title-main { font-weight: 600; color: var(--ink); }
.sd-td-title-desc { font-size: 11px; color: var(--ink-mute); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sd-td-source { padding: 10px 12px; font-size: 11px; }
.sd-td-mono-sm { padding: 10px 12px; font-family: var(--font-mono); font-size: 11px; }

/* ---------- Detail modal (SecurityAlertsView "Inspect") ---------- */

.sd-modal-backdrop { position: fixed; inset: 0; z-index: 100; background: var(--sd-c-scrim); display: flex; align-items: center; justify-content: center; padding: 20px; }
.sd-modal-box { background: var(--paper); border: 1px solid var(--hairline); border-radius: 6px; max-width: 680px; width: 100%; max-height: 85vh; overflow-y: auto; padding: 24px; }
.sd-modal-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; border-bottom: 1px solid var(--hairline); padding-bottom: 12px; }
.sd-modal-title { margin: 0; font-family: var(--font-display); font-size: 18px; }
/* Layered onto .ds-button.ds-button-secondary. */
.sd-btn-modal-close { padding: 4px 8px; }
/* Layered onto .ds-form (default gap:32px, margin-top:40px) for the modal body form. */
.sd-modal-form { gap: 16px; margin-top: 0; }
.sd-badge-group { display: flex; align-items: center; gap: 8px; }
.sd-info-box { background: var(--paper-2); border: 1px solid var(--hairline); padding: 12px; border-radius: 4px; font-size: 13px; }
.sd-info-box-mono { background: var(--paper-2); border: 1px solid var(--hairline); padding: 12px; border-radius: 4px; font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; }