/*
 * Metronic Bootstrap Theme Styles
 * Custom CSS for Bootstrap-based Metronic layout
 */

/* ============================================
   ROOT VARIABLES
   ============================================ */
:root {
    --kt-app-header-height: 60px;
    --kt-app-sidebar-width: 265px;
    --kt-app-sidebar-width-minimize: 75px;
    --kt-sidebar-bg: #2D3748;
    --kt-sidebar-text: #A0AEC0;
    --kt-sidebar-text-hover: #ffffff;
    --kt-sidebar-menu-link-bg-hover: rgba(255, 255, 255, 0.08);
    --kt-sidebar-menu-link-bg-active: rgba(255, 255, 255, 0.12);
    --kt-primary: #7CB4D8;
    --kt-success: #8BC4A0;
    --kt-info: #A898C8;
    --kt-warning: #E8C08A;
    --kt-danger: #E89A93;

    /* Bootstrap RGB variables for rgba() usage - Pastel Palette */
    --bs-primary-rgb: 124, 180, 216;
    --bs-success-rgb: 139, 196, 160;
    --bs-info-rgb: 168, 152, 200;
    --bs-warning-rgb: 212, 165, 116;
    --bs-danger-rgb: 232, 154, 147;

    /* Bootstrap solid color variables */
    --bs-primary: #7CB4D8;
    --bs-success: #8BC4A0;
    --bs-info: #A898C8;
    --bs-warning: #D4A574;
    --bs-danger: #E89A93;
}

[data-bs-theme="dark"] {
    --kt-sidebar-bg: #1A202C;
    --bs-body-bg: #171923;
    --bs-body-color: #A0AEC0;

    /* Bootstrap RGB variables for dark mode - Pastel Palette */
    --bs-primary-rgb: 124, 180, 216;
    --bs-success-rgb: 139, 196, 160;
    --bs-info-rgb: 168, 152, 200;
    --bs-warning-rgb: 212, 165, 116;
    --bs-danger-rgb: 232, 154, 147;

    /* Bootstrap solid color variables */
    --bs-primary: #7CB4D8;
    --bs-success: #8BC4A0;
    --bs-info: #A898C8;
    --bs-warning: #D4A574;
    --bs-danger: #E89A93;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.scroll-y {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.hover-scroll-overlay-y {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ============================================
   APP LAYOUT STRUCTURE
   ============================================ */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font-weight: 400;
}

.app-root {
    min-height: 100%;
}

.app-page {
    min-height: 100vh;
}

.app-wrapper {
    min-height: 100vh;
}

.app-main {
    min-height: 100vh;
    /* padding-left removed - handled by margin-left on .app-wrapper in style.bundle.css */
}

/* ============================================
   SIDEBAR STYLES
   ============================================ */
.app-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 105;
    width: var(--kt-app-sidebar-width);
    background-color: var(--kt-sidebar-bg);
    transition: width 0.3s ease;
    display: flex;
    flex-direction: column;
}

/* Mobile sidebar is handled by KTDrawer from scripts.bundle.js */

/* Sidebar Logo */
.app-sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    padding: 0 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.app-sidebar-logo img {
    max-height: 35px;
    width: auto;
}

.app-sidebar-logo-minimize {
    display: none;
}

/* Sidebar Toggle Button */
.app-sidebar-toggle {
    position: absolute;
    top: 50%;
    right: -15px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 106;
    border: none;
    transition: transform 0.3s ease;
}

.app-sidebar-toggle:hover {
    background-color: var(--kt-primary);
    color: #fff;
}

