/* ==========================================================================
   Cleanblue reskin — drop-in replacement for style.css
   Target: SolusVM 1.3x client area, "cleanblue" theme
   Install path: /usr/local/solusvm/www/template_assets/client/cleanblue/style.css

   Palette/typography: dark "Node Room" terminal look — carried over from
   an earlier mockup, now reimplemented against the real markup below.

   IMPORTANT — read before installing:
   - This file ONLY replaces style.css. No .tpl files are modified.
   - BACK UP the original style.css first (cp style.css style.css.bak).
   - Selectors were taken directly from your real header.tpl, footer.tpl,
     home.tpl, control.tpl, account.tpl and login.tpl — not guessed.
   - The ".tabber" tab-strip section is still flagged as an assumption —
     tabber.js itself (functions.js / app.bundle.js) wasn't available to
     confirm its generated markup. Search "ASSUMPTION FLAGGED" below.
   - style_ie.css and jquery-ui.css load AFTER this file (see header.tpl
     link order), so jQuery UI dialog rules use higher specificity /
     !important instead of relying on cascade order.
   - vstatus (Online/Offline/Suspended) is rendered with an INLINE
     style="color:#090/#F00/#000" in control.tpl. #000 (black) and #090
     (dark green) are fine on a white background but nearly invisible on
     a dark one — overridden below via attribute selectors + !important,
     since inline styles can only be beaten that way from a stylesheet.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --sv-bg:        #0B0F14;
  --sv-panel:     #12181F;
  --sv-panel-2:   #1A222B;
  --sv-border:    #232C36;
  --sv-text:      #DCE4EC;
  --sv-text-dim:  #7C8894;
  --sv-primary:   #3DDC97;
  --sv-primary-dk:#2FBE80;
  --sv-green:     #3DDC97;
  --sv-green-dk:  #2FBE80;
  --sv-red:       #FF5D5D;
  --sv-amber:     #F0B429;
  --sv-info:      #4FA3FF;
  --sv-radius:    8px;
  --sv-shadow:    0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.35);
}

*{ box-sizing: border-box; }

body{
  background: var(--sv-bg);
  color: var(--sv-text);
  font-family: 'IBM Plex Sans', -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

a{ color: var(--sv-info); text-decoration: none; }
a:hover{ text-decoration: underline; }

strong{ font-weight: 600; }

.mono, h3#overview, h3#login, table.blue thead th, .usagebar #usagebartext{
  font-family: 'IBM Plex Mono', monospace;
}

/* ---------------------------------------------------------------------
   Shell — #container / #wrapper / #content (header.tpl / footer.tpl)
   --------------------------------------------------------------------- */
#container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px 60px;
}
#wrapper{ width: 100%; }
#content{ width: 100%; }

/* Top account bar: #top-box / #top-box-left / #top-box-right (header.tpl) */
#top-box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--sv-panel);
  border: 1px solid var(--sv-border);
  color: var(--sv-text);
  border-radius: var(--sv-radius);
  padding: 16px 22px;
  margin: 20px 0 0;
  box-shadow: var(--sv-shadow);
}
#top-box-left{ font-size: 14px; font-family: 'IBM Plex Mono', monospace; }
#top-box-left strong{ color: var(--sv-primary); }
#top-box-right{ font-size: 12px; color: var(--sv-text-dim); font-family: 'IBM Plex Mono', monospace; }

/* Nav row: #top-menu (cleanblue-specific — plain inline links)
   Distinct tinted panel so it reads as its own nav bar rather than
   blending into the page background beneath #top-box. */
#top-menu{
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  background: var(--sv-panel-2);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius);
  padding: 8px;
  margin: 10px 0 22px;
  box-shadow: var(--sv-shadow);
}
#top-menu a{
  color: var(--sv-primary);
  font-weight: 600;
  font-size: 13px;
  font-family: 'IBM Plex Mono', monospace;
  padding: 8px 14px;
  border-radius: 6px;
}
#top-menu a:hover{
  background: var(--sv-panel);
  color: var(--sv-primary);
  text-decoration: none;
}

/* ---------------------------------------------------------------------
   Panels — #box (used in home.tpl, control.tpl x3, account.tpl)
   --------------------------------------------------------------------- */
#box{
  background: var(--sv-panel);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius);
  box-shadow: var(--sv-shadow);
  padding: 22px 24px;
  margin-bottom: 18px;
}

h3#overview{
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sv-border);
  font-size: 15px;
  font-weight: 600;
  color: var(--sv-text);
}

/* ---------------------------------------------------------------------
   Tables — table.blue (home.tpl VPS list) + table.grey (control.tpl,
   account.tpl detail rows) + table.paginate
   --------------------------------------------------------------------- */
