/* ==========================================================================
   URATTENDANCE AUTH THEME  --  shared by index.html & admin.html
   Scoped to #auth-page so it never leaks into the app shell.
   Extracted verbatim from the inline <style> block that used to live
   in index.html. Edit here, not in the HTML files.
   ========================================================================== */

    /* ---------- Layout dasar hanya di area auth ----------
       body memakai display:flex + html{overflow:hidden}, jadi halaman auth
       harus mengisi tepat 1 viewport dan meng-scroll di dalam kolom kertasnya. */
    #auth-page.auth-ura {
      width: 100%;
      max-width: none;
      flex: 1 1 auto;
      height: 100vh;
      height: 100dvh;
      display: grid;
      grid-template-columns: minmax(0, 1.14fr) minmax(390px, .86fr);
      overflow: hidden;
      background: #eee1ce;
      font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      color: #3d2010;
    }
    #auth-page.auth-ura *,
    #auth-page.auth-ura *::before,
    #auth-page.auth-ura *::after { box-sizing: border-box; }

    /* ---------- Kiri: kertas ---------- */
    #auth-page .auth-paper {
      position: relative;
      display: flex;
      align-items: auto;
      isolation: isolate;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      background-color: #f7efe3;
      background-image:
        repeating-linear-gradient(0deg, rgba(107,71,38,.025) 0 1px, transparent 1px 5px),
        radial-gradient(circle at 8% 19%, rgba(205,141,72,.14), transparent 24rem),
        radial-gradient(circle at 100% 95%, rgba(139,90,43,.12), transparent 29rem);
      padding: 24px;
    }
    #auth-page .auth-paper::before {
      content: ''; position: absolute; inset: 24px;
      border: 1px solid rgba(106,65,27,.16); pointer-events: none;
    }
    #auth-page .auth-paper::after {
      content: ''; position: absolute; inset: 31px;
      border: 1px solid rgba(181,101,29,.08); pointer-events: none;
    }
    #auth-page .auth-content {
      position: relative;
      z-index: 1;
      width: min(100%, 470px);
      margin: auto; /* auto-margin: tetap bisa di-scroll saat konten lebih tinggi dari layar */
      padding: 40px 34px 40px;
    }

    /* Brand lockup */
    #auth-page .brand-lockup {
      display: block;
      width: 260px;
      margin: 0 auto 32px;
      text-decoration: none;
      transition: transform .3s ease;
    }
    #auth-page .brand-lockup:hover { transform: translateY(-2px); }
    #auth-page .brand-lockup svg { display: block; width: 100%; height: auto; }

    /* Kertas form */
    #auth-page .form-sheet { position: relative; padding: 8px 4px; }
    #auth-page .form-sheet::before {
      content: '✦'; position: absolute; right: 6px; top: 10px;
      color: #bd7d39; font-size: 12px;
    }

    #auth-page .eyebrow,
    #auth-page .field-label,
    #auth-page .paper-folio {
      margin: 0;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
    }
    #auth-page .eyebrow { color: #a15d1e; }

    #auth-page .form-sheet h2,
    #auth-page .form-sheet .auth-form-title {
      margin: 10px 0 8px;
      font-family: 'Marcellus', Georgia, serif;
      font-size: 30px;
      line-height: 1.16;
      color: #422412;
      font-weight: 400;
    }
    #auth-page .form-desc {
      margin: 0 0 22px;
      color: #806956;
      font-size: 13px;
      line-height: 1.65;
    }

    /* Form */
    #auth-page form { display: grid; gap: 15px; margin: 0; }
    #auth-page .name-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
    #auth-page .field-group { display: grid; gap: 7px; }
    #auth-page .field-label { color: #705641; margin-bottom: 0; }

    #auth-page .field-control { position: relative; display: block; }
    #auth-page .input,
    #auth-page .select,
    #auth-page .field-control input,
    #auth-page .field-control select {
      display: block; width: 100%;
      min-height: 46px;
      padding: 0 14px;
      border: 1px solid #d9c4a9;
      border-radius: 3px;
      outline: none;
      background: rgba(255,251,244,.68);
      color: #422412;
      font-family: inherit;
      font-size: 13px;
      transition: border-color .2s, box-shadow .2s, background .2s;
    }
    #auth-page .input:focus,
    #auth-page .select:focus,
    #auth-page .field-control input:focus,
    #auth-page .field-control select:focus {
      border-color: #a95d20;
      background: #fffaf2;
      box-shadow: 0 0 0 3px rgba(181,101,29,.12);
    }
    /* Sisakan ruang untuk tombol mata password */
    #auth-page .password-input-wrap .input { padding-right: 42px; }
    #auth-page input::placeholder { color: #aa947c; opacity: 1; }
    #auth-page input.input-error,
    #auth-page select.input-error {
      border-color: #b3261e;
      background: #fdf1ef;
    }

    #auth-page .password-input-wrap { position: relative; }
    #auth-page .password-toggle-btn {
      position: absolute; right: 8px; top: 50%;
      transform: translateY(-50%);
      border: 0; border-left: 1px solid #e2d2be;
      background: transparent;
      padding: 4px 9px;
      color: #97602e;
      cursor: pointer;
    }
    #auth-page .password-toggle-btn .icon { width: 16px; height: 16px; stroke: currentColor; fill: none; }

    #auth-page .forgot-password,
    #auth-page .auth-switch button {
      justify-self: start;
      border: 0;
      background: none;
      padding: 0;
      color: #97551f;
      font-size: 11px;
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 4px;
      cursor: pointer;
    }
    #auth-page .auth-switch {
      margin: 18px 0 0;
      color: #8a725d;
      font-size: 11px;
      text-align: center;
      letter-spacing: 0;
      text-transform: none;
    }
    #auth-page .auth-switch button { margin-left: 6px; font-size: inherit; }
    #auth-page .auth-switch.margin-top-zero { margin-top: 10px; }

    /* Tombol utama */
    #auth-page .btn-primary,
    #auth-page .submit-button {
      display: flex; align-items: center; justify-content: space-between;
      width: 100%;
      min-height: 50px;
      margin-top: 6px;
      padding: 0 12px 0 18px;
      border: 1px solid #482610;
      border-radius: 2px;
      background: #563017;
      color: #fff4e5;
      box-shadow: 4px 4px 0 #d7b386;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .04em;
      text-align: left;
      cursor: pointer;
      transition: transform .2s, box-shadow .2s, background .2s;
    }
    #auth-page .btn-primary:hover,
    #auth-page .submit-button:hover {
      background: #6e3d19;
      transform: translate(2px, 2px);
      box-shadow: 2px 2px 0 #d7b386;
    }
    #auth-page .btn-primary:disabled,
    #auth-page .submit-button:disabled {
      opacity: .7; cursor: not-allowed; transform: none;
    }
    #auth-page .btn-primary b,
    #auth-page .submit-button b {
      display: grid; width: 26px; height: 26px;
      place-items: center;
      border-radius: 50%;
      background: #c27a31;
      font-size: 16px;
      font-weight: 400;
      color: #fff;
    }
    #auth-page .btn-primary:focus-visible,
    #auth-page .submit-button:focus-visible,
    #auth-page .auth-switch button:focus-visible,
    #auth-page .forgot-password:focus-visible,
    #auth-page .password-toggle-btn:focus-visible {
      outline: 2px solid #b5651d; outline-offset: 3px;
    }

    /* Password meter (state di-set oleh js/app.js: weak / medium / strong) */
    #auth-page .password-meter { margin-top: 4px; }
    #auth-page .password-meter-bar {
      height: 4px; background: #e7d6be; border-radius: 2px; overflow: hidden;
    }
    #auth-page .password-meter-fill {
      height: 100%; width: 0; background: #c27a31; transition: width .25s, background .25s;
    }
    #auth-page .password-meter-fill.weak { width: 33%; background: #d94a3d; }
    #auth-page .password-meter-fill.medium { width: 66%; background: #c27a31; }
    #auth-page .password-meter-fill.strong { width: 100%; background: #3f9d63; }
    #auth-page .password-meter-text {
      margin-top: 4px; color: #8a725d; font-size: 10px; letter-spacing: .04em;
    }

    /* Error / success */
    #auth-page .field-error {
      color: #b3261e; font-size: 11px; margin-top: 4px; min-height: 0;
    }
    #auth-page .form-error {
      color: #b3261e; font-size: 12px; text-align: center; margin-top: 8px;
    }
    #auth-page .form-success { font-size: 12px; }

    /* Folio bawah */
    #auth-page .paper-folio {
      margin: 26px 0 0;
      color: #b09780;
      text-align: center;
      letter-spacing: .22em;
    }

    /* Ornamen sudut bulat */
    #auth-page .paper-corner {
      position: absolute; width: 180px; height: 180px;
      border: 1px solid rgba(134,75,27,.12); border-radius: 50%;
      pointer-events: none;
    }
    #auth-page .paper-corner-top {
      top: -118px; right: -104px;
      box-shadow: 0 0 0 24px rgba(134,75,27,.035), 0 0 0 48px rgba(134,75,27,.025);
    }
    #auth-page .paper-corner-bottom {
      bottom: -126px; left: -108px;
      box-shadow: 0 0 0 23px rgba(134,75,27,.035);
    }

    /* ---------- Kanan: Ledger Panel ---------- */
    #auth-page .ledger-panel {
      position: relative;
      display: flex; flex-direction: column;
      justify-content: space-between;
      min-height: 0; overflow: hidden;
      padding: 44px 52px 40px;
      background: #4c2a14;
      color: #f9dfb6;
      isolation: isolate;
    }
    #auth-page .ledger-panel::before {
      content: ''; position: absolute; inset: 17px;
      z-index: -1; border: 1px solid rgba(245,207,154,.25);
    }
    #auth-page .ledger-panel::after {
      content: ''; position: absolute; inset: 25px;
      z-index: -1; border: 1px solid rgba(245,207,154,.08);
    }
    #auth-page .wood-grain {
      position: absolute; z-index: -2; inset: 0;
      background:
        radial-gradient(ellipse at 30% 45%, transparent 0 18%, rgba(30,12,3,.22) 22%, transparent 27%),
        repeating-linear-gradient(174deg, rgba(255,209,143,.045) 0 1px, transparent 1px 13px),
        linear-gradient(126deg, #2f170a 0%, #5c3317 36%, #75421e 75%, #42220f 100%);
    }
    #auth-page .ledger-topline {
      display: flex; justify-content: space-between;
      color: rgba(245,207,154,.65);
      font-size: 10px; font-weight: 600; letter-spacing: .14em;
    }
    #auth-page .ledger-intro { margin-top: auto; margin-bottom: auto; }
    #auth-page .eyebrow-light {
      color: #e4ae6d;
      font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
      margin: 0;
    }
    /* id="auth-headline-title" dipertahankan: js/app.js menulis judul ini saat
       berpindah form login ↔ daftar ↔ lupa password. */
    #auth-page .ledger-intro h1 {
      margin: 16px 0 24px;
      color: #fff0d6;
      font-family: 'Marcellus', Georgia, serif;
      font-weight: 400;
      font-size: clamp(30px, 3.1vw, 48px);
      line-height: 1.13;
    }
    #auth-page .ledger-intro h1 em { font-style: italic; }
    #auth-page .ledger-rule {
      display: flex; align-items: center; gap: 10px;
    }
    #auth-page .ledger-rule i {
      display: block; width: 74px; height: 1px; background: #d28c42;
    }
    #auth-page .ledger-rule b {
      display: block; width: 6px; height: 6px;
      border: 1px solid #d28c42;
      transform: rotate(45deg);
    }
    #auth-page .ledger-bottom { max-width: 320px; }
    #auth-page blockquote {
      position: relative;
      margin: 0; padding: 0 0 0 22px;
      border-left: 1px solid rgba(235,178,101,.55);
      color: rgba(255,233,195,.82);
      font-family: 'Marcellus', Georgia, serif;
      font-size: 16px; line-height: 1.68;
    }
    #auth-page .quote-mark {
      position: absolute; left: -3px; top: -27px;
      color: #df9746; font-size: 45px;
    }
    #auth-page blockquote cite {
      display: block; margin-top: 12px;
      color: rgba(245,207,154,.52);
      font-family: 'Montserrat', sans-serif;
      font-size: 9px; font-style: normal;
      letter-spacing: .12em; text-transform: uppercase;
    }
    #auth-page .ledger-list {
      display: grid; gap: 12px;
      margin: 0; padding: 0; list-style: none;
      color: rgba(255,233,195,.82);
      font-size: 12px;
    }
    #auth-page .ledger-list li { display: flex; gap: 12px; align-items: center; }
    #auth-page .ledger-list span {
      color: #dda05c;
      font-family: 'Marcellus', Georgia, serif;
      font-size: 13px;
    }
    #auth-page .ledger-footer {
      display: flex; align-items: center; gap: 11px;
      margin-top: 32px;
      color: rgba(245,207,154,.52);
      font-size: 8px; font-weight: 600;
      letter-spacing: .12em; line-height: 1.6;
    }
    #auth-page .wax-seal {
      display: grid; width: 30px; height: 30px;
      place-items: center;
      border: 1px solid rgba(245,207,154,.45);
      border-radius: 50%;
      color: #f1c083;
      font-family: 'Marcellus', Georgia, serif;
      font-size: 12px;
    }

    /* ---------- Bingkai halaman (backdrop) ----------
       index.html mendapat bingkai hangat ini dari employee-mockup.css:
         html body { background: #1c1613 !important }
         @media (min-width:1024px) { body { padding: 24px !important } }
       Tapi admin.html TIDAK memuat employee-mockup.css (file itu tema app
       karyawan — memuatnya akan merombak desain app admin), sehingga
       body-nya tetap biru tua dari layout-fix.css dan auth-page (yang
       dikecilkan 48px oleh media query di bawah) menyisakan celah gelap
       di bawah. Rule di sini menormalkan body HANYA selagi auth tampil,
       lewat :has(> #auth-page:not(.hidden)) — begitu user login,
       .hidden ditambahkan dan app shell kembali ke aturan body semula. */
    @media (min-width: 500px) {
      body:has(> #auth-page:not(.hidden)) {
        padding: 24px !important;
        align-items: center !important;
        background: #1c1613 !important;
      }
    }

    /* ---------- Responsif ---------- */
    @media (min-width: 500px) {
      /* body memberi padding 24px & align-items:center di ≥500px */
      #auth-page.auth-ura {
        height: calc(100vh - 48px);
        height: calc(100dvh - 48px);
      }
    }
    @media (max-width: 960px) {
      #auth-page.auth-ura { grid-template-columns: minmax(0, 1fr); }
      #auth-page .ledger-panel { display: none; }
      #auth-page .auth-content { padding-block: 42px 36px; }
    }
    @media (max-width: 480px) {
      #auth-page .auth-paper { padding: 12px; }
      #auth-page .auth-paper::before { inset: 12px; }
      #auth-page .auth-paper::after { inset: 19px; }
      #auth-page .auth-content { padding: 32px 22px 28px; }
      #auth-page .brand-lockup { width: 215px; margin-bottom: 26px; }
      #auth-page .form-sheet h2,
      #auth-page .form-sheet .auth-form-title { font-size: 26px; }
      #auth-page .name-fields { grid-template-columns: 1fr; gap: 15px; }
    }