/* ======================================================
   ALBERKA UI — DASHBOARD v1.0 (EXECUTIVE LOCKED)
   Status: Production Safe
====================================================== */

/* ================= GLOBAL ================= */

/* Prevent scrollbar jump + layout shift */
html {
    overflow-y: scroll;
    overflow-anchor: none;
}

html, body {
    height: 100%;
}

body {
    background: #f1f4f9;
    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #1f2937;
    padding-right: 0 !important;
}

/* ================= NAVBAR ================= */

.main-header {
    background: linear-gradient(90deg, #0b1d36, #12294d);
    border-bottom: none;
}

.main-header .navbar-brand span {
    color: #3b82f6 !important;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.main-header .nav-link {
    color: #ffffff !important;
    font-weight: 500;
}

.main-header .nav-link:hover {
    color: #93c5fd !important;
}

/* ================= PAGE HEADER ================= */

.page-header {
    margin-bottom: 1rem;
}

.page-header h4 {
    margin-bottom: 0;
    font-weight: 600;
}

.page-header small {
    color: #6c757d;
}

/* ================= CARDS ================= */

.card,
.al-card {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #e5e9f0;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.06);
}

.al-card {
    padding: 18px;
}

/* Hover (subtle, executive) */
.al-card:hover {
    transform: translateY(-2px);
    transition: all 0.25s ease;
}

/* ================= LAYOUT ================= */

.content-wrapper {
    min-height: calc(100vh - 57px);
    overflow-y: auto;
}

/* ======================================================
   ROW 1 — SUMMARY CARDS (EXECUTIVE)
====================================================== */

.al-summary-card {
    padding: 16px 22px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e5e9f0;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

/* Icons hidden (executive mode) */
.al-summary-card .al-summary-icon {
    display: none;
}

.al-summary-label {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 500;   /* slightly lighter for executive hierarchy */
    letter-spacing: 0.02em;
    text-transform: capitalize;
    color: #6b7280;
    -webkit-font-smoothing: antialiased;   /* ✅ ADD */
}

.al-summary-value {
    margin-top: 6px;
    font-size: 25px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    display: inline-block;   /* ✅ ADD */
}

.al-summary-sub {
    margin-top: 3px;
    font-size: 11px;
    color: #9ca3af;
}

/* Soft semantic backgrounds */
.al-sum-blue   { background: linear-gradient(180deg, #f3f7ff, #ffffff); }
.al-sum-purple{ background: linear-gradient(180deg, #f7f2ff, #ffffff); }
.al-sum-green { background: linear-gradient(180deg, #f1f8f4, #ffffff); }
.al-sum-amber { background: linear-gradient(180deg, #fff8e6, #ffffff); }

.al-sum-amber .al-summary-value {
    font-size: 23px;   /* maintain relative scale */
}

/* ======================================================
   ROW 2 — ALERT CARDS (EXECUTIVE)
====================================================== */

.al-alert-card {
    display: block;
    background: #ffffff;
    border-radius: 18px;
    padding: 18px 20px;
    border: 1px solid #e5e9f0;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    height: 100%;
    text-decoration: none;
    color: #111827;
    transition: all 0.25s ease;
}

.al-alert-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
}

/* Header row */
.al-alert-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

/* Icon */
.al-alert-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    opacity: 0.85;
}

.al-alert-danger  { background: rgba(153, 27, 27, 0.08); color: #991b1b; }
.al-alert-warning { background: rgba(146, 64, 14, 0.10); color: #92400e; }
.al-alert-info    { background: rgba(7, 89, 133, 0.10);  color: #075985; }

/* Executive typography */
.al-alert-title {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #111827;
    -webkit-font-smoothing: antialiased;   /* ✅ ADD */
}

.al-alert-desc {
    font-size: 12px;
    color: #9ca3af;
    line-height: 1.4;
}

.al-alert-count {
    margin-top: 6px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #1f2937;
    font-variant-numeric: tabular-nums;
    display: inline-block;   /* ✅ ADD */
}


/* Kill link coloring */
.al-alert-card *,
.al-alert-card:hover * {
    color: inherit;
}

/* ======================================================
   ROW 3 — ANALYTICS (FIXED HEIGHT)
====================================================== */

.al-card h6.fw-semibold {
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 17px;        /* ← visible increase */
    letter-spacing: 0.01em;
}


/* Chart wrapper */
.al-chart-wrap {
    position: relative;
    width: 100%;
}

/* Unified height — prevents stretching & shaking */
.al-chart-line,
.al-chart-donut {
    height: 220px;
}

/* Ensure canvas obeys container */
.al-chart-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}
