@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* Modern Header Styles */
:root {
    --header-bg: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    --header-border: rgba(255, 255, 255, 0.08);
    --header-text: #f1f5f9;
    --header-text-muted: #94a3b8;
    --header-hover-bg: rgba(255, 255, 255, 0.08);
    --header-active-bg: rgba(59, 130, 246, 0.2);
    --header-accent: #3b82f6;
    --header-accent-hover: #60a5fa;
    --breadcrumb-bg: rgba(248, 250, 252, 0.95);
    --breadcrumb-border: rgba(0, 0, 0, 0.06);
    --breadcrumb-text: #475569;
    --breadcrumb-hover: #1e40af;
    --header-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* Override body font and background for the entire app */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

div#header {
    background: var(--header-bg) !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: var(--header-shadow), 50vw 0 0 0 #0f172a, 100vw 0 0 0 #0f172a, 150vw 0 0 0 #0f172a, 200vw 0 0 0 #0f172a, 250vw 0 0 0 #0f172a, 50vw 4px 6px -1px rgba(0, 0, 0, 0.1), 50vw 2px 4px -2px rgba(0, 0, 0, 0.1), 100vw 4px 6px -1px rgba(0, 0, 0, 0.1), 100vw 2px 4px -2px rgba(0, 0, 0, 0.1), 150vw 4px 6px -1px rgba(0, 0, 0, 0.1), 150vw 2px 4px -2px rgba(0, 0, 0, 0.1), 200vw 4px 6px -1px rgba(0, 0, 0, 0.1), 200vw 2px 4px -2px rgba(0, 0, 0, 0.1), 250vw 4px 6px -1px rgba(0, 0, 0, 0.1), 250vw 2px 4px -2px rgba(0, 0, 0, 0.1) !important;
    position: relative;
    z-index: 502;
}

div#header>table {
    border-collapse: collapse;
    width: 100%;
}

div#header>table>tbody>tr.header-nav-row>td {
    padding: 0.75rem 0.1rem;
}

/* Remove right padding from the cell containing smallLinks (logout button) */
div#header>table>tbody>tr.header-nav-row>td:last-child {
    padding-right: 0.5rem !important;
}

/* Sections container (left navigation) */
div#sections {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* Navigation items in header - container */
div#header div.small-link-item {
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Navigation items in header - clickable link */
div#header a.small-link-item {
    padding: 0.5rem 0.75rem !important;
    border: none !important;
    border-radius: 0.5rem !important;
    margin: 0.125rem !important;
    background: transparent !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
}

div#header a.small-link-item:hover {
    background: var(--header-hover-bg) !important;
}

/* Only highlight current section - subtle indicator */
div#header div.small-link-item.current>a.small-link-item,
div#header a.small-link-item.current {
    background: transparent !important;
    border-bottom: 2px solid var(--header-accent) !important;
    border-radius: 0.5rem 0.5rem 0 0 !important;
    padding-bottom: calc(0.5rem - 2px) !important;
}

/* Link text in header */
div#header span.small-link-item,
div#header a.small-link-item {
    color: var(--header-text) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    letter-spacing: -0.01em;
}

div#header a.small-link-item:hover,
div#header a.small-link-item:hover span.small-link-item {
    color: var(--header-accent-hover) !important;
}

div#header .current span.small-link-item,
div#header a.small-link-item.current span.small-link-item {
    color: var(--header-accent-hover) !important;
    font-weight: 600 !important;
}

/* Icons in header - make them slightly transparent and smaller */
div#header img.small-icon {
    opacity: 0.9;
    filter: brightness(1.1);
    margin-right: 0.5rem;
    transition: all 0.2s ease;
}

div#header a:hover img.small-icon {
    opacity: 1;
    transform: scale(1.05);
}

/* Right side links container */
div#smallLinks {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    padding-right: 0 !important;
}

