/* ============================================================
   Modern skin layered on top of the 2010-era MorpheusX theme.
   Loaded after style.php + p7exp.css, so same-specificity rules
   here win the cascade without needing !important almost anywhere.
   Palette derived from the Desoft logo (gold / blue / slate).
   Only visuals are touched -- no HTML/layout structure changes.
   ============================================================ */

:root {
  --pes-blue: #3d82fa;
  --pes-blue-dark: #336ed4;
  --pes-blue-darker: #2754a2;
  --pes-blue-light: #ebf2fe;
  --pes-blue-light2: #f3f7fe;
  --pes-gold: #ddb04d;
  --pes-gold-dark: #bb9541;
  --pes-slate: #4f5b5b;
  --pes-slate-dark: #212a2f;
  --pes-slate-darker: #161d21;
  --pes-ink: #1c2430;
  --pes-muted: #6b7686;
  --pes-bg: #f2f4fa;
  --pes-surface: #ffffff;
  --pes-border: #e3e7f1;
  --pes-radius: 16px;
  --pes-radius-sm: 10px;
  --pes-shadow: 0 2px 10px rgba(23,32,54,.06);
  --pes-shadow-lg: 0 16px 40px rgba(23,32,54,.14);
  --pes-shadow-hover: 0 10px 28px rgba(61,130,250,.22);
  --pes-header-grad: linear-gradient(120deg, var(--pes-slate-darker) 0%, var(--pes-blue-darker) 55%, var(--pes-blue) 100%);
  --pes-gold-grad: linear-gradient(120deg, var(--pes-gold) 0%, #f0c874 100%);
  --pes-ease: cubic-bezier(.2,.7,.3,1);
}

@keyframes pesFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pesFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pesShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes pesPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61,130,250,.35); }
  50%      { box-shadow: 0 0 0 8px rgba(61,130,250,0); }
}

html, body {
  background: var(--pes-bg) !important;
}

body, font, th, td, p, input, textarea, select, .content, .gen, .genmed {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

body { font-size: 13px !important; color: var(--pes-ink); }
th, td.th { font-size: 12.5px !important; }
.gensmall, .darkgrey-small, .grey-small { font-size: 11.5px !important; }

a { color: var(--pes-blue); transition: color .15s var(--pes-ease); }
a:hover { color: var(--pes-blue-darker); }
a:visited { color: var(--pes-blue); }

/* ---- page frame ---- */
body > table { background: transparent; }

/* ---- header bar ---- */
.pes-header {
  background: var(--pes-header-grad);
  background-size: 200% 200%;
  animation: pesShimmer 14s ease infinite;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 8px 24px rgba(23,32,54,.18);
  padding: 14px 22px 0;
  margin-bottom: 18px;
}
.pes-header-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-bottom: 12px;
}
.pes-wordmark {
  font-size: 20px;
  font-weight: 800;
  color: #fff !important;
  text-decoration: none !important;
  letter-spacing: -.3px;
  flex-shrink: 0;
  transition: transform .2s var(--pes-ease);
  display: inline-block;
}
.pes-wordmark:hover { transform: translateY(-1px); color: #fff !important; }
.pes-wordmark em { font-style: normal; color: var(--pes-gold); font-weight: 700; margin-left: 4px; font-size: 15px; }
.pes-header-mid {
  flex: 1;
  min-width: 200px;
  text-align: center;
  color: #eaf1ff;
  font-size: 13px;
}
.pes-signup-link { color: #fff !important; font-size: 14.5px; }
.pes-signup-link b { color: var(--pes-gold); }
.pes-msg { font-size: 11.5px; color: #dbe7ff; }
.pes-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  color: #fff;
  font-size: 12.5px;
}
.pes-loginform { display: flex; align-items: center; gap: 6px; }
.pes-loginform input[type="text"], .pes-loginform input[type="password"] {
  background: rgba(255,255,255,.95) !important;
  border: none !important;
  padding: 6px 10px !important;
}
.pes-statemsg { color: #ffd7d7; font-size: 11.5px; }
.pes-forgot { color: #cfe0ff !important; font-size: 11px; text-decoration: underline !important; }

.pes-header-nav {
  background: rgba(0,0,0,.18);
  border-radius: 14px 14px 0 0;
  margin: 0 -22px;
  padding: 0 14px;
}

/* nav menu pills + underline sweep */
#p7menubar { padding: 4px 0; }
#p7menubar > li { margin: 0 3px; }
#p7menubar > li > a {
  position: relative;
  border-radius: 999px;
  padding: 6px 14px !important;
  transition: background .2s var(--pes-ease), color .2s var(--pes-ease);
}
#p7menubar > li > a:hover {
  background: rgba(255,255,255,.14);
}
#p7menubar > li > a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 2px;
  background: var(--pes-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--pes-ease);
  border-radius: 2px;
}
#p7menubar > li > a:hover::after { transform: scaleX(1); }
.menu-active { color: var(--pes-gold) !important; font-weight: 700; }

/* language switcher */
.lang-switcher { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
.lang-switcher a.lang-link {
  text-decoration: none; font-size: 16px; padding: 2px 4px; border-radius: 6px;
  opacity: .5; filter: grayscale(45%);
  transition: opacity .2s var(--pes-ease), filter .2s var(--pes-ease), transform .2s var(--pes-ease);
  display: inline-block;
}
.lang-switcher a.lang-link:hover { transform: translateY(-2px) scale(1.1); }
.lang-switcher a.lang-link:hover, .lang-switcher a.lang-link.lang-active {
  opacity: 1; filter: none; background: rgba(61,130,250,.14);
}

/* ---- content boxes: card treatment + entrance animation ---- */
table.boxtable, table.layouttable > tbody > tr > td > table {
  border-radius: var(--pes-radius);
  animation: pesFadeUp .5s var(--pes-ease) both;
}
table.boxtable { box-shadow: var(--pes-shadow); overflow: hidden; }

.hdr, td.hdr {
  background: var(--pes-header-grad) !important;
  border-radius: var(--pes-radius) var(--pes-radius) 0 0;
  color: #fff !important;
  letter-spacing: .3px !important;
  font-size: 13.5px !important;
  height: 34px !important;
}
.hdr a, .hdr a:visited { color: #eaf1ff !important; }
td.catBottom {
  background: #eef1f8 !important;
  border-radius: 0 0 var(--pes-radius) var(--pes-radius);
  color: var(--pes-muted) !important;
}
.content, .content-navbar {
  background: var(--pes-surface) !important;
  padding: 14px 12px !important;
}
.content-left, .content-right, .content-top, .content-bottom,
.navbar-top, .navbar-bottom {
  background: var(--pes-surface) !important;
}

/* ---- modern box components (replace legacy nested-table + corner-gif chrome) ---- */
.pes-obox {
  background: var(--pes-surface);
  border: 1px solid var(--pes-border);
  border-radius: var(--pes-radius);
  box-shadow: var(--pes-shadow);
  margin: 0 0 16px;
  overflow: hidden;
  animation: pesFadeUp .45s var(--pes-ease) both;
}
.pes-obox-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--pes-blue-light2);
  font-size: 12px;
  color: var(--pes-muted);
  font-weight: 600;
  flex-wrap: wrap;
}
.pes-obox-body { padding: 16px; }

.pes-box {
  background: var(--pes-surface);
  border-radius: var(--pes-radius);
  overflow: hidden;
  margin-bottom: 4px;
  box-shadow: var(--pes-shadow);
  animation: pesFadeUp .5s var(--pes-ease) both;
}
.pes-box-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--pes-header-grad);
  background-size: 200% 200%;
  animation: pesShimmer 14s ease infinite;
  color: #fff;
}
.pes-box-title { font-weight: 700; font-size: 14px; letter-spacing: .2px; }
.pes-box-links { margin-left: auto; display: flex; gap: 8px; }
.pes-box-body { padding: 18px; }

