/* Crossword-styled login page */

/* Center the auth cards vertically and horizontally on selected pages */
body[data-page="login"] #menu,
body[data-page="register"] #menu,
body[data-page="forgot"] #menu {
  display: none;
}

/* Hide header burger when no left menu is active on auth pages */
body[data-page="login"] #menu-burger,
body[data-page="register"] #menu-burger,
body[data-page="forgot"] #menu-burger {
  display: none !important;
}

body[data-page="login"] main.OutOfMenu,
body[data-page="register"] main.OutOfMenu,
body[data-page="forgot"] main.OutOfMenu {
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* Desktop: compensate half of left menu offset to center to viewport */
@media (min-width: 992px){
  body[data-page="login"] .login-scene .center-viewport,
  body[data-page="register"] .login-scene .center-viewport,
  body[data-page="forgot"] .login-scene .center-viewport{
    position: relative;
    /* Center to viewport: move to V/2 - W/2, then subtract full menu offset */
    left: calc(50vw - 50% - (var(--menu-w) + 15px));
    margin-left: 0; margin-right: 0;
  }
}
/* Make container full-width on login */
/* Avoid horizontal overflow quirks */
body[data-page="login"],
body[data-page="register"],
body[data-page="forgot"]{ overflow-x: hidden; }

/* Animated light-up crossword cells overlay */
.login-scene{ position: relative; }
.login-scene .fx-grid{ position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; width:100%; height:auto; pointer-events: none; z-index: 0; display: grid; overflow: hidden; }
.fx-cell{ width: var(--fx-cell, 28px); height: var(--fx-cell, 28px); box-sizing: border-box; border: 1px solid rgba(0,0,0,.06); background: transparent; display:flex; align-items:center; justify-content:center; }
.fx-cell > span{ font-size: calc(var(--fx-cell,28px) * .55); line-height: 1; font-weight: 800; letter-spacing: .02em; color: rgba(0,0,0,.08); transition: color .6s ease, text-shadow .6s ease, opacity .6s ease; opacity: 0; }
.fx-cell.word-on > span{ color: rgba(0,0,0,.28); text-shadow: 0 0 0 rgba(0,0,0,0), 0 0 22px rgba(255,227,128,.0); opacity: 1; }
html[data-theme="dark"] .fx-cell{ border-color: rgba(255,255,255,.06); }
html[data-theme="dark"] .fx-cell > span{ color: rgba(255,255,255,.12); opacity: 0; }
/* Ensure letters become visible in dark mode when active */
html[data-theme="dark"] .fx-cell.word-on > span{ color: rgba(255,255,255,.35); opacity: 1; }
/* Keep menu visible; center card within content column */
body[data-page="login"] .auth-wrap > [class^="col-"],
body[data-page="login"] .auth-wrap > [class*=" col-"],
body[data-page="register"] .auth-wrap > [class^="col-"],
body[data-page="register"] .auth-wrap > [class*=" col-"],
body[data-page="forgot"] .auth-wrap > [class^="col-"],
body[data-page="forgot"] .auth-wrap > [class*=" col-"]{ margin-left: auto; margin-right: auto; }

/* Subtle crossword grid background */
/* Remove subtle background grid to keep only letter cells */
body[data-page="login"] main.OutOfMenu::before,
body[data-page="register"] main.OutOfMenu::before,
body[data-page="forgot"] main.OutOfMenu::before { content: none; }

/* HERO (left side): animated gradient title, crisp copy */
.login-hero .crumbs{ font-size: .9rem; color: #656879; }
.login-hero .hero-title{
  font-weight: 900; line-height: 1.05; margin: 0 0 .5rem;
  background: linear-gradient(90deg, #111, #6b5bff, #111);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; animation: hueShift 8s linear infinite;
}
.login-hero .hero-text{ display:none; }
.login-hero .hero-badges .badge{ border: 1px solid rgba(0,0,0,.15); }

@keyframes hueShift {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* LOGIN PANEL: crossword-looking tile */
.login-panel{
  --cell: 14px;
  position: relative;
  border-radius: 18px;
  background: #fff;
  border: 3px solid #111;
  box-shadow: 0 18px 48px rgba(0,0,0,.14);
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
}
/* Ensure Bootstrap lemon-card/auth-card styles don't override the unified panel look */
.lemon-card.auth-card.login-panel{
  background: #fff !important;
  border: 3px solid #111 !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.14) !important;
}
/* Remove inner subtle grid overlay */
.login-panel::before{ content: none; }
.login-panel .panel-header,
.login-panel .card-header{ position: relative; z-index: 1; padding: 1.15rem 1.5rem; border-bottom: 3px solid #111; background: #fff !important; }
/* Remove decorative ribbon under headers */
.login-panel .panel-header::after,
.login-panel .card-header::after{ content: none; }
.login-panel .panel-title,
.login-panel .card-header strong{ font-weight: 800; font-size: 1.25rem; color: #111; }
.login-panel .panel-subtitle{ font-size: .95rem; color: #565a6b; }
.login-panel .panel-body,
.login-panel .card-body{ position: relative; z-index: 1; padding: 1.6rem; background: #fff !important; }
.login-panel .panel-links a{ font-weight: 600; }
/* Wrap links safely on small screens */
.login-panel .panel-links{ flex-wrap: wrap; gap: 8px; }
.login-panel .panel-links a{ white-space: nowrap; }
@media (max-width: 420px){
  .login-panel .panel-links{ flex-direction: column; align-items: stretch; }
  .login-panel .panel-links a{ display: block; }
}

/* decorative black squares (like crossword blocks) */
/* Hide decorative black squares to avoid duplication of "kratki" */
.login-panel .panel-cells{ display: none !important; }

/* Inputs: slightly monospace feel */
.login-panel .form-control{
  border-radius: 8px; border: 1.5px solid #cfc8ff; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing:.2px;
}
.login-panel .form-control:focus{ box-shadow: 0 0 0 4px rgba(107,91,255,.15); border-color: #6b5bff; }

/* Make register card inputs match login panel styling (override lemon-card rules) */
.lemon-card.auth-card.login-panel .form-control{
  border-radius: 8px !important;
  border: 1.5px solid #cfc8ff !important;
  background: #fff !important;
  color: #111 !important;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .2px;
}
.lemon-card.auth-card.login-panel .form-control:focus{
  border-color: #6b5bff !important;
  box-shadow: 0 0 0 4px rgba(107,91,255,.15) !important;
}

/* Harmonize input-group toggle button in register with input look */
.lemon-card.auth-card.login-panel .input-group > .btn.btn-outline-secondary{
  background: #fff !important;
  color: #333 !important;
  border: 1.5px solid #cfc8ff !important;
  border-left-width: 1.5px !important;
}
.lemon-card.auth-card.login-panel .input-group > .btn.btn-outline-secondary:hover,
.lemon-card.auth-card.login-panel .input-group > .btn.btn-outline-secondary:focus{
  border-color: #6b5bff !important;
  box-shadow: 0 0 0 4px rgba(107,91,255,.15) !important;
  color: #111 !important;
}

/* Make selects consistent with inputs */
.login-panel .form-select{
  border-radius: 8px;
  border: 1.5px solid #cfc8ff;
  background: #fff;
}
.lemon-card.auth-card.login-panel .form-select{
  border-radius: 8px !important;
  border: 1.5px solid #cfc8ff !important;
  background: #fff !important;
  color: #111 !important;
}

/* Inputs with “cell look” */
/* Inputs: no grid background (clean look) */
.cell-input{ background-image: none !important; }

/* Bolder labels */
.login-panel .form-label{ font-weight: 700; }

/* Login CTA */
body[data-page="login"] .btn-login{
  border: 2px solid #111; border-radius: 10px; background: #111; color: #fff;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
  padding-block: .9rem;
  margin-bottom: .5rem;
}
body[data-page="login"] .btn-login:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.16); background: #222; }
/* Make primary dark button on register/forgot match login CTA */
body[data-page="register"] .auth-card .btn-dark,
body[data-page="forgot"] .auth-card .btn-dark{
  border: 2px solid #111; border-radius: 10px; background: #111; color: #fff;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
  padding-block: .9rem;
}
body[data-page="register"] .auth-card .btn-dark:hover,
body[data-page="forgot"] .auth-card .btn-dark:hover{
  transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.16); background: #222;
}

/* Tweak submit button for prominence */
body[data-page="login"] #login-submit {
  margin-top: .5rem;
  padding: .6rem .9rem;
  letter-spacing: .3px;
}

/* Dark mode: make the primary CTA truly black and title text black as requested */
html[data-theme="dark"] body[data-page="login"] .btn-login{
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}
html[data-theme="dark"] body[data-page="login"] .login-panel .panel-title,
html[data-theme="dark"] .login-panel .card-header strong{
  color: #000 !important;
}
/* Dark mode: keep the header bright like body */
html[data-theme="dark"] .login-panel .panel-header,
html[data-theme="dark"] .login-panel .card-header{
  background: #fff !important;
  border-bottom-color: #111 !important;
}
html[data-theme="dark"] body[data-page="register"] .auth-card .btn-dark,
html[data-theme="dark"] body[data-page="forgot"] .auth-card .btn-dark{
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}
/* Dark mode: ensure panel text uses login's dark-on-light scheme */
html[data-theme="dark"] .login-panel{
  background: #fff !important;
  color: #111 !important;
}
html[data-theme="dark"] .login-panel .card-body,
html[data-theme="dark"] .login-panel .panel-subtitle,
html[data-theme="dark"] .login-panel .card-footer,
html[data-theme="dark"] .login-panel .form-label{
  color: #111 !important;
}
html[data-theme="dark"] .login-panel .card-body,
html[data-theme="dark"] .login-panel .panel-body{ background: #fff !important; }
html[data-theme="dark"] .login-panel .text-muted{ color: #565a6b !important; }
html[data-theme="dark"] .login-panel a.link-dark{ color: #111 !important; }
html[data-theme="dark"] .login-panel .form-control{
  background: #fff !important;
  color: #111 !important;
  border-color: #cfc8ff !important;
}

/* Dark mode: ensure register card inputs/buttons stay like login */
html[data-theme="dark"] .lemon-card.auth-card.login-panel .form-control{
  background: #fff !important;
  color: #111 !important;
  border-color: #cfc8ff !important;
}
html[data-theme="dark"] .lemon-card.auth-card.login-panel .input-group > .btn.btn-outline-secondary{
  background: #fff !important;
  color: #333 !important;
  border-color: #cfc8ff !important;
}
html[data-theme="dark"] .lemon-card.auth-card.login-panel .form-select{
  background: #fff !important;
  color: #111 !important;
  border-color: #cfc8ff !important;
}

/* Fine-tune spacing */
/* Responsive */
@media (max-width: 991.98px){
  .login-hero .hero-title{ font-size: 1.75rem; }
  .login-hero .hero-text{ font-size: 1rem; }
}
@media (max-width: 576px){ .login-panel .panel-cells{ display: none; } }

/* Ensure the centered column does not drift */
body[data-page="login"] .auth-wrap,
body[data-page="register"] .auth-wrap,
body[data-page="forgot"] .auth-wrap {
  width: 100%;
  justify-content: center;
}

/* Register page: checkbox styling and bold links in terms/privacy */
.register-card .form-check-label a { 
  font-weight: 700; 
}
.register-card .form-check-input {
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid var(--ink, #000);
  background-color: transparent !important;
  box-shadow: none;
}
.register-card .form-check-input:not(:checked) {
  background-color: transparent !important;
  background-image: none !important;
}
.register-card .form-check-input:checked {
  background-color: var(--ink, #000);
  border-color: var(--ink, #000);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%23fff' d='M7.629 14.571L3.4 10.343l1.657-1.657 2.572 2.572 7.314-7.314L16.6 5.6z'/%3e%3c/svg%3e");
  background-size: 80% 80%;
  background-position: center;
  background-repeat: no-repeat;
}
html[data-theme="dark"] .register-card .form-check-input {
  border-color: var(--lemon-200, #f4e14a);
  box-shadow: none;
}
html[data-theme="dark"] .register-card .form-check-input:checked {
  background-color: var(--lemon-200, #f4e14a);
  border-color: var(--lemon-200, #f4e14a);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%23000' d='M7.629 14.571L3.4 10.343l1.657-1.657 2.572 2.572 7.314-7.314L16.6 5.6z'/%3e%3c/svg%3e");
}