/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    min-height: 100vh;
}

body {
    font-family: 'Open Sans', 'Segoe UI', sans-serif;
    font-size: 14px;
    color: #fff;
    background: #1A2238;
    padding-top: 50px;
    padding-bottom: 20px;
}

a.light-hover {
    color:#5EA9E9; 
}

a.light-hover:hover,
a.light-hover:active,
a.light-hover:focus {
    color: #BCC5DE !important;
}

a.light-hover:hover,
a.undecorated:active,
a.undecorated:focus {
    text-decoration: none;
}

/* ── Utility ── */
.us-none  { user-select: none; -webkit-user-select: none; }
.pos-rel  { position: relative; }
.bl-inline { display: inline-block; }
.mt-0     { margin-top: 0 !important; }
.mt-20    { margin-top: 20px; }
.mt-70    { margin-top: 70px; }
.mt-100   { margin-top: 100px; }
.mb-0     { margin-bottom: 0 !important; }
.mb-20    { margin-bottom: 20px; }
.pt-15    { padding-top: 15px; }
.pb-15    { padding-bottom: 15px; }
.pl-15    { padding-left: 15px; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-danger { color: #FF7979; }

/* ── Color helpers ── */
.offwhite           { color: #BCC5DE; }
.txt-white          { color: #fff; }
.txt-light-warning  { color: #E5CA98; }
.txt-light-success  { color: #75CBB7; }

/* ── Body content ── */
.body-content {
    padding-top: 5px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 60px;
}

/* ── Navbar ── */
.navbar-fixed-top {
    background: #030407;
}

.navbar-fixed-bottom {
    background: linear-gradient(to bottom, rgba(3, 4, 7, 0) 0%, #030407 100%);
    border-top: 1px solid #232e4d;
    box-shadow: 0 -1px 0 #030407;
    color: #BCC5DE;
    min-height: 50px;
    line-height: 50px;
    font-size: 13px;
}

.navbar-inverse {
    background-color: #030407;
    border-color: #232e4d;
}

.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-nav > li > a {
    color: #BCC5DE;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: #fff;
    background: transparent;
}

.navbar-inverse .navbar-nav > li > a.current {
    color: #fff;
    background-color: transparent;
}

/* Logo text in navbar */
.navbar .logo {
    display: inline-block;
    padding: 15px;
    font-size: 18px;
    font-weight: 700;
    color: #fff !important;
    text-decoration: none;
    letter-spacing: 0.03em;
}

/* Info bar below main navbar */
.navbar-info {
    background: #232e4d;
    border-top: 1px solid #303f69;
    padding: 4px 0;
}
.navbar-info h4 { margin: 0; font-size: 13px; }

.btn, a {
    outline: transparent !important;
}

/* ── as-blue button ── */
.btn.as-blue {
    background-color: #337AB7;
    border-color: #2E6DA4;
    color: #fff;
    font-weight: 600;
}
.btn.as-blue:hover,
.btn.as-blue:focus {
    background-color: #286090;
    border-color: #204d74;
    color: #fff;
}
.btn.as-blue:disabled,
.btn.as-blue[disabled] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ── Danger button ── */
.btn--danger {
    background-color: #c0392b;
    border-color: #a93226;
    color: #fff;
    font-weight: 600;
}
.btn--danger:hover,
.btn--danger:focus {
    background-color: #a93226;
    border-color: #922b21;
    color: #fff;
}

/* ── Ghost button ── */
.btn--ghost {
    background-color: transparent;
    border-color: #303F69;
    color: #BCC5DE;
    font-weight: 600;
}
.btn--ghost:hover,
.btn--ghost:focus {
    background-color: #232e4d;
    border-color: #303F69;
    color: #fff;
}

/* ── Primary button alias ── */
.btn--primary { @extend .btn.as-blue; }

/* ── Forms ── */
.form-control {
    border-radius: 3px;
    border-color: #303F69;
    background-color: #0d1221;
    color: #BCC5DE;
    font-family: inherit;
}
.form-control:focus {
    border-color: #337AB7;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.3), 0 0 6px rgba(51,122,183,.4);
    background-color: #0d1221;
    color: #fff;
}
.form-group label { font-weight: 600; color: #BCC5DE; }

/* ── ctrl-set panel ── */
.ctrl-set {
    margin-bottom: 30px;
    background: #1A2238;
}

/* ── offwhite panel (dark themed) ── */
.offwhite-panel {
    background: #1e2a45;
    border: 1px solid #303F69;
    border-radius: 4px;
    padding: 20px;
    color: #BCC5DE;
}

/* ── HR ── */
hr {
    border-color: #303F69;
}

/* ── view-ctrls ── */
.view-ctrls { padding-top: 14px; }

/* ── Loading spinner inside button ── */
.btn.relative { position: relative; }
.loading-spinner {
    display: none;
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
}
.btn.loading .loading-spinner { display: inline-block; }
.btn.loading span { margin-left: 28px; }

/* ── Result table ── */
.result-table { width: 100%; border-collapse: collapse; margin: 16px 0 20px; }
.result-table th,
.result-table td {
    padding: 8px 12px;
    border: 1px solid #303F69;
    font-size: 13px;
    text-align: left;
    color: #BCC5DE;
}
.result-table th {
    background: #232e4d;
    font-weight: 700;
    width: 160px;
    color: #fff;
}
.result-table code {
    font-size: 12px;
    color: #75CBB7;
    background: #0d1221;
    padding: 1px 4px;
    border-radius: 2px;
}

/* ── Uptime metrics ── */
.uptime-metrics { display: flex; gap: 32px; margin-top: 8px; }
.metric-value   { font-size: 1.6rem; font-weight: 700; display: block; }
.metric-label   { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #BCC5DE; }

/* ── Result panels ── */
.result-panel {
    padding: 14px 18px;
    border-radius: 4px;
    margin-bottom: 18px;
    border-left: 4px solid transparent;
}
.result-panel.success {
    background: #1a3a2a;
    border-color: #75CBB7;
    color: #75CBB7;
}
.result-panel.error {
    background: #3a1a1a;
    border-color: #FF7979;
    color: #FF7979;
}
.result-panel .result-code {
    font-family: monospace;
    font-size: 13px;
    margin-top: 4px;
}

/* ── Result card (RestartVmResult) ── */
.result-card {
    padding: 14px 18px;
    border-radius: 4px;
    margin-bottom: 18px;
    border-left: 4px solid transparent;
}
.result-card.status--success {
    background: #1a3a2a;
    border-color: #75CBB7;
    color: #75CBB7;
}
.result-card.status--error {
    background: #3a1a1a;
    border-color: #FF7979;
    color: #FF7979;
}
.result-status { font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.result-message { font-size: 13px; }

/* ── Confirm card (RestartVm) ── */
.confirm-card {
    background: #1e2a45;
    border: 1px solid #303F69;
    border-radius: 4px;
    padding: 20px;
    color: #BCC5DE;
    max-width: 600px;
}
.confirm-card p { color: #BCC5DE; }
.warning-text { color: #E5CA98; font-weight: 600; }

/* ── Action row ── */
.action-row { display: flex; gap: 12px; margin-top: 8px; }

/* ── Page title ── */
.page-title {
    color: #fff;
    margin-bottom: 20px;
}
.page-content { margin-top: 20px; }

/* ── Login page ── */
.login-wrap {
    max-width: 400px;
    margin: 60px auto 0;
}
.login-wrap .panel {
    background: #1e2a45;
    border-color: #303F69;
}
.login-wrap .panel-heading {
    background: #030407;
    border-color: #303F69;
}
.login-wrap .panel-heading h3 {
    margin: 0;
    color: #fff;
}
.login-wrap .panel-body { color: #BCC5DE; }
.login-wrap .alert-danger {
    background: #3a1a1a;
    border-color: #FF7979;
    color: #FF7979;
}
.login-error {
    color: #FF7979;
    font-size: 13px;
    margin-top: 6px;
}

/* ── Dashboard cards ── */
.dash-cards { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px; }
.dash-card {
    flex: 1;
    min-width: 240px;
    background: #1e2a45;
    border: 1px solid #303F69;
    border-radius: 4px;
    padding: 20px;
}
.dash-card h3 { margin-top: 0; color: #fff; }
.dash-card p  { color: #BCC5DE; font-size: 13px; line-height: 1.6; }
.dash-card .btn { margin-top: 8px; }

/* ── Uptime countdown hint ── */
.uptime-hint { font-size: 12px; color: #BCC5DE; margin-top: 10px; }

/* ── w-container widths ── */
.w-container     { width: 100%; }
.w-max-container { max-width: 100%; }