/*
admin.css
Structure:
  - Layout: top logo, menu, content, bottom area
  - Area components: headers, fields, rows, tabs
  - Forms: inputs/selects, labels, lists
  - Buttons: primary, delete, list/doc icon buttons
  - Dropdowns
  - Report/Chat/Permissions
  - Utilities: spacing, states, helpers
  - Backend helpers: charts, filters, inline editors
Notes:
  - Prefer utilities over inline styles (migrated from JS).
  - Use base + modifier classes (e.g., .menu-item + .menu-item--selected).
*/
/* ===== Layout: Top bar (brand/loader space) =====
   Shown at the very top across admin views. */
#topLogo {
    background-color: #000000;
    height: 20px;
    width: calc(100vw - 10px);
    padding: 5px;
}

/* ===== Layout: Main content wrapper =====
   Holds tabs + content area next to the left menu. */
#combined_content_area {
    width: calc(100vw - var(--menu-width));
    height: calc(var(--bean-height) - 50px);
    margin: 0px;
    margin-left: var(--menu-width);
    float: left;
    overflow: hidden;
}

/* ===== Tabs: Container row =====
   Toggled by JS when tabs are available. */
#tab_content_area {
    height: var(--tab-height);
    display: none;
}

/* ===== Content: Scrollable main area =====
   Primary viewport for editor/list UIs. */
.content_area {
    width: calc(100vw - var(--menu-width) - 11px);
    height: calc(var(--bean-height) - var(--tab-height) - 60px);
    padding-left: 10px;
    padding-top: 10px;
    background-color: #ffffff;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ===== Menu: Left navigation rail =====
   Collapses to icon-only; expands on hover or when pinned. */
#menu_area {
    width: var(--menu-width);
    height: calc(var(--bean-height) - 32px);
    position: fixed;
    left: 0px;
    top: 27px;
    border-top: 3px solid #000000;
    z-index: 2000;
    overflow: auto;
    min-width: var(--menu-width);
    padding-top: 2px;
    background-color: var(--menu-back-color);
    font-size: 0.75rem;
    font-family: Poppins-Regular, Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Expand the collapsed rail on hover (desktop). */
#menu_area:hover {
    width: 150px;
}

/* Menu brand/logo block */
#menu_logo img {
    width: 120px;
}

#menu_logo {
    margin-bottom: 20px;
}


#menu_area div {
    text-decoration: none;
    cursor: default;
    color: #ffffff;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#menu_area .textContainer {
    padding-left: 2px;
    height: calc(100% - 40px);
    margin-top: 2px;
    font-weight: normal;
}

#menu_area .textContainer:active {
    padding-left: 0px;
    font-size: 0.80rem;
}

#menu_area .textHighlight {
    font-weight: bold;
}

#menu_area_pin {
    padding: 4px;
    font-size: 12px !important;
    color: #999999;
}

#menu_area_pin:hover {
    color: #aaaaaa;
}

#menu_area_pin:active {
    font-size: 13px !important;
    padding-bottom: 3px;
}

#menu_area .textContainer {
    padding-left: 2px;
    height: calc(100% - 40px);
    margin-top: 2px;
    font-weight: normal;
}

/* ===== App root: Main switchable area =====
   Hidden until initial layout is ready. */
#main_area {
    display: none;
    width: 100vw;
    height: calc(var(--bean-height) - 50px);
}

/* ===== Footer: Status/info bar ===== */
#bottom_area {
    height: 17px;
    font-size: 0.7rem;
    text-align: center;
    padding-top: 3px;
    color: #a0a0a0;
    border-top: 1px solid #606060;
    display: none;
    overflow: hidden;
    background-color: #303030;
}

/* Footer inside edit views (buttons, info) */
#area_edit_footer {
    height: 40px;
    padding-top: 5px;
    padding-left: 2px;
    padding-right: 2px;
    border-top: 1px solid #eeeeee;
}

/* ===== Area header: Title + actions row ===== */
.area_header {
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 10px;
}

/* Base color for edit view text */
#area_edit {
    color: #666666;
}

/* ===== Fields: Form container =====
   Used by admin.js dynamic editors. */
.area_fields {
    margin-top: 2px;
    margin-bottom: 2px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 2px;
    padding-right: 2px;
    overflow: auto;
    height: calc(var(--bean-height) - var(--tab-height) - 130px);
    width: calc(100vW - var(--menu-width) - 6px);
    min-width: 400px;
}

/* ===== Rows: List viewport =====
   Hosts list items with sticky header above. */
#area_rows {
    overflow: auto;
    height: calc(var(--bean-height) - var(--tab-height) - 164px);
    width: calc(100vW - var(--menu-width) - 10px);
}

/* Search input width (header filter) */
#area_filter_search {
    width: calc(100vw - var(--menu-width) - 150px);
}

/* Filter dropdown width (header filter) */
.area_filter_searchfilter {
    width: 190px;
    margin-left: 10px;
}

/* ===== Row header: Column titles ===== */
#area_rowHeader {
    overflow: hidden;
    background-color: #eeeeee;
    width: calc(100vW - var(--menu-width) - 24px);
    padding: 7px;
    height: 16px;
}

/* Sorting indicator/icon next to header titles */
#area_rowHeader .arrow {
    font-size: 0.75rem;
    color: #666666;
    margin-left: 2px;
}


/* Header cells are non-selectable tokens */
#area_rowHeader div {
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    font-size: 0.8rem;
    font-weight: bold;
    color: #333333;
    cursor: default;
    margin-right: 10px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ===== Row: List item line =====
   Uses table layout for vertical centering.
   JS may adjust CSS variable --col-text-width for focus/active. */