/* Sidebar Menu */
.app-sidebar-menu {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.app-sidebar-wrapper,
.app-sidebar-menu-wrapper {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem 0;
}

/* Custom Scrollbar for Sidebar */
.app-sidebar-wrapper::-webkit-scrollbar,
.app-sidebar-menu-wrapper::-webkit-scrollbar {
    width: 5px;
}

.app-sidebar-menu-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.app-sidebar-menu-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.app-sidebar-menu-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Menu Styles */
.menu {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
}

.menu-section {
    padding: 0.75rem 1.5rem;
}

.menu-heading {
    color: var(--kt-sidebar-text);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.menu-item {
    display: block;
}

.menu-link {
    display: flex;
    align-items: center;
    padding: 0.65rem 1.5rem;
    color: var(--kt-sidebar-text);
    text-decoration: none;
    transition: all 0.15s ease;
    border-radius: 0.475rem;
    margin: 0 0.75rem;
}

.menu-link:hover {
    background-color: var(--kt-sidebar-menu-link-bg-hover);
    color: var(--kt-sidebar-text-hover);
}

.menu-link.active {
    background-color: var(--kt-sidebar-menu-link-bg-active);
    color: var(--kt-sidebar-text-hover);
}

.menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.menu-icon i {
    font-size: 1.25rem;
    color: var(--kt-sidebar-text);
    transition: color 0.15s ease;
}

.menu-link:hover .menu-icon i,
.menu-link.active .menu-icon i {
    color: var(--kt-sidebar-text-hover);
}

.menu-title {
    font-size: 0.925rem;
    font-weight: 500;
    flex-grow: 1;
}

/* Sidebar Footer */
.app-sidebar-footer {
    flex: 0 0 auto;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(0, 0, 0, 0.1);
}

.app-sidebar-footer .text-gray-800 {
    color: #fff !important;
}

.app-sidebar-footer .btn-icon {
    color: var(--kt-sidebar-text);
}

.app-sidebar-footer .btn-icon:hover {
    color: #fff;
}

.app-sidebar-footer .symbol-label {
    background-color: var(--kt-primary) !important;
    color: #fff;
}

/* User Section in Sidebar */
.sidebar-user {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--kt-success);
    object-fit: cover;
}

.sidebar-user-info {
    margin-left: 0.75rem;
    flex: 1;
    min-width: 0;
}

.sidebar-user-name {
    color: #fff;
    font-size: 0.925rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-role {
    color: var(--kt-sidebar-text);
    font-size: 0.8rem;
}

/* ============================================
   HEADER STYLES (if needed)
   ============================================ */
.app-header {
    display: flex;
    align-items: center;
    height: var(--kt-app-header-height);
    background-color: #fff;
    border-bottom: 1px solid #e4e6ef;
}

[data-bs-theme="dark"] .app-header {
    background-color: #1e1e2d;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Header Navbar */
.app-navbar {
    display: flex;
    align-items: stretch;
}

.app-navbar-item {
    display: flex;
    align-items: center;
}

/* User Symbol */
.symbol {
    display: inline-block;
    flex-shrink: 0;
    position: relative;
    border-radius: 0.475rem;
}

.symbol-35px {
    width: 35px;
    height: 35px;
}

.symbol-40px {
    width: 40px;
    height: 40px;
}

.symbol-50px {
    width: 50px;
    height: 50px;
}

.symbol > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.symbol-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 0.475rem;
    font-weight: 500;
}

.symbol-circle,
.symbol-circle .symbol-label,
.symbol-circle > img {
    border-radius: 50%;
}

/* Dropdown Menu Styles */
.menu-sub {
    display: none;
    padding: 0;
    margin: 0;
    list-style: none;
}

.menu-sub-dropdown {
    position: absolute;
    z-index: 107;
    background-color: #fff;
    border-radius: 0.475rem;
    box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    display: none;
}

[data-bs-theme="dark"] .menu-sub-dropdown {
    background-color: #1e1e2d;
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.3);
}

.menu-sub-dropdown.show,
.show > .menu-sub-dropdown {
    display: flex;
    flex-direction: column;
}

/* Header dropdown menu positioning */
[data-kt-menu-placement="bottom-end"] {
    right: 0;
    top: 100%;
}

/* Menu Items in Dropdown */
.menu-sub-dropdown .menu-item {
    padding: 0;
}

.menu-sub-dropdown .menu-link {
    padding: 0.65rem 1rem;
    color: #181c32;
    background: transparent;
}

[data-bs-theme="dark"] .menu-sub-dropdown .menu-link {
    color: #a1a5b7;
}

.menu-sub-dropdown .menu-link:hover {
    background-color: #f5f8fa;
    color: #009ef7;
}

[data-bs-theme="dark"] .menu-sub-dropdown .menu-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #009ef7;
}

