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

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
/* Sidebar background and width */
.sidebar-offcanvas {
    background-color:green !important;
    width: 240px;
    color: #eebbc3;
    min-height: 100vh;
    border-right: 1px solid #121629;
}

    /* Sidebar links */
    .sidebar-offcanvas .nav-link {
        color: #eebbc3;
        font-weight: 500;
        padding: 12px 24px;
        border-radius: 0 20px 20px 0;
        margin-bottom: 4px;
        transition: background 0.2s, color 0.2s;
    }

        /* Active and hover states */
        .sidebar-offcanvas .nav-link.active,
        .sidebar-offcanvas .nav-link:focus,
        .sidebar-offcanvas .nav-link:hover {
            background-color: #393e6c;
            color: #fff;
        }

        /* Dropdown toggle indicator */
        .sidebar-offcanvas .nav-link.collapsed::after {
            content: " ▼";
            font-size: 0.8em;
            float: right;
            color: #eebbc3;
            transition: transform 0.2s;
        }

        .sidebar-offcanvas .nav-link[aria-expanded="true"]::after {
            transform: rotate(-180deg);
        }

    /* Dropdown items */
    .sidebar-offcanvas .btn-toggle-nav .nav-link {
        color: #b8c1ec;
        background: none;
        padding-left: 40px;
        border-radius: 0 16px 16px 0;
    }

        .sidebar-offcanvas .btn-toggle-nav .nav-link:hover {
            color: #fff;
            background-color: #232946;
        }

    /* Remove default list styles for dropdown */
    .sidebar-offcanvas .btn-toggle-nav {
        margin-bottom: 8px;
    }

    /* Optional: style the login partial if needed */
    .sidebar-offcanvas .nav-item .nav-link,
    .sidebar-offcanvas .nav-item[style] {
        color: #eebbc3 !important;
    }
/* Navbar background gradient and shadow */
.navbar {
    background: linear-gradient(90deg, green 0%, #393e6c 100%) !important;
    box-shadow: 0 2px 8px rgba(35,41,70,0.08);
}

/* Center the brand and adjust font */
.navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-left: auto;
    margin-right: auto;
    text-transform: uppercase;
}

    /* Brand color highlights */
    .navbar-brand span:first-child {
        color: #eebbc3;
    }

    .navbar-brand span:last-child {
        color: #b8c1ec;
    }

/* Navbar links */
.navbar-nav .nav-link {
    color: #eebbc3 !important;
    font-weight: 500;
    margin: 0 8px;
    transition: color 0.2s, background 0.2s;
    border-radius: 4px;
}

    /* Active and hover states for links */
    .navbar-nav .nav-link.active,
    .navbar-nav .nav-link:focus,
    .navbar-nav .nav-link:hover {
        color: #fff !important;
        background: #393e6c;
    }

/* Navbar toggler (hamburger) color */
.navbar-light .navbar-toggler {
    border-color: #b8c1ec;
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(187,187,255, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .navbar-brand {
        font-size: 1.2rem;
    }

    .navbar-nav .nav-link {
        margin: 4px 0;
    }
}
#telerik-drawer-container {
    min-height: 100vh;
    background: #232946;
}

.k-drawer .k-drawer-item {
    color: #eebbc3;
}

    .k-drawer .k-drawer-item.k-state-selected,
    .k-drawer .k-drawer-item:hover {
        background: #393e6c;
        color: #fff;
    }