/* ============================================================
   Modern Theme for SiteOmat - Served by Proxy as /modern-theme.css
   Injected via <link> tag into ALL HTML pages (including iframes)
   Uses the ACTUAL selectors from the SiteOmat application.
   ============================================================ */

/* ============================================================
   KEYFRAME ANIMATIONS
   ============================================================ */

@keyframes loginFadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes loginSlideLeft {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to   { opacity: 0; transform: translateX(-110%) scale(0.93); }
}

@keyframes loginSpin {
    to { transform: rotate(360deg); }
}

@keyframes loginOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes loginOverlayOut {
    from { opacity: 1; background: linear-gradient(135deg, #2a3d55 0%, #3a4f68 55%, #4a6680 100%); }
    to   { opacity: 1; background: #ffffff; }
}

/* ============================================================
   GLOBAL: Font & base styling (exclude icon fonts!)
   ============================================================ */
html, body, div, form, input, select, table, textarea, button, a, span, label, td, th, li, p, h1, h2, h3, h4, h5, h6 {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Preserve icon fonts - do NOT override these */
.fa, .fas, .far, .fab, .glyphicon, [class^="fa-"], [class*=" fa-"],
[class^="glyphicon-"], [class*=" glyphicon-"], .icon, .nav_icon {
    font-family: inherit !important;
}

.fa, [class^="fa-"], [class*=" fa-"] {
    font-family: 'FontAwesome' !important;
}

.glyphicon, [class^="glyphicon-"], [class*=" glyphicon-"] {
    font-family: 'Glyphicons Halflings' !important;
}

body {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ============================================================
   MAIN PAGE (main.htm) - Outer frame
   ============================================================ */

/* Top strip: cleaner white bar with subtle shadow */
#main_page_ho .menu_top_strip_ho {
    background-color: #ffffff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
    border-bottom: 1px solid #e8ecef !important;
}

/* Main content area: lighter, modern grey */
#main_page_ho .main_content_ho {
    background: #f4f6f9 !important;
}

/* Toggle menu icon: softer color */
#main_page_ho .expand {
    color: #a0a8b4 !important;
    transition: color 0.2s ease !important;
}

#main_page_ho .expand:hover {
    color: #5a6978 !important;
}

/* ============================================================
   LEFT MENU (leftmenu.htm inside #left_menu iframe)
   ============================================================ */

/* Left menu background: modern dark with slightly blue tint */
#left_menu_navigation_ho {
    background-color: #2c3345 !important;
    color: #b8c7db !important;
}

/* Sidebar nav container */
#left_menu_navigation_ho .sidebar_nav_ho {
    background-color: #2c3345 !important;
    color: #b8c7db !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* archive_indicator sits between the logo and the nav, remove its top gap */
#left_menu_navigation_ho #archive_indicator {
    margin-top: 0 !important;
}

/* Menu items - background */
#left_menu_navigation_ho .sidebar_nav_ho li {
    background-color: #2c3345 !important;
    color: #b8c7db !important;
}

/* Menu links: modern spacing and font */
#left_menu_navigation_ho .sidebar_nav_ho li a {
    background-color: #2c3345 !important;
    color: #b8c7db !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2px !important;
    padding: 11px 16px !important;
    line-height: 22px !important;
    transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease !important;
}

/* Menu hover: subtle highlight */
#left_menu_navigation_ho .sidebar_nav_ho li a:hover {
    background-color: #3a4358 !important;
    color: #e2ebf6 !important;
    padding-left: 20px !important;
}

/* Active/focus menu items */
#left_menu_navigation_ho .sidebar_nav_ho li a:active,
#left_menu_navigation_ho .sidebar_nav_ho li a:focus {
    background-color: #3a4358 !important;
    color: #e2ebf6 !important;
}

/* Open dropdown nav item */
#left_menu_navigation_ho .nav .open > a,
#left_menu_navigation_ho .nav .open > a:hover,
#left_menu_navigation_ho .nav .open > a:focus {
    background-color: #3a4358 !important;
    color: #e2ebf6 !important;
    border: none !important;
}

/* Dropdown menu (the expanded sub-items) */
#left_menu_navigation_ho .navbar-nav .open .dropdown-menu {
    background-color: #232a3a !important;
    padding: 4px 0 !important;
    border-radius: 0 0 6px 6px !important;
    border: none !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

