/* Page-layout glue for cpanel-web. */

/* Border-box reset so a width:100% padded container includes its padding */
*, *::before, *::after { box-sizing: border-box; }

/* Global anchor reset: no stylesheet resets <a>, so links underline without it */
a { text-decoration: none; }

/* Invisible scrollbars everywhere (operator directive): hidden chrome, still scrollable */
* { scrollbar-width: none !important; -ms-overflow-style: none !important; }
*::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }

.cw-cluster { display: flex; align-items: center; gap: var(--c-s-6); min-width: 0; }
.cw-mark { display: inline-flex; }

.cw-mono { font-family: var(--c-font-mono); font-size: 12px; color: var(--c-text); word-break: break-all; }
.cw-idcell { display: inline-flex; align-items: center; gap: var(--c-s-2); min-width: 0; }
/* A long id in a kv row (a 44-char wallet at 390 px overflowed its card by 59 px): the value shrinks and the id truncates with an ellipsis
   while its copy button stays whole. Scoped to kv rows: the one-time key reveal shows its key in full. */
.c-kv > .c-v:has(> .cw-idcell) { flex: 0 1 auto; min-width: 0; }
.c-v > .cw-idcell { max-width: 100%; }
.c-v > .cw-idcell > .cw-mono { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cw-stack { display: flex; flex-direction: column; gap: var(--c-s-8); }
.cw-stack--tight { display: flex; flex-direction: column; gap: var(--c-s-5); }
.cw-row { display: flex; align-items: center; gap: var(--c-s-6); flex-wrap: wrap; }
.cw-between { display: flex; align-items: center; justify-content: space-between; gap: var(--c-s-6); }
.cw-actions { display: flex; gap: var(--c-s-5); flex-wrap: wrap; }
.cw-empty { border: 1px dashed var(--c-line-2); border-radius: var(--c-r-card); padding: 40px; text-align: center; color: var(--c-muted); font-family: var(--c-font-body); font-size: 13px; }

.cw-kicker-rule { display: flex; align-items: center; gap: 14px; margin-bottom: var(--c-s-4); }
.cw-kicker-rule::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
.cw-kicker-n { color: var(--c-faint); }
.cw-kicker-rule .is-p { color: var(--c-brand); }
.cw-kicker-rule .is-r { color: var(--c-danger); }

.cw-sol { display: inline-flex; align-items: center; gap: 7px; font-family: var(--c-font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-faint); }
.cw-sol svg { opacity: .7; }

.cw-center { min-height: 100dvh; display: grid; place-items: center; padding: var(--c-s-10); box-sizing: border-box; }
.cw-authcard { width: 100%; max-width: 380px; }

.cw-shell { display: grid; grid-template-rows: auto 1fr auto; height: 100dvh; min-height: 0; overflow: hidden; background: var(--c-bg); }


.cw-brand { font-family: var(--c-font-display); font-weight: 600; font-size: 17px; letter-spacing: -.01em; color: var(--c-text); display: inline-flex; align-items: baseline; gap: 8px; }
.cw-brand span { font-family: var(--c-font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-faint); }
.cw-overview { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; overflow: hidden; }

.cw-overview .c-stat { padding: var(--c-s-4) var(--c-s-7); }
.cw-overview .c-val { font-size: 17px; }
.cw-overview .c-sub { font-size: 9.5px; }
.cw-ov-lower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--c-s-8); align-items: start; }
.cw-svc-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--c-s-8); align-content: start; }
.cw-svc { display: flex; align-items: center; gap: var(--c-s-4); padding: 3px 0; border-bottom: 1px dashed var(--c-line-soft); }
.cw-svc-name { font-family: var(--c-font-mono); font-size: 12px; color: var(--c-text); }
.cw-svc-rps { font-family: var(--c-font-mono); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--c-muted); white-space: nowrap; }
.cw-svc-st { letter-spacing: .1em; }
.cw-svc-st.is-up { color: var(--c-ok); }
.cw-svc-st.is-down { color: var(--c-danger); }
.cw-svc-st.is-unknown { color: var(--c-faint); }
.c-dot.is-down { background: var(--c-danger); }

.cw-foot { display: flex; align-items: center; gap: var(--c-s-8); height: 46px; flex-shrink: 0; padding: 0 var(--c-s-10); border-top: 1px solid var(--c-line); background: rgb(from var(--c-bg) r g b / .85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-family: var(--c-font-body); font-size: 12px; color: var(--c-faint); white-space: nowrap; overflow-x: auto; }
.cw-foot::-webkit-scrollbar { height: 0; }
.cw-foot-docs { color: var(--c-text); border: 1px solid var(--c-line); border-radius: var(--c-r-ctl); padding: 12px 10px; font-weight: 500; }
.cw-foot-docs:hover { border-color: var(--c-line-2); background: var(--c-surface-2); }

.cw-lnav-links a.is-active { color: var(--c-text); background: var(--c-raised); border-radius: var(--c-r-ctl); padding: 2px 8px; }


.cw-ellip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cw-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: var(--c-s-10); background: var(--c-scrim); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: c-fade var(--c-dur-2) var(--c-ease); }

.cw-reload { position: fixed; right: var(--c-s-8); bottom: var(--c-s-8); z-index: 60; display: flex; align-items: center; gap: var(--c-s-7); animation: c-pop var(--c-dur-2) var(--c-ease); }


.cw-hero { display: flex; flex-direction: column; gap: var(--c-s-6); }

.cw-faint { color: var(--c-faint) !important; }


.cw-login { display: flex; flex-direction: column; gap: var(--c-s-5); margin-top: var(--c-s-6); }
.cw-or { display: flex; align-items: center; gap: var(--c-s-5); }
.cw-or-line { height: 1px; flex: 1; background: var(--c-line); }
.cw-social { display: flex; gap: var(--c-s-5); }
.cw-brandmark { display: inline-flex; align-items: center; }


.cw-spark { width: 100%; height: 90px; display: block; }

@media (max-width: 900px) {
  .c-shell, .cw-shell { height: auto; min-height: 100dvh; overflow: visible; }
  .cw-overview { flex: 0 0 auto; max-height: none; overflow: visible; }
  .cw-ov-lower { grid-template-columns: 1fr; }
  /* min-width:0 stops the grid/flex auto-minimum from inflating these containers */
  .c-main { overflow: visible; min-width: 0; }
  .c-content { overflow: visible; min-width: 0; max-width: 100%; }
  .c-header { overflow-x: auto; }

}


/* fixed under the 56px bar: the bar is overflow-x:auto and would clip an absolute child */
.cw-fleetpop { position: fixed; top: 60px; left: var(--c-s-8); z-index: 90; width: min(920px, calc(100vw - 2 * var(--c-s-8))); max-height: calc(100dvh - 96px); display: none; flex-direction: column; white-space: normal; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--c-r-card); box-shadow: var(--c-shadow-pop); overflow: hidden; }
.cw-fleetpop.is-open { display: flex; animation: c-pop var(--c-dur-2) var(--c-ease); }
.cw-fleetpop .cw-overview { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

@media (max-width: 900px) {
  .cw-fleetpop { left: var(--c-s-4); right: var(--c-s-4); width: auto; }

}