/* ============================================================================
   dash-mockup.css — Phase 6 Step 4: make the live dashboard match the approved
   FlyWP mockup (.design-research/_mockups/dashboard.html).
   Scoped to #view-dashboard so nothing else is touched. Reversible (one <link>).

   The live dashboard duplicated panels that already have dedicated pages
   (uptime→/monitoring, bandwidth→/bandwidth, ssl→/ssl, db/redis tiles→their pages,
   docker→/sites). Per the approved decision ("exactly like the mockup, move
   extra panels to their own pages") we hide those duplicates here — the
   features are NOT removed, just no longer repeated on the dashboard.
   ============================================================================ */

/* --- 4 flat stat cards (was 6 with colored top-accent bars) --------------- */
body.shell-appbar #view-dashboard #stat-strip{
  grid-template-columns:repeat(4,1fr);
  gap:var(--s-4,16px);
  margin-bottom:var(--s-6,24px);
}
/* flatten: drop the 3px colored top border → flat FlyWP card */
body.shell-appbar #view-dashboard #stat-strip .sc{
  border:1px solid var(--b1);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:var(--s-5,20px);
  cursor:pointer;
}
body.shell-appbar #view-dashboard #stat-strip .sc:hover{background:var(--w);box-shadow:var(--shadow-md);}
/* mockup shows 4 KPIs: Servers · Sites · SSL · Backups. Hide Updates + Docker
   (both reachable elsewhere: updates via servers page, docker via /sites). */
body.shell-appbar #view-dashboard #stat-strip .sc.c4{display:none;}
body.shell-appbar #view-dashboard #stat-strip #kpi-docker-card{display:none !important;}

/* --- hide panels that duplicate dedicated pages -------------------------- */
body.shell-appbar #view-dashboard #dash-uptime-strip{display:none !important;}   /* → /monitoring */
body.shell-appbar #view-dashboard #dash-quick-stats{display:none !important;}    /* → /database,/redis,/bandwidth (inline display:grid) */
body.shell-appbar #view-dashboard .g2{display:none !important;}                  /* Bandwidth + SSL → /bandwidth,/ssl */
body.shell-appbar #view-dashboard #docker-dashboard-analytics{display:none !important;} /* → /sites, /monitoring */
/* the legacy main body (.gw: Sites Overview + gauges) is replaced by the
   mockup body (#dash-mockup-body, built by dashmockup.js). The legacy nodes
   stay in the DOM (still populated by dashboard.js) but hidden. */
body.shell-appbar #view-dashboard .gw{display:none !important;}

/* ============================================================================
   .dm-*  — mockup dashboard body components (Resource chart, Activity, Servers)
   ============================================================================ */
#dash-mockup-body .dm-grid{display:grid;grid-template-columns:2fr 1fr;gap:var(--s-4,16px);align-items:stretch;}
#dash-mockup-body .dm-card{background:var(--w);border:1px solid var(--b1);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--s-5,20px);}
#dash-mockup-body .dm-card-head{display:flex;align-items:center;gap:var(--s-3,12px);margin-bottom:var(--s-4,16px);}
#dash-mockup-body .dm-card-head h3{font-size:15px;font-weight:600;color:var(--t1);}
#dash-mockup-body .dm-card-head .spacer{flex:1;}
#dash-mockup-body .dm-link{font-size:13px;color:var(--t3);cursor:pointer;text-decoration:none;}
#dash-mockup-body .dm-link:hover{color:var(--a);}
#dash-mockup-body .dm-tabs{display:inline-flex;gap:2px;background:var(--bg2);border-radius:var(--radius-sm);padding:3px;}
#dash-mockup-body .dm-tab{padding:3px 10px;border-radius:var(--radius-xs);font-size:12px;font-weight:500;color:var(--t2);cursor:pointer;}
#dash-mockup-body .dm-tab.on{background:var(--w);color:var(--t1);box-shadow:var(--shadow-md);}
#dash-mockup-body .dm-legend{display:flex;gap:16px;font-size:12px;color:var(--t3);margin-top:var(--s-2,8px);}
#dash-mockup-body .dm-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle;}
#dash-mockup-body .dm-activity{display:flex;flex-direction:column;gap:var(--s-3,12px);font-size:13px;}
/* Recent Activity card fills its column height (matches Resource Usage beside it)
   so it never collapses; empty state is centered vertically with an icon. */
#dash-mockup-body .dm-activity-card{display:flex;flex-direction:column;}
#dash-mockup-body .dm-activity-card .dm-activity{flex:1;}
#dash-mockup-body .dm-activity-empty{flex:1;min-height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--t3);text-align:center;}
#dash-mockup-body .dm-activity-empty svg{color:var(--t4,var(--t3));opacity:.7;}
#dash-mockup-body .dm-act{display:flex;gap:10px;align-items:flex-start;}
#dash-mockup-body .dm-act .bdg{margin-top:1px;}
#dash-mockup-body .dm-tbl{width:100%;border-collapse:collapse;}
#dash-mockup-body .dm-tbl thead th{font-size:11px;text-transform:uppercase;font-weight:600;color:var(--t3);text-align:left;padding:10px 18px;background:var(--bg2);}
#dash-mockup-body .dm-tbl tbody td{padding:12px 18px;border-top:1px solid var(--b1);font-size:14px;color:var(--t1);}
#dash-mockup-body .dm-tbl tbody tr:hover td{background:var(--bg2);}
#dash-mockup-body .dm-tbl .row-actions{text-align:right;}
#dash-mockup-body .ip-btn{font-family:var(--mono);font-size:12px;background:var(--bg2);border:1px solid var(--b1);border-radius:var(--radius-xs);padding:2px 8px;cursor:pointer;color:var(--t2);}
/* Status badges in the table: steady (non-pulsing) dots for a clean, professional look across many rows. */
#dash-mockup-body .dm-tbl .bdg .dot{width:7px;height:7px;animation:none;}
/* "Down" status: soft red-tint pill + red dot — clearly reads as offline/problem
   (visible to users) while using the muted red tokens, not a harsh solid red. */
