/* ============================================
   Shared Styles for Root Pages
   Consolidates inline CSS previously duplicated
   across index.html, login.html, register.html, plans.php
   ============================================ */

/* --- Base Layout --- */
#appCapsule {
    padding-top: 0px;
    padding-bottom: 58px;
}

html, body {
    font-family: Bangla472, "Helvetica Neue", Helvetica, sans-serif;
    background: #c2ffdd !important;
    height: 100% !important;
}

body {
    background-color: #ffffff !important;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 0px;
}

/* --- Typography --- */
label {
    color: #00d094;
    margin-bottom: 1px;
    font-size: 13px;
}

.site-logo {
    height: 30px;
}

.small-font-sm {
    color: #333;
    font-size: 10px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.small-font {
    color: #333;
    font-size: 12px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.small-font-lg {
    color: #333;
    font-size: 14px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.mid-font-sm { font-size: 18px; }
.mid-font { font-size: 20px; }
.mid-font-lg { font-size: 22px; }

.report-title {
    clear: both;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
}

.think-font {
    font-family: 'open sans', arial, sans-serif !important;
}

/* --- Backgrounds & Colors --- */
.bg-light {
    background-color: #cdffef !important;
}

.bg-dark {
    background: linear-gradient(90deg, #28c76f 11.2%, #198754 78.9%) !important;
}

.bg-dark-alt {
    background: linear-gradient(270deg, #28c76f 11.2%, #198754 78.9%) !important;
}

.text-primary {
    color: #00d094 !important;
}

.text-primary-light {
    color: #00805b !important;
}

.text-blue { color: #006de2 !important; }
.text-green { color: #0f9113 !important; }
.text-orange-light { color: #ffb300 !important; }
.text-orange { color: #ea6900 !important; }
.text-aqua { color: #0bc6f5 !important; }
.text-yellow { color: #f5de0b !important; }
.text-pink { color: #ff2492 !important; }
.text-red { color: #f50b0b !important; }
.text-purple { color: #d60bf5 !important; }

/* --- Gradient Backgrounds --- */
.bg-gr-red {
    background: linear-gradient(to left, #ff3737, #ff0808);
}

.bg-gr-orange {
    background: linear-gradient(to left, #FFC837, #FF8008);
}

.bg-gr-green-light {
    background: linear-gradient(to left, #93F9B9, #1D976C);
}

.bg-gr-green-light-alt {
    background: linear-gradient(to right, #93F9B9, #1D976C);
}

.bg-gr-violet {
    background: linear-gradient(to left, #eaafc8, #654ea3);
}

.bg-gr-navy {
    background: linear-gradient(270deg, rgba(0, 32, 52, 1) 0%, rgba(0, 78, 126, 1) 100%) !important;
    color: #fff;
}

.bg-gr-orange-dark {
    background: linear-gradient(270deg, rgb(52 26 0) 0%, rgb(126 71 0) 100%) !important;
    color: #ffe6ab !important;
}

.glass-bg {
    background: rgba(0, 208, 148, 0%);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* --- Card Styles --- */
.card {
    background: radial-gradient(circle at -8.9% 51.2%, rgb(19, 30, 37) 24.5%, rgb(19, 30, 37) 66%);
    border-radius: 10px;
}

.bg-primary {
    background-color: #00D094 !important;
    background: #00D094 !important;
    color: #ffffff;
}

.cmn-btn,
.btn--base {
    background-color: #00D094;
    color: #ffffff;
}

.cmn-btn:hover,
.cmn-btn:focus,
.cmn-btn:active,
.btn--base:hover,
.btn--base:focus,
.btn--base:active {
    background-color: #007b58;
    color: #ffffff;
}

.bg--white {
    background-color: #003123 !important;
}

h1, h2, h3, h4, h5, h6 {
    color: #ffffff;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

p, li {
    font-size: 16px;
    color: #00d094;
    line-height: 1.7;
    margin: 0;
}

.bg--primary {
    background-color: #00d094 !important;
}

.bg--success {
    background-color: #00d094 !important;
}

a:hover {
    color: #ffffff;
}

.widget-three__icon .svg-inline--fa,
.widget-two__icon .svg-inline--fa {
    font-size: 42px !important;
    color: #fff;
}

.widget-three {
    padding: 20px 20px;
}

.text--primary {
    color: #00d094 !important;
}

.table th {
    background-color: #00d094;
    color: #fff;
}

.input-group-text {
    color: #ffffff;
}

/* --- Buttons --- */
.btn-primary {
    color: #fff !important;
    background-color: #00d094;
    border-color: #00d094;
}

.btn-success {
    color: #fff !important;
    background-color: #00d094;
    border-color: #00d094;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    color: #fff !important;
    background-color: #0A9981;
    border-color: #0A9981;
}

.border-primary {
    border-color: #00d094 !important;
}

.btn.btn-mini {
    padding: 3px 10px;
    font-size: .6rem;
}

/* --- Cards & Layout --- */
.balance-card-2 {
    margin-top: -25px;
    margin-bottom: -25px;
    margin-right: -4px;
    height: 85px;
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
}

.rounded {
    border-radius: 10px !important;
}

.card-box {
    margin: auto;
    background-color: #cdffef !important;
    border-radius: 10px !important;
    text-align: center !important;
    width: 54px;
    height: 54px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 11px -4px rgba(0, 0, 0, 0.25);
}

.card-box > i {
    padding: 5px;
    font-size: 30px;
    background: linear-gradient(90deg, rgb(58 246 192) 0%, rgba(144, 247, 218, 1) 50%, rgba(0, 208, 148, 1) 50%, rgba(0, 208, 148, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    vertical-align: text-bottom;
}

.list-group-item {
    color: #ffffff;
    text-decoration: none;
    background-color: #061412;
    border: 1px solid rgba(0, 0, 0, .125) !important;
}

/* --- Navigation --- */
.nav-icon i {
    color: #ffffff;
    font-size: 22px;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 5px;
    padding-bottom: 0;
    transition: 0.3s;
}

.active i,
.nav-icon i:hover,
.nav-icon i:focus,
.nav-icon i:active {
    color: #54ffce;
    font-size: 22px;
}

.navbar2 {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.fixed-bottom2 {
    position: fixed;
    right: 0;
    bottom: 52px;
    left: 0;
    z-index: 1030;
}

.bottom-nav {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.navbar > .container,
.navbar > .container-fluid,
.navbar > .container-lg,
.navbar > .container-md,
.navbar > .container-sm,
.navbar > .container-xl,
.navbar > .container-xxl {
    display: initial;
    justify-content: space-evenly;
    align-items: center;
    align-content: center;
}

.navbar {
    padding-top: 5px;
    padding-bottom: 0;
}

.btm-nav {
    border-radius: 30px 30px 0 0;
}

.bottom-nav-icon {
    height: 30px;
    width: 30px;
    filter: invert(100);
}

.active > .bottom-nav-icon,
.active > p {
    filter: brightness(0) saturate(100%) invert(77%) sepia(30%) saturate(717%) hue-rotate(106deg) brightness(105%) contrast(106%);
}

/* --- Forms & Inputs --- */
.form-control:focus {
    background-color: #fff !important;
}

.input-group-text {
    background-color: #00d094;
    border: 1px solid #00d094;
    border-radius: 30px;
}

/* --- Modals --- */
.modal-content {
    border: 2px solid #223548;
    border-radius: 10px;
}

.modal-header {
    padding: 6px 10px;
    border-bottom: 1px solid #223548;
}

.modal-body {
    padding: 6px;
    color: #fff;
}

.modal-footer {
    padding: 3px 4px;
    border-top: 1px solid #223548;
}

.btn-close {
    width: 9px;
    height: 9px;
    margin-right: 0px !important;
    color: #ffffff;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/10px auto no-repeat;
    background-color: red;
    border-radius: 50%;
}

/* --- Pagination --- */
.page-item.active .page-link {
    background-color: #00d094;
    border-color: #00d094;
}

/* --- SweetAlert2 Custom Overrides --- */
div:where(.swal2-container) div:where(.swal2-popup) {
    border: 1px solid #3b3a3a !important;
    background: #000000c7 !important;
    color: #ffffff !important;
}

div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
    background-color: #0A9981 !important;
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0) !important;
    width: 120px !important;
}