/* KUGIS auth theme — matches https://kugis.kasetsart.app/
   Loaded after the stock static/style.css, overrides only what it needs.
   Applies to every qwc-db-auth page: login, change/reset password,
   forced password change, TOTP verify, TOTP QR setup, notifications. */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap');

:root{
  --kugis-teal:#006664;      /* landing-page primary button */
  --kugis-teal-2:#00908E;    /* landing-page button hover   */
  --kugis-yellow:#FFE500;    /* landing-page accent wash    */
  --kugis-ink:#2f3b3b;
  --kugis-muted:#7a7a7a;
  --kugis-field:#f1f6f5;
  --kugis-field-border:#e0eae9;
}

html, body{
  font-family:"IBM Plex Sans Thai","Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  background-color:#e9f1f0;
  color:var(--kugis-ink);
}

/* ---- background: hero photo + white→yellow brand wash ---- */
.form-background{
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}
.form-background::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.92) 32%, rgba(255,231,64,.24) 100%);
  z-index:0;
}
.form-background > *{ position:relative; z-index:1; }
body > form, body > .login, body > h1{ position:relative; z-index:1; }
body:not(:has(.form-background)){
  background:linear-gradient(180deg,#ffffff 30%, rgba(255,229,0,.26) 100%), #e9f1f0;
}

/* stock templates print a bare page-title <h1> outside the card — hide it,
   the card already shows its own title in .app-title */
.form-background > h1,
body > form > h1,
body > h1{ display:none; }

/* ---- card ---- */
.login{ width:346px; max-width:calc(100vw - 32px); margin:8vh auto 40px; }
.new-password,.edit-password,.totp-setup,.verify,.notification{
  width:420px; max-width:calc(100vw - 32px);
}

.login-screen{
  background:#ffffff;
  padding:36px 32px 26px;
  border-radius:22px;
  border-top:5px solid var(--kugis-teal);
  box-shadow:0 22px 60px rgba(0,58,56,.20), 0 3px 10px rgba(0,0,0,.06);
}

/* ---- logo + title ---- */
.app-title{ color:var(--kugis-ink); margin-bottom:20px; }
.app-logo{
  width:240px !important;
  height:auto !important;
  max-width:100%;
  margin:0 auto 4px;
  display:block;
}
.app-title h1{
  font-family:"IBM Plex Sans Thai","Roboto",sans-serif;
  font-size:20px;
  font-weight:600;
  line-height:1.35;
  color:var(--kugis-teal);
  margin:12px 0 0;
}

/* ---- body copy (QR setup / notifications / contact-admin) ---- */
.login-form{ color:var(--kugis-ink); }
.login-form p{
  font-size:14.5px;
  line-height:1.6;
  color:#54595f;
  margin:0 0 14px;
}
.login-form b{ color:var(--kugis-ink); }

/* ---- fields ---- */
.control-group{ margin-bottom:12px; position:relative; }
.login-field-icon{ display:none; }              /* unused Flat-UI icon labels */
input.login-field,
.login-form input[type=text],
.login-form input[type=email],
.login-form input[type=password]{
  width:100%;
  text-align:left;
  background:var(--kugis-field);
  border:2px solid var(--kugis-field-border);
  border-radius:12px;
  font-size:15px;
  font-weight:400;
  padding:13px 14px;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
input:focus{
  border-color:var(--kugis-teal-2) !important;
  background:#fff !important;
  box-shadow:0 0 0 4px rgba(0,144,142,.14) !important;
}
input::placeholder{ color:#9aa8a7; }

/* ---- primary button / button-link (landing-page pill style) ---- */
.btn, .btn-primary, .btn-default, .btn-large, .btn-block,
.login-form input[type=submit],
a.btn{
  width:100%;
  display:block;
  margin:8px auto 0;
  box-sizing:border-box;
  background:var(--kugis-teal);
  color:#ffffff;
  font-family:"IBM Plex Sans Thai","Roboto",sans-serif;
  font-size:16px;
  font-weight:500;
  line-height:1.3;
  text-align:center;
  text-decoration:none;
  border:none;
  border-radius:30px;
  padding:15px 22px;
  cursor:pointer;
  transition:background .2s ease, transform .05s ease;
}
.btn:hover, a.btn:hover, .login-form input[type=submit]:hover{ background:var(--kugis-teal-2); color:#fff; }
.btn:active, a.btn:active, .login-form input[type=submit]:active{ transform:translateY(1px); }

/* ---- TOTP QR image ---- */
.totp-setup .login-form img{
  display:block;
  margin:6px auto 10px;
  width:220px;
  max-width:100%;
  height:auto;
  padding:10px;
  background:#fff;
  border:1px solid var(--kugis-field-border);
  border-radius:14px;
}
.totp-setup .login-form p b{
  display:inline-block;
  font-family:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--kugis-field);
  border:1px solid var(--kugis-field-border);
  border-radius:8px;
  padding:3px 8px;
  font-size:13px;
  word-break:break-all;
}

/* ---- links ---- */
.login-link{
  color:var(--kugis-teal);
  font-size:13px;
  text-decoration:none;
  margin-top:14px;
}
.login-link:hover{ color:var(--kugis-teal-2); text-decoration:underline; }

/* ---- inline field errors ---- */
.login-form span[style*="color: red"],
.login-form span[style*="color:red"]{
  display:block;
  margin-top:6px;
  font-size:13px;
  color:#cf2e2e !important;
}

/* ---- login hint ---- */
.login-hint{
  color:var(--kugis-muted);
  background:var(--kugis-field);
  border:1px solid var(--kugis-field-border);
  border-radius:12px;
  padding:11px 13px;
  font-size:13.5px;
  line-height:1.5;
}

/* ---- flash / status messages ---- */
.form-background > ul, body > ul{
  list-style:none;
  margin:18px auto 0;
  padding:0;
  width:420px;
  max-width:calc(100vw - 32px);
}
.form-background > ul li, body > ul li{
  background:#fff4f3;
  color:#b3261e;
  border:1px solid #f3c9c6;
  border-left:4px solid #cf2e2e;
  border-radius:12px;
  padding:11px 14px;
  font-size:14px;
  margin-bottom:8px;
}

/* ---- brand footer under the card ---- */
.login-screen::after{
  content:"KUGIS · Kasetsart University Geographic Information System";
  display:block;
  margin-top:20px;
  text-align:center;
  font-family:"Roboto","IBM Plex Sans Thai",sans-serif;
  font-size:11.5px;
  letter-spacing:.02em;
  color:#9aa8a7;
}

@media (max-width:460px){
  .login, .new-password, .edit-password, .totp-setup, .verify, .notification{
    margin:36px auto 32px;
  }
  .login-screen{ padding:28px 22px 22px; border-radius:18px; }
  .app-title h1{ font-size:18px; }
}