html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* ---------- AUTH BG (mock gradient) ---------- */
.auth-bg {
    min-height: 100vh;
    background: radial-gradient(1200px 600px at 0% 0%, rgba(53,114,239,0.08) 0%, rgba(53,114,239,0) 60%), radial-gradient(1200px 600px at 100% 100%, rgba(30,200,120,0.10) 0%, rgba(30,200,120,0) 55%), #f6fbf7;
}

/* ---------- CENTER SHELL ---------- */
.auth-shell {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px 16px;
}

/* ---------- CARD ---------- */
.auth-card {
    width: 100%;
    max-width: 560px; /* match mock width */
    background: #fff;
    border-radius: 12px;
    padding: 28px 28px 24px;
    box-shadow: 0 10px 30px rgba(16,24,40,.08);
}

/* ---------- HEADER ---------- */
.auth-header {
    text-align: center;
    margin-bottom: 14px;
}

.auth-logo {
    height: 36px; /* small logo like mock */
    margin-bottom: 8px;
}

.auth-title {
    font-size: 20px;
    margin: 0 0 6px 0;
    color: #0f172a;
    font-weight: 600;
}

/* ---------- SEGMENTED TABS ---------- */
.auth-tabs {
    display: flex;
    background: #eef1f5; /* light track */
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
    margin: 10px auto 16px;
    width: 100%;
    max-width: 420px;
}

    .auth-tabs .tab {
        flex: 1;
        text-align: center;
        padding: 8px 0;
        border-radius: 6px;
        text-decoration: none;
        font-weight: 600;
        font-size: 14px;
        color: #334155;
        background: transparent;
        transition: background .15s ease, color .15s ease, box-shadow .15s ease;
    }

        .auth-tabs .tab.active {
            background: #ffffff;
            color: #0f172a;
            box-shadow: 0 1px 2px rgba(16,24,40,.06);
        }

/* ---------- FORM ---------- */
.auth-form {
    margin-top: 8px;
}

.auth-input {
    height: 44px; /* consistent field height */
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
}

    .auth-input:focus {
        border-color: #9dc0ff;
        box-shadow: 0 0 0 3px rgba(37,140,251,.15);
    }

/* ---------- BUTTON ---------- */
.btn-auth-primary {
    height: 46px;
    border-radius: 8px;
    background: #156ef6; /* bold blue like mock */
    border: 0;
    color: #fff;
    font-weight: 600;
}

    .btn-auth-primary:hover {
        background: #0f62e6;
    }

/* ---------- DEMO PANEL ---------- */
.auth-demo {
    background: #f3f5f8;
    border: 1px solid #eef1f5;
    border-radius: 8px;
    padding: 14px 16px;
    color: #334155;
}

/* Optional: unify Bootstrap label look here */
.form-label {
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
}

/* ====== DASHBOARD LAYOUT ====== */
.dash-bg {
    background: radial-gradient(1000px 500px at 0% 80%, rgba(40,200,120,.08) 0%, rgba(40,200,120,0) 55%), radial-gradient(1000px 500px at 100% 0%, rgba(41,92,255,.07) 0%, rgba(41,92,255,0) 60%), #f7fbf9;
    min-height: 100vh;
}

.dash-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    column-gap: 20px;
    min-height: calc(100vh - 60px);
    padding: 16px;
}

/* Sidebar */
.dash-sidebar {
    background: #ffffff;
    border-right: 1px solid #eef2f6;
    border-radius: 10px;
    padding: 14px 10px;
    height: calc(100vh - 32px);
    position: sticky;
    top: 16px;
}

.dash-nav .item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    margin: 6px 6px;
    border-radius: 10px;
    color: #1f2937;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}

    .dash-nav .item:hover {
        background: #f3f6fb;
    }

    .dash-nav .item.active {
        background: #0d6efd;
        color: #fff;
        font-weight: 600;
    }

/* Main column */
.dash-main {
    padding-right: 6px;
}

/* Top bar */
.dash-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0 12px 0;
}

.welcome {
    color: #64748b;
    font-size: .95rem;
}

/* Title + buttons */
.dash-title {
    font-size: 28px;
    font-weight: 800;
    margin: 0;
}

.btn-badge {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 8px 14px;
    font-weight: 600;
    color: #1f2937;
    background: #fff;
}

    .btn-badge:hover {
        background: #f7f8fb;
    }

/* Cards */
.dash-card {
    border: 1px solid #ecf0f4;
    border-radius: 12px;
    padding: 16px 16px 14px;
}

    .dash-card .h3 {
        font-size: 26px;
    }

/* Panel wrappers */
.dash-panel {
    border: 1px solid #ecf0f4;
    border-radius: 12px;
    padding: 16px;
    background: #fff;
}

.panel-title {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
}

/* Metric cards inside panels */
.metric-card {
    border: 1px solid #ecf0f4;
    border-radius: 12px;
    padding: 14px;
}

/* Simple trend lines (CSS only, match mock look) */
.trend {
    height: 120px;
    border-radius: 10px;
    background: linear-gradient(to right, transparent 0 10px, rgba(13,110,253,.25) 10px 10px) no-repeat;
    position: relative;
    overflow: hidden;
    border: 1px solid #eef2f6;
    background-color: #fff;
}

    .trend:after {
        content: "";
        position: absolute;
        left: 2%;
        right: 2%;
        bottom: 40%;
        height: 3px;
        border-radius: 3px;
    }

.trend-blue:after {
    background: #1d4ed8;
}

.trend-green:after {
    background: #0ea5a0;
}

/* Updates list */
.updates {
    margin-top: 6px;
}

.update {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 4px;
}

    .update .bar {
        width: 4px;
        border-radius: 2px;
        height: 44px;
    }

    .update .content {
        flex: 1;
    }

/* Utility */
.text-secondary {
    color: #64748b !important;
}

/* chip button used in TopRight */
.btn-chip {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 6px 12px;
    font-weight: 600;
}

/* small breathing room inside main column */
.dash-main {
    padding: 0 6px 16px 0; /* top/right/bottom/left */
}