.menu-content {
    padding: 0.5rem 1rem;
}

/* Separator */
.separator {
    display: block;
    height: 0;
    border-bottom: 1px solid #eff2f5;
}

[data-bs-theme="dark"] .separator {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Button Custom */
.btn-custom {
    background-color: transparent;
    border: none;
}

.btn-custom:hover,
.btn-custom:focus {
    background-color: rgba(0, 0, 0, 0.05);
}

[data-bs-theme="dark"] .btn-custom:hover,
[data-bs-theme="dark"] .btn-custom:focus {
    background-color: rgba(255, 255, 255, 0.05);
}

.btn-icon-muted {
    color: #a1a5b7;
}

.btn-icon-muted:hover {
    color: #009ef7;
}

/* Theme Mode Toggle Icons */
.theme-light-show {
    display: flex !important;
}

.theme-dark-show {
    display: none !important;
}

[data-bs-theme="dark"] .theme-light-show {
    display: none !important;
}

[data-bs-theme="dark"] .theme-dark-show {
    display: flex !important;
}

/* Cursor Pointer */
.cursor-pointer {
    cursor: pointer;
}

/* ============================================
   CONTENT AREA
   ============================================ */
.app-content {
    padding: 1.5rem 0;
}

/* ============================================
   FOOTER STYLES
   ============================================ */
.app-footer {
    background-color: #fff;
    border-top: 1px solid #e4e6ef;
}

[data-bs-theme="dark"] .app-footer {
    background-color: #1e1e2d;
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* ============================================
   SIDEBAR MINIMIZE STATE
   ============================================ */
[data-kt-app-sidebar-minimize="on"] .app-sidebar {
    width: var(--kt-app-sidebar-width-minimize);
}

[data-kt-app-sidebar-minimize="on"] .app-main {
    padding-left: var(--kt-app-sidebar-width-minimize);
}

[data-kt-app-sidebar-minimize="on"] .app-sidebar-logo-default {
    display: none;
}

[data-kt-app-sidebar-minimize="on"] .app-sidebar-logo-minimize {
    display: block;
}

[data-kt-app-sidebar-minimize="on"] .menu-title,
[data-kt-app-sidebar-minimize="on"] .menu-heading,
[data-kt-app-sidebar-minimize="on"] .sidebar-user-info {
    display: none;
}

[data-kt-app-sidebar-minimize="on"] .menu-link {
    justify-content: center;
    padding: 0.65rem;
}

[data-kt-app-sidebar-minimize="on"] .menu-icon {
    margin-right: 0;
}

/* Hoverable Sidebar Expand */
[data-kt-app-sidebar-hoverable="true"][data-kt-app-sidebar-minimize="on"] .app-sidebar:hover {
    width: var(--kt-app-sidebar-width);
}

[data-kt-app-sidebar-hoverable="true"][data-kt-app-sidebar-minimize="on"] .app-sidebar:hover .app-sidebar-logo-default {
    display: block;
}

[data-kt-app-sidebar-hoverable="true"][data-kt-app-sidebar-minimize="on"] .app-sidebar:hover .app-sidebar-logo-minimize {
    display: none;
}

[data-kt-app-sidebar-hoverable="true"][data-kt-app-sidebar-minimize="on"] .app-sidebar:hover .menu-title,
[data-kt-app-sidebar-hoverable="true"][data-kt-app-sidebar-minimize="on"] .app-sidebar:hover .menu-heading,
[data-kt-app-sidebar-hoverable="true"][data-kt-app-sidebar-minimize="on"] .app-sidebar:hover .sidebar-user-info {
    display: block;
}

[data-kt-app-sidebar-hoverable="true"][data-kt-app-sidebar-minimize="on"] .app-sidebar:hover .menu-link {
    justify-content: flex-start;
    padding: 0.65rem 1.5rem;
}

[data-kt-app-sidebar-hoverable="true"][data-kt-app-sidebar-minimize="on"] .app-sidebar:hover .menu-icon {
    margin-right: 0.5rem;
}

/* ============================================
   CARD STYLES
   ============================================ */
.card {
    border: 0;
    box-shadow: 0 0 20px 0 rgba(76, 87, 125, 0.02);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid #e4e6ef;
    padding: 1.25rem 1.5rem;
}

.card-body {
    padding: 1.5rem;
}

.card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0;
}

/* ============================================
   BUTTON ENHANCEMENTS
   ============================================ */
.btn {
    font-weight: 500;
    border-radius: 0.475rem;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 2.5rem;
    height: 2.5rem;
}

.btn-sm.btn-icon {
    width: 2rem;
    height: 2rem;
}

.btn-lg.btn-icon {
    width: 3rem;
    height: 3rem;
}

/* ============================================
   DROPDOWN MENU ENHANCEMENTS
   ============================================ */
.dropdown-menu {
    border: 0;
    box-shadow: 0 0 50px 0 rgba(82, 63, 105, 0.15);
    border-radius: 0.475rem;
    padding: 0.5rem 0;
}

.dropdown-item {
    padding: 0.65rem 1rem;
    font-size: 0.925rem;
    color: #5e6278;
    transition: all 0.15s ease;
}

.dropdown-item:hover {
    background-color: #f5f8fa;
    color: var(--kt-primary);
}

.dropdown-item i {
    margin-right: 0.75rem;
    font-size: 1rem;
}

.dropdown-divider {
    margin: 0.5rem 0;
    border-top-color: #e4e6ef;
}

/* ============================================
   FLEX UTILITIES
   ============================================ */
.flex-root {
    flex: 1;
}

.flex-column-fluid {
    flex: 1 0 auto;
}

.flex-column-auto {
    flex: 0 0 auto;
}

.flex-row-fluid {
    flex: 1 auto;
    min-width: 0;
}

/* ============================================
   BADGE STYLES
   ============================================ */
.badge-light-primary {
    background-color: rgba(124, 180, 216, 0.15);
    color: #5A9AC0;
}

.badge-light-success {
    background-color: rgba(139, 196, 160, 0.15);
    color: #6BA883;
}

.badge-light-info {
    background-color: rgba(168, 152, 200, 0.15);
    color: #8878A8;
}

.badge-light-warning {
    background-color: rgba(232, 192, 138, 0.15);
    color: #C8A06A;
}

.badge-light-danger {
    background-color: rgba(232, 154, 147, 0.15);
    color: #C87A73;
}

/* ============================================
   SYMBOL (AVATAR) STYLES
   ============================================ */
.symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 0.475rem;
    position: relative;
}

