/* =============================================================
   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        { color: #f6f6f6 !important; background-color: #858585; }
body.moderate div.mxdialog div.body  { background-color: #eaeaea; border: 1px solid #cccccc; }
body.moderate div.mxdialog .btn      { background-color: #aaaaaa; 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 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; }
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; }

/* 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: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; }