/* ==========================================================================
   1. CONFIGURATION: Root Variables & Fonts
   ========================================================================== */
:root
{ --content-background-color:245,241,237; --content-font-size:14px; --text-color:132,130,130; --highlight-color:255,165,0;
  --input-text-color:132,130,130; --input-background-color:255,255,255;
  --input-highlight-color:242,182,114; --input-radius:5px; --modal-radius:20px;
  --error-color:255,126,109;
  --warning-color:255,181,71;
  --chart-color-1:#8EC6E7; --chart-color-2:#FFB547; --chart-color-3:#60C6A6; --chart-color-4:#9B79D9; --chart-color-5:#FFB8C6;
  --chart-color-6:#FF6F91; --chart-color-7:#F9C2A1; --chart-color-8:#4DB8FF; --chart-color-9:#E5B0A1; --chart-color-10:#D3D6FF;
  --chart-color-11:#F5C6D8; --chart-color-12:#F2A1C4; --chart-color-13:#6F9C4C; --chart-color-14:#F4B8A2; --chart-color-15:#99E1D9;
  --chart-color-16:#D1A6FF; --chart-color-17:#F3A1D1; --chart-color-18:#FF7E6D; --chart-color-19:#FFD36B; --chart-color-20:#FF9C88;
  --font-file:'Roboto-';
  --bg_radius:14px;
}

/* ==========================================================================
   2. BASE & GLOBAL STYLES
   ========================================================================== */
body,html
{ font-family:'espace_font'; -webkit-font-smoothing:antialiased !important; -moz-osx-font-smoothing:grayscale !important; overflow:hidden; width:100%; height:100%;
  background:radial-gradient(at 20% 20%,rgb(var(--body-gradient-color)),rgb(var(--body-background-color)));
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; color:rgb(var(--text-color));
}
body,html,h1,h2,h3,h4,b,i,label,input,textarea,select,option,button,label,
.e-control, .e-css, .e-error { font-family:'espace_font'; }
pre { font-family:'espace_font_mono'; }
svg text { font-family:'espace_font' !important; font-weight:400; }
table th { text-align:left; font-weight:normal; font-size:auto; }
button { font-size:100%; }

/* --- Forms & Inputs --- */
input, textarea, select
{ background:rgb(var(--input-background-color)); color:rgb(var(--input-text-color));
  border:none; border-radius:var(--input-radius); padding:5px; }
input { height:20px; }
input:focus, textarea:focus, .e-control:focus, .e-control *:focus { outline:2px solid rgb(var(--input-highlight-color)); }
input[type=checkbox]
{ appearance:none; -webkit-appearance:none; -moz-appearance:none; display:inline-block; vertical-align:middle;
  width:24px !important; height:24px !important; border-radius:30px !important; border:2px solid rgb(var(--input-background-color)) !important; cursor:pointer; outline:none !important;
  background-repeat:no-repeat !important; background-position:center !important; background-size:60% !important;
}
input[type=color] { cursor:pointer; padding:0; height:30px; border: none; outline: none; box-shadow: none; }
input:disabled, select:disabled { background:none; padding:0; margin:0; width:auto !important; height:auto !important; appearance:none; }
select:focus { outline:none; }

/* --- Buttons --- */
button, .detail, .btn, .btnDashboard
{ color:rgba(var(--text-color),1); cursor:pointer; border:none; border-radius:5px;
  padding:3px; padding-left:10px; padding-right:10px; outline:none;
  background:rgba(var(--button-color),.5); border-radius:8px;
}
button, .btn, .btnDashboard { border:1px solid rgb(var(--button-color)); }

button:hover, .detail:hover, .btn:hover, .btnDashboard:hover { background:rgb(var(--text-color)); color:rgb(var(--content-background-color)); }
button:focus, .detail:focus, .btn:focus, .btnDashboard:focus { outline:none !important; }

.je-header button { border:transparent; }

/* --- Scrollbar --- */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background-color:rgba(var(--text-color),0.2); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background-color:rgba(var(--text-color),0.4); }

/* ==========================================================================
   3. UTILITY & ANIMATION CLASSES
   ========================================================================== */
