/* Login mobile styles extracted from css/mobile.css */
@media (max-width: 640px) {
      /* Login mobile — correct selectors */
      .lo-mob-brand {
        display: flex !important
      }

      /* Two-panel flex container → stack vertically */
      .lo-container {
        flex-direction: column !important;
        overflow-y: auto !important;
        align-items: center !important;
      }

      /* Left info panel → hide on mobile, show only form */
      .lo-left-panel {
        display: none !important;
      }

      /* Right form panel → full width, centred */
      .lo-right-panel {
        width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 0 !important;
        min-height: 0 !important;
        padding: 16px 14px calc(32px + env(safe-area-inset-bottom, 0px)) !important;
        justify-content: flex-start !important;
        align-items: center !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
      }

      /* Form card inner padding — compact on mobile */
      .lo-form-card {
        width: 100% !important;
        max-width: 420px !important;
        padding: 28px 22px 24px !important;
        border-radius: 20px !important;
        backdrop-filter: blur(22px) !important;
        -webkit-backdrop-filter: blur(22px) !important;
        box-sizing: border-box !important;
        overflow: visible !important; /* allow content to be fully visible on mobile */
      }

      .lo-roles {
        grid-template-columns: 1fr 1fr;
        gap: 6px
      }

      .lo-role {
        padding: 10px 10px
      }

      .lo-role .rl {
        font-size: 12px;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
      }

      .lo-role .rd {
        font-size: 11px;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
      }

      /* Login overlay — full width on mobile, no horizontal scroll */
      #login-overlay {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        max-width: 100vw !important;
        -webkit-overflow-scrolling: touch;
      }

      /* Prevent sidebar bleed only while login overlay is actually shown */
      body:has(#login-overlay[style*="display: flex"]) #sidebar,
      body:has(#login-overlay[style*="display:flex"]) #sidebar {
        display: none !important;
      }

      /* Ensure login container is fully responsive on mobile */
      .lo-container {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        min-height: 0 !important;
      }

      /* Force all inputs within login to stay within viewport */
      #login-overlay input,
      #login-overlay select,
      #login-overlay button,
      #login-overlay textarea {
        max-width: 100% !important;
        box-sizing: border-box !important;
      }

      /* Pastikan semua field dan wrapper login sama lebar */
      #login-overlay .lo-field {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
      }

      #login-overlay .lo-field-wrap {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
      }

      #login-overlay .lo-inp,
      #login-overlay #lo-user,
      #login-overlay #lo-pass {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        flex: 1 1 auto !important;
        height: 48px !important;
      }

      /* Butang togol mata — absolute, tidak mempengaruhi lebar */
      #login-overlay .lo-toggle-pw {
        position: absolute !important;
        right: 11px !important;
        width: auto !important;
        flex: none !important;
      }

      /* Header text in form card — wrap properly */
      #login-overlay h2,
      #login-overlay h3,
      #login-overlay .lo-mob-brand,
      #login-overlay .lo-facility-name {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto;
        max-width: 100% !important;
      }

      /* Access badge — wrap on small screens */
      .lo-access-badge {
        flex-wrap: wrap;
        max-width: 100%;
        box-sizing: border-box;
      }

      /* Alert messages — fit within card */
      .lo-alert {
        max-width: 100%;
        box-sizing: border-box;
        flex-wrap: wrap;
      }

      /* Remember me row — prevent overflow */
      #login-overlay label[for="lo-remember"],
      #login-overlay form > label {
        max-width: 100%;
        box-sizing: border-box;
        word-wrap: break-word;
        overflow-wrap: break-word;
      }

      /* Top ticker on mobile — compact */
      #login-overlay > div:first-child {
        padding: 0 12px !important;
      }

      /* Safe-area padding for iPhone notch */
      #login-overlay > div[style*="padding-top:40px"] {
        padding-top: calc(40px + env(safe-area-inset-top, 0px)) !important;
        padding-left: env(safe-area-inset-left, 0px) !important;
        padding-right: env(safe-area-inset-right, 0px) !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
      }
}
@media (max-width: 640px) {
  #tpf-form-wrap {
    justify-content: flex-start !important;
    padding: 8px 14px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #tpf-form-wrap .lo-form-card {
    padding: 18px 16px 14px !important;
    border-radius: 18px !important;
  }
  #tpf-form-wrap .lo-form-card > div:first-of-type,
  #tpf-form-wrap .lo-form-card > div[style*="margin-bottom:20px"] {
    margin-bottom: 8px !important;
  }
  #tpf-form-wrap .lo-form-card > div[style*="margin-bottom:20px"] > div:first-child {
    font-size: 18px !important;
    margin-bottom: 1px !important;
  }
  #tpf-form-wrap .lo-form-card > div[style*="margin-bottom:20px"] > div:last-child {
    font-size: 10px !important;
  }
  #tpf-form-wrap .lo-roles {
    gap: 6px !important;
    margin-bottom: 8px !important;
  }
  #tpf-form-wrap .lo-role {
    padding: 8px 10px !important;
    min-height: 40px !important;
  }
  #tpf-form-wrap .lo-role .rl {
    font-size: 11px !important;
  }
  #tpf-form-wrap .lo-role .rd {
    font-size: 9px !important;
  }
  #tpf-form-wrap .lo-inp {
    height: 42px !important;
    font-size: 15px !important;
    padding: 0 10px 0 38px !important;
  }
  #tpf-form-wrap .lo-field {
    margin-bottom: 8px !important;
  }
  #tpf-form-wrap .lo-field label {
    font-size: 10px !important;
    margin-bottom: 3px !important;
  }
  #tpf-form-wrap .lo-submit {
    padding: 13px 20px !important;
    font-size: 15px !important;
    margin-top: 8px !important;
  }
  #tpf-form-wrap label[for="lo-remember"],
  #tpf-form-wrap form > label {
    font-size: 12px !important;
    margin-top: 6px !important;
    padding: 2px 0 !important;
  }
  #tpf-form-wrap button[onclick="openRequestModal()"] {
    font-size: 11px !important;
    padding: 6px 14px !important;
  }
  #tpf-form-wrap .lo-access-badge {
    padding: 4px 8px !important;
    font-size: 10px !important;
    margin-bottom: 6px !important;
  }
  #tpf-form-wrap .lo-form-card > div[style*="text-align:center;font-size:11px"] {
    margin-top: 4px !important;
    font-size: 9px !important;
  }
  #tpf-form-wrap .lo-form-card > div[style*="text-align:center;margin-top:14px"] {
    margin-top: 4px !important;
  }
  #tpf-back-bar {
    padding: 8px 14px 0 !important;
  }
  #tpf-back-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }
  #tpf-back-clinic {
    font-size: 10px !important;
  }
}