/* Dropdown items */
#left_menu_navigation_ho .dropdown-menu > li > a {
    background-color: #232a3a !important;
    color: #91a3b8 !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    padding: 8px 20px 8px 32px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

#left_menu_navigation_ho .dropdown-menu > li > a:hover,
#left_menu_navigation_ho .dropdown-menu > li > a:focus {
    background-color: #2c3345 !important;
    color: #e2ebf6 !important;
}

/* Icons in the menu: modern accent color */
#left_menu_navigation_ho .text-info-dker {
    color: #5ba4cf !important;
}

#left_menu_navigation_ho .sidebar_nav_ho li a:hover .text-info-dker,
#left_menu_navigation_ho .dropdown-menu > li > a:hover .text-info-dker {
    color: #7ec4e8 !important;
}

/* Menu icons spacing */
#left_menu_navigation_ho i {
    margin-right: 10px !important;
    font-size: 15px !important;
    width: 20px !important;
    text-align: center !important;
}

/* Logo area */
#left_menu_navigation_ho #logo_orpak {
    margin-top: 24px !important;
    margin-bottom: 4px !important;
    padding: 0 16px !important;
}

#left_menu_navigation_ho #module_logo {
    margin-top: 20px !important;
    margin-bottom: 4px !important;
}

/* Kill Bootstrap .navbar default padding between logo and first menu item */
#left_menu_navigation_ho .sidebar_nav_ho .navbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
    border: none !important;
}

/* Bottom logos */
#left_menu_navigation_ho #bottom_logos {
    bottom: 16px !important;
    opacity: 0.6 !important;
    transition: opacity 0.2s ease !important;
}

#left_menu_navigation_ho #bottom_logos:hover {
    opacity: 1 !important;
}

/* ============================================================
   INNER PAGES (loaded in #main iframe) - Forms, tables, buttons
   ============================================================ */

/* Content body background */
body, .main-body-x {
    background-color: #f4f6f9 !important;
}

/* Form controls: modern rounded inputs */
.form-control, input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], input[type="tel"], input[type="url"] {
    border-radius: 6px !important;
    border: 1px solid #d1d9e0 !important;
    padding: 5px 10px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    background-color: #fff !important;
    font-size: 13px !important;
}

.form-control:focus, input[type="text"]:focus, input[type="password"]:focus {
    border-color: #5ba4cf !important;
    box-shadow: 0 0 0 3px rgba(91, 164, 207, 0.15) !important;
    outline: none !important;
}

/* Select dropdowns */
select, select.form-control {
    border-radius: 6px !important;
    border: 1px solid #d1d9e0 !important;
    background-color: #fff !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
}

/* Textareas */
textarea {
    border-radius: 6px !important;
    border: 1px solid #d1d9e0 !important;
    background-color: #fff !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
}

textarea:focus {
    border-color: #5ba4cf !important;
    box-shadow: 0 0 0 3px rgba(91, 164, 207, 0.15) !important;
    outline: none !important;
}

/* ============================================================
   BUTTONS - All variants
   ============================================================ */

button, input[type="button"], input[type="submit"], .btn {
    border-radius: 6px !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    letter-spacing: 0.2px !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
    border: 1px solid #d1d9e0 !important;
    background-color: #fff !important;
    color: #3a4556 !important;
    padding: 5px 14px !important;
}

