/* =========================================================
   Ntanimo Brand Theme Override
   Primary: #F5A623 (amber)  |  Dark: #1C1C1E  |  Bg: #F0F2F5
   ========================================================= */

/* --- 1. CSS Variable Overrides --- */
:root {
    --bs-primary:         #F5A623;
    --bs-primary-rgb:     245, 166, 35;
    --bs-primary-rgba:    245, 166, 35, 0.15;
    --bs-link-color:      #F5A623;
    --bs-link-hover-color:#d48e10;
    --ntanimo-amber:      #F5A623;
    --ntanimo-amber-dark: #d48e10;
    --ntanimo-dark:       #1C1C1E;
    --ntanimo-sidebar-bg: #1C1C1E;
    --ntanimo-page-bg:    #F0F2F5;
}

/* =========================================================
   TOPBAR
   ========================================================= */
header nav.navbar {
    background-color: #F5A623 !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

header nav .burger-btn i {
    color: #1C1C1E !important;
}

header nav .user-dropdown-name,
header nav .dropdown-btn span,
header nav .dropdown-btn {
    color: #1C1C1E !important;
    font-weight: 600;
}

header nav .dropdown-btn .arrow {
    color: #1C1C1E !important;
}

/* Flag image in topbar */
header nav .flag {
    border-radius: 2px;
}

/* =========================================================
   SIDEBAR — Dark theme
   ========================================================= */

/* Sidebar wrapper background */
#sidebar,
#sidebar .sidebar-wrapper {
    background-color: #1C1C1E !important;
}

/* Sidebar scrollbar */
#sidebar .sidebar-wrapper::-webkit-scrollbar-track {
    background: #1C1C1E;
}
#sidebar .sidebar-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 4px;
}

/* --- Topbar height — matches sidebar header exactly --- */
header nav.navbar {
    height: 64px !important;
    min-height: 64px !important;
}

/* --- Logo area: amber background, same height as topbar = seamless band --- */
.sidebar-header {
    background-color: #F5A623 !important;
    padding: 0 !important;
    border-bottom: none !important;
    height: 64px !important;
    min-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden;
}

.sidebar-header .logo {
    padding: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-header .logo a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/*
  Logo PNG is now 853×270 (icon + "ntanimo" text only, no domain, no gap).
  Display at 160px wide → height = 270/853 * 160 = 50px. Fits in 64px header.
*/
.sidebar-header .logo img {
    display: block;
    width: 160px;
    height: auto;
    object-fit: contain;
}

/* --- Sidebar menu area --- */
#sidebar .sidebar-menu {
    padding-top: 8px;
}

/* Section group titles (ADS LISTING, PACKAGE MANAGEMENT, etc.) */
.sidebar-new-title {
    color: #F5A623 !important;
    font-weight: 700 !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
    padding: 14px 16px 4px !important;
    opacity: 0.9;
}

/* Default sidebar link text + icon */
#sidebar .sidebar-item > .sidebar-link {
    color: #C8C8CC !important;
    border-radius: 7px;
    margin: 1px 8px;
    padding: 8px 12px;
}

#sidebar .sidebar-item > .sidebar-link i,
#sidebar .sidebar-item > .sidebar-link .fa,
#sidebar .sidebar-item > .sidebar-link svg {
    color: #888890 !important;
}

/* Hover state */
#sidebar .sidebar-item > .sidebar-link:hover {
    background-color: rgba(245, 166, 35, 0.12) !important;
    color: #F5A623 !important;
}

#sidebar .sidebar-item > .sidebar-link:hover i,
#sidebar .sidebar-item > .sidebar-link:hover .fa {
    color: #F5A623 !important;
}

/* Active / selected item */
#sidebar .sidebar-item.active > .sidebar-link,
#sidebar .sidebar-item > .sidebar-link.active {
    background-color: #F5A623 !important;
    color: #1C1C1E !important;
    border-radius: 7px;
    font-weight: 600;
}

#sidebar .sidebar-item.active > .sidebar-link i,
#sidebar .sidebar-item > .sidebar-link.active i,
#sidebar .sidebar-item.active > .sidebar-link .fa,
#sidebar .sidebar-item > .sidebar-link.active .fa {
    color: #1C1C1E !important;
}

/* =========================================================
   MAIN CONTENT AREA — Off-white background
   ========================================================= */
#main,
#main .page-heading,
.page-content,
.section,
body {
    background-color: #F0F2F5 !important;
}

.page-content {
    background-color: #F0F2F5 !important;
}

/* Cards sit on top of the gray background */
.card {
    background-color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
    border-radius: 10px !important;
}

/* =========================================================
   DASHBOARD STAT CARDS — Replace teal with amber
   ========================================================= */
.total_customer,
.total_customer .svg_icon,
.total_customer .curtain {
    background: #F5A623 !important;
}

.total_customer:hover .svg_icon,
.total_customer:hover .curtain {
    background: #d48e10 !important;
}

.total_customer:hover svg > g > g > path {
    fill: #d48e10 !important;
}

