/* ============================================================
   Remote Support Console - Design Tokens
   ============================================================
   Background base : #0F1419   Panel        : #1A2129
   Border          : #2A333D   Text primary : #E6E9EE
   Text secondary  : #8B96A5   Text muted   : #5C6773
   Accent (action) : #388BFD   Accent hover : #58A6FF
   Online          : #3FB950   Busy         : #D29922
   Offline         : #6E7681   Danger       : #F85149
   Font UI         : Inter     Font mono    : JetBrains Mono
   ============================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Aturan global: [hidden] HARUS mengalahkan display:flex/grid/dll
   pada elemen manapun. Tanpa ini, elemen dengan display non-block
   tetap terlihat walau atribut hidden di-set via JS. */
[hidden] {
  display: none !important;
}

:root {
  --bg: #0F1419;
  --panel: #1A2129;
  --panel-raised: #212932;
  --border: #2A333D;
  --text: #E6E9EE;
  --text-secondary: #8B96A5;
  --text-muted: #5C6773;
  --accent: #388BFD;
  --accent-hover: #58A6FF;
  --online: #3FB950;
  --busy: #D29922;
  --offline: #6E7681;
  --danger: #F85149;
  --danger-hover: #FF6B63;
  --radius: 6px;
}

html, body {
  height: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.mono {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
}

/* ============================================================
   Shared form elements
   ============================================================ */

.field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.field-input {
  width: 100%;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 10px 12px;
  font-size: 14px;
  font-family: 'JetBrains Mono', monospace;
  transition: border-color 0.15s ease;
}

.field-input:focus {
  outline: none;
  border-color: var(--accent);
}

.field-input::placeholder {
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
}

.field-input-sm {
  padding: 7px 10px;
  font-size: 13px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-block {
  width: 100%;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
}

.btn-secondary {
  background: var(--panel-raised);
  border-color: var(--border);
  color: var(--text);
}
.btn-secondary:hover:not(:disabled) {
  border-color: var(--text-secondary);
}

.btn-danger {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}
.btn-danger:hover:not(:disabled) {
  background: var(--danger);
  color: #fff;
}

.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-secondary);
}
.btn-ghost:hover:not(:disabled) {
  border-color: var(--text-secondary);
  color: var(--text);
}

.btn-link {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.btn-link:hover {
  color: var(--text);
  text-decoration-color: var(--text-secondary);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}

.checkbox-label input {
  accent-color: var(--accent);
}

/* ============================================================
   Login View
   ============================================================ */

.login-view {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(56, 139, 253, 0.08), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(63, 185, 80, 0.06), transparent 40%),
    var(--bg);
}

.login-card {
  width: 380px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.login-brand-mark {
  font-size: 22px;
  color: var(--accent);
  line-height: 1;
}

.login-brand-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.login-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 24px;
  line-height: 1.6;
}

.login-error {
  margin-top: 12px;
  font-size: 13px;
  color: var(--danger);
  background: rgba(248, 81, 73, 0.1);
  border: 1px solid rgba(248, 81, 73, 0.3);
  border-radius: var(--radius);
  padding: 8px 12px;
}

/* ============================================================
   App Layout
   ============================================================ */

.app-view {
  height: 100vh;
  display: flex;
}

/* ----- Sidebar ----- */

.sidebar {
  width: 300px;
  flex-shrink: 0;
  min-height: 0;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.sidebar-section {
  padding: 16px 20px 12px;
}

.sidebar-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.badge {
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-secondary);
}

.client-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 12px;
}

.client-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: var(--radius);
  margin-bottom: 4px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.client-item:hover {
  background: var(--panel-raised);
  border-color: var(--border);
}

.client-item.active {
  background: rgba(56, 139, 253, 0.1);
  border-color: var(--accent);
}

.client-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.client-item-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-item-hostname {
  font-size: 12px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}

.client-item-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.status-dot--online { background: var(--online); box-shadow: 0 0 0 2px rgba(63, 185, 80, 0.2); }
.status-dot--busy { background: var(--busy); box-shadow: 0 0 0 2px rgba(210, 153, 34, 0.2); }
.status-dot--offline { background: var(--offline); }

.client-item-status--online { color: var(--online); }
.client-item-status--busy { color: var(--busy); }

.empty-list-message {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 32px 16px;
  line-height: 1.6;
}

.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.operator-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.operator-name {
  font-weight: 600;
  color: var(--text);
}

/* ----- Main content ----- */

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.empty-state, .pending-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
}

.empty-state-icon {
  font-size: 40px;
  color: var(--border);
  margin-bottom: 16px;
}

.empty-state-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.empty-state-text {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 380px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.menu-toggle-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
}

/* ----- Session view ----- */

.session-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.session-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.session-toolbar-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}

.session-client-id {
  font-weight: 600;
}

.session-divider {
  color: var(--text-muted);
}

.session-timer {
  color: var(--text-secondary);
}

.session-toolbar-actions {
  display: flex;
  gap: 8px;
}

.session-canvas-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

#screenCanvas {
  max-width: 100%;
  max-height: 100%;
  cursor: none;
  touch-action: none;
}

/* Local cursor overlay - indikator posisi mouse operator, di-update
   instan via JS pada setiap mousemove TANPA menunggu round-trip frame
   dari remote. Mengatasi "delay terasa" pada gerakan cursor yang
   terlihat di stream (dibatasi TargetFps capture, ~50ms/frame) -
   operator tetap mendapat feedback posisi instan, sementara frame
   stream (dengan cursor asli remote dari CursorOverlay.cs) tetap jadi
   acuan state remote yang sebenarnya.
   position:absolute relatif ke .session-canvas-wrap (position:relative) -
   koordinat dihitung dari rect canvas + offset dalam app.js. */
.local-cursor {
  position: absolute;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  border: 2px solid var(--accent-hover);
  border-radius: 50%;
  background: rgba(56, 139, 253, 0.18);
  pointer-events: none;
  z-index: 5;
  display: none;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
}

/* Input tersembunyi yang dipakai sebagai trigger on-screen keyboard
   di mobile/tablet. Menggunakan pola "visually hidden" standar
   (clip + overflow, BUKAN position:fixed dengan offset negatif) -
   beberapa browser mobile "memaksa" elemen fixed dengan offset negatif
   untuk masuk ke area terlihat saat fokus, yang menyebabkan elemen
   muncul sebagai bar putih. Pola ini tetap focusable (sehingga keyboard
   tetap muncul) tapi selalu ter-clip dari rendering. */
.mobile-kb-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  background: transparent;
  color: transparent;
  font-size: 16px; /* cegah auto-zoom iOS saat fokus */
}

/* ============================================================
   Responsive - Mobile & Tablet
   ============================================================ */

@media (max-width: 768px) {
  .app-view {
    position: relative;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 280px;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.4);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
  }

  .sidebar-backdrop.open {
    display: block;
  }

  .menu-toggle-btn {
    display: inline-flex;
  }

  .session-toolbar-info {
    font-size: 12px;
    gap: 6px;
  }

  .session-toolbar-actions .btn span.btn-label {
    display: none;
  }
}

@media (min-width: 769px) {
  .menu-toggle-btn {
    display: none;
  }

  .sidebar-backdrop {
    display: none !important;
  }
}