/* WebMachine WM-003.007 - Unified UI layer
   Additive styles only: existing module markup and routes remain compatible. */
:root {
  --wm-bg: #f4f7fb;
  --wm-surface: #ffffff;
  --wm-surface-soft: #f8fafc;
  --wm-border: #dfe5ee;
  --wm-text: #172033;
  --wm-muted: #64748b;
  --wm-primary: #245fce;
  --wm-primary-hover: #174aa8;
  --wm-focus: rgba(36,95,206,.26);
  --wm-danger: #b42318;
  --wm-radius: 12px;
  --wm-shadow: 0 8px 24px rgba(15,23,42,.07);
}
html { color-scheme: light; }
body.wm-app { background: var(--wm-bg); color: var(--wm-text); }
body.wm-app main.container { padding-top: 24px; padding-bottom: 40px; }
body.wm-app .topbar { position: sticky; top: 0; z-index: 1000; box-shadow: 0 1px 0 rgba(15,23,42,.08),0 8px 24px rgba(15,23,42,.06); }
body.wm-app .topbar-inner { min-height: 64px; }
body.wm-app .brand a { letter-spacing: -.02em; }
body.wm-app .brand-context { border-left: 1px solid rgba(255,255,255,.25); padding-left: 12px; }
body.wm-app .nav-main > a,
body.wm-app .nav-user-link,
body.wm-app .nav-dropdown-toggle,
body.wm-app .nav-form button { border-radius: 8px; transition: background-color .16s ease,color .16s ease,transform .16s ease; }
body.wm-app .nav-main > a:hover,
body.wm-app .nav-user-link:hover,
body.wm-app .nav-dropdown-toggle:hover,
body.wm-app .nav-form button:hover { transform: translateY(-1px); }
body.wm-app .nav-dropdown-menu { border: 1px solid var(--wm-border); border-radius: 10px; box-shadow: var(--wm-shadow); overflow: hidden; }
body.wm-app .nav-dropdown-menu a { padding: 10px 13px; }
body.wm-app .card,
body.wm-app .wm2-card,
body.wm-app .cc-tile,
body.wm-app .cc-sidebar { border: 1px solid var(--wm-border); border-radius: var(--wm-radius); background: var(--wm-surface); box-shadow: 0 3px 12px rgba(15,23,42,.045); }
body.wm-app .card { padding: 20px; }
body.wm-app h1, body.wm-app h2, body.wm-app h3 { color: var(--wm-text); letter-spacing: -.018em; }
body.wm-app h1 { font-size: clamp(1.65rem,2.5vw,2.2rem); }
body.wm-app h2 { font-size: clamp(1.15rem,1.8vw,1.45rem); }
body.wm-app .muted, body.wm-app .small, body.wm-app small { color: var(--wm-muted); }
.ui-page-header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; border-top: 4px solid var(--wm-primary) !important; }
.ui-page-header h1 { margin:0 0 6px; }
.ui-page-header p:last-child { margin-bottom:0; }
body.wm-app .btn,
body.wm-app button,
body.wm-app .action-btn { min-height: 38px; border-radius: 8px; font-weight: 650; transition: border-color .15s ease,background-color .15s ease,box-shadow .15s ease,transform .15s ease; }
body.wm-app .btn:hover,
body.wm-app button:hover,
body.wm-app .action-btn:hover { transform: translateY(-1px); }
body.wm-app .btn:focus-visible,
body.wm-app button:focus-visible,
body.wm-app a:focus-visible,
body.wm-app input:focus-visible,
body.wm-app select:focus-visible,
body.wm-app textarea:focus-visible { outline: 3px solid var(--wm-focus); outline-offset: 2px; }
body.wm-app input[type="text"],body.wm-app input[type="search"],body.wm-app input[type="email"],body.wm-app input[type="password"],body.wm-app input[type="number"],body.wm-app input[type="date"],body.wm-app input[type="datetime-local"],body.wm-app select,body.wm-app textarea,
body.wm-app .input { min-height: 42px; border:1px solid var(--wm-border); border-radius:8px; background:#fff; color:var(--wm-text); }
body.wm-app textarea { min-height:110px; }
body.wm-app input:hover,body.wm-app select:hover,body.wm-app textarea:hover { border-color:#b8c3d3; }
body.wm-app input:focus,body.wm-app select:focus,body.wm-app textarea:focus { border-color:var(--wm-primary); box-shadow:0 0 0 3px var(--wm-focus); }
body.wm-app .table-responsive { border:1px solid var(--wm-border); border-radius:10px; overflow:auto; }
body.wm-app table.table { width:100%; border-collapse:separate; border-spacing:0; }
body.wm-app table.table thead th { background:var(--wm-surface-soft); color:#3b475b; font-size:.82rem; letter-spacing:.025em; text-transform:uppercase; }
body.wm-app table.table th,body.wm-app table.table td { border-bottom:1px solid var(--wm-border); padding:12px 14px; vertical-align:middle; }
body.wm-app table.table tbody tr:last-child td { border-bottom:0; }
body.wm-app table.table tbody tr:hover td { background:#f8fbff; }
body.wm-app .alert { border-radius:10px; border-width:1px; box-shadow:0 3px 12px rgba(15,23,42,.04); }
body.wm-app .badge,body.wm-app [class*="status-badge"] { border-radius:999px; font-weight:700; }
body.wm-app .dashboard-kpi { min-height:118px; }
body.wm-app .dashboard-kpi:hover,body.wm-app .dashboard-list-item:hover,body.wm-app .cc-tile:hover { box-shadow:var(--wm-shadow); }
body.wm-app .dashboard-widget-head,body.wm-app .notification-header,body.wm-app .trash-section-heading { border-bottom:1px solid var(--wm-border); padding-bottom:12px; }
body.wm-app .dashboard-list-item { border-color:var(--wm-border); background:var(--wm-surface); }
body.wm-app .search-result-item:hover,body.wm-app .notification-item:hover { background:#f8fbff; }
body.wm-app .app-footer { border-top:1px solid var(--wm-border); background:rgba(255,255,255,.75); }
body.wm-app .app-footer-inner { color:var(--wm-muted); }
body.wm-app .wm2-layout { gap:22px; }
body.wm-app .wm2-sidebar { border-radius:var(--wm-radius); }
body.wm-app .wm2-sidebar a { border-radius:8px; }
body.wm-app .code-block { border:1px solid var(--wm-border); border-radius:9px; background:#0f172a; color:#e2e8f0; }
@media (max-width: 900px) {
  .ui-page-header { align-items:stretch; flex-direction:column; }
  body.wm-app main.container { padding-top:16px; }
}
@media (max-width: 640px) {
  body.wm-app .card { padding:15px; }
  body.wm-app table.table th,body.wm-app table.table td { padding:10px; }
  body.wm-app .toolbar-actions,body.wm-app .trash-batch-actions { gap:8px; }
  body.wm-app .toolbar-actions .btn { flex:1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  body.wm-app *,body.wm-app *::before,body.wm-app *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}

/* WM-003.011 Activity Center */
.activity-filter-card { margin-bottom: 1rem; }
.activity-filter-form { display: flex; flex-wrap: wrap; gap: .85rem; align-items: end; }
.activity-filter-form label { display: grid; gap: .35rem; min-width: 180px; }
.activity-filter-search { flex: 1 1 280px; }
.activity-timeline { padding: 0; overflow: hidden; }
.activity-entry { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 1rem; align-items: start; padding: 1rem 1.15rem; border-bottom: 1px solid var(--ui-border, #dde3ea); }
.activity-entry:last-child { border-bottom: 0; }
.activity-entry-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--ui-surface-muted, #f2f5f8); font-size: 1.2rem; }
.activity-entry-content { min-width: 0; }
.activity-entry-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; }
.activity-entry-head h2 { margin: 0; font-size: 1rem; }
.activity-entry-head time { color: var(--ui-text-muted, #667085); font-size: .82rem; }
.activity-entry-content p { margin: .35rem 0; }
.activity-entry-meta { display: flex; flex-wrap: wrap; gap: .45rem .9rem; color: var(--ui-text-muted, #667085); font-size: .82rem; }
.activity-entry-meta code { font-size: .76rem; }
@media (max-width: 720px) { .activity-entry { grid-template-columns: 40px minmax(0,1fr); } .activity-entry > .btn { grid-column: 2; justify-self: start; } }
.activity-summary { display: flex; align-items: baseline; gap: .55rem; margin-bottom: 1rem; }
.activity-summary strong { font-size: 1.35rem; }
.activity-pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1rem 0 0; }
@media (max-width: 560px) { .activity-pagination { justify-content: space-between; } }