* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
background:
linear-gradient(
135deg,
#f8fafc 0%,
#f4f7fb 100%
);
color: #14213d;
}
.app {
min-height: 100vh;
display: flex;
}
/* =========================================================
SIDEBAR
========================================================= */
.sidebar {
width: 265px;
position: fixed;
left: 0;
top: 0;
bottom: 0;
padding: 25px 16px;
display: flex;
flex-direction: column;
color: white;
background:
radial-gradient(
circle at 15% 0%,
#123d65 0,
transparent 35%
),
linear-gradient(
160deg,
#06182d,
#092b4b 55%,
#06172b
);
border-right: 1px solid
rgba(255,255,255,.08);
}
.brand {
display: flex;
align-items: center;
gap: 11px;
padding: 4px 8px 34px;
}
.logo {
width: 49px;
height: 49px;
flex-shrink: 0;
}
.brand-name {
font-size: 23px;
font-weight: 700;
letter-spacing: -1px;
}
.brand-product {
margin-top: 3px;
font-size: 10px;
font-weight: 800;
letter-spacing: 1px;
color: #1cc48b;
}
.navigation {
display: flex;
flex-direction: column;
gap: 6px;
}
.nav-item {
height: 49px;
display: flex;
align-items: center;
gap: 13px;
padding: 0 15px;
border-radius: 11px;
color: #c5d0df;
font-size: 14px;
font-weight: 500;
}
.nav-item.active {
color: white;
background:
linear-gradient(
90deg,
#087ad0,
#20b978
);
box-shadow:
0 7px 22px
rgba(0,120,190,.25);
}
.nav-icon {
width: 22px;
text-align: center;
font-size: 17px;
}
.sidebar-bottom {
margin-top: auto;
padding: 17px;
border-radius: 12px;
background:
rgba(255,255,255,.035);
border: 1px solid
rgba(255,255,255,.14);
}
.scanner-status {
display: flex;
align-items: center;
gap: 10px;
}
.online-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: #16c784;
box-shadow:
0 0 0 4px
rgba(22,199,132,.12);
}
.scanner-title {
font-size: 12px;
font-weight: 700;
}
.scanner-subtitle {
margin-top: 3px;
color: #7f93aa;
font-size: 10px;
}
.sidebar-divider {
height: 1px;
margin: 16px 0;
background:
rgba(255,255,255,.10);
}
.sidebar-label {
color: #70859d;
font-size: 9px;
font-weight: 800;
letter-spacing: .8px;
}
.sidebar-scan {
margin-top: 7px;
font-size: 11px;
font-weight: 600;
}
.auto-refresh {
color: #a9bacd;
font-size: 10px;
}
/* =========================================================
MAIN
========================================================= */
.main {
margin-left: 265px;
width: calc(100% - 265px);
padding: 36px 30px;
max-width: 1800px;
}
/* =========================================================
HEADER
========================================================= */
.topbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 23px;
}
.eyebrow {
color: #0675c6;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.2px;
}
h1 {
margin: 5px 0 4px;
color: #10203d;
font-size: 31px;
font-weight: 750;
letter-spacing: -1.2px;
}
.subtitle {
margin: 0;
color: #71839b;
font-size: 13px;
}
.topbar-right {
display: flex;
align-items: center;
gap: 17px;
}
.scan-box {
display: flex;
align-items: center;
gap: 10px;
}
.scan-icon {
width: 39px;
height: 39px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #1478d0;
background: #e7f2ff;
}
.scan-label {
color: #8090a5;
font-size: 9px;
font-weight: 800;
letter-spacing: .7px;
}
.scan-value {
margin-top: 4px;
color: #253550;
font-size: 11px;
font-weight: 650;
}
.run-button {
border: 0;
border-radius: 9px;
padding: 11px 17px;
color: white;
background:
linear-gradient(
90deg,
#087bd1,
#19b977
);
font-size: 11px;
font-weight: 750;
cursor: pointer;
box-shadow:
0 5px 16px
rgba(0,130,180,.20);
}
/* =========================================================
ACTION PANEL
========================================================= */
.action-panel {
display: flex;
align-items: center;
gap: 14px;
padding: 15px 17px;
margin-bottom: 20px;
border: 1px solid #f5cda2;
border-radius: 13px;
background:
linear-gradient(
90deg,
#fffaf3,
#fffdf9
);
}
.action-warning-icon {
width: 37px;
height: 37px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
color: white;
background:
linear-gradient(
135deg,
#ff8a00,
#f56b00
);
font-weight: 800;
}
.action-content {
flex: 1;
}
.action-title {
color: #eb6500;
font-size: 10px;
font-weight: 850;
letter-spacing: .7px;
}
.action-main {
margin-top: 3px;
color: #26344c;
font-size: 12px;
}
.action-description {
margin-top: 3px;
color: #66778d;
font-size: 10px;
}
.action-button {
border: 1px solid #f0b475;
border-radius: 8px;
padding: 9px 13px;
color: #df6800;
background: white;
font-size: 10px;
font-weight: 750;
cursor: pointer;
}
.action-button span {
margin-left: 6px;
}
/* =========================================================
KPI CARDS
========================================================= */
.cards {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 15px;
}
.card {
display: flex;
align-items: center;
gap: 13px;
min-height: 104px;
padding: 17px;
border: 1px solid #e4eaf1;
border-radius: 14px;
background: rgba(255,255,255,.88);
box-shadow:
0 5px 20px
rgba(23,48,80,.045);
}
.card-icon {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
font-size: 20px;
font-weight: 700;
}
.card-icon.purple {
color: #6941d9;
background: #f0eaff;
}
.card-icon.green {
color: #0d9b66;
background: #e5f8f0;
}
.card-icon.orange {
color: #ed7b00;
background: #fff0db;
}
.card-icon.blue {
color: #1677d2;
background: #e7f1ff;
}
.card-label {
color: #8292a8;
font-size: 9px;
font-weight: 800;
letter-spacing: .8px;
}
.card-value {
margin-top: 4px;
color: #14213d;
font-size: 29px;
font-weight: 800;
}
.card-description {
margin-top: 1px;
color: #728299;
font-size: 10px;
}
.orange-text {
color: #e67b00 !important;
}
/* =========================================================
SECTIONS
========================================================= */
.section {
margin-top: 28px;
}
.section-heading {
margin-bottom: 11px;
}
.section-heading h2,
.panel-heading h2,
.inventory-header h2 {
margin: 0;
color: #182842;
font-size: 17px;
font-weight: 750;
}
.section-heading p,
.panel-heading p,
.inventory-header p {
margin: 4px 0 0;
color: #8493a8;
font-size: 10px;
}
/* =========================================================
ENVIRONMENTS
========================================================= */
.environment-grid {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 15px;
}
.environment-card {
min-height: 103px;
padding: 16px;
border-radius: 12px;
border: 1px solid;
background: white;
}
.blue-env {
border-color: #cfe5fa;
background:
linear-gradient(
120deg,
#f8fcff,
#eef7ff
);
}
.orange-env {
border-color: #f4ddbc;
background:
linear-gradient(
120deg,
#fffdf8,
#fff7ec
);
}
.red-env {
border-color: #f2d1d8;
background:
linear-gradient(
120deg,
#fffafa,
#fff2f4
);
}
.environment-top {
display: flex;
justify-content: space-between;
align-items: center;
}
.environment-title {
font-size: 12px;
font-weight: 800;
}
.blue-env .environment-title {
color: #176fd0;
}
.orange-env .environment-title {
color: #df7100;
}
.red-env .environment-title {
color: #c31f43;
}
.environment-healthy,
.environment-warning {
padding: 5px 9px;
border-radius: 20px;
font-size: 9px;
font-weight: 750;
}
.environment-healthy {
color: #168458;
background: #dcf8ea;
}
.environment-warning {
color: #c72d48;
background: #ffe1e7;
}
.environment-count {
margin-top: 8px;
color: #15243e;
font-size: 29px;
font-weight: 800;
}
.environment-bottom {
display: flex;
justify-content: space-between;
align-items: center;
color: #7d8da2;
font-size: 10px;
}
.environment-arrow {
font-size: 19px;
}
/* =========================================================
LOWER SECTION
========================================================= */
.lower-section {
display: grid;
grid-template-columns:
290px minmax(0, 1fr);
gap: 15px;
margin-top: 28px;
}
.lifecycle-panel,
.inventory-panel {
min-width: 0;
border: 1px solid #e4eaf1;
border-radius: 14px;
background: white;
box-shadow:
0 5px 20px
rgba(23,48,80,.04);
}
.lifecycle-panel {
padding: 17px;
}
.timeline {
margin-top: 22px;
}
.timeline-item {
display: flex;
gap: 11px;
}
.timeline-marker {
width: 29px;
height: 29px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
font-size: 14px;
}
.blue-marker {
color: #1677d2;
background: #e5f1ff;
}
.orange-marker {
color: #e97900;
background: #fff0dc;
}
.timeline-content {
flex: 1;
}
.timeline-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.timeline-title-row strong {
font-size: 11px;
color: #263650;
}
.timeline-badge {
padding: 4px 6px;
border-radius: 5px;
font-size: 7px;
font-weight: 800;
}
.timeline-badge.standard {
color: #1669ce;
background: #e6f0ff;
}
.timeline-badge.extended {
color: #dc7100;
background: #fff0dc;
}
.timeline-eol {
margin-top: 10px;
color: #65768c;
font-size: 10px;
}
.timeline-days {
margin-top: 6px;
color: #169463;
font-size: 10px;
font-weight: 750;
}
.timeline-description {
margin-top: 7px;
color: #66768a;
font-size: 9px;
}
.timeline-line {
width: 1px;
height: 25px;
margin-left: 14px;
background: #dbe4ee;
}
/* =========================================================
INVENTORY
========================================================= */
.inventory-panel {
overflow: hidden;
}
.inventory-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 15px;
padding: 17px 17px 13px;
}
.controls {
display: flex;
gap: 7px;
}
.controls input,
.controls select {
height: 34px;
border: 1px solid #dce4ed;
border-radius: 8px;
outline: none;
background: white;
color: #35455d;
font-size: 10px;
}
.controls input {
width: 190px;
padding: 0 10px;
}
.controls select {
padding: 0 9px;
}
.table-container {
overflow-x: auto;
}
table {
width: 100%;
min-width: 1050px;
border-collapse: collapse;
}
thead {
background: #f7f9fc;
}
th {
padding: 10px 11px;
text-align: left;
color: #8b99aa;
font-size: 8px;
font-weight: 800;
letter-spacing: .65px;
white-space: nowrap;
}
td {
padding: 11px;
border-top: 1px solid #edf1f5;
color: #52637a;
font-size: 9px;
white-space: nowrap;
}
tbody tr:hover {
background: #fbfdff;
}
.cluster-name {
max-width: 240px;
overflow: hidden;
text-overflow: ellipsis;
color: #263650;
font-size: 10px;
font-weight: 700;
}
.account-id {
margin-top: 2px;
color: #a0adbc;
font-size: 8px;
}
.environment-pill {
display: inline-block;
padding: 4px 7px;
border-radius: 20px;
font-size: 7px;
font-weight: 800;
}
.environment-pill.dev {
color: #176fcf;
background: #e7f2ff;
}
.environment-pill.staging {
color: #d97500;
background: #fff1dc;
}
.environment-pill.prod {
color: #c32546;
background: #ffe4e9;
}
.version-pill {
display: inline-block;
padding: 4px 7px;
border: 1px solid #cfe1f5;
border-radius: 20px;
color: #176fcf;
background: #f2f8ff;
font-weight: 750;
}
.version-pill.old-version {
color: #d87500;
border-color: #f4d4ad;
background: #fff8ed;
}
.badge {
display: inline-block;
padding: 4px 7px;
border-radius: 20px;
font-size: 7px;
font-weight: 800;
}
.badge.standard {
color: #158157;
background: #e3f8ee;
}
.badge.extended {
color: #d56e00;
background: #fff0dc;
}
.badge.critical {
color: #c32343;
background: #ffe2e8;
}
.countdown {
display: inline-block;
padding: 4px 7px;
border-radius: 20px;
font-size: 8px;
font-weight: 750;
}
.supported-countdown {
color: #16875b;
background: #e3f8ee;
}
.extended-countdown {
color: #d86f00;
background: #fff0dc;
}
.risk {
font-size: 9px;
font-weight: 700;
}
.risk.healthy {
color: #15905c;
}
.risk.upgrade {
color: #dc7500;
}
.risk.critical-risk {
color: #d32244;
}
.table-footer {
padding: 11px 15px;
border-top: 1px solid #edf1f5;
color: #8a99aa;
font-size: 9px;
}
/* =========================================================
FOOTER
========================================================= */
footer {
margin-top: 28px;
padding: 17px 0;
border-top: 1px solid #e1e8f0;
color: #91a0b2;
font-size: 9px;
}
footer span {
margin: 0 5px;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1200px) {
.cards {
grid-template-columns:
repeat(2, 1fr);
}
.lower-section {
grid-template-columns: 1fr;
}
}
@media (max-width: 800px) {
.sidebar {
display: none;
}
.main {
width: 100%;
margin-left: 0;
padding: 22px 15px;
}
.topbar {
align-items: flex-start;
flex-direction: column;
gap: 15px;
}
.topbar-right {
width: 100%;
justify-content: space-between;
}
.environment-grid {
grid-template-columns: 1fr;
}
.cards {
grid-template-columns: 1fr;
}
.inventory-header {
align-items: flex-start;
flex-direction: column;
}
.controls {
width: 100%;
flex-wrap: wrap;
}
}