/* Language selector modernization */
div.language-flag.current {
    padding: 0.375rem 0.625rem !important;
    border-radius: 0.5rem !important;
    background: var(--header-hover-bg) !important;
    border: 1px solid var(--header-border) !important;
    transition: all 0.2s ease !important;
}

div.language-flag.current:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

div.language-flag.current img.flag {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    border-radius: 2px;
}

span.small-link-item-arrow {
    border-color: var(--header-text-muted) transparent transparent transparent !important;
    margin-left: 0.375rem !important;
    opacity: 0.7;
}

/* Language dropdown */
a.language-flag {
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.375rem;
    transition: background 0.15s ease;
}

a.language-flag:hover {
    background: rgba(59, 130, 246, 0.1);
}

/* Search input styling (if present) */
div#header input[type="text"],
div#header input[type="search"] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--header-text) !important;
    border-radius: 0.5rem !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    transition: all 0.2s ease !important;
}

div#header input[type="text"]:focus,
div#header input[type="search"]:focus {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: var(--header-accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

div#header input[type="text"]::placeholder,
div#header input[type="search"]::placeholder {
    color: var(--header-text-muted) !important;
}

/* Breadcrumbs row */
div#header>table>tbody>tr.header-breadcrumbs-row>td {
    border-top: 1px solid var(--header-border) !important;
    padding: 0 !important;
}

div#breadcrumbs {
    background: #f8fafc !important;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    box-shadow: 50vw 0 0 0 #f8fafc, 100vw 0 0 0 #f8fafc, 150vw 0 0 0 #f8fafc, 200vw 0 0 0 #f8fafc, 250vw 0 0 0 #f8fafc !important;
}

/* Breadcrumb items - container */
div#breadcrumbs div.small-link-item {
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Breadcrumb items - clickable link */
div#breadcrumbs a.small-link-item {
    padding: 0.25rem 0.5rem !important;
    border: none !important;
    border-radius: 0.375rem !important;
    margin: 0 !important;
    background: transparent !important;
    transition: all 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
}

div#breadcrumbs a.small-link-item:hover {
    background: rgba(30, 64, 175, 0.08) !important;
}

div#breadcrumbs span.small-link-item,
div#breadcrumbs a.small-link-item {
    color: var(--breadcrumb-text) !important;
    font-weight: 500 !important;
    font-size: 0.8125rem !important;
}

div#breadcrumbs a.small-link-item:hover,
div#breadcrumbs a:hover span.small-link-item {
    color: var(--breadcrumb-hover) !important;
}

div#breadcrumbs .current span.small-link-item {
    color: var(--breadcrumb-hover) !important;
    font-weight: 600 !important;
}

/* Breadcrumb separator */
span.breadcrumb-separator {
    color: #64748b !important;
    font-weight: 400 !important;
    font-size: 0.875rem !important;
    width: auto !important;
    padding: 0 0.375rem !important;
}

/* Breadcrumb icons */
div#breadcrumbs img.small-icon,
div#breadcrumbs i.small-icon {
    opacity: 0.8;
    margin-right: 0.375rem;
    color: #475569;
}

/* Empty span used as flex spacer */
div#breadcrumbs>span:empty {
    flex-grow: 1;
}

/* Special styling for highlighted items (Open Ticket, FAQ) */
div#header a.highlight-ticket-item {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: white !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 0.875rem !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(5, 150, 105, 0.3) !important;
}

div#header a.highlight-ticket-item:hover {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(5, 150, 105, 0.3) !important;
}

div#header a.highlight-ticket-item span.small-link-item {
    color: white !important;
}

div#header a.highlight-faq-item {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: white !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 0.875rem !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3) !important;
}

div#header a.highlight-faq-item:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3) !important;
}

div#header a.highlight-faq-item span.small-link-item {
    color: white !important;
}

/* User profile link styling */
div#smallLinks>div.small-link-item:last-of-type {
    padding: 0 !important;
    margin-right: 0 !important;
}

