/*
 * Application-wide styles. Compiled to application.css by Propshaft.
 */

/* ---- Base reset ------------------------------------------------------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: "Segoe UI", "Segoe UI Variable", system-ui, -apple-system, sans-serif;
}

/* ---- Flash toasts ---------------------------------------------------- */
.flash {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.flash__msg {
  margin: 0;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  color: #fff;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  animation: flash-in .25s ease;
}

.flash__msg--notice { background: rgba(26, 161, 121, .92); }
.flash__msg--alert  { background: rgba(196, 75, 58, .92); white-space: pre-line; }

@keyframes flash-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===================================================================== */
/* Windows 10 style "Other user" sign-in screen                          */
/* ===================================================================== */
.winlock {
  position: fixed;
  inset: 0;
  overflow: hidden;
  color: #fff;
  user-select: none;
}

/* Wallpaper: Windows 10 "hero" style — deep blue with a light beam */
.winlock__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(70% 90% at 72% 38%, rgba(120, 190, 255, .55) 0%, transparent 42%),
    radial-gradient(120% 120% at 78% 30%, rgba(40, 130, 230, .35) 0%, transparent 55%),
    linear-gradient(160deg, #061226 0%, #0a2347 45%, #061a39 100%);
  background-color: #061226;
}

.winlock__bg::after {
  content: "";
  position: absolute;
  inset: -10%;
  background: radial-gradient(38% 38% at 70% 36%, rgba(255, 255, 255, .08), transparent 70%);
  animation: bloom-drift 24s ease-in-out infinite alternate;
}

@keyframes bloom-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(1.5%, -1.5%, 0) scale(1.05); }
}

/* ---- Center login panel --------------------------------------------- */
.winlock__center {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.winlogin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: min(340px, 86vw);
  text-align: center;
  animation: flash-in .3s ease;
}

/* Static generic avatar (no user is logged in yet) */
.winlogin__avatar {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(255, 255, 255, .18);
}

.winlogin__avatar--generic { background: rgba(120, 124, 138, .55); }
.winlogin__avatar--generic svg { width: 74px; height: 74px; fill: #eef0f4; }

/* ---- Form ----------------------------------------------------------- */
.winlogin__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.winlogin__field {
  position: relative;
  width: min(300px, 82vw);
}

.winlogin__input {
  width: 100%;
  padding: 10px 14px;
  font-size: 15px;
  color: #fff;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 2px; /* Windows 10 has near-square inputs */
  outline: none;
  transition: border-color .15s, background .15s;
}

.winlogin__input::placeholder { color: rgba(255, 255, 255, .85); }
.winlogin__input:focus {
  border-color: #fff;
  background: rgba(255, 255, 255, .24);
}

.winlogin__field--pwd .winlogin__input { padding-right: 46px; }

.winlogin__go {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 34px;
  height: calc(100% - 8px);
  display: grid;
  place-items: center;
  font-size: 18px;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 2px;
  cursor: pointer;
  transition: background .15s;
}

.winlogin__go:hover { background: rgba(255, 255, 255, .22); }

/* ---- Sign-in options / Google --------------------------------------- */
.winlogin__options {
  margin-top: 6px;
  font-size: 13px;
  color: #fff;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: .9;
  text-decoration: underline transparent;
  transition: text-decoration-color .15s;
}
.winlogin__options:hover { text-decoration-color: rgba(255, 255, 255, .8); }

.winlogin__google { margin-top: 4px; }

.winbtn-google {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  background: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.winbtn-google:hover { background: #f1f3f5; }
.winbtn-google::before {
  content: "G";
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-weight: 800;
  color: #fff;
  background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0);
  font-size: 11px;
}

/* ---- System tray (bottom-right, decorative) ------------------------- */
.winlock__tray {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 18px;
}

.wintray-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #fff;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  opacity: .92;
  transition: background .15s;
}
.wintray-btn:hover { background: rgba(255, 255, 255, .14); }
.wintray-btn svg { width: 20px; height: 20px; fill: currentColor; }