/* =============================================================================
   TAKMOTION - PREMIUM DASHBOARD THEME
   Absolute Edge-to-Edge Distribution Fix (Final)
   ============================================================================= */

/* 1. Global Layout Force & Typography */
html,
body {
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    font-family: 'Cairo', sans-serif !important;
}

/* Fluid Typography for Dashboard
   NOTE: Uses rem units so values scale with html { font-size: fluid(15px, 16px) }
   clamp(min, preferred, max) — min/max in rem, preferred in vw
*/
h1 {
    font-size: clamp(1.75rem, 3.5vw, 3.375rem) !important;
}

h2 {
    font-size: clamp(1.5rem, 3vw, 3rem) !important;
    line-height: 1.4 !important;
}

h3 {
    font-size: clamp(1.25rem, 2.5vw, 2rem) !important;
    line-height: 1.4;
}

h4 {
    font-size: clamp(1.125rem, 2vw, 2rem) !important;
}

h5 {
    font-weight: 700 !important;
    line-height: 1.5 !important;
    font-size: clamp(1rem, 1.5vw, 1.25rem) !important;
}

h6 {
    font-size: clamp(0.875rem, 1.2vw, 1.25rem) !important;
}

body,
p,
span,
div,
li,
td,
th {
    font-size: clamp(0.75rem, 1.2vw, 1rem); /* 12px → 16px — scales with viewport */
    /* Base dashboard text scaling */
}

p .table th {
    font-weight: 700 !important;
    line-height: 1.5 !important;
    font-size: clamp(0.6875rem, 1vw, 0.9375rem) !important; /* 11px → 15px */
}

.table td {
    font-weight: 500 !important;
    line-height: 1.5;
    font-size: clamp(0.6875rem, 1vw, 0.9375rem) !important; /* 11px → 15px */
}

@media (max-width: 1199.98px) {

    html,
    body {
        height: auto !important;
        overflow-y: auto !important;
        position: relative !important;
    }
}

body .layout-navbar {
    background-color: #263950 !important;
    height: 5.125rem !important; /* 82px / 16 = 5.125rem */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 2500 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    transform: none !important;
}

/* FORCED FLEX DISTRIBUTION (Edge-to-Edge) */
#navbar-inner-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 4.5rem !important; /* 72px / 16 = 4.5rem */
    margin: 0 !important;
}

@media (max-width: 1199.98px) {
    #navbar-inner-container {
        padding: 0 1rem !important; /* 16px */
    }
}

