@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;
}

/* Choices.js menus must be able to escape the content box when opened. */
.main-content{
    overflow: visible;
}

#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%);
}

.vertical-menu .navbar-brand-box .logo{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.vertical-menu .navbar-brand-box .logo img{
    max-width: 150px;
    width: auto;
    height: auto;
}

.sidebar-search-pro .sidebar-search-trigger{
    border: 1px solid var(--tech-border) !important;
    background: #fbfdff !important;
    color: var(--tech-text) !important;
    cursor: pointer;
}

.sidebar-search-pro .sidebar-search-trigger:focus{
    box-shadow: 0 0 0 .15rem rgba(11,99,243,.16) !important;
}

#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: visible;
}

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

/* Allow Choices.js dropdowns to expand outside cards without being clipped. */
.card .choices,
.card .choices.is-open{
    overflow: visible;
}

.card .choices{
    position: relative;
    z-index: 1;
}

.card .choices.is-open{
    z-index: 40;
}

.card .choices__list--dropdown{
    overflow: visible;
    z-index: 30;
}

.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;
    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;
}

@media (max-width: 991.98px){
    .vertical-menu .navbar-brand-box{
        display: none !important;
    }
}

body[data-sidebar-size="sm"] .vertical-menu .navbar-brand-box{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

body[data-sidebar-size="sm"] .vertical-menu .navbar-brand-box .logo img{
    max-width: 42px;
    max-height: 42px;
    object-fit: contain;
}

body[data-sidebar-size="sm"] .vertical-menu .sidebar-menu-scroll > div:first-child{
    padding: 8px 10px 4px 10px !important;
}

body[data-sidebar-size="sm"] .vertical-menu .sidebar-menu-scroll .input-group{
    justify-content: center;
    position: relative;
}

body[data-sidebar-size="sm"] .vertical-menu .sidebar-menu-scroll .sidebar-search-trigger{
    width: 42px;
    min-width: 42px;
    height: 34px;
    justify-content: center;
    border-radius: 10px !important;
    padding: 0;
}

body[data-sidebar-size="sm"] .vertical-menu .sidebar-menu-scroll #menu-search-pro{
    display: none;
}

body[data-sidebar-size="sm"] .vertical-menu .sidebar-menu-scroll .sidebar-search-pro.is-open #menu-search-pro{
    display: block;
    position: absolute;
    left: 48px;
    top: 0;
    width: 190px;
    z-index: 1005;
    background: #fff;
    border: 1px solid var(--tech-border) !important;
    box-shadow: 0 10px 26px rgba(13, 36, 73, .14);
}

body[data-sidebar-size="sm"] .vertical-menu .sidebar-menu-scroll .sidebar-search-pro.is-open{
    overflow: visible;
}

@media (max-width: 991.98px){
    body[data-sidebar-size="sm"] .vertical-menu .navbar-brand-box{
        display: none !important;
    }
}