/* WDM Agency Licensing — Frontend */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

/* ── Root tokens ──────────────────────────────────────────────────────────── */
/* The modals and log drawer are rendered as siblings OUTSIDE the .wdmal wrapper,
   so the brand tokens + base typography must be declared on them too — otherwise
   var(--accent) is undefined inside modals and the host theme's button styling
   (blue bg / black text) takes over. */
.wdmal,
.wdmal-modal-overlay,
.wdmal-log-drawer {
    --accent:      #0F6E56;
    --accent-light:#1D9E75;
    --accent-bg:   #E1F5EE;
    --accent-bg2:  #9FE1CB;
    --bg:          #F5F7F5;
    --white:       #FFFFFF;
    --surface:     #F0F4F1;
    --surface2:    #E8EEE9;
    --border:      #D4DDD5;
    --border2:     #B8CEB9;
    --text:        #0D1F18;
    --text2:       #4D6B5E;
    --text3:       #8AADA0;
    --c-amber:     #92560e;
    --c-amber-bg:  #fef7ec;
    --c-red:       #9b2020;
    --c-red-bg:    #fdf0f0;
    --c-blue:      #1a4a8a;
    --c-blue-bg:   #eef3fc;
    --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,.10);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.14);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    color: var(--text);
    line-height: 1.5;
    background: transparent;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.wdmal-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.wdmal-title  { font-size:20px; font-weight:700; margin:0 0 3px; letter-spacing:-.02em; }