/* ---- data tables: modern "dashboard" look ---- */
th, td.th {
  background: var(--pes-blue-light2) !important;
  background-image: none !important;
  color: #33415c !important;
  border-color: var(--pes-border) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-size: 10.5px !important;
  height: 32px !important;
}
.row, .row1, .row1h, .row1h-new { background-color: var(--pes-surface) !important; }
.row2, .row2h { background-color: #f8f9fd !important; }
.row3, .row3h, .row4 { background-color: #f3f5fb !important; }
.row1h, .row2h, .row3h, .row1h-new {
  transition: background .15s var(--pes-ease), transform .1s var(--pes-ease);
}
.row1h:hover, .row1hHover,
.row1h-new:hover, .row1h-newHover,
.row2h:hover, .row2hHover,
.row3h:hover, .row3hHover {
  background: var(--pes-blue-light) !important;
}
.row td, .row1 td, .row2 td, .row3 td { padding-top: 6px !important; padding-bottom: 6px !important; }

/* ---- buttons & inputs ---- */
input.mainoption, input.liteoption, input.post, input.button,
input[type="Submit"], input[type="submit"], input[type="button"] {
  background: var(--pes-blue) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 7px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  height: auto !important;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(61,130,250,.28);
  transition: background .18s var(--pes-ease), transform .12s var(--pes-ease), box-shadow .18s var(--pes-ease);
}
input.mainoption:hover, input.liteoption:hover, input.post:hover,
input.button:hover, input[type="Submit"]:hover, input[type="submit"]:hover,
input[type="button"]:hover {
  background: var(--pes-blue-dark) !important;
  transform: translateY(-1px);
  box-shadow: var(--pes-shadow-hover);
}
input.mainoption:active, input[type="Submit"]:active { transform: translateY(0); }

input[type="text"], input[type="password"], input[type="Text"],
textarea, select {
  background: #fbfcfe !important;
  background-image: none !important;
  border: 1.5px solid var(--pes-border) !important;
  border-radius: var(--pes-radius-sm) !important;
  color: var(--pes-ink) !important;
  padding: 4px 8px !important;
  transition: border-color .15s var(--pes-ease), box-shadow .15s var(--pes-ease);
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
  border-color: var(--pes-blue) !important;
  box-shadow: 0 0 0 3px var(--pes-blue-light);
  outline: none;
}

/* login box on the header */
.logintable td { color: #d7e2ff; }
.logintable input[type="text"], .logintable input[type="password"] {
  background: rgba(255,255,255,.95) !important;
  border: none !important;
}

/* copyright / footer */
.copyright { color: #9aa5b1; }

/* generic utility for new pages */
.pes-fade { animation: pesFadeUp .6s var(--pes-ease) both; }