/* ==========================================================================
   Khmer MMO — Shared "Tools" page components
   Loaded only on tool pages (fake profile generator, password generator,
   lunar calendar, and future tools) via functions.php conditional enqueue
   ========================================================================== */

.kmmo-panel{
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:22px; margin-bottom:18px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,0.5);
}

.kmmo-field label{ display:block; font-size:12px; color:var(--ink-dim); margin-bottom:7px; }
.kmmo-field select,
.kmmo-field input[type=number],
.kmmo-field input[type=date]{
  width:100%; background:var(--surface-2); border:1px solid var(--line); color:var(--ink);
  padding:12px 14px; border-radius:11px; font-family:'Noto Sans Khmer',sans-serif; font-size:14px;
  cursor:pointer; color-scheme:dark;
}

.kmmo-btn{
  background:linear-gradient(135deg, var(--gold), var(--coral)); color:var(--bg);
  border:none; border-radius:11px; padding:12px 20px; font-size:14px; font-weight:700;
  font-family:'Noto Sans Khmer',sans-serif; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:7px; transition:transform .15s ease;
}
.kmmo-btn:hover{ transform:translateY(-1px); }
.kmmo-btn.kmmo-btn--ghost{ background:var(--surface-2); color:var(--ink); border:1px solid var(--line); }
.kmmo-btn.kmmo-btn--full{ width:100%; justify-content:center; padding:15px; font-size:15.5px; margin-top:6px; }
.kmmo-btn.kmmo-copied{ background:var(--teal); color:var(--bg); }

.kmmo-card{
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:22px; margin-bottom:18px;
}
.kmmo-card-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--line);
}
.kmmo-card-head h2{ font-size:15px; color:var(--gold); display:flex; align-items:center; gap:8px; }
.kmmo-tag{
  font-size:12px; background:var(--surface-2); border:1px solid var(--line);
  padding:5px 12px; border-radius:999px; color:var(--ink-dim);
  font-family:'Inter',sans-serif; font-weight:600;
}

.kmmo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:640px){ .kmmo-grid{ grid-template-columns:1fr; } }
.kmmo-grid .kmmo-full{ grid-column:1/-1; }

.kmmo-item{
  background:var(--surface-2); border:1px solid var(--line); border-radius:12px;
  padding:13px 40px 13px 15px; position:relative;
}
.kmmo-item label{ display:block; font-size:11px; color:var(--ink-dim); margin-bottom:4px; }
.kmmo-item .kmmo-val{ font-size:15px; font-weight:600; word-break:break-word; }
.kmmo-item .kmmo-val.kmmo-mono{ font-family:'JetBrains Mono',monospace; font-weight:500; font-size:13.5px; }

.kmmo-copy-btn{
  position:absolute; top:10px; right:10px; background:transparent; border:none;
  color:var(--ink-dim); cursor:pointer; padding:5px; border-radius:6px; opacity:0.65;
  display:flex; align-items:center; justify-content:center;
}
.kmmo-copy-btn:hover{ opacity:1; color:var(--gold); background:rgba(228,168,83,0.1); }
.kmmo-copy-btn.kmmo-copied{ color:var(--teal); opacity:1; }

.kmmo-switch{ position:relative; width:42px; height:24px; flex-shrink:0; }
.kmmo-switch input{ opacity:0; width:0; height:0; }
.kmmo-slider{
  position:absolute; inset:0; background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; cursor:pointer; transition:.2s;
}
.kmmo-slider::before{
  content:""; position:absolute; width:16px; height:16px; left:3px; top:2.5px;
  background:var(--ink-dim); border-radius:50%; transition:.2s;
}
.kmmo-switch input:checked + .kmmo-slider{
  background:linear-gradient(135deg, var(--gold), var(--coral)); border-color:transparent;
}
.kmmo-switch input:checked + .kmmo-slider::before{ transform:translateX(18px); background:var(--bg); }

.kmmo-opt-row{ display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.kmmo-opt-row:last-of-type{ border-bottom:none; }
.kmmo-opt-row label{ font-size:14.5px; }
.kmmo-opt-row .kmmo-hint{ font-size:12px; color:var(--ink-dim); margin-top:2px; }

.kmmo-table-wrap{
  overflow-x:auto; max-height:340px; overflow-y:auto; border-radius:10px; border:1px solid var(--line);
}
.kmmo-table-wrap table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.kmmo-table-wrap thead th{
  text-align:left; color:var(--ink-dim); font-weight:600; padding:8px 10px;
  border-bottom:1px solid var(--line); white-space:nowrap; font-family:'Inter',sans-serif;
  font-size:11px; text-transform:uppercase; letter-spacing:.03em;
}
.kmmo-table-wrap tbody td{ padding:9px 10px; border-bottom:1px solid var(--line); white-space:nowrap; font-family:'JetBrains Mono',monospace; font-size:12px; }
.kmmo-table-wrap tbody td.kmmo-name-cell{ font-family:'Noto Sans Khmer',sans-serif; font-weight:600; }
.kmmo-empty-state{ color:var(--ink-dim); font-size:13px; text-align:center; padding:30px 0; }

.kmmo-footer-note{ color:var(--ink-dim); font-size:12px; text-align:center; margin-top:8px; line-height:1.7; }