@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
    --tech-bg: #f3f7ff;
    --tech-surface: #ffffff;
    --tech-surface-soft: #f8fbff;
    --tech-border: #d8e4f4;
    --tech-text: #0f1f3a;
    --tech-muted: #60708b;
    --tech-primary: #0b63f3;
    --tech-primary-2: #15a6ff;
    --tech-accent: #00c2a8;
    --tech-shadow: 0 12px 32px rgba(12, 32, 66, .12);
}

html, body{
    font-family: "Space Grotesk", "Segoe UI", "Helvetica Neue", sans-serif !important;
    color: var(--tech-text);
    background:
        radial-gradient(1200px 500px at 120% -20%, rgba(21,166,255,.17), transparent 60%),
        radial-gradient(900px 500px at -10% -20%, rgba(11,99,243,.12), transparent 60%),
        var(--tech-bg);
}

.page-content{
    background: transparent !important;
}

#page-topbar{
    backdrop-filter: blur(10px);
    background: linear-gradient(90deg, #ffffff 0%, #f4f9ff 100%) !important;
    border-bottom: 1px solid var(--tech-border);
    box-shadow: 0 4px 18px rgba(15, 36, 74, .08);
}

.navbar-header{
    border-bottom: 0 !important;
}

.vertical-menu{
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
    border-right: 1px solid var(--tech-border);
    box-shadow: 4px 0 22px rgba(14, 39, 78, .06);
}

.vertical-menu .navbar-brand-box{
    border-bottom: 1px solid var(--tech-border);
    background: linear-gradient(90deg, #f8fbff 0%, #eef6ff 100%);
}

#sidebar-menu ul li a{
    border-radius: 10px;
    margin: 2px 8px;
    transition: all .2s ease;
    color: var(--tech-text) !important;
}

#sidebar-menu ul li a:hover{
    background: linear-gradient(90deg, rgba(11,99,243,.12), rgba(21,166,255,.08));
    transform: translateX(2px);
}

#sidebar-menu .mm-active > a{
    background: linear-gradient(90deg, rgba(11,99,243,.20), rgba(21,166,255,.14));
    color: #0b3f94 !important;
    font-weight: 700;
}

.card{
    border: 1px solid var(--tech-border) !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: var(--tech-shadow) !important;
    overflow: hidden;
}

.card-header{
    background: linear-gradient(90deg, #fbfdff 0%, #f3f8ff 100%) !important;
    border-bottom: 1px solid var(--tech-border) !important;
}

.btn{
    border-radius: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .01em;
}

.btn-primary{
    background: linear-gradient(135deg, var(--tech-primary), var(--tech-primary-2)) !important;
    border-color: var(--tech-primary) !important;
    box-shadow: 0 6px 16px rgba(11,99,243,.28);
}

.btn-success{
    background: linear-gradient(135deg, #01a57a, var(--tech-accent)) !important;
    border-color: #01a57a !important;
    box-shadow: 0 6px 14px rgba(1,165,122,.26);
}

.btn-warning{
    background: linear-gradient(135deg, #ff9f1a, #ffc04d) !important;
    border-color: #ff9f1a !important;
    color: #1f2633 !important;
}

.btn-danger{
    background: linear-gradient(135deg, #e74444, #ff6a6a) !important;
    border-color: #e74444 !important;
}

.table{
    --bs-table-bg: transparent;
}

.table > :not(caption) > * > *{
    border-color: #deebfb !important;
    padding-top: .72rem !important;
    padding-bottom: .72rem !important;
}

.table thead th{
    background: #f3f8ff !important;
    color: #294466 !important;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: 12px;
    font-weight: 700;
}

.table tbody tr:hover{
    background: rgba(11,99,243,.05) !important;
}

.form-control, .form-select{
    border-radius: 10px !important;
    border-color: var(--tech-border) !important;
    background: #fbfdff;
}

.form-control:focus, .form-select:focus{
    border-color: var(--tech-primary) !important;
    box-shadow: 0 0 0 .15rem rgba(11,99,243,.16) !important;
    background: #fff;
}

.dropdown-menu{
    border-radius: 12px !important;
    border: 1px solid var(--tech-border) !important;
    box-shadow: 0 10px 26px rgba(13, 36, 73, .14) !important;
}

.breadcrumb{
    margin-bottom: 0;
}

.badge{
    border-radius: 8px;
}

.footer{
    border-top: 1px solid var(--tech-border);
    background: #fbfdff;
}