/* ============================================================================
   modern.css  -  the MODERN theme as a contemporary (2026) SaaS web app.
   Dark sidebar shell, generous whitespace, soft multi-layer shadows, rounded
   cards, focus rings, KPI dashboard, paginated data grid with row actions.
   Dark-mode tokens live in dark.css.
   ========================================================================== */
.modern {
  --bg: #f6f7fb; --surface: #ffffff; --surface-2: #fafbfe; --text: #0f172a; --text-soft: #475569;
  --label: #64748b; --border: #e7eaf0; --border-soft: #eef1f6;
  --side-bg: #0b1020; --side-grad1: #161d35; --side-text: #aab3c5;
  --row-alt: #fafbfd; --grid: #eef1f6;
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 26px rgba(15, 23, 42, .07);
  --radius: 14px;
  --mfont: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  background: var(--bg); color: var(--text); font-family: var(--mfont);
}
.modern .app-body { flex-direction: row; background: var(--bg); }

/* ---- sidebar ---- */
.modern .sidebar { width: 248px; flex: 0 0 248px; padding: 18px 14px 14px; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--side-grad1), var(--side-bg)); color: var(--side-text); }
.modern .side-brand { display: flex; align-items: center; gap: 11px; padding: 2px 6px 0; }
.modern .side-badge { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; background: var(--accent); color: #fff;
  font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .5); }