button:hover, input[type="button"]:hover, input[type="submit"]:hover, .btn:hover {
    background-color: #f0f4f8 !important;
    border-color: #b8c4d0 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}

button:active, input[type="button"]:active, input[type="submit"]:active, .btn:active {
    background-color: #e4e9ef !important;
    box-shadow: none !important;
}

/* Primary buttons */
.btn-primary {
    background-color: #4a7cc9 !important;
    border-color: #4a7cc9 !important;
    color: #fff !important;
}

.btn-primary:hover {
    background-color: #3d6ab5 !important;
    border-color: #3d6ab5 !important;
    color: #fff !important;
}

/* Success buttons */
.btn-success {
    background-color: #48a868 !important;
    border-color: #48a868 !important;
    color: #fff !important;
}

.btn-success:hover {
    background-color: #3d925a !important;
    border-color: #3d925a !important;
    color: #fff !important;
}

/* Danger/Warning buttons */
.btn-danger {
    background-color: #d65050 !important;
    border-color: #d65050 !important;
    color: #fff !important;
}

.btn-danger:hover {
    background-color: #c24444 !important;
    border-color: #c24444 !important;
    color: #fff !important;
}

.btn-warning {
    background-color: #e8a640 !important;
    border-color: #e8a640 !important;
    color: #fff !important;
}

/* Info buttons */
.btn-info {
    background-color: #4aadcf !important;
    border-color: #4aadcf !important;
    color: #fff !important;
}

/* SiteOmat-specific button sizes */
.btn-small {
    font-size: 12px !important;
    padding: 4px 10px !important;
}

.btn-medium {
    font-size: 13px !important;
    padding: 5px 14px !important;
}

.btn-large {
    font-size: 14px !important;
    padding: 7px 18px !important;
}

/* Login buttons - styled in the LOGIN PAGE section below */

/* ============================================================
   BUTTON BARS (SiteOmat toolbar rows)
   ============================================================ */

.buttons_bar_left_75,
.buttons_bar_center_relative,
.buttons_bar_center_relative_no_border,
.buttons_bar_center,
.buttons_bar_left_relative,
.buttons_bar_left_relative_main {
    background-color: #fff !important;
    border: 1px solid #e2e8ed !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    margin-bottom: 8px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

/* ============================================================
   PANELS (SiteOmat content panels)
   ============================================================ */

.panel_ho, .panel_ho_general {
    background-color: #fff !important;
    border: 1px solid #e2e8ed !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
}

.table_panel {
    background-color: #fff !important;
    border: 1px solid #e2e8ed !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
}

.panel_general_margin {
    background-color: #fff !important;
    border: 1px solid #e2e8ed !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    padding: 12px 16px !important;
    margin: 8px !important;
}

.panel_general_margin_top {
    background-color: #fff !important;
    border: 1px solid #e2e8ed !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    padding: 12px 16px !important;
    margin-top: 8px !important;
}

/* Bootstrap panel fallbacks */
.panel {
    border-radius: 8px !important;
    border: 1px solid #e2e8ed !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.panel-heading {
    border-radius: 8px 8px 0 0 !important;
    background-color: #f8fafb !important;
    border-bottom: 1px solid #e2e8ed !important;
    font-weight: 600 !important;
    color: #3a4556 !important;
}

.panel-default {
    border-color: #e2e8ed !important;
}

.panel-body {
    padding: 12px 16px !important;
}

/* ============================================================
   TABLES & GRIDS (data views)
   ============================================================ */

table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Standard Bootstrap tables only - NOT dhtmlxGrid th elements */
.table > thead > tr > th {
    background-color: #3a4f68 !important;
    background-image: none !important;
    border: none !important;
    border-bottom: 2px solid #2c3f56 !important;
    border-right: 1px solid #4e6480 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: #e8edf3 !important;
    padding: 8px 12px !important;
    cursor: default !important;
}

.table > tbody > tr > td,
.table > tfoot > tr > td {
    border-top: 1px solid #eef1f4 !important;
    padding: 8px 12px !important;
    vertical-align: middle !important;
    color: #3a4556 !important;
    font-size: 13px !important;
}

.table > tbody > tr:hover > td {
    background-color: #f0f5fa !important;
}

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    background-color: #fafbfd !important;
}

/* SiteOmat grid (dhtmlxGrid) - target ALL skin variants with [class*="gridbox"] */
[class*="gridbox"] {
    border-radius: 8px !important;
    border: 1px solid #e2e8ed !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

[class*="gridbox"] .objbox {
    background-color: #fff !important;
}

[class*="gridbox"] .objbox table tr:hover td {
    background-color: #f0f5fa !important;
}

[class*="gridbox"] .objbox table td {
    border-bottom: 1px solid #eef1f4 !important;
    border-right: 1px solid #eef1f4 !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    color: #3a4556 !important;
}

/* Grid header - flat, contrasted - covers all gridbox_* skins */
/* xhdr: the outer header wrapper - rounded top corners */
[class*="gridbox"] .xhdr {
    background-color: #3a4f68 !important;
    background-image: none !important;
    border-radius: 6px 6px 0 0 !important;
    overflow: hidden !important;
}

/* hdr table and its cells - no padding on td (dhtmlxGrid uses td width for column sizing) */
[class*="gridbox"] table.hdr,
[class*="gridbox"] table.hdr td {
    background-color: #3a4f68 !important;
    background-image: none !important;
    border: none !important;
    border-right: 1px solid #4e6480 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    color: #e8edf3 !important;
    padding: 0 !important;
    cursor: default !important;
}

/* hdrcell div - padding goes here, not on the td */
[class*="gridbox"] table.hdr td div.hdrcell,
[class*="gridbox"] .hdrcell {
    background-color: #3a4f68 !important;
    background-image: none !important;
    border: none !important;
    color: #e8edf3 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Grid selected row */
[class*="gridbox"] .objbox table tr.rowselected td {
    background-color: #e3edf7 !important;
    color: #2c3e58 !important;
}

/* Even/odd row coloring */
[class*="gridbox"] .objbox table tr.even td {
    background-color: #fafbfd !important;
}

[class*="gridbox"] .objbox table tr.odd td {
    background-color: #fff !important;
}

/* === Pager bar: absolute at bottom-right of its panel, above the action buttons === */

/* Create room below the grid so the pager doesn't overlap the last row */
#gridbox {
    margin-bottom: 36px !important;
}

#paging {
    position: absolute !important;
    bottom: 0 !important;
    right: 3px !important;
    left: auto !important;
    width: auto !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 8px !important;
    background-color: #f0f4f8 !important;
    border: 1px solid #e2e8ed !important;
    border-bottom: none !important;
    border-radius: 6px 6px 0 0 !important;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.04) !important;
}

