/* =============================================================
   DARK THEME — body.dark (all types), body.dark-classic (original bg-image dark style)

   ARCHITECTURE RULE (enforced):
   ✅ ALLOWED here: background-color, color, border-color, box-shadow
      (decorative/color), fill, stroke, opacity, filter
   ✅ Selectors: body.dark, body.dark-classic, body.normal.dark,
      body.normal.dark-classic (and @media variants)
   ❌ FORBIDDEN here: padding, margin, height, width, font-size,
      line-height, gap — those belong in layout.css under bare
      or body.normal / body.compact selectors
   ============================================================= */

body.dark-classic {
  background-image: url(../images/darkbg.jpg);
  background-color: #17191b;

  --color-text:             #cccccc;
  --color-text-muted:       rgba(255,255,255,0.4);
  --color-text-header:      #cccccc;
  --color-text-nav:         #cccccc;
  --color-text-input:       #cccccc;
  --color-text-placeholder: rgba(255,255,255,0.4);

  --color-header-bg:        rgba(255,255,255,0.1);
  --color-nav-bg:           rgba(255,255,255,0.1);
  --color-nav-active:       rgba(0,0,0,0.2);
  --color-nav-border:       #3a3a3a;
  --color-nav-sub-bg:       rgba(0,0,0,0.2);

  --color-surface:          rgba(255,255,255,0.1);
  --color-surface-alt:      rgba(0,0,0,0.1);
  --color-input-bg:         rgba(0,0,0,0.3);
  --color-border-input:     transparent;
  --color-border:           transparent;

  --color-tbl-th:           #333333;
  --color-tbl-th-alt:       #444444;
  --color-tbl-td:           rgba(0,0,0,0.2);
  --color-tbl-td-alt:       rgba(0,0,0,0.1);
  --color-tbl-td-hover:     rgba(0,0,0,0.3);
  --color-tbl-td-hover-alt: rgba(0,0,0,0.4);
  --color-tbl-nested-bg:    transparent;
  --color-tbl-nested-th:    #323232;
  --color-tbl-nested-td:    rgba(0,0,0,0.15);

  --color-btn:              #444444;
  --color-btn-light:        #777777;
  --color-btn-text:         #cccccc;

  --color-dialog-header:    #222222;
  --color-dialog-body:      #333333;
  --color-overlay:          rgba(0,0,0,0.8);

  --color-form-head-bg:     rgba(255,255,255,0.1);
  --color-mx-list-bg:       rgba(0,0,0,0.3);
  --color-tag-bg:           rgba(0,0,0,0.3);
  --color-fileupload-bg:    rgba(0,0,0,0.3);
  --color-grp-border:       #666666;
  --color-ve-wrap-bg:       #333333;
  --color-ve-wrap-btn:      #646464;
  --color-ve-wrap-arrow:    #333333;

  --color-scrollbar-thumb:  rgba(0,0,0,0.7);
  --color-scrollbar-track:  rgba(0,0,0,0.7);
  --color-shadow:           rgba(0,0,0,0.3);
  --color-checkbox-mark:    #ffffff;
}