.modern .logo { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .2px; }
.modern .logosub { color: var(--side-text); font-size: 11px; margin-top: 2px; opacity: .82; }
.modern .side-cap { font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; color: #5d6986; padding: 0 8px; margin: 24px 0 8px; }
.modern .nav { display: flex; flex-direction: column; gap: 3px; }
.modern .navbtn { display: flex; align-items: center; gap: 11px; height: 42px; width: 100%; border: none; cursor: pointer;
  background: transparent; color: var(--side-text); text-align: left; padding: 0 12px; border-radius: 10px; font: 500 13.5px var(--mfont); }
.modern .navbtn:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.modern .navbtn.sel { background: var(--accent); color: #fff; box-shadow: 0 10px 22px -8px var(--accent); font-weight: 600; }
.modern .navico { width: 20px; text-align: center; font-size: 14px; opacity: .92; }
.modern .side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.modern .side-ver { font-size: 10.5px; color: #51607c; text-align: center; }

/* ---- top bar ---- */
.modern .maincol { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.modern .topbar { height: 62px; flex: 0 0 62px; display: flex; align-items: center; gap: 14px; padding: 0 22px;
  background: var(--surface); border-bottom: 1px solid var(--border); }
.modern .crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.modern .crumb-app { color: var(--label); }
.modern .crumb-sep { color: #cbd2de; }
.modern .crumb-cur { color: var(--text); font-weight: 650; font-size: 15px; }
.modern .topsearch { display: flex; align-items: center; gap: 7px; height: 36px; width: 300px; max-width: 32vw;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 0 11px; color: var(--label); }
.modern .topsearch-in { border: none; background: transparent; outline: none; width: 100%; font: 13px var(--mfont); color: var(--text); padding: 0; }
.modern .topsearch-ico { font-size: 14px; }
.modern .sp { flex: 1; }
.modern .td { color: var(--label); font-size: 12px; }
.modern .top-ico { width: 38px; height: 38px; border: none; background: transparent; border-radius: 9px; cursor: pointer;
  font-size: 16px; color: var(--text-soft); display: inline-flex; align-items: center; justify-content: center; }
.modern .top-ico:hover { background: var(--bg); }
.modern .avatar { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: var(--accent); color: #fff;
  font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.modern .content { flex: 1; min-height: 0; overflow: auto; }

/* ---- buttons / inputs ---- */
.modern .btn { font: 600 13px var(--mfont); border-radius: 9px; padding: 0 15px; height: 36px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.modern .btn:hover { background: var(--bg); }
.modern .btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 10px 20px -10px var(--accent); }
.modern .btn.primary:hover { background: var(--accent-hover); }
.modern .btn.secondary { background: var(--surface); color: var(--text-soft); }
.modern input, .modern textarea, .modern select { font: 13px var(--mfont); border: 1px solid var(--border); background: var(--surface);
  color: var(--text); padding: 8px 10px; border-radius: 8px; outline: none; }
.modern input:focus, .modern textarea:focus, .modern select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }

/* ---- dashboard ---- */
.modern .dash { padding: 24px 26px 34px; max-width: 1320px; }
.modern .dash h1 { font: 700 26px var(--mfont); margin: 0; letter-spacing: -.4px; }
.modern .dash .dsub { color: var(--label); font-size: 13.5px; margin: 6px 0 20px; }
.modern .statrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.modern .stat { border-radius: 16px; padding: 16px 18px; color: #fff; position: relative; overflow: hidden; min-height: 106px;
  box-shadow: 0 14px 28px -14px rgba(15, 23, 42, .5); }
.modern .stat-cap { font-size: 12px; font-weight: 500; opacity: .92; }
.modern .stat .num { font: 800 30px var(--mfont); margin-top: 9px; letter-spacing: -.5px; }
.modern .stat .tr { font-size: 11.5px; font-weight: 600; margin-top: 5px; opacity: .92; }
.modern .stat::after { content: ""; position: absolute; right: -26px; top: -26px; width: 108px; height: 108px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.modern .stat::before { content: ""; position: absolute; right: 18px; bottom: -34px; width: 78px; height: 78px; border-radius: 50%; background: rgba(255, 255, 255, .10); }

.modern .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; }
.modern .card .ctitle { font: 650 15px var(--mfont); }
.modern .card .csub { font-size: 11.5px; color: var(--label); margin-top: 3px; }
.modern .chartgrid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; margin-top: 16px; }
.modern .linecard, .modern .recentcard { margin-top: 16px; }
.modern .chartcanvas { width: 100%; display: block; margin-top: 10px; }

/* ---- tables ---- */
.modern table.mtable { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; }
.modern table.mtable th { text-align: left; font: 600 11px var(--mfont); letter-spacing: .5px; text-transform: uppercase;
  color: var(--label); padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; }
.modern table.mtable td { padding: 10px 12px; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 240px; border-bottom: 1px solid var(--border-soft); }
.modern table.mtable td.k { color: var(--accent); font-weight: 650; }
.modern table.mtable tbody tr { cursor: pointer; }
.modern table.mtable tbody tr:hover td { background: var(--surface-2); }
.modern table.mtable tbody tr.sel td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.modern .actcol { width: 84px; text-align: right; white-space: nowrap; }
.modern .rowact { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; color: var(--accent); cursor: pointer; opacity: 0; transition: opacity .12s, background .12s; vertical-align: middle; }
.modern .rowact svg { width: 18px; height: 18px; display: block; }
.modern .rowact + .rowact { margin-left: 4px; }
.modern table.mtable tbody tr:hover .rowact { opacity: 1; }
/* "Always show row actions" setting (root .actions-always): icons stay visible
   without needing a row hover - friendlier for web automation. */
.modern.actions-always table.mtable tbody tr .rowact { opacity: 1; }
.modern .rowact:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.modern .rowact:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; opacity: 1; }

/* ---- data screen ---- */
.modern .mscreen { padding: 22px 26px 18px; display: flex; flex-direction: column; height: 100%; max-width: 1320px; }
.modern .mtoolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.modern .mt-title { font: 700 21px var(--mfont); letter-spacing: -.2px; }
.modern .mt-sub { font-size: 12.5px; color: var(--label); margin-top: 3px; }
.modern .msearch { display: flex; align-items: center; gap: 7px; height: 38px; width: 264px; padding: 0 11px; color: var(--label);
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.modern .msearch .search { border: none; background: transparent; padding: 0; height: auto; width: 100%; }
.modern .msearch .search:focus { box-shadow: none; }
.modern .msearch-ico { font-size: 14px; }
.modern .mtablewrap { flex: 1; min-height: 0; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.modern .mpager { display: flex; align-items: center; gap: 12px; padding: 12px 4px 2px; }
.modern .pg-info { font-size: 12.5px; color: var(--label); }
.modern .pg-btns { margin-left: auto; display: flex; gap: 8px; }
.modern .pg-btn { font: 600 12.5px var(--mfont); height: 34px; padding: 0 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); border-radius: 9px; cursor: pointer; }
.modern .pg-btn:hover:not([disabled]) { background: var(--bg); }
.modern .pg-btn[disabled] { opacity: .45; cursor: default; }

/* ---- form section cards ---- */
.modern .section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 18px 18px; margin-bottom: 14px; position: relative; }
.modern .section .stripe { position: absolute; left: 18px; top: 18px; width: 4px; height: 16px; background: var(--accent); border-radius: 2px; }
.modern .section .legend { font: 650 14.5px var(--mfont); margin: 0 0 14px 14px; }
.modern .section .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.modern .fld { display: flex; flex-direction: column; }
.modern .fld.multi { grid-column: 1 / -1; }
.modern .fld .lab { font-size: 11.5px; color: var(--label); margin-bottom: 5px; font-weight: 500; }
.modern .fld input, .modern .fld textarea { width: 100%; }
.modern .fld textarea { height: 60px; resize: none; }