UI Design System Migration Progress
===================================

Source plan:
- docs/ui_design_system_migration.md
- docs/ui_component_contract_v2.md

Current status
--------------
[done] Foundation files are present:
       ui_design_system.php
       assets/css/ua_design_tokens.css
       assets/css/ua_design_system.css
       assets/css/ua_design_components.css

[done] Header loads the shared shell CSS stack and applies:
       ua-design-legacy / ua-design-v2
       ua-density-*
       ua-spacing-*
       ua-p-*

[done] Theme Studio exists in template_page.php and saves V2 settings.

[done] Simple V2 pages already migrated:
       about.php
       all_links.php
       automation_log.php
       automation_reports.php
       support.php
       mikrotik_import.php
       import_ppp_from_mikrotik.php
       sync_mikrotik.php

[done] Subscriber child/modal V2 work is active on:
       subscribers.php
       subscribers_add.php
       subscribers_archive.php
       subscribers_distribution.php
       subscribers_edit.php
       subscribers_history.php
       subscribers_history_clear.php
       subscribers_import_excel.php
       subscribers_view.php

[done] Finance V2 pass:
       finance_reports.php
       finance_cashbox.php
       finance_day_report.php
       finance_month_close.php
       finance_month_report.php
       finance_payments.php
       finance_expenses.php

Notes for the finance pass
--------------------------
- Finance pages now force V2 for visual QA.
- Repeated report classes are centralized in assets/css/ua_design_components.css:
  fin-report-head, fin-report-title, fin-report-sub, fin-actions, fin-btn,
  fin-kpis, fin-kpi, fin-card, fin-empty.
- finance_tabs.php continues to provide the accounting navigation rail.

Remaining phases
----------------
[done] Billing/invoice V2 pass:
       invoices.php
       invoices_add.php
       invoices_generate_month.php
       billing_limit_requests.php
       billing_cut_requests.php
       (print pages stay print-safe until visual paper QA)

[done] Purchases V2 pass:
       purchases_report.php
       purchases_new.php
       purchases_view.php

[done] Sales V2 pass:
       sales.php
       sales_history.php
       sales_new.php
       sales_products.php
       sales_summary.php
       sales_view.php

[done] Settings/security/admin V2 pass:
       app_settings.php
       company_admin.php
       settings_hud.php
       settings_mikrotik.php
       settings_print.php
       settings_sms.php
       settings_whatsapp.php
       system.php
       security_alerts.php
       security_monitor.php
       routers.php
       sectors.php
       packages_prices.php
       update_version.php
       user_profile.php
       users_permissions.php
       roles.php
       maintenance.php

[done] Dashboard V2 compatibility:
       dashboard.php already forces V2 and uses the dashboard compatibility block in
       assets/css/ua_design_components.css.

[done] 8080 visual/DOM QA pass:
       Tested through http://127.0.0.1:8080/mikrotik/admin/ with admin login.
       Representative pages checked:
       dashboard.php
       template_page.php
       finance_reports.php
       finance_cashbox.php
       invoices.php
       purchases_report.php
       sales.php
       settings_mikrotik.php
       security_monitor.php
       Result: no page-level horizontal overflow, no offscreen shell controls,
       and no visible PHP fatal/parse warnings in the tested set.

[done] Print-safe QA pass:
       print_preview.php?type=page
       settings_print.php
       vouchers_print.php
       Result: no page-level horizontal overflow and no visible PHP fatal/parse
       warnings. Voucher select currently routes to vouchers.php in this session.