div#smallLinks>div.small-link-item:last-of-type>a.small-link-item,
div#smallLinks>a.small-link-item:last-of-type {
    background: var(--header-hover-bg) !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem !important;
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Center the icon in logout button - remove margin */
div#smallLinks>div.small-link-item:last-of-type img.small-icon,
div#smallLinks>div.small-link-item:last-of-type i.small-icon,
div#smallLinks>a.small-link-item:last-of-type img.small-icon,
div#smallLinks>a.small-link-item:last-of-type i.small-icon {
    margin: 0 !important;
}

div#smallLinks>div.small-link-item:last-of-type:hover>a.small-link-item,
div#smallLinks>a.small-link-item:last-of-type:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* "New portal" link styling */
div#breadcrumbs a[href*="spa"],
div#breadcrumbs a[href*="portal"] {
    color: var(--header-accent) !important;
    font-weight: 600 !important;
}

/* "New portal" wrapper - push to right end after socials */
div#breadcrumbs>div[style*="float"] {
    float: none !important;
    margin-left: 0.75rem;
    order: 101;
}

/* Social links in header (if any) */
div#header a i.fa-facebook,
div#header a i.fa-instagram,
div#header a i.fa-linkedin,
div#header a i.fa-twitter,
div#header a i.fa-x-twitter,
div#header a i.fa-wordpress,
div#header a i.fa-youtube {
    opacity: 0.7;
    transition: all 0.2s ease;
    color: #94a3b8;
}

div#header a:hover i.fa-facebook,
div#header a:hover i.fa-instagram,
div#header a:hover i.fa-linkedin,
div#header a:hover i.fa-twitter,
div#header a:hover i.fa-x-twitter,
div#header a:hover i.fa-wordpress,
div#header a:hover i.fa-youtube {
    opacity: 1;
    color: #60a5fa;
}

/* ========================================
   SIDEBAR / MENU MODERNIZATION
   ======================================== */

div#menu {
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 1rem !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05) !important;
    padding: 0.75rem !important;
    margin: 0.5rem 0.75rem !important;
    overflow: hidden;
}

div#menu .menu-container {
    min-width: 220px;
}

div#menu .menu-container>table {
    width: 100%;
    border-collapse: collapse;
}

div#menu td.menu-item {
    padding: 1px 0;
}

/* Menu item container */
div#menu div.small-link-item {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    position: relative;
}

/* Override inline padding-left */
div#menu div.small-link-item[style*="padding-left"] {
    padding-left: 0 !important;
}

/* Tree lines using td.menu-item levels */
div#menu td.menu-item {
    position: relative;
}

/* Level 1 indentation */
div#menu td.menu-item[level="1"] {
    padding-left: 12px !important;
}

div#menu td.menu-item[level="1"]::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #cbd5e1;
}

div#menu td.menu-item[level="1"]::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    width: 6px;
    height: 1px;
    background: #cbd5e1;
}

/* Level 2 indentation */
div#menu td.menu-item[level="2"] {
    padding-left: 24px !important;
}

div#menu td.menu-item[level="2"]::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #cbd5e1;
}

div#menu td.menu-item[level="2"]::after {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    width: 6px;
    height: 1px;
    background: #cbd5e1;
}

/* Level 3 indentation */
div#menu td.menu-item[level="3"] {
    padding-left: 36px !important;
}

div#menu td.menu-item[level="3"]::before {
    content: '';
    position: absolute;
    left: 28px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #cbd5e1;
}

div#menu td.menu-item[level="3"]::after {
    content: '';
    position: absolute;
    left: 28px;
    top: 50%;
    width: 6px;
    height: 1px;
    background: #cbd5e1;
}

/* Level 0 - no tree lines */
div#menu td.menu-item[level="0"]::before,
div#menu td.menu-item[level="0"]::after,
div#menu td.menu-item:not([level])::before,
div#menu td.menu-item:not([level])::after {
    display: none !important;
}

/* Highlight tree lines for current item */
div#menu td.menu-item:has(.current)::before {
    background: #3b82f6 !important;
    width: 2px !important;
}