.area_row {
    height: 33px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #eeeeee;
    cursor: default;
    display: table;
    --col-text-width: calc(100% - 3px);
}

/* Individual cell inside a row */
.area_row .area_row_col {
    vertical-align: middle;
    display: table-cell;
    padding-left: 7px;
    padding-right: 7px;
    white-space: nowrap;
    overflow: hidden;
    cursor: default;
    margin-right: 10px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Subtle hover background */
.area_row:hover {
    background-color: #dddddd;
}

/* Tap/click feedback + widen text cell */
.area_row:active {
    font-size: 1.1em;
    --col-text-width: 100%
}

/* The text container inside a row */
.area_row_text {
    width: var(--col-text-width);
    min-height: 15px;
    margin: auto;
}

/* Two-column form layout: left side */
.area_half_left {
    vertical-align: top;
    width: calc(50% - 7px);
    padding-right: 5px;
    display: inline-block;
    margin-bottom: 20px;
    min-width: 370px;
}

/* Two-column form layout: right side */
.area_half_right {
    vertical-align: top;
    width: calc(50% - 7px);
    padding-left: 4px;
    display: inline-block;
    margin-bottom: 20px;
    border-left: 1px solid #dddddd;
    min-width: 370px;
}

/* Form controls within .area_fields */
.area_fields input[type=text], .area_fields input[type=number], .area_fields input[type=time], .area_fields input[type=month], .area_fields input[type=password], .area_fields input[type=date], .area_fields input[type=datetime-local], .area_fields input[type=file], .area_fields input[type=color], .area_fields input[type=email], .area_fields input[type=tel] {
    width: calc(100% - 20px);
    margin-top: 1px;
    margin-bottom: 10px;
    color: #000000;
}

.area_fields input[type=color] {
    width: calc(100% - 10px);
    height: 24px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    padding: 1px;
}

.area_fields input[type=color]:hover {
    background-color: #eeeeee;
}

.area_fields select {
    width: calc(100% - 10px);
    margin-top: 1px;
    margin-bottom: 10px;
    color: #000000;
}

.area_label_error {
    color: #ff0000;
    padding-left: 5px;
}

.area_label_success {
    color: #009900;
    padding-left: 5px;
}

.area_fields textarea {
    width: calc(100% - 20px);
    height: 100px;
    margin-top: 1px;
    margin-bottom: 10px;
    color: #000000;
    padding: 3px;
    overflow-y: scroll;
}

.area_fields .htmlTextContainer {
    width: calc(100% - 15px);
    height: 180px;
    margin-top: 1px;
    margin-bottom: 10px;
    color: #000000;
    background-color: #ffffff;
}

.area_fields .htmlText {
    height: 140px;
}

.area_fields input[type=button] {
    margin-right: 20px;
    min-width: 100px;
    margin-bottom: 10px;
}

/* Multi-value control rows and checkboxes */
.area_multi, .area_fields input[type=checkbox] {
    margin-bottom: 10px;
}

/* Header label for multi-value rows */
.area_multi_header {
    float: left;
    width: 40px;
    padding-top: 6px;
    margin-top: 1px;
    background-color: #eeeeee;
    padding-left: 3px;
    font-size: 0.9rem;
    height: 17px;
}

/* Input inside multi-value row */
.area_multi_row input[type=text] {
    margin-bottom: 0px;
    width: 255px;
}

/* Mixed selector + input rows */
.area_mix {
    margin-bottom: 20px;
}

/* Columns inside mixed rows */
.area_mix_col {
    float: left;
}

/* Tighten spacing in mixed rows */
.area_mix_col select, .area_mix_col input[type=text] {
    margin-bottom: 1px;
}

/* Header labels for mixed rows */
.area_mix_header_1, .area_mix_header_2 {
    float: left;
    padding-top: 6px;
    margin-top: 1px;
    background-color: #eeeeee;
    padding-left: 3px;
    font-size: 0.9rem;
    height: 17px;
}

/* Width for mixed-row selects */
.area_mix_col select {
    width: 180px;
}

/* First mixed-row header width */
.area_mix_header_1 {
    width: 175px;
}

/* Width for mixed-row text inputs */
.area_mix_col input[type=text] {
    width: 55px;
}

.area_mix_header_2 {
    width: 61px;
}

/* ===== Header area (top bar in views) ===== */
#area_header {
    width: 100%;
}

/* Header for list views (filters/actions) */
#area_list_header {
    height: 31px;
}

/* Items stacked in the header row */
.area_header .header_item {
    display: inline-block;
    vertical-align: top;
}

/* Header-aligned button container */
.header_button {
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;
}

/* Default header button width */
.area_header input[type=button] {
    width: 180px;
}

/* Header select alignment/height */
.area_header select {
    height: 26px;
    margin-top: 5px;
}

.area_blanklabel {

}

/* Label for inputs (regular) */
.area_label {
    font-size: 0.7rem;
    color: #000000;
    font-weight: 300;
    margin-bottom: 1px;
    margin-left: 1px;
}

/* Label for checkboxes/toggles */
.area_label_check {
    font-size: 0.8rem;
    color: #000000;
    font-weight: 300;
    margin-bottom: 1px;
    margin-left: 1px;
}

/* Section title within forms */
.area_section {
    font-size: 1.1rem;
    color: #000000;
    font-weight: 600;
    margin-top: 5px;
    margin-bottom: 5px;
}

/* Horizontal group of columns */
.area_cols {
    white-space: nowrap;
    margin-bottom: 10px;
}

/* Individual column in a group */
.area_col {
    display: inline-block;
}

/* Inline edit wrapper with subtle border */
.fieldEdit_container {
    border-radius: 4px;
    border: 1px solid #dddddd;
    padding: 2px;
    padding-left: 5px;
}

