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

/* ===================================
   Base Styles
   =================================== */
html, body {
    margin: 0;
    padding: 0;
    background: #1d1f2b;
    font-family: 'Poppins', sans-serif;
}

.text-muted {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ===================================
   Typography
   =================================== */
.section-title {
    font-size: 4rem;
    font-weight: 800;
}

/* ===================================
   Layout Components
   =================================== */
section {
    padding: 6rem 0;
}

footer {
    height: 300px;
    background-color: #252837;
}

/* ===================================
   Homepage - Hero Section
   =================================== */
div#hero {
    height: calc(100vh - 72px);
    background: #1d1f2b;
}

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

/* ===================================
   Navigation Bar (Homepage)
   =================================== */
nav.navbar {
    padding: 1rem 2rem;
}

#mainNav {
    transition: all 0.3s ease-in-out;
}

#mainNav.bg-transparent {
    background: transparent;
}

.navbar-scroll {
    background: rgba(48, 51, 70, 0.85) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}

/* ===================================
   Dashboard Layout
   =================================== */
.sidebar {
    background: #252837;
}

.sidebar .nav-link i {
    width: 1.5rem;
    font-size: 1.25rem;
}

main#dashboard {
    margin-left: 300px;
    padding: 2rem;
}

main#dashboard .lead {
    color: rgba(255, 255, 255, 0.5);
}

#dashboard .card-body i.bi {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    color: #ffffff;
    border-radius: 10px;
    background: #313246;
    border: 1px solid #303346 !important
}

/* ===================================
   Navigation Pills (Dashboard)
   =================================== */


.nav-pills .nav-link {
    color: rgba(255,255,255,.5) !important;
    font-size: 0.85rem;
    border-radius: 20px;
    padding: 10px 14px;
    font-weight: 500;
}

.nav-pills .nav-link.active {
    background-color: #725dd6;
    border-color: #725dd6;
    color: #ffffff !important;
}

/* ===================================
   Buttons
   =================================== */
.btn {
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 500;
}

.btn-lg {
    padding: 10px 24px;
    font-size: 1rem;
}

.btn-primary {
    background-color: #725dd6;
    border-color: #725dd6;
}

.btn-primary:hover {
    background-color: #4F46E5;
    border-color: #4F46E5;
    color: #ffffff;
}

/* ===================================
   Badges
   =================================== */
.badge.bg-secondary {
    background: rgba(114, 93, 214, 0.20) !important;
    border: 1px solid #725dd6 !important;
    color: rgba(255, 255, 255, 1);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 10px 14px;
}

.badge.bg-primary {
    background-color: #725dd6 !important;
    border-color: #725dd6 !important;
    padding: 10px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* ===================================
   Cards
   =================================== */
.card {
    background: #252837;
    border-radius: 15px;
    height: 100%;
    color: #ffffff;
    border: 1px solid #303346;
    transition: all 0.3s ease;
}

#essential .card {
    background: #252837 !important;
}


.card-header,
.card-footer {
    border-color: #303346 !important;
}

.card-body > div:last-child.border-bottom {
    border-bottom: none !important;
}

.feature-card i {
    color: #725dd6;
}

/* ===================================
   Form Inputs
   =================================== */
.form-control,
.form-select,
textarea.form-control {
    background: #313246;
    border: 1px solid #303346;
    border-radius: 20px;
    color: #ffffff;
    padding: 10px 16px;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    background: #313246;
    border-color: #725dd6;
    color: #ffffff;
    box-shadow: 0 0 0 0.2rem rgba(114, 93, 214, 0.25);
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.input-group-text {
    background: #313246;
    border: 1px solid #303346;
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.5);
}

.input-group .form-control {
    border-top-right-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
}

.input-group:focus-within .input-group-text {
    border-color: #725dd6;
}

.input-group:focus-within .form-control {
    border-color: #725dd6;
    box-shadow: none;
}

/* Form Check Switches */
.form-check-input:checked {
    background-color: #725dd6;
    border-color: #725dd6;
}

.form-check-input:focus {
    border-color: #725dd6;
    box-shadow: 0 0 0 0.2rem rgba(114, 93, 214, 0.25);
}

/* ===================================
   Cards
   ===================================  */

.form-text,
.form-check-label  {
    color: rgba(255, 255, 255, 0.5);
}


/* ===================================
   Modals
   =================================== */
.modal-content {
    background: #252837;
    border: 1px solid #303346;
    border-radius: 15px;
    overflow: hidden;
}

.modal-header, 
.modal-footer {
    border-color: #303346;
    background: transparent;
}

.modal-body {
    color: rgba(255, 255, 255, 0.5);
    background: transparent;
}

/* Collapse arrow rotation */
[data-bs-toggle="collapse"] .collapse-arrow {
    transition: transform 0.3s ease;
}

[data-bs-toggle="collapse"][aria-expanded="true"] .collapse-arrow {
    transform: rotate(90deg);
}

#showcase img {
    border-radius: 20px !important;
    border: 2px solid #303346;
}

/* ===================================
    Bootstrap Overrides
=================================== */

.border,
.border-bottom,
.border-top {
    border-color: #303346 !important;
}