body{
    background:#f4f7fb;
    /* font-family:"Segoe UI",sans-serif; */
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    overflow-x:hidden;
    font-size:16px;
    color: #0f3233;

}

/* =========================
   SIDEBAR
========================= */

.sidebar{
    width:260px;
    min-height:100vh;
    background:#011e25;
    position:fixed;
    top:0;
    left:0;
    z-index:1050;
    transition:all .3s ease;
}

.sidebar.collapsed{
    width:80px;
}

.sidebar .navbar-brand{
    font-size:24px;
    font-weight:700;
    color:#fff;
}

.sidebar .nav-link{
    color:#d1d5db;
    padding:14px 18px;
    border-radius:12px;
    margin-bottom:8px;
    display:flex;
    align-items:center;
    gap:12px;
    transition:.3s;
}

.sidebar .nav-link:hover{
    background:#123d3e;
    color:#fff;
}

.sidebar .nav-link.active{
    background:#0f3233;
    color:#fff;
}

.sidebar .nav-link i{
    font-size:20px;
}

.sidebar.collapsed .menu-text,
.sidebar.collapsed .brand-text{
    display:none;
}

.sidebar.collapsed .nav-link{
    justify-content:center;
}

/* =========================
   MAIN CONTENT
========================= */

.main-content{
    margin-left:260px;
    transition:.3s;
    min-height:100vh;
}

.main-content.expanded{
    margin-left:80px;
}

/* =========================
   TOPBAR
========================= */

.topbar{
    background:#fff;
    border-radius:18px;
    padding:20px;
    box-shadow:0 4px 12px rgba(0,0,0,0.05);
}

/* =========================
   CARDS
========================= */

.dashboard-card{
    border:none;
    border-radius:20px;
    box-shadow:0 5px 15px rgba(0,0,0,0.05);
    transition:.3s;
}

.dashboard-card:hover{
    transform:translateY(-4px);
}

.icon-box{
    width:60px;
    height:60px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:26px;
}

.bg-blue{
    background:#2563eb;
}

.bg-green{
    background:#10b981;
}

.bg-orange{
    background:#f59e0b;
}

.bg-red{
    background:#ef4444;
}

/* =========================
   TABLE
========================= */

.table-card{
    border:none;
    border-radius:20px;
    box-shadow:0 5px 15px rgba(0,0,0,0.05);
}

/* =========================
   TOGGLE BUTTON
========================= */

.toggle-btn{
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:#16333b;
    color:#fff;
    font-size:20px;
}

/* =========================
   OVERLAY
========================= */

.overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.5);
    z-index:1040;
    display:none;
}

.overlay.show{
    display:block;
}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

    .sidebar{
        left:-260px;
    }

    .sidebar.mobile-show{
        left:0;
    }

    .main-content{
        margin-left:0;
    }

    .main-content.expanded{
        margin-left:0;
    }

}

/* =========================
   LOGIN PAGE
========================= */

.login-page{
    background:
    linear-gradient(
        135deg,
        #111827 0%,
        #1f2937 100%
    );

    font-family:"Segoe UI",sans-serif;
    min-height:100vh;
}

/* =========================
   LOGIN SECTION
========================= */

.login-section{
    min-height:100vh;
}

/* =========================
   LOGIN CARD
========================= */

.login-card{

    background:#fff;

    border-radius:24px;

    padding:40px 35px;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.15);

    transition:.3s;
}

.login-card:hover{

    transform:translateY(-2px);
}

/* =========================
   LOGIN LOGO
========================= */

.login-logo{

    width:80px;

    height:80px;

    background:#0f3233;

    color:#fff;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    margin:0 auto 20px;
}

/* =========================
   TITLES
========================= */

.login-title{

    font-size:28px !important;

    font-weight:700;

    color:#111827;

    margin-bottom:8px;
}

.login-subtitle{

    color:#6b7280;

    margin-bottom:0;
}

/* =========================
   LABELS
========================= */

.login-label{

    font-weight:600;

    color:#374151;

    margin-bottom:8px;
}

/* =========================
   INPUT GROUP
========================= */

