:root {
  --modern-green: #34d399;
  --modern-green-soft: #e8faf4;
  --modern-ink: #123b2d;
  --modern-muted: #526b62;
  --modern-bg: #f4f7f5;
  --modern-surface: #fff;
  --modern-border: #d7e3dd;
  --modern-sidebar: #0f2f24;
  --modern-sidebar-soft: #174c3a;
  --modern-width: 254px;
}

body.modern-ui-body {
  background: var(--modern-bg);
  color: var(--modern-ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  margin: 0;
}

.modern-topbar {
  align-items: center;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--modern-border);
  display: flex;
  height: 64px;
  justify-content: space-between;
  margin-left: var(--modern-width);
  padding: 0 32px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.modern-menu-toggle { align-items: center; background: transparent; border: 0; color: var(--modern-ink); cursor: pointer; display: none; gap: 7px; padding: 8px; }
.modern-menu-toggle i { font-size: 21px; }

.modern-breadcrumbs,
.modern-topbar-actions,
.modern-breadcrumbs a,
.modern-search {
  align-items: center;
  display: flex;
}

.modern-breadcrumbs { color: var(--modern-muted); gap: 10px; font-size: 13px; }
.modern-breadcrumbs a { color: var(--modern-ink); gap: 8px; text-decoration: none; }
.modern-breadcrumbs strong { color: var(--modern-ink); }
.modern-breadcrumb-separator { color: #7b9489; font-size: 12px; }
.modern-topbar-actions { gap: 10px; }

.modern-search {
  background: #fff;
  border: 1px solid var(--modern-border);
  border-radius: 9px;
  color: #71877e;
  gap: 8px;
  padding: 9px 12px;
  width: 258px;
}

.modern-search:focus-within { border-color: var(--modern-green); box-shadow: 0 0 0 3px rgba(52, 211, 153, .13); }
.modern-ui a:focus-visible, .modern-ui button:focus-visible, .modern-login-card input:focus-visible, .modern-login-submit:focus-visible { outline: 3px solid #34d399; outline-offset: 2px; }
.modern-search input { background: transparent; border: 0; color: var(--modern-ink); font: inherit; outline: 0; width: 100%; }
.modern-search input::placeholder { color: #71877e; }

.modern-icon-button {
  background: #fff;
  border: 1px solid var(--modern-border);
  border-radius: 9px;
  color: var(--modern-ink);
  cursor: pointer;
  height: 38px;
  position: relative;
  width: 38px;
}

.modern-icon-button:hover { border-color: var(--modern-green); color: #209a6d; }
.modern-notification-dot { background: #ef8b35; border: 2px solid #fff; border-radius: 50%; height: 9px; position: absolute; right: 7px; top: 6px; width: 9px; }
.modern-user-avatar { align-items: center; background: var(--modern-green); border-radius: 9px; color: #12382a; display: inline-flex; font-size: 12px; font-weight: 800; height: 38px; justify-content: center; width: 38px; }
.modern-user-name { color: var(--modern-muted); font-size: 13px; white-space: nowrap; }
.modern-layout { min-height: calc(100vh - 64px); }

.modern-sidebar {
  background: var(--modern-sidebar);
  bottom: 0;
  color: #f8f2ec;
  left: 0;
  overflow-y: auto;
  padding: 20px 10px;
  position: fixed;
  top: 0;
  width: var(--modern-width);
  z-index: 30;
}

.modern-sidebar-overlay { display: none; }
.modern-sidebar-brand { align-items: center; color: #fff; display: flex; font-size: 21px; font-weight: 800; gap: 10px; letter-spacing: -.5px; padding: 0 17px 28px; text-decoration: none; }
.modern-sidebar-brand i { color: var(--modern-green); font-size: 25px; }
.modern-sidebar-nav { display: flex; flex-direction: column; gap: 3px; }
.modern-nav-section { margin-top: 15px; }
.modern-nav-heading { color: rgba(255, 255, 255, .42); font-size: 10px; font-weight: 700; letter-spacing: .11em; padding: 0 17px 7px; text-transform: uppercase; }
.modern-nav-link { align-items: center; border-radius: 8px; color: rgba(255, 255, 255, .74); display: flex; font-size: 14px; gap: 12px; min-height: 42px; padding: 0 17px; text-decoration: none; transition: background .18s ease, color .18s ease; }
.modern-nav-link i { color: rgba(255, 255, 255, .62); font-size: 16px; text-align: center; width: 18px; }
.modern-nav-link:hover, .modern-nav-link.active { background: var(--modern-sidebar-soft); color: var(--modern-green); }
.modern-nav-link:hover i, .modern-nav-link.active i { color: var(--modern-green); }
.modern-logout-link { border-top: 1px solid rgba(255, 255, 255, .1); border-radius: 0; margin-top: 20px; padding-top: 13px; }
.modern-main { margin-left: var(--modern-width); }
.modern-main-inner { margin: 0 auto; max-width: 1500px; padding: 30px 32px 48px; }
.modern-main-inner > br, .modern-main-inner > center { display: none; }
.modern-main-inner h1, .modern-main-inner h2, .modern-main-inner h3, .modern-main-inner h4 { color: var(--modern-ink); font-family: inherit; }

.modern-page-header { align-items: flex-end; display: flex; justify-content: space-between; margin-bottom: 22px; }
.modern-page-header h1, .modern-page-header h2 { font-size: 25px; font-weight: 700; letter-spacing: -.5px; margin: 0; }
.modern-page-subtitle { color: var(--modern-muted); margin-top: 5px; }
.modern-dashboard-grid { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 22px; }
.modern-module-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.modern-dashboard-card, .modern-module-card, .modern-content-card { background: var(--modern-surface); border: 1px solid var(--modern-border); border-radius: 9px; box-shadow: 0 2px 8px rgba(15, 47, 36, .06); }
.modern-dashboard-card { color: inherit; display: block; min-height: 142px; padding: 19px; text-decoration: none; }
.modern-dashboard-card:hover, .modern-module-card:hover { border-color: var(--modern-green); box-shadow: 0 8px 22px rgba(15, 47, 36, .12); color: inherit; transform: translateY(-2px); }
.modern-dashboard-card-icon { align-items: center; background: var(--modern-green-soft); border-radius: 9px; color: #2bb985; display: flex; float: left; font-size: 20px; height: 43px; justify-content: center; margin-right: 13px; width: 43px; }
.modern-dashboard-card-label { color: var(--modern-muted); font-size: 12px; font-weight: 600; margin: 2px 0 9px; }
.modern-dashboard-card-value { color: var(--modern-ink); font-size: 25px; font-weight: 700; line-height: 1; }
.modern-dashboard-card-note { clear: both; color: var(--modern-muted); font-size: 12px; padding-top: 17px; }
.modern-module-card { display: block; padding: 20px; text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.modern-module-card i { color: #2bb985; display: block; font-size: 24px; margin-bottom: 16px; }
.modern-module-card strong { color: var(--modern-ink); display: block; font-size: 15px; margin-bottom: 6px; }
.modern-module-card span { color: var(--modern-muted); font-size: 12px; line-height: 1.5; }

.modern-ui .modern-dashboard-view { background: transparent; border: 0; box-shadow: none; overflow: visible; }
.modern-ui .mateTitleDiv { color: var(--modern-ink); font-size: 25px; font-weight: 700; margin: 0 0 19px; padding: 0; text-align: left; }
.modern-ui .mateTitleDiv div { color: var(--modern-muted); font-size: 13px !important; font-weight: 400 !important; margin-top: 5px; }
.modern-ui .mateTableDiv { background: #fff; border: 1px solid var(--modern-border); border-radius: 9px; box-shadow: 0 2px 8px rgba(15, 47, 36, .06); overflow-x: auto; padding: 0; text-align: left; }
.modern-ui table.mateTable { border: 0; color: var(--modern-ink); font-size: 13px; margin: 0; min-width: 760px; width: 100% !important; }
.modern-ui table.mateTable tr.header { background: #fbfcfc; border-bottom: 1px solid var(--modern-border); color: var(--modern-muted); height: 46px; text-transform: uppercase; }
.modern-ui table.mateTable tr.header a { color: var(--modern-muted); font-size: 11px; letter-spacing: .05em; }
.modern-ui table.mateTable tr.odd, .modern-ui table.mateTable tr.even { background: #fff; }
.modern-ui table.mateTable tr.odd:hover, .modern-ui table.mateTable tr.even:hover { background: #fcfefd; }
.modern-ui table.mateTable td { border-bottom: 1px solid #eeeae5; border-right: 0; padding: 14px 16px; vertical-align: middle; }
.modern-ui table.mateTable tr:last-child td { border-bottom: 0; }
.modern-ui .mateRecordLayerDiv, .modern-ui .mateSearchBtnsDiv, .modern-ui .mateUpdateInPlaceDiv { margin: 16px 0 0; text-align: left; }
.modern-ui .mateSearchBtnsDiv, .modern-ui .mateRecordLayerDiv { background: #fff; border: 1px solid var(--modern-border); border-radius: 9px; padding: 18px; }
.modern-ui button, .modern-ui input[type="submit"], .modern-ui input[type="button"] { background: var(--modern-ink); border: 1px solid var(--modern-ink); border-radius: 7px; color: #fff; cursor: pointer; font-family: inherit; font-size: 13px; padding: 8px 14px; }
.modern-ui button:hover, .modern-ui input[type="submit"]:hover, .modern-ui input[type="button"]:hover { background: #174c3a; border-color: #174c3a; }
.modern-ui select, .modern-ui textarea, .modern-ui input[type="text"], .modern-ui input[type="password"], .modern-ui input[type="number"], .modern-ui input[type="date"] { background: #fff; border: 1px solid var(--modern-border); border-radius: 7px; color: var(--modern-ink); font-family: inherit; font-size: 13px; padding: 8px 10px; }
.modern-ui select:focus, .modern-ui textarea:focus, .modern-ui input:focus { border-color: var(--modern-green); box-shadow: 0 0 0 3px rgba(52, 211, 153, .12); outline: 0; }
.modern-ui .matePageLinksDiv { padding: 15px 16px; }
.modern-ui .mateSelPage a, .modern-ui .mateNavPage a, .modern-ui .mateNavPage a:link, .modern-ui .mateNavPage a:visited, .modern-ui .mateNavPage a:active { border: 1px solid var(--modern-border); border-radius: 5px; display: inline-block; font-size: 12px; margin: 0 2px; padding: 4px 8px; text-decoration: none; }
.modern-ui .mateSelPage a { background: var(--modern-green); border-color: var(--modern-green); color: #12382a; }
.modern-ui .mateNavPage a, .modern-ui .mateNavPage a:link, .modern-ui .mateNavPage a:visited, .modern-ui .mateNavPage a:active { background: #fff; color: var(--modern-muted); }
.modern-ui .mateNavPage a:hover { background: var(--modern-green-soft); border-color: var(--modern-green); color: var(--modern-ink); }

.modern-login-body { align-items: center; background: var(--modern-sidebar); display: flex; justify-content: center; min-height: 100vh; padding: 24px; }
.modern-login-card { background: #fff; border-radius: 13px; box-shadow: 0 20px 55px rgba(0, 0, 0, .26); max-width: 420px; padding: 38px; width: 100%; }
.modern-login-brand { align-items: center; color: var(--modern-ink); display: flex; font-size: 25px; font-weight: 800; gap: 10px; justify-content: center; margin-bottom: 9px; }
.modern-login-brand i { color: var(--modern-green); }
.modern-login-subtitle { color: var(--modern-muted); margin: 0 0 28px; text-align: center; }
.modern-login-card .form-group { margin-bottom: 17px; }
.modern-login-card label { color: var(--modern-ink); display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; }
.modern-login-card input { border: 1px solid var(--modern-border); border-radius: 7px; box-sizing: border-box; font: inherit; padding: 11px 12px; width: 100%; }
.modern-login-card input:focus { border-color: var(--modern-green); box-shadow: 0 0 0 3px rgba(52, 211, 153, .12); outline: 0; }
.modern-login-submit { background: var(--modern-ink); border: 0; border-radius: 7px; color: #fff; cursor: pointer; font: inherit; font-weight: 600; padding: 12px; width: 100%; }
.modern-login-submit:hover { background: #174c3a; }
.modern-login-error { background: #fff0ed; border: 1px solid #f3c8bd; border-radius: 7px; color: #a33d2c; font-size: 12px; margin-top: 16px; padding: 10px 12px; text-align: center; }

@media (max-width: 1050px) { .modern-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .modern-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  :root { --modern-width: 0px; }
  .modern-topbar { margin-left: 0; padding: 0 16px; }
  .modern-menu-toggle { display: inline-flex; }
  .modern-sidebar { padding: 20px 10px; transform: translateX(-105%); transition: transform .2s ease; width: 254px; z-index: 40; }
  .modern-menu-open .modern-sidebar { transform: translateX(0); }
  .modern-sidebar-overlay { background: rgba(15, 47, 36, .48); bottom: 0; display: block; left: 0; opacity: 0; pointer-events: none; position: fixed; right: 0; top: 0; transition: opacity .2s ease; z-index: 35; }
  .modern-menu-open .modern-sidebar-overlay { opacity: 1; pointer-events: auto; }
  .modern-main { margin-left: 0; }
  .modern-main-inner { padding: 22px 16px 36px; }
  .modern-search, .modern-user-name { display: none; }
}
@media (prefers-reduced-motion: reduce) { .modern-sidebar, .modern-sidebar-overlay { transition: none; } }
@media (max-width: 520px) {
  .modern-dashboard-grid, .modern-module-grid, .modern-sidebar-nav { grid-template-columns: 1fr; }
  .modern-page-header { align-items: flex-start; flex-direction: column; gap: 12px; }
  .modern-login-card { padding: 28px 22px; }
}