/* ==============================================
   CUSTOM THEME - TEAL (#008080) VARIATIONS
   ============================================== */

/* Base Theme Variables */

/* :root {
    --primary-color: #1577F3;
    --primary-light: #35A2F7;
    --primary-dark: #11125c;
    --primary-hover: #2492F5;
    --primary-gray: #EAF4F7;

    --primary-gradient: linear-gradient(135deg,
            #1577F3 0%,
            #1AA7D8 50%,
            #11125c 100%); */

/* ==========================================
       PRIMARY TRANSPARENT
       ========================================== */
/* --primary-bg-5: rgba(21, 119, 243, 0.05);
    --primary-bg-10: rgba(21, 119, 243, 0.10);
    --primary-bg-15: rgba(21, 119, 243, 0.15);
    --primary-bg-20: rgba(21, 119, 243, 0.20);
    --primary-bg-30: rgba(21, 119, 243, 0.30);

    --text-primary: #FFFFFF;
    --text-secondary: #EEF9FA;
    --text-muted: rgba(255, 255, 255, .75);
} */

:root {
    /* ==========================================
       PRIMARY PALETTE
       ========================================== */
       /* Aiijiro */
    --primary-light: #ECF6F8;
    /* Morning Glory */
    --primary-color: #8DC7D7;
    /* Iceberg Blue */
    --primary-dark: #2ea4c5;
    /* Blizzard Blue */
    --primary-hover: #C9E5EC;
    /* Gray */
    --primary-gray: #ECF6F8;

    /* ==========================================
       GRADIENT
       ========================================== */
    --primary-gradient: linear-gradient(135deg,
            #ECF6F8 0%,
            #C9E5EC 40%,
            #7dc3d7 70%,
            #1582a1 100%);

    /* ==========================================
       PRIMARY TRANSPARENT
       ========================================== */
    --primary-bg-5: rgba(141, 199, 215, 0.05);
    --primary-bg-10: rgba(141, 199, 215, 0.10);
    --primary-bg-15: rgba(141, 199, 215, 0.15);
    --primary-bg-20: rgba(141, 199, 215, 0.20);
    --primary-bg-30: rgba(141, 199, 215, 0.30);

    /* ==========================================
       PALETTE COLORS
       ========================================== */
    --aiijiro: #ECF6F8;
    --blizzard-blue: #C9E5EC;
    --morning-glory: #8DC7D7;
    --iceberg-blue: #60B1C7;

    /* ==========================================
       TEXT
       ========================================== */
    --text-primary: #FFFFFF;
    --text-secondary: #F4FAFB;
    --text-muted: rgba(255, 255, 255, .75);
    --text-dark: #032b37;
}

/* Topbar Styling */
.skin-medboard .topbar {
    /* background: var(--primary-color); */
    background: var(--primary-gradient);
}

.skin-medboard .topbar-title {
    color: var(--text-dark);
}

.skin-medboard .topbar .top-navbar .navbar-header .navbar-brand .dark-logo {
    display: none;
}

.skin-medboard .topbar .top-navbar .navbar-header .navbar-brand .light-logo {
    display: inline-block;
    color: var(--text-primary);
    font-weight: 500;
}

/* Sidebar Navigation */
.skin-medboard .sidebar-nav ul li a.active,
.skin-medboard .sidebar-nav ul li a:hover {
    color: var(--text-dark);
    background-color: var(--primary-bg-10);
    transition: all 0.3s ease;
}

.skin-medboard .sidebar-nav ul li a.active i,
.skin-medboard .sidebar-nav ul li a:hover i {
    color: var(--primary-color);
}

.skin-medboard .sidebar-nav>ul>li.active>a {
    color: var(--primary-color);
    border-color: var(--primary-color) !important;
    background-color: var(--primary-bg-10);
    font-weight: 500;
}

.skin-medboard .sidebar-nav>ul>li.active>a i {
    color: var(--primary-color);
}

/* Breadcrumb Styling */
.skin-medboard .page-titles .breadcrumb .breadcrumb-item.active {
    color: var(--primary-color);
    font-weight: 500;
}

@media screen and (min-width: 900px) {
    .topbar .top-navbar .navbar-header {
        background: rgba(0, 0, 0, 0);
        line-height: 65px;
        padding-left: 10px;
        min-width: 70px;
        left: 0;
        right: 0;
        margin: auto;
        position: absolute;
    }
}

/* Button Styling */
.btn-medboard {
    color: #fff;
    background-color: var(--primary-color);
    background: var(--primary-gradient);
    border-color: var(--primary-color);
    border-radius: 6px;
    font-weight: 500;
    padding: 8px 20px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 128, 128, 0.2);
}

.btn-medboard:hover {
    background-color: var(--primary-hover);
    background: var(--primary-gradient);
    border-color: var(--primary-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 128, 128, 0.3);
}

.btn-medboard:focus,
.btn-medboard.focus {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(0, 128, 128, 0.25);
}

.btn-medboard:active,
.btn-medboard.active {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* Footer Styling */
.skin-medboard .footer {
    background: var(--primary-dark);
}

/* Secondary Button Variant */
.btn-medboard-outline {
    color: var(--primary-color);
    background-color: transparent;
    border: 2px solid var(--primary-color);
    border-radius: 6px;
    font-weight: 500;
    padding: 8px 20px;
    transition: all 0.3s ease;
}

.btn-medboard-outline:hover {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 128, 128, 0.2);
}