@media (max-width: 640px) and (max-height: 680px) {
  #tpf-form-wrap {
    padding: 4px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #tpf-form-wrap .lo-form-card {
    padding: 14px 14px 12px !important;
    border-radius: 16px !important;
  }
  #tpf-form-wrap .lo-form-card > div[style*="margin-bottom:20px"] {
    margin-bottom: 6px !important;
  }
  #tpf-form-wrap .lo-form-card > div[style*="margin-bottom:20px"] > div:first-child {
    font-size: 16px !important;
    margin-bottom: 0 !important;
  }
  #tpf-form-wrap .lo-roles {
    gap: 4px !important;
    margin-bottom: 6px !important;
  }
  #tpf-form-wrap .lo-role {
    padding: 6px 8px !important;
    min-height: 36px !important;
  }
  #tpf-form-wrap .lo-role .rl {
    font-size: 10px !important;
  }
  #tpf-form-wrap .lo-role .rd {
    font-size: 8px !important;
  }
  #tpf-form-wrap .lo-inp {
    height: 38px !important;
    font-size: 14px !important;
    padding: 0 8px 0 34px !important;
  }
  #tpf-form-wrap .lo-field label {
    font-size: 9px !important;
    margin-bottom: 2px !important;
  }
  #tpf-form-wrap .lo-field {
    margin-bottom: 6px !important;
  }
  #tpf-form-wrap .lo-submit {
    padding: 10px 16px !important;
    font-size: 13px !important;
    margin-top: 6px !important;
  }
  #tpf-form-wrap #lo-remember {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
  }
  #tpf-form-wrap label[for="lo-remember"],
  #tpf-form-wrap form > label {
    font-size: 11px !important;
    margin-top: 4px !important;
  }
  #tpf-form-wrap button[onclick="openRequestModal()"] {
    font-size: 10px !important;
    padding: 4px 12px !important;
  }
  #tpf-form-wrap .lo-access-badge {
    padding: 3px 6px !important;
    font-size: 9px !important;
    margin-bottom: 4px !important;
  }
  #tpf-back-bar {
    padding: 6px 12px 0 !important;
  }
  #tpf-back-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }
  #tpf-back-clinic {
    font-size: 9px !important;
  }
  #tpf-form-wrap .lo-form-card > div[style*="text-align:center;font-size:11px"] {
    margin-top: 3px !important;
    font-size: 8px !important;
  }
  #tpf-form-wrap .lo-form-card > div[style*="text-align:center;margin-top:14px"] {
    margin-top: 3px !important;
  }
  /* Welcome page: tighter spacing on short screens */
  #tpf-welcome {
    padding: 14px 14px 10px !important;
  }
  #tpf-brand {
    margin-bottom: 16px !important;
  }
  #tpf-clock {
    font-size: 28px !important;
  }
  #tpf-title h1 {
    font-size: 20px !important;
  }
  .tpf-stat {
    padding: 10px 12px !important;
  }
  .tpf-stat-num {
    font-size: 24px !important;
  }
  #tpf-stats {
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  #tpf-quote {
    padding: 12px 14px 12px 18px !important;
    margin-bottom: 14px !important;
  }
  #tpf-cta {
    padding: 14px 18px !important;
    font-size: 14px !important;
  }
}