div#menu td.menu-item:has(.current)::after {
    background: #3b82f6 !important;
    height: 2px !important;
}

/* Menu item link - all visual styling here */
div#menu a.small-link-item {
    display: flex !important;
    align-items: center;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.375rem !important;
    margin: 0.125rem 0 !important;
    background: transparent !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
    color: #475569 !important;
}

div#menu a.small-link-item:hover {
    background: rgba(59, 130, 246, 0.08) !important;
}

/* Current/active menu item */
div#menu div.small-link-item.current>a.small-link-item,
div#menu a.small-link-item.current {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #1e40af !important;
    font-weight: 600 !important;
}

div#menu div.small-link-item.current,
div#menu a.small-link-item.current {
    position: relative;
}

/* Menu item text */
div#menu span.small-link-item {
    color: inherit !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div#menu div.small-link-item.current span.small-link-item,
div#menu a.small-link-item.current span.small-link-item {
    color: #1e40af !important;
    font-weight: 600 !important;
}

div#menu a.small-link-item:hover span.small-link-item {
    color: #1e40af !important;
}

/* Menu icons */
div#menu img.small-icon,
div#menu i.small-icon {
    margin-right: 0.625rem;
    opacity: 0.7;
    flex-shrink: 0;
    color: #64748b;
    transition: all 0.15s ease;
}

div#menu a.small-link-item:hover img.small-icon,
div#menu a.small-link-item:hover i.small-icon,
div#menu div.small-link-item.current img.small-icon,
div#menu div.small-link-item.current i.small-icon,
div#menu a.small-link-item.current img.small-icon,
div#menu a.small-link-item.current i.small-icon {
    opacity: 1;
    color: #3b82f6;
}

/* Menu separators - visible horizontal line */
div#menu img[src*="form-break"],
div#menu img[src*="form-break"][style] {
    display: block !important;
    width: calc(100% - 1rem) !important;
    height: 1px !important;
    border: none !important;
    background: #cbd5e1 !important;
    opacity: 1 !important;
    padding: 0 !important;
    margin: 0.625rem 0.5rem !important;
    box-sizing: border-box !important;
}

/* Separator container with indent */
div#menu td.menu-item>div:not(.small-link-item) {
    padding: 0 !important;
}

div#menu td.menu-item>div[style*="padding-left"] {
    padding-left: 0 !important;
}

/* Alternative separator styling (fallback for hr elements) */
div#menu hr,
div#menu .separator {
    border: none !important;
    height: 1px !important;
    background: #cbd5e1 !important;
    margin: 0.625rem 0.5rem !important;
}

/* Menu section title (if any non-link items) */
div#menu div.small-link-item:not(:has(a)) {
    padding: 0.5rem 0.875rem !important;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Menu scroll behavior for long menus */
div#menu .menu-container {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Custom scrollbar for menu */
div#menu .menu-container::-webkit-scrollbar {
    width: 4px;
}

div#menu .menu-container::-webkit-scrollbar-track {
    background: transparent;
}

div#menu .menu-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}

div#menu .menu-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* FontAwesome icon styling */
i.small-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1rem;
    text-align: center;
    font-size: 1rem;
    margin-right: 0.5rem;
    color: #64748b;
    transition: all 0.2s ease;
    vertical-align: middle;
}

i.medium-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.375rem;
    text-align: center;
    font-size: 1.25rem;
    margin-right: 0.5rem;
    color: #64748b;
    transition: all 0.2s ease;
    vertical-align: middle;
    padding: 1px;
}

i.large-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    text-align: center;
    font-size: 1.75rem;
    margin-right: 0.5rem;
    color: #64748b;
    transition: all 0.2s ease;
    vertical-align: middle;
    padding: 1px;
}

/* Hover state for icons */
a:hover i.small-icon,
a:hover i.medium-icon,
a:hover i.large-icon,
div.small-link-item:hover i.small-icon,
div.medium-link-item:hover i.medium-icon,
div.large-link-item:hover i.large-icon {
    color: #3b82f6;
}