.symbol img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.symbol-circle {
    border-radius: 50%;
}

.symbol-30px {
    width: 30px;
    height: 30px;
}

.symbol-40px {
    width: 40px;
    height: 40px;
}

.symbol-50px {
    width: 50px;
    height: 50px;
}

/* ============================================
   HEIGHT UTILITIES
   ============================================ */
.h-30px { height: 30px !important; }
.h-35px { height: 35px !important; }
.h-40px { height: 40px !important; }

/* ============================================
   SEPARATOR
   ============================================ */
.separator {
    border-bottom: 1px solid #e4e6ef;
}

.separator.separator-dashed {
    border-bottom-style: dashed;
}

[data-bs-theme="dark"] .separator {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}


/* ============================================
   TEXT COLOR UTILITIES
   ============================================ */
.text-gray-400 { color: #b5b5c3 !important; }
.text-gray-500 { color: #a1a5b7 !important; }
.text-gray-600 { color: #7e8299 !important; }
.text-gray-700 { color: #5e6278 !important; }
.text-gray-800 { color: #3f4254 !important; }
.text-gray-900 { color: #181c32 !important; }

.text-hover-primary:hover { color: var(--kt-primary) !important; }

/* ============================================
   BACKGROUND COLOR UTILITIES
   ============================================ */
/* Solid background colors - Pastel Palette */
.bg-primary { background-color: #7CB4D8 !important; }
.bg-success { background-color: #8BC4A0 !important; }
.bg-info { background-color: #A898C8 !important; }
.bg-warning { background-color: #D4A574 !important; }
.bg-danger { background-color: #E89A93 !important; }

/* Light background colors */
.bg-light-primary { background-color: rgba(124, 180, 216, 0.15) !important; }
.bg-light-success { background-color: rgba(139, 196, 160, 0.15) !important; }
.bg-light-info { background-color: rgba(168, 152, 200, 0.15) !important; }
.bg-light-warning { background-color: rgba(232, 192, 138, 0.15) !important; }
.bg-light-danger { background-color: rgba(232, 154, 147, 0.15) !important; }

/* Text Color Utilities - Pastel Palette */
.text-primary { color: #7CB4D8 !important; }
.text-success { color: #8BC4A0 !important; }
.text-info { color: #A898C8 !important; }
.text-warning { color: #D4A574 !important; }
.text-danger { color: #E89A93 !important; }

/* Hover text color variants */
.text-hover-primary:hover { color: #5A9BC4 !important; }
.text-hover-success:hover { color: #6FB08A !important; }
.text-hover-info:hover { color: #8A7AB0 !important; }
.text-hover-warning:hover { color: #C08A5A !important; }
.text-hover-danger:hover { color: #D4807A !important; }

/* ============================================
   FONT SIZE UTILITIES
   ============================================ */
.fs-1 { font-size: 1.75rem !important; }
.fs-2 { font-size: 1.5rem !important; }
.fs-3 { font-size: 1.25rem !important; }
.fs-4 { font-size: 1.1rem !important; }
.fs-5 { font-size: 1rem !important; }
.fs-6 { font-size: 0.925rem !important; }
.fs-7 { font-size: 0.85rem !important; }
.fs-8 { font-size: 0.75rem !important; }

/* ============================================
   KI ICONS (KEENICONS)
   ============================================ */
.ki-duotone,
.ki-filled,
.ki-outline,
.ki-solid {
    line-height: 1;
}

/* ============================================
   METRONIC AUTHENTICATION UTILITIES
   ============================================ */

/* Height Utilities */
.h-60px { height: 60px !important; }
.h-75px { height: 75px !important; }

@media (min-width: 992px) {
    .h-lg-75px { height: 75px !important; }
}

/* Width Utilities */
.w-lg-500px {
    width: 100%;
}
@media (min-width: 992px) {
    .w-lg-500px { width: 500px !important; }
    .w-lg-50 { width: 50% !important; }
}

/* Max Width Utilities */
.mw-250px { max-width: 250px !important; }
.mw-400px { max-width: 400px !important; }

/* Font Size Utilities (Metronic specific) */
.fs-base { font-size: 1rem !important; }
.fs-2x { font-size: 2rem !important; }
.fs-2qx { font-size: 2.25rem !important; }
.fs-2hx { font-size: 2.5rem !important; }
.fs-3x { font-size: 3rem !important; }

/* Flex Center Utility */
.flex-center {
    justify-content: center !important;
    align-items: center !important;
}

/* Background Image Utilities */
.bgi-size-cover {
    background-size: cover !important;
}

.bgi-position-center {
    background-position: center !important;
}

.bgi-no-repeat {
    background-repeat: no-repeat !important;
}

/* Link Utilities */
.link-primary {
    color: var(--kt-primary) !important;
}

.link-primary:hover {
    color: #187de4 !important;
}

/* Button Light Variants - Custom overrides with !important */
.btn-light-primary,
.btn.btn-light-primary {
    color: #5A9AC0 !important;
    background-color: rgba(124, 180, 216, 0.35) !important;
    border-color: transparent !important;
}

.btn-light-primary:hover,
.btn.btn-light-primary:hover {
    color: #fff !important;
    background-color: var(--kt-primary) !important;
}

.btn-light-warning,
.btn.btn-light-warning {
    color: #C8A06A !important;
    background-color: rgba(232, 192, 138, 0.35) !important;
    border-color: transparent !important;
}

.btn-light-warning:hover,
.btn.btn-light-warning:hover {
    color: #fff !important;
    background-color: var(--kt-warning) !important;
}

.btn-light-info,
.btn.btn-light-info {
    color: #8878A8 !important;
    background-color: rgba(168, 152, 200, 0.35) !important;
    border-color: transparent !important;
}

.btn-light-info:hover,
.btn.btn-light-info:hover {
    color: #fff !important;
    background-color: var(--kt-info) !important;
}

.btn-light-success,
.btn.btn-light-success {
    color: #6BA87A !important;
    background-color: rgba(124, 191, 142, 0.35) !important;
    border-color: transparent !important;
}

.btn-light-success:hover,
.btn.btn-light-success:hover {
    color: #fff !important;
    background-color: var(--kt-success) !important;
}

.btn-light-danger,
.btn.btn-light-danger {
    color: #C87A7A !important;
    background-color: rgba(232, 154, 147, 0.35) !important;
    border-color: transparent !important;
}

.btn-light-danger:hover,
.btn.btn-light-danger:hover {
    color: #fff !important;
    background-color: var(--kt-danger) !important;
}

/* Indicator (Loading) Styles */
.indicator-label {
    display: inline-block;
}

.indicator-progress {
    display: none;
}

[data-kt-indicator="on"] .indicator-label,
.btn[data-kt-indicator="on"] .indicator-label {
    display: none;
}

[data-kt-indicator="on"] .indicator-progress,
.btn[data-kt-indicator="on"] .indicator-progress {
    display: inline-block;
}

/* Form Validation Row */
.fv-row {
    margin-bottom: 1rem;
}

/* Responsive Ordering */
@media (min-width: 992px) {
    .order-lg-1 { order: 1 !important; }
    .order-lg-2 { order: 2 !important; }
}

/* ============================================
   AUTHENTICATION PAGE UTILITIES
   ============================================ */

/* Flex Stack - aligns items in a row with space-between */
.flex-stack {
    justify-content: space-between !important;
    align-items: center !important;
}

/* Flex Root - full height container */
.flex-root {
    flex: 1;
    min-height: 100vh;
}

/* Additional Width Utilities for Auth Images */
.w-275px { width: 275px !important; }

@media (min-width: 768px) {
    .w-md-50 { width: 50% !important; }
}

@media (min-width: 1200px) {
    .w-xl-500px { width: 500px !important; }
}

/* Additional Margin Utilities */
.mb-12 { margin-bottom: 3rem !important; }
.mb-20 { margin-bottom: 5rem !important; }

@media (min-width: 992px) {
    .mb-lg-12 { margin-bottom: 3rem !important; }
    .mb-lg-20 { margin-bottom: 5rem !important; }
    .py-lg-15 { padding-top: 3.75rem !important; padding-bottom: 3.75rem !important; }
}

/* Padding utilities */
.py-7 { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
.py-15 { padding-top: 3.75rem !important; padding-bottom: 3.75rem !important; }
.px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }

@media (min-width: 768px) {
    .px-md-15 { padding-left: 3.75rem !important; padding-right: 3.75rem !important; }
}

/* Form Control Transparent Background */
.form-control.bg-transparent {
    background-color: transparent;
    border: 1px solid #e4e6ef;
}

.form-control.bg-transparent:focus {
    background-color: transparent;
    border-color: var(--kt-primary);
    box-shadow: none;
}

[data-bs-theme="dark"] .form-control.bg-transparent {
    border-color: rgba(255, 255, 255, 0.1);
    color: #a1a5b7;
}

[data-bs-theme="dark"] .form-control.bg-transparent:focus {
    border-color: var(--kt-primary);
}

/* Form Check Inline */
.form-check-inline {
    display: inline-flex;
    align-items: center;
    margin-right: 0;
}

/* Button Size Utilities */
.btn.btn-sm {
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
}

/* Responsive Flex Row Fluid */
@media (min-width: 992px) {
    .flex-lg-row-fluid {
        flex: 1 auto;
        min-width: 0;
    }
}

/* W-100 utility */
.w-100 {
    width: 100% !important;
}

/* Spacing for auth footer */
.px-5 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}

/* Gap utility */
.gap-3 { gap: 1rem !important; }

/* Text utilities */
.text-nowrap { white-space: nowrap !important; }

/* Button outline variants */
.btn-outline {
    border: 1px solid #e4e6ef;
    background-color: transparent;
}

.btn-outline:hover {
    background-color: #f5f8fa;
}

/* Button text color variants */
.btn-text-gray-700 {
    color: #5e6278;
}

/* Button active color */
.btn-active-color-primary:hover,
.btn-active-color-primary:focus,
.btn-active-color-primary.active {
    color: var(--kt-primary) !important;
}

/* Background state light */
.bg-state-light {
    background-color: #f5f8fa;
}

.bg-state-light:hover {
    background-color: #e4e6ef;
}

[data-bs-theme="dark"] .bg-state-light {
    background-color: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .bg-state-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Height 15px for icons */
.h-15px { height: 15px !important; }

/* ============================================
   DASHBOARD CARD UTILITIES
   ============================================ */

/* Card stretch */
.card-xl-stretch {
    height: calc(100% - 20px);
}

/* Hoverable card effect */
.hoverable {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hoverable:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
}

/* Font size utilities */
.fs-2x { font-size: 2rem !important; }
.fs-2tx { font-size: 2.5rem !important; }
.fs-2hx { font-size: 2.25rem !important; }
.fs-3x { font-size: 3rem !important; }

/* App container */
.app-container {
    max-width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* App toolbar */
.app-toolbar {
    background-color: transparent;
}

/* Page heading */
.page-heading {
    margin: 0;
}

/* Gap utilities */
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-4 { gap: 1rem !important; }
.gap-5 { gap: 1.25rem !important; }

@media (min-width: 992px) {
    .gap-lg-3 { gap: 1rem !important; }
}

/* Grid gap utilities */
.g-5 { gap: 1.25rem !important; }

@media (min-width: 1200px) {
    .g-xl-8 { gap: 2rem !important; }
}

/* Margin bottom utilities */
.mb-5 { margin-bottom: 1.25rem !important; }

@media (min-width: 1200px) {
    .mb-xl-8 { margin-bottom: 2rem !important; }
}

/* Card label */
.card-label {
    font-weight: 600;
    color: #181c32;
}

[data-bs-theme="dark"] .card-label {
    color: #fff;
}

/* Card title flex column */
.card-title.align-items-start {
    display: flex;
    align-items: flex-start;
}

.card-title.flex-column {
    flex-direction: column;
}

/* Badge variants */
.badge-light-success {
    color: #6BA883;
    background-color: rgba(139, 196, 160, 0.15);
}

.badge-light-warning {
    color: #C8A06A;
    background-color: rgba(232, 192, 138, 0.15);
}

.badge-light-danger {
    color: #C87A73;
    background-color: rgba(232, 154, 147, 0.15);
}

.badge-light-info {
    color: #8878A8;
    background-color: rgba(168, 152, 200, 0.15);
}

.badge-light-primary {
    color: #5A9AC0;
    background-color: rgba(124, 180, 216, 0.15);
}

/* Opacity utilities */
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }

/* Background opacity */
.bg-opacity-10 { --bs-bg-opacity: 0.1; }

/* Light background variants */
.bg-light-warning { background-color: rgba(232, 192, 138, 0.15) !important; }
.bg-light-info { background-color: rgba(168, 152, 200, 0.15) !important; }
.bg-light-danger { background-color: rgba(232, 154, 147, 0.15) !important; }
.bg-light-success { background-color: rgba(139, 196, 160, 0.15) !important; }

/* Flex column fluid */
.flex-column-fluid {
    flex: 1 0 auto;
}

/* Container fluid max width */
.container-fluid {
    max-width: 100%;
}