table.blue{
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 4px;
}
table.blue thead th{
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sv-text-dim);
  background: var(--sv-panel-2);
  padding: 10px 12px;
  border-bottom: 1px solid var(--sv-border);
}
table.blue thead th.thin{ width: 28px; }
table.blue tbody td{
  padding: 11px 12px;
  border-bottom: 1px solid var(--sv-border);
  font-size: 13px;
  color: var(--sv-text);
}
table.blue tbody td.thin{ width: 28px; text-align: center; }
table.blue tbody tr:hover td{ background: var(--sv-panel-2); }
table.blue tbody tr:last-child td{ border-bottom: none; }

table.grey{
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 14px;
}
table.grey td{
  padding: 9px 10px;
  border-bottom: 1px solid var(--sv-border);
  font-size: 13px;
  color: var(--sv-text);
  vertical-align: middle;
}
table.grey tr:last-child td{ border-bottom: none; }
td.left{ color: var(--sv-text-dim); }
td.right{ color: var(--sv-text-dim); font-size: 12px; text-align: right; }

table.paginate{ width: 100%; margin: 4px 0 10px; }
table.paginate td.left{ color: var(--sv-text-dim); font-size: 12px; }
table.paginate td.right{ text-align: right; font-size: 12px; }

/* vstatus (Online/Offline/Suspended) — see header note. Inline style
   sets black or dark green, invisible on this dark background, so we
   override by matching the inline value itself. */
table.grey td span[style*="color: #000"]{ color: var(--sv-text-dim) !important; }
table.grey td span[style*="color: #090"]{ color: var(--sv-primary) !important; }
table.grey td span[style*="color: #F00"]{ color: var(--sv-red) !important; }

/* ---------------------------------------------------------------------
   Buttons — .submitbutton / .submitbuttongreen / .smallsubmitbutton
   --------------------------------------------------------------------- */
input.submitbutton,
input.smallsubmitbutton,
input.submitbuttongreen{
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  border: none;
  border-radius: 6px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background .12s ease;
}
input.submitbutton{
  background: var(--sv-primary);
  color: #08160F;
}
input.submitbutton:hover{ background: var(--sv-primary-dk); }

input.submitbuttongreen{
  background: var(--sv-green);
  color: #08160F;
}
input.submitbuttongreen:hover{ background: var(--sv-green-dk); }

input.smallsubmitbutton{
  background: var(--sv-panel-2);
  color: var(--sv-text);
  padding: 6px 12px;
  font-size: 11.5px;
  border: 1px solid var(--sv-border);
}
input.smallsubmitbutton:hover{ background: #222c39; }

/* ---------------------------------------------------------------------
   Forms — .ffield inputs, .grey/.greyauto selects, .checkbox (account.tpl)
   --------------------------------------------------------------------- */
input[type="text"],
input[type="password"],
input.ffield,
select,
textarea{
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--sv-border);
  border-radius: 6px;
  background: var(--sv-panel-2);
  color: var(--sv-text);
}
input[type="text"]:focus,
input[type="password"]:focus,
input.ffield:focus,
select:focus,
textarea:focus{
  outline: none;
  border-color: var(--sv-primary);
  background: var(--sv-panel);
}
select.grey, select.greyauto{
  background: var(--sv-panel-2);
}
input.checkbox{
  width: 15px;
  height: 15px;
  vertical-align: middle;
}
#buttons{ margin-top: 14px; }

/* ---------------------------------------------------------------------
   Usage bars — .usagebar / #usagebar / #usagebartext (control.tpl)
   Note: width % and fill color are set inline by PHP on #usagebar —
   only the track/label are styled here, fill color is left untouched.
   Label uses a text-shadow instead of a solid color so it stays legible
   whether it's sitting over the dark track or the (variably colored)
   fill.
   --------------------------------------------------------------------- */
.usagebar{
  position: relative;
  width: 100%;
  height: 20px;
  background: var(--sv-panel-2);
  border: 1px solid var(--sv-border);
  border-radius: 20px;
  overflow: hidden;
}
.usagebar #usagebar{
  height: 100%;
  border-radius: 20px 0 0 20px;
}
.usagebar #usagebartext{
  position: absolute;
  top: 0; left: 0; right: 0;
  text-align: center;
  line-height: 20px;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  z-index: 2;
}

/* ---------------------------------------------------------------------
   Alert boxes — #errorbox / #successbox / #pxebox
   --------------------------------------------------------------------- */
#errorbox, #successbox, #pxebox{
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 13px;
  margin-bottom: 14px;
}
#errorbox{ background: #2a1416; border: 1px solid #5c2a2a; color: #ff9c92; }
#successbox{ background: #10251c; border: 1px solid #1f5c40; color: #7cf0bb; }
#pxebox{ background: #2a2210; border: 1px solid #5c4a1f; color: #f0cf7c; }