/* Header icon specific style */
div#header i.small-icon,
div#header i.medium-icon,
div#header i.large-icon {
    color: #94a3b8;
}

div#header a:hover i.small-icon,
div#header a:hover i.medium-icon,
div#header a:hover i.large-icon {
    color: #60a5fa;
    transform: scale(1.05);
}

/* Menu icon specific style */
div#menu i.small-icon {
    color: #64748b;
}

div#menu a:hover i.small-icon,
div#menu .current i.small-icon {
    color: #3b82f6;
}

/* Breadcrumb icon specific style */
div#breadcrumbs i.small-icon {
    color: #94a3b8;
    font-size: 0.875rem;
}

div#breadcrumbs a:hover i.small-icon {
    color: #1e40af;
}

/* Separator in menu */
div#menu hr,
div#menu .separator {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 0.5rem 0;
}

/* Content frame modernization */
div.frame.content-noexpand,
div.frame.content-expand {
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05) !important;
}

/* Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

div#header {
    animation: fadeInDown 0.3s ease-out;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    div#header>table>tbody>tr.header-nav-row>td {
        padding: 0.375rem 0.5rem;
    }

    div#sections {
        gap: 0.125rem;
    }

    div#header div.small-link-item,
    div#header a.small-link-item {
        padding: 0.375rem 0.5rem !important;
        font-size: 0.8125rem !important;
    }

    div#breadcrumbs {
        padding: 0.375rem 0.5rem;
    }
}

/* Ensure proper spacing for layout */
div#layout-header {
    padding-top: 0 !important;
    min-width: auto;
}

/* Fix frame spacer */
div.frame-spacer {
    height: 0.5rem;
    clear: both;
}

/* Frame styling - general */
div.frame {
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04) !important;
    margin: 0.5rem 0.5rem !important;
    padding: 1rem !important;
}

/* Social links container - push to the right */
div#breadcrumbs>a.social-link:first-of-type {
    margin-left: auto;
}

/* Social links in breadcrumbs */
a.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 0.125rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    background: rgba(0, 0, 0, 0.05);
    float: none !important;
    order: 100;
}

a.social-link:hover {
    background: rgba(59, 130, 246, 0.12);
    transform: translateY(-1px);
}

/* Center icons inside social links - override default margins */
a.social-link img.small-icon,
a.social-link i.small-icon {
    opacity: 0.8;
    transition: all 0.2s ease;
    color: #64748b;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    font-size: 1rem !important;
}

a.social-link:hover img.small-icon,
a.social-link:hover i.small-icon {
    opacity: 1;
    color: #3b82f6;
}

/* Search container in header */
div.small-link-item.safefleet-search-container {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    padding: 0 0.5rem !important;
    margin: 0 !important;
}

/* Search button styling */
a.small-link-item.safefleet-search-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.375rem !important;
    border-radius: 0.375rem !important;
    background: rgba(255, 255, 255, 0.1) !important;
    transition: all 0.15s ease !important;
}

a.small-link-item.safefleet-search-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

a.small-link-item.safefleet-search-btn i.small-icon {
    color: var(--header-text) !important;
    margin: 0 !important;
    font-size: 0.875rem !important;
}

/* Search box styling */
input[type=text].safefleet-search {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 0.5rem !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    color: #1e293b !important;
    width: 140px !important;
    margin: 0 !important;
    top: 0 !important;
    transition: all 0.2s ease !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

input[type=text].safefleet-search:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
    width: 180px !important;
}

input[type=text].safefleet-search::placeholder {
    color: #9ca3af !important;
}

/* Search dropdown */
div.safefleet-search.frame {
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    padding: 0.75rem !important;
    position: fixed !important;
    top: 60px !important;
    z-index: 9998 !important;
    max-height: 70vh;
    overflow-y: auto;
}

