html {
  position: relative;
  min-height: 100%;
}

input.e-input, .e-input-group input, .e-input-group.e-control-wrapper input, .e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input {
    height: 24px !important;
}

input.e-input, textarea.e-input, .e-input-group, .e-input-group.e-control-wrapper {
    font-size: 12px !important;    
}


.e-input-group .e-input-group-icon, .e-input-group.e-control-wrapper .e-input-group-icon {    
    min-height: 24px !important;
}

.responsive-div {
    display: flex;
    flex: 0 0 20%;
    max-width: 20%;
}

/* Hide the div on screens larger than 768px (desktop view) */
@media (min-width: 768px) {
    .responsive-div {
        display: none;
    }
}

@media (max-width: 768px) {

    .col-mobile-0 {
        display: none;
    }

    .col-mobile-1 {
        display: flex;
        flex: 0 0 15%;
        max-width: 15%;
    }

    .col-mobile-3 {
        display: flex;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-mobile-5 {
        display: flex;
        flex: 0 0 30%;
        max-width: 30%;
    }

    .col-mobile-6 {
        display: flex;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-mobile-9 {
        display: flex;
        flex: 0 0 75%;
        max-width: 75%;
    }
}

/* ========================================
   PURE CSS TOOLTIP SYSTEM (Tailwind-styled)
   Usage: <element data-tooltip="Tooltip text" data-tooltip-position="top">
   Positions: top (default), bottom, left, right
   ======================================== */

/* Base tooltip container */
[data-tooltip] {
    position: relative;
    cursor: pointer;
}

/* Hide tooltips when data-tooltip is empty or null */
[data-tooltip=""]::before,
[data-tooltip=""]::after {
    display: none !important;
}

/* Tooltip bubble - hidden by default */
[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 9999;
    
    /* Styling - CSoft Blue Dark Theme */
    background-color: var(--nav-bg); /* theme-aware */
    color: white;
    font-size: 0.75rem; /* 12px */
    font-weight: 500;
    line-height: 1.4;
    padding: 0.375rem 0.75rem; /* 6px 12px */
    border-radius: 0.375rem; /* 6px */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    
    /* Text properties */
    white-space: nowrap;
    max-width: 250px;
    text-align: center;
    word-wrap: break-word;
    
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    
    /* Animation */
    transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 200ms;
}

/* Tooltip arrow - hidden by default */
[data-tooltip]::after {
    content: '';
    position: absolute;
    z-index: 9999;
    
    /* Arrow styling */
    width: 0;
    height: 0;
    border: 6px solid transparent;
    
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    
    /* Animation */
    transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 200ms;
}

/* Show tooltip on hover and focus (accessibility) */
[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus::before,
[data-tooltip]:focus::after {
    opacity: 1;
    visibility: visible;
    transition-delay: 500ms; /* 500ms delay before showing */
}

/* ========================================
   TOOLTIP POSITION: TOP (default)
   ======================================== */
[data-tooltip]::before,
[data-tooltip]:not([data-tooltip-position])::before,
[data-tooltip][data-tooltip-position="top"]::before {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
}

[data-tooltip]::after,
[data-tooltip]:not([data-tooltip-position])::after,
[data-tooltip][data-tooltip-position="top"]::after {
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border-top-color: var(--nav-bg); /* theme-aware */
}

[data-tooltip]:hover::before,
[data-tooltip]:focus::before,
[data-tooltip]:not([data-tooltip-position]):hover::before,
[data-tooltip]:not([data-tooltip-position]):focus::before,
[data-tooltip][data-tooltip-position="top"]:hover::before,
[data-tooltip][data-tooltip-position="top"]:focus::before {
    transform: translateX(-50%) translateY(0);
}

[data-tooltip]:hover::after,
[data-tooltip]:focus::after,
[data-tooltip]:not([data-tooltip-position]):hover::after,
[data-tooltip]:not([data-tooltip-position]):focus::after,
[data-tooltip][data-tooltip-position="top"]:hover::after,
[data-tooltip][data-tooltip-position="top"]:focus::after {
    transform: translateX(-50%) translateY(0);
}

/* ========================================
   TOOLTIP POSITION: BOTTOM
   ======================================== */
[data-tooltip][data-tooltip-position="bottom"]::before {
    top: calc(100% + 8px);
    left: 50%;
    bottom: auto;
    transform: translateX(-50%) translateY(-4px);
}

[data-tooltip][data-tooltip-position="bottom"]::after {
    top: calc(100% + 2px);
    left: 50%;
    bottom: auto;
    transform: translateX(-50%) translateY(-4px);
    border-top-color: transparent;
    border-bottom-color: var(--nav-bg); /* theme-aware */
}

[data-tooltip][data-tooltip-position="bottom"]:hover::before,
[data-tooltip][data-tooltip-position="bottom"]:focus::before {
    transform: translateX(-50%) translateY(0);
}

[data-tooltip][data-tooltip-position="bottom"]:hover::after,
[data-tooltip][data-tooltip-position="bottom"]:focus::after {
    transform: translateX(-50%) translateY(0);
}

/* ========================================
   TOOLTIP POSITION: LEFT
   ======================================== */
[data-tooltip][data-tooltip-position="left"]::before {
    right: calc(100% + 8px);
    top: 50%;
    left: auto;
    bottom: auto;
    transform: translateY(-50%) translateX(4px);
}

[data-tooltip][data-tooltip-position="left"]::after {
    right: calc(100% + 2px);
    top: 50%;
    left: auto;
    bottom: auto;
    transform: translateY(-50%) translateX(4px);
    border-top-color: transparent;
    border-left-color: var(--nav-bg); /* theme-aware */
}

[data-tooltip][data-tooltip-position="left"]:hover::before,
[data-tooltip][data-tooltip-position="left"]:focus::before {
    transform: translateY(-50%) translateX(0);
}

[data-tooltip][data-tooltip-position="left"]:hover::after,
[data-tooltip][data-tooltip-position="left"]:focus::after {
    transform: translateY(-50%) translateX(0);
}

/* ========================================
   TOOLTIP POSITION: RIGHT
   Note: Right-positioned tooltips in sidebar use JavaScript 
   for fixed positioning (see tooltip-position.js)
   ======================================== */
[data-tooltip][data-tooltip-position="right"]::before,
[data-tooltip][data-tooltip-position="right"]::after {
    display: none !important; /* Disabled - using JS-enhanced tooltips */
}

/* JavaScript-Enhanced Fixed Tooltips for Sidebar */
.sidebar-tooltip-fixed {
    position: fixed;
    z-index: 10000;
    background-color: var(--nav-bg); /* theme-aware */
    color: white;
    font-size: 0.75rem; /* 12px */
    font-weight: 500;
    line-height: 1.4;
    padding: 0.5rem 0.75rem; /* 8px 12px */
    border-radius: 0.375rem; /* 6px */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    max-width: 250px;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 200ms ease-out, transform 200ms ease-out;
    pointer-events: none;
}

.sidebar-tooltip-arrow {
    position: fixed;
    z-index: 10000;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid var(--nav-bg); /* theme-aware */
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 200ms ease-out, transform 200ms ease-out;
    pointer-events: none;
}

.sidebar-tooltip-arrow-left {
    position: fixed;
    z-index: 10000;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid var(--nav-bg); /* theme-aware */
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 200ms ease-out, transform 200ms ease-out;
    pointer-events: none;
}

/* ========================================
   RESPONSIVE: Hide tooltips on touch devices
   (Prevents accidental tooltips on mobile)
   ======================================== */
@media (hover: none) and (pointer: coarse) {
    [data-tooltip]::before,
    [data-tooltip]::after {
        display: none !important;
    }
    
    /* Fallback to native title attribute on touch devices */
    [data-tooltip] {
        cursor: default;
    }
}

/* ========================================
   SPECIAL CASE: Long tooltips with multiline
   ======================================== */
[data-tooltip][data-tooltip-multiline]::before {
    white-space: normal;
    width: max-content;
    max-width: 250px;
}

/* ========================================
   CLEAN LAYOUT - CONTENT SPACING
   Controls main content offset based on
   active navigation mode (set by JS).
   ======================================== */

/* Sidebar mode (desktop): offset content to the right */
body.sidebar-mode #main-content {
    margin-left: 15rem; /* 240px sidebar width */
    transition: margin-left 0.3s ease-in-out;
}

body.sidebar-mode.sidebar-collapsed #main-content {
    margin-left: 4rem; /* 64px collapsed width */
}

/* Workspace mode: horizontal nav pushes content down */
body.workspace-mode #main-content {
    margin-left: 0;
    padding-top: 6rem; /* nav bar + quick actions height */
}

