/*
 * Cloudyte auth pages (login, register, password email/reset).
 * Loaded by layouts/auth2.blade.php after extracss_auth, so it wins over
 * that file's inline <style> and over css/tailwind/app.css by load order.
 * Palette and font are copied from resources/views/welcome.blade.php.
 * No !important except the Select2 search-box border (see there): every
 * other rule wins by load order or by being more specific
 * than the utility/vendor rule it replaces.
 */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&display=swap');

:root {
  --cy-bottle: #0F3D2E;
  --cy-bottle-2: #175440;
  --cy-crate: #F2A900;
  --cy-crate-hover: #FFBC1F;
  --cy-ink: #16221D;
  --cy-sans: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Page background: replaces the indigo->blue gradient set on html in
   layouts/partials/extracss_auth. Must be :root, not html: daisyUI (in
   css/tailwind/app.css) sets `:root,[data-theme]{background-color:var(--fallback-b1)}`,
   which is #1d232a charcoal under prefers-color-scheme:dark (white otherwise).
   :root beats a plain html selector on specificity; at equal specificity this
   file wins by loading later. */
:root {
  background: var(--cy-bottle);
}

/* Font: same selector list app.css uses for Poppins, loaded later. */
body,
button,
input,
select,
textarea,
.btn,
.form-control {
  font-family: var(--cy-sans);
}

/* ---------- Header ---------- */
.cy-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .75rem;
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1.2;
  text-decoration: none;
}
.cy-brand:hover,
.cy-brand:focus {
  color: #fff;
  text-decoration: none;
}
.cy-brand-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 7px;
  background: var(--cy-crate);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 5px;
}
.cy-brand-mark span {
  background: var(--cy-bottle);
  border-radius: 50%;
}

.cy-nav-link {
  opacity: .85;
  text-decoration: none;
}
.cy-nav-link:hover {
  opacity: 1;
  text-decoration: none;
}