/* Custom fields card — also teal in some builds */
.total_custom_fields,
.total_custom_fields .svg_icon,
.total_custom_fields .curtain {
    background: #F5A623 !important;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn-primary {
    background-color: #F5A623 !important;
    border-color: #F5A623 !important;
    color: #1C1C1E !important;
    font-weight: 600;
}

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

.btn-outline-primary {
    color: #F5A623 !important;
    border-color: #F5A623 !important;
}

.btn-outline-primary:hover {
    background-color: #F5A623 !important;
    color: #1C1C1E !important;
}

/* =========================================================
   FORMS & INPUTS
   ========================================================= */
.form-control:focus,
.form-select:focus {
    border-color: #F5A623 !important;
    box-shadow: 0 0 0 0.2rem rgba(245, 166, 35, 0.2) !important;
}

.form-check-input:checked {
    background-color: #F5A623 !important;
    border-color: #F5A623 !important;
}

/* =========================================================
   BADGES & PILLS
   ========================================================= */
.badge.bg-primary,
.badge.text-bg-primary {
    background-color: #F5A623 !important;
    color: #1C1C1E !important;
}

/* =========================================================
   PAGINATION
   ========================================================= */
.page-item.active .page-link {
    background-color: #F5A623 !important;
    border-color: #F5A623 !important;
    color: #1C1C1E !important;
}

.page-link {
    color: #F5A623 !important;
}

/* =========================================================
   TABS & NAV
   ========================================================= */
.nav-tabs .nav-link.active {
    border-bottom-color: #F5A623 !important;
    color: #F5A623 !important;
}

/* =========================================================
   PROGRESS BARS
   ========================================================= */
.progress-bar {
    background-color: #F5A623 !important;
}

/* =========================================================
   LINKS
   ========================================================= */
a:not(.btn):not(.dropdown-item):not(.sidebar-link):not(.nav-link) {
    color: #F5A623;
}

a:not(.btn):not(.dropdown-item):not(.sidebar-link):not(.nav-link):hover {
    color: #d48e10;
}

/* =========================================================
   LOGIN PAGE
   ========================================================= */
#auth .login_btn {
    background-color: #F5A623 !important;
    border-color: #F5A623 !important;
    color: #1C1C1E !important;
    font-weight: 600 !important;
}

#auth .login_btn:hover {
    background-color: #d48e10 !important;
    border-color: #d48e10 !important;
    color: #fff !important;
}

#auth #auth-box .auth-logo img {
    width: 180px;
    max-height: 80px;
    object-fit: contain;
}

/* =========================================================
   MISC
   ========================================================= */
.card .bg-primary,
.card.bg-primary {
    background-color: #F5A623 !important;
    color: #1C1C1E !important;
}

/* Edit button tint */
.edit_btn {
    background-color: rgba(245, 166, 35, 0.12) !important;
    color: #F5A623 !important;
}

/* Table header sort arrow */
.bootstrap-table .sortable .both::after,
.bootstrap-table .sortable .asc::after,
.bootstrap-table .sortable .desc::after {
    color: #F5A623;
}

/* Dashboard title */
.dashboard_title {
    color: #1C1C1E;
    font-weight: 700;
    font-size: 1.6rem;
}

/* =========================================================
   SIDEBAR SCROLLBAR — hidden
   ========================================================= */
#sidebar .sidebar-wrapper {
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE/Edge */
}
#sidebar .sidebar-wrapper::-webkit-scrollbar {
    display: none;               /* Chrome/Safari */
}

/* =========================================================
   DASHBOARD STAT CARDS
   White by default → amber reveal on hover (curtain wipe)
   Matches the .total_items / .item_for_sale pattern
   ========================================================= */

/* --- total_customer: white default, amber on hover --- */
.total_customer {
    background: #fff !important;
}

.total_customer .svg_icon {
    background: #F5A623 !important;
}

.total_customer .curtain {
    background: #F5A623 !important;
    width: 0 !important;
}

.total_customer:hover .curtain {
    width: 100% !important;
}

.total_customer .total_number,
.total_customer .card_title {
    color: #1C1C1E !important;
    position: relative;
    z-index: 2;
}

/* --- properties_for_rent (Total Custom Fields): replace teal with amber --- */
.properties_for_rent {
    background: #fff !important;
}

.properties_for_rent .svg_icon {
    background: #F5A623 !important;
}

.properties_for_rent .curtain {
    background: #F5A623 !important;
    width: 0 !important;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    transition: width 0.5s cubic-bezier(0.23, 1, 0.320, 1);
    z-index: 0;
}

.properties_for_rent:hover .curtain {
    width: 100% !important;
}

.properties_for_rent .total_number,
.properties_for_rent .card_title {
    color: #1C1C1E !important;
    position: relative;
    z-index: 2;
}

/* Shared: icon + text stay on top of curtain during hover */
.total_customer .svg_icon,
.total_customer .row,
.properties_for_rent .svg_icon,
.properties_for_rent .row {
    position: relative;
    z-index: 2;
}

/* All 4 cards: text turns white on hover */
.total_customer:hover .total_number,
.total_customer:hover .card_title,
.properties_for_rent:hover .total_number,
.properties_for_rent:hover .card_title {
    color: #fff !important;
}