.wdmal-sub    { font-size:13px; color:var(--text2); margin:0; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
/* Primary (submit): solid green → on hover inverts to white bg + green text.
   Colors are pinned with !important so the host theme's button hover styles
   (which otherwise turn these blue/black) can't override them. */
.wdmal-btn-primary { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; background:var(--accent) !important; color:var(--white) !important; border:1px solid var(--accent) !important; border-radius:var(--r-md); font-size:13px; font-weight:600; cursor:pointer; transition:background .15s, color .15s, border-color .15s; white-space:nowrap; font-family:inherit; text-decoration:none; box-shadow:none !important; }
.wdmal-btn-primary:hover, .wdmal-btn-primary:focus { background:var(--white) !important; color:var(--accent) !important; border-color:var(--accent) !important; opacity:1; }
.wdmal-btn-primary:disabled { opacity:.4; cursor:not-allowed; }
/* Ghost (cancel): the inverse — white bg + green text → on hover fills solid green. */
.wdmal-btn-ghost  { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; background:var(--white) !important; color:var(--accent) !important; border:1px solid var(--accent) !important; border-radius:var(--r-md); font-size:13px; font-weight:500; cursor:pointer; transition:background .15s, color .15s, border-color .15s; font-family:inherit; text-decoration:none; box-shadow:none !important; }
.wdmal-btn-ghost:hover, .wdmal-btn-ghost:focus  { background:var(--accent) !important; color:var(--white) !important; border-color:var(--accent) !important; }
.wdmal-btn-danger { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; background:var(--c-red-bg) !important; color:var(--c-red) !important; border:1px solid #f5c6c6 !important; border-radius:var(--r-md); font-size:13px; font-weight:500; cursor:pointer; font-family:inherit; transition:background .15s, color .15s; }
.wdmal-btn-danger:hover { background:var(--c-red) !important; color:var(--white) !important; border-color:var(--c-red) !important; }
/* Delete (ghost variant) keeps the red danger affordance instead of inheriting ghost-green. */
.wdmal-btn-ghost.wdmal-sk-delete { background:var(--white) !important; color:var(--c-red) !important; border-color:#f5c6c6 !important; }
.wdmal-btn-ghost.wdmal-sk-delete:hover { background:var(--c-red) !important; color:var(--white) !important; border-color:var(--c-red) !important; }

/* ── Gate pages ──────────────────────────────────────────────────────────── */
.wdmal-gate-page { display:flex; align-items:center; justify-content:center; min-height:300px; padding:40px; background:transparent; }
.wdmal-gate { text-align:center; padding:40px 32px; max-width:380px; background:#fff; border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-md); }
.wdmal-gate-icon { font-size:44px; display:block; margin-bottom:14px; }
.wdmal-gate h2   { margin:0 0 8px; font-size:18px; }
.wdmal-gate p    { color:var(--text2); margin:0 0 22px; line-height:1.6; }

/* ── License bar ─────────────────────────────────────────────────────────── */
.wdmal-license-bar { display:flex; align-items:center; gap:14px; padding:12px 16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); margin-bottom:16px; flex-wrap:wrap; }
.wdmal-license-left { display:flex; align-items:center; gap:10px; min-width:160px; }
.wdmal-license-plan { font-size:12px; font-weight:600; padding:2px 10px; background:var(--accent-bg); color:var(--accent); border-radius:999px; }
.wdmal-license-count { font-size:13px; color:var(--text2); }
.wdmal-quota-track  { flex:1; min-width:80px; height:5px; background:var(--border); border-radius:999px; overflow:hidden; }
.wdmal-quota-fill   { height:100%; border-radius:999px; background:var(--accent); transition:width .4s; }
.wdmal-quota-fill.warn   { background:var(--c-amber); }
.wdmal-quota-fill.danger { background:var(--c-red); }
.wdmal-upgrade-link { font-size:12px; font-weight:500; color:var(--accent); text-decoration:none; margin-left:auto; }
.wdmal-upgrade-link:hover { text-decoration:underline; }

/* ── Mode radio (same pill style as step toggles, radio semantics) ─────────── */
.wdmal-mode-toggle { cursor:pointer; }
.wdmal-mode-toggle input[type=radio] { display:none; }
.wdmal-mode-toggle input[type=radio]:checked + .wdmal-step-pill { background:var(--accent-bg); border-color:var(--accent); color:var(--accent); }

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.wdmal-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); margin-bottom:2px; flex-wrap:wrap; }
.wdmal-toolbar-left { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.wdmal-toolbar-sep { width:1px; height:18px; background:var(--border2); display:inline-block; }
.wdmal-steps-label { font-size:12px; font-weight:600; color:var(--text2); text-transform:uppercase; letter-spacing:.05em; }
.wdmal-step-toggle { cursor:pointer; }
.wdmal-step-toggle input { display:none; }
.wdmal-step-pill { display:inline-flex; align-items:center; gap:4px; padding:4px 9px; background:#fff; border:1.5px solid var(--border); border-radius:999px; font-size:12px; font-weight:500; color:var(--text2); transition:all .15s; }
.wdmal-step-toggle input:checked + .wdmal-step-pill { background:var(--accent-bg); border-color:var(--accent); color:var(--accent); }
.wdmal-run-btn { display:inline-flex; align-items:center; gap:7px; padding:8px 18px; background:var(--accent); color:#fff; border:none; border-radius:var(--r-md); font-size:13px; font-weight:600; cursor:pointer; transition:opacity .15s; font-family:inherit; }
.wdmal-run-btn:hover    { opacity:.9; }
.wdmal-run-btn:disabled { opacity:.4; cursor:not-allowed; }
.wdmal-run-btn.running  { background:var(--accent-light); }

/* ── Checkbox ────────────────────────────────────────────────────────────── */
.wdmal-check-wrap { display:inline-flex; align-items:center; gap:6px; cursor:pointer; user-select:none; }
.wdmal-check-box  { width:15px; height:15px; border:1.5px solid var(--border2); border-radius:4px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .15s; }
.wdmal-check-wrap input { display:none; }
.wdmal-check-wrap input:checked + .wdmal-check-box { background:var(--accent); border-color:var(--accent); }
.wdmal-check-wrap input:checked + .wdmal-check-box::after { content:''; width:8px; height:5px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translateY(-1px); display:block; }
.wdmal-check-label { font-size:13px; color:var(--text); }

/* ── Notice ──────────────────────────────────────────────────────────────── */
.wdmal-notice { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--r-md); font-size:13px; margin-bottom:12px; }
.wdmal-notice.success { background:var(--accent-bg); color:var(--accent); border:1px solid #b6e4c8; }
.wdmal-notice.error   { background:var(--c-red-bg);   color:var(--c-red);   border:1px solid #f5c6c6; }
.wdmal-notice.info    { background:var(--c-blue-bg);  color:var(--c-blue);  border:1px solid #c2d6f5; }
.wdmal-notice-close   { margin-left:auto; background:none; border:none; cursor:pointer; opacity:.6; font-size:16px; line-height:1; padding:0 2px; }
.wdmal-notice-close:hover { opacity:1; }

/* ── Sites wrap / list ───────────────────────────────────────────────────── */
.wdmal-sites-wrap   { margin-top:2px; }
.wdmal-list-head    { display:grid; grid-template-columns:36px 1fr 1fr 1fr 90px 1fr 90px 1fr; gap:0; padding:8px 14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg) var(--r-lg) 0 0; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--text2); }
.wdmal-site-row     { display:grid; grid-template-columns:36px 1fr 1fr 1fr 90px 1fr 90px 1fr; gap:0; padding:12px 14px; background:#fff; border:1px solid var(--border); border-top:none; align-items:center; transition:background .1s; }
.wdmal-site-row:hover { background:#fafaf9; }
.wdmal-site-row.selected { background:var(--accent-bg); }
.wdmal-site-row:last-child { border-radius:0 0 var(--r-lg) var(--r-lg); }
.wdmal-col-check   { }
.wdmal-col-site    { }
.wdmal-col-live    { }
.wdmal-col-staging { }
.wdmal-col-status  { }
.wdmal-col-step    { }
.wdmal-col-run     { }
.wdmal-col-actions { display:flex; gap:5px; justify-content:flex-end; flex-wrap:wrap; }

/* ── Site avatar ─────────────────────────────────────────────────────────── */
.wdmal-site-avatar { width:32px; height:32px; border-radius:var(--r-md); background:var(--accent-bg); color:var(--accent); font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.wdmal-row-site    { display:flex; align-items:center; gap:10px; }
.wdmal-site-info h4 { margin:0; font-size:13px; font-weight:600; }
.wdmal-site-info h4 a,
.wdmal-site-title-link { color:var(--text); text-decoration:none; transition:color .15s; }
.wdmal-site-info h4 a:hover,
.wdmal-site-title-link:hover { color:var(--accent); }
.wdmal-site-info p  { margin:0; font-size:11px; color:var(--text2); }
.wdmal-unconfigured { font-size:11px; color:var(--c-amber); }
.wdmal-row-url a    { color:var(--accent); font-size:12px; text-decoration:none; word-break:break-all; }
.wdmal-row-url a:hover { text-decoration:underline; }
.wdmal-row-url span { color:var(--text2); font-size:13px; }
.wdmal-row-step     { font-size:12px; color:var(--text2); }
.wdmal-row-lastrun  { font-size:12px; color:var(--text2); }

/* ── Status badge ────────────────────────────────────────────────────────── */
.wdmal-status { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:500; padding:3px 8px; border-radius:999px; }
.wdmal-status.idle    { background:var(--surface); color:var(--text2); }
.wdmal-status.running { background:var(--accent-bg); color:var(--accent); }
.wdmal-status.done,
.wdmal-status.active  { background:var(--accent-bg); color:var(--accent); }
.wdmal-status.failed  { background:var(--c-red-bg); color:var(--c-red); }
.wdmal-status-dot     { width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.wdmal-running-dot    { width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; animation:wdmal-pulse 1.4s infinite; }
@keyframes wdmal-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── Action buttons ──────────────────────────────────────────────────────── */
.wdmal-action-btn { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border:1px solid var(--border); border-radius:var(--r-sm); background:#fff; color:var(--text2); cursor:pointer; transition:all .15s; }
.wdmal-action-btn:hover        { background:var(--surface); color:var(--text); border-color:var(--border2); }
.wdmal-action-btn.delete:hover { background:var(--c-red-bg); color:var(--c-red); border-color:#f5c6c6; }
.wdmal-action-btn.logs:hover   { background:var(--accent-bg); color:var(--accent); border-color:var(--accent); }
/* Named link buttons */
.wdmal-action-link { display:inline-flex; align-items:center; gap:3px; padding:4px 8px; border:1px solid; border-radius:var(--r-sm); font-size:11px; font-weight:600; text-decoration:none; transition:background .12s; white-space:nowrap; cursor:pointer; background:none; font-family:inherit; }
.wdmal-action-link--vrt    { color:#0891b2; border-color:rgba(8,145,178,.3); }
.wdmal-action-link--vrt:hover { background:#f0f9ff; }
.wdmal-action-link--report { color:#059669; border-color:rgba(5,150,105,.3); }
.wdmal-action-link--report:hover { background:#ecfdf5; }
.wdmal-action-link--detail { color:var(--accent); border-color:rgba(15,110,86,.3); }
.wdmal-action-link--detail:hover { background:var(--accent-bg); }
.wdmal-action-link--edit   { color:#64748b; border-color:rgba(100,116,139,.3); }
.wdmal-action-link--edit:hover { background:#f8fafc; }
.wdmal-action-link--delete { color:#dc2626; border-color:rgba(220,38,38,.3); }
.wdmal-action-link--delete:hover { background:#fef2f2; }

/* ── Empty ───────────────────────────────────────────────────────────────── */
.wdmal-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; background:#fff; border:1px solid var(--border); border-top:none; border-radius:0 0 var(--r-lg) var(--r-lg); color:var(--text2); text-align:center; }
.wdmal-empty-icon { width:48px; height:48px; opacity:.25; margin-bottom:16px; }
.wdmal-empty h4 { margin:0 0 6px; font-size:16px; font-weight:600; color:var(--text); }
.wdmal-empty p  { margin:0 0 20px; font-size:13px; }

/* ── Loading ─────────────────────────────────────────────────────────────── */
.wdmal-loading { display:flex; align-items:center; gap:10px; padding:30px 20px; color:var(--text2); }
.wdmal-spinner { width:18px; height:18px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:wdmal-spin .7s linear infinite; flex-shrink:0; }
@keyframes wdmal-spin { to { transform:rotate(360deg); } }

/* ── Modal overlay ───────────────────────────────────────────────────────── */
/* full-bleed override: block themes (e.g. Astra) inject max-width:var(--wp--custom--ast-content-width-size)
   + margin-inline:auto onto content children, which caps & centers these fixed layers, leaving side margins.
   Force them to span the whole viewport regardless of any theme content-width constraint. */
.wdmal-modal-overlay { position:fixed; inset:0; width:100vw !important; max-width:100vw !important; margin:0 !important; background:rgba(0,0,0,.45); z-index:99990; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .18s; box-sizing:border-box; }
.wdmal-modal-overlay.open { opacity:1; pointer-events:all; }
.wdmal-modal { background:#fff; border-radius:var(--r-xl); width:680px; max-width:100%; max-height:90vh; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); transform:translateY(12px); transition:transform .18s; }
.wdmal-modal-overlay.open .wdmal-modal { transform:translateY(0); }
.wdmal-modal--sm { width:400px; }
.wdmal-modal-header { display:flex; justify-content:space-between; align-items:center; padding:18px 22px 14px; border-bottom:1px solid var(--border); flex-shrink:0; }
.wdmal-modal-header h3 { margin:0; font-size:16px; font-weight:700; }
.wdmal-modal-close { background:none; border:none; cursor:pointer; color:var(--text2); padding:4px; border-radius:var(--r-sm); line-height:1; }
.wdmal-modal-close:hover { background:var(--surface); color:var(--text); }
.wdmal-modal-error { display:flex; align-items:center; gap:8px; padding:10px 22px; background:var(--c-red-bg); color:var(--c-red); font-size:13px; border-bottom:1px solid #f5c6c6; flex-shrink:0; }
.wdmal-modal-body { padding:20px 22px; overflow-y:auto; flex:1; }
.wdmal-modal-footer { padding:14px 22px 18px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; flex-shrink:0; }
.wdmal-confirm-text { margin:0; font-size:14px; line-height:1.6; }

/* ── Modal tabs ──────────────────────────────────────────────────────────── */
.wdmal-tabs { display:flex; gap:2px; border-bottom:1.5px solid var(--border); margin-bottom:20px; }
.wdmal-tab  { background:none; border:none; padding:8px 14px; font-size:13px; font-weight:500; color:var(--text2); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1.5px; transition:color .15s; font-family:inherit; }
.wdmal-tab:hover  { color:var(--text); }
.wdmal-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.wdmal-tab-panel  { display:none; }
.wdmal-tab-panel.active { display:block; }

/* ── Form fields ─────────────────────────────────────────────────────────── */
.wdmal-field { display:flex; flex-direction:column; gap:5px; }
.wdmal-field-row { display:flex; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.wdmal-field-row .wdmal-field { flex:1; min-width:140px; }
.wdmal-field--grow2 { flex:2; }
.wdmal-field:not(:last-child) { margin-bottom:14px; }
.wdmal-label { font-size:12px; font-weight:600; color:var(--text); letter-spacing:.01em; }
.wdmal-req   { color:var(--c-red); }
/* Optional-field hint rendered as a subtle on-brand pill rather than trailing dashed text. */
.wdmal-opt   { font-size:10px; font-weight:500; color:var(--text2); margin-left:6px; background:var(--accent-bg); padding:1px 7px; border-radius:10px; vertical-align:middle; }
.wdmal-input { width:100%; padding:8px 10px; border:1.5px solid var(--border2); border-radius:var(--r-md); font-size:13px; font-family:inherit; color:var(--text); background:#fff; box-sizing:border-box; transition:border-color .15s, box-shadow .15s; }
.wdmal-input:hover  { border-color:var(--accent-light); }
.wdmal-input:focus  { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(15,110,86,.12); }
.wdmal-textarea { resize:vertical; min-height:90px; }

/* ── Log drawer ──────────────────────────────────────────────────────────── */
.wdmal-log-backdrop { position:fixed; inset:0; width:100vw !important; max-width:100vw !important; margin:0 !important; background:rgba(0,0,0,.35); z-index:99998; opacity:0; pointer-events:none; transition:opacity .25s; }
.wdmal-log-backdrop.open { opacity:1; pointer-events:all; }
.wdmal-log-drawer { position:fixed; top:0; right:0; bottom:0; width:460px; max-width:95vw !important; margin:0 !important; background:#0f1117; z-index:99999; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1); box-shadow:-8px 0 40px rgba(0,0,0,.35); }
.wdmal-log-drawer.open { transform:translateX(0); }
.wdmal-log-inner { display:flex; flex-direction:column; height:100%; overflow:hidden; }
.wdmal-log-header { display:flex; align-items:flex-start; justify-content:space-between; padding:18px 20px 14px; border-bottom:1px solid #1e2130; flex-shrink:0; }
.wdmal-log-header h3 { font-size:14px; font-weight:600; color:#e2e8f0; margin:0 0 3px; }
.wdmal-log-site { font-size:11px; color:#64748b; }
.wdmal-log-header .wdmal-modal-close { color:#64748b; }
.wdmal-log-header .wdmal-modal-close:hover { color:#e2e8f0; background:#1e2130; }
.wdmal-log-status-row { padding:10px 20px; border-bottom:1px solid #1e2130; flex-shrink:0; min-height:0; font-size:12px; color:#94a3b8; display:flex; align-items:center; gap:8px; }
.wdmal-log-status-row:empty { display:none; }
.wdmal-log-terminal { flex:1; overflow-y:auto; padding:14px 20px; font-family:'SF Mono','Fira Code',Consolas,monospace; font-size:12px; line-height:1.7; color:#cbd5e1; scrollbar-width:thin; scrollbar-color:#2d3748 transparent; }
.wdmal-log-terminal::-webkit-scrollbar { width:4px; }
.wdmal-log-terminal::-webkit-scrollbar-thumb { background:#2d3748; border-radius:2px; }
.wdmal-log-entry { display:flex; gap:10px; padding:3px 0; border-bottom:1px solid #1a1e2e; }
.wdmal-log-entry:last-child { border-bottom:none; }
.wdmal-log-time  { color:#475569; flex-shrink:0; font-size:11px; padding-top:1px; min-width:56px; }
.wdmal-log-badge { flex-shrink:0; font-size:10px; font-weight:700; padding:1px 6px; border-radius:3px; text-transform:uppercase; letter-spacing:.04em; align-self:flex-start; margin-top:2px; }
.wdmal-log-badge.started  { background:#1e3a5f; color:#60a5fa; }
.wdmal-log-badge.running  { background:#2d2000; color:#fbbf24; }
.wdmal-log-badge.done     { background:#052e16; color:#4ade80; }
.wdmal-log-badge.failed   { background:#3b0a0a; color:#f87171; }
.wdmal-log-badge.info     { background:#1e293b; color:#94a3b8; }
.wdmal-log-msg { flex:1; word-break:break-word; color:#cbd5e1; }
.wdmal-log-entry.failed .wdmal-log-msg { color:#fca5a5; }
.wdmal-log-entry.done   .wdmal-log-msg { color:#86efac; }
.wdmal-log-empty { text-align:center; padding:40px 20px; color:#475569; font-size:13px; font-family:inherit; }
.wdmal-log-footer { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; border-top:1px solid #1e2130; flex-shrink:0; }
.wdmal-log-footer .wdmal-btn-ghost { background:#1e2130 !important; color:#94a3b8 !important; border-color:#2d3748 !important; font-size:12px; padding:6px 12px; }
.wdmal-log-footer .wdmal-btn-ghost:hover { background:#2d3748 !important; color:#e2e8f0 !important; border-color:#2d3748 !important; }
.wdmal-log-count { font-size:11px; color:#475569; font-family:monospace; }

/* ══════════════════════════════════════════════════════════════════════════
   SITE DETAIL
══════════════════════════════════════════════════════════════════════════ */
.wdmal-detail-breadcrumb { margin-bottom:16px; }
.wdmal-back-link { font-size:13px; color:var(--accent); text-decoration:none; }
.wdmal-back-link:hover { text-decoration:underline; }

.wdmal-detail-header { display:flex; align-items:flex-start; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.wdmal-detail-avatar { width:52px; height:52px; border-radius:var(--r-lg); background:var(--accent-bg); color:var(--accent); font-size:16px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.wdmal-detail-title-block { flex:1; }
.wdmal-detail-title { margin:0 0 6px; font-size:22px; font-weight:700; }
.wdmal-detail-urls { display:flex; gap:8px; flex-wrap:wrap; }
.wdmal-url-chip { font-size:12px; padding:3px 10px; background:var(--surface); border:1px solid var(--border); border-radius:999px; text-decoration:none; color:var(--text); transition:border-color .15s; }
.wdmal-url-chip:hover { border-color:var(--border2); }
.wdmal-url-chip--staging { background:var(--c-amber-bg); border-color:#f5d89a; }
.wdmal-detail-status-block { display:flex; flex-direction:column; gap:4px; align-items:flex-end; }
.wdmal-detail-lastrun { font-size:11px; color:var(--text2); }

.wdmal-detail-tabs { display:flex; gap:2px; border-bottom:1.5px solid var(--border); margin-bottom:24px; }
.wdmal-detail-tab { background:none; border:none; padding:9px 16px; font-size:13px; font-weight:500; color:var(--text2); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1.5px; transition:color .15s; font-family:inherit; }
.wdmal-detail-tab:hover  { color:var(--text); }
.wdmal-detail-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.wdmal-detail-pane       { display:none; }
.wdmal-detail-pane.active { display:block; animation:wdmal-fadein .18s ease; }
@keyframes wdmal-fadein { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

.wdmal-detail-run-card { background:#fff; border:1.5px solid var(--border); border-radius:var(--r-xl); padding:24px; margin-bottom:20px; }
.wdmal-detail-run-top  { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.wdmal-detail-run-top h3 { margin:0 0 4px; font-size:16px; font-weight:700; }
.wdmal-steps-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; margin-bottom:20px; }
.wdmal-step-card { cursor:pointer; }
.wdmal-step-card input { display:none; }
.wdmal-step-card-inner { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 12px; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-lg); text-align:center; transition:all .15s; }
.wdmal-step-card input:checked ~ .wdmal-step-card-inner { background:var(--accent-bg); border-color:var(--accent); }
.wdmal-step-card:hover .wdmal-step-card-inner { border-color:var(--border2); }
.wdmal-step-card-icon  { font-size:22px; }
.wdmal-step-card-label { font-size:12px; font-weight:600; color:var(--text); }
.wdmal-step-card-desc  { font-size:11px; color:var(--text2); line-height:1.4; }

.wdmal-detail-progress { margin-top:16px; }
.wdmal-progress-track  { height:6px; background:var(--border); border-radius:999px; overflow:hidden; margin-bottom:6px; }
.wdmal-progress-fill   { height:100%; background:var(--accent); border-radius:999px; width:0; transition:width .5s ease; animation:wdmal-prog-anim 1.5s linear infinite; }
@keyframes wdmal-prog-anim { 0%{background-position:0 0} 100%{background-position:30px 0} }
.wdmal-progress-label  { font-size:12px; color:var(--text2); }

.wdmal-detail-result { padding:12px 14px; border-radius:var(--r-md); font-size:13px; font-weight:500; margin-top:12px; }
.wdmal-detail-result.success { background:var(--accent-bg); color:var(--accent); border:1px solid #b6e4c8; }
.wdmal-detail-result.error   { background:var(--c-red-bg);   color:var(--c-red);   border:1px solid #f5c6c6; }

.wdmal-detail-section { margin-top:24px; }
.wdmal-detail-section-title { font-size:14px; font-weight:600; margin:0 0 12px; }
.wdmal-auto-cards { display:flex; flex-direction:column; gap:8px; }
.wdmal-auto-card  { display:flex; align-items:center; gap:12px; padding:14px 16px; background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); }
.wdmal-auto-card-icon { font-size:22px; flex-shrink:0; }
.wdmal-auto-card strong { display:block; font-size:13px; }
.wdmal-auto-card p { margin:2px 0 0; font-size:12px; color:var(--text2); }

.wdmal-report-tabs { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.wdmal-report-tab-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; background:#fff; border:1px solid var(--border); border-radius:var(--r-md); font-size:13px; font-weight:500; color:var(--text); text-decoration:none; transition:border-color .15s; }
.wdmal-report-tab-btn:hover { border-color:var(--accent); color:var(--accent); }
.wdmal-report-frame { width:100%; min-height:560px; border:1.5px solid var(--border); border-radius:var(--r-lg); background:var(--surface); }
.wdmal-report-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:280px; padding:40px; background:var(--surface); border:1.5px dashed var(--border); border-radius:var(--r-xl); text-align:center; color:var(--text2); }
.wdmal-report-placeholder h4 { margin:12px 0 6px; color:var(--text); font-size:16px; }
.wdmal-report-placeholder p  { margin:0; font-size:13px; max-width:380px; line-height:1.6; }

.wdmal-history-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.wdmal-history-header h3 { margin:0; font-size:14px; font-weight:600; }

/* ══════════════════════════════════════════════════════════════════════════
   HISTORY SHORTCODE
══════════════════════════════════════════════════════════════════════════ */
.wdmal-history-table-wrap { background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.wdmal-history-list-head  { display:grid; grid-template-columns:130px 1fr 90px 1fr 160px; gap:0; padding:9px 16px; background:var(--surface); border-bottom:1px solid var(--border); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--text2); }
.wdmal-history-row        { display:grid; grid-template-columns:130px 1fr 90px 1fr 160px; gap:0; padding:12px 16px; border-bottom:1px solid var(--border); align-items:center; font-size:13px; transition:background .1s; }
.wdmal-history-row:hover  { background:#fafaf9; }
.wdmal-history-row:last-child { border-bottom:none; }
.wdmal-hcol-time    { font-size:11px; color:var(--text2); font-family:monospace; }
.wdmal-hcol-site    { font-weight:500; }
.wdmal-hcol-status  { }
.wdmal-hcol-msg     { font-size:12px; color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wdmal-hcol-actions { display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; }
.wdmal-hist-pagination { display:flex; gap:6px; justify-content:center; padding:12px; }
.wdmal-select { border:1px solid var(--border2); border-radius:var(--r-md); padding:6px 10px; font-size:13px; font-family:inherit; color:var(--text); background:#fff; cursor:pointer; }
.wdmal-hist-empty { padding:40px; text-align:center; color:var(--text2); }

/* ══════════════════════════════════════════════════════════════════════════
   RESULTS TAB
══════════════════════════════════════════════════════════════════════════ */
.wdmal-results-summary { background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:20px 24px; }
.wdmal-results-header  { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.wdmal-results-header h3 { margin:0; font-size:15px; font-weight:600; }
.wdmal-results-duration  { font-size:12px; color:var(--text2); background:var(--surface); padding:4px 10px; border-radius:999px; }

.wdmal-results-section    { margin-bottom:20px; }
.wdmal-results-section h4 { margin:0 0 12px; font-size:14px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:6px; }
.wdmal-results-section h5 { margin:8px 0 6px; font-size:12px; font-weight:600; color:var(--text2); text-transform:uppercase; letter-spacing:.03em; }

.wdmal-result-group { margin-left:20px; padding-left:14px; border-left:2px solid var(--border); margin-top:10px; }

.wdmal-result-item { display:flex; align-items:center; gap:10px; padding:8px 12px; background:var(--surface); border-radius:var(--r-md); margin-bottom:6px; }
.wdmal-result-item--small { padding:5px 10px; font-size:12px; background:#fff; border:1px solid var(--border); }
.wdmal-result-icon  { font-size:14px; flex-shrink:0; }
.wdmal-result-label { font-weight:500; flex:1; font-size:13px; }
.wdmal-result-value { font-size:12px; color:var(--text2); font-family:'SF Mono', Monaco, Consolas, monospace; background:#fff; padding:2px 8px; border-radius:var(--r-sm); border:1px solid var(--border); }

.wdmal-results-empty { font-size:13px; color:var(--text2); padding:16px; background:var(--surface); border-radius:var(--r-md); text-align:center; }

/* Field help text */
.wdmal-field-help { font-size:11px; color:var(--text2); margin:4px 0 0; }

/* ── JSON validation tools (functional test fields) ──────────────────────── */
.wdmal-json-tools { display:flex; align-items:center; gap:10px; margin-top:6px; flex-wrap:wrap; }
.wdmal-json-tools .wdmal-validate-json { padding:5px 12px; font-size:12px; }
.wdmal-json-result { font-size:12px; font-weight:500; }

/* ── Secondary button (outline style, sits beside primary) ───────────────── */
.wdmal-btn-secondary { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; background:#fff !important; color:var(--text) !important; border:1px solid var(--border2) !important; border-radius:var(--r-md); font-size:13px; font-weight:500; cursor:pointer; transition:background .15s, border-color .15s, color .15s; font-family:inherit; text-decoration:none; white-space:nowrap; box-shadow:none !important; }
.wdmal-btn-secondary:hover    { background:var(--accent) !important; border-color:var(--accent) !important; color:var(--white) !important; }
.wdmal-btn-secondary:disabled { opacity:.4; cursor:not-allowed; }

/* ── AI token chip ───────────────────────────────────────────────────────── */
.wdmal-token-chip { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; background:var(--accent-bg); color:var(--accent); border:1px solid var(--accent-bg2); }
.wdmal-token-chip.empty { background:var(--c-red-bg); color:var(--c-red); border-color:#f5c6c6; }