/* Ensure Center Search is Centered relative to Content Area (Desktop Only) */
@media (min-width: 1200px) {
    .navbar-brand {
        flex: 0 0 17.375rem !important; /* 278px / 16 = 17.375rem */
        display: flex !important;
        justify-content: flex-start !important;
        padding-inline-start: 2.625rem !important; /* 42px / 16 */
        margin: 0 !important;
    }

    .navbar-nav-center {
        position: static !important;
        transform: none !important;
        flex: 1 !important;
        display: flex !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    .navbar-nav-right {
        flex: 0 0 17.375rem !important; /* 278px / 16 = 17.375rem */
        display: flex !important;
        justify-content: flex-end !important;
    }
}

/* Mobile/Tablet Search Flow */
@media (max-width: 1199.98px) {
    .navbar-nav-center {
        position: static !important;
        transform: none !important;
        margin: 0 0.625rem !important; /* 10px */
        flex: 1 !important;
        display: flex !important;
        justify-content: center !important;
    }
}

/* Align Side Items */
.navbar-brand {
    margin: 0 !important;
}

.navbar-nav-right {
    margin: 0 !important;
}

/* 2. Sidebar & Page Adjustments */




.layout-container {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    align-items: stretch !important;
}

body .layout-page {
    background-color: #FFF !important;
    padding-top: 5.125rem !important; /* 82px / 16 */
    margin: 0 !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    flex: 1 1 auto !important;
}

@media (max-width: 1199.98px) {
    body .layout-page {
        height: auto !important;
        min-height: 100vh !important;
        overflow-y: visible !important;
    }
}

/* 3. Search Bar Styling */
.navbar-search-wrapper {
    display: inline-flex !important;
    padding: 0.3125rem 1rem !important; /* 5px 16px */
    justify-content: space-between !important;
    align-items: center !important;
    border-radius: 0.5rem !important; /* 8px */
    background: #384E69 !important;
    gap: 0.75rem; /* 12px */
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    position: relative !important;
}

.form-control.search-input {
    color: #749CCC !important;
    font-family: Cairo !important;
    font-size: 1rem !important; /* 16px → 1rem */
    min-width: 22rem !important; /* 352px / 16 = 22rem */
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: normal !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-family: 'Cairo', sans-serif !important;;
        outline: none !important;
    box-shadow: none !important;
}

.search-input::placeholder {
    color: #749CCC !important;
    opacity: 1 !important;
}

.action-cell {
    display: flex !important;
    padding: 0.6875rem 0.25rem !important; /* 11px 4px */
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem !important; /* 8px */
    white-space: nowrap !important;
    width: auto !important;
}

.btn-action-trigger {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
}

@media (max-width: 767.98px) {
    .navbar-search-wrapper {
        width: 11.25rem !important; /* 180px / 16 */
    }
}

.search-input::placeholder {
    color: #749CCC !important;
}

.navbar-search-wrapper i,
.navbar-search-wrapper .search-icon-svg {
    color: #749CCC !important;
    font-size: 1.25rem !important; /* 20px / 16 */
    flex-shrink: 0 !important;
}

.navbar-search-wrapper .search-icon-svg {
    display: inline-block !important;
    width: 1.25rem !important; /* 20px / 16 */
    height: 1.25rem !important;
    background-color: #749CCC !important;
    mask: var(--icon-url) no-repeat center !important;
    -webkit-mask: var(--icon-url) no-repeat center !important;
    mask-size: contain !important;
    -webkit-mask-size: contain !important;
    flex-shrink: 0 !important;
}

.search-shortcut {
    color: #749CCC !important;
    font-size: 1rem !important; /* 16px / 16 */
    font-family: 'Cairo', sans-serif !important;
    font-weight: 600 !important;
    line-height: normal !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* 4. Sidebar Spacing */




/* 5. RTL & LTR Layout Positioning */


/* 6. Icon Container (Figma Design Tokens) */
.navbar-icon-container {
    display: inline-flex !important;
    padding: 0.625rem 0.25rem 0.649rem 0.25rem !important; /* 10px 4px 10.39px 4px */
    justify-content: center !important;
    align-items: center !important;
    border-radius: 0.5rem !important; /* 8px */
    background: #384E69 !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

@media (max-width: 1199.98px) {
    .navbar-icon-container {
        padding: 0.375rem !important; /* 6px */
    }
}

.navbar-icon-container:hover {
    background: #4a668a !important;
}

.navbar-icon-container i {
    font-size: 1.25rem !important; /* 20px / 16 */
}

/* 7. Menu SVG Icons */
/* Icon Container Styles (Non-menu icons) */


.dropdown-icon-svg {
    display: inline-block !important;
    width: 1.25rem !important; /* 20px / 16 */
    height: 1.25rem !important;
    background-color: #3B5573 !important;
    margin-inline-end: 0.75rem !important; /* 12px / 16 */
    mask: var(--icon-url) no-repeat center !important;
    -webkit-mask: var(--icon-url) no-repeat center !important;
    mask-size: contain !important;
    -webkit-mask-size: contain !important;
    vertical-align: middle !important;
}

[dir="rtl"] .dropdown-icon-svg {
    margin-inline-end: 0 !important;
    margin-inline-start: 0.75rem !important; /* 12px / 16 */
}

/* 8. SIDEBAR MENU - (Awaiting new styles) */


/* Ensure Navbar Spacer is only on large screens if needed, 
   but for now keep it consistent with our fixed header */
.navbar-spacer {
    display: block !important;
    width: 100% !important;
}

/* Re-adjust Layout Page padding since we use HTML spacer now */
body .layout-page {
    padding-top: 0 !important;
}



@media (max-width: 575.98px) {
    #navbar-inner-container {
        padding: 0 0.75rem !important; /* 12px / 16 */
    }

    .navbar-nav-right .navbar-nav {
        gap: 0.5rem !important; /* 8px / 16 */
    }


}

@media (max-width: 1199.98px) {
    .container-p-y {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}
/* 9. Premium Tooltip Styling */
.tooltip {
    font-family: 'Cairo', sans-serif !important;
    z-index: 3000 !important;
}

.tooltip-inner {
    background-color: #384E69 !important;
    color: #FFF !important;
    padding: 0.5rem 0.875rem !important; /* 8px 14px */
    border-radius: 0.375rem !important; /* 6px */
    font-size: 0.8125rem !important; /* 13px / 16 */
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important; /* box-shadow stays px */
    line-height: 1.4 !important;
}

.bs-tooltip-top .tooltip-arrow::before, 
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: #384E69 !important;
}

.bs-tooltip-bottom .tooltip-arrow::before, 
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: #384E69 !important;
}

.bs-tooltip-start .tooltip-arrow::before, 
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
    border-left-color: #384E69 !important;
}

.bs-tooltip-end .tooltip-arrow::before, 
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
    border-right-color: #384E69 !important;
}
select {
    background-color: #fff !important;
    color: #2D4356 !important;
}
select option {
    color: #2D4356 !important;
}