/* ==============================================================================
   TOPTRONIC T10142.com — App-simulation styles (Build #1480)
   Honest interactive replicas of the T10142CW desktop application.

   The replicas wear the application's OWN default theme, "Yellow on Black"
   (src/app/app_theme.rs: always the default; src/utils/theme_colors.rs:
   text YELLOW rgb(255,255,0), widget backgrounds rgb(20/40/60, same, 0),
   selection rgb(80,80,0)) — the test-instrument look an electrician sees
   when the real app opens. Colours are hardcoded for that fidelity, the
   same way the ticker's maximum-contrast box is.
   ============================================================================== */

/* ── Shared replica chrome ─────────────────────────────────────────────── */
.sim-block {
  max-width: 960px;
  margin: 0 auto 3rem;
  text-align: center;
}
.sim-eyebrow {
  font-family: 'Cascadia Code', ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 0.85rem;
  font-weight: 600;
  color: #7a5c10;               /* dark gold on light page — WCAG-safe */
  letter-spacing: 0.02em;
  margin-bottom: 0.75rem;
}
.sim-note {
  font-size: 0.85rem;
  color: #555;
  max-width: 75ch;
  margin: 0.75rem auto 0;
  text-align: left;
}
.sim-status {
  font-family: 'Cascadia Code', ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 0.8rem;
  color: #ffff00;
  background: #000000;
  padding: 0.35rem 0.75rem;
  margin: 0;
  min-height: 1.6em;
  text-align: left;
}

/* ── Replica 1: menu bar + status bar ──────────────────────────────────── */
.sim-app {
  background: #000000;
  border: 1px solid #3a3a00;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  overflow: visible;             /* dropdown panels must escape the frame */
  text-align: left;
}
.sim-chrome {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  background: #101000;
  border-bottom: 1px solid #3a3a00;
  border-radius: 12px 12px 0 0;
}
.sim-chrome-icon { width: 20px; height: 20px; display: block; }
.sim-chrome-title {
  color: #ffff00;
  font-weight: 700;
  font-size: 0.9rem;
}
.sim-chrome-title sup { font-size: 0.6em; }
.sim-chrome-build {
  margin-left: auto;
  color: #c0c000;
  font-family: 'Cascadia Code', ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 0.75rem;
}
.sim-menubar {
  display: flex;
  flex-wrap: wrap;               /* the app's Build-1056 wrapping bar */
  align-items: center;
  gap: 0.15rem;
  padding: 0.35rem 0.5rem;
  position: relative;
}
.sim-menu { position: relative; }
.sim-menu summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  color: #ffff00;
  font-size: 0.85rem;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
}
.sim-menu summary::-webkit-details-marker { display: none; }
.sim-menu summary::marker { display: none; content: ''; }
.sim-menu summary:hover,
.sim-menu[open] summary { background: #3a3a00; }
.sim-menu-static {
  color: #c0c000;
  font-size: 0.85rem;
  padding: 0.3rem 0.6rem;
  cursor: default;
}
.sim-menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  list-style: none;
  margin: 0;
  padding: 0.25rem;
  min-width: 15rem;
  max-height: 70vh;
  overflow-y: auto;
  background: #0a0a00;
  border: 1px solid #5a5a00;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
.sim-menu-item {
  color: #ffff00;
  font-size: 0.85rem;
  padding: 0.4rem 0.7rem;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.sim-menu-item:hover { background: #3a3a00; }
.sim-menu-sep {
  height: 1px;
  background: #3a3a00;
  margin: 0.25rem 0.5rem;
}
.sim-statusbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.75rem;
  background: #101000;
  border-top: 1px solid #3a3a00;
  border-radius: 0 0 12px 12px;
  font-family: 'Cascadia Code', ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 0.8rem;
}
.sim-status-cert { color: rgb(100, 255, 100); }  /* the app's green */
.sim-status-sep { color: #5a5a00; }
.sim-status-date,
.sim-status-clock { color: #ffff00; }
.sim-status-clock { margin-left: auto; }

/* ── Replica 2: certificate editor ─────────────────────────────────────── */
.sim-editor {
  background: #000000;
  border: 1px solid #3a3a00;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  text-align: left;
}
.sim-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  padding: 0.5rem 0.5rem 0;
  border-bottom: 1px solid #3a3a00;
}
.sim-tab {
  background: transparent;
  border: 1px solid #3a3a00;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  color: #c0c000;
  font-size: 0.85rem;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
}
.sim-tab:hover { background: #2a2a00; color: #ffff00; }
.sim-tab.is-active {
  background: #3a3a00;           /* hovered widget bg from the app theme */
  color: #ffff00;
  font-weight: 700;
}
.sim-tab:focus-visible { outline: 2px solid #ffff00; outline-offset: 2px; }
.sim-panel {
  padding: 1rem 1.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.9rem 1.25rem;
}
/* display:grid above would otherwise OVERRIDE the hidden attribute's
   display:none — without this rule every section shows at once. */
.sim-panel[hidden] { display: none; }
.sim-field { display: flex; flex-direction: column; gap: 0.3rem; }
.sim-label {
  color: #ffff00;
  font-size: 0.8rem;
  font-weight: 600;
}
.sim-input {
  background: #141400;           /* inactive widget bg from the app theme */
  border: 1px solid #5a5a00;
  border-radius: 4px;
  color: #ffff00;
  font-size: 0.9rem;
  padding: 0.45rem 0.6rem;
}
.sim-input:hover { background: #282800; }
.sim-input:focus {
  background: #3c3c00;           /* active widget bg */
  border-color: #ffff00;
  outline: none;
}
.sim-subtabs {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
}
.sim-subtab {
  border: 1px solid #3a3a00;
  border-radius: 999px;
  color: #c0c000;
  font-size: 0.75rem;
  padding: 0.25rem 0.7rem;
}
.sim-subtab.is-active {
  background: #3a3a00;
  color: #ffff00;
  font-weight: 700;
}
.sim-editor .sim-status { border-radius: 0 0 12px 12px; }

/* ── Replica 3: signature pad ──────────────────────────────────────────── */
.sim-sig {
  background: #000000;
  border: 1px solid #3a3a00;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  text-align: left;
  max-width: 660px;
  margin: 0 auto;
}
.sim-sig-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #101000;
  border-bottom: 1px solid #3a3a00;
}
.sim-sig-title { color: #ffff00; font-weight: 700; font-size: 0.9rem; }
.sim-sig-role { display: flex; gap: 0.3rem; }
.sim-sig-rolebtn {
  background: #141400;
  border: 1px solid #5a5a00;
  border-radius: 999px;
  color: #c0c000;
  font-size: 0.72rem;
  padding: 0.25rem 0.7rem;
  cursor: pointer;
}
.sim-sig-rolebtn.is-active {
  background: #3a3a00;
  color: #ffff00;
  font-weight: 700;
}
.sim-sig-canvas {
  display: block;
  width: 100%;
  height: auto;
  background: #ffffff;           /* a signature is ink on paper — the app
                                    normalises captures to a 600×200 image */
  cursor: crosshair;
  touch-action: none;            /* let a finger DRAW instead of scroll */
}
.sim-sig-actions {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid #3a3a00;
}
.sim-sig-clear {
  background: #141400;
  border: 1px solid #5a5a00;
  border-radius: 6px;
  color: #ffff00;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 1rem;
  cursor: pointer;
}
.sim-sig-clear:hover { background: #3a3a00; }
.sim-sig .sim-status { border-radius: 0 0 12px 12px; }

@media (max-width: 640px) {
  .sim-menu-panel { min-width: 12rem; }
  .sim-chrome-build { display: none; }
}