/* Nav arrow images: static flex items (override original absolute positioning) */
#goFirstPage,
#goPrevPage,
#goNextPage,
#goLastPage {
    position: static !important;
    left: auto !important;
    top: auto !important;
    flex-shrink: 0 !important;
    width: 20px !important;
    height: 20px !important;
    cursor: pointer !important;
}

/* Page-range display field */
#count {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 145px !important;
    border: 1px solid #d0d7e0 !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    font-size: 12px !important;
    color: #3a4556 !important;
    background-color: #fff !important;
}

/* Tabs */
.nav-tabs {
    border-bottom: 2px solid #e2e8ed !important;
}

.nav-tabs > li > a {
    border-radius: 6px 6px 0 0 !important;
    color: #5a6978 !important;
    font-weight: 500 !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
    border-color: #e2e8ed !important;
    border-bottom-color: #fff !important;
    color: #2c3345 !important;
    font-weight: 600 !important;
}

/* Dropdown menus in content area */
.dropdown-menu {
    border-radius: 8px !important;
    border: 1px solid #e2e8ed !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    padding: 4px 0 !important;
}

.dropdown-menu > li > a {
    padding: 8px 16px !important;
    font-size: 13px !important;
    transition: background-color 0.15s ease !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: #f0f4f8 !important;
    color: #2c3345 !important;
}

/* Wells & pre */
.well, pre {
    border-radius: 8px !important;
    background-color: #f4f6f9 !important;
    border: 1px solid #e2e8ed !important;
}

/* Badges */
.badge {
    border-radius: 12px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
}

/* Alerts */
.alert {
    border-radius: 8px !important;
}

/* ============================================================
   LOGO / HOME PAGE (logo_-olic.htm / logo_olic.htm)
   ============================================================ */

/* Icon container: flex row so all 3 icons sit side by side and wrap on small screens */
#logos_olic_icons,
#logos_-olic_icons {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 8px !important;
}

/* Images: cap at 160px and scale down responsively via min() */
#logos_olic_icons img,
#logos_-olic_icons img,
#logos_olic div img,
#logos_-olic div img {
    width: min(28vw, 160px) !important;
    height: auto !important;
    border-radius: 12px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

#logos_olic_icons img:hover,
#logos_-olic_icons img:hover,
#logos_olic div img:hover,
#logos_-olic div img:hover {
    transform: scale(1.03) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

.data_olic {
    color: #5a6978 !important;
    font-size: 11pt !important;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */

/* Full-screen gradient background matching the theme */
.login_page,
body.login_page {
    background: linear-gradient(135deg, #2a3d55 0%, #3a4f68 55%, #4a6680 100%) !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* Container centering */
.container_login_page {
    margin-top: 0 !important;
    width: 100% !important;
    max-width: 400px !important;
}

/* Logo area */
#logo_orpak_login {
    top: 0 !important;
    margin-bottom: 4px !important;
}

/* Reduce .m-t gap between logo and login card (only on login page) */
#login_page_ho .container_login_page .m-b-lg {
    margin-top: 4px !important;
}

#company_logo_img {
    max-width: 280px !important;
    max-height: 120px !important;
    width: auto !important;
    height: auto !important;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)) !important;
}

