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

   ARCHITECTURE RULE (enforced):
   ✅ ALLOWED here: background-color, color, border-color, box-shadow
      (decorative/color), fill, stroke, opacity, filter
   ✅ Selectors: body.light, body.light-classic, body.normal.light,
      body.normal (for default/light color overrides) (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.light-classic {
  background-image: url(../images/lightbg.jpg);

  --color-text-nav:         #333333;
  --color-text-header:      #333333;
  --color-header-bg:        rgba(255,255,255,0.6);
  --color-nav-bg:           rgba(255,255,255,0.6);
  --color-nav-active:       rgba(0,0,0,0.05);
  --color-nav-border:       #cccccc;
  --color-surface:          rgba(255,255,255,0.6);
  --color-surface-alt:      rgba(255,255,255,0.3);
  --color-input-bg:         #ffffff;
  --color-tbl-th:           #cccccc;
  --color-tbl-th-alt:       #dddddd;
  --color-tbl-td:           rgba(255,255,255,0.3);
  --color-tbl-td-alt:       rgba(255,255,255,0.5);
  --color-tbl-td-hover:     rgba(255,255,255,0.5);
  --color-tbl-td-hover-alt: rgba(255,255,255,0.3);
  --color-tbl-nested-bg:    transparent;
  --color-tbl-nested-th:    #cccccc;
  --color-tbl-nested-td:    #e5e5e5;
  --color-btn:              #777777;
  --color-btn-text:         #ffffff;
  --color-btn-light:        #aaaaaa;
  --color-dialog-body:      #e5e5e5;
  --color-dialog-header:    #cccccc;
  --color-overlay:          rgba(0,0,0,0.5);
  --color-form-head-bg:     rgba(0,0,0,0.05);
  --color-mx-list-bg:       rgba(0,0,0,0.05);
  --color-tag-bg:           rgba(0,0,0,0.05);
  --color-fileupload-bg:    rgba(0,0,0,0.05);
  --color-scrollbar-thumb:  #999999;
  --color-scrollbar-track:  rgba(0,0,0,0.1);
  --color-ve-wrap-bg:       #999999;
  --color-ve-wrap-btn:      #777777;
  --color-ve-wrap-arrow:    #999999;
}

/* Light specific overrides that need selectors beyond variable tokens */
body.light-classic div#mxmsg        { background-color: rgba(255,255,255,0.9); }
body.light-classic .spinner div,
body.light-classic div.mxdialog.mx-file-browser div.body { background-color: rgba(255,255,255,0.9); }
body.light-classic div.mxpaging input.show-rec {
  background-color: #ffffff !important;
  color: #000000 !important;
}
body.light-classic .wrap-data { box-shadow: none; }
body.light-classic form.wrap-data,
body.light-classic .wrap-data.no-bg { background: transparent; }

/* Light: text colors on dark-bg elements (thead, nav) */
body.light-classic .tbl-list thead th,
body.light-classic .tbl-list thead th a,
body.light-classic .tbl-list tfoot th,
body.light-classic .tbl-list th a.sort,
body.light-classic .tbl-list th a.asc,
body.light-classic .tbl-list th a.desc,
body.light-classic .tbl-list th a.sort::before,
body.light-classic .tbl-list th a.asc::before,
body.light-classic .tbl-list th a.desc::before,
body.light-classic ul.dragsort-title li { color: #444444; }

/* Light: hamburger, nav add/arrow bars */
body.light-classic a.hamburger span                         { background-color: #333333; }
body.light-classic ul.main-nav li a.add::before,
body.light-classic ul.main-nav li a.add::after              { background-color: #777777; }
body.light-classic ul.main-nav li:hover a.add::before,
body.light-classic ul.main-nav li.active a.add::before,
body.light-classic ul.main-nav li:hover a.add::after,
body.light-classic ul.main-nav li.active a.add::after       { background-color: var(--color-text-nav); } /* SHAHID: background-color: #ffffff; */
body.light-classic ul.main-nav li a.down-arrow::after       { border-bottom-color: #777777; border-right-color: #777777; }
body.light-classic ul.main-nav li:hover > a.down-arrow::after,
body.light-classic ul.main-nav li.active > a.down-arrow::after { border-bottom-color: #ffffff; border-right-color: #ffffff; }

/* Light: buttons */
body.light-classic .btn, body.light-classic .button,
body.light-classic a.del, /* SHAHID REMOVE: body.light-classic a.add, */
body.light-classic div.mxpaging a,
body.light-classic div.mxpaging a.no-prev:hover,
body.light-classic div.mxpaging a.no-next:hover,
body.light-classic div.mx-file-upload div.drop             { background-color: #777777; color: #ffffff; }
body.light-classic .btn.l                                  { background-color: #aaaaaa; }
body.light-classic .btn.ico,
body.light-classic .btn.ico:hover                          { background-color: transparent; }

/* Light: table th/td */
body.light-classic .tbl-list th, body.light-classic ul.dragsort-title li,
body.light-classic div.mxdialog h2                         { background-color: #cccccc; }
body.light-classic .tbl-list th:nth-child(2n+2),
body.light-classic ul.dragsort-title li:nth-child(2n+2)   { background-color: #dddddd; }
body.light-classic div.add-grp                             { background-color: #a0a0a0; }
body.light-classic .tbl-list td,
body.light-classic ul.dragsort-list li div.drag > div      { background-color: rgba(255,255,255,0.3); }
body.light-classic .tbl-list td:nth-child(2n+2),
body.light-classic ul.dragsort-list li div.drag > div:nth-child(2n+2) { background-color: rgba(255,255,255,0.5); }
body.light-classic .tbl-list tr:hover td,
body.light-classic ul.dragsort-list li div.drag:hover > div { background-color: rgba(255,255,255,0.5); }
body.light-classic .tbl-list tr:hover td:nth-child(2n+2),
body.light-classic ul.dragsort-list li div.drag:hover > div:nth-child(2n+2) { background-color: rgba(255,255,255,0.3); }

/* Light: nav/core-nav */
body.light-classic div.header, body.light-classic div.page-nav,
body.light-classic div.search-data, body.light-classic div.wrap-left,
body.light-classic div.wrap-form                           { background-color: rgba(255,255,255,0.6); }
body.light-classic div.wrap-data, body.light-classic .wrap-data.bg,
body.light-classic form.wrap-data .bg                      { background-color: rgba(255,255,255,0.6); }
body.light-classic div.core-nav ul li,
body.light-classic div.core-nav ul li.themetype:hover,
body.light-classic div.core-nav ul li.font:hover           { background-color: #f5f5f5; }
body.light-classic ul.main-nav li:hover,
body.light-classic div.core-nav ul li a:hover,
body.light-classic ul.main-nav > li.active,
body.light-classic div.core-nav ul > li a.active,
body.light-classic ul.main-nav li ul li                    { background-color: rgba(0,0,0,0.05); }
body.light-classic ul.main-nav li.active > a,
body.light-classic ul.main-nav li:hover > a                { color: var(--color-text-nav) !important; background: transparent !important; }
body.light-classic .form-head, body.light-classic .mx-list,
body.light-classic ul.tbl-form li .mx-list,
body.light-classic div.grp-wrap > ul li .mx-list,
body.light-classic div.mx-file-upload                      { background-color: rgba(0,0,0,0.05); }
body.light-classic ul.main-nav li { border-bottom: 1px solid #cccccc; }
body.light-classic div.core-nav ul li { border-bottom: 1px solid #cccccc; background-color: #f5f5f5; }
body.light-classic div.mxpaging a.no-prev::before,
body.light-classic div.mxpaging a.no-next::before          { border-right-color: #aaaaaa; border-bottom-color: #aaaaaa; }

/* jQuery UI light */
body.light-classic .ui-widget-content { background: #dddddd !important; }

/* --- normal.light-classic: cancel body.normal overrides so it matches compact.light-classic --- */
body.normal.light-classic                                  { --color-text: #111111; }
body.normal.light-classic div.search-data                  { background-color: rgba(255,255,255,0.92) !important; }
body.normal.light-classic div.header                       { box-shadow: none; }
body.normal.light-classic ul.main-nav li a.add,
body.normal.light-classic ul.main-nav li a.down-arrow      { box-shadow: none; }
body.light-classic div.nav-right a::before,
body.normal.light-classic div.nav-right a::before,
body.light-classic div#nav-left a::before,
body.normal.light-classic div#nav-left a::before           { color: #ffffff; }
body.light-classic div.nav-right a:hover::before,
body.normal.light-classic div.nav-right a:hover::before,
body.light-classic div#nav-left a:hover::before,
body.normal.light-classic div#nav-left a:hover::before     { color: #ffffff; }
body.normal.light-classic .btn,
body.normal.light-classic .btn i,
body.normal.light-classic .btn.fa                          { color: #ffffff; }
/* fa-th grid icon in header uses --color-text-header, not button color */
body.normal.light-classic div.header .fa-th                { color: var(--color-text-header) !important; }
body.normal.light-classic a.del::before,
body.normal.light-classic a.del::after                     { background-color: #ffffff; }
body.normal.light-classic a.add.add-set::before,
body.normal.light-classic a.add.add-set::after             { background-color: #ffffff; }
body.normal.light-classic ul.main-nav li a.add::before,
body.normal.light-classic ul.main-nav li a.add::after      { background-color: #777777; }
body.normal.light-classic div.wrap-data                    { background-color: rgba(255,255,255,0.6) !important; }
body.light-classic div.mxpaging a::before,
body.normal.light-classic div.mxpaging a::before           { border-bottom-color: #ffffff; border-right-color: #ffffff; }
body.normal.light-classic div.mxpaging input.show-rec      { background-color: #ffffff !important; color: #000000 !important; }
body.normal.light-classic div.mxdialog h2                  { color: #444444 !important; }
body.normal.light-classic h1.pg-ttl                        { color: var(--color-text) !important; }
body.normal.light-classic .page-nav .btn                   { outline: none; box-shadow: none !important; }
body.normal.light-classic i.chk em,
body.normal.light-classic i.rdo em                         { border-color: #aaaaaa; }

/* --- Light (all types: normal + compact) --- */
body.light {
  background-color: #eaeaea;
  background-image: none;

  --color-text:             #5a5a5a;
  --color-text-header:      #333333;
  --color-text-nav:         #5a5a5a;
  --color-header-bg:        #fafafa;
  --color-nav-bg:           #fafafa;
  --color-nav-active:       rgba(0,0,0,0.03);
  --color-surface:          #fafafa;
  --color-surface-alt:      #f2f2f2;
  --color-input-bg:         #ffffff;
  --color-border-input:     #eaeaea;
  --color-btn:              #f1f1f1;
  --color-btn-text:         #848484;
  --color-tbl-th:           #fafafa;
  --color-tbl-th-alt:       #fafafa;
  --color-tbl-td:           #f2f2f2;
  --color-tbl-td-alt:       #f2f2f2;
  --color-tbl-td-hover:     #e8e8e8;
  --color-tbl-nested-bg:    transparent;
  --color-shadow:           rgba(0,0,0,0.1);
  --color-dialog-body:      #ffffff;
  --color-form-head-bg:     transparent;
  --color-mx-list-bg:       transparent;
  --color-tag-bg:           transparent;
  --color-grp-border:       transparent;
  --color-scrollbar-thumb:  #ffffff;
  --color-scrollbar-track:  transparent;
  --color-ve-wrap-bg:       #d0d0d0;
  --color-ve-wrap-btn:      #aaaaaa;
  --color-ve-wrap-arrow:    #d0d0d0;
}

body.light a.add::before, body.light a.add::after,
body.light a.del::before, body.light a.del::after { background-color: #848484; }
body.light div.header         { box-shadow: rgba(99,99,99,0.1) 0 0 8px 5px; }
body.light div.wrap-left       { background-color: #fafafa; }
body.light div.page-nav        { background-color: #fafafa; }
body.light .logo-wrap          { background-color: #ffffff; }
body.light ul.main-nav li      { border-color: transparent; }
body.light ul.main-nav li ul   { background-color: #fafafa; }
body.light ul.main-nav li ul li{ background-color: #fafafa; }
body.light div.wrap-data table { box-shadow: 0 0 15px 0 rgba(0,0,0,0.1); }
body.light div.add-grp         { background-color: #fafafa; box-shadow: 0 1px 10px 0 rgba(0,0,0,0.1); }
body.light div.search-data     { background-color: #f2f2f2; }

body.light .tbl-list thead tr  { box-shadow: 0 15px 20px 0 rgba(0,0,0,0.01); background-color: #fafafa; }
body.light .tbl-list thead th,
body.light .tbl-list tfoot th  { background-color: #fafafa; color: #a4a4a4; }
body.light .tbl-list th:nth-child(2n+2) { background-color: #fafafa; }
body.light .tbl-list thead th a,
body.light .tbl-list thead th a::before,
body.light .tbl-list th a.sort { color: #a4a4a4; }
body.light .tbl-list i.chk em  { border-color: #aaaaaa; }
/* body.light .tbl-list i.chk input:checked ~ em { background-color: #aaaaaa !important; } */ /* SHAHID: Comment This Code */

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

body.light .btn,
body.light .button,
body.light a.add,
body.light a.del,
body.light div.mxpaging a,
body.light div.mx-file-upload div.drop {
  background-color: #f1f1f1;
}
/* Disabled paging arrows: dimmer bg, same border */
body.light div.mxpaging a.no-prev,
body.light div.mxpaging a.no-next       { background-color: #e8e8e8; }
body.light div.mxpaging a.no-prev:hover,
body.light div.mxpaging a.no-next:hover { background-color: #e8e8e8; }
body.light div.mxpaging input.show-rec {
  background-color: #f1f1f1 !important;
  border: 1px solid #e3e3e3;
}

body.light div.core-nav ul li     { border-color: transparent; }
body.light div.core-nav li.themetype a,
body.light div.core-nav ul li a  { color: #414141; }
body.light div.core-nav li.themetype a:hover,
body.light div.core-nav ul li a:hover { color: #ffffff; }
body.light div.core-nav ul > li a.active { color: #fff; }

body.light ul.main-nav li.active:has(ul li.active),
body.light ul.main-nav li.active:has(ul li.active) a:nth-child(2) { color: #414141; }

body.light .tbl-list .grp-set td {
  color: #5a5a5a;
  background-color: #fafafa;
}

body.light textarea,
body.light div.mxdialog,
body.light div.mxdialog div.content,
body.light .wrap-data,
body.light div.wrap-right form {
  scrollbar-color: #ffffff transparent;
}
body.light div.wrap-left { scrollbar-color: #eaeaea transparent; }
body.light a.hamburger span { background-color: #414141; }

/* Normal Light — additional rules from DEV theme.css */
body.light { background-color: #eaeaea; }
body.light div.header { background-color: #fafafa; }
body.light div.mxpaging a:hover::before { border-bottom-color: #fff; border-right-color: #fff; }
body.light div.mxdialog { background-color: rgb(234,234,234,0.85); }
body.light div.mxdialog h2 { background-color: #f2f2f2; }
body.light div.mxdialog div.body { background-color: #ffffff; box-shadow: rgba(99,99,99,0.3) 0 0 4px 0; }
body.light .tbl-list td { background-color: #f2f2f2; }
body.light .tbl-list td:nth-child(2n+2),
body.light ul.dragsort-list li div.drag > div:nth-child(2n+2) { background-color: #f2f2f2; }
body.light .tbl-list tr:hover td,
body.light ul.dragsort-list li div.drag:hover > div { background-color: #fafafa; }
body.light .tbl-list tr:hover td:nth-child(2n+2),
body.light ul.dragsort-list li div.drag:hover > div:nth-child(2n+2) { background-color: #fafafa; }
body.light .tbl-list .tbl-list td,
body.light .tbl-list .tbl-list td:nth-child(2n+2) { background-color: #fafafa; }
body.light div.wrap-form { background-color: #fafafa; }
body.light .form-head { background-color: #eaeaea; border: 1px solid #d6d6d6; }
body.light .mx-list,
body.light ul.tbl-form li .mx-list { background-color: #f2f2f2; border: 1px solid #eaeaea; }
body.light div.grp-wrap > ul li .mx-list,
body.light div.mx-file-upload { background-color: #f2f2f2; border: 1px solid #eaeaea; }
body.light div.mx-file-upload div.drop { box-shadow: rgba(99,99,99,0.3) 0 0 0; }
body.light div.mx-file-upload div.drop a { background-image: url(../images/ico-upload-b.png); }
body.light div.mx-file-upload div.drop a:hover { background-image: url(../images/ico-upload-file.png); }
body.light input[type="text"],
body.light input[type="password"],
body.light input[type="number"],
body.light textarea { border-color: #eaeaea; border-width: 0.5px; }
body.light div.core-nav li.themetype a,
body.light div.core-nav li.font a { color: #414141; }
body.light div.core-nav li.themetype a:hover,
body.light div.core-nav li.font a:hover { color: #ffffff; }
body.light select::picker(select) { border: 1px solid #eaeaea; }

/* Normal mode base colors (overridden per scheme in dark/moderate theme files) */
body.normal div.nav-right a::before,
body.normal div#nav-left a::before           { color: #5a5a5a; }
body.normal div.nav-right a:hover::before,
body.normal div#nav-left a:hover::before     { color: #ffffff; }
body.normal h1.pg-ttl                        { color: #414141 !important; }
body.normal div.mxdialog h2                  { color: #000000 !important; }
body.normal div.mxpaging a::before           { border-bottom-color: #414141; border-right-color: #414141; }
body.normal div.mxpaging input.show-rec      { background-color: #dddddd !important; color: #5a5a5a !important; }
body.normal .page-nav .btn                   { outline-color: #e3e3e3; }

/* =============================================================
   MIGRATED FROM layout.css — colors only, no sizing
   Rule: body.light / body.normal (light-default) color properties belong here.
   ============================================================= */

/* Mobile wrap-data bg (inside @media max-width:1080px in layout.css) */
@media (max-width: 1080px) {
  body.light div.wrap-data,
  body.light .wrap-data.bg,
  body.light form.wrap-data .bg { background-color: rgba(255,255,255,0.3); }
}

/* mxdialog .btn uses var(--color-btn) from token system — no override needed */

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

/* .btn text color — normal default */
body.normal .btn,
body.normal .btn i,
body.normal .btn.fa { color: #848484; }
body.normal .btn:hover,
body.normal .btn:hover i,
body.normal .btn.fa:hover { color: #ffffff; }

/* light/moderate: a.del/a.add lines must be dark (bg is very light) */
body.normal.light a.del::before, body.normal.light a.del::after,
body.normal.light a.add::before, body.normal.light a.add::after { background-color: #666666; }
body.normal.light a.del:hover::before, body.normal.light a.del:hover::after,
body.normal.light a.add:hover::before, body.normal.light a.add:hover::after { background-color: #ffffff; }

/* tbl-list.compact thead/tfoot colors — light uses header-bar tokens */
body.light .tbl-list.compact thead th,
body.light .tbl-list.compact tfoot th { background-color: var(--color-header-bg) !important; color: var(--color-text-header) !important; }