/* =============================================================
   MODERATE THEME — body.moderate (all types)

   ARCHITECTURE RULE (enforced):
   ✅ ALLOWED here: background-color, color, border-color, box-shadow
      (decorative/color), fill, stroke, opacity, filter
   ✅ Selectors: body.moderate, body.normal.moderate (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.moderate {
  background-image: none;

  --color-text:          #111111;
  --color-text-header:   #ffffff;
  --color-text-nav:      #cccccc;
  --color-dialog-body:   #dddddd;
  --color-dialog-header: #666666;
  --color-header-bg:     #666666;
  --color-nav-bg:        #858585;
  --color-surface:       #dddddd;
  --color-surface-alt:   #cccccc;
  --color-input-bg:      #f5f5f5;
  --color-border-input:  #cccccc;
  --color-btn:           #eaeaea;
  --color-btn-text:      #848484;
  --color-tbl-th:        #858585;
  --color-tbl-th-alt:    #858585;
  --color-tbl-td:        #f5f5f5;
  --color-tbl-td-alt:    #f5f5f5;
  --color-tbl-td-hover:  #e8e8e8;
  --color-tbl-nested-bg: transparent;
  --color-shadow:        rgba(0,0,0,0.1);
  --color-form-head-bg:  #cccccc;
  --color-mx-list-bg:    #cccccc;
  --color-tag-bg:        transparent;
  --color-grp-border:    transparent;
  --color-ve-wrap-bg:    #cccccc;
  --color-ve-wrap-btn:   #999999;
  --color-ve-wrap-arrow: #cccccc;
}

body.moderate .logo-wrap,
body.moderate div.header             { background-color: #666666; }
body.moderate div.header             { box-shadow: rgba(41,41,41,0.2) 0 0 8px 5px; }
body.moderate ul.main-nav li ul li,
body.moderate div.wrap-left          { background-color: #666666; color: #f6f6f6; }
body.moderate div.mxdialog h2,
body.moderate .cke_dialog .cke_dialog_title { color: #f6f6f6 !important; background-color: #858585; }
body.moderate div.mxdialog div.body,
body.moderate .cke_dialog .cke_dialog_body  { background-color: #eaeaea; border: 1px solid #cccccc; }
body.moderate div.mxdialog .btn,
body.moderate .cke_dialog a.cke_dialog_ui_button,
body.moderate .cke_dialog a.cke_dialog_ui_button_ok { background-color: #aaaaaa; color: #ffffff; }
body.moderate .cke_dialog a.cke_dialog_ui_button span.cke_dialog_ui_button { color: #ffffff; }
body.compact.moderate .btn:not(.ico):hover { color: #ffffff; }
body.moderate form.wrap-data         { box-shadow: none; }
body.moderate ul.dragsort-title,
body.moderate ul.dragsort-title li,
body.moderate .tbl-list th,
body.moderate .tbl-list thead th,
body.moderate .tbl-list tfoot th,
body.moderate .tbl-list th:nth-child(2n+2),
body.moderate ul.dragsort-title li:nth-child(2n+2),
body.moderate div.add-grp            { background-color: #858585; }
body.moderate textarea,
body.moderate div.mxdialog,
body.moderate div.mxdialog div.content,
body.moderate .wrap-data,
body.moderate div.wrap-right form    { scrollbar-color: #414141 transparent; }
body.moderate div.core-nav ul li     { border-color: transparent; }
body.moderate ul.main-nav li         { border-bottom-color: rgba(0,0,0,0.1); } /* sidebar menu line separator, light */
body.moderate i.chk em               { border-color: #aaaaaa; }
body.moderate a.add::before, body.moderate a.add::after,
body.moderate a.del::before, body.moderate a.del::after { background-color: #848484; }
body.moderate div.core-nav li.themetype a,
body.moderate div.core-nav li.font a { background-color: #363636; }
body.moderate .tbl-list td:nth-child(2n+2),
body.moderate ul.dragsort-list li div.drag > div:nth-child(2n+2),
body.moderate .tbl-list td,
body.moderate ul.dragsort-list li div.drag > div { background-color: #f5f5f5; }
body.moderate .mandatory             { color: #414141; }
body.moderate div.page-nav           { background-color: #fafafa; }
body.moderate div.wrap-form:not(.compact) { box-shadow: rgba(255,255,255,0.1) 0 4px 12px; }
body.moderate div.mxpaging div       { color: #5a5a5a; }
/* Moderate: pagination ("20" box + arrows) slightly darker than page-nav buttons (#eaeaea) */
body.moderate div.mxpaging a,
body.moderate div.mxpaging a.no-prev:hover,
body.moderate div.mxpaging a.no-next:hover { background-color: #dddddd; }
body.moderate div.mxpaging input.show-rec,
body.normal.moderate div.mxpaging input.show-rec { background-color: #dddddd !important; }
body.moderate div.mxpaging a:before  { border-bottom-color: #5a5a5a; border-right-color: #5a5a5a; }
body.moderate div.mxpaging a:hover:before { border-bottom-color: #f1f1f1; border-right-color: #f1f1f1; }
body.moderate .tbl-list th,
body.moderate .tbl-list thead th a,
body.moderate .tbl-list tfoot th a,
body.moderate .tbl-list th a.sort,
body.moderate .tbl-list th a.asc,
body.moderate ul.dragsort-title li,
body.moderate .tbl-list th a.desc,
body.moderate .tbl-list th a.sort::before,
body.moderate .tbl-list th a.asc::before,
body.moderate .tbl-list th a.desc::before { color: #ffffff; }
body.moderate div.search-data.active,
body.moderate div.search-data.active.d { background-color: #dddddd; }
body.moderate div.mx-file-upload div.drop a { background-image: url(../images/ico-upload-b.png); }
body.moderate div.mx-file-upload div.drop a:hover { background-image: url(../images/ico-upload-file.png); }
body.moderate select::picker(select) { border: 1px solid #cccccc; }
/* body.moderate ul.main-nav li ul li { background-color: #777777; } */
/* body.moderate ul.main-nav li ul li.active { background-color: #5a5a5a !important; } */
body.moderate ul.main-nav > li:has(> ul[style*="block"]) { background-color: rgba(0,0,0,0.05); } /* was #5a5a5a */
body.moderate ul.main-nav > li:has(> ul[style*="block"]) ul,
body.moderate ul.main-nav > li:has(> ul[style*="block"]) li,
body.moderate ul.main-nav > li:has(> ul[style*="block"]) a { background-color: transparent; }
/* body.normal.moderate ul.main-nav li.active:has(ul li.active),
body.normal.moderate ul.main-nav li.active:has(ul li.active) a:nth-child(2) { background: #707070; color: #ffffff; } */
/* body.compact.moderate ul.main-nav li:not(:has(li:hover)):hover {
  background: var(--color-accent);
  background: linear-gradient(104deg, var(--color-accent) 0%, var(--color-accent-2) 100%);
}
body.compact.moderate ul.main-nav li:not(:has(li:hover)):hover > a { color: #ffffff !important; } */


/* CKEditor toolbar dropdowns (Styles / Format / Font / Size) — visible box like dark, light tint */
body.moderate .cke_combo_button { background-color: rgba(0,0,0,0.05); }
body.moderate .cke_combo:after  { display: none; }
body.moderate .cke_combo_on a.cke_combo_button,
body.moderate .cke_combo_off a.cke_combo_button:hover,
body.moderate .cke_combo_off a.cke_combo_button:focus,
body.moderate .cke_combo_off a.cke_combo_button:active { background: rgba(0,0,0,0.1); border: 1px solid transparent; }

/* Search Data Select Option css */
body.moderate .search-data li select::picker(select) { scrollbar-width: thin; scrollbar-color: #8a8a8a #f5f5f5;} /* SHAHID: Added New Styling */
body.moderate .search-data li select::picker(select)::-webkit-scrollbar-track { background: #f5f5f5; } /* SHAHID: Added New Styling */
body.moderate .search-data li select::picker(select)::-webkit-scrollbar-thumb { background: #8a8a8a;} /* SHAHID: Added New Styling */

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

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

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

body.normal.moderate a.del::before, body.normal.moderate a.del::after { background-color: #666666; }
/* add-row "+" (getFormG a.add.add-set): white lines vanished on the #eaeaea button — use moderate text colour; hover stays white (rule below) */
body.normal.moderate a.add.add-set::before, body.normal.moderate a.add.add-set::after { background-color: #111111; }
body.normal.moderate a.del:hover::before, body.normal.moderate a.del:hover::after,
body.normal.moderate a.add:hover::before, body.normal.moderate a.add:hover::after { background-color: #ffffff; }

/* tbl-list.compact thead/tfoot colors */
body.moderate .tbl-list.compact thead th,
body.moderate .tbl-list.compact tfoot th { background-color: #858585 !important; color: #ffffff !important; }