#dash-mockup-body .dm-tbl .bdg.down{background:var(--rb);color:var(--r);border:1px solid var(--rbd);font-weight:600;}
#dash-mockup-body .dm-tbl .bdg.down .dot{background:var(--r);box-shadow:0 0 0 2px var(--rb);animation:dotPulseR 1.4s ease-in-out infinite;}
/* Row-action "open" button: crisp chevron, subtle by default, accent on hover. */
#dash-mockup-body .dm-tbl .dm-row-go{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border-radius:8px;border:1px solid var(--b1);background:var(--w);color:var(--t3);cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease;}
#dash-mockup-body .dm-tbl .dm-row-go:hover{background:var(--ab);border-color:var(--a);color:var(--a);}
#dash-mockup-body .dm-tbl .dm-row-go svg{display:block;}
/* "View all servers" footer under the 5-row table. */
#dash-mockup-body .dm-tbl-foot{display:flex;justify-content:center;padding:12px 18px;border-top:1px solid var(--b1);}
/* Colorful server icon tile before the "Servers" card title (pro SaaS look). */
#dash-mockup-body .dm-srv-ico{position:relative;flex-shrink:0;width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1654d2,#4a82e6);box-shadow:0 2px 5px rgba(22,84,210,.28);}
/* Flat tinted tile for the other card heads. The Servers card already had a
   gradient tile while Resource Usage and Recent Activity had none, so one
   screen carried two different header treatments. This is the same 22px
   geometry, tinted per role, matching `.card-h .ic` elsewhere in the panel. */
#dash-mockup-body .dm-hico{flex-shrink:0;width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;background:var(--ab);color:var(--a);}
#dash-mockup-body .dm-hico svg{width:13px;height:13px;}
#dash-mockup-body .dm-hico.g{background:var(--gb);color:var(--g);}
#dash-mockup-body .dm-srv-ico-dot{position:absolute;right:-2px;bottom:-2px;width:7px;height:7px;border-radius:50%;background:var(--g);border:1.5px solid var(--w);}
/* IP "click to copy" affordance: underline on hover, green flash on copy. */
#dash-mockup-body .ip-btn:hover{text-decoration:underline;}
#dash-mockup-body .ip-btn.copied{border-color:var(--g);color:var(--g);background:var(--gb);}
@media(max-width:900px){
  #dash-mockup-body .dm-grid{grid-template-columns:1fr;}
}

/* --- main content grid: big panel + side column (mockup proportions) ------ */
body.shell-appbar #view-dashboard .gw{
  grid-template-columns:2fr 1fr;
  gap:var(--s-4,16px);
  align-items:start;
}

/* card chrome → mockup card look (flat, even radius) */
body.shell-appbar #view-dashboard .card{
  border:1px solid var(--b1);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* page head spacing to match mockup */
body.shell-appbar #view-dashboard .ph{margin-bottom:var(--s-6,24px);}
/* Dashboard header secondary button (Sync Now) lifts on hover like the primary
   "+ New Site" button (which has translateY(-1px) + shadow). */
#view-dashboard .ph .btn-s:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(22,84,210,.18);}
/* Dashboard page title reads a bit larger so the header row feels like a title
   (kept modest/professional — only on the dashboard). */
#view-dashboard .ph-title,#view-servers .ph-title{font-size:24px;letter-spacing:-.6px;}
#view-dashboard .ph-sub,#view-servers .ph-sub{font-size:13px;margin-top:4px;}

@media(max-width:900px){
  body.shell-appbar #view-dashboard #stat-strip{grid-template-columns:repeat(2,1fr);}
  body.shell-appbar #view-dashboard .gw{grid-template-columns:1fr;}
}

/* Recent Activity's status mark: the dot inside the .bdg had no colour
   anywhere (transparent), so each row led with an empty oval. A small round
   badge with its dot in the badge's own colour. */
#dash-mockup-body .dm-act .bdg{padding:0;width:18px;height:18px;justify-content:center;flex-shrink:0;border-radius:50%;}
#dash-mockup-body .dm-act .bdg .dot{width:7px;height:7px;border-radius:50%;background:currentColor;}

/* Phone (walked at 390px, 24 Oct 2026). */
@media(max-width:768px){
  #dash-mockup-body .dm-tab{min-height:44px;display:inline-flex;align-items:center;}
}
@media(max-width:680px){
  /* Servers card: the filter tabs ran past the card ("Down" cut), and the
     table was clipped by the card with no way to reach Sites, CPU or Status.
     Tabs wrap to their own line; the table keeps Name · Status · open (P10). */
  #dash-mockup-body .dm-card-head{flex-wrap:wrap;}
  #dash-mockup-body .dm-srv-filter{margin-right:0 !important;}
  #dash-mockup-body .dm-tbl :is(th,td:not([colspan])):nth-child(n+2):nth-child(-n+5){display:none;}
  #dash-mockup-body .dm-tbl thead th,#dash-mockup-body .dm-tbl tbody td{padding-left:12px;padding-right:12px;}
}