@media (max-width: 640px) and (max-height: 580px) {
  #tpf-form-wrap {
    padding: 2px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #tpf-form-wrap .lo-form-card {
    padding: 10px 12px 8px !important;
    border-radius: 14px !important;
  }
  #tpf-form-wrap .lo-form-card > div[style*="margin-bottom:20px"] {
    margin-bottom: 4px !important;
  }
  #tpf-form-wrap .lo-form-card > div[style*="margin-bottom:20px"] > div:first-child {
    font-size: 15px !important;
    margin-bottom: 0 !important;
  }
  #tpf-form-wrap .lo-form-card > div[style*="margin-bottom:20px"] > div:last-child {
    font-size: 9px !important;
  }
  #tpf-form-wrap .lo-roles {
    gap: 3px !important;
    margin-bottom: 4px !important;
  }
  #tpf-form-wrap .lo-role {
    padding: 5px 7px !important;
    min-height: 30px !important;
  }
  #tpf-form-wrap .lo-role .rl {
    font-size: 9px !important;
  }
  #tpf-form-wrap .lo-role .rd {
    font-size: 7px !important;
  }
  #tpf-form-wrap .lo-inp {
    height: 34px !important;
    font-size: 13px !important;
    padding: 0 6px 0 32px !important;
  }
  #tpf-form-wrap .lo-field label {
    font-size: 9px !important;
    margin-bottom: 1px !important;
  }
  #tpf-form-wrap .lo-field {
    margin-bottom: 4px !important;
  }
  #tpf-form-wrap .lo-submit {
    padding: 8px 14px !important;
    font-size: 12px !important;
    margin-top: 4px !important;
  }
  #tpf-back-bar {
    padding: 4px 10px 0 !important;
  }
  #tpf-back-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
  }
  #tpf-back-clinic {
    font-size: 8px !important;
  }
  #tpf-form-wrap label[for="lo-remember"],
  #tpf-form-wrap form > label {
    font-size: 10px !important;
    margin-top: 3px !important;
  }
  #tpf-form-wrap button[onclick="openRequestModal()"] {
    font-size: 9px !important;
    padding: 3px 10px !important;
  }
}