/* Login panel entry animation */
#LoginPanel {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    text-align: center !important;
    animation: loginFadeUp 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both !important;
}

/* Login card */
#Login {
    background: #fff !important;
    border-radius: 14px !important;
    padding: 20px 24px 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    margin: 0 auto !important;
    width: 330px !important;
    text-align: left !important;
    position: relative !important;
}

/* Login title */
#ho_login {
    font-weight: 700 !important;
    font-size: 20px !important;
    color: #2c3345 !important;
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    letter-spacing: -0.3px !important;
}

/* Input group list */
#Login .list-group {
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8ed !important;
    margin-bottom: 16px !important;
    box-shadow: none !important;
}

#Login .list-group-item {
    border: none !important;
    border-bottom: 2px solid #c8d3df !important;
    padding: 4px 12px !important;
    background: #fff !important;
}

#Login .list-group-item:last-child {
    border-bottom: none !important;
}

/* Input fields */
#Login input[type="text"],
#Login input[type="password"],
#Login .form-control {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #2c3345 !important;
    font-size: 14px !important;
    padding: 4px 4px !important;
    height: 30px !important;
}

#Login input[type="text"]:focus,
#Login input[type="password"]:focus {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

#Login input::placeholder {
    color: #a0aab4 !important;
}

/* Login button */
#loginbut, #Submit1 {
    width: 100% !important;
    border-radius: 10px !important;
    background-color: #3a4f68 !important;
    border-color: #3a4f68 !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 11px 24px !important;
    letter-spacing: 0.2px !important;
    transition: background-color 0.18s ease, transform 0.12s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

#loginbut:hover:not(:disabled), #Submit1:hover:not(:disabled) {
    background-color: #2a3d55 !important;
    border-color: #2a3d55 !important;
    color: #fff !important;
}

#loginbut:active:not(:disabled) {
    transform: scale(0.98) !important;
}

#loginbut:disabled {
    opacity: 0.75 !important;
    cursor: default !important;
}

/* Spinner element used by inject.js */
.login-btn-spinner {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    border: 2px solid rgba(255,255,255,0.35) !important;
    border-top-color: #fff !important;
    border-radius: 50% !important;
    animation: loginSpin 0.7s linear infinite !important;
    flex-shrink: 0 !important;
}

/* Success: slide card to the left (slower) */
#LoginPanel.login-success {
    animation: loginSlideLeft 0.85s cubic-bezier(0.55, 0, 1, 0.45) forwards !important;
}

/* Full-screen overlay that fades in after the card slides, hides the redirect flash */
.login-transition-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: linear-gradient(135deg, #2a3d55 0%, #3a4f68 55%, #4a6680 100%) !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Start invisible, delay 0.45s so card slides first, then fade in over 0.4s */
    animation: loginOverlayIn 0.4s ease 0.45s both !important;
    pointer-events: all !important;
}

/* Larger spinner shown on the overlay */
.login-transition-overlay .login-btn-spinner {
    width: 40px !important;
    height: 40px !important;
    border-width: 3px !important;
    border-color: rgba(255,255,255,0.25) !important;
    border-top-color: #fff !important;
    animation: loginSpin 0.9s linear infinite !important;
}

/* Overlay fades out to white when .fade-white is added by inject.js */
.login-transition-overlay.fade-white {
    animation: loginOverlayOut 0.45s ease forwards !important;
    background: #ffffff !important;
}

.login-transition-overlay.fade-white .login-btn-spinner {
    display: none !important;
}

/* Change password link */
#password_change {
    color: #6b7d91 !important;
    font-size: 13px !important;
    text-decoration: none !important;
}

#password_change:hover {
    color: #3a4f68 !important;
    text-decoration: underline !important;
}

/* ============================================================
   GENERAL CONTENT AREA STYLING (right pane)
   ============================================================ */

/* Background for content pages */
body, .ho_background, .main-body-x {
    background-color: #f4f6f9 !important;
}

/* Container spacing */
.container, .container_top_general {
    margin-top: 8px !important;
}

/* Page headings / titles */
h1, h2, h3, h4, h5 {
    color: #2c3345 !important;
    font-weight: 600 !important;
}

/* Labels and captions */
label, .control-label {
    color: #4a5568 !important;
    font-weight: 500 !important;
    font-size: 13px !important;
}

/* Links */
a {
    color: #4a7cc9 !important;
    text-decoration: none !important;
}