/* Dark structural overrides that can't be tokens */
body.dark a.hamburger span          { background-color: #dddddd; }
body.dark .btn                      { color: #ffffff; }
body.dark form.wrap-data,
body.dark .wrap-data.no-bg          { background: transparent; }
body.dark .tbl-list .btn            { background-color: #222222; }
body.dark .cke_top,
body.dark .cke_bottom               { background: rgba(255,255,255,0.1) !important; }
body.dark .cke_bottom               { border-top: 0 !important; }
body.dark input.disable             { opacity: 0.75; background-color: rgba(255,255,255,0.1); }
body.dark div.mxpaging input.show-rec {
  background-color: #444 !important;
  color: #ffffff !important;
}

body.dark ul.main-nav li:last-child,
body.dark ul.main-nav li ul li:last-child { border-bottom: 0; }
body.dark ul.main-nav li ul li      { border-bottom: 1px solid #333333; }

/* Dark: core-nav */
body.dark div.core-nav ul li,
body.dark div.core-nav ul li.themetype:hover,
body.dark div.core-nav ul li.font:hover { background-color: #333333; border-color: transparent; }
body.dark-classic div.core-nav          { background-color: #222222; }

/* Dark: scrollbar */
body.dark textarea,
body.dark div.mxdialog,
body.dark div.mxdialog div.content,
body.dark div.wrap-left,
body.dark .wrap-data,
body.dark div.wrap-right form {
  scrollbar-color: #444444 rgba(0,0,0,0.7);
}

/* =============================================================
   CKEditor dark toolbar icon overrides
   Collapsed from 150 individual rules to 2 attribute selectors.
   background-position is handled by CKEditor's own stylesheet.
   ============================================================= */
body.dark [class*="cke_button__"][class*="_icon"] {
  background-image: url(../images/icons.png) !important;
}
body.dark .cke_hidpi [class*="cke_button__"][class*="_icon"] {
  background-image: url(../images/icons_hidpi.png) !important;
  background-size: 16px !important;
}

/* CKEditor UI chrome — dark */
body.dark .cke_dialog_title     { background: #555555; color: var(--color-accent); }
body.dark .cke_dialog_body,
body.dark .cke_dialog_contents  { background: #222222; }
body.dark .cke_dialog_contents  { border-top: 0; }
body.dark .cke_dialog_footer    { border-top: 1px solid #333333; background: #222222; }
body.dark a.cke_dialog_tab      { background-color: #555555; color: #dcdcdc; border: 0; border-radius: 0; }
body.dark a.cke_dialog_tab_selected { background-color: #111111; }
body.dark a.cke_dialog_tab:hover,
body.dark a.cke_dialog_tab_selected,
body.dark a.cke_dialog_tab_selected:hover,
body.dark a.cke_dialog_tab:focus { border: 0; }
body.dark input.cke_dialog_ui_input_text  { border-color: transparent; }
body.dark select.cke_dialog_ui_input_select { border: 0; background: #111111; }
body.dark a.cke_dialog_ui_button_ok,
body.dark a.cke_dialog_ui_button {
  background: #555555; border: 0; border-radius: 0;
  box-shadow: none;
  /* height / line-height are sizing — defined in layout.css under bare .cke_dialog_ui_button */
}
body.dark a.cke_dialog_ui_button_ok:hover,
body.dark a.cke_dialog_ui_button:hover { background: var(--color-accent) !important; }
body.dark .cke_resizer           { border-color: transparent #484848 transparent transparent; }
body.dark .cke_dialog .ImagePreviewBox {
  border: 0; background: #111111 !important;
  scrollbar-color: rgba(130,130,130,0.3) rgba(130,130,130,0.5);
  scrollbar-width: thin;
}
body.dark .cke_button_label,
body.dark .cke_combo_text,
body.dark .cke_reset_all,
body.dark .cke_reset_all *,
body.dark .cke_reset_all a,
body.dark .cke_reset_all textarea   { color: #cccccc; }
body.dark .cke_combo_button         { background-color: rgba(0,0,0,0.3); /* margin-right moved to layout.css */ }
body.dark .cke_combo:after          { display: none; }
body.dark a.cke_button_off:hover,
body.dark a.cke_button_off:focus,
body.dark a.cke_button_off:active   { background: rgba(0,0,0,0.3); border: 1px rgba(0,0,0,0.3) solid; }
body.dark .cke_combo_on a.cke_combo_button,
body.dark .cke_combo_off a.cke_combo_button:hover,
body.dark .cke_combo_off a.cke_combo_button:focus,
body.dark .cke_combo_off a.cke_combo_button:active,
body.dark a.cke_button_on           { background: rgba(0,0,0,0.5); border: 1px solid transparent; }
body.dark a.cke_path_item:hover,
body.dark a.cke_path_item:focus,
body.dark a.cke_path_item:active    { background: rgba(0,0,0,0.5); }

/* =============================================================
   jQuery UI datepicker/timepicker — dark theme (dark + dark-classic)
   ============================================================= */
body.dark .ui-widget-content,
body.dark-classic .ui-widget-content        { background: #222222; border: 1px solid #333333 !important; }
body.dark .ui-datepicker-multi dl dd::before,
body.dark .ui-timepicker-div dl dt,
body.dark .ui-datepicker .ui-datepicker-title,
body.dark-classic .ui-datepicker-multi dl dd::before,
body.dark-classic .ui-timepicker-div dl dt,
body.dark-classic .ui-datepicker .ui-datepicker-title { color: #cccccc; }
body.dark .ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input,
body.dark-classic .ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input {
  border-bottom: 2px solid #333333 !important;
  color: #ccc;
}
body.dark .ui-widget-content .ui-state-default,
body.dark .ui-widget-header,
body.dark .ui-datepicker th,
body.dark .ui-datepicker .ui-datepicker-title select,
body.dark-classic .ui-widget-content .ui-state-default,
body.dark-classic .ui-widget-header,
body.dark-classic .ui-datepicker th,
body.dark-classic .ui-datepicker .ui-datepicker-title select {
  background: #111111 !important;
  border: 1px solid transparent !important;
  color: #ccc !important;
}
body.dark .ui-widget-content .ui-state-default.ui-slider-handle,
body.dark-classic .ui-widget-content .ui-state-default.ui-slider-handle { background-color: #555555 !important; }
body.dark .ui-datepicker .ui-datepicker-buttonpane button,
body.dark-classic .ui-datepicker .ui-datepicker-buttonpane button {
  background: #555555 !important; border: 0 !important;
  border-radius: 0 !important; color: #fff !important; opacity: 1;
}
body.dark .ui-datepicker .ui-datepicker-header,
body.dark-classic .ui-datepicker .ui-datepicker-header { background: #222222 !important; }
body.dark .ui-state-hover,
body.dark .ui-widget-content .ui-state-hover,
body.dark-classic .ui-state-hover,
body.dark-classic .ui-widget-content .ui-state-hover             { background: #333333 !important; }
body.dark .ui-state-active,
body.dark .ui-widget-content .ui-state-active,
body.dark .ui-widget-header .ui-state-active,
body.dark a.ui-button:active,
body.dark .ui-button:active,
body.dark .ui-button.ui-state-active:hover,
body.dark-classic .ui-state-active,
body.dark-classic .ui-widget-content .ui-state-active,
body.dark-classic .ui-widget-header .ui-state-active,
body.dark-classic a.ui-button:active,
body.dark-classic .ui-button:active,
body.dark-classic .ui-button.ui-state-active:hover               { background: #000000; }
body.dark .ui-widget-content .ui-state-default.ui-state-active,
body.dark-classic .ui-widget-content .ui-state-default.ui-state-active {
  color: var(--color-accent) !important;
  border: 1px solid var(--color-accent) !important;
}
body.dark .ui-widget-content .ui-state-default.ui-state-highlight,
body.dark-classic .ui-widget-content .ui-state-default.ui-state-highlight {
  background: var(--color-accent) !important;
  border: 1px solid var(--color-accent) !important;
}
body.dark .ui-state-highlight.ui-state-active,
body.dark .ui-widget-content .ui-state-highlight.ui-state-active,
body.dark .ui-widget-header .ui-state-highlight.ui-state-active,
body.dark .ui-widget-content .ui-state-default.ui-state-highlight.ui-state-active,
body.dark-classic .ui-state-highlight.ui-state-active,
body.dark-classic .ui-widget-content .ui-state-highlight.ui-state-active,
body.dark-classic .ui-widget-header .ui-state-highlight.ui-state-active,
body.dark-classic .ui-widget-content .ui-state-default.ui-state-highlight.ui-state-active {
  background-color: transparent !important;
}
/* autocomplete dropdown text color */
body.dark .ui-autocomplete .ui-menu-item,
body.dark .ui-autocomplete .ui-menu-item-wrapper,
body.dark-classic .ui-autocomplete .ui-menu-item,
body.dark-classic .ui-autocomplete .ui-menu-item-wrapper { color: #cccccc !important; }
body.dark .ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
body.dark-classic .ui-autocomplete .ui-menu-item-wrapper.ui-state-active { color: #ffffff !important; background-color: #333333 !important; }

/* =============================================================
   Dark (all types: normal + compact)
   ============================================================= */
body.dark {
  background-image: none;
  background-color: #2f2f2f;

  --color-text:          #cccccc;
  --color-text-input:    #eeeeee;
  --color-text-header:   #ffffff;
  --color-text-muted:    rgba(255,255,255,0.4);
  --color-header-bg:     #383838;
  --color-nav-bg:        #3d3d3d;
  --color-surface:       #444444;
  --color-surface-alt:   #3d3d3d;
  --color-input-bg:      #4d4d4d;
  --color-border-input:  #3e3e3e;
  --color-border:        transparent;
  --color-btn:           #555555;
  --color-ve-wrap-bg:    #444444;
  --color-ve-wrap-btn:   #4d4d4d;
  --color-ve-wrap-arrow: #444444;
  --color-tbl-th:        #4d4d4d;
  --color-tbl-th-alt:    #444444;
  --color-tbl-td:           #3d3d3d;
  --color-tbl-td-alt:       #444444;
  --color-tbl-td-hover:     #555555;
  --color-tbl-nested-bg:    transparent;
  --color-shadow:        rgba(0,0,0,0.2);
  --color-dialog-body:   #4d4d4d;
  --color-form-head-bg:  #383838;
  --color-mx-list-bg:    #4d4d4d;
  --color-tag-bg:        #4d4d4d;
  --color-grp-border:    transparent;
}

/* Normal Dark — structural rules from DEV theme.css */
body.dark div.wrap-left              { background-color: #3d3d3d; }
body.dark ul.main-nav li a,
body.dark div.wrap-left              { background-color: #3d3d3d; }
body.dark .logo-wrap,
body.dark div.header                 { background-color: #383838; }
body.dark div.header                 { box-shadow: rgba(0,0,0,0.2) 0 0 8px 5px; }
body.dark ul.main-nav li ul,
body.dark ul.main-nav li:hover ul    { background-color: #3d3d3d; }
body.dark div.page-nav               { background-color: #444444; }
body.dark .page-nav .btn             { background-color: #383838; outline: none; }
body.dark div.wrap-form              { background-color: #444444; box-shadow: none; }
body.dark table.tbl-list             { background-color: transparent; }
body.dark .tbl-list thead tr,
body.dark ul.dragsort-title          { background-color: #4d4d4d; }
body.dark .tbl-list thead th,
body.dark .tbl-list tfoot th        { background-color: #4d4d4d; color: #c3c3c3; }
body.dark .tbl-list thead th a,
body.dark .tbl-list tfoot th a      { color: #c3c3c3; }
body.dark .tbl-list td,
body.dark ul.dragsort-list li div.drag > div { background-color: #3d3d3d; }
body.dark .tbl-list td:nth-child(2n+2),
body.dark ul.dragsort-list li div.drag > div:nth-child(2n+2),
body.dark div.grp-wrap > ul          { background-color: #3d3d3d; }
body.dark .tbl-list tr:hover td,
body.dark ul.dragsort-list li div.drag:hover > div { background-color: #3d3d3d; }
body.dark i.rdo em,
body.dark i.chk em,
body.dark div.grp-wrap > ul          { border-color: #a5a5a5; }
body.dark div.mxdialog div.body      { background-color: #4d4d4d; }
body.dark div.mxdialog a.del         { background-color: #4d4d4d; }
body.dark div.mxdialog h2            { color: #f6f6f6 !important; background-color: #2f2f2f; }
body.dark div.mxdialog .btn:hover    { color: #ffffff; }
body.dark div.mxdialog div.content   { color: #cccccc; }
body.dark a.del                      { background-color: #666666; }
body.dark a.del:before,
body.dark a.del:after                { background-color: #cccccc; }
body.dark a.hamburger span           { background-color: #dddddd; }
body.dark ul.main-nav li a.add::before,
body.dark ul.main-nav li a.add::after { background-color: #cccccc; }
body.dark .form-head                 { background-color: #383838; }
body.dark div.mxpaging a,
body.dark div.core-nav li.themetype a,
body.dark div.core-nav li.font a,
body.dark .mx-list,
body.dark ul.tbl-form li .mx-list,
body.dark div.grp-wrap > ul li .mx-list,
body.dark div.mx-file-upload,
body.dark ul.main-nav li ul li       { background-color: #4d4d4d; }
body.dark ul.main-nav li:hover,
body.dark div.core-nav ul li a:hover,
body.dark ul.main-nav > li.active,
body.dark div.core-nav ul > li a.active {
  background-color: var(--color-accent);
  background: linear-gradient(104deg, var(--color-accent) 0%, var(--color-accent-2) 100%);
  color: #ffffff;
}
body.dark .btn,
body.dark .button,
body.dark .btn.ico,
body.dark .tbl-list .btn             { background-color: #4d4d4d; color: #cccccc; }
body.dark h1.pg-ttl                  { color: #cccccc !important; }
body.dark div.mxpaging div           { color: #cccccc; }
body.dark div.nav-right a:before,
body.dark div#nav-left a:before      { color: #cccccc; border-right-color: #cccccc; border-bottom-color: #cccccc; }
body.dark div.mxpaging input.show-rec {
  border: 1px solid #4d4d4d;
  background-color: #4d4d4d !important;
  color: #f6f6f6 !important;
}
body.dark textarea,
body.dark div.mxdialog,
body.dark div.mxdialog div.content,
body.dark .wrap-data,
body.dark div.wrap-right form        { scrollbar-color: #414141 transparent; }
body.dark div.mx-file-upload div.drop { background-color: #7c7c7c; }
body.dark div.search-data.active,
body.dark div.search-data.active.d  { background-color: #444444; }
body.dark ul.main-nav li.active:has(ul li.active),
body.dark ul.main-nav li.active:has(ul li.active) a:nth-child(2) { background: transparent; color: #ffffff; }
body.dark input[type="text"],
body.dark input[type="password"],
body.dark input[type="number"],
body.dark textarea,
body.dark div.select-box:after{ background-color: #4d4d4d; } /* SHAHID: Remove This > body.dark i.rdo em, body.dark i.chk em */    
body.dark input[type="text"],
body.dark input[type="password"],
body.dark input[type="number"],
body.dark textarea                   { color: #cccccc; border-color: transparent; }
body.dark input:-webkit-autofill     {
  -webkit-box-shadow: 0 0 0 1000px #3e3e3e inset !important;
  box-shadow: 0 0 0 1000px #3e3e3e inset !important;
  -webkit-text-fill-color: #aaaaaa;
  border: 1px solid #4d4d4d;
}
body.dark select::picker(select)     { border: 1px solid #6b6b6b; }
body.dark option                     { background-color: #4d4d4d; color: #cccccc; border: 0; } /* SHAHID: background-color: #2e2e2e; */
/* Lighter arrow on dark bg so select doesn't appear darker than plain inputs */
body.dark select,
body.dark-classic select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23bbbbbb'/%3E%3C/svg%3E");
}
body.dark div.core-nav a.del         { background-color: #4d4d4d; }
body.dark div.core-nav a.del:before,
body.dark div.core-nav a.del:after   { background-color: #cccccc; }
body.dark .tbl-list.grp-wrap thead th a { background-color: #444444; }
body.dark .tbl-list.grp-wrap thead th a:before,
body.dark .tbl-list.grp-wrap thead th a:after { background-color: #cccccc; }
body.dark-classic select::picker(select)    { border: 1px solid #3a3a3a; }
body.dark-classic select option             { background-color: #222222; border-color: transparent; color: #cccccc; }
body.dark-classic input[type="text"],
body.dark-classic input[type="password"],
body.dark-classic input[type="number"],
body.dark-classic textarea,
body.dark-classic div.select-box:after      { background-color: rgba(0,0,0,0.3); }
body.dark-classic input[type="text"],
body.dark-classic input[type="password"],
body.dark-classic input[type="number"],
body.dark-classic textarea                  { color: #cccccc; border-color: transparent; }
/* normal.dark-classic: align --color-input-bg token with actual input bg so both inputs and
   select-box (which reads the token) use the same source of truth. Direct !important rules
   ensure body.normal compound selectors in layout.css cannot override. */
body.normal.dark-classic {
  --color-input-bg: rgba(0,0,0,0.3);
}
body.normal.dark-classic input[type="text"],
body.normal.dark-classic input[type="password"],
body.normal.dark-classic input[type="number"],
body.normal.dark-classic textarea           { background-color: rgba(0,0,0,0.3) !important; color: #cccccc !important; border-color: transparent !important; }
body.dark-classic .btn, body.dark-classic .button,
body.dark-classic div.mxpaging a           { color: #cccccc; }

/* normal.dark: row-gap (border-spacing) shows page bg — match wrap-data to body bg so gaps are invisible */
body.normal.dark div.wrap-data,
body.normal.dark form.wrap-data { background-color: #2f2f2f !important; }

/* --- normal.dark-classic: cancel body.normal overrides so it matches compact.dark-classic --- */
body.normal.dark-classic div.search-data                   { background-color: rgba(30,30,30,0.95) !important; }
body.normal.dark-classic div.header                        { box-shadow: none; }
body.normal.dark-classic ul.main-nav li a.add,
body.normal.dark-classic ul.main-nav li a.down-arrow       { box-shadow: none; }
body.normal.dark-classic div.nav-right a::before,
body.normal.dark-classic div#nav-left a::before            { color: #cccccc; }
body.normal.dark-classic div.nav-right a:hover::before,
body.normal.dark-classic div#nav-left a:hover::before      { color: #ffffff; }
body.normal.dark-classic .btn,
body.normal.dark-classic .btn i,
body.normal.dark-classic .btn.fa                           { color: #cccccc; }
body.normal.dark-classic a.del::before,
body.normal.dark-classic a.del::after                      { background-color: #ffffff; }
body.normal.dark-classic a.add.add-set::before,
body.normal.dark-classic a.add.add-set::after              { background-color: #cccccc; }
body.normal.dark-classic ul.main-nav li a.add::before,
body.normal.dark-classic ul.main-nav li a.add::after       { background-color: var(--color-text-nav); }
body.normal.dark-classic div.wrap-data                     { background-color: rgba(255,255,255,0.1) !important; }
body.normal.dark-classic div.mxpaging a::before            { border-bottom-color: #cccccc; border-right-color: #cccccc; }
body.normal.dark-classic div.mxpaging input.show-rec       { background-color: #444444 !important; color: #ffffff !important; }
body.normal.dark-classic div.mxdialog h2                   { color: #f6f6f6 !important; }
body.normal.dark-classic h1.pg-ttl                         { color: #cccccc !important; }
body.normal.dark-classic .page-nav .btn                    { outline: none; box-shadow: none !important; }
body.normal.dark-classic i.chk em,
body.normal.dark-classic i.rdo em                          { border-color: #666666; }

/* =============================================================
   MIGRATED FROM layout.css — colors only, no sizing
   Rule: body.dark / body.normal.dark color properties belong here.
   ============================================================= */

/* Mobile sidebar bg (inside @media max-width:1080px in layout.css) */
@media (max-width: 1080px) {
  body.dark div.wrapper.active div.wrap-left { background-color: #333333; }
}


/* a.del / a.add line pseudo-element colors */
body.normal.dark a.del::before,
body.normal.dark a.del::after  { background-color: #ffffff; }
body.normal.dark a.del:hover::before,
body.normal.dark a.del:hover::after { background-color: #ffffff; }

/* .btn text color */
body.normal.dark .btn,
body.normal.dark .btn i,
body.normal.dark .btn.fa { color: #c3c3c3; }
body.normal.dark .btn:hover,
body.normal.dark .btn:hover i,
body.normal.dark .btn.fa:hover { color: #ffffff; }

/* tbl-list.compact thead/tfoot colors */
body.dark .tbl-list.compact thead th,
body.dark .tbl-list.compact tfoot th { background-color: #4d4d4d !important; color: #c3c3c3 !important; }