@media (max-width: 767px) {
    .topbar .top-navbar .navbar-header {
        background: rgba(0, 0, 0, 0);
        line-height: 65px;
        padding-left: 10px;
        min-width: 70px;
    }
}

/* Login Card Styling */
.card-login {
    border-radius: 30px;
    box-shadow: 0 10px 30px rgba(0, 128, 128, 0.1);
    border: 1px solid rgba(0, 128, 128, 0.1);
    overflow: hidden;
}

.card-login .card-header {
    background: var(--primary-gradient);
    color: white;
    border-bottom: none;
}

/* Form Material Styling */
.form-material .form-control,
.form-material .form-control.focus,
.form-material .form-focus-medboard:focus {
    background-image: -webkit-gradient(linear, left top, left bottom, from(var(--primary-color)), to(var(--primary-color))),
        -webkit-gradient(linear, left top, left bottom, from(#e9ecef), to(#e9ecef));
    background-image: -webkit-linear-gradient(var(--primary-color), var(--primary-color)),
        -webkit-linear-gradient(#e9ecef, #e9ecef);
    background-image: -o-linear-gradient(var(--primary-color), var(--primary-color)),
        -o-linear-gradient(#e9ecef, #e9ecef);
    background-image: linear-gradient(var(--primary-color), var(--primary-color)),
        linear-gradient(#e9ecef, #e9ecef);
    border: 0 none;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    float: none;
    transition: all 0.3s ease;
}

.form-material .form-control:focus {
    background-image: -webkit-gradient(linear, left top, left bottom, from(var(--primary-color)), to(var(--primary-color))),
        -webkit-gradient(linear, left top, left bottom, from(#e9ecef), to(#e9ecef));
    background-image: -webkit-linear-gradient(var(--primary-color), var(--primary-color)),
        -webkit-linear-gradient(#e9ecef, #e9ecef);
    box-shadow: 0 2px 4px rgba(0, 128, 128, 0.2);
}

/* Background Colors */
.bg-baseform {
    background: #f0f8f8;
    background: linear-gradient(145deg, #f0f8f8 0%, #e8f4f4 100%);
}

.bg-medboard {
    background: var(--primary-color);
}

.bg-medboard-light {
    background: var(--primary-light);
}

.bg-medboard-dark {
    background: var(--primary-dark);
}

.bg-medboard-gradient {
    background: var(--primary-gradient);
}

.bg-gray {
    background: var(--primary-gray);
}

/* Text Colors */
.text-medboard {
    color: var(--primary-color) !important;
}

.text-medboard-light {
    color: var(--primary-light) !important;
}

.text-medboard-dark {
    color: var(--primary-dark) !important;
}

.text-whatsappmerah {
    color: #ab8ce4;
}

/* ==============================================
   ADDITIONAL UI COMPONENTS
   ============================================== */

/* Pagination Styling */
.page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.page-link {
    color: var(--primary-color);
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

.page-link:hover {
    color: white;
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-1px);
}

.page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 128, 128, 0.25);
}

/* Link Styling */
a {
    color: var(--primary-color);
    transition: all 0.3s ease;
}

a:hover {
    color: var(--primary-hover);
    text-decoration: none;
}

/* ==============================================
   BOOTSTRAP OVERRIDES - BUTTONS & PAGINATION ONLY
   ============================================== */

/* Override Bootstrap Primary Button */
.btn-primary {
    color: #fff !important;
    background-color: var(--primary-color) !important;
    background: linear-gradient(var(--primary-color), var(--primary-dark)) !important;
    border-color: var(--primary-color) !important;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 128, 128, 0.2);
}

.btn-primary:hover {
    color: var(--text-dark) !important;
    background-color: var(--primary-hover) !important;
    background: var(--primary-dark) !important;
    border-color: var(--primary-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 128, 128, 0.3);
}

.btn-primary:focus,
.btn-primary.focus {
    color: #fff !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 128, 128, 0.25) !important;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
    color: #fff !important;
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: #fff !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    opacity: 0.65;
}

/* Override Bootstrap Outline Primary Button */
.btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background-color: transparent !important;
    transition: all 0.3s ease;
}

.btn-outline-primary:hover {
    color: #fff !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 128, 128, 0.2);
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 128, 128, 0.25) !important;
}

.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show>.btn-outline-primary.dropdown-toggle {
    color: #fff !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Override Bootstrap Pagination */
.page-item.active .page-link {
    z-index: 3;
    color: #fff !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.page-link {
    color: var(--primary-color) !important;
    transition: all 0.3s ease;
}

.page-link:hover {
    z-index: 2;
    color: #fff !important;
    text-decoration: none;
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    transform: translateY(-1px);
}

.page-link:focus {
    z-index: 3;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 128, 128, 0.25) !important;
}

/* Fix scroll glitch on horizontal-nav layout:
   custom.min.js adds .fixed-sidebar to body when scrollTop > 80px,
   which makes .left-sidebar position:fixed and removes it from document flow,
   causing page height to shrink and scroll position to jump back — creating a loop. */
body.horizontal-nav.fixed-sidebar .left-sidebar {
    position: relative !important;
}