/* ============================================================
   Chrome-Remote-Desktop / Google-style skin for CortenDesk
   Injected via nginx sub_filter — no fork. v1.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* ---- global tokens: recolor orange -> Google blue, Roboto, lighter radii ---- */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-primary: #1a73e8 !important;
  --bs-primary-rgb: 26, 115, 232 !important;
  --bs-primary-text-emphasis: #174ea6 !important;
  --bs-link-color: #1a73e8 !important;
  --bs-link-color-rgb: 26, 115, 232 !important;
  --bs-link-hover-color: #174ea6 !important;
  --bs-body-font-family: 'Roboto', system-ui, -apple-system, sans-serif !important;
  --bs-border-radius: 8px !important;
  --bs-border-radius-sm: 6px !important;
  --bs-border-radius-lg: 12px !important;
  --bs-border-radius-xl: 16px !important;
  --cd-accent: #1a73e8;
}

/* force the light, airy Google surface regardless of the per-user theme */
:root,
[data-bs-theme] {
  --bs-body-bg: #f1f3f4 !important;
  --bs-body-color: #202124 !important;
  --bs-secondary-color: #5f6368 !important;
  --bs-tertiary-color: #5f6368 !important;
  --bs-border-color: #dadce0 !important;
  --bs-emphasis-color: #202124 !important;
  --bs-heading-color: #202124 !important;
  --bs-tertiary-bg: #f8f9fa !important;
  --bs-secondary-bg: #f1f3f4 !important;
  /* CortenDesk shell vars -> light */
  --rd-shell-bg: #ffffff !important;
  --rd-sidebar-bg: #ffffff !important;
  --rd-shell-fg: #5f6368 !important;
}

html, body {
  font-family: 'Roboto', system-ui, -apple-system, sans-serif !important;
  background: #f1f3f4 !important;
  color: #202124 !important;
  letter-spacing: .1px;
}

/* ---- primary buttons: Google blue, flat, rounded ---- */
.btn-primary {
  --bs-btn-bg: #1a73e8 !important;
  --bs-btn-border-color: #1a73e8 !important;
  --bs-btn-hover-bg: #1765cc !important;
  --bs-btn-hover-border-color: #1765cc !important;
  --bs-btn-active-bg: #1559b3 !important;
  --bs-btn-active-border-color: #1559b3 !important;
  --bs-btn-disabled-bg: #a6c8f5 !important;
  --bs-btn-disabled-border-color: #a6c8f5 !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}
.btn { border-radius: 8px !important; font-weight: 500 !important; }
.btn-primary:hover { box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15) !important; }
a { color: #1a73e8; }
a:hover { color: #174ea6; }

/* ---- cards & modals: white Material surfaces with soft elevation ---- */
.card, .modal-content, .dropdown-menu, .list-group {
  background-color: #ffffff !important;
  border: 1px solid #dadce0 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px 0 rgba(60,64,67,.1), 0 1px 3px 1px rgba(60,64,67,.06) !important;
}
.card-header { background: #fff !important; border-bottom: 1px solid #ecedef !important; }

/* ---- inputs: Google-style ---- */
.form-control, .form-select {
  border-radius: 8px !important;
  border-color: #dadce0 !important;
  background-color: #fff !important;
}
.form-control:focus, .form-select:focus {
  border-color: #1a73e8 !important;
  box-shadow: 0 0 0 2px rgba(26,115,232,.2) !important;
}

/* ---- sidebar / nav active accent -> blue ---- */
.nav-link.active, .active > .nav-link, [aria-current="page"],
.sidebar .active, .menu .active {
  color: #1a73e8 !important;
}
.nav-link.active svg, .sidebar .active svg, [aria-current] svg { color: #1a73e8 !important; }

/* badges / pills using the brand */
.badge.text-bg-primary, .bg-primary { background-color: #1a73e8 !important; }
.text-primary { color: #1a73e8 !important; }
.border-primary { border-color: #1a73e8 !important; }

/* progress / spinners / toggles */
.form-check-input:checked { background-color: #1a73e8 !important; border-color: #1a73e8 !important; }
.form-range::-webkit-slider-thumb { background: #1a73e8 !important; }
.form-range::-moz-range-thumb { background: #1a73e8 !important; }

/* ---- the orange logo mark -> hue-shift toward blue (quick brand tint) ---- */
img[src*="logo" i], img[alt*="CortenDesk" i], .navbar-brand img, .brand img, a[href$="/"] > img {
  filter: hue-rotate(188deg) saturate(.95) brightness(1.02);
}

/* ---- RustDesk-style icon rail -> light Google sidebar ---- */
.rd-sidebar {
  background: #ffffff !important;
  border-right: 1px solid #dadce0 !important;
}
.rd-nav-link { color: #5f6368 !important; border-radius: 8px !important; }
.rd-nav-link svg { color: inherit !important; }
.rd-nav-link:hover { background: rgba(60,64,67,.08) !important; color: #202124 !important; }
.rd-nav-link.active {
  color: #1a73e8 !important;
  background: rgba(26,115,232,.12) !important;
}
.rd-nav-link.active svg { color: #1a73e8 !important; }

/* logo header + active item (uses .rd-current here) */
.rd-sidebar-logo { background: #ffffff !important; border-bottom: 1px solid #ecedef !important; }
.rd-nav-item.rd-current .rd-nav-link, .rd-current .rd-nav-link {
  color: #1a73e8 !important;
  background: rgba(26,115,232,.12) !important;
}
.rd-nav-item.rd-current .rd-nav-link svg, .rd-current .rd-nav-link svg { color: #1a73e8 !important; }

/* top app bar / header, if dark */
.rd-topbar, .rd-header, header.rd-header { background: #fff !important; border-bottom: 1px solid #ecedef !important; }

/* ---- user-menu chip (top-right) -> light Google chip ---- */
.rd-user-chip {
  background: #f8f9fa !important;
  color: #202124 !important;
  border: 1px solid #e8eaed !important;
  border-radius: 999px !important;
}
.rd-user-chip:hover { background: #f1f3f4 !important; }
.rd-user-chip *,
.rd-user-chip .fw-semibold, .rd-user-chip strong { color: #202124 !important; }
.rd-user-chip small, .rd-user-chip .text-muted, .rd-user-chip .rd-user-role,
.rd-user-chip .small, .rd-user-chip .opacity-75 { color: #5f6368 !important; }
.dropdown-item:active { background: #1a73e8 !important; }

/* flatten any leftover glow/neon */
* { text-shadow: none !important; }