[done] Remaining admin shell V2 pass:
       Enabled forced V2 on the remaining non-print, non-public admin shell pages:
       agents.php, agents_report.php, agents_report_view.php, agent_pos.php,
       agent_transactions.php, airmax_monitor_settings.php, automation_commands.php,
       automation_comms.php, automation_cut.php, automation_invoices.php,
       automation_maintenance.php, automation_throttle.php, automation_vouchers.php,
       customer_connect.php, enforce_now.php, index.php, messages_campaigns.php,
       messages_outbox.php, messages_templates.php, message_log.php, mikrotik.php,
       mikrotik_dashboard.php, mikrotik_profiles_sync.php, mtwatch_allowlist.php,
       quota_setup.php, receiver_match_report.php, security_monitor.php,
       vouchers.php, vouchers_generate.php, vouchers_settings.php,
       vouchers_usage_report.php, wizard_network.php.
       Added a final legacy-page compatibility block to
       assets/css/ua_design_components.css for old card/tab/table/form markup
       under body.ua-design-v2.
       Added a mobile shell guard in footer.php so normal V2 pages reclaim the
       viewport when the sidebar is pinned on narrow screens; top stats collapse
       to brand + traffic + compact actions on mobile.
       8080 QA sample passed on desktop and 390px viewport:
       agents.php, automation_commands.php, messages_campaigns.php,
       vouchers.php, wizard_network.php, security_monitor.php
       plus desktop checks for automation_comms.php, mikrotik.php,
       mtwatch_allowlist.php. Result: forced V2 present, no page-level
       horizontal overflow, and no visible PHP fatal/parse warnings.

[done] Theme Studio accent propagation fix:
       Added a shared accent bridge in footer.php so legacy fixed colors in the
       common shell and migrated V2 pages follow --ua-accent:
       top stats brand chip, shell line/scroll grip, dropdown hover/icons,
       message tabs, automation network cards/buttons, security monitor headers
       and action buttons, and mtwatch allowlist cards/buttons/tables.
       Tested with temporary accent #ff2d55 and restored original settings:
       ui_design_mode=legacy, ui_accent=#c6c6be.
       QA pages: agents.php, automation_comms.php, messages_campaigns.php,
       mtwatch_allowlist.php, security_monitor.php, settings_mikrotik.php.
       Result: sampled fixed-color surfaces now compute from the test accent.

[done] Program-wide final unification layer:
       Fixed CSS variable output in header.php so --ua-font-family is emitted as
       valid CSS instead of HTML-escaped quotes. This stopped migrated V2 pages
       from falling back to browser default serif fonts.
       Added assets/css/ua_program_unified.css as the final shared layer for
       migrated admin pages. It normalizes typography, panels/cards, headings,
       forms, buttons, tables, tab rails, and mobile shell behavior under
       body.ua-design-v2 while still reading Theme Studio variables.
       Moved ua_extracted_pages.css and ua_program_unified.css into header.php
       so the page rebuild and final unification CSS are loaded once from the
       template head, not injected from footer.php.
       Kept footer.php for runtime guards only: top stats overflow protection,
       accent bridge, dropdown/flyout fixes, and shell scripts.
       8080 QA pages after the change:
       dashboard.php, template_page.php, finance_reports.php, vouchers.php,
       messages_campaigns.php, mikrotik.php, settings_mikrotik.php,
       subscribers.php.
       Result: final CSS loaded once from HEAD, no visible PHP fatal/parse
       warnings, no page-level horizontal overflow, table headers readable on
       V2 pages, and 390px viewport keeps the sidebar off-canvas with content
       at full width.

Still intentionally not force-migrated
--------------------------------------
- template_page.php remains the Theme Studio/controller page.
- pay_invoice.php remains customer/payment safe.
- vouchers_print.php and vouchers_print_select.php remain print-safe until paper QA.
- bootstrap.php and embed_bootstrap.php are bootstrap helpers, not normal pages.

QA checklist
------------
- Run php -l on touched PHP files.
- Open desktop and narrow viewport.
- Check no overlapped labels/buttons.
- Check table row height and horizontal scroll.
- Check dropdowns remain above content and RTL aligned.

[Phase 2]
- Extracted static in-page <style> blocks from 20 header-driven PHP pages into assets/css/ua_extracted_pages.css.
- Reduced PHP files with <style> blocks from 30 to 10; remaining files are special/API/print/widget/dynamic-style cases.
- Added central utility classes and page-family token bridge to assets/css/ua_program_unified.css.
- Converted simple inline style attributes in the cleaned pages into central classes.
- Reduced inline style attributes from 317 to 255.
- Converted subscribers_edit.php fallback confirmation dialog from inline JavaScript styling to reusable central classes.
- Converted subscribers_view.php status dot from inline dynamic background to class-based status tokens.
- Full php -l syntax pass completed successfully.