/* Generic scrollable list container */
.listBox {
    height: 100%;
    min-height: 150px;
    width: calc(100% - 13px);
    border: 1px solid #dddddd;
    background-color: #f8f8f8;
    overflow: hidden;
    overflow-y: auto;
    border-radius: 4px;
}

/* ===== Dropdown component (custom) ===== */
.dropdown_container {
    margin-bottom: 10px;
    position: relative;
}

/* Read-only display area of dropdown */
.dropdown_display {
    border: 1px solid #dddddd;
    height: 24px;
    width: 150px;
    display: inline-block;
    margin-bottom: 0px;
    cursor: default;
    border-radius: 4px;
}

/* The dropdown layer/portal container */
.dropdown_layer {
    position: absolute;
    z-index: 1000;
    height: 200px;
}

/* Search box inside dropdown */
.dropdown_filter {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-top: none  !important;
    font-size: 0.8rem  !important;
    padding: 4px  !important;
    color: #333333  !important;
    background-color: var(--search-back)  !important;
    border-left: 1px solid #dddddd  !important;
    border-right: 1px solid #dddddd  !important;
}

/* Text inside the dropdown display */
.dropdown_displayText {
    display: inline-block;
    width: calc(100% - 23px);
    padding-left: 4px;
    overflow: hidden;
    white-space: nowrap;
    height: 100%;
    vertical-align: middle;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.dropdown_displayArrow {
    display: inline-block;
    width: 18px;
    height: calc(100% - 1px);
    padding-top: 1px;
    vertical-align: middle;
    color: #333333;
    border-left: 1px solid #dddddd;
    background-color: #eeeeee;
    border-radius: 0px 3px 3px 0px;
    cursor: default;
}

.dropdown_displayArrow:hover {
    background-color: #dddddd;
}

.dropdown_selector {
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    background-color: #ffffff;
    height: 100px;
    width: 100px;
    overflow: auto;
    border-radius: 4px;
}

.dropdown_item {
    padding: 3px;
    font-size: 0.8rem;
    width: calc(100% - 10px);
    background-color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.dropdown_item:hover {
    background-color: #eeeeee;
}

#area_rowHeaderFilter {
    width: calc(100vW - var(--menu-width) - 10px);
    background-color: #dddddd;
    padding: 3px;
}

.area_filter_searchfilter span {
    padding-top: 4px;
}

#area_rowHeaderFilter div {
    display: inline-block;
    margin-left: 2px;
    font-size: 0.8rem;
    vertical-align: top;
}

#area_rowHeaderFilter input {
    padding: 1px;
    padding-bottom: 1px;
    padding-top: 1px;
    margin-top: 0px;
    height: 20px;
    font-family: Arial, sans-serif;
    background-color: var(--search-back);
    margin-bottom: 2px;
}

#area_rowHeaderFilter select {
    height: 24px;
    background-color: var(--search-back);
}

.langSelect {
    margin-bottom: 0px !important;
    background-color: var(--search-back) !important;
}


.imgUploadContainer {
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid #aaaaaa;
}

.imgUploadContainer img {
    opacity: 1;
    display: block;
    transition: .5s ease;
    backface-visibility: hidden;
    margin: 0 auto;
}

.imgUploadContainer .buttons {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.imgUploadContainer:hover img {
    opacity: 0.3;
}

.imgUploadContainer:hover .buttons {
    opacity: 1;
}

.imgUploadContainer input[type=button] {
    margin-right: 0px;
}

#img_edit_area_main {
    background-color: #ffffff;
    border: 1px solid #000000;
    padding: 5px;
    margin: 0 auto;
    width: 570px;
    height: 400px;
    margin-top: 50px;
}

#img_edit_area_main div {
    display: inline-block;
    height: 100%;
    vertical-align: top;
}

#img_edit_area_main canvas {
    border: 1px solid #666666;
}


/* ===== Buttons: Primary actions (save/copy/import, etc.) ===== */
#area_update, #area_copy, #loginSubmit, #login_twofactorsubmit, #area_doimport, #area_startimport, #img_edit_approve, .change_btn {
    background-color: #222222 !important;
    border: 0.5px solid #222222 !important;
    color: #ffffff !important;
    height: 26px;
}

#area_update:disabled, #area_copy:disabled, #loginSubmit:disabled, #area_doimport:disabled, #area_startimport:disabled, #img_edit_approve:disabled, .change_btn:disabled, .editor_add_btn:disabled {
    background-color: #444444 !important;
    color: #999999 !important;
}

#area_update:hover:enabled, #area_copy:hover:enabled, #loginSubmit:hover:enabled, #area_doimport:hover:enabled, #area_startimport:hover:enabled, #img_edit_approve:hover:enabled, .change_btn:hover:enabled,  .change_btndiv:hover, .editor_add_btn:hover:enabled {
    background-color: #000000 !important;
    border: 0.5px solid #000000 !important;
}


/* Destructive action buttons */
#area_delete, .delete_btn {
    background-color: #ff2222 !important;
    color: #ffffff !important;
    float: right;
    margin-right: 13px;
    border: 0.5px solid #ff2222 !important;
    height: 26px;
}

#area_delete:hover:enabled, .delete_btn:hover:enabled {
    background-color: #dd2222 !important;
    border: 0.5px solid #dd2222 !important;
}

#img_edit_debug {
    color: #ff0000;
    font-size: 0.8rem;
}

.sub_container {
    background-color: #f0f0f0;
    padding: 5px;
    margin-bottom: 20px;
    width: calc(100% - 25px);
    border: 1px solid #dddddd;
}

#langContainer {
    margin-bottom: 10px;
}

