/* =====================================================
SAP FIORI + FORTUNE 500 PMO DASHBOARD
Bootstrap 5.3 Enhancement
===================================================== */

/* ---------- Global ---------- */

body {
background-color: #f5f7fa;
font-family: "Segoe UI", Arial, sans-serif;
color: #32363a;
font-size: 14px;
}

/* ---------- Page Title ---------- */

h2 {
color: #354a5f;
font-weight: 600;
letter-spacing: 0.3px;
}

/* ---------- KPI Cards ---------- */

.card {
border: 1px solid #d9d9d9 !important;
border-radius: 6px;
background: #ffffff;
transition: all 0.2s ease;
}

.card:hover {
box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;
}

.card.shadow-sm {
box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
}

.card-body {
padding: 1.25rem;
}

.card-header {
background: #ffffff !important;
border-bottom: 1px solid #e5e5e5;
font-weight: 600;
color: #354a5f;
}

/* ---------- KPI Labels ---------- */

.text-uppercase {
font-size: 11px;
letter-spacing: 0.8px;
}

.text-muted {
color: #6a6d70 !important;
}

/* ---------- KPI Values ---------- */

.card-body h2 {
font-size: 2rem;
font-weight: 700;
color: #0a6ed1;
}

/* ---------- KPI Links ---------- */

.card-body a {
color: #bb0000;
text-decoration: none;
}

.card-body a:hover {
text-decoration: underline;
}

/* ---------- Tables ---------- */

.table {
margin-bottom: 0;
font-size: 14px;
}

.table thead th {
background: #f7f9fb;
color: #354a5f;
font-weight: 600;
border-bottom: 2px solid #d9d9d9;
white-space: nowrap;
}

.table tbody td {
vertical-align: middle;
border-color: #ececec;
}

.table-hover tbody tr:hover {
background-color: #edf5fc;
}

.table-striped tbody tr:nth-of-type(odd) {
background-color: #fafbfd;
}

/* ---------- Responsive Table ---------- */

.table-responsive {
border-radius: 6px;
}

/* ---------- Numbers ---------- */

.text-end {
font-weight: 600;
}

/* ---------- Dashboard Spacing ---------- */

.container-fluid {
max-width: 1800px;
}

.row.g-3 {
--bs-gutter-x: 1rem;
--bs-gutter-y: 1rem;
}

/* ---------- Enterprise Status Colors ---------- */

.status-active {
color: #107e3e;
}

.status-warning {
color: #e9730c;
}

.status-danger {
color: #bb0000;
}

.status-info {
color: #0a6ed1;
}

/* ---------- Section Headers ---------- */

.card-header h5 {
font-weight: 600;
color: #354a5f;
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {

```
.card-body h2 {
    font-size: 1.7rem;
}

.table {
    font-size: 13px;
}
```

}

/* ---------- Top Navigation ---------- */

.top-nav {
    background-color: #dde0c3;
    padding: 12px 20px;
    border-bottom: 1px solid #c9ccb0;
    font-weight: 600;
}

.top-nav a {
    color: #354a5f;
    text-decoration: none;
    margin: 0 4px;
}

.top-nav a:hover {
    color: #0a6ed1;
    text-decoration: underline;
}