feat: align campaign with shared UI foundations

src/govoplan_campaign/backend/manifest.py

@@ -35,6 +35,7 @@ from govoplan_core.core.modules import (
     ModuleManifest,
     NavItem,
     PermissionDefinition,
+    ProductAreaContribution,
     RoleTemplate,
 )
 from govoplan_core.core.reporting import REPORT_PROVIDER_CAPABILITY_PREFIX
@@ -576,6 +577,23 @@ manifest = ModuleManifest(
                 order=20,
             ),
         ),
+        product_areas=(
+            ProductAreaContribution(
+                id="communication",
+                module_id="campaigns",
+                label="i18n:govoplan-core.product_area.communication",
+                icon="mail",
+                description="i18n:govoplan-core.product_area.communication_description",
+                surface_ids=(
+                    "campaigns.nav.campaigns",
+                    "campaigns.route.campaigns",
+                    "campaigns.route.operator-redirect",
+                    OPERATOR_QUEUE_SURFACE_ID,
+                    REPORTS_SURFACE_ID,
+                ),
+                order=40,
+            ),
+        ),
         view_surfaces=(
             ViewSurface(
                 id="campaigns.widget.activity",

webui/src/styles/campaign-workspace.css

@@ -8,7 +8,7 @@
 .wizard-action-card {
   min-height: 176px;
   border: var(--border-line);
-  border-radius: 6px;
+  border-radius: var(--radius-compact);
   background: var(--panel-soft);
   padding: 16px;
   display: flex;
@@ -47,7 +47,7 @@
   color: var(--text);
   background: var(--panel-soft);
   border: var(--border-line);
-  border-radius: 6px;
+  border-radius: var(--radius-compact);
   padding: 14px;
   font: inherit;
   line-height: 1.5;
@@ -62,7 +62,7 @@
   align-items: center;
   min-height: 28px;
   border: var(--border-line);
-  border-radius: 999px;
+  border-radius: var(--radius-pill);
   background: var(--panel-soft);
   padding: 4px 10px;
   color: var(--text-strong);
@@ -70,7 +70,7 @@
   font-weight: 700;
 }
 
-@media (max-width: 1000px) {
+@media (max-width: 1100px) {
   .wizard-action-grid { grid-template-columns: 1fr; }
 }
 .locked-wizard-card { grid-template-columns: 1fr; }
@@ -143,7 +143,7 @@
 }
 .toggle-span-full {
   border: var(--border-line);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   background: var(--panel-soft);
   padding: 10px 12px;
 }
@@ -204,7 +204,7 @@
   min-height: 88px;
   padding: 14px;
   border: var(--border-line);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   background: var(--panel-soft);
   color: inherit;
   text-decoration: none;
@@ -233,7 +233,7 @@
   gap: 10px;
   padding: 14px;
   border: var(--border-line);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   background: var(--panel-soft);
 }
 .template-preview-box h3 {
@@ -254,7 +254,7 @@
   .override-toggle-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
 }
 
-@media (max-width: 780px) {
+@media (max-width: 760px) {
   .related-link-grid,
   .override-toggle-grid { grid-template-columns: 1fr; }
 }
@@ -394,7 +394,7 @@
   line-height: 1.55;
 }
 
-@media (max-width: 980px) {
+@media (max-width: 1100px) {
   .module-entry-table {
     min-width: 880px;
   }
@@ -411,7 +411,7 @@
 .overview-config-card {
   min-height: 218px;
   border: var(--border-line);
-  border-radius: 6px;
+  border-radius: var(--radius-compact);
   background: linear-gradient(var(--control-gradient-start), var(--panel-soft));
   box-shadow: var(--shadow-campaign-soft);
   padding: 16px;
@@ -536,7 +536,7 @@
   width: 100%;
   min-height: 360px;
   border: var(--border-line);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   background: var(--surface);
 }
 .template-action-dialog {
@@ -573,7 +573,7 @@
   white-space: nowrap;
 }
 
-@media (max-width: 720px) {
+@media (max-width: 760px) {
   .template-preview-toolbar {
     display: grid;
   }
@@ -670,7 +670,7 @@
   background: var(--panel-soft);
 }
 .recipient-add-row .email-address-input {
-  max-width: 720px;
+  max-width: 760px;
 }
 
 @media (max-width: 1100px) {
@@ -679,7 +679,7 @@
   .attachment-base-grid { grid-template-columns: 1fr; }
 }
 
-@media (max-width: 860px) {
+@media (max-width: 900px) {
   .campaign-identity-grid { grid-template-columns: 1fr; }
 }
 
@@ -701,7 +701,7 @@
   justify-content: center;
   min-height: 24px;
   border: var(--border-line);
-  border-radius: 999px;
+  border-radius: var(--radius-pill);
   background: var(--panel-soft);
   color: var(--muted);
   font-size: 11px;
@@ -746,7 +746,7 @@
 }
 .attachment-rules-empty {
   border: 1px dashed var(--line-dark);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   background: var(--panel-soft);
   padding: 14px;
 }
@@ -800,7 +800,7 @@
   display: grid;
   gap: 12px;
   border: var(--border-line);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   background: var(--panel-soft);
   padding: 14px;
   min-width: 0;
@@ -1114,7 +1114,7 @@
   justify-content: center;
   min-height: 24px;
   border: var(--border-line);
-  border-radius: 999px;
+  border-radius: var(--radius-pill);
   background: var(--panel-soft);
   color: var(--muted);
   font-size: 11px;
@@ -1138,7 +1138,7 @@
 .recipient-data-table td:nth-child(3) { min-width: 192px; }
 .recipient-index-cell { white-space: nowrap; }
 
-@media (max-width: 720px) {
+@media (max-width: 760px) {
   .recipient-address-empty-row,
   .recipient-address-edit-line {
     grid-template-columns: 1fr;
@@ -1201,7 +1201,7 @@
   justify-content: center;
   width: 1.25rem;
   height: 1.25rem;
-  border-radius: 999px;
+  border-radius: var(--radius-pill);
   color: var(--text);
   text-decoration: none;
   line-height: 1;
@@ -1275,7 +1275,7 @@
   max-height: 260px;
   overflow: auto;
   border: 1px solid var(--line-subtle);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   background: var(--panel-glass);
   color: var(--text);
   padding: 12px;
@@ -1398,7 +1398,7 @@
   min-width: min(220px, 100%);
   max-width: 100%;
   border: 1px solid var(--line-subtle);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   background: var(--panel-glass);
   padding: 0.55rem 0.7rem;
   color: var(--text);
@@ -1429,7 +1429,7 @@
   color: var(--text);
 }
 
-@media (max-width: 720px), (max-height: 700px) {
+@media (max-width: 760px), (max-height: 700px) {
   .message-preview-backdrop {
     padding: 8px;
   }
@@ -1473,7 +1473,7 @@
 
 /* Review & Send workflow page. */
 .review-send-page {
-  --review-flow-partial: var(--review-flow-purple, #9b86c7);
+  --review-flow-partial: var(--data-category-purple);
 }
 
 .review-flow-navigation {
@@ -1522,7 +1522,7 @@
   place-items: center;
   flex: 0 0 auto;
   border: 1px solid var(--review-stage-color);
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   color: color-mix(in srgb, var(--review-stage-color) 82%, var(--text));
   background: color-mix(in srgb, var(--review-stage-color) 9%, var(--surface));
   box-shadow: 0 0 0 4px var(--bg), 0 4px 12px var(--campaign-stage-shadow-color);
@@ -1537,7 +1537,7 @@
   flex: 1 1 auto;
   min-height: 54px;
   margin: 4px 0 -14px;
-  border-radius: 999px;
+  border-radius: var(--radius-pill);
   background: linear-gradient(
     to bottom,
     var(--review-stage-line-color, var(--review-stage-color)),
@@ -1768,7 +1768,7 @@
   width: min(430px, calc(100% - 44px));
   height: 110px;
   border: 1px solid var(--campaign-panel-border);
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   content: "";
   transform: translate(-50%, -50%);
   background: var(--campaign-panel-bg);
@@ -1797,7 +1797,7 @@
   display: grid;
   place-items: center;
   border: var(--border-line-dark);
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   color: var(--muted);
   background: var(--surface);
 }
@@ -1873,7 +1873,7 @@
   padding: 12px 14px;
   border: var(--border-line);
   border-left: 3px solid var(--blue);
-  border-radius: 6px;
+  border-radius: var(--radius-compact);
   background: var(--panel-soft);
 }
 
@@ -2033,7 +2033,7 @@
   justify-content: space-between;
   gap: 10px;
   border: 1px solid transparent;
-  border-radius: 5px;
+  border-radius: var(--radius-xs);
   background: transparent;
   padding: 6px 8px;
   color: var(--text);
@@ -2143,7 +2143,7 @@
   display: grid;
   gap: 0.65rem;
   border: 2px solid var(--line-strong, var(--line-subtle));
-  border-radius: 14px;
+  border-radius: var(--radius-xl);
   padding: 0.75rem;
   background: var(--panel-glass);
 }
@@ -2222,7 +2222,7 @@
   overflow: auto;
   padding: 12px;
   border: var(--border-line);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   background: var(--surface-muted);
   white-space: pre-wrap;
   word-break: break-word;
@@ -2284,7 +2284,7 @@
 .attempt-history-wrap {
   overflow: auto;
   border: var(--border-line);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
 }
 
 .attempt-history-table {
@@ -2380,7 +2380,7 @@
   display: grid;
   place-items: center;
   border: 1px solid color-mix(in srgb, var(--accent) 70%, var(--line));
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   color: color-mix(in srgb, var(--accent) 82%, var(--text));
   background: color-mix(in srgb, var(--accent) 8%, var(--surface));
   font-weight: 700;
@@ -2717,7 +2717,7 @@
 .campaign-copy-option small { margin-top: 3px; color: var(--muted); line-height: 1.35; }
 .campaign-copy-option.is-disabled { opacity: .62; }
 
-@media (max-width: 720px) {
+@media (max-width: 760px) {
   .campaign-copy-identity { grid-template-columns: 1fr; }
   .campaign-copy-option { grid-template-columns: 1fr; }
 }
@@ -2738,7 +2738,7 @@
 .campaign-content-save-identity { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
 .campaign-content-save-form > p { margin: 0; }
 
-@media (max-width: 720px) {
+@media (max-width: 760px) {
   .campaign-content-library-item, .campaign-content-save-identity { grid-template-columns: 1fr; }
   .campaign-content-library-item-actions { justify-content: flex-start; }
 }
@@ -2747,14 +2747,14 @@
 .campaign-schedule-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-block: 12px; }
 .campaign-schedule-interval { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 8px; }
 .campaign-schedule-list { display: grid; gap: 4px; }
-.campaign-schedule-row { display: flex; align-items: center; justify-content: space-between; min-height: 52px; gap: 12px; padding: 8px; border-radius: 4px; }
+.campaign-schedule-row { display: flex; align-items: center; justify-content: space-between; min-height: 52px; gap: 12px; padding: 8px; border-radius: var(--radius-sm); }
 .campaign-schedule-row:hover { background: var(--hover-bg); }
 .campaign-schedule-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
 .campaign-schedule-main strong { flex-basis: 100%; }
 .campaign-schedule-main span { color: var(--muted); font-size: var(--font-size-sm); }
 .campaign-schedule-main .danger-text { color: var(--danger); }
 
-@media (max-width: 720px) {
+@media (max-width: 760px) {
   .campaign-schedule-form { grid-template-columns: minmax(0, 1fr); }
   .campaign-schedule-row { align-items: flex-start; flex-direction: column; }
 }
@@ -2765,7 +2765,7 @@
 .campaign-residual-file-form select,
 .campaign-residual-file-form textarea { width: 100%; }
 
-@media (max-width: 720px) {
+@media (max-width: 760px) {
   .campaign-residual-file-form { grid-template-columns: minmax(0, 1fr); }
   .campaign-residual-file-wide { grid-column: auto; }
 }