/* ═══════════════════════════════════════════════════════════════════════
   MAIN.CSS — Sri Ranga Sentinel
   ───────────────────────────────────────────────────────────────────────
   Single entry point. Replace your two old <link> tags:

     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='style-alien-2030.css') }}">

   with ONE:

     <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">

   and keep the whole css/ folder next to it on your static path.

   WHY @import AND NOT 17 <link> TAGS
   Using @import here keeps the HTML unchanged (one link tag) while still
   giving you 18 small, independently-editable files on disk. If you'd
   rather avoid the extra @import network round-trips in production,
   concatenate these files (in this exact order) into one build step —
   order matters, see below — or add 18 <link> tags in this order instead
   of importing them from here.

   LOAD ORDER — DO NOT REORDER THESE IMPORTS
   1. Tokens must load first (everything else consumes their variables).
   2. Base reset/global structure next (element defaults, DPI, a11y).
   3–5. Shared chrome + components (header/tabnav, forms, modals/tables) —
        used by every tab, so they must exist before tab files style them.
   6–16. One file per tab, in the same left-to-right order as the tab bar.
   17. (reserved for any future shared override)
   18. Global responsive overrides — MUST load last. Several breakpoints
       here intentionally override base rules declared in the tab files
       (6–16); if this were loaded earlier, an unrelated tab file's plain
       rule would win the cascade over this file's conditional rule at
       the very widths it's supposed to apply to.
═══════════════════════════════════════════════════════════════════════ */

@import url('./01-tokens-theme.css?v=11');
@import url('./02-base-reset.css?v=10');
@import url('./03-header-tabnav.css?v=7');
@import url('./04-forms-buttons.css?v=7');
@import url('./05-modals-toasts-tables.css?v=6');

@import url('./06-tab-topology.css?v=23');
@import url('./07-tab-dashboard-health.css?v=6');
@import url('./08-tab-alerts.css?v=7');
@import url('./09-tab-traffic-reports.css?v=5');
@import url('./10-tab-discovery.css?v=5');
@import url('./11-tab-vpn.css?v=5');
@import url('./12-tab-security-wazuh.css?v=9');
@import url('./13-tab-metrics-iperf.css?v=8');
@import url('./14-tab-config-backup.css?v=6');
@import url('./15-tab-syslog.css?v=8');
@import url('./16-tab-multisite.css?v=21');

@import url('./18-responsive-global.css?v=12');
@import url('./19-layout-consistency.css?v=5');
@import url('./20-mobile-tab-fixes.css?v=10');

/* 21 — Secure Connectivity Command Center (VPN tab redesign). Loaded
   LAST and on purpose: it re-skins classes already styled by
   11-tab-vpn.css and needs to win the cascade over the generic
   responsive overrides in 18-20 at the widths where they'd otherwise
   conflict with the new workspace layout. Fully scoped under #tab-vpn —
   see the file header for why this is safe to load globally. */
@import url('./21-connectivity-command-center.css?v=6');

/* 22 — Topology Navigator (multi-site site-by-site navigation, delete,
   and Super Admin site-access UI). Loaded last for the same reason as
   21 above: it only adds new selectors (nav arrows, site pill, delete
   modal, site-access modal) so load order relative to 02-20 doesn't
   matter for correctness, but loading after 21 keeps every "new feature"
   stylesheet grouped at the end of the cascade by convention. */
@import url('./22-gateway-mode.css?v=6');
@import url('./23-topology-navigator.css?v=6');

/* 24 — Configuration Management Center (Config Backup tab redesign:
   Executive Dashboard, Compliance Center, Inventory, Version Explorer,
   Change Detection, Diff Analysis, Restore/Rollback, Policy Management,
   Credential Vault, Storage Analytics, Search Engine, Audit Timeline).
   Loaded last for the same reason as 21/22/23: it only adds new
   selectors scoped under #tab-config-backup and re-skins a handful of
   existing .cb-* classes already styled by 14-tab-config-backup.css,
   so it needs to win the cascade at shared widths. */
@import url('./24-config-mgmt-center.css?v=5');

/* 25 — Network Performance Command Center (Performance tab redesign:
   Executive Dashboard, Health Score, SLA Monitoring, Capacity Planning,
   Historical Dashboards, WAN Path Diagnostics, Enterprise Alerting,
   Multi-Site Analytics). Loaded last for the same reason as 21-24: it
   only adds new selectors scoped under #tab-metrics .npcc-enterprise and
   composes with (never overrides) 13-tab-metrics-iperf.css. */
@import url('./25-performance-command-center.css?v=4');
/* 26 — Tab-scoped Reset / Refresh header dropdowns. Loaded last for the
   same reason as 21-24: only adds new selectors scoped under
   #tab-reset-menu / #tab-refresh-menu, re-using .delete-all-menu /
   .opt-check from 04/08 rather than restyling them. */
@import url('./26-tab-reset-refresh.css?v=2');
@import url('./27-dashboard-noc.css?v=3');
/* 28 — Alert Command Center (Alerts tab redesign: Executive Alert
   Summary, Real-Time Incident Stream enhancements, Incident
   Investigation panel, Alert Analytics Center, Incident Operations,
   Enterprise Alert Intelligence). Loaded last for the same reason as
   21-25: it only adds new selectors scoped under #tab-alerts .acc-*
   and never redeclares an existing 08-tab-alerts.css rule, so load
   order relative to 02-20 doesn't matter for correctness — grouped at
   the end of the cascade by the same convention as every other
   command-center redesign in this file. */
@import url('./28-alert-command-center.css?v=6');
@import url('./29-traffic-intelligence.css?v=9');
/* 30 — Devices tab redesign (Device Operations Center). Same convention:
   additive only, scoped under #tab-devices .dcc-*, never redeclares an
   existing rule from 02-20 or 05, so load order doesn't matter here
   either. */
@import url('./30-devices-command-center.css?v=6');
/* 31 — Hero-card header treatment for the Dashboard + Devices
   "Intelligence Command Center" headers, matching the Performance tab's
   header look. Scoped to #tab-dashboard/#tab-devices only — the shared
   .cc-header class itself (used elsewhere, e.g. Alerts) is untouched. */
@import url('./31-command-center-headers.css?v=29');
@import url('./32-reports-command-center.css?v=11');
@import url('./33-health-command-center.css?v=17');
@import url('./34-discovery-command-center.css?v=5');
@import url('./35-syslog-command-center.css?v=6');
@import url('./36-topology-command-center.css?v=15');
/* 37 — Security Intelligence Command Center (Security/Wazuh tab redesign).
   New, self-contained, scoped entirely under #tab-security. Loaded last
   so it never has to fight cascade order with 12-tab-security-wazuh.css;
   it only adds new .sec-* classes and never redeclares anything from
   that file. */
@import url('./37-security-command-center.css?v=11');
/* Security tab Phase 2 — sub-navigation, analytics charts, agent lifecycle dialogs (loads after 37 so it can build on it) */
@import url('./38-security-phase2.css?v=3');