div.safefleet-search-result {
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.375rem !important;
    transition: background 0.15s ease;
}

div.safefleet-search-result:hover {
    background: rgba(59, 130, 246, 0.08);
}

td.safefleet-search-header {
    color: #1e40af !important;
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 0.75rem 0.375rem !important;
}

h3.safefleet-search-subtitle {
    color: #6b7280 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Notifications styling */
div.notifications {
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    padding: 0.5rem !important;
}

div.notifications-link-item {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border-radius: 50% !important;
    color: white !important;
    font-size: 0.6875rem !important;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.3) !important;
}

/* Language dropdown enhancement */
div.switch-languages {
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    padding: 0.5rem !important;
    z-index: 9999 !important;
    position: fixed !important;
    top: 52px !important;
    max-height: 70vh;
    overflow-y: auto;
}

div.switch-languages a.language-flag {
    display: flex !important;
    align-items: center !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.375rem !important;
    margin: 0.125rem 0 !important;
    transition: background 0.15s ease !important;
    color: #374151 !important;
    text-decoration: none !important;
}

div.switch-languages a.language-flag:hover {
    background: rgba(59, 130, 246, 0.1) !important;
}

div.switch-languages a.language-flag img.flag {
    margin-right: 0.5rem !important;
    border-radius: 2px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

div.switch-languages span.language-flag-label {
    color: #374151 !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

/* Footer modernization */
div#footer {
    background: #f8fafc !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-right: none !important;
    border-radius: 0.75rem 0 0 0.75rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 50vw 0 0 0 #f8fafc, 100vw 0 0 0 #f8fafc, 150vw 0 0 0 #f8fafc, 200vw 0 0 0 #f8fafc, 250vw 0 0 0 #f8fafc, 50vw 1px 3px rgba(0, 0, 0, 0.05), 100vw 1px 3px rgba(0, 0, 0, 0.05), 150vw 1px 3px rgba(0, 0, 0, 0.05), 200vw 1px 3px rgba(0, 0, 0, 0.05), 250vw 1px 3px rgba(0, 0, 0, 0.05) !important;
    padding: 0.75rem 1rem !important;
    margin: 0.75rem 0 0.75rem 0.75rem !important;
}

div#footer-note {
    color: #64748b;
    font-size: 0.8125rem;
}

/* Instance switcher */
div.switch-instances {
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    padding: 0.5rem !important;
}

/* New portal link enhancement */
div#breadcrumbs a.small-link-item[href*="spa"],
div#breadcrumbs a[href*="spa"] span.small-link-item {
    color: #059669 !important;
    font-weight: 600 !important;
}

div#breadcrumbs a.small-link-item[href*="spa"]:hover,
div#breadcrumbs a[href*="spa"]:hover span.small-link-item {
    color: #047857 !important;
}

/* Layout table styling */
table.layout {
    border-spacing: 0;
}

td.layout-central {
    background: transparent;
    vertical-align: top;
}

/* Left side container */
td#leftSideContainer {
    width: 260px !important;
    min-width: 260px !important;
    background: transparent;
}

/* Right side container */
td#rightSideContainer {
    width: 260px !important;
    min-width: 260px !important;
    background: transparent;
}

/* Layout content area */
div#layout-content {
    padding: 0 0.5rem;
}

div#layout-left-side,
div#layout-right-side {
    position: sticky;
    top: 0.5rem;
}

/* Smooth transitions on all interactive elements */
a,
button,
input,
select {
    transition: all 0.2s ease;
}

/* Better link colors */
a {
    color: #2563eb;
}

a:hover {
    color: #1d4ed8;
}

/* Form elements modernization */
select {
    border-radius: 0.5rem !important;
    border: 1px solid #d1d5db !important;
    padding: 0.375rem 0.75rem !important;
    background: white !important;
    font-size: 0.875rem !important;
}

/* Fix datepicker select padding */
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    padding: 0 !important;
}

select:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

/* Improved message styling */
div.message {
    margin: 0.75rem;
    padding: 0;
    background: transparent;
}