.jump { animation:jump 0.6s ease-in-out infinite; display:inline-block; }
@keyframes jump { 0%, 100% { transform:translateY(3px); } 50% { transform:translateY(-3px); } }
.swing { animation:swing 0.6s ease-in-out infinite; display:inline-block; }
@keyframes swing { 0%, 100% { transform:rotate(10deg); } 50% { transform:rotate(-10deg); } }
.spin { animation:spin 1s linear infinite; display:inline-block; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.changes_made { background:rgb(var(--highlight-color)); }
.ai_gradient
{ border:none !important;
  background:linear-gradient(342deg, rgba(131, 58, 180, .5) 0%, rgba(253, 29, 29, .5) 50%, rgba(252, 176, 69, .5) 100%) !important;
}
.btn.ai_gradient:hover { background:linear-gradient(25deg, rgba(131, 58, 180, .75) 0%, rgba(253, 29, 29, .75) 50%, rgba(252, 176, 69, .75) 100%) !important; }

/* ==========================================================================
   4. CORE LAYOUT
   ========================================================================== */
#sideMenu
{ width:200px; position:fixed; top:0; left:0; bottom:0; overflow:auto; font-size:var(--content-font-size); }
#contentWindow
{ position:fixed; top:0; left:200px; bottom:0; right:0; overflow:auto; font-size:var(--content-font-size); bottom:-5px; }

/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* --- Side Menu --- */
#sideMenu { display:flex; flex-direction:column; }
#sideMenu .bottom { margin-top:auto; }
#sideMenu .item
{ padding-top:5px; cursor:pointer; display:inline-block; user-select:none; padding-bottom:5px; border-radius:10px;
  margin:2px; margin-left:5px; margin-right:5px; width:calc(100% - 10px); overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
#sideMenu .item:hover { background-color:rgb(var(--text-color)); color:rgb(var(--content-background-color)); }
#sideMenu .ti { font-size:120%; position:relative; top:2px; padding-left:5px; padding-right:5px; }
#sideMenu .item.active { background-color:rgb(var(--text-color)); color:rgb(var(--content-background-color)); cursor:auto; }

#sideMenu .group { vertical-align: middle; display: flex;  }

#sideMenu .group:has(.open) { border-bottom:1px solid rgb(var(--button-color)); box-shadow: 0 5px 5px rgba(var(--button-color),.2); }
#sideMenu .group .detail { position:relative; left:3px; top:5px; vertical-align: middle; padding-right:5px; }
#sideMenu .group .item { margin-left:0; width:calc(100% - 40px); position:relative; left:-5px; }
#sideMenu .item_lvl_0 { margin-left:34px; width:calc(100% - 39px); position:relative; left:-10px; }
#sideMenu .item_lvl_1 { margin-left:38px; width:calc(100% - 43px); position:relative; left:-10px; }

/* --- Dashboard --- */
.dashboard_title { font-size:120%; font-weight:bold; max-width:calc(100% - 10px); display:inline-block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.dashboard_title .ti { font-size:150%; line-height:0; position:relative; top:4px; }
.dashboard_content {  overflow:none; }
.edit .dashboard_content { border-radius:5px; }
.dashboard_content .btn { height:100%; display:flex; justify-content:center; align-items:center; }
#contentDashboardContainer.edit .dashboard_edit:hover svg path { stroke:rgb(var(--text-color)); }
.e-panel { border: none !important; }
#contentDashboardContainer.edit .e-panel:hover .dashboard_edit { display:block; }
.dashboard_edit
 { padding-left:5px; padding-right:5px; float:right; display:none; position:absolute; top:0; right:0; cursor:pointer; z-index:1000;
   background:rgb(var(--content-background-color)); border-radius:4px; border:2px solid orange; }
.dashboard_edit svg { max-height:20px; max-width:20px; pointer-events:none; }
.dashboard_edit svg path { stroke:rgba(var(--text-color),.5); }
.dashboard_toggle { position:absolute; margin-left:-5px; margin-top:7px; padding:4px; padding-bottom:2px; }
.dashboard_toggle::before { content:'\eee2'; font-family:'tabler-icons'; font-style:normal; font-weight:bold; }
.closed .dashboard_toggle::before { content:'\eee3'; opacity:.5; }
.closed .dashboard_content { display:none; }
.dashboard_closed { display:inline-block; padding:3px; padding-top:6px; font-weight:bold; }
.closed .dashboard_closed { display:block !important; }
.dashboard_content a { text-decoration:none; }
.dashboard_content a i { margin-right:5px; }
.dashboard_content iframe { width:100%; height:100%; border:none; display:block; }
.btnDashboard { background:none; opacity:.5; }
#btnDashboardEdit { opacity:0; }
.btnDashboard:hover { opacity:1; }
#btnDashboardEdit:hover { opacity:.3; }
.dashboard_content>.btn { position:relative; top:3px; left:3px; width:calc(100% - 28px); height:calc(100% - 13px); border-radius:8px; }

.dashboard_closed button { box-shadow:4px 4px 8px rgba(var(--text-color), .1); }
.dashboard_button_filter { margin-right:10px; padding-left:6px; padding-right:6px; }
.dashboard_button_ai { padding-left:30px; }
.dashboard_button_ai:hover
{ box-shadow:0 0 2px rgba(131, 58, 180, 0.5),0 0 3px rgba(253, 29, 29, 0.5),0 0 4px rgba(252, 176, 69, 0.5); animation:hue 1s linear infinite; }
@keyframes hue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
.dashboard_button_ai i { font-weight:bold; position:absolute; margin-left:-20px; margin-top:2px; transition:font-size 100ms ease, margin 100ms ease; }
.dashboard_button_ai:hover i { animation:swing 0.6s ease-in-out infinite; font-weight:bold; font-size:24px; position:absolute; margin-left:-26px; margin-top:-3px; }
.dashboard_button
{ box-shadow:4px 4px 8px rgba(var(--text-color), .1); margin:6px; background:rgb(var(--content-background-color)); }

#editModePanel { position:fixed; bottom:0; left:300px; z-index:2000; background:white; border:2px solid orange; padding:3px; border-radius:5px; }
#viewModePanel { position:fixed; bottom:0; right:0; z-index:2000; }
.dashboard_background
{ background:rgba(var(--content-background-color),1); border-radius:var(--bg_radius); position:absolute;
  box-shadow:4px 4px 8px rgba(var(--text-color),.05);
}

/* --- Tables --- */
.promptTable { font-family:'espace_font_table'; font-size:85%; overflow-x:auto; overflow-y:hidden; position:relative; display:inline-block; border-radius:10px; margin-bottom:10px; max-height:100%; max-width:100%; border-spacing:0; }
.promptTable table { border-collapse:separate; border-spacing:0; width:auto; }
.promptTable thead .fixed { position:sticky; top:0; background:rgb(var(--content-background-color)); z-index:10; }
.promptTable thead th:last-child { border-radius:0 10px 0 0; }
.promptTable thead th:first-child { border-radius:10px 0 0 0; }
.promptTable th, .promptTable td { padding-left:10px; padding-right:10px; padding-top:5px; padding-bottom:5px; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; line-height:15px !important; }
.promptTable th { font-weight:bold; border-bottom:2px solid rgba(var(--button-color),.3); }
.promptTable th:last-child, .promptTable td:last-child { border-right:none; }
.promptTable tr:last-child td { border-bottom:none; }
.promptTable .pagination { position:sticky; left:0; height:24px; margin-left:10px; padding-top:6px; }
.promptTable .pagination:empty { display:none; }
.promptTable .pagination .numbers { min-width:130px; text-align:center; display:inline-block; }
.promptTable .pagination button { margin-left:2px; margin-right:2px; cursor:pointer; }
.promptTable .sortable { cursor:pointer; }
.promptTable .sort { cursor:pointer; padding:0; width:20px; margin:0; margin-right:3px; }
.promptTable .filtervalues { opacity:.5; }
.promptTable .title { font-size:100%; font-weight:bold; opacity:.25; padding-bottom:5px; padding-top:5px; }
.promptTable .clickcell { cursor:pointer; padding:2px; }
.promptTable .clickcell>span
{ background:rgba(var(--button-color),.3); display:block; border-radius:8px; border:1px solid rgba(var(--button-color),1);
  padding-left:8px; padding-right:8px; padding-top:3px; padding-bottom:3px; overflow:hidden; text-overflow:ellipsis;
}
.promptTable .clickcell:hover>span { background:rgb(var(--text-color)); color:rgb(var(--button-color)); }
.promptTable .title { display:none; }
.promptTable tr:nth-child(even) td { background:rgba(var(--text-color),.02); }
.promptItem .promptTable { max-height:300px; max-width:none; overflow-y:auto; }

.edit .promptTable tbody { display:none; }
.group-row.hidden { display:none; }
.group-footer.hidden { font-size:0; }
.group-header { cursor:pointer; }
.group-section-toggle { cursor:pointer; }
.group_start_0 td { border-top:2px solid rgba(var(--highlight-color),1); font-weight:bold; }
.group_end_0 td { background:rgba(var(--highlight-color),.15); font-weight:bold; }
.group_end_1 td { border-bottom:2px solid rgba(var(--highlight-color),.5); }
.group_before, .group_after { opacity:.5; }

/* --- Charts & KPIs --- */
.gradient_defs { position:absolute; visibility:hidden; width:0; height:0; }
.chartContainer .chart, .chartContainer .legend { display:inline-block !important; vertical-align:middle; }
.chartContainer .legend { font-size:80%; max-height:200px; overflow:auto; }
.chartContainer .legend td:nth-child(2) { text-align:center; }
.chartContainer .legend .color { background:#444444; width:20px; height:10px; display:inline-block; border-radius:3px; position:relative; top:1px; }
.chartContainer .legend tr:nth-child(1) .color { background:var(--chart-color-1); }
.chartContainer .legend tr:nth-child(2) .color { background:var(--chart-color-2); }
.chartContainer .legend tr:nth-child(3) .color { background:var(--chart-color-3); }
.chartContainer .legend tr:nth-child(4) .color { background:var(--chart-color-4); }
.chartContainer .legend tr:nth-child(5) .color { background:var(--chart-color-5); }
.chartContainer .legend tr:nth-child(6) .color { background:var(--chart-color-6); }
.chartContainer .legend tr:nth-child(7) .color { background:var(--chart-color-7); }
.chartContainer .legend tr:nth-child(8) .color { background:var(--chart-color-8); }
.chartContainer .legend tr:nth-child(9) .color { background:var(--chart-color-9); }
.chartContainer .legend tr:nth-child(10) .color { background:var(--chart-color-10); }
.chartContainer .legend tr:nth-child(11) .color { background:var(--chart-color-11); }
.chartContainer .legend tr:nth-child(12) .color { background:var(--chart-color-12); }
.chartContainer .legend tr:nth-child(13) .color { background:var(--chart-color-13); }
.chartContainer .legend tr:nth-child(14) .color { background:var(--chart-color-14); }
.chartContainer .legend tr:nth-child(15) .color { background:var(--chart-color-15); }
.chartContainer .legend tr:nth-child(16) .color { background:var(--chart-color-16); }
.chartContainer .legend tr:nth-child(17) .color { background:var(--chart-color-17); }
.chartContainer .legend tr:nth-child(18) .color { background:var(--chart-color-18); }
.chartContainer .legend tr:nth-child(19) .color { background:var(--chart-color-19); }
.chartContainer .legend tr:nth-child(20) .color { background:var(--chart-color-20); }
.chartContainer .title { font-size:100%; font-weight:bold; opacity:.25; padding-bottom:5px; padding-top:5px; }
.chartContainer .chartoverlay { position:absolute; z-index:1; pointer-events:none; width:100%; background:rgba(var(--content-background-color),.6); }
.chartContainer .chartoverlay:empty { display:none; }
.kpi_values .kpi { display:inline-block; margin-right:20px; }
.kpi_values .kpi .title { display:block; font-size:100%; }
.kpi_values .kpi .value { font-size:150%; font-weight:bold; }
.kpi_values .kpi small { font-size:50%; }
.kpi_values1 .kpi .value { font-size:250% !important; }
.kpi_values1 .kpi .title { display:none; }
.promptTable .kpi_values td { text-overflow:none; overflow:visible; }
.chartoverlay .kpi_values { text-shadow:0px 0px 2px rgba(var(--content-background-color),1);  }
.chartoverlay .kpi_values .kpi { display:inline-block; text-align:left; }
.chartoverlay .kpi_values .kpi .title { line-height:3px; }
.chartoverlay .kpi_values .kpi .value { font-size:200%; }
.chartDownload { opacity:.5; background:none; } .chartDownload:hover { opacity:1; }

/* --- Filter Component --- */
.filterContent { padding:5px; height:calc(100% - 10px); overflow:auto; } 
.filterContent .title { box-sizing:border-box; margin-bottom:5px; }
.filterContent select { height:30px !important; margin-bottom:3px; }
.filterContent input[type=text] { width:160px; margin-bottom:3px; }
.filterContent .e-multiselect { margin-bottom:3px; }
.filterContent input[type=number] { width:61px; }
.filterContent button { height:30px !important; position:relative; top:1px; }
.filterContent td:first-child { white-space:nowrap; padding-right:10px; }
.filterContent td:first-child .ti { font-size:140%; position:relative; top:3px; }
.filter_parameter_name { display:inline-block; width:70px; }
.parameter_help { font-size:80%; opacity:.5; margin-left:10px; }

/* --- Data Structure Component --- */
.datastructure_action { border:2px solid rgba(var(--text-color),.1); box-shadow:rgba(var(--text-color),.2) 0px 0px 16px; padding:5px; border-radius:10px; margin-top:20px; }
.datastructure_action_batch { border:2px solid rgba(var(--highlight-color),.2); box-shadow:rgba(var(--highlight-color),.2) 0px 0px 16px; padding:5px; border-radius:10px; margin-top:20px; }
.datastructure_info { border-top:2px solid rgba(var(--highlight-color),.2); padding-top:5px; margin-top:5px; font-family:'espace_font_mono'; font-size:12px; }
.datastructure_info:empty { display:none; }
.datastructure_aiquery { width:calc(50% - 20px); max-width:300px; display:inline-block; margin-right:20px; vertical-align: top; }
.datastructure_aiquery textarea { font-family:'espace_font_mono'; font-size:80%; width:100%; }

/* --- Miscellaneous Components --- */
.detail { margin-bottom:5px; font-size:100%; background:none; }
.detail.closed::before { content:'\ea61'; font-family:'tabler-icons'; font-style:normal; }
.detail.open::before { content:'\ea5f'; font-family:'tabler-icons'; font-style:normal; }
.list_element { max-width:100%; overflow:hidden; border-radius:10px; padding:5px; display:block; cursor:pointer; opacity:.5; }
.list_element:hover { background:rgb(var(--text-color)); color:rgb(var(--content-background-color)); opacity:1; }
.page-textarea { width:100% !important; display:block; border-color:rgba(var(--text-color),0) !important; }
.truncation-icon { cursor:pointer; margin-right:4px; opacity:.2; }
.truncation-icon::before { content:'\ef84'; font-family:'tabler-icons'; }
.truncation-icon:hover { opacity:1; }

/* --- Datasource Pages --- */
#select_datasource .chartContainer .chartoverlay { position:static !important; }
.select_datasource_table { border-collapse:collapse; display:inline-block; margin-left:20px; margin-bottom:20px; }
.select_datasource_table td>div { display:block; height:20px; overflow:hidden; }
.select_datasource_table td { border-radius:10px; padding:5px; }
.select_datasource_table tr { cursor:pointer; padding:10px; }
.select_datasource_table tr:hover { background:rgb(var(--text-color),.2); }
#addsource_sqllog { font-family:monospace; font-size:80%; margin-top:20px; margin-bottom:10px; max-height:200px; overflow:auto; }
#addsource_sqllog .error, #addsource_sqllog_highlight.error { color:rgb(var(--error-color)); }
#addsource_sqllog .warning { color:rgb(var(--warning-color)); }
#addsource_sqllog_highlight.error::before { color:rgb(var(--error-color)); font-family:'tabler-icons'; content:'\f6f0'; }
#addsource_sqllog_highlight { font-size:100%; }
.addsource_detail_item { border:1px solid rgba(var(--input-text-color),.2); margin:10px; padding:10px; border-radius:10px; }
.addsource_detail_item input, .addsource_detail_item select { margin-bottom:3px; }
.addsource_detail_item .addsource_detail_item .addsource_detail_item { border:none; padding:0; margin-right:0; }
.addsource_detail_title { margin:10px; margin-left:0; }
#testQueryOptionsIndicator { display:inline-block; text-align:center; }
#addsource_testai { font-size:120%; }

/* --- AI Prompt Interface --- */
#aiPromptContainer { background:var(--input-background-color); position:fixed; top:0; bottom:0; }
#aiPromptWindow { position:fixed; top:0; width:calc(100% - 240px); min-height:20px; bottom:10px; overflow-y:auto; }
#aiPromptInput
{ min-height:20px; width:calc(100% - 280px); position:fixed; bottom:10px; padding:10px 20px 40px 20px; outline:none;  border-radius:var(--modal-radius) !important; }
#aiPromptInput:empty:before { content:attr(data-placeholder); color:rgba(var(--text-color),.5); font-style:italic; }
#aiPromptMenu { position:fixed; bottom:20px; width:calc(100% - 260px); padding-left:5px; }
#aiPromptMenu .btn, .promptItem .btn { border:1px solid rgba(var(--text-color),.15); color:rgba(var(--text-color),.5); border-radius:20px; padding:2px 8px 4px 8px; margin-left:5px; cursor:pointer; background:none; }
#aiPromptMenu .btn .ti, .promptItem .btn .ti { position:relative; top:1px; padding-right:5px; }
#aiPromptMenu .btn:hover, .promptItem .btn:hover { border-color:rgba(var(--text-color),.5); color:rgba(var(--content-background-color),1); background:rgba(var(--text-color),1); }

#aiPromptInput, .aiPromptInput
{ background:rgb(var(--content-background-color)); background-origin: border-box; color:rgba(var(--text-color),.7);
  border: 2px solid transparent; background-clip: padding-box, border-box; resize: none;
  background-image: 
    linear-gradient(rgb(var(--content-background-color)), rgb(var(--content-background-color))),
    linear-gradient(342deg, rgba(131, 58, 180, 0.2) 0%, rgba(253, 29, 29, 0.2) 50%, rgba(252, 176, 69, 0.2) 100%);
background-image: 
    linear-gradient(rgba(var(--content-background-color),.75), rgba(var(--content-background-color),.75)),
    linear-gradient(342deg, rgba(131, 58, 180, 0.2) 0%, rgba(253, 29, 29, 0.2) 50%, rgba(252, 176, 69, 0.2) 100%);
}
#aiPromptInput::placeholder, .aiPromptInput::placeholder
{ color:rgba(var(--text-color),.3);
}
.aiPromptInput { border-radius:10px; font-size:16px; padding:10px; width:calc(100% - 35px); height:100px; margin:5px; margin-top:15px; }
#aiPromptInput:focus, .aiPromptInput:focus
{ outline:none; box-shadow:0 0 2px rgba(131, 58, 180, 0.5),0 0 3px rgba(253, 29, 29, 0.5),0 0 4px rgba(252, 176, 69, 0.5); }
.aiPromptInput:read-only
{ background-image: 
    linear-gradient(rgb(var(--content-background-color)), rgb(var(--content-background-color))),
    linear-gradient(342deg,rgba(var(--text-color),.2) 0%, rgba(var(--text-color),.4) 100%);
  box-shadow:none !important;
}
.db-modal-ai .promptSample { font-size:14px; }
.promptSample { max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

#btnPromptSend { position:fixed; right:45px; bottom:16px; text-align:center; width:80px; line-height:20px; padding-bottom:1px; background:rgba(var(--text-color),.75); color:white !important; }
#btnPromptSend:hover { background:rgba(var(--text-color),1); }
#btnPromptSend i { display:inline-block; position:relative; top:4px !important; font-size:150%; line-height:12px !important; }
#btnPromptSend:hover i { animation:swing 1s ease-in-out infinite; }
.statement { font-size:80%; opacity:.8; }
.promptItem { margin-top:10px; margin-bottom:10px; display:flex; flex-wrap:wrap; }
.promptItem .time { font-size:80%; opacity:.8; flex-basis: 100%; }

#addsource_testai { max-height:400px; overflow:auto; font-size:80%; }
#addsource_testai h1, .aiContent h2, #addsource_testai h3, #addsource_testai h4, #addsource_testai ul { margin:0; }
#addsource_testai h1 { font-size: 1.3em; } #addsource_testai h2 { font-size: 1.2em; } #addsource_testai h3 { font-size: 1.1em; }
#addsource_testai h4, #addsource_testai h5, #addsource_testai h6 { font-size: 1em; }

/* --- Dashboard Editor --- */
#edit_dashboard label { display:inline-block; width:120px; }
#add_panel_holder { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
#add_panel_holder .add_panel { padding: 20px; }

/* --- Configuration Pages --- */
.configuration_icon_groups { font-size:0; position:relative; }
.configuration_icon_groups:not(:empty)::before { content:'\fe15'; font-family:'tabler-icons'; font-size:100%; margin-left:5px; }

/* --- Modals & Dialogs --- */
#modalDialogBackground, #modalDialogOverlayBackground { background:black; opacity:.3; position:fixed; top:0; left:0; right:0; bottom:0; display:none; }
#modalDialog, #modalDialogOverlay { background:rgb(var(--content-background-color)); position:fixed; width:calc(100% - 40px); max-width:1800px; top:20px; left:20px; bottom:20px; border-radius:10px; display:none; overflow:hidden; left:50%; transform:translateX(-50%); }
#modalDialog .header { height:30px; padding:5px; padding-left:20px; padding-right:20px; }
#modalDialog .content, #modalDialogOverlay .content { overflow:auto; box-sizing:border-box; height:100%; padding:20px; padding-bottom:40px; }
#modalDialogOverlay .iconList .ti { display:inline-block; font-size:200%; width:30px; height:30px; text-align:center; overflow:hidden; cursor:pointer; margin:5px; }
#modalDialogOverlay { display:none; z-index:3000; }
#modalDialog details { font-family:monospace; font-size:80%; }
.simple-dialog-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(var(--text-color),.2); display:flex; align-items:center; justify-content:center; z-index:10000; }
.simple-dialog { background:rgb(var(--content-background-color)); border-radius:8px; box-shadow:0 8px 24px rgba(var(--text-color),0.15); max-width:90vw; max-height:80vh; overflow:hidden; display:flex; flex-direction:column; position:relative; }
.simple-dialog-content { padding:16px; margin-top:36px; overflow:auto; white-space:pre-wrap; word-break:break-word; flex-grow:1; border-radius:8px 8px 0 0; background:rgb(var(--content-background-color)); font-family:'espace_font_mono'; font-size:80%; }
.simple-dialog-close { position:absolute; top:8px; right:8px; }

/* --- Login Page --- */
#client_login_user, #client_login_pass { width:200px; }

.js-tooltip-instance
{ position:fixed; background-color:rgb(var(--content-background-color)); color:rgba(var(--text-color),.7); border:1px solid rgba(var(--text-color),.25);
  padding:4px 8px; border-radius:5px; white-space:nowrap; z-index: 1000; pointer-events:none;
  opacity:0; transition:opacity 0.2s ease-in-out 1s; font-size:80%;
  box-shadow: inset -2px 2px 0px rgba(var(--button-color),.25);
}

.js-tooltip-instance.is-visible { opacity:1; }

#topMenu { display:none; top:0; left:-6px; position:fixed; padding-top:6px; }
#topMenuIn { display:none; position:relative; top:-10px; }
@media (max-width: 599px)
{ #contentWindow { top:0; left:0; }
  #topMenu { display:block; }
  #topMenuIn { display:block; }
  #sideMenu.collapsed { display:none; }
  .dashboard_title { margin-left:14px; }
  .settings_title { margin-left:20px; }
  #aiPromptWindow { width:calc(100% - 40px); }
  #aiPromptInput { width:calc(100% - 80px); }
  #viewModePanel { display:none !important; }
}

.filter_selected { background:rgba(var(--button-color),1); box-shadow:inset 2px 2px 1px rgba(var(--text-color),.25); }
.filter_title { margin-left:10px; margin-right:10px; }
.dashboard_closed button { background:rgb(var(--content-background-color)); }
.dashboard_closed button:hover { background:rgb(var(--text-color)); }

.db-modal-ai .db-modal-body
{ user-select:text; border-radius:14px;
  background:rgb(var(--content-background-color)); background-origin:border-box; border:3px solid transparent; background-clip:padding-box, border-box;
  background-image:linear-gradient(rgb(var(--content-background-color)), rgb(var(--content-background-color))), linear-gradient(342deg,rgba(131, 58, 180, 0.5) 0%,rgba(253, 29, 29, 0.5) 50%,rgba(252, 176, 69, 0.5) 100%);
}

.aiCont_ent { padding:5px; width:100%; height:100%; overflow:auto; }
.aiCont_ent .result { margin:5px; padding:5px; border-radius:16px; padding:16px; max-width:750px; margin-right:18px; }

.aiContent .result:empty { display:none; }
.aiContent h1, .aiContent h2, .aiContent h3, .aiContent h4, .aiContent ul { margin:0; }
.aiContent h1 { font-size: 1.3em; } .aiContent h2 { font-size: 1.2em; } .aiContent h3 { font-size: 1.1em; }
.aiContent h4, .aiContent h5, .aiContent h6 { font-size: 1em; }

.e-panel
{ position: absolute; border-radius: 4px; overflow: hidden; border: none; }
.e-panel.selected
{ box-shadow: 0 0 0 4px rgba(33,150,243,0.3) !important; z-index: 1000; }
.e-panel-container { height: 100%; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
.dashboard_content { flex: 1; width: 100%; overflow: hidden; position: relative; }
.drag-handle
{ position:absolute; top: 0; left: 0; width:16px; height:16px; cursor: move; z-index: 20; display: none; 
  background:orange; color:white; border-bottom-right-radius: 4px;
}
.drag-handle i, .resize-xy i { pointer-events:none; }
.resize-xy
{ position: absolute; bottom: 0; right: 0; width: 15px; height: 15px; cursor: se-resize;  z-index: 20; display: none; }
.resize-xy::after
{ content: ''; position: absolute; bottom: 2px; right: 2px; width: 0; height: 0; border-style: solid; border-width: 0 0 8px 8px; 
  border-color: transparent transparent orange transparent; 
}
.edit .drag-handle, .edit .resize-xy { display: block; }
.edit .e-panel { user-select: none; -webkit-user-select: none; }
body.is-dragging-dashboard-item iframe { pointer-events: none !important; }
.dashboard_toggle { z-index: 11; position: relative; }
#contentDashboard { position: relative; width: 100%; height: 100%; z-index: 1; }
.dashboard_background { z-index: 0; pointer-events: none; }

.db-modal-overlay
{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 9999;
  display: flex; justify-content: center; align-items: center;
}
.db-modal-content .header
{ opacity:.5; position:relative; top:-8px; left:5px; font-weight:bold;
  border-bottom:2px solid rgba(var(--text-color),.25); padding-bottom:5px; margin-right:10px; }
.db-modal-content .header i { font-size:120%; position:relative; top:3px; }
.db-modal-content
{ position:relative; border-radius:14px; box-shadow:4px 4px 8px rgba(var(--text-color),.25);
  display:flex; flex-direction: column; overflow: hidden;
}
.db-modal-ai
{ position: absolute; top: 30px; bottom: 30px; left: 30px; right: 30px; max-width: 1200px; margin: 0 auto; }
.db-modal-filter { width: auto; height: auto; max-width: 90vw; max-height: 90vh; }
.db-modal-close { position: absolute; top:8px; right:8px; z-index:100; }
.db-modal-body { flex: 1; overflow: auto; padding: 20px; background:rgb(var(--content-background-color)); }

.vg-tooltip
{ z-index:200000;
  background:rgb(var(--content-background-color)) !important; color:rgb(var(--text-color)) !important;
  box-shadow:4px 4px 8px rgba(var(--text-color),.05) !important;
}
.vg-tooltip td.key { color:rgba(var(--text-color),.5) !important; }
.vg-tooltip td.value { color:rgb(var(--text-color)) !important; }