/*
  auth.css — shared styles for the console auth pages:
    login.jinja, register.jinja, auth-status.jinja, auth-calendar.jinja

  Loaded at layout level (e.g. <link rel="stylesheet" href="{{ url_for('static', file_path='css/auth.css') }}">
  in console/layout.jinja's <head>).

  All rules are scoped under .auth-page, applied to each page's outer
  wrapper div (alongside its existing id, e.g. #login-view / #register-view),
  so these tokens/rules don't leak onto non-auth pages.
*/

.auth-page {
  --la-ink: #212631;
  --la-ink-soft: #1d2126;
  --la-ink-line: rgba(255,255,255,.06);
  /*--la-paper: #faf9f6;*/
  --la-paper: rgba(255, 255, 255, 0.87);
  --la-paper-line: rgba(20,23,27,.08);
  --la-text-dim: #9aa0ac;
  --la-red: #c1272d;
  --la-green: #046a38;
  --la-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --la-yellow: rgb(242.25, 196.35, 12.75);
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* Shell */
.login-shell {
  width: 100%;
  max-width: 920px;
  margin: 2rem auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px -20px rgba(20,23,27,.35);
}
@media (max-width: 991.98px) {
  .login-shell { grid-template-columns: 1fr; max-width: 480px; }
}

/* Visual / signature panel (auth-calendar.jinja) */
.login-visual {
  background: var(--la-ink);
  color: #e7e9ec;
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}
.login-brand .brand-mark { font-size: 1.5rem; font-weight: 600; }
.login-brand .brand-path { display: block; margin-top: .25rem; font-family: var(--la-mono); font-size: .75rem; color: var(--la-text-dim); }

.cal-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--la-mono); font-size: .8rem; color: var(--la-text-dim);
  margin-bottom: .5rem; text-transform: uppercase; letter-spacing: .08em;
}
.cal-month { color: #e7e9ec; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow {
  text-align: center; font-family: var(--la-mono); font-size: .65rem;
  color: var(--la-text-dim); padding-bottom: .25rem; text-transform: uppercase;
}
.cal-cell {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--la-mono); font-size: .8rem;
  background: var(--la-ink-soft);
  border: 1px solid var(--la-ink-line);
  border-radius: 6px;
  color: #e7e9ec;
  position: relative;
  animation: cal-in .35s ease both;
  animation-delay: calc(var(--i) * 18ms);
}
.cal-cell.weekend { color: var(--la-text-dim); }
.cal-cell.today { outline: 2px solid var(--la-green); outline-offset: -2px; font-weight: 600; }
.cal-cell.holiday::after {
  content: ''; position: absolute; top: 4px; right: 4px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--la-red);
}
/* Holiday type -> dot color (religious/national mirror the brand's red/green; exceptional and undefined fall back to a neutral dot). */
.cal-cell.holiday-national::after { background: var(--la-green); }
.cal-cell.holiday-religious::after { background: var(--la-red); }
.cal-cell.holiday-exceptional::after,
.cal-cell.holiday-nd::after { background: var(--la-yellow); }
.cal-cell.holiday.is-estimated::after {
  background: transparent;
  border: 1px solid var(--la-red);
}
.cal-cell.is-empty {
  background: transparent;
  border-color: transparent;
  animation: none;
}
@keyframes cal-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cal-cell { animation: none; } }

.cal-status { margin: .6rem 0 0; font-family: var(--la-mono); font-size: .7rem; color: var(--la-text-dim); min-height: 1em; }

.login-legend { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .75rem; color: var(--la-text-dim); }
.login-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .35rem; vertical-align: middle; }
.dot-business { background: var(--la-ink-soft); border: 1px solid var(--la-ink-line); }
.dot-weekend { background: var(--la-text-dim); }
.dot-holiday { background: var(--la-green); }
.dot-holiday-religious { background: var(--la-red); }
.dot-holiday-religious-estimated { border: 2px solid var(--la-red); background: transparent; }
.dot-holiday-exceptional { background: var(--la-yellow); }
.dot-today { border: 2px solid var(--la-green); background: transparent; }

/* Form / status panel */
.login-panel { background: var(--la-paper); padding: 2.25rem; display: flex; flex-direction: column; }
.panel-top { margin-bottom: 1rem; font-size: .85rem; }
.back-link { color: #6b7280; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.panel-top .brand-mark { font-size: 1.1rem; font-weight: 600; }

.panel-body h1 { font-size: 1.6rem; margin-bottom: .25rem; }

.login-form { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.form-field .form-control { padding: .65rem .9rem; border-radius: 10px; border: 1px solid var(--la-paper-line); background: #fff; }
.form-field .form-control:focus { border-color: var(--la-green); box-shadow: 0 0 0 3px rgba(4,106,56,.12); }
.form-field .form-control.is-invalid { border-color: var(--la-red); box-shadow: 0 0 0 3px rgba(193,39,45,.1); }
.form-password .form-control { border-radius: 10px; }

.field-hint { margin: .35rem 0 0; font-size: .75rem; color: #6b7280; }
.field-hint.is-error { color: var(--la-red); min-height: 1em; }

.form-row { font-size: .85rem; }
.form-check { font-size: .85rem; }
.form-check a { color: var(--la-red); text-decoration: none; }
.form-check a:hover { text-decoration: underline; }

.btn-submit {
  margin-top: .25rem;
  background: var(--la-green);
  border: none;
  color: #fff;
  font-weight: 600;
  padding: .7rem 1rem;
  border-radius: 10px;
  transition: background .15s ease;
}
.btn-submit:hover, .btn-submit:focus-visible { background: #03522c; }

.panel-footer { margin-top: 1.5rem; font-size: .85rem; color: #6b7280; }
.panel-footer a { color: var(--la-red); font-weight: 600; text-decoration: none; }
.panel-footer a:hover { text-decoration: underline; }

/* Status card (auth-status.jinja) */
.status-card { text-align: center; align-items: center; }
.status-icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.status-icon.info { background: rgba(20,23,27,.06); color: var(--la-ink); }
.status-icon.success { background: rgba(4,106,56,.1); color: var(--la-green); }
.status-card h1 { font-size: 1.6rem; margin-bottom: .5rem; }
.status-card p { margin-bottom: 1.5rem; }
.status-card .btn-submit { display: inline-block; padding: .7rem 1.5rem; text-decoration: none; }

/* CoreUI dark theme */
[data-coreui-theme="dark"] .auth-page { --la-paper: #1d2126; --la-paper-line: rgba(255,255,255,.08); }
[data-coreui-theme="dark"] .login-panel { color: #e7e9ec; }
[data-coreui-theme="dark"] .login-panel h1 { color: #e7e9ec; }
[data-coreui-theme="dark"] .form-field .form-control { background: #14171b; color: #e7e9ec; border-color: rgba(255,255,255,.08); }
[data-coreui-theme="dark"] .back-link,
[data-coreui-theme="dark"] .field-hint,
[data-coreui-theme="dark"] .panel-footer { color: var(--la-text-dim); }
[data-coreui-theme="dark"] .status-icon.info { background: rgba(255,255,255,.08); color: #e7e9ec; }