a:hover {
    color: #3d6ab5 !important;
    text-decoration: underline !important;
}

/* Text styling */
.bWTexts {
    color: #5a6978 !important;
    font-size: 13px !important;
}

.bWTextsBold {
    color: #3a4556 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

/* ============================================================
   TAB CONTROLS
   ============================================================ */

/* Bootstrap tabs */
.nav-tabs {
    border-bottom: 2px solid #e2e8ed !important;
    margin-bottom: 10px !important;
}

.nav-tabs > li > a {
    border-radius: 6px 6px 0 0 !important;
    color: #5a6978 !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
    border: 1px solid transparent !important;
    transition: color 0.15s ease, border-color 0.15s ease !important;
}

.nav-tabs > li > a:hover {
    border-color: #e2e8ed !important;
    background-color: #f8fafb !important;
    color: #3a4556 !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border-color: #e2e8ed #e2e8ed #fff !important;
    color: #2c3345 !important;
    font-weight: 600 !important;
    background-color: #fff !important;
}

/* SiteOmat tab-specific classes */
.hdr_tab, .tab_row, .tabs_panel {
    background-color: #fff !important;
    border: 1px solid #e2e8ed !important;
    border-radius: 6px 6px 0 0 !important;
}

/* ============================================================
   DROPDOWNS & MENUS (content area)
   ============================================================ */

.dropdown-menu {
    border-radius: 8px !important;
    border: 1px solid #e2e8ed !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    padding: 4px 0 !important;
    background-color: #fff !important;
}

.dropdown-menu > li > a {
    padding: 8px 16px !important;
    font-size: 13px !important;
    color: #3a4556 !important;
    transition: background-color 0.15s ease !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: #f0f4f8 !important;
    color: #2c3345 !important;
}

/* ============================================================
   WELLS, ALERTS & PRE
   ============================================================ */

.well, pre {
    border-radius: 8px !important;
    background-color: #f8fafb !important;
    border: 1px solid #e2e8ed !important;
}

.badge {
    border-radius: 12px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
}

.alert {
    border-radius: 8px !important;
}

/* ============================================================
   DATA DISPLAY (SiteOmat specific)
   ============================================================ */

.data_olic, .data_panel_olic {
    color: #5a6978 !important;
    font-size: 13px !important;
}

.data_olic textarea {
    background-color: #fff !important;
    border: 1px solid #e2e8ed !important;
    border-radius: 6px !important;
    color: #3a4556 !important;
    font-size: 13px !important;
}

/* Loading message */
.loadmsg {
    background-color: #fff !important;
    border: 1px solid #e2e8ed !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    color: #4a5568 !important;
    font-size: 14px !important;
    padding: 16px 24px !important;
}

/* ============================================================
   MODAL / DIALOG STYLING
   ============================================================ */

.modal-content {
    border-radius: 10px !important;
    border: none !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
}

.modal-header {
    border-bottom: 1px solid #e2e8ed !important;
    padding: 16px 20px !important;
    border-radius: 10px 10px 0 0 !important;
    background-color: #f8fafb !important;
}

.modal-header h4, .modal-title {
    font-weight: 600 !important;
    color: #2c3345 !important;
    font-size: 16px !important;
}

.modal-body {
    padding: 20px !important;
}

.modal-footer {
    border-top: 1px solid #e2e8ed !important;
    padding: 12px 20px !important;
    background-color: #f8fafb !important;
    border-radius: 0 0 10px 10px !important;
}

/* ============================================================
   TOOLTIP & POPOVER
   ============================================================ */

.tooltip-inner {
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    background-color: #2c3345 !important;
}

.popover {
    border-radius: 8px !important;
    border: 1px solid #e2e8ed !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

/* ============================================================
   CHECKBOX & RADIO IMPROVEMENTS
   ============================================================ */

input[type="checkbox"], input[type="radio"] {
    cursor: pointer !important;
}

/* ============================================================
   HR / DIVIDER
   ============================================================ */

hr {
    border-top: 1px solid #e2e8ed !important;
}

/* ============================================================
   ALARM PANEL
   ============================================================ */

#alarm_panel_ho {
    border-radius: 0 0 0 12px !important;
    box-shadow: -2px 4px 16px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #e2e8ed !important;
}

.alarm_container {
    border-radius: 8px !important;
    border: 1px solid #e2e8ed !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* ============================================================
   REPORTS  
   ============================================================ */

.btn_reports_summary_summary {
    border-radius: 8px !important;
}

/* ============================================================
   CHARTS (Google Charts pie/bar)
   ============================================================ */

/* Make the Google Charts SVG background transparent so it blends
   with the page background instead of showing the old beige #e9e7e1.
   SVG presentation attributes are overridden by CSS fill rules. */
#chartdiv svg rect:first-of-type,
#piediv svg rect:first-of-type {
    fill: transparent !important;
}

/* ============================================================
   SCROLLBARS (WebKit browsers)
   ============================================================ */

::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

::-webkit-scrollbar-track {
    background: #f4f6f9 !important;
    border-radius: 4px !important;
}

::-webkit-scrollbar-thumb {
    background: #c1c9d4 !important;
    border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: #a0aab6 !important;
}

/* ============================================================
   FIELDSET / LEGEND
   ============================================================ */

fieldset {
    border: 1px solid #e2e8ed !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin-bottom: 12px !important;
}

legend {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #3a4556 !important;
    padding: 0 8px !important;
    width: auto !important;
    margin-bottom: 8px !important;
}

/* ============================================================
   COMBO BOX - Fleet filter dropdowns (very specific selectors)
   ============================================================ */

/* Hide first column (18px empty) in dropdown list */
.combo_box_general .objbox table.obj th:first-child,
.combo_box_general .objbox table.obj td:first-child {
    display: none !important;
}

/* Hide columns after the second one in dropdown list */
.combo_box_general .objbox table.obj th:nth-child(n+3),
.combo_box_general .objbox table.obj td:nth-child(n+3) {
    display: none !important;
}

/* Hide third column in header (Vloot column) */
.combo_box_general table.hdr th:nth-child(3),
.combo_box_general table.hdr td:nth-child(3) {
    display: none !important;
}

/* Add more space below filter row in local devices */
table.hdr tr:last-child td {
    padding-bottom: 10px !important;
}

/* Only target combo boxes specifically */
.combo_box_general {
    background-color: #fff !important;
    border: 1px solid #d1d9e0 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    padding: 12px !important;
}

.combo_box_general > label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #3a4556 !important;
    margin-bottom: 8px !important;
}