/* Mobile mode: single top bar only */
body.mobile-mode #main-content {
    margin-left: 0;
    padding-top: 4rem; /* 64px mobile top bar */
    transition: none;
}

body.mobile-mode #sidebar-nav {
    display: none !important;
}

/* CSS-only fallback: mobile layout before JS runs */
@media (max-width: 767px) {
    #sidebar-nav {
        display: none !important;
    }
    #horizontal-nav {
        display: block !important;
    }
    #horizontal-nav .desktop-only-element {
        display: none !important;
    }
    #horizontal-nav .mobile-only-element {
        display: flex !important;
    }
    #main-content {
        margin-left: 0 !important;
        padding-top: 4rem !important;
    }
}

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

@media (min-width: 1536px) {
    .container {
        max-width: 1536px;
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* ========================================
   PRELOADER
   ======================================== */
#preloader {
    position: fixed;
    inset: 0;
    background-color: #fff;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preloader-spinner {
    width: 40px;
    height: 40px;
    position: relative;
}

.preloader-bounce,
.preloader-bounce-delay {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #1e40af;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    animation: preloader-bounce 2s infinite ease-in-out;
}

.preloader-bounce-delay {
    animation-delay: -1s;
}

@keyframes preloader-bounce {
    0%, 100% { transform: scale(0); }
    50%       { transform: scale(1); }
}