#nav_page {
    width: 20px;
    text-align: center;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.editor_add_btn {
    background-color: #444444;
    border: 0px;
    color: #ffffff;
    display: inline-block;
    min-width: 0px;
    width: 23px;
    height: 23px;
    padding: 1px;
    border-radius: 4px;
}

.editor_add_btn i {
    font-weight: bold;
    font-size: 18px;
    margin-top: 1.5px;
    margin-left: 1.5px;
}

.editor_delete_btn {
    background-color: #ff2222;
    border: 0px;
    color: #ffffff;
    display: inline-block;
    width: 23px;
    height: 23px;
    padding: 1px;
    float: none;
    min-width: 0px;
}

#item_info {
    float: right;
    display: none;
    color: #dddddd;
    cursor: default;
    margin-right: 13px;
    margin-top: 10px;
    font-size: 0.8rem;
}

#item_info:hover {
    color: #666666;
}

#imageEditor {
    margin-bottom: 20px;
}

.list_btn {
    vertical-align: top;
    width: 20px;
    height: 20px;
    margin: 0px;
    margin-right: 5px;
    margin-top: 4px;
    padding: 0px;
    cursor: default;
    display: inline-block;
    float: right;
    border-radius: 4px;
}

#nav_prev, #nav_next, #nav_reload {
    float: unset;
    border: 0px;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    margin-top: 2px;
    margin-left: 3px;
    margin-right: 3px;
    background-color: #dddddd;
}

#nav_reload {
    margin-left: 8px;
}

#nav_prev:hover:enabled, #nav_next:hover:enabled, #nav_reload:hover {
    background-color: #eeeeee;
}

#nav_prev i, #nav_next i {
    font-size: 24px;
    padding: 0px;
    margin-top: -2px;
    margin-left: -2px;
}

#nav_prev i:active:enabled, #nav_next i:active:enabled {
    font-size: 26px;
    padding: 0px;
    margin-top: -3px;
    margin-left: -3px;
}

#nav_reload i {
    font-size: 20px;
    padding: 3px 0px 0px;
    margin-top: -3px;
    margin-left: -3px;
}

.doc_btn {
    width: 20px;
    height: 20px;
    margin: 10px;
    margin-left: 0px;
    cursor: default;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 4px;
}

.list_btn, .doc_btn {
    border: 1px solid #dddddd;
    background-color: #eeeeee;
    color: #222222;
}

.list_btn:hover:enabled, .doc_btn:hover:enabled {
    border: 1px solid #dddddd;
    background-color: #dddddd;
}

.list_btn:disabled, .doc_btn:disabled {
    border: 1px solid #dddddd;
    background-color: #cccccc;
    color: #666666;
}

.doc_btn i, .list_btn i {
    font-size: 16px;
    padding: 2px;
}

.doc_btn i:active, .list_btn i:active {
    font-size: 17px;
    padding: 1px;
}

/* Color editor container */
.color-editor {
    width: calc(100% - 15px);
    border: 1px solid #dddddd;
    border-radius: 4px;
    margin-bottom: 10px;
    height: 24px;
    display: flex;
}
.toolbar-btn {
    height: 22px;
    width: 22px;
    min-width: 22px;
    float: none;
    margin-top: 1px;
    margin-left: 5px;
    vertical-align: top;
}
.toolbar-btn-icon { font-size: 18px; font-weight: bold; }
.icon-14 { font-size: 14px !important; }
.icon-20 { font-size: 20px !important; }