.cy-btn-crate {
  display: inline-flex;
  align-items: center;
  padding: .7rem 1.1rem;
  border-radius: 10px;
  background: var(--cy-crate);
  color: var(--cy-bottle);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.cy-btn-crate:hover,
.cy-btn-crate:focus {
  background: var(--cy-crate-hover);
  color: var(--cy-bottle);
  text-decoration: none;
}

/* Focus on the green header: amber ring, as on the landing page. */
.cy-brand:focus-visible,
.cy-nav-link:focus-visible,
.cy-btn-crate:focus-visible,
.right-col > .row details > summary:focus-visible,
.right-col > .row .tw-text-white:focus-visible {
  outline: 3px solid var(--cy-crate);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Brand name + three header items don't fit side by side on a phone;
   keep the mark (the link keeps its aria-label). */
@media (max-width: 560px) {
  .cy-brand-name {
    display: none;
  }
  .cy-btn-crate {
    padding: .6rem .8rem;
    font-size: .9rem;
  }
}

/* ---------- Card ---------- */
.right-col .tw-bg-white.tw-ring-1 {
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}

/* Inputs: tw-outline-none removes the focus outline; put a visible one back. */
.right-col input:focus,
.right-col select:focus,
.right-col textarea:focus,
.right-col .form-control:focus {
  border-color: var(--cy-bottle);
  outline: 3px solid var(--cy-crate);
  outline-offset: 0;
}

/* Remember me / accept T&C checkbox (daisyUI draws it from --chkbg). */
.right-col .tw-dw-checkbox {
  --chkbg: var(--cy-bottle);
  --chkfg: #fff;
}
.right-col .tw-dw-checkbox:focus-visible {
  outline: 3px solid var(--cy-crate);
  outline-offset: 2px;
}

/* ---------- Primary buttons ---------- */
/* Login / send reset link / reset password: replaces the indigo->blue
   Tailwind gradient (tw-bg-gradient-to-r tw-from-indigo-500 tw-to-blue-500). */
.right-col button[type="submit"].tw-bg-gradient-to-r,
.right-col button[type="submit"].tw-bg-gradient-to-r:active {
  background-image: none;
  background-color: var(--cy-crate);
  color: var(--cy-bottle);
}
.right-col button[type="submit"].tw-bg-gradient-to-r:hover {
  background-image: none;
  background-color: var(--cy-crate-hover);
  color: var(--cy-bottle);
}

/* Register wizard Next / Finish (login.js adds tw-dw-btn-primary). */
.right-col .wizard > .actions a.tw-dw-btn-primary,
.right-col .wizard > .actions a.tw-dw-btn-primary:active {
  background-color: var(--cy-crate);
  border-color: var(--cy-crate);
  color: var(--cy-bottle);
}
.right-col .wizard > .actions a.tw-dw-btn-primary:hover {
  background-color: var(--cy-crate-hover);
  border-color: var(--cy-crate-hover);
  color: var(--cy-bottle);
}

/* An amber ring would vanish against an amber button, so these get a white
   gap then a bottle-green ring. Everything else uses amber. */
.right-col button[type="submit"].tw-bg-gradient-to-r:focus-visible,
.right-col .wizard > .actions a.tw-dw-btn-primary:focus-visible {
  outline: 3px solid var(--cy-bottle);
  outline-offset: 2px;
  box-shadow: none;
}
.right-col .wizard > .actions a:focus-visible,
.right-col .wizard > .steps a:focus-visible {
  outline: 3px solid var(--cy-crate);
  outline-offset: 2px;
}

/* ---------- Links on the card ---------- */
/* "Forgot your password" and "Register now" are gradient-clipped text
   (tw-bg-clip-text tw-text-transparent); make them solid bottle green. */
.right-col .tw-bg-clip-text {
  background-image: none;
  color: var(--cy-bottle);
}
.right-col .tw-bg-clip-text:hover {
  color: var(--cy-bottle-2);
  text-decoration: underline;
}
.right-col .tw-dw-label a:focus-visible,
.right-col a:focus-visible .tw-bg-clip-text {
  outline: 3px solid var(--cy-crate);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Register wizard steps (jquery-steps, vendor.css) ---------- */
.right-col .wizard > .steps .current a,
.right-col .wizard > .steps .current a:hover,
.right-col .wizard > .steps .current a:active {
  background: var(--cy-bottle);
  color: #fff;
}
.right-col .wizard > .steps .done a,
.right-col .wizard > .steps .done a:hover,
.right-col .wizard > .steps .done a:active {
  background: var(--cy-crate);
  color: var(--cy-bottle);
}

/* ---------- Register wizard: Previous ---------- */
/* Bottle-green outline. Step 1's disabled Previous (li.disabled) keeps
   vendor.css's grey. */
.right-col .wizard > .actions li:not(.disabled) a[href="#previous"] {
  background-color: transparent;
  border: 2px solid var(--cy-bottle);
  color: var(--cy-bottle);
}
.right-col .wizard > .actions li:not(.disabled) a[href="#previous"]:hover,
.right-col .wizard > .actions li:not(.disabled) a[href="#previous"]:active {
  background-color: var(--cy-bottle);
  border-color: var(--cy-bottle);
  color: #fff;
}

/* T&C checkbox (plain input, not daisyUI). */
.right-col input.input-check-box {
  accent-color: var(--cy-bottle);
}

/* ---------- Select2 (register form's .select2_register) ---------- */
/* The dropdown is appended to <body>, outside .right-col, so these rules
   are unscoped. That's fine because this file only loads on auth pages. */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--cy-bottle);
  color: #fff;
}
.select2-container--default.select2-container--open {
  border-color: var(--cy-bottle);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--cy-bottle);
}

/* ---------- Datepicker (start date) ---------- */
/* Also appended to <body>. Selectors mirror vendor.css so they win by load
   order at equal specificity. */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover:hover,
.datepicker table tr td.active.active,
.datepicker table tr td.today.active,
.datepicker table tr td.today.active:hover,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active.active {
  background-color: var(--cy-bottle);
  background-image: none;
  border-color: var(--cy-bottle);
  color: #fff;
  text-shadow: none;
}
.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused,
.datepicker table tr td span:hover {
  background: #EEF2EF;
  color: var(--cy-bottle);
}

/* Select2 dropdown search box. vendor.css (AdminLTE) sets this border as
   `border-color:#3c8dbc!important`, and an !important declaration can only be
   beaten by another !important. Same selector, loaded later, so this wins.
   This is the only !important in the file. */
.select2-container--default .select2-search--dropdown .select2-search__field {
  border-color: var(--cy-bottle) !important;
}