.combo_box_general .combo_box_input {
    border-radius: 6px !important;
    border: 1px solid #d1d9e0 !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    margin-bottom: 8px !important;
}

.combo_box_general .combo_box_input:focus {
    border-color: #5ba4cf !important;
    box-shadow: 0 0 0 3px rgba(91, 164, 207, 0.15) !important;
    outline: none !important;
}

/* Grid styling within combo box only */
.combo_box_general .gridbox_modern,
.combo_box_general .gridbox {
    border: 1px solid #e2e8ed !important;
    border-radius: 6px !important;
    background-color: #fff !important;
    max-height: 200px !important;
}

/* Set header container height */
.combo_box_general .gridbox > table > tbody > tr:first-child > td > div {
    height: 220px !important;
}

.combo_box_general .objbox {
    height: 190px !important;
}

.combo_box_general .gridbox_modern .hdrcell,
.combo_box_general .gridbox .hdrcell {
    background-color: #f8f9fb !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #5a6978 !important;
}

.combo_box_general .gridbox_modern .obj tr.ev_modern,
.combo_box_general .gridbox .obj tr.ev_modern {
    background-color: #fff !important;
}

.combo_box_general .gridbox_modern .obj tr.odd_modern,
.combo_box_general .gridbox .obj tr.odd_modern {
    background-color: #f8f9fb !important;
}

.combo_box_general .gridbox_modern .obj tr:hover,
.combo_box_general .gridbox .obj tr:hover {
    background-color: #e8f2f9 !important;
}

.combo_box_general .gridbox_modern .obj td,
.combo_box_general .gridbox .obj td {
    padding: 8px 10px !important;
    font-size: 13px !important;
    color: #3a4556 !important;
}

/* Button bar inside combo box */
.combo_box_general .combo_buttons_bar {
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid #e2e8ed !important;
    display: flex !important;
    gap: 8px !important;
    justify-content: flex-end !important;
}

.combo_box_general .combo_buttons_bar .combo_btn_small {
    border-radius: 6px !important;
    padding: 5px 14px !important;
    font-size: 12px !important;
}

/* ============================================================
   MAIN PAGE - Data OLIC fields (borderless)
   ============================================================ */
textarea.data_olic {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    resize: none !important;
}