/* Simple bordered container used by code/HTML editors */
.editor-box { border: 1px solid #dddddd; border-radius: 4px; background-color: #ffffff; }
.bdr-right-ddd { border-right: 1px solid #dddddd; }
.bdr-ddd { border: 1px solid #dddddd; }
.fs-095 { font-size: 0.95em; }
.d-none { display: none; }
.mt-4px { margin-top: 4px; }
.w-100 { width: 100%; }
.mh-300 { max-height: 300px }

/* Error text for small inline validation messages */
.form-error {
    height: 20px;
    margin-top: 5px;
    margin-bottom: 15px;
    color: #ff0000;
    font-size: 0.8em;
}

/* ===== Button consolidation ===== */
.icon-btn {
    vertical-align: top;
    width: 20px;
    height: 20px;
    margin: 0px;
    margin-right: 5px;
    margin-top: 4px;
    padding: 0px;
    cursor: default;
    display: inline-block;
    float: right;
    border-radius: 4px;
    border: 1px solid #dddddd;
    background-color: #eeeeee;
    color: #222222;
}
.icon-btn:hover:enabled { background-color: #dddddd; }
.icon-btn:disabled { background-color: #cccccc; color: #666666; }

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(/icons/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: url(/icons/MaterialIcons-Regular.woff2) format('woff2'), url(/icons/MaterialIcons-Regular.woff) format('woff'), url(/icons/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px; /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

/* ===== Report & Chat containers =====
   Shared sizing for report viewer and chat module. */
#report_box, #chat_root {
    width: 90vw;
    height: calc(100vh - 200px);
}

#report_buttons {
    height: 50px;
}

#report_buttons input {
    vertical-align: top;
}

#report_window {
    background-color: #aaaaaa;
    border: 1px solid #888888;
    overflow: auto;
    height: calc(100% - 50px);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 100%;
}

#report_close {
    margin: 10px;
    float: right;
    width: 100px;
}

#report_pdf, #report_print { margin: 10px; width: 100px; }

.permission_item {
    width: 120px;
    display: flex;
    margin: 3px;
    border-radius: 4px;
    background-color: #f8f8f8;
    border: 1px solid #dddddd;
}

.permission_item div {
    overflow: hidden;
    width: 100px;
    font-size: 11px;
    margin: 4.5px;
    color: #000000;
}

.permission_item button {
    width: 16px !important;
    height: 16px !important;
    margin: 2px !important;
}

.permission_item button i {
    font-size: 12px !important;

}

.tab, .tabSelected, .tabFilter {
    display: inline-block;
    color: #222222;
    text-align: center;
    height: 16.5px;
    padding-top: 6px;
    padding-bottom: 0;
    font-size: 11px;
    -webkit-appearance: none;
    overflow: hidden;
    text-shadow: none;
    cursor: default;
    margin-top: 5.5px;
    vertical-align: top;
    margin-left: 4px;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.tabFilter {
    width: 20px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin-top:6px;
    height: 17px;
}

.tab, .tabSelected {
    border-top: 0.5px solid #666666;
    border-left: 0.5px solid #666666;
    border-right: 0.5px solid #666666;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-color: #eeeeee;
}

.tab:hover {
    background-color: #ffffff;
}


.tab:active {
    padding-top: 5.5px;
    padding-bottom: 0.5px;
    font-size: 12px;
}

.tabSelected {
    background-color: #ffffff;
    border-bottom: 2px solid #ffffff;
    height: 18px;
    margin-top: 3px;
    font-weight: bold;
}

.tab select, .tabSelected select, .change_btn select, .tabFilter select {
    all: unset;
    border: 0px;
    margin: 0px;
    padding: 0px;
    width: 120px;
    vertical-align: top;
    padding-right: 15px;
}

.tabFilter select {
    width: 0;
    margin-top: 2px;
}

.tab i, .tabSelected i, .change_btn i, .tabFilter i {
    margin-top: -6px;
    margin-left: -20px;
    z-index: 10;
    pointer-events: none;
}

.tabFilter i {
    font-size: 16px;
    margin-top: -4px;
    margin-left: -15px;
    border-radius: 4px;
    padding: 1px;
    color: #444444;
}


.tabContainer {
    height: 29px;
    width: 100%;
    border-bottom: 0.5px solid #666666;
    background-color: #cccccc;
    white-space: nowrap;
}

/* ===== Custom select wrapper =====
   Adds Material Icon chevron and hover style. */
.selectdiv, .selectdivslim {
    width: calc(100% - 12px);
    display: inline-block
}

.selectdiv:after, .selectdivslim:after {
    content: 'arrow_drop_down';
    font: normal normal normal 18px/1 'Material Icons';
    color: #333333;
    left: calc(100% - 20px);
    top: -21px;
    padding: 2px 0px 2px 0px;
    border-left: 1px solid #dddddd;
    position: relative;
    pointer-events: none;
    background-color: #eeeeee;
    border-radius: 0px 3px 3px 0px;
}

.selectdivslim:after {
    padding: 0px 0px 2px 0px;
}

.selectdiv:hover:after, .selectdivslim:hover:after {
    background-color: #dddddd;
}


select::-ms-expand {
    display: none;
}

.selectdiv select, .selectdivslim select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 24px;
    float: right;
    margin: 0px;
    padding: 0px 0px 0px 5px;
    font-size: 0.8rem;
    line-height: 1.75;
    color: #333;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #dddddd;
    -ms-word-break: normal;
    word-break: normal;
}

.database-active-heartbeat {
    margin-top: 0px;
    margin-left: 8px;
    width: 5px;
    height: 5px;
    border-radius: 3px;
    background-color: #eeeeee;
    display: inline-block;
    vertical-align: top;
    border: 1px solid #cccccc;
}

@keyframes fadeBlue {
    from {
        background-color: #0000cc;
        border: 1px solid #0000cc;
    }
    to {
        background-color: #eeeeee;
        border: 1px solid #cccccc;
    }
}

@keyframes fadeGreen {
    from {
        background-color: #00cc00;
        border: 1px solid #00cc00;
    }
    to {
        background-color: #eeeeee;
        border: 1px solid #cccccc;
    }
}

@keyframes fadeRed {
    from {
        background-color: #cc0000;
        border: 1px solid #cc0000;
    }
    to {
        background-color: #eeeeee;
        border: 1px solid #cccccc;
    }
}

.selectdivslim select {
    height: 22px;
}

#login_remember_text {
    font-size: 0.7rem;
}

/* ===== Chat: Layout (sidebar + main) ===== */
#chat_root {
    display: flex;
    flex-direction: row;
}

/* Left-side chat list + tools */
#chat-sidebar {
    width: 250px;
    border-right: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    padding-bottom: 10px;
}


/* Scrollable chat list */
#chat-chat-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 10px;
}

.chat-chat-item {
    padding: 6px;
    border-bottom: 1px solid #eee;
    cursor: default;
}

.chat-chat-item:hover {
    background-color: var(--lightmenu-hover-color)
}

.chat-chat-item.active {
    background-color: var(--lightmenu-select-color)
}

#chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Scrollable messages viewport */
#chat-message-window {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    margin-top: 20px;
}

/* Base message bubble */
.chat-message {
    flex-basis: 80%;
    overflow-y: hidden;
    font-size: 1.05rem;
    border-radius: 4px;
    border: 1px solid #ffffff;
    padding: 8px;
}

.chat-message-padding {
    flex-basis: 20%;
    order: 2;
}

.chat-message pre {
    min-width: -webkit-fill-available;
    min-width: -moz-available;
    min-width: stretch;
    max-width: 0;
}

.chat-message-line {
    margin-bottom: 40px;
    width: 100%;
    display: flex;
    font-size: 1.05rem;
}

/* Outgoing message */
.chat-message.user {
    text-align: right;
    background-color: #f8f8f8;
    border: 1px solid #eeeeee;
    order: 3;
}

/* Incoming and status/command messages */
.chat-message.assistant, .chat-message.status,  .chat-message.command {
    text-align: left;
    order: 1;
}