.login-input-group{

    border-radius:14px;

    overflow:hidden;

    border:1px solid #d1d5db;

    transition:.3s;
}

.login-input-group:focus-within{

    border-color:#2563eb;

    box-shadow:
    0 0 0 4px rgba(37,99,235,0.1);
}

/* LEFT ICON */

.login-input-group .input-group-text{

    background:#f9fafb;

    border:none;

    color:#6b7280;

    padding:14px 16px;
}

/* INPUT */

.login-input{

    border:none;

    padding:14px 16px;

    font-size:15px;

    box-shadow:none !important;
}

/* =========================
   FORGOT PASSWORD
========================= */

.forgot-link{

    text-decoration:none;

    font-size:14px;

    font-weight:500;

    color:#2563eb;
}

.forgot-link:hover{

    text-decoration:underline;
}

/* =========================
   LOGIN BUTTON
========================= */

.login-btn{

    background:#2563eb;

    border:none;

    border-radius:14px;

    padding:14px;

    font-size:16px;

    font-weight:600;

    transition:.3s;
}

.login-btn:hover{

    background:#153642;

    transform:translateY(-1px);
}

/* =========================
   MESSAGE BOX
========================= */

.alert{

    border-radius:14px;
}

/* =========================
   MOBILE RESPONSIVE
========================= */

@media(max-width:768px){

    .login-card{

        padding:30px 25px;
    }

    .login-title{

        font-size:24px;
    }

    .login-logo{

        width:70px;

        height:70px;

        font-size:28px;
    }

}

@media(max-width:480px){

    .login-card{

        padding:25px 20px;
    }

}

/* =========================
   FILTER CARD
========================= */

.filter-card{
    border:none;
    border-radius:20px;
    box-shadow:0 5px 15px rgba(0,0,0,0.05);
}

/* =========================
   CUSTOM INPUT
========================= */

.custom-input{
    border-radius:12px;
    padding:12px 14px;
    border:1px solid #d1d5db;
    box-shadow:none !important;
}

.custom-input:focus{
    border-color:#2563eb;
    box-shadow:0 0 0 4px rgba(37,99,235,0.1) !important;
}

/* =========================
   USER AVATAR
========================= */

.user-avatar{
    width:38px;
    height:38px;
    border-radius:50%;
    background:#2563eb;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
    font-size:14px;
}

/* =========================
   TABLE BUTTONS
========================= */

.table .btn{
    border-radius:10px;
}

/* =========================
   MOBILE TABLE
========================= */

@media(max-width:768px){

    .table th,
    .table td{
        white-space:nowrap;
    }

}
/* =========================
   COLLAPSED SIDEBAR FIX
========================= */

.sidebar.collapsed{
    width:80px;
}

.sidebar.collapsed .menu-text,
.sidebar.collapsed .brand-text{
    display:none;
}

.sidebar.collapsed .nav-link{
    justify-content:center;
}

.main-content.expanded{
    margin-left:80px;
}

/* Professional API Cards */
.api-card {
    border: none;
    border-radius: 20px;
    transition: all 0.3s ease;
    background: #fff;
}

.api-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
}

.api-icon {
    transition: all 0.3s ease;
    
    --bs-text-opacity: 1;
    color: rgb(1 30 37) !important;
}

.api-card:hover .api-icon {
    transform: scale(1.08);
    background: #0f3233 !important;
    color: white !important;
}

h1, h2, h3, h4, h5{
    font-size: 1.1rem !important;
}

.api_card {
    background: #eaf3fe;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

}

.btn-primary{
    background: rgb(15, 50, 51) !important;
}

.btn-primary:hover{
    background: #1a5658 !important;
}

.text-end{
    font-size: x-large;
    color:#989898 !important;
}

.dashboard-card {
    text-align: center;
}

/* .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 2px 2px !important;
    margin: 0 6px !important;
    color: #173f4e !important;
    text-decoration: none;
} */

.modal-custom {
    max-width: 50%;
}

.modal-content {
    border-radius: 12px;
}

@media (max-width: 768px) {
    .modal-custom {
        max-width: 95%;
    }
}