span.message {
    display: inline-block;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    font-weight: 500;
    font-size: 0.875rem;
}

span.message.info {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    color: #0369a1;
    border: 1px solid #7dd3fc;
}

span.message.warning {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: 1px solid #fcd34d;
}

span.message.error {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #b91c1c;
    border: 1px solid #fca5a5;
}

/* Text input modernization */
input[type=text],
input[type=password],
input[type=number],
input[type=email],
input[type=date],
input[type=datetime],
textarea {
    border: 1px solid #d1d5db !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    transition: all 0.2s ease !important;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type=date]:focus,
input[type=datetime]:focus,
textarea:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

/* Progress bar modernization */
div.progress-bar {
    border-radius: 9999px !important;
    border: none !important;
    background: #e2e8f0 !important;
    overflow: hidden;
}

div.progress-bar>div.progress-indicator {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border-radius: 9999px;
}

/* Dialog modernization */
div.modal-dialog-glass {
    background-color: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

div.modal-dialog {
    background: white !important;
    border-radius: 1rem !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

div.modal-dialog-title {
    color: #1e293b;
    font-weight: 600;
}

div.floating-dialog {
    background: white !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 0.75rem !important;
}

/* Floating dialog container - ensure proper positioning */
div.floating-dialog-container {
    z-index: 2000 !important;
    position: absolute !important;
}

/* Floating dialog top bar */
div.floating-dialog-top-bar {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    padding: 0.25rem 0 !important;
}

/* Floating dialog buttons - shade and close */
div.floating-dialog-shade-button,
div.floating-dialog-close-button {
    opacity: 0.6 !important;
    transition: opacity 0.15s ease !important;
    border-radius: 4px !important;
}

div.floating-dialog-shade-button:hover,
div.floating-dialog-close-button:hover {
    opacity: 1 !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Hide the separator image in floating dialogs */
div.floating-dialog-separator img {
    opacity: 0.3;
}

/* Options table styling */
table.options {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 0.875rem !important;
}

table.options td.option-label label {
    color: #475569 !important;
    cursor: pointer;
}

table.options td.option-label label:hover {
    color: #1e293b !important;
}

table.options input[type="checkbox"] {
    accent-color: #3b82f6;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

/* Map control buttons */
p.map-control {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    background: #e0edff !important;
    color: #1e40af !important;
    border-radius: 0.375rem !important;
    padding: 0.375rem 0.75rem !important;
    transition: all 0.15s ease !important;
    border: 1px solid transparent !important;
}

p.map-control:hover {
    background: #bfdbfe !important;
    border-color: #93c5fd !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* FontAwesome button icons */
i.button-icon {
    margin-right: 0.375rem;
    font-size: 0.875rem;
    vertical-align: middle;
}

/* Hint callout styling */
div.hint-callout-body {
    position: relative !important;
    padding-right: 1.25rem !important;
}

/* Hint callout close button - positioned top right */
i.hint-callout-close {
    position: absolute !important;
    top: 5px;
    right: 0.5rem;
    cursor: pointer;
    color: #64748b;
    font-size: 0.875rem;
    padding: 0.25rem;
    transition: all 0.15s ease;
    border-radius: 0.25rem;
}

i.hint-callout-close:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* Date/time picker navigation buttons */
a.datetime-prev-next-button i {
    color: #3b82f6;
    font-size: 0.75rem;
    margin: 0 1px;
}

a.datetime-prev-next-button:hover i {
    color: #1d4ed8;
}

/* Menu close button - positioned top right */
i.menu-close {
    position: absolute !important;
    top: 5px;
    right: 5px;
    cursor: pointer;
    color: #94a3b8;
    font-size: 1rem;
    padding: 0.5rem;
    transition: all 0.15s ease;
    z-index: 10;
    border-radius: 0.375rem;
}

i.menu-close:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* Ensure menu container has relative positioning */
div.menu-container {
    position: relative !important;
}