.chat-message:hover {
    border: 1px solid #cccccc;
}

.chat-message.status {
    font-size: 0.9rem;
    font-weight: 300;
}

.chat-message.status div {
    display: inline-block;
    font-size: 0.90rem;
    vertical-align: middle;
    margin-right: 10px;
}

/* Executable command card */
.chat-message.command {
    border: 1px solid #000000;
    max-width: 60%;
    border-radius: 4px;
    padding: 0;
    overflow: hidden;
}

.chat-command-header {
    font-size: 0.90rem;
    background-color: #f0f0f0;
    color: #000000;
    padding: 10px;
    margin:0
}

.chat-command-items {
    width: 100%;
    height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
}

.chat-command-item {
    font-size: 0.90rem;
    background-color: #ffffff;
    color: #000000;
    padding: 10px;
    border-bottom: 1px solid #dddddd;
}

.chat-command-header-text {
    width: calc(100% - 185px);
    display: inline-block;
    padding-right: 20px;
}

.chat-command-header-headline {
    font-weight: bold;
    margin-bottom: 4px;
}

.chat-message.command button {
    margin-top:0 !important;
    margin-bottom:0 !important;
    width: 100px;
    vertical-align: top;
    display: inline-block;
}

/* Input + actions row */
#chat-input-form {
    display: flex;
    padding: 5px;
    border-top: 1px solid #ddd;
    height: 90px;
    flex-shrink: 0;
}

.chat-command-check {
    width: 120px;
    text-align: center;
    height: 27px;
    vertical-align: middle;
    margin-right: 5px;
    display: inline-block;
    color: var(--form-control-toggle);
}

#chat-file-input {
    display: none;
}

#chat-file-label {
    font-size: 20px;
    width: 28px;
    height: 28px;
    z-index: 100;
    position: relative;
    left: -25px;
    top:5px;
    border: none;
}

#chat-file-list {
    width: calc(100% - 250px);
    z-index: 99;
    left: 20px;
    top: -22px;
    height: 20px;
    position: relative;
}

.chat-file-item {
    display: inline-block;
    padding-left: 3px;
    padding-right: 3px;
    margin-right: 5px;
    background-color: #f0f0ff;
    border-radius: 4px;
}

.chat-file-item .btn_icon {
    width: 16px;
    height: 16px;
    font-size: 14px;
    color: #000000;
    background-color: rgba(255, 255, 255,0);
    border: none;
    padding: 0px !important;
    vertical-align: top;
    margin-top: 2px;
}

.chat-file-name{
    font-size: 12px;
    padding-top: 3px;
    line-height: 18px;
    margin-right: 2px;
    margin-left: 2px;
    color: #000000;
    max-width: 100px;
    overflow: hidden;
    height: 20px;
    display: inline-block;
}

#chat-text-input {
    width: calc(100% - 240px);
    margin-left: 10px;
    margin-right: -10px;
    height: 60px;
    margin-top: 5px;
    padding: 5px 30px 30px 5px;
}

#chat-close-btn {
    margin-top: 10px;
}

#chat-new-chat-btn {
    margin-left: 10px;
    margin-top: 20px;
    margin-bottom: 30px;
    width: 210px;
}

.chat-function-name {
    font-size: 0.8rem;
    color: #666666;
    margin-top: 5px;
    margin-bottom: 5px;
    display: inline-block;
    vertical-align: top;
}

.chat-function-icon {
    font-size: 20px;
    margin-top: 2px;
    color: #666666;
    margin-right: 5px;
    display: inline-block;
    vertical-align: top;
}

.chat-chat-item div {
    display: inline-block;
    width: calc(100% - 30px);
    overflow: hidden;
    white-space: nowrap;
}

.chat-chat-item button {
    display: inline-block;
    width: 24px;
    height: 24px;
    font-size: 18px;
    padding-right: 0px !important;
    margin: 0px !important;
    background-color: rgba(255, 255, 255,0);
    border: none;
    color: rgba(255, 255, 255,0);
}

.chat-chat-item:hover button {
    color: rgba(255, 0, 0, 0.1);
    background-color: rgba(255, 255, 255,0) !important;
    border: none !important;
}

.chat-chat-item button:hover {
    color: rgba(255, 0, 0, 1);
    background-color: rgba(255, 255, 255,0) !important;
    border: none !important;
}

/* ----- Added utility classes to replace inline JS styles ----- */
/* Menu item base + modifier (works with legacy structure) */
.menu-item { border-top: 1px solid var(--menu-line-color); display: table; height: 30px; width: 100%; table-layout: fixed; }
.menu-item:hover { background-color: var(--menu-hover-color); }
.menu-item.menu-item--selected { background-color: var(--menu-select-color); }
.menu-item div { display: table-cell; vertical-align: middle; }
.menu-item div i { font-size: 20px; height: 24px; width: 24px; margin-left: 7px; }

/* ===== Legacy compatibility (do not use going forward) ===== */
/* Kept to avoid breaking existing markup while migrating to .menu-item */
.menu_notselected:hover, .menu_selected:hover { background-color: var(--menu-hover-color); }
.menu_notselected, .menu_selected, .menu_sep { border-top: 1px solid var(--menu-line-color); display: table; height: 30px; width: 100%; table-layout: fixed; }
.menu_sep{ height: 10px; display: block; width: 100%; }
.menu_selected { background-color: var(--menu-select-color); }
.menu_notselected div, .menu_selected div { display: table-cell; vertical-align: middle; }
.menu_notselected div i, .menu_selected div i { font-size: 20px; height: 24px; width: 24px; margin-left: 7px; }