@media (max-width: 360px) {
  #tpf-cta { font-size: 15px !important; min-height: 52px !important; gap: 8px !important; }
  #tpf-form-wrap .lo-submit { font-size: 14px !important; min-height: 50px !important; }
  #tpf-form-wrap .lo-role { min-height: 48px !important; padding: 10px 12px !important; }
  #tpf-form-wrap .lo-role .rl { font-size: 12px !important; }
  #tpf-form-wrap .lo-role .rd { font-size: 10px !important; }
  #tpf-form-wrap .lo-inp { font-size: 16px !important; min-height: 44px !important; height: 44px !important; }
  #tpf-welcome { padding-left: 18px !important; padding-right: 18px !important; }
  #tpf-form-wrap { padding-left: 14px !important; padding-right: 14px !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   MOBILE LOGIN FIELD PAIR REFINEMENT — ID Pengguna & Kata Laluan
   Scope  : #lo-user and #lo-pass inputs + eye toggle ONLY
   Goal   : Pixel-identical box model on both fields; eye icon centred
   Widths : 320 → 414 px  (guarded by max-width: 640px)
   NOTE   : Selectors use 3-ID chains (specificity 0,3,1) to safely
            override login-icons.css which loads after this file.
   ZERO changes to auth logic, role cards, or page layout.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── 1. Field wrapper — reliable stacking context ────────────── */
  #login-overlay #lo-form .lo-field-wrap,
  #tpf-form-wrap  #lo-form .lo-field-wrap {
    position:    relative   !important;
    display:     flex       !important;
    align-items: center     !important;
    width:       100%       !important;
    box-sizing:  border-box !important;
    overflow:    visible    !important;
  }

  /* ── 2. Both inputs — identical dimensions, border, padding ───── */
  #login-overlay #lo-form #lo-user.lo-inp,
  #login-overlay #lo-form #lo-pass.lo-inp,
  #tpf-form-wrap  #lo-form #lo-user.lo-inp,
  #tpf-form-wrap  #lo-form #lo-pass.lo-inp {
    height:         48px                              !important;
    min-height:     48px                              !important;
    padding-top:     0                                !important;
    padding-bottom:  0                                !important;
    padding-left:   44px                              !important;
    border:         2px solid rgba(174,153,220,0.75)  !important;
    border-radius:  10px                              !important;
    font-size:      15px                              !important;
    font-weight:    400                               !important;
    box-sizing:     border-box                        !important;
    flex:           1 1 auto                          !important;
    min-width:      0                                 !important;
    width:          100%                              !important;
  }

  /* Username — no toggle button on the right */
  #login-overlay #lo-form #lo-user.lo-inp,
  #tpf-form-wrap  #lo-form #lo-user.lo-inp {
    padding-right: 14px !important;
  }

  /* Password — extra right clearance for the eye button */
  #login-overlay #lo-form #lo-pass.lo-inp,
  #tpf-form-wrap  #lo-form #lo-pass.lo-inp {
    padding-right: 48px !important;
  }

  /* ── 3. Left field icon — perfectly centred in both fields ────── */
  #login-overlay #lo-form .lo-field-icon.lo-svg-icon,
  #tpf-form-wrap  #lo-form .lo-field-icon.lo-svg-icon {
    position:       absolute          !important;
    left:           14px              !important;
    top:            50%               !important;
    transform:      translateY(-50%)  !important;
    width:          18px              !important;
    height:         18px              !important;
    pointer-events: none              !important;
    z-index:        2                 !important;
  }

  /* ── 4. Eye toggle — fixed tap target, centred, no layout bleed ─ */
  #login-overlay #lo-form #lo-pw-toggle.lo-toggle-pw,
  #tpf-form-wrap  #lo-form #lo-pw-toggle.lo-toggle-pw {
    position:        absolute          !important;
    right:           6px               !important;
    top:             50%               !important;
    transform:       translateY(-50%)  !important;
    width:           36px              !important;
    height:          36px              !important;
    min-width:       36px              !important;
    min-height:      36px              !important;
    padding:         0                 !important;
    margin:          0                 !important;
    display:         inline-flex       !important;
    align-items:     center            !important;
    justify-content: center            !important;
    flex:            none              !important;
    box-sizing:      border-box        !important;
    z-index:         3                 !important;
  }
}

/* ── Short screen ≤ 680px tall — scale field pair together ───────── */
@media (max-width: 640px) and (max-height: 680px) {
  #tpf-form-wrap #lo-form #lo-user.lo-inp,
  #tpf-form-wrap #lo-form #lo-pass.lo-inp {
    height:     44px !important;
    min-height: 44px !important;
  }
  #tpf-form-wrap #lo-form #lo-pw-toggle.lo-toggle-pw {
    height:     34px !important;
    min-height: 34px !important;
    width:      34px !important;
    min-width:  34px !important;
  }
}

/* ── Very short screen ≤ 580px tall ─────────────────────────────── */
@media (max-width: 640px) and (max-height: 580px) {
  #tpf-form-wrap #lo-form #lo-user.lo-inp,
  #tpf-form-wrap #lo-form #lo-pass.lo-inp {
    height:     40px !important;
    min-height: 40px !important;
  }
  #tpf-form-wrap #lo-form #lo-pw-toggle.lo-toggle-pw {
    height:     30px !important;
    min-height: 30px !important;
    width:      30px !important;
    min-width:  30px !important;
  }
}

/* ── 360px narrow — match existing 44px tap-target preference ────── */
@media (max-width: 360px) {
  #tpf-form-wrap #lo-form #lo-user.lo-inp,
  #tpf-form-wrap #lo-form #lo-pass.lo-inp {
    height:     44px !important;
    min-height: 44px !important;
    font-size:  14px !important;
  }
}