/* ---------------------------------------------------------------------
   Tabbed VPS-control section — .tabber / .tabbertab (control.tpl)
   ASSUMPTION FLAGGED: tabber.js's generated nav markup wasn't visible
   to me (loaded from functions.js / app.bundle.js). Below covers two
   layers:
     1. Baseline: .tabbertab panels always styled sanely even if the
        JS-generated nav classes below don't match your actual build.
     2. Best-guess overrides for the standard jquery.tabber plugin
        (.tabbernav / .tabberactive / .tabbertabhide) — remove or
        correct these once you confirm against the real JS.
   --------------------------------------------------------------------- */
.tabber{ margin-top: 4px; }

.tabbertab{
  border: 1px solid var(--sv-border);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 10px;
  background: var(--sv-panel-2);
}

/* --- best-guess jquery.tabber nav markup, verify against real JS --- */
ul.tabbernav{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 14px;
  padding: 0;
  border-bottom: 1px solid var(--sv-border);
}
ul.tabbernav li{ margin: 0; }
ul.tabbernav li a{
  display: inline-block;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--sv-text-dim);
  border-radius: 6px 6px 0 0;
}
ul.tabbernav li a:hover{ background: var(--sv-panel-2); text-decoration: none; }
ul.tabbernav li.tabberactive a{
  color: var(--sv-primary);
  background: var(--sv-panel-2);
  border-bottom: 2px solid var(--sv-primary);
}
.tabbertabhide{ display: none; }
/* --- end best-guess block --- */

/* ---------------------------------------------------------------------
   jQuery UI dialogs — confirm boxes (#reboot, #boot, #shutdown, etc.)
   These load jquery-ui.css AFTER this file, so specificity is bumped
   here rather than relying on load order.
   --------------------------------------------------------------------- */
#container .ui-dialog{
  border-radius: 10px !important;
  border: 1px solid var(--sv-border) !important;
  background: var(--sv-panel) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.55) !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
}
#container .ui-dialog .ui-dialog-titlebar{
  background: var(--sv-panel-2) !important;
  border: none !important;
  border-bottom: 1px solid var(--sv-border) !important;
  border-radius: 10px 10px 0 0 !important;
  padding: 12px 16px !important;
}
#container .ui-dialog .ui-dialog-title{
  font-weight: 600 !important;
  color: var(--sv-text) !important;
}
#container .ui-dialog .ui-dialog-titlebar-close{
  background: transparent !important;
}
#container .ui-dialog .ui-dialog-content{
  padding: 18px 16px !important;
  font-size: 13px !important;
  color: var(--sv-text) !important;
  background: var(--sv-panel) !important;
}
#container .ui-dialog .ui-dialog-buttonpane{
  border-top: 1px solid var(--sv-border) !important;
  background: var(--sv-panel) !important;
  padding: 10px 16px !important;
}
#container .ui-dialog .ui-dialog-buttonpane button{
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  border-radius: 6px !important;
  padding: 7px 14px !important;
  border: 1px solid var(--sv-border) !important;
  background: var(--sv-primary) !important;
  color: #08160F !important;
}
#container .ui-dialog .ui-dialog-buttonpane button:hover{
  background: var(--sv-primary-dk) !important;
}
.ui-widget-overlay{ background: #000 !important; opacity: .7 !important; }

/* ---------------------------------------------------------------------
   Login page — .login / #loginbox / #login (login.tpl)

   FIX (carried over): login.tpl hardcodes table.login's <td> widths
   inline (width="190" / width="695") plus size="30" on the inputs —
   overridden below with real CSS widths scoped to the login table only.

   LOGO: no logo <img> exists in login.tpl, and .tpl files aren't being
   edited. Added via a background-image block instead — drop a file at
   this path and it appears automatically, no further changes needed:

     /usr/local/solusvm/www/template_assets/client/cleanblue/images/logo.png

   Recommended: ~260px wide, transparent PNG, roughly 2:1 to 3:1
   width:height. If no file is present, the space is just blank — no
   broken-image icon — safe to ship before a logo is ready.
   --------------------------------------------------------------------- */
body:has(#loginbox){
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
#loginbox{
  background: var(--sv-panel);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius);
  box-shadow: var(--sv-shadow);
  padding: 32px 30px;
  width: 380px;
  box-sizing: border-box;
}
#loginbox::before{
  content: "";
  display: block;
  height: 60px;
  margin: 0 auto 20px;
  background: url('images/logo.png') no-repeat center / contain;
}
h3#login{
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sv-border);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  color: var(--sv-text);
}

/* Override login.tpl's inline table/input widths so fields stay
   inside the box instead of overflowing it. */
table.login{
  width: 100% !important;
  table-layout: fixed;
  border-collapse: collapse;
}
table.login td{
  width: auto !important;
  padding: 6px 0;
  color: var(--sv-text);
}
table.login td.left{
  width: 100px !important;
  color: var(--sv-text-dim);
  font-size: 12.5px;
  white-space: nowrap;
}
table.login input[type="text"],
table.login input[type="password"]{
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}
.login input.submitbutton{ width: 100%; margin-top: 6px; }