/* Small helpers for menu layout created in JS */
.dock-container { display: inline-block; width: 20px; margin-bottom: 30px; }
.menu-icon-container { width: 35px; }
.menu-icon { margin-top: 5px; }

.area_row_light_text {
    display: inline-block;
    margin-left: 10px;
    color: #cccccc;
}

.area_row_sort_input {
    width : 20px !important;
    margin-top: 0px !important;
    margin-bottom : 0px !important;
    height: 14px !important;
    text-align: center !important;
}

.area_row_sort_input:disabled {
    color: #000000 !important;
}

/* Highlighted list rows */
.area_row--highlight { font-weight: bold; }

/* Badge-like cell background styling when backgroundColor is set dynamically */
.area_row_text--badge { border-radius: 4px; }

/* Dropdown read-only state */
.dropdown_display.readonly { background-color: #eeeeee; }

/* Generic drag-over highlight used across components */
.dragover-highlight { background-color: #e0eee0 !important; }

/* Chat text input dragover style */
#chat-text-input.dragover { background-color: #e0eee0; }

/* ===== Menu component (aliases for legacy classes) ===== */
.menu-item { border-top: 1px solid var(--menu-line-color); display: table; height: 30px; }
.menu-item:hover { background-color: var(--menu-hover-color); }
.menu-item--selected { background-color: var(--menu-select-color); }

/* ===== Spacing utilities (optional) ===== */
.mt-1 { margin-top: 2px !important; }
.mt-2 { margin-top: 4px !important; }
.ml-1 { margin-left: 2px !important; }
.p-1 { padding: 2px !important; }
.p-2 { padding: 4px !important; }

/* ===== Backend UI helpers ===== */
/* Charts */
.chart-container { position: relative; }
.chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font: 12px sans-serif;
  padding: 6px 8px;
  border-radius: 6px;
  white-space: pre-line;
  z-index: 3;
  display: none;
}
.overlay-canvas { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; }
.graph-fixed-250 { height: 250px; overflow: hidden; }

/* Monitor filter layout */
.monitor-filter { margin-top: 5px; height: 30px; }
.monitor-start, .monitor-stop { display: inline-block; width: 100px; vertical-align: top; }
.monitor-to { display: inline-block; width: 46px; text-align: center; vertical-align: top; padding-top: 4px; }
.monitor-col { display: inline-block; width: calc(100% - 330px); vertical-align: top; margin-left: 10px; }

/* Inline editors */
.inline-editor { width: calc(100% - 15px); border: 1px solid #dddddd; border-radius: 4px; margin-bottom: 10px; height: 24px; display: flex; }
.inline-editor-check { width: 114px; padding-top: 5px; padding-left: 5px; border-right: 1px solid #dddddd; }
.inline-editor-field { width: calc(100% - 120px); }
.input--noborder { border: 0px !important; }
.input--slim { width: calc(100% - 6px); margin-bottom: 0px; }
.bg-white { background-color: #ffffff !important; }
.bg-eee { background-color: #eeeeee !important; } 

/* Spacing utility */
.mt-3 { margin-top: 3px !important; }

/* Profile popup panel */
.profile-alert { width: 310px; padding: 20px; }

/* Device manager */
.deviceListItem { background-color: #ffffff; margin-bottom: 4px; padding-bottom: 5px; height: 70px; }
.deviceListItem-text {
  width: calc(100% - 20px);
  height: 100%;
  padding: 5px;
  font-size: 0.8rem;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
}

/* Document manager */
.doc-item { width: calc(100% - 4px); border-bottom: 1px solid #eeeeee; padding: 2px; }
.doc-icon { display: inline-block; width: 120px; height: 120px; margin-right: 10px; overflow: hidden; color: #cccccc; vertical-align: top; }
.doc-icon-img, .doc-icon-video { width: 116px; height: 116px; border: 1px solid #cccccc; background-color: #eeeeee; object-fit: contain; }
.doc-icon-fallback { font-size: 120px; }
.doc-content { display: inline-block; width: calc(100% - 140px); padding-top: 5px; vertical-align: top; overflow: hidden; background-color: #ffffff; }
.doc-title { color: #000000; white-space: nowrap; }
.doc-info { white-space: nowrap; font-size: 0.85em; margin-top: 2px; }
.doc-tags { margin-top: 10px; height: 20px; }
.doc-buttons { margin-top: 19px; }
.doc-btn-left { float: left; }
.doc-btn-right { float: right; }

/* Edit header right area */
.edit-header-right { width: 60px; margin-right: 10px; float: right; }
.edit-header-right .header_item { float: right; }

/* Key-Value editor (createDictEditor) */
.kv-line { min-width: 300px; padding: 5px; padding-bottom: 2px; padding-top: 2px; border-bottom: 1px solid #eeeeee; background-color: #ffffff; display: flex; }
.kv-key { width: 150px; margin-top: 3px; margin-bottom: 3px; display: inline-block; font-size: 0.85em; }
.kv-value { width: calc(100% - 228px); margin-top: 3px; margin-left: 10px; margin-bottom: 3px; height: 24px; display: inline-block; }
.kv-actions { width: 50px; display: inline-block; }

/* List editor (createListEditor + itemLineDictRender) */
.list-editor-add-container { position: relative; margin-bottom: 5px; display: flex; align-items: flex-start; }
.add-text--compact { flex: 1 1 auto; width: auto; min-width: 0; padding: 3px; height: 16px; margin-right: 5px; margin-bottom: 0px; margin-top: 1px; vertical-align: top; }
.btn--22 { height: 22px !important; width: 22px !important; min-width: 22px !important; }
.no-float { float: none !important; }
.list-line { min-width: 300px; padding: 5px; padding-bottom: 2px; padding-top: 2px; border-bottom: 1px solid #eeeeee; background-color: #ffffff; }
.list-line-text { width: calc(100% - 168px); margin-top: 3px; margin-bottom: 3px; float: left; }
.list-line-input { width: calc(100% - 6px); height: 14px; padding: 3px; margin: 0 !important; }
.list-line-actions { width: 150px; display: inline-block; }
.list-line-edit { width: calc(100% - 30px); display: inline-block; }

/* Multi-check editor */
.checks-header { background-color: #eeeeee; height: 20px; }
.checks-header input[type=checkbox] { background-color: #ffffff; margin: 3px; margin-left: 5px; }
.checks-container { width: calc(100% - 6px); height: calc(100% - 26px); overflow-y: auto; overflow-x: hidden; padding: 2px; border: 1px solid #dddddd; margin-bottom: 10px; }
.check-item-label { margin: 3px; margin-bottom: 3px; }

/* ===== Utilities: spacing, states, helpers (migrated from JS inline styles) ===== */
.pos-relative { position: relative; }
.h-25 { height: 25px; }
.h-30 { height: 30px; }
.h-22 { height: 22px; }
.h-26 { height: 26px; }
.h-16 { height: 16px; }
.h-34 { height: 34px; }
.h-250 { height: 250px; }
.h-24, input.h-24[type=button] { height: 24px; }
.h-400 { height: 400px; }
.h-23 { height: 23px; }
.h-15 { height: 15px; }
.h-13 { height: 13px; }
.h-calc-100vh-160 { height: calc(100vh - 160px); }
.h-200 { height: 200px; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.v-top { vertical-align: top; }
.ov-hidden { overflow: hidden; }
.w-calc-100-34 { width: calc(100% - 34px); }
.w-calc-100-20, input.w-calc-100-20[type=text] { width: calc(100% - 20px); }
.w-calc-100-10 { width: calc(100% - 10px); }
.w-calc-100-2 { width: calc(100% - 2px); }
.w-calc-100-6 { width: calc(100% - 6px); }
.w-calc-100-18 { width: calc(100% - 18px); }
.w-calc-100-120 { width: calc(100% - 120px); }
.w-calc-100-320 { width: calc(100% - 320px); }
.w-calc-100-30 { width: calc(100% - 30px); }
.w-calc-100-165 { width: calc(100% - 165px); }
.w-calc-100-194 { width: calc(100% - 194px); }
.w-calc-100-245 { width: calc(100% - 245px); }
.w-90px { width: 90px; }
.w-100px { width: 100px; }
.w-114px { width: 114px; }
.w-150px { width: 150px; }
.w-120px { width: 120px; }
.w-195px { width: 195px; }
.w-20px { width: 20px; }
.w-60px { width: 60px; }
.w-80px { width: 80px; }
.w-40p-11 { width: calc(40% - 11px); }
.w-60p-11 { width: calc(60% - 11px); }
.w-70px, input.w-70px[type=button] { width: 70px; }
.w-400px { width: 400px; }
.text-danger { color: #ff0000; }
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.btn-compact {
    width: 27px;
    height: 27px;
    margin-left: 10px;
    padding-left: 0;
    padding-right: 0;
}
.btn--50 { height: 22px; width: 50px; min-width: 50px; }
.icon-top { vertical-align: top; margin-top: 2px; }
.popup-sm { width: 310px; padding: 20px; }
.script-output {
    padding: 5px;
    width: calc(100% - 10px);
    height: 150px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    overflow: auto;
    font-size: 0.7rem;
}
.drop-btn-text { width: 100px; line-height: 26px; cursor: default; display: inline-block; }
.drop-btn-select { width: 0; padding-right: 20px; height: 24px; }
.h-100p { height: 100%; }
.mr-10 { margin-right: 10px; }
.mr-15 { margin-right: 15px; }
.mr-5 { margin-right: 5px; }
.mr-25 { margin-right: 25px; }
.ml-4 { margin-left: 4px; }
.ml-20 { margin-left: 20px; }
.pl-5 { padding-left: 5px; }
.pl-10 { padding-left: 10px; }
.pr-5 { padding-right: 5px; }
.pt-5 { padding-top: 5px; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 2px !important; }
.mb-3 { margin-bottom: 3px !important; }
.mt-0 { margin-top: 0 !important; }
.mt-7 { margin-top: 7px !important; }


.font-mono, input.font-mono[type=text] { font-family: Courier New, Courier, monospace; }
.checks-parent {
    font-size: 0.8rem;
    padding: 0;
    width: calc(100% - 2px);
    overflow: hidden;
}
.kv-line { display: flex; align-items: flex-start; }
.kv-key { width: 40%; padding-right: 6px; }
.kv-value { width: 60%; }
.kv-value.checkbox { margin-top: 8px; }
.btn--22 { height: 22px; width: 22px; min-width: 22px; }
.no-float { float: none; }
.ml-5 { margin-left: 5px; }
.mt-5 { margin-top: 5px; }
.w-calc-100-40 { width: calc(100% - 40px); }
.w-calc-100-244 { width: calc(100% - 244px); }
.minw-350 { min-width: 350px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-10 { margin-bottom: 10px; }
.m-0 { margin: 0 !important; }
.w-calc-100-15 { width: calc(100% - 15px); }
.h-400 { height: 400px; }
.perm-line { min-width: 300px; padding: 2px 5px; border-bottom: 1px solid #eeeeee; background: #ffffff; }
.perm-name { width: calc(100% - 148px); display: inline-block; vertical-align: top; margin-top: 7px; font-size: 0.95em; }
.perm-values { width: 130px; display: inline-block; }
.perm-add-row { position: relative; height: 30px; margin-bottom: 3px; }
.h-150 { height: 150px; }
.w-100px { width: 100px; }