digraph SystemOverview {
    // Graph settings
    rankdir=TB;
    compound=true;
    fontname="Helvetica";
    node [fontname="Helvetica", fontsize=11];
    edge [fontname="Helvetica", fontsize=10];

    // Title
    labelloc="t";
    label="Deskmeter - System Architecture";
    fontsize=16;

    // Styling
    node [shape=box, style="rounded,filled"];

    // Local Machine
    subgraph cluster_local {
        label="Local Machine (Bare Metal)";
        style=filled;
        color="#E8F5E9";
        fillcolor="#E8F5E9";

        dmcore [label="dmcore\n(Workspace Tracker)", fillcolor="#C8E6C9"];
        dmweb_local [label="dmweb\n(Dev Server)", fillcolor="#C8E6C9"];
        dmsync [label="dmsync\n(Change Streams)", fillcolor="#DCEDC8"];
        mongo_local [label="MongoDB\n(Replica Set)", fillcolor="#FFECB3", shape=cylinder];
    }

    // OS Integration
    subgraph cluster_os {
        label="OS Integration";
        style=dashed;
        color=gray;

        wmctrl [label="wmctrl\n(X11 Workspaces)", fillcolor="#E3F2FD"];
        gnome_ext [label="GNOME Extension\n(Panel Indicator)", fillcolor="#E3F2FD"];
    }

    // Remote (AWS)
    subgraph cluster_remote {
        label="AWS EC2 (mcrn.ar)";
        style=filled;
        color="#FFF3E0";
        fillcolor="#FFF3E0";

        subgraph cluster_docker {
            label="Docker Compose";
            style=dashed;
            color="#F57C00";

            dmweb_remote [label="dmweb\n(Flask + Gunicorn)", fillcolor="#FFE0B2"];
            mongo_remote [label="MongoDB\n(Docker)", fillcolor="#FFECB3", shape=cylinder];
        }

        nginx [label="Nginx\n(Gateway)", fillcolor="#BBDEFB"];
    }

    // External
    browser [label="Browser\n(Portfolio Viewer)", fillcolor="#F3E5F5"];

    // Local connections
    wmctrl -> dmcore [label="workspace\ndetection", color="#388E3C"];
    dmcore -> mongo_local [label="write\nswitches", color="#FFA000"];
    dmweb_local -> mongo_local [label="read", style=dashed, color="#666"];
    gnome_ext -> dmweb_local [label="API poll", color="#1976D2", style=dashed];

    // Sync connection
    mongo_local -> dmsync [label="Change\nStreams", color="#7B1FA2"];
    dmsync -> mongo_remote [label="push\nchanges", color="#7B1FA2", style=bold];

    // Remote connections
    dmweb_remote -> mongo_remote [label="read", style=dashed, color="#666"];
    nginx -> dmweb_remote [label="proxy", color="#1976D2"];
    browser -> nginx [